/* ============================================================
   ReelNotes marketing site — foundational styles (v1)
   Consumes static/tokens.css. Page-specific styles are added per page as each
   is built (build-doc §5 sequence). Design language (build-doc §11): surfaces
   #0A1628, subtractive 2% cards, 0.5px borders, NO gradients/shadows-as-decor/
   emoji, outline icons only, Inter Bold headings, Regular body, two-blue system.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* Safety net: no single element may cause horizontal page scroll on narrow
     screens (the compare table scrolls inside its own container, unaffected). */
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text-body);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--type-body-size);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings — Inter BOLD (site rule, brand-foundation §12 / build-doc §0.1).
   This is the deliberate difference from the app's 400/500 ceiling. */
h1, h2, h3, h4 {
  color: var(--text);
  font-weight: 700;
  letter-spacing: var(--type-heading-track);
  line-height: var(--type-heading-line);
  margin: 0 0 var(--space-5);
}
h1 {
  font-size: var(--type-display-size);
  line-height: var(--type-display-line);
  letter-spacing: var(--type-display-track);
}

p { margin: 0 0 var(--space-5); }

a { color: var(--accent-blue); text-decoration: none; }
a:hover { color: var(--brand-blue-hover); }

/* Section label — caps kicker (the one caps exception, build-doc §11). Default is
   a brighter neutral (the muted grey read as "lost"); section eyebrows carry their
   own colour via --eb, drawn from the search palette so the page's section headers
   pop and tie into the same colour language as the search dims / lifecycle / map. */
.eyebrow {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--eb, var(--text-preview));
  margin: 0 0 var(--space-4);
}

/* ── Layout ──────────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--layout-inset-desktop);
}
@media (max-width: 640px) {
  .container { padding-inline: var(--layout-inset-mobile); }
}

.section { padding-block: var(--space-10); }
@media (max-width: 640px) { .section { padding-block: var(--space-9); } }

/* Global vertical rhythm. Every content section (a direct child of <main> on every
   page) gets consistent top+bottom padding, so a section's eyebrow/title never butts
   against the previous section's content. The first section gets extra top space
   under the nav. This is the single source of section spacing — individual sections
   should NOT set their own padding-block. */
main > section { padding-block: clamp(40px, 5vw, 56px); }
main > section:first-child { padding-top: clamp(52px, 6vw, 80px); }
/* Mobile: the clamp pins to its 40px floor on phones, so adjacent sections sit
   ~80px apart and the (long) page sprawls. Tighten the inter-section rhythm. */
@media (max-width: 640px) {
  main > section { padding-block: 32px; }
  main > section:first-child { padding-top: 38px; }
}

/* ── Top nav ─────────────────────────────────────────────────────────────── */
/* ── Founding-beta announcement bar ───────────────────────────────────────── */
.announce {
  position: relative;
  background: var(--search-tag);
  border-bottom: 0.5px solid rgba(10, 22, 40, 0.18);
}
.announce__inner {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding-block: 9px; padding-right: 28px; text-align: center;
}
.announce__text { font-size: 0.8125rem; color: #0a1628; }
.announce__text strong { color: #0a1628; font-weight: 700; }
.announce__link { color: #0a1628; font-weight: 700; white-space: nowrap; text-decoration: underline; text-underline-offset: 2px; }
.announce__link:hover { color: #0a1628; opacity: 0.7; }
.announce__dismiss {
  position: absolute; top: 50%; right: clamp(10px, 3vw, 22px); transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; color: #0a1628;
  font-size: 1.25rem; line-height: 1; padding: 4px 6px; opacity: 0.6;
  transition: opacity var(--motion-hover) ease;
}
.announce__dismiss:hover { opacity: 1; }

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  height: 64px;
  border-bottom: 0.5px solid var(--border);
}
.site-nav__brand { display: inline-flex; align-items: center; }
.site-nav__logo { height: 22px; width: auto; display: block; }
.site-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  margin-left: auto;
}
.site-nav__links a { color: var(--text-preview); font-size: 0.9375rem; }
.site-nav__links a:hover { color: var(--text); }
/* ── Mobile nav (hamburger) — native <details>, no JS ─────────────────────── */
.site-nav__menu { display: none; margin-left: auto; position: relative; }
.site-nav__toggle {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 10px;
  box-shadow: inset 0 0 0 0.5px var(--border);
}
.site-nav__toggle::-webkit-details-marker { display: none; }
.site-nav__toggle:hover { background: var(--btn-hover); }
/* Three bars: the middle is the element, top/bottom are pseudo-elements. */
.hamburger, .hamburger::before, .hamburger::after {
  content: ""; display: block; width: 20px; height: 2px; border-radius: 2px;
  background: var(--text); transition: transform var(--motion-action), background var(--motion-hover), top var(--motion-action);
}
.hamburger { position: relative; }
.hamburger::before { position: absolute; left: 0; top: -6px; }
.hamburger::after  { position: absolute; left: 0; top: 6px; }
/* Open → morph to X. */
.site-nav__menu[open] .hamburger { background: transparent; }
.site-nav__menu[open] .hamburger::before { top: 0; transform: rotate(45deg); }
.site-nav__menu[open] .hamburger::after  { top: 0; transform: rotate(-45deg); }
/* Drawer panel under the toggle. */
.site-nav__drawer {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 210px; z-index: 60;
  display: flex; flex-direction: column; gap: 2px;
  /* Opaque (it floats over content, unlike in-page cards which can be translucent). */
  background: var(--surface-chrome); border-radius: var(--radius-card);
  box-shadow: inset 0 0 0 0.5px var(--border), 0 14px 36px rgba(0,0,0,0.5);
  padding: var(--space-4);
}
/* Link rows only — :not(.btn) so the Get started button keeps its own pill + padding. */
.site-nav__drawer a:not(.btn) { color: var(--text-preview); font-size: 0.9375rem; padding: 10px 12px; border-radius: 8px; }
.site-nav__drawer a:not(.btn):hover { color: var(--text); background: var(--btn-hover); }
.site-nav__drawer .btn { margin-top: var(--space-3); justify-content: center; text-align: center; }

@media (max-width: 720px) {
  .site-nav__links { display: none; }
  .site-nav__menu { display: block; }
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: 11px 18px;
  border-radius: var(--radius-pill);
  font-size: 0.9375rem;
  font-weight: 600;
  border: 0.5px solid transparent;
  cursor: pointer;
  transition: background var(--motion-hover) ease, color var(--motion-hover) ease,
              border-color var(--motion-hover) ease;
}
.btn--primary { background: var(--accent-blue); color: #fff; }
.btn--primary:hover { background: var(--brand-blue-hover); color: #fff; }
/* Nav "Get started": white label at rest (beats the muted .site-nav__links a
   colour) and the button brightens on hover instead of darkening. */
.site-nav .btn--primary { color: #fff; padding-block: 5px; }
.site-nav .btn--primary:hover { background: var(--accent-blue); filter: brightness(1.12); color: #fff; }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--border-2); }
.btn--ghost:hover { background: var(--control-bg); color: var(--text); }
/* Blog CTA — takes the post's own accent (set via --cta), since reading a post is
   navigational, not a product-conversion lever (those stay brand blue). Dark label
   for contrast on the light accent fills. */
.btn--accent { background: var(--cta, var(--brand-blue)); color: #0a1628; }
.btn--accent:hover { filter: brightness(1.08); color: #0a1628; }
/* Masked glyph inside a button — tints to the button's text colour (incl. hover). */
.btn-glyph {
  width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: var(--g) center / contain no-repeat;
  mask: var(--g) center / contain no-repeat;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-foot {
  border-top: 0.5px solid var(--border);
  padding-block: var(--space-8);
  color: var(--text-meta);
  font-size: 0.875rem;
}
/* Icons (social + email) on the left; Privacy · Terms · © grouped on the right. */
.site-foot__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5) var(--space-6); }
.site-foot a, .site-foot__copy { color: var(--text-preview); font-weight: 400; }
.site-foot a:hover { color: var(--text); }
.site-foot__legal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); }
/* Lower line: a single right-aligned line (copyright + statutory disclosure) sitting
   under the Privacy/Terms links. */
.site-foot__fine { display: flex; justify-content: flex-end; margin-top: var(--space-4); }
.site-foot__company { margin: 0; font-size: var(--type-meta-size); color: var(--text-meta); line-height: 1.5; text-align: right; }
/* Social icons: uniform 18px, evenly spaced on the same 16px rhythm as the rest of
   the footer bar, vertically centred with the text links. */
.site-foot__social { display: flex; align-items: center; gap: var(--space-6); }
.site-foot__social a { display: inline-flex; align-items: center; }
/* Fixed 18px box, centred — but each brand SVG fills its own viewBox by a different
   amount (Instagram/Email edge-to-edge, TikTok ~80% inset), so --s per icon
   compensates to a matched optical size. Single mask-size value = width; height
   auto-preserves aspect. */
.social-icon {
  display: block; width: 18px; height: 18px; flex: none; background: var(--text-preview);
  -webkit-mask: var(--g) center / var(--s, contain) no-repeat;
  mask: var(--g) center / var(--s, contain) no-repeat;
  transition: background var(--motion-hover) ease;
}
.site-foot__social a:hover .social-icon { background: var(--text); }
.site-foot__contact { display: inline-flex; align-items: center; gap: 7px; }
.foot-glyph {
  width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: var(--g) center / contain no-repeat;
  mask: var(--g) center / contain no-repeat;
}

/* ── Scaffold smoke-test (home placeholder) — removed when Home is built ───── */
.scaffold-hero { padding-block: var(--space-10); }
.scaffold-hero p { color: var(--text-preview); max-width: 46ch; }
.scaffold-note {
  margin-top: var(--space-8);
  font-size: var(--type-meta-size);
  letter-spacing: var(--type-meta-track);
  text-transform: uppercase;
  color: var(--text-meta);
}

/* ── 404 ─────────────────────────────────────────────────────────────────── */
.error-page { padding-block: var(--space-10); }
.error-page p { color: var(--text-preview); max-width: 46ch; }

/* ── Legal documents (privacy / terms / extension-privacy) ─────────────────── */
/* Reconciled VERBATIM with the app's live /ui/legal/* — same clauses, same dates.
   Readable measure, calm hierarchy; legal copy keeps its em dashes (it's a
   reconciled legal instrument, not marketing prose). */
.legal-doc {
  max-width: 740px;
  margin-inline: auto;
  padding-block: var(--space-9);
}
.legal-doc h1 { margin-bottom: var(--space-3); font-size: clamp(1.8rem, 3vw, 2.4rem); }
.legal-meta {
  color: var(--text-meta);
  font-size: 0.875rem;
  margin-bottom: var(--space-7);
}
.legal-intro { color: var(--text-preview); }
.legal-doc h2 {
  font-size: 1.1875rem;
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
}
.legal-doc p, .legal-doc li { color: var(--text-body); }
.legal-doc ul { padding-left: 1.25rem; margin: 0 0 var(--space-5); }
.legal-doc li { margin-bottom: var(--space-3); }
.legal-doc table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-4) 0 var(--space-6);
  font-size: 0.9375rem;
}
.legal-doc th, .legal-doc td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 0.5px solid var(--border);
  vertical-align: top;
}
.legal-doc th { color: var(--text); font-weight: 600; }
.legal-doc td { color: var(--text-body); }

/* ============================================================
   HOME (build-doc §6). Product-led visuals are CSS representations — no stock
   imagery (against the calm, product-true aesthetic); real screenshots swap in
   per §12. Design language: 0.5px borders, surface-2 fills, no decorative
   gradients/shadows.
   ============================================================ */

/* ── 6.1 Hero ─────────────────────────────────────────────────────────────── */
/* Full-bleed hero band: photo backdrop + navy scrim (heavier on the left, under
   the copy) so the dark theme and text contrast hold over the image. */
.hero-band { position: relative; overflow: hidden; isolation: isolate; }
.hero-band__bg {
  position: absolute; inset: 0; z-index: 0;
  /* Defaults preserve the original framing; a post can override per-image via
     --bg-size / --bg-pos (zoom past full-width to create horizontal pan room,
     then anchor the subject). */
  background-size: var(--bg-size, cover);
  background-position: var(--bg-pos, center 35%);
}
.hero-band--flip .hero-band__bg { transform: scaleX(-1); } /* subject to the right, calm end behind copy */
/* Ultra-wide displays: stop the backdrop stretching past its native pixels (which
   upscales + degrades it and forces an extreme vertical crop). Cap it at ~native
   width, centre it, and fade the left/right edges into the page colour (--bg) so it
   dissolves into the viewport instead of filling it. Below the cap: unchanged. */
@media (min-width: 1601px) {
  .hero-band__bg {
    width: 1600px; max-width: 1600px; margin-inline: auto;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  }
}
/* Scrim is a separate layer (not on the flipped image) so it stays heavier under
   the left-hand copy. Site-wide default: keep the LEFT heavy (0.88 @0, 0.6 @40) for
   copy legibility, then drop toward the RIGHT edge (-> 0.08) so more of the photo
   reads and every left-copy hero gets a visual lift. (The homepage set this pattern;
   it is now the default for all inner heroes.) Centred heroes (--soft, --founding)
   and the phone-centre pricing hero tune it separately below. */
.hero-band::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to right, rgba(10,22,40,0.88) 0%, rgba(10,22,40,0.6) 40%, rgba(10,22,40,0.08) 100%),
    linear-gradient(to bottom, rgba(10,22,40,0.35) 0%, rgba(10,22,40,0) 32%, rgba(10,22,40,0.62) 88%, var(--bg) 100%);
}
/* Centre-weighted scrim for a photo behind the centred pricing hero: darker behind
   the text, lifting ~15% toward the edges so the image reads more (less faded). */
