@import url("./form.css");
/* The free result page. Sections alternate paper, marble, and one dark band for the heel. */
/* Full-bleed bands whose content lines up with the site container. */
body[data-view='result'] .site-nav { background: var(--paper); }
.result { --head-gap: clamp(28px, 3.4vw, 48px); }
.result > section {
  padding-block: clamp(56px, 9vw, 120px);
  padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
}

/* ── Reveal: the cover's payoff (audit E4) ───────────── */
/* The kit's ownership line: blank (stone, the empty track) ahead of the arrow-pen's nib and inked
   crimson behind it, because the line is the stake. Three static poses land with the three colophon
   lines (0.2s, 0.8s and 1.4s, the lines' own delays): the pen steps a third along, and the paper-backed
   blank rest of the line slides off with the nib while its stone rule counter-slides, so it stays in
   register. The resting style is the final pose and every step fills both ways, so reduced motion
   (base.css zeroes delays and durations) shows the final frame at once. Transform only; no motion
   clock. Geometry from the kit boxes: the rule runs 12..228 of 240 (5%..95%), and the pen's nib tip
   is (23, 187) of 160x200. */
.reveal { --w: min(72vw, 460px); --pen: calc(var(--w) * 0.26); min-height: calc(100dvh - var(--nav-h)); display: grid; place-content: center; padding: var(--gutter); }
/* Room above for the pen, and to the right for its body past the line's end (137 of its 160 units
   lie right of the nib), so the final pose never overflows a phone. */
.reveal__stage { position: relative; width: var(--w); margin: calc(var(--w) * 0.18) calc(var(--pen) * 137 / 160 - var(--w) * 0.05) 0 0; }
/* The line's layers slide inside their own clip, so nothing widens the page; the rest clips its stone rule. */
.reveal__line { position: relative; display: block; overflow: hidden; }
.reveal__rule { --stake: var(--crimson); display: block; width: 100%; height: auto; }
.reveal__rule--rest { --stake: var(--stone-2); animation: reveal-hold 1.4s step-end both; transform: translateX(-95%); }
.reveal__rest { position: absolute; inset: 0; overflow: hidden; background: var(--paper); animation: reveal-rest 1.4s step-end both; transform: translateX(95%); }
/* A zero-width rider carries the pen in line widths; its nib tip sits on the line's centre (34.5 of 60). */
.reveal__rider { position: absolute; inset: 0 auto 0 0; width: 0; animation: reveal-pen 1.4s step-end both; transform: translateX(calc(var(--w) * 0.9)); }
.reveal__pen { position: absolute; left: calc(var(--w) * 0.05 - var(--pen) * 23 / 160); bottom: 34%; width: var(--pen); max-width: none; height: auto; }
@keyframes reveal-pen { 0% { transform: none; } 14.29% { transform: translateX(calc(var(--w) * 0.3)); } 57.14% { transform: translateX(calc(var(--w) * 0.6)); } 100% { transform: translateX(calc(var(--w) * 0.9)); } }
@keyframes reveal-rest { 0% { transform: none; } 14.29% { transform: translateX(35%); } 57.14% { transform: translateX(65%); } 100% { transform: translateX(95%); } }
@keyframes reveal-hold { 0% { transform: none; } 14.29% { transform: translateX(-35%); } 57.14% { transform: translateX(-65%); } 100% { transform: translateX(-95%); } }
/* The existing lines, printed as the page's colophon under the line and numbered like its heads. */
.reveal__lines { width: var(--w); margin-top: 30px; padding-left: 5%; display: grid; gap: 12px; counter-reset: reveal; font-size: 1.05rem; line-height: 1.3; }
.reveal__lines li { display: grid; grid-template-columns: 2.4em minmax(0, 1fr); align-items: baseline; counter-increment: reveal; animation: rise 0.4s var(--ease) backwards; animation-delay: calc(var(--i) * 0.6s + 0.2s); }
.reveal__lines li::before { content: counter(reveal, decimal-leading-zero); font: 400 1.35em/1 var(--font-display); color: var(--crimson); }

