/* ============================================================
   FOXI · HOMEPAGE STYLES
   Every color/font/space/curve comes from tokens.css via var().
   Mobile-first. Dormant-to-Active is the through-line.
   ============================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

body {
  font-family: var(--font);
  font-weight: var(--w-book);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking);
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; letter-spacing: inherit; cursor: pointer; border: none; background: none; color: inherit; }
:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; border-radius: var(--r-xs); }

/* ---------- Layout primitives ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--warm { background: var(--canvas-warm); }
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-eyebrow); font-weight: var(--w-medium);
  letter-spacing: var(--tracking-wide); color: var(--indigo);
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--indigo); flex: none;
}
.section-head { max-width: var(--maxw-text); margin-bottom: var(--s-8); }
.section-head h2 {
  font-size: var(--fs-h2); font-weight: var(--w-light);
  line-height: var(--lh-snug); letter-spacing: var(--tracking-tight);
  margin-top: var(--s-3);
}
.section-head p { color: var(--ink-soft); font-size: var(--fs-lead); margin-top: var(--s-4); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  border-radius: var(--r-pill); font-weight: var(--w-medium); font-size: var(--fs-small);
  padding: 0.85em 1.5em; transition: transform var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.btn--gold {
  background: var(--grad-brand); background-size: 150% 150%; background-position: 0% 50%;
  color: var(--ink-onGold); box-shadow: var(--shadow-rest);
  transition: background-position var(--dur) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.btn--gold:hover { background-position: 100% 50%; transform: translateY(-2px); box-shadow: var(--shadow-gold); }
.btn--gold:active { transform: translateY(0); }
.btn--ghost { color: var(--ink); border: 1px solid var(--dormant-line); background: var(--surface); }
.btn--ghost:hover { border-color: var(--ink); transform: translateY(-2px); }
.btn--lg { padding: 1em 1.9em; font-size: var(--fs-body); }
.btn__arrow { transition: transform var(--dur-fast) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.microtrust { color: var(--ink-faint); font-size: var(--fs-small); margin-top: var(--s-4); }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--canvas) 82%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease);
}
.nav.is-stuck { border-bottom-color: var(--dormant-line); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { font-weight: var(--w-semi); letter-spacing: var(--tracking-tight); font-size: 1.05rem;
  display: inline-flex; align-items: center; gap: var(--s-2); }
.brand__mark {
  display: block; width: 26px; height: 26px; object-fit: contain;
  transition: transform var(--dur-fast) var(--ease);
}
.brand:hover .brand__mark { transform: scale(1.06) rotate(-4deg); }
.nav__links { display: none; gap: var(--s-7); }
.nav__links a { font-size: var(--fs-small); color: var(--ink-soft); transition: color var(--dur-fast) var(--ease); }
.nav__links a:hover { color: var(--ink); }
.nav__right { display: flex; align-items: center; gap: var(--s-4); }
.nav__login { display: none; font-size: var(--fs-small); color: var(--ink-soft); }
.nav__login:hover { color: var(--ink); }
@media (min-width: 860px) {
  .nav__links { display: flex; }
  .nav__login { display: inline; }
}

/* ============================================================
   S1 · HERO — two-column split (text left, product right)
   ============================================================ */