.hero-band--soft::after {
  background:
    radial-gradient(ellipse 78% 88% at 50% 48%, rgba(10,22,40,0.7) 0%, rgba(10,22,40,0.5) 55%, rgba(10,22,40,0.3) 100%),
    linear-gradient(to bottom, rgba(10,22,40,0) 62%, rgba(10,22,40,0.5) 92%, var(--bg) 100%);
}
/* Pricing hero (hands-holding-phone photo). Copy is left-aligned, so a left-weighted
   navy scrim keeps the text legible while the phone (centre-right) stays visible;
   grade the warm shot down a touch so it sits in the dark theme. */
.hero-band--pricing .hero-band__bg {
  /* pricing-bg.webp is only 1920x1080, so the previous 132% zoom upscaled it past
     native (soft). 115% keeps it at/under native width on the 1600 cap (1600 x 1.15
     = 1840 <= 1920) so it stays crisp, while still leaving a little pan room to keep
     the phone subject right of the copy. */
  background-size: 115%;
  background-position: 10% 46%;
  filter: brightness(0.66) saturate(0.92) contrast(1.02);
}
.hero-band--pricing::after {
  /* Keep the LEFT heavy (0.9) under the copy, but lift the RIGHT (0.28 -> 0.10) in
     step with the site-wide scrim so the hands-holding-phone shot reads through. */
  background:
    linear-gradient(to right, rgba(10,22,40,0.9) 0%, rgba(10,22,40,0.6) 42%, rgba(10,22,40,0.1) 100%),
    linear-gradient(to bottom, rgba(10,22,40,0.3) 0%, rgba(10,22,40,0) 34%, rgba(10,22,40,0.55) 86%, var(--bg) 100%);
}
/* Mid-page band (e.g. the home close): blend into the page bg at BOTH top and bottom. */
.hero-band--soft.hero-band--bleed::after {
  background:
    radial-gradient(ellipse 78% 88% at 50% 48%, rgba(10,22,40,0.7) 0%, rgba(10,22,40,0.5) 55%, rgba(10,22,40,0.3) 100%),
    linear-gradient(to bottom, var(--bg) 0%, rgba(10,22,40,0) 24%, rgba(10,22,40,0) 76%, var(--bg) 100%);
}

/* Founding hero (Envato concert image). Graded down via CSS (no Adobe access):
   darken + desaturate the warm haze, favour the darker lower crowd behind the text,
   and a strong navy scrim so the content-heavy centred hero stays legible. */
.hero-band--founding .hero-band__bg {
  background-position: center 42%;
  filter: brightness(0.53) saturate(0.85) contrast(1.03);
}
.hero-band--founding::after {
  background:
    linear-gradient(rgba(10, 22, 40, 0.52), rgba(10, 22, 40, 0.67)),
    linear-gradient(to bottom, var(--bg) 0%, rgba(10, 22, 40, 0) 14%, rgba(10, 22, 40, 0) 86%, var(--bg) 100%);
}

/* Back-to-top chevron — fixed, fades in after scrolling. */
.to-top {
  position: fixed; right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px); z-index: 60;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer; border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-blue); color: #fff; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--motion-hover) ease, transform var(--motion-hover) ease, background var(--motion-hover) ease;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--brand-blue-hover); }
.hero-band > .container { position: relative; z-index: 2; }
/* Match the how-it-works hero text to the home hero: left-aligned, sat down/centered
   in a tall band. Pricing stays centered, just vertically centered in its band. */
.hero-band .page-intro {
  max-width: var(--content-max-width); /* full container width → left edge matches the home hero */
  min-height: clamp(360px, 46vh, 460px);
  /* Block flow (not flex) so internal margins collapse exactly like the home / pricing
     heroes — keeps the eyebrow-downward rhythm identical across every page. */
}
/* How-it-works hero hugs its (shorter) content — the walkthrough + connect sit right
   below, so the tall band left too much dead space. Scoped via --flip + .page-intro,
   which only the how-it-works hero has (home uses .hero, blog index has no --flip). */
.hero-band--flip .page-intro { min-height: clamp(260px, 32vh, 340px); }
.hero-band .page-intro > * { max-width: 36rem; } /* keep copy in a left column like home */
/* How-it-works hero beat — a quiet 3-word summary in place of a CTA button (the page's
   own walkthrough + offer CTA carry conversion). Not colourful: one text weight. */
.how-beat {
  font-size: clamp(1.2rem, 2.2vw, 1.55rem); font-weight: 700; color: var(--brand-blue);
  letter-spacing: -0.01em; word-spacing: 0.5em; margin: var(--space-6) 0 0;
}
.how-beat .pdot { color: var(--text); }
.hero-band .pricing-hero {
  min-height: clamp(320px, 42vh, 440px);
  display: flex; flex-direction: column; justify-content: center;
}
.hero-band .close {
  min-height: clamp(340px, 44vh, 460px);
  display: flex; flex-direction: column; justify-content: center;
}
.hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-8);
  align-items: start;
  /* Hold a tall band so the photo backdrop has presence even with no foreground
     image; copy is TOP-anchored so the first line sits at a consistent height
     across pages and the block extends downward as content grows. */
  min-height: clamp(360px, 46vh, 460px);
  align-content: start;
}
.hero__sub { font-size: 1.125rem; color: var(--text-preview); max-width: 42ch; }
.hero__cta { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-7); }
.hero__note { margin-top: var(--space-5); font-size: 0.8125rem; color: var(--text-meta); }
.hero__visual { min-width: 0; }
/* iPhone mockup (transparent, shadow baked in) — bound by height so the phone has
   presence without blowing out the band, centred in its column. No extra shadow. */
.hero__shot {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: clamp(440px, 54vh, 580px);
  margin-inline: auto;
}
/* Real app screenshot framed as a phone screen (rounded corners + lift). */
.feature__shot {
  display: block; width: 100%; max-width: 290px; height: auto; margin-inline: auto;
  border-radius: 22px; box-shadow: inset 0 0 0 0.5px var(--border), 0 24px 48px rgba(0,0,0,0.45);
}
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: var(--space-7); }
  /* Hide the mockup once the hero would stack — on narrow/mobile it eats vertical
     room and pushes the copy down, disrupting the reading flow. Wide screens only. */
  .hero__visual { display: none; }
}

