/* vocemo.com — the same design system as the app, restated for a page instead of a window.
 *
 * The four rules from `app/src/styles.css` hold here too. Lime marks only what is live: the
 * primary action, a big number, the live dot. Navy is the statement block. Everything else is
 * paper with one hairline and one shadow depth. Micro-labels are mono capitals, body is the
 * system font, display is Outfit, Instrument Serif is for pull quotes only.
 *
 * The inversion rule: on paper the emphatic fill is navy with a lime glyph; on navy it flips to
 * lime with a navy glyph. One selector list owns it, near the bottom.
 *
 * Tokens are copied from the app rather than imported, because the app's stylesheet also carries
 * a window shell — a sidebar, a titlebar, a scroll lock — that a web page must not inherit.
 */

@import "./fonts/fonts.css";

:root {
  --ground: #EFEEE8;
  --paper: #FFFFFF;
  --paper-2: #FAFAF7;
  --ink: #10132A;
  --muted: #5B6072;
  --faint: #9A9FAE;
  --line: rgba(16, 19, 42, 0.10);
  --line-strong: rgba(16, 19, 42, 0.20);
  --navy: #13162B;
  --navy-2: #1B1F3A;
  --navy-ink: #F2F3F8;
  --navy-muted: #9DA3BF;
  --lime: #E4F871;
  --lime-deep: #CBE73F;
  --lime-ink: #171B08;
  --lime-soft: rgba(230, 248, 107, 0.38);
  --good: #2E8B57;
  --shadow: 0 1px 2px rgba(16, 19, 42, 0.05), 0 12px 32px -18px rgba(16, 19, 42, 0.28);
  --shadow-lg: 0 2px 4px rgba(16, 19, 42, 0.06), 0 28px 60px -28px rgba(16, 19, 42, 0.45);
  --r: 16px;
  --r-sm: 12px;
  --track: rgba(19, 22, 43, 0.07);
  --wash: rgba(18, 20, 42, 0.06);
  --ease: cubic-bezier(.2, .7, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .44, 1);
  --t-tap: .14s;
  --t-enter: .32s;
  --focus: #3B6CF6;
  --display: "Outfit", -apple-system, "SF Pro Display", "Segoe UI", sans-serif;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", sans-serif;
  --mono: "Geist Mono", "SF Mono", Menlo, monospace;

  /* The drawings take their colours from here, exactly as ToolArt does in the app. */
  --art-paper: var(--paper);
  --art-line: rgba(16, 19, 42, 0.22);
  --art-ink: var(--navy);
  --art-acc: var(--lime-deep);
  --art-faint: rgba(16, 19, 42, 0.10);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0E1020; --paper: #161A2E; --paper-2: #1B2036; --ink: #EEF0F6;
    --muted: #A6ABBE; --faint: #6B7186;
    --line: rgba(255, 255, 255, 0.09); --line-strong: rgba(255, 255, 255, 0.18);
    --navy: #1E2340; --navy-2: #262C4C; --lime-soft: rgba(230, 248, 107, 0.16);
    --good: #6CCB8F;
    --track: rgba(255, 255, 255, 0.07); --wash: rgba(255, 255, 255, 0.08);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 32px -18px rgba(0, 0, 0, 0.8);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.5), 0 28px 60px -28px rgba(0, 0, 0, 0.9);
    --art-line: rgba(255, 255, 255, 0.26);
    --art-ink: #C9D0EA;
    --art-faint: rgba(255, 255, 255, 0.10);
  }
}
:root[data-theme="dark"] {
  --ground: #0E1020; --paper: #161A2E; --paper-2: #1B2036; --ink: #EEF0F6;
  --muted: #A6ABBE; --faint: #6B7186;
  --line: rgba(255, 255, 255, 0.09); --line-strong: rgba(255, 255, 255, 0.18);
  --navy: #1E2340; --navy-2: #262C4C; --lime-soft: rgba(230, 248, 107, 0.16);
  --good: #6CCB8F;
  --track: rgba(255, 255, 255, 0.07); --wash: rgba(255, 255, 255, 0.08);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 32px -18px rgba(0, 0, 0, 0.8);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.5), 0 28px 60px -28px rgba(0, 0, 0, 0.9);
  --art-line: rgba(255, 255, 255, 0.26);
  --art-ink: #C9D0EA;
  --art-faint: rgba(255, 255, 255, 0.10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--display); letter-spacing: -0.025em; margin: 0; text-wrap: balance; font-weight: 700; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(1120px, calc(100% - 48px)); margin-inline: auto; }
