/* ============================================================
   XEMYA G2 — legacy structural vocabulary, rendered in G2.

   ai-model-fit.html, privacy.html and cohort.html carry a lot of hand-written
   content in the pre-redesign class vocabulary (.section, .hero, .ticklist,
   .timeline, .cta-band …). Rewriting every element of three long pages to G2
   class names would be a large diff over content that is not changing, and
   every hand-edit is a chance to alter copy that was signed off.

   So the markup stays and the vocabulary is re-rendered here in G2 tokens.
   Same result on screen, no content touched. The six pages built as G2 do not
   load this file, and nothing here is required by them.

   `.reveal` is deliberately a no-op that leaves content visible. site.js adds
   the animation when it runs; if it does not, the worst case must be an
   unanimated page rather than an invisible one. The old stylesheet hid these
   elements up front and relied on JS to reveal them — that is the failure
   mode where a script error blanks the page, and it is not worth an entrance.
   ============================================================ */

/* ---------- layout ---------- */
.section{padding:clamp(52px,7vw,104px) 0}
.section--tight{padding:clamp(34px,4.5vw,64px) 0}
.section--alt{background:var(--paper-2)}
.section--band{background:color-mix(in srgb,var(--accent) 7%,var(--card))}
.section__head{max-width:62ch;margin-bottom:clamp(26px,3.4vw,44px)}
.section__head--center{margin-left:auto;margin-right:auto;text-align:center}
.section__head h2{margin-bottom:12px}
.section__head p{color:var(--mid);font-size:17px;line-height:1.6}
.wrap--narrow{max-width:820px;margin-left:auto;margin-right:auto}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,34px)}

/* ---------- hero ---------- */
.hero{padding:clamp(60px,9vw,132px) 0 clamp(40px,6vw,72px);position:relative}
.hero--compact{padding:clamp(48px,6.5vw,92px) 0 clamp(30px,4vw,52px)}
/* width/height are load-bearing, not belt-and-braces. A <canvas> is a replaced
   element: with only `inset:0` it lays out at its INTRINSIC size, and site.js
   resize() writes `canvas.width = rect.width * dpr` — so the 300x150 default
   became 600px intrinsic on a 2x screen and the hero pushed the page 600px wide
   at every viewport below that. Sizing it in CSS makes the box authoritative. */
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.5}
.hero__content{position:relative;max-width:62ch}
.hero__content h1{margin:14px 0 18px}
.hero__sub{font-size:19.5px;line-height:1.6;color:var(--mid);max-width:52ch}
.hero__ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.hero__trust{margin-top:22px;font-size:14.5px;color:var(--faint);font-weight:500}

/* ---------- reveal: visible by default, animated only if JS says so ------- */
.reveal,.reveal--set{opacity:1;transform:none}

/* ---------- prose ---------- */
.prose{max-width:70ch}
.prose h2{margin:38px 0 12px}
.prose h3{margin:28px 0 10px}
.prose p{color:var(--mid);font-size:16.2px;line-height:1.7;margin-bottom:14px}
.prose ul,.prose ol{color:var(--mid);font-size:16.2px;line-height:1.7;padding-left:22px;margin-bottom:16px}
.prose li{margin-bottom:8px}
.prose a{color:var(--accent);font-weight:500}

/* ---------- tick lists ---------- */
.ticklist{list-style:none;padding:0;margin:14px 0 0}
.ticklist li{position:relative;padding-left:27px;margin-bottom:11px;
  color:var(--mid);font-size:15.6px;line-height:1.55}
.ticklist li:before{content:"";position:absolute;left:2px;top:.5em;width:9px;height:5px;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.ticklist--alt li:before{border-color:var(--connector)}
/* the "not included" list: a rule, not a tick, so it never reads as a feature */
.ticklist--no li:before{content:"";top:.72em;width:11px;height:0;transform:none;
  border-left:0;border-bottom:2px solid var(--faint)}

/* ---------- timeline ---------- */
.timeline{list-style:none;padding:0;margin:22px 0 0;position:relative}
.timeline:before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;
  background:var(--hair)}