/* Channel schematic — vendored from the app's no-data onboarding ghost cards
   (edge-accent, rounded-right, play triangle + name + a faint skeleton bar).
   Sits under the Organise copy; purely illustrative (aria-hidden). */
.chan-ghost {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);
  margin-top: var(--space-6); max-width: 24rem;
}
.chan-ghost__card {
  position: relative; min-height: 58px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  padding: 8px 10px; background: var(--surface-2);
  border-left: 3px solid var(--cg, var(--brand-blue)); border-radius: 0 8px 8px 0;
  box-shadow: inset 0 0 0 0.5px var(--border);
}
.chan-ghost__head { display: flex; align-items: center; gap: 7px; min-width: 0; }
.chan-ghost__tri {
  flex: none; width: 0; height: 0; border-style: solid;
  border-width: 4px 0 4px 7px; border-color: transparent transparent transparent var(--cg, var(--brand-blue));
}
.chan-ghost__name { font-size: 0.75rem; font-weight: 600; color: var(--text-preview); }
.chan-ghost__bar { height: 5px; width: 42px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); }
@media (max-width: 560px) { .chan-ghost { max-width: none; } }

/* Library mock */
.mock--library {
  border: 0.5px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface-2);
  padding: var(--space-6);
}
.mock__label {
  font-size: var(--type-label-size); font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-meta); margin-bottom: var(--space-3);
}
.mock__row { display: flex; gap: var(--space-3); margin-bottom: var(--space-6); }
.mock__thumb {
  flex: 1; aspect-ratio: 3 / 4; border-radius: 6px; background: var(--surface);
  border: 0.5px solid var(--border);
}
.mock__thumb--lg { display: block; width: 132px; aspect-ratio: 9 / 16; border-radius: 10px; }
/* Reel glyph (real app icon, masked) for the mechanism "a reel you save" step. */
.reel-glyph {
  display: block; width: 84px; height: 92px; background: var(--text-preview);
  -webkit-mask: url('/static/icons/Reel-Outline.svg') center / contain no-repeat;
  mask: url('/static/icons/Reel-Outline.svg') center / contain no-repeat;
}
.mock__cal { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.mock__cell { aspect-ratio: 1 / 1; border-radius: 6px; }

/* ── 6.2 Problem ──────────────────────────────────────────────────────────── */
.problem { text-align: center; max-width: 760px; }
.problem__beat {
  font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; color: var(--text);
  letter-spacing: -0.02em; word-spacing: 0.5em; margin-bottom: var(--space-5);
}
/* The doom-loop in the three tier colours (Save/Understand/Act order); dots white. */
.problem__beat .pw1 { color: var(--tier-curator); }
.problem__beat .pw2 { color: var(--tier-analyst); }
.problem__beat .pw3 { color: var(--tier-navigator); }
.problem__beat .pdot { color: var(--text); }
.problem__body { font-size: 1.125rem; color: var(--text-preview); }

/* ── 6.3 Mechanism — a save becomes a Card ────────────────────────────────── */
.mechanism__intro { max-width: 640px; margin-bottom: var(--space-8); }
.mechanism__intro p { font-size: 1.0625rem; color: var(--text-preview); }
.mechanism__flow {
  display: grid; grid-template-columns: minmax(130px, 0.8fr) auto minmax(0, 1.5fr);
  gap: var(--space-7); align-items: center;
  /* ONE outer accent panel around the whole transform (phone + arrow + Card), so
     the Curator edge sits far left and is never adjacent to the Card's inner blue
     summary callout. The Card itself drops its own left stripe (below). */
  padding: var(--space-7); border-radius: 0 var(--radius-card) var(--radius-card) 0;
  box-shadow: inset 3px 0 0 0 var(--tier-accent), inset 0 0 0 0.5px var(--border);
}
.flow__step { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
/* Framed reel "thumb" so the left of the flow has presence (no floating glyph). */
.flow__thumb {
  width: 100%; max-width: 148px; aspect-ratio: 9 / 16; border-radius: 10px;
  background: var(--surface-2); box-shadow: inset 0 0 0 0.5px var(--border);
  display: flex; align-items: center; justify-content: center;
}
.flow__caption { font-size: var(--type-meta-size); color: var(--text-meta); text-transform: uppercase; letter-spacing: 0.08em; }
.flow__arrow { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.flow__arrow-label { font-size: 0.8125rem; color: var(--callout-accent); font-weight: 600; }
/* The app's real Arrow-Right glyph (masked, synthesis blue) — not a hairline. */
.flow__arrow-glyph {
  width: 30px; height: 22px; background: var(--callout-accent);
  -webkit-mask: var(--g) center / contain no-repeat;
  mask: var(--g) center / contain no-repeat;
}
@media (max-width: 760px) {
  /* Stacked = a tall panel; a full-height left accent reads as a long thin line, so
     move the Curator accent to a short TOP bar (like the plan cards) + round all corners. */
  .mechanism__flow {
    grid-template-columns: 1fr; gap: var(--space-6);
    /* Sharp top corners so the accent bar is a clean full-width stripe (rounded
       corners would clip its ends); rounded bottom, like the plan cards. */
    border-radius: 0 0 var(--radius-card) var(--radius-card);
    box-shadow: inset 0 3px 0 0 var(--tier-accent), inset 0 0 0 0.5px var(--border);
  }
  .flow__arrow-glyph { transform: rotate(90deg); }   /* points down when stacked */
}

/* Mechanism DEMO — authentic IG reel embed (natural size) left, the live Card
   matched to it right. Both titles sit on top. The Card renders the public share
   page as-is (app nav included for now; a chrome-less public render is an app-side
   todo). "AI synthesis" badge sits centered between the two blocks. */
.mechanism__demo {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 8vw, 120px);
  align-items: stretch; margin-top: var(--space-8);
}
.demo__side { margin: 0; display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.demo__frame {
  position: relative; width: 100%; max-width: 306px; margin-inline: auto;
  border-radius: 22px; overflow: hidden; background: #fff;
  box-shadow: inset 0 0 0 0.5px var(--border), 0 18px 40px rgba(0,0,0,0.42);
}
/* Self-hosted reel player (replaces the live IG embed): the <video> plays inside the
   measured aperture, the cutout chrome (PNG with a transparent video window) overlays
   it, and our own play control sits on top. Fixed size = no jump. The chrome carries
   width/height attrs so its box is reserved before it loads. */
.demo__frame--reel { position: relative; background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
/* Aperture: top 9.35%, height 64.54%, full width — measured from the cutouts. */
.demo__reel-video {
  position: absolute; left: 0; top: 9.35%; width: 100%; height: 64.54%;
  object-fit: cover; background: #000; z-index: 1; display: block;
}
.demo__reel-chrome {
  position: relative; display: block; width: 100%; height: auto; z-index: 2;
  pointer-events: none; /* clicks pass through to the video / play control */
  filter: drop-shadow(0 16px 34px rgba(0, 0, 0, 0.42));
}
/* Our branded play control (ReelNotes triangle), centred in the aperture. */
.demo__reel-play {
  position: absolute; left: 50%; top: 41.6%; transform: translate(-50%, -50%);
  z-index: 3; padding: 0; border: 0; background: none; color: #fff; cursor: pointer;
  display: grid; place-items: center;
  transition: transform var(--motion-hover) ease, opacity 200ms ease;
}
/* Bare ReelNotes triangle (no circle), with a soft shadow so it reads on any frame. */
.demo__reel-play svg { width: 64px; height: 64px; fill: #fff; filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.6)); }
.demo__reel-play:hover { transform: translate(-50%, -50%) scale(1.08); }
.demo__frame--reel.is-playing .demo__reel-play { opacity: 0; pointer-events: none; }
/* Dark frame bg for the Card so no white peeks at the rounded corners (the IG embed
   keeps the white default; the Card is dark). */
.demo__frame--card { flex: 1; background: var(--bg); } /* stretch to exactly match the reel frame */
.demo__frame .instagram-media { min-width: 0 !important; max-width: 100% !important; width: 100% !important; margin: 0 !important; }
/* Widen past the rounded frame so the iframe's (cross-origin, unstyleable) grey
   scrollbar is clipped off by the frame's overflow — the Card still scrolls by
   wheel/touch. No horizontal shift: the Card sits centred as it renders. */
/* The Card iframe loads the app's chrome-less embed (?embed=1), which hides its own
   scrollbar — so a clean 100% width sits centred with nothing to clip. */
.demo__card-iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--bg); }
/* Match the page eyebrows — thin, uppercase, letter-spaced, muted. */
.demo__title { text-align: center; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-preview); }
.demo__key { color: var(--cat, var(--brand-blue)); }
/* Before/after gallery — topic tabs (one pair shown at a time, not a carousel). */
.demo-gallery { margin-top: var(--space-8); }
.demo-gallery__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-bottom: var(--space-7); }
.demo-chip {
  padding: 9px 18px; border-radius: var(--radius-pill); cursor: pointer;
  background: var(--surface-chrome); color: var(--text-body); border: 0;
  box-shadow: inset 0 0 0 1px var(--border);
  font-size: 0.8125rem; font-weight: 600;
  transition: background var(--motion-hover) ease, color var(--motion-hover) ease, box-shadow var(--motion-hover) ease;
}
.demo-chip:hover:not(.is-active) { color: var(--text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chip, var(--brand-blue)) 55%, transparent); }
.demo-chip.is-active { background: var(--chip, var(--brand-blue)); color: #10131a; box-shadow: none; }
.mechanism__demo.demo-panel { margin-top: 0; }
.demo-panel:not(.is-active) { display: none; }
/* AI-synthesis label + open-live link share one opaque pill (no triangle). */
/* Bridge: arrow → AI Synthesis pill → arrow, centred on the frames (nudged down to
   clear the titles). Arrows point IN from the reel and OUT to the Card. */
.demo__bridge {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, calc(-50% + 16px)); z-index: 4;
  display: flex; align-items: center; gap: 8px;
}
/* Arrows + chip outline/text take the active panel's CATEGORY accent (--cat, set
   inline on the demo panel from its pillar colour), falling back to brand blue. The
   "Reel"/"Card" key words in the titles inherit the same --cat. */