.hero { padding-top: clamp(1.25rem, 0.7rem + 1.8vw, 2.25rem); padding-bottom: clamp(3rem, 2rem + 4vw, var(--section-y)); text-align: left; }
.hero__grid { display: grid; gap: var(--s-8); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1fr 1.08fr; gap: var(--s-10); align-items: center; } }
.hero__text { max-width: 560px; }
@media (min-width: 900px) { .hero__text { max-width: none; } }
.hero h1 {
  font-size: var(--fs-hero); font-weight: var(--w-light);
  line-height: var(--lh-tight); letter-spacing: var(--tracking-tight);
}
/* the signature: dormant clause vs awakened clause */
.hero h1 .dormant-clause { color: var(--ink-faint); font-weight: var(--w-light); position: relative; }
.hero h1 .active-clause {
  display: block; color: var(--ink); font-weight: var(--w-book);
}
.hero h1 .active-clause .spark {
  border-radius: 6px;
  background: linear-gradient(90deg, var(--indigo-tint), var(--gold-tint));
  padding-inline: 0.06em;
}
.hero__sub {
  font-size: var(--fs-lead); color: var(--ink-soft);
  max-width: 480px; margin-top: var(--s-5);
}
.hero__cta { margin-top: var(--s-6); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
.hero__visual .frame { margin-top: 0; }
@media (max-width: 899px) { .hero__visual { margin-top: var(--s-2); } }

/* hero film — the demo is a real recorded video (video/HERO_VIDEO_README.md).
   It draws its own phone, so there is no frame around it: no card, no panel,
   no shadow box. The device floats on the page.

   Two things had to be true for that to work.
   1. The recording carried a flat canvas around the phone, which read as a
      grey rectangle. The shipped file is cropped to the device's own bounding
      box (532x1122, square pixels), so there is nothing left to show.
   2. The clip radius has to match the device's corner radius or that canvas
      survives in the four corners. 42px at 340px wide, expressed as a
      percentage pair so it stays correct at every size. */
.film--hero {
  position: relative; width: 100%; max-width: 340px; margin-inline: auto;
  aspect-ratio: 640 / 1334;
  /* The device's corners are a squircle: the silhouette hugs the corner well
     past where a circle of the same radius has let go. 98px of 640 is the
     smallest circle that covers the whole measured curve, so no sliver of the
     recording's canvas survives. Percentage pair, so it holds at any size. */
  border-radius: 15.31% / 7.35%;
  overflow: hidden;
  filter: drop-shadow(0 34px 64px rgba(30, 27, 58, 0.20))
          drop-shadow(0 8px 16px rgba(30, 27, 58, 0.10));
}
.film--hero .film__v { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .film--hero { max-width: 380px; } }

/* The float lives here, not in the recording. The master drifts the device up
   and down inside a fixed frame, which is what left a pale edge appearing and
   disappearing at the top. The shipped file is registered to the device, so
   CSS does the rising and falling and the crop stays exact. */
@media (prefers-reduced-motion: no-preference) {
  .film--hero { animation: filmFloat 11s ease-in-out infinite; }
  @keyframes filmFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .film--hero .film__v { display: none; }
  .film--hero { background: url("../video/foxi_hero_demo_poster.jpg") center/cover; }
}

/* Small phones: the hero + demo must still fit ~85% of a 390x844 viewport */
@media (max-width: 480px) {
  .hero { padding-top: 0.6rem; --fs-hero: clamp(1.9rem, 1.5rem + 4.5vw, 2.4rem); }
  .hero__grid { gap: var(--s-4); }
  .hero__sub { margin-top: var(--s-3); font-size: 0.98rem; }
  .hero__cta { margin-top: var(--s-4); gap: var(--s-2); }
  .hero__cta .btn--lg { padding: 0.75em 1.4em; font-size: 0.95rem; }
  .hero__cta .microtrust { margin-top: 0; }
  .frame__stage--demo { min-height: 250px; padding: 0.85rem; }
  .frame__bar { padding: var(--s-2) var(--s-3); }
  .hd__chips { margin-bottom: var(--s-3); gap: 6px; }
  .hd__chip { padding: 0.4em 0.85em; font-size: 0.72rem; }
  .hd__post { padding: var(--s-3); min-height: 92px; }
  .hd__text { min-height: 2.6em; font-size: 0.8rem; }
}

/* hero demo frame — designed placeholder, product-window chrome */
.frame {
  position: relative; margin-top: var(--s-10); border-radius: var(--r-frame);
  background: var(--surface); border: 1px solid var(--dormant-line);
  box-shadow: var(--shadow-frame); overflow: hidden;
}
.frame__bar {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--dormant-line);
  background: var(--surface-sunk);
}
.frame__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--dormant-line); }
.frame__addr {
  margin-left: var(--s-3); font-size: 0.75rem; color: var(--ink-faint);
  padding: 0.25em 0.9em; border-radius: var(--r-pill); background: var(--canvas-warm);
}
/* the video placeholder itself — swap the whole .frame__stage in one line */
.frame__stage {
  position: relative; aspect-ratio: 16 / 10;
  display: grid; place-items: center;
  background:
    radial-gradient(120% 120% at 50% 0%, var(--surface) 0%, var(--surface-sunk) 70%);
  overflow: hidden;
}
/* faint product hint behind the label so the frame never reads empty */
.stage-hint { position: absolute; inset: 0; padding: clamp(1rem, 3vw, 2.4rem);
  display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s-4); opacity: 0.5; filter: grayscale(0.5); }
.stage-hint__col { display: flex; flex-direction: column; gap: var(--s-3); }
.hint-line { height: 12px; border-radius: var(--r-pill); background: var(--dormant-fill); }
.hint-line.w80 { width: 80%; } .hint-line.w60 { width: 60%; } .hint-line.w40 { width: 40%; }
.hint-card { border: 1px solid var(--dormant-line); border-radius: var(--r-sm);
  background: var(--surface); padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); box-shadow: var(--shadow-rest); }
.hint-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.hint-cal i { aspect-ratio: 1; border-radius: 4px; background: var(--dormant-fill); }
.hint-cal i.on { background: var(--gold-tint); }
/* ============================================================
   S2 · PROOF STRIP
   ============================================================ */
