/* ═══════════════════════════════════════════════════════════════════════
   Outcompet — landing page
   Editorial B2B system: warm paper ground, hairline elevation, tight
   display type, left-aligned copy in centered containers, expo-out motion.
   Palette is Outcompet's own product palette (src/web/static/css/tokens.css).
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* Ground */
  --bone:      #faf9f6;
  --wash:      #f2f0ec;
  --white:     #ffffff;
  --invert:    #1a1a18;
  --invert-2:  #232220;

  /* Ink */
  --ink:       #1a1a18;
  --ink-2:     #55534b;
  --ink-3:     #86837a;
  --on-dark:   #f5f3ee;
  --on-dark-2: #a5a29a;

  /* Accent */
  --lime:      #cdf23f;
  --lime-deep: #b4d92b;
  --green:     #1f7a43;
  --green-2:   #186336;
  --green-soft:#e4f3e9;

  /* Line */
  --line:      rgba(26,26,24,.13);
  --line-2:    rgba(26,26,24,.24);
  --line-dark: rgba(245,243,238,.16);

  /* Type */
  --mono:      ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Motion */
  --ease:      cubic-bezier(.16,1,.3,1);
  --fast:      180ms cubic-bezier(.2,.7,.3,1);

  /* Metrics */
  --shell:     1180px;
  --r:         14px;
  --r-sm:      10px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  background:var(--bone);
  color:var(--ink);
  font-family:'Inter Tight',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:28px; }

/* ─── Type scale ──────────────────────────────────────────────────── */

.display{
  font-size:clamp(42px,6.6vw,76px);
  line-height:1.02;
  letter-spacing:-.038em;
  font-weight:600;
}
.display-sm{ font-size:clamp(34px,5vw,60px); }

.h2{
  font-size:clamp(30px,4.2vw,52px);
  line-height:1.05;
  letter-spacing:-.032em;
  font-weight:600;
}

.eyebrow{
  display:inline-block;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--green);
  margin-bottom:22px;
}

.lede{
  font-size:clamp(17px,1.55vw,20px);
  line-height:1.6;
  color:var(--ink-2);
  max-width:34em;
}

.sec-head{ max-width:44rem; margin-bottom:64px; }
.sec-sub{ font-size:17.5px; line-height:1.62; color:var(--ink-2); margin-top:20px; max-width:38em; }

/* ─── Buttons ─────────────────────────────────────────────────────── */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14.5px; font-weight:550; letter-spacing:-.01em;
  padding:10px 18px; border-radius:999px;
  border:1px solid transparent;
  transition:background var(--fast), color var(--fast),
             border-color var(--fast), transform var(--fast);
  white-space:nowrap; cursor:pointer;
}
.btn-lg{ font-size:15.5px; padding:14px 26px; }