.demo__arrow { display: inline-flex; color: var(--cat, var(--brand-blue)); }
.demo__arrow svg { width: 22px; height: 22px; display: block; }
.demo__synth {
  display: inline-flex; align-items: center;
  padding: 9px 18px; border-radius: var(--radius-pill); /* match the topic-chip height */
  background: var(--surface-chrome); color: var(--cat, var(--brand-blue));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cat, var(--brand-blue)) 50%, transparent); /* outline, not filled */
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap;
}
/* Stack early (960px) so the arrow+pill+arrow group never overlaps the frames in the
   cramped mid-width zone; arrows rotate to point DOWN when stacked. */
@media (max-width: 960px) {
  .mechanism__demo { display: flex; flex-direction: column; gap: var(--space-6); }
  .demo__side--reel { order: 1; }
  .demo__bridge { position: static; transform: none; margin: 0 auto; order: 2; flex-direction: column; gap: 6px; }
  .demo__arrow svg { transform: rotate(90deg); }
  .demo__side--card { order: 3; }
  .demo__frame--card { flex: none; height: 588px; }
}

/* Illustrative Card */
.card-mock {
  /* No left stripe here — the Curator accent lives on the outer panel now, so this
     card carries only a full hairline frame. The blue summary callout inside stays. */
  border: none; border-radius: var(--radius-card);
  box-shadow: inset 0 0 0 0.5px var(--border);
  background: var(--surface-2); padding: var(--space-6); width: 100%;
}
.card-mock__title { color: var(--text); font-weight: 600; font-size: 1.0625rem; line-height: 1.25; margin-bottom: var(--space-5); }
.card-mock__summary {
  border-left: 2px solid var(--callout-accent); background: var(--callout-bg);
  padding: var(--space-4) var(--space-5); border-radius: 0 8px 8px 0;
  font-size: 0.9375rem; color: var(--text-body); margin-bottom: var(--space-5);
}
.card-mock__summary-label {
  display: block; font-size: var(--type-label-size); font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--callout-accent); margin-bottom: var(--space-2);
}
.card-mock__points { margin: 0 0 var(--space-5); padding-left: 1.1rem; font-size: 0.9375rem; color: var(--text-body); }
.card-mock__points li { margin-bottom: var(--space-2); }
.card-mock__foot { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.card-mock__attr { font-size: var(--type-meta-size); color: var(--text-meta); margin-left: auto; }

/* Pillar pills (real pillar colours — §7 of brand-palette) */
.cat-pill {
  display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--radius-pill);
  font-size: 0.75rem; font-weight: 500; border: 0.5px solid transparent;
}
.cat-pill--psychology { color: var(--pillar-psychology);
  border-color: color-mix(in srgb, var(--pillar-psychology) 40%, transparent);
  background: color-mix(in srgb, var(--pillar-psychology) 14%, transparent); }
.cat-pill--marketing { color: var(--pillar-marketing);
  border-color: color-mix(in srgb, var(--pillar-marketing) 40%, transparent);
  background: color-mix(in srgb, var(--pillar-marketing) 14%, transparent); }

/* ── 6.4 / 6.5 / 6.6 Alternating feature rows ─────────────────────────────── */
.feature {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center;
}
/* Grid items default to min-width:auto, which lets a child force the track wider
   than the screen. Pin to 0 so both columns always shrink to fit the viewport. */
.feature__copy, .feature__visual { min-width: 0; }
.feature__copy p { overflow-wrap: break-word; }
/* Strip the trailing paragraph margin so it doesn't compound with the section's
   bottom padding (that was the oversized gap before the next section's visual). */
.feature__copy > :last-child { margin-bottom: 0; }
.feature--reverse .feature__copy { order: 2; }
.feature__copy p { font-size: 1.0625rem; color: var(--text-preview); max-width: 40ch; }
@media (max-width: 800px) {
  .feature { grid-template-columns: 1fr; gap: var(--space-6); }
  /* Mobile: ignore the desktop left/right alternation — every feature stacks the
     same way: Eyebrow + Title + Copy, then Graphics. */
  .feature--reverse .feature__copy { order: 0; }
  .feature__visual { order: 1; }
}

/* Search dimensions */
.search-dims { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.search-dim {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: 8px 14px; border-radius: var(--radius-pill);
  border: 0.5px solid color-mix(in srgb, var(--dim) 45%, transparent);
  color: var(--dim); background: color-mix(in srgb, var(--dim) 10%, transparent);
  font-size: 0.9375rem; font-weight: 500;
}
/* Real app glyph, tinted to the dimension colour via mask (the white-filled SVG
   becomes the alpha shape; background-color supplies the tint). */
.search-dim::before {
  content: ''; width: 16px; height: 16px; flex: none; background: var(--dim);
  -webkit-mask: var(--glyph) center / contain no-repeat;
  mask: var(--glyph) center / contain no-repeat;
}
/* Small variant — sits under the body copy beside the Search screenshot (~20% smaller). */
.search-dims--sm { margin-top: var(--space-5); gap: var(--space-2); }
.search-dims--sm .search-dim { padding: 5px 9px; font-size: 0.65rem; gap: 5px; }
.search-dims--sm .search-dim::before { width: 11px; height: 11px; }
/* Narrow: shrink the dimension pills so they aren't oversized and pack tighter. */
@media (max-width: 480px) {
  .search-dims { gap: var(--space-3); }
  .search-dim { padding: 6px 11px; font-size: 0.8125rem; gap: 6px; }
  .search-dim::before { width: 14px; height: 14px; }
}

/* Channel chips */
.channel-chips { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.channel-chip {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: 10px 16px; border-radius: 0 10px 10px 0;
  /* Mitre-free edge-accent (app canon): inset box-shadows never notch at the
     corner the way mixed-width borders do. 3px channel stripe + 0.5px frame. */
  border: none;
  box-shadow: inset 3px 0 0 0 var(--ch), inset 0 0 0 0.5px var(--border);
  background: var(--surface-2); color: var(--text); font-weight: 500; font-size: 0.9375rem;
}

/* Interest-map treemap */
/* Squarified-style interest treemap, matching the app: nested flex gives the varied
   tile sizes (flex-grow ~ "count"), GAPLESS flush tiles (the cushion separates them,
   as in the app), each tile carrying the gentle dual-radial cushion over its pillar
   colour (--c) with a white bottom-left label. */
.treemap {
  display: flex; gap: 0; height: 300px;
  background: var(--bg); border: 0.5px solid var(--border); border-radius: 12px; overflow: hidden;
}
.tm-col { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.tm-row { display: flex; gap: 0; min-height: 0; }
.tm-tile {
  min-width: 0; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 7px 9px; color: #fff; font-weight: 600; font-size: 0.7rem; line-height: 1.12;
  background:
    radial-gradient(135% 135% at 28% 22%, rgba(255,255,255,.18), rgba(255,255,255,0) 46%),
    radial-gradient(150% 150% at 76% 86%, rgba(0,0,0,.22), rgba(0,0,0,0) 54%),
    var(--c);
  transition: filter var(--motion-hover) ease, transform var(--motion-hover) ease;
}
/* Interactive lift on hover — brighten the tile so the map feels explorable. */
.tm-tile:hover { filter: brightness(1.16) saturate(1.05); }
/* Narrow: the nested tile PAIRS sit side-by-side, so on a thin screen each is too
   narrow for its label. Stack them vertically (full column width) instead, give the
   treemap more height, and step the label down. Labels then fit horizontally. */
@media (max-width: 640px) {
  .treemap { height: 360px; }
  .tm-row { flex-direction: column; }
  .tm-tile { font-size: 0.64rem; padding: 5px 7px; }
}
@media (max-width: 400px) {
  .treemap { height: 380px; }
  .tm-tile { font-size: 0.58rem; padding: 4px 6px; line-height: 1.1; }
}

/* ── 6.7 Trust ────────────────────────────────────────────────────────────── */
.trust { max-width: 880px; }
/* Full-width variant (homepage) — match the page's full-width alternating rhythm. */
.trust--full { max-width: var(--content-max-width); }
.trust__lead { font-size: 1rem; line-height: 1.6; color: var(--text-body); font-weight: 400; }
/* Detail variant (how-it-works) — heading + closing "quality floor" line. */
.trust__head { margin: 0 0 var(--space-4); }
.trust__floor {
  margin: var(--space-7) 0 0; font-size: 1rem; line-height: 1.6; color: var(--text-preview);
  border-top: 0.5px solid var(--border); padding-top: var(--space-6);
}
/* Teaser variant (homepage) — inline link through to the full explanation. */
.trust__more { color: var(--callout-accent); white-space: nowrap; }
.trust__more:hover { text-decoration: underline; text-underline-offset: 2px; }
.trust__flow {
  display: flex; align-items: stretch; gap: var(--space-4); margin-top: var(--space-8);
}
.trust__step {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2);
  border: none;
  /* Per-step palette accent (--t-accent, set inline) so the three boxes read as a
     varied set rather than three identical blue stripes. */
  box-shadow: inset 0 2px 0 0 var(--t-accent, var(--callout-accent)), inset 0 0 0 0.5px var(--border);
  border-radius: 0 0 10px 10px; background: var(--surface-2); padding: var(--space-5);
}
.trust__step strong { color: var(--text); font-size: 0.9375rem; }
/* Reserve two lines so the boxes match height whether a description wraps or not
   (stretch equalises the row on wide; this equalises the stack on narrow). */
.trust__step span { color: var(--text-meta); font-size: 0.875rem; line-height: 1.4; min-height: 2.8em; }
/* Each arrow carries the colour of the box BEFORE it (--a-accent, set inline). */
.trust__chev { display: flex; align-items: center; justify-content: center; color: var(--a-accent, var(--brand-blue)); font-size: 1.35rem; }
/* Stack on narrow: keep the arrows, rotate them to point down between the boxes. */
@media (max-width: 720px) {
  .trust__flow { flex-direction: column; }
  .trust__chev { transform: rotate(90deg); }
}

/* ── 6.8 Personas ─────────────────────────────────────────────────────────── */
.persona-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-6);
}
.persona {
  /* Each persona carries a distinct pillar hue (--p-accent, set inline) so the row
     reads as a colourful spread of interest domains. Hover lifts the fill. */
  border: none; border-radius: 0 10px 10px 0; background: var(--surface-2);
  box-shadow: inset 3px 0 0 0 var(--p-accent, var(--stripe-rest)), inset 0 0 0 0.5px var(--border);
  padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3);
  transition: background var(--motion-hover) ease;
}
.persona:hover { background: var(--surface); }
.persona strong { color: var(--text); font-size: 1rem; }
.persona span { color: var(--text-preview); font-size: 0.9375rem; line-height: 1.45; }
@media (max-width: 800px) { .persona-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .persona-grid { grid-template-columns: 1fr; } }

