/* Hallmark · shape: kept · genre: editorial · theme: brand · redesign: restyle
 * paper: oklch(14.1% 0.009 273) · accent: oklch(72.1% 0.176 35) · display: Clash Grotesk · body: Commissioner · hero: split, the copy left and a reading panel right, the sentence as page text and the popup under "bank" (after Toucan, Grammarly and Superhuman, the developer's pick) · nav: kept, the wordmark, two links and one action over a hairline · footer: kept, the wordmark, one line and two links · signature: kept, the pointer double-clicks bank and the real popup opens · imagery: screenshots 7, captured from the app
 * axes: dark/grotesk-sans/chromatic-vermilion · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V3 · weakest: V, the layout is v5's by request; the system moved instead: no device frames or drawn browser bar, one hairline frame on every capture, a well behind the review section, varied section gaps */
/* Hallmark · waive 38iii · once, in the hero head · the developer chose two-tone Clash heads for VocaPin after the Linear and Stripe audit */
/* Hallmark · dropped the drawn Chrome bar (tab title, address, toolbar icon) · 47a names a hand-drawn browser bar; the article capture and the menu stay */
/* Hallmark · finish-review: subagent · 5 findings · 3 resolved 1 partial 1 unresolved · gap: the vermilion lives in the captures and the selection, as the restrained posture means
 * resolved: the hero popup recaptured on the hero's own sentence; the Before card shown whole, its Explain bar clear; the phone ladder on two rows
 * partial: the toolbar menu hangs off the capture's corner and covers no headline, but no real Chrome toolbar is in the picture yet
 * unresolved then: 44c, the hero popup on the page's right edge, far from the copy; fixed at the developer's review: it opens under "bank" in the reading panel */
/* the page's own tokens, beside the brand's in v6/tokens.css */
:root {
  --color-ink-1: #f4f4f8; --ink-soft: #c9cbdb; --ink-g: #767890; --line-strong: #3a3b46;
  --underline: oklch(96% 0.006 273 / 0.25);
  --btn: #f1f1f5; --btn-hover: #fbfbfd; --btn-ink: #14151d;
  --mark: #e5482a; --mark-ink: #fff7f4;  /* the selection on "bank" */
  --frame: oklch(96% 0.006 273 / 0.12); --frame-hi: oklch(96% 0.006 273 / 0.22);  /* the hairline round every capture, brighter on top */
  --ring: oklch(96% 0.006 273 / 0.7); --shadow: oklch(8% 0.01 273 / 0.5); --mask: oklch(10% 0.01 273);
}
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: 4px; }
/* every text block here is four lines or fewer: even lines, no lone word; the longhand, so .ladder p keeps its nowrap */
p, figcaption, dt, dd { text-wrap-style: balance; }
/* The app is dark too, so each capture of it carries the edge Linear, Raycast and Resend give theirs: a light hairline,
   brighter along the top. No device frame, no drawn browser bar, no shadow. */
.shot { border: var(--rule-hair) solid var(--frame); border-top-color: var(--frame-hi); border-radius: var(--radius-card); }
.g { color: var(--ink-g); }

/* nav */
.nav { position: relative; z-index: var(--z-raised); display: flex; align-items: center; justify-content: space-between; height: 76px; border-bottom: var(--rule-hair) solid var(--color-rule); }
/* the wordmark: Manrope 800 outlined by tools/wordmark.py; its box is the text's 1em line, so the p's tail hangs below */
.brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--color-ink-1); font-size: 22px; line-height: 1; }
.wordmark { overflow: visible; }
.wordmark .dot { fill: var(--color-accent); }
.nav-r { display: flex; align-items: center; gap: var(--space-lg); font-size: var(--text-sm); }
.nav-r a:not(.btn) { text-decoration: none; color: var(--ink-soft); } .nav-r a:not(.btn):hover { color: var(--color-ink-1); }

/* controls: one filled style, every state */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg); border-radius: 10px; font: 600 var(--text-md)/1 var(--font-body); text-decoration: none; white-space: nowrap; background: var(--btn); color: var(--btn-ink); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--btn-hover); }
.btn:active { transform: translateY(1px); }
.btn.sm { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); border-radius: 8px; }
.link { font-size: var(--text-md); font-weight: 500; color: var(--ink-soft); text-decoration: underline; text-decoration-color: var(--underline); text-underline-offset: 6px; }
.link:hover { color: var(--color-ink-1); text-decoration-color: currentColor; }

