/* Public pages and the sign-in and error screens (docs/design.md §5, §9).
   Loaded by the public and auth layouts only; the workspace uses app.css. */

/* --- header and footer ------------------------------------------------------ */

/* The header stays at the top while a page scrolls (the product pages are long). It is
   opaque, so nothing shows through it, and anchors leave room for it. */
.site-header { position: sticky; top: 0; z-index: 40; background: var(--ground); border-bottom: 1px solid var(--rule); }
html { scroll-padding-top: 96px; }
@media (max-width: 899px) {
  html { scroll-padding-top: 112px; }
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s6);
  min-height: 72px;
}
.site-nav { display: none; gap: var(--s6); font-size: 15px; line-height: 20px; font-weight: 500; }
.site-nav a { text-decoration: none; padding: var(--s3) 0; }
.site-nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* "Solutions": a native <details> menu of the products, so it works without a script. */
.solutions { position: relative; }
.solutions > summary { display: flex; align-items: center; gap: var(--s1); min-height: 44px; cursor: pointer; list-style: none; }
.solutions > summary::-webkit-details-marker { display: none; }
.solutions > summary:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.solutions__chevron { width: 16px; height: 16px; transform: rotate(180deg); }
.solutions[open] .solutions__chevron { transform: none; }
.solutions__panel { position: absolute; top: calc(100% + var(--s2)); left: calc(-1 * var(--s4)); z-index: 20; width: 340px; background: var(--sheet); border: 1px solid var(--ink); }
.site-nav .solutions__panel a { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--s3); padding: var(--s4); border-top: 1px solid var(--rule); font-size: 15px; line-height: 20px; text-decoration: none; }
.site-nav .solutions__panel a:first-child { border-top: 0; }
.site-nav .solutions__panel a:hover { background: var(--ground); text-decoration: none; }
.solutions__panel .glyph { width: 24px; height: 24px; margin-top: 2px; }
.solutions__panel strong { display: block; font-size: 16px; line-height: 24px; font-weight: 600; }
.solutions__panel small { display: block; margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.site-tools { display: flex; align-items: center; gap: var(--s4); }
@media (max-width: 899px) {
  /* Sticky, so keep it thin on a phone: one row of 56 px and a 44 px Menu row. */
  .site-header .wrap { min-height: 56px; }
}
@media (max-width: 480px) {
  .site-header .wrap { gap: var(--s3); }
  .site-tools { gap: var(--s2); }
}
/* The language link: a plain anchor, 44 px square so it is easy to hit. */
.lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  font-size: 15px;
  line-height: 1;
  font-weight: 600;
}
.menu { border-top: 1px solid var(--rule); }
.menu summary { display: flex; align-items: center; min-height: 44px; padding: 0 var(--pad); font-size: 16px; font-weight: 600; cursor: pointer; }
.menu nav { display: grid; padding: 0 var(--pad) var(--s4); max-height: calc(100vh - 110px); overflow-y: auto; }
.menu a { padding: var(--s3) 0; border-top: 1px solid var(--rule); text-decoration: none; }
.menu a[aria-current="page"] { font-weight: 700; }
.menu__label { padding: var(--s3) 0 var(--s1); border-top: 1px solid var(--rule); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-3); }
.menu .menu__sub { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0 var(--s3) var(--s2); border-top: 0; font-weight: 600; }
@media (min-width: 900px) {
  .site-nav { display: flex; }
  .menu { display: none; }
}

