/* bh90.net - the "English heritage" look (12-OCT-26 night, docs/2026-10-12-landing-redesign.md). Dave:「字体不够old money」
   「要有气质」「因为做的都是非富即贵之人」「白色的我觉得不错」, then chose A of three: Caslon type on ivory paper, ink text,
   one deep forest green for what you press, brass for the fine lines. No grid, no ruler, no monospace: a tailor's
   catalogue, not an engineering drawing. The exploded phone keeps its numbered callouts, drawn in thin ink.
   Animated: transform and opacity only; prefers-reduced-motion stops all of it (story.js shows a still drawing). */

/* self-hosted latin subsets (fonts/OFL.txt): Libre Caslon Display for headings and big numbers, Libre Caslon Text 400/700
   for everything else; the mark is Inter Tight Black cut down to B, H, 9, 0 and the lock-screen clock Inter Tight Bold
   cut down to 0-9 and the colon (1.5 and 3.3 KB, so both can block without a flash) */
@font-face { font-family: "Libre Caslon Display"; src: url(/landing/fonts/caslon-display.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Libre Caslon Text"; src: url(/landing/fonts/caslon-text-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Libre Caslon Text"; src: url(/landing/fonts/caslon-text-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
/* the pen on the drawings (the story and Plate I): Architects Daughter, an architect's hand */
@font-face { font-family: "Architects Daughter"; src: url(/landing/fonts/architects-daughter.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "BH90 Mark"; src: url(/landing/fonts/inter-tight-900.woff2) format("woff2"); font-weight: 900; font-display: block; }

:root {
  /* layout: one 1312 px column with a fluid gutter; the header is fixed, the story stage pins under it */
  --ground: #F8F5EE; --ground-2: #F1ECE2; --panel: #FFFDF8;                                  /* ivory paper */
  --ink: #1B1A17; --ink-2: #4A463F; --ink-3: #6B6559; --ink-4: #9A9386; --label: #7E6334;    /* ink; --label: brass words */
  --accent: #1E3A2B; --accent-deep: #142A1F; --accent-soft: rgba(30, 58, 43, .07); --accent-ink: #F8F5EE; --live: #2F7D4F;
  --brass: #9C7F4E;                                                                          /* fine lines, the first callout */
  --pen: #1F3F8F; --pen-soft: rgba(31, 63, 143, .07);                                         /* blue-black ink on the drawings */
  --hand: "Architects Daughter", "Segoe Print", "Bradley Hand", var(--cjk-sc), cursive;       /* the pen's handwriting */
  --rule: rgba(27, 26, 23, .10); --rule-2: rgba(27, 26, 23, .16); --rule-3: rgba(27, 26, 23, .28);
  /* Chinese, Japanese and Korean: headings in the phone's own Song / Mincho / Myeongjo, body text in its sans (easier to read) */
  --cjk-sc: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC";
  --cjk-ja: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", "Noto Sans JP", "Noto Sans CJK JP";
  --cjk-ko: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Noto Sans CJK KR";
  --cjk-serif-sc: "Songti SC", "STSong", "Noto Serif SC", "Noto Serif CJK SC", "Source Han Serif SC";
  --cjk-serif-ja: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "Noto Serif CJK JP";
  --cjk-serif-ko: "AppleMyungjo", "Noto Serif KR", "Noto Serif CJK KR", "Batang";
  --display: "Libre Caslon Display", var(--cjk-serif-sc), Georgia, "Times New Roman", serif;
  --sans: "Libre Caslon Text", var(--cjk-sc), Georgia, "Times New Roman", serif;   /* the body face (the name stays: used everywhere) */
  --mono: var(--sans);                                                                /* labels: the same Caslon, tracked capitals */
  /* --top: everything the fixed header covers - the bar, and on a phone the row of pages under it (four pages, 13-OCT-26) */
  --gutter: clamp(16px, 4vw, 64px); --maxw: 1440px; --bar: 72px; --tabs: 0px; --top: calc(var(--bar) + var(--tabs));
  color-scheme: light;
}
html[lang="ja"] { --display: "Libre Caslon Display", var(--cjk-serif-ja), Georgia, serif; --sans: "Libre Caslon Text", var(--cjk-ja), Georgia, serif; --mono: var(--sans); --hand: "Architects Daughter", var(--cjk-ja), cursive; }
html[lang="ko"] { --display: "Libre Caslon Display", var(--cjk-serif-ko), Georgia, serif; --sans: "Libre Caslon Text", var(--cjk-ko), Georgia, serif; --mono: var(--sans); --hand: "Architects Daughter", var(--cjk-ko), cursive; }
@media (max-width: 999px) { :root { --bar: 54px; --tabs: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
/* no scroll-behavior: smooth here. ScrollTrigger jumps the page while it measures; smooth turned those jumps into glides, so
   after a resize the pinned story started at -549 instead of 696 and the phone sat out of frame. In-page links glide by
   site.js instead. */
html { -webkit-text-size-adjust: 100%; background: var(--ground); scroll-padding-top: calc(var(--top) + 16px); }
body {
  margin: 0; background-color: var(--ground); color: var(--ink); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); }
button { font: inherit; }
.mono { font-family: var(--mono); letter-spacing: .12em; font-variant-numeric: lining-nums tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.skip { position: fixed; left: 16px; top: -64px; z-index: 95; padding: 10px 16px; border-radius: 2px; background: var(--accent); color: var(--accent-ink); font-weight: 600; text-decoration: none; transition: top .15s ease; }
.skip:focus { top: calc(10px + env(safe-area-inset-top, 0px)); }

.kicker { margin: 0; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--label); }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 400; letter-spacing: -.01em; line-height: 1.06; text-wrap: balance; }
html:is([lang="zh-Hans"], [lang="ja"], [lang="ko"]) :is(h1, h2, h3) { letter-spacing: .02em; line-height: 1.3; font-weight: 600; }
/* line breaks: Japanese keeps ー and small kana off a line's start, and its headings break between phrases (Chrome; others
   fall back to character breaks); Korean breaks at its spaces, not inside a word */
html[lang="ja"] { line-break: strict; }
html[lang="ja"] :is(h1, h2, h3) { word-break: auto-phrase; }
html[lang="ko"] { word-break: keep-all; overflow-wrap: break-word; }
html:is([lang="zh-Hans"], [lang="ja"], [lang="ko"]) .kicker { letter-spacing: .08em; }
.lead { margin: 0; max-width: 34em; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--ink-2); }

/* Buttons: a modern capsule with an engraved hairline set 4 px inside its edge, the way an old banknote or a printed card is
   ruled, and Caslon type. The capsule reads modern and the rule and type read old money, so each makes the other stand out
   (Dave「按钮又太方 能不能老钱配 让现代和老钱 有一种视错觉」). The rule is an outline with a negative offset, so it follows the
   curve; keyboard focus swaps it for the usual focus ring outside. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border-radius: 999px; border: 1px solid transparent;
  font: 700 15.5px/1.2 var(--sans); letter-spacing: .03em; text-decoration: none; cursor: pointer; white-space: nowrap;
  outline: 1px solid transparent; outline-offset: -5px; transition: transform .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease, outline-color .2s ease; }
.btn svg { width: 19px; height: 19px; flex: none; }
.btn:active { transform: scale(.98); }
.btn-accent { background: var(--accent); color: var(--accent-ink); outline-color: rgba(201, 171, 112, .7); }
.btn-ghost { background: transparent; color: var(--ink); border-color: rgba(27, 26, 23, .34); outline-color: rgba(27, 26, 23, .16); }
.btn.small { min-height: 40px; padding: 0 16px; font-size: 14px; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) { .btn-accent:hover { background: var(--accent-deep); outline-color: rgba(214, 186, 128, .9); } .btn-ghost:hover { border-color: var(--ink); color: var(--ink); outline-color: rgba(27, 26, 23, .3); } }
/* WhatsApp's own mark, white on its green: the one modern colour on the page */
.wa-logo { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; margin-left: -12px; border-radius: 50%; background: #25D366; }
.btn .wa-logo svg { width: 18px; height: 18px; fill: #FFF; }

/* ── header ── */
.top { position: fixed; inset: 0 0 auto 0; z-index: 60; padding-top: env(safe-area-inset-top, 0px); background: rgba(248, 245, 238, .9);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--rule); }
@media (prefers-reduced-transparency: reduce) { .top { background: var(--ground); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.bar { height: var(--bar); max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); display: flex; align-items: center; gap: 28px; }
/* the mark with its small words under it, centred (Dave「phone repair放在logo下面吧」, 13-OCT-26): English and Malay tracked
   to about the mark's width, Chinese / Japanese / Korean shorter in the middle; the padding balances the last letter's spacing */
.logo { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; }
.mark { display: block; overflow: visible; }
.mark text { font-family: "BH90 Mark", "Inter Tight", "Arial Black", sans-serif; font-weight: 900; font-size: 400px; letter-spacing: -26px; }
.logo span { font-size: 10px; line-height: 1; letter-spacing: .24em; padding-left: .24em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
html[lang="ms"] .logo span { letter-spacing: .2em; padding-left: .2em; }
html:is([lang="zh-Hans"], [lang="ja"], [lang="ko"]) .logo span { font-size: 11px; letter-spacing: .4em; padding-left: .4em; }
.navlinks { display: none; gap: 28px; }
.navlinks a { color: var(--ink-2); text-decoration: none; font-size: 15px; }
.navlinks a:hover { color: var(--ink); }
.navlinks a[aria-current="page"] { color: var(--ink); text-decoration: underline 1px var(--brass); text-underline-offset: 9px; }
/* the pages on a phone: one row under the bar, the page you are on underlined in brass (on a computer they sit in the bar) */
.tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); height: var(--tabs); max-width: var(--maxw); margin: 0 auto;
  padding-inline: max(4px, calc(var(--gutter) - 10px)); border-top: 1px solid var(--rule); }
.tabs a { position: relative; display: grid; place-items: center; min-width: 0; font-size: 13.5px; letter-spacing: .05em; color: var(--ink-3); text-decoration: none; white-space: nowrap; }
.tabs a[aria-current="page"] { color: var(--ink); }
.tabs a[aria-current="page"]::after { content: ""; position: absolute; left: 24%; right: 24%; bottom: -1px; height: 2px; background: var(--brass); }
@media (min-width: 1000px) { .tabs { display: none; } }
.open { display: none; align-items: center; gap: 9px; margin-left: auto; font-size: 12px; color: var(--ink-3); text-transform: uppercase; }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4); flex: none; }
.pulse.on { background: var(--live); box-shadow: 0 0 0 4px rgba(47, 125, 79, .16); }
.langbtn { margin-left: auto; min-height: 44px; padding: 0 12px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(27, 26, 23, .28); border-radius: 999px;
  background: transparent; color: var(--ink); font-size: 12px; cursor: pointer; }
.langbtn svg { width: 16px; height: 16px; flex: none; }
.langbtn svg + span + svg { width: 12px; height: 12px; }
.wa-top { display: none; min-height: 44px; padding: 0 18px 0 22px; font-size: 14px; gap: 9px; }
.wa-top .wa-logo { width: 26px; height: 26px; margin-left: -14px; } .wa-top .wa-logo svg { width: 15px; height: 15px; }
@media (min-width: 1000px) { .navlinks { display: flex; } .open { display: inline-flex; } .langbtn { margin-left: 0; } .wa-top { display: inline-flex; } }
.navlinks a, .open { white-space: nowrap; }
/* 1000-1199: no room for everything on one line (after hours the status reads "CLOSED · OPENS TOMORROW 10:00 AM"):
   the status goes (it is also under Visit). The logo's small words stay: under the mark they take no width */
@media (min-width: 1000px) and (max-width: 1199px) { .open { display: none; } .langbtn { margin-left: auto; } }
/* a phone's bar is 54 px: the mark a little smaller, so the words fit under it */
@media (max-width: 999px) { .top .mark { width: 96px; height: 32px; } .logo { gap: 3px; } .logo span { font-size: 9px; } html:is([lang="zh-Hans"], [lang="ja"], [lang="ko"]) .logo span { font-size: 10px; } }

/* ── 1. hero: the phone, repaired ── */
.hero { position: relative; padding-top: calc(var(--top) + 12px + clamp(20px, 5vw, 72px)); padding-bottom: clamp(36px, 5vw, 64px); }
.hero-in { display: grid; gap: 28px; align-items: center; }
.hero-copy h1 { margin-top: 20px; font-size: clamp(38px, 6vw, 82px); }
.hero-copy .lead { margin-top: 22px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-fig { --pw: 162px; --cw: 168px; position: relative; margin: 0 auto; width: calc(var(--pw) + var(--cw) + 24px); }
.phone { position: relative; width: var(--pw); aspect-ratio: 541 / 1100; container-type: inline-size; }
/* the hero is a sketch too (Dave「这一页我不喜欢 都换成Sketch」, 12-OCT-26 night): the phone is the story's blue-ink drawing,
   its lock screen is written in the same pen on the paper, and the callouts are pen notes on the drawing */
.phone::before, .phone::after { content: ""; position: absolute; width: 16px; height: 16px; pointer-events: none; }
.phone::before { left: -20px; top: -18px; border-left: 1px solid rgba(31, 63, 143, .45); border-top: 1px solid rgba(31, 63, 143, .45); }
.phone::after { right: -20px; bottom: -18px; border-right: 1px solid rgba(31, 63, 143, .45); border-bottom: 1px solid rgba(31, 63, 143, .45); }
.phone-photo { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 18px 26px rgba(27, 26, 23, .14)); }
/* the lock screen, one drawing in two places: the hero phone and the story's finished phone (.plane .lit). It is drawn in
   --u, a hundredth of the phone's width: 1cqw in the hero (the .phone is the container), 2.6 px on the story's 260 px plane */
/* the screen exactly: html.ts SCREEN_BOX [13.6, 12.9, 232.8, 514.2] of the 260 x 540 phone (the photo-era 97.27 % height ran 2 % past
   the screen and covered the drawn phone's bottom edge - Dave「iPhone 底部边框被覆盖了」) */
.lock { position: absolute; left: 5.23%; top: 2.39%; width: 89.54%; height: 95.22%; border-radius: 10.7% / 5%; overflow: hidden; --u: 1cqw; }
.lock, .plane .lit { font-family: var(--hand); color: var(--pen);
  background: radial-gradient(70% 45% at 30% 20%, rgba(31, 63, 143, .16), rgba(31, 63, 143, .04) 70%), #FBF9F4; }
.lock-date { position: absolute; left: 0; right: 0; top: 10.4%; margin: 0; text-align: center; font-size: calc(4.2 * var(--u)); color: var(--pen); }
.lock-time { position: absolute; left: 0; right: 0; top: 12.2%; margin: 0; text-align: center; font: 400 calc(21.6 * var(--u))/1.15 var(--hand); letter-spacing: .01em; color: var(--pen); }
.notice { position: absolute; left: 4.6%; right: 4.6%; top: 29%; display: flex; gap: calc(2.9 * var(--u)); align-items: flex-start; padding: calc(3.2 * var(--u)) calc(3.5 * var(--u));
  border-radius: calc(4.8 * var(--u)); border: 1px solid rgba(31, 63, 143, .6); background: transparent; text-align: left; }
.n-icon { flex: none; width: calc(8.3 * var(--u)); height: calc(8.3 * var(--u)); border-radius: calc(2.2 * var(--u)); border: 1px solid var(--pen); display: flex; align-items: center; justify-content: center;
  font-size: calc(3 * var(--u)); color: var(--pen); }
.n-body { display: flex; flex-direction: column; gap: calc(.6 * var(--u)); flex: 1; min-width: 0; }
.n-head { display: flex; justify-content: space-between; font-size: calc(3.5 * var(--u)); color: rgba(31, 63, 143, .75); }
.n-head b { color: var(--pen); font-weight: 400; }
.n-text { font-size: calc(3.4 * var(--u)); line-height: 1.35; color: var(--pen); }
.sweep { position: absolute; left: 5.23%; top: 2.39%; width: 89.54%; height: 95.22%; border-radius: 10.7% / 5%; pointer-events: none; overflow: hidden;
  background: linear-gradient(115deg, rgba(31, 63, 143, 0) 36%, rgba(31, 63, 143, .10) 46%, rgba(31, 63, 143, 0) 56%) no-repeat;
  background-size: 300% 100%; background-position: 100% 0; }
.dash { display: none; }   /* the photo-era cut line: the drawing has its own outline */
/* the pen's stroke for the drawing-in: the phone's outline (from its photo's edge, sketch-outline.ts) and the screen's edge */
.draw { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; display: none; }
.draw path { fill: none; stroke: var(--pen); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > *, .hero-proof { animation: bh-rise .9s cubic-bezier(.2, .7, .1, 1) both; }
  .hero-copy > :nth-child(2) { animation-delay: .06s; } .hero-copy > :nth-child(3) { animation-delay: .14s; } .hero-copy > :nth-child(4) { animation-delay: .22s; }
  .hero-proof { animation-delay: .3s; }
  @keyframes bh-rise { from { opacity: 0; transform: translateY(14px); } }
  /* The hero drawn stroke by stroke as the page opens, once, about 3.5 s (Dave「能不能画好来」→「一笔一笔画出来的动画」):
     the pen goes round the phone, then the screen's edge; the shading comes up under the line; the lock screen is written
     line by line; each callout's line runs out from the phone and its note is written; the corner marks come last. */
  .draw { display: block; animation: bh-pen-off .6s ease 2.2s forwards; }
  .draw path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: bh-pen 1.4s cubic-bezier(.55, .1, .35, 1) .2s forwards; }
  .draw .d-screen { animation-duration: 1s; animation-delay: 1s; }
  .hero .phone-photo { opacity: 0; animation: bh-ink 1s ease 1.3s forwards; }
  .hero .lock { opacity: 0; animation: bh-ink .6s ease 1.7s forwards; }
  .hero :is(.lock-date, .lock-time, .notice) { clip-path: inset(0 100% 0 0); animation: bh-write .7s cubic-bezier(.3, .1, .3, 1) forwards; }
  .hero .lock-date { animation-delay: 1.9s; } .hero .lock-time { animation-delay: 2.15s; animation-duration: .9s; } .hero .notice { animation-delay: 2.6s; animation-duration: 1s; }
  .hero .co .pin { transform: scaleX(0); transform-origin: left center; animation: bh-line .45s ease-out forwards; }
  .hero .co > :not(.pin) { clip-path: inset(0 100% 0 0); animation: bh-write .55s cubic-bezier(.3, .1, .3, 1) forwards; }
  .hero .co1 .pin { animation-delay: 2.7s; } .hero .co1 > :not(.pin) { animation-delay: 2.95s; }
  .hero .co2 .pin { animation-delay: 3s; } .hero .co2 > :not(.pin) { animation-delay: 3.25s; }
  .hero .co3 .pin { animation-delay: 3.3s; } .hero .co3 > :not(.pin) { animation-delay: 3.55s; }
  .hero .phone::before, .hero .phone::after, .hero .dash, .hero .fig { opacity: 0; animation: bh-ink .5s ease 3.8s forwards; }
  @keyframes bh-pen { to { stroke-dashoffset: 0; } }
  @keyframes bh-pen-off { to { opacity: 0; } }
  @keyframes bh-ink { to { opacity: 1; } }
  @keyframes bh-write { to { clip-path: inset(0 0 0 0); } }
  @keyframes bh-line { to { transform: scaleX(1); } }
}
/* the callouts, written beside the drawing in the same pen */
.callouts { position: absolute; top: 0; bottom: 0; left: calc(var(--pw) + 24px); width: var(--cw); list-style: none; margin: 0; padding: 0; }
.co { position: absolute; left: 0; right: 0; top: var(--y); transform: translateY(-10px); display: grid; gap: 2px; color: var(--pen); }
.co1 { --y: 47%; } .co2 { --y: 65%; } .co3 { --y: 85%; }   /* below the lock screen's clock and notice, so no line crosses them */
.co .pin { position: absolute; right: calc(100% + 8px); top: 10px; height: 1px; background: rgba(31, 63, 143, .55); }
.co1 .pin { width: calc(16px + var(--pw) * .3); background: var(--pen); }
.co2 .pin { width: 18px; }
.co3 .pin { width: calc(16px + var(--pw) * .42); }
.co .pin::before { content: ""; position: absolute; left: -4px; top: -4px; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--pen); background: var(--ground); }
.co1 .pin::before { background: var(--pen); }
.co-k { font: 400 13.5px/1.2 var(--hand); letter-spacing: .02em; color: rgba(31, 63, 143, .78); }
.co b { font: 400 21px/1.15 var(--hand); color: var(--pen); }
.co-p { font: 400 13px/1.25 var(--hand); color: rgba(31, 63, 143, .8); }
.co-s { font: 400 14px/1.35 var(--hand); color: rgba(31, 63, 143, .8); }
.fig { margin: 28px 0 0; font: 400 14px/1.3 var(--hand); letter-spacing: .02em; color: rgba(31, 63, 143, .7); }   /* the drawing's caption, in pen */
.hero-proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: clamp(28px, 4vw, 48px) 0 0; border-top: 1px solid var(--rule-2); }
.hero-proof > div { display: flex; flex-direction: column; gap: 6px; padding: 14px 12px 0 0; min-width: 0; }
.hero-proof > div + div { padding-left: 12px; border-left: 1px solid var(--rule); }
.hero-proof dd { order: 1; margin: 0; font-family: var(--display); font-size: clamp(26px, 2.8vw, 38px); font-weight: 400; letter-spacing: -.01em; line-height: 1; font-variant-numeric: tabular-nums; }
.hero-proof dd small { font-size: .5em; margin-left: 3px; color: var(--ink-2); }
.hero-proof dd .star { color: var(--brass); }
.hero-proof dt { order: 2; font-family: var(--mono); font-size: 10px; line-height: 1.55; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
html:is([lang="zh-Hans"], [lang="ja"], [lang="ko"]) .hero-proof dt { font-family: var(--sans); font-size: 12px; letter-spacing: .02em; }
@media (min-width: 760px) { .hero-fig { --pw: 240px; --cw: 190px; } .co b { font-size: 24px; } .co-k { font-size: 14.5px; } .co-s { font-size: 15px; } .hero-proof dt { font-size: 10.5px; } }
@media (min-width: 1000px) {
  .hero-in { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; }
  /* the phone takes what its column leaves after the callouts, up to 300 px: 210 px at 1000 wide, 300 from about 1220
     (a fixed 300 ran 18 px off a 1100 px screen). --pw is read where it is used, so 100cqw is this figure's width. */
  .hero-fig { --cw: 184px; width: 100%; max-width: calc(300px + var(--cw) + 24px); container-type: inline-size; }
  .hero-fig > * { --pw: min(300px, calc(100cqw - var(--cw) - 24px)); }
  .hero-proof { max-width: 760px; }
}
@media (max-width: 999px) {
  .hero-fig { order: -1; } .hero-copy h1 { margin-top: 14px; } .fig { display: none; }
  .hero .actions .btn-accent { display: none; }   /* the dock below already carries WhatsApp: here the way to the prices */
  .hero .actions .btn-ghost { flex: 1 1 auto; }
}
@media (max-width: 759px) {
  .co-s { display: none; } .actions .btn { flex: 1 1 auto; }
  .co2 { --y: 69%; } .co3 { --y: 88%; }   /* a 162 px phone: 01 has three lines, so 02 and 03 sit lower to keep a gap */
}

/* ── 2. the story (story.js places the rig, the balloons and the labels; GSAP scrubs it) ── */
.story { position: relative; border-top: 1px solid var(--rule); }
.stage { position: relative; height: 100vh; height: 100svh; overflow: hidden;   /* a drawing sheet: faint blue tiles, a soft light in the middle */
  background: radial-gradient(48% 60% at 50% 52%, rgba(27, 26, 23, .045), rgba(27, 26, 23, 0) 70%),
    linear-gradient(var(--pen-soft) 1px, transparent 1px) 0 0 / 25% 33.34%, linear-gradient(90deg, var(--pen-soft) 1px, transparent 1px) 0 0 / 25% 33.34%; }
.rigwrap { position: absolute; inset: 0; perspective: 1600px; }   /* GPT's perspective */
.rig-scale { position: absolute; left: 0; top: 0; width: 260px; height: 540px; transform-style: preserve-3d; transform-origin: 0 0; opacity: 0; transition: opacity .6s ease; }
.rig-scale.ready { opacity: 1; }
.rig { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 130px 270px; }
.plane { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; will-change: transform; }
.plane img { position: absolute; max-width: none; user-select: none; -webkit-user-drag: none; }   /* no drop shadow: GPT's parts stand clean */
.plane .crack, .plane .lit, .plane .sheen, .plane .xmark { position: absolute; border-radius: 25px; pointer-events: none; }
.plane .xmark { opacity: 0; background:
  linear-gradient(to top right, transparent calc(50% - 1.5px), rgba(178, 46, 46, .78) calc(50% - 1.5px), rgba(178, 46, 46, .78) calc(50% + 1.5px), transparent calc(50% + 1.5px)),
  linear-gradient(to top left, transparent calc(50% - 1.5px), rgba(178, 46, 46, .78) calc(50% - 1.5px), rgba(178, 46, 46, .78) calc(50% + 1.5px), transparent calc(50% + 1.5px)); }
.plane.newscreen { opacity: 0; }
.plane .crack { mix-blend-mode: multiply; }   /* ink cracks on the paper sketch */
/* the finished phone lights in ink too: the same lock screen, drawn - a wash of blue, the time and the ready note in the pen */
.plane .lit { opacity: 0; overflow: hidden; --u: 2.6px; }   /* the drawing itself: the shared .lock rules above */
.plane .sheen { opacity: 0; background: linear-gradient(115deg, rgba(31, 63, 143, 0) 36%, rgba(31, 63, 143, .10) 46%, rgba(31, 63, 143, 0) 56%) no-repeat; background-size: 300% 100%; }
/* the screws (STORY_SCREWS): ink heads over their holes, a dashed line (story.js sets its length) down to each */
.plane .scr { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='6.1' fill='%23FBF9F4' stroke='%231F3F8F' stroke-width='1.4'/%3E%3Cpath d='M7 3.5v7M3.5 7h7' stroke='%231F3F8F' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.plane .scr.tri { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='6.1' fill='%23FBF9F4' stroke='%231F3F8F' stroke-width='1.4'/%3E%3Cpath d='M7 7V3.3M7 7l3.2 1.85M7 7l-3.2 1.85' stroke='%231F3F8F' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.plane .ax { position: absolute; width: 1px; height: var(--ax, 0px); transform-origin: 0 0;
  background: repeating-linear-gradient(to bottom, rgba(31, 63, 143, .75) 0 3px, transparent 3px 6px); }
/* a side key or the SIM tray, out through its wall: a dashed line back to where it sits (story.js sets --sx) */
.plane .sx { position: absolute; height: 1px; width: var(--sx, 0px);
  background: repeating-linear-gradient(to right, rgba(31, 63, 143, .75) 0 3px, transparent 3px 6px); }
.plane.hot img:not(.edge) { filter: drop-shadow(0 0 1px #1F3F8F) drop-shadow(0 0 12px rgba(31, 63, 143, .35)); }
.balloons { position: absolute; inset: 0; pointer-events: none; z-index: 2; }   /* above the phone's bottom shade, so no label is dimmed */
.balloons .ln { position: absolute; height: 1px; background: rgba(31, 63, 143, .55); transform-origin: 0 0; }
.balloons .dot { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; border: 1px solid var(--pen); background: var(--ground); }
.balloons .ball { position: absolute; display: flex; align-items: center; gap: 10px; transform: translateY(-50%); pointer-events: auto; cursor: pointer; background: none; border: 0; padding: 4px 0; color: var(--ink); text-align: left; }
/* the labels are written on the drawing in the same pen: number in a circle, the part, its price */
.balloons .num { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(31, 63, 143, .7); background: var(--ground); display: flex; align-items: center; justify-content: center;
  font: 400 13px/1 var(--hand); color: var(--pen); }
.balloons .tag { display: grid; gap: 0; line-height: 1.15; color: var(--pen); }
.balloons .tag b { font: 400 17px/1.15 var(--hand); }
.balloons .tag span { font: 400 13.5px/1.25 var(--hand); color: rgba(31, 63, 143, .82); }
@media (min-width: 1000px) { .balloons .tag b { font-size: 19px; } .balloons .tag span { font-size: 14.5px; } .balloons .ball { gap: 12px; } }
.balloons .on .num, .balloons .first .num { border-color: var(--pen); border-width: 1.5px; color: var(--pen); background: var(--panel); }
.balloons .on .dot, .balloons .first .dot { border-color: var(--pen); background: var(--pen); }
/* a small part's name on the rail (computer, story.js .xb; Dave「零件旁标名称」): no number, a smaller hand, a fainter line */
.balloons .ln.x { background: rgba(31, 63, 143, .32); }
.balloons .dot.x { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; }
.balloons .xb .tag b { font-size: 15.5px; color: rgba(31, 63, 143, .8); }
.balloons .xb.on .tag b { color: var(--pen); text-decoration: underline; text-underline-offset: 3px; }
.plane.hot .scr { filter: drop-shadow(0 0 1px #1F3F8F) drop-shadow(0 0 5px rgba(31, 63, 143, .45)); }
.chapters { position: absolute; left: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))); top: calc(var(--top) + 12% ); width: min(400px, 30vw); display: grid; }
.chapter { grid-area: 1 / 1; opacity: 0; }
.chapter h2 { margin: 14px 0 16px; font-size: clamp(30px, 3.3vw, 50px); }
.chapter > p:not(.kicker) { margin: 0; font-size: clamp(15px, 1.25vw, 17px); color: var(--ink-2); }
.checks { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; }
.checks li { display: flex; align-items: center; gap: 10px; font: 400 12.5px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.checks svg { width: 16px; height: 16px; color: var(--accent); flex: none; }
html:is([lang="zh-Hans"], [lang="ja"], [lang="ko"]) .checks li { font-family: var(--sans); font-size: 14px; letter-spacing: .02em; }
/* the parts list table only shows without JavaScript (noscript): with it, each numbered label beside the phone carries the
   part and its price, so the phone gets the room (Dave「打开的时候没厚度 细节不够」: the opened phone was too small) */
.bom { display: none; position: absolute; right: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))); top: calc(var(--top) + 9%); width: min(360px, 26vw); opacity: 0; }
.chapter > p.bom-note:not(.kicker) { display: none; margin: 14px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink-3); max-width: 34em; }
@media (min-width: 1000px) { .chapter > p.bom-note:not(.kicker) { display: block; } }
.bom h3 { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--label); margin-bottom: 10px; font-stretch: 100%; }
.bom table { width: 100%; border-collapse: collapse; }
.bom th { text-align: left; padding: 0 0 9px; border-bottom: 1px solid var(--rule-3); font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--label); }
.bom th:last-child, .bom td.p { text-align: right; }
.bom td { padding: 10px 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
.bom td.n { width: 38px; font-size: 11.5px; color: var(--ink-3); }
.bom td.p { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.bom .keep { color: var(--ink-4); }
.bom .part { all: unset; cursor: pointer; font-size: 15px; font-weight: 500; color: var(--ink); }
.bom .part:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.bom tr.on { background: var(--accent-soft); }
.bom tr.on td.n, .bom tr.on .part { color: var(--accent); }
.bom-note { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.titleblock { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; border: 1px solid rgba(27, 26, 23, .22); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.titleblock span { padding: 8px 10px; border-right: 1px solid rgba(27, 26, 23, .22); border-bottom: 1px solid rgba(27, 26, 23, .22); }
.titleblock span:nth-child(2n) { border-right: 0; }
.titleblock span:nth-child(n+3) { border-bottom: 0; }
.titleblock span:first-child { color: var(--ink-2); }
.chapnav { position: absolute; left: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))); bottom: 26px; display: flex; gap: 10px; z-index: 3; }
.chapnav button { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 9px; padding: 8px 0 4px; }
.chapnav span { font: 400 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); transition: color .2s ease; }
.chapnav button:hover span, .chapnav button.on span { color: var(--ink); }
.chapnav button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.chapnav i { display: block; width: 72px; height: 2px; border-radius: 2px; background: var(--rule-2); overflow: hidden; }
.chapnav b { display: block; height: 100%; width: 0; background: var(--ink); }
.pickhint { position: absolute; right: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))); bottom: 30px; margin: 0; display: flex; align-items: center; gap: 8px; padding: 8px 14px;
  border-radius: 2px; border: 1px solid var(--rule-2); background: var(--panel); font-size: 11.5px; letter-spacing: .12em; color: var(--ink-2); opacity: 0; pointer-events: none; }