/* ── 6.9 See a real Card ──────────────────────────────────────────────────── */
.see-card { text-align: center; max-width: 640px; }
.see-card p { color: var(--text-preview); }

/* ── 6.10 Pricing teaser ──────────────────────────────────────────────────── */
.pricing-teaser__mission {
  text-align: center; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700;
  color: var(--text); letter-spacing: -0.02em; margin-bottom: var(--space-8);
}
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.tier-card {
  position: relative; display: flex; flex-direction: column; gap: var(--space-3);
  border: none;
  box-shadow: inset 0 3px 0 0 var(--tier), inset 0 0 0 0.5px var(--border);
  border-radius: 0 0 12px 12px; background: var(--surface-2); padding: var(--space-7);
  color: inherit; transition: background var(--motion-hover) ease, transform var(--motion-hover) ease;
}
.tier-card:hover { background: var(--surface); }
.tier-card--curator { --tier: var(--tier-curator); }
.tier-card--analyst { --tier: var(--tier-analyst); }
.tier-card--navigator { --tier: var(--tier-navigator); }
/* Tier glyph in a tinted circle — matches the pricing-page plan-card header. */
.tier-card__glyph {
  width: 32px; height: 32px; border-radius: 50%;
  background: color-mix(in srgb, var(--tier) 15%, transparent);
  display: inline-flex; align-items: center; justify-content: center;
}
.tier-card__glyph::before {
  content: ''; width: 17px; height: 17px; background: var(--tier);
  -webkit-mask: var(--glyph) center / contain no-repeat;
  mask: var(--glyph) center / contain no-repeat;
}
.tier-card__eyebrow {
  font-size: var(--type-label-size); font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-meta);
}
.tier-card__head { display: flex; align-items: center; gap: 10px; }
.tier-card__name { color: var(--tier); font-weight: 700; font-size: 1.25rem; }
.tier-card__price { color: var(--text); font-weight: 700; font-size: 2rem; letter-spacing: -0.02em; }
.tier-card__per { font-size: 0.9375rem; font-weight: 500; color: var(--text-meta); }
.tier-card__line { color: var(--text-preview); font-size: 0.9375rem; margin-top: var(--space-2); }
.tier-card__badge {
  position: absolute; top: -10px; left: var(--space-7);
  background: var(--tier); color: #0a0a12; font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--radius-pill);
}
/* Navigator "Best value": outline-only in the tier colour (mirrors the pricing
   page) so it stays secondary to Analyst's filled "Most popular". */
.tier-card__badge--quiet { background: var(--surface-chrome); color: var(--tier); border: 1px solid var(--tier); }
.pricing-teaser__link { text-align: center; margin-top: var(--space-7); }
@media (max-width: 720px) { .tier-grid { grid-template-columns: 1fr; gap: var(--space-7); } }

/* ── 6.11 Close ───────────────────────────────────────────────────────────── */
.close { text-align: center; max-width: 700px; margin-inline: auto; }
.close__beat {
  font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 700; color: var(--text);
  letter-spacing: -0.02em; margin-bottom: var(--space-6);
}
.close__vision { font-size: 1.125rem; color: var(--text-preview); margin-bottom: var(--space-7); }

/* Get ReelNotes — extension (desktop) + phone (QR). */
/* Constrain the whole section to 880px on the .container (exactly like .trust above),
   so the get-app block lines up with the "Straight from the reel" section's width. */
.get-app { text-align: center; max-width: 880px; }
.get-app__grid {
  display: flex; align-items: stretch; gap: var(--space-4);  /* match the trust flow gap */
  margin: var(--space-7) 0 0;
}
/* Brand-blue "+" connector between the two cards, mirroring the trust-flow arrows. */
.get-app__plus {
  display: flex; align-items: center; justify-content: center; flex: none;
  color: var(--brand-blue); font-size: 1.75rem; line-height: 1;
}
.get-app__card {
  display: flex; flex: 1; min-width: 0; flex-direction: column; align-items: center; gap: var(--space-8);
  padding: calc(var(--space-7) + 20px) var(--space-7) var(--space-7); border-radius: var(--radius-card);
  background: var(--surface-2); box-shadow: inset 0 0 0 0.5px var(--border);
}
/* Three stacked blocks per card (intro / platforms / CTA) separated by the card's
   flex gap, so both cards share the same purposeful vertical rhythm. The intro group
   keeps glyph, headline and copy tight; the extension card's button spans full width. */
.get-app__intro { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.get-app__card:not(.get-app__card--app) .btn { align-self: stretch; }
/* "Coming soon" block (Chrome & Edge) reads muted. */
.get-app__platform--soon .get-app__platform-name { color: var(--text-meta); }
.get-app__soon { margin: 0; font-size: 0.8125rem; line-height: 1.45; color: var(--text-meta); text-align: left; }
.get-app__card h3 { margin: 0; font-size: 1.0625rem; color: var(--text); }
.get-app__card p { margin: 0; color: var(--text-preview); font-size: 0.9375rem; line-height: 1.5; }
.get-app__glyph {
  width: 30px; height: 30px; background: var(--accent, var(--brand-blue));
  -webkit-mask: var(--g) center / contain no-repeat; mask: var(--g) center / contain no-repeat;
}
/* Cookie/puzzle glyph on the extension card reads a touch small — nudge it ~5% larger. */
.get-app__card:not(.get-app__card--app) .get-app__glyph { width: 31.5px; height: 31.5px; }
.get-app__note { font-size: var(--type-meta-size); color: var(--text-meta); }
.get-app__qr { background: #fff; padding: 8px; border-radius: 10px; line-height: 0; flex: none; }
.get-app__qr img { display: block; width: 92px; height: 92px; }
/* App card — QR + caption row, then the per-device step blocks. */
.get-app__scan { display: flex; align-items: center; gap: var(--space-5); }
.get-app__scan-note { font-size: var(--type-meta-size); color: var(--text-meta); text-align: left; line-height: 1.45; }
.get-app__platforms {
  width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--space-6);
  text-align: left;
}
.get-app__platform-name {
  display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--p, var(--brand-blue)); margin-bottom: var(--space-3);
}
.get-app__steps { margin: 0; padding-left: 1.15rem; display: flex; flex-direction: column; gap: 5px; }
.get-app__steps li { color: var(--text-preview); font-size: 0.8125rem; line-height: 1.45; }
.get-app__steps li::marker { color: var(--p, var(--brand-blue)); font-weight: 700; }
.get-app__steps strong { color: var(--text); font-weight: 600; }
@media (max-width: 640px) {
  .get-app__grid { flex-direction: column; }
  .get-app__platforms { grid-template-columns: 1fr; }
}

/* ============================================================
   /pricing — tier treatment mirrors the app (glyph in tinted circle, tier
   eyebrow, tagline verb+rest, tier edge-accent, tier-coloured action pill).
   ============================================================ */
.pricing-hero { text-align: center; max-width: 720px; margin-inline: auto; }
.pricing-hero p { color: var(--text-preview); font-size: 1.125rem; }

/* Founding-beta callout (pricing). Bright, opaque, brand-tinted so the launch
   offer reads as the headline above the standing tiers, not a footnote. */
/* Pill sits OUTSIDE the tinted box — a label above the offer, nav-button sized. */
.founding-callout-wrap { text-align: center; }
.founding-callout__pill {
  display: inline-block; margin-bottom: var(--space-4);
  padding: 11px 18px; border-radius: var(--radius-pill);
  font-size: 0.9375rem; font-weight: 600;
  background: var(--brand-blue); color: #fff;
}
.founding-callout {
  max-width: 680px; margin: 0 auto; text-align: center;
  background: color-mix(in srgb, var(--brand-blue) 16%, var(--surface-chrome));
  border-radius: var(--radius-card);
  padding: var(--space-6) var(--space-7);
}
.founding-callout__lead { font-size: 1.125rem; font-weight: 600; color: var(--text); margin-bottom: var(--space-3); }
.founding-callout p { font-size: 0.9375rem; color: var(--text-body); margin: 0; }
/* The callout reuses the /founding page's .countdown component (identical styling);
   trim its outer margin so it sits neatly inside the callout box. */
.founding-callout .countdown-wrap { margin: var(--space-5) 0 0; }

.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); align-items: start; }
@media (max-width: 800px) { .plan-grid { grid-template-columns: 1fr; gap: var(--space-8); } }

.plan {
  position: relative; display: flex; flex-direction: column; gap: var(--space-3);
  border: none; border-radius: 0 0 14px 14px;
  box-shadow: inset 0 3px 0 0 var(--tier), inset 0 0 0 0.5px var(--border);
  background: var(--surface-2); padding: var(--space-8) var(--space-7) var(--space-7);
}
.plan--popular { box-shadow: inset 0 3px 0 0 var(--tier), inset 0 0 0 1px color-mix(in srgb, var(--tier) 45%, var(--border)); }

.plan__badge {
  position: absolute; top: -11px; left: var(--space-7);
  background: var(--tier); color: #10131a; font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-pill);
}
/* Navigator "Best value": outline-only in the tier colour, so it reads as secondary
   to Analyst's filled "Most popular" rather than competing with it. */