@media (max-width: 640px) { .wrap { width: calc(100% - 32px); } }

.eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--faint);
}

/* ---------- top bar ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-tap) var(--ease);
}
.top.stuck { border-bottom-color: var(--line); }
.top .wrap { display: flex; align-items: center; gap: 24px; height: 62px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: -0.03em; }
.brand .mark { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; }
.top nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.top nav a {
  padding: 7px 12px; border-radius: 9px; color: var(--muted);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
  transition: background var(--t-tap) var(--ease), color var(--t-tap) var(--ease);
}
.top nav a:hover { background: var(--track); color: var(--ink); }
@media (max-width: 720px) { .top nav a.hide-sm { display: none; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px; border-radius: 12px; border: 1px solid transparent;
  font-family: var(--body); font-size: 14.5px; font-weight: 600; cursor: pointer;
  transition: transform var(--t-tap) var(--ease-spring), background var(--t-tap) var(--ease), border-color var(--t-tap) var(--ease);
}
.btn:active { transform: scale(.975); }
.btn.primary { background: var(--lime); color: var(--lime-ink); border-color: var(--lime-deep); box-shadow: var(--shadow); }
.btn.primary:hover { background: var(--lime-deep); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn.ghost:hover { background: var(--track); }
.btn.sm { padding: 8px 14px; font-size: 13px; }
/* On navy the emphatic fill stays lime; the quiet button borrows the frame instead of the page. */
.onink .btn.ghost { color: var(--navy-ink); border-color: rgba(255, 255, 255, 0.22); }
.onink .btn.ghost:hover { background: rgba(255, 255, 255, 0.08); }

/* ---------- hero ---------- */
.hero { padding: 76px 0 12px; }
@media (max-width: 720px) { .hero { padding-top: 44px; } }
.hero .badge {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px;
  padding: 6px 12px 6px 8px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.hero .badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime-deep); }