.pickhint svg { width: 16px; height: 16px; }
/* a computer: under the chapter words, above the chapter buttons - on the right it covered the rail's lowest labels, and with
   the small parts' names and a tap now ticking the part, people tap one after another (13-OCT-26) */
.pick { position: absolute; z-index: 5; left: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))); bottom: 84px; width: min(320px, calc(100% - 32px)); padding: 18px 18px 16px;
  border-radius: 3px; background: var(--panel); border: 1px solid var(--rule-3); box-shadow: 0 18px 40px rgba(27, 26, 23, .12); display: grid; gap: 6px; }
.pick[hidden] { display: none; }
.pick-name { margin: 2px 0 0; padding-right: 36px; font: 400 24px/1.15 var(--display); }
.pick-price { margin: 0; font: 400 28px/1.1 var(--display); letter-spacing: 0; }
.pick-price:empty { display: none; }
.pick-fix { margin: 2px 0 10px; font-size: 14.5px; color: var(--ink-2); }
.pick-fix:empty { display: none; }
/* what the tap ticked in the parts picker (Dave「点零件就勾选」), and the way down to it */
.pick-list { margin: 0 0 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13.5px; color: var(--accent); }
.pick-list[hidden] { display: none; }
.pick-list svg { width: 15px; height: 15px; flex: none; }
.pick-list a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.pick .btn { min-height: 46px; font-size: 15px; }
.pick .btn[hidden] { display: none; }   /* .btn's inline-flex showed it anyway: the frame's card had a button that did nothing */
.pick-x { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 6px; border: 0; background: var(--accent-soft); color: var(--ink); cursor: pointer; display: grid; place-items: center; padding: 0; }
.pick-x svg { width: 16px; height: 16px; }
@media (max-width: 999px) {
  .chapters { left: 16px; right: 16px; width: auto; top: auto; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .chapter h2 { margin: 10px 0 10px; font-size: clamp(26px, 6.6vw, 34px); }
  .chapter > p:not(.kicker) { font-size: 15px; }
  .stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; pointer-events: none; z-index: 1;
    background: linear-gradient(to top, var(--ground) 30%, rgba(248, 245, 238, .88) 62%, rgba(248, 245, 238, 0)); }
  .chapters { z-index: 2; }
  .bom, .chapnav, .pickhint { display: none; }
  .pick { left: 16px; right: 16px; width: auto; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-height: 700px) and (max-width: 999px) { .chapter > p:not(.kicker) { display: none; } .chapter .checks { display: none; } }
/* reduced motion (story.js adds .still): nothing pinned or moving; the opened drawing, and all four chapters as a list - beside
   it on a computer, under it on a phone */
.story.still .stage { height: auto; min-height: 100svh; overflow: visible; }
.story.still .chapters { position: relative; top: auto; left: auto; margin-left: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))); padding: calc(var(--top) + 48px) 0 64px; gap: 44px; }
.story.still .chapter { grid-area: auto; }
.story.still .chapter h2 { font-size: clamp(26px, 2.6vw, 38px); }
@media (max-width: 999px) {
  .story.still .stage { padding-top: min(64svh, 560px); }   /* the drawing's room; the words follow it */
  .story.still .stage::after { display: none; }
  .story.still .chapters { margin: 0 16px; padding: 8px 0 calc(96px + 32px + env(safe-area-inset-bottom, 0px)); bottom: auto; right: auto; gap: 32px; }
  .story.still .chapter > p:not(.kicker) { display: block; } .story.still .chapter .checks { display: grid; }   /* even on short screens */
}