.btn-fill{ background:var(--invert); color:var(--on-dark); }
.btn-fill:hover{ background:#000; transform:translateY(-1px); }

.btn-lime{ background:var(--lime); color:var(--invert); font-weight:600; }
.btn-lime:hover{ background:#dbfa5c; transform:translateY(-1px); }

.btn-line{ border-color:var(--line-2); color:var(--ink); }
.btn-line:hover{ border-color:var(--ink); background:rgba(26,26,24,.04); }

.btn-dark-line{ border-color:var(--line-dark); color:var(--on-dark); }
.btn-dark-line:hover{ border-color:var(--on-dark); background:rgba(245,243,238,.07); }

.btn-ghost{ color:var(--ink-2); }
.btn-ghost:hover{ color:var(--ink); }

/* ─── Nav ─────────────────────────────────────────────────────────── */

.nav{
  position:sticky; top:0; z-index:100;
  background:transparent;
  transition:background 300ms var(--ease), border-color 300ms var(--ease),
             backdrop-filter 300ms var(--ease);
  border-bottom:1px solid transparent;
}
.nav.stuck{
  background:rgba(250,249,246,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.nav-in{ display:flex; align-items:center; gap:36px; height:66px; }

.brand{ display:flex; align-items:center; gap:9px; font-weight:650; letter-spacing:-.028em; font-size:18px; }
.brand-mark{ width:22px; height:22px; flex:0 0 auto; }
.nav-links{ display:flex; gap:26px; margin-left:auto; }
.nav-links a{
  font-size:14.5px; color:var(--ink-2); font-weight:500;
  transition:color var(--fast);
}
.nav-links a:hover{ color:var(--ink); }
.nav-cta{ display:flex; align-items:center; gap:8px; }

/* ─── Hero ────────────────────────────────────────────────────────── */

.hero{ padding:clamp(64px,9vw,116px) 0 clamp(72px,9vw,120px); }
.hero-grid{
  display:grid; grid-template-columns:1fr .92fr;
  gap:clamp(40px,5vw,72px); align-items:center;
}
.hero-copy .lede{ margin-top:26px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:11px; margin-top:36px; }
.hero-foot{ margin-top:20px; font-size:14px; color:var(--ink-3); }

/* ─── Shared UI primitives (film, showcase, autonomy cards) ───────── */

.dot{ width:8px; height:8px; border-radius:50%; background:var(--line-2); }
.panel-title{ margin-left:8px; font-size:13px; font-weight:600; letter-spacing:-.01em; }
.pill{
  margin-left:auto; font-size:11.5px; font-weight:600;
  padding:3px 9px; border-radius:999px;
  background:rgba(26,26,24,.07); color:var(--ink-2);
}
.pill-warn{ background:#fdeccc; color:#7a5410; }

.qmeta{ font-size:12.5px; color:var(--ink-3); }
.avatar{
  width:32px; height:32px; border-radius:8px; flex:0 0 auto;
  display:grid; place-items:center;
  background:var(--green-soft); color:var(--green-2);
  font-size:11.5px; font-weight:700; letter-spacing:.01em;
}
.avatar-b{ background:#efeafe; color:#4b46b8; }
.tag{
  margin-left:auto; font-size:11px; font-weight:600;
  padding:3px 8px; border-radius:999px;
  border:1px solid var(--line); color:var(--ink-3);
}
.conf{ margin-left:auto; font-weight:700; font-size:13px; color:var(--ink); }

.spark{
  width:13px; height:13px; flex:0 0 auto; border-radius:50%;
  background:conic-gradient(from 0deg,var(--lime),var(--green),var(--lime));
  animation:spin 4.5s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.meter{ height:5px; border-radius:999px; background:rgba(26,26,24,.09); margin-top:9px; overflow:hidden; }
.meter i{
  display:block; height:100%; width:0; border-radius:999px;
  background:var(--green);
  transition:width 1.4s var(--ease) 200ms;
}
.meter.on i{ width:var(--w); }

.mini{
  font:inherit; font-size:12.5px; font-weight:600;
  padding:7px 14px; border-radius:999px;
  border:1px solid var(--line-2); background:transparent; color:var(--ink-2);
  cursor:pointer; transition:all var(--fast);
}
.mini:hover{ border-color:var(--ink); color:var(--ink); }
.mini-ok{ background:var(--invert); border-color:var(--invert); color:var(--on-dark); }
.mini-ok:hover{ background:#000; color:var(--on-dark); }

/* ─── Hero film ───────────────────────────────────────────────────────
   Four beats on a loop. Every beat is one idea, staged on the one
   easing curve; app.js only swaps `.is-on` and the chapter fills.
   ─────────────────────────────────────────────────────────────────── */

.film{ position:relative; }

.film-frame{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
}
.film-bar{
  display:flex; align-items:center; gap:7px;
  padding:13px 16px;
  border-bottom:1px solid var(--line);
  background:var(--wash);
}
.film-live{
  margin-left:auto; display:inline-flex; align-items:center; gap:7px;
  font-size:11.5px; font-weight:600; color:var(--ink-2);
}
.film-live i{
  width:6px; height:6px; border-radius:50%; background:var(--green);
  animation:breathe 2.6s var(--ease) infinite;
}
@keyframes breathe{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.3; transform:scale(.72); } }

.film-stage{ position:relative; height:336px; }

.reel{
  position:absolute; inset:0;
  padding:20px;
  display:flex; flex-direction:column; gap:14px;
  opacity:0; visibility:hidden;
  transition:opacity 420ms var(--ease), visibility 0s linear 420ms;
}
.reel.is-on{ opacity:1; visibility:visible; transition:opacity 420ms var(--ease); }

.reel-body,
.scan,
.flog{ margin-block:auto; }

.reel-cap{
  font-size:10.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-3);
}

/* 01 · reads the web */
.scan{ display:grid; gap:6px; }
.scan-row{
  display:flex; align-items:center; gap:12px;
  padding:8px 12px; border-radius:8px;
  border:1px solid var(--line);
  opacity:0;
}
.scan-src{ font-family:var(--mono); font-size:11.5px; color:var(--ink-2); }
.scan-st{ margin-left:auto; font-size:11px; color:var(--ink-3); }
.scan-row-hit{ border-color:var(--line); }

.reel.is-on .scan-row{
  animation:riseIn 520ms var(--ease) forwards;
  animation-delay:calc(var(--i) * 140ms + 120ms);
}
.reel.is-on .scan-row-hit{
  animation:riseIn 520ms var(--ease) forwards, hitRow 700ms var(--ease) forwards;
  animation-delay:calc(var(--i) * 140ms + 120ms), 1500ms;
}
.reel.is-on .scan-row-hit .scan-src{ animation:hitInk 700ms var(--ease) 1500ms forwards; }
.reel.is-on .scan-row-hit .scan-st{ animation:hitSt 700ms var(--ease) 1500ms forwards; }
@keyframes hitRow{ to{ border-color:var(--green); background:var(--green-soft); } }
@keyframes hitInk{ to{ color:var(--green-2); } }
@keyframes hitSt{ to{ color:var(--green-2); font-weight:700; } }

/* 02 · spots the change */
.fdiff{ border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; }
.fdl{
  display:flex; align-items:center; gap:10px;
  padding:11px 14px;
  font-size:13px; font-variant-numeric:tabular-nums;
  border-top:1px solid var(--line);
  opacity:0;
}
.fdl:first-child{ border-top:0; }
.fdl > span{ width:10px; font-weight:700; opacity:.65; }
.fdl-del{ background:#fdf1f0; color:#8c3b34; }
.fdl-add{ background:var(--green-soft); color:var(--green-2); }
.fdiff-note{ font-size:13.5px; color:var(--ink-2); opacity:0; }
.fdiff-note b{ color:var(--ink); font-weight:700; }

.reel.is-on .fdl,
.reel.is-on .fdiff-note{
  animation:slideIn 460ms var(--ease) forwards;
  animation-delay:calc(var(--i) * 210ms + 240ms);
}

/* 03 · asks you */
.fcard{
  position:relative;
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:16px;
}
.fcard-h{ display:flex; align-items:center; gap:11px; }
.fcard-h strong{ display:block; font-size:14.5px; letter-spacing:-.015em; }
.fcard-line{
  display:flex; align-items:center; gap:8px;
  margin-top:15px; font-size:13px; color:var(--ink-2);
}
.fcard-line b{ color:var(--ink); font-weight:650; }
.fmeter{ height:5px; border-radius:999px; background:rgba(26,26,24,.09); margin-top:10px; overflow:hidden; }
.fmeter i{ display:block; height:100%; width:0; border-radius:999px; background:var(--green); }
.fcard-actions{ display:flex; gap:7px; margin-top:16px; }
.fcard-done{
  position:absolute; left:16px; bottom:17px;
  font-size:12.5px; font-weight:650; color:var(--green);
  opacity:0;
}

.reel.is-on .fmeter i{ animation:fill94 1200ms var(--ease) 520ms forwards; }
.reel.is-on .fcard-actions{ animation:fadeOut 280ms var(--ease) 3120ms forwards; }
.reel.is-on .fcard-done{ animation:riseIn 420ms var(--ease) 3240ms forwards; }
.reel.is-on .mini-ok{ animation:tap 300ms var(--ease) 2860ms; }
@keyframes fill94{ to{ width:94%; } }
@keyframes fadeOut{ to{ opacity:0; transform:translateY(5px); } }
@keyframes tap{ 45%{ transform:scale(.95); } }

.fcursor{
  position:absolute; left:68px; bottom:11px;
  width:19px; height:19px; z-index:3;
  opacity:0; transform:translate(78px,44px);
  filter:drop-shadow(0 2px 5px rgba(26,26,24,.3));
}
.reel.is-on .fcursor{
  animation:fadeIn 360ms var(--ease) 1560ms forwards,
            reach 880ms var(--ease) 1940ms forwards,
            press 300ms var(--ease) 2860ms,
            fadeOut 320ms var(--ease) 3260ms forwards;
}
@keyframes reach{ to{ transform:translate(0,0); } }
@keyframes press{ 45%{ transform:translate(0,0) scale(.78); } }

/* 04 · files it */
.flog{ display:grid; }
.flog-i{
  display:flex; gap:14px; align-items:baseline;
  padding:12px 0; border-top:1px solid var(--line);
  font-size:13.5px; opacity:0;
}
.flog-i:first-child{ border-top:0; }
.flog-d{
  flex:0 0 58px; font-size:11px; font-weight:700;
  letter-spacing:.02em; text-transform:uppercase; color:var(--ink-3);
}
.flog-t{ color:var(--ink-2); }
.flog-new .flog-d{ color:var(--green-2); }
.flog-new .flog-t{ color:var(--ink); font-weight:600; }

.reel.is-on .flog-i{
  animation:slideIn 480ms var(--ease) forwards;
  animation-delay:calc(var(--i) * 170ms + 200ms);
}

/* Chapter rail */
.film-rail{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:15px; }
.chap{
  font:inherit; text-align:left; cursor:pointer;
  background:transparent; border:0; padding:0;
  display:grid; gap:8px; color:var(--ink-3);
  transition:color var(--fast);
}
.chap:hover{ color:var(--ink-2); }
.chap span{ font-size:11.5px; font-weight:600; letter-spacing:-.005em; }
.chap i{
  display:block; position:relative; height:2px;
  border-radius:999px; background:rgba(26,26,24,.12); overflow:hidden;
}
.chap i::after{
  content:''; position:absolute; inset:0 auto 0 0; width:0;
  background:var(--ink); border-radius:999px;
}
.chap.is-done{ color:var(--ink-2); }
.chap.is-done i::after{ width:100%; }
.chap.is-on{ color:var(--ink); }
.chap.is-on i::after{ width:100%; transition:width var(--dur,4600ms) linear; }

/* Beat 03 footnote */
.fqueue{ margin-top:12px; font-size:12px; color:var(--ink-3); }
.reel.is-on .fqueue{ animation:fadeIn 420ms var(--ease) 900ms forwards; opacity:0; }

/* Shared film keyframes */
@keyframes riseIn{ from{ opacity:0; transform:translateY(9px); } to{ opacity:1; transform:none; } }
@keyframes slideIn{ from{ opacity:0; transform:translateX(-10px); } to{ opacity:1; transform:none; } }
@keyframes fadeIn{ to{ opacity:1; } }

/* ─── Sources strip ───────────────────────────────────────────────── */

.strip{ padding:22px 0 44px; border-top:1px solid var(--line); }
.strip-label{ font-size:13px; color:var(--ink-3); letter-spacing:.01em; margin-bottom:22px; }
.marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-run{ display:flex; gap:12px; width:max-content; animation:run 46s linear infinite; }
.marquee-run span{
  font-size:14px; font-weight:500; color:var(--ink-2);
  padding:9px 18px; border:1px solid var(--line); border-radius:999px;
  background:var(--white); white-space:nowrap;
}
@keyframes run{ to{ transform:translateX(-50%); } }

/* ─── Agents showcase ─────────────────────────────────────────────── */

.agents{ padding:clamp(72px,9vw,124px) 0; border-top:1px solid var(--line); }
.showcase{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,88px); align-items:start; }
.showcase-list{ display:grid; gap:4px; }

.ag{
  padding:34px 0 38px;
  border-top:1px solid var(--line);
  opacity:.42;
  transition:opacity 500ms var(--ease);
}
.ag:first-child{ border-top:none; }
.ag.is-on{ opacity:1; }
.ag-n{
  font-size:12px; font-weight:650; letter-spacing:.09em;
  color:var(--ink-3);
}
.ag h3{ font-size:clamp(24px,2.6vw,32px); letter-spacing:-.03em; font-weight:600; margin-top:12px; line-height:1.1; }
.ag-role{ font-size:14px; color:var(--green); font-weight:600; margin-top:7px; }
.ag p:not(.ag-role){ font-size:16px; color:var(--ink-2); line-height:1.6; margin-top:14px; max-width:31em; }
.ag em{ font-style:italic; color:var(--ink); }
.ag-tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:18px; }
.ag-tags li{
  font-size:12px; font-weight:550; color:var(--ink-2);
  border:1px solid var(--line); border-radius:999px; padding:4px 11px;
}
.ag-hero .ag-role{ color:var(--ink); }
.ag-hero.is-on .ag-n{ color:var(--green); }

/* Sticky stage */
.showcase-stage{ position:sticky; top:106px; }
.stage{
  position:relative;
  height:412px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
}
.scene{
  position:absolute; inset:0;
  padding:26px;
  display:flex; flex-direction:column; justify-content:center;
  opacity:0; transform:translateY(14px);
  transition:opacity 480ms var(--ease), transform 480ms var(--ease);
  pointer-events:none;
}
.scene.is-on{ opacity:1; transform:none; pointer-events:auto; }

/* scene: chat */
.chat{ display:grid; gap:12px; }
.bubble{ padding:14px 17px; border-radius:14px; font-size:14.5px; line-height:1.55; max-width:93%; }
.bubble-you{ background:var(--wash); border:1px solid var(--line); justify-self:end; border-bottom-right-radius:5px; }
.bubble-ai{
  background:var(--invert); color:var(--on-dark);
  border-bottom-left-radius:5px;
  display:flex; flex-wrap:wrap; gap:9px; align-items:flex-start;
}
.cite{ display:block; width:100%; font-size:12px; color:var(--on-dark-2); border-top:1px solid var(--line-dark); padding-top:9px; margin-top:3px; }

/* scene: discovery rows */
.rows{ display:grid; gap:8px; }
.row{
  display:flex; align-items:center; gap:12px;
  padding:12px 15px; border:1px solid var(--line); border-radius:var(--r-sm);
  font-size:14px;
}
.rk{ font-weight:600; letter-spacing:-.012em; }
.rv{ margin-left:auto; font-size:12.5px; color:var(--ink-3); }
.rv-ok{ color:var(--green); font-weight:600; }
.row-ok{ background:var(--white); }
.row-off{ opacity:.5; }

/* scene: matrix */
.grid-matrix{ font-size:13.5px; }
.mx-head,.mx-row{ display:grid; grid-template-columns:1.6fr .7fr .7fr .7fr; gap:8px; align-items:center; padding:11px 4px; }
.mx-head{ font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); border-bottom:1px solid var(--line); }
.mx-row{ border-bottom:1px solid var(--line); }
.mx-row:last-child{ border-bottom:none; }
.mx-row span{ color:var(--ink-2); }
.mx-row b{ font-weight:650; font-size:13px; }
.mx-row .y{ color:var(--green); }
.mx-row .n{ color:var(--ink-3); }

/* scene: diff */
.diff{ font-size:13.5px; }
.diff-h{ display:flex; align-items:center; gap:10px; font-weight:600; margin-bottom:14px; letter-spacing:-.015em; }
.dl{ display:flex; gap:10px; padding:9px 12px; border-radius:7px; margin-bottom:5px; font-variant-numeric:tabular-nums; }
.dl span{ font-weight:700; width:11px; }
.dl-del{ background:#fdecec; color:#8c2f2f; }
.dl-add{ background:var(--green-soft); color:var(--green-2); }
.diff-f{ font-size:12px; color:var(--ink-3); margin-top:14px; }

/* scene: jobs */
.jobs{ display:grid; gap:7px; }
.job{
  display:flex; align-items:center; gap:12px;
  padding:11px 15px; border:1px solid var(--line); border-radius:var(--r-sm);
  font-size:14px;
}
.jb{ font-weight:550; }
.jt{ margin-left:auto; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--green); }
.job-note{
  display:flex; gap:10px; align-items:flex-start;
  margin-top:8px; padding:14px 15px;
  background:var(--invert); color:var(--on-dark);
  border-radius:var(--r-sm); font-size:13.5px; line-height:1.55;
}

/* scene: ladder */
.ladder{ display:grid; gap:9px; }
.rung{
  display:flex; align-items:center; gap:14px;
  padding:16px 18px; border-radius:var(--r-sm);
  border:1px solid var(--line);
}
.rung-k{ font-weight:650; letter-spacing:-.018em; font-size:16px; }
.rung-v{ margin-left:auto; font-size:13px; color:var(--ink-3); }
.rung.done{ opacity:.5; }
.rung.live{ border-color:var(--invert); background:var(--invert); color:var(--on-dark); }
.rung.live .rung-v{ color:var(--lime); font-weight:600; }
.ladder-note{ font-size:12.5px; color:var(--ink-3); margin-top:5px; }

/* ─── Autonomy ────────────────────────────────────────────────────── */

.autonomy{ padding:clamp(72px,9vw,124px) 0; border-top:1px solid var(--line); background:var(--wash); }
.auto-grid{ display:grid; grid-template-columns:1fr .88fr; gap:clamp(40px,6vw,80px); align-items:center; }
.auto-copy .btn{ margin-top:32px; }
.auto-cards{ display:grid; gap:12px; }

.acard{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r); padding:20px 22px;
  transition:border-color var(--fast), transform var(--fast);
}
.acard:hover{ border-color:var(--line-2); transform:translateY(-2px); }
.acard-h{ display:flex; align-items:center; gap:12px; font-size:15px; font-weight:600; letter-spacing:-.018em; }
.acard-f{ display:flex; justify-content:space-between; margin-top:11px; font-size:12.5px; color:var(--ink-3); }
.acard-note{ font-size:13px; color:var(--ink-3); padding-left:2px; }

.badge{
  margin-left:auto; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
  padding:4px 10px; border-radius:999px;
  background:rgba(26,26,24,.07); color:var(--ink-3);
}
.badge-mid{ background:#fdeccc; color:#7a5410; }
.badge-live{ background:var(--lime); color:var(--invert); }

/* ─── Platform bento ──────────────────────────────────────────────── */

.platform{ padding:clamp(72px,9vw,124px) 0; border-top:1px solid var(--line); }
.bento{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.bx{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r); padding:28px;
  display:flex; flex-direction:column;
  transition:border-color var(--fast), transform var(--fast);
}
.bx:hover{ border-color:var(--line-2); transform:translateY(-3px); }
.bx-wide{ grid-column:span 2; }
.bx-full{ grid-column:span 3; }
.bx h3{ font-size:19px; font-weight:600; letter-spacing:-.024em; }
.bx p{ font-size:14.5px; color:var(--ink-2); line-height:1.58; margin-top:11px; }
.bx-art{ margin-top:auto; padding-top:26px; }

.bx-art-profile{ display:flex; flex-wrap:wrap; gap:6px; }
.chipm{
  font-size:12px; font-weight:550; color:var(--ink-2);
  border:1px solid var(--line); border-radius:999px; padding:5px 11px;
}
.bx-art-map{
  position:relative; aspect-ratio:360/139; max-height:150px; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--wash);
}
.bx-art-map-svg{ position:absolute; inset:0; width:100%; height:100%; }
.bx-art-map-svg .land{ fill:#cdccca; stroke:#cdccca; stroke-width:.5; }
.bx-art-map-svg .pin{ fill:var(--green); stroke:rgba(31,122,67,.16); stroke-width:4.5; }
.bx-art-lines{ display:grid; gap:7px; }
.bx-art-lines i{ height:7px; width:var(--w); border-radius:999px; background:rgba(26,26,24,.1); }
.bx-art-lines i:first-child{ background:var(--lime); }
.bx-art-flow{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.bx-art-flow span{ font-size:11.5px; font-weight:600; padding:5px 10px; border-radius:7px; background:var(--wash); border:1px solid var(--line); }
.bx-art-flow b{ color:var(--ink-3); font-size:12px; }
.bx-art-key{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.bx-art-key code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px; padding:6px 11px; border-radius:7px;
  background:var(--wash); border:1px solid var(--line); color:var(--ink-2);
}
.bx-art-key b{ color:var(--ink-3); }

/* ─── How ─────────────────────────────────────────────────────────── */

.how{ padding:clamp(72px,9vw,124px) 0; border-top:1px solid var(--line); }
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.step{ border-top:1px solid var(--ink); padding-top:22px; }
.step-n{ font-size:12px; font-weight:700; letter-spacing:.09em; color:var(--green); }
.step h3{ font-size:19px; font-weight:600; letter-spacing:-.024em; margin-top:14px; }
.step p{ font-size:14.5px; color:var(--ink-2); line-height:1.58; margin-top:10px; }

/* ─── CTA ─────────────────────────────────────────────────────────── */

.cta{ padding:clamp(72px,9vw,124px) 0; background:var(--invert); color:var(--on-dark); }
.cta-in{ max-width:48rem; }
.cta p{ font-size:18px; color:var(--on-dark-2); margin-top:22px; }
.cta .hero-actions{ margin-top:38px; }

/* ─── Footer ──────────────────────────────────────────────────────── */

.foot{ background:var(--invert); color:var(--on-dark-2); border-top:1px solid var(--line-dark); padding:34px 0; }
.foot-in{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.foot-brand{ display:flex; align-items:center; gap:9px; color:var(--on-dark); font-weight:650; letter-spacing:-.028em; }
.foot-links{ display:flex; gap:22px; margin-left:auto; font-size:14px; }
.foot-links a{ transition:color var(--fast); }
.foot-links a:hover{ color:var(--on-dark); }
.foot-c{ font-size:13.5px; }

/* ─── Reveal ──────────────────────────────────────────────────────── */

.reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity 850ms var(--ease), transform 850ms var(--ease);
  transition-delay:calc(var(--d,0) * 80ms);
}
.reveal.shown{ opacity:1; transform:none; }

/* ─── Responsive ──────────────────────────────────────────────────── */

@media (max-width:1000px){
  .hero-grid,.auto-grid{ grid-template-columns:1fr; }
  .showcase{ grid-template-columns:1fr; gap:8px; }
  .showcase-stage{ position:static; margin-bottom:28px; order:-1; }
  .stage{ height:400px; }
  .ag{ opacity:1; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .bento{ grid-template-columns:repeat(2,1fr); }
  .bx-wide,.bx-full{ grid-column:span 2; }
  .nav-links{ display:none; }
  .nav-cta{ margin-left:auto; }
}

@media (max-width:640px){
  body{ font-size:16px; }
  .shell{ padding-inline:20px; }
  .steps,.bento{ grid-template-columns:1fr; }
  .bx-wide,.bx-full{ grid-column:span 1; }
  .hero-actions .btn{ flex:1 1 100%; }
  .stage{ height:370px; }
  .film-stage{ height:318px; }
  .film-rail{ grid-template-columns:repeat(2,1fr); gap:12px 10px; }
  .scene{ padding:18px; }
  .foot-in{ gap:18px; }
  .foot-links{ margin-left:0; width:100%; }
  .nav-cta .btn-ghost{ display:none; }
}

/* ─── Invite gate ─────────────────────────────────────────────────── */

/* The dialog that stands between a "start" CTA and app.outcompet.com
   while the product is invite-only. Same hairline idiom as the cards —
   no shadow, one expo-out curve. */

body.gate-open{ overflow:hidden; }

.gate{
  position:fixed; inset:0; z-index:100;
  display:grid; place-items:center;
  padding:24px;
  opacity:0;
  transition:opacity 320ms var(--ease);
}
.gate.is-on{ opacity:1; }
/* The class sets display, so the hidden attribute needs to outrank it. */
.gate[hidden]{ display:none; }

.gate-scrim{
  position:absolute; inset:0;
  background:rgba(26,26,24,.42);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}

.gate-panel{
  position:relative;
  width:100%; max-width:456px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:40px 38px 34px;
  transform:translateY(14px) scale(.985);
  transition:transform 420ms var(--ease);
}
.gate.is-on .gate-panel{ transform:none; }

.gate-x{
  position:absolute; top:14px; right:16px;
  width:32px; height:32px;
  display:grid; place-items:center;
  font-size:22px; line-height:1;
  background:none; border:0; border-radius:999px;
  color:var(--ink-3); cursor:pointer;
  transition:color var(--fast), background var(--fast);
}
.gate-x:hover{ color:var(--ink); background:rgba(26,26,24,.05); }

.gate-panel .eyebrow{ margin-bottom:16px; }

.gate-title{
  font-size:29px; line-height:1.08; letter-spacing:-.032em; font-weight:600;
}

.gate-lede{
  margin-top:14px;
  font-size:15.5px; line-height:1.6; color:var(--ink-2);
}

.gate-form{ margin-top:26px; }

.gate-label{
  display:block;
  font-size:12.5px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3);
  margin-bottom:9px;
}

.gate-input{
  width:100%;
  font-family:inherit;
  font-size:16.5px; font-weight:550; letter-spacing:.06em;
  text-transform:uppercase;
  padding:13px 15px;
  color:var(--ink);
  background:var(--bone);
  border:1px solid var(--line-2);
  border-radius:var(--r-sm);
  transition:border-color var(--fast), background var(--fast);
}
.gate-input::placeholder{ color:var(--ink-3); font-weight:400; letter-spacing:.06em; }
.gate-input:focus{
  outline:none;
  border-color:var(--ink);
  background:var(--white);
}
.gate.has-error .gate-input{ border-color:#b4342a; }

.gate-error{
  min-height:0; height:0; overflow:hidden;
  font-size:13.5px; line-height:1.5; color:#b4342a;
  transition:height 260ms var(--ease), margin-top 260ms var(--ease);
}
.gate.has-error .gate-error{ height:auto; min-height:20px; margin-top:9px; }

.gate-submit{ width:100%; margin-top:18px; }
.gate-submit:disabled{ opacity:.6; cursor:default; transform:none; }

.gate-foot{
  margin-top:22px; padding-top:20px;
  border-top:1px solid var(--line);
  font-size:14px; line-height:1.55; color:var(--ink-2);
}
.gate-foot a{ color:var(--ink); font-weight:550; border-bottom:1px solid var(--line-2); }
.gate-foot a:hover{ border-bottom-color:var(--ink); }

@media (max-width:640px){
  .gate-panel{ padding:34px 24px 28px; }
  .gate-title{ font-size:25px; }
}

/* ─── Reduced motion ──────────────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-delay:0s !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    transition-delay:0s !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
  .ag{ opacity:1; }
  .meter i{ width:var(--w); }
  .fcursor,.fcard-actions{ display:none; }
  .fmeter i{ width:94%; }
  .fcard-done{ position:static; margin-top:16px; }
  .gate,.gate-panel{ transition:none; }
  .gate-panel{ transform:none; }
}