/* hero: two columns, after Toucan, Grammarly and Superhuman. The copy on the left is the one voice; on the right a reading
   panel holds the sentence as page text, and the popup opens just under "bank", as the real one does, cropped at the
   panel's bottom. The developer picked it after the big sentence read as a second headline. */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-2xl); align-items: center; padding: var(--space-xl) 0 var(--space-2xl); }
.stage { position: relative; container-type: inline-size; overflow: hidden; min-height: 500px; padding: var(--space-2xl) var(--space-2xl) 0; background: var(--color-paper-2); border: var(--rule-hair) solid var(--frame); border-top-color: var(--frame-hi); border-radius: var(--radius-card); }
.sentence { position: relative; margin: 0; max-width: 30em; font: 400 clamp(20px, 5cqi, 28px)/1.5 var(--font-body); color: var(--color-ink-2); user-select: none; text-wrap-style: pretty; isolation: isolate; }  /* keeps the selection behind "bank" and above the panel */
.w { position: relative; display: inline-block; cursor: text; }
.w::before { content: ""; position: absolute; inset: 7% -4px 3% -4px; background: var(--mark); border-radius: 4px; transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease-out); z-index: -1; }
.w.on { color: var(--mark-ink); } .w.on::before { transform: scaleX(1); }
/* visible without the script; the script (html.js) hides it until the double-click lands */
.pop { position: absolute; z-index: var(--z-raised); right: var(--space-2xl); top: 96px; width: var(--pop-w, 360px); height: var(--pop-h, 300px); object-fit: cover; object-position: 50% 0;
  -webkit-mask-image: linear-gradient(to bottom, var(--mask) calc(100% - 48px), transparent); mask-image: linear-gradient(to bottom, var(--mask) calc(100% - 48px), transparent);
  transition: opacity var(--dur-long) ease, transform 0.5s var(--ease-out); }
.js .pop:not(.on) { opacity: 0; transform: translateY(8px); }
.pointer { position: absolute; left: 0; top: 0; z-index: var(--z-dropdown); width: 22px; height: 30px; pointer-events: none; opacity: 0; transition: transform 0.9s var(--ease-in-out), opacity 0.3s ease; filter: drop-shadow(0 2px 3px var(--shadow)); }
.pointer svg { width: 100%; height: 100%; transition: transform 0.08s ease; }
.pointer path { fill: var(--color-ink-1); stroke: var(--color-paper); }
.pointer.press svg { transform: scale(0.88); transform-origin: 3px 3px; }
.ring { position: absolute; z-index: var(--z-dropdown); width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 2px solid var(--ring); opacity: 0; pointer-events: none; }
.ring.go { animation: ring 0.5s ease-out; }
@keyframes ring { from { opacity: 0.9; transform: scale(0.3); } to { opacity: 0; transform: scale(1.4); } }
.copy { position: relative; display: grid; gap: var(--space-lg); }
.copy h1 { max-width: none; font-size: var(--text-section); line-height: 1.02; color: var(--color-ink-1); }
.copy h1 .g { display: block; }  /* the grey half on its own line */
.copy p { font-size: var(--text-lead); line-height: 1.55; color: var(--color-ink-2); max-width: 46ch; }
.actions { display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; }
.copy .try { font-size: var(--text-sm); color: var(--color-muted); }
/* base.css stills every transition under reduced motion; the hero's moving parts are kept out of it and stilled here */
@media (prefers-reduced-motion: reduce) {
  .keep-motion, .keep-motion::before { transition: none; animation: none; }
}

/* sections: two columns on the content grid, text on the picture's top line; the gaps vary and the review section sits
   in a lighter well instead of behind a hairline */
.sec { padding-block: var(--section-gap); border-top: var(--rule-hair) solid var(--color-rule); }
.sec.well { padding-block: var(--section-gap-l); border-top: 0; background: var(--color-paper-2); }
.sec.close { padding-block: var(--section-gap-l); }
.two { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: start; }
.sec h2 { margin: 0 0 var(--space-lg); font-size: var(--text-section); line-height: 1.02; color: var(--color-ink-1); }
.sec p { margin: 0; font-size: var(--text-lead); line-height: 1.6; color: var(--color-ink-2); max-width: 44ch; }
figure { margin: 0; }
figcaption { font-size: var(--text-sm); line-height: 1.5; color: var(--color-muted); }
figcaption b { display: block; margin-bottom: var(--space-2xs); font-weight: 600; color: var(--color-ink); }

