/* =============================================================================
   Token Genie — site styles.

   Ported from the Tailwind v4 build one-for-one: the same oklch tokens, the
   same gradients, the same keyframes. Written as plain CSS because the site is
   four static pages, and a build step that exists only to expand utility
   classes is a dependency, a toolchain and a deploy step for no gain.

   Colours are oklch throughout, as in the original. Do not "simplify" them to
   hex — the gradients interpolate in oklab and would band visibly in sRGB.
   ========================================================================== */

:root {
  --radius: 0.9rem;
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 6px);

  --background: oklch(0.09 0.004 285);
  --foreground: oklch(0.97 0.002 285);
  --surface: oklch(0.13 0.005 285);
  --muted-foreground: oklch(0.68 0.008 285);
  --accent: oklch(0.74 0.22 340);
  --accent-foreground: oklch(0.13 0.02 288);
  --strike: oklch(0.5 0.008 285);
  --cyan: oklch(0.82 0.15 200);
  --border: oklch(1 0 0 / 0.08);

  --font-sans: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  --gradient-mint: linear-gradient(
    100deg,
    oklch(0.82 0.14 200),
    oklch(0.78 0.18 300) 50%,
    oklch(0.74 0.22 340)
  );
  --gradient-accent: linear-gradient(135deg, oklch(0.72 0.2 200), oklch(0.74 0.22 340));
  --shadow-glass: 0 30px 80px -60px oklch(0 0 0 / 0.9);
  --shadow-glow: 0 0 0 1px color-mix(in oklab, var(--accent) 30%, transparent),
    0 20px 60px -28px color-mix(in oklab, var(--accent) 60%, transparent);
}

*,
*::before,
*::after { box-sizing: border-box; border-color: var(--border); }

