/* =============================================================================
   Team Build Pro — design system
   "Proof, not hype."

   Mobile-first. Every size is a clamp() so there is one type ramp from 360px to
   1440px instead of a pile of breakpoint overrides. Colour is deliberately
   scarce: ink on paper, with a single indigo→violet accent that only appears on
   things you can act on. The competition in this category is all gradients and
   exclamation marks; restraint is the differentiator.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  --ink:        #0B1020;   /* headings, max contrast on paper */
  --ink-soft:   #1C2337;
  --muted:      #5A6478;   /* body copy */
  --muted-2:    #8A93A6;   /* meta, captions */
  --paper:      #FFFFFF;
  --paper-2:    #F7F8FC;   /* section banding */
  --line:       #E7E9F2;   /* hairlines — never a heavy border */
  --brand:      #4F46E5;
  --brand-2:    #7C3AED;
  --brand-wash: #EEF0FE;
  --free:       #047857;   /* the "free" story, distinct from brand */
  --free-wash:  #ECFDF5;

  --grad: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 28px;

  /* Shadows stay almost invisible. Depth comes from spacing, not drop shadow. */
  --shadow-1: 0 1px 2px rgba(11,16,32,.04), 0 4px 16px rgba(11,16,32,.04);
  --shadow-2: 0 2px 4px rgba(11,16,32,.04), 0 12px 32px rgba(11,16,32,.07);
  --shadow-3: 0 24px 60px rgba(11,16,32,.13);

  --wrap: 1140px;
  --gut: clamp(1.15rem, 4vw, 2rem);

  --nav-h: 62px;

  --ease: cubic-bezier(.16,1,.3,1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--muted);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- type ---------- */
h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.033em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.25rem, 7.2vw, 4.15rem); font-weight: 900; letter-spacing: -.042em; }
h2 { font-size: clamp(1.75rem, 4.6vw, 2.85rem); }
h3 { font-size: clamp(1.15rem, 2.4vw, 1.4rem); letter-spacing: -.022em; }
p  { margin: 0; }

.lede {
  font-size: clamp(1.06rem, 2.5vw, 1.28rem);
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--brand);
}
.eyebrow::before {
  content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--grad);
}

/* Accent only on the words that carry the promise. */
.hl { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: clamp(3.5rem, 9vw, 7rem); }
.section--tint { background: var(--paper-2); border-block: 1px solid var(--line); }
.section-head { max-width: 44rem; margin-bottom: clamp(2rem, 5vw, 3.25rem); }
.section-head .lede { margin-top: .9rem; }
.center { text-align: center; margin-inline: auto; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .95rem 1.6rem;
  border-radius: 999px; border: 1px solid transparent;
  font-weight: 650; font-size: .975rem; letter-spacing: -.011em;
  cursor: pointer; white-space: nowrap;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .2s, border-color .2s;
}
.btn--primary { background: var(--grad); color: #fff; box-shadow: 0 6px 18px rgba(79,70,229,.28); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(79,70,229,.34); }
.btn--ghost { background: var(--paper); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-1); }
.btn--ghost:hover { transform: translateY(-2px); border-color: #D3D7E6; }

/* ---------- store badges ---------- */
.badges { display: flex; flex-wrap: wrap; gap: .75rem; }
.badges a { display: block; transition: transform .22s var(--ease), filter .22s; }
.badges a:hover { transform: translateY(-2px); filter: brightness(1.04); }
.badges img { height: 52px; width: auto; }
@media (max-width: 400px) { .badges img { height: 46px; } }
.badges--center { justify-content: center; }

/* =============================================================================
   Header — slim, glassy, condenses on scroll
   ========================================================================== */
.hdr {
  position: sticky; top: 0; z-index: 900;
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, box-shadow .25s;
}
.hdr[data-stuck] { border-bottom-color: var(--line); box-shadow: 0 2px 14px rgba(11,16,32,.05); }
.hdr__in { display: flex; align-items: center; gap: 1rem; height: var(--nav-h); }

.brand { display: flex; align-items: center; gap: .6rem; font-weight: 800; color: var(--ink); letter-spacing: -.025em; }
.brand img { width: 30px; height: 30px; border-radius: 9px; }
.brand span { font-size: 1.02rem; }

.nav { margin-left: auto; display: none; align-items: center; gap: .35rem; }
@media (min-width: 900px) { .nav { display: flex; } }
.nav a {
  padding: .5rem .8rem; border-radius: 999px;
  font-size: .925rem; font-weight: 550; color: var(--muted);
  transition: color .18s, background .18s;
}
.nav a:hover { color: var(--ink); background: var(--paper-2); }
.nav a.is-hot { color: var(--brand); font-weight: 700; }

.hdr__cta { display: none; margin-left: .35rem; }
@media (min-width: 900px) { .hdr__cta { display: inline-flex; } }
.hdr__cta.btn { padding: .62rem 1.15rem; font-size: .9rem; }

.burger {
  margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--paper-2); border: 1px solid var(--line); cursor: pointer;
}
@media (min-width: 900px) { .burger { display: none; } }
.burger span { position: relative; width: 17px; height: 1.5px; background: var(--ink); border-radius: 2px; transition: background .2s; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 1.5px; background: var(--ink); border-radius: 2px;
  transition: transform .28s var(--ease);
}
.burger span::before { top: -5.5px; }
.burger span::after  { top:  5.5px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: translateY(-5.5px) rotate(-45deg); }