.hero h1 { font-size: clamp(38px, 6.4vw, 70px); line-height: 1.02; font-weight: 800; max-width: 15ch; }
.hero h1 em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.hero .lede { margin-top: 22px; font-size: clamp(17px, 2vw, 20px); color: var(--muted); max-width: 56ch; line-height: 1.55; }
.hero .actions { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hero .fine { font-family: var(--mono); font-size: 11.5px; color: var(--faint); }

/* ---------- the number strip ---------- */
.figures {
  margin-top: 54px; display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 780px) { .figures { grid-template-columns: repeat(2, 1fr); } }
.figures div { background: var(--paper); padding: 20px 22px; }
.figures b { display: block; font-family: var(--display); font-size: clamp(26px, 3.4vw, 36px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.figures span { display: block; margin-top: 4px; font-size: 13.5px; color: var(--muted); }

/* ---------- sections ---------- */
section { padding: 84px 0; }
@media (max-width: 720px) { section { padding: 56px 0; } }
.head { max-width: 62ch; margin-bottom: 38px; }
.head h2 { font-size: clamp(28px, 3.8vw, 40px); line-height: 1.1; margin-top: 12px; }
.head p { margin-top: 14px; font-size: 17px; color: var(--muted); }

/* ---------- bento ---------- */
.bento {
  display: grid; gap: 14px;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense;
  grid-auto-rows: minmax(150px, auto);
}
@media (max-width: 980px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bento { grid-template-columns: 1fr; } }

.cell {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 22px; border-radius: var(--r);
  background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow);
  overflow: hidden;
}
.cell h3 { font-size: 18px; letter-spacing: -0.02em; }
.cell p { font-size: 14px; color: var(--muted); line-height: 1.5; }
.cell .art { margin-top: auto; }
.cell.wide { grid-column: span 2; }
.cell.tall { grid-row: span 2; }
@media (max-width: 560px) { .cell.wide, .cell.tall { grid-column: auto; grid-row: auto; } }

/* The one statement block per section: navy, and the drawings invert inside it. */
.cell.lead {
  background: var(--navy); color: var(--navy-ink); border-color: transparent; box-shadow: var(--shadow-lg);
  --art-paper: var(--navy-2); --art-line: rgba(255, 255, 255, 0.30);
  --art-ink: var(--navy-ink); --art-acc: var(--lime); --art-faint: rgba(255, 255, 255, 0.14);
}
.cell.lead p { color: var(--navy-muted); }
.cell.lead .eyebrow { color: var(--navy-muted); }

.ico {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--navy); color: var(--lime);
}
.cell.lead .ico { background: var(--lime); color: var(--navy); }

/* ---------- screenshots ---------- */
/* Compact previews, not full-bleed screenshots. A screenshot printed a thousand pixels wide asks
   the reader to study it; at this size they read it the way they read the bento above — a glance
   each, in one pass. Every capture is now a whole macOS window on a desktop, so a card has to be
   wide enough for that to stay readable: at a quarter of the row the menu bar was two pixels
   tall. The lead runs the full width and the rest take half each. */
.pvs {
  display: grid; gap: 14px;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense;
  /* Each card ends where its caption ends. Stretching them to a common row height pads the
     shorter ones with empty paper, which reads as a rendering fault rather than a layout. */
  align-items: start;
}
@media (max-width: 980px) { .pvs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pvs { grid-template-columns: 1fr; } }

.pv {
  display: flex; flex-direction: column;
  border-radius: var(--r);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.pv.wide { grid-column: span 2; }
.pv.lead { grid-column: 1 / -1; }
@media (max-width: 560px) { .pv.wide, .pv.lead { grid-column: 1 / -1; } }

/* Nothing is cropped any more: the captures are 16:9 and so is the frame, so the whole desktop is
   shown at whatever size the cell happens to be. */
.pv .frame {
  aspect-ratio: 16 / 9;
  background: var(--ground);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.pv .frame img { display: block; width: 100%; height: 100%; object-fit: cover; }

.pv .cap { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.pv .cap h3 { font-size: 17px; letter-spacing: -0.02em; }
.pv .cap p { font-size: 13.5px; line-height: 1.5; color: var(--muted); }

/* The lead capture is the whole desktop: wallpaper, menu bar and the window with its shadow. It is
   recorded at 16:9 precisely so this frame's cover crop takes nothing off it, which is why there is
   no special fitting rule here. See FRAME in app/scripts/site-fixtures.mjs. */

/* One statement block, same rule as everywhere else on the page. */
.pv.lead { background: var(--navy); border-color: transparent; box-shadow: var(--shadow-lg); }
.pv.lead .frame { border-bottom-color: rgba(255, 255, 255, 0.12); }
.pv.lead .cap h3 { color: var(--navy-ink); }
.pv.lead .cap p { color: var(--navy-muted); }
.pv.lead .cap .eyebrow { color: var(--navy-muted); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pv.lead { border-color: var(--line-strong); }
}
:root[data-theme="dark"] .pv.lead { border-color: var(--line-strong); }

/* ---------- privacy panel ---------- */
.two { display: grid; grid-template-columns: 1.05fr .95fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .two { grid-template-columns: 1fr; } }
.panel { padding: 26px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); }
.panel.ink { background: var(--navy); color: var(--navy-ink); border-color: transparent; box-shadow: var(--shadow-lg); }
.panel.ink .eyebrow { color: var(--navy-muted); }
.wires { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.wires li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-size: 14.5px; }
.wires .tick { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: var(--lime); color: var(--navy); margin-top: 1px; }
.wires .no { background: var(--track); color: var(--faint); }
.panel.ink .wires .no { background: rgba(255, 255, 255, 0.10); color: var(--navy-muted); }
.wires b { font-weight: 600; }
.wires span { color: var(--muted); }
.panel.ink .wires span { color: var(--navy-muted); }

/* ---------- pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 760px; }
@media (max-width: 700px) { .plans { grid-template-columns: 1fr; } }
.plan {
  position: relative; padding: 24px; border-radius: var(--r);
  background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 6px;
}
.plan.on { border-color: var(--navy); box-shadow: var(--shadow-lg); }
.plan .save {
  position: absolute; top: 16px; right: 16px; padding: 4px 9px; border-radius: 999px;
  background: var(--lime); color: var(--lime-ink);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500;
}
.plan .amount { font-family: var(--display); font-size: 42px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; }
.plan .amount small { font-size: 15px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.plan .bill { font-size: 14px; color: var(--muted); }
.incl { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 9px; max-width: 760px; }
.incl li { display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start; font-size: 15px; }
.incl .tick { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; background: var(--navy); color: var(--lime); margin-top: 2px; }

/* ---------- questions ---------- */
.qa { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.qa details { background: var(--paper); }
.qa summary {
  padding: 18px 22px; cursor: pointer; font-family: var(--display); font-weight: 600; font-size: 17px;
  letter-spacing: -0.015em; display: flex; align-items: center; gap: 12px; list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; margin-left: auto; font-family: var(--mono); font-size: 18px; color: var(--faint); }
.qa details[open] summary::after { content: "–"; }
.qa summary:hover { background: var(--paper-2); }
.qa .a { padding: 0 22px 20px; color: var(--muted); font-size: 15px; max-width: 68ch; }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--line); padding: 34px 0 60px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
footer .links { margin-left: auto; display: flex; gap: 18px; }
footer a, footer p { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--faint); text-transform: uppercase; }
footer a:hover { color: var(--ink); }

/* In light, navy on paper separates itself and needs no line. In dark the two are close enough
   that the statement block stops reading as a distinct object, so it takes the same single
   hairline every other surface has. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cell.lead,
  :root:not([data-theme="light"]) .panel.ink { border-color: var(--line-strong); }
}
:root[data-theme="dark"] .cell.lead,
:root[data-theme="dark"] .panel.ink { border-color: var(--line-strong); }

/* ---------- the inversion rule, stated once ---------- */
.brand .mark, .plan.on .tickmark { background: var(--navy); color: var(--lime); }
.panel.ink .brand .mark, .cell.lead .brand .mark { background: var(--lime); color: var(--navy); }

/* ---------- entrance ---------- */
/* Everything is readable at rest; this only softens the arrival of blocks already on screen. */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise var(--t-enter) var(--ease) both; }
  .rise:nth-child(2) { animation-delay: .05s; }
  .rise:nth-child(3) { animation-delay: .10s; }
  .rise:nth-child(4) { animation-delay: .15s; }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* ---------- legal pages ---------- */
/* These are read, not scanned: one column, generous measure, no cards. They are also noindex, so
   nothing here is doing SEO work — it only has to be legible and unambiguous. */
.legal { padding: 56px 0 96px; }
.legal .wrap { max-width: 74ch; }
.legal .back {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 30px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.legal .back:hover { color: var(--ink); }
.legal h1 { font-size: clamp(30px, 4.4vw, 42px); line-height: 1.08; }
.legal .updated { margin-top: 12px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.legal h2 {
  font-size: 20px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line);
  letter-spacing: -0.015em;
}
.legal h3 { font-size: 16.5px; margin-top: 24px; }
.legal p, .legal li { font-size: 15.5px; line-height: 1.68; color: var(--muted); }
.legal p { margin-top: 12px; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal ul, .legal ol { margin: 12px 0 0; padding-left: 20px; }
.legal li { margin-top: 7px; }
.legal a:not(.back):not(.brand) { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.legal a:not(.back):not(.brand):hover { text-decoration-color: currentColor; }
.legal code { font-family: var(--mono); font-size: 0.9em; background: var(--wash); padding: 1px 5px; border-radius: 5px; color: var(--ink); }

/* The contact block is a picture, not text — see scripts/make-legal-images.mjs for why. */
.legal .contact { margin-top: 16px; padding: 18px 20px; border-radius: var(--r-sm); background: var(--paper); border: 1px solid var(--line); display: inline-block; }
.legal .contact img { display: block; }
.legal .contact + .contact { margin-left: 10px; }
.legal .contact .lbl { display: block; margin-bottom: 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }

/* A short, plain statement of the thing that matters most on the page. */
.legal .keypoint {
  margin-top: 20px; padding: 18px 20px; border-radius: var(--r-sm);
  background: var(--navy); color: var(--navy-ink); box-shadow: var(--shadow);
}
.legal .keypoint p { color: var(--navy-muted); margin-top: 6px; }
.legal .keypoint strong { color: var(--navy-ink); }

/* The support address, in plain text on purpose. The legal pages render the operator's details as
   images because that is where harvesters look; a support address people are meant to write to
   should be selectable, clickable and copyable. */
footer .mailto,
footer .mailto a { text-transform: none; letter-spacing: 0; font-family: var(--body); font-size: 13.5px; }
footer .mailto { color: var(--muted); }
footer .mailto a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
footer .mailto a:hover { text-decoration-color: currentColor; }

/* The first-launch note. Vocemo is signed but not yet notarised, so macOS warns on first open;
   somebody who meets that with no explanation concludes the app is broken and never comes back.
   Quiet by design — it is a footnote to the download, not a warning about the product. */
.hero .firstrun {
  margin-top: 20px; max-width: 68ch;
  padding: 12px 15px; border-radius: var(--r-sm);
  background: var(--wash); border: 1px solid var(--line);
  font-size: 13.5px; line-height: 1.55; color: var(--muted);
}
.hero .firstrun b { color: var(--ink); font-weight: 600; }
.hero .firstrun a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.hero .firstrun a:hover { text-decoration-color: currentColor; }
.qa .a code { font-family: var(--mono); font-size: 11.5px; background: var(--wash); padding: 2px 5px; border-radius: 5px; color: var(--ink); word-break: break-all; }

/* ---------- articles ---------- */
/* One column, generous measure, and structure that survives being read by a machine: the answer
   sits at the top, the table is a real <table>, and every question is a heading. */
.article { padding: 44px 0 90px; }
.article .wrap { max-width: 76ch; }

.crumbs {
  display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-bottom: 24px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint);
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--ink); }

.article h1 { font-size: clamp(30px, 4.6vw, 46px); line-height: 1.06; }
.article .meta {
  margin-top: 14px; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint);
}

/* The answer. Deliberately the most prominent block on the page, because it is both what a reader
   came for and what an answer engine lifts. */
.article .answer {
  margin-top: 26px; padding: 22px 24px; border-radius: var(--r);
  background: var(--navy); color: var(--navy-ink);
  font-size: 17.5px; line-height: 1.55; box-shadow: var(--shadow-lg);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .article .answer { border: 1px solid var(--line-strong); } }
:root[data-theme="dark"] .article .answer { border: 1px solid var(--line-strong); }

.atglance {
  margin: 18px 0 0; padding: 0; display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 620px) { .atglance { grid-template-columns: 1fr; } }
.atglance > div { background: var(--paper); padding: 14px 18px; }
.atglance dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.atglance dd { margin: 5px 0 0; font-size: 14.5px; font-weight: 600; }

.article h2 {
  font-size: clamp(22px, 3vw, 28px); margin-top: 46px; padding-top: 24px;
  border-top: 1px solid var(--line); line-height: 1.15;
}
.article h3 { font-size: 17.5px; margin-top: 26px; }
.article p { margin-top: 14px; font-size: 16.5px; line-height: 1.68; color: var(--muted); }
.article strong { color: var(--ink); font-weight: 600; }
.article ul, .article ol { margin: 14px 0 0; padding-left: 22px; }
.article li { margin-top: 9px; font-size: 16.5px; line-height: 1.62; color: var(--muted); }
.article a:not(.btn):not(.brand):not(.crumbs a) { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }

/* Tables are the single most quoted structure in AI answers, so they get real styling and their
   own horizontal scroll rather than being allowed to break the page. */
.article table {
  width: 100%; margin-top: 20px; border-collapse: collapse;
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  font-size: 14.5px; display: table;
}
.article table + * { margin-top: 22px; }
.article th, .article td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.article thead th {
  background: var(--wash); font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 500;
}
.article tbody tr:last-child td { border-bottom: 0; }
.article tbody td:first-child { font-weight: 600; color: var(--ink); }

.article .faq h2 { margin-bottom: 4px; }
.article .faq .qa { padding: 20px 0; border-bottom: 1px solid var(--line); }
.article .faq .qa:last-child { border-bottom: 0; }
.article .faq h3 { margin-top: 0; font-size: 18px; letter-spacing: -0.015em; }
.article .faq p { margin-top: 9px; font-size: 15.5px; }

/* The closing call to action is the one statement block on an article.
   It was previously paper with a hairline, which is the same surface as every other block on the
   page, so it read as more body copy and asked for nothing. Navy is what the design system reserves
   for a statement, and on navy the emphatic fill flips to lime. Used exactly once per page. */
.article .cta {
  margin-top: 52px; padding: 34px 32px; border-radius: var(--r);
  background: var(--navy); border: 1px solid var(--navy-2); box-shadow: var(--shadow-lg);
  background-image: radial-gradient(120% 140% at 100% 0%, rgba(228, 248, 113, 0.10), transparent 58%);
}
.article .cta .eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--lime); margin: 0 0 10px;
}
.article .cta h2 {
  margin: 0; padding: 0; border: 0; font-family: var(--display);
  font-size: 27px; line-height: 1.18; letter-spacing: -0.02em; color: var(--navy-ink);
  text-wrap: balance;
}
.article .cta p { color: var(--navy-muted); font-size: 16px; margin: 12px 0 0; max-width: 54ch; }
.article .cta .points {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 22px;
}
.article .cta .points li {
  margin: 0; color: var(--navy-ink); font-size: 14.5px; display: flex; align-items: center; gap: 8px;
}
.article .cta .points li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); flex: none;
}
.article .cta .act { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 24px; }
.article .cta .act .btn { text-decoration: none; }
/* The ghost button sits on navy here, so it takes the same inversion the rest of the site uses on
   an ink surface: light text and a light hairline instead of the paper-surface pair. */