/* ── the sections' common frame ── */
.prices, .how, .visit, .faq { padding-block: clamp(72px, 9vw, 120px); border-top: 1px solid var(--rule); }
.visit.first { padding-top: calc(var(--top) + clamp(32px, 6vw, 80px)); border-top: 0; }
.head { display: grid; gap: 14px; max-width: 52em; margin-bottom: clamp(32px, 5vw, 52px); }
.head h2 { font-size: clamp(32px, 4.4vw, 60px); }
/* the Google rating's link to its reviews (About 01), and the small print where the numbers come from */
.stat-link { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font: 400 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); text-decoration: none; }
.stat-link svg { width: 14px; height: 14px; }
.fines { margin-top: 22px; display: grid; gap: 6px; }
.fine { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-4); }

/* ── the first page's services: six repairs, each a card that opens a WhatsApp quote naming it, and the not-sure card in the
   house green. The part sketches are small cuts of the story's drawings (public/landing/thumbs, 8-21 KB each). ── */
.services { padding-block: clamp(64px, 8vw, 112px); border-top: 1px solid var(--rule); }
.sv-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sv-grid > li { display: grid; min-width: 0; }
.sv-card { display: grid; grid-template-rows: auto 96px auto 1fr auto; gap: 8px; min-width: 0; padding: 14px 14px 16px; border: 1px solid var(--rule-2); border-radius: 4px;
  background: var(--panel); color: var(--ink); text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.sv-n { font-size: 11px; letter-spacing: .14em; color: var(--label); }
.sv-img { width: 100%; height: 96px; object-fit: contain; filter: contrast(1.3) brightness(.95); }   /* the story's pale hatching, inked a little darker at this size */
.sv-card h3 { font-size: 19px; line-height: 1.15; }
.sv-card p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.sv-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font: 700 13.5px/1.2 var(--sans); letter-spacing: .02em; color: var(--accent); }
.sv-go svg { width: 15px; height: 15px; flex: none; }
@media (hover: hover) { .sv-card:hover { border-color: rgba(156, 127, 78, .6); transform: translateY(-2px); } }
.sv-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sv-wide { grid-column: 1 / -1; }
.sv-card.sv-unsure { grid-template-rows: none; gap: 6px; padding: 20px 18px; background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
  outline: 1px solid rgba(201, 171, 112, .55); outline-offset: -6px; }
