/* ChefBear site design (the home page style), shared by every page that
   carries body.hp. Scoped to .hp so pages not yet converted are unaffected.
   Tokens use the shared house names (core §7a) on top of the site palette in
   style.css; light values here, dark values in the two blocks below. */

.hp {
  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  /* Darker than the site's --text-tertiary (#8a7e79, 3.7:1): small text here
     needs 4.5:1 on the page, cards and tiles in both themes. */
  --color-text-tertiary: #6f6460;
  --color-background-primary: var(--bg-page);
  --color-accent: var(--primary);
  --color-accent-text: #fbf9f4;
  --color-ring: var(--secondary);
  --color-border-primary: rgba(58, 45, 45, .16);
  --color-border-secondary: rgba(58, 45, 45, .10);
  --color-danger-text: #b3261e;
  --color-success-text: #2f6b4f;
  --hp-gold: #c49a6c;
  --hp-gold-light: #f0d49e;
  --hp-gold-ink: #2b2018;
  --hp-candy-pink: #d9a3c7;
  --hp-cta-glow: rgba(124, 87, 48, .32);
  /* The candy gradient (caramel to pink) from the FPTI headline: text
     highlights and thin decorative lines only, never a fill. */
  --hp-candy: linear-gradient(100deg, var(--secondary) 0%, var(--hp-gold) 28%, var(--hp-candy-pink) 55%, var(--secondary) 100%);
  --glass-fill: linear-gradient(160deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .72));
  --glass-edge: rgba(58, 45, 45, .10);
  --glass-light: inset 0 1px 0 rgba(255, 255, 255, .9);
  --glass-shadow: 0 18px 48px rgba(58, 45, 45, .10);
  --glass-shadow-hover: 0 24px 60px rgba(58, 45, 45, .16);
  --tile-fill: rgba(58, 45, 45, .035);
  --code-fill: #f3efe7;
  --aurora-a: rgba(183, 158, 220, .30);
  --aurora-b: rgba(255, 193, 182, .32);
  --aurora-c: rgba(255, 212, 140, .28);
  --aurora-d: rgba(167, 215, 197, .28);
  --hero-media-filter: none;
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 24px;
  --radius-xl: 28px;
  --radius-full: 999px;
  --ease-standard: cubic-bezier(.20, .80, .20, 1);
  --ease-emphasized: cubic-bezier(.16, 1, .30, 1);
  --ease-exit: cubic-bezier(.40, 0, 1, 1);
  --duration-quick: 180ms;
  --duration-standard: 320ms;
  --duration-emphasized: 420ms;
  --hp-gutter: 16px;
  --hp-max: 1120px;
  --hp-read: 680px;
  background: var(--bg-page);
  color: var(--color-text-primary);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hp {
    --color-accent-text: #1b1c19;
    --color-text-tertiary: #aba29c;
    --color-border-primary: rgba(255, 255, 255, .16);
    --color-border-secondary: rgba(255, 255, 255, .09);
    --color-danger-text: #ffb4ab;
    --color-success-text: #a7d7c5;
    --hp-gold: #d9b07f;
    --hp-gold-light: #f3dcb0;
    --hp-candy-pink: #e8b9d8;
    --hp-cta-glow: rgba(238, 189, 142, .22);
    --glass-fill: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .035));
    --glass-edge: rgba(255, 255, 255, .13);
    --glass-light: inset 0 1px 0 rgba(255, 255, 255, .10);
    --glass-shadow: 0 18px 48px rgba(0, 0, 0, .34);
    --glass-shadow-hover: 0 24px 60px rgba(0, 0, 0, .46);
    --tile-fill: rgba(255, 255, 255, .045);
    --code-fill: #262622;
    --aurora-a: rgba(140, 110, 190, .20);
    --aurora-b: rgba(220, 140, 120, .18);
    --aurora-c: rgba(200, 160, 110, .16);
    --aurora-d: rgba(100, 160, 140, .16);
    --hero-media-filter: brightness(.62) saturate(.9);
  }
}
:root[data-theme="dark"] .hp {
  --color-accent-text: #1b1c19;
  --color-text-tertiary: #aba29c;
  --color-border-primary: rgba(255, 255, 255, .16);
  --color-border-secondary: rgba(255, 255, 255, .09);
  --color-danger-text: #ffb4ab;
  --color-success-text: #a7d7c5;
  --hp-gold: #d9b07f;
  --hp-gold-light: #f3dcb0;
  --hp-candy-pink: #e8b9d8;
  --hp-cta-glow: rgba(238, 189, 142, .22);
  --glass-fill: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .035));
  --glass-edge: rgba(255, 255, 255, .13);
  --glass-light: inset 0 1px 0 rgba(255, 255, 255, .10);
  --glass-shadow: 0 18px 48px rgba(0, 0, 0, .34);
  --glass-shadow-hover: 0 24px 60px rgba(0, 0, 0, .46);
  --tile-fill: rgba(255, 255, 255, .045);
  --code-fill: #262622;
  --aurora-a: rgba(140, 110, 190, .20);
  --aurora-b: rgba(220, 140, 120, .18);
  --aurora-c: rgba(200, 160, 110, .16);
  --aurora-d: rgba(100, 160, 140, .16);
  --hero-media-filter: brightness(.62) saturate(.9);
}
@media (min-width: 520px) { .hp { --hp-gutter: 24px; } }
@media (min-width: 1024px) { .hp { --hp-gutter: 32px; } }