.article .cta .act .btn.ghost { color: var(--navy-ink); border-color: rgba(255, 255, 255, 0.24); }
.article .cta .act .btn.ghost:hover { background: rgba(255, 255, 255, 0.09); }
.article .cta .fine { font-size: 13px; color: var(--navy-muted); margin-top: 14px; }
.article .cta a:not(.btn) { color: var(--lime); text-decoration-color: rgba(228, 248, 113, 0.4); }

/* A quieter prompt in the middle of the page, dropped in right after the price comparison, which
   is the point at which a reader has just worked out what the alternatives cost. Deliberately not
   a second statement block: one lime rule, one line, one link. */
.article .cta-inline {
  /* Square on the left so the lime rule reads as a full straight edge; a radius there clips it to
     a pair of stubs at the corners. */
  margin: 30px 0; padding: 16px 20px; border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--paper-2); border: 1px solid var(--line); border-left: 3px solid var(--lime-deep);
  display: flex; gap: 8px 16px; align-items: baseline; flex-wrap: wrap;
}
.article .cta-inline p { margin: 0; font-size: 15px; color: var(--ink); }
.article .cta-inline a { white-space: nowrap; font-weight: 600; }

.article .verified {
  margin-top: 30px; font-size: 13.5px; color: var(--faint);
  padding-top: 18px; border-top: 1px solid var(--line);
}