.sv-unsure .kicker { color: #D6BA80; }
.sv-unsure h3 { font-size: 24px; }
.sv-unsure p:not(.kicker) { color: rgba(248, 245, 238, .86); }
.sv-unsure .sv-go { color: var(--accent-ink); margin-top: 6px; }
.sv-foot { margin-top: 26px; display: grid; gap: 14px; }
.sv-brands { margin: 0; display: grid; gap: 8px; }
.sv-brands .mono:last-child { font-size: 13px; letter-spacing: .1em; color: var(--ink-2); }
.sv-more { justify-self: start; display: inline-flex; align-items: center; min-height: 40px; font-size: 15px; color: var(--accent); text-decoration: underline 1px rgba(30, 58, 43, .35); text-underline-offset: 6px; }
.sv-more::after { content: "\2192"; display: inline-block; margin-left: 8px; }
@media (min-width: 760px) {
  .sv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .sv-card { grid-template-rows: auto 128px auto 1fr auto; padding: 18px 18px 20px; }
  .sv-img { height: 128px; }
  .sv-card h3 { font-size: 22px; }
  .sv-card p { font-size: 14.5px; }
}
@media (min-width: 1000px) {
  .sv-card.sv-unsure { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 40px; padding: 24px 28px; }
  .sv-unsure .sv-go { grid-column: 2; grid-row: 1 / span 3; }
  .sv-foot { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}

/* ── Repair: every part of an iPhone 17 Pro, ticked and sent to WhatsApp (parts.js). "Most replaced" shows the common ones;
   with no script (no .js on <html>) every part shows. ── */
.p17 { padding-block: clamp(64px, 8vw, 112px); border-top: 1px solid var(--rule); }
.p17-view { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.chip-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid var(--rule-2); border-radius: 999px; background: transparent;
  color: var(--ink-2); font: 400 14.5px var(--sans); cursor: pointer; }
.chip-btn small { font-size: 12px; opacity: .7; }
.chip-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.p17-group { margin-top: 30px; }
.p17-gh { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; font-size: clamp(20px, 1.8vw, 24px); }
.p17-gh small { font-size: 12px; letter-spacing: .12em; color: var(--label); }
.p17-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.p17-grid > li { display: grid; min-width: 0; }
.p17-card { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px 12px 14px; border: 1px solid var(--rule-2); border-radius: 4px;
  background: var(--panel); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.p17-card input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.p17-img { display: flex; align-items: center; justify-content: center; gap: 6px; height: 104px; margin-bottom: 4px; overflow: hidden; }
.p17-img img { max-width: 100%; max-height: 104px; width: auto; height: auto; object-fit: contain; }
.p17-img.two img { max-width: 48%; }
.p17-faces { display: grid; grid-template-columns: 1fr 1fr; text-align: center; font-size: 11px; letter-spacing: .08em; color: var(--label); }
.p17-name { padding-right: 26px; font: 400 16.5px/1.2 var(--display); color: var(--ink); }
.p17-spec { font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.p17-note { font-size: 13px; line-height: 1.4; color: var(--ink-3); }
.p17-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; padding-top: 2px; }
.p17-tag { padding: 2px 8px; border: 1px solid rgba(156, 127, 78, .45); border-radius: 999px; font-size: 11px; letter-spacing: .03em; color: var(--label); }
.p17-tick { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--rule-3);
  background: var(--panel); color: transparent; }
.p17-tick svg { width: 14px; height: 14px; }
@media (hover: hover) { .p17-card:hover { border-color: rgba(156, 127, 78, .6); } }
.p17-card:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.p17-card:has(input:checked) .p17-tick { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.p17-card:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.js .p17[data-view="common"] .p17-grid > li:has(.p17-card:not(.common)) { display: none; }
.js .p17[data-view="common"] .p17-group:not(.has-common) { display: none; }
.js .p17[data-view="common"] .p17-gh small { display: none; }
.p17 .fine { margin-top: 20px; max-width: 62em; }
/* the bar: above the dock on a phone, at the foot of the screen on a computer, while the picker is in view */
.p17-bar { position: sticky; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); z-index: 5; margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 10px 10px 10px 18px; border: 1px solid var(--rule-2); border-radius: 999px; background: rgba(255, 253, 248, .97); box-shadow: 0 12px 30px rgba(27, 26, 23, .12); }
.p17-bar[hidden] { display: none; }
.p17-count { font-size: 14.5px; color: var(--ink-2); }
.p17-bar .btn-accent { margin-left: auto; min-height: 46px; }
@media (min-width: 760px) { .p17-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .p17-img { height: 120px; } .p17-img img { max-height: 120px; } }
@media (min-width: 1000px) { .p17-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .p17-bar { bottom: 20px; } }
@media (max-width: 420px) { .p17-bar { border-radius: 14px; } .p17-bar .btn-accent { width: 100%; margin-left: 0; } }

/* ── 4. prices: the parts list as a price list ── */
.pbox { border: 1px solid var(--rule-2); border-radius: 3px; background: var(--panel); overflow: hidden; }
.brandpick { margin: 0; padding: 18px 20px; border: 0; border-bottom: 1px solid var(--rule); }
.brandpick legend { padding: 0; margin-bottom: 12px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--label); float: left; width: 100%; }
.chips { clear: both; display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--rule-2); border-radius: 999px; font-size: 14.5px; color: var(--ink-2); }
.chip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.pgrid { display: grid; }
/* prices off: the quote form - what is wrong as chips under the phone chips, no table */
.kindpick { padding: 18px 0 2px; border-bottom: 0; }
.quote .answer .btn { margin-top: 4px; }
.balloons .tag span:empty { display: none; }
.ptable { min-width: 0; padding: 6px 20px 22px; overflow-x: auto; }
.pricelist { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pricelist th, .pricelist td { padding: 12px 10px; text-align: left; font-weight: 400; border-bottom: 1px solid var(--rule); }
.pricelist th:first-child, .pricelist td:first-child { padding-left: 0; }
.pricelist thead th { padding-top: 16px; font-size: 10.5px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--label); }
.pricelist .num { text-align: right; white-space: nowrap; }
.pricelist td.num { font-size: 15px; letter-spacing: .03em; }   /* figures read as figures, not as tracked capitals */
.pricelist .jobs { font-size: 13px; color: var(--ink-3); }
.kind { all: unset; cursor: pointer; display: inline-flex; align-items: center; min-height: 32px; font: 400 18px/1.2 var(--display); color: var(--ink); }
.kind:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.pricelist tbody tr { cursor: pointer; }
@media (hover: hover) { .pricelist tbody tr:hover .kind { color: var(--accent); } }
.pricelist tr.on { background: var(--accent-soft); }
.pricelist tr.on .kind { color: var(--accent); }
.pricelist tr.unsure td { color: var(--ink-2); }
.field { margin-top: 20px; display: grid; gap: 8px; }
.field label { font-size: 14px; font-weight: 700; }
.field input { min-height: 48px; padding: 0 14px; border: 1px solid var(--rule-2); border-radius: 2px; background: var(--panel); color: var(--ink); font: 16px var(--sans); }
.field textarea { min-height: 120px; padding: 12px 14px; border: 1px solid var(--rule-2); border-radius: 12px; background: var(--panel); color: var(--ink); font: 16px/1.5 var(--sans); resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-4); }
.hint { margin: 0; font-size: 12.5px; color: var(--ink-4); }
.answer { display: grid; gap: 12px; align-content: start; padding: 24px 20px; border-top: 1px solid var(--rule); background: var(--ground-2); }
.pick-empty { margin: 0; color: var(--ink-3); }
.a-what { margin: 0; font: 400 25px/1.2 var(--display); }
.a-price { margin: 0; display: flex; align-items: baseline; gap: 8px; font: 400 clamp(38px, 4.2vw, 54px)/1 var(--display); letter-spacing: -.01em; }
.a-price small { font-size: 13px; color: var(--ink-3); letter-spacing: .06em; }
.a-word { margin: 0; font: 400 clamp(28px, 3vw, 36px)/1.15 var(--display); }
.a-meta { display: grid; margin: 0; border-top: 1px solid var(--rule); }
.a-meta div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 14px; }
.a-meta dt { color: var(--ink-3); }
.a-meta dd { margin: 0; font-weight: 700; text-align: right; }
.a-note { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.a-fresh { margin: 0; font-size: 12px; color: var(--ink-4); }
.answer .btn { width: 100%; }
@media (min-width: 1000px) {
  .pgrid { grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr); }
  .answer { border-top: 0; border-left: 1px solid var(--rule); padding: 28px; }
}
@media (max-width: 599px) {
  .pricelist th:nth-child(3), .pricelist td:nth-child(3), .pricelist th:nth-child(4), .pricelist td.jobs { display: none; }
  .ptable { padding-inline: 16px; }
  .brandpick { padding-inline: 16px; }
}