.proof { padding-block: var(--s-10); border-top: 1px solid var(--dormant-line); border-bottom: 1px solid var(--dormant-line); }
.proof__line { text-align: center; color: var(--ink-soft); font-size: var(--fs-small); max-width: var(--maxw-text); margin-inline: auto; }
.proof__line b { color: var(--ink); font-weight: var(--w-medium); }
.platforms { margin-top: var(--s-6); }
.platforms__cap { text-align: center; font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-wide);
  color: var(--ink-faint); margin-bottom: var(--s-4); }
.platforms__row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); }
.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 0.5em 1em; border-radius: var(--r-pill); background: var(--surface);
  border: 1px solid var(--dormant-line); font-size: var(--fs-small); color: var(--ink-faint);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.chip svg { width: 16px; height: 16px; opacity: 0.55; transition: opacity var(--dur-fast) var(--ease); }
.chip:hover { color: var(--ink); border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-rest); }
.chip:hover svg { opacity: 1; }

/* ============================================================
   S3 · THE LOOP (bento)
   ============================================================ */
.loop-grid { display: grid; gap: var(--s-5); grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 780px) { .loop-grid { grid-template-columns: repeat(3, 1fr); } }
.bento {
  position: relative; background: var(--surface); border: 1px solid var(--dormant-line);
  border-radius: var(--r-card); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.bento:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: transparent; }
.bento__visual { border-radius: var(--r-sm); background: var(--canvas-warm); padding: var(--s-4); }
.bento__head { display: flex; align-items: baseline; gap: var(--s-3); }
.bento__num { font-size: var(--fs-h2); font-weight: var(--w-light); color: var(--ink-faint); letter-spacing: var(--tracking-tight); line-height: 1; flex: none; }
.bento h3 { font-size: var(--fs-h3); font-weight: var(--w-medium); }
.bento p { color: var(--ink-soft); font-size: var(--fs-small); }


/* ============================================================
   S5 · BUILT DIFFERENT
   ============================================================ */
.moat-grid { display: grid; gap: var(--s-5); grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 780px) { .moat-grid { grid-template-columns: repeat(3, 1fr); } }
.moat {
  padding: var(--s-5); border-radius: var(--r-card); background: var(--surface);
  border: 1px solid var(--dormant-line); display: flex; flex-direction: column; gap: var(--s-4);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.moat:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.moat__visual { border-radius: var(--r-sm); background: var(--canvas-warm); padding: var(--s-4); min-height: 96px; display: flex; flex-direction: column; justify-content: center; }
.moat h3 { font-size: var(--fs-h3); font-weight: var(--w-medium); }
.moat p { color: var(--ink-soft); font-size: var(--fs-small); }

/* mini-mockups: Brand DNA */
.dna-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s-3); }
.dna-chips span { font-size: 0.72rem; font-weight: var(--w-medium); padding: 0.3em 0.7em; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--dormant-line); color: var(--ink-soft); }
.dna-sample { font-size: 0.78rem; color: var(--ink-soft); font-style: italic; background: var(--surface);
  border: 1px solid var(--dormant-line); border-radius: var(--r-xs); padding: var(--s-3); }

/* mini-mockups: approval flow */
.appr-flow { display: flex; align-items: center; justify-content: center; gap: var(--s-2); flex-wrap: wrap; }
.appr-flow__step { font-size: 0.74rem; font-weight: var(--w-medium); padding: 0.4em 0.8em; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--dormant-line); color: var(--ink-soft); }
.appr-flow__arrow { color: var(--ink-faint); }
.appr-flow__step--ok { background: color-mix(in srgb, var(--positive) 14%, transparent); border-color: transparent;
  color: var(--positive); font-weight: var(--w-semi); }

/* mini-mockups: audit log */
.audit-log { display: flex; flex-direction: column; gap: 6px; }
.audit-log__row { display: flex; align-items: center; gap: 8px; font-size: 0.74rem; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--dormant-line); border-radius: var(--r-xs); padding: 0.5em 0.7em; }
.audit-log__row i { width: 6px; height: 6px; border-radius: 50%; background: var(--positive); flex: none; }

/* ============================================================
   S6 · FOUNDER
   ============================================================ */
.founder { display: grid; gap: var(--s-8); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 820px) { .founder { grid-template-columns: 320px 1fr; } }
.founder__photo {
  aspect-ratio: 4/5; border-radius: var(--r-card); background: var(--dormant-fill);
  border: 1px solid var(--dormant-line); display: grid; place-items: center;
  color: var(--ink-faint); font-size: var(--fs-small); font-weight: var(--w-medium);
}
.founder__body blockquote { font-size: var(--fs-h3); font-weight: var(--w-light);
  line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); }