.sheet {
  position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 899;
  background: var(--paper); border-bottom: 1px solid var(--line);
  padding: .6rem var(--gut) 1.4rem;
  display: grid; gap: .1rem;
  transform: translateY(-8px); opacity: 0; pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease);
  box-shadow: var(--shadow-2);
  max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
}
.sheet[data-open] { transform: none; opacity: 1; pointer-events: auto; }
.sheet a {
  padding: .85rem .4rem; font-size: 1.02rem; font-weight: 600; color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.sheet a:last-of-type { border-bottom: 0; }
.sheet .btn { margin-top: .9rem; }
@media (min-width: 900px) { .sheet { display: none; } }

/* Invite bar — HIDDEN 2026-08-10 (owner). The sponsor's name now appears in the
   prospect hero eyebrow instead, which is inside the content rather than a
   separate band above the header.
   CSS rather than deleting the markup on purpose: referral-tracking.js calls
   getOrCreateInviteBarElement(), which RE-CREATES the element if it is absent,
   so removing the div would simply have it reappear unstyled. */
#top-invite-bar,
#top-invite-bar.visible { display: none !important; }
#top-invite-bar.visible {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  background: var(--ink); color: #fff;
  padding: .55rem 1rem; font-size: .875rem; font-weight: 550;
}
#top-invite-bar img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 1.5px solid rgba(255,255,255,.5); }

/* =============================================================================
   Hero
   ========================================================================== */
.hero { position: relative; padding-block: clamp(1.9rem, 5vw, 5rem) clamp(3rem, 8vw, 6rem); overflow: hidden; }
.hero::before {
  /* One soft wash of colour. Sits behind everything, never competes with text. */
  content: ""; position: absolute; z-index: -1;
  top: -22%; left: 50%; width: min(1000px, 128vw); aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(124,58,237,.10) 0%, rgba(79,70,229,.07) 38%, transparent 66%);
  pointer-events: none;
}
.hero__grid { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 940px) { .hero__grid { grid-template-columns: 1.06fr .94fr; gap: 3rem; } }

.hero h1 { margin-top: 1rem; }
.hero .lede { margin-top: 1.15rem; max-width: 33rem; }
.hero__cta { margin-top: 1.9rem; }
.hero__note {
  margin-top: 1.15rem; display: flex; align-items: center; gap: .5rem;
  font-size: .9rem; font-weight: 600; color: var(--ink-soft);
}
.hero__note svg { flex: none; color: var(--free); }

/* Hidden on phones on purpose. The hero animation IS the first impression, and
   on a 393px screen this row pushed it ~200px below the fold. Every fact here
   reappears in the pricing section, so nothing is lost. */
.trust { display: none; }
@media (min-width: 940px) {
  .trust {
    margin-top: 2.1rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
    display: flex; flex-wrap: wrap; gap: 1.6rem;
  }
}
.trust div { display: grid; gap: .1rem; }
.trust b { font-size: 1.02rem; color: var(--ink); font-weight: 750; letter-spacing: -.02em; }
.trust small { font-size: .8rem; color: var(--muted-2); }