/* ── 5. how we work ── */
.steps { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--rule-2); }
.steps li { display: grid; gap: 12px; align-content: start; padding: 24px 0 28px; border-bottom: 1px solid var(--rule); }
.step-n { font-size: 11.5px; letter-spacing: .14em; color: var(--label); }
/* each step drawn by Dave (the counter, the bench, the checklist, the hand-back): one box, so the four sit on one line */
.step-art { width: 100%; max-width: 340px; height: auto; aspect-ratio: 6 / 5; object-fit: contain; object-position: center bottom; margin-bottom: 6px; }
.steps h3 { font-size: 22px; }
.steps p { margin: 0; font-size: 15.5px; color: var(--ink-2); max-width: 30em; }
@media (min-width: 760px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps li { padding-right: 24px; }
  .steps li:nth-child(2n) { padding-left: 24px; border-left: 1px solid var(--rule); }
}
@media (min-width: 1000px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps li { padding: 26px 24px 30px; border-left: 1px solid var(--rule); }
  .steps li:first-child { padding-left: 0; border-left: 0; }
}

/* ── 6. visit ── */
.vgrid { display: grid; gap: 40px; }
.addr { margin: 0; font: 400 clamp(25px, 2.7vw, 34px)/1.2 var(--display); }
.addr-2 { margin: 8px 0 0; color: var(--ink-2); }
.contact { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--rule); }
.contact b { font: 400 24px/1.2 var(--display); letter-spacing: .03em; }
.contact .fine { width: 100%; }
.hours { width: 100%; margin-top: 12px; border-collapse: collapse; }
.hours td { padding: 12px 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); }
.hours td:last-child { text-align: right; font-size: 15px; letter-spacing: .04em; }
.hours tr.today td { color: var(--ink); font-weight: 700; }
.now-wait { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; font-size: 12.5px; text-transform: uppercase; color: var(--ink-3); }
@media (min-width: 1000px) { .vgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; } }
.vhours { margin-top: 36px; }
/* the guide video in a frame ruled like the buttons (an engraved line inside the edge) */
.guide { display: grid; gap: 12px; align-content: start; }
.guide h2 { font-size: clamp(26px, 2.6vw, 36px); }
.guide-p { margin: 0; max-width: 30em; color: var(--ink-2); }
.guide-frame { margin-top: 10px; width: min(100%, 340px); padding: 10px; border: 1px solid var(--rule-2); border-radius: 26px; background: var(--panel);
  outline: 1px solid rgba(156, 127, 78, .4); outline-offset: -6px; }