html {
  scroll-behavior: smooth;
  color-scheme: dark;
  /* The header is fixed, so an in-page anchor would otherwise land underneath it. */
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.035em; margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
::selection { background: var(--accent); color: var(--accent-foreground); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* ---- layout ------------------------------------------------------------- */
.wrap { margin-inline: auto; max-width: 72rem; padding-inline: 1.25rem; }
@media (min-width: 640px) { .wrap { padding-inline: 2rem; } }
.section { border-top: 1px solid var(--border); }
.section-inner { padding-block: 6rem; }

/* ---- type --------------------------------------------------------------- */
.label {
  font-size: 0.68rem;
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--accent) 85%, white);
}
.text-gradient-mint {
  background: var(--gradient-mint);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.muted { color: var(--muted-foreground); }
.strike { color: var(--strike); }
.h2 { font-size: 2.1rem; font-weight: 600; line-height: 1.08; letter-spacing: -0.03em; }
@media (min-width: 768px) { .h2 { font-size: 2.6rem; } }
.lede { margin-top: 1.25rem; line-height: 1.7; color: var(--muted-foreground); }

/* ---- surfaces ----------------------------------------------------------- */
.glass {
  background: color-mix(in oklab, oklch(1 0 0) 4%, transparent);
  border: 1px solid color-mix(in oklab, oklch(1 0 0) 8%, transparent);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(20px) saturate(120%);
  box-shadow: var(--shadow-glass);
}
.glass-soft {
  background: color-mix(in oklab, oklch(1 0 0) 2.5%, transparent);
  border: 1px solid color-mix(in oklab, oklch(1 0 0) 6%, transparent);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(12px);
}
.glow-ring { box-shadow: var(--shadow-glow); }

/* ---- backdrop ----------------------------------------------------------- */
.backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.aurora {
  position: absolute; inset-inline: 0; top: 0; height: 90vh;
  background:
    radial-gradient(50% 40% at 50% 0%, oklch(0.7 0.18 200 / 0.14), transparent 70%),
    radial-gradient(40% 35% at 85% 8%, oklch(0.72 0.2 340 / 0.1), transparent 70%);
}
.grid-lines {
  position: absolute; inset-inline: 0; top: 0; height: 110vh;
  background-image:
    linear-gradient(to right, oklch(1 0 0 / 0.028) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(1 0 0 / 0.028) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 0%, black, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 55% at 50% 0%, black, transparent 75%);
}
.orb {
  position: absolute; border-radius: 9999px; filter: blur(140px);
  pointer-events: none; background: var(--gradient-accent);
}
.page { position: relative; z-index: 10; }

/* ---- header ------------------------------------------------------------- */
.site-header { position: fixed; inset-inline: 0; top: 0; z-index: 50; }
.site-header > div {
  transition: background-color .3s, border-color .3s, backdrop-filter .3s;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled > div {
  border-bottom-color: var(--border);
  background: color-mix(in oklab, var(--background) 80%, transparent);
  backdrop-filter: blur(20px);
}
.header-row {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 1rem;
}
.brand { display: flex; align-items: center; gap: 0.625rem; }
.brand img { height: 1.5rem; width: auto; }
.brand span {
  font-family: var(--font-display); font-size: 0.98rem;
  font-weight: 600; letter-spacing: -0.02em;
}
.nav { display: none; align-items: center; gap: 2.25rem; }
@media (min-width: 768px) { .nav { display: flex; } }
.nav a { font-size: 0.9rem; color: var(--muted-foreground); transition: color .2s; }
.nav a:hover { color: var(--foreground); }

/* ---- buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border-radius: 9999px; font-weight: 600; cursor: pointer;
  border: 1px solid transparent; font-family: inherit;
  transition: opacity .2s, color .2s, border-color .2s, background-color .2s;
}
.btn-solid { background: var(--foreground); color: var(--background); }
.btn-solid:hover { opacity: 0.85; }
.btn-outline { border-color: var(--border); color: var(--muted-foreground); }
.btn-outline:hover { border-color: color-mix(in oklab, var(--foreground) 25%, transparent); color: var(--foreground); }
.btn-sm { padding: 0.5rem 1rem; font-size: 0.875rem; }
.btn-md { padding: 0.75rem 1.5rem; font-size: 0.95rem; }
.btn-lg { padding: 0.875rem 1.75rem; font-size: 1rem; }
.btn .arrow { transition: transform .2s; }
.btn:hover .arrow { transform: translateX(2px); }
/* pointer-events, not just opacity: these buttons are anchors, so `disabled`
   is decorative and the click still fires without this. */
.btn[disabled] { opacity: 0.6; cursor: default; pointer-events: none; }

/* ---- hero --------------------------------------------------------------- */
.hero { padding-top: 9rem; padding-bottom: 1.5rem; }
@media (min-width: 1024px) { .hero { padding-top: 11rem; } }
.hero-head { margin-inline: auto; max-width: 48rem; display: flex; flex-direction: column; align-items: center; text-align: center; }
.pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1px solid var(--border); border-radius: 9999px;
  padding: 0.375rem 0.875rem; font-size: 0.72rem;
  letter-spacing: 0.02em; color: var(--muted-foreground);
}
.pill .dot { height: 0.375rem; width: 0.375rem; border-radius: 9999px; background: var(--accent); }
.hero h1 {
  margin-top: 2rem;
  font-size: clamp(2.6rem, 7vw, 4.75rem);
  font-weight: 600; line-height: 1.02; letter-spacing: -0.04em;
}
.hero-sub { margin-top: 1.5rem; max-width: 36rem; font-size: 1.05rem; line-height: 1.7; color: var(--muted-foreground); text-wrap: balance; }
.hero-cta { margin-top: 2.25rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem; }
.hero-note { margin-top: 1.25rem; font-size: 0.78rem; color: var(--muted-foreground); }

/* ---- stats -------------------------------------------------------------- */
.stats {
  margin-top: 3.5rem; display: grid; grid-template-columns: 1fr;
  border-block: 1px solid var(--border);
}
.stats > div { padding: 1.75rem 1.5rem; text-align: center; border-top: 1px solid var(--border); }
.stats > div:first-child { border-top: 0; }
@media (min-width: 640px) {
  .stats { grid-template-columns: repeat(3, 1fr); }
  .stats > div { border-top: 0; border-left: 1px solid var(--border); }
  .stats > div:first-child { border-left: 0; }
}
.stats dd { margin: 0; font-family: var(--font-display); font-size: 2.6rem; font-weight: 600; line-height: 1; }
.stats dt { margin-top: 0.75rem; font-size: 0.8rem; color: var(--muted-foreground); }

/* ---- hero compression demo ----------------------------------------------
   Two panels side by side: the prompt as typed on the left, exactly as typed,
   and the rewrite on the right. The original is never edited in place — the
   filler recedes and the load-bearing phrases light up, so the claim the
   animation makes is "it knows what matters", not "it deletes things". The
   same phrases are highlighted in both panels, which is what lets the eye
   carry a constraint across the gap and see that it survived.
   ------------------------------------------------------------------------ */
.demo { margin-top: 4rem; }

.demo-tabs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem;
  margin-bottom: 1rem;
}
.demo-tab {
  appearance: none; cursor: pointer;
  border: 1px solid transparent; border-radius: 9999px;
  background: none;
  color: var(--strike);
  padding: 0.4rem 0.9rem;
  font: inherit; font-size: 0.78rem; font-weight: 600;
  transition: color .2s, border-color .2s, background-color .2s;
}
.demo-tab:hover { color: var(--foreground); border-color: var(--border); }
/* The selected tab has to be obvious at a glance — it is the only thing saying
   which of the three examples is on screen. A tint alone was not enough. */
