/* ============================================================================
   LANGUY — ONE BRAND (2026-09-28, founder: "one brand, no different pages —
   best, most converting, most professional")
   ----------------------------------------------------------------------------
   The /free look, as one sheet, for every page that is not /free itself.
   Reference = the live /free door: bright paper ground, ONE accent (fresh leaf
   #52BD2A), the deep-green primary button with a white label, the Archivo
   Black LANGUY wordmark next to the Globi face disc, Bricolage Grotesque for
   display, DM Sans for everything you read.

   LOAD ORDER on a page:
     /assets/languy-tokens.css   base tokens (shared with /free)
     /assets/world.css           shared components (pages that use them)
     /assets/languy-buttons.css  THE button + colour tokens (--lg-*), same file /free loads
     /assets/brand.css           this file: type, header, footer, surfaces
   Button colours are NOT repeated here: they come from --lg-* in
   languy-buttons.css, so /free and these pages can never drift apart.

   Fonts: the page links the same Google Fonts URL /free uses (Archivo Black,
   Bricolage Grotesque 800, DM Sans 500/700).
   ============================================================================ */

:root{
  --bg:#FBFBFA; --ground:#FBFBFA;
  --ink:#111111;            /* body text, like /free */
  --ink-head:#0E1433;       /* headings + wordmark, like /free */
  --ink-2:#3F4753;
  --muted:#5B6472;
  --card:#FFFFFF;
  --card-line:#E4E7EE;      /* /free card border */
  --card-r:22px;
  --disp:'Bricolage Grotesque',system-ui,sans-serif;
  --sans:'DM Sans',-apple-system,system-ui,sans-serif;
  --wordmark:'Archivo Black',sans-serif;
  --line:rgba(14,20,51,.10);
  --line-2:rgba(14,20,51,.16);
  --earned:#2E7A18;         /* the word-count star: green, not a second accent */
}

html{ background:var(--bg); }
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.55; letter-spacing:-.011em;
}
button, input, select, textarea{ font-family:var(--sans); }

h1,h2,h3{
  font-family:var(--disp); font-weight:800; color:var(--ink-head);
  letter-spacing:-.035em; line-height:1.0; text-transform:none;
}
h3{ letter-spacing:-.02em; }

/* two-tone headlines are retired: the whole headline is one ink */
h1 .out, h2 .out{ color:var(--ink-head) !important; }

/* the one highlighted word — /free's green marker under "Korean?" */
.hl{ box-shadow:inset 0 -.2em 0 rgba(82,189,42,.35); }

/* ------------------------------------------------------------ THE HEADER ---
   Same bar as /free: face disc + LANGUY wordmark left, one quiet white pill
   right. No green in the bar: the page's ONE green action sits below it. */