/* The index */
.artlist { display: grid; gap: 14px; margin-top: 30px; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .artlist { grid-template-columns: 1fr; } }
.artcard {
  display: block; padding: 22px; border-radius: var(--r);
  background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow);
  transition: transform var(--t-tap) var(--ease), box-shadow var(--t-tap) var(--ease);
}
.artcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.artcard h2 { margin: 10px 0 0; padding: 0; border: 0; font-size: 19px; line-height: 1.22; }
.artcard p { margin-top: 9px; font-size: 14px; line-height: 1.5; color: var(--muted); }

/* The article hero. Sits above the answer, so the first screen carries a picture and the answer
   together: multi-modal pages are selected far more often for AI Overviews than text-only ones.
   It is a screenshot of the app on a macOS desktop rather than an illustration, so someone landing
   from a search result sees the product before they see a drawing of the idea behind it. The
   placeholder colour is the desktop ground; the navy it used to be flashed dark before decode. */
.article .hero { margin: 26px 0 0; }
.article .hero img {
  display: block; width: 100%; height: auto; border-radius: var(--r);
  border: 1px solid var(--line); background: #E3DCCF;
}
.artcard .thumb { display: block; width: 100%; height: auto; border-radius: var(--r-sm); margin-bottom: 14px; border: 1px solid var(--line); }