/* Language visibility before global-nav.js runs (the head script sets
   data-lang); the same rules global-nav.js injects later. */
[data-lang="en"] .hp :is(.i18n-zh, .i18n-zh-hans, .i18n-zh-hant, .i18n-es) { display: none !important; }
[data-lang="zh-hans"] .hp :is(.i18n-en, .i18n-zh-hant, .i18n-es) { display: none !important; }
[data-lang="zh-hant"] .hp :is(.i18n-en, .i18n-zh, .i18n-zh-hans, .i18n-es) { display: none !important; }
[data-lang="es"] .hp :is(.i18n-en, .i18n-zh, .i18n-zh-hans, .i18n-zh-hant) { display: none !important; }

html:has(body.hp) { background: var(--bg-page); }
.hp { overflow-x: clip; }
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ── Layout ─────────────────────────────────────────────── */
.hp-wrap { max-width: calc(var(--hp-max) + 2 * var(--hp-gutter)); margin: 0 auto; padding: 0 var(--hp-gutter); }
.hp-read { max-width: var(--hp-read); }
.hp-section { position: relative; padding: 112px 0; }
@media (min-width: 760px) { .hp-section { padding: 176px 0; } }
.hp-section--tight { padding-top: 24px; }

.hp h1, .hp h2, .hp h3 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--color-text-primary);
  text-wrap: balance;
  letter-spacing: -.02em;
}
.hp p, .hp li, .hp dd { text-wrap: pretty; }
.hp-eyebrow {
  display: block;
  font: 600 13px/1.4 var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: 12px;
}
.hp-h2 { font-size: clamp(30px, 4.2vw, 44px); line-height: 1.12; font-weight: 700; }
.hp-h2 em, .hp-h1 em { font-style: italic; color: var(--secondary); }

/* ── Candy gradient ─────────────────────────────────────── */
/* Emphasis inside headings (and .hp-candy anywhere) wears the slow candy
   shimmer; pages without background-clip support keep the caramel colour. */
@keyframes hp-candy {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hp-h1 em, .hp-h2 em, .hp-candy {
    background: var(--hp-candy);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: hp-candy 20s linear infinite;
    /* Keeps italic overhang inside the clipped box. */
    padding-right: .06em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
}
/* A thin candy line: the footer's top edge, and the top of a linked card on
   hover. */
.hp-candy-line {
  display: block;
  height: 2px;
  border: 0;
  border-radius: 2px;
  background: var(--hp-candy);
  background-size: 220% auto;
  animation: hp-candy 20s linear infinite;
}
.hp-lede {
  margin-top: 16px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}
.hp-body { font-size: 17px; line-height: 1.6; color: var(--color-text-secondary); }
.hp-body + .hp-body { margin-top: 12px; }
.hp-body strong { color: var(--color-text-primary); font-weight: 600; }
.hp-note { font-size: 13px; line-height: 1.5; color: var(--color-text-tertiary); }

/* Links inside running text underline; they never scale. */
.hp-text-link {
  color: var(--color-text-primary);
  text-decoration: underline;
  text-decoration-color: var(--color-border-primary);
  text-underline-offset: 4px;
  transition: text-decoration-color var(--duration-quick) var(--ease-standard);
}
.hp-text-link:hover { opacity: 1; text-decoration-color: currentColor; }

/* ── Buttons ────────────────────────────────────────────── */
.hp-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 22px;
  border-radius: var(--radius-full);
  font: 600 15px/1 var(--font-body);
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: transform var(--duration-quick) var(--ease-standard),
    box-shadow var(--duration-quick) var(--ease-standard), background-color var(--duration-quick) var(--ease-standard);
}
.hp-btn:hover { opacity: 1; }
.hp-btn:active { transform: scale(.97); transition-duration: 60ms; }
.hp-btn svg { flex: none; }
.hp-btn--primary {
  /* Dark ink on the gold sweep: white text failed contrast on the light
     middle of the gradient in both themes. */
  color: var(--hp-gold-ink);
  background: linear-gradient(100deg, var(--secondary) 0%, var(--hp-gold) 30%, var(--hp-gold-light) 50%,
    var(--hp-gold) 70%, var(--secondary) 100%);
  background-size: 240% 100%;
  animation: hp-sweep 7s linear infinite;
  box-shadow: 0 10px 28px var(--hp-cta-glow);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .28);
}
.hp-btn--primary::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 1px solid var(--hp-gold);
  opacity: 0;
  animation: hp-breathe 3.2s var(--ease-standard) infinite;
  pointer-events: none;
}
.hp-btn--secondary {
  color: var(--color-text-primary);
  background: var(--glass-fill);
  box-shadow: var(--glass-light), 0 0 0 1px var(--glass-edge), 0 6px 18px rgba(0, 0, 0, .06);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
}
.hp-btn--lg { min-height: 52px; padding: 0 28px; font-size: 16px; }
@keyframes hp-sweep { from { background-position: 100% 0; } to { background-position: -140% 0; } }
@keyframes hp-breathe {
  0%, 100% { opacity: 0; transform: scale(.98); }
  50% { opacity: .55; transform: scale(1.02); }
}