.site-footer { border-top: 1px solid var(--rule); padding: var(--s12) 0 var(--s8); font-size: 15px; line-height: 24px; }
.site-footer .wrap { display: grid; gap: var(--s8); }
.site-footer p { max-width: 28em; color: var(--ink-2); }
.site-footer h2 { font-size: 15px; line-height: 20px; letter-spacing: 0; margin-bottom: var(--s2); color: var(--ink-3); }
.site-footer ul { display: grid; gap: var(--s1); }
.site-footer li a { display: inline-block; padding: var(--s1) 0; }
.site-footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s8) var(--gutter); }
.site-footer__legal { color: var(--ink-3); font-size: 14px; line-height: 20px; }
@media (min-width: 900px) {
  .site-footer .wrap { grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }
  .site-footer__about { grid-column: 1 / 4; }
  .site-footer__cols { grid-column: 4 / 13; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-footer__legal { grid-column: 1 / 13; }
}

/* --- bands: the page's sections ---------------------------------------------------
   Every band is a different picture, and the page changes tone as it goes: ground, ink,
   white, ground, white, ground, white, ink (docs/design.md §9). Where a section has two
   products they get the same shape and the same weight. */

.band { padding: var(--s16) 0; }
@media (min-width: 900px) {
  .band { padding: var(--s24) 0; }
}
.band--sheet { background: var(--sheet); }
.band--ink, .cta { background: var(--ink); color: var(--sheet); }
.on-ink p, .on-ink .lead { color: var(--rule); }

.head { max-width: 44em; }
.head > * + * { margin-top: var(--s4); }
.head + * { margin-top: var(--s12); }
.lead { max-width: var(--lead-measure); font-size: 18px; line-height: 28px; color: var(--ink-2); }
@media (min-width: 760px) {
  .lead { font-size: 20px; line-height: 30px; }
}
.small-note, .notes { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-3); }
.small-note { margin-top: var(--s8); max-width: 40em; }
.on-ink .small-note { color: var(--rule); }

/* --- 1. hero: one claim, two ways in ----------------------------------------------------- */

.hero { padding: var(--s8) 0 var(--s12); }
.hero__grid { display: grid; gap: var(--s8); }
.hero__copy > * + * { margin-top: var(--s6); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s6); margin-top: var(--s8); }
.actions > a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; }
.proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s4);
  padding-top: var(--s6);
  border-top: 1px solid var(--rule);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--ink-3);
}
.proof__marks { display: flex; gap: var(--s4); color: var(--ink); }
.proof .glyph { width: 24px; height: 24px; }
.hero__side > * + * { margin-top: var(--s6); }
@media (min-width: 1000px) {
  .hero { padding: var(--s12) 0 var(--s16); }
  .hero__grid { gap: var(--s12); }
  /* The headline beside everything that supports it, so the two columns carry the same
     weight; the two doors below stay inside the first screen. */
  .hero__copy { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s12); align-items: center; }
  .hero__copy > * + * { margin-top: 0; }
  .hero__side .actions { margin-top: var(--s6); }
  .hero__side .proof { margin-top: var(--s6); padding-top: var(--s6); }
}

/* The two doors: the same card for each product, so neither is the main one. */
.doors { display: grid; gap: var(--gutter); }
@media (min-width: 760px) {
  .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.door { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s6); background: var(--sheet); border: 1px solid var(--rule); }