.guide-v { display: block; width: 100%; height: auto; aspect-ratio: 480 / 848; border-radius: 17px; background: var(--ink); object-fit: cover; }
@media (max-width: 999px) { .guide-frame { justify-self: center; } }
/* Google Maps' and Waze's marks, white on their colours, the way WhatsApp's sits in its button */
.app-logo { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; margin-left: -12px; border-radius: 50%; }
.btn .app-logo svg { width: 17px; height: 17px; fill: #FFF; }
.app-logo.gm { background: #4285F4; }
.app-logo.wz { background: #33CCFF; }

/* ── the first section of About, Repair and Visit: clear of the fixed header ── */
.first { padding-top: calc(var(--top) + clamp(32px, 6vw, 80px)); border-top: 0; }
.head h1 { font-size: clamp(40px, 5.6vw, 78px); }
.pagehead { padding-bottom: clamp(24px, 4vw, 48px); }
.pagehead h1 { margin-top: 16px; max-width: 14em; font-size: clamp(40px, 5.6vw, 78px); }
.pagehead .lead { margin-top: 18px; }
/* Repair's head: the words, and him at the microscope beside them (under them on a phone) */
.rp-in { display: grid; gap: 28px; align-items: center; }
.rp-art { margin: 0; justify-self: center; width: min(70vw, 300px); }
.rp-art img { width: 100%; height: auto; }
@media (min-width: 1000px) { .rp-in { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 64px; } .rp-art { width: 100%; max-width: 380px; } }

/* About: Wani and Zainal at the bench, each a cameo and a line, quiet like the founder's signature (Dave「斯文一些」) */
/* a person as a small cameo in a brass ring, the size of the heading's first word (Dave「头像差不多和 we 一样大就好」) */
.cameo { flex: none; width: 60px; height: 60px; padding: 4px; border-radius: 50%; border: 1px solid rgba(156, 127, 78, .6); background: var(--panel); object-fit: contain; }
.byline { margin: 0; display: flex; align-items: center; gap: 14px; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }

/* ── About: the founder signs his letter - his own drawing, his name in the pen's hand ── */
.fd-sign { margin: 8px 0 0; display: flex; align-items: center; gap: 14px; }
.fd-by { display: grid; justify-items: start; gap: 6px; }
.fd-name { display: inline-block; font: 400 clamp(34px, 3vw, 44px)/1 var(--hand); color: var(--pen); transform: rotate(-4deg); transform-origin: left center; }
.fd-role { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--label); }
@media (prefers-reduced-motion: no-preference) {
  .fd-name { clip-path: inset(0 100% 0 0); animation: bh-write 1.1s ease .6s forwards; }
}

/* ── About (Dave chose B of two, 13-OCT-26): four numbered parts ── */
.chap-stats dd small { margin-left: 4px; font-size: .4em; color: var(--ink-2); }
.chap-stats .star { color: var(--brass); }
/* the standard, numbered in roman figures */
.std-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; border-top: 1px solid var(--rule-2); }
.std-list li { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.std-n { grid-row: span 2; font: 400 28px/1 var(--display); color: var(--brass); }
.std-list h3 { font-size: 22px; }
.std-list p { margin: 0; max-width: 40em; color: var(--ink-2); }
.std-list.compact li { padding: 14px 0; }
.std-list.compact h3 { font-size: 19px; }
.std-list.compact p { font-size: 15px; }
/* a big brass number, the words, one drawing; sides alternate on a computer */
.chap { padding-block: clamp(48px, 6vw, 88px); border-top: 1px solid var(--rule); }
.chap-in { display: grid; gap: 28px; align-items: center; }
.chap-copy { display: grid; gap: 14px; max-width: 34em; }
.chap-n { margin: 0; font: 400 clamp(52px, 6vw, 92px)/.9 var(--display); color: var(--brass); }
.chap-copy h2 { font-size: clamp(30px, 3.6vw, 48px); }
.chap-copy > p:not(.chap-n):not(.fd-sign) { margin: 0; color: var(--ink-2); }
.chap-copy b { color: var(--ink); font-weight: 700; }
.chap-quote { font: 400 clamp(22px, 2.2vw, 30px)/1.25 var(--display); color: var(--ink) !important; }
.chap-art { margin: 0; justify-self: center; width: min(78vw, 420px); }
.chap-art img { width: 100%; height: auto; }
.chap-stats { margin: 6px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 20px; }
.chap-stats div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; }
.chap-stats dd { margin: 0; font: 400 clamp(32px, 3.2vw, 44px)/1 var(--display); }
.chap-stats dt { font-size: 13px; line-height: 1.4; color: var(--ink-2); }
@media (min-width: 1000px) { .chap-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; } .chap.rev .chap-copy { order: 2; } .chap.solo .chap-in { grid-template-columns: minmax(0, 44em); } .chap.solo .chap-copy { order: 0; } }