/* ── Running heads (audit T3) ────────────────────────── */
/* Each result page opens with its number and existing kicker over the page rule (print.css styles the
   head; this only places it across the section's grid). Numbers run on from 01 through every section
   present (result.js resultHeads). A section that is not a grid keeps the grid's gap under its head. */
.r-head { grid-column: 1 / -1; padding-bottom: 12px; border-bottom: 1px solid currentColor; }
.result > :is(.next, .bench, .flags, .gate--open) > .r-head { margin-bottom: var(--head-gap); }

/* ── Hero ────────────────────────────────────────────── */
.r-hero { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--head-gap) clamp(32px, 5vw, 80px); align-items: center; }
.r-hero__text > * { animation: rise 0.8s var(--ease) both; }
.r-hero__text > :nth-child(2) { animation-delay: 0.06s; }
.r-hero__text > :nth-child(3) { animation-delay: 0.12s; }
.r-hero__text > :nth-child(4) { animation-delay: 0.18s; }
.r-hero__text > :nth-child(5) { animation-delay: 0.26s; }
.r-hero__text > :nth-child(6) { animation-delay: 0.34s; }
.r-hero__stage { font-family: var(--font-display); line-height: 0.82; display: flex; align-items: flex-start; }
.r-hero__num { font-size: clamp(7rem, 17vw, 13rem); color: var(--crimson); }
.r-hero__of { font-size: clamp(1.6rem, 3.4vw, 2.6rem); color: var(--ink-4); margin-top: 0.3em; }
/* The stage name is the page's printed headline: mixed-case Anton (print.css), the one title. */
.r-hero__name { margin-top: 18px; font-size: clamp(2.3rem, 4.4vw, 4rem); line-height: 1; letter-spacing: 0.005em; outline: none; }
.r-hero__headline { margin-top: 12px; font-size: 1.3rem; font-style: italic; color: var(--ink-2); }
.r-hero__floor { margin-top: 20px; color: var(--ink-3); max-width: 56ch; }
.r-hero__book { margin-top: 12px; font: 400 0.87rem var(--font-label); color: var(--ink-4); }
.r-hero [data-guide-cta] { margin-top: 24px; }
/* Claim against floor is the hero's ruled note (the print.css note idiom): no box, a crimson rule
   (ink when the claim holds). The shared view's banner and the field guide's claim warning are the
   same note [R14i, R14h]. */
.gap, .shared-banner, .guide__warn { padding: 2px 0 2px 18px; border-top: 0; border-left: 3px solid var(--crimson); }
.gap { margin-top: 26px; }
.gap__line { font: 500 1.15rem/1.4 var(--font-label); letter-spacing: -0.01em; color: var(--ink); }
.gap__line strong { color: var(--crimson); font-weight: 600; }
.gap--even { border-left-color: var(--ink); }
.gap--even .gap__line strong { color: var(--ink); }
.gap__sub { margin-top: 6px; font-size: 0.95rem; color: var(--ink-2); }
.r-hero__tower { position: relative; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 18px; font: 400 0.8rem var(--font-label); letter-spacing: 0.06em; color: var(--ink-3); text-transform: uppercase; }
.legend__item { display: inline-flex; align-items: center; gap: 8px; }
.legend__item i { width: 12px; height: 12px; border: 1px solid var(--stone-3); background: var(--marble); }
.legend__item--held i { background: var(--ink); border-color: var(--ink); }
.legend__item--floor { color: var(--crimson); font-weight: 700; }
.legend__item--floor i { background: var(--crimson); border-color: var(--crimson); }
.legend__item--next i { border: 2px dashed var(--ink); background: transparent; }
.legend__item--slide i { border: 1px solid var(--ink-3); background: repeating-linear-gradient(45deg, var(--ink-3) 0 1.5px, transparent 1.5px 4px); }
.legend__item--missing i { border: 1.5px dashed var(--crimson); background: transparent; }
@media (max-width: 900px) { .r-hero { grid-template-columns: minmax(0, 1fr); } }