.plan__badge--quiet { background: var(--surface-chrome); color: var(--tier); border: 1px solid var(--tier); }

/* Tier glyph in a tinted circle (app: 28px circle, tier @15%, glyph in tier). */
.plan__glyph {
  width: 32px; height: 32px; border-radius: 50%;
  background: color-mix(in srgb, var(--tier) 15%, transparent);
  display: inline-flex; align-items: center; justify-content: center;
}
.plan__glyph::before {
  content: ''; width: 17px; height: 17px; background: var(--tier);
  -webkit-mask: var(--glyph) center / contain no-repeat;
  mask: var(--glyph) center / contain no-repeat;
}
.plan__eyebrow {
  font-size: var(--type-label-size); font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-meta);
}
.plan__head { display: flex; align-items: center; gap: 10px; }
.plan__name { color: var(--tier); font-weight: 700; font-size: 1.25rem; }
.plan__price { color: var(--text); font-weight: 700; font-size: 2rem; letter-spacing: -0.02em; }
.plan__per { font-size: 0.9375rem; font-weight: 500; color: var(--text-meta); }
.plan__tagline { color: var(--text-body); font-size: 1rem; margin: 0; }
.plan__tagline strong { color: var(--text); }
.plan__value { color: var(--text-preview); font-size: 0.9375rem; margin: 0; }
.plan__cta {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: var(--space-3); padding: 11px 18px; border-radius: var(--radius-pill);
  background: var(--tier); color: #10131a; font-weight: 600; font-size: 0.9375rem;
  transition: filter var(--motion-hover) ease;
}
.plan__cta:hover { filter: brightness(1.08); color: #10131a; }
.plan--navigator .plan__cta, .plan--navigator .plan__cta:hover { color: #fff; }
.plan__caps {
  list-style: none; margin: var(--space-4) 0 0; padding: var(--space-5) 0 0;
  border-top: 0.5px solid var(--border); display: flex; flex-direction: column;
  gap: var(--space-3); font-size: 0.875rem; color: var(--text-body);
}

.trial-band {
  margin-top: var(--space-8); background: var(--surface-2);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  box-shadow: inset 3px 0 0 0 var(--tier-accent), inset 0 0 0 0.5px var(--border);
  padding: var(--space-6) var(--space-7); display: flex; flex-direction: column; gap: var(--space-2);
}
.trial-band strong { color: var(--text); font-size: 1.0625rem; }
.trial-band span { color: var(--text-preview); font-size: 0.9375rem; }

/* Comparison chart */
.compare h2 { margin-bottom: var(--space-6); }
.compare__hint { display: none; }
.compare__scroll-wrap { position: relative; }
.compare__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare table { width: 100%; border-collapse: separate; border-spacing: 6px 0; min-width: 640px; }

/* Narrow screens: freeze the feature-label column so it never scrolls away, fade
   the right edge + show a swipe hint so the paid tiers are discoverable. */
@media (max-width: 720px) {
  .compare__hint { display: block; font-size: 0.8125rem; color: var(--text-meta); margin: calc(var(--space-6) * -1 + var(--space-2)) 0 var(--space-4); }
  /* Cancel the table's leading 6px border-spacing so the frozen column starts
     flush at the container edge — otherwise sticky doesn't engage until you've
     scrolled past that 6px, which reads as the column "drifting then settling".
     (Inter-tier spacing is preserved; only the left-edge gap is removed.) */
  /* Fixed layout so the label column actually holds its width (auto layout ignores
     max-width on cells and widens labels to single lines, hiding the tiers). With the
     label column pinned narrow, the feature labels fold to two lines and the tier
     columns get real horizontal room to scroll into view. */
  .compare table { margin-left: -6px; table-layout: fixed; min-width: 520px; }
  .compare td { width: auto; }
  .compare th[scope="row"], .compare thead th:first-child {
    position: sticky; left: 0; z-index: 2; background: var(--bg);
    box-shadow: 8px 0 10px -6px rgba(0,0,0,0.55);
  }
  /* Narrow the frozen label column so a full tier column fits beside it in the
     viewport (labels wrap to 2-3 lines rather than holding a wide single line). */
  .compare th[scope="row"] {
    width: 132px; white-space: normal; overflow-wrap: break-word;
    font-size: 0.8125rem; line-height: 1.3; padding-right: 10px;
  }
  .compare__scroll-wrap::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 44px;
    background: linear-gradient(to right, transparent, var(--bg));
    pointer-events: none; z-index: 3;
  }
}
.compare thead th { padding: 0 10px 16px; vertical-align: bottom; text-align: center; }
.compare__col-eyebrow { display: block; font-size: var(--type-label-size); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-meta); }
.compare__col-name { display: block; font-weight: 700; font-size: 1.0625rem; }
.compare__col-name--curator { color: var(--tier-curator); }
.compare__col-name--analyst { color: var(--tier-analyst); }
.compare__col-name--navigator { color: var(--tier-navigator); }
/* Tier glyph above each Compare column header — mirrors the plan-card glyph so
   the tier identity is consistent. Reuses the column's --col-tint; --glyph set
   inline per tier. */
.compare__col-glyph {
  width: 28px; height: 28px; border-radius: 50%;
  background: color-mix(in srgb, var(--col-tint) 15%, transparent);
  display: flex; align-items: center; justify-content: center;
  margin: var(--space-2) auto var(--space-2);
}
.compare__col-glyph::before {
  content: ''; width: 15px; height: 15px; background: var(--col-tint);
  -webkit-mask: var(--glyph) center / contain no-repeat;
  mask: var(--glyph) center / contain no-repeat;
}
.compare__col-sub { display: block; font-size: 0.8125rem; color: var(--text-meta); font-weight: 400; }
.compare th[scope="row"] { text-align: left; font-weight: 400; color: var(--text-body); font-size: 0.9375rem; padding: 12px 14px 12px 0; border-bottom: 0.5px solid var(--border); }
.compare td { text-align: center; padding: 12px 10px; border-bottom: 0.5px solid var(--border); color: var(--text-body); font-size: 0.9375rem; width: 16%; }
.compare td.yes { color: var(--accent-green); font-weight: 600; }
.compare td.no { color: var(--text-disabled); }
.compare td.soft { color: var(--text-meta); font-size: 0.8125rem; }
/* Per-tier column panels: a very light tier tint behind each plan's column so the
   chart echoes the price cards above (Analyst a touch stronger = 'most popular'),
   a 2px tier top-cap mirroring the cards' top-accent, rounded top + bottom so each
   column reads as a soft panel. The label column (1st) stays neutral. */
.compare thead th:nth-child(2), .compare td:nth-child(2) { --col-tint: var(--tier-curator); }
.compare thead th:nth-child(3), .compare td:nth-child(3) { --col-tint: var(--tier-analyst); --col-alpha: 9%; }
.compare thead th:nth-child(4), .compare td:nth-child(4) { --col-tint: var(--tier-navigator); }
.compare thead th:nth-child(n+2), .compare td:nth-child(n+2) {
  background: color-mix(in srgb, var(--col-tint) var(--col-alpha, 5%), transparent);
}
/* Sharp (no radius) tier columns, separated by the table's column gap (border-spacing
   above), each capped with a 2px tier top-accent. */
.compare thead th:nth-child(n+2) {
  padding-top: 14px;
  box-shadow: inset 0 2px 0 0 var(--col-tint);
}
.compare tbody tr:last-child td, .compare tbody tr:last-child th { border-bottom: 0; }
/* Round the bottom of each tier column (flat capped top + rounded foot, echoing the
   price cards above). */
.compare tbody tr:last-child td:nth-child(n+2) { border-radius: 0 0 10px 10px; }
.compare sup { font-size: 0.625rem; }
.compare__notes { margin-top: var(--space-5); font-size: 0.8125rem; color: var(--text-meta); }

/* Persona "fits" badge (pricing personas) */
.persona__fits { margin-top: auto; padding-top: var(--space-2); font-size: var(--type-meta-size); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-meta); font-weight: 500; }

.pricing-fine { text-align: center; font-size: 0.8125rem; color: var(--text-meta); max-width: 640px; margin-inline: auto; padding-block: var(--space-7); }
/* Billing-terms line directly under the plan cards (recurring + cancel terms,
   where the eye already is). Slightly more prominent than .pricing-fine. */
.plan-terms { text-align: center; font-size: 0.875rem; color: var(--text-meta); max-width: 680px; margin: var(--space-6) auto 0; line-height: 1.55; }
.plan-terms strong { color: var(--text); }

/* ============================================================
   /how-it-works + /about
   ============================================================ */
.page-intro { max-width: 760px; }
.page-intro .hero__sub { font-size: 1.125rem; color: var(--text-preview); }
.page-intro__cta { margin-top: var(--space-6); }

/* Quick Start walkthrough overlay (vendored guide in an iframe). */
/* "Connect once" — walkthrough embed left, copy right. Balances the asymmetry and
   drops the edge accent (which pulled the eye off-centre). Curator presence now
   lives in the eyebrow + the "on desktop." / "anywhere." phrase highlights. */
.connect {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-8); align-items: center; max-width: 980px;
}
/* The 30-second walkthrough housed in a phone-style frame, matching the homepage
   demo embeds (9:16 portrait stage, rounded, dark, lifted). */