.founder__body p { color: var(--ink-soft); font-size: var(--fs-body); margin-top: var(--s-5); }
.founder__sig { margin-top: var(--s-6); font-size: var(--fs-small); }
.founder__sig b { font-weight: var(--w-semi); } .founder__sig span { color: var(--ink-faint); }

/* ============================================================
   S7 · PRICING
   ============================================================ */
.price-toggle { display: inline-flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-8);
  padding: var(--s-1); border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--dormant-line); }
.price-toggle button { padding: 0.5em 1.1em; border-radius: var(--r-pill); font-size: var(--fs-small);
  color: var(--ink-soft); transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.price-toggle button.is-active { background: var(--ink); color: var(--canvas); }
.price-toggle .save { font-size: 0.72rem; color: var(--positive); font-weight: var(--w-medium); padding-right: var(--s-2); }

.price-grid { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 680px) { .price-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .price-grid { grid-template-columns: repeat(4, 1fr); } }
.tier {
  position: relative; display: flex; flex-direction: column; padding: var(--s-6);
  border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--dormant-line);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tier:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.tier.is-featured { border-color: var(--gold); box-shadow: var(--shadow-gold); }
.tier__badge { background: var(--grad-brand) !important; position: absolute; top: calc(-1 * var(--s-3)); left: var(--s-6);
  font-size: 0.72rem; font-weight: var(--w-medium); color: var(--ink-onGold);
  background: var(--gold); padding: 0.35em 0.9em; border-radius: var(--r-pill); }
.tier__name { font-weight: var(--w-medium); font-size: var(--fs-h3); }
.tier__price { display: flex; align-items: baseline; gap: 4px; margin-top: var(--s-3); }
.tier__amt { font-size: clamp(2rem, 1.4rem + 2vw, 2.6rem); font-weight: var(--w-light); letter-spacing: var(--tracking-tight); }
.tier__per { color: var(--ink-faint); font-size: var(--fs-small); }
.tier__note { color: var(--ink-faint); font-size: 0.8rem; min-height: 1.2em; margin-top: var(--s-1); }
/* the promise under each plan's button. Quiet, never louder than the price. */
.tier__nocard { color: var(--ink-faint); font-size: 0.78rem; margin-top: var(--s-2); text-align: center; }
.tier__list { list-style: none; margin-top: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.tier__list li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--fs-small); color: var(--ink-soft); }
.tier__list svg { width: 16px; height: 16px; flex: none; color: var(--positive); margin-top: 3px; }
.tier .btn { margin-top: var(--s-6); width: 100%; }

.trial-card {
  margin-top: var(--s-8); padding: var(--s-6) var(--s-7); border-radius: var(--r-card);
  background: var(--gold-tint); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  display: grid; gap: var(--s-4); grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 820px) { .trial-card { grid-template-columns: 1fr auto; } }
.trial-card__eyebrow { font-size: var(--fs-eyebrow); font-weight: var(--w-semi);
  letter-spacing: var(--tracking-wide); color: var(--gold-strong); }
.trial-card__body { font-size: var(--fs-body); color: var(--ink); margin-top: var(--s-2); }
.trial-card__body b { font-weight: var(--w-semi); }
.trial-card__meta { color: var(--ink-soft); font-size: var(--fs-small); margin-top: var(--s-2); }
.price-foot { text-align: center; color: var(--ink-soft); font-size: var(--fs-small); margin-top: var(--s-6); }

/* ============================================================
   S8 · FAQ
   ============================================================ */
.faq { max-width: 820px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--dormant-line); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  text-align: left; padding-block: var(--s-5); font-size: var(--fs-h3); font-weight: var(--w-medium);
  color: var(--ink); transition: color var(--dur-fast) var(--ease);
}
.faq__q:hover { color: var(--gold-strong); }
.faq__icon { flex: none; width: 22px; height: 22px; position: relative; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; inset: 0; margin: auto;
  background: currentColor; transition: transform var(--dur-fast) var(--ease); }
.faq__icon::before { width: 14px; height: 1.5px; }
.faq__icon::after { width: 1.5px; height: 14px; }
.faq__item.is-open .faq__icon::after { transform: rotate(90deg); opacity: 0; }
.faq__a { overflow: hidden; height: 0; transition: height var(--dur) var(--ease); }
.faq__a-inner { padding-bottom: var(--s-5); color: var(--ink-soft); font-size: var(--fs-body); max-width: 62ch; }

/* ============================================================
   S9 · FINAL CTA + FOOTER
   ============================================================ */
.final { text-align: center; }
.final h2 { font-size: var(--fs-h1); font-weight: var(--w-light); line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight); max-width: 22ch; margin-inline: auto; }
.final .active-clause { color: var(--ink); }
.final .dormant-clause { color: var(--ink-faint); }
.final__cta { margin-top: var(--s-7); display: flex; flex-direction: column; align-items: center; gap: var(--s-3); }

