/* ===========================================================================
   Resize — launch site.
   Tokens mirror theme.py so the site and the product read as one thing:
   the indigo ramp anchored on #4E47DC, the studio "stage" gradient, and the
   three status colours (indigo = you can act, green = the AI already did,
   amber = needs your attention).
   =========================================================================== */
:root {
  --i50:#EEF0FE; --i100:#E0E3FC; --i200:#C4C8F8; --i300:#9EA3F2;
  --i400:#7B7DEC; --i500:#6465E8; --i600:#4E47DC; --i700:#3D35C0;
  --i800:#2F2996; --i900:#1F1B66; --i950:#12103D;

  --ink:#0E1020; --ink2:#3A3F55; --muted:#6B7189; --faint:#A6ABBE;
  --canvas:#F7F8FC; --surface:#FFFFFF; --line:#E4E7F2;
  --ok:#0FA97C; --ok-bg:#E7F7F1;
  --warn:#F59E0B; --warn-bg:#FEF4E2;

  --stage: linear-gradient(135deg, #12103D 0%, #221E58 100%);
  --cta: linear-gradient(180deg, #6465E8, #4E47DC);
  --cta-hover: linear-gradient(180deg, #4E47DC, #3D35C0);

  --display:'Space Grotesk','Inter',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;

  --shadow-sm: 0 1px 2px rgba(14,16,32,.05), 0 6px 18px -10px rgba(14,16,32,.18);
  --shadow-lg: 0 24px 60px -28px rgba(18,16,61,.55);
  --radius: 14px;
  --page: 1140px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:#EEF0F8; --ink2:#C3C7D8; --muted:#9096AC; --faint:#6C7288;
    --canvas:#0B0B18; --surface:#14142A; --line:#262646;
    --ok:#35C79A; --ok-bg:#0E2B22;
    --warn:#F0B34A; --warn-bg:#2E2310;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px -10px rgba(0,0,0,.7);
    --shadow-lg: 0 24px 60px -28px rgba(0,0,0,.85);
  }
}

*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body {
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3 { font-family:var(--display); margin:0; line-height:1.1; letter-spacing:-.022em; text-wrap:balance; }
h1 { font-size:clamp(2.3rem,5.6vw,3.9rem); font-weight:700; }
h2 { font-size:clamp(1.65rem,3.4vw,2.4rem); font-weight:600; }
h3 { font-size:1.12rem; font-weight:600; letter-spacing:-.012em; }
p  { margin:0; }
a  { color:var(--i600); }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) a { color:var(--i300); } }

.wrap { width:100%; max-width:var(--page); margin:0 auto; padding-inline:clamp(1.1rem,4vw,2rem); }

.eyebrow {
  font-family:var(--display); font-size:.76rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--i600);
}
.stage .eyebrow { color:var(--i300); }

/* ------------------------------------------------------------------ nav --- */
.nav {
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--canvas) 88%, transparent);
  backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid var(--line);
}
.nav .wrap { display:flex; align-items:center; justify-content:space-between; gap:1rem; height:66px; }
.brand { display:flex; align-items:center; gap:.6rem; font-family:var(--display); font-weight:700; font-size:1.16rem; letter-spacing:-.02em; color:var(--ink); text-decoration:none; }
.mark { width:26px; height:26px; border-radius:6px; background:var(--i950); display:grid; grid-template-columns:1fr .5fr; grid-template-rows:1fr .5fr; gap:2px; padding:4px; }
.mark i { background:var(--i600); border-radius:1.5px; }
.mark i:nth-child(2){ background:var(--i400); }
.mark i:nth-child(3){ background:var(--i300); grid-column:1/3; }
.nav-links { display:flex; align-items:center; gap:1.6rem; }
.nav-links a.plain { color:var(--muted); text-decoration:none; font-size:.94rem; font-weight:500; }
.nav-links a.plain:hover { color:var(--ink); }
.nav-links a.lang { font-family:var(--display); font-size:.82rem; letter-spacing:.08em; padding:.28rem .5rem; border:1px solid var(--line); border-radius:7px; }
@media (max-width:720px){
  .nav-links { gap:1rem; }
  .nav-links a.plain:not(.nav-account) { display:none; }
}
@media (max-width:430px){
  .nav-links { gap:.75rem; }
  .nav-links .nav-secondary { display:none; }
  .nav-links .btn { padding:.62rem .9rem; font-size:.92rem; }
}