/* A compact paper strip, subordinate to the result and the visible form. */
.guide-bar { display: none; }
@media (max-width: 640px) {
  html:has(body[data-view='result']) { scroll-padding-bottom: 180px; }
  .result > .r-hero { padding-top: 36px; }
  .guide-bar { position: fixed; z-index: 60; inset: auto 0 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; padding: 16px var(--gutter) max(16px, env(safe-area-inset-bottom)); background: var(--paper); border-top: 3px solid var(--crimson); box-shadow: 0 -8px 28px color-mix(in srgb, var(--ink) 13%, transparent); }
  .guide-bar p { grid-column: 1; font: 500 1rem/1.3 var(--font-label); }
  .guide-bar [data-guide-cta] { grid-column: 1; grid-row: 2; justify-self: start; }
  .guide-bar__dismiss { grid-column: 2; grid-row: 1 / 3; align-self: start; min-width: 44px; min-height: 44px; border: 1px solid var(--ink); font-size: 1.6rem; }
}

/* ── Heel (the one dark band) ────────────────────────── */
.result > .heel { background: var(--ink); color: var(--paper); }
.heel { display: grid; grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr); gap: var(--head-gap) clamp(28px, 5vw, 80px); align-items: center; }
.heel h2 { color: var(--marble); font-size: clamp(2rem, 4.4vw, 3.6rem); }
/* The pen turns paper on the band, its inlays cut back to the band's ink. Both come from the outer
   element: on one element, --ink: var(--paper) reads that element's own new --paper (the pen went
   ink on ink), and swapping the two is a cycle that blanks both. */
.heel__art { --heel-pen: var(--paper); --heel-band: var(--ink); position: relative; display: grid; place-items: center; min-height: 220px; }
.heel__arrow { --ink: var(--heel-pen); --paper: var(--heel-band); width: min(100%, 300px); height: auto; transform: rotate(35deg); animation: strike 0.7s cubic-bezier(0.5, 0, 0.75, 0) both 0.2s; }
.heel__sign { font: 400 clamp(2rem, 4vw, 3rem) var(--font-display); text-transform: uppercase; color: var(--paper); border-bottom: 4px solid var(--paper); padding: 0 1.4em 6px 0; }
@keyframes strike { from { transform: rotate(35deg) translateX(-90px); opacity: 0; } to { transform: rotate(35deg); opacity: 1; } }
.heel__blocks { margin-top: 14px; font: 600 1.1rem var(--font-label); color: var(--crimson-3); letter-spacing: 0.02em; }
.heel__exchange { margin-top: 28px; display: grid; gap: 14px; border-left: 2px solid var(--crimson); padding-left: 22px; }
.heel__scene { color: var(--stone-1); font-style: italic; }
.heel__scene strong { font-style: normal; font-weight: 500; color: var(--marble); }
.heel__said, .heel__needs { font-size: 1.12rem; color: var(--marble); }
.heel__said span, .heel__needs span { display: block; font: 500 0.74rem var(--font-label); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 4px; }
.heel__said span { color: var(--crimson-3); }
.heel__needs span { color: var(--stone-2); }
.heel__needs { color: var(--paper); }
.heel__note { margin-top: 26px; font-size: 1.25rem; font-style: italic; color: var(--paper-3); max-width: 56ch; }
.heel__who { font: 500 0.76rem var(--font-label); font-style: normal; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone-3); }
@media (max-width: 760px) { .heel { grid-template-columns: minmax(0, 1fr); } .heel__art { min-height: 140px; } .heel__arrow { width: 200px; } }

