@font-face { font-family: "Inter Var"; src: url("assets/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Space Grotesk Var"; src: url("assets/fonts/space-grotesk-var.woff2") format("woff2");
  font-weight: 300 700; font-display: swap; }

:root {
  --paper: #faf8f6;
  --panel: #ffffff;
  --ink: #1b1f26;
  --muted: #5d6572;
  --hairline: #e7e2dc;
  --coral: #e23d3d;
  --coral-soft: rgba(226, 61, 61, .08);
  --violet: #6f5bea;
  --violet-soft: rgba(111, 91, 234, .07);
  --violet-border: rgba(111, 91, 234, .28);
  --good: #14855a;
  --good-soft: rgba(20, 133, 90, .09);
  --monitor: #12151a;
  --monitor-edge: #2c3342;
  --radius: 14px;
  --font-display: "Space Grotesk Var", sans-serif;
  --font-body: "Inter Var", -apple-system, sans-serif;
  color-scheme: light;
}
/* The website commits to light; the product screenshots supply the dark. */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; color: inherit; background: none; border: none; }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; }




/* ---------- Wordmark ---------- */
.wordmark { display: inline-flex; flex-direction: column; gap: 4px; }
.wordmark .wm {
  font-family: var(--font-display); font-weight: 700; font-size: 21px;
  letter-spacing: -0.5px; line-height: 1;
}
nav .wordmark .wm { font-size: 27px; letter-spacing: -0.8px; }
.wordmark .wm span { color: var(--coral); }

/* ---------- Nav ---------- */
nav { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; position: relative; }
/* flex-wrap is insurance, not layout, above the mobile breakpoint below: with
   five items (Log in added Aug 2026) a narrow phone can run out of room, and
   wrapping to a second row is always better than overflowing the page
   sideways. Invisible whenever the row fits, so desktop is unchanged. Row gap
   is tightened separately from the 26px column gap. */
.nav-links { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; font-size: 14.5px; color: var(--muted); font-weight: 500; }
.nav-links a:hover { color: var(--ink); }
/* The mobile-only menu trigger and the duplicate "Start free" CTA. Both are
   inert on desktop (display: none, no layout impact) so the existing
   left-wordmark, right-links row above the breakpoint is byte-for-byte the
   same as before this change. */
.nav-menu-btn { display: none; }
/* Tag+class, not just .nav-cta: .btn's own `display: inline-flex` (below)
   is equal specificity and later in the file, so it would otherwise win the
   cascade by source order alone and show this on desktop too. */
a.nav-cta { display: none; }
/* Same tag+class form, and for the same reason: .nav-demo IS a .btn (ghost),
   so a bare `.nav-demo` would lose to `.btn`'s display on source order and
   leak the mobile pill onto desktop. The desktop demo entry is .nav-demo-link
   inside the menu; this is its mobile-row twin (specs/demo_public_v1.md
   section 2.8.6). */
a.nav-demo { display: none; }

/* Mobile nav: a single row, [menu] wordmark [Start free], the menu opening a
   dropdown panel with the four secondary links. Below 700px the original row
   ("Pricing About Support Log in Start free", ~390px of links alone at
   320px) no longer fits and wraps to three ragged rows; 700px sits with
   room above where the full desktop row already fits comfortably (measured
   at 320-390px), so nothing above the breakpoint changes. */
