/* Aspenote — the site.
 *
 * Light only, committed. Measured across 3,752 reviews of the four biggest apps
 * in this category, 0.05% asked for dark mode and 0.00% asked for a switcher; a
 * reading-heavy, credibility-carrying public page is where light is a default
 * worth choosing rather than a preference to hedge. No theme blocks anywhere,
 * every colour painted explicitly.
 *
 * 🧨 The type is deliberately NOT Instrument Serif over Manrope. Both sit on
 * the list of faces a machine reaches for by default, next to Inter and Space
 * Grotesk, and two safe choices do not make a voice. Fraunces carries an
 * optical-size axis so large sizes are drawn for large rather than scaled up;
 * IBM Plex Sans is engineered and slightly squared against its warmth; Plex
 * Mono handles timestamps and labels, because a transcript's times are data.
 */
:root{
  --paper:#FBF9F5; --paper-2:#F5F2EB; --card:#FFFFFF;
  --ink:#2B2822; --ink-2:#4E4A44; --muted:#7C766C;
  --rule:#E6E1D8; --ember:#A94A22; --ember-2:#8A3A16; --teal:#1B6F7C;
  --night:#1E1B15;
  --serif:Fraunces,Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --pad:clamp(20px,5vw,40px);
}
/* ── Direction ──────────────────────────────────────────────────────────────
 * 🧨 Every left and right in this file is a logical property, because two of
 * the languages this site ships in run right to left. `border-left` on a pull
 * quote puts the rule on the wrong side of an Arabic paragraph, `padding-left`
 * on a list puts the bullet inside the text, and nobody testing in English
 * would ever see either.
 *
 * The one exception is the language menu, which is pinned to the inline END of
 * the header — the side the switcher sits on in both directions.
 * ────────────────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink-2);
  font-family:var(--sans);font-size:16.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
.sheet{max-width:1200px;margin:0 auto;padding:0 var(--pad)}
.mid{max-width:760px}

/* ── header ─────────────────────────────────────────────────────────────── */
.top{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:20px 0;border-bottom:1px solid var(--rule);
}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);margin-inline-end:auto}
.logo svg{width:28px;height:28px;display:block}
.logo b{
  font-family:var(--serif);font-weight:600;font-size:22px;letter-spacing:-.02em;
  font-variation-settings:"opsz" 40,"SOFT" 30,"WONK" 1;
}
.top nav{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.top nav a{
  font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);text-decoration:none;
}
.top nav a:hover{color:var(--ember)}
.langs{position:relative}
.langs summary{
  list-style:none;cursor:pointer;font-family:var(--mono);font-size:11.5px;
  font-weight:600;letter-spacing:.04em;color:var(--muted);
  padding:8px 12px;border:1px solid var(--rule);border-radius:6px;
  display:flex;align-items:center;gap:7px;text-transform:uppercase;
}
.langs summary::-webkit-details-marker{display:none}
.langs summary:hover{color:var(--ember);border-color:var(--ember)}
.langs ul{
  position:absolute;inset-inline-end:0;top:calc(100% + 6px);margin:0;padding:6px;
  list-style:none;background:var(--card);border:1px solid var(--rule);
  border-radius:8px;min-width:170px;z-index:20;
  box-shadow:0 8px 26px rgba(43,40,34,.10);
}
.langs li a{
  display:block;padding:8px 11px;border-radius:5px;text-decoration:none;
  color:var(--ink-2);font-size:14.5px;
}
.langs li a:hover{background:var(--paper-2);color:var(--ink)}
.langs li a[aria-current="true"]{color:var(--ember);font-weight:600}
.btn{
  background:var(--ember);color:#FBF9F5;text-decoration:none;font-weight:600;
  font-size:14.5px;padding:11px 20px;border-radius:8px;white-space:nowrap;
}
.btn:hover{background:var(--ember-2)}
.btn.lg{font-size:16px;padding:16px 32px;border-radius:10px;display:inline-block}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero{padding:clamp(46px,8vw,80px) 0 clamp(34px,5vw,54px);text-align:center}

/* Three true things, where the competition puts a borrowed logo wall.
 * Ticks, not bullets: each one is a thing the product does, not a list item. */
