/* jim landing — vanilla port of Claude Design copy-deck-light.dc.html
   Source: Claude Design project f94ccb3f-5d64-4244-a34f-dd093c9125cd */

html{scroll-behavior:smooth}
html,body{margin:0;padding:0;background:#FAFAFA}
*{box-sizing:border-box}
a{color:#111111;text-decoration:none}
a:hover{color:#000000}
::selection{background:#22C55E;color:#09090B}

#what-is-jim,#how-it-works,#the-app,#your-data,#testflight,#contact{scroll-margin-top:72px}

body{
  background:#FAFAFA;
  color:#111111;
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  line-height:1.7;
}

@keyframes jimBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes jimShake{0%{transform:none}12%{transform:translate(-7px,3px) rotate(-.6deg)}28%{transform:translate(6px,-4px) rotate(.5deg)}44%{transform:translate(-5px,-2px)}62%{transform:translate(4px,3px) rotate(.3deg)}80%{transform:translate(-2px,-1px)}100%{transform:none}}

/* ---------- top nav ---------- */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:56px;
  background:rgba(250,250,250,0.88);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-bottom:1px solid #E5E5E5;
  transform:translateY(-100%);
  opacity:0;
}
.site-nav.nav-visible{
  transition:transform 600ms cubic-bezier(.2,.8,.3,1),opacity 600ms cubic-bezier(.2,.8,.3,1);
  transform:translateY(0);
  opacity:1;
}
.nav-inner{height:56px;padding:0 24px;display:flex;align-items:center;justify-content:space-between}
.nav-wordmark{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:500;font-size:20px;color:#111111;text-decoration:none}
.nav-wordmark .faint{color:#999999}
.nav-right{display:flex;align-items:center;gap:28px}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-link{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:0.08em;color:#666666;text-decoration:none;transition:color 160ms ease}
.nav-link:hover{color:#111111}
.nav-cta{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:500;font-size:13px;background:#22C55E;color:#09090B;padding:8px 16px;border-radius:6px;text-decoration:none;transition:background 160ms ease}
.nav-cta:hover{background:#4ADE80;color:#09090B}
.nav-menu-btn{display:none;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:0.08em;color:#111111;background:none;border:none;cursor:pointer;padding:8px}
.nav-panel{display:none;position:fixed;top:56px;left:0;right:0;z-index:999;flex-direction:column;background:rgba(250,250,250,0.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid #E5E5E5}
.nav-panel.nav-panel-open{display:flex}
.nav-panel-link,.nav-panel-cta{font-family:'JetBrains Mono',monospace;font-size:16px;color:#111111;text-decoration:none;padding:0 24px;min-height:48px;display:flex;align-items:center;border-bottom:1px solid #E5E5E5}
.nav-panel-cta{color:#22C55E}

/* ---------- hero (jim Hero v2, mode=light) ---------- */
.hero-wrap{height:100vh;height:100svh}
.jim-hero{
  --ink:#111111;--muted:#666666;--faint:#999999;--bg:#FAFAFA;
  background:var(--bg);
  color:var(--ink);
  font-family:'Space Grotesk',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  height:100%;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:64px 24px;
  position:relative;
  overflow:hidden;
  user-select:none;
}
.hero-welcome{opacity:0;transform:translateY(8px);font-weight:400;font-size:22px;letter-spacing:0.01em;color:var(--muted);margin-bottom:64px;text-align:center}
.hero-lockup{position:relative;display:flex;justify-content:center;align-items:center}
.hero-row{position:relative;display:flex;align-items:baseline;justify-content:center;font-weight:500;font-size:clamp(64px,11.5vw,112px);line-height:1;letter-spacing:-0.02em;white-space:nowrap;will-change:transform}
.hero-ch{opacity:0;display:inline-block;will-change:transform}
.hero-dot{font-size:0.62em;color:var(--faint);padding:0 0.02em}
.hero-cursor{position:absolute;left:100%;bottom:0.1em;width:0.045em;height:0.78em;margin-left:0.06em;background:var(--ink);opacity:0}
.hero-bar{position:absolute;left:50%;top:50%;width:10px;opacity:0;will-change:transform;pointer-events:none}
.hero-armL{position:absolute;left:50%;top:50%;width:10px;height:10px;pointer-events:none}
.hero-armR{position:absolute;left:50%;top:50%;width:10px;height:10px;transform:scaleX(-1);pointer-events:none}
.hero-armInner{width:100%;height:100%;transform-origin:50% 100%;transform:rotate(150deg) scale(0);will-change:transform}
.hero-tagline{opacity:0;transform:translateY(10px);margin-top:132px;text-align:center;display:flex;flex-direction:column;gap:18px;align-items:center}
.hero-headline{font-weight:500;font-size:clamp(19px,2.2vw,24px);letter-spacing:-0.01em;color:var(--ink)}
.hero-scroll{position:absolute;bottom:36px;left:0;right:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;opacity:0;font-family:'JetBrains Mono',monospace;color:var(--faint)}
.hero-scroll-hint{font-size:12px;letter-spacing:0.04em;color:var(--faint)}
.hero-scroll-arrow{font-size:13px;color:var(--faint)}

/* ---------- merge (jim Merge, mode=light) ---------- */
.merge-wrap{border-bottom:1px solid #E5E5E5}
.jim-merge{
  --ink:#111111;--muted:#666666;--faint:#999999;--bg:#FAFAFA;
  background:var(--bg);
  color:var(--ink);
  font-family:'Space Grotesk',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:72vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:36px;
  padding:120px 24px;
  overflow:hidden;
  user-select:none;
}
.merge-hence{opacity:0;transform:translateY(8px);font-weight:400;font-size:20px;color:var(--muted)}
.merge-stage{position:relative;display:flex;align-items:baseline;justify-content:center;font-weight:500;font-size:clamp(52px,9vw,96px);line-height:1;letter-spacing:-0.02em;white-space:nowrap;will-change:transform}
.merge-left,.merge-right{display:inline-block;will-change:transform}
.merge-dot{display:inline-block;font-size:0.62em;color:var(--faint);padding:0 0.02em;opacity:0;transform:scale(0.2);will-change:transform}
.merge-spark{position:absolute;left:50%;top:45%;width:220px;height:220px;margin:-110px 0 0 -110px;opacity:0;transform:scale(0.3);pointer-events:none}

/* ---------- the split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #E5E5E5;border-bottom:1px solid #E5E5E5}
.split-col{padding:130px 72px;display:flex;flex-direction:column;gap:14px}
.split-col--jim{background:#FFFFFF;border-right:1px solid #E5E5E5}
.split-col--Jim{background:#FAFAFA}
.split-h1{font-weight:500;font-size:64px;line-height:1;letter-spacing:-0.02em}
.split-sub{font-weight:400;font-size:19px;color:#666666;margin-bottom:32px}
.gymnasion{border-top:1px solid #E5E5E5;border-bottom:1px solid #E5E5E5;padding:22px 0;margin-bottom:32px;font-family:'JetBrains Mono',monospace;line-height:1.6;display:flex;flex-direction:column;gap:4px}
.gymnasion-head{font-size:15px;color:#111111}
.g-999{color:#999999}
.g-666{color:#666666}
.gymnasion-pos{font-size:12px;color:#999999;letter-spacing:0.04em}
.g-italic{font-style:italic}
.gymnasion-def{font-size:13px;color:#666666;padding-left:16px;text-indent:-16px}
.split-p{margin:0;font-size:17px;line-height:1.7;max-width:46ch;text-wrap:pretty}
.split-p--ink{color:#111111}
.split-p--muted{color:#666666}

/* ---------- how it works ---------- */
.how-it-works{background:#FFFFFF;border-bottom:1px solid #E5E5E5}
.section-narrow{max-width:760px;margin:0 auto;padding:150px 32px}
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:0.24em;text-transform:uppercase;color:#999999;margin-bottom:28px}
.h2-42{margin:0 0 36px;font-weight:500;font-size:42px;line-height:1.15;letter-spacing:-0.02em}
.stack-24{display:flex;flex-direction:column;gap:24px}
.p-18{margin:0;font-size:18px;line-height:1.7;text-wrap:pretty}
.p-18--ink{color:#111111}
.p-18--muted{color:#666666}
.p-58ch{max-width:58ch}
.pull-quote{margin:44px 0;font-weight:500;font-size:26px;line-height:1.45;letter-spacing:-0.01em;color:#111111;max-width:42ch;text-wrap:pretty}

/* ---------- shared section shells ---------- */
.section-1080{max-width:1080px;margin:0 auto;padding:150px 32px}
.feature-grid{display:grid;grid-template-columns:1fr 264px;gap:80px;align-items:center}
.feature-grid--phone-first{grid-template-columns:264px 1fr}
.h2-36{margin:0 0 32px;font-weight:500;font-size:36px;line-height:1.2;letter-spacing:-0.02em}
.max-22ch{max-width:22ch;text-wrap:pretty}
.stack-20{display:flex;flex-direction:column;gap:20px}
.p-17{margin:0;font-size:17px;line-height:1.7;text-wrap:pretty}
.p-17--ink{color:#111111}
.p-17--muted{color:#666666}
.p-56ch{max-width:56ch}
.p-54ch{max-width:54ch}
.phone{width:264px;aspect-ratio:9/19.5;border:1px dashed #E5E5E5;border-radius:30px;overflow:hidden}
.phone--white{background:#FFFFFF}
.phone--faint{background:#FAFAFA}
.shot{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:11px;color:#999999;text-align:center;padding:8px}

/* ---------- whats in the app ---------- */
.whats-in-app{border-top:1px solid #E5E5E5;background:#FFFFFF}
.whats-intro{margin-bottom:120px}
.p-24{margin:0;font-weight:500;font-size:24px;line-height:1.45;letter-spacing:-0.015em;color:#111111;max-width:40ch;text-wrap:pretty}
.feature-stack{display:flex;flex-direction:column;gap:130px}
.h3-30{margin:0;font-weight:500;font-size:30px;line-height:1.2;letter-spacing:-0.02em}
.data-accents{font-family:'JetBrains Mono',monospace;font-size:15px;display:flex;gap:22px;margin-top:4px}
.accent-blue{color:#60A5FA}
.accent-green{color:#4ADE80}
.accent-purple{color:#C084FC}
.accent-ink{color:#111111}
.data-accent-line{font-family:'JetBrains Mono',monospace;font-size:15px;color:#111111;margin-top:4px}

/* ---------- native tracking ---------- */
.native-tracking{border-top:1px solid #E5E5E5}
.max-660{max-width:660px}
.version-one{margin:80px 0;font-weight:500;font-size:34px;line-height:1.3;letter-spacing:-0.02em;color:#111111}
.tri-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:100px}
.tri-item{display:flex;flex-direction:column;gap:14px}
.tri-item--offset{margin-top:48px}
.tri-label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:#999999}

/* ---------- punchline ---------- */
.punchline{border-top:1px solid #E5E5E5;border-bottom:1px solid #E5E5E5;background:#FFFFFF;padding:220px 32px;display:flex;justify-content:center;text-align:center}
.punchline-text{margin:0;font-weight:500;font-size:clamp(34px,5vw,62px);line-height:1.2;letter-spacing:-0.025em;color:#111111;max-width:24ch;text-wrap:pretty}

/* ---------- data sovereignty ---------- */
.sovereignty{padding:170px 32px}
.h2-56{margin:0;font-weight:500;font-size:56px;line-height:1.1;letter-spacing:-0.025em}
.full-stop{font-weight:400;font-size:22px;color:#666666;margin:12px 0 60px}
.max-640{max-width:640px}
.sovereignty-close{margin:90px 0 0;font-weight:500;font-size:32px;line-height:1.35;letter-spacing:-0.02em;color:#111111;max-width:26ch;text-wrap:pretty}

/* ---------- app preview ---------- */
.app-preview{border-top:1px solid #E5E5E5;background:#FFFFFF}
.preview-lead{margin:0 0 80px;font-weight:500;font-size:34px;line-height:1.25;letter-spacing:-0.02em}

/* ---------- beta cta ---------- */
.beta-cta{border-top:1px solid #E5E5E5;padding:190px 32px;display:flex;flex-direction:column;align-items:center;gap:44px;text-align:center}
.beta-headline{font-weight:500;font-size:38px;letter-spacing:-0.02em;line-height:1.3;max-width:24ch}
.cta-btn{display:inline-flex;align-items:center;gap:10px;background:#22C55E;color:#09090B;font-weight:500;font-size:18px;padding:16px 36px;border-radius:8px;text-decoration:none}
.cta-btn:hover{background:#4ADE80;color:#09090B}
.beta-fine{font-family:'JetBrains Mono',monospace;font-size:12px;color:#999999}

/* ---------- contact ---------- */
.contact-section{border-top:1px solid #E5E5E5;background:#FFFFFF}
.contact-details{display:flex;flex-direction:column;gap:14px;margin-top:40px;font-family:'JetBrains Mono',monospace;font-size:15px;color:#111111}
.contact-row{display:flex;gap:12px}
.contact-label{color:#999999;display:inline-block;min-width:80px}
.contact-details a:hover{color:#666666;text-decoration:underline}
.contact-legal{margin-top:40px;font-family:'JetBrains Mono',monospace;font-size:13px;color:#999999}
.contact-legal a{color:#999999}
.contact-legal a:hover{color:#666666;text-decoration:underline}

/* ---------- footer ---------- */
.footer{border-top:1px solid #E5E5E5;padding:40px 32px;display:flex;flex-direction:column;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:12px;color:#999999}
.footer-links{display:flex;gap:24px}
.footer-link{color:#999999;text-decoration:none}
.footer-link:hover{color:#666666;text-decoration:underline}

/* =========================================================
   JIM CRITTER — floating mascot (Round 3 addition, critter.js)
   Position/rotation/scale driven entirely by JS via transform
   on a fixed 0,0-anchored box (translate = viewport px), so
   every frame is compositor-only — no layout writes. Always
   pointer-events:none; sits below .site-nav (1000) and
   .nav-panel (999) so it can never block a click or the nav.
   Desktop pointer devices only — see critter.js init gate.
   ========================================================= */
.jim-critter{
  position:fixed;
  top:0;
  left:0;
  width:56px;
  color:#111111;
  pointer-events:none;
  z-index:500;
  will-change:transform;
  opacity:0;
  transition:opacity 500ms ease-out;
}
.jim-critter svg{display:block;width:100%;height:auto}

/* =========================================================
   MOBILE — sanctioned addition beyond the deck (NOTES.md §Addition)
   Desktop >=769px renders exactly per the deck above this point.
   ========================================================= */
/* ---------- philosophy ---------- */
.philosophy-inner{display:flex;flex-direction:column;align-items:center;text-align:center}
.philosophy-inner .eyebrow{margin-bottom:44px}
.philosophy-quote{margin:52px 0 14px;font-weight:500;font-size:clamp(19px,2.6vw,25px);line-height:1.4;letter-spacing:-0.01em;color:#111111;max-width:30ch;text-wrap:balance}
.philosophy-attrib{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:0.08em;color:#999999}
.philosophy-art{margin:0;font-family:'JetBrains Mono',monospace;font-weight:400;font-size:clamp(4px,1.55vw,7.5px);line-height:1.08;color:#111111;opacity:0.85;max-width:100%;overflow:hidden}
.philosophy-caption{margin-top:28px;font-family:'JetBrains Mono',monospace;font-size:12px;color:#666666}

@media (max-width:768px){
  .split{grid-template-columns:1fr}
  .split-col{padding:90px 20px}
  .split-col--jim{border-right:none;border-bottom:1px solid #E5E5E5}
  .split-h1{font-size:48px}

  .section-narrow{padding:90px 20px}
  .section-1080{padding:90px 20px}
  .sovereignty{padding:90px 20px}
  .punchline{padding:90px 20px}
  .beta-cta{padding:90px 20px}

  .h2-42{font-size:clamp(28px,7vw,42px)}
  .h2-56{font-size:clamp(32px,8vw,56px)}
  .h2-36{font-size:clamp(26px,6vw,36px)}
  .pull-quote{font-size:clamp(20px,5vw,26px)}
  .version-one{font-size:clamp(26px,6.5vw,34px)}
  .sovereignty-close{font-size:clamp(24px,6vw,32px)}
  .preview-lead{font-size:clamp(26px,6vw,34px)}
  .beta-headline{font-size:clamp(28px,7vw,38px)}

  .feature-grid,.feature-grid--phone-first{display:flex;flex-direction:column;gap:40px}
  .feature-grid .phone,.feature-grid--phone-first .phone{order:2;margin:0 auto;width:100%;max-width:280px}

  .tri-grid{grid-template-columns:1fr;gap:40px}
  .tri-item--offset{margin-top:0}

  .nav-links{display:none}
  .nav-menu-btn{display:inline-flex}
  .nav-right{gap:12px}

  .contact-row{flex-wrap:wrap}
  .contact-details a,.contact-details span{overflow-wrap:anywhere;min-width:0}
}