@media (max-width: 700px) {
  .nav-menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: 0 0 auto; order: 1;
    border: 1px solid var(--hairline); border-radius: 10px;
    background: var(--panel); color: var(--ink);
  }
  .nav-menu-btn:hover { border-color: var(--muted); }
  .nav-menu-btn svg { width: 20px; height: 20px; display: block; }

  nav .wordmark { order: 2; flex: 1 1 auto; align-items: center; text-align: center; }
  /* 20px: the existing non-nav wordmark size (footer, etc.) rather than a new
     value. It clears both flanking elements (44px menu button, ~104px "Start
     free" pill) at 320px with room either side, where 27px collided with
     "Support" before this rebuild. */
  nav .wordmark .wm { font-size: 20px; letter-spacing: -0.5px; }

  /* The two right-hand actions, in reading order: look, then start. "Demo" is
     a ghost outline and "Start free" the only solid pill, so the primary
     cannot lose the eye to the secondary (specs/demo_public_v1.md 9.2 item
     20). .nav-cta moved from order 3 to 4 to make room; #navMenu also carries
     order: 4 but is `position: absolute` and therefore out of flow, so its
     order is inert and the two do not collide. If #navMenu is ever made
     static, the dropdown lands between these two and this must be renumbered. */
  a.nav-demo { display: inline-flex; order: 3; flex: 0 0 auto; min-height: 44px; }
  a.nav-cta { display: inline-flex; order: 4; flex: 0 0 auto; min-height: 44px; }
  /* `nav` itself has NO gap (the 26px belongs to .nav-links, the dropdown), and
     the wordmark is `flex: 1 1 auto`, so it swallows every pixel of slack and
     the two pills end up flush against each other: measured 0px between them
     at 320, 360 AND 390. Harmless with one button, visibly wrong with two.
     Margin on the second pill rather than `column-gap` on nav, because a
     column-gap applies to all three gaps (~30px) and overflows 360px, which is
     the width the spec says to protect above all others. */
  a.nav-cta { margin-left: 8px; }
  /* Rung 1 of the spec's fallback ladder (AC 8.4b), applied to BOTH pills
     rather than the CTA alone: 16px recovered, which is what buys 360px its
     margin of safety once the 8px above is spent. Padding only. The labels,
     the font size and the wordmark are all untouched, per rung 3.
     `.btn` is in the selector for specificity, not decoration: `.btn.small`
     carries `padding: 9px 18px` at (0,2,0) and a bare `a.nav-demo` is (0,1,1),
     which LOSES on class count. Measured: without `.btn` here the pills stayed
     77.5px and 99.7px and this rule did nothing at all, silently. */
  a.nav-demo.btn, a.nav-cta.btn { padding: 9px 14px; }

  /* .nav-links becomes the dropdown panel: secondary links only. The
     duplicate "Start free" that rides along inside it for desktop is hidden
     here since .nav-cta already covers it in the always-visible row. */
  #navMenu {
    order: 4; flex-basis: 100%; flex-direction: column; align-items: stretch;
    flex-wrap: nowrap; gap: 2px;
    position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 40;
    background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius);
    padding: 8px; box-shadow: 0 16px 40px rgba(27, 31, 38, .16);
  }
  /* An author display rule (here, .nav-links' own display: flex) beats the UA
     stylesheet's [hidden] { display: none }, so without this the dropdown
     would set the `hidden` attribute and change nothing visible (the same
     bug that briefly made the consent dialog undismissable). ID + attribute
     selector outranks the plain class rule, so this wins the cascade. */
  #navMenu[hidden] { display: none; }
  #navMenu a { min-height: 44px; padding: 11px 14px; border-radius: 8px; font-size: 15.5px; }
  #navMenu a:hover { background: var(--paper); color: var(--ink); }
  #navMenu .btn { display: none; }
  /* The desktop demo link is a plain <a>, not a .btn, so the rule above does
     NOT cover it and it would otherwise appear twice on mobile: once in the
     dropdown and once as the ghost pill. Asserted by counting rendered
     elements, never source occurrences, since the source holds two on
     purpose (AC 8.2b). */
  #navMenu .nav-demo-link { display: none; }
}

/* Rung 2 of the fallback ladder (AC 8.4b). Below 340px the row genuinely does
   not fit: measured, the four items need ~336px against a wordmark that cannot
   shrink past the min-content of the unbreakable word "ShortLens" (~94px). So
   the demo pill steps out of the row and back into the dropdown, at its top,
   and "Start free" keeps the row to itself exactly as it did before this
   feature. This IS a partial departure from the instruction to keep Demo beside
   Start free on mobile, so it is reported rather than absorbed: it applies only
   below 340px, and 360/390 (every mainstream current phone) keep the pill.
   Must sit AFTER the 700px block: same specificity, so source order decides. */
@media (max-width: 339px) {
  a.nav-demo { display: none; }
  /* order: -1 puts it at the TOP of the panel. The panel is flex-column with no
     other order values, so this is the only item that needs one. */
  #navMenu .nav-demo-link { display: block; order: -1; }
}

.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  background: var(--coral); color: #fff; font-weight: 600; font-size: 15px;
  padding: 12px 24px; border-radius: 11px; transition: filter .15s, transform .1s;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--hairline); }
.btn.ghost:hover { border-color: var(--muted); filter: none; }
.btn.small { padding: 9px 18px; font-size: 14px; }