/* ── the repair pages (services.ts, 13-OCT-26): the head with the repair's drawing; the signs beside the steps; original or
   aftermarket as two cards; the questions; the other repairs as small linked cards (also under Repair's steps) ── */
.srv-in { display: grid; gap: 28px; align-items: center; }
.srv-copy { display: grid; gap: 14px; max-width: 40em; }
.srv-copy h1 { margin-top: 4px; }
.srv-copy .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.srv-art { margin: 0; justify-self: center; width: min(36vw, 160px); }   /* a phone: small, the words first */
.srv-art img { width: 100%; height: auto; }
.srv-sec { padding-block: clamp(48px, 6vw, 88px); border-top: 1px solid var(--rule); }
.srv-h2 { margin-bottom: 18px; font-size: clamp(26px, 3vw, 40px); }
.srv-grid { display: grid; gap: 40px; }
.srv-sym { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-2); }
.srv-sym li { position: relative; padding: 14px 0 14px 26px; border-bottom: 1px solid var(--rule); color: var(--ink-2); }
.srv-sym li::before { content: ""; position: absolute; left: 4px; top: 21px; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--brass); }
.srv-parts .lead { margin-bottom: 4px; }
.srv-two { display: grid; gap: 16px; margin: 22px 0; }
.srv-card { display: grid; gap: 8px; padding: 20px 22px; background: var(--panel); border: 1px solid var(--rule-2); }
.srv-card h3 { font-size: 22px; }
.srv-card p { margin: 0; color: var(--ink-2); }
.srv-warr { margin: 0 0 24px; max-width: 46em; color: var(--ink-2); }
.srv-warr b { margin-right: 10px; color: var(--ink); }
.srv-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.srv-link { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px; background: var(--panel); border: 1px solid var(--rule-2); color: var(--ink); text-decoration: none; }
.srv-link[aria-current="page"] { border-color: var(--brass); }
.srv-link img { flex: none; width: 44px; height: 44px; object-fit: contain; }
.srv-link span { flex: 1; min-width: 0; font-size: 15px; line-height: 1.3; }
.srv-link svg { flex: none; width: 16px; height: 16px; color: var(--accent); }
.fsrv a { font-size: 13.5px; }
@media (min-width: 760px) { .srv-two { grid-template-columns: 1fr 1fr; } .srv-links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .srv-in { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 64px; } .srv-art { width: 100%; max-width: 280px; } .srv-grid { grid-template-columns: 1fr 1fr; gap: 64px; } }

