/* Comparison pages (/vs-plaud, /vs-limitless, /switch-from-limitless).
   .ledger is the house component for "facts someone is checking, not browsing"
   and it is a two-column dl. A comparison needs a third column, so this widens
   it rather than inventing a card grid: same hairlines, same hover, same type. */
.ledger-vs > div { grid-template-columns: minmax(0, .32fr) minmax(0, .34fr) minmax(0, .34fr); }
.ledger-vs dd + dd { color: var(--ink); }
.ledger-vs dd + dd b { color: var(--brass-text); }

/* The column heads are the only row that is not a fact, so they read as labels
   rather than content and never take the hover wash. */
.ledger-vs-head { border-bottom: 1px solid var(--ink) !important; }
.ledger-vs-head:hover { background: none !important; }
.ledger-vs-head dd {
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.ledger-vs-head dd + dd { color: var(--brass-text); }

@media (max-width: 760px) {
  /* Three columns cannot hold a sentence at phone width. Each row becomes the
     label, then the two answers stacked and labelled by the ::before, so the
     comparison still reads without a horizontal scroll. */
  .ledger-vs > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .ledger-vs-head { display: none !important; }
  .ledger-vs dd { position: relative; padding-left: 76px; }
  .ledger-vs dd::before {
    position: absolute;
    left: 0;
    color: var(--muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    content: "Plaud";
  }
  .ledger-vs-lim dd::before { content: "Limitless"; }
  .ledger-vs-gran dd::before { content: "Granola"; }
  .ledger-vs-pkt dd::before { content: "Pocket"; }
  .ledger-vs dd + dd::before { color: var(--brass-text); content: "Scriben"; }
  .ledger-vs-lim dd + dd::before { content: "Scriben"; }
  .ledger-vs-gran dd + dd::before { content: "Scriben"; }
  .ledger-vs-pkt dd + dd::before { content: "Scriben"; }
}

/* ════ VISUAL COMPARISON COMPONENTS ═══════════════════════════════════════
   Added 14 Sep 2026. The first version of these pages answered every question
   in a paragraph, which meant a reader had to consume six sentences to learn
   something a number would have told them instantly. Agam's note: "so visually
   ugly, you are just dumping... this should be a visual explanation to
   consumers." These are the components that replace the prose. They stay inside
   the campaign design language — hairlines, no cards, no shadows, no radius —
   so the pages still look like the rest of the site. */

/* ---- verdict: the answer, before the argument --------------------------- */
.verdict { margin: clamp(28px, 3.2vw, 44px) 0 0; border-top: 1px solid var(--ink); }
.verdict > div {
  display: grid;
  align-items: baseline;
  grid-template-columns: minmax(0, .34fr) minmax(0, .33fr) minmax(0, .33fr);
  gap: clamp(12px, 2.2vw, 38px);
  padding: clamp(14px, 1.5vw, 19px) 0;
  border-bottom: 1px solid var(--line);
  transition: background .28s var(--ease);
}
.verdict > div:hover { background: rgba(28, 28, 28, .028); }
.verdict-head, .verdict-head:hover { border-bottom: 1px solid var(--ink) !important; background: none !important; }
.verdict-head span {
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.verdict-head span + span { color: var(--ink); }
.verdict-head span + span + span { color: var(--brass-text); }
.verdict dt { align-self: center; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.verdict dd { margin: 0; }
.verdict b {
  display: block;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(22px, 2.6vw, 34px); letter-spacing: -.035em; line-height: 1.06;
}
.verdict dd + dd b { color: var(--brass-text); }
.verdict small { display: block; margin-top: 5px; color: var(--muted); font-size: 12.5px; line-height: 1.4; }

/* ---- cost over time: the one chart that decides it ---------------------- */
.cost { margin: clamp(26px, 3vw, 40px) 0 0; }
.cost-year { padding: clamp(14px, 1.6vw, 20px) 0; border-top: 1px solid var(--line); }
.cost-year:first-child { border-top: 1px solid var(--ink); }
.cost-year > p {
  margin: 0 0 11px;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.cost-bar { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 14px; margin-top: 7px; }
.cost-bar > span { color: var(--muted); font-size: 12.5px; }
.cost-track { position: relative; height: 30px; background: rgba(28, 28, 28, .055); }
.cost-fill {
  position: absolute; inset: 0 auto 0 0;
  width: var(--w);
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 11px;
  background: var(--ink);
  /* Width is the datum, so it animates from the same origin every time rather
     than sliding in from nowhere. */
  transition: width .9s var(--ease);
}
.cost-fill b { color: var(--cream); font-family: var(--serif); font-weight: 400; font-size: 15px; letter-spacing: -.01em; }
.cost-ours .cost-fill { background: var(--brass-deep); }
/* The bars draw themselves as the section arrives. Scoped to .js and to the
   site's own reveal class (campaign.js adds `in`, not `is-in`) so that with
   scripting off the bars render at full width rather than sitting at zero
   forever — the same no-JS-safe shape as .reveal itself in campaign.css. */
.js .reveal:not(.in) .cost-fill { width: 0; }
@media (prefers-reduced-motion: reduce) {
  .cost-fill, .js .reveal:not(.in) .cost-fill { width: var(--w); transition: none; }
}

/* ---- included: what the same money actually buys ------------------------ */
.incl { margin: clamp(26px, 3vw, 40px) 0 0; border-top: 1px solid var(--ink); }
.incl > div {
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) 92px 92px;
  gap: clamp(10px, 1.6vw, 26px);
  padding: clamp(11px, 1.15vw, 15px) 0;
  border-bottom: 1px solid var(--line);
  transition: background .28s var(--ease);
}
.incl > div:hover { background: rgba(28, 28, 28, .028); }
.incl-head, .incl-head:hover { border-bottom: 1px solid var(--ink) !important; background: none !important; }
.incl-head span {
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.incl-head span + span + span { color: var(--brass-text); }
.incl dt { font-size: 14.5px; line-height: 1.4; }
.incl dd { margin: 0; justify-self: center; font-size: 17px; line-height: 1; }
.incl .yes { color: var(--brass-text); }
.incl .no { color: rgba(28, 28, 28, .3); }
.incl .paid { color: var(--muted); font-size: 11.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; text-align: center; }
.incl-foot { max-width: none; margin-top: 14px; color: var(--muted); font-size: 12.5px; }

@media (max-width: 760px) {
  .verdict > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 16px; }
  .verdict dt { grid-column: 1 / -1; margin-bottom: 4px; }
  .verdict-head { display: none !important; }
  /* With the head row gone the two values need to say which is which. */
  .verdict dd::before {
    display: block; margin-bottom: 3px;
    color: var(--muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    content: attr(data-who);
  }
  .verdict dd + dd::before { color: var(--brass-text); }
  .verdict b { font-size: 25px; }
  .cost-bar { grid-template-columns: 72px minmax(0, 1fr); gap: 10px; }
  /* The competitor column holds words ("Pocket Pro", "Phone app"), ours holds a
     single glyph, so they are not the same width at phone size. Equal columns made
     the longest label butt straight into "Pocket Pro" with no gap. */
  .incl > div { grid-template-columns: minmax(0, 1fr) 78px 46px; gap: 12px; }
  .incl dt { font-size: 13.5px; }
}

/* ---- a ghost button on a dark section ---------------------------------- */
/* .btn-ghost is `color: var(--ink)` with a near-transparent dark border, which
   is correct on the paper ground and invisible on a dark one. Measured on the
   pages this file serves, 14 Sep 2026: the rendered button box spanned 9 to 11
   luminance levels out of 255 — dark text on dark, a call to action nobody can
   see. campaign.css has no .sec-dark override for it, so it lives here, scoped
   to the pages that load this file. */
.sec-dark .btn-ghost { color: var(--cream); border-color: rgba(250, 248, 243, .34); }
.sec-dark .btn-ghost:hover { background: rgba(255, 255, 255, .09); border-color: rgba(250, 248, 243, .62); }
/* .btn-ink is near-black on near-black for the same reason. */
.sec-dark .btn-ink { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.sec-dark .btn-ink:hover { background: #fff; border-color: #fff; }

/* At phone width the smallest bar is too narrow to hold its own label: on
   vs-plaud at 320px the $129 fill is 33px and the label needs 39px, so the
   number was clipped by its own bar. Below this width every amount sits in a
   reserved column to the right of the track instead, which works for the 100%
   bar and the 16% bar alike and keeps the widths honest. */
@media (max-width: 430px) {
  .cost-bar { grid-template-columns: 58px minmax(0, 1fr) 42px; gap: 8px; }
  .cost-fill { overflow: visible; padding-right: 0; }
  .cost-fill b {
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink);
    font-size: 13px;
    white-space: nowrap;
  }
  .cost-ours .cost-fill b { color: var(--brass-text); }
}

/* ---- pros and cons -------------------------------------------------------
   Added 14 Sep 2026 after reading how Plaud structures its own comparison
   pages. The thing worth copying is not their copy, it is that a reader can
   answer "should I buy this" by scanning rather than by reading six sentences.
   Two columns, one mark per line, and our own column carries real drawbacks —
   a cons list with nothing in it is an advert, and readers know it. */
.proscons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 4vw, 72px); margin: clamp(28px, 3.2vw, 44px) 0 0; border-top: 1px solid var(--ink); }
.pc-col { padding-top: 18px; }
.pc-col + .pc-col { border-left: 1px solid var(--line); padding-left: clamp(22px, 4vw, 72px); }
.pc-head { margin: 0 0 4px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.pc-col + .pc-col .pc-head { color: var(--brass-text); }
.proscons ul { margin: 0; padding: 0; list-style: none; }
.proscons li { display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--hair); font-size: 14px; line-height: 1.5; }
.proscons li::before { color: var(--brass-text); content: "+"; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.proscons .pc-no li::before { color: var(--muted); content: "\2212"; }
.proscons .pc-no li { color: var(--muted); }
@media (max-width: 760px) {
  .proscons { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pc-col + .pc-col { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); margin-top: 14px; }
}

/* ---- other alternatives --------------------------------------------------
   Somebody comparing two recorders is comparing four. Sending them to the
   other pages keeps the answer here rather than on a review site. */
.alts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: clamp(26px, 3vw, 40px) 0 0; border-top: 1px solid var(--ink); }
.alts a { display: block; padding: 18px clamp(16px, 2vw, 26px) 20px 0; border-bottom: 1px solid var(--line); text-decoration: none; transition: background .28s var(--ease); }
.alts a + a { border-left: 1px solid var(--line); padding-left: clamp(16px, 2vw, 26px); }
.alts a:hover { background: rgba(28, 28, 28, .028); }
.alts b { display: block; font-family: var(--serif); font-size: clamp(15px, 1.3vw, 18px); font-weight: 400; letter-spacing: -.018em; }
.alts span { display: block; margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.alts a:hover b { color: var(--brass-text); }
@media (max-width: 760px) {
  .alts { grid-template-columns: minmax(0, 1fr); }
  .alts a + a { border-left: 0; padding-left: 0; }
}

/* ---- comparison editorial refresh --------------------------------------
   Comparison pages are decision pages, not reports. Keep the canvas white,
   put the product in the first viewport, and let the product screens explain
   the capture -> memory -> action system before the pricing evidence. */
.compare-page { background: #fff; }
.compare-page main { display: block; background: #fff; }
.compare-page .sec,
.compare-page .sec-alt,
.compare-page .sec-dark,
.compare-page .sec-forest { background: #fff; color: var(--ink); }
.compare-page main > .sec + .sec { border-top: 1px solid var(--hair); }
.compare-page .sec-dark .lede,
.compare-page .sec-dark .muted { color: var(--muted); }
.compare-page .sec-dark .eyebrow { color: var(--brass-text); }

/* The answer follows the hero immediately. A full section's top padding plus
   the verdict margin created an empty band before the first useful row. */
.compare-hero + .sec { padding-top: 0; }
.compare-hero + .sec .verdict { margin-top: 0; }

.compare-hero { padding-block: clamp(38px, 4.4vw, 66px); }
.compare-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(460px, 1.18fr);
  align-items: center;
  gap: clamp(38px, 6vw, 92px);
}
.compare-hero-copy h1 {
  max-width: 12ch;
  margin-top: 10px;
  font-size: clamp(44px, 5.4vw, 78px);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.048em;
}
.compare-hero-copy .lede {
  max-width: 46ch;
  margin-top: 20px;
  font-size: clamp(16px, 1.35vw, 18px);
  line-height: 1.56;
}
.compare-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.compare-hero-media { position: relative; min-width: 0; }
.compare-hero-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.44 / 1;
  object-fit: cover;
  border-radius: 3px;
}
.compare-hero-media::after {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 38%;
  height: 34%;
  border-radius: 90% 0 0;
  background: radial-gradient(circle at 100% 100%, rgba(184,131,60,.22), rgba(184,131,60,0) 70%);
  pointer-events: none;
  content: "";
}

.compare-page .verdict { margin-top: clamp(34px, 4vw, 58px); }
.compare-page .verdict > div { padding-block: clamp(12px, 1.25vw, 17px); }

.system-proof { padding-block: clamp(52px, 5vw, 80px); }
.system-proof-head {
  display: grid;
  grid-template-columns: minmax(0, .76fr) minmax(0, 1.24fr);
  align-items: end;
  gap: clamp(30px, 5vw, 76px);
}
.system-proof-head h2 {
  max-width: 12ch;
  margin-top: 8px;
  font-size: clamp(34px, 4.3vw, 60px);
  font-weight: 500;
}
.system-proof-head .lede { max-width: 50ch; }
.system-visuals {
  display: grid;
  grid-template-columns: 1.12fr .88fr .88fr .88fr;
  margin-top: clamp(30px, 3.6vw, 52px);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
.system-visuals figure {
  display: grid;
  grid-template-rows: minmax(235px, 24vw) auto;
  min-width: 0;
  margin: 0;
  padding: 18px 18px 18px 0;
}
.system-visuals figure + figure { padding-left: 18px; border-left: 1px solid var(--line); }
.system-visuals img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}
.system-visuals figure:first-child img { object-fit: cover; object-position: center; }
.system-visuals figcaption { padding-top: 16px; }
.system-visuals b {
  display: block;
  font-family: var(--serif);
  font-size: clamp(17px, 1.55vw, 21px);
  font-weight: 500;
  line-height: 1.15;
}
.system-visuals span { display: block; margin-top: 5px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }

.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: clamp(30px, 3.6vw, 50px) 0 0;
  border-top: 1px solid var(--ink);
}
.choice-grid a {
  display: grid;
  grid-template-columns: minmax(150px, .72fr) minmax(0, 1fr);
  gap: clamp(16px, 2vw, 28px);
  min-width: 0;
  padding: 20px 20px 20px 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}
.choice-grid a:nth-child(even) { padding-right: 0; padding-left: 20px; border-left: 1px solid var(--line); }
.choice-grid img { display: block; width: 100%; height: 172px; object-fit: cover; }
.choice-grid span { align-self: center; }
.choice-grid b { display: block; font-family: var(--serif); font-size: clamp(22px, 2.3vw, 32px); font-weight: 500; line-height: 1.08; }
.choice-grid small { display: block; margin-top: 9px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.choice-grid a:hover b { color: var(--brass-text); }

.comparison-method { padding-block: clamp(38px, 3.8vw, 58px); }
.comparison-method .sec-head h2 { font-size: clamp(28px, 3vw, 42px); }
.comparison-method .flow { margin-top: 28px; }
.comparison-method .flow .when + p { color: var(--muted); font-size: 14px; }

@media (max-width: 900px) {
  .compare-hero-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .system-visuals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .system-visuals figure { grid-template-rows: 280px auto; }
  .system-visuals figure:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .system-visuals figure:nth-child(4) { border-top: 1px solid var(--line); }
  .choice-grid a { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .compare-hero { padding-block: 28px 38px; }
  .compare-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .compare-hero-copy h1 { max-width: 11ch; font-size: clamp(40px, 12vw, 56px); }
  .compare-hero-media { order: -1; }
  .compare-hero-media img { aspect-ratio: 1.48 / 1; }
  .system-proof-head { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 16px; }
  .system-proof-head h2 { max-width: 11ch; }
  .system-visuals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .system-visuals figure { grid-template-rows: 190px auto; padding: 14px 12px 14px 0; }
  .system-visuals figure + figure { padding-left: 12px; }
  .choice-grid { grid-template-columns: minmax(0, 1fr); }
  .choice-grid a,
  .choice-grid a:nth-child(even) { grid-template-columns: 124px minmax(0, 1fr); padding: 16px 0; border-left: 0; }
  .choice-grid img { height: 126px; }
}

@media (max-width: 430px) {
  .compare-hero-actions .btn { width: 100%; }
  .system-visuals figure { grid-template-rows: 154px auto; }
  .system-visuals span { font-size: 11.5px; }
  .choice-grid a,
  .choice-grid a:nth-child(even) { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; }
  .choice-grid img { height: 112px; }
}