.demo-tab[aria-selected="true"] {
  color: var(--accent-foreground);
  border-color: transparent;
  background: var(--gradient-accent);
}

.demo-card { padding: 0.5rem; }

.demo-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 900px) {
  /* The middle column is the arrow/status rail; it sizes to its own content. */
  .demo-grid { grid-template-columns: 1fr auto 1fr; align-items: stretch; }
}

.demo-pane {
  background: color-mix(in oklab, oklch(1 0 0) 2.5%, transparent);
  border: 1px solid color-mix(in oklab, oklch(1 0 0) 6%, transparent);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  min-width: 0;
}
.demo-pane-out {
  border-color: color-mix(in oklab, var(--accent) 40%, transparent);
  background: color-mix(in oklab, var(--accent) 6%, transparent);
}

.demo-pane-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.demo-pane-label {
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.2em; color: var(--muted-foreground);
}
.demo-pane-label.is-accent { color: var(--accent); }
.demo-count {
  border: 1px solid var(--border); border-radius: 9999px;
  padding: 0.2rem 0.6rem; white-space: nowrap;
  font-family: var(--font-mono); font-size: 0.72rem;
  font-variant-numeric: tabular-nums; color: var(--muted-foreground);
}
.demo-count.is-accent {
  border-color: transparent;
  background: color-mix(in oklab, var(--accent) 15%, transparent);
  color: var(--accent);
}

.demo-text {
  margin: 1rem 0 0; font-size: 0.85rem; line-height: 1.8;
  /* The originals contain real paragraph breaks; keep them. */
  white-space: pre-wrap;
  text-align: left;
}

/* Every word is its own span so the left panel can dim and the right panel
   can write itself in, without either one changing the words. Load-bearing
   phrases are wrapped whole in a <mark>, so the highlight runs through the
   spaces inside a phrase instead of breaking into one chip per word. */
.demo-text .w { transition: color .45s ease, opacity .45s ease; }
.demo-text mark {
  background: transparent; color: inherit;
  border-radius: 0.3rem;
  padding: 0.1em 0.2em; margin-inline: -0.2em;
  /* A phrase that wraps mid-highlight gets the padding on both fragments. */
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-color .45s ease;
}

/* Left panel: the filler fades back once the scan starts and the phrases that
   are carrying the request light up. The words themselves never change. */
.demo-original .w { color: var(--foreground); }
.demo-original.is-scanning .w { color: var(--strike); }
.demo-original.is-scanning .keep.on { background: color-mix(in oklab, var(--accent) 22%, transparent); }
.demo-original.is-scanning .keep.on .w { color: var(--foreground); }

/* Right panel: words arrive in reading order. */
.demo-compressed .w {
  display: inline-block; opacity: 0; transform: translateY(6px);
  transition: opacity .4s ease, transform .4s ease;
  transition-delay: calc(var(--i) * 22ms);
}
.demo-compressed .keep .w { color: var(--accent); font-weight: 600; }
.demo-compressed.is-written .w { opacity: 1; transform: none; }

/* Middle rail. Horizontal on stacked layouts, vertical beside the panels. */
.demo-mid {
  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
  padding: 0.75rem;
}
.demo-rule { flex: 1; height: 1px; background: var(--border); }
@media (min-width: 900px) {
  .demo-mid { flex-direction: column; padding: 0.75rem 0.9rem; }
  .demo-rule { flex: 1; width: 1px; height: auto; }
}
.demo-status {
  display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap;
  border: 1px solid var(--border); border-radius: 9999px;
  background: color-mix(in oklab, var(--background) 70%, transparent);
  padding: 0.35rem 0.85rem; font-size: 0.72rem; font-weight: 600;
  color: var(--muted-foreground);
  backdrop-filter: blur(8px);
  transition: color .3s, border-color .3s;
}
.demo-status svg { color: var(--accent); }
.demo-status.is-done { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 40%, transparent); }

.demo-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.5rem 1.5rem;
  padding: 1.1rem 1.25rem 0.85rem;
  opacity: 0; transition: opacity .4s ease;
}
.demo-foot.is-shown { opacity: 1; }
.demo-saving {
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--accent);
}
.demo-fact { font-size: 0.78rem; color: var(--muted-foreground); }

.demo-caption { margin-top: 1rem; text-align: center; font-size: 0.75rem; color: var(--strike); }
.demo-caption a { color: var(--muted-foreground); text-decoration: underline; text-underline-offset: 3px; }
.demo-caption a:hover { color: var(--foreground); }

/* ---- marquee ------------------------------------------------------------ */
.marquee-wrap {
  position: relative; margin-top: 1rem; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
  mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
}
.marquee { display: flex; width: max-content; gap: 2.5rem; animation: marquee 32s linear infinite; }
.marquee-wrap:hover .marquee { animation-play-state: paused; }
.marquee span { white-space: nowrap; font-size: 0.85rem; color: var(--strike); transition: color .2s; }
.marquee span:hover { color: var(--foreground); }