/* ── Next ────────────────────────────────────────────── */
.result > .next { background: var(--marble); border-bottom: 1px solid var(--stone-1); }
.next__head { max-width: 820px; }
.next__head h2 { font-size: clamp(1.8rem, 3.6vw, 2.9rem); }
.next__lede { margin-top: 18px; font-size: 1.12rem; color: var(--ink-3); max-width: 64ch; }
.next__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); margin-top: clamp(36px, 5vw, 64px); align-items: start; }
.next__h3, .bench__label { font: 500 0.83rem var(--font-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 18px; }
.moves { border-top: 1.5px solid var(--ink); }
.moves li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding-block: 20px; border-bottom: 1px solid var(--stone-1); font-size: 1.12rem; animation: rise 0.6s var(--ease) both; animation-delay: calc(var(--i) * 80ms); }
.moves__n { font: 400 1.9rem/1 var(--font-display); color: var(--crimson); }
/* The book page (R14g): a marble page from the book on the poster's hard double offset (S4), not a
   stone-shadow card. A running head, the stage's arc as a printed headline, the chapters ruled like a
   contents page, and the buy slot at the foot, over the page rule. */
.next__book { container-type: inline-size; display: grid; gap: 16px; padding: clamp(22px, 2.6vw, 32px); background: var(--marble); border: 1px solid var(--ink); box-shadow: var(--shadow-hard), 8px 8px 0 var(--crimson); }
.next__book-title { font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.02; outline: none; }
.next__bookline { color: var(--ink-3); font-size: 0.98rem; }
.chapters { border-top: 1px solid var(--stone-2); }
.chapters li { display: flex; gap: 10px; padding-block: 7px; border-bottom: 1px solid var(--stone-1); font-size: 1.05rem; font-style: italic; }
.chapters__mark { font: 500 1.03rem var(--font-label); color: var(--crimson); font-style: normal; }
.next__stages { display: flex; flex-wrap: wrap; gap: 10px; }
/* The buy slot keeps the box its listing state fills (content-hub.js bookSlot, the /story slot's rule):
   amazonButton fills it a frame and two imports after the mount, and the page below never moves
   (docs/research/r14-design-audit.md, 14g). The form's height steps with the page's
   width as its lines wrap, so the reserve steps too, each about 10px over the filled form measured at
   320-1600px. The waitlist prints flat on the page. */
.next__buy { padding-top: 18px; border-top: 1px solid var(--ink); }
.next__buy[data-book-slot='form'] { min-block-size: 414px; }
.next__buy[data-book-slot='link'] { min-block-size: 76px; }
.next__buy[data-book-slot='link-status'] { min-block-size: 104px; }
@container (min-width: 300px) { .next__buy[data-book-slot='form'] { min-block-size: 382px; } }
@container (min-width: 590px) { .next__buy[data-book-slot='form'] { min-block-size: 314px; } }
.next__book .waitlist { padding: 0; background: none; border-top: 0; box-shadow: none; }
.next__book .waitlist h3 { font-size: clamp(1.4rem, 2vw, 1.75rem); }
/* The stage's rules are ruled entries (print.js ENTRIES), not boxes. */
.next__rules { margin-top: clamp(36px, 5vw, 56px); }
.next__rules .rule { padding: 0; border: 0; background: none; }
@media (max-width: 860px) { .next__grid { grid-template-columns: minmax(0, 1fr); } }

.rule { padding: 18px 20px; border-top: 3px solid var(--ink); background: var(--paper); }
.rule__num { font: 600 0.76rem var(--font-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--crimson); }
.rule p { margin-top: 6px; font-size: 1.05rem; line-height: 1.45; }

/* ── Charts ──────────────────────────────────────────── */
.charts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--head-gap) clamp(32px, 6vw, 96px); align-items: center; }
.charts__target h2 { margin-bottom: 28px; }
.charts__target .target { max-width: 500px; }
.charts__side .kicker { margin-bottom: 22px; }
.pieces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin-top: 36px; border-top: 1.5px solid var(--ink); }
.pieces li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; padding-block: 10px; border-bottom: 1px solid var(--stone-1); font-size: 0.98rem; align-items: baseline; }
.pieces__n { font: 500 0.8rem var(--font-label); color: var(--ink-4); }
.pieces__v { font: 500 0.92rem var(--font-label); font-variant-numeric: tabular-nums; }
.pieces__heel { color: var(--crimson); }
.pieces__heel em { font: 600 0.69rem var(--font-label); letter-spacing: 0.14em; text-transform: uppercase; font-style: normal; background: var(--crimson); color: var(--marble); padding: 2px 5px; margin-left: 6px; vertical-align: 2px; }
@media (max-width: 900px) { .charts { grid-template-columns: minmax(0, 1fr); } .pieces { grid-template-columns: minmax(0, 1fr); } }