/* ── the way to a price, closing About and Repair ── */
.cta { padding-block: clamp(56px, 7vw, 96px); border-top: 1px solid var(--rule); background: var(--ground-2); }
.cta-in { display: grid; gap: 8px; align-items: end; }
.cta-art { margin: 0 0 8px; width: 150px; }
.cta-art img { width: 100%; height: auto; }
.cta .head { margin-bottom: 0; }
.cta .actions { margin-top: 12px; }
@media (min-width: 1000px) {
  .cta-in { grid-template-columns: 180px minmax(0, 1fr) auto; gap: 48px; align-items: center; }
  .cta.plain .cta-in { grid-template-columns: minmax(0, 1fr) auto; }
  .cta-art { width: 100%; margin: 0; }
  .cta .actions { margin-top: 0; }
}

/* ── Visit: a walk-in at the counter beside the questions ── */
.faq-in { display: grid; gap: 28px; }
.faq-art { margin: 0; justify-self: center; width: min(78vw, 340px); }
.faq-art img { width: 100%; height: auto; }
@media (min-width: 1000px) { .faq-in { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 72px; align-items: start; } .faq-art { width: 100%; max-width: 400px; margin-top: 8px; } }

/* ── 7. questions, footer, dock ── */
.qa { border-top: 1px solid var(--rule-2); }
.qa details { border-bottom: 1px solid var(--rule); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font: 400 clamp(19px, 1.7vw, 22px)/1.3 var(--display); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary svg { width: 20px; height: 20px; flex: none; color: var(--accent); transition: transform .2s ease; }
.qa details[open] summary svg { transform: rotate(45deg); }
.qa p { margin: 0 0 20px; max-width: 46em; color: var(--ink-2); }
.foot { border-top: 1px solid var(--rule); padding-block: 44px calc(44px + 84px + env(safe-area-inset-bottom, 0px)); }
.foot .wrap { display: grid; gap: 20px; }
.fbrand { display: grid; gap: 10px; }
.fnav { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 4px 0 2px; }
.fnav a { display: inline-flex; align-items: center; min-height: 36px; font-size: 14.5px; letter-spacing: .03em; color: var(--ink-2); text-decoration: none; }
.fnav a[aria-current="page"] { color: var(--ink); text-decoration: underline 1px var(--brass); text-underline-offset: 6px; }
.foot p { margin: 0; font-size: 14px; color: var(--ink-3); }
.fb { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font: 400 12.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); text-decoration: none; }
.fb svg { width: 14px; height: 14px; }
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); background: rgba(248, 245, 238, .96); border-top: 1px solid var(--rule); }
.dock .btn { min-height: 52px; padding-inline: 12px; }
@media (min-width: 1000px) { .dock { display: none; } .foot { padding-bottom: 44px; } }

/* ── the language menu and Directions: sheets on a phone; a dropdown and a dialog on a computer ── */
.langsheet, .dirsheet { position: fixed; inset: 0; z-index: 90; }
.langsheet[hidden], .dirsheet[hidden] { display: none; }
.ls-scrim { position: absolute; inset: 0; background: rgba(27, 26, 23, .32); }
.ls-panel { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 16px calc(22px + env(safe-area-inset-bottom, 0px)); border-radius: 10px 10px 0 0; background: var(--panel); border-top: 1px solid var(--rule-2); }
.ls-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ls-head p { margin: 0 0 0 4px; font-size: 10.5px; letter-spacing: .12em; color: var(--label); }
.ls-x { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--ink-2); cursor: pointer; }
.ls-x svg { width: 18px; height: 18px; }
.ls-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; }
.ls-list a { min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 14px; border-radius: 3px; border: 1px solid transparent; color: var(--ink); text-decoration: none; }
.ls-list a:hover { background: rgba(30, 58, 43, .06); }
.ls-list a[aria-current="true"] { background: var(--accent-soft); border-color: rgba(156, 127, 78, .4); }
.ls-name { font: 400 19px/1.2 var(--display); }
.ls-code { margin-left: auto; font-size: 10.5px; color: var(--ink-3); }
.ls-list svg { width: 18px; height: 18px; flex: none; color: var(--accent); visibility: hidden; }
.ls-list a[aria-current="true"] svg { visibility: visible; }
@media (min-width: 1000px) {
  .ls-scrim { background: transparent; }
  .ls-panel { left: auto; bottom: auto; right: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); top: calc(var(--top) + 8px); width: 320px; padding: 8px; border: 1px solid var(--rule-2); border-radius: 4px; box-shadow: 0 24px 60px rgba(27, 26, 23, .16); }
}
/* Directions: the address, the two map apps side by side, the guide video as tall as the sheet allows */
.dir-panel { max-height: 94svh; overflow-y: auto; }
.dir-addr { margin: 0 4px 14px; font: 400 21px/1.25 var(--display); }
.dir-apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dir-apps .btn { padding-inline: 16px 12px; }
.dir-guide { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); display: grid; justify-items: center; gap: 10px; }
.dir-guide .kicker { justify-self: start; margin-left: 4px; }
.dir-guide .guide-v { width: auto; max-width: 100%; height: min(52svh, 460px); }
.dir-note { margin: 0; max-width: 26em; font-size: 13.5px; line-height: 1.5; text-align: center; color: var(--ink-3); }
@media (min-width: 1000px) {
  .dirsheet .ls-scrim { background: rgba(27, 26, 23, .32); }
  .dirsheet .ls-panel { inset: 0; margin: auto; width: min(460px, 92vw); height: fit-content; max-height: 90vh; padding: 10px 18px 20px; }
}
@media (prefers-reduced-motion: no-preference) {
  .ls-panel { animation: bh-sheet .22s cubic-bezier(.2, .7, .1, 1) both; }
  @keyframes bh-sheet { from { opacity: 0; transform: translateY(12px); } }
}