/* ---------- Hero: full-bleed first fold with lens sweep ---------- */
.fold { min-height: 92vh; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.fold > .wrap { position: relative; z-index: 5; width: 100%; }
/* index.html only: the nav's wrap and the hero-grid wrap are sibling stacking
   contexts at the same z-index, so ties resolve by DOM order and the
   hero-grid wrap (later) would paint over the nav's mobile dropdown panel
   wherever the open menu reaches into the hero. One extra point keeps the
   nav's wrap, and everything absolutely positioned inside it, on top; the two
   never otherwise overlap (nav sits above the hero in normal flow), so this
   has no effect anywhere the menu isn't open. */
.fold > .wrap.nav-wrap { z-index: 6; }
.hero-grid { flex: 1; display: grid; grid-template-columns: minmax(360px, 46%) 1fr; align-items: center; width: 100%; }
.hero-copy { padding: 30px 0 70px; position: relative; z-index: 4; }
.badge {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
  color: var(--muted); background: var(--panel); border: 1px solid var(--hairline);
  padding: 6px 16px; border-radius: 999px; margin-bottom: 26px;
}
.badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--good); }
.hero-copy h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(34px, 4.6vw, 54px); line-height: 1.06; letter-spacing: -1.8px;
  max-width: 15ch; margin-bottom: 20px; text-wrap: balance;
}
.hero-copy h1 em { font-style: normal; color: var(--coral); }
.hero-copy .sub { color: var(--muted); font-size: 17.5px; max-width: 44ch; margin-bottom: 28px; text-wrap: balance; }
.hero-copy .ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-copy .fine { margin-top: 16px; font-size: 13px; color: var(--muted); }

/* The lens field: raw data noise on the right, bleeding to the fold's edges.
   Text never sits on the animation; a paper scrim feathers the boundary. */
.lens-field { position: absolute; top: 0; right: 0; bottom: 0; width: 58vw; min-width: 520px; }
.collage { position: absolute; inset: 0; }
.collage .fr { position: absolute; border-radius: 10px; box-shadow: 0 10px 34px rgba(27, 31, 38, .10); }
.collage .num {
  position: absolute; font-family: var(--font-display); font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -1px; opacity: .5;
}
.collage.base { filter: grayscale(.92) blur(3px); opacity: .45; }
.collage.sharp { clip-path: circle(110px at 26% 17%); animation: lens-clip 9s ease-in-out infinite; }
.aperture {
  position: absolute; left: 26%; top: 17%; width: 234px; height: 234px;
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; z-index: 3;
  border: 2px solid rgba(27, 31, 38, .55);
  box-shadow: 0 0 0 7px rgba(255, 255, 255, .55), inset 0 0 0 4px rgba(255, 255, 255, .65), 0 18px 50px rgba(27, 31, 38, .18);
  animation: lens-ring 9s ease-in-out infinite;
}
.aperture::before {
  content: ""; position: absolute; inset: -13px; border-radius: 50%;
  border: 1.5px dashed rgba(226, 61, 61, .55);
  animation: ring-spin 14s linear infinite;
}
/* the handle: makes the aperture read as a lens */
.aperture::after {
  content: ""; position: absolute; left: 86%; top: 86%;
  width: 42%; height: 6.5%; min-height: 9px; border-radius: 999px;
  background: rgba(27, 31, 38, .62);
  transform: rotate(45deg); transform-origin: left center;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .45);
}
@keyframes ring-spin { to { transform: rotate(360deg); } }
@keyframes lens-clip {
  0%, 7%    { clip-path: circle(110px at 26% 17%); }
  22%, 29%  { clip-path: circle(105px at 30% 48%); }
  42%, 49%  { clip-path: circle(115px at 62% 64%); }
  62%, 91%  { clip-path: circle(430px at 50% 80%); }
  100%      { clip-path: circle(110px at 26% 17%); }
}
@keyframes lens-ring {
  0%, 7%    { left: 26%; top: 17%; width: 234px; height: 234px; }
  22%, 29%  { left: 30%; top: 48%; width: 224px; height: 224px; }
  42%, 49%  { left: 62%; top: 64%; width: 244px; height: 244px; }
  62%, 91%  { left: 50%; top: 80%; width: 640px; height: 640px; }
  100%      { left: 26%; top: 17%; width: 234px; height: 234px; }
}
.field-scrim {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    linear-gradient(90deg, var(--paper) 0%, rgba(250, 248, 246, 0) 30%),
    linear-gradient(180deg, var(--paper) 0%, rgba(250, 248, 246, 0) 16%),
    linear-gradient(0deg, var(--paper) 0%, rgba(250, 248, 246, 0) 10%);
}
@media (prefers-reduced-motion: reduce) {
  .collage.base, .aperture { display: none; }
  .collage.sharp { clip-path: none; animation: none; }
}
@media (max-width: 900px) {
  .fold { min-height: 0; }
  .hero-grid { grid-template-columns: 1fr; }
  .lens-field { position: relative; width: 100%; min-width: 0; height: 420px; order: 2; }
  .field-scrim { background: linear-gradient(180deg, var(--paper) 0%, rgba(250, 248, 246, 0) 12%); }
}