.footer { background: var(--canvas-warm); border-top: 1px solid var(--dormant-line); padding-block: var(--s-10); }
.footer__grid { display: grid; gap: var(--s-8); grid-template-columns: 1fr; }
@media (min-width: 720px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer__brand p { color: var(--ink-soft); font-size: var(--fs-small); margin-top: var(--s-4); max-width: 34ch; }
.footer__col h3 { font-size: var(--fs-small); font-weight: var(--w-semi); margin-bottom: var(--s-4); }
.footer__col a { display: block; color: var(--ink-soft); font-size: var(--fs-small); padding-block: var(--s-2); transition: color var(--dur-fast) var(--ease); }
.footer__col a:hover { color: var(--ink); }
.footer__base { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--dormant-line);
  display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between; align-items: center;
  color: var(--ink-faint); font-size: var(--fs-small); }
.footer__security { display: inline-flex; align-items: center; gap: var(--s-2); }
.footer__security svg { width: 15px; height: 15px; }

/* ============================================================
   MOTION · scroll reveal
   ============================================================ */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }

/* hero load sequence */
.hero .load { opacity: 0.01; transform: translateY(14px); animation: rise 0.7s var(--ease) forwards; }
.hero .load[data-l="1"] { animation-delay: 0.05s; }
.hero .load[data-l="2"] { animation-delay: 0.15s; }
.hero .load[data-l="3"] { animation-delay: 0.25s; }
.hero .load[data-l="4"] { animation-delay: 0.38s; }
.hero .load[data-l="5"] { animation-delay: 0.55s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ============================================================
   UPGRADE PACK · fox mark, hero mockup, micro-demos, sticky CTA
   ============================================================ */
/* ---- Hero product mockup ---- */
.mock { opacity: 1; filter: none; align-items: start; }
.mock__panel { border: 1px solid var(--dormant-line); border-radius: var(--r-sm); background: var(--surface);
  padding: var(--s-4); box-shadow: var(--shadow-rest); }
.mock__title { font-size: 0.7rem; font-weight: var(--w-semi); letter-spacing: var(--tracking-wide);
  color: var(--ink-faint); margin-bottom: var(--s-3); }
.mock__row { display: flex; align-items: center; gap: var(--s-3); padding-block: var(--s-2);
  border-top: 1px solid var(--dormant-line); }
.mock__row:first-of-type { border-top: none; }
.mock__ava { width: 22px; height: 22px; border-radius: 7px; flex: none; }
.mock__ava.a { background: var(--gold-tint); border: 1px solid var(--gold); }
.mock__ava.b { background: var(--indigo-tint); border: 1px solid var(--indigo); }
.mock__ava.c { background: var(--dormant-fill); border: 1px solid var(--dormant-line); }
.mock__lines { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.mock__lines i { height: 7px; border-radius: var(--r-pill); background: var(--dormant-fill); display: block; }
.mock__lines .w70 { width: 70%; } .mock__lines .w60 { width: 60%; } .mock__lines .w75 { width: 75%; }
.mock__lines .w50 { width: 50%; } .mock__lines .w45 { width: 45%; } .mock__lines .w40 { width: 40%; }
.mock__pill { font-size: 0.62rem; font-weight: var(--w-medium); padding: 0.3em 0.7em; border-radius: var(--r-pill); flex: none; }
.mock__pill.ok { background: color-mix(in srgb, var(--positive) 14%, transparent); color: var(--positive); }
.mock__pill.wait { background: var(--gold-tint); color: var(--gold-strong); }
.mock__cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.mock__cal i { aspect-ratio: 1; border-radius: 5px; background: var(--surface-sunk); border: 1px solid var(--dormant-line); }
.mock__cal i.d { border-color: transparent; }
.mock__cal i.v { background: var(--indigo-tint); }
.mock__cal i.g { background: var(--gold-tint); }
.mock__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.mock__chips span { font-size: 0.58rem; font-weight: var(--w-semi); color: var(--ink-faint);
  border: 1px solid var(--dormant-line); border-radius: var(--r-pill); padding: 0.25em 0.6em; background: var(--surface-sunk); }
@media (max-width: 560px) { .stage-hint.mock { grid-template-columns: 1fr; } .mock__panel:last-child { display: none; } }

/* ---- Bento micro-demos ---- */
.demo-scene { aspect-ratio: 16/10; border-radius: var(--r-sm); border: 1px solid var(--dormant-line);
  background: var(--surface-sunk); position: relative; overflow: hidden; padding: var(--s-4);
  display: flex; flex-direction: column; justify-content: center; gap: var(--s-3); }

/* create: lines typing */
.dc__card { background: var(--surface); border: 1px solid var(--dormant-line); border-radius: var(--r-xs);
  padding: var(--s-4); display: flex; flex-direction: column; gap: 7px; box-shadow: var(--shadow-rest); }
.dc__card i { height: 8px; border-radius: var(--r-pill); background: var(--dormant-fill); display: block; width: 0; }
.dc__card .t1 { animation: type 4.2s var(--ease-soft) infinite; }
.dc__card .t2 { animation: type 4.2s var(--ease-soft) 0.5s infinite; }
.dc__card .t3 { animation: type 4.2s var(--ease-soft) 1s infinite; }
@keyframes type { 0% { width: 0; } 30%, 85% { width: var(--tw, 85%); } 100% { width: var(--tw, 85%); opacity: 0; } }
.dc__card .t1 { --tw: 88%; } .dc__card .t2 { --tw: 70%; } .dc__card .t3 { --tw: 52%; }
.dc__cursor { position: absolute; right: var(--s-4); bottom: var(--s-4); width: 8px; height: 14px;
  border-radius: 2px; background: var(--indigo); animation: blink 1.1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* approve: pill flips to Approved */
.da__card { background: var(--surface); border: 1px solid var(--dormant-line); border-radius: var(--r-xs);
  padding: var(--s-4); display: flex; align-items: center; gap: var(--s-3); box-shadow: var(--shadow-rest); }
.da__lines { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.da__lines i { height: 8px; border-radius: var(--r-pill); background: var(--dormant-fill); display: block; }
.da__lines .w70 { width: 70%; } .da__lines .w50 { width: 50%; }
.da__pill { position: relative; flex: none; width: 108px; height: 28px; }
.da__pill span { position: absolute; inset: 0; display: grid; place-items: center; border-radius: var(--r-pill);
  font-size: 0.68rem; font-weight: var(--w-medium); }
.da__wait { background: var(--gold-tint); color: var(--gold-strong); animation: waitFade 3.6s var(--ease) infinite; }
.da__ok { background: color-mix(in srgb, var(--positive) 16%, transparent); color: var(--positive);
  opacity: 0; animation: okFade 3.6s var(--ease) infinite; }
@keyframes waitFade { 0%, 42% { opacity: 1; } 52%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes okFade { 0%, 42% { opacity: 0; transform: scale(0.92); } 52%, 88% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }

/* publish: progress + chips light up */
.dp__chips { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.dp__chips span { font-size: 0.6rem; font-weight: var(--w-semi); color: var(--ink-faint);
  border: 1px solid var(--dormant-line); border-radius: var(--r-pill); padding: 0.3em 0.65em;
  background: var(--surface); animation: chipOn 4.9s var(--ease) infinite; }
.dp__chips span:nth-child(1) { animation-delay: 0.9s; } .dp__chips span:nth-child(2) { animation-delay: 1.15s; }
.dp__chips span:nth-child(3) { animation-delay: 1.4s; } .dp__chips span:nth-child(4) { animation-delay: 1.65s; }
.dp__chips span:nth-child(5) { animation-delay: 1.9s; } .dp__chips span:nth-child(6) { animation-delay: 2.15s; }
.dp__chips span:nth-child(7) { animation-delay: 2.4s; }
@keyframes chipOn { 0%, 12% { color: var(--ink-faint); border-color: var(--dormant-line); background: var(--surface); }
  22%, 78% { color: var(--gold-strong); border-color: var(--gold); background: var(--gold-tint); }
  90%, 100% { color: var(--ink-faint); border-color: var(--dormant-line); background: var(--surface); } }
.dp__bar { height: 6px; border-radius: var(--r-pill); background: var(--dormant-fill); overflow: hidden; }
.dp__bar i { display: block; height: 100%; width: 0; border-radius: var(--r-pill);
  background: var(--grad-brand); animation: fill 4.9s var(--ease-soft) infinite; }
@keyframes fill { 0% { width: 0; } 55%, 92% { width: 100%; } 100% { width: 100%; opacity: 0; } }
.dp__done { text-align: center; font-size: 0.7rem; color: var(--positive); font-weight: var(--w-medium);
  opacity: 0; animation: doneIn 4.9s var(--ease) infinite; }
@keyframes doneIn { 0%, 55% { opacity: 0; } 65%, 90% { opacity: 1; } 100% { opacity: 0; } }

/* ---- Sticky mobile CTA ---- */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: var(--s-3) var(--gutter);
  padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--canvas) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--dormant-line);
  transform: translateY(110%); transition: transform var(--dur) var(--ease); }
.sticky-cta .btn { width: 100%; }
.sticky-cta.show { transform: translateY(0); }
@media (min-width: 860px) { .sticky-cta { display: none; } }

/* ============================================================
   POLISH PACK · mobile menu, view transitions, tabular numbers
   ============================================================ */
/* ---- Hamburger ---- */
.nav__burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; align-items: center; border-radius: var(--r-xs); }
.nav__burger span { display: block; width: 18px; height: 1.6px; background: var(--ink);
  border-radius: var(--r-pill); transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3.3px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-3.3px) rotate(-45deg); }
@media (min-width: 860px) { .nav__burger { display: none; } }

/* ---- Mobile sheet ---- */
.nav__sheet { position: absolute; left: 0; right: 0; top: 100%; display: flex; flex-direction: column;
  padding: var(--s-4) var(--gutter) var(--s-6); gap: var(--s-1);
  background: color-mix(in srgb, var(--canvas) 96%, transparent);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--dormant-line);
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.nav__sheet.open { opacity: 1; transform: none; pointer-events: auto; }
.nav__sheet > a { padding: var(--s-4) var(--s-2); font-size: var(--fs-h3); font-weight: var(--w-book);
  color: var(--ink); border-bottom: 1px solid var(--dormant-line); }
.nav__sheet > a:last-of-type { border-bottom: none; margin-top: var(--s-3); text-align: center; }
@media (min-width: 860px) { .nav__sheet { display: none; } }

/* ---- Page transitions (progressive: Chrome/Safari latest) ---- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.28s; }

/* ---- Tabular numbers: prices and stats align perfectly ---- */
.tier__amt, .stat__num, .feature-table td { font-variant-numeric: tabular-nums; }

/* ============================================================
   DEVICE PERFECTION · iPad breakpoints, touch, tiny phones
   ============================================================ */
/* iPad portrait (768): grids go 3-up instead of stacking */
@media (min-width: 768px) {
  .loop-grid, .moat-grid { grid-template-columns: repeat(3, 1fr); }
}
/* iPad landscape (1024): pricing shows all 4 tiers in one row */
@media (min-width: 1024px) {
  .price-grid { grid-template-columns: repeat(4, 1fr); }
}
/* Hover lifts only on devices that truly hover — no sticky-hover on iPad */
@media (hover: none) {
  .bento:hover, .moat:hover, .tier:hover, .voice:hover, .principle:hover,
  .chip:hover, .btn--gold:hover, .btn--ghost:hover { transform: none; }
}
/* Tiny phones (<400px): nav keeps logo + burger; sticky bar carries the CTA */
@media (max-width: 399px) {
  .nav__right .btn { display: none; }
  .nav__login { display: inline; }
}
/* Short landscape phones: hero breathes less */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { padding-top: var(--s-6); }
  .page-hero { padding-top: var(--s-6); }
}
/* Large desktop (1600+): a touch more canvas */
@media (min-width: 1600px) {
  :root { --maxw: 1200px; }
}