/* App Store badge: Apple's wording and rounded-rectangle shape. */
.cc-actions { align-items: center; }
.hp-store.cc-store { flex: none; }
.hp-store {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 22px 8px 18px;
  border-radius: 12px;
  background: var(--primary);
  color: var(--color-accent-text);
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
  transition: transform var(--duration-quick) var(--ease-standard), box-shadow var(--duration-quick) var(--ease-standard);
}
.hp-store:hover { opacity: 1; }
.hp-store:active { transform: scale(.97); transition-duration: 60ms; }
.hp-store__text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.hp-store__text small { font-size: 11px; letter-spacing: .02em; }
.hp-store__text strong { color: inherit; font-size: 19px; font-weight: 600; letter-spacing: -.01em; }

@media (hover: hover) and (pointer: fine) {
  .hp-btn:hover, .hp-store:hover { transform: scale(1.04); }
  .hp-btn--primary:hover { box-shadow: 0 14px 36px var(--hp-cta-glow); }
  .hp-btn--primary:hover::after { animation-play-state: paused; }
  .hp-btn:active, .hp-store:active { transform: scale(.97); }
}
.hp :focus-visible { outline: 2px solid var(--color-ring); outline-offset: 3px; }

/* ── Hero ───────────────────────────────────────────────── */
.hp-hero { position: relative; padding-top: 128px; isolation: isolate; }
@media (min-width: 760px) { .hp-hero { padding-top: 184px; } }
.hp-hero__aurora {
  position: absolute;
  inset: 0 0 -20% 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40vw 28vw at 14% 12%, var(--aurora-a), transparent 70%),
    radial-gradient(36vw 26vw at 86% 18%, var(--aurora-b), transparent 70%),
    radial-gradient(42vw 30vw at 30% 70%, var(--aurora-c), transparent 70%),
    radial-gradient(40vw 30vw at 80% 72%, var(--aurora-d), transparent 70%);
  filter: blur(16px);
}
.hp-hero__copy { text-align: center; max-width: 820px; margin: 0 auto; }
.hp-h1 { font-size: clamp(40px, 7vw, 76px); line-height: 1.04; font-weight: 700; letter-spacing: -.03em; }
.hp-hero__lede { max-width: 560px; margin: 32px auto 0; font-size: clamp(17px, 1.6vw, 19px); }
.hp-hero__cta { display: flex; justify-content: center; align-items: center; min-height: 56px; margin-top: 48px; }
/* Phones and tablets keep the App Store badge (the static default). The head
   script marks desktop browsers, which get the AI button instead. */
.hp-cta-ai { display: none; }
html.hp-desktop .hp-hero__cta .hp-cta-store { display: none; }
html.hp-desktop .hp-hero__cta .hp-cta-ai { display: inline-flex; }

/* Illustrated loop: the box is reserved by aspect ratio (no layout shift);
   the poster is an <img>, the video (desktop only, home.js) fades in over it. */
.hp-hero__media {
  position: relative;
  margin: 40px auto 0;
  width: 100%;
  max-width: 1600px;
  aspect-ratio: 16 / 9;
  max-height: 440px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 80%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 80%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-composite: intersect;
}
.hp-hero__media img, .hp-hero__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 70%;
  filter: var(--hero-media-filter);
}
.hp-hero__media video { opacity: 0; transition: opacity var(--duration-emphasized) var(--ease-standard); }
.hp-hero__media video.is-playing { opacity: 1; }
@media (min-width: 1024px) { .hp-hero__media { margin-top: 24px; } }