/* Monitor frame: dark product UI on the light studio wall */
.monitor {
  background: var(--panel); border: 1px solid var(--hairline);
  border-radius: 16px; padding: 12px; box-shadow: 0 24px 60px rgba(27, 31, 38, .12);
  margin: 44px auto 0; max-width: 980px;
}
.monitor .bar { display: flex; gap: 6px; margin: 2px 4px 10px; }
.monitor .bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--hairline); }
.monitor img { width: 100%; display: block; border-radius: 8px; border: 1px solid var(--hairline); }
.monitor .cap { text-align: center; font-size: 12.5px; color: var(--muted); padding: 10px 4px 0; }

/* Placeholder slot */
.slot {
  border: 2px dashed var(--violet-border); border-radius: 12px; background: var(--violet-soft);
  padding: 26px 20px; text-align: center; color: var(--muted); font-size: 13.5px;
}
.slot b { display: block; color: var(--violet); font-size: 12px; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 6px; }

/* ---------- Showcase: the full product, 2nd fold ---------- */
.showcase { padding: 56px 0 20px; text-align: center; }
.showcase .eyebrow { display: inline-block; }
.showcase h2.sec { margin: 0 auto 12px; }
.showcase .sec-sub { margin: 0 auto 30px; }
.hl { color: var(--violet); font-weight: 700; }
.showcase-frame {
  max-width: 880px; margin: 0 auto; background: var(--panel);
  border: 1px solid var(--hairline); border-radius: 16px; padding: 12px;
  box-shadow: 0 30px 80px rgba(27, 31, 38, .14);
}
.showcase-frame .bar { display: flex; gap: 6px; margin: 2px 4px 10px; }
.showcase-frame .bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--hairline); }
.showcase-frame .shot-wrap { position: relative; }
.showcase-frame img { width: 100%; display: block; border-radius: 9px; border: 1px solid var(--hairline); }
/* pulsing highlight sits over the Next Action box (measured position) */
.na-ring {
  position: absolute; left: 2%; top: 85.8%; width: 96%; height: 8.6%;
  border: 2px solid rgba(226, 61, 61, .5); border-radius: 12px; pointer-events: none; z-index: 2;
  animation: na-pulse 2.6s ease-in-out infinite;
}
.na-flag {
  position: absolute; right: 3.4%; top: 81%; z-index: 3; pointer-events: none;
  font-size: clamp(11px, 1.2vw, 13px); font-weight: 700; color: #fff; background: var(--coral);
  padding: 3px 11px; border-radius: 999px; box-shadow: 0 6px 16px rgba(226, 61, 61, .28);
  animation: na-bob 2.6s ease-in-out infinite;
}
.na-flag::after {
  content: ""; position: absolute; left: 18px; bottom: -5px; width: 9px; height: 9px;
  background: var(--coral); transform: rotate(45deg);
}
@keyframes na-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(226, 61, 61, 0); border-color: rgba(226, 61, 61, .38); }
  50% { box-shadow: 0 0 0 6px rgba(226, 61, 61, .13); border-color: rgba(226, 61, 61, .95); }
}
@keyframes na-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .na-ring { animation: none; border-color: rgba(226, 61, 61, .9); box-shadow: 0 0 0 6px rgba(226, 61, 61, .13); }
  .na-flag { animation: none; }
}
.showcase-frame .cap { font-size: 12.5px; color: var(--muted); padding: 12px 4px 2px; }

/* ---------- Stat bar ---------- */
.statbar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  margin: 64px 0; background: var(--panel);
}
.statbar > div { padding: 26px 22px; border-right: 1px solid var(--hairline); }
.statbar > div:last-child { border-right: none; }
.statbar .n { font-family: var(--font-display); font-weight: 700; font-size: 29px; letter-spacing: -0.8px; font-variant-numeric: tabular-nums; }
.statbar .k { font-size: 13.5px; color: var(--muted); margin-top: 3px; }

/* ---------- Sections ---------- */
section { padding: 30px 0 10px; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--coral); margin-bottom: 12px; }
h2.sec {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -1px; line-height: 1.15;
  max-width: 24ch; text-wrap: balance; margin-bottom: 14px;
}
.sec-sub { color: var(--muted); max-width: 58ch; margin-bottom: 30px; }