/* ============================================================
   THE TWIST · interactive hero demo + fox eyes
   ============================================================ */
.frame__stage--demo { aspect-ratio: auto; min-height: 420px; display: block; padding: clamp(1.1rem, 2.4vw, 1.75rem); }
.hero-demo { display: grid; grid-template-columns: 1fr; gap: var(--s-5); text-align: left; height: 100%; }
@media (min-width: 620px) { .hero-demo { grid-template-columns: 1.4fr 1fr; gap: var(--s-6); align-items: start; } }

.hd__chips { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-5); }
.hd__chip { font-size: 0.78rem; font-weight: var(--w-medium); padding: 0.5em 1.05em; border-radius: var(--r-pill);
  border: 1px solid var(--dormant-line); color: var(--ink-soft); background: var(--surface);
  transition: all var(--dur-fast) var(--ease); }
.hd__chip:hover { border-color: var(--ink); color: var(--ink); }
.hd__chip.is-active { background: var(--grad-brand); border-color: transparent; color: var(--ink-onGold); box-shadow: var(--shadow-gold); }

.hd__chat { display: flex; flex-direction: column; gap: var(--s-3); }
.hd__prompt { font-size: 0.88rem; }
.hd__post { position: relative; background: var(--surface); border: 1px solid var(--dormant-line); border-radius: var(--r-sm);
  padding: var(--s-5); box-shadow: var(--shadow-lift); min-height: 128px; overflow: hidden;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.hd__post::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad-brand); }