.door__head { display: flex; align-items: center; gap: var(--s3); }
.door__head .glyph { width: 28px; height: 28px; flex: none; }
.door__head h2 { font-size: 20px; line-height: 28px; letter-spacing: -0.01em; }
.door__tag { color: var(--ink-2); font-size: 16px; line-height: 24px; max-width: 30em; }
.door__pic { display: grid; flex: 1; gap: var(--s3); align-content: start; margin-top: var(--s2); }
.door .btn { align-self: flex-start; margin-top: var(--s3); }
.door__stat p { display: flex; align-items: baseline; gap: var(--s3); }
.door__stat--chart { display: grid; grid-template-columns: minmax(0, 1fr) 128px; gap: var(--s4); align-items: end; }
.door__stat--chart .waffle { max-width: 128px; }
.door__stat strong { font-size: 32px; line-height: 1; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.door__stat span { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-3); }
.meter { width: 100%; height: 8px; margin-top: var(--s2); }
.meter__used { fill: var(--ink); }
.meter__rest { fill: var(--rule); }
.handles { display: grid; border: 1px solid var(--rule); background: var(--sheet); }
.handles li { display: flex; align-items: center; gap: var(--s3); min-height: 40px; padding: 0 var(--s3); font-size: 15px; line-height: 20px; font-weight: 600; border-top: 1px solid var(--rule); }
.handles li:first-child { border-top: 0; }
.handles .glyph { flex: none; }
.handles__n { margin-left: auto; font-size: 14px; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* The unit chart and its ledger: one square per item, one shape per fate. */
.waffle { width: 100%; max-width: 168px; height: auto; }
.waffle__g { color: var(--ink-3); }
.waffle__g--kept { color: var(--ink); }
.cell { display: inline-block; width: 14px; height: 14px; margin-right: var(--s2); vertical-align: -2px; color: var(--ink-3); }
.ledger { font-size: 15px; line-height: 20px; }
.ledger .total .cell { color: var(--ink); }

/* --- the highlighter ------------------------------------------------------------------------
   The one signature gesture. The mark is a sweep that draws across the keyword once; it
   keeps to the word (nowrap) so the sweep is a single box. In the hero it plays at load;
   further down it follows the scroll, so it plays when the word arrives, never before. */
main mark { position: relative; isolation: isolate; background: transparent; white-space: nowrap; }
main mark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--mark);
  transform-origin: left center;
}
@keyframes sweep { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

@media (prefers-reduced-motion: no-preference) {
  .hero mark::before { animation: sweep 600ms 250ms ease-out both; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .band mark::before, .cta mark::before {
      animation: sweep linear both;
      animation-timeline: view();
      animation-range: entry 40% cover 30%;
    }
    .typed { animation: type steps(12, end) both; animation-timeline: view(); animation-range: entry 30% cover 35%; }
    .bars .bar { transform-box: fill-box; transform-origin: 50% 100%; animation: grow-y linear both; animation-timeline: view(); animation-range: entry 20% cover 35%; }
    .stack rect { transform-box: fill-box; transform-origin: 0 50%; animation: grow-x linear both; animation-timeline: view(); animation-range: entry 20% cover 35%; }
    .waffle__g { animation: appear linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .waffle__g:nth-child(2) { animation-range: entry 10% entry 80%; }
    .waffle__g:nth-child(3) { animation-range: entry 20% entry 90%; }
    .waffle__g:nth-child(4) { animation-range: entry 30% entry 100%; }
    .waffle__g:nth-child(5) { animation-range: entry 40% cover 20%; }
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* Round and round; the pointer on the card pauses it. */
  .typer__w { animation: var(--kf) var(--cycle) calc(0.6s + var(--i, 0) * 3.8s) infinite both; }
  .door:hover .typer__w { animation-play-state: paused; }
}

/* --- 2. the problem and the answer: one band, one pair per product ------------------------------- */

.pairs { display: grid; gap: var(--s12) var(--gutter); }
.pair h3 { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s6); padding-bottom: var(--s4); border-bottom: 1px solid var(--ink-2); font-size: 20px; line-height: 28px; }
.pair h3 .glyph { width: 28px; height: 28px; flex: none; }
@media (min-width: 1000px) {
  .pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s16); }
}
/* A row is a pair stacked: what you do by hand, muted, then what you do here, with a tick. */
.versus { font-size: 18px; line-height: 26px; color: var(--sheet); }
.versus thead tr { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); border-bottom: 2px solid var(--sheet); }
.versus thead th { padding: 0 0 var(--s3); border-bottom: 0; vertical-align: bottom; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--rule); }
.versus thead th:last-child { color: var(--sheet); }
.versus__marks { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s3); font-weight: 600; }
.versus__marks .glyph { width: 22px; height: 22px; flex: none; }
.versus tbody, .versus tbody tr, .versus tbody td { display: block; }
.versus tbody tr { padding: var(--s4) 0; border-bottom: 1px solid var(--ink-2); }
.versus tbody tr:last-child { border-bottom: 0; }
.versus tbody td { padding: 0; border: 0; }
.versus tbody td:first-child { color: var(--rule); }
.versus tbody td + td { margin-top: var(--s2); }
.versus__answer { font-weight: 600; color: var(--sheet); }
.versus__row { display: flex; gap: var(--s3); }
.versus__row .glyph { flex: none; margin-top: 4px; }