/* While the benchmark panel may still go in (result.js `settled`, main.js `data-view-pending`), the
   tail after its place waits out of flow with the footer, so the panel pushes nothing down [R14f]. */
body[data-view-pending] .bench-slot ~ * { display: none; }

/* ── Benchmark [R16]: flat poster columns, black on cream, the visitor's floor in red ── */
.result > .bench { background: var(--marble); border-top: 6px solid var(--ink); }
.bench__head { max-width: 820px; }
.bench__body { margin-top: 18px; font-size: clamp(1.12rem, 1.6vw, 1.3rem); max-width: 56ch; }
.bench__body strong { font: 400 1.45em/1 var(--font-display); color: var(--crimson); letter-spacing: 0.01em; }
.bench__industry { margin-top: 28px; max-width: 380px; }
.bench__charts { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); margin-top: clamp(36px, 5vw, 64px); align-items: start; }
.floors__cols { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: clamp(4px, 1vw, 12px); align-items: end; height: 240px; border-bottom: 3px solid var(--ink); }
.floors__col { position: relative; display: grid; grid-template-rows: auto auto; justify-items: center; align-content: end; gap: 6px; }
.floors__count { font: 400 clamp(1rem, 2vw, 1.4rem)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.floors__bar { width: 100%; height: max(2px, calc(var(--v) * 180px)); background: var(--ink); transform-origin: bottom; animation: bench-grow 0.7s var(--ease) both; }
.floors__stage { grid-row: 3; margin-top: 8px; font: 600 0.83rem var(--font-label); letter-spacing: 0.08em; color: var(--ink-3); }
.floors__col--you :is(.floors__count, .floors__stage) { color: var(--crimson); }
.floors__col--you .floors__bar { background: var(--crimson); }
.bench .pieces { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
.pieces--bars li { grid-template-rows: auto 6px; row-gap: 8px; }
.pieces__bar { grid-column: 1 / -1; height: 6px; background: linear-gradient(to right, var(--ink) var(--v), var(--stone-1) var(--v)); }
.pieces__heel .pieces__bar { background: linear-gradient(to right, var(--crimson) var(--v), var(--crimson-3) var(--v)); }
.bench__footnote { margin-top: clamp(28px, 4vw, 44px); max-width: 72ch; font-size: 0.95rem; color: var(--ink-3); }
.bench__bridge { margin-top: 14px; }
.bench__bridge .link-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 1rem; color: var(--ink); }
@keyframes bench-grow { from { transform: scaleY(0); } }
@media (max-width: 860px) { .bench__charts { grid-template-columns: minmax(0, 1fr); } .floors__cols { height: 200px; } .floors__bar { height: max(2px, calc(var(--v) * 140px)); } }
@media (prefers-reduced-motion: reduce) { .floors__bar { animation: none; } }

/* ── Flags ───────────────────────────────────────────── */
.result > .flags { background: var(--paper-2); border-block: 1px solid var(--stone-1); }
.flags h2 { max-width: 20ch; }
/* Each crash risk is a ruled entry (print.js ENTRIES), its rule a colophon line. */
.flags__list { margin-top: 36px; }
.flag { animation: rise 0.6s var(--ease) both; animation-delay: calc(var(--i) * 70ms); }
.flag__title { display: flex; align-items: center; gap: 10px; font: 600 0.94rem var(--font-label); letter-spacing: 0.06em; text-transform: uppercase; }
.flag__note { margin-top: 12px; font-size: 1.05rem; }
.flag__rule { margin-top: 14px; font-size: 0.83rem; }

/* ── Help (Alacritous) ───────────────────────────────── */
.result > .help { background: var(--crimson); color: var(--paper); }
.help { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--head-gap) 32px; align-items: end; }
.help h2 { color: var(--paper); max-width: 22ch; }
.help > :where(:not(.r-head)) p { margin-top: 14px; font-size: 1.12rem; max-width: 58ch; }
.help .disclosure { font-size: 0.9rem; color: var(--crimson-3); }
.help .disclosure a { color: var(--paper); }
.help .btn--primary { --lift: var(--paper); }
@media (max-width: 860px) { .help { grid-template-columns: minmax(0, 1fr); } }

