/* Local Post Calendar Builder — sales page. Warm coral + amber signature. */

:root {
  /* Type */
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", ui-sans-serif, system-ui, Roboto, Arial, sans-serif;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Type scale on a ~1.28 ratio. Display sizes get tighter tracking as they
     grow, which is how the optical weight stays even across the scale. */
  --text-h1: clamp(2.15rem, 4.1vw, 3.05rem);
  --text-h2: clamp(1.65rem, 3vw, 2.35rem);
  --text-h3: 1.3rem;
  --text-body-lg: 1.125rem;
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-micro: 0.75rem;

  --tracking-h1: -0.035em;
  --tracking-h2: -0.025em;
  --tracking-h3: -0.012em;
  --tracking-eyebrow: 0.12em;

  --leading-tight: 1.04;
  --leading-snug: 1.14;
  --leading-normal: 1.6;
  --leading-relaxed: 1.7;

  /* Brand — warm coral (fills/gradient) + text-safe dark coral for on-white text */
  --color-brand: #f2705b;         /* fills, gradients */
  --color-brand-dark: #c2410c;    /* 5.0:1 on white — link/eyebrow text */
  --color-brand-deep: #9a3412;    /* 5.6:1 on --color-brand-soft — text on coral tints */
  --color-brand-light: #f89684;
  --color-brand-soft: #ffe9e4;

  --color-accent: #b45309;        /* amber, 5.2:1 on white */
  --color-accent-dark: #92400e;
  --color-accent-soft: #fdead0;

  /* Icon-tile palette */
  --color-accent-blue: #2563eb;
  --color-accent-teal: #0d9488;
  --color-accent-coral: #e0563f;
  --color-accent-amber: #b45309;
  --color-accent-violet: #7c3aed;
  --color-accent-emerald: #059669;

  /* Neutrals */
  --color-neutral-0: #ffffff;
  --color-neutral-50: #fbf9f7;
  --color-neutral-100: #f6f2ee;
  --color-neutral-200: #ece4dc;
  --color-neutral-300: #d8cdc2;
  --color-neutral-400: #a89c8f;
  --color-neutral-500: #6f6559;
  --color-neutral-600: #4d453b;
  --color-neutral-700: #363029;
  --color-neutral-800: #221f1a;
  --color-neutral-900: #14110d;
  --color-neutral-950: #0a0806;

  --color-surface: var(--color-neutral-0);
  --color-surface-alt: var(--color-neutral-50);
  --color-surface-tinted: color-mix(in oklab, var(--color-brand) 6%, var(--color-neutral-0));
  --color-surface-inverse: #1a1510;

  --color-text-primary: var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-700);
  --color-text-muted: var(--color-neutral-500);
  --color-text-inverse: var(--color-neutral-0);
  --color-text-brand: var(--color-brand-dark);

  --color-border: var(--color-neutral-200);
  --color-border-strong: var(--color-neutral-300);

  /* Gradients */
  --gradient-brand: linear-gradient(135deg, var(--color-brand-light) 0%, var(--color-brand) 48%, #d94f38 100%);
  --gradient-accent: linear-gradient(135deg, #d97706 0%, var(--color-accent) 100%);
  --gradient-hero-fade: linear-gradient(180deg, var(--color-surface-tinted) 0%, var(--color-surface) 100%);
  --gradient-mesh-1: radial-gradient(60% 60% at 18% 8%, color-mix(in oklab, var(--color-brand) 26%, transparent), transparent 70%),
                     radial-gradient(50% 50% at 92% 26%, color-mix(in oklab, #d97706 22%, transparent), transparent 72%);
  --gradient-mesh-2: radial-gradient(45% 60% at 82% 92%, color-mix(in oklab, var(--color-brand-light) 18%, transparent), transparent 70%),
                     radial-gradient(40% 40% at 8% 82%, color-mix(in oklab, var(--color-accent) 14%, transparent), transparent 70%);

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(40, 20, 8, 0.05);
  --shadow-sm: 0 1px 2px rgba(40, 20, 8, 0.05), 0 4px 8px -4px rgba(40, 20, 8, 0.08);
  --shadow-md: 0 2px 4px rgba(40, 20, 8, 0.05), 0 8px 20px -8px rgba(40, 20, 8, 0.14);
  --shadow-lg: 0 4px 12px rgba(40, 20, 8, 0.07), 0 20px 40px -20px rgba(40, 20, 8, 0.2);
  --shadow-xl: 0 8px 24px rgba(40, 20, 8, 0.09), 0 32px 64px -32px rgba(40, 20, 8, 0.26);
  --shadow-brand-glow: 0 12px 30px -12px color-mix(in oklab, var(--color-brand) 60%, transparent);

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 6rem;

  --pad-section-sm: clamp(2rem, 4vw, 3rem);
  --pad-section: clamp(3rem, 6vw, 5rem);
  --pad-section-lg: clamp(4rem, 8vw, 7rem);

  /* Motion */
  --duration-fast: 150ms;
  --duration-med: 240ms;
  --duration-slow: 400ms;
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
h1, h2, h3, h4 {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  line-height: var(--leading-snug); margin: 0 0 0.5em;
  /* Keeps display type off ragged single-word last lines. */
  text-wrap: balance;
}
h1 { font-size: var(--text-h1); letter-spacing: var(--tracking-h1); line-height: var(--leading-tight); }
h2 { font-size: var(--text-h2); letter-spacing: var(--tracking-h2); }
h3 { font-size: var(--text-h3); letter-spacing: var(--tracking-h3); font-weight: var(--weight-semibold); }
p { margin: 0 0 1rem; text-wrap: pretty; }
/* Body measure — 65-75 characters is the readable band. */
.lede, .section-head p, .hero .sub-hero { max-width: 62ch; }
a { color: var(--color-brand-dark); }

.container { max-width: 1200px; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.container-narrow { max-width: 720px; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.container-wide { max-width: 1360px; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 3rem); }

.eyebrow {
  display: inline-block;
  font-size: var(--text-micro);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-brand);
  margin-bottom: var(--space-2);
}

.skip-link {
  position: absolute; top: -100px; left: 0;
  background: var(--color-brand-dark); color: #fff;
  padding: 12px 16px; z-index: 100; border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { top: 0; }

/* Anchor targets must clear the sticky header. Without this, every in-page
   link (#real-output, #demo, #pricing, #faq) lands with its heading hidden
   behind the header bar. */
[id] { scroll-margin-top: 88px; }

*:focus-visible { outline: 2px solid var(--color-brand-dark); outline-offset: 3px; border-radius: var(--radius-sm); }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-body); font-weight: var(--weight-semibold); letter-spacing: -0.005em;
  border: 0; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform var(--duration-med) var(--ease-out-quart),
              box-shadow var(--duration-med) var(--ease-out-quart),
              background var(--duration-med) var(--ease-out-quart);
}
.btn--lg { padding: 1rem 2rem; font-size: var(--text-body-lg); border-radius: var(--radius-lg); min-height: 56px; }
.btn--md { padding: 0.75rem 1.5rem; font-size: var(--text-body); border-radius: var(--radius-lg); min-height: 46px; }
.btn-primary {
  background: var(--gradient-brand); color: #fff; box-shadow: var(--shadow-brand-glow);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px color-mix(in oklab, var(--color-brand) 72%, transparent); }
.btn-primary:active { transform: translateY(0); }
.btn-primary svg { transition: transform var(--duration-med) var(--ease-out-quart); }
.btn-primary:hover svg { transform: translateX(4px); }
.btn-primary:focus-visible { outline-color: var(--color-brand-dark); }
.btn-secondary {
  background: transparent; color: var(--color-brand-dark); box-shadow: inset 0 0 0 1.5px var(--color-brand);
}
.btn-secondary:hover { background: var(--color-brand-soft); transform: translateY(-2px); }
/* A block button fills its container, so its label must be allowed to wrap.
   The base .btn sets white-space: nowrap, which lets a long label run past the
   card edge instead of wrapping inside it. */
.btn-block { width: 100%; white-space: normal; text-wrap: balance; }
.btn { max-width: 100%; }
@media (max-width: 520px) { .btn { white-space: normal; } }
.btn-text {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  color: var(--color-brand-dark); font-weight: var(--weight-semibold); text-decoration: none;
}
.btn-text:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ── Header ──────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in oklab, var(--color-surface) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-med) var(--ease-out-quart), background var(--duration-med) var(--ease-out-quart);
}
.site-header[data-compact="true"] { border-bottom-color: var(--color-border); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 1.05rem; letter-spacing: -0.01em; color: var(--color-text-primary); text-decoration: none; }
.brand__mark { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--gradient-brand); color: #fff; box-shadow: var(--shadow-sm); }
.brand__mark svg { width: 19px; height: 19px; }
.site-header .btn { padding: 0.6rem 1.2rem; min-height: 44px; font-size: var(--text-small); }
@media (max-width: 640px) { .site-header .header-cta { display: none; } }

/* ── Hero ────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; padding-block: clamp(2.5rem, 6vw, 5rem); background: var(--gradient-hero-fade); }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--gradient-mesh-1); opacity: 0.75; pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.grid-hero { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 1024px) { .grid-hero { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); } }
.hero h1 { margin-bottom: var(--space-3); max-width: 20ch; }
.hero .sub-hero {
  font-size: clamp(1.05rem, 1.35vw, 1.15rem); color: var(--color-text-secondary);
  max-width: 52ch; line-height: var(--leading-relaxed); margin-bottom: var(--space-5);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.trust-anchor {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-4); padding: 0.5rem 1rem;
  background: color-mix(in oklab, var(--color-accent) 12%, var(--color-surface));
  color: var(--color-accent-dark); font-size: var(--text-small); font-weight: var(--weight-medium);
  border-radius: var(--radius-pill); box-shadow: var(--shadow-xs);
  border: 1px solid color-mix(in oklab, var(--color-accent) 24%, transparent);
}
.trust-anchor svg { width: 16px; height: 16px; }
.hero-visual { width: 100%; height: auto; display: block; border-radius: var(--radius-2xl); filter: drop-shadow(0 22px 44px rgba(40, 20, 8, 0.16)); }
@media (min-width: 1024px) { .hero-visual { max-width: 640px; margin-left: auto; } }

/* ── Hero illustration ───────────────────────────────────── */
.hero-art { width: 100%; height: auto; display: block; overflow: visible; }
@media (min-width: 1024px) { .hero-art { max-width: 620px; margin-left: auto; } }

/* The nine marked days settle in one after another, so the twice-weekly
   rhythm reads as a rhythm rather than a static pattern. One orchestrated
   moment on load — nothing else on the page animates itself. */
.day-on { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .day-on { animation: day-in 0.5s var(--ease-out-quart) backwards; animation-delay: calc(0.34s + var(--i) * 0.07s); }
  .art-card { animation: card-in 0.7s var(--ease-out-quart) 0.9s backwards; }
}
@keyframes day-in {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes card-in {
  from { opacity: 0; transform: translate(10px, 22px); }
  to { opacity: 1; transform: translate(0, 0); }
}

/* ── Sections ────────────────────────────────────────────── */
main > section { padding-block: var(--pad-section); }
main > section[data-visible] { opacity: 0; transform: translateY(20px); transition: opacity var(--duration-slow) var(--ease-out-quart), transform var(--duration-slow) var(--ease-out-quart); }
main > section[data-visible="true"] { opacity: 1; transform: translateY(0); }
.section-tinted { background: var(--color-surface-tinted); }
.section-alt { background: var(--color-surface-alt); }
.section-lg { padding-block: var(--pad-section-lg); }
.section-sm { padding-block: var(--pad-section-sm); }
.section-head { margin-bottom: var(--space-5); }
.section-head--center { text-align: center; max-width: 60ch; margin-inline: auto; }
.section-head--left { text-align: left; max-width: 54ch; }
/* A left head with supporting copy splits into two columns on wide viewports —
   heading left, copy right — so the right half of the page isn't left empty.
   The eyebrow and h2 share one wrapper; without it the paragraph spans both
   grid rows and stretches the eyebrow away from the heading. */
@media (min-width: 900px) {
  .section-head--split {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
  }
  .section-head--split > div > h2 { margin-bottom: 0; }
  .section-head--split > p { margin: 0; max-width: 46ch; }
}
.section-head p { color: var(--color-text-secondary); font-size: var(--text-body-lg); }
.lede { font-size: var(--text-body-lg); color: var(--color-text-secondary); }

/* ── Problem: quote-slab ─────────────────────────────────── */
.problem-slab {
  position: relative; border-radius: var(--radius-2xl); overflow: hidden;
  background: var(--color-surface-inverse); color: #f3ede6;
  padding: clamp(2rem, 5vw, 4rem); box-shadow: var(--shadow-lg);
}
.problem-slab::after {
  content: ""; position: absolute; inset: 0; opacity: 0.5; pointer-events: none;
  background: radial-gradient(50% 70% at 90% 10%, color-mix(in oklab, var(--color-brand) 40%, transparent), transparent 70%);
}
.problem-slab > * { position: relative; z-index: 1; }
.problem-slab .eyebrow { color: var(--color-brand-light); }
.problem-slab h2 { color: #fff; max-width: 20ch; }
.problem-slab p { color: #e5ddd3; max-width: 60ch; }
.problem-slab .kicker { font-family: var(--font-display); font-size: 1.15rem; font-weight: var(--weight-semibold); color: #fff; }

/* ── Solution steps ──────────────────────────────────────── */
/* Both grids that use this hold 6 or 3 cards. auto-fit resolved to 4 columns on
   desktop, which left 2 empty cells under the six and 1 under the three. Three
   columns divides both exactly. */
.post-fields { display: grid; gap: var(--space-3); grid-template-columns: 1fr; margin-top: var(--space-5); }
@media (min-width: 560px) { .post-fields { grid-template-columns: repeat(2, 1fr); } }
/* In the 2-column band an odd item count leaves a gap; spanning the last item
   closes it. Scoped to that band only — at 3 columns both grids divide evenly. */
@media (min-width: 560px) and (max-width: 899px) {
  .post-fields > :nth-child(odd):last-child,
  .feature-grid > :nth-child(odd):last-child { grid-column: 1 / -1; }
}
@media (min-width: 900px) { .post-fields { grid-template-columns: repeat(3, 1fr); } }
.field-card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-4); box-shadow: var(--shadow-xs);
  transition: transform var(--duration-med) var(--ease-out-quart), box-shadow var(--duration-med) var(--ease-out-quart);
}
.field-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.field-card h3 { margin-bottom: 0.35em; }
.field-card p { color: var(--color-text-secondary); font-size: var(--text-small); margin: 0; }

/* ── Icon tiles / feature grid ───────────────────────────── */
.feature-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
/* This grid holds 7 items, so the final row is always short. When the last item
   is the 1st of a row (count % 3 == 1) let it run the full width rather than
   leaving two dead cells beside it. */
@media (min-width: 900px) {
  .feature-grid > :nth-child(3n + 1):last-child { grid-column: 1 / -1; }
  .feature-grid > :nth-child(3n + 1):last-child .feature-item__body p { max-width: 68ch; }
}
.feature-item {
  display: grid; grid-template-columns: 48px 1fr; gap: var(--space-3); align-items: start;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-4); box-shadow: var(--shadow-xs);
  transition: transform var(--duration-med) var(--ease-out-quart), box-shadow var(--duration-med) var(--ease-out-quart);
}
.feature-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.feature-item__body h3 { margin: 0 0 0.35em; font-size: 1.075rem; }
.feature-item__body p { margin: 0; color: var(--color-text-secondary); font-size: var(--text-small); }
.icon-tile { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-lg); background: var(--tile-bg); color: var(--tile-fg); transition: transform var(--duration-med) var(--ease-out-quart); }
.feature-item:hover .icon-tile { transform: scale(1.06); }
.icon-tile--blue { --tile-bg: color-mix(in oklab, var(--color-accent-blue) 15%, var(--color-surface)); --tile-fg: var(--color-accent-blue); }
.icon-tile--teal { --tile-bg: color-mix(in oklab, var(--color-accent-teal) 15%, var(--color-surface)); --tile-fg: var(--color-accent-teal); }
.icon-tile--coral { --tile-bg: color-mix(in oklab, var(--color-accent-coral) 15%, var(--color-surface)); --tile-fg: var(--color-accent-coral); }
.icon-tile--amber { --tile-bg: color-mix(in oklab, var(--color-accent-amber) 15%, var(--color-surface)); --tile-fg: var(--color-accent-amber); }
.icon-tile--violet { --tile-bg: color-mix(in oklab, var(--color-accent-violet) 15%, var(--color-surface)); --tile-fg: var(--color-accent-violet); }
.icon-tile--emerald { --tile-bg: color-mix(in oklab, var(--color-accent-emerald) 15%, var(--color-surface)); --tile-fg: var(--color-accent-emerald); }

/* ── Bento (what you get) ────────────────────────────────── */
.bento { display: grid; gap: var(--space-3); grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(150px, auto); }
.bento-item {
  grid-column: span 2; display: flex; flex-direction: column; gap: 0.5rem;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-4); box-shadow: var(--shadow-xs);
  transition: transform var(--duration-med) var(--ease-out-quart), box-shadow var(--duration-med) var(--ease-out-quart);
}
.bento-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.bento-item--wide { grid-column: span 4; }
.bento-item .tile-lead { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--color-brand-soft); color: var(--color-brand-dark); }
.bento-item h3 { margin: 0; font-size: 1.075rem; }
.bento-item p { margin: 0; color: var(--color-text-secondary); font-size: var(--text-small); }