/* --- 3. how it works: three steps and a picture (a product's page) -------------------------------------------------------- */

.lane ol { display: grid; gap: var(--s6); }
.lane ol > li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s4); }
.lane h4, .lane ol > li h3 { font-size: 17px; line-height: 28px; font-weight: 700; }
.lane ol > li p { margin-top: var(--s1); color: var(--ink-2); max-width: var(--measure); }
.lane .frag { margin-top: var(--s8); }
.lane .small-note { margin-top: var(--s4); }
.flow__n { display: grid; place-items: center; width: 40px; height: 40px; background: var(--ink); color: var(--sheet); font-weight: 700; font-variant-numeric: tabular-nums; }
.frag { padding: var(--s4); background: var(--ground); border: 1px solid var(--rule); display: grid; gap: var(--s2); align-content: start; }
.frag .frag__label { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-3); }
.frag .frag__label:not(:first-child) { margin-top: var(--s2); }
.field { display: flex; align-items: center; gap: var(--s3); min-height: var(--control); padding: 0 var(--s4); background: var(--sheet); border: 2px solid var(--ink); font-weight: 600; color: var(--ink); }
.typed { display: inline-block; }
.caret { width: 2px; height: 24px; background: var(--ink); }
/* The hero's keyword, typed and replaced (docs/design.md §7): words stacked in one place, each in its turn. */
.typer { display: inline-grid; }
.typer__w { grid-area: 1 / 1; white-space: nowrap; }
.typer__w:not(:first-child) { clip-path: inset(0 100% 0 0); }
.typer__w:nth-child(2) { --i: 1; }
.typer__w:nth-child(3) { --i: 2; }
.typer__w:nth-child(4) { --i: 3; }
.len4 { --n: 4; } .len8 { --n: 8; } .len12 { --n: 12; } .len16 { --n: 16; } .len20 { --n: 20; } .len24 { --n: 24; } .len28 { --n: 28; } .len32 { --n: 32; }
.typer--2 { --kf: typer-2; --cycle: 7.6s; }
.typer--3 { --kf: typer-3; --cycle: 11.4s; }
.typer--4 { --kf: typer-4; --cycle: 15.2s; }
@keyframes typer-2 { 0% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(var(--n), end); } 21% { clip-path: inset(0); } 39.5% { clip-path: inset(0); animation-timing-function: steps(var(--n), end); } 50%, 100% { clip-path: inset(0 100% 0 0); } }
@keyframes typer-3 { 0% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(var(--n), end); } 14% { clip-path: inset(0); } 26.3% { clip-path: inset(0); animation-timing-function: steps(var(--n), end); } 33.3%, 100% { clip-path: inset(0 100% 0 0); } }
@keyframes typer-4 { 0% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(var(--n), end); } 10.5% { clip-path: inset(0); } 19.8% { clip-path: inset(0); animation-timing-function: steps(var(--n), end); } 25%, 100% { clip-path: inset(0 100% 0 0); } }
.seg { display: grid; grid-template-columns: repeat(4, 1fr); border: 2px solid var(--ink); background: var(--sheet); }
.seg li { padding: var(--s3) var(--s1); text-align: center; font-size: 14px; line-height: 20px; font-weight: 600; border-left: 1px solid var(--rule); }
.seg li:first-child { border-left: 0; }
.seg .seg__on { background: var(--ink); color: var(--sheet); }