/* 1. before and after: the real popup, cut at the same height */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); }
.pair figcaption { min-height: 64px; margin-bottom: var(--space-md); }
/* both cut to one ratio, tall enough for the whole Before card, so its Explain bar (the bridge to After) stays clear */
.cut { aspect-ratio: 720 / 1290; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, var(--mask) 85%, transparent); mask-image: linear-gradient(to bottom, var(--mask) 85%, transparent); }
.cut.whole { -webkit-mask-image: none; mask-image: none; }
.cut img { width: 100%; max-width: 360px; }

/* 2. the phone screen, unframed; the ladder of days */
.phone { display: grid; gap: var(--space-md); justify-items: start; }
.screen { width: 300px; border-radius: 28px; overflow: hidden; }
.screen img { width: 100%; }
.phone figcaption { max-width: 300px; }
.ladder { display: grid; grid-template-columns: 2fr 2fr 3fr; gap: 0 var(--space-2xs); margin-top: var(--space-xl); }
.ladder p { font-size: var(--text-sm); color: var(--color-muted); margin: 0 0 var(--space-md); white-space: nowrap; }
.ladder ol { list-style: none; margin: 0; padding: var(--space-lg) 0 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-top: var(--rule-hair) solid var(--line-strong); }
.ladder li { position: relative; font: 600 var(--text-2xl)/1 var(--font-body); color: var(--color-ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ladder li::before { content: ""; position: absolute; left: 0; top: -28px; width: 9px; height: 9px; border-radius: 50%; background: var(--color-paper-2); box-shadow: inset 0 0 0 2px var(--color-muted); }
.ladder li.next::before { background: var(--color-accent); box-shadow: none; }
.ladder li small { display: block; margin-top: var(--space-xs); font: 400 var(--text-xs)/1 var(--font-body); color: var(--color-muted); letter-spacing: 0; }
.sec .ladder-note { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }

/* 3. where: the article capture with the toolbar menu over its corner, the phone below the menu */
.devices { position: relative; min-height: 614px; }
.browser { position: relative; width: calc(100% - 120px); margin-top: var(--space-xl); }
.browser .article { width: 100%; }
/* the menu hangs off the capture's top-right corner, where Chrome's toolbar would be, and covers no headline */
.browser .menu { position: absolute; top: -40px; right: -24px; width: 220px; border-radius: 10px; }
.devices .phone { position: absolute; right: 0; top: 160px; }
.devices .screen { width: 210px; border-radius: 24px; }
.where-notes { margin: var(--space-xl) 0 0; display: grid; max-width: 44ch; }
.where-notes div { border-top: var(--rule-hair) solid var(--color-rule); padding: var(--space-md) 0; }
.where-notes div:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.where-notes dt { margin-bottom: var(--space-2xs); font-size: var(--text-md); font-weight: 600; color: var(--color-ink); }
.where-notes dd { margin: 0; font-size: var(--text-md); line-height: 1.55; color: var(--color-ink-2); }

/* 4. close: one centred call, as Linear, Notion, Readwise and Framer end; the app icon above it */
.close .container { display: grid; justify-items: center; text-align: center; }
.close .app-icon { width: 64px; height: 64px; margin-bottom: var(--space-xl); }
.close h2 { max-width: none; margin-bottom: var(--space-xl); font-size: var(--text-display); }
.sec .note { margin-top: var(--space-lg); font-size: var(--text-md); color: var(--color-muted); max-width: 40ch; }

.foot { padding: var(--space-xl) 0 var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); }
.foot .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; font-size: var(--text-sm); color: var(--color-muted); }
.foot p { margin: 0; }
.foot a:not(.brand) { color: var(--ink-soft); text-underline-offset: 4px; }
.foot nav { display: flex; gap: var(--space-lg); }
.foot .brand { font-size: 19px; }

@media (max-width: 900px) {
  .nav-r .how { display: none; }
  .hero { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); }
  .stage { min-height: 0; display: grid; gap: var(--space-lg); padding: var(--space-lg) var(--space-lg) 0; }
  .pop { position: static; width: 100%; max-width: 360px; height: 440px; }
  .two, .pair { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .pair figcaption { min-height: 0; }
  /* on a phone the ladder takes two rows, so 30, 60 and 120 keep room between them */
  .ladder { grid-template-columns: 1fr 1fr; gap: var(--space-lg) var(--space-sm); } .ladder > div:last-child { grid-column: 1 / -1; }
  .devices { display: grid; min-height: 0; }
  .browser { width: 100%; margin-top: 0; }
  .browser .menu { top: 8px; right: 8px; width: 170px; }
  .devices .phone { position: relative; top: auto; right: auto; justify-self: end; margin-top: calc(-1 * var(--space-2xl)); }
  .devices .screen { width: 170px; border-radius: 20px; }
  .screen { width: 260px; }
}