.proof{
  list-style:none;margin:20px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;
}
.proof li{
  display:flex;align-items:center;gap:7px;
  font-size:13.5px;color:var(--ink-2);
}
.proof li::before{
  content:"";flex:none;width:13px;height:7px;
  border:solid var(--ember);border-width:0 0 1.8px 1.8px;
  transform:rotate(-45deg);margin-top:-4px;
}

/* ── the hero, side by side once there is room ───────────────────────────── */
/* 🧨 Stacked, the primary button was BELOW THE FOLD on every viewport
 * measured — 1440x900, 1280x800 and a phone — and on the smaller laptop the
 * lede went with it. A landing page whose call to action cannot be seen
 * without scrolling is a landing page with no call to action.
 *
 * The demo stays FIRST in the DOM, so a phone still sees the product working
 * before it reads a word about it; `order` puts the words on the left once
 * the screen is wide enough for both to sit above the fold together. */
@media (min-width:940px){
  .hero{
    display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    /* 🧨 Column gap and row gap are different problems. One long `gap` put
     * 66px between the hero and the photograph BELOW it as well as between the
     * two columns, and that row gap stacked with the photograph's own top
     * margin into 162px of nothing. */
    column-gap:clamp(36px,4.5vw,66px);row-gap:0;
    align-items:center;text-align:start;
    padding-block:clamp(30px,4vw,54px) clamp(30px,4vw,48px);
  }
  /* 🧨 All THREE children need an order, not two.
   *
   * The hero also contains the full-bleed photograph, whose default `order:0`
   * sorted it ahead of both and pushed the card into a second row — the demo
   * ended up below the fold while the text sat above it, which is the exact
   * arrangement this media query exists to prevent. */
  .herotext{order:1}
  .tape{order:2;margin:0;align-self:start}
  .shot{order:3;grid-column:1 / -1;margin-top:clamp(24px,3vw,40px)}
  .hero h1{margin-inline:0;max-width:13ch;font-size:clamp(38px,4.4vw,60px)}
  .hero .lede{margin-inline:0;max-width:44ch;font-size:clamp(16px,1.35vw,18px)}
  .proof{justify-content:flex-start;gap:8px 20px}
  /* 164px of nothing sat between the hero and the photograph. The hero owns
   * its own bottom edge now rather than being padded away from the next
   * section. */
  .hero{padding-block-end:clamp(18px,2.4vw,32px)}
}
h1{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(40px,7vw,76px);line-height:1.0;letter-spacing:-.032em;
  color:var(--ink);margin:0 auto 22px;max-width:15ch;
  font-variation-settings:"opsz" 144,"SOFT" 30,"WONK" 1;
  text-wrap:balance;
}
h1 em{font-style:normal;color:var(--ember)}
.lede{
  font-size:clamp(17px,2.2vw,19.5px);line-height:1.55;color:var(--ink-2);
  max-width:56ch;margin:0 auto 28px;
}
/* ⭐ Full bleed, edge to edge.
 *
 * 🧨 The hero photograph sat inside the text column with a border round it, and
 * beside a competitor's page it read as small and boxed-in — the difference
 * between a product photograph and a thumbnail. A hero image contained by the
 * same measure as the paragraph above it always looks timid.
 *
 * The margin trick breaks it out of .sheet without a second wrapper: 50vw each
 * side, pulled back by half the container. `100vw` alone would overflow by the
 * width of a scrollbar and give the page a horizontal scroll on Windows. */
.shot{
  margin:clamp(34px,5vw,56px) calc(50% - 50vw) 0;
  width:100vw;max-width:100vw;overflow:hidden;
}
/* 🧨 `object-position` matters as much as the crop height.
 *
 * A 16:9 photograph forced into a 576px band loses 228px, and `cover` takes it
 * evenly from top and bottom — straight through the faces. The subjects sat
 * headless above the fold, which reads as a broken image rather than a design.
 * Biasing the crop upward keeps the people in it. */
.shot img{width:100%;height:auto;max-height:min(58vh,560px);
  object-fit:cover;object-position:center 32%}

/* ── the band under the hero ─────────────────────────────────────────────── */
/* Where the competition puts a borrowed logo wall. We have no users to count
 * and no logos to borrow, but we do have the one thing none of them can show. */