/* --- 4. what is in a report: a bento of the parts both products share --------------------------------- */

.bento { display: grid; gap: var(--gutter); }
.tile { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s6); background: var(--sheet); border: 1px solid var(--rule); min-width: 0; }
.tile h3 { font-size: 20px; line-height: 28px; }
.tile > p:not(.tile__note), .tile > div > p { color: var(--ink-2); font-size: 16px; line-height: 24px; max-width: 34em; }
.tile__note { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-3); }
.tile--posts .tile__note { margin-top: auto; }
.tile--ink { background: var(--ink); border-color: var(--ink); color: var(--sheet); }
.tile--ink > p:not(.tile__note) { color: var(--rule); }
@media (min-width: 700px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile--notes { grid-column: 1 / 3; }
}
@media (min-width: 1000px) {
  .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .tile--posts { grid-column: 1 / 8; }
  .tile--trend { grid-column: 8 / 13; }
  .tile--notes { grid-column: 1 / 13; }
  .tile { padding: var(--s8); }
}
.posts { display: grid; }
.posts li { padding: var(--s4) 0; border-top: 1px solid var(--rule); }
.posts__meta { display: flex; justify-content: space-between; gap: var(--s4); font-size: 14px; line-height: 20px; color: var(--ink-2); font-weight: 500; margin-bottom: var(--s1); }
.posts__meta span { display: inline-flex; align-items: center; gap: var(--s2); }
.posts li > p:last-child { font-size: 18px; line-height: 28px; }
.bars svg { display: block; width: 100%; height: 56px; }
.bars .bar { fill: var(--ink); }
.bars__cols { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s2); }
.bars__cols li { display: grid; justify-items: center; gap: var(--s1); }
.bars__day { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-2); }
.bars__n { font-size: 14px; line-height: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bars figcaption { margin-top: var(--s2); font-size: 14px; line-height: 20px; color: var(--ink-3); font-weight: 500; }
.tile--trend .bars { padding-top: var(--s4); border-top: 1px solid var(--rule); }
.stack { width: 100%; height: 12px; }
.stack rect { stroke: var(--sheet); stroke-width: 0.8; }
.stack__pos { fill: var(--pos); }
.stack__neu { fill: var(--neu); }
.stack__neg { fill: var(--neg); }
.senti td:first-child { width: 28px; padding-right: var(--s2); }

/* The notes tile: one ledger per product, side by side, in the same vocabulary. */
.notes-pair { display: grid; gap: var(--s12) var(--s16); margin-top: var(--s2); }
.note-ledger { display: grid; gap: var(--s4); align-content: start; }
.note-ledger h4 { display: flex; align-items: center; gap: var(--s3); font-size: 18px; line-height: 28px; font-weight: 700; }
.note-ledger h4 .glyph { width: 24px; height: 24px; flex: none; }
.tile--ink .waffle__g { color: var(--rule); }
.tile--ink .waffle__g--kept { color: var(--sheet); }
.tile--ink .cell { color: var(--rule); }
.tile--ink .ledger .total .cell { color: var(--sheet); }
.tile--ink .table caption { color: var(--rule); font-weight: 500; }
.tile--ink .table th, .tile--ink .table td { border-bottom-color: var(--ink-2); }
.tile--ink .table .total th, .tile--ink .table .total td { border-top-color: var(--sheet); }
@media (min-width: 800px) {
  .notes-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- 5. sources ------------------------------------------------------------------------------------- */

.legend { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s8); margin-bottom: var(--s6); font-size: 15px; line-height: 20px; font-weight: 600; }
.legend li { display: flex; align-items: center; gap: var(--s2); }
.platforms { display: grid; border-top: 1px solid var(--ink); border-left: 1px solid var(--rule); }
.platforms > li { position: relative; display: grid; gap: var(--s3); align-content: start; padding: var(--s8) var(--s6); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.platforms > li:hover { background: var(--ground); }
.platforms > li > .glyph { width: 40px; height: 40px; margin-bottom: var(--s2); }
.platforms h3 { font-size: 20px; line-height: 28px; }
.platforms__rank { position: absolute; top: var(--s4); right: var(--s4); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.plat__rows { display: grid; gap: var(--s2); }
.plat__rows li { display: flex; align-items: flex-start; gap: var(--s2); color: var(--ink-2); font-size: 16px; line-height: 24px; }
.plat__rows .glyph { flex: none; width: 16px; height: 16px; margin-top: 4px; color: var(--ink); }
.notes { display: grid; gap: var(--s3) var(--gutter); margin-top: var(--s8); }
@media (min-width: 560px) {
  .platforms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .platforms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- 6. pricing: to be announced ---------------------------------------------------------------------- */

.tba { display: grid; gap: var(--gutter); }
.tba__card { display: grid; gap: var(--s4); align-content: start; padding: var(--s8) var(--s6); background: var(--sheet); border: 1px solid var(--rule); }
.tba__card h3 { display: flex; align-items: center; gap: var(--s3); font-size: 20px; line-height: 28px; }
.tba__card h3 .glyph { width: 28px; height: 28px; flex: none; }
.tba__price { font-size: 18px; line-height: 28px; font-weight: 700; }
.tba__card > p:last-child { color: var(--ink-2); max-width: 28em; }
@media (min-width: 700px) {
  .tba { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- 7. questions ------------------------------------------------------------------------------------- */

.faq-grid { display: grid; gap: var(--s8); }
.faqs details { border-top: 1px solid var(--rule); }
.faqs details:last-child { border-bottom: 1px solid var(--rule); }
.faqs summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 64px; padding: var(--s3) 0; font-size: 18px; line-height: 28px; font-weight: 600; cursor: pointer; list-style: none; }
.faqs summary::-webkit-details-marker { display: none; }
.faqs summary .glyph { flex: none; width: 24px; height: 24px; }
.faqs details[open] summary .glyph { transform: rotate(45deg); }
.faqs details > p { padding: 0 var(--s12) var(--s6) 0; max-width: var(--measure); color: var(--ink-2); }
@media (min-width: 900px) {
  .faq-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); }
  .faq-grid__head { grid-column: 1 / 5; align-self: start; position: sticky; top: 104px; }
  .faqs { grid-column: 5 / 13; }
}

/* --- 8. closing action: the first gesture of each product -------------------------------------------------- */

.cta { padding: var(--s16) 0; }
.cta .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s8); }
.cta h2 { font-size: clamp(28px, 2.8vw, 38px); line-height: 1.12; letter-spacing: -0.02em; max-width: 16em; }
.cta__copy > * + * { margin-top: var(--s4); }
.cta p { max-width: var(--lead-measure); font-size: 18px; line-height: 28px; }
.cta__bars { display: grid; gap: var(--s4); }
.searchbar { display: flex; align-items: stretch; min-height: 64px; background: var(--sheet); color: var(--ink); border: 2px solid var(--sheet); text-decoration: none; }
.searchbar:hover { text-decoration: none; }
/* In development: the same bar, muted, with the reason where the action would be */
.searchbar--soon .searchbar__q { color: var(--ink-3); }
.searchbar--soon .searchbar__go, .searchbar--soon:hover .searchbar__go { background: var(--ground); color: var(--ink-3); }
.searchbar__q { display: flex; flex: 1; align-items: center; gap: var(--s3); min-width: 0; padding: 0 var(--s4); font-size: 18px; font-weight: 600; overflow: hidden; }
.searchbar__go { display: flex; align-items: center; justify-content: center; padding: 0 var(--s4); background: var(--ink); color: var(--sheet); border: 2px solid var(--sheet); font-weight: 600; text-align: center; }
.searchbar:hover .searchbar__go { background: var(--mark); color: var(--ink); }
@media (min-width: 560px) {
  .searchbar__go { min-width: 200px; padding: 0 var(--s6); }
}
@media (min-width: 900px) {
  .cta { padding: var(--s24) 0; }
  .cta .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--s16); }
}