/* Feature tile (inverted). These overrides MUST come after the base .bento-item
   rules above: they carry identical specificity (0,1,1), so source order is the
   only thing deciding the winner. Moving them earlier paints dark body text on
   the dark tile at ~1.3:1 contrast. */
.bento-item--tall {
  grid-row: span 2; grid-column: span 3;
  background: var(--color-surface-inverse); color: #f3ede6; border-color: transparent;
}
.bento-item--tall h3 { color: #fff; font-size: 1.25rem; }
.bento-item--tall p { color: #e5ddd3; }
.bento-item--tall .tile-lead { background: color-mix(in oklab, var(--color-brand) 40%, transparent); color: #fff; }

/* Spec list that fills the flagship tile instead of leaving it half empty. */
.tile-specs { list-style: none; margin: auto 0 0; padding: var(--space-4) 0 0; display: grid; gap: 0.7rem; }
.tile-specs li {
  display: flex; align-items: baseline; gap: 0.75rem;
  padding-top: 0.7rem; border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #e5ddd3; font-size: var(--text-small);
}
.tile-specs li:first-child { border-top: 0; padding-top: 0; }
.tile-specs b {
  flex: none; min-width: 2.6rem; font-family: var(--font-display);
  font-size: 1.3rem; font-weight: var(--weight-bold); color: var(--color-brand-light); line-height: 1;
}

@media (max-width: 767px) { .bento { grid-template-columns: 1fr; } .bento > * { grid-column: 1 / -1 !important; grid-row: auto !important; } }

/* ── Workflow steps ──────────────────────────────────────── */
/* Each step ends with the artifact it actually produces — the five input
   fields, the month with its nine marked days, the three export buttons.
   The artifact is pinned to the card bottom, so uneven body copy can't leave
   the three cards ragged. */
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
@media (min-width: 820px) { .flow { grid-template-columns: repeat(3, 1fr); } }

.flow__step {
  display: flex; flex-direction: column; height: 100%;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-xs);
}
.flow__head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; }
.flow__n {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--gradient-brand); color: #fff;
  font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 0.9rem; line-height: 1;
}
.flow__head h3 { margin: 0; font-size: 1.075rem; }
.flow__step > p { margin: 0; color: var(--color-text-secondary); font-size: var(--text-small); line-height: 1.65; }

.flow__art {
  margin-top: auto; padding-top: var(--space-4);
  display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.flow__chip {
  font-size: 0.6875rem; font-weight: var(--weight-semibold); line-height: 1;
  padding: 0.4rem 0.65rem; border-radius: var(--radius-pill);
  background: var(--color-surface-alt); border: 1px solid var(--color-border); color: var(--color-text-secondary);
}
.flow__chip--on { background: var(--color-brand-soft); border-color: transparent; color: var(--color-brand-deep); }

/* The month, at a glance: 30 days with the 9 the app schedules picked out.
   Seven columns is deliberate — a week per row makes the marked days line up
   as Monday and Thursday stripes, the same signature as the hero illustration.
   Capped in width so the artifact stays a detail, not the whole card. */
.flow__art--cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; max-width: 210px; }
.flow__dot { aspect-ratio: 1; border-radius: 3px; background: var(--color-surface-alt); border: 1px solid var(--color-border); }
.flow__dot--on { background: var(--gradient-brand); border-color: transparent; }

.flow__summary {
  max-width: 46ch; margin: var(--space-6) auto 0; text-align: center;
  font-size: var(--text-body-lg); color: var(--color-text-secondary);
}
.flow__cta { text-align: center; margin-top: var(--space-4); }

/* ── Before / after split ────────────────────────────────── */
.before-after { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 768px) { .before-after { grid-template-columns: 1fr 1fr; } }
.ba-card { border-radius: var(--radius-lg); padding: var(--space-5); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); }
.ba-card--before { background: var(--color-surface-alt); }
.ba-card--after { background: var(--color-surface); border-color: color-mix(in oklab, var(--color-brand) 30%, transparent); box-shadow: var(--shadow-md); }
.ba-tag { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-micro); font-weight: var(--weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-pill); margin-bottom: var(--space-3); }
.ba-tag--before { background: var(--color-neutral-200); color: var(--color-neutral-600); }
.ba-tag--after { background: var(--color-brand-soft); color: var(--color-brand-deep); }
.ba-card p { margin: 0; color: var(--color-text-secondary); }

/* ── Audience columns ────────────────────────────────────── */
.audience-cols { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 900px) { .audience-cols { grid-template-columns: 1.2fr 1fr; } }
.who-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.who-list li { display: grid; grid-template-columns: 28px 1fr; gap: var(--space-2); align-items: start; }
.who-list li p { margin: 0; color: var(--color-text-secondary); font-size: var(--text-small); }
.who-list li strong { color: var(--color-text-primary); }
.who-list .tick { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--color-brand-soft); color: var(--color-brand-dark); margin-top: 2px; }
.notfor-card { background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-xs); }
.notfor-card h3 { margin-top: 0; }
.notfor-card ul { margin: 0; padding-left: 1.1rem; color: var(--color-text-secondary); display: grid; gap: 0.6rem; }

/* ── Proof card (verifiable claims — replaces the old empty testimonial slot) ── */
.proof-card {
  max-width: 52rem; margin-inline: auto; background: var(--color-surface-alt);
  border: 1px solid var(--color-border); border-left: 4px solid var(--color-brand);
  border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-xs);
}
.proof-card h3 { margin-top: 0; }
.proof-list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.85rem; }
.proof-list li { padding-left: 1.6rem; position: relative; color: var(--color-text-secondary); }
.proof-list li::before { content: "✓"; position: absolute; left: 0; color: var(--color-brand-dark); font-weight: 700; }
.proof-list strong { color: var(--color-text-primary); }
.proof-list code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em;
  background: var(--color-brand-soft); color: var(--color-brand-dark); padding: 0.1em 0.35em; border-radius: 5px;
}