.timeline__item{position:relative;padding-left:34px;margin-bottom:22px}
.timeline__item h3{margin-bottom:6px;font-size:17.5px}
.timeline__item p{color:var(--mid);font-size:15.4px;line-height:1.6}
/* The mark is a dot, but the markup carries "01".."04" inside it. Unhidden, the
   numeral overflowed the 16px circle and rendered as a digit with a ring struck
   through it. The text stays in the DOM for anyone reading the list linearly; it
   just does not draw. */
.timeline__mark{position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:50%;
  background:var(--card);border:2px solid var(--accent);
  overflow:hidden;text-indent:110%;white-space:nowrap}

/* ---------- price list ---------- */
.price-list{list-style:none;padding:0;margin:0}
.price-list li{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:baseline;
  padding:16px 0;border-bottom:1px solid var(--hair)}
.price-list li:last-child{border-bottom:0}
.price-list b{font-size:17px;font-weight:600;color:var(--ink)}
.price-list p{color:var(--mid);font-size:15px;margin-top:5px}
.price-list .p,.price-list span:last-child{font:600 20px/1 Outfit;color:var(--accent);
  white-space:nowrap;font-variant-numeric:tabular-nums}

/* ai-model-fit.html builds its price rows in page script (.price-row, .price-row__value,
   .price-row__price, .badge) and loads only g2 + g2-legacy — the sheet those class names
   came from is not on the page. With no rules of their own the badge fell through to
   `.price-list span:last-child` above and rendered as a SECOND 20px accent price, nowrap,
   which shoved the row past the card edge on every phone. Stated here so the fall-through
   never applies. */
.price-row__value{display:flex;flex-direction:column;align-items:flex-end;gap:7px;min-width:0}
.price-row__price{font:600 20px/1 Outfit;color:var(--ink);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.price-list .price-row .badge{font:600 11px/1.35 Outfit;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);background:color-mix(in srgb,var(--accent) 11%,var(--card));
  border-radius:999px;padding:5px 10px;white-space:normal;text-align:right}
.price-row__market{font-size:13.5px;color:var(--faint);margin-top:6px;
  font-variant-numeric:tabular-nums}
/* Below this the two columns cannot both hold their measure: the title wraps to
   three words a line while the price sits in a 60px gutter. Stack instead. */
@media(max-width:620px){
  .price-list li{grid-template-columns:1fr;gap:10px}
  .price-row__value{align-items:flex-start}
  .price-list .price-row .badge{text-align:left}
}

/* ---------- CTA band ---------- */
.cta-band{background:color-mix(in srgb,var(--accent) 8%,var(--card));
  border-radius:var(--r-lg);padding:clamp(34px,5vw,64px);text-align:center}
.cta-band h2{margin-bottom:14px}
.cta-band p{color:var(--mid);max-width:54ch;margin:0 auto 8px}
.cta-band__actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:26px}
.cta-stack{display:flex;flex-direction:column;gap:10px;align-items:center;margin-top:22px}

/* ---------- cohort ---------- */
.cohort-counter{display:inline-block;font:600 12.5px/1 Outfit;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,var(--card));
  padding:10px 15px;border-radius:99px;margin-bottom:18px}
.cohort-tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(16px,2.4vw,26px)}
.exchange{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,30px);margin-top:26px}
.card--exchange{background:var(--card);border-radius:var(--r);padding:24px 26px;
  box-shadow:var(--sh1)}
.card--exchange h3{margin-bottom:10px}
.faq{margin-top:26px}
.faq h3{margin:24px 0 8px;font-size:17.5px}
.faq p{color:var(--mid);font-size:15.6px;line-height:1.65}

@media(max-width:760px){
  .grid-2,.exchange{grid-template-columns:1fr}
}