.hd__post.fly { transform: translateX(28px) scale(0.96); opacity: 0.35; }
.hd__post-head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); }
.hd__ava { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  font-size: 0.62rem; font-weight: var(--w-semi); background: var(--gold-tint); color: var(--gold-strong); flex: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.hd__ava.v { background: var(--indigo-tint); color: var(--indigo); }
.hd__ava.n { background: var(--dormant-fill); color: var(--ink-soft); }
.hd__brand { font-size: 0.82rem; font-weight: var(--w-medium); flex: 1; }
.hd__pill { font-size: 0.66rem; font-weight: var(--w-medium); padding: 0.32em 0.8em; border-radius: var(--r-pill);
  background: var(--gold-tint); color: var(--gold-strong); transition: all var(--dur-fast) var(--ease); }
.hd__pill.ok { background: color-mix(in srgb, var(--positive) 15%, transparent); color: var(--positive); }
.hd__text { font-size: 0.86rem; color: var(--ink-soft); line-height: 1.55; min-height: 4.2em; }
.hd__text .caret { display: inline-block; width: 7px; height: 12px; background: var(--indigo);
  border-radius: 2px; margin-left: 2px; animation: blink 1s steps(2) infinite; vertical-align: -1px; }

.hd__cal i { transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.hd__cal i.land { background: var(--grad-brand); border-color: transparent; animation: landPop 0.5s var(--ease); }
@keyframes landPop { 0% { transform: scale(0.5); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
.hd__sched { font-size: 0.74rem; color: var(--ink-faint); margin-top: var(--s-3);
  opacity: 0; transform: translateY(4px); transition: all var(--dur) var(--ease); }
.hd__sched.show { opacity: 1; transform: none; color: var(--positive); }
@media (max-width: 619px) { .hd__right { display: none; } .frame__stage--demo { min-height: 320px; } }

/* fox pupils get a transform from JS; keep it smooth */

/* screen-reader-only text */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ============================================================
   CRAFT PACK · the details people notice and talk about
   ============================================================ */
/* 1. Text selection wears the brand */
::selection { background: var(--indigo-tint); color: var(--indigo-deep); }

/* 2. Paper grain — kills the flat AI-gradient look. Barely there, always felt. */
body::before { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.028; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
main, header, footer, .sticky-cta { position: relative; z-index: 2; }

/* 3. The fox blinks. Alive, not animated-looking. */

/* 4. Thin quiet scrollbar on desktop */
@media (min-width: 860px) {
  ::-webkit-scrollbar { width: 10px; }
  ::-webkit-scrollbar-track { background: var(--canvas); }
  ::-webkit-scrollbar-thumb { background: var(--dormant); border-radius: var(--r-pill); border: 3px solid var(--canvas); }
  ::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }
}

/* 5. Magnetic primary buttons (JS adds the pull; this keeps it smooth) */
.btn--gold { will-change: transform; }

/* ============================================================
   WAITLIST — embedded form (hero + foot copies) and the
   interest-triggered modal. See PROMPT_site_waiting_list.md.
   ============================================================ */
.waitlist { max-width: 30rem; }
.waitlist__copy { font-size: var(--fs-small); color: var(--ink-soft); line-height: var(--lh-body); margin: 0 0 var(--s-3); }
.waitlist__copy strong { color: var(--ink); font-weight: var(--w-semi); }
.waitlist__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.waitlist__row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: stretch; }
.waitlist__field { flex: 1 1 11rem; min-width: 9rem; }
.waitlist__field input {
  width: 100%; font: inherit; font-size: var(--fs-small); color: var(--ink);
  background: var(--surface); border: 1px solid var(--dormant-line);
  border-radius: var(--r-sm); padding: 0.85em 1.1em;
  transition: border-color var(--dur-fast) var(--ease-soft);
}
.waitlist__field input::placeholder { color: var(--ink-faint); }
.waitlist__field input:focus { border-color: var(--gold); }
.waitlist__row .btn { flex: 0 0 auto; }
.waitlist__error { margin: var(--s-3) 0 0; font-size: var(--fs-small); color: var(--error); }
.waitlist__done { margin: 0; font-size: var(--fs-small); color: var(--ink); max-width: 30rem; }
.waitlist__done strong { font-weight: var(--w-semi); }
.final .waitlist { margin-inline: auto; }
.final .waitlist__error, .final .waitlist__done { margin-inline: auto; }

.wl-modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: var(--gutter); }
.wl-modal[hidden] { display: none; }
.wl-modal__backdrop { position: absolute; inset: 0; background: rgba(30, 27, 58, 0.45); backdrop-filter: blur(2px); }
.wl-modal__panel { position: relative; width: 100%; max-width: 26rem; background: var(--surface);
  border-radius: var(--r-card); box-shadow: var(--shadow-frame); padding: var(--s-7) var(--s-6); }
.wl-modal__close { position: absolute; top: var(--s-4); right: var(--s-4); width: 2.25rem; height: 2.25rem;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  border: 0; background: transparent; color: var(--ink-soft); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.wl-modal__close:hover { background: var(--dormant-fill); color: var(--ink); }
.wl-modal .waitlist { max-width: none; }
.wl-modal h3 { margin: 0 0 var(--s-3); font-size: var(--fs-h3); }