/* Contrast block */
.contrast { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 26px 0 20px; }
.contrast .col { border-radius: var(--radius); padding: 26px; }
.contrast .them { background: var(--panel); border: 1px solid var(--hairline); }
.contrast .them h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); margin-bottom: 14px; }
.contrast .them p { color: var(--muted); font-size: 15px; padding: 7px 0; border-bottom: 1px dashed var(--hairline); font-variant-numeric: tabular-nums; }
.contrast .them p:last-of-type { border: none; }
.contrast .us {
  background: linear-gradient(140deg, var(--violet-soft), var(--panel) 60%);
  color: var(--ink); border: 1px solid var(--violet-border); border-left: 3px solid var(--violet);
}
.contrast .us h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .8px; color: var(--violet); margin-bottom: 14px; }
.contrast .us .verdict { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -0.4px; margin-bottom: 10px; }
.contrast .us p { font-size: 15px; color: var(--ink); }
.contrast .us .chip {
  display: inline-block; margin-top: 14px; font-size: 12px; font-weight: 700;
  color: var(--coral); background: var(--coral-soft); border: 1px solid var(--coral);
  padding: 2px 10px; border-radius: 999px; font-variant-numeric: tabular-nums;
}
.contrast .us .src { margin-top: 14px; font-size: 12px; color: var(--muted); }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 26px 0; counter-reset: step; }
.step { background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 26px; }
.step::before {
  counter-increment: step; content: "0" counter(step);
  font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--coral);
  display: block; margin-bottom: 12px;
}
.step h4 { font-family: var(--font-display); font-size: 18px; letter-spacing: -0.3px; margin-bottom: 8px; }
.step p { font-size: 14.5px; color: var(--muted); }

/* Feature rows */
.fbul { list-style: none; margin: 14px 0 12px; }
.fbul li { padding: 8px 0; border-bottom: 1px solid var(--hairline); font-size: 15px; }
.fbul li:last-child { border-bottom: none; }
.fbul li::before { content: "▸ "; color: var(--coral); font-weight: 700; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin: 46px 0; }
.frow.flip .fmedia { order: -1; }
.frow h3 { font-family: var(--font-display); font-size: 26px; letter-spacing: -0.7px; line-height: 1.2; margin-bottom: 12px; text-wrap: balance; }
.frow p { color: var(--muted); font-size: 15.5px; margin-bottom: 10px; }
.frow .ai-note {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; color: var(--violet); font-weight: 700; letter-spacing: -0.1px;
}
.frow .ai-note::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--violet); flex: 0 0 auto; }
.fmedia .monitor { margin: 0; padding: 10px; border-radius: 14px; box-shadow: 0 18px 50px rgba(27, 31, 38, .14); }