/* --- a product's public page ---------------------------------------------------------------------
   The same six sections for each product, in the same order and on the same tones. */

.eyebrow { display: flex; align-items: center; gap: var(--s2); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-3); }
.eyebrow .glyph { width: 20px; height: 20px; flex: none; color: var(--ink); }
.hero--solution { padding: var(--s12) 0 var(--s16); }
.sol-hero { display: grid; gap: var(--s8); }
.sol-hero__copy > * + * { margin-top: var(--s6); }
.sol-hero__copy h1 { max-width: 16em; }
.sol-hero__pic { align-self: center; }
@media (min-width: 1000px) {
  .sol-hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s16); align-items: center; }
}
/* The problem table on a product page spans the page: what is done by hand beside what is
   done here, one row each, instead of a narrow stack beside empty space. */
@media (min-width: 900px) {
  .versus--wide { font-size: 20px; line-height: 28px; }
  .versus--wide thead tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s16); }
  .versus--wide tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s16); align-items: start; padding: var(--s6) 0; }
  .versus--wide tbody td + td { margin-top: 0; }
}
.lane--solo { display: grid; gap: var(--s8); }
@media (min-width: 900px) {
  .lane--solo { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-row: auto; grid-template-rows: none; gap: var(--s16); align-items: start; }
}
.notes-pair--one { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 800px) {
  .notes-pair--one .note-ledger { grid-template-columns: 168px minmax(0, 1fr); column-gap: var(--s8); align-items: start; }
  .notes-pair--one .note-ledger h4 { grid-column: 1 / -1; }
}
/* Which product: one row per question, a column per product; this page's column is marked. */
.compare { font-size: 16px; line-height: 24px; }
.compare th, .compare td { padding: var(--s4) var(--s3) var(--s4) 0; vertical-align: top; }
.compare thead th { padding-bottom: var(--s3); border-bottom: 2px solid var(--ink); font-size: 18px; line-height: 28px; }
.compare thead a { display: inline-flex; align-items: center; gap: var(--s2); text-decoration: none; }
.compare thead a:hover { text-decoration: underline; }
.compare thead .glyph { width: 22px; height: 22px; flex: none; }
.compare tbody th { width: 22%; font-weight: 500; color: var(--ink-3); }
.compare__tag { display: block; margin-top: var(--s1); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-3); }
.compare .compare__here { padding-left: var(--s4); padding-right: var(--s4); background: var(--ground); }
.compare tbody td.compare__here { font-weight: 600; }
/* On a phone the two product columns no longer fit beside the row label (the table's
   narrowest width is 361 px), so each row becomes a label with one line per product, and
   the product's name comes from the cell's data-product. The header row stays for readers
   of screen readers. */