.connect__media {
  width: 100%; max-width: 300px; margin-inline: auto;
  aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden;
  background: var(--bg);
  box-shadow: inset 0 0 0 0.5px var(--border), 0 18px 40px rgba(0,0,0,0.42);
}
.connect__media-frame { display: block; width: 100%; height: 100%; border: 0; background: var(--bg); }
.connect__body h2 { margin-bottom: var(--space-4); }
.connect__body p { color: var(--text-preview); margin: 0; font-size: 1.0625rem; }
/* Curator-tinted phrase inside a heading (first-run "on desktop." emphasis). */
.accent-curator { color: var(--tier-accent); }
@media (max-width: 760px) {
  .connect { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* Card lifecycle steps */
.lifecycle-section { max-width: 880px; } /* match the trust section width */
.lifecycle {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6);
}
@media (max-width: 900px) { .lifecycle { grid-template-columns: repeat(2, 1fr); gap: var(--space-7); } }
@media (max-width: 520px) { .lifecycle { grid-template-columns: 1fr; } }
.lifecycle__step { display: flex; flex-direction: column; gap: var(--space-3); }
.lifecycle__num {
  /* Per-step colour from the search palette (--n-accent, set inline) so the four
     circles read as a varied set, not four identical purple discs. */
  width: 34px; height: 34px; border-radius: 50%;
  background: color-mix(in srgb, var(--n-accent, var(--tier-accent)) 15%, transparent);
  color: var(--n-accent, var(--tier-accent)); font-weight: 700; font-size: 0.95rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.lifecycle__step h3 { margin: 0; font-size: 1.0625rem; }
.lifecycle__step p { margin: 0; color: var(--text-preview); font-size: 0.9375rem; line-height: 1.5; }

/* ── Founding Beta page ───────────────────────────────────────────────────── */
.founding-hero { text-align: center; max-width: 760px; margin-inline: auto; }
.founding-hero__sub { font-size: 1.125rem; color: var(--text-preview); max-width: 56ch; margin-inline: auto; }
.founding-hero .hero__cta { justify-content: center; }
/* Left-centric variant (pricing header) — match the home / how-it-works heroes. */
.founding-hero--left { text-align: left; max-width: var(--content-max-width); }
.founding-hero--left .founding-hero__sub { margin-inline: 0; max-width: 46ch; }
.founding-hero--left .hero__cta,
.founding-hero--left .countdown { justify-content: flex-start; }
.founding-hero--left .countdown__caption,
.founding-hero--left .countdown__live { text-align: left; }

/* Top gap matches the hero rhythm; extra room below so the CTAs read as a separate
   beat (same on founding + pricing). */
.countdown-wrap { margin: var(--space-7) 0 var(--space-8); }
.countdown { display: flex; justify-content: center; gap: var(--space-4); }
.countdown__unit {
  min-width: 78px; padding: var(--space-4) var(--space-3);
  background: var(--surface-2); border-radius: var(--radius-card);
  box-shadow: inset 0 0 0 0.5px var(--border);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.countdown__num { font-size: clamp(1.9rem, 7vw, 2.6rem); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1; }
.countdown__label { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-meta); }
.countdown__caption { text-align: center; color: var(--text-meta); font-size: 0.875rem; margin: var(--space-4) 0 0; }
.countdown__live { display: none; text-align: center; color: var(--accent-green); font-weight: 600; margin: var(--space-4) 0 0; }
.countdown-wrap.is-live .countdown,
.countdown-wrap.is-live .countdown__caption { display: none; }
.countdown-wrap.is-live .countdown__live { display: block; }
@media (max-width: 480px) {
  .countdown { gap: var(--space-3); }
  .countdown__unit { min-width: 0; flex: 1; padding: var(--space-4) var(--space-2); }
}

.founding-offer, .founding-how { text-align: center; }
.founding-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); margin-top: var(--space-6); text-align: left; }
@media (max-width: 560px) { .founding-grid { grid-template-columns: 1fr; } }

.founding-steps { list-style: none; padding: 0; margin: var(--space-6) auto 0; max-width: 620px; display: flex; flex-direction: column; gap: var(--space-4); text-align: left; }
.founding-step { display: flex; align-items: flex-start; gap: var(--space-4); }
.founding-step__num {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  background: color-mix(in srgb, var(--n-accent, var(--tier-accent)) 15%, transparent);
  color: var(--n-accent, var(--tier-accent)); font-weight: 700; font-size: 0.95rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.founding-step strong { color: var(--text); display: block; margin-bottom: 2px; }
.founding-step div { color: var(--text-preview); font-size: 0.9375rem; line-height: 1.5; }

/* About prose */
.prose-hero { max-width: 760px; }
.prose-lead { font-size: 1.25rem; color: var(--text-body); }
.prose { max-width: 720px; }
.prose p { color: var(--text-preview); font-size: 1.0625rem; }
.prose h2 { margin-top: var(--space-8); margin-bottom: var(--space-4); font-size: 1.3rem; }

/* ============================================================
   Blog
   ============================================================ */
.post-list { display: grid; gap: var(--space-5); max-width: 880px; margin-inline: auto; }
.post-card {
  display: flex; align-items: stretch; overflow: hidden; position: relative;
  border: none; border-radius: 0 12px 12px 0; background: var(--surface-2);
  /* Per-card accent edge (cycled in the template), always visible. */
  box-shadow: inset 3px 0 0 0 var(--stripe, var(--tier-accent));
  color: inherit; transition: background var(--motion-hover) ease;
}
/* Hairline border drawn over the thumbnail — a child (the angled thumb) paints on top
   of an inset box-shadow, so the border has to be a layer above it or it's lost on the
   top/right edges the thumb covers. */
.post-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 0.5px var(--border);
  pointer-events: none; z-index: 1;
}
.post-card:hover { background: var(--surface); }
/* Text column (padded); the thumbnail bleeds to the card edges beside it. */
.post-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-7); }
/* Right-hand image, blended into the card navy with a slight diagonal so it never
   reads as a hard rectangle. The card's overflow:hidden rounds its right corners. */
.post-card__thumb {
  flex: 0 0 42%; align-self: stretch; position: relative;
  background-size: cover; background-position: center;
  /* Hard diagonal cut: narrow at the top, widening toward the bottom-left, meeting
     the card navy on a crisp angled line (the clipped area reveals the card bg). */
  clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%);
}
/* Fallback when a post has no image: an accent-tinted gradient, same diagonal cut. */
.post-card__thumb--gen { background: linear-gradient(125deg, color-mix(in srgb, var(--stripe, var(--brand-blue)) 24%, var(--bg)), var(--bg)); }
@media (max-width: 620px) {
  .post-card__thumb { display: none; }
}
.post-card__pillar {
  font-size: var(--type-label-size); font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-meta);
}
.post-card__title { color: var(--text); font-weight: 700; font-size: 1.25rem; line-height: 1.25; }
.post-card:hover .post-card__title { color: var(--text); }
.post-card__excerpt { color: var(--text-preview); font-size: 0.9375rem; line-height: 1.5; }
.post-card__meta { font-size: var(--type-meta-size); color: var(--text-meta); text-transform: uppercase; letter-spacing: 0.06em; }
/* Read-more affordance in the card's accent colour; arrow nudges on hover. */
.post-card__more { margin-top: var(--space-2); font-size: 0.8125rem; font-weight: 600; color: var(--stripe, var(--brand-blue)); }
.post-card__arrow { display: inline-block; transition: transform var(--motion-hover) ease; }
.post-card:hover .post-card__arrow { transform: translateX(4px); }

/* Post article */
/* Blog post hero — the post's thumbnail as a full-bleed backdrop behind the title;
   shorter than the marketing heroes since the title is the focus. */
.post-hero .page-intro { min-height: clamp(240px, 34vh, 360px); }
/* Group the action icons tightly under the meta as part of the hero copy. */
.post-hero .post__meta { margin-bottom: var(--space-5); }
.post-hero .post-actions { margin-bottom: 0; }
.post { max-width: 720px; padding-top: var(--space-8); padding-bottom: var(--space-9); } /* breathing room below the hero, and after the end CTA */
/* Related posts at the end of an article — accent-edge cards matching the blog index. */
.post-related { max-width: 720px; padding-bottom: var(--space-9); }
.post-related__head { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-preview); margin: 0 0 var(--space-6); }
.post-related__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
.post-related__link { display: block; padding: var(--space-6) var(--space-7); border-radius: 0 12px 12px 0; background: var(--surface-2); box-shadow: inset 3px 0 0 0 var(--rel, var(--brand-blue)), inset 0 0 0 0.5px var(--border); text-decoration: none; transition: background var(--motion-hover, 0.15s) ease; }
.post-related__link:hover { background: var(--surface); }
.post-related__pillar { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rel, var(--brand-blue)); margin-bottom: var(--space-2); }
.post-related__title { display: block; font-size: 1.0625rem; font-weight: 600; color: var(--text); line-height: 1.35; }
.post-related__go { display: inline-block; margin-top: var(--space-3); font-size: 0.875rem; color: var(--rel, var(--brand-blue)); }
.post-hero__print-img { display: none; } /* shown only in print (PDF) — see @media print */
.post .eyebrow { color: var(--post-accent, var(--brand-blue)); }
.post__meta { color: var(--text-meta); font-size: 0.875rem; margin: calc(-1 * var(--space-3)) 0 var(--space-7); }
.post__lead {
  font-size: 1.25rem; line-height: 1.5; color: var(--text-body);
}
.post__body p { color: var(--text-preview); font-size: 1.0625rem; }
.post__body a:not(.btn) { color: var(--post-accent, var(--brand-blue)); text-decoration: underline; text-underline-offset: 2px; }
.post__body h2 {
  position: relative; padding-left: var(--space-5);
  margin-top: var(--space-8); margin-bottom: var(--space-4); font-size: 1.3rem;
}
.post__body h2::before {
  content: ''; position: absolute; left: 0; top: 0.2em; bottom: 0.2em; width: 3px;
  background: var(--post-accent, var(--brand-blue));
}
.post__body ul { padding-left: 1.25rem; margin: 0 0 var(--space-5); }
.post__body li { color: var(--text-preview); font-size: 1.0625rem; margin-bottom: var(--space-3); }
.post__body li::marker { color: var(--post-accent, var(--brand-blue)); }
.post__body strong { color: var(--text-body); }
.post__cta-lead { color: var(--text-body); font-size: 1.0625rem; margin-top: var(--space-8); border-top: 1px solid var(--border); padding-top: var(--space-7); }
/* Reading-progress bar — post pages only (shown + coloured via JS). */
.read-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: var(--brand-blue); transform: scaleX(0); transform-origin: 0 50%; z-index: 100; display: none; }
/* Post action row — borrows the app's Card action-affordance feel. */
.post-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0 0 var(--space-7); }
.post-action {
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  width: 38px; height: 38px; padding: 0; border-radius: 50%;
  background: var(--surface-2); color: var(--text-preview); border: 0;
  box-shadow: inset 0 0 0 0.5px var(--border);
  transition: background var(--motion-hover) ease, color var(--motion-hover) ease, box-shadow var(--motion-hover) ease;
}
.post-action:hover { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--post-accent, var(--brand-blue)) 50%, transparent); }
/* Transient confirmation after copying the link (icon-only, so it flashes the accent). */
.post-action.is-copied { color: var(--post-accent, var(--brand-blue)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--post-accent, var(--brand-blue)) 60%, transparent); }
.post-action__glyph { width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: var(--g) center / contain no-repeat; mask: var(--g) center / contain no-repeat; }
/* ── Print / Save-as-PDF ────────────────────────────────────────────────────
   The "Save as PDF" action calls window.print(). We art-direct it: a light
   paper body (readable and ink-light even if a printer strips backgrounds, while
   the brand accent tokens stay vivid), the dark hero image as a full-bleed
   banner, controlled pagination, and zero page margin so Chrome drops its own
   URL/date header. (Safari users: untick "Print headers and footers".) */