/* ── Share ───────────────────────────────────────────── */
.share { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--head-gap) 32px; align-items: end; }
.share h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); max-width: 22ch; }
.share > :where(:not(.r-head)) p { margin-top: 12px; color: var(--ink-3); }
.share__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; }
.share__actions .link-btn { display: inline-flex; align-items: center; min-height: 44px; }
.share__status { font: 400 0.87rem var(--font-label); color: var(--crimson); word-break: break-all; }
@media (max-width: 860px) { .share { grid-template-columns: minmax(0, 1fr); } }

/* ── Broken link ─────────────────────────────────────── */
.broken { min-height: 70dvh; display: grid; align-content: center; justify-items: start; gap: 20px; max-width: 640px; margin-inline: auto; padding: var(--gutter); }
.broken h1 { font-size: clamp(2rem, 4vw, 3rem); outline: none; }
.broken p { color: var(--ink-3); font-size: 1.1rem; }

/* ── Shared result and share rows [R7b] ──────────────── */
/* The referral view's rules live here, last in the result's cascade, as they were when they came from
   their own late-linked sheet: linkSheet stops waiting at SHEET_WAIT_MS, and on a slow network the result
   mounted before that sheet and its hero grew on screen, pushing every section below it (gate 8d78). */
/* The banner is a ruled note (result.css, with the hero's claim note) [R14i]. */
.shared-banner { margin-block: 18px 28px; font: 500 1.08rem/1.4 var(--font-label); color: var(--ink); }
.shared-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hero-share { margin-top: 32px; padding-top: 20px; border-top: 2px solid var(--ink); }
.hero-share__label { margin-bottom: 10px; font: 600 1.15rem var(--font-label); }
.share-row.field { display: block; }
.share-row .share__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.share-row .btn { padding: 10px 14px; font-size: 1rem; white-space: normal; }
.share-row__post { margin-top: 12px; }
.share-row__post summary { padding-block: 10px; cursor: pointer; font: 600 1rem/1.4 var(--font-label); text-decoration: underline; text-underline-offset: 4px; }
.share-row__post label { display: block; margin-block: 8px; font-size: 1rem; color: var(--ink-2); }
.share-row__fallback[hidden] { display: none; }
.share-row__post .link-btn { margin-top: 8px; }
.share-row .share__status { display: block; min-height: 1.5em; margin-top: 8px; color: var(--crimson); font: 600 1rem/1.5 var(--font-label); }
.share__retake { justify-self: start; }
/* The invitation is a printed page under its running head, on the paper-2 page colour [R14i]. */
.result > .shared-invitation { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--head-gap) 32px; align-items: center; background: var(--paper-2); }
.shared-invitation h2 { font-size: clamp(2rem, 5vw, 4rem); }
.shared-invitation > :where(:not(.r-head)) p { margin-top: 14px; max-width: 48ch; }
.shared-invitation__sub { font: 500 1rem/1.4 var(--font-label); color: var(--ink-2); }
@media (max-width: 640px) {
  .result > .shared-invitation { grid-template-columns: minmax(0, 1fr); }
  .shared-actions > .btn { flex: 1 1 100%; }
  .hero-share .share__actions > .btn { flex: 1 1 44%; }
}

/* Leave room for subpixel DOMRect rounding at mobile widths. */
.share-row :is(.btn, summary, .link-btn), .share__retake, .shared-actions > .btn, .shared-invitation .btn { min-height: 46px; }