/* ── Proof tiles (static) ───────────────────────────────── */
.hp-proof {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 8px 0 0;
}
@media (min-width: 760px) { .hp-proof { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hp-proof__tile {
  padding: 16px;
  border-radius: var(--radius-sm);
  background: var(--tile-fill);
  box-shadow: inset 0 0 0 1px var(--color-border-secondary);
}
.hp-proof__tile dt { font: 600 24px/1.15 var(--font-display); color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.hp-proof__tile dd { margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--color-text-secondary); }

/* ── Cards ──────────────────────────────────────────────── */
.hp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px;
  border-radius: var(--radius-md);
  background: var(--glass-fill);
  box-shadow: var(--glass-light), 0 0 0 1px var(--glass-edge), var(--glass-shadow);
  color: var(--color-text-primary);
}
a.hp-card {
  text-decoration: none;
  transition: transform var(--duration-quick) var(--ease-standard), box-shadow var(--duration-quick) var(--ease-standard);
}
a.hp-card:hover { opacity: 1; }
a.hp-card::before {
  content: "";
  position: absolute;
  top: 0; left: 24px; right: 24px;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: var(--hp-candy);
  background-size: 220% auto;
  opacity: 0;
  transition: opacity var(--duration-standard) var(--ease-standard);
  animation: hp-candy 20s linear infinite;
}
a.hp-card:hover::before, a.hp-card:focus-visible::before { opacity: 1; }
a.hp-card:active { transform: scale(.97); transition-duration: 60ms; }
@media (hover: hover) and (pointer: fine) {
  a.hp-card:hover { transform: scale(1.02); box-shadow: var(--glass-light), 0 0 0 1px var(--glass-edge), var(--glass-shadow-hover); }
  a.hp-card:active { transform: scale(.97); }
}
.hp-card h3, .hp-card__title { font-size: 22px; line-height: 1.25; font-weight: 700; }
.hp-card p { margin-top: 8px; font-size: 16px; line-height: 1.55; color: var(--color-text-secondary); }
.hp-card__go {
  margin-top: auto;
  padding-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 15px;
  color: var(--color-text-primary);
}
.hp-card__go svg { transition: transform var(--duration-quick) var(--ease-standard); }
.hp-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-bottom: 12px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  background: var(--tile-fill);
  box-shadow: inset 0 0 0 1px var(--color-border-secondary);
}
.hp-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-success-text); }
.hp-pill--after { margin: 16px 0 0; }
.hp-pill--next::before { background: var(--color-text-tertiary); }
.hp-pill--beta::before { background: var(--hp-gold); }

.hp-entry { display: grid; gap: 12px; margin-top: 32px; }
@media (min-width: 760px) { .hp-entry { grid-template-columns: 1fr 1fr; gap: 16px; } }

/* ── App steps with real screenshots ────────────────────── */
.hp-head { max-width: var(--hp-read); }
.hp-head--center { margin: 0 auto; text-align: center; }
.hp-steps { display: grid; gap: 40px; margin-top: 48px; counter-reset: hp-step; }
@media (min-width: 760px) { .hp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.hp-step { text-align: center; }
.hp-shot {
  width: min(240px, 64vw);
  margin: 0 auto 24px;
  aspect-ratio: 600 / 1301;
  border-radius: 32px;
  overflow: hidden;
  background: var(--bg-components);
  box-shadow: 0 0 0 1px var(--glass-edge), var(--glass-shadow);
}
.hp-shot img { width: 100%; height: 100%; object-fit: cover; }
.hp-step h3 { font-size: 22px; line-height: 1.25; font-weight: 700; }
.hp-step p { margin: 8px auto 0; max-width: 320px; font-size: 16px; line-height: 1.55; color: var(--color-text-secondary); }

/* ── Two-column feature (taste, developers) ─────────────── */
.hp-split { display: grid; gap: 32px; align-items: start; }
.hp-split > * { min-width: 0; }
@media (min-width: 1024px) { .hp-split { grid-template-columns: 1fr 1fr; gap: 64px; } }
.hp-list { list-style: none; margin-top: 24px; display: grid; gap: 12px; }
.hp-list li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}
.hp-list li strong { color: var(--color-text-primary); font-weight: 600; }
.hp-list svg { margin-top: 3px; color: var(--secondary); }

/* Example prompt: plainly text, never styled as a host screenshot. */
.hp-prompt {
  margin-top: 24px;
  padding: 20px 24px;
  border-radius: var(--radius-md);
  background: var(--tile-fill);
  box-shadow: inset 0 0 0 1px var(--color-border-secondary);
}
.hp-prompt figcaption { font-size: 13px; font-weight: 600; color: var(--color-text-tertiary); letter-spacing: .02em; }
.hp-prompt blockquote { margin-top: 8px; font: italic 400 19px/1.5 var(--font-display); color: var(--color-text-primary); }

.hp-numbered { list-style: none; counter-reset: hp-n; display: grid; gap: 12px; margin-top: 24px; }
.hp-numbered li {
  counter-increment: hp-n;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}
.hp-numbered li::before {
  content: counter(hp-n);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font: 600 14px/1 var(--font-body);
  color: var(--color-text-primary);
  background: var(--tile-fill);
  box-shadow: inset 0 0 0 1px var(--color-border-primary);
}
.hp-numbered li strong { color: var(--color-text-primary); font-weight: 600; }

.hp-hosts { display: grid; gap: 12px; }
@media (min-width: 520px) { .hp-hosts { grid-template-columns: 1fr 1fr; } }

/* Developer teaser band */
.hp-dev-band {
  padding: 32px 24px;
  border-radius: var(--radius-xl);
  background: var(--glass-fill);
  box-shadow: var(--glass-light), 0 0 0 1px var(--glass-edge), var(--glass-shadow);
}
@media (min-width: 760px) { .hp-dev-band { padding: 48px; } }
.hp-quote { margin-top: 20px; font: italic 400 20px/1.45 var(--font-display); color: var(--color-text-primary); }
.hp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 28px; }

/* Code sample */
.hp-code {
  margin: 0;
  padding: 20px;
  border-radius: var(--radius-md);
  background: var(--code-fill);
  box-shadow: inset 0 0 0 1px var(--color-border-secondary);
  overflow-x: auto;
  font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--color-text-primary);
  tab-size: 2;
}
.hp-code-cap { margin-top: 8px; }

/* ── Company ────────────────────────────────────────────── */
.hp-company { text-align: center; }
.hp-company .hp-body { max-width: 560px; margin: 16px auto 0; }

/* ── FAQ ────────────────────────────────────────────────── */
.hp-faq { max-width: 760px; margin: 72px auto 0; border-top: 1px solid var(--color-border-secondary); }
.hp-faq details { border-bottom: 1px solid var(--color-border-secondary); }
.hp-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 24px 0;
  list-style: none;
  cursor: pointer;
  font: 600 17px/1.4 var(--font-body);
  color: var(--color-text-primary);
  transition: color var(--duration-quick) var(--ease-standard);
}
.hp-faq summary::-webkit-details-marker { display: none; }
.hp-faq summary svg { flex: none; color: var(--color-text-tertiary); transition: transform var(--duration-standard) var(--ease-standard); }
.hp-faq details[open] summary svg { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .hp-faq summary:hover svg { color: var(--color-text-primary); } }
.hp-faq__a { max-width: 640px; padding: 0 0 28px; font-size: 16px; line-height: 1.6; color: var(--color-text-secondary); }
.hp-faq__a p + p { margin-top: 8px; }

/* ── Closing CTA ────────────────────────────────────────── */
.hp-close { text-align: center; }
.hp-close .hp-actions { justify-content: center; margin-top: 48px; }

/* ── Footer ─────────────────────────────────────────────── */
.hp-footer { position: relative; padding: 56px 0 40px; font-size: 14px; }
.hp-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--hp-candy);
  background-size: 220% auto;
  opacity: .55;
  animation: hp-candy 20s linear infinite;
}
.hp-footer__top { display: grid; gap: 32px; }
@media (min-width: 760px) { .hp-footer__top { grid-template-columns: 1.2fr repeat(3, 1fr); } }
.hp-footer .navbar-brand { font-size: 22px; color: var(--color-text-primary); }
.hp-footer__by { margin-top: 8px; color: var(--color-text-tertiary); }
.hp-footer__by a { color: inherit; }
.hp-footer h2 { font: 600 13px/1.4 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-tertiary); }
.hp-footer ul { list-style: none; margin: 8px 0 0; padding: 0; }
.hp-footer li a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: transform var(--duration-quick) var(--ease-standard), color var(--duration-quick) var(--ease-standard);
  transform-origin: left center;
}
.hp-footer li a:hover { opacity: 1; color: var(--color-text-primary); }
@media (hover: hover) and (pointer: fine) { .hp-footer li a:hover { transform: scale(1.04); } }
@media (pointer: coarse) { .hp-footer li a { min-height: 44px; } }
.hp-footer__legal { margin-top: 40px; font-size: 12px; color: var(--color-text-tertiary); }
.hp-footer__featured { margin: 32px 0 0; padding-top: 24px; border-top: 1px solid var(--color-border-secondary); }
.hp-footer__featured-label { font: 600 11px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-tertiary); margin-bottom: 10px; }
.hp-footer__featured-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* Badges at half their native size (Fazier 130×36, Twelve Tools 200×54). */
.hp-footer__featured-badges img { width: auto; height: 18px; }
.hp-footer__featured-badges img[height="54"] { height: 27px; }
.hp-footer__featured-badges a { color: var(--color-text-tertiary); font-size: 11px; text-decoration: none; line-height: 1; }
.hp-footer__featured-badges a:hover { color: var(--color-text-primary); }
.hp-footer__featured-badges .badge-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hp-footer__featured-badges .badge-dark { display: block; } :root:not([data-theme="light"]) .hp-footer__featured-badges .badge-light { display: none; } }
:root[data-theme="dark"] .hp-footer__featured-badges .badge-dark { display: block; }
:root[data-theme="dark"] .hp-footer__featured-badges .badge-light { display: none; }

/* ── Scroll reveal (only once JS adds html.hp-js) ───────── */
html.hp-js .hp-reveal {
  opacity: 0;
  transform: translateY(16px);
  filter: blur(6px);
  transition: opacity var(--duration-emphasized) var(--ease-standard),
    transform var(--duration-emphasized) var(--ease-emphasized), filter var(--duration-emphasized) var(--ease-standard);
  transition-delay: var(--hp-delay, 0ms);
}
html.hp-js .hp-reveal.is-in { opacity: 1; transform: none; filter: none; }

/* ── Fallbacks ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hp-btn--primary, .hp-btn--primary::after { animation: none; }
  .hp-h1 em, .hp-h2 em, .hp-candy, .hp-candy-line, .hp-footer::before, a.hp-card::before { animation: none; background-position: 30% center; }
  .hp-btn--primary::after { opacity: 0; }
  .hp-btn, .hp-store, a.hp-card, .hp-footer li a, .hp-faq summary svg { transition: none; }
  .hp-btn:hover, .hp-store:hover, a.hp-card:hover, .hp-footer li a:hover,
  .hp-btn:active, .hp-store:active, a.hp-card:active { transform: none !important; }
  html.hp-js .hp-reveal { transform: none; filter: none; transition: opacity 150ms var(--ease-standard); }
}
@media (prefers-reduced-transparency: reduce) {
  .hp { --glass-fill: var(--bg-card); }
  .hp-btn--secondary { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hp-hero__aurora { display: none; }
}
@media (prefers-contrast: more) {
  .hp { --glass-edge: var(--color-text-secondary); --color-border-secondary: var(--color-text-tertiary); }
}

/* ── Home hero, split (2026-11 redesign) ─────────────────── */
/* The brand mark lines up with the page column. */
.hp .navbar-brand-bar .container-wide { max-width: calc(var(--hp-max) + 2 * var(--hp-gutter)); padding: 0 var(--hp-gutter); }


/* Hero (2026-11, phone as the hero) */
.hp-hero__cta { flex-wrap: wrap; column-gap: 32px; row-gap: 16px; }

/* Secondary actions are text with an arrow, not buttons. */
.hp-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-primary);
  font: 600 16px/1 var(--font-body);
  text-decoration: none;
  cursor: pointer;
}
.hp-link:hover { opacity: 1; }
.hp-link--ai > svg:first-child { color: var(--secondary); }
.hp-link__arrow { transition: transform var(--duration-quick) var(--ease-standard); }
@media (hover: hover) and (pointer: fine) { .hp-link:hover .hp-link__arrow { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .hp-link__arrow { transition: none; } }

/* ══ Content pages ═══════════════════════════════════════
   Landing pages (.cb-lp-*), articles (.cb-article) and legal pages
   (.legal-*) keep their markup; inside body.hp they take the home page's
   type, glass cards, FAQ rows, App Store badge and footer. Long-form text
   keeps a reading measure and line height. */
body.hp { position: relative; isolation: isolate; }
.hp-top-aurora {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: min(900px, 120vh);
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40vw 28vw at 14% 12%, var(--aurora-a), transparent 70%),
    radial-gradient(36vw 26vw at 86% 18%, var(--aurora-b), transparent 70%),
    radial-gradient(42vw 30vw at 30% 70%, var(--aurora-c), transparent 70%),
    radial-gradient(40vw 30vw at 80% 72%, var(--aurora-d), transparent 70%);
  filter: blur(16px);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
  mask-image: linear-gradient(180deg, #000 55%, transparent);
}
@media (prefers-reduced-transparency: reduce) { .hp-top-aurora { display: none; } }

.hp .container { max-width: calc(760px + 2 * var(--hp-gutter)); padding: 0 var(--hp-gutter); }
.hp main a:not([class]), .hp .cb-lp-hero a:not([class]) {
  color: var(--color-text-primary);
  text-decoration: underline;
  text-decoration-color: var(--color-border-primary);
  text-underline-offset: 4px;
}
.hp main a:not([class]):hover { opacity: 1; text-decoration-color: currentColor; }

/* Eyebrow */
.hp .section-label, .hp .cb-lp-hero .section-label {
  display: block;
  font: 600 13px/1.4 var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--secondary);
  margin: 0 0 12px;
}

/* Candy emphasis: the landing pages' highlighted words. */
.hp em.cb-hl { font-style: italic; color: var(--secondary); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hp em.cb-hl {
    background: var(--hp-candy);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: hp-candy 20s linear infinite;
    padding-right: .06em;
  }
}

/* App Store badge, same as .hp-store */
.hp .app-store-btn, .hp .app-store-btn--light {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 22px 8px 18px;
  border-radius: 12px;
  background: var(--primary);
  color: var(--color-accent-text) !important;
  font-size: 15px;
  text-decoration: none;
  animation: none;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
  transition: transform var(--duration-quick) var(--ease-standard), box-shadow var(--duration-quick) var(--ease-standard);
}
.hp .app-store-btn::before { content: none; }
.hp .app-store-btn .apple-logo,
.hp .app-store-btn .app-store-text small,
.hp .app-store-btn .app-store-text strong { color: inherit; }
.hp .app-store-text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.hp .app-store-text small { font-size: 11px; letter-spacing: .02em; }
.hp .app-store-text strong { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.hp .app-store-btn:hover { opacity: 1; box-shadow: 0 10px 28px rgba(0, 0, 0, .14); }
.hp .app-store-btn:active { transform: scale(.97); transition-duration: 60ms; }
@media (hover: hover) and (pointer: fine) { .hp .app-store-btn:hover { transform: scale(1.04); } }

/* Landing pages */
.hp .cb-lp-hero { position: relative; padding: 128px 0 64px; text-align: center; }
@media (min-width: 760px) { .hp .cb-lp-hero { padding: 184px 0 88px; } }
.hp .cb-lp-hero > .container { max-width: calc(820px + 2 * var(--hp-gutter)); }
.hp .cb-lp-hero h1 { margin: 0; font-size: clamp(36px, 6vw, 64px); line-height: 1.06; letter-spacing: -.03em; }
.hp .cb-lp-hero p.lede {
  max-width: 600px;
  margin: 28px auto 40px;
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.6;
  color: var(--color-text-secondary);
}
.hp .cb-lp-section { padding: 64px 0; background: none !important; }
@media (min-width: 760px) { .hp .cb-lp-section { padding: 96px 0; } }
.hp .cb-lp-section h2 { margin: 0 0 20px; font-size: clamp(28px, 4vw, 40px); line-height: 1.12; }
.hp .cb-lp-section h3 { margin: 32px 0 8px; font-size: 20px; line-height: 1.3; }
.hp .cb-lp-section p, .hp .cb-lp-section li { color: var(--color-text-secondary); font-size: 17px; line-height: 1.65; }
.hp .cb-lp-section p { margin: 0 0 14px; }
.hp .cb-lp-section strong { color: var(--color-text-primary); font-weight: 600; }
.hp .cb-lp-grid { gap: 16px; margin-top: 32px; }
.hp .cb-lp-card {
  padding: 24px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--glass-fill);
  box-shadow: var(--glass-light), 0 0 0 1px var(--glass-edge), var(--glass-shadow);
}
.hp .cb-lp-card h3 { margin-top: 0; }
.hp .cb-lp-card p { margin: 8px 0 0; font-size: 16px; line-height: 1.55; }
.hp .cb-lp-cta { margin-top: 0; padding: 96px var(--hp-gutter) 120px; border-top: 0; text-align: center; }
.hp .cb-lp-cta h2 { font-size: clamp(28px, 4vw, 44px) !important; line-height: 1.12; }
.hp .cb-lp-cta .app-store-btn { margin-top: 24px; }

/* FAQ rows, same as .hp-faq */
.hp .cb-faq__item {
  margin: 0 !important;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--color-border-secondary);
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: none;
}
.hp .cb-faq__item:first-of-type { border-top: 1px solid var(--color-border-secondary); margin-top: 24px !important; }
.hp .cb-faq__item:hover, .hp .cb-faq__item[open] { border-color: var(--color-border-secondary); transform: none; }
.hp .cb-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 22px 0;
  font: 600 17px/1.4 var(--font-body);
  color: var(--color-text-primary);
}
.hp .cb-faq__q::after,
.hp .cb-faq__item[open] .cb-faq__q::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin: 0 4px 4px 0;
  border-right: 1.5px solid var(--color-text-tertiary);
  border-bottom: 1.5px solid var(--color-text-tertiary);
  font-size: 0;
  transform: rotate(45deg);
  transition: transform var(--duration-standard) var(--ease-standard);
}
.hp .cb-faq__item[open] .cb-faq__q::after { margin: 4px 4px 0 0; transform: rotate(-135deg); }
.hp .cb-faq__a { margin: 0; padding: 0 0 28px; border: 0; font-size: 16px; line-height: 1.6; color: var(--color-text-secondary); }
.hp .cb-faq__a p { font-size: 16px; }

/* Articles */
.hp .cb-article { max-width: calc(var(--hp-read) + 2 * var(--hp-gutter)); padding: 128px var(--hp-gutter) 96px; }
@media (min-width: 760px) { .hp .cb-article { padding-top: 168px; } }
.hp .cb-article h1 { margin: 16px 0 24px; font-size: clamp(34px, 5vw, 52px); line-height: 1.1; letter-spacing: -.03em; }
.hp .cb-article h2 { margin: 56px 0 14px; font-size: clamp(24px, 3vw, 30px); line-height: 1.2; }
.hp .cb-article h3 { margin: 32px 0 8px; font-size: 20px; line-height: 1.3; }
.hp .cb-article p, .hp .cb-article li { font-size: 17px; line-height: 1.75; color: var(--color-text-secondary); }
.hp .cb-article .meta { font-size: 14px; letter-spacing: .02em; color: var(--color-text-tertiary); }
.hp .cb-article .meta a { color: var(--secondary) !important; }
.hp .cb-article a:not([class]) { color: var(--color-text-primary); text-decoration-color: var(--color-border-primary); text-underline-offset: 4px; }
.hp .cb-article blockquote { border-left: 2px solid transparent; border-image: var(--hp-candy) 1; color: var(--color-text-secondary); }
.hp .cb-article img { border-radius: var(--radius-md); }
.hp .cb-article code, .hp .cb-article pre { background: var(--code-fill); border-color: var(--color-border-secondary); }
.hp .cb-compare {
  border: 0;
  border-radius: var(--radius-md);
  background: var(--glass-fill);
  box-shadow: var(--glass-light), 0 0 0 1px var(--glass-edge), var(--glass-shadow);
}
.hp .cb-compare th:first-child { background: var(--bg-page); }
.hp .cb-article .cb-compare th, .hp .cb-article .cb-compare td { border-bottom-color: var(--color-border-secondary); }

/* Legal pages */
.hp .legal-header { padding: 128px 0 8px; text-align: center; background: none; border: 0; }
@media (min-width: 760px) { .hp .legal-header { padding-top: 168px; } }
.hp .legal-header h1 { margin: 0 0 16px; font-size: clamp(34px, 5vw, 52px); line-height: 1.1; letter-spacing: -.03em; }
.hp .legal-header .meta { font-size: 14px; color: var(--color-text-tertiary); }
.hp .region-selector { display: flex; gap: 8px; margin: 32px 0 8px; }
.hp .region-selector a {
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--glass-fill);
  box-shadow: var(--glass-light), 0 0 0 1px var(--glass-edge);
  color: var(--color-text-secondary);
  font-size: 14px;
  text-decoration: none;
}
.hp .region-selector a:hover { opacity: 1; color: var(--color-text-primary); }
.hp .region-selector a.active { background: var(--primary); color: var(--color-accent-text); box-shadow: none; }
.hp .legal-body { padding: 48px 0 112px; }
.hp .legal-body .container { max-width: calc(var(--hp-read) + 2 * var(--hp-gutter)); }
.hp .legal-body h2 { margin: 56px 0 14px; font-size: clamp(24px, 3vw, 30px); line-height: 1.2; }
.hp .legal-body h3 { margin: 32px 0 8px; font-size: 19px; line-height: 1.3; }
.hp .legal-body p, .hp .legal-body li { font-size: 16px; line-height: 1.75; color: var(--color-text-secondary); }
.hp .legal-body strong { color: var(--color-text-primary); }
.hp .legal-body th { background: var(--tile-fill); }
.hp .legal-body th, .hp .legal-body td { border-bottom-color: var(--color-border-secondary); }
.hp .highlight-box {
  border-left: 0;
  border-radius: var(--radius-md);
  background: var(--glass-fill);
  box-shadow: var(--glass-light), 0 0 0 1px var(--glass-edge);
}

/* AI pages (/ai, /chatgpt, /claude, /mcp): their own components, in the
   home page's glass cards and gold primary button, with no tinted bands. */
.hp .cc-band { background: none; }
.hp :is(.ai-panel, .ai-card, .cc-asks li, .cc-faq, .cc-client, .cc-prompt) {
  border: 0;
  border-radius: var(--radius-md);
  background: var(--glass-fill);
  box-shadow: var(--glass-light), 0 0 0 1px var(--glass-edge), var(--glass-shadow);
}
.hp :is(.cc-btn--primary, .ai-btn--primary, .cc-cta, .email-link-primary),
.hp :is(.cc-btn--primary, .ai-btn--primary, .cc-cta, .email-link-primary):hover {
  border: 0;
  color: var(--hp-gold-ink);
  background: linear-gradient(100deg, var(--secondary) 0%, var(--hp-gold) 30%, var(--hp-gold-light) 50%,
    var(--hp-gold) 70%, var(--secondary) 100%);
  background-size: 240% 100%;
  animation: hp-sweep 7s linear infinite;
  box-shadow: 0 10px 28px var(--hp-cta-glow);
}
.hp :is(.cc-btn, .ai-btn):not(.cc-btn--primary):not(.ai-btn--primary) {
  border: 0;
  background: var(--glass-fill);
  box-shadow: var(--glass-light), 0 0 0 1px var(--glass-edge), 0 6px 18px rgba(0, 0, 0, .06);
}
.hp .cc-table th { background: var(--tile-fill); }

@media (prefers-reduced-motion: reduce) {
  .hp :is(.cc-btn--primary, .ai-btn--primary, .cc-cta, .email-link-primary) { animation: none; }
  .hp em.cb-hl { animation: none; background-position: 30% center; }
  .hp .app-store-btn, .hp .cb-faq__q::after { transition: none; }
  .hp .app-store-btn:hover, .hp .app-store-btn:active { transform: none; }
}