.pp{
  position:sticky; top:0; z-index:60;
  background:rgba(251,251,250,.92);
  -webkit-backdrop-filter:blur(12px) saturate(160%); backdrop-filter:blur(12px) saturate(160%);
  border-bottom:1px solid transparent;
}
.pp.stuck{ border-bottom-color:var(--line); }
.pp-in{ height:60px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pp-mark{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-left:-6px; padding:0 6px;
  border-radius:12px; color:var(--ink-head);
}
.pp-mark img.lgy-emblem{ width:30px; height:30px; flex:none; display:block; }
.pp-mark b{
  font-family:var(--wordmark); font-weight:400; font-size:19px; line-height:1;
  letter-spacing:.01em; text-transform:uppercase; color:var(--ink-head);
}
.pp-right{ display:flex; align-items:center; gap:8px; }
/* the old "N words" passport chip is retired on /free (v5: "nobody understands
   it at the top"), so it is retired here too */
.pp-chip{ display:none !important; }
.pp-go{
  display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 15px;
  background:#fff; color:var(--ink-head); border:1px solid rgba(14,20,51,.12); border-radius:999px;
  font:600 14px/1 var(--sans); letter-spacing:0; white-space:nowrap; text-transform:none;
  transition:border-color .15s ease, transform .08s ease-out;
}
.pp-go:hover{ background:#fff; border-color:rgba(14,20,51,.28); }
.pp-go:active{ transform:scale(.97); }
.pp-go::after{ content:"\2192"; font-weight:700; }

/* ------------------------------------------------------------ EYEBROWS ----- */
.kick{
  display:inline-flex; align-items:center; gap:7px;
  font:600 13px/1.2 var(--sans); letter-spacing:0; text-transform:none;
  color:var(--ink-2); font-stretch:normal;
}
.kick::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--lg-green,#52BD2A); flex:none; }
.kick.quiet::before{ background:var(--lg-green,#52BD2A); }

/* ------------------------------------------------------------ BUTTONS ------
   Values come from languy-buttons.css (--lg-*), the file /free loads last. */
.door{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:var(--lg-h,56px); padding:0 22px; width:100%; max-width:440px;
  background:var(--lg-btn,#1C7F36); color:var(--lg-on-btn,#fff);
  border:0; border-radius:var(--lg-btn-r,14px); box-shadow:var(--lg-btn-shadow);
  font:600 17px/1.1 var(--sans); letter-spacing:-.005em; text-transform:none; text-decoration:none;
  cursor:pointer; transition:transform .08s ease-out, box-shadow .08s ease-out, background-color .15s ease;
}
.door:hover{ background:var(--lg-btn-hover,#197030); }
.door:active{ transform:scale(.98); background:var(--lg-btn-press,#16632A); box-shadow:var(--lg-btn-shadow-press); }
.door svg{ width:17px; height:17px; flex:none; }
.door:focus-visible{ outline:3px solid var(--ink-head); outline-offset:3px; }
.door-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:52px; padding:0 20px;
  background:#fff; color:var(--ink-head);
  border:2px solid var(--lg-edge,#E4E4E7); border-radius:var(--lg-r,16px); box-shadow:0 2px 0 var(--lg-edge,#E4E4E7);
  font:700 16px/1.1 var(--sans); letter-spacing:0; text-transform:none; text-decoration:none;
  cursor:pointer; transition:transform .08s ease-out, box-shadow .08s ease-out, border-color .15s ease;
}
.door-ghost:hover{ border-color:var(--lg-edge-hi,#D4D4D8); color:var(--ink-head); }
.door-ghost:active{ transform:translateY(2px); box-shadow:0 0 0 var(--lg-edge,#E4E4E7); }
.door-fine{ color:var(--muted); }

/* text links: ink, bold, green underline — /free's tertiary link */
.tlink, .kit-try, .en-link, .note-card a, .rung-note a, .sec-p a, .story a{
  color:var(--ink-head) !important; font-weight:700;
  text-decoration:underline; text-decoration-color:var(--lg-green,#52BD2A);
  text-decoration-thickness:2px; text-underline-offset:4px;
}

/* ------------------------------------------------------------ SURFACES -----
   White card on paper, one soft border, /free's 22px corner. */
.kit, .rung, .note-card, .chain, .card{
  background:var(--card); border:1px solid var(--card-line); border-radius:var(--card-r);
  box-shadow:none;
}
.rung.lit{ border-color:var(--lg-green,#52BD2A); box-shadow:0 0 0 1px var(--lg-green,#52BD2A); }
.rung.lit .rung-k{ color:var(--lg-green-text,#2E7A18); }

.kit-price, .rung-price, .stats .v, .price{
  font-family:var(--disp); font-weight:800; color:var(--ink-head); letter-spacing:-.03em;
}
.rung-k, .stats .l{ font-family:var(--sans); letter-spacing:.1em; }
.founding{
  background:var(--lg-green-soft,#EEF8E8); border:1px solid rgba(46,122,24,.18); border-radius:16px;
}
.founding .t{ font-family:var(--sans); letter-spacing:.1em; color:var(--lg-green-text,#2E7A18); }

/* the founding offer line, same words and shape as /free's */
.offer-line{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:15px; color:var(--ink-2); line-height:1.45;
}
.offer-line b{ color:var(--ink-head); }
.offer-line .dot{ width:8px; height:8px; border-radius:50%; background:var(--lg-green,#52BD2A); flex:none; }

/* ------------------------------------------------------------ FOOTER ------- */
.wfoot{ border-top:1px solid var(--line); padding:36px 0 44px; background:var(--bg); }
.wfoot .foot-mark{ display:inline-flex; align-items:center; gap:8px; color:var(--ink-head); }
.wfoot .foot-mark img{ width:26px; height:26px; }
.wfoot .foot-mark b{ font-family:var(--wordmark); font-weight:400; font-size:16px; text-transform:uppercase; letter-spacing:.01em; }
.wfoot nav{ margin-top:16px; display:flex; flex-wrap:wrap; gap:8px; }
.wfoot nav a{
  display:inline-flex; align-items:center; min-height:40px; padding:0 14px;
  background:#fff; border:1px solid rgba(14,20,51,.12); border-radius:999px;
  font:600 14px/1 var(--sans); color:var(--ink-head);
}
.wfoot nav a:hover{ border-color:rgba(14,20,51,.28); }
.wfoot .legal{ margin-top:20px; font-size:14px; color:var(--muted); }
.wfoot .legal a{ color:var(--muted); text-decoration:underline; text-underline-offset:2px; }

/* ------------------------------------------------------ PAGE LEFTOVERS -----
   Page-local rules on /products still set a second green fill and a tracked
   caps kicker; `html body` lifts these over them so the page has ONE green
   action per view, like /free. */
html body .en-cap-go{
  background:#fff; color:var(--ink-head); border:2px solid var(--lg-edge,#E4E4E7);
  border-radius:var(--lg-r,16px); box-shadow:0 2px 0 var(--lg-edge,#E4E4E7);
  font:700 16px/1 var(--sans); text-transform:none;
}
html body .en-cap-go:hover{ background:#fff; border-color:var(--lg-edge-hi,#D4D4D8); }
html body .en-cap-row input{ border-radius:var(--lg-r,16px); font-family:var(--sans); }
html body .en-cap-l, html body .founding .t{
  font:700 14px/1.3 var(--sans); letter-spacing:0; text-transform:none; font-stretch:normal;
}
html body .en-cap-l{ color:var(--ink-head); }
html body .founding{
  background:var(--lg-green-soft,#EEF8E8); border:1px solid rgba(46,122,24,.18); border-radius:16px;
}
html body .founding .t{ color:var(--lg-green-text,#2E7A18); }
html body .rung-k{ font-family:var(--sans); font-weight:700; font-stretch:normal; letter-spacing:.08em; }

html body .chain-tgt{ font-family:var(--disp); font-weight:800; color:var(--ink-head); }
html body .chain-tgt .hi{ color:var(--ink-head); background:none; box-shadow:inset 0 -.22em 0 rgba(82,189,42,.35); border-radius:0; }
html body .chain-row .spk{ font-family:var(--sans); letter-spacing:.04em; }

/* /free's header pill, same words and finish */
.free-ask{
  flex:none; white-space:nowrap; cursor:pointer;
  display:inline-flex; align-items:center; min-height:34px; padding:6px 11px;
  background:#fff; color:#3F4753; border:1px solid rgba(14,20,51,.12); border-radius:999px;
  font:500 13.5px/1 var(--sans);
}
.free-ask:hover{ border-color:rgba(14,20,51,.28); }
/* sections sit on the paper ground; cards are white with a soft border */
html body .band{ background:var(--bg); border-color:transparent; }
html body .rule-c, html body .stats{
  background:var(--card); border:1px solid var(--card-line); border-radius:var(--card-r);
}
html body .rung-why{ background:var(--bg); border:1px solid var(--card-line); border-radius:16px; }

@media (prefers-reduced-motion:reduce){
  .door, .door-ghost, .pp-go{ transition:none; }
}