/* ---- two-column sections ------------------------------------------------ */
.split { display: grid; gap: 3rem; }
@media (min-width: 1024px) {
  .split { grid-template-columns: 0.85fr 1.15fr; gap: 4rem; }
  .split.narrow { grid-template-columns: 0.6fr 1.4fr; }
  .sticky-col { position: sticky; top: 7rem; align-self: start; }
}
.mini-stats { margin-top: 2rem; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--border); }
.mini-stats > div { padding: 1.25rem; border-left: 1px solid var(--border); }
.mini-stats > div:first-child { border-left: 0; }
.mini-stats .n { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; }
.mini-stats p { margin-top: 0.25rem; font-size: 0.78rem; color: var(--muted-foreground); }

/* ---- benchmark rows ----------------------------------------------------- */
.bench-head {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border); padding-bottom: 0.75rem;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--strike);
}
.bench-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 1.5rem; border-bottom: 1px solid var(--border); padding-block: 1rem;
}
.bench-name { display: block; font-size: 0.875rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bench-bar { margin-top: 0.625rem; height: 4px; border-radius: 9999px; background: color-mix(in oklab, var(--foreground) 7%, transparent); overflow: hidden; }
.bench-bar i { display: block; height: 100%; border-radius: 9999px; background-image: var(--gradient-mint); transition: width .7s ease-out; }
.bench-pct { font-family: var(--font-mono); font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--accent); text-align: right; }
.bench-raw { margin-top: 0.25rem; font-family: var(--font-mono); font-size: 0.7rem; font-variant-numeric: tabular-nums; color: var(--strike); text-align: right; }

/* ---- pricing ------------------------------------------------------------ */
.plans { margin-inline: auto; margin-top: 3rem; max-width: 64rem; display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan { position: relative; display: flex; flex-direction: column; padding: 2rem; }
.plan-top { display: flex; align-items: center; justify-content: space-between; min-height: 1.5rem; }
.plan-name { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted-foreground); }
.plan-flag {
  border-radius: 9999px; padding: 0.125rem 0.625rem;
  font-size: 0.66rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--accent-foreground);
  background-image: var(--gradient-accent);
}
.plan-price { margin-top: 1.5rem; display: flex; align-items: baseline; gap: 0.5rem; }
.plan-price b { font-family: var(--font-display); font-size: 3rem; font-weight: 600; letter-spacing: -0.02em; }
.plan-price span { font-size: 0.875rem; color: var(--muted-foreground); }
.plan-note { margin-top: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); }
.plan ul { margin-top: 1.75rem; display: grid; gap: 0.75rem; flex: 1; align-content: start; }
.plan li { display: flex; gap: 0.75rem; font-size: 0.875rem; color: var(--muted-foreground); }
.plan li svg { margin-top: 2px; flex: none; color: var(--accent); }
.plan .btn { margin-top: 2rem; justify-content: center; width: 100%; }

/* ---- FAQ ---------------------------------------------------------------- */
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-q {
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding-block: 1.5rem; text-align: left;
  background: none; border: 0; color: inherit; cursor: pointer;
  font: 600 1.05rem var(--font-sans); transition: color .2s;
}
.faq-q:hover { color: var(--accent); }
.faq-q svg { flex: none; color: var(--accent); }
.faq-a { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .5s, opacity .5s; }
.faq-item.open .faq-a { grid-template-rows: 1fr; opacity: 1; }
.faq-a > div { overflow: hidden; }
.faq-a p { max-width: 42rem; padding-bottom: 1.75rem; line-height: 1.7; color: var(--muted-foreground); }

/* ---- footer ------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--border); }
.footer-row { display: flex; flex-direction: column; gap: 1rem; padding-block: 2.5rem; }
@media (min-width: 640px) { .footer-row { flex-direction: row; align-items: center; justify-content: space-between; } }
.footer-links { display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: 0.8rem; color: var(--muted-foreground); }
.footer-links a:hover { color: var(--foreground); }

/* ---- reveal-on-scroll --------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease-out, transform .7s ease-out; }
.reveal.shown { opacity: 1; transform: none; }

/* ---- keyframes ---------------------------------------------------------- */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes pulse-soft { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

.animate-rise { animation: rise .7s cubic-bezier(.22,1,.36,1) both; }
.animate-pulse { animation: pulse-soft 1.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .animate-rise, .animate-pulse, .marquee {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .reveal { opacity: 1; transform: none; transition: none; }
  /* The demo still shows all three examples, but it lands on each finished
     state instead of playing it. The tabs remain the way through them. */
  .demo-text .w, .demo-foot { transition: none !important; }
  .demo-compressed .w { transition-delay: 0ms !important; }
}