/* Personas */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 24px 0 0; }
.tab {
  padding: 10px 20px; border-radius: 999px; border: 1px solid var(--hairline);
  background: var(--panel); font-weight: 600; font-size: 14.5px; color: var(--muted);
}
.tab[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.tabpanel {
  background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 30px; margin-top: 16px; display: none;
}
.tabpanel.active { display: grid; grid-template-columns: 1.3fr 1fr; gap: 30px; }
.tabpanel h4 { font-family: var(--font-display); font-size: 21px; letter-spacing: -0.5px; margin-bottom: 10px; }
.tabpanel p { color: var(--muted); font-size: 15px; margin-bottom: 8px; }
.tabpanel ul { list-style: none; }
.tabpanel li { padding: 8px 0; border-bottom: 1px solid var(--hairline); font-size: 14.5px; }
.tabpanel li:last-child { border: none; }
.tabpanel li::before { content: "✓ "; color: var(--good); font-weight: 700; }
.plan-hint { margin-top: 12px; font-size: 13.5px; color: var(--muted); }
.plan-hint b { color: var(--ink); }

/* Activity feed */
.feedwrap { background: var(--monitor); border-radius: var(--radius); padding: 34px; color: #e9ecf1; margin: 26px 0; display: grid; grid-template-columns: 1fr 1.2fr; gap: 36px; align-items: center; }
.feedwrap h3 { font-family: var(--font-display); font-size: 26px; letter-spacing: -0.7px; margin-bottom: 10px; color: #fff; text-wrap: balance; }
.feedwrap .fw-sub { color: #98a1b3; font-size: 15px; }
.feed { display: flex; flex-direction: column; gap: 0; border-left: 2px solid #2c3342; }
.feed .row {
  display: flex; gap: 14px; padding: 10px 0 10px 18px; font-size: 14px; color: #c6ccd8;
  opacity: 0; animation: feedin .5s ease forwards; position: relative;
}
.feed .row::before { content: ""; position: absolute; left: -5px; top: 18px; width: 8px; height: 8px; border-radius: 50%; background: #2c3342; }
.feed .row, .feed .row::before { transition: color .3s, background .3s; }
.feed .row.live { color: #fff; }
.feed .row.live::before { background: var(--coral); box-shadow: 0 0 0 3px rgba(226, 61, 61, .25); }
.feed .t { color: #98a1b3; font-variant-numeric: tabular-nums; flex: 0 0 46px; }
@keyframes feedin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; } }

/* Pricing teaser */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 26px 0 18px; }
.tier { background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 26px; position: relative; }
.tier.rec { border-color: var(--coral); }
.tier .rb { position: absolute; top: -10px; left: 24px; background: var(--coral); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 12px; border-radius: 999px; }
.tier h4 { font-family: var(--font-display); font-size: 17px; margin-bottom: 8px; }
.tier .price { font-family: var(--font-display); font-size: 32px; font-weight: 700; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.tier .per { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.tier ul { list-style: none; font-size: 14px; }
.tier li { padding: 6px 0; border-bottom: 1px solid var(--hairline); color: var(--muted); }
.tier li:last-child { border: none; }
.honesty { background: var(--good-soft); border: 1px solid var(--good); border-radius: var(--radius); padding: 20px 24px; font-size: 14.5px; }
.honesty b { color: var(--good); }

/* Final CTA + footer */
.final { text-align: center; padding: 70px 0 60px; }
.final h2 { font-family: var(--font-display); font-size: clamp(28px, 4vw, 42px); letter-spacing: -1.2px; max-width: 22ch; margin: 0 auto 24px; text-wrap: balance; }
footer { border-top: 1px solid var(--hairline); padding: 30px 0 50px; }
footer .cols { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
footer .links { display: flex; gap: 22px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); }
footer .links a:hover { color: var(--ink); }
footer .fine { margin-top: 18px; font-size: 12.5px; color: var(--muted); }

@media (max-width: 800px) {
  .contrast, .steps, .frow, .tiers, .feedwrap { grid-template-columns: 1fr; }
  .frow.flip .fmedia { order: 0; }
  .tabpanel.active { grid-template-columns: 1fr; }
}

/* ---------- Sub-pages: page header ---------- */
.page-head { padding: 56px 0 10px; text-align: center; }
.page-head .eyebrow { display: inline-block; }
.page-head h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 4.4vw, 46px); letter-spacing: -1.4px; line-height: 1.08;
  max-width: 20ch; margin: 0 auto 14px; text-wrap: balance;
}
.page-head h1 em { font-style: normal; color: var(--coral); }
.page-head .lede { color: var(--muted); font-size: 18px; max-width: 56ch; margin: 0 auto; text-wrap: balance; }

/* ---------- Pricing ---------- */
.interval { display: flex; justify-content: center; margin: 30px 0 26px; }
.interval .seg {
  display: inline-flex; background: var(--panel); border: 1px solid var(--hairline);
  border-radius: 999px; padding: 4px; gap: 4px;
}
.interval button {
  border: none; background: none; padding: 9px 20px; border-radius: 999px;
  font-weight: 600; font-size: 14px; color: var(--muted);
}
.interval button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.interval .save { color: var(--good); font-weight: 700; }
.interval button[aria-pressed="true"] .save { color: #7ee0b4; }

.tier .price .per-note { font-size: 12.5px; color: var(--muted); font-weight: 400; }
.tier .cta { margin-top: 18px; display: block; text-align: center; }
.tier li b { color: var(--ink); }

/* Comparison table */
.cmp-wrap { overflow-x: auto; margin: 40px 0 10px; }
.cmp { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 640px; }
/* The standard-vs-Advanced explainer (specs/short_review_page_v2.md Unit 13).
   Reuses .cmp rather than adding a second table style to the same page. Two
   deliberate differences from the plan table above it:
   - THREE columns, not four, so it does not need the 640px floor. That floor
     makes the plan table scroll sideways on a phone, which is tolerable for a
     price grid and wrong for the one table whose whole job is to be understood
     BEFORE the prices. Measured at 390px it fits with no horizontal scroll.
   - No `.rec` on either header: in this component that class is the coral
     "recommended plan" highlight, and this table compares two features, not
     two plans. */
.cmp.cmp-kinds { min-width: 0; }
.cmp.cmp-kinds th, .cmp.cmp-kinds td { vertical-align: top; }
.cmp.cmp-kinds .feat { width: 38%; }
.cmp-h {
  font-family: var(--font-display); font-size: 20px; letter-spacing: -0.4px;
  text-align: center; margin: 40px 0 14px;
}
@media (max-width: 640px) {
  .cmp.cmp-kinds { font-size: 13.5px; }
  .cmp.cmp-kinds th, .cmp.cmp-kinds td { padding: 10px 9px; }
  .cmp-h { font-size: 18px; margin: 30px 0 12px; }
}
.cmp th, .cmp td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--hairline); }
.cmp thead th { font-family: var(--font-display); font-size: 15px; letter-spacing: -0.3px; }
.cmp thead th.rec { color: var(--coral); }
.cmp td { color: var(--muted); font-variant-numeric: tabular-nums; }
.cmp td.feat { color: var(--ink); font-weight: 500; }
.cmp .yes { color: var(--good); font-weight: 700; }
.cmp .no { color: var(--hairline-strong, #b9b2a9); }
.cmp tbody tr:hover { background: var(--panel); }

/* FAQ accordion */
.faq { max-width: 780px; margin: 10px auto 0; }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary {
  list-style: none; cursor: pointer; padding: 18px 4px; font-weight: 600; font-size: 16.5px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-family: var(--font-display); font-size: 22px; color: var(--coral);
  font-weight: 700; transition: transform .2s; line-height: 1;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .ans { padding: 0 4px 20px; color: var(--muted); font-size: 15.5px; max-width: 68ch; }
.faq .ans a { color: var(--coral); text-decoration: underline; }

/* ---------- Content / prose (About, Support, legal) ---------- */
.content { max-width: 760px; margin: 0 auto; padding: 8px 0 20px; }
.content h2 {
  font-family: var(--font-display); font-size: 24px; letter-spacing: -0.6px;
  margin: 38px 0 12px; text-wrap: balance;
}
.content h3 { font-family: var(--font-display); font-size: 18px; letter-spacing: -0.3px; margin: 26px 0 8px; }
.content p { color: var(--ink); margin-bottom: 14px; }
.content p.muted, .content .muted { color: var(--muted); }
.content ul { margin: 0 0 16px; padding-left: 22px; }
.content li { margin-bottom: 8px; color: var(--ink); }
.content a.inline { color: var(--coral); text-decoration: underline; }
.content .updated { font-size: 13.5px; color: var(--muted); margin-bottom: 8px; }

/* Principle cards (About) */
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 24px 0; }
.principle { background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 22px; }
.principle .k { font-family: var(--font-display); font-size: 16px; letter-spacing: -0.3px; margin-bottom: 8px; }
.principle .k::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--coral); margin-right: 8px; vertical-align: middle; }
.principle p { font-size: 14.5px; color: var(--muted); margin: 0; }

/* Support cards */
.support-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
.support-card { background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 26px; }
.support-card.primary { border-color: var(--coral); }
.support-card h3 { margin-top: 0; }
.support-card p { font-size: 15px; color: var(--muted); }
.support-card .btn { margin-top: 12px; }
.support-card a.mail { color: var(--coral); text-decoration: underline; font-weight: 600; }

@media (max-width: 800px) {
  .principles, .support-grid { grid-template-columns: 1fr; }
}

/* ---------- Legal notice banner ---------- */
.notice {
  background: var(--warn-soft); border: 1px solid var(--warn); color: var(--warn);
  border-radius: 10px; padding: 12px 16px; font-size: 13.5px; margin: 18px 0 24px;
}
.notice::before { content: "⚠ "; }
.content .updated { font-size: 13.5px; color: var(--muted); margin-bottom: 4px; }
.content ol { padding-left: 20px; margin-bottom: 16px; }
.content ol > li { margin-bottom: 18px; }
.content ol > li > b { display: block; font-family: var(--font-display); font-size: 16px; letter-spacing: -0.3px; color: var(--ink); margin-bottom: 4px; font-weight: 600; }
.content ol > li, .content ol p { color: var(--muted); }
.content code { background: var(--panel); border: 1px solid var(--hairline); border-radius: 5px; padding: 1px 5px; font-size: 13px; }

/* Feature-row animated GIFs (self-framed scenes) */
.gifmedia img { width: 100%; display: block; border-radius: 14px; box-shadow: 0 18px 50px rgba(27, 31, 38, .14); }

/* ---------- Cookie consent (consent-core.js emits this markup, styled here) ----------
   Existing tokens only, no new colour values. The banner is a fixed,
   non-modal notice: full width, above the footer, never blocking the page.
   Accept all / Reject all deliberately share one class (.sl-consent-btn) so
   equal prominence is true of the DOM, not just the eye. */
:root { --sl-consent-bar-h: 0px; }
body.sl-consent-open { padding-bottom: var(--sl-consent-bar-h); }

.sl-consent-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
  background: var(--panel); border-top: 1px solid var(--hairline);
  box-shadow: 0 -12px 30px rgba(27, 31, 38, .12);
}
.sl-consent-inner {
  max-width: 1120px; margin: 0 auto; padding: 18px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.sl-consent-copy { max-width: 720px; }
.sl-consent-heading {
  font-family: var(--font-display); font-size: 17px; letter-spacing: -0.3px;
  margin-bottom: 6px;
}
.sl-consent-copy p { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0; }
.sl-consent-link { color: var(--coral); font-size: 13px; text-decoration: underline; display: inline-block; margin-top: 8px; }
.sl-consent-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; flex-wrap: wrap; }
.sl-consent-btn {
  border: 1px solid var(--hairline); background: var(--paper); color: var(--ink);
  font-weight: 600; font-size: 14px; padding: 11px 20px; border-radius: 10px;
  white-space: nowrap;
}
.sl-consent-btn:hover { border-color: var(--muted); }
.sl-consent-quiet {
  color: var(--muted); font-weight: 600; font-size: 13.5px; text-decoration: underline;
  padding: 8px 6px;
}
.sl-consent-status { color: var(--ink); font-size: 14.5px; font-weight: 500; margin: 0; }

.sl-consent-overlay {
  position: fixed; inset: 0; z-index: 1000; background: rgba(27, 31, 38, .42);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
/* An author rule of normal specificity beats the UA stylesheet's
   [hidden] { display: none }, so without this override setting the
   `hidden` IDL property from consent.js never actually hides the overlay:
   Escape, the close control, the backdrop click and the post-save close
   all silently no-op and the dialog becomes an undismissable wall. */
.sl-consent-overlay[hidden] { display: none; }
.sl-consent-dialog {
  background: var(--panel); border-radius: var(--radius); max-width: 560px; width: 100%;
  max-height: calc(100vh - 40px); overflow-y: auto; box-shadow: 0 30px 80px rgba(27, 31, 38, .22);
}
.sl-consent-dialog-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 22px 24px 4px;
}
.sl-consent-dialog-head h2 { font-family: var(--font-display); font-size: 20px; letter-spacing: -0.4px; }
.sl-consent-close {
  font-size: 22px; line-height: 1; color: var(--muted); padding: 4px 8px; border-radius: 8px;
}
.sl-consent-close:hover { color: var(--ink); }
.sl-consent-dialog-body { padding: 8px 24px 4px; }
.sl-consent-dialog-intro { color: var(--muted); font-size: 14px; line-height: 1.6; margin-bottom: 18px; }
.sl-consent-group { border-top: 1px solid var(--hairline); padding: 16px 0; }
.sl-consent-group:first-of-type { border-top: none; }
.sl-consent-group-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.sl-consent-group-title { font-weight: 600; font-size: 15px; color: var(--ink); }
.sl-consent-always { font-size: 12.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.sl-consent-group-desc { color: var(--muted); font-size: 13.5px; line-height: 1.55; margin: 0; }
.sl-consent-toggle { width: 20px; height: 20px; accent-color: var(--coral); flex: 0 0 auto; }
.sl-consent-dialog-footnote { color: var(--muted); font-size: 12.5px; margin: 16px 0 4px; }
.sl-consent-dialog-footnote a { color: var(--coral); text-decoration: underline; }
.sl-consent-dialog-actions {
  display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 24px 24px; border-top: 1px solid var(--hairline);
  margin-top: 12px;
}
.sl-consent-btn-primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.sl-consent-btn-primary:hover { filter: brightness(1.15); border-color: var(--ink); }

@media (max-width: 800px) {
  .sl-consent-inner { flex-direction: column; align-items: stretch; }
  .sl-consent-actions { justify-content: stretch; }
  .sl-consent-actions .sl-consent-btn { flex: 1 1 auto; text-align: center; }
  .sl-consent-quiet { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-consent-bar, .sl-consent-overlay { transition: none; }
}