/* Real customer testimonials live in the #testimonial-slot <template> until the
   seller has them. The <template> element never renders, so nothing ships empty. */
.testimonial { max-width: 640px; margin-inline: auto; }

/* ── Pricing (inverted band) ─────────────────────────────── */
.pricing { position: relative; overflow: hidden; background: var(--color-surface-inverse); color: #f3ede6; }
.pricing::before {
  content: ""; position: absolute; inset: 0; opacity: 0.6; pointer-events: none;
  background: var(--gradient-mesh-2), radial-gradient(color-mix(in oklab, #fff 8%, transparent) 1px, transparent 1px);
  background-size: cover, 26px 26px;
}
.pricing .container { position: relative; z-index: 1; }
.pricing .section-head--center h2 { color: #fff; }
.pricing .section-head--center p { color: #e5ddd3; }
.pricing .eyebrow { color: var(--color-brand-light); }
.pricing-card-featured {
  position: relative; max-width: 560px; margin-inline: auto; padding: 2px;
  background: var(--gradient-brand); border-radius: calc(var(--radius-2xl) + 2px); box-shadow: var(--shadow-xl);
}
.pricing-ribbon {
  position: absolute; top: -13px; right: 28px; z-index: 2;
  padding: 0.3rem 0.8rem; background: var(--color-accent); color: #fff;
  font-size: var(--text-micro); font-weight: var(--weight-semibold); letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: var(--radius-pill); box-shadow: var(--shadow-md);
}
.pricing-card-inner { background: var(--color-surface); color: var(--color-text-primary); border-radius: var(--radius-2xl); padding: clamp(1.75rem, 4vw, 2.75rem); }
.price-row { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: var(--space-2); }
.price-amount { font-family: var(--font-display); font-size: clamp(3rem, 7vw, 4rem); font-weight: var(--weight-bold); letter-spacing: -0.03em; line-height: 1; }
.price-note { color: var(--color-text-muted); font-weight: var(--weight-medium); }
.price-sub { color: var(--color-text-secondary); margin-bottom: var(--space-4); }
.price-list { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: 0.75rem; }
.price-list li { display: grid; grid-template-columns: 22px 1fr; gap: 0.6rem; align-items: start; color: var(--color-text-secondary); }
.price-list .tick { color: var(--color-brand-dark); margin-top: 2px; }
.price-guarantee { margin-top: var(--space-4); font-size: var(--text-small); color: var(--color-text-muted); }
.oto-ladder { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); max-width: 900px; margin: var(--space-6) auto 0; }
.oto-chip { background: color-mix(in oklab, #fff 6%, transparent); border: 1px solid color-mix(in oklab, #fff 14%, transparent); border-radius: var(--radius-lg); padding: var(--space-4); }
.oto-chip h3 { margin: 0 0 0.25em; color: #fff; font-size: 1rem; }
.oto-chip .oto-price { color: var(--color-brand-light); font-weight: var(--weight-bold); }
.oto-chip p { margin: 0.4rem 0 0; color: #d9d0c6; font-size: var(--text-small); }

/* ── Guarantee band ──────────────────────────────────────── */
.guarantee { position: relative; overflow: hidden; }
.guarantee .container { position: relative; z-index: 1; }
.guarantee::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--gradient-mesh-2); opacity: 0.9;
}

/* Guarantee panel — reads as a warranty card rather than three cramped boxes.
   Lead column carries the mark and the promise; the enumerated column carries
   the terms, with each one on its own rule. */
.guarantee-panel {
  display: grid; gap: var(--space-5);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl); box-shadow: var(--shadow-md);
  padding: clamp(1.75rem, 4vw, 3rem);
}
@media (min-width: 900px) {
  .guarantee-panel {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(2.5rem, 5vw, 4rem);
    /* The list column runs longer than the lead; centring the lead keeps the
       panel from looking bottom-heavy on the left. */
    align-items: center;
  }
}
.guarantee-panel__lead h2 { margin: 0 0 var(--space-3); }
.guarantee-note { margin: 0; color: var(--color-text-secondary); font-size: var(--text-small); }
.guarantee .shield-badge {
  display: grid; place-items: center; width: 64px; height: 64px;
  margin-bottom: var(--space-3); border-radius: 18px;
  background: var(--gradient-accent); color: #fff; box-shadow: var(--shadow-md);
}
.guarantee .shield-badge svg { width: 32px; height: 32px; }

.guarantee-list { list-style: none; margin: 0; padding: 0; display: grid; }
.guarantee-list li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3);
  align-items: start; padding: var(--space-4) 0; border-top: 1px solid var(--color-border);
}
.guarantee-list li:first-child { border-top: 0; padding-top: 0; }
.guarantee-list li:last-child { padding-bottom: 0; }
.guarantee-list__n {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--color-brand-soft); color: var(--color-brand-deep);
  font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 0.95rem; line-height: 1;
}
.guarantee-list h3 { margin: 0.25rem 0 0.35rem; font-size: 1.05rem; }
.guarantee-list p { margin: 0; color: var(--color-text-secondary); font-size: var(--text-small); line-height: 1.65; }

/* ── FAQ ─────────────────────────────────────────────────── */
.accordion { max-width: 760px; margin-inline: auto; display: grid; gap: var(--space-3); }
.accordion .qa { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-xs); overflow: hidden; }
.accordion h3 { margin: 0; }
.accordion button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: 1.05rem 1.25rem; background: transparent; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-size: 1.05rem; font-weight: var(--weight-semibold); color: var(--color-text-primary);
}
.accordion button .chev { flex: none; transition: transform var(--duration-med) var(--ease-out-quart); color: var(--color-brand-dark); }
.accordion button[aria-expanded="true"] .chev { transform: rotate(180deg); }
.accordion .qa-body { padding: 0 1.25rem 1.25rem; color: var(--color-text-secondary); }
.accordion .qa-body p { margin: 0; }

/* ── Final CTA ───────────────────────────────────────────── */
.final-cta { position: relative; overflow: hidden; background: var(--color-surface-inverse); color: #f3ede6; text-align: center; }
.final-cta::before { content: ""; position: absolute; inset: 0; opacity: 0.7; pointer-events: none; background: var(--gradient-mesh-1); }
.final-cta .container-narrow { position: relative; z-index: 1; }
.final-cta h2 { color: #fff; }
.final-cta p { color: #e5ddd3; }
.final-cta .btn-primary { margin-top: var(--space-3); }

/* ── Footer ──────────────────────────────────────────────── */
.site-footer { background: var(--color-neutral-950); color: #b8ad9f; padding-block: var(--space-6); font-size: var(--text-small); }
.site-footer .container { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-between; }
.site-footer a { color: #d9cec0; }
.site-footer .brand { color: #fff; }
.site-footer .footer-legal { color: #8c8274; max-width: 60ch; }

/* ── Sticky CTA ──────────────────────────────────────────── */
.sticky-cta {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  padding: 12px 16px; background: color-mix(in oklab, var(--color-surface) 96%, transparent);
  backdrop-filter: blur(8px); border-top: 1px solid var(--color-border);
  transform: translateY(100%); transition: transform var(--duration-med) var(--ease-out-quart);
}
.sticky-cta[data-visible="true"] { transform: translateY(0); }
.sticky-cta .btn { width: 100%; }
/* On desktop the bar docks bottom-right instead of hiding, so the offer stays one
   click away through the ~8 screens between the hero and the pricing band. */
@media (min-width: 768px) {
  .sticky-cta {
    left: auto; right: 24px; bottom: 24px; width: auto; max-width: 22rem;
    border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    box-shadow: 0 18px 40px -18px rgba(40, 20, 8, 0.4);
    transform: translateY(calc(100% + 24px));
  }
  .sticky-cta[data-visible="true"] { transform: translateY(0); }
}

/* ── Accessibility utility ───────────────────────────────── */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Hero trust row ──────────────────────────────────────── */
.trust-row {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; list-style: none; padding: 0;
  margin: var(--space-3) 0 0; font-size: var(--text-small); color: var(--color-text-secondary);
}
.trust-row li { display: inline-flex; align-items: center; gap: 0.45rem; }
.trust-row .tick { display: inline-grid; place-items: center; color: var(--color-brand-dark); flex: none; }
@media (max-width: 640px) { .trust-row { flex-direction: column; gap: 0.5rem; } }

/* ── Real output specimens ───────────────────────────────── */
/* ── Input → output bar ──────────────────────────────────── */
.io-bar {
  display: grid; gap: var(--space-4); align-items: center;
  max-width: 60rem; margin: 0 auto var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
}
@media (min-width: 820px) { .io-bar { grid-template-columns: 1fr auto 1fr; } }
.io-bar__label {
  margin: 0 0 0.6rem; font-size: var(--text-micro); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-text-muted);
}
.io-bar__values { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; padding: 0; margin: 0; }
.io-bar__values li {
  font-size: var(--text-small); padding: 0.25rem 0.6rem; border-radius: var(--radius-pill);
  background: var(--color-surface-alt); border: 1px solid var(--color-border); color: var(--color-text-secondary);
}
.io-bar__arrow {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--color-brand-soft); color: var(--color-brand-dark); justify-self: center;
}
@media (max-width: 819px) { .io-bar__arrow { transform: rotate(90deg); } }
.io-bar__out { margin: 0; font-size: var(--text-small); color: var(--color-text-secondary); }
.io-bar__out strong { color: var(--color-text-primary); }

/* ── Specimen cards ──────────────────────────────────────── */
.output-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 900px) { .output-grid { grid-template-columns: repeat(3, 1fr); } }
.post-specimen {
  display: flex; flex-direction: column; height: 100%;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-xs);
}
/* Schedule sits on its own line so the chip row is always one row tall and
   every hook starts at the same height across the three cards. */
.post-specimen__when {
  margin: 0 0 0.55rem; font-size: var(--text-micro); font-weight: var(--weight-semibold);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted);
}
.post-specimen__meta { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.post-specimen h3 {
  font-size: 1.0625rem; line-height: 1.32; letter-spacing: -0.011em; margin: 0.75rem 0 0.55rem;
  text-wrap: balance;
}
.post-specimen > p {
  font-size: 0.9375rem; line-height: 1.62; color: var(--color-text-secondary); margin: 0;
}
.chip {
  font-size: 0.6875rem; font-weight: var(--weight-semibold); line-height: 1;
  padding: 0.34rem 0.6rem; border-radius: var(--radius-pill);
  background: var(--color-surface-alt); color: var(--color-text-muted); white-space: nowrap;
}
.chip--angle { color: var(--color-accent-dark); background: var(--color-accent-soft); }
.chip--cta { background: var(--color-brand-soft); color: var(--color-brand-deep); }
/* margin-top:auto pins the spec footer to the card bottom, so the three
   footers line up no matter how long the body copy runs. */
.post-specimen__foot {
  margin: var(--space-4) 0 0; padding-top: var(--space-3);
  border-top: 1px solid var(--color-border); font-size: 0.8125rem;
}
@media (min-width: 900px) { .post-specimen__foot { margin-top: auto; } }
.post-specimen__foot dt {
  font-size: var(--text-micro); font-weight: var(--weight-semibold); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-text-muted);
}
.post-specimen__foot dd { margin: 0.2rem 0 0.75rem; color: var(--color-text-secondary); line-height: 1.5; }
.post-specimen__foot dd:last-child { margin-bottom: 0; }

/* ── What one run returns ────────────────────────────────── */
.spec-strip {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4) var(--space-3);
  list-style: none; padding: var(--space-5) 0 0; margin: var(--space-5) 0 0;
  border-top: 1px solid var(--color-border); text-align: center;
}
/* Five items in a two-column grid leaves the last one orphaned — let it span. */
@media (max-width: 719px) { .spec-strip li:last-child { grid-column: 1 / -1; } }
@media (min-width: 720px) { .spec-strip { grid-template-columns: repeat(5, 1fr); } }
.spec-strip li { display: flex; flex-direction: column; gap: 0.25rem; }
.spec-strip__n {
  font-family: var(--font-display); font-size: 1.75rem; font-weight: var(--weight-bold);
  line-height: 1; letter-spacing: -0.03em; color: var(--color-brand-dark);
}
.spec-strip__k { font-size: var(--text-small); color: var(--color-text-secondary); line-height: 1.35; }


/* ── Value stack (inside the inverted pricing band) ──────── */
.value-stack {
  width: 100%; border-collapse: collapse; margin: 0 auto var(--space-5);
  max-width: 46rem; color: #f3ede6; font-size: 0.95rem; position: relative; z-index: 1;
}
.value-stack th, .value-stack td {
  text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.value-stack thead th {
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #d9d0c6;
}
.value-stack td:last-child { color: #d9d0c6; }
@media (max-width: 640px) {
  .value-stack, .value-stack tbody, .value-stack tr, .value-stack td { display: block; width: 100%; }
  .value-stack thead { display: none; }
  .value-stack tr { padding: 0.5rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
  .value-stack td { border: 0; padding: 0.15rem 0; }
  .value-stack td:last-child::before { content: "replaces: "; color: #8d8879; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .sticky-cta { transition: none; }
}