.band{background:var(--night);color:#F2EFE8;padding:clamp(48px,7vw,84px) 0}
/* 🧨 Heading and body side by side once there is room.
 *
 * Stacked, both were capped at a readable measure and the right half of a
 * 1120px band sat empty — the same fault the note card had, and it reads the
 * same way: not restraint, a layout that stopped early. */
.band-h{font-family:var(--serif);font-size:clamp(26px,3.6vw,42px);line-height:1.12;
  margin:0 0 12px;color:#F7F4EE;max-width:16ch;
  font-variation-settings:"opsz" 120,"SOFT" 24}
.band-p{font-size:clamp(15px,1.6vw,17.5px);line-height:1.62;margin:0 0 clamp(28px,3.5vw,44px);
  color:#B9B2A7;max-width:52ch}
@media (min-width:880px){
  .band .sheet{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
    column-gap:clamp(40px,5vw,80px);align-items:end}
  .band-h{margin-bottom:0;align-self:start}
  .band-p{margin-bottom:0}
  .scripts,.more,.xlate{grid-column:1 / -1}
  .scripts{margin-top:clamp(34px,4vw,52px)}
}
.scripts{list-style:none;margin:0;padding:0;
  display:grid;gap:clamp(20px,2.6vw,34px) clamp(24px,3vw,44px);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.scripts li{display:flex;flex-direction:column;gap:7px;
  padding-inline-start:14px;border-inline-start:2px solid rgba(224,130,79,.5)}
/* The specimen line. Large, because the point is that it is READABLE in its
   own script, not that it exists. */
.sc{font-size:clamp(17px,2.1vw,23px);line-height:1.4;color:#F7F4EE}
.scn{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:#8F887E}

/* Range, as a footnote. Small deliberately: "how many languages" is not the
 * question the buyer is asking, and answering it loudly makes the page about
 * somebody else's problem. */
.more{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
  margin:clamp(22px,2.6vw,32px) 0 0;font-size:14px;color:#8F887E}
.more span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase}
.more b{font-weight:400;color:#B9B2A7}

/* ⭐ The other half of the claim, demonstrated rather than asserted.
 * The source is always Japanese; the target is the reader's own language, so
 * the sentence performs the feature it describes. */
.xlate{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  margin:clamp(28px,3.4vw,44px) 0 0;padding-top:clamp(22px,2.6vw,32px);
  border-top:1px solid rgba(255,255,255,.12);
}
.xl-a{font-size:clamp(16px,1.9vw,21px);color:#B9B2A7}
.xl-b{font-size:clamp(16px,1.9vw,21px);color:#F7F4EE;font-weight:500}
/* An arrow drawn, not typed: "→" renders as a tofu box in several of the
   fonts a non-Latin locale falls back to. */
.xl-arrow{
  flex:none;width:26px;height:9px;position:relative;
  border-bottom:1.6px solid #E0824F;
}
.xl-arrow::after{
  content:"";position:absolute;inset-inline-end:0;bottom:-4.4px;
  width:7px;height:7px;border:solid #E0824F;border-width:1.6px 1.6px 0 0;
  transform:rotate(45deg);
}
[dir="rtl"] .xl-arrow{transform:scaleX(-1)}
.xl-n{
  flex-basis:100%;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:#8F887E;
}

/* ── the opening: the demo owns the screen, then becomes part of the page ─ */
/* 🧨 Everything here is additive and JS-driven. With no JavaScript, a stale
 * browser, or `prefers-reduced-motion`, none of these classes are ever applied
 * and the page is simply the page — the demo card sits in its slot and plays.
 * An intro that can leave somebody staring at a black rectangle is not worth
 * having. */
.curtain{
  position:fixed;inset:0;background:var(--night);z-index:55;
  opacity:1;transition:opacity .55s ease;
}
.curtain.gone{opacity:0;pointer-events:none}

/* The card, promoted to the whole viewport. `inset` is animated rather than a
 * transform so the text REFLOWS as it shrinks — a scaled card is a screenshot
 * being zoomed, which is exactly what it must not look like. */
.tape.full{
  position:fixed;inset:0;z-index:60;margin:0;border-radius:0;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(24px,7vw,90px);
  box-shadow:none;
  transition:inset .78s cubic-bezier(.65,.02,.24,1),
             border-radius .78s cubic-bezier(.65,.02,.24,1),
             padding .78s cubic-bezier(.65,.02,.24,1);
}
/* At full size the type is a title card, not a widget. */
.tape.full .line{font-size:clamp(24px,5.2vw,54px);line-height:1.35}
.tape.full .wave{height:clamp(40px,6.5vw,74px);margin-bottom:clamp(18px,3vw,32px)}
/* 🧨 No reserve at full screen, and a reserve once landed.
 *
 * The two are opposite requirements and it took measuring to see it. In the
 * page the card sits ABOVE the headline, so resizing between acts would push
 * the whole page down every nine seconds — the reserve is what stops that. At
 * full screen the card is a fixed overlay with nothing beneath it, so
 * reserving buys nothing and costs 253 measured pixels of dead space. The
 * height is set from JS: exact while full, the larger of the two once landed. */
.tape.full .ntitle{font-size:clamp(30px,5.6vw,58px)}
.tape.full .nsum{font-size:clamp(16px,2.2vw,22px)}
.tape.full .todo li{font-size:clamp(15px,2vw,20px)}
.tape.full .tape-top,.tape.full .tape-note{font-size:clamp(11px,1.4vw,14px)}

/* A way out, always. Nobody should be held by an animation they have seen. */
.skip{
  position:fixed;z-index:61;inset-block-end:clamp(18px,4vw,34px);
  inset-inline-end:clamp(18px,4vw,34px);
  font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:#A9A49B;background:none;border:0;cursor:pointer;padding:10px 12px;
  opacity:0;transition:opacity .4s ease .8s;
}
.skip.show{opacity:1}
.skip:hover{color:#F2EFE8}
body.taken{overflow:hidden}

/* ── the live demo: our one unfakeable asset ────────────────────────────── */
/* ⭐ First in the document, and first on the screen.
 *
 * 🧨 It used to sit below the headline, the lede and the button, and a reader
 * told us he only read the words because he was asked to. A page that explains
 * before it shows is asking for a favour. */
.tape{
  /* Queried by the note inside it: the card is half the page in the two-column
   * hero and the whole screen during the opening, and a viewport media query
   * cannot tell those apart. */
  container-type:inline-size;
  background:var(--night);color:#F2EFE8;border-radius:18px;
  padding:clamp(20px,3.4vw,28px);margin:0 0 clamp(30px,5vw,44px);text-align:start;
  box-shadow:0 24px 60px -28px rgba(20,16,12,.55);
}
.tape-top{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:13px;
  margin-bottom:15px;border-bottom:1px solid rgba(255,255,255,.11);
}
.rec{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;
  font-weight:600;letter-spacing:.1em;color:#E0824F;transition:color .35s ease}
.rec i{width:7px;height:7px;border-radius:50%;background:#E0824F;display:block;
  transition:background .35s ease}
/* The pill stops claiming to record the moment the note exists. */
.rec.done{color:#5FCBDB}
.rec.done i{background:#5FCBDB;animation:none}
@media (prefers-reduced-motion:no-preference){.rec i{animation:pulse 1.7s ease-in-out infinite}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.2}}
.secs{font-family:var(--mono);font-size:11px;font-weight:600;color:#A9A49B;
  font-variant-numeric:tabular-nums}
.heard{margin-inline-start:auto;font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.04em;color:#A9A49B;text-transform:uppercase}
.heard b{color:#5FCBDB;font-weight:600}

/* ── the waveform ───────────────────────────────────────────────────────── */
/* ⭐ One element, moving on `transform`. The GPU does it and the main thread
 * never hears about it.
 *
 * 🧨 What this replaces animated `height` on ninety-six divs — ninety-six
 * layout-and-paint operations every frame, for a decoration, while the page
 * was still settling. */
.wave{
  height:clamp(30px,4.4vw,42px);margin-bottom:16px;overflow:hidden;
  opacity:1;transition:opacity .5s ease,height .5s ease,margin .5s ease;
  /* Both ends dissolve rather than being chopped off. Audio does not begin at
   * the left edge of a box. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.wf{display:block;width:100%;height:100%}
.wf path{stroke:#E0824F;fill:none;transition:stroke .5s ease}
/* Exactly one period of a periodic shape, so the loop has no seam. */
@keyframes wfscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:no-preference){
  .wf-run{animation:wfscroll 15s linear infinite}
}
/* Settled: the audio has stopped, so the waveform stops. It stays visible —
 * this is the recording that was just made, not a widget that switched off. */
.wave.idle,.tape.full .wave.idle{opacity:.5;height:clamp(22px,2.8vw,30px);margin-bottom:15px}
.wave.idle .wf-run{animation-play-state:paused}
.wave.idle .wf path{stroke:#5FCBDB}

/* ── the two acts share one box, so the card never jumps ────────────────── */
/* 🧨 A GRID with both acts in the same cell — not absolute positioning.
 *
 * Absolute children give the container no intrinsic height, so it needed a
 * guessed `min-height`. The guess was too small for the note at full screen
 * and the footer line printed straight through the action items. A grid cell
 * is as tall as its tallest occupant, which is the thing that actually had to
 * be true, and the card still never resizes between acts. */
/* 🧨 `grid-template-rows: minmax(0,1fr)` is load-bearing.
 *
 * With `auto` rows the single row is sized by the TALLER occupant — the note —
 * even when the container has been given an explicit height. The caption, told
 * to centre itself, then centred inside a 298px row while the box was clamped
 * to 73px, landed outside it, and `overflow:hidden` deleted it from the page.
 * Nothing errored; the text was simply not there.
 *
 * A `1fr` row is exactly as tall as the container, so centring means what it
 * says. */
.acts{display:grid;grid-template-rows:minmax(0,1fr);overflow:hidden;
  transition:height .45s cubic-bezier(.4,0,.2,1)}
.act{grid-area:1 / 1;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .4s ease,transform .4s ease}
.act.on{opacity:1;visibility:visible;transform:none}

/* 🧨 CENTRED in the cell, not pinned to its floor.
 *
 * The cell has to reserve the NOTE's height so the card never resizes between
 * acts. Bottom-aligning the caption inside that reserve left 253 measured
 * pixels of nothing between the waveform and the words — which reads as a
 * layout accident, not as composition. Centring splits the same reserve evenly
 * above and below, so the space becomes margin instead of a hole, and the
 * words sit on the optical centre where the eye already is. */
#act-live{align-self:center}
.line{font-size:clamp(16px,2.5vw,22px);line-height:1.55;margin:0;color:#F2EFE8;width:100%}
.cur{display:inline-block;width:2px;height:1em;vertical-align:-.14em;background:#E0824F;
  margin-inline-start:2px}
@media (prefers-reduced-motion:no-preference){.cur{animation:blink 1s steps(1) infinite}}
@keyframes blink{50%{opacity:0}}

/* ── act three: the thing the whole product is for ──────────────────────── */
.ntitle{font-family:var(--serif);font-size:clamp(21px,3.2vw,29px);line-height:1.14;
  margin:0 0 14px;color:#F7F4EE;font-variation-settings:"opsz" 100,"SOFT" 20}
/* 🧨 Two columns, because 53% of this card measured as empty black.
 *
 * A summary capped at a readable measure inside a 1064px card leaves half the
 * surface bare, and a half-empty slab does not read as restraint — it reads as
 * a layout that broke. The summary and the things people now owe are two
 * different kinds of information, so they earn two columns rather than one
 * narrow stack in a wide box. */
.ncols{display:grid;gap:14px 52px}
@container (min-width:640px){
  .ncols{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:start}
}
.nsum{font-size:clamp(14px,1.9vw,16px);line-height:1.62;margin:0;color:#CFC9BF}
.nlabel{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:#A9A49B;margin:0 0 9px}
.todo{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.todo li{display:flex;align-items:flex-start;gap:10px;font-size:clamp(13.5px,1.8vw,15px);
  line-height:1.45;color:#E8E3DA;opacity:0;transform:translateY(4px);
  transition:opacity .4s ease,transform .4s ease}
.todo li.in{opacity:1;transform:none}
.todo li b{color:#F7F4EE;font-weight:600}
.todo li i{flex:none;width:15px;height:15px;margin-top:2px;border-radius:4px;
  border:1.5px solid #5FCBDB;position:relative}
.todo li i::after{content:"";position:absolute;inset-inline-start:4px;top:1px;
  width:4px;height:8px;border:solid #5FCBDB;border-width:0 1.6px 1.6px 0;
  transform:rotate(45deg) scale(0);transition:transform .3s ease .12s}
.todo li.in i::after{transform:rotate(45deg) scale(1)}

.tape-note{margin:16px 0 0;padding-top:13px;border-top:1px solid rgba(255,255,255,.11);
  font-size:12.5px;color:#A9A49B;transition:color .3s ease}
/* While it is working, the footer says so — the app's own stage line. */
.tape-note.busy{color:#E0824F;font-family:var(--mono);font-size:11.5px;letter-spacing:.03em}

/* ── the four ways in ────────────────────────────────────────────────────── */
/* 🧨 The app has taken input four ways since day one and the site mentioned a
 * file zero times. Two of them — a recording you already have, and a link —
 * are the ones with nothing to do with meetings, so hiding them made this look
 * like a single-purpose recorder and lost half the audience with it. */
.ways{padding:clamp(52px,7vw,88px) 0 clamp(20px,3vw,36px)}
.ways-h{color:var(--ink);max-width:14ch}
.ways-p{color:var(--ink-2);max-width:46ch}
.way{
  list-style:none;margin:clamp(30px,4vw,46px) 0 0;padding:0;
  display:grid;gap:clamp(26px,3vw,40px);
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.way li{display:flex;flex-direction:column;gap:9px}
.wi{width:26px;height:26px;color:var(--ember);margin-bottom:2px}
.way h3{
  font-family:var(--sans);font-size:16.5px;font-weight:600;margin:0;
  color:var(--ink);letter-spacing:-.01em;
}
.way p{font-size:14.5px;line-height:1.58;margin:0;color:var(--ink-2)}
@media (min-width:880px){
  .ways .sheet{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
    column-gap:clamp(40px,5vw,80px);align-items:end}
  .ways-h{margin-bottom:0}
  .ways-p{margin-bottom:0}
  .way{grid-column:1 / -1}
}

/* ── feature rows: text one side, photograph the other ──────────────────── */
/* The image is the wider half. Even columns read as a spec sheet; giving the
 * photograph the larger share is what makes a marketing page feel like one. */
.feat{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(30px,5vw,72px);
  align-items:center;padding:clamp(54px,8vw,104px) 0;
  border-top:1px solid var(--rule);
}
.feat.flip .copy{order:2}
@media (max-width:800px){
  .feat{grid-template-columns:1fr;gap:26px;padding:44px 0}
  .feat.flip .copy{order:0}
  /* on a phone the photograph goes full bleed too — a 92vw image with a
     rounded corner on each side is neither one thing nor the other */
  .feat img{
    margin:0 calc(50% - 50vw);width:100vw;max-width:100vw;border-radius:0;
    border-inline:0;aspect-ratio:16/10;
  }
}
.eyebrow{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--teal);margin:0 0 12px;
}
h2{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(26px,3.8vw,38px);line-height:1.08;letter-spacing:-.025em;
  color:var(--ink);margin:0 0 14px;
  font-variation-settings:"opsz" 100,"SOFT" 26,"WONK" 1;
  text-wrap:balance;
}
h3{font-size:15.5px;font-weight:600;color:var(--ink);margin:0 0 4px}
p{margin:0 0 15px;max-width:58ch}
p:last-child{margin-bottom:0}
a{color:var(--ember);text-underline-offset:3px}
.feat img{
  border-radius:18px;border:1px solid var(--rule);width:100%;
  aspect-ratio:3/2;object-fit:cover;
}
ul.ticks{list-style:none;margin:16px 0 0;padding:0}
ul.ticks li{
  position:relative;padding-inline-start:26px;margin-bottom:9px;font-size:15.5px;
}
ul.ticks li::before{
  content:"";position:absolute;inset-inline-start:0;top:.55em;width:9px;height:9px;
  border-radius:50%;background:var(--ember);
}

/* ── the quote ──────────────────────────────────────────────────────────── */
.quote{border-inline-start:3px solid var(--teal);padding-inline-start:22px;margin:22px 0}
.quote p{
  font-family:var(--serif);font-size:clamp(19px,2.9vw,26px);line-height:1.28;
  letter-spacing:-.018em;color:var(--ink);margin:0 0 9px;max-width:28ch;
  font-variation-settings:"opsz" 90,"SOFT" 30;
}
.quote cite{display:block;font-style:normal;font-size:13.5px;color:var(--muted)}

/* ── pricing ────────────────────────────────────────────────────────────── */
.pricing{padding:clamp(46px,7vw,84px) 0;border-top:1px solid var(--rule);text-align:center}
.plans{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:30px auto 0;
  max-width:760px;text-align:start;
}
@media (max-width:620px){.plans{grid-template-columns:1fr}}
.plan{background:var(--card);border:1px solid var(--rule);border-radius:16px;padding:26px}
.plan.pro{border-color:var(--ember);border-width:1.5px}
.plan h3{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin-bottom:10px;
}
.plan .price{
  font-family:var(--serif);font-size:40px;line-height:1;color:var(--ink);
  margin:0 0 4px;letter-spacing:-.02em;font-variation-settings:"opsz" 90,"SOFT" 24;
}
.plan .per{font-size:13px;color:var(--muted);margin:0 0 16px}
.plan ul{list-style:none;margin:0;padding:0}
.plan li{font-size:14.5px;margin-bottom:8px;padding-inline-start:20px;position:relative;color:var(--ink-2)}
.plan li::before{content:"";position:absolute;inset-inline-start:0;top:.55em;width:7px;height:7px;
  border-radius:50%;background:var(--teal)}

/* ── close ──────────────────────────────────────────────────────────────── */
.close{padding:clamp(46px,7vw,84px) 0;text-align:center;border-top:1px solid var(--rule)}
.close h2{max-width:18ch;margin-inline:auto}

/* ── documents ──────────────────────────────────────────────────────────── */
.doc{padding:clamp(34px,5vw,56px) 0 0}
.doc h1{text-align:start;margin-inline-start:0;font-size:clamp(32px,5.4vw,50px);max-width:20ch}
.doc .lede{margin-inline-start:0;text-align:start}
.doc h2{font-size:clamp(20px,2.9vw,26px);margin:36px 0 10px}
.doc h3{margin:20px 0 5px}
.doc ul{padding-inline-start:20px;max-width:60ch}
.doc li{margin-bottom:7px}
.stamp{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:0 0 14px}
table{width:100%;border-collapse:collapse;margin:18px 0;font-size:14.5px;display:block;overflow-x:auto}
th,td{text-align:start;padding-block:11px;padding-inline:0 16px;border-bottom:1px solid var(--rule);vertical-align:top}
th{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);font-weight:600}
code{background:var(--paper-2);padding:2px 6px;border-radius:4px;font-size:13.5px}

footer{
  border-top:1px solid var(--rule);margin-top:clamp(40px,6vw,64px);
  padding:24px 0 48px;font-size:12.5px;color:var(--muted);
  display:flex;gap:22px;flex-wrap:wrap;align-items:baseline;
}
footer nav{display:flex;gap:20px;flex-wrap:wrap}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--ember)}
footer .rights{margin-inline-start:auto}


/* ── Right to left, and the scripts that need their own face ────────────── */
[dir="rtl"] .tape,[dir="rtl"] .plans{text-align:start}
[dir="rtl"] .cur{margin-inline-start:2px}

/* 🧨 Nastaliq is a sloped, deeply-stacked script: at our normal line-height its
 * descenders collide with the line beneath. It needs room, and it needs a real
 * size bump to stay legible at body scale. */
html[lang="ur"] body{font-family:"Noto Nastaliq Urdu",var(--sans);line-height:2.15;font-size:17px}
html[lang="ur"] h1,html[lang="ur"] h2,html[lang="ur"] .price{
  font-family:"Noto Nastaliq Urdu",var(--serif);line-height:1.9;font-variation-settings:normal;
}
html[lang="ar"] body{font-family:"Noto Sans Arabic",var(--sans);line-height:1.85}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] .price{
  font-family:"Noto Sans Arabic",var(--serif);line-height:1.3;font-variation-settings:normal;
}
html[lang="hi"] body{font-family:"Noto Sans Devanagari",var(--sans);line-height:1.78}
html[lang="hi"] h1,html[lang="hi"] h2{font-family:"Noto Sans Devanagari",var(--serif);font-variation-settings:normal}
html[lang="ja"] body{font-family:"Noto Sans JP",var(--sans)}
html[lang="ja"] h1,html[lang="ja"] h2{font-family:"Noto Sans JP",var(--serif);font-variation-settings:normal;letter-spacing:-.01em}
html[lang="zh"] body{font-family:"Noto Sans SC",var(--sans)}
html[lang="zh"] h1,html[lang="zh"] h2{font-family:"Noto Sans SC",var(--serif);font-variation-settings:normal;letter-spacing:-.01em}
html[lang="ko"] body{font-family:"Noto Sans KR",var(--sans)}
html[lang="ko"] h1,html[lang="ko"] h2{font-family:"Noto Sans KR",var(--serif);font-variation-settings:normal}

/* 🧨 A menu of eighteen languages is a scroll, not a list. Two columns and a
 * capped height, so it never runs off the bottom of a phone. */
.langs ul{
  max-height:min(62vh,420px);overflow-y:auto;min-width:300px;
  display:grid;grid-template-columns:1fr 1fr;gap:2px;
}
@media (max-width:520px){.langs ul{min-width:min(78vw,300px)}}

/* ── Phones ─────────────────────────────────────────────────────────────────
 *
 * 🧨 The header carries five things — logo, three nav links, a language menu
 * and a call to action — and at 375px they wrapped into a ragged three-row
 * block with the button orphaned on its own line. Flex-wrap is not a mobile
 * layout; it is what happens when there isn't one.
 *
 * So on a phone the header becomes an explicit two-row grid: identity and the
 * two controls on the first row, section links centred underneath. Everything
 * a thumb needs stays on the row nearest the top.
 * ────────────────────────────────────────────────────────────────────────── */
@media (max-width:700px){
  .top{
    display:grid;
    grid-template-columns:auto 1fr auto auto;
    grid-template-areas:"logo gap lang cta" "nav nav nav nav";
    gap:12px 10px;padding:14px 0;
  }
  .logo{grid-area:logo;margin-inline-end:0}
  .logo b{font-size:19px}
  .logo svg{width:24px;height:24px}
  .langs{grid-area:lang}
  .langs summary{padding:7px 10px;font-size:11px}
  .top > .btn{grid-area:cta;padding:9px 14px;font-size:13.5px}
  .top nav{
    grid-area:nav;justify-content:space-between;gap:0;
    padding-top:12px;border-top:1px solid var(--rule);
  }
  .top nav a{font-size:11px}

  /* One tap target, not two half ones. */
  .btn.lg{width:100%;text-align:center;padding:17px 20px}

  /* The demo is the thing people came to see; give it the width. */
  .tape{
    margin-inline:calc(50% - 50vw);width:100vw;max-width:100vw;
    border-radius:0;padding:22px var(--pad);
  }
  .tape-top{gap:10px}
  .heard{font-size:10px;letter-spacing:.02em}
  /* Measured: the button finished 34px past the fold on a 390x844 phone.
   * These four numbers buy it back without shrinking anything anyone reads. */
  .tape{margin-bottom:18px;padding:18px var(--pad)}
  h1{margin-bottom:11px}
  .lede{margin-bottom:16px;font-size:15.5px}
  .hero{padding-top:10px}
  /* Kept, not dropped: these three lines are the argument. They are just
   * quieter on a phone, where every pixel above the fold is contested. */
  .proof{margin-top:14px;gap:6px 14px}
  .proof li{font-size:12.5px}
  /* 🧨 The two acts are absolutely positioned over each other, so the box has
   * to reserve the taller of them. On a narrow screen the transcript wraps to
   * far more lines than the note, and without this the card collapses when the
   * note appears and the whole page jumps under the reader's thumb. */
  .acts{min-height:15.5em}

  /* First in the document AND first on the screen: no gap above it. */
  .hero{padding-top:18px}
  h1{font-size:clamp(34px,9.4vw,46px);max-width:none}
  .lede{font-size:16.5px}

  /* A wide table on a narrow screen is a scroll nobody discovers. Two of these
     carry the privacy commitments, so they get a visible edge and a hint. */
  .doc table{
    -webkit-overflow-scrolling:touch;
    background:linear-gradient(to right,var(--paper) 30%,rgba(251,249,245,0)),
               linear-gradient(to left,var(--paper) 30%,rgba(251,249,245,0)) 100% 0;
    background-size:36px 100%,36px 100%;background-repeat:no-repeat;
    background-attachment:local,local;
  }
  th,td{padding-inline-end:14px;font-size:14px}

  .plan{padding:22px}
  .plan .price{font-size:34px}
  footer{gap:14px;padding-bottom:40px}
  footer .rights{margin-inline-start:0;width:100%}
}

/* Very narrow: the nav labels start to crowd the switcher. */
@media (max-width:400px){
  .top nav a{font-size:10.5px;letter-spacing:.02em}
  .langs summary{font-size:10.5px;padding:7px 8px}
  .top > .btn{padding:9px 12px;font-size:13px}
}