/* Related articles. Internal links spread authority and keep a reader inside the set rather than
   back on the results page; the pages that outrank us carry many more outbound links than we did. */
.article .related { margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--line); }
.article .related h2 { margin: 0 0 14px; padding: 0; border: 0; font-size: 20px; }
.article .related ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) { .article .related ul { grid-template-columns: 1fr; } }
.article .related li { margin: 0; }
.article .related a {
  display: block; padding: 13px 15px; border-radius: var(--r-sm);
  background: var(--paper); border: 1px solid var(--line);
  font-size: 14.5px; line-height: 1.4; color: var(--ink); text-decoration: none;
  transition: border-color var(--t-tap) var(--ease);
}
.article .related a:hover { border-color: var(--line-strong); text-decoration: none; }

/* Sources, in-body figures and the demo clip.
   Three things the audit found missing on all 30 articles. Sources sit above the related list so
   the page ends on evidence then onward links; figures break up the long middle; the demo clip
   plays muted and looping directly under the opening answer. */
.article .sources { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); }
.article .sources h2 { margin: 0 0 8px; padding: 0; border: 0; font-size: 20px; }
.article .sources p { font-size: 14px; color: var(--muted); margin: 0 0 14px; max-width: 62ch; }
.article .sources ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.article .sources li { margin: 0; font-size: 14px; }
.article .sources a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.article .sources a:hover { color: var(--ink); }

.article figure.inline { margin: 34px 0; }
.article figure.inline img {
  width: 100%; height: auto; display: block;
  border-radius: 14px; border: 1px solid var(--line);
}

.article figure.demo { margin: 26px 0 34px; }
.article figure.demo video {
  width: 100%; height: auto; display: block;
  /* The capture already carries its own window frame and ground, so this only needs to round the
     outer edge. The placeholder colour is that same ground, not the dark chrome token: a dark
     rectangle flashed before the poster decoded. */
  border-radius: 14px; border: 1px solid var(--line); background: #E3DCCF;
}
.article figure.demo figcaption {
  margin-top: 10px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  font-family: var(--mono); color: var(--muted);
}