@media print {
  @page { margin: 0; }
  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  html, body { background: #fff !important; }
  body {
    --bg: #ffffff; --surface: #f5f7fa; --surface-2: #f5f7fa;
    --text: #0a1628; --text-body: #1c2735; --text-preview: #3c4a5e; --text-meta: #5c6a7d;
    --border: #dde3ec;
    color: var(--text) !important;
  }
  /* Strip interactive chrome. */
  .announce, .site-nav, .site-foot, .post-actions, .read-progress, .to-top { display: none !important; }
  /* Hero stays a dark image banner with light text; a simple dark left scrim so no
     text ever lands on a white blend. Full-bleed because @page margin is 0. */
  /* Hero: the pre-baked banner JPEG (image + scrim + overlaid title, rendered headlessly)
     as one in-flow <img>. A flat image exports reliably in every PDF backend, Firefox
     included; the live page-intro text is hidden because it's baked into the banner. */
  .post-hero { display: block; break-inside: avoid; }
  .post-hero .hero-band__bg, .post-hero::after, .post-hero .page-intro { display: none !important; }
  .post-hero__print-img { display: block !important; width: 100%; height: auto; margin: 0 0 8mm; }
  /* Article body: full width with print gutters. */
  .post { max-width: 100% !important; padding: 12mm 16mm 18mm !important; }
  /* Pagination: keep headings with their content; don't split blocks across pages. */
  h1, h2, h3 { break-after: avoid; }
  h2, h3, p, li, ul, ol, figure, blockquote,
  .post__summary, .post-synopsis, .post__lead, .post__cta-lead { break-inside: avoid; }
  p, li { orphans: 3; widows: 3; }
}
/* FAQ: one band — the network backdrop sits behind the title and continues under the
   top of the accordion before blending into the page (no tall empty hero). */
.faq-hero .hero-band__bg { background-size: 100% auto; background-repeat: no-repeat; background-position: top center; }
.faq-hero::after {
  background: linear-gradient(to bottom,
    rgba(10,22,40,0.42) 0%, rgba(10,22,40,0.58) 200px,
    rgba(10,22,40,0.84) 440px, var(--bg) 600px);
}
.faq-hero__intro { min-height: 0 !important; padding-block: 0 var(--space-7) !important; }
/* FAQ accordion (/faq) — native <details>, no JS, accessible and print-safe.
   Centred at 880px, matching the trust / get-app content convention. */
.faq { max-width: 880px; margin-inline: auto; padding-bottom: var(--space-9); }
.faq__item {
  margin-bottom: var(--space-5); /* gap between questions, matching the blog list */
  background: var(--surface-2); border-radius: 0 12px 12px 0; padding-inline: var(--space-7);
  box-shadow: inset 3px 0 0 0 var(--fa, var(--brand-blue)), inset 0 0 0 0.5px var(--border);
  transition: background 0.15s ease;
}
.faq__item:last-of-type { margin-bottom: 0; }
.faq__item[open] { background: color-mix(in srgb, var(--fa, var(--brand-blue)) 9%, var(--surface-2)); }
.faq__q {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  padding: var(--space-6) 0; font-size: 1.0625rem; font-weight: 600; color: var(--text);
  transition: color 0.15s ease;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+"; flex: none; font-size: 1.5rem; font-weight: 400; line-height: 1;
  color: var(--fa, var(--brand-blue)); transition: color 0.15s ease;
}
.faq__item[open] .faq__q { color: var(--fa, var(--brand-blue)); }
.faq__item[open] .faq__q::after { content: "\2212"; }
.faq__q:hover { color: var(--fa, var(--brand-blue)); }
.faq__a { padding: 0 0 var(--space-6); }
.faq__a p { margin: 0; max-width: 64ch; color: var(--text-preview); line-height: 1.6; }
.faq__foot { margin: var(--space-8) 0 0; color: var(--text-meta); }
.faq__foot a { color: var(--brand-blue); }
/* Card-style synopsis at the top of a post — mirrors a ReelNotes Card. */
.post-synopsis {
  margin: 0 0 var(--space-8); padding: var(--space-6) var(--space-7);
  /* Rounded on the right only; the left is a flush, square accent edge. */
  border-radius: 0 var(--radius-card) var(--radius-card) 0; background: var(--surface-2);
  border-left: 3px solid var(--post-accent, var(--brand-blue));
  box-shadow: inset 0 0 0 0.5px var(--border);
}
.post-synopsis__label {
  display: inline-block; font-size: var(--type-label-size); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--post-accent, var(--brand-blue));
  margin-bottom: var(--space-3);
}
.post-synopsis__summary { color: var(--text-body); font-size: 1.0625rem; line-height: 1.5; margin: 0 0 var(--space-4); }
.post-synopsis__points { list-style: none; padding: 0; margin: 0 0 var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.post-synopsis__points li { position: relative; padding-left: var(--space-5); color: var(--text-preview); font-size: 0.9375rem; line-height: 1.45; }
.post-synopsis__points li::before {
  content: ''; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px;
  border-radius: 50%; background: var(--post-accent, var(--brand-blue));
}
.post-synopsis__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.post-synopsis__tag {
  font-size: 0.75rem; font-weight: 600; padding: 3px 10px; border-radius: var(--radius-pill);
  color: var(--post-accent, var(--brand-blue)); background: color-mix(in srgb, var(--post-accent, var(--brand-blue)) 12%, transparent);
}

/* ============================================================
   Vendored onboarding schematics (harvested from the app's no-data state).
   Pure-CSS representations of the populated product. Curator edge-accent
   (first-run colour), mitre-free box-shadow.
   ============================================================ */
.sch-hero-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.sch-hero {
  display: flex; flex-direction: column; gap: 8px; padding: 10px;
  background: var(--surface-2); border-radius: 0 12px 12px 0;
  box-shadow: inset 3px 0 0 0 var(--tier-accent), inset 0 0 0 0.5px var(--border);
}
.sch-hero__thumb {
  position: relative; height: 92px; border-radius: 8px; background: var(--surface);
  display: flex; align-items: center; justify-content: center;
}
.sch-hero__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sch-play {
  width: 26px; height: 26px; background: rgba(255,255,255,0.92);
  -webkit-mask: url('/static/brand/reelnotes-play.svg') center / contain no-repeat;
  mask: url('/static/brand/reelnotes-play.svg') center / contain no-repeat;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}
.sch-row-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 560px) { .sch-row-list { grid-template-columns: 1fr; } }
.sch-row {
  display: flex; align-items: flex-start; gap: 10px; padding: 8px 12px;
  min-height: 75px; box-sizing: border-box; background: var(--surface-2);
  border-radius: 0 10px 10px 0;
  box-shadow: inset 3px 0 0 0 var(--tier-accent), inset 0 0 0 0.5px var(--border);
}
.sch-thumb { flex-shrink: 0; width: 44px; height: 59px; border-radius: 4px; background: var(--surface); }
.sch-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
.sch-title {
  font-size: 0.75rem; font-weight: 500; color: var(--text-preview); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sch-line { height: 6px; border-radius: 3px; background: var(--surface); width: 100%; }
.sch-line--short { width: 80%; }
.sch-tags { display: flex; gap: 5px; margin-top: 3px; }
.sch-tag { font-size: 9px; padding: 2px 7px; border-radius: 12px; border: 0.5px solid; line-height: 1.4; }
.sch-tag--c1 { color: #64B5F6; background: color-mix(in srgb, #64B5F6 12%, transparent); border-color: color-mix(in srgb, #64B5F6 38%, transparent); }
.sch-tag--c2 { color: #4ADE80; background: color-mix(in srgb, #4ADE80 12%, transparent); border-color: color-mix(in srgb, #4ADE80 38%, transparent); }
.sch-tag--c3 { color: #A78BFA; background: color-mix(in srgb, #A78BFA 12%, transparent); border-color: color-mix(in srgb, #A78BFA 38%, transparent); }

/* Channel mosaic schematic */
.sch-channels-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 560px) { .sch-channels-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sch-channel {
  position: relative; display: block; min-height: 75px; overflow: hidden;
  background: var(--surface-2); border-radius: 0 10px 10px 0;
  box-shadow: inset 3px 0 0 0 var(--ch), inset 0 0 0 0.5px var(--border);
}
.sch-channel__overlay { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.sch-channel__mark {
  width: 13px; height: 13px; flex-shrink: 0; background: var(--ch);
  -webkit-mask: url('/static/brand/reelnotes-play.svg') center / contain no-repeat;
  mask: url('/static/brand/reelnotes-play.svg') center / contain no-repeat;
}
.sch-channel__name { font-size: 0.875rem; font-weight: 600; color: var(--text-preview); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }