/* ============================================================
   FOXI · SUB-PAGE COMPONENTS
   Shared by how-it-works, pricing, for-agencies, about, login.
   Tokens only — zero raw hex.
   ============================================================ */

/* ---------- Page hero (inner pages) ---------- */
.page-hero { padding-top: clamp(3rem, 2rem + 4vw, 5.5rem); padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); text-align: center; }
.page-hero h1 { font-size: var(--fs-h1); font-weight: var(--w-light); line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight); max-width: 18ch; margin: var(--s-3) auto 0; }
.page-hero p { font-size: var(--fs-lead); color: var(--ink-soft); max-width: 560px; margin: var(--s-5) auto 0; }

/* ---------- Split section (text + visual) ---------- */
.split { display: grid; gap: var(--s-7); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1.15fr; gap: var(--s-12); }
  .split--flip .split__text { order: 2; }
}
.split__text .eyebrow { margin-bottom: var(--s-3); }
.split__text h2 { font-size: var(--fs-h2); font-weight: var(--w-light); line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight); }
.split__text > p { color: var(--ink-soft); margin-top: var(--s-4); max-width: 46ch; }
.split__points { list-style: none; margin-top: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.split__points li { display: flex; gap: var(--s-3); font-size: var(--fs-small); color: var(--ink-soft); }
.split__points svg { width: 17px; height: 17px; flex: none; color: var(--positive); margin-top: 3px; }

/* ---------- Chat mock (You talk) ---------- */
.chat { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); }
.msg { max-width: 82%; padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); font-size: var(--fs-small); line-height: 1.5; }
.msg--user { align-self: flex-end; background: var(--ink); color: var(--canvas); border-bottom-right-radius: 4px; }
.msg--foxi { align-self: flex-start; background: var(--surface); border: 1px solid var(--dormant-line);
  border-bottom-left-radius: 4px; color: var(--ink-soft); box-shadow: var(--shadow-rest); }
.msg--foxi b { color: var(--ink); font-weight: var(--w-medium); }
.msg__status { display: inline-flex; align-items: center; gap: var(--s-2); font-size: 0.75rem;
  color: var(--gold-strong); font-weight: var(--w-medium); margin-top: var(--s-2); }
.msg__status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: pulse 1.6s var(--ease-soft) infinite; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.8); } }

/* ---------- Voice comparison (Brand DNA proof) ---------- */
.voices { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .voices { grid-template-columns: 1fr 1fr; } }
.voice { background: var(--surface); border: 1px solid var(--dormant-line); border-radius: var(--r-card);
  padding: var(--s-5); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.voice:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.voice__brand { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.voice__avatar { width: 34px; height: 34px; border-radius: var(--r-xs); display: grid; place-items: center;
  font-size: 0.72rem; font-weight: var(--w-semi); }
.voice--a .voice__avatar { background: var(--gold-tint); color: var(--gold-strong); }
.voice--b .voice__avatar { background: var(--indigo-tint); color: var(--indigo); }
.voice__name { font-weight: var(--w-medium); font-size: var(--fs-small); }
.voice__tag { display: block; font-size: 0.72rem; color: var(--ink-faint); }
.voice__post { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.6; }
.voices__brief { text-align: center; font-size: var(--fs-small); color: var(--ink-faint); margin-bottom: var(--s-4); }
.voices__brief b { color: var(--ink); font-weight: var(--w-medium); }

/* ---------- Phone mock (approval flow) ---------- */
.phone {
  width: min(300px, 78vw); margin-inline: auto; border-radius: 42px; background: var(--surface);
  border: 1px solid var(--dormant-line); box-shadow: var(--shadow-frame); padding: var(--s-3); position: relative;
}
.phone__screen { border-radius: 32px; background: var(--surface-sunk); overflow: hidden; padding: var(--s-5) var(--s-4); }
.phone__notch { width: 96px; height: 22px; border-radius: var(--r-pill); background: var(--dormant-fill);
  margin: 0 auto var(--s-5); }
.phone__from { font-size: 0.72rem; color: var(--ink-faint); text-align: center; margin-bottom: var(--s-4); }
.phone__card { background: var(--surface); border: 1px solid var(--dormant-line); border-radius: var(--r-sm);
  padding: var(--s-4); box-shadow: var(--shadow-rest); }
.phone__preview { aspect-ratio: 1; border-radius: var(--r-xs); background: var(--grad-brand);
  margin-bottom: var(--s-3); }
.phone__caption { font-size: 0.8rem; color: var(--ink-soft); line-height: 1.5; }
.phone__actions { display: flex; gap: var(--s-2); margin-top: var(--s-4); }
.phone__approve { flex: 1; text-align: center; padding: 0.65em 1em; border-radius: var(--r-pill);
  background: var(--grad-brand); color: var(--ink-onGold); font-size: 0.8rem; font-weight: var(--w-medium); }
.phone__skip { flex: 1; text-align: center; padding: 0.65em 1em; border-radius: var(--r-pill);
  border: 1px solid var(--dormant-line); color: var(--ink-soft); font-size: 0.8rem; }
.phone__hint { text-align: center; font-size: 0.7rem; color: var(--ink-faint); margin-top: var(--s-4); }

/* ---------- Calendar mock (publish) ---------- */
.cal { padding: var(--s-5); }
.cal__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-4);
  font-size: var(--fs-small); font-weight: var(--w-medium); }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--s-2); }
.cal__cell { aspect-ratio: 1; border-radius: var(--r-xs); background: var(--surface); border: 1px solid var(--dormant-line);
  position: relative; }
.cal__cell.has { border-color: transparent; }
.cal__cell.has::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-xs); }
.cal__cell.ig::after { background: var(--gold-tint); }
.cal__cell.li::after { background: var(--indigo-tint); }
.cal__legend { display: flex; gap: var(--s-4); margin-top: var(--s-4); font-size: 0.72rem; color: var(--ink-faint); }
.cal__legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.cal__legend .ig i { background: var(--gold-tint); border: 1px solid var(--gold); }
.cal__legend .li i { background: var(--indigo-tint); border: 1px solid var(--indigo); }

/* ---------- Steps rail (numbered, ordered process) ---------- */
.rail { display: flex; flex-direction: column; gap: 0; max-width: 720px; margin-inline: auto; }
.rail__step { display: grid; grid-template-columns: 44px 1fr; gap: var(--s-5); position: relative; padding-bottom: var(--s-8); }
.rail__step:last-child { padding-bottom: 0; }
.rail__step::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 1px; background: var(--dormant-line); }
.rail__step:last-child::before { display: none; }
.rail__num { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--dormant-line); font-weight: var(--w-medium);
  font-size: var(--fs-small); color: var(--ink-faint); transition: all var(--dur-fast) var(--ease); }
.rail__step:hover .rail__num { background: var(--grad-brand); border-color: transparent; color: var(--ink-onGold); }
.rail__body h3 { font-size: var(--fs-h3); font-weight: var(--w-medium); padding-top: var(--s-2); }
.rail__body p { color: var(--ink-soft); font-size: var(--fs-small); margin-top: var(--s-2); max-width: 52ch; }

/* ---------- Compare table (For agencies) ---------- */
.compare { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface);
  border: 1px solid var(--dormant-line); border-radius: var(--r-card); overflow: hidden; font-size: var(--fs-small); }
.compare th, .compare td { padding: var(--s-4) var(--s-5); text-align: left; border-bottom: 1px solid var(--dormant-line); }
.compare tr:last-child td { border-bottom: none; }
.compare thead th { background: var(--surface-sunk); font-weight: var(--w-medium); font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-wide); color: var(--ink-faint); }
.compare thead th.foxi-col { color: var(--gold-strong); }
.compare td:first-child { color: var(--ink); font-weight: var(--w-medium); width: 34%; }
.compare td { color: var(--ink-soft); }
.compare .yes { color: var(--positive); font-weight: var(--w-medium); }
.compare .no { color: var(--ink-faint); }
.compare-wrap { overflow-x: auto; border-radius: var(--r-card); }

/* ---------- Stat band ---------- */
.stats { display: grid; gap: var(--s-5); grid-template-columns: 1fr; text-align: center; }
@media (min-width: 640px) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stat__num { font-size: clamp(2.2rem, 1.5rem + 2.5vw, 3.2rem); font-weight: var(--w-light);
  letter-spacing: var(--tracking-tight); }
.stat__num .accent { color: var(--gold-strong); }
.stat__label { color: var(--ink-soft); font-size: var(--fs-small); margin-top: var(--s-2); }

/* ---------- Principles list (About) ---------- */
.principles { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 720px) { .principles { grid-template-columns: 1fr 1fr; } }
.principle { 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); }
.principle:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.principle h3 { font-size: var(--fs-h3); font-weight: var(--w-medium); }
.principle p { color: var(--ink-soft); font-size: var(--fs-small); margin-top: var(--s-3); }

/* ---------- Prose (About story) ---------- */
.prose { max-width: var(--maxw-text); margin-inline: auto; }
.prose p { color: var(--ink-soft); font-size: var(--fs-lead); line-height: 1.7; }
.prose p + p { margin-top: var(--s-5); }
.prose p b { color: var(--ink); font-weight: var(--w-medium); }

/* ---------- Pricing page: no-nav minimal header ---------- */
.nav--minimal .nav__links { display: none !important; }

/* ---------- Full pricing feature table ---------- */
.feature-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-small); }
.feature-table th, .feature-table td { padding: var(--s-4) var(--s-4); border-bottom: 1px solid var(--dormant-line); text-align: center; }
.feature-table td:first-child, .feature-table th:first-child { text-align: left; color: var(--ink-soft); }
.feature-table thead th { font-weight: var(--w-medium); color: var(--ink); position: sticky; top: 68px;
  background: color-mix(in srgb, var(--canvas) 92%, transparent); backdrop-filter: blur(8px); }
.feature-table thead th.hot { color: var(--gold-strong); }
.feature-table .group td { background: var(--surface-sunk); font-weight: var(--w-medium); color: var(--ink);
  font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-wide); }
.feature-table .tick { color: var(--positive); }
.feature-table .dash { color: var(--ink-faint); }

/* ---------- Login ---------- */
.login-page { min-height: 100dvh; display: grid; place-items: center; padding: var(--gutter); background: var(--canvas); }
.login-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--dormant-line);
  border-radius: var(--r-frame); padding: var(--s-8) var(--s-7); box-shadow: var(--shadow-frame); text-align: center; }
.login-card h1 { font-size: var(--fs-h3); font-weight: var(--w-medium); margin-top: var(--s-5); }
.login-card > p { color: var(--ink-soft); font-size: var(--fs-small); margin-top: var(--s-2); }
.login-form { margin-top: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); text-align: left; }
.login-form label { font-size: var(--fs-eyebrow); font-weight: var(--w-medium); color: var(--ink-soft);
  letter-spacing: var(--tracking-wide); }
.login-form input { width: 100%; padding: 0.85em 1.1em; border-radius: var(--r-sm);
  border: 1px solid var(--dormant-line); background: var(--surface-sunk); font: inherit; color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.login-form input:focus { outline: none; border-color: var(--ink); background: var(--surface); }
.login-form .btn { margin-top: var(--s-3); width: 100%; }
.login-card__foot { margin-top: var(--s-5); font-size: var(--fs-small); color: var(--ink-faint); }
.login-card__foot a { color: var(--gold-strong); font-weight: var(--w-medium); }
.login-back { display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-6);
  font-size: var(--fs-small); color: var(--ink-faint); transition: color var(--dur-fast) var(--ease); }
.login-back:hover { color: var(--ink); }

/* ---------- Breathing hero glow (Apple-spark, one place only) ---------- */
.glow { position: relative; }
.glow::before { content: ""; position: absolute; inset: -12% -20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46% 42% at 30% 28%, color-mix(in srgb, var(--indigo) 14%, transparent) 0%, transparent 70%),
    radial-gradient(44% 42% at 72% 26%, color-mix(in srgb, var(--gold) 12%, transparent) 0%, transparent 70%);
  filter: blur(48px); opacity: 0; animation: glowIn 1.6s var(--ease) 0.35s forwards; }
@keyframes glowIn { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .glow::before { animation: none; opacity: 1; } }

/* ---------- CTA band (inner pages) ---------- */
.cta-band { text-align: center; padding-block: var(--section-y); }
.cta-band h2 { font-size: var(--fs-h2); font-weight: var(--w-light); letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug); max-width: 20ch; margin-inline: auto; }
.cta-band .btn { margin-top: var(--s-6); }

/* ---------- Comparison / article pages ---------- */
.verdict { background: var(--gold-tint); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  border-radius: var(--r-sm); padding: var(--s-5) var(--s-6); margin: var(--s-7) 0; }
.verdict p { font-size: var(--fs-lead); color: var(--ink); line-height: 1.6; }
.verdict .verdict__label { display: block; font-size: var(--fs-eyebrow); font-weight: var(--w-semi);
  letter-spacing: var(--tracking-wide); color: var(--gold-strong); margin-bottom: var(--s-3); }
.article h2 { font-size: var(--fs-h2); font-weight: var(--w-light); letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug); margin-top: var(--s-10); }
.article h3 { font-size: var(--fs-h3); font-weight: var(--w-medium); margin-top: var(--s-7); }
.article p { color: var(--ink-soft); margin-top: var(--s-4); max-width: 68ch; }
.article ul { margin-top: var(--s-4); padding-left: 1.2em; color: var(--ink-soft); max-width: 66ch; }
.article li { margin-top: var(--s-2); }
.article .compare-wrap { margin-top: var(--s-6); }
.article b { color: var(--ink); font-weight: var(--w-medium); }
.article .date { font-size: var(--fs-small); color: var(--ink-faint); }
.pick-cards { display: grid; gap: var(--s-4); grid-template-columns: 1fr; margin-top: var(--s-5); }
@media (min-width: 720px) { .pick-cards { grid-template-columns: 1fr 1fr; } }
.pick { background: var(--surface); border: 1px solid var(--dormant-line); border-radius: var(--r-card); padding: var(--s-5); }
.pick h3 { margin-top: 0; }
.pick p { font-size: var(--fs-small); margin-top: var(--s-3); }
.tool-rank { display: flex; gap: var(--s-4); align-items: baseline; margin-top: var(--s-8); }
.tool-rank .n { font-size: var(--fs-h2); font-weight: var(--w-light); color: var(--ink-faint); }