@media (max-width: 599px) {
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; }
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .compare tbody tr { padding: var(--s4) 0; border-bottom: 1px solid var(--rule); }
  .compare tbody th { width: auto; padding: 0 0 var(--s2); border: 0; }
  .compare tbody td { padding: var(--s2) var(--s3); border: 0; }
  .compare tbody td::before { content: attr(data-product); display: block; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-3); }
  .compare .compare__here { padding-left: var(--s3); padding-right: var(--s3); }
}
.proof__fit { flex-basis: 100%; }
.tba--three { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .tba--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.cta__other { font-size: 15px; line-height: 24px; color: var(--rule); }
.cta__other a { color: var(--sheet); font-weight: 600; }

/* --- the company pages: contact, about, use cases, privacy, terms ------------------------------------ */

.pagehead { padding: var(--s12) 0; border-bottom: 1px solid var(--rule); }
.pagehead > .wrap > * + * { margin-top: var(--s4); }
.pagehead h1 { max-width: 18em; }
@media (min-width: 900px) {
  .pagehead { padding: var(--s16) 0; }
}

/* Cells: a bordered grid of short items, one idea each (contact help, principles, what it does). */
.cells { display: grid; border-top: 1px solid var(--ink); border-left: 1px solid var(--rule); }
.cells > li { display: grid; gap: var(--s2); align-content: start; padding: var(--s6); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.cells h3 { font-size: 18px; line-height: 28px; }
.cells p { color: var(--ink-2); font-size: 16px; line-height: 24px; max-width: 34em; }
.cells .glyph { width: 28px; height: 28px; margin-bottom: var(--s2); }
@media (min-width: 700px) {
  .cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cells--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .cells--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* A tile under another block of the same section (the report's notes under its four parts). */
.tile--after { margin-top: var(--gutter); }
/* Links to each product's own section, side by side (the home page's pricing). */
.jumps { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s8); }
.jumps a { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; font-size: 18px; line-height: 28px; font-weight: 600; }
.jumps .glyph { width: 24px; height: 24px; flex: none; }

.channels { display: grid; gap: var(--gutter); }
.channel { display: grid; gap: var(--s2); align-content: start; padding: var(--s8) var(--s6); background: var(--ground); border: 1px solid var(--rule); text-decoration: none; }
a.channel:hover { border-color: var(--ink); text-decoration: none; }
.channel .glyph { width: 32px; height: 32px; margin-bottom: var(--s2); }
.channel h2 { font-size: 20px; line-height: 28px; }
.channel__value { font-size: 18px; line-height: 28px; font-weight: 600; overflow-wrap: anywhere; }
.channel__go { display: inline-flex; align-items: center; gap: var(--s2); margin-top: var(--s2); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 800px) {
  .channels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.about-intro { display: grid; gap: var(--s6); }
.about-intro p { max-width: 36em; font-size: 20px; line-height: 30px; }
@media (min-width: 900px) {
  .about-intro { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s16); }
}

.cases { display: grid; gap: var(--s12) var(--s16); }
.case-group h2 { padding-bottom: var(--s4); margin-bottom: var(--s6); border-bottom: 2px solid var(--ink); font-size: 20px; line-height: 28px; }
.case-group h2 a { display: flex; align-items: center; gap: var(--s3); text-decoration: none; }
.case-group h2 a:hover { text-decoration: underline; }
.case-group h2 .glyph { width: 28px; height: 28px; flex: none; }
.case-group ol { display: grid; gap: var(--s6); }
.case-group li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s4); }
.case-group h3 { font-size: 17px; line-height: 28px; font-weight: 700; }
.case-group li p { margin-top: var(--s1); color: var(--ink-2); max-width: var(--measure); }
@media (min-width: 900px) {
  .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.legal { display: grid; max-width: 44em; }
.legal > li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s4); padding: var(--s6) 0; border-top: 1px solid var(--rule); }
.legal > li:last-child { border-bottom: 1px solid var(--rule); }
.legal__n { font-size: 14px; line-height: 28px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.legal h2 { font-size: 20px; line-height: 28px; }
.legal p { margin-top: var(--s2); color: var(--ink-2); }

/* --- sign-in and error screens ----------------------------------------------------- */

.auth { min-height: 100vh; display: grid; place-items: center; padding: var(--s16) var(--pad); }
.auth__panel { width: min(100%, 420px); }
.auth__panel > * + * { margin-top: var(--s4); }
.auth__panel .brand { display: inline-block; margin-bottom: var(--s6); }
.auth h1 { font-size: 30px; line-height: 36px; }
.auth__status, .auth__fine { font-size: 14px; line-height: 20px; color: var(--ink-3); font-weight: 500; }
.err-code { font-size: 72px; line-height: 1; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.auth--center { text-align: center; }
.auth--center .auth__panel { width: min(100%, 480px); }