/* =============================================================================
   The signature: a team assembling itself, ~2.1s
   Pure CSS/SVG. No JS, no canvas — it starts painting with the document.
   ========================================================================== */
.figure { position: relative; display: grid; place-items: center; }
.netwrap {
  /* Height follows the content now that the caption lives inside the card, so
     there is no fixed aspect ratio to keep in sync with the viewBox. Top padding
     is deliberately tighter than the sides — the YOU node is the first thing the
     eye lands on and it was floating. */
  width: 100%; max-width: 440px;
  background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--shadow-3);
  padding: .55rem 1.15rem 1.1rem;
  position: relative; overflow: hidden;
}
.net { width: 100%; height: auto; aspect-ratio: 400 / 360; overflow: visible; }

.net .lnk {
  fill: none; stroke: #C9CEE4; stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: var(--len, 120); stroke-dashoffset: var(--len, 120);
  animation: draw .58s var(--ease) forwards; animation-delay: var(--d, 0s);
}
.net .nd { transform-box: fill-box; transform-origin: center; opacity: 0; animation: pop .5s var(--ease) forwards; animation-delay: var(--d, 0s); }
.net .nd circle { fill: #fff; stroke: #C9CEE4; stroke-width: 1.6; }
.net .nd--root circle { fill: url(#gr); stroke: none; }
.net .nd--lit circle { fill: var(--brand-wash); stroke: var(--brand); }
/* The recruit is the person the visitor is being asked to picture, so it is the
   second-heaviest mark after YOU — filled, not a wash, but not the gradient. */
.net .nd--recruit circle { fill: #fff; stroke: var(--brand); stroke-width: 2; }
.net .lbl-nr { font: 800 9.5px Inter, sans-serif; fill: var(--brand); letter-spacing: .03em; }
.net .ring { fill: none; stroke: var(--brand); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; animation: halo 2.6s ease-out 2.15s infinite; }
.net text { font: 700 9px Inter, sans-serif; fill: var(--muted-2); letter-spacing: .04em; }
.net .lbl-you { fill: #fff; font-size: 10px; }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop  { 0% { opacity: 0; transform: scale(.35); } 70% { opacity: 1; transform: scale(1.09); } 100% { opacity: 1; transform: scale(1); } }
@keyframes halo { 0% { opacity: .55; transform: scale(.85); } 70%, 100% { opacity: 0; transform: scale(1.9); } }

@media (prefers-reduced-motion: reduce) {
  .net .lnk { stroke-dashoffset: 0; animation: none; }
  .net .nd  { opacity: 1; animation: none; }
  .net .ring { animation: none; opacity: 0; }
}

.netwrap__cap {
  margin-top: .35rem; text-align: center; font-size: .85rem; line-height: 1.45;
  color: var(--muted-2); text-wrap: balance;
}

/* =============================================================================
   Cards / grids
   ========================================================================== */
.grid { display: grid; gap: 1rem; }
@media (min-width: 720px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--2 { grid-template-columns: repeat(2, 1fr); } }

.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.35rem, 3vw, 1.85rem);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .2s;
}
.card--lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: #DBDFEE; }
.card h3 { margin-bottom: .5rem; }
.card p { font-size: .965rem; }

.ico {
  width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center; margin-bottom: 1rem;
  background: var(--brand-wash); color: var(--brand);
}
.ico svg { width: 21px; height: 21px; }
.ico--free { background: var(--free-wash); color: var(--free); }

/* numbered steps */
.step { position: relative; padding-top: .35rem; }
.step__n {
  font-size: .78rem; font-weight: 800; letter-spacing: .12em; color: var(--brand);
  display: block; margin-bottom: .7rem;
}
.step h3 { margin-bottom: .45rem; }

/* =============================================================================
   Product showcase — horizontal snap rail
   ========================================================================== */
.rail {
  display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: .5rem .25rem 1.5rem;
  margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut);
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.shot {
  flex: 0 0 auto; width: min(216px, 58vw); scroll-snap-align: center;
  border-radius: 20px; overflow: hidden; background: var(--paper);
  border: 1px solid var(--line); box-shadow: var(--shadow-2);
}
.shot img { width: 100%; height: auto; }

.railnav { display: flex; gap: .5rem; justify-content: center; margin-top: -.25rem; }
.railnav button {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-1);
  display: grid; place-items: center; cursor: pointer; color: var(--ink);
  transition: transform .2s var(--ease), border-color .2s;
}
.railnav button:hover { transform: translateY(-2px); border-color: #D3D7E6; }
.railnav svg { width: 18px; height: 18px; }

/* =============================================================================
   Two audiences
   ========================================================================== */
.paths { display: grid; gap: 1.15rem; }
@media (min-width: 860px) { .paths { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.path { border-radius: var(--r-xl); border: 1px solid var(--line); padding: clamp(1.5rem, 3.4vw, 2.15rem); background: var(--paper); }
.path--free { background: linear-gradient(180deg, var(--free-wash) 0%, var(--paper) 46%); border-color: #C6EBDA; }
.path h3 { font-size: clamp(1.3rem, 2.7vw, 1.6rem); margin-bottom: .55rem; }
.path > p { font-size: .99rem; }
.path ul { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .8rem; }
.path li { display: flex; gap: .65rem; font-size: .955rem; color: var(--ink-soft); line-height: 1.5; }
.path li svg { flex: none; margin-top: .28rem; width: 17px; height: 17px; color: var(--brand); }
.path--free li svg { color: var(--free); }

/* =============================================================================
   Video
   ========================================================================== */
.video {
  border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line);
  box-shadow: var(--shadow-3); background: #000; max-width: 880px; margin-inline: auto;
}
.video video { width: 100%; height: auto; display: block; }

/* =============================================================================
   Pricing
   ========================================================================== */
.prices { display: grid; gap: 1.15rem; justify-content: center; }
@media (min-width: 820px) { .prices { grid-template-columns: repeat(auto-fit, minmax(300px, 360px)); gap: 1.5rem; } }

.price {
  position: relative; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(1.6rem, 3.4vw, 2.15rem); text-align: center;
  box-shadow: var(--shadow-1);
}
.price--accent { border-color: #C6EBDA; box-shadow: var(--shadow-2); }
.price__tag {
  display: inline-block; padding: .4rem 1rem; border-radius: 999px;
  font-size: .8rem; font-weight: 750; letter-spacing: .01em;
  background: var(--brand-wash); color: var(--brand); margin-bottom: 1.15rem;
}
.price--accent .price__tag { background: var(--free-wash); color: var(--free); }
.price__fig { font-size: clamp(2.1rem, 5.5vw, 2.9rem); font-weight: 900; color: var(--ink); letter-spacing: -.04em; line-height: 1.1; }
.price__fig small { font-size: .95rem; font-weight: 550; color: var(--muted); letter-spacing: normal; }
.price__lead { font-size: 1.55rem; font-weight: 800; color: var(--ink); letter-spacing: -.03em; }
.price ul { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: .78rem; text-align: left; }
.price li { display: flex; gap: .6rem; font-size: .945rem; color: var(--ink-soft); }
.price li svg { flex: none; margin-top: .25rem; width: 16px; height: 16px; color: var(--free); }
.price__fine { font-size: .875rem; color: var(--muted); margin-bottom: 1.25rem; line-height: 1.55; }

/* =============================================================================
   Book strip
   ========================================================================== */
.book { display: grid; gap: 1.75rem; align-items: center; }
@media (min-width: 720px) { .book { grid-template-columns: auto 1fr; gap: 2.5rem; } }
/* No box-shadow or border-radius here on purpose. The cover is a 3D mockup PNG
   with a TRANSPARENT background and its own shadow already rendered into the
   artwork. A CSS box-shadow is cast by the element's rectangular box, not the
   visible book, so it drew a shadowed white card around a floating book.
   Production has never applied one either. */
.book img { width: 158px; }

/* =============================================================================
   Footer
   ========================================================================== */
.ftr { background: var(--ink); color: #A8B0C4; padding-block: clamp(2.75rem, 6vw, 4rem) 2rem; }
.ftr__grid { display: grid; gap: 2.25rem; }
@media (min-width: 780px) { .ftr__grid { grid-template-columns: 1.5fr 1fr 1fr; gap: 3rem; } }
.ftr .brand { color: #fff; }
.ftr p { font-size: .92rem; margin-top: .9rem; max-width: 26rem; }
.ftr h4 { color: #fff; font-size: .78rem; letter-spacing: .11em; text-transform: uppercase; margin-bottom: 1rem; font-weight: 700; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.ftr a { font-size: .92rem; color: #A8B0C4; transition: color .18s; }
.ftr a:hover { color: #fff; }
.ftr__base {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center;
  font-size: .84rem; color: #7B849B;
}
.ftr__base .langs { margin-left: auto; display: flex; gap: .9rem; }

/* ---------- reveal on scroll ---------- */
.rv { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

/* =============================================================================
   FAQ
   ========================================================================== */
/* 11 chips wrapped to five rows on a 393px screen and pushed the questions
   themselves off the first view. On phones they scroll horizontally instead;
   they only wrap once there is room for it. */
.filters {
  display: flex; gap: .5rem; margin-bottom: 1.5rem;
  overflow-x: auto; flex-wrap: nowrap;
  scrollbar-width: none;
  margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut);
  -webkit-overflow-scrolling: touch;
}
.filters::-webkit-scrollbar { display: none; }
.filters .chip { flex: 0 0 auto; }
@media (min-width: 900px) {
  .filters { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
}
.chip {
  padding: .5rem 1rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--paper);
  font-size: .875rem; font-weight: 600; color: var(--muted);
  transition: background .18s, color .18s, border-color .18s;
}
.chip:hover { color: var(--ink); border-color: #D3D7E6; }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

.search { position: relative; margin-bottom: 1.75rem; max-width: 30rem; }
.search input {
  width: 100%; padding: .9rem 1rem .9rem 2.75rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--paper);
  font: inherit; font-size: .975rem; color: var(--ink);
}
.search input::placeholder { color: var(--muted-2); }
.search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79,70,229,.12); }
.search svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--muted-2); }

.qa { border-top: 1px solid var(--line); }
.qa__i { border-bottom: 1px solid var(--line); }
.qa__i[hidden] { display: none; }
.qa__q {
  width: 100%; display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between;
  padding: 1.25rem 0; background: none; border: 0; cursor: pointer; text-align: left;
  font-size: 1.02rem; font-weight: 650; color: var(--ink); letter-spacing: -.015em; line-height: 1.45;
}
.qa__q:hover { color: var(--brand); }
.qa__mark { flex: none; width: 22px; height: 22px; margin-top: .15rem; position: relative; }
.qa__mark::before, .qa__mark::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--brand); border-radius: 2px;
  transform: translate(-50%,-50%); transition: transform .28s var(--ease), opacity .2s;
}
.qa__mark::before { width: 13px; height: 2px; }
.qa__mark::after  { width: 2px; height: 13px; }
.qa__i.open .qa__mark::after { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
.qa__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--ease); }
.qa__i.open .qa__a { grid-template-rows: 1fr; }
.qa__a > div { overflow: hidden; }
.qa__a p { font-size: .975rem; margin-bottom: .85rem; }
.qa__a ul { margin: 0 0 .95rem; padding-left: 1.1rem; font-size: .975rem; }
.qa__a li { margin-bottom: .4rem; }
.qa__a > div > :last-child { margin-bottom: 1.35rem; }
@media (prefers-reduced-motion: reduce) { .qa__a { transition: none; } }

.noresult { padding: 2.5rem 0; color: var(--muted-2); font-size: .975rem; }

/* generic prose page (legal, contact) */
.prose { max-width: 46rem; }
.prose h2 { font-size: clamp(1.35rem, 3vw, 1.7rem); margin: 2.5rem 0 .9rem; }
.prose h3 { margin: 1.9rem 0 .6rem; }
.prose p, .prose li { font-size: 1rem; margin-bottom: 1rem; }
.prose ul, .prose ol { padding-left: 1.25rem; margin-bottom: 1.25rem; }
.prose a { color: var(--brand); font-weight: 600; }
.prose strong { color: var(--ink); }

/* page hero (non-home) */
.phero { padding-block: clamp(2.25rem, 6vw, 4rem) clamp(1.5rem, 4vw, 2.5rem); }
.phero h1 { font-size: clamp(2rem, 5.5vw, 3.15rem); }
.phero .lede { margin-top: 1rem; max-width: 40rem; }

/* =============================================================================
   Forms
   ========================================================================== */
.field { display: grid; gap: .45rem; margin-bottom: 1.15rem; }
.field label { font-size: .875rem; font-weight: 650; color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%; padding: .85rem 1rem;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper); font: inherit; font-size: .975rem; color: var(--ink);
  transition: border-color .18s, box-shadow .18s;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79,70,229,.12);
}
.field--row { display: grid; gap: 1.15rem; }
@media (min-width: 640px) { .field--row { grid-template-columns: 1fr 1fr; } }
.formnote { font-size: .85rem; color: var(--muted-2); margin-top: .9rem; }
.formmsg { padding: .95rem 1.15rem; border-radius: var(--r-sm); font-size: .95rem; margin-bottom: 1.25rem; display: none; }
.formmsg.ok  { display: block; background: var(--free-wash); color: var(--free); border: 1px solid #A7E3CA; }
.formmsg.err { display: block; background: #FEF2F2; color: #B91C1C; border: 1px solid #FCA5A5; }

/* =============================================================================
   Index listings (blog, companies)
   ========================================================================== */
.posts { display: grid; gap: 1rem; }
@media (min-width: 700px)  { .posts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .posts { grid-template-columns: repeat(3, 1fr); } }
.post { display: flex; flex-direction: column; }
.post time { font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-2); }
.post h3 { margin: .7rem 0 .55rem; font-size: 1.08rem; line-height: 1.32; }
.post p { font-size: .92rem; color: var(--muted); }
.post span.more { margin-top: auto; padding-top: 1rem; font-size: .875rem; font-weight: 650; color: var(--brand); }

.coy { display: grid; gap: .6rem; grid-template-columns: 1fr; }
@media (min-width: 560px)  { .coy { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .coy { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1120px) { .coy { grid-template-columns: repeat(4, 1fr); } }
.coy a {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .95rem 1.15rem; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper); font-size: .935rem; font-weight: 600; color: var(--ink);
  transition: border-color .18s, transform .2s var(--ease), box-shadow .2s var(--ease);
}
.coy a:hover { border-color: #D3D7E6; transform: translateY(-2px); box-shadow: var(--shadow-1); }
.coy a::after { content: "→"; color: var(--brand); flex: none; opacity: .55; }

/* Article headlines are real post titles, often 80+ characters. The homepage
   ramp turns those into seven lines on a phone, so they get their own. */
.phero--article h1 { font-size: clamp(1.6rem, 4.4vw, 2.45rem); letter-spacing: -.032em; }
.phero--article .lede { font-size: clamp(1rem, 2.2vw, 1.15rem); }
.prose audio { width: 100%; margin: 1.25rem 0; }

/* =============================================================================
   Language selector
   ========================================================================== */
/* Always in the header bar, never only inside the burger menu. A visitor who
   lands on the wrong language must be able to leave it without first
   discovering a hidden menu — that is the one control that has to be reachable
   before they read anything. On phones it sits immediately left of the burger,
   on the same baseline as the logo. */
.locale { display: flex; align-items: center; gap: 1px; margin-left: auto; }
.locale a {
  padding: .34rem .5rem; font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  color: var(--muted-2); border-radius: 7px; line-height: 1;
  transition: color .18s, background .18s;
}
.locale a:hover { color: var(--ink); background: var(--paper-2); }
.locale a.on { color: var(--ink); background: var(--paper-2); }
.locale a.on:hover { cursor: default; }

/* Desktop: the nav already claims the free space, so sit next to the CTA. */
@media (min-width: 900px) { .locale { margin-left: .35rem; } }

/* Phones: tighten so brand + 4 chips + burger fit one row without wrapping. */
@media (max-width: 899px) {
  .locale { gap: 0; margin-right: .3rem; }
  .locale a { padding: .3rem .34rem; font-size: .72rem; letter-spacing: .02em; }
}

/* Measured, not guessed: at 393px the row needs 296px of 356px available, so
   the wordmark stays. Only below 360px does brand + 4 chips + burger stop
   fitting, and there the mark alone carries the brand. */
@media (max-width: 359px) {
  .brand span { display: none; }
  .locale a { padding: .3rem .28rem; }
}

/* It lives in the header bar now, so the duplicate in the sheet is removed. */
.sheet .locale { display: none; }