/* --------------------------------------------------------------- buttons -- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--display); font-weight:600; font-size:.98rem; letter-spacing:-.01em;
  padding:.72rem 1.25rem; border-radius:10px; border:1px solid transparent;
  text-decoration:none; cursor:pointer; transition:background .18s, transform .18s, border-color .18s;
}
.btn-primary { background:var(--cta); color:#fff; box-shadow:0 6px 18px -8px rgba(78,71,220,.7); }
.btn-primary:hover { background:var(--cta-hover); transform:translateY(-1px); }
.btn-ghost { background:transparent; color:var(--i200); border-color:rgba(255,255,255,.22); }
.btn-ghost:hover { border-color:rgba(255,255,255,.5); color:#fff; }
/* The secondary action on a LIGHT ground (the nav): outlined, never louder
   than "Get early access" beside it. */
.btn-secondary { background:transparent; color:var(--ink); border-color:var(--line); box-shadow:none; }
.btn-secondary:hover { border-color:var(--i400); color:var(--i700); }
.btn-lg { padding:.92rem 1.6rem; font-size:1.05rem; }
:focus-visible { outline:3px solid var(--i400); outline-offset:2px; border-radius:6px; }

.promise { font-size:.9rem; color:var(--muted); }
/* A quiet, clickable line — the partner-code path — not a third button. */
.promise .quiet-link { color:#fff; text-decoration:underline; text-underline-offset:3px; }
.promise .quiet-link:hover { color:var(--i200); }
.stage .promise { color:var(--i200); }

/* ----------------------------------------------------------------- hero --- */
.stage { background:var(--stage); color:#fff; position:relative; overflow:hidden; }
.stage::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:46px 46px; mask-image:radial-gradient(ellipse at 50% 0%, #000 40%, transparent 78%);
}
.stage > * { position:relative; z-index:1; }

.hero .wrap { padding-block:clamp(3.2rem,8vw,5.4rem) clamp(3rem,7vw,4.6rem); display:grid; gap:clamp(2.4rem,5vw,3.6rem); grid-template-columns:minmax(0,1fr); }
@media (min-width:960px){ .hero .wrap { grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); align-items:center; } }
.hero h1 { color:#fff; }
@media (min-width:520px){ .hero h1 span { display:block; } }
.hero-copy { display:flex; flex-direction:column; gap:1.25rem; }
.hero-copy .lede { color:var(--i100); font-size:1.14rem; max-width:52ch; }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.9rem; margin-top:.3rem; }

/* before / after ------------------------------------------------------------ */
.ba { display:grid; gap:.7rem; grid-template-columns:1fr 1fr; }
.ba figure { margin:0; display:flex; flex-direction:column; gap:.5rem; }
.ba img { width:100%; height:auto; display:block; border-radius:10px; box-shadow:var(--shadow-lg); }
/* Two lines reserved: "Re-composed 1200x1200" wraps on a phone while "Source
   banner" does not, which pushed one image of the pair lower than the other. */
.ba figcaption { font-family:var(--display); font-size:.72rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--i300); min-height:2.4em; }
.ba .after figcaption { color:#6ee7bd; }

/* The strip of extra formats. Height-driven so the true aspect ratios show —
   but a 728x90 proof at a fixed 52px is 420px wide, which overflowed a 390px
   phone and widened the whole document, clipping every section to its right.
   The height now scales with the viewport and max-width is a hard stop. */
.fan { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.9rem; max-width:100%; }
.fan img {
  height:clamp(30px,7vw,52px); width:auto; max-width:100%; object-fit:contain;
  border-radius:5px; box-shadow:0 6px 16px -8px rgba(0,0,0,.7); background:#000;
}

/* --------------------------------------------------------------- section -- */
section { padding-block:clamp(3.4rem,7vw,5.4rem); }
.section-head { display:flex; flex-direction:column; gap:.85rem; max-width:60ch; margin-bottom:2.4rem; }
.section-head p { color:var(--muted); font-size:1.06rem; }

/* mechanism cards */
.cards { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); }
.card {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.5rem 1.5rem 1.6rem; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; gap:.6rem;
}
.card p { color:var(--muted); font-size:.97rem; }
.card .icon { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:var(--i50); color:var(--i600); margin-bottom:.35rem; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .card .icon { background:#1E1C4A; color:var(--i300); } }
.card .icon svg { width:19px; height:19px; }

/* format board — the app's scale proof, reused as decoration ---------------- */
.board { display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px; padding:1.6rem; border-radius:var(--radius); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); }
.board li { list-style:none; background:rgba(123,125,236,.5); border:1px solid var(--i400); border-radius:3px; display:grid; place-items:center; overflow:hidden; }
.board li span { font-family:var(--display); font-size:9px; font-weight:600; color:#fff; opacity:.9; }
.board-wrap { display:grid; gap:1.6rem; }
@media (min-width:860px){ .board-wrap { grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); align-items:center; } }

/* proof gallery ------------------------------------------------------------- */
.gallery { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.shot { display:flex; flex-direction:column; gap:.55rem; }
/* A proof sheet, not a masonry wall: the formats have wildly different aspect
   ratios, so each sits in a fixed box and is contained. Letting them size
   themselves left every row ragged and the captions floating at random heights. */
/* A plain block, deliberately NOT a centred grid: with place-items:center the
   item is sized to its content, so the image's height:100% resolved as auto and
   the tall formats spilled out of the box. A block parent with a definite
   height gives the percentage something to resolve against; object-fit does
   the centring. */
.shot .frame {
  height:220px; display:block; padding:.7rem;
  border-radius:10px; border:1px solid var(--line); background:var(--canvas);
  box-shadow:var(--shadow-sm); overflow:hidden;
}
/* width/height 100% + object-fit, not max-height: a percentage max-height on a
   centred grid item did not constrain the tall formats and they were clipped
   by the frame instead of fitting inside it. */
.shot img { width:100%; height:100%; object-fit:contain; display:block; border-radius:4px; }
.shot .meta { display:flex; align-items:center; justify-content:space-between; gap:.5rem; font-size:.82rem; color:var(--muted); }
.shot .size { font-family:var(--display); font-weight:600; color:var(--ink); }
.chip { font-size:.72rem; font-weight:600; padding:.12rem .5rem; border-radius:999px; background:var(--ok-bg); color:var(--ok); white-space:nowrap; }

.downloads { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.6rem; align-items:center; }
.dl { display:inline-flex; align-items:center; gap:.45rem; font-size:.9rem; font-weight:500; text-decoration:none; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:.5rem .85rem; }
.dl:hover { border-color:var(--i400); }
.dl b { font-family:var(--display); }

/* pricing ------------------------------------------------------------------- */
.price-lead { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; padding:1.15rem 1.35rem; border-radius:var(--radius); background:var(--i50); border:1px solid var(--i200); margin-bottom:2rem; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .price-lead { background:#1A1846; border-color:#2F2996; } }
.price-lead strong { font-family:var(--display); }
.price-lead p { color:var(--ink2); font-size:.98rem; }

.tiers { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(196px,1fr)); }
.tier { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.35rem; display:flex; flex-direction:column; gap:.35rem; box-shadow:var(--shadow-sm); }
.tier.featured { border-color:var(--i600); box-shadow:0 0 0 1px var(--i600), var(--shadow-sm); }
.tier .name { font-family:var(--display); font-weight:600; font-size:1rem; }
.tier .amount { font-family:var(--display); font-weight:700; font-size:1.85rem; letter-spacing:-.03em; margin-top:.2rem; }
.tier .per { font-size:.86rem; color:var(--muted); }
.tier .unit { font-size:.86rem; color:var(--i600); font-weight:500; margin-top:.35rem; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .tier .unit { color:var(--i300); } }
.tier .tag { align-self:flex-start; font-size:.7rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--i600); background:var(--i50); border-radius:999px; padding:.1rem .5rem; margin-bottom:.2rem; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .tier .tag { background:#1E1C4A; color:var(--i300); } }
/* Legally required, so it has to actually read as text on the page —
   --muted made it vanish under the cards. */
.vat { margin-top:1.1rem; font-size:.92rem; color:var(--ink2); }

/* form ---------------------------------------------------------------------- */
.apply { background:var(--stage); color:#fff; border-radius:0; }
.apply .wrap { display:grid; gap:clamp(2rem,5vw,3.2rem); }
@media (min-width:900px){ .apply .wrap { grid-template-columns:minmax(0,1fr) minmax(0,.95fr); align-items:start; } }
.apply h2 { color:#fff; }
.apply .lede { color:var(--i100); font-size:1.06rem; max-width:46ch; }
.apply ul { margin:1.2rem 0 0; padding-left:1.1rem; color:var(--i200); font-size:.97rem; }
.apply li { margin-bottom:.5rem; }
.apply li strong { color:#fff; }

.form-card { background:var(--surface); color:var(--ink); border-radius:var(--radius); padding:clamp(1.4rem,3vw,1.9rem); box-shadow:var(--shadow-lg); display:flex; flex-direction:column; gap:1rem; }
.field { display:flex; flex-direction:column; gap:.38rem; }
.field label { font-size:.88rem; font-weight:600; }
.field input, .field select {
  font-family:var(--body); font-size:1rem; color:var(--ink);
  background:var(--canvas); border:1px solid var(--line); border-radius:9px;
  padding:.7rem .85rem; width:100%;
}
.field input:focus, .field select:focus { border-color:var(--i500); outline:none; box-shadow:0 0 0 3px rgba(100,101,232,.25); }
.form-card .fine { font-size:.83rem; color:var(--muted); }
.apply-right { display:flex; flex-direction:column; gap:1rem; }
/* The person a partner sent, unsure which path is theirs: a box, not a button. */
.code-aside {
  padding:.95rem 1.15rem; border:1px solid rgba(255,255,255,.24); border-radius:var(--radius);
  color:var(--i100); font-size:.95rem; line-height:1.55;
}
.code-aside strong { color:#fff; font-family:var(--display); }
.code-aside a { color:#fff; text-decoration:underline; text-underline-offset:3px; }
.code-aside a:hover { color:var(--i200); }

/* footer -------------------------------------------------------------------- */
footer { border-top:1px solid var(--line); background:var(--surface); }
footer .wrap { padding-block:2.4rem 3rem; display:flex; flex-wrap:wrap; gap:1.6rem 2.5rem; justify-content:space-between; }
footer .legal { max-width:42ch; font-size:.88rem; color:var(--muted); display:flex; flex-direction:column; gap:.45rem; }
footer nav { display:flex; flex-direction:column; gap:.45rem; font-size:.9rem; }
footer nav a { color:var(--muted); text-decoration:none; }
footer nav a:hover { color:var(--ink); }
footer .brand { font-size:1rem; margin-bottom:.3rem; }

/* case study ---------------------------------------------------------------- */
.case-hero .wrap { grid-template-columns:1fr; }
.numbers { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.9rem; margin-top:2rem; }
.num { padding:1rem 1.1rem; border:1px solid rgba(255,255,255,.18); border-radius:var(--radius); color:var(--i100); }
.num b { display:block; font-family:var(--display); font-size:1.7rem; font-weight:700; color:#fff; letter-spacing:-.02em; line-height:1.1; }
.num span { display:block; font-size:.86rem; margin-top:.3rem; }
.case-pair { display:grid; gap:1.2rem; margin-top:1.8rem; }
@media (min-width:720px){ .case-pair { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); align-items:start; } }
.case-pair figure, .case-single { margin:0; }
.case-pair img, .case-single img { width:100%; height:auto; display:block; border-radius:var(--radius); box-shadow:var(--shadow-sm); background:var(--surface); }
.logo-card img { padding:2.2rem; border:1px solid var(--line); }
.case-single { margin-top:1.8rem; max-width:720px; }
figcaption { margin-top:.55rem; font-size:.88rem; color:var(--muted); }
.case-gallery { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
.case-gallery .meta { flex-wrap:wrap; gap:.3rem .5rem; }
.chip.review { background:var(--warn-bg); color:#8A5A0B; }
.chip.fixed { background:var(--i100); color:var(--i700); padding-inline:.45rem; margin-left:.3rem; }
.table-wrap { overflow-x:auto; margin-top:1.6rem; -webkit-overflow-scrolling:touch; }
.verdicts { width:100%; border-collapse:collapse; font-size:.92rem; min-width:560px; }
.verdicts th, .verdicts td { text-align:left; padding:.6rem .7rem; border-bottom:1px solid var(--line); vertical-align:top; }
.verdicts th { font-family:var(--display); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.verdicts tr.review td { background:var(--warn-bg); }
.verdicts tr.fixed td:nth-child(4) { font-weight:600; color:var(--i700); }