/* quietlybuild.in, 5th edition (25 September 2026): Construction lines, warmed.
   One stylesheet for every page. No inline styles anywhere: the script only sets classes,
   attributes and a few custom properties (--dm, --dl, --db, --cover, --a, --w, --u).
   Fonts, all SIL Open Font License 1.1, served from this domain (licences in /assets/fonts):
   Instrument Sans 400 and 500 and Geist Mono 400 (Fontsource 5.3.0, latin), and
   Nothing You Could Do, the hand used only for the redline notes and the P.S.
   The design system is written up outside the site folder, in
   3-business/quietlybuild/redesign-2026-09-24/COMPONENTS.md (nothing in the site folder may be a note). */

/* ——— 1. Fonts ———
   Instrument Sans metrics are pinned so the construction lines sit on the letters in every
   browser: ascender .97, descender .25, cap height .72, x-height .51 (em). */
@font-face { font-family: 'Instrument Sans'; src: url(/assets/fonts/instrument-sans-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; ascent-override: 97%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: 'Instrument Sans'; src: url(/assets/fonts/instrument-sans-latin-500-normal.woff2) format('woff2'); font-weight: 500; font-style: normal; font-display: swap; ascent-override: 97%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: 'Geist Mono'; src: url(/assets/fonts/geist-mono-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'QB Hand'; src: url(/assets/fonts/nothing-you-could-do-400.woff) format('woff'); font-weight: 400; font-style: normal; font-display: swap; }

/* ——— 2. Tokens ———
   Drafting film, warm graphite, non-photo blue for construction lines only (never text),
   drafting blue for short labels, redline for the designer's notes. Every text colour is at
   least 4.5:1 on the surface it sits on (figures beside each). */
:root {
  --film: #F4F1EA;        /* the page */
  --sheet: #FBF9F5;       /* a sheet on the film */
  --graphite: #1C1A17;    /* text, and the drafting table */
  --lead: #5C5750;        /* second text: 6.3:1 on film, 6.8:1 on sheet */
  --npb: 141, 185, 227;   /* non-photo blue #8DB9E3, as rgb for alpha */
  --drafting: #1D5FB4;    /* short labels: 5.4:1 on film */
  --redline: #B3341B;     /* redline text: 5.4:1 on film; white on it 6.1:1 */
  --redline-ink: #D8452B; /* redline strokes */

  /* surface tokens, swapped by .table, .sheet and the night scheme */
  --bg: var(--film);
  --bg-2: var(--sheet);
  --fg: var(--graphite);
  --fg-2: var(--lead);
  --hair: #DDD8CD;
  --hair-2: #C8C1B4;
  --label: var(--drafting);
  --note: var(--redline);
  --note-ink: var(--redline-ink);
  --cl: rgba(var(--npb), .9);     /* a construction line */
  --cl-2: rgba(29, 95, 180, .22); /* a quiet one */
  --btn-bg: var(--graphite);
  --btn-fg: var(--film);
  --key-bg: var(--redline);   /* a red disc or button with small text on it: 6.1:1 with white */
  --key-fg: #fff;
  --device: #1C1A17;
  --shadow: 0 30px 60px -30px rgba(28, 26, 23, .45), 0 2px 6px -2px rgba(28, 26, 23, .12);
  /* each client's own tone, behind its stills and films while they load (never a white phone) */
  --tone-ga: #3A2A1E;
  --tone-nz: #0E2140;
  --tone-gm: #EFECE3;

  --sans: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --hand: 'QB Hand', 'Bradley Hand', 'Segoe Print', cursive;

  --wrap: 1320px;
  --gut: max(16px, min(4.2vw, 60px));
  --hdr: 64px;
  --sec: clamp(72px, 7.6vw, 110px);   /* the one gap between sections: top padding only */
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  color-scheme: light;
}

/* the drafting table: a graphite band (the footer, and any section given .table) */
.table {
  --bg: #1C1A17; --bg-2: #25221E; --fg: #EFEAE2; --fg-2: #B4ACA0; --hair: #34302A; --hair-2: #4A443C;
  --label: #7EB2F2; --note: #FF8F74; --note-ink: #FF6A4D; --cl: rgba(126, 178, 242, .75); --cl-2: rgba(126, 178, 242, .2);
  --btn-bg: #EFEAE2; --btn-fg: #1C1A17; --device: #0F0D0B;
  --key-bg: #FF6A4D; --key-fg: #1C1A17;   /* 6.2:1 */
}
/* a sheet laid on the film, with red corner marks: What if… and the close */
.sheet { --bg: var(--sheet); background: var(--bg); position: relative; border-block: 1px solid var(--hair); }

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #191714; --bg-2: #211E1A; --fg: #EFEAE2; --fg-2: #B4ACA0; --hair: #302C27; --hair-2: #433E37;
    --label: #7EB2F2; --note: #FF8F74; --note-ink: #FF6A4D; --cl: rgba(126, 178, 242, .75); --cl-2: rgba(126, 178, 242, .2);
    --btn-bg: #EFEAE2; --btn-fg: #191714; --device: #0F0D0B;
    --key-bg: #FF6A4D; --key-fg: #191714;
    --shadow: 0 30px 60px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .06);
    color-scheme: dark;
  }
  /* at night a table or a sheet is lifted off the page, with a hairline at each edge */
  .table, .sheet { --bg: #24201C; --bg-2: #2B2722; --hair: #34302A; --hair-2: #4A443C; border-block: 1px solid #34302A; }
}

@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }   /* the fade between pages: never under reduced motion */

/* ——— 3. The switches ———
   Set on <html> of every page, all the same (check-site.py fails if two pages disagree). Anything
   behind a switch is in the page and hidden until the switch is on; what cannot switch (the
   structured data, the FAQ, llms.txt, share cards) never carries it. COMPONENTS.md §9 has the
   sed lines.
     data-booking=""         "on" once cal.com/quietlybuild/call exists: every "Book a video call"
                             opens it. Off: the same buttons open WhatsApp to arrange a time.
     data-advocate=""        the date (YYYY-MM-DD) of the advocate's written OK: the refund promise,
                             the founding places and the "If I let you down" summaries appear.
     data-founding-left=""   0 to 3, and data-founding-date="YYYY-MM-DD", the day it was last set
                             by hand. Only read while data-advocate is on.
     data-card=""            "on" once international cards work: "Or by card…" appears.
     data-instagram=""       "on" once the kit's posts are up: Instagram in the footer.
     data-growmint="soon"    "live" the day the new growmintmedia.in is live (this was "the one
                             switch" in this file; it moved to <html> with the others).
     data-away-until=""      the holiday switch: the date the studio opens again.
     data-care=""            the date (YYYY-MM-DD) of the owner's written yes to the Care decisions
                             in operations/delivery/care.md §8: the response times, the three-hour
                             line, the pause when unpaid and the 12-month price hold appear (terms §07). */
html:not([data-booking="on"]) .if-booking, html[data-booking="on"] .if-not-booking { display: none !important; }
html:not([data-advocate^="20"]) .if-advocate, html[data-advocate^="20"] .if-not-advocate { display: none !important; }
html:not([data-card="on"]) .if-card { display: none !important; }
html:not([data-care^="20"]) .if-care, html[data-care^="20"] .if-not-care { display: none !important; }
html:not([data-instagram="on"]) .if-instagram { display: none !important; }
/* the one GrowMint switch: .gm-live shows only once <html data-growmint="live">, .gm-soon until then */
html:not([data-growmint="live"]) .gm-live, html[data-growmint="live"] .gm-soon { display: none !important; }
/* founding places: the count shows only when it is set; at 0 the founding schedule goes and the
   page says they are all taken */
.fnd__n { display: none; }
html[data-founding-left="3"] .fnd__n[data-n="3"], html[data-founding-left="2"] .fnd__n[data-n="2"],
html[data-founding-left="1"] .fnd__n[data-n="1"], html[data-founding-left="0"] .fnd__n[data-n="0"] { display: inline; }
html[data-founding-left="0"] .if-founding, html:not([data-founding-left="0"]) .if-founding-gone { display: none !important; }
html:not([data-founding-left="0"]):not([data-founding-left="1"]):not([data-founding-left="2"]):not([data-founding-left="3"]) .fnd__count { display: none; }

/* ——— 4. Base ——— */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 20px); background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 18px/1.55 var(--sans); font-kerning: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-synthesis: none; overflow-x: clip; }
img, video, svg, picture { display: block; max-width: 100%; }
/* alt text never paints over a loading picture (screen readers still get it) */
img { height: auto; color: transparent; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: var(--fg-2); transition: text-decoration-color .2s; }
a:hover { text-decoration-color: var(--note-ink); }
:focus-visible { outline: 2px solid var(--note-ink); outline-offset: 3px; border-radius: 2px; }
p { margin: 0 0 1em; text-wrap: pretty; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }
b, strong { font-weight: 500; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
figure { margin: 0; }
blockquote { margin: 0; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
::selection { background: rgba(var(--npb), .45); color: inherit; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 200; background: var(--fg); color: var(--bg); padding: 12px 18px; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: min(100% - 2 * var(--gut), var(--wrap)); margin-inline: auto; }
.nw { white-space: nowrap; }
@media (max-width: 340px) { .glance .nw { white-space: normal; } }   /* 320px (WCAG reflow): the hotel's address wraps rather than pushing the page sideways */

/* ——— 5. Type ———
   One family, two weights; hierarchy from size, not weight. Mono only for labels of one to three
   words (dt, eyebrows, keys), the dimensions in drawings, the ticks under the payment bars and
   the Lines grid: every value, sentence and time is in the sans. The hand only for the redline
   notes on the work, the note on the Site plan and the P.S. */
.h1 { font-size: clamp(40px, 5.45vw, 78px); line-height: 1; letter-spacing: -.045em; padding-bottom: .06em; }
.h2 { font-size: clamp(34px, 4.7vw, 64px); line-height: 1.02; letter-spacing: -.04em; padding-bottom: .06em; max-width: 14em; }
.h3 { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.1; letter-spacing: -.025em; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; font: 400 13px/1.4 var(--mono); color: var(--label); }
.eyebrow::before { content: ''; width: 14px; height: 1.5px; flex: none; background: var(--note-ink); }
.lede { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.5; }
.sec__sub, .work__sub { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.5; color: var(--fg-2); max-width: 36em; margin-top: 20px; }
.mono { font-family: var(--mono); font-size: 13px; line-height: 1.5; }

/* ——— 6. The construction layer on type ———
   Headings are simply there: no lines through them and no wipe. .lined keeps a heading's cap
   height, x-height and baseline in a ::before, shown only by the Lines switch. The one H1 inks
   once on load. */
.lined { position: relative; isolation: isolate; }
.lined::before { content: ''; position: absolute; inset: 0 0 .06em; z-index: -1; pointer-events: none; opacity: 0;
  background:
    linear-gradient(to bottom, transparent calc(.86em - 1px), var(--cl) calc(.86em - 1px) .86em, transparent .86em) 0 0 / 100% 1em repeat-y,
    linear-gradient(to bottom, transparent calc(.35em - 1px), var(--cl-2) calc(.35em - 1px) .35em, transparent .35em) 0 0 / 100% 1em repeat-y,
    linear-gradient(to bottom, transparent calc(.14em - 1px), var(--cl-2) calc(.14em - 1px) .14em, transparent .14em) 0 0 / 100% 1em repeat-y; }
.h2.lined::before, .h3.lined::before { background-size: 100% 1.02em; }
.lines-on .lined::before { opacity: 1; }
@keyframes ink { from { clip-path: inset(-.1em 100% -.2em -.1em); } to { clip-path: inset(-.1em -.1em -.2em -.1em); } }
@media (prefers-reduced-motion: no-preference) {
  .h1.ink { animation: ink 1.1s var(--ease-io) .2s both; }
}
.still .h1.ink { animation: none; clip-path: none; }

/* ——— 7. Buttons and links ——— */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border: 1px solid var(--btn-bg); background: var(--btn-bg); color: var(--btn-fg); font: 500 16px/1.2 var(--sans); letter-spacing: -.005em; text-decoration: none; transition: background-color .2s, color .2s, border-color .2s; cursor: pointer; }
.btn:hover { background: var(--key-bg); border-color: var(--key-bg); color: var(--key-fg); }
.btn--line { background: transparent; color: var(--fg); border-color: var(--fg); }
.btn--line:hover { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: 15px; }
.btn .ext { margin-left: 0; width: 11px; height: 11px; }
.arr { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .3s var(--ease); }
.btn:hover .arr, .xlink:hover .arr { transform: translateX(3px); }
.ext { display: inline-block; width: .7em; height: .7em; margin-left: .3em; vertical-align: .02em; fill: none; stroke: currentColor; stroke-width: 1.4; flex: none; }
.xlink { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; text-decoration: underline; text-decoration-color: var(--fg-2); text-underline-offset: .25em; }
.xlink .arr { width: 14px; height: 14px; }

/* ——— 8. The mark: two circles and one line ——— */
.mark { width: 30px; height: 30px; flex: none; }
.mark__ring { fill: none; stroke: currentColor; stroke-width: 3.6; }
.mark__stem { fill: currentColor; }

/* ——— 9. Header ———
   The brand, four links, and one filled button: Book a video call. From 600 to 1099 px the
   links fold into Menu; under 600 px the button goes to the dock. */
.hdr { position: sticky; top: 0; z-index: 60; height: var(--hdr); background: color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); border-bottom: 1px solid var(--hair); }
.hdr__in { height: 100%; display: flex; align-items: center; gap: 28px; min-width: 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; font-size: 21px; letter-spacing: -.03em; }
.brand .mark { transition: transform .6s var(--ease); }
.brand:hover .mark { transform: rotate(180deg); }
.nav { display: flex; align-items: center; gap: 28px; margin-left: 12px; }
.nav a { font-size: 15px; white-space: nowrap; text-decoration: none; padding: 8px 0; background: linear-gradient(var(--note-ink), var(--note-ink)) 0 100% / 0 1px no-repeat; transition: background-size .35s var(--ease); }
.nav a:hover, .nav a[aria-current] { background-size: 100% 1px; }
/* the trade pages join the nav after a hairline, from 1100px (with Questions left out from 1100 to 1239px); below that they are in the Menu and the footer */
.nav__for { display: none; gap: 28px; align-items: center; position: relative; padding-left: 28px; }
.nav__for::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 18px; margin-top: -9px; background: var(--hair-2); }
@media (min-width: 1100px) { .nav__for { display: flex; } }
/* four trade pages since 25 September 2026, night (For clinics): below 1366px the nav is set at 14px with closer gaps,
   so the brand never gives way to it (measured: the name keeps its full width from 1100px up) */
@media (min-width: 1100px) and (max-width: 1365px) { .nav a { font-size: 14px; } .nav, .nav__for { gap: 18px; } .nav__for { padding-left: 18px; } }
@media (min-width: 1100px) and (max-width: 1239px) { .nav, .nav__for { gap: 14px; } .nav__for { padding-left: 14px; } }
.hdr__end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.hdr__book { white-space: nowrap; }
.menu { display: none; position: relative; }
.menu summary { list-style: none; cursor: pointer; height: 40px; padding: 0 14px; display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--fg); font-size: 15px; }
.menu summary::-webkit-details-marker { display: none; }
.menu__icon { width: 14px; height: 8px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transition: transform .3s var(--ease); }
/* open: the two lines cross into a close mark, so the button says what a second tap does */
.menu__icon { position: relative; }
.menu[open] .menu__icon { border-color: transparent; }
.menu[open] .menu__icon::before, .menu[open] .menu__icon::after { content: ""; position: absolute; left: 1px; right: 1px; top: 50%; height: 1.5px; margin-top: -.75px; background: currentColor; transform: rotate(40deg); }
.menu[open] .menu__icon::after { transform: rotate(-40deg); }
/* where the visitor is, in the menu too */
.menu__panel a[aria-current]:not(.menu__book) { color: var(--note); box-shadow: inset 2px 0 0 var(--note-ink); }
.menu__panel { position: absolute; right: 0; top: 50px; width: min(320px, calc(100vw - 32px)); max-height: calc(100vh - var(--hdr) - 12px); max-height: calc(100dvh - var(--hdr) - 12px); overflow-y: auto; overscroll-behavior: contain; display: grid; background: var(--bg-2); border: 1px solid var(--fg); padding: 8px 0; box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .45); }
.menu__panel a { padding: 12px 20px; font-size: 18px; text-decoration: none; }
.menu__panel a:hover { background: var(--bg); color: var(--note); }
.menu__panel .menu__book { display: flex; align-items: center; justify-content: space-between; margin: 4px 12px 8px; padding: 14px 16px; background: var(--btn-bg); color: var(--btn-fg); font-weight: 500; }
.menu__panel .menu__book:hover { background: var(--key-bg); color: var(--key-fg); }

/* ——— 10. First screen ———
   The words take eight of the twelve columns, the hotel's film four; the title block of facts
   runs across the bottom on the same columns (3·2·2·2·3), and its bottom is above the fold from
   1280 x 720 to 1440 x 900. Everything is sized by the height of the screen as well as its width. */
.hero { position: relative; padding: clamp(18px, 3.6vh, 52px) 0 0; }
.hero__grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: 24px; align-items: start; }
.hero__copy { grid-column: 1 / 9; grid-row: 1; }
.hero .h1 { max-width: 11.2em; font-size: clamp(40px, min(5.45vw, 11vh - 24px), 78px); }
.hero .lede { margin: clamp(12px, 2.6vh, 28px) 0 0; max-width: 34em; }
.hero .lede b { font-weight: 400; white-space: nowrap; }
.hero__video { margin: clamp(8px, 1.4vh, 14px) 0 0; padding-left: 14px; border-left: 2px solid var(--note-ink); font-size: clamp(18px, 1.45vw, 21px); line-height: 1.4; letter-spacing: -.005em; }
.hero__video b { font-weight: 500; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero .cta { margin-top: clamp(14px, 3vh, 30px); }
/* the call times, worked out in the visitor's own day (qb.js), and WhatsApp for anyone in a hurry */
.callline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin: clamp(10px, 1.8vh, 16px) 0 0; max-width: 42em; font-size: 15.5px; line-height: 1.5; color: var(--fg-2); }
.callline a { color: var(--fg); white-space: nowrap; }
.callline .arr { display: inline; width: 12px; height: 12px; margin-left: 4px; vertical-align: -.05em; }
.callline__wa { margin: 2px 0 0; font-size: 15.5px; color: var(--fg-2); }
.callline__wa a { color: var(--fg); }
/* a short laptop screen keeps the title block above the fold: WhatsApp is in the close, and in the header's menu */
@media (min-width: 900px) and (max-height: 700px) { .callline__wa { display: none; } }
/* the older status line (other pages may still carry it): the next opening, in the sans */
.status { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 clamp(14px, 2.8vh, 26px); font-size: 15px; line-height: 1.5; color: var(--fg-2); max-width: 60ch; }
.status__dot { position: relative; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; border: 1.5px solid var(--fg-2); flex: none; }
[data-state="open"] .status__dot { background: var(--note-ink); border-color: var(--note-ink); }
[data-state="away"] .status__dot { border-style: dashed; }
.sites { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 26px; margin: 38px 0 0; padding-top: 16px; border-top: 1px dashed var(--hair-2); max-width: 44em; }
.hero__grid > .sites { grid-column: 1 / 9; grid-row: 2; margin-top: clamp(12px, 2.6vh, 34px); padding-top: clamp(8px, 1.4vh, 16px); }
.sites__label { flex: 0 0 100%; font-size: 14.5px; line-height: 1.5; color: var(--fg-2); }
.sites a { font-size: 16px; }

/* The title block: the offer's facts, drawn like the corner of a plan. Labels in mono, values in the sans. */
.tblock { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; margin: clamp(16px, 3vh, 48px) 0 0; border-top: 1px solid var(--fg); border-bottom: 1px solid var(--hair-2); }
.tblock__cell { grid-column: span 2; padding: clamp(10px, 1.6vh, 16px) 12px clamp(12px, 1.8vh, 18px) 18px; border-left: 1px solid var(--hair-2); min-width: 0; }
.tblock__cell:nth-child(3), .tblock__cell:nth-child(5) { grid-column: span 3; }
.tblock__cell:first-child { border-left: 0; padding-left: 0; }
/* 1100–1279: the twelve columns are too narrow for "Aditya Vashistha" in a two-column cell, so the
   five facts share the row by their own widths (one line each) */
@media (min-width: 1100px) and (max-width: 1279px) {
  .tblock { grid-template-columns: repeat(5, auto); column-gap: 0; }
  .tblock__cell, .tblock__cell:nth-child(3), .tblock__cell:nth-child(5) { grid-column: auto; }
}
/* the trade pages' facts are longer ("Call, WhatsApp, online"): they share the row by width at every laptop size */
@media (min-width: 1100px) {
  .tp-hero .tblock { grid-template-columns: repeat(5, auto); column-gap: 0; }
  .tp-hero .tblock__cell, .tp-hero .tblock__cell:nth-child(3), .tp-hero .tblock__cell:nth-child(5) { grid-column: auto; }
}
@media (min-width: 1100px) and (max-width: 1199px) {
  .tp-hero .tblock__cell { padding-left: 14px; padding-right: 8px; }
  .tp-hero .tblock__cell:first-child { padding-left: 0; }
  .tp-hero .tblock__v { font-size: 18px; }
  .tp-hero .tblock__s { font-size: 14px; }
}
.tblock dt { font: 400 12.5px/1.4 var(--mono); color: var(--label); margin-bottom: clamp(4px, .8vh, 8px); }
.tblock__v { display: block; font-size: 19px; line-height: 1.25; letter-spacing: -.01em; }
.tblock__s { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.4; color: var(--fg-2); }
.tblock__s .if-advocate { color: var(--note); }

/* ——— 11. The stage: a film, its devices, and the redline notes ———
   Every stage is a box of fixed proportions, so the drawing and the notes, written in the
   box's own units (see tools/next/marks.py), land exactly on the film at any size.
   laptop stage 1000 x 700: screen at (0, 64) 800 x 500; phone at (700, 300) 185 x 386.4
   wide stage   1000 x 790: screen at (0, 70) 960 x 600; phone at (850, 440) 150 x 325 (the home page)
   phone stage  1000 x 1272: phone at (0, 6) 600 x 1265.9, screen inset 14, notes from x 640 */
.stage { position: relative; }
.stage__box { position: relative; }
.stage__box--laptop { aspect-ratio: 1000 / 700; }
.stage__box--phone { aspect-ratio: 1000 / 1272; }
.device { position: absolute; }
/* each screen waits on its client's own tone: add .screen--ga, --nz or --gm */
.screen { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--bg-2); }
.screen--ga { background: var(--tone-ga); } .screen--nz { background: var(--tone-nz); } .screen--gm { background: var(--tone-gm); }
.screen picture, .screen__still, .screen__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* a picture that fails shows its tone, never the broken-image icon */
.screen img::after, .strip__f img::after, .detail__img img::after, .sister__img img::after { content: ''; position: absolute; inset: 0; background: inherit; }
.screen__film { opacity: 0; transition: opacity .5s; }
.screen__film.is-playing { opacity: 1; }
.device--laptop { left: 0; top: 9.142857%; width: 80%; height: 71.428571%; }
.device--laptop .screen { border-radius: 6px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 22%, transparent), var(--shadow); }
.device--phone { background: var(--device); box-shadow: var(--shadow); }
.stage__box--phone .device--phone { left: 0; top: .471698%; width: 60%; height: 99.52%; padding: 1.4%; border-radius: 12% / 5.6%; }
.stage__box--phone .device--phone .screen { border-radius: 9.8% / 4.5%; }
.device--aside { left: 70%; top: 42.857143%; width: 18.5%; height: 55.2%; padding: .6%; border-radius: 13% / 6.2%; }
.device--aside .screen { border-radius: 11% / 5.1%; }
.stage__box--wide { aspect-ratio: 1000 / 790; }
.stage__box--wide .device--laptop { top: 8.860759%; width: 96%; height: 75.949367%; }
.stage__box--wide .device--aside { left: 85%; top: 55.696203%; width: 15%; height: 41.139241%; padding: .55%; }

/* The notes. A proofreader's loop, an arrow to the margin, a line in the hand. */
.pen, .drawing { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mk { opacity: 0; transition: opacity .15s; }
.mk__loop, .mk__arrow { fill: none; stroke: var(--note-ink); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1.02; stroke-dashoffset: 1; }
.mk__head { fill: none; stroke: var(--note-ink); stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.mk__note { fill: var(--note); font-family: var(--hand); }
.pen--phone .mk__loop { stroke-width: 4.2; } .pen--phone .mk__arrow, .pen--phone .mk__head { stroke-width: 3.2; } .pen--phone .mk__note { font-size: 45px; }
.pen--laptop .mk__loop { stroke-width: 2.1; } .pen--laptop .mk__arrow, .pen--laptop .mk__head { stroke-width: 1.6; } .pen--laptop .mk__note { font-size: 25px; }
.mk.on { opacity: 1; transition: opacity .35s .2s; }
.mk.on .mk__loop { stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--ease-io) .1s; }
.mk.on .mk__arrow { stroke-dashoffset: 0; transition: stroke-dashoffset .6s var(--ease-io) .55s; }
.mk.on .mk__head { opacity: 1; transition: opacity .2s 1.05s; }
/* The script draws a stage's notes only once its poster has decoded (.is-ready), so a loop never
   circles an empty screen. Without the script, or when nothing may move: the first frame's notes,
   already drawn. Once Play is pressed (data-wants="1"), the film's clock drives every note. */
.js [data-stage]:not(.is-ready) .pen .mk { opacity: 0 !important; }
html:not(.js) .mk[data-cue="all"], html:not(.js) .mk[data-first], .still .mk[data-cue="all"], .still [data-stage]:not([data-wants="1"]) .mk[data-first] { opacity: 1; }
html:not(.js) .mk[data-cue="all"] :is(.mk__loop, .mk__arrow), html:not(.js) .mk[data-first] :is(.mk__loop, .mk__arrow),
.still .mk[data-cue="all"] :is(.mk__loop, .mk__arrow), .still [data-stage]:not([data-wants="1"]) .mk[data-first] :is(.mk__loop, .mk__arrow) { stroke-dashoffset: 0; }
html:not(.js) .mk :is(.mk__head), .still .mk .mk__head { opacity: 1; }
.stage__cue { display: none; }

.stage__cap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 16px; font-size: 15px; color: var(--fg-2); }
.stage__cap a { color: var(--fg); }
.stage__addr { font-size: 15px; }
.stage__rec { flex: 1 1 260px; font-size: 14.5px; line-height: 1.45; color: var(--fg-2); }
.live { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; line-height: 1; color: var(--fg); }
.live__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--note-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--note-ink) 22%, transparent); flex: none; }
.live__dot--soon { background: transparent; border: 1.5px solid var(--note-ink); box-shadow: none; }
.live .gm-live, .live .gm-soon { display: inline-flex; align-items: center; gap: 8px; }
.film-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%; border: 1px solid var(--hair-2); background: var(--bg-2); cursor: pointer; }
.film-btn svg { width: 12px; height: 12px; fill: currentColor; }
.film-btn .i-play, .film-btn[data-paused="1"] .i-pause { display: none; }
.film-btn[data-paused="1"] .i-play { display: block; }
.film-btn:hover { border-color: var(--fg); }

/* The hero figure: four of the twelve columns, and never taller than the screen leaves room for */
.stage--hero { grid-column: 9 / -1; grid-row: 1 / span 2; width: 100%; max-width: min(424px, calc((100vh - var(--hdr) - 250px) * 1000 / 1272)); justify-self: end; margin-top: 4px; }
/* the home page keeps its film inside .hero__copy, straight after the video line, so the keyboard
   meets it where a phone shows it; from 900px the copy dissolves into the grid and the film stands
   in the right-hand columns as before */
@media (min-width: 900px) {
  .hero--home .hero__grid { grid-template-rows: repeat(6, auto) 1fr; }
  .hero--home .hero__copy { display: contents; }
  .hero--home .hero__copy > * { grid-column: 1 / 9; }
  .hero--home .hero__copy > .h1 { grid-row: 1; } .hero--home .hero__copy > .lede { grid-row: 2; } .hero--home .hero__copy > .hero__video { grid-row: 3; }
  .hero--home .hero__copy > .cta { grid-row: 4; } .hero--home .hero__copy > .callline { grid-row: 5; } .hero--home .hero__copy > .callline__wa { grid-row: 6; }
  .hero--home .hero__copy > .stage--hero { grid-column: 9 / -1; grid-row: 1 / -1; }
}
.stage--hero .stage__cap { margin-top: 14px; align-items: flex-start; flex-wrap: nowrap; }
.stage__where { max-width: 34em; line-height: 1.45; padding-top: 8px; }
.stage__where a { white-space: nowrap; }

/* ——— 12. The work ———
   New Zealand first, then the hotel, then the sister studio as one row. On a laptop each client
   is a sheet: its film pins on the left while its words scroll, and the next sheet slides over it. */
.work { position: relative; padding: var(--sec) 0 0; overflow-x: clip; }
.work__head { margin-bottom: clamp(28px, 3.4vw, 48px); }
.chapter { position: relative; padding: clamp(36px, 5vw, 64px) 0; border-top: 1px solid var(--hair); background: var(--bg); }
.chapter__in { display: grid; gap: 36px; }
.chapter__text > * + * { margin-top: 24px; }
.chapter__story { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.42; letter-spacing: -.01em; }
.chapter__links { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
/* the QR code, inline so it can never fail to load: for a laptop visitor with a phone */
.qr { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 14px; align-items: center; width: 100%; margin-top: 4px; padding-top: 14px; border-top: 1px dashed var(--hair-2); }
.qr img, .qr__code { width: 78px; height: 78px; border-radius: 3px; box-shadow: 0 0 0 1px var(--hair); color: #1C1A17; }
.qr__code .qr-bg { fill: #fff; }
.qr p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--fg-2); }

/* the sheet's title block: the client's name, then two plain rows */
.sheet-tb { display: grid; border: 1px solid var(--hair-2); background: var(--bg); }
.sheet-tb > div { padding: 10px 14px 11px; min-width: 0; border-top: 1px solid var(--hair-2); }
.sheet-tb > div:first-child { border-top: 0; }
.sheet-tb > div:not(.sheet-tb__client) { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.sheet-tb__no { display: none !important; }   /* "Sheet 01/03" is gone everywhere */
.sheet-tb__l { display: block; font: 400 12.5px/1.4 var(--mono); color: var(--label); margin-bottom: 2px; }
.sheet-tb p { margin: 0; font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }

/* the testimonial: word for word, the opening mark hung in the margin in redline */
.quote blockquote p { font-size: clamp(17px, 1.25vw, 18px); line-height: 1.55; margin: 0 0 .8em; }
.quote blockquote p:first-child { text-indent: -.42em; }
.quote__mark { color: var(--note); }
.quote__who { font-size: 16px; color: var(--fg); }
.quote__who b { font-weight: 500; }
.quote__who span { color: var(--fg-2); }
.quote__note { font-size: 15px; line-height: 1.5; color: var(--fg-2); }
.chapter__text > .quote__note, .chapter__rest > .quote__note { margin-top: 8px; }
.quote__ask { white-space: nowrap; color: var(--fg); }
.quote__ask .arr { display: inline; width: 12px; height: 12px; margin-left: 4px; vertical-align: -.05em; }

/* the three steps of the hotel's drawing, beside it on a laptop. The step the drawing is on is
   marked: a drafting-blue rule across its top, and its name in graphite. */
.bstep { position: relative; padding: 16px 0 6px; border-top: 1px solid var(--hair); }
.bstep::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--label); transform: scaleX(0); transform-origin: 0 50%; }
.bstep__h { display: flex; align-items: baseline; gap: 12px; margin: 0 0 6px; font-size: 21px; letter-spacing: -.02em; }
.bstep__n { font-size: 15px; color: var(--label); }
.bstep p:not(.bstep__h) { color: var(--fg-2); font-size: 16.5px; }
.motion [data-build] .bstep__h { transition: color .35s var(--ease-io); }
.motion [data-build] .bstep:not(.on) .bstep__h { color: var(--fg-2); }
.motion [data-build] .bstep::before { transition: transform .55s var(--ease-io); }
.motion [data-build] .bstep.on::before { transform: scaleX(1); }
.keys { display: grid; gap: 7px; margin: 4px 0 10px; }
.keys li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; font-size: 15.5px; line-height: 1.45; color: var(--fg); }
.keys i { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--key-bg); color: var(--key-fg); font: 400 11.5px/1 var(--mono); font-style: normal; }

/* the drawing layer (see marks.py for the geometry). The hotel's page opens on its layout: the
   boxes over the real page ghosted at 11%; then the page prints down through them; then it is live. */
.drawing .dw__frame, .drawing .dw__dim, .drawing .dw__guide { fill: none; stroke: var(--fg); stroke-width: 1.25; vector-effect: non-scaling-stroke; stroke-dasharray: 1 1.02; stroke-dashoffset: calc(1 - var(--dm, 1)); }
.drawing .dw__dim { stroke: var(--label); stroke-width: 1; }
.drawing .dw__guide { stroke: var(--cl); stroke-width: 1; stroke-dasharray: none; stroke-dashoffset: 0; opacity: var(--dm, 1); }
.drawing .dw__label { font-family: var(--mono); font-size: calc(11.5px * var(--u, 1.2)); fill: var(--label); }
.lines-on .drawing .dw__label--g { display: none; }
.drawing .dw__box { fill: rgba(var(--npb), .1); stroke: var(--drafting); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1 1.02; stroke-dashoffset: calc(1 - var(--dl, 1)); fill-opacity: var(--dl, 1); }
.drawing .dw__box--red { stroke: var(--note-ink); fill: color-mix(in srgb, var(--note-ink) 10%, transparent); }
.drawing .dw__key { opacity: var(--dl, 1); }
.drawing .dw__key circle { fill: var(--key-bg); }
.drawing .dw__key text { font: 400 12px/1 var(--mono); fill: var(--key-fg); text-anchor: middle; }
.drawing .dw__scan { stroke: var(--note-ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; transform: translateY(calc(64px + var(--db, 1) * 500px)); opacity: 0; }
.drawing--wide .dw__scan { transform: translateY(calc(70px + var(--db, 1) * 600px)); }
.drawing { transition: opacity .9s var(--ease-io); }
@media (prefers-color-scheme: dark) { .drawing .dw__box { stroke: #7EB2F2; } }
/* Without the script, under reduced motion or Save-Data, the finished page stands clean with its
   notes and the Lay out step's numbered discs, like a proof's marks: the rest of the drawing waits
   behind the Lines switch. */
html:not(.js) .drawing, .still .drawing { opacity: 0; }
html.lines-on .drawing { opacity: .75 !important; }
:is(html.still:not(.lines-on), html:not(.js)) [data-build] .drawing { opacity: 1; }
:is(html.still:not(.lines-on), html:not(.js)) [data-build] .drawing :is(.dw--measure, .dw--scan, .dw__box, .dw__frame) { display: none; }
:is(html.still, html:not(.js)) [data-build] [data-wants="1"] .drawing { opacity: 0; }
:is(html.still, html:not(.js)) [data-build] [data-stage]:not([data-wants="1"]) .stage__box--phone .pen { display: none; }
/* while it is drawn: nothing says "Live now" under a drawing, and the page is a ghost until printed */
.build-on .stage__cap, .build-on .stage__cue { transition: opacity .4s var(--ease-io), visibility 0s; }
.build-on:not(.is-live) .stage__cap, .build-on:not(.is-live) .stage__cue { opacity: 0; visibility: hidden; }
.build-on .drawing .dw__scan { opacity: calc(var(--db, 0) * (1 - var(--db, 0)) * 4); }
.build-on .device--laptop .screen__still, .build-on .device--aside .screen__still {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--db, 1) * 100%), rgba(0, 0, 0, .11) calc(var(--db, 1) * 100%));
  mask-image: linear-gradient(to bottom, #000 calc(var(--db, 1) * 100%), rgba(0, 0, 0, .11) calc(var(--db, 1) * 100%)); }
.build-on.is-live .device--laptop .screen__still, .build-on.is-live .device--aside .screen__still { -webkit-mask-image: none; mask-image: none; }
.build-on .device--laptop .screen, .build-on .device--aside { transition: box-shadow .8s var(--ease-io), background-color .6s; }
.build-on:not(.is-live) .device--laptop .screen { box-shadow: 0 0 0 1px var(--hair-2); background: var(--bg); }
.build-on:not(.is-live) .device--aside { background: transparent; box-shadow: none; }
.build-on:not(.is-live) .device--aside .screen { background: var(--bg); }
.build-on:not(.is-live) .pen { opacity: 0; }
.build-on .pen { transition: opacity .6s .3s; }
.build-on.is-live .drawing { opacity: 0; }
.build-on:not(.is-live) .screen__film { opacity: 0; }
.build-on:not(.is-live) .film-btn { visibility: hidden; }

/* the hotel on a phone: one close-up, the Enquire button and the message it writes */
.ga-close { display: none; }
.detail { position: relative; margin: 0; }
.detail__img { position: relative; background: var(--tone-ga); border-radius: 6px; }
.detail__img img { width: 100%; height: auto; border-radius: 6px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 18%, transparent), var(--shadow); }
.detail__img .pen { position: absolute; inset: 0; }
.pen--detail .mk__loop { stroke-width: 2.4; }
.detail__note { margin: 14px 0 0; font: 400 clamp(20px, 1.6vw, 23px)/1.3 var(--hand); color: var(--note); }
.detail__cap { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--fg-2); }

/* the sister studio: one row */
.sister { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 28px; align-items: center; padding: 26px 0 0; margin-top: clamp(24px, 3vw, 40px); border-top: 1px solid var(--hair); }
.sister__img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; background: var(--tone-gm); box-shadow: 0 0 0 1px var(--hair-2); }
.sister__img img { width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
.sister__t { margin: 0; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.35; letter-spacing: -.01em; }
.sister__t .live { margin-left: 10px; vertical-align: .12em; }
.sister__s { margin: 4px 0 0; font-size: 15.5px; color: var(--fg-2); }

/* ——— 13. Sections ———
   One gap between sections: --sec is top padding only, so a boundary is never top plus bottom. A
   band (a .sheet or a .table) keeps its own padding inside, a little less than the gap. */
.sec { padding: var(--sec) 0 0; }
.sec.sheet, .sec.table { margin-top: var(--sec); padding: calc(var(--sec) * .78) 0; }
.sec.sheet + .sec, .sec.table + .sec { padding-top: calc(var(--sec) * .9); }
main > .sec:last-child:not(.sheet):not(.table) { padding-bottom: var(--sec); }
.table { background: var(--bg); color: var(--fg); }
/* two red corners, like the marks a proof carries: on a sheet section, and on a few cards */
.corners::before, .corners::after { content: ''; position: absolute; width: 14px; height: 14px; border: 1px solid var(--note-ink); pointer-events: none; }
.corners::before { left: -1px; top: -1px; border-width: 1px 0 0 1px; }
.corners::after { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; }

/* —— The price and the offer (#price, with #how on the schedule) —— */
.price { padding-bottom: 0; }
.price__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
.price__head { grid-column: 1 / 7; }
.price__words { grid-column: 7 / -1; padding-bottom: .9em; }
.price__big { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .06em; font-size: clamp(88px, 12.5vw, 176px); line-height: .84; letter-spacing: -.06em; margin: 0; }
.price__cur { font-size: .3em; letter-spacing: -.02em; line-height: 1; margin-top: .12em; }
.price__lede { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.4; letter-spacing: -.012em; max-width: 26em; margin-bottom: .6em; }
.price__small { color: var(--fg-2); font-size: 16.5px; max-width: 36em; margin-bottom: .5em; }
.price__small:last-child { margin-bottom: 0; }

.plan__h { margin: clamp(40px, 4.6vw, 68px) 0 0; font-size: clamp(26px, 2.8vw, 40px); line-height: 1.08; letter-spacing: -.03em; max-width: 22em; }
.plan { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(22px, 3vw, 36px); border-top: 1px solid var(--fg); counter-reset: none; }
.plan__s { position: relative; display: flex; flex-direction: column; padding: 20px 22px 22px; border-left: 1px solid var(--hair); min-width: 0; }
.plan__s:nth-child(2) { border-left: 0; padding-left: 0; }
.plan__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.plan__n { font-size: 23px; line-height: 1.15; letter-spacing: -.02em; color: var(--label); }
.plan__t { font-size: 23px; line-height: 1.15; letter-spacing: -.02em; }
.plan__s p { color: var(--fg-2); font-size: 16px; line-height: 1.5; margin-bottom: .7em; }
.plan__s .plan__small { font-size: 14.5px; }
.plan__pay { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--hair-2); display: grid; gap: 4px; }
.plan__pay > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.plan__pay dt { font: 400 12.5px/1.4 var(--mono); color: var(--fg-2); }
.plan__pay dd { font-size: 20px; letter-spacing: -.02em; color: var(--fg); white-space: nowrap; }
.plan__pay .plan__f dd { font-size: 17px; color: var(--fg-2); }
/* the Site plan's refunds: one style on the home page (.plan__refund) and the trade pages (.planc__refund), a red rule and red words (27 Sep 2026) */
.plan__s .plan__refund, .planc__t .planc__refund { margin: 10px 0 0; padding-left: 12px; border-left: 2px solid var(--note-ink); font-size: 15px; line-height: 1.45; color: var(--note); }
/* step 0: the call, a full-width strip above the four */
.plan__s--0 { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) auto; gap: 8px clamp(24px, 3vw, 48px); align-items: center; padding: 20px 0; border-left: 0; border-bottom: 1px solid var(--hair); }
.plan__s--0 .plan__head { margin: 0; }
.plan__s--0 p { margin: 0; }
.plan__s--0 .plan__go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; justify-content: flex-end; }
.plan__s--0 .plan__go .xlink { font-size: 15.5px; }
.plan__free { font-size: 20px; letter-spacing: -.02em; }
.plan__total { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--fg); font-size: 17px; }
.plan__total b { font-weight: 500; }

/* the payments drawn to scale: one axis, US$0 to US$7,500; a bar per schedule */
.bars { margin-top: clamp(36px, 4.4vw, 60px); }
.bars__key { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 16px; font-size: 14.5px; color: var(--fg-2); }
.bars__key span { display: inline-flex; align-items: center; gap: 8px; }
.bars__key i { width: 20px; height: 11px; flex: none; border: 1px solid var(--fg); }
.bars__row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 4px 24px; align-items: start; padding: 10px 0 8px; }
html[data-advocate^="20"] .bars__row--s > div { padding-top: 26px; }
@media (min-width: 768px) { html[data-advocate^="20"] .bars__row--s .bars__name { padding-top: 26px; } }
.bars__name { margin: 0; font-size: 16.5px; line-height: 1.3; }
.bars__name small { display: block; font-size: 14px; color: var(--fg-2); }
.bars__track { position: relative; display: flex; height: 22px; border: 1px solid var(--fg); }
.bars__seg { position: relative; height: 100%; }
/* a gap in the page's own colour between the payments (so the US$750 Site plan and the booking share
   never read as one block); a graphite hairline where the hatching meets the outlined launch */
.bars__seg + .bars__seg { border-left: 2px solid var(--bg); }
.bars__seg--design + .bars__seg--launch { border-left: 1px solid var(--fg); }
.bars__seg::before, .bars__seg--plan::after { content: ''; position: absolute; inset: 0; transform-origin: 0 50%; }
.bars__seg--plan::before, .bars__seg--book::before { background: var(--fg); }
/* the Site plan's red outline, drawn above its fill */
.bars__seg--plan::after { box-shadow: inset 0 0 0 2px var(--note-ink); z-index: 1; pointer-events: none; }
.bars__seg--design::before { background: repeating-linear-gradient(135deg, var(--fg) 0 1px, transparent 1px 7px); }
.bars__seg--launch::before { background: transparent; }
.bars__key .k-plan { background: var(--fg); outline: 2px solid var(--note-ink); outline-offset: -3px; }
.bars__key .k-book { background: var(--fg); }
.bars__key .k-design { background: repeating-linear-gradient(135deg, var(--fg) 0 1px, transparent 1px 5px); }
/* widths are the amounts, out of 7,500 */
.w-750 { flex: 0 0 10%; } .w-1500 { flex: 0 0 20%; } .w-2250 { flex: 0 0 30%; } .w-3000 { flex: 0 0 40%; }
/* where the design begins: a red rule, and what has been paid by then */
.bars__rule { position: absolute; top: -8px; bottom: -8px; width: 2px; margin-left: -1px; background: var(--note-ink); z-index: 2; }
.bars__rule--40 { left: 40%; } .bars__rule--20 { left: 20%; }
.bars__ticks { position: relative; height: 20px; margin-top: 8px; font: 400 12px/1 var(--mono); color: var(--fg-2); }
.bars__ticks span { position: absolute; top: 0; white-space: nowrap; transform: translateX(-50%); }
.bars__ticks .t-0 { left: 0; transform: none; } .bars__ticks .t-end { right: 0; left: auto; transform: none; color: var(--fg); }
.bars__ticks .t-10 { left: 10%; } .bars__ticks .t-20 { left: 20%; } .bars__ticks .t-40 { left: 40%; } .bars__ticks .t-60 { left: 60%; } .bars__ticks .t-80 { left: 80%; }
.bars__ticks .t-red { color: var(--note); font-family: var(--sans); font-size: 14px; transform: none; margin-left: 8px; }
.bars__plannote { position: absolute; left: 0; bottom: calc(100% + 6px); display: flex; align-items: flex-end; gap: 6px; font: 400 19px/1 var(--hand); color: var(--note); white-space: nowrap; pointer-events: none; }
.bars__plannote svg { width: 34px; height: 22px; fill: none; stroke: var(--note-ink); stroke-width: 1.4; stroke-linecap: round; }
.bars__cap { margin: 14px 0 0; color: var(--fg-2); font-size: 15.5px; max-width: 62em; }
.motion .bars:not(.in) .bars__seg::before, .motion .bars:not(.in) .bars__seg--plan::after { transform: scaleX(0); }
.motion .bars.in .bars__seg::before, .motion .bars.in .bars__seg--plan::after { transition: transform .45s var(--ease-io); }
.motion .bars.in .bars__seg--book::before { transition-delay: .35s; }
.motion .bars.in .bars__seg--design::before { transition-delay: .7s; }
.motion .bars:not(.in) .bars__rule { opacity: 0; }
.motion .bars.in .bars__rule { transition: opacity .3s 1.1s; }

.fnd { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 18px; margin-top: 22px; padding: 18px 22px; background: var(--bg-2); border: 1px solid var(--hair); max-width: 52em; }
.fnd__sq { grid-column: 1; grid-row: 1 / 5; display: flex; gap: 6px; margin: 0; padding-top: 5px; }
.fnd > :not(.fnd__sq) { grid-column: 2; }
.fnd__sq i { width: 14px; height: 14px; border: 1.5px solid var(--fg); }
html[data-founding-left="2"] .fnd__sq i:nth-child(1), html[data-founding-left="1"] .fnd__sq i:nth-child(-n+2), html[data-founding-left="0"] .fnd__sq i { background: repeating-linear-gradient(135deg, var(--fg) 0 1px, transparent 1px 4px); }
.fnd__h { margin: 0; font-size: 19px; letter-spacing: -.015em; }
.fnd p:not(.fnd__sq) { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--fg-2); }
/* the founding places, and six answers to What if… (both behind the advocate switch) */
@media (min-width: 1100px) {
  /* the founding box, wide and low: the squares, the count, the terms */
  .fnd { grid-template-columns: auto minmax(0, .75fr) minmax(0, 2fr); gap: 4px 24px; max-width: none; }
  .fnd__sq { grid-row: 1 / 3; }
  .fnd__amounts { display: none; }   /* on a laptop the steps above list them */
  html[data-advocate^="20"] .wi p { font-size: 16px; }
  .fnd > .fnd__h { grid-column: 2; grid-row: 1; }
  .fnd > .fnd__count { grid-column: 2; grid-row: 2; }
  .fnd > p.if-founding, .fnd > .if-founding-gone { grid-column: 3; grid-row: 1 / 3; }
  /* six answers: the heading above, three across */
  html[data-advocate^="20"] .whatif__grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  html[data-advocate^="20"] .whatif__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html[data-advocate^="20"] .whatif__more { grid-column: 1 / -1; }
}

/* how you pay, included, not included */
.terms3 { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 3.4vw, 56px); margin-top: clamp(40px, 4.4vw, 64px); }
.list-h { font: 400 13px/18px var(--mono); color: var(--label); padding-bottom: 10px; border-bottom: 1px solid var(--fg); margin-bottom: 0; }
.pay p { font-size: 16px; line-height: 1.5; margin: 12px 0 0; }
.pay p + p { color: var(--fg-2); }
.pay .keep { margin-top: 16px; padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--hair); border-left: 2px solid var(--note-ink); color: var(--fg); font-size: 15.5px; }
.ticks li, .dashes li { position: relative; padding: 6px 0 6px 26px; border-bottom: 1px solid var(--hair); font-size: 16px; line-height: 21px; }
.ticks li::before { content: ''; position: absolute; left: 2px; top: 12px; width: 10px; height: 5px; border: solid var(--label); border-width: 0 0 1.5px 1.5px; transform: rotate(-45deg); }
.dashes li { color: var(--fg-2); }
.dashes li::before { content: ''; position: absolute; left: 2px; top: 17px; width: 11px; height: 1.5px; background: var(--fg-2); }
.terms3__note { grid-column: 2 / -1; margin: -6px 0 0; font-size: 15px; color: var(--fg-2); }

/* after launch: four cells in a row */
.after { margin-top: clamp(30px, 3.4vw, 48px); }
.after__h { margin: 0 0 14px; font-size: 22px; letter-spacing: -.02em; }
.after dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--fg); }
.after dl > div { padding: 14px 20px 16px; border-left: 1px solid var(--hair); min-width: 0; }
.after dl > div:first-child { border-left: 0; padding-left: 0; }
.after dt { font: 400 12.5px/1.4 var(--mono); color: var(--label); }
.after dd { margin-top: 4px; }
.after__v { display: block; font-size: 20px; letter-spacing: -.02em; line-height: 1.25; }
.after__s { display: block; margin-top: 4px; font-size: 15px; line-height: 1.45; color: var(--fg-2); }
.after__own { margin: 16px 0 0; font-size: 16.5px; }
.price__end { margin-top: 22px; }

/* the older steps and single bar (other pages may still carry them until they are rebuilt) */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(40px, 6vw, 72px); border-top: 1px solid var(--fg); }
.step { position: relative; display: flex; flex-direction: column; padding: 22px 24px 24px; border-left: 1px solid var(--hair); }
.step:first-child { border-left: 0; padding-left: 0; }
.step__n { font-size: 15px; color: var(--label); margin-bottom: 12px; }
.step__h { font-size: 23px; line-height: 1.15; letter-spacing: -.02em; margin-bottom: 12px; }
.step p { color: var(--fg-2); font-size: 16.5px; }
.step__pay { margin: auto 0 0; padding-top: 14px; border-top: 1px dashed var(--hair-2); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.step__pay span { font-size: 14px; color: var(--fg-2); }
.step__pay b { font-weight: 400; font-size: 20px; color: var(--fg); letter-spacing: -.02em; }
.scale { margin-top: clamp(40px, 6vw, 72px); }
.scale__top, .scale__ticks { position: relative; height: 22px; font-size: 15px; }
.scale__top span, .scale__ticks span { position: absolute; top: 0; white-space: nowrap; }
.scale__k1 { left: 0; } .scale__k2 { left: 40%; } .scale__k3 { left: 80%; }
.scale__bar { display: grid; grid-template-columns: 40fr 40fr 20fr; height: 18px; margin: 10px 0; border: 1px solid var(--fg); }
.scale__bar i { position: relative; border-left: 1px solid var(--fg); overflow: hidden; }
.scale__bar i:first-child { border-left: 0; }
.scale__bar i::before { content: ''; position: absolute; inset: 0; background: var(--fg); }
.scale__p2::before { background: repeating-linear-gradient(135deg, var(--fg) 0 1px, transparent 1px 7px) !important; }
.scale__ticks span { font: 400 12.5px/1 var(--mono); color: var(--fg-2); }
.scale__t0 { left: 0; } .scale__t1 { left: 40%; transform: translateX(-50%); } .scale__t2 { left: 80%; transform: translateX(-50%); } .scale__t3 { right: 0; }
.scale__cap { margin-top: 14px; color: var(--fg-2); font-size: 16px; max-width: 60em; }
.price__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 96px); padding-top: clamp(56px, 7vw, 96px); border-top: 1px solid var(--hair); }
.price__lists { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }

/* —— What if… (open, never folded): on a sheet with red corners —— */
.whatif__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: clamp(32px, 5vw, 80px); }
.whatif__list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(32px, 4vw, 64px); }
.wi { padding: 20px 0 26px; border-top: 1px solid var(--hair-2); }
.wi__q { font-size: clamp(21px, 1.8vw, 26px); line-height: 1.15; letter-spacing: -.02em; margin-bottom: 10px; }
.wi p { color: var(--fg-2); font-size: 16.5px; margin: 0; }
.wi.if-advocate .wi__q { color: var(--note); }
.whatif__more { grid-column: 2; margin: 6px 0 0; }

/* —— Who you'd be working with: the letter, and four checks a buyer can make —— */
.who__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.who__letter .h2 { margin-bottom: 30px; }
.who__letter p:not(.eyebrow):not(.sign) { font-size: clamp(17.5px, 1.3vw, 19.5px); line-height: 1.6; max-width: 34em; }
.who__letter .who__frame { padding-left: 16px; border-left: 2px solid var(--hair-2); }
.sign { margin: 28px 0 0; display: grid; gap: 4px; }
.sign__name { font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -.03em; line-height: 1.1; }
.sign__where { font-size: 15.5px; color: var(--fg-2); }
.sign__where a { color: var(--fg); }
/* his photograph beside the heading (the owner's decision of 26 September 2026; one file, tools/next/portrait.py) */
.who__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 clamp(16px, 2.2vw, 32px); align-items: start; max-width: 34em; margin-bottom: 30px; }
.who__letter .who__head .h2 { margin-bottom: 0; }
.who__pic { width: clamp(112px, 10.6vw, 152px); aspect-ratio: 4 / 5; overflow: hidden; border-radius: 3px; background: var(--hair); box-shadow: 0 0 0 1px var(--hair-2); }
.who__pic img { width: 100%; height: 100%; object-fit: cover; }
.verify__h { margin: 0 0 14px; font-size: 22px; letter-spacing: -.02em; }
.verify { border-top: 1px solid var(--fg); counter-reset: v; }
.verify > li { counter-increment: v; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0 12px; padding: 16px 0 16px; border-bottom: 1px solid var(--hair); }
.verify > li::before { content: counter(v); display: grid; place-items: center; width: 26px; height: 26px; margin-top: 1px; border: 1px solid var(--note-ink); border-radius: 50%; font-size: 14px; line-height: 1; color: var(--note); }
.verify__t { display: block; margin: 0 0 4px; font-weight: 400; font-size: 19px; line-height: 1.3; letter-spacing: -.012em; color: var(--fg); }
.verify p { margin: 0 0 6px; font-size: 15.5px; line-height: 1.5; color: var(--fg-2); }
.verify__links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 15.5px; }
.verify__links a { color: var(--fg); }
.keep { position: relative; margin: 20px 0 0; padding: 16px 18px; background: var(--bg-2); border: 1px solid var(--hair); border-left: 2px solid var(--note-ink); }
.keep p { margin: 0; font-size: 16.5px; line-height: 1.5; }
.keep__l { display: block; margin-bottom: 4px; font: 400 12.5px/1.4 var(--mono); color: var(--note); }
.gstline { margin: 16px 0 0; font-size: 15.5px; color: var(--fg-2); }
.gstline b { color: var(--fg); font-weight: 400; font-variant-numeric: tabular-nums; }

/* the older letterhead and facts (terms §09 and the advisers page carry them) */
.letterhead { background: var(--bg-2); border: 1px solid var(--hair); padding: clamp(24px, 3vw, 40px); box-shadow: var(--shadow); }
.letterhead__top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: center; padding-bottom: 20px; margin-bottom: 8px; border-bottom: 2px solid var(--fg); }
.letterhead__top .mark { width: 34px; height: 34px; }
.letterhead__name { margin: 0; font-size: 26px; letter-spacing: -.035em; }
.letterhead__addr { grid-column: 1 / -1; margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--fg-2); }
.facts > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.facts > div:last-child { border-bottom: 0; }
.facts dt { font: 400 12.5px/1.6 var(--mono); color: var(--label); }
.facts dd { font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.facts__yours { color: var(--fg-2); }

/* the older introduction panel (case studies and the advisers page) */
.ask { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr) auto; gap: 20px 48px; align-items: center; margin: clamp(48px, 7vw, 96px) 0 0; padding: clamp(26px, 3.2vw, 40px) clamp(22px, 3.2vw, 44px); background: var(--bg-2); border: 1px solid var(--hair); position: relative; }
.ask::before, .ask::after { content: ''; position: absolute; width: 14px; height: 14px; border: 1px solid var(--note-ink); }
.ask::before { left: -1px; top: -1px; border-width: 1px 0 0 1px; }
.ask::after { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; }
.ask__h { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.05; letter-spacing: -.03em; }
.ask__p { margin: 0; color: var(--fg-2); font-size: 17.5px; }
.ask__go { display: flex; flex-wrap: wrap; gap: 10px; }

/* —— Questions (the FAQPage markup in the head repeats them word for word) —— */
.qs__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.qs { border-top: 1px solid var(--fg); }
.qs details { border-bottom: 1px solid var(--hair); }
.qs summary { position: relative; display: block; list-style: none; cursor: pointer; padding: 16px 52px 16px 0; font-size: clamp(18.5px, 1.5vw, 22px); line-height: 1.3; letter-spacing: -.015em; }
.qs summary::-webkit-details-marker { display: none; }
.qs summary:hover { color: var(--note); }
.qs__plus { position: absolute; right: 4px; top: 50%; width: 16px; height: 16px; margin-top: -8px; }
.qs__plus::before, .qs__plus::after { content: ''; position: absolute; background: var(--fg-2); transition: transform .35s var(--ease); }
.qs__plus::before { left: 0; right: 0; top: 7.5px; height: 1px; }
.qs__plus::after { top: 0; bottom: 0; left: 7.5px; width: 1px; }
.qs details[open] .qs__plus::after { transform: scaleY(0); }
.faq__a { padding: 0 52px 22px 0; color: var(--fg-2); font-size: 17px; max-width: 42em; }
.faq__a p { margin: 0; }

/* —— The close: a call first, then WhatsApp and email; the P.S.; the free review —— */
.close__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0 clamp(40px, 6vw, 96px); margin-top: 8px; align-items: start; }
@media (min-width: 1100px) {
  .close__write { grid-row: 1 / 3; }
  .close__grid > .ticket { grid-column: 2; grid-row: 1; margin-top: 28px; }
  .close__grid > .ps { grid-column: 2; grid-row: 2; }
}
.bigl { margin-top: 28px; border-top: 1px solid var(--hair-2); }
.bigl > a, .bigl__row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--hair-2); text-decoration: none; }
.bigl__k { font: 400 13px/1 var(--mono); color: var(--label); }
.bigl__v { font-size: clamp(24px, 2.6vw, 38px); letter-spacing: -.035em; line-height: 1.1; overflow-wrap: anywhere; }
.bigl .ext, .bigl .arr { width: 18px; height: 18px; color: var(--note-ink); }
.bigl > a:hover .bigl__v { color: var(--note); }
.bigl__row { grid-template-columns: 96px minmax(0, 1fr); align-items: start; }
.bigl__row > .bigl__k { padding-top: 16px; }
.calls .btn { margin-top: 2px; }
.calls__h { margin: 18px 0 6px; font-size: 15.5px; color: var(--fg-2); }
.calls__list { border-top: 1px solid var(--hair); }
.calls__list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; padding: 8px 0; border-bottom: 1px solid var(--hair); font-size: 16.5px; line-height: 1.4; }
.calls__list b { font-weight: 400; font-variant-numeric: tabular-nums; }
.calls__tag { font-size: 14px; color: var(--fg-2); text-align: right; white-space: nowrap; }
.calls__tag.in { color: var(--note); }
.calls__fine { margin: 10px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--fg-2); max-width: 40em; }
/* the week drawn to scale, in the visitor's own weekdays (from 768 px; built by qb.js) */
.week { margin-top: 14px; }
.week__scale, .week__row { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; align-items: center; }
.week__hours { position: relative; height: 14px; font: 400 11px/1 var(--mono); color: var(--fg-2); }
.week__hours span { position: absolute; top: 0; transform: translateX(-50%); }
.week__hours span:first-child { transform: none; } .week__hours span:last-child { transform: translateX(-100%); }
.week__row { padding: 5px 0; border-top: 1px solid var(--hair); }
.week__row:last-child { border-bottom: 1px solid var(--hair); }
.week__d { font: 400 12px/1 var(--mono); color: var(--fg-2); }
.week__track, .dayline__track { position: relative; height: 20px;
  background: linear-gradient(to right, var(--hair-2) 1px, transparent 1px) 0 50% / calc(100% / 4) 100% repeat-x,
              linear-gradient(to right, var(--hair) 1px, transparent 1px) 0 50% / calc(100% / 24) 34% repeat-x; border-right: 1px solid var(--hair-2); }
.week__work, .dayline__work { position: absolute; top: 3px; bottom: 3px; left: calc(9 / 24 * 100%); width: calc(8.5 / 24 * 100%); background: var(--cl-2); border-block: 1px solid rgba(var(--npb), .55); }
.week__win, .dayline__win { position: absolute; top: 6px; bottom: 6px; left: calc(var(--a, 0) * 100%); width: calc(var(--w, 0) * 100%); background: var(--fg-2); }
.week__win.is-in, .dayline__win.is-in { background: var(--note-ink); }
.week__x, .dayline__x { position: absolute; top: 2px; bottom: 2px; left: calc(var(--a, 0) * 100%); width: max(4px, calc(var(--w, 0) * 100%)); background: var(--note-ink); border-radius: 1px; }
.week__x.is-night, .dayline__x.is-night { background: transparent; border: 1px dashed var(--fg-2); }
.week__key { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 10px; font-size: 13.5px; color: var(--fg-2); }
.week__key span { display: inline-flex; align-items: center; gap: 7px; }
.week__key i { width: 16px; height: 8px; flex: none; }
.week__key .k-work { background: var(--cl-2); border-block: 1px solid rgba(var(--npb), .55); }
.week__key .k-in { background: var(--note-ink); }
.week__key .k-x { width: 4px; height: 12px; background: var(--note-ink); }
.copy { margin-top: 12px; padding: 8px 12px; border: 1px solid var(--hair-2); background: transparent; font-size: 14px; cursor: pointer; }
.ps { position: relative; margin: 26px 0 0; padding: 18px 0 0 58px; border-top: 1px dashed var(--hair-2); font-size: 18px; line-height: 1.55; color: var(--fg); max-width: 34em; }
.ps__k { position: absolute; left: 0; top: 14px; font-family: var(--hand); font-size: 30px; line-height: 1; color: var(--note); }
.ticket { position: relative; background: var(--bg-2); color: var(--fg); padding: clamp(24px, 3vw, 36px); border: 1px solid var(--hair-2); }
.sheet .ticket { --bg-2: var(--film); }
@media (prefers-color-scheme: dark) { .sheet .ticket { --bg-2: #2E2A25; } }
.ticket__h { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.12; letter-spacing: -.025em; margin-bottom: 12px; }
.ticket > p:not(.eyebrow):not(.fine) { color: var(--fg-2); font-size: 16.5px; }
.ticket__sample { margin: -4px 0 16px; font-size: 16px; }
.rules { display: grid; gap: 8px; margin: 6px 0 20px; counter-reset: r; }
.rules li { counter-increment: r; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; font-size: 16.5px; }
.rules li::before { content: counter(r); display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border: 1px solid var(--note-ink); border-radius: 50%; font-size: 12.5px; line-height: 1; color: var(--note); }
.fields { display: grid; gap: 14px; margin-bottom: 20px; }
.field { display: grid; gap: 6px; }
.field__l { font-size: 14.5px; line-height: 1.4; color: var(--fg-2); }
.field__i { width: 100%; height: 48px; padding: 0 12px; border: 0; border-bottom: 1px solid var(--fg); background: var(--bg); color: var(--fg); font: 400 17px/1 var(--sans); border-radius: 0; }
.field__i::placeholder { color: var(--fg-2); opacity: .8; }
.field__i:focus { outline: 2px solid var(--note-ink); outline-offset: 0; }
.fine { margin: 16px 0 0; font-size: 14px; color: var(--fg-2); }

/* ——— 14. Footer: the work as still frames, the name set large and still, the rows ——— */
.ftr { position: relative; overflow: hidden; padding: 0 0 calc(36px + env(safe-area-inset-bottom)); background: #1C1A17; color: #EFEAE2;
  --bg: #1C1A17; --bg-2: #25221E; --fg: #EFEAE2; --fg-2: #B4ACA0; --hair: #34302A; --hair-2: #4A443C; --label: #7EB2F2; --note: #FF8F74; --note-ink: #FF6A4D; --cl: rgba(126, 178, 242, .6); --cl-2: rgba(126, 178, 242, .18); }
@media (prefers-color-scheme: dark) { .ftr { background: #12100E; --bg: #12100E; } }
.strip { overflow: hidden; padding: 28px 0 0; border-top: 1px solid var(--hair); }
.strip__track { display: flex; gap: 12px; width: max-content; padding-left: var(--gut); }
.strip__f { position: relative; flex: none; height: clamp(90px, 9.4vw, 132px); aspect-ratio: 352 / 220; overflow: hidden; border-radius: 4px; background: #2A2622; }
.strip__f--ga { background: var(--tone-ga); } .strip__f--nz { background: var(--tone-nz); } .strip__f--gm { background: var(--tone-gm); }
.strip__f--p { aspect-ratio: 101 / 220; border-radius: 10px; }
.strip__f img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); }
.js .strip__f img { opacity: 0; transition: opacity .4s; }
.js .strip__f img.is-in { opacity: 1; }
.wordmark { position: relative; container-type: inline-size; margin-top: clamp(24px, 3.4vw, 48px); }
.wordmark__t { display: block; font-size: 12.5cqw; line-height: 1; letter-spacing: -.062em; margin-left: -.045em; padding-bottom: .12em; white-space: nowrap; }
.wordmark::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1em; font-size: 12.5cqw; pointer-events: none; opacity: 0;
  background:
    linear-gradient(to bottom, transparent calc(.86em - 1px), var(--cl) calc(.86em - 1px) .86em, transparent .86em),
    linear-gradient(to bottom, transparent calc(.35em - 1px), var(--cl-2) calc(.35em - 1px) .35em, transparent .35em),
    linear-gradient(to bottom, transparent calc(.14em - 1px), var(--cl-2) calc(.14em - 1px) .14em, transparent .14em),
    linear-gradient(to bottom, transparent calc(1.11em - 1px), var(--cl-2) calc(1.11em - 1px) 1.11em, transparent 1.11em); }
.lines-on .wordmark::before { opacity: 1; }
.ftr__grid { display: grid; grid-template-columns: 1.1fr 1fr 1.05fr 1fr; gap: 0; border-top: 1px solid var(--hair-2); margin-top: 6px; }
.ftr__col { padding: 16px 20px 18px; border-left: 1px solid var(--hair-2); min-width: 0; font-size: 15.5px; line-height: 1.5; }
.ftr__col:first-child { border-left: 0; padding-left: 0; }
.ftr__col p { margin: 0; }
.ftr__col li + li { margin-top: 5px; }
.ftr__col a { text-decoration-color: var(--hair-2); }
.ftr__col a:hover { text-decoration-color: var(--note-ink); }
.ftr__l { display: block; margin: 0 0 10px; font: 400 12.5px/1.4 var(--mono); color: var(--label); }
.ftr__l + ul + .ftr__l { margin-top: 18px; }
.ftr__col .ftr__a11y { margin-top: 8px; }   /* the accessibility statement, on every page */
.ftr__lines { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 0; border: 0; background: none; color: var(--fg); font-size: 15.5px; text-decoration: underline; text-decoration-color: var(--hair-2); text-underline-offset: .2em; cursor: pointer; }
.ftr__lines svg { width: 13px; height: 13px; fill: none; stroke: var(--label); stroke-width: 1; }
.ftr__lines[aria-pressed="true"] { color: var(--label); }
.ftr__legal { margin: 20px 0 0; padding-top: 14px; border-top: 1px solid var(--hair); font-size: 14px; line-height: 1.6; color: var(--fg-2); }
.ftr__legal a { color: var(--fg-2); }

/* ——— 15. The phone dock: Book a video call and WhatsApp, under the thumb ——— */
.dock { display: none; }

/* ——— 16. Lines: the grid this page is drawn on (the switch is in the footer) ——— */
.grid-overlay { display: none; position: fixed; inset: 0; z-index: 55; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 7px, rgba(var(--npb), .16) 7px 8px); }
.grid-overlay__cols { height: 100%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.grid-overlay__cols i { background: rgba(var(--npb), .08); border-inline: 1px solid rgba(var(--npb), .35); }
.lines-on .grid-overlay { display: block; }
.spec-tag { position: absolute; z-index: 56; transform: translateY(-100%); padding: 2px 6px; background: var(--drafting); color: #fff; font: 400 11px/1.3 var(--mono); white-space: nowrap; pointer-events: none; }
.lines-on .screen, .lines-on .detail__img { outline: 1px dashed var(--label); outline-offset: 4px; }

/* ——— 17. Pages built on the trade-page template (for advisers, for small hotels, the notes,
   the review sample and the specimens). Written up in COMPONENTS.md §12. ——— */
/* the call band: after a case study's decisions, under a note, at the end of a trade page */
.cta-band { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 40px; align-items: center; margin: clamp(40px, 5vw, 72px) 0; padding: clamp(22px, 2.6vw, 32px) clamp(22px, 3vw, 40px); background: var(--bg-2); border: 1px solid var(--hair); position: relative; }
.cta-band__t { margin: 0; font-size: clamp(20px, 1.8vw, 25px); line-height: 1.3; letter-spacing: -.015em; max-width: 34em; }
.cta-band__t span { color: var(--fg-2); }
.cta-band__go { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
/* a labelled design study: never a client, and it says so first */
.study { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 64px); align-items: start; padding: clamp(24px, 3vw, 40px); border: 1px dashed var(--hair-2); background: var(--bg); }
.study__stamp { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 6px 10px; border: 1.5px solid var(--note-ink); color: var(--note); font: 400 13px/1 var(--mono); transform: rotate(-1.2deg); }
.study__h { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.1; letter-spacing: -.028em; margin: 0 0 12px; }
.study__why { font-size: 15px; color: var(--fg-2); }
.study p { font-size: 16.5px; line-height: 1.55; }
.study__notes { counter-reset: s; display: grid; gap: 10px; margin-top: 14px; }
.study__notes li { counter-increment: s; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; font-size: 16px; line-height: 1.5; }
.study__notes li::before { content: counter(s); display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--key-bg); color: var(--key-fg); font: 400 11.5px/1 var(--mono); }
/* the study's drawing: a phone page laid out as boxes, the construction-line way (plain HTML) */
.wf { position: relative; width: min(100%, 300px); margin-inline: auto; padding: 14px 12px 18px; border: 1.5px solid var(--fg); border-radius: 26px; background: var(--bg-2); display: grid; gap: 8px; }
.wf__bar { display: flex; justify-content: space-between; align-items: center; height: 30px; padding: 0 8px; border: 1px dashed var(--label); background: rgba(var(--npb), .08); font: 400 10.5px/1 var(--mono); color: var(--label); }
.wf__block { position: relative; display: grid; align-content: center; padding: 8px 10px; border: 1px dashed var(--label); background: rgba(var(--npb), .08); font-size: 13px; line-height: 1.35; color: var(--fg); min-height: 40px; }
.wf__block small { font: 400 10.5px/1.3 var(--mono); color: var(--label); }
.wf__block--h { font-size: 19px; line-height: 1.15; letter-spacing: -.02em; min-height: 84px; }
.wf__block--img { min-height: 120px; background: repeating-linear-gradient(135deg, rgba(var(--npb), .25) 0 1px, transparent 1px 9px); }
.wf__block--red { border-color: var(--note-ink); background: color-mix(in srgb, var(--note-ink) 8%, transparent); }
.wf__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; }
.wf__btn { display: grid; place-items: center; min-height: 34px; border: 1px solid var(--fg); font-size: 12.5px; font-weight: 500; }
.wf__btn--fill { background: var(--fg); color: var(--bg); }
.wf__key { position: absolute; right: -11px; top: -11px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--key-bg); color: var(--key-fg); font: 400 11.5px/1 var(--mono); }
/* a country's rules, with its source */
.regs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 36px); }
.reg { padding: 18px 0 20px; border-top: 1px solid var(--fg); }
.reg__c { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 8px; }
.reg__h { font-size: clamp(22px, 2vw, 28px); line-height: 1.12; letter-spacing: -.022em; }
.reg__who { font: 400 12.5px/1.4 var(--mono); color: var(--label); }
.reg p { font-size: 16.5px; line-height: 1.55; color: var(--fg-2); }
.reg .reg__rule { color: var(--fg); }
.reg__src { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--fg-2); }
/* an article (a note, the review sample) */
.article { max-width: 44em; }
.article p, .article li { font-size: clamp(18px, 1.3vw, 19.5px); line-height: 1.65; }
.article h2 { font-size: clamp(26px, 2.8vw, 38px); line-height: 1.1; letter-spacing: -.028em; margin: 1.6em 0 .6em; }
.article h3 { font-size: 22px; letter-spacing: -.018em; margin: 1.4em 0 .4em; }
.article ul { display: grid; gap: 8px; margin: 0 0 1em; }
.article ul li { position: relative; padding-left: 24px; }
.article ul li::before { content: ''; position: absolute; left: 2px; top: .8em; width: 11px; height: 1.5px; background: var(--note-ink); }
.byline { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 22px 0 0; font-size: 15.5px; color: var(--fg-2); }
.byline b { color: var(--fg); font-weight: 400; }
.byline-w { display: flex; align-items: center; gap: 14px; margin: 22px 0 0; }   /* the note's author, with his photo (tools/next/portrait.py) */
.byline-w .byline { margin: 0; }
.byline__pic { flex: none; width: 48px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 3px; background: var(--hair); box-shadow: 0 0 0 1px var(--hair-2); }
.byline__pic img { width: 100%; height: 100%; object-fit: cover; }
.sources { margin-top: 2.4em; padding-top: 16px; border-top: 1px solid var(--hair); }
.sources h2 { font-size: 20px; margin: 0 0 10px; letter-spacing: -.015em; }
.sources li { font-size: 15px; line-height: 1.55; color: var(--fg-2); padding: 4px 0; }
/* SPECIMEN: a document that is an example, and says so on every screen and every printed page */
.specimen { position: relative; }
.specimen__stamp { display: table; padding: 6px 12px; border: 2px solid var(--note-ink); color: var(--note); font: 400 14px/1 var(--mono); letter-spacing: .08em; transform: rotate(-2deg); }
/* the SPECIMEN mark stays on screen and never sits on a word of the document: below 1520px it is a
   band under the header, which the page scrolls beneath as it does beneath the header; from 1520px,
   where the margin is wider than the tag, it is a tag fixed in the left margin */
.specimen::before, .specimen::after { content: 'SPECIMEN'; z-index: 5; color: var(--note); font: 400 12px/1 var(--mono); letter-spacing: .08em; pointer-events: none; }
.specimen::before { position: sticky; top: var(--hdr); display: block; padding: 7px max(var(--gut), calc((100% - var(--wrap)) / 2)); text-align: right; background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1.5px solid var(--note-ink); }
.specimen::after { display: none; position: fixed; left: 12px; bottom: 90px; padding: 4px 8px; border: 1.5px solid var(--note-ink); background: var(--bg); }
@media (min-width: 1520px) { .specimen::before { display: none; } .specimen::after { display: block; } }
/* the footer is not part of the specimen: it slides over the fixed tag instead of running under it */
.specimen ~ .ftr { z-index: 6; }

/* ——— 18. Layout by width ——— */
/* wide: pinned sheets that stack on the table (from 600px tall, so a 1366 x 768 or 1280 x 800
   laptop, with its browser's bars, keeps them) */
@media (min-width: 1100px) and (min-height: 600px) {
  .chapter__in { grid-template-columns: minmax(0, 1fr) 372px; gap: clamp(40px, 4vw, 64px); align-items: start; }
  .work .chapter__in { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; }
  .work .chapter__stage { grid-column: 1 / 8; }
  .work .chapter__text { grid-column: 8 / -1; }
  .chapter__stage { position: sticky; top: calc(var(--hdr) + 3vh); }
  .stage--laptop { max-width: calc((100vh - var(--hdr) - 3vh - 96px) * 1000 / 700); transform-origin: 50% 0; transform: scale(calc(1 - var(--cover, 0) * .04)); }
  .stage--wide { max-width: calc((100vh - var(--hdr) - 3vh - 78px) * 1000 / 790); }
  .chapter { padding: 42px 0 20vh; border-top: 0; }
  .work .chapter + .chapter { margin-top: -20vh; box-shadow: 0 -1px 0 var(--hair-2), 0 -26px 44px -22px rgba(28, 26, 23, .3); }
  .work .chapter:nth-of-type(2) { z-index: 2; }
  .work .chapter:first-of-type { border-top: 1px solid var(--hair); }
  .chapter__text { padding-top: 4px; }
  .chapter__text .qr { padding-bottom: 24px; }
  .work .chapter:last-of-type { padding-bottom: 56px; }
}
.chapter__rest > * + * { margin-top: 24px; }
@media (max-width: 1099px), (max-height: 599px) {
  /* unpinned: the client's name first, then the film, then the story */
  .chapter__in { display: flex; flex-direction: column; gap: 0; }
  .chapter__text { display: contents; }
  .chapter__text > .sheet-tb { order: 1; }
  .chapter__stage { order: 2; margin: 24px 0 8px; }
  .chapter__text > :not(.sheet-tb) { order: 3; }
  .chapter__text > * + * { margin-top: 22px; }
  .chapter__stage { max-width: 900px; }
  .chapter__story, .chapter .quote blockquote p, .chapter .quote__note { max-width: 34em; }
  .sheet-tb { max-width: 640px; }
}

/* ——— The hotel's chapter, by width ———
   beside  from 900 px wide and 600 tall: the stage takes eight of the twelve columns and pins, and
           the title block, the three steps and the rest take the other four; the scroll runs the
           drawing (Lay out, Build, Live) over about a screen and a half
   below   no drawing and no pin: from 768 px the film plays with its notes; on a phone, the
           Enquire close-up with one loop and one note (the first screen already plays its film) */
@media (min-width: 900px) and (min-height: 600px) {
  .ch-build .chapter__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; gap: 0 24px; align-items: start; }
  .ch-build .build-run, .ch-build .build-pin { display: contents; margin: 0; }
  .ch-build .sheet-tb { grid-column: 8 / -1; grid-row: 1; margin-top: 4px; }
  .ch-build .chapter__stage { grid-column: 1 / 8; grid-row: 1 / 4; position: sticky; top: calc(var(--hdr) + 3vh); margin: 0; }
  .ch-build .stage--wide { max-width: calc((100vh - var(--hdr) - 3vh - 78px) * 1000 / 790); }
  .ch-build .steps-build { grid-column: 8 / -1; grid-row: 2; margin-top: 24px; }
  .ch-build .chapter__rest { grid-column: 8 / -1; grid-row: 3; margin-top: 24px; }
  .motion .ch-build .bstep[data-st="2"] { min-height: 19vh; }
}
@media (max-width: 899px), (max-height: 599px) {
  .ch-build .chapter__in { display: block; }
  .ch-build .steps-build, .ch-build .drawing { display: none; }
  .ch-build .chapter__stage { margin: 24px 0 0; max-width: 900px; }
  .ch-build .chapter__rest { margin-top: 24px; }
}
@media (min-width: 900px) and (max-width: 1099px) and (min-height: 600px) {
  .ch-build .chapter__story { font-size: 19px; }
}
@media (min-width: 768px) {
  .stage--laptop .stage__box--phone { display: none; }
  .keys--phone, .cap--phone { display: none !important; }
}

@media (max-width: 1099px) {
  .nav { display: none; }
  .menu { display: block; }
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); column-gap: clamp(32px, 4vw, 56px); }
  .hero__copy, .hero__grid > .sites, .hero__grid > .callout { grid-column: 1; }
  .stage--hero { grid-column: 2; }
  .hero--home .hero__copy > * { grid-column: 1; }
  .hero--home .hero__copy > .stage--hero { grid-column: 2; }
  .tblock { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 0; }
  .tblock__cell, .tblock__cell:first-child, .tblock__cell:nth-child(3), .tblock__cell:last-child { grid-column: span 2; padding-right: 16px; }
  .tblock__cell:nth-child(4), .tblock__cell:nth-child(5) { grid-column: span 3; border-top: 1px solid var(--hair-2); }
  .tblock__cell:nth-child(4) { border-left: 0; padding-left: 0; }
  .price__head, .price__words { grid-column: 1 / -1; }
  .price__words { padding: 18px 0 0; }
  .plan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan__s:nth-child(4) { border-left: 0; padding-left: 0; }
  .plan__s:nth-child(n+4) { border-top: 1px solid var(--hair); }
  .plan__s--0 { grid-template-columns: minmax(0, 1fr); }
  .plan__s--0 .plan__go { justify-content: flex-start; }
  .terms3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .terms3 .pay, .terms3__note { grid-column: 1 / -1; }
  .terms3__note { margin-top: -8px; font-size: 14.5px; }
  .after dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .after dl > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .after dl > div:nth-child(n+3) { border-top: 1px solid var(--hair); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step:nth-child(3) { border-left: 0; padding-left: 0; }
  .step:nth-child(n+3) { border-top: 1px solid var(--hair); }
  .price__grid, .whatif__grid, .who__grid, .qs__grid, .close__grid { grid-template-columns: minmax(0, 1fr); }
  .close__grid { display: flex; flex-direction: column; }
  .close__grid > .ps { order: 2; }
  .close__grid > .ticket { order: 3; margin-top: 30px; max-width: 640px; }
  /* the ticks under the bars: the red label on its own line */
  .bars__ticks { display: flex; flex-wrap: wrap; justify-content: space-between; height: auto; row-gap: 6px; }
  .bars__ticks span { position: static; transform: none; left: auto; right: auto; }
  .bars__ticks .t-10, .bars__ticks .t-60, .bars__ticks .t-80 { display: none; }
  .bars__ticks .t-red { position: relative; left: 0; margin-left: 0; order: 3; flex: 1 0 100%; padding-left: 12px; }
  .bars__ticks .t-red::before { content: ''; position: absolute; left: 0; top: -1px; bottom: -1px; width: 2px; background: var(--note-ink); }
  .whatif__more { grid-column: 1; }
  .ask { grid-template-columns: minmax(0, 1fr); }
  .ask .btn { justify-self: start; }
  .ftr__grid { grid-template-columns: 1fr 1fr; }
  .ftr__col:nth-child(3) { border-left: 0; padding-left: 0; }
  .ftr__col:nth-child(n+3) { border-top: 1px solid var(--hair-2); }
  .study, .regs { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 899px) {
  /* stacked, in the order of the source: the line, the offer, the buttons, then the film */
  .hero__grid { display: flex; flex-direction: column; }
  .hero__copy { display: contents; }
  .hero__copy > .h1 { order: 1; } .hero__copy > .lede { order: 2; } .hero__copy > .hero__video { order: 3; }
  .hero__copy > .cta { order: 4; } .hero__copy > .callline { order: 5; } .hero__copy > .callline__wa { order: 6; }
  .hero__copy > .status { order: 7; margin: 22px 0 0; }
  .stage--hero { order: 8; margin-top: 30px !important; align-self: flex-start; max-width: 480px; }
  .hero__grid > .sites { order: 9; margin-top: 30px; }
  /* the home page stacks in its source order: the line, the offer, the video line, the film (never
     taller than 460px), then the buttons; on a phone the dock carries Book from the first paint */
  .hero--home .hero__copy > .hero__video { order: 3; }
  .hero--home .stage--hero { order: 4; margin-top: 18px !important; max-width: min(100%, 362px); }
  .hero--home .stage--hero .stage__box--phone { max-width: calc(350px * 1000 / 1272); }
  .hero--home .hero__copy > .cta { order: 5; margin-top: 18px; }
  .hero--home .hero__copy > .callline { order: 6; }
  .hero--home .hero__copy > .callline__wa { order: 7; }
  .h1 { font-size: clamp(38px, 7.6vw, 64px); }
}

/* phones */
@media (max-width: 767px) {
  :root { --hdr: 58px; --sec: 36px; }
  body { font-size: 16.5px; line-height: 1.5; }
  .brand { font-size: 19px; }
  .brand .mark { width: 26px; height: 26px; }
  .hdr__in { gap: 12px; }
  .hdr__end { gap: 8px; }
  .menu summary { height: 38px; padding: 0 12px; }
  .h1 { font-size: clamp(36px, 10.2vw, 52px); letter-spacing: -.04em; }
  .h2 { font-size: clamp(28px, 7.8vw, 38px); }
  .eyebrow { margin-bottom: 12px; }
  .sec__sub, .work__sub { margin-top: 12px; font-size: 16.5px; }
  .lede, .hero__video { font-size: 17.5px; }
  /* the home page's first screen (the order is set for every stacked width above) */
  .hero--home .hero__copy > .callline__wa { display: none; }   /* the dock carries WhatsApp */
  .hero--home .hero__grid > .sites { display: none; }
  .hero .lede { margin-top: 18px; }
  .hero__video { margin-top: 8px; }
  .cta .btn { flex: 1 1 100%; }
  .sites { gap: 6px 18px; }
  .sites a { font-size: 15px; }
  .stage--hero .stage__cap { margin-top: 10px; }
  /* the title block as one column: the label on the left, the value on the right */
  .tblock { display: block; margin-top: 22px; }
  .tblock__cell, .tblock__cell:first-child, .tblock__cell:last-child, .tblock__cell:nth-child(3), .tblock__cell:nth-child(5) { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-left: 0; border-top: 1px solid var(--hair-2); }
  .tblock__cell:first-child { border-top: 0; }
  .tblock dt { margin: 3px 0 0; }
  .tblock__v { font-size: 17px; }
  .tblock__s { font-size: 14px; }
  .tblock__cell:not(:nth-child(3)) .tblock__s { display: none; }
  /* the work: the phone film, with the notes beside it; no QR codes */
  .stage--laptop .stage__box--laptop { display: none; }
  .stage--laptop .stage__box--phone { display: block; max-width: 276px; }
  .keys--laptop, .cap--laptop { display: none !important; }
  .ch-build .chapter__stage { display: none; }
  /* the hotel's close-up, small, beside its note */
  .ch-build .ga-close { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 4px 16px; align-items: center; margin: 16px 0 0; }
  .ga-close .detail__img { grid-row: 1 / 3; }
  .ga-close .detail__note { align-self: end; margin: 0; font-size: 20px; }
  .ga-close .detail__cap { align-self: start; margin: 0; }
  .work__head { margin-bottom: 24px; }
  .chapter { padding: 26px 0 30px; }
  .chapter__stage { margin: 16px 0 4px; }
  .chapter__text > * + *, .chapter__rest > * + * { margin-top: 15px; }
  .work .sheet-tb .h3 { font-size: 22px; }
  .chapter__story { font-size: 16.5px; line-height: 1.45; }
  .quote__trade { display: none; }
  .quote blockquote p { font-size: 16px; line-height: 1.5; }
  .quote__note { font-size: 14px; }
  .chapter__links { gap: 10px 18px; }
  .chapter__links .btn { flex: 1 1 100%; min-height: 48px; }
  /* no sheet tables on a phone: the client's name and what the business is, as plain words */
  .work .sheet-tb { border: 0; background: none; }
  .work .sheet-tb > div { padding: 0; border: 0; }
  .work .sheet-tb .sheet-tb__l { display: none; }
  .work .sheet-tb > div:not(.sheet-tb__client) { display: block; margin-top: 4px; }
  .work .sheet-tb > div:nth-child(3) { display: none; }
  .work .sheet-tb p { color: var(--fg-2); font-size: 15.5px; }
  .qr { display: none; }
  .sheet-tb > div:not(.sheet-tb__client) { grid-template-columns: 96px minmax(0, 1fr); gap: 10px; }
  .sister { grid-template-columns: minmax(0, 1fr); gap: 6px; padding-top: 16px; margin-top: 20px; }
  .sister__t { font-size: 17px; }
  .sister__img { display: none; }
  .sister__t { font-size: 18px; }
  .sister__t .live { display: flex; margin: 6px 0 0; }
  /* the other case-study and advisers stills */
  :is(.cs-nz__film, .gmc-film, .adv-proof) .stage--laptop { overflow: clip; }
  :is(.cs-nz__film, .gmc-film, .adv-proof) .stage__box--laptop { display: block; width: 125%; margin: -7.6% 0 -16.4%; }
  :is(.cs-nz__film, .gmc-film, .adv-proof) .pen--laptop :is(.mk__note, .mk__arrow, .mk__head), :is(.cs-nz__film, .gmc-film, .adv-proof) .device--aside { display: none; }
  :is(.cs-nz__film, .gmc-film, .adv-proof) :is(.screen__film, .film-btn) { display: none; }
  :is(.cs-nz__film, .gmc-film, .adv-proof) .stage__cue { display: block; min-height: 3.2em; margin: 6px 0 0; font: 400 21px/1.3 var(--hand); color: var(--note); }
  /* the price */
  .price__big { font-size: clamp(84px, 27vw, 120px); }
  .price__words { padding-top: 12px; }
  .price__lede { font-size: 18.5px; }
  .price__small { font-size: 15.5px; line-height: 1.5; }
  .plan__h { margin-top: 32px; font-size: 25px; }
  .plan { display: block; margin-top: 16px; }
  .plan__s, .plan__s:nth-child(2), .plan__s:nth-child(4) { padding: 13px 0 12px; border-left: 0; border-top: 1px solid var(--hair); }
  .plan__s:nth-child(2) { border-top: 1px solid var(--hair); }
  .plan__s--0 { border-top: 0; padding-top: 14px; gap: 6px; }
  .plan__n, .plan__t { font-size: 20px; }
  .plan__head { margin-bottom: 4px; }
  .plan__s p { font-size: 15.5px; line-height: 1.45; margin-bottom: .35em; }
  .plan__s .plan__small { font-size: 14px; }
  /* one schedule: the amount sits at the right of the step's name; two (the advocate switch on):
     both amounts under the words, labelled */
  .plan__pay { position: absolute; top: 13px; right: 0; margin: 0; padding: 0; border: 0; gap: 0; text-align: right; }
  .plan__pay dt, .plan__pay .plan__f { display: none; }   /* the founding amounts: in the bars and the founding box */
  .plan__pay dd { font-size: 18px; line-height: 1.2; }
  .plan__s--0 .plan__go { gap: 8px 16px; }
  .plan__s--0 .plan__go .btn { display: none; }   /* the dock carries Book here */
  .plan__s--0 .plan__free { order: 1; }
  .plan__s--0 .plan__go .xlink { display: none; }
  .plan__s--0 { position: relative; }
  .plan__s--0 .plan__free { position: absolute; top: 14px; right: 0; font-size: 18px; }
  .plan__s .plan__small:not(:first-of-type) { display: none; }
  .plan__total { font-size: 15.5px; margin-top: 10px; }
  .bars { margin-top: 26px; }
  .bars__ticks { display: flex; flex-wrap: wrap; justify-content: space-between; height: auto; row-gap: 6px; }
  .bars__ticks span { position: static; transform: none; left: auto; right: auto; }
  .bars__ticks .t-red { position: relative; left: 0; order: 3; flex: 1 0 100%; padding-left: 12px; }
  .bars__ticks .t-red::before { content: ''; position: absolute; left: 0; top: -1px; bottom: -1px; width: 2px; background: var(--note-ink); }
  .bars__cap { font-size: 14px; }
  .bars__key { margin-bottom: 8px; }
  .bars__row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-top: 6px; }
  .bars__name small { display: inline; margin-left: 6px; }
  .bars__ticks .t-10, .bars__ticks .t-20:not(.t-red), .bars__ticks .t-40:not(.t-red), .bars__ticks .t-60, .bars__ticks .t-80 { display: none; }
  .bars__ticks .t-red { font-size: 13.5px; }
  .bars__key { gap: 6px 14px; font-size: 13.5px; }
  .bars__plannote { font-size: 16px; }
  /* how you pay across; included and not included side by side, like a spec sheet */
  .terms3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px 16px; margin-top: 30px; }
  .terms3 .pay { grid-column: 1 / -1; }
  .pay p { font-size: 15.5px; margin-top: 10px; }
  .pay .keep { display: none; }   /* the same promise is in "Check me before you pay", a little further on */
  /* included and not included: every item still there, set as a run of ticked phrases */
  .terms3 .incl, .terms3 .excl { grid-column: 1 / -1; }
  .ticks, .dashes { padding-top: 8px; }
  .ticks li, .dashes li { display: inline-block; padding: 2px 0 2px 16px; margin-right: 12px; border: 0; font-size: 15px; line-height: 1.45; }
  .ticks li::before { left: 0; top: 8px; width: 9px; height: 4.5px; } .dashes li::before { left: 0; top: 12px; width: 9px; }
  .incl__note { font-size: 14.5px; }
  .after { margin-top: 30px; }
  .after__h { font-size: 20px; margin-bottom: 8px; }
  /* after launch: one row each, the price on the right; only Care keeps its line of detail */
  .after dl { grid-template-columns: minmax(0, 1fr); }
  .after dl > div, .after dl > div:first-child, .after dl > div:nth-child(3) { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 0 12px; padding: 7px 0; border-left: 0; border-top: 1px solid var(--hair); }
  .after dl > div:first-child { border-top: 0; }
  .after dd { margin: 0; }
  .after dl > div:not(:nth-child(2)) .after__s { display: none; }
  .after__v { font-size: 17px; }
  .after__s { font-size: 14px; }
  .after__own { font-size: 15.5px; margin-top: 12px; }
  .price__end { margin-top: 14px; }
  /* What if…, who, questions, the close */
  .whatif__list { grid-template-columns: minmax(0, 1fr); }
  .wi--late, .wi.if-advocate { display: none !important; }   /* on a phone the refund and the delay remedy are one line each in "You're in India" (.wi__phone), and the terms are one link away */
  .fnd { grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; padding: 14px 16px; }
  .fnd__sq { grid-row: 1; padding-top: 6px; }
  .fnd > :not(.fnd__sq):not(.fnd__h) { grid-column: 1 / -1; }
  .fnd__h { font-size: 18px; }
  .fnd p:not(.fnd__sq) { font-size: 15px; line-height: 1.45; }
  .fnd p.fnd__count { font-size: 14px; }
  .wi { padding: 13px 0 14px; }
  .wi__q { font-size: 19.5px; margin-bottom: 5px; }
  .wi p { font-size: 15px; line-height: 1.45; }
  .who__grid { gap: 30px; }
  .who__letter .h2 { margin-bottom: 18px; }
  /* the photo pays for itself on a phone: the name moves up beside it, under the heading (grid rows 1 and 2), and the
     place and "Book a call" go (the footer's legal line says Phagwara; the next check and the dock say Book) */
  .who__letter { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; column-gap: 16px; }
  .who__letter > * { grid-column: 1 / -1; }
  .who__head { display: contents; }
  .who__title { grid-column: 1; grid-row: 1; }
  .who__pic { grid-column: 2; grid-row: 1 / span 2; width: 100px; margin-bottom: 18px; }
  .who__letter > .sign { grid-column: 1; grid-row: 2; align-self: start; margin: 10px 0 18px; }
  .who__letter > .who__frame { margin-bottom: 0; }   /* a grid keeps margins apart: the voice's own 22px is the gap after it */
  .sign__name { font-size: 20px; }
  .sign__where { display: none; }
  .who__letter p:not(.eyebrow):not(.sign) { font-size: 16px; line-height: 1.5; }
  .verify__h { font-size: 20px; margin-bottom: 10px; }
  .verify > li { grid-template-columns: 30px minmax(0, 1fr); gap: 0 10px; padding: 9px 0; }
  .who__letter .who__frame { padding-left: 12px; }
  .verify > li::before { width: 24px; height: 24px; font-size: 13px; }
  .verify__t { display: inline; font-size: 16px; font-weight: 500; }
  .verify p { font-size: 15px; line-height: 1.45; margin-bottom: 4px; }
  .gstline { font-size: 14.5px; }
  .keep { padding: 12px 14px; }
  .keep p { font-size: 15.5px; }
  .facts > div { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
  .qs summary { padding: 10px 36px 10px 0; font-size: 17px; }
  .faq__a { padding-right: 0; font-size: 16.5px; }
  .bigl > a, .bigl__row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 14px 0; }
  .bigl__k { grid-column: 1 / -1; }
  .bigl__row > .bigl__k { padding-top: 0; }
  .bigl__row > .calls { grid-column: 1 / -1; }
  .bigl__v { font-size: clamp(22px, 7vw, 30px); }
  .calls .btn { width: 100%; }
  .calls__list li { font-size: 15.5px; }
  .week { display: none; }
  .ps { padding-left: 0; padding-top: 46px; margin-top: 22px; font-size: 16.5px; }
  .ticket { padding: 18px 16px; }
  .ticket .cta { flex-wrap: nowrap; gap: 8px; margin-top: 14px; }
  .ticket .cta .btn { flex: 1 1 0; padding: 0 10px; font-size: 15px; }
  .ticket__sample { margin-bottom: 12px; font-size: 15px; }
  .copy { display: none !important; }
  .ticket__h { font-size: 22px; }
  .ticket > p:not(.eyebrow):not(.fine) { font-size: 15.5px; }
  .rules { margin-bottom: 16px; } .rules li { font-size: 15.5px; }
  /* on a phone the review goes straight to the message, with its blanks to fill in there */
  .fields { display: none !important; }
  .close .sec__sub { font-size: 16px; }
  .close__grid > .ticket { margin-top: 26px; }
  .bigl { margin-top: 20px; }
  .calls__h { margin-top: 12px; }
  .calls__fine { font-size: 13.5px; }
  .calls__fine [data-calls-note] { display: none; }
  .bigl > a { padding: 12px 0; }
  .cta-band { grid-template-columns: minmax(0, 1fr); }
  .cta-band__go { justify-content: flex-start; }
  .cta-band__go .btn { flex: 1 1 100%; }
  /* the footer: rows, not boxes; no film strip */
  .strip { display: none; }
  .ftr { padding-bottom: calc(80px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hair); }
  .wordmark { margin-top: 22px; }
  .wordmark__t { font-size: 14cqw; }
  .ftr__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 0; margin-top: 0; }
  .ftr__col, .ftr__col:first-child { padding: 12px 12px 12px 0; border-left: 0 !important; border-top: 1px solid var(--hair-2); font-size: 14px; line-height: 1.4; }
  .ftr__col li + li { margin-top: 5px; }   /* 24 px between the links' centres (WCAG 2.5.8) */
  .ftr__l { margin-bottom: 6px; }
  .ftr__l + ul + .ftr__l { margin-top: 12px; }
  .ftr__lines { display: none !important; }   /* the grid is a laptop's toy */
  .ftr__legal { margin-top: 12px; padding-top: 10px; }
  .ftr__col:nth-child(3), .ftr__col:nth-child(4) { grid-column: 1 / -1; }
  .ftr__col:nth-child(4) p { font-size: 13.5px; }
  #f-for, #f-for + ul { display: none; }   /* both trade pages are in the Menu */
  .ftr__all { display: none; }   /* Notes is in the Menu */
  .bars__stop { display: none; }   /* What if… says it two screens later; the phone page stays under 14 screens with every switch on */
  .ftr__col:nth-child(3) ul { display: flex; flex-wrap: wrap; gap: 5px 18px; }
  .ftr__col:nth-child(3) li + li { margin-top: 0; }
  .ftr__legal { font-size: 13.5px; }
  /* the dock: Book a video call and WhatsApp, always under the thumb */
  html { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .dock { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 70; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; background: color-mix(in srgb, var(--film) 92%, transparent); color: var(--graphite); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); border: 1px solid #C8C1B4; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .4); transform: translateY(160%); transition: transform .45s var(--ease); }
  html:not(.js) .dock, .show-dock .dock, .dock:focus-within { transform: none; }
  .dock a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 10px; font: 500 15.5px/1.1 var(--sans); text-decoration: none; text-align: center; }
  .dock .ext { width: 10px; height: 10px; margin: 0; }
  .dock__book { background: var(--graphite); color: var(--film); }
  .dock__wa { border: 1px solid var(--graphite); }
}
@media (max-width: 767px) and (prefers-color-scheme: dark) {
  .dock { background: color-mix(in srgb, #211E1A 94%, transparent); color: #EFEAE2; border-color: #433E37; }
  .dock__book { background: #EFEAE2; color: #191714; }
  .dock__wa { border-color: #EFEAE2; }
}
/* under 600 px the header keeps only the name and the menu: Book is in the dock */
@media (max-width: 599px) {
  .hdr__book { display: none; }
}
@media (max-width: 420px) {
  .brand__name { font-size: 18px; }
}

/* ——— 19. Still: reduced motion, Save-Data, or no script ———
   Nothing moves by itself. The films show their first frame and wait for Play; the drawing waits
   behind the Lines switch, so the finished page stands clean with its notes; the sheets do not
   stack. The motion budget, everywhere else: the H1's one ink, the films (each with Pause), the
   notes that follow them, the payment bars drawing once, and the sheets stacking on a laptop. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.still .chapter + .chapter { margin-top: 0 !important; }
.still .work .chapter { padding-bottom: 56px !important; }
.still .stage--laptop { transform: none !important; opacity: 1 !important; }
.still .chapter--build .bstep { min-height: 0 !important; }

@media print {
  .hdr, .dock, .strip, .film-btn, .grid-overlay, .ftr__lines { display: none !important; }
  .chapter__stage { position: static !important; }
}

/* ——— 20. The other pages: page head, case study, documents, advisers, 404 ———
   Written up with their markup in COMPONENTS.md ("The other pages"). They reuse everything
   above: the header, the footer, .sheet-tb, the stage and its notes, .quote, .cta-band, .bars.
   Each page's builder rebuilds its page to the 5th edition; rules no page uses any more are
   removed then. */
.page-head { position: relative; padding: clamp(40px, 7vw, 96px) 0 clamp(40px, 6vw, 72px); }
.back { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 30px; font-size: 15px; line-height: 1; color: var(--fg-2); text-decoration: none; }
.back svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; transform: scaleX(-1); transition: transform .3s var(--ease); }
.back:hover { color: var(--note); }
.back:hover svg { transform: scaleX(-1) translateX(3px); }
.h1--page { font-size: clamp(38px, 5.2vw, 76px); max-width: 15em; }
.page-head .lede { margin: 28px 0 0; max-width: 38em; color: var(--fg-2); }
.page-head .sheet-tb { margin-top: 40px; }
.sheet-tb--row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.sheet-tb--row > .sheet-tb__client { border-left: 0 !important; }
.sheet-tb--row > div { border-top: 0 !important; border-left: 1px solid var(--hair-2); grid-column: auto !important; display: block !important; }
.sheet-tb--row > div:first-child { border-left: 0; }
.case-stage { margin-top: clamp(40px, 6vw, 72px); }
.case-stage .stage--laptop { max-width: 1120px; }

/* a numbered part of a case study or a long page: label beside, content in a readable column */
.part { padding: clamp(64px, 9vw, 128px) 0; border-top: 1px solid var(--hair); }
.part__grid { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 2fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.part__label { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; font: 400 13px/1.4 var(--mono); color: var(--label); }
.part__label::before { content: ''; width: 11px; height: 11px; flex: none;
  background: linear-gradient(var(--label), var(--label)) center / 100% 1px no-repeat, linear-gradient(var(--label), var(--label)) center / 1px 100% no-repeat; }
.part .h2 { font-size: clamp(30px, 3.6vw, 52px); max-width: 17em; margin-bottom: 28px; }
.prose p, .prose li { font-size: clamp(18px, 1.3vw, 19.5px); line-height: 1.62; max-width: 36em; }
.prose ul { display: grid; gap: 10px; margin: 0 0 1em; }
.prose ul li { position: relative; padding-left: 24px; }
.prose ul li::before { content: ''; position: absolute; left: 2px; top: .8em; width: 11px; height: 1.5px; background: var(--note-ink); }
.pull { margin: 34px 0; padding-left: 22px; border-left: 2px solid var(--note-ink); font-size: clamp(24px, 2.4vw, 34px); line-height: 1.25; letter-spacing: -.022em; max-width: 22em; }
/* a pull line inside a .prose column keeps its own size (.prose p would shrink it) */
.prose .pull { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.25; letter-spacing: -.022em; max-width: 22em; }

/* a decision: the close-up with its redline note, the reasoning, and what it cost */
.decision { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); padding: clamp(40px, 5vw, 64px) 0; border-top: 1px solid var(--hair); align-items: start; }
.decision__media { position: sticky; top: calc(var(--hdr) + 24px); }
.decision__n { font-size: 15px; line-height: 1; color: var(--label); margin-bottom: 12px; }
.decision .h3 { margin-bottom: 16px; }
.decision p { color: var(--fg-2); font-size: 17.5px; }
/* ...but not the number or the hand note, which keep their own type */
.decision p.decision__n { font-size: 15px; line-height: 1; color: var(--label); }
.decision p.detail__note { font: 400 clamp(19px, 1.6vw, 23px)/1.3 var(--hand); color: var(--note); }
.cost { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; margin: 22px 0 0; padding-top: 16px; border-top: 1px dashed var(--hair-2); }
.cost dt { font: 400 12.5px/1.6 var(--mono); color: var(--note); }
.cost dd { font-size: 16.5px; color: var(--fg); }
.changes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.changes > div { padding-top: 18px; border-top: 1px solid var(--fg); }
.changes h3 { font-size: 22px; letter-spacing: -.02em; line-height: 1.2; margin-bottom: 10px; }
.changes p { color: var(--fg-2); font-size: 17px; }
.quote--big blockquote p { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.42; letter-spacing: -.015em; max-width: 30em; }
.quote--big .quote__who { margin-top: 18px; font-size: 16.5px; }
.cta-card { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px clamp(32px, 5vw, 80px); padding: clamp(32px, 5vw, 64px); }
.cta-card .h2 { font-size: clamp(30px, 3.6vw, 52px); }
.nextprev { display: grid; margin-top: 8px; border-top: 1px solid var(--hair-2); }
.nextprev a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--hair-2); font-size: 18px; text-decoration: none; }
.nextprev a:hover { color: var(--note); }
.nextprev small { display: block; font: 400 12.5px/1.4 var(--mono); color: var(--label); margin-bottom: 4px; }

/* documents: terms and privacy */
.doc { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); padding-bottom: var(--sec); }
.toc { position: sticky; top: calc(var(--hdr) + 28px); align-self: start; max-height: calc(100vh - var(--hdr) - 44px); overflow-y: auto; overscroll-behavior: contain; }   /* on a short screen the index scrolls in itself, so its last link can always be reached */
.toc__h { font: 400 12.5px/1.4 var(--mono); color: var(--label); margin: 0 0 12px; }
.toc ol { counter-reset: t; border-top: 1px solid var(--fg); }
.toc li { counter-increment: t; border-bottom: 1px solid var(--hair); }
.toc a { display: grid; grid-template-columns: 30px minmax(0, 1fr); padding: 9px 0; font-size: 15px; line-height: 1.35; text-decoration: none; color: var(--fg-2); }
.toc a::before { content: counter(t, decimal-leading-zero); font: 400 12px/1.6 var(--mono); color: var(--label); }
.toc a:hover { color: var(--note); }
.doc__sec { padding: 36px 0 12px; border-top: 1px solid var(--hair); }
.doc__sec:first-child { border-top: 1px solid var(--fg); }
.doc__n { font: 400 14px/1.3 var(--sans); color: var(--label); margin: 0 0 14px; }
.doc__num { font: 400 13px/1 var(--mono); }   /* only the section number is mono: the words are a sentence */
.eyebrow__more { font: 400 14px/1.3 var(--sans); letter-spacing: 0; }
.defs--words dt { font: 400 14.5px/1.5 var(--sans); }   /* labels longer than three words are set in the reading type */
.doc__sec h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.08; letter-spacing: -.03em; margin: 0 0 22px; }
.doc__sec h3 { font-size: 20px; letter-spacing: -.015em; margin: 26px 0 8px; }
.doc__sec p, .doc__sec li { font-size: 17.5px; line-height: 1.62; max-width: 40em; }
.doc__sec ul { display: grid; gap: 8px; margin: 0 0 1em; }
.doc__sec ul li { position: relative; padding-left: 22px; }
.doc__sec ul li::before { content: ''; position: absolute; left: 1px; top: .8em; width: 10px; height: 1.5px; background: var(--fg-2); }
.defs { margin: 0 0 1.2em; border-top: 1px solid var(--hair); max-width: 48em; }
.defs > div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.defs dt { font: 400 13px/1.6 var(--mono); color: var(--label); }
.defs dd { font-size: 17px; line-height: 1.55; overflow-wrap: anywhere; }
.card-note { padding: 22px 26px; background: var(--bg-2); border: 1px solid var(--hair); max-width: 44em; }
.card-note > :last-child { margin-bottom: 0; }

/* advisers: the regulator's line, the five checks with a score, the hours table */
.callout { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 16px; margin-top: 36px; padding: 20px 24px; background: var(--bg-2); border: 1px solid var(--hair); max-width: 46em; }
.callout__mark { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--note-ink); display: grid; place-items: center; color: var(--note); font: 400 14px/1 var(--mono); }
.callout p { margin: 0; }
.checks__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.checks__side { position: sticky; top: calc(var(--hdr) + 28px); }
.checks__list { border-top: 1px solid var(--fg); }
.checks__list > li { border-bottom: 1px solid var(--hair); }
.check { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; padding: 20px 0; cursor: pointer; }
.check input { position: absolute; left: 0; top: 22px; width: 24px; height: 24px; margin: 0; opacity: 0; cursor: pointer; }
.check__box { position: relative; width: 24px; height: 24px; margin-top: 2px; border: 1.5px solid var(--fg); background: var(--bg-2); transition: background-color .2s, border-color .2s; }
.check__box::after { content: ''; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .25s var(--ease); }
.check input:checked + .check__box { background: var(--note-ink); border-color: var(--note-ink); }
.check input:checked + .check__box::after { transform: rotate(45deg) scale(1); }
.check input:focus-visible + .check__box { outline: 2px solid var(--note-ink); outline-offset: 3px; }
.check__n { display: block; font-size: 14.5px; line-height: 1.4; color: var(--label); margin-bottom: 4px; }
.check__t { display: block; font-size: 20px; line-height: 1.3; letter-spacing: -.015em; }
.check__b { display: block; margin-top: 8px; color: var(--fg-2); font-size: 16.5px; line-height: 1.55; }
.score { margin-top: 28px; }
.score__n { margin: 0; font-size: clamp(56px, 6vw, 88px); line-height: 1; letter-spacing: -.05em; }
.score__n span { font-size: .4em; color: var(--fg-2); letter-spacing: 0; }
.score__n b { font-weight: 400; }
.score__bars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 14px 0; max-width: 260px; }
.score__bars li { height: 6px; background: var(--hair-2); transition: background-color .3s; }
.score__bars li.on { background: var(--note-ink); }
.score__verdict { color: var(--fg-2); font-size: 16px; max-width: 22em; }
.zones { width: 100%; max-width: 46em; border-collapse: collapse; margin: 8px 0 12px; }
.zones th, .zones td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--hair); text-align: left; vertical-align: top; font-size: 16px; line-height: 1.45; font-weight: 400; }
.zones thead th { font: 400 12.5px/1.4 var(--mono); color: var(--label); border-bottom: 1px solid var(--fg); }
.zones .note { color: var(--fg-2); }
.zones .note.in { color: var(--label); }
.zones__foot { font-size: 14px; line-height: 1.5; color: var(--fg-2); max-width: 60ch; }
.clock { font-size: 15px; line-height: 1.5; color: var(--fg-2); }

/* 404: the whole site on one sheet */
.lost { border-top: 1px solid var(--fg); max-width: 56em; }
.lost a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--hair); font-size: clamp(20px, 2vw, 26px); letter-spacing: -.02em; text-decoration: none; }
.lost a small { font: 400 12.5px/1.4 var(--mono); color: var(--fg-2); letter-spacing: 0; }
.lost a:hover { color: var(--note); }

@media (max-width: 1099px) {
  .part__grid, .decision, .doc, .checks__grid, .cta-card { grid-template-columns: minmax(0, 1fr); }
  .decision__media, .toc, .checks__side { position: static; }
  .toc { max-width: 520px; max-height: none; overflow: visible; }
}
@media (max-width: 767px) {
  .sheet-tb--row { grid-template-columns: 76px minmax(0, 1fr) !important; }
  .sheet-tb--row > div:nth-child(n+3) { grid-column: 1 / -1 !important; border-left: 0; border-top: 1px solid var(--hair-2) !important; display: grid !important; grid-template-columns: 94px minmax(0, 1fr); gap: 10px; }
  .changes { grid-template-columns: minmax(0, 1fr); }
  .defs > div, .cost { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .zones th, .zones td { font-size: 15px; padding-right: 10px; }
}

/* ——— 18a. The advisers page, terms, privacy and the 404 ———
   Classes of their own (adv-*, dayline, pieces, notfor, nots, law, short, nf, miss, register)
   and a few refinements scoped to those pages. Merged 25 Sep 2026 from legal.css (copy kept in 3-business/quietlybuild/redesign-2026-09-24/_merged-parts/css/). */
/* ——— 1. Shared: the redline keys and hand strokes used on close-ups ——— */
.mk__key circle { fill: var(--key-bg); }
.mk__key text { fill: var(--key-fg); font: 400 11.5px/1 var(--mono); text-anchor: middle; }
.adv .pen--detail .mk__loop { stroke-width: 2.2; }

/* ——— 2. Advisers: the first screen ——— */
body.adv { --sec: clamp(72px, 8.4vw, 124px); }
.adv-top .h1 { font-size: clamp(38px, 4.6vw, 66px); max-width: 13.2em; letter-spacing: -.042em; }
.adv-top .eyebrow { margin-bottom: 26px; }
.adv-top .lede { max-width: 35em; }
.adv-top .callout { margin-top: 34px; align-items: start; }
.hero__grid > .callout { grid-column: 1 / 9; grid-row: 2; align-self: start; }
.adv-top .callout p + p { margin-top: 6px; color: var(--fg-2); font-size: 16.5px; line-height: 1.5; }
.adv-top .callout b { font-size: 18px; letter-spacing: -.01em; }
.callout__mark svg { width: 14px; height: 14px; fill: none; stroke: var(--note-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.adv-top__stage { margin-top: 10px; }
.adv-top__stage .stage__cap { flex-wrap: wrap; gap: 10px 14px; }
.adv-top__stage .stage__where { padding-top: 0; }
.adv-top .tblock__v { font-size: 18.5px; }

/* ——— 3. Advisers: the site itself, playing ——— */
.adv-proof { border-top: 1px solid var(--hair); }
.adv-proof .case-stage { margin-top: clamp(8px, 1.4vw, 20px); }
.adv-proof .case-stage .stage--laptop { max-width: 1180px; }
.adv-proof__grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; margin-top: clamp(48px, 6vw, 80px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--hair); }
.adv-proof .pull { margin: 30px 0 18px; }
.adv-proof .pull + p { color: var(--fg-2); }
.adv-proof__side .facts { border-top: 1px solid var(--fg); }
.adv-proof__side .facts > div { grid-template-columns: 120px minmax(0, 1fr); }
.adv-proof__side .chapter__links { margin-top: 28px; }

/* ——— 4. Advisers: her words ——— */
.adv-words { padding-top: 0; }
.adv-words__grid { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 2fr); gap: clamp(28px, 5vw, 80px); align-items: start; padding-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--hair); }
.adv-words__h { margin: 10px 0 0; }
.adv-words .quote__note { margin-top: 18px; max-width: 40em; }
.adv-words .ask { margin-top: clamp(48px, 6vw, 80px); }

/* ——— 5. Advisers: the regulator's argument, set large, with the one word marked ——— */
.adv-arg { background: var(--bg-2); border-block: 1px solid var(--hair); position: relative; overflow: hidden; }
.adv-arg::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: linear-gradient(to right, var(--cl-2) 1px, transparent 1px) calc(50% - min(660px, 50% - var(--gut))) 0 / calc(min(1320px, 100% - 2 * var(--gut)) / 12) 100% repeat-x; }
.adv-arg .wrap { position: relative; }
.adv-arg__line { font-size: clamp(40px, 6.3vw, 100px); line-height: 1; letter-spacing: -.048em; padding-bottom: .1em; max-width: 13.5em; }
.adv-arg__word { position: relative; white-space: nowrap; }
.adv-arg__rule { position: absolute; left: -1%; bottom: -.08em; width: 101%; height: .16em; overflow: visible; pointer-events: none; }
.adv-arg__rule path { fill: none; stroke: var(--note-ink); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 1 1.02; stroke-dashoffset: 1; }
.motion .adv-arg__line.in .adv-arg__rule path { stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--ease-io) 1.15s; }
html:not(.js) .adv-arg__rule path, .still .adv-arg__rule path, .lines-on .adv-arg__rule path { stroke-dashoffset: 0; }
.adv-arg__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); margin-top: clamp(40px, 5vw, 64px); padding-top: 28px; border-top: 1px solid var(--fg); max-width: 1080px; }
.adv-arg__grid p { font-size: clamp(18px, 1.3vw, 19.5px); line-height: 1.6; margin: 0; }
.adv-arg__grid p + p { color: var(--fg-2); }

/* ——— 6. Advisers: the five checks ——— */
.adv-checks__p { margin-top: 22px; color: var(--fg-2); font-size: 18px; max-width: 26em; }
.adv-checks .h2 { font-size: clamp(34px, 3.8vw, 56px); }
.adv-checks .checks__end { margin: 30px 0 0; padding-left: 22px; border-left: 2px solid var(--note-ink); font-size: clamp(19px, 1.6vw, 23px); line-height: 1.35; letter-spacing: -.015em; max-width: 30em; }

/* ——— 7. Advisers: what is on the site, with the close-ups ——— */
.adv-built { border-top: 1px solid var(--hair); }
.adv-built__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; margin-top: clamp(48px, 6vw, 80px); }
.adv-built__proof { position: sticky; top: calc(var(--hdr) + 32px); display: grid; gap: clamp(36px, 4vw, 56px); }
.adv-built__proof .detail__cap { font-size: 14px; }
.pieces { border-top: 1px solid var(--fg); }
.pieces li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 20px 0 18px; border-bottom: 1px solid var(--hair); }
.pieces i { display: grid; place-items: center; width: 24px; height: 24px; margin-top: 2px; border-radius: 50%; border: 1px solid var(--label); color: var(--label); font: 400 11.5px/1 var(--mono); font-style: normal; }
.pieces li:nth-child(1) i, .pieces li:nth-child(4) i { background: var(--key-bg); border-color: var(--key-bg); color: var(--key-fg); }
.pieces h3 { font-size: 21px; line-height: 1.25; letter-spacing: -.018em; margin: 0 0 6px; }
.pieces p { margin: 0; color: var(--fg-2); font-size: 16.5px; line-height: 1.55; }

/* ——— 8. Advisers: the clock ——— */
.adv-uk { border-top: 1px solid var(--hair); }
.adv-uk__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.adv-uk__text .h2 { margin-bottom: 30px; }
.adv-uk__text p:not(.eyebrow) { font-size: clamp(18px, 1.3vw, 19.5px); line-height: 1.6; max-width: 32em; }
.adv-uk__clock { padding-top: 8px; }
.adv-uk .zones { margin-top: 0; }
.adv-uk .zones td:first-of-type { font-variant-numeric: tabular-nums; }

/* the studio's hours drawn on each city's day, worked out in the browser for today's date */
.dayline { margin: 26px 0 14px; }
.dayline__scale, .dayline__row { display: grid; grid-template-columns: 112px minmax(0, 1fr) 96px; gap: 14px; align-items: center; }
.dayline__scale { margin-bottom: 6px; }
.dayline__hours { position: relative; height: 14px; font: 400 11.5px/1 var(--mono); color: var(--fg-2); }
.dayline__hours span { position: absolute; top: 0; transform: translateX(-50%); }
.dayline__hours span:first-child { transform: none; }
.dayline__hours span:last-child { transform: translateX(-100%); }
.dayline__row { padding: 7px 0; border-top: 1px solid var(--hair); }
.dayline__row:last-child { border-bottom: 1px solid var(--hair); }
.dayline__city { font-size: 14px; line-height: 1.3; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dayline__t { font-size: 14px; line-height: 1; color: var(--fg-2); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.dayline__row.is-in .dayline__t { color: var(--note); }
.dayline__key { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 12px; font-size: 13.5px; line-height: 1.4; color: var(--fg-2); }
.dayline__k { display: inline-flex; align-items: center; gap: 8px; }
.dayline__k::before { content: ''; width: 18px; height: 10px; flex: none; }
.dayline__k--work::before { background: var(--cl-2); border-block: 1px solid rgba(var(--npb), .55); }
.dayline__k--win::before { height: 8px; background: linear-gradient(to right, var(--note-ink) 50%, var(--fg) 50%); }

.notfor { margin-top: clamp(48px, 6vw, 80px); padding: clamp(22px, 2.6vw, 32px) clamp(22px, 3vw, 40px); border: 1px dashed var(--hair-2); }
.notfor__h { margin: 0 0 16px; font: 400 13px/1.4 var(--mono); color: var(--note); }
.notfor__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px clamp(28px, 4vw, 64px); }
.notfor__grid p { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--fg-2); }
.notfor__grid b { color: var(--fg); }

/* ——— 9. Advisers: the price, below the steps and the scale ——— */
.adv-price .price__grid { margin-top: clamp(56px, 7vw, 96px); }
.adv-price .price__big { margin-top: 0; }

/* ——— 10. Advisers: what I am not. Each one struck through in red, like a proof. ——— */
.adv-not { border-top: 0; }
.nots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(24px, 3.4vw, 56px); margin-top: clamp(40px, 5vw, 64px); }
.nots li { position: relative; padding-top: 22px; border-top: 1px solid var(--fg); }
.nots li::before { content: ''; display: block; width: 18px; height: 18px; margin-bottom: 16px;
  background: linear-gradient(45deg, transparent calc(50% - .9px), var(--note-ink) calc(50% - .9px) calc(50% + .9px), transparent calc(50% + .9px)),
              linear-gradient(-45deg, transparent calc(50% - .9px), var(--note-ink) calc(50% - .9px) calc(50% + .9px), transparent calc(50% + .9px)); }
.nots__h { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.22; letter-spacing: -.02em; margin: 0 0 12px; }
.nots p { color: var(--fg-2); font-size: 16.5px; line-height: 1.55; margin: 0; }

/* ——— 11. Advisers: the close ——— */
.adv-start .close__grid { margin-top: 20px; }
.adv-start__card > p:not(.eyebrow):not(.fine) { color: var(--fg-2); font-size: 16.5px; line-height: 1.55; }
.adv-start__card a { color: var(--fg); }
.adv-start__card .fine { padding-top: 16px; border-top: 1px dashed var(--hair-2); }

/* ——— 12. Documents: terms and privacy ——— */
.doc-head .h1 { max-width: 14em; }
.doc-head__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 30px; }
.doc-head__tools .mono { color: var(--fg-2); }
.doc { padding-top: 8px; }
.doc__body { min-width: 0; }
.toc a { position: relative; transition: color .2s; }
.toc a[aria-current="true"] { color: var(--fg); }
.toc a[aria-current="true"]::before { color: var(--note); }
.toc a::after { content: ''; position: absolute; left: -14px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--note-ink); transform: scale(0); transition: transform .3s var(--ease); }
.toc a[aria-current="true"]::after { transform: scale(1); }
.doc__sec h2 { max-width: 20em; }
.doc__sec .defs { margin-top: 4px; }
.doc__sec > p:not(.doc__n), .doc__sec .stack > p { color: var(--fg); }
.doc__sec .small { font-size: 15px; line-height: 1.6; color: var(--fg-2); }
.doc__sec .defs + p, .doc__sec .defs + .stack { margin-top: 22px; }
.doc__sec strong { font-weight: 500; }
.doc__sec a { text-decoration-color: var(--label); }
.doc__sec a:hover { text-decoration-color: var(--note-ink); }
/* a legal basis or a reference, set like a note on a drawing */
.law { display: block; margin-top: 8px; padding-left: 16px; position: relative; font-size: 14px; line-height: 1.55; color: var(--fg-2); }
.law::before { content: ''; position: absolute; left: 0; top: .75em; width: 9px; height: 1px; background: var(--label); }
/* the short version: a sheet on the film, marked at two corners in red like the introduction panel */
.short { position: relative; margin: 0 0 clamp(40px, 5vw, 64px); padding: clamp(24px, 3vw, 36px) clamp(22px, 3vw, 40px); background: var(--bg-2); border: 1px solid var(--hair); box-shadow: var(--shadow); max-width: 52em; }
.short::before, .short::after { content: ''; position: absolute; width: 14px; height: 14px; border: 1px solid var(--note-ink); }
.short::before { left: -1px; top: -1px; border-width: 1px 0 0 1px; }
.short::after { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; }
.short__h { margin: 0 0 16px; font: 400 13px/1.4 var(--mono); color: var(--label); }
.short ul { counter-reset: s; display: grid; gap: 12px; }
.short li { counter-increment: s; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; font-size: 17px; line-height: 1.55; }
.short li::before { content: counter(s); display: grid; place-items: center; width: 22px; height: 22px; margin-top: 2px; border: 1px solid var(--note-ink); border-radius: 50%; font: 400 11.5px/1 var(--mono); color: var(--note); }
.short b { font-weight: 500; }
/* terms: the payments drawn to scale, and the letterhead */
.doc .scale { margin: 6px 0 28px; max-width: 48em; }
.doc .scale__cap { font-size: 15px; }
.doc .letterhead { max-width: 48em; margin-top: 4px; }
.doc .letterhead__top { grid-template-columns: auto minmax(0, 1fr) auto; }
.doc .letterhead__top .letterhead__name { font-size: 26px; line-height: 1.1; margin: 0; max-width: none; }
.doc .letterhead__top .letterhead__date { grid-column: 3; justify-self: end; margin: 0; font: 400 12.5px/1.4 var(--mono); color: var(--fg-2); max-width: none; }
/* the one paragraph a buyer looks for first, set apart */
.doc .keep { margin: 6px 0 22px; padding: 18px 22px; background: var(--bg-2); border: 1px solid var(--hair); border-left: 2px solid var(--note-ink); max-width: 44em; }
.doc .keep p { margin: 0; font-size: clamp(18px, 1.35vw, 20px); line-height: 1.5; letter-spacing: -.01em; }

/* ——— 13. The 404: the address, proofread; the sheet that was never drawn; the register ——— */
.nf-head { padding-bottom: clamp(32px, 5vw, 64px); }
.nf-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.nf-grid .lede { max-width: 30em; }
/* the address the visitor asked for, struck through, with the likely page written in above it */
.miss { margin: 34px 0 0; max-width: 36em; }
.miss__l { margin: 0 0 10px; font: 400 12.5px/1.4 var(--mono); color: var(--label); }
.miss__proof { display: inline-flex; flex-direction: column; align-items: flex-start; margin: 0; max-width: 100%; }
/* the address written in above is set in mono, in red, so "/#price" can never read as "l#price";
   the hand is kept for the caret and the note */
.miss__fix { order: -2; margin: 0 0 2px 4px; font: 400 clamp(19px, 1.8vw, 24px)/1.2 var(--mono); letter-spacing: -.01em; color: var(--note); text-decoration: none; }
.miss__fix:hover, .miss__fix:focus-visible { text-decoration: underline; text-decoration-color: var(--note-ink); text-underline-offset: .15em; }
.miss__caret { order: -1; width: 18px; height: 12px; margin: 2px 0 2px 10px; fill: none; stroke: var(--note-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.miss__path { font: 400 clamp(17px, 1.6vw, 21px)/1.3 var(--mono); color: var(--fg-2); overflow-wrap: anywhere; }
.miss__path s { text-decoration: none; background: linear-gradient(var(--note-ink), var(--note-ink)) 0 55% / 100% 2px no-repeat; }
.motion .miss__path s { background-size: 0 2px; animation: strike .7s var(--ease-io) .5s forwards; }
@keyframes strike { to { background-size: 100% 2px; } }
.motion .miss__fix:not([hidden]), .motion .miss__caret:not([hidden]) { opacity: 0; animation: nf-show .4s linear 1.2s forwards; }
.miss__none { margin: 12px 0 0; color: var(--fg-2); font-size: 16.5px; }
/* the sheet */
.nf { position: relative; margin: 0; }
.nf__sheet { position: relative; aspect-ratio: 4 / 3; background: var(--bg-2); border: 1px solid var(--hair-2); box-shadow: var(--shadow); overflow: hidden; }
.nf__sheet::before { content: ''; position: absolute; inset: 14px; border: 1px solid var(--fg); pointer-events: none; }
.nf__grid { position: absolute; inset: 14px; opacity: .8;
  background: linear-gradient(to right, var(--cl-2) 1px, transparent 1px) 0 0 / 8.333% 100%, linear-gradient(to bottom, var(--cl-2) 1px, transparent 1px) 0 0 / 100% 12.5%; }
.nf__num { position: absolute; left: 10%; right: 10%; top: 18%; margin: 0; text-align: center; container-type: inline-size; }
.nf__num span { display: inline-block; font-size: 39cqw; line-height: 1; letter-spacing: -.07em; color: transparent; -webkit-text-stroke: 1.25px var(--label); }
.nf__num::before { content: ''; position: absolute; left: -6%; right: -6%; top: 0; height: 1em; font-size: 39cqw; pointer-events: none;
  background:
    linear-gradient(to bottom, transparent calc(.86em - 1px), var(--cl) calc(.86em - 1px) .86em, transparent .86em),
    linear-gradient(to bottom, transparent calc(.14em - 1px), var(--cl-2) calc(.14em - 1px) .14em, transparent .14em),
    linear-gradient(to bottom, transparent calc(.35em - 1px), var(--cl-2) calc(.35em - 1px) .35em, transparent .35em); }
.nf__pen { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.nf__pen .mk { opacity: 1; }
.nf__pen .mk__loop, .nf__pen .mk__arrow { stroke-width: 2; stroke-dashoffset: 0; }
.nf__pen .mk__note { font-size: 19px; }
.motion .nf__num span { clip-path: inset(0 100% 0 0); animation: nf-draw 1.4s var(--ease-io) .2s forwards; }
@keyframes nf-draw { to { clip-path: inset(0 0 0 0); } }
.motion .nf__pen .mk__loop { stroke-dashoffset: 1; animation: nf-pen .9s var(--ease-io) 1.5s forwards; }
.motion .nf__pen .mk__arrow { stroke-dashoffset: 1; animation: nf-pen .5s var(--ease-io) 2.2s forwards; }
.motion .nf__pen .mk__head, .motion .nf__pen .mk__note { opacity: 0; animation: nf-show .3s linear 2.6s forwards; }
.nf__pen .mk__head { opacity: 1; }
@keyframes nf-pen { to { stroke-dashoffset: 0; } }
@keyframes nf-show { to { opacity: 1; } }
.nf__tb { position: absolute; right: 14px; bottom: 14px; display: grid; grid-template-columns: auto auto; border-top: 1px solid var(--fg); border-left: 1px solid var(--fg); background: var(--bg-2); font: 400 11.5px/1.3 var(--mono); }
.nf__tb span { padding: 6px 10px; border-right: 1px solid var(--hair-2); border-bottom: 1px solid var(--hair-2); }
.nf__tb span:nth-child(odd) { color: var(--label); }
.nf__tb span:nth-child(-n+2) { border-top: 0; }
.nf__cap { margin-top: 14px; font: 400 12.5px/1.5 var(--mono); color: var(--fg-2); }
/* the register: every page on the site, like the list of sheets in a set of drawings */
.register { padding-bottom: var(--sec); }
.register__h { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; letter-spacing: -.03em; margin: 0 0 22px; }
.lost { max-width: none; }
.lost a { grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1fr) 232px; gap: 18px; align-items: baseline; }
.lost .register__p { text-align: right; }
.lost .register__n { font: 400 12.5px/1 var(--mono); color: var(--label); letter-spacing: 0; }
.lost .register__t { min-width: 0; }
.lost .register__d { font: 400 15px/1.45 var(--sans); color: var(--fg-2); letter-spacing: 0; }
.lost .register__p { font: 400 12.5px/1.4 var(--mono); color: var(--fg-2); letter-spacing: 0; white-space: nowrap; }
.lost a:hover .register__p { color: var(--note); }
.lost a.is-likely { background: linear-gradient(90deg, color-mix(in srgb, var(--note-ink) 9%, transparent), transparent 70%); }
.register__note { margin: 26px 0 0; color: var(--fg-2); font-size: 16.5px; max-width: 44em; }

/* ——— 14. By width ——— */
@media (max-width: 1099px) {
  .adv-proof__grid, .adv-built__grid, .adv-uk__grid { grid-template-columns: minmax(0, 1fr); }
  .adv-built__proof { position: static; max-width: 640px; }
  .adv-words__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .nots { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
  .nf-grid { grid-template-columns: minmax(0, 1fr); }
  .nf { max-width: 560px; }
  .lost a { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .lost .register__p { text-align: left; }
  .lost .register__d { grid-column: 2 / -1; grid-row: 2; }
}
@media (max-width: 899px) {
  .adv-top .hero__copy > .eyebrow { order: 0; }
  .adv-top .hero__grid > .callout { order: 6; }
  .adv-top .stage--hero { margin-top: 36px !important; }
}
@media (max-width: 767px) {
  .adv-top .h1 { font-size: clamp(34px, 9.4vw, 46px); }
  .adv-top .callout { grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 16px; }
  .adv-top .tblock__cell:nth-child(3) .tblock__s { display: none; }
  .adv-arg__line { font-size: clamp(36px, 10.4vw, 52px); }
  .adv-arg__grid { grid-template-columns: minmax(0, 1fr); }
  .adv-proof__side .facts > div { grid-template-columns: 96px minmax(0, 1fr); }
  .notfor__grid { grid-template-columns: minmax(0, 1fr); }
  .dayline__scale, .dayline__row { grid-template-columns: 70px minmax(0, 1fr) 76px; gap: 8px; }
  .dayline__t { font-size: 11px; }
  .dayline__city { font-size: 11.5px; }
  .lost a { grid-template-columns: 30px minmax(0, 1fr); gap: 4px 12px; }
  .lost .register__p { grid-column: 2; grid-row: 3; }
  .lost .register__d { grid-column: 2; }
  .nf__tb { font-size: 10.5px; }
  .nf__tb span { padding: 4px 7px; }
  .doc-head__tools .btn { flex: 0 0 auto; }
  .doc .letterhead__top { grid-template-columns: auto minmax(0, 1fr); }
  .doc .letterhead__top .letterhead__date { grid-column: 1 / -1; justify-self: start; margin-top: 10px; }
  .doc .toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .doc .toc a { grid-template-columns: 26px minmax(0, 1fr); font-size: 14.5px; }
}

/* ——— 15. Print: the terms and the privacy notice come out as a clean document ——— */
@media print {
  @page { margin: 18mm 16mm; }
  html, body { background: #fff !important; color: #000 !important; }
  body { font-size: 11pt; }
  .toc, .doc-head__tools, .strip, .wordmark, .ftr__grid, .ftr__tb, .dock, .skip, .ftr__lines, .menu, .nav, .hdr__book { display: none !important; }
  .doc { display: block; padding: 0; }
  .page-head { padding: 0 0 12pt; }
  .h1, .doc__sec h2 { color: #000; }
  .ink { clip-path: none !important; animation: none !important; }
  .lined::before { display: none; }
  .doc__sec { break-inside: auto; padding: 14pt 0 4pt; }
  .doc__sec h2, .doc__n { break-after: avoid; }
  .defs > div { break-inside: avoid; }
  .short, .letterhead { box-shadow: none; background: #fff; }
  .scale__bar i::before { --f: 1 !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .ftr { background: #fff !important; color: #000 !important; padding: 12pt 0 0; --fg: #000; --fg-2: #333; }
  .ftr__legal { color: #333 !important; border-top: 1px solid #999; padding-top: 8pt; }
  a { color: #000 !important; }
}

/* ——— 18b. The hotel case study (/work-the-grand-ambassador) ———
   Page parts, all prefixed .gac-. Merged 25 Sep 2026 from ga-case.css (copy kept in 3-business/quietlybuild/redesign-2026-09-24/_merged-parts/css/). */
/* the head: the line on the left, the lede beside it, the sheet's title block under both */
.gac-head { padding: clamp(28px, 4vw, 56px) 0 clamp(8px, 1.4vw, 20px); }
.gac-head .back { margin-bottom: 22px; }
.gac-head__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px clamp(40px, 5vw, 88px); align-items: end; }
.gac-head .lede { margin: 0; max-width: 30em; padding-bottom: .35em; }
.gac-tb a { text-decoration-color: var(--fg-2); overflow-wrap: anywhere; }
.gac-tb__live { display: flex; align-items: center; gap: 8px; }
@media (min-width: 400px) { .gac-tb__live a { white-space: nowrap; } }
.gac-tb__live .live__dot { flex: none; }

/* the film at the top, with the QR code beside it for a laptop visitor */
.gac-stage { margin-top: clamp(-40px, -2.8vw, 0px); }
.gac-stage__grid { display: grid; grid-template-columns: minmax(0, 1fr) 176px; gap: clamp(24px, 3vw, 44px); align-items: end; }
.gac-stage .stage--laptop { max-width: none; }
.gac-stage__side { padding-bottom: 76px; }
.gac-stage__side .qr { grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; padding-top: 0; border-top: 0; }
.gac-rec { flex: 1 1 260px; font-size: 14.5px; line-height: 1.45; color: var(--fg-2); }

/* the 130 metres, drawn as a dimension */
.gac-dim { display: grid; grid-template-columns: auto minmax(90px, 1fr) auto; align-items: end; gap: 14px; margin: 34px 0 36px; max-width: 680px; font: 400 12.5px/1.3 var(--mono); color: var(--fg-2); }
.gac-dim__end { padding-bottom: 1px; white-space: nowrap; }
.gac-dim__line { position: relative; height: 40px; }
/* ::before is the line and its far tick, drawn from the hotel's end; ::after is the near tick */
.gac-dim__line::before { content: ''; position: absolute; left: 0; right: 0; bottom: 1px; height: 13px; transform-origin: 0 50%;
  background: linear-gradient(var(--label), var(--label)) 0 6px / 100% 1px no-repeat, linear-gradient(var(--label), var(--label)) 100% 0 / 1px 100% no-repeat; }
.gac-dim__line::after { content: ''; position: absolute; left: 0; bottom: 1px; width: 1px; height: 13px; background: var(--label); }
.gac-dim__v { position: absolute; left: 50%; bottom: 15px; transform: translateX(-50%); white-space: nowrap; color: var(--label); }
@keyframes gac-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@supports (animation-timeline: view()) {
  .motion .gac-dim__line::before { animation: gac-draw linear both; animation-timeline: view(); animation-range: entry 30% cover 42%; }
}

.gac-part { padding-block: clamp(56px, 7.5vw, 112px); }
.gac-nw { white-space: nowrap; }

/* 02: the phone page, from lines to live (the chapter-one machinery, on the phone stage) */
.gac-build.gac-part { padding-bottom: 0; }
.gac-build > .part__grid { margin-bottom: clamp(28px, 4vw, 56px); }
.gac-build .prose > p { color: var(--fg-2); }
.gac-build__ch { border-top: 0; }
.gac-pb { width: min(100%, 520px); margin-inline: auto; }
.gac-pb .stage__cap { justify-content: flex-start; }
.drawing--phone .dw__scan { transform: translateY(calc(20px + var(--db, 1) * 1238px)); }
.drawing--phone .dw__label { font-size: 23px; }
.drawing--phone .dw__key text { font-size: 25px; }
.drawing--phone .dw__lead { fill: none; stroke: var(--note-ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
/* a phone page being drawn (here, and chapter one of the home page on a phone) */
.build-on .stage__box--phone .screen__still { clip-path: inset(0 0 calc((1 - var(--db, 1)) * 100%) 0); }
.build-on .stage__box--phone .device--phone { transition: background-color .6s var(--ease-io), box-shadow .8s var(--ease-io); }
.build-on:not(.is-live) .stage__box--phone .device--phone { background: transparent; box-shadow: none; }
.build-on:not(.is-live) .stage__box--phone .device--phone .screen { background: transparent; }
/* still (no script, reduced motion, Save-Data): the finished phone with its first notes, as on the home page */

/* 03: the decisions */
.gac-dec__head { margin-bottom: clamp(24px, 4vw, 48px); }
.gac-dec__head .h2 { margin-bottom: 0; }
.decision .detail__note { margin-top: 16px; color: var(--note); font-size: clamp(19px, 1.6vw, 23px); line-height: 1.3; }
.decision .detail__cap { color: var(--fg-2); font-size: 14px; line-height: 1.5; }
.pen--detail .mk__arrow { stroke-width: 2.2; }
.gac-far .detail__img { max-width: 520px; }
.gac-pen-p { display: none; }

/* 01: the Enquire button, and the message it writes */
.gac-enq__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(18px, 2.4vw, 32px); align-items: center; }
.decision .gac-msg__l { margin: 0 0 12px; font: 400 12.5px/1.4 var(--mono); color: var(--label); }
.decision .gac-msg__to { margin: 12px 0 0; color: var(--fg-2); }
.gac-msg__b { position: relative; padding: 16px 18px 16px; background: var(--bg-2); border: 1px solid var(--hair-2); border-radius: 16px 16px 16px 4px; box-shadow: var(--shadow); }
.gac-msg__b::before { content: ''; position: absolute; left: -7px; top: calc(50% - 6px); width: 12px; height: 12px; background: var(--bg-2); border: solid var(--hair-2); border-width: 0 0 1px 1px; transform: rotate(45deg); }
.decision .gac-msg__b p { margin: 0 0 .8em; font-size: 16.5px; line-height: 1.5; color: var(--fg); }
.decision .gac-msg__b p:last-child { margin: 0; }
.gac-blank { display: inline-block; width: 6.5em; border-bottom: 1.5px dashed var(--label); vertical-align: -.15em; }

/* 03: the four distances */
.gac-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 4px 0 24px; border-top: 1px solid var(--fg); border-bottom: 1px solid var(--hair); }
.gac-figs > div { padding: 12px 12px 14px; border-left: 1px solid var(--hair-2); min-width: 0; }
.gac-figs > div:first-child { border-left: 0; padding-left: 0; }
.gac-figs dt { min-height: 2.8em; font: 400 12px/1.4 var(--mono); color: var(--label); }
.gac-figs dd { margin-top: 6px; font-size: clamp(26px, 2.3vw, 34px); line-height: 1.05; letter-spacing: -.035em; }
.gac-figs__far dd { color: var(--note); }

/* 04: two phones, the same bar */
.gac-bars__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3.4vw, 44px); max-width: 540px; margin-inline: auto; }
.gac-mini__bezel { padding: 3.4%; background: var(--device); border-radius: 14% / 6.6%; box-shadow: var(--shadow); }
.gac-mini .detail__img img { border-radius: 11% / 5.1%; box-shadow: none; }
.decision .gac-mini__l { margin: 14px 0 0; font: 400 12.5px/1.4 var(--mono); color: var(--fg-2); text-align: center; }
.gac-bars .detail__note, .gac-bars .detail__cap { text-align: center; }

/* 05: the drawing register: every page, and the line it opens on */
.gac-reg__sheet { background: var(--bg-2); border: 1px solid var(--fg); box-shadow: var(--shadow); }
.decision .gac-reg__h { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 11px 16px; border-bottom: 1px solid var(--fg); font: 400 12.5px/1.4 var(--mono); color: var(--label); }
.gac-reg__list li + li { border-top: 1px solid var(--hair); }
.gac-reg__list a { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 8px 16px; text-decoration: none; transition: background-color .2s; }
.gac-reg__n { font: 400 12px/1 var(--mono); color: var(--label); }
.gac-reg__t { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 12px; align-items: baseline; font-size: 15.5px; line-height: 1.35; }
.gac-reg__t small { font-size: 14px; color: var(--fg-2); }
.gac-reg__p { font: 400 12px/1 var(--mono); color: var(--fg-2); }
.gac-reg__list a:hover { background: var(--bg); }
.gac-reg__list a:hover .gac-reg__t { color: var(--note); }
.gac-reg__list a:hover .gac-reg__t small { color: var(--fg-2); }

/* 04 and 05 side by side */
.gac-after__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px clamp(40px, 6vw, 112px); align-items: start; }
.gac-after .part__label { margin: 0 0 22px; }
.gac-after .pull { margin-top: 0; }
.gac-after .ticks { border-top: 1px solid var(--fg); max-width: 36em; }

/* 06: his words */
.gac-words h2.part__label { font-weight: 400; }
.gac-words .quote__note { margin-top: 18px; max-width: 40em; }

/* the close */
.gac-close .cta-card { padding: 0; align-items: end; }
.gac-close .sec__sub { max-width: 32em; }
.gac-close .ps { max-width: 32em; }
.gac-next span { min-width: 0; }

@media (min-width: 1100px) {
  .gac-tb.sheet-tb--row { grid-template-columns: 92px minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important; }
}
@media (min-width: 1100px) and (min-height: 600px) {
  .gac-build__ch .chapter__in { grid-template-columns: minmax(0, 1fr) minmax(0, 430px); }
  .gac-pb { width: min(100%, calc((100vh - var(--hdr) - 3vh - 124px) * 1000 / 1272)); }
}
@media (max-width: 1099px) {
  .gac-head__grid { grid-template-columns: minmax(0, 1fr); }
  .gac-head .lede { margin-top: 10px; max-width: 38em; }
  .gac-stage__grid { grid-template-columns: minmax(0, 1fr); }
  .gac-stage__side { padding-bottom: 0; }
  .gac-stage__side .qr { grid-template-columns: 111px minmax(0, 1fr); max-width: 30em; }
  .gac-after__grid { grid-template-columns: minmax(0, 1fr); }
  .gac-build__ch .chapter__stage { width: 100%; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .gac-tb.sheet-tb--row { grid-template-columns: 92px minmax(0, 1fr) minmax(0, 1fr) !important; }
  .gac-tb.sheet-tb--row > div:nth-child(n+4) { border-top: 1px solid var(--hair-2) !important; }
  .gac-tb.sheet-tb--row > div:nth-child(4) { grid-column: 1 / 3 !important; border-left: 0; }
}
@media (max-width: 767px) {
  /* the top film: the laptop, cropped to its screen, with the notes read out under it */
  .gac-tb .sheet-tb__n { font-size: 18px; }
  .gac-tb > div:first-child { padding-inline: 10px; }
  .gac-stage { margin-top: 20px; }
  .gac-stage .stage { overflow: clip; }
  .gac-stage .stage--laptop .stage__box--laptop { display: block; width: 125%; margin: -7.6% 0 -16.4%; }
  .gac-stage .device--aside, .gac-stage .pen--laptop :is(.mk__note, .mk__arrow, .mk__head) { display: none; }
  .gac-stage .stage__cue { display: block; min-height: 2.7em; margin: 12px 0 0; font: 400 20px/1.3 var(--hand); color: var(--note); }
  .gac-dim { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 12px; }
  .gac-dim__end:first-child { grid-column: 1; grid-row: 1; }
  .gac-dim__end:last-child { grid-column: 2; grid-row: 1; text-align: right; }
  .gac-dim__line { grid-column: 1 / -1; grid-row: 2; }
  .drawing--phone .dw__label { display: none; }
  .gac-pen-d { display: none; }
  .gac-pen-p { display: block; }
  .gac-enq__grid { grid-template-columns: minmax(0, 1fr); }
  .gac-enq__card { max-width: 340px; }
  .gac-msg__b::before { left: 28px; top: -7px; border-width: 1px 0 0 1px; }
  .gac-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gac-figs > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .gac-figs > div:nth-child(n+3) { border-top: 1px solid var(--hair); }
  .gac-reg__list a { grid-template-columns: 24px minmax(0, 1fr); padding: 9px 12px; }
  .gac-reg__t { grid-template-columns: minmax(0, 1fr); gap: 1px; }
  .gac-reg__p { display: none; }
}

/* ——— 18c. The NZ case study (/work-nz-visa-immigration) ———
   Scoped to main.cs-nz. The drawing and notes come from tools/next/marks_nz_case.py.
   Merged 25 Sep 2026 from nzcase.css (copy kept in 3-business/quietlybuild/redesign-2026-09-24/_merged-parts/css/). */
/* the page head: the line and the lede, with the sheet's title block in the corner, aligned over
   the column the steps run down. It sits close to the drawing, so the frame starts inside the
   first screen. */
.cs-nz .page-head { padding: clamp(32px, 4.5vw, 64px) 0 clamp(28px, 3.4vw, 44px); }
@media (min-width: 1100px) and (min-height: 600px) {
  .cs-nz__head { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: clamp(40px, 4vw, 64px); align-items: end; }
  .cs-nz__head .sheet-tb { margin-top: 0; }
  .cs-nz__head .sheet-tb__client p { font-size: 21px; line-height: 1.15; letter-spacing: -.02em; }
}
.cs-nz .page-head .sheet-tb__l .live { font-size: 12.5px; color: var(--label); }
.cs-nz .page-head .sheet-tb p a { font: 400 14.5px/1.4 var(--mono); }

/* the build chapter: its heading and story read before the drawing on every screen */
.cs-nz .cs-nz__film { border-top: 1px solid var(--hair); }
.cs-nz__bh { margin-bottom: 4px; }
.cs-nz .cs-nz__film .chapter__story { font-size: clamp(18px, 1.45vw, 21px); color: var(--fg-2); }
@media (max-width: 1099px), (max-height: 599px) {
  .cs-nz .chapter__text > .cs-nz__bh, .cs-nz .chapter__text > .chapter__story { order: 1; }
  .cs-nz .chapter__text > .chapter__story { margin-top: 12px; }
}
/* the check her clients can make: the number, whose register it is, and the register itself */
.nz-check { position: relative; padding: 20px 22px 22px; background: var(--bg-2); border: 1px solid var(--hair); }
.nz-check::before, .nz-check::after { content: ''; position: absolute; width: 14px; height: 14px; border: 1px solid var(--note-ink); }
.nz-check::before { left: -1px; top: -1px; border-width: 1px 0 0 1px; }
.nz-check::after { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; }
.nz-check__l { margin: 0 0 12px; font: 400 12.5px/1.4 var(--mono); color: var(--label); }
.nz-check__steps { display: grid; gap: 12px; margin: 0 0 18px; }
.nz-check__steps li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; font-size: 16px; line-height: 1.5; }
.nz-check__n { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border: 1px solid var(--note-ink); border-radius: 50%; font: 400 11.5px/1 var(--mono); color: var(--note); }
.nz-check__v { display: block; width: max-content; max-width: 100%; margin-top: 8px; padding: 6px 10px; border: 1px solid var(--fg); font: 400 14px/1.3 var(--mono); letter-spacing: .01em; }

/* the close-ups: the loops keep one weight at any size */
.cs-nz .pen--detail .mk__loop { vector-effect: non-scaling-stroke; stroke-width: 2.2px; }
.cs-nz .pen--detail .mk__under { stroke-width: 2px; }
.cs-nz .decision__body > p:not(.decision__n) { max-width: 34em; }

/* 03 · What went live: the phone film beside the list */
.cs-nz__live { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); grid-template-areas: "fig head" "fig body"; gap: 0 clamp(40px, 6vw, 96px); align-items: start; }
.cs-nz__livehead { grid-area: head; }
.cs-nz__livehead .h2 { margin-bottom: 28px; }
.cs-nz__phone { grid-area: fig; width: 100%; max-width: 520px; }
.cs-nz__livebody { grid-area: body; max-width: 40em; }
.cs-nz__livebody .ticks li { font-size: 17px; }
.cs-nz__small { margin: 18px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--fg-2); max-width: 36em; }
@media (min-width: 1100px) and (min-height: 600px) {
  .cs-nz__phone { position: sticky; top: calc(var(--hdr) + 24px); }
}
@media (max-width: 899px) {
  .cs-nz__live { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "fig" "body"; }
  .cs-nz__phone { max-width: 460px; margin: 0 0 32px; }
}

/* 05 · Her words */
.cs-nz .quote--big blockquote p:first-child { text-indent: -.42em; }
.cs-nz__note { margin-top: 22px; }
.cs-nz .ask { margin-top: clamp(48px, 7vw, 88px); }

/* the close */
.cs-nz .cta-card { padding: 0; align-items: end; }
.cs-nz .cta-card .ps { margin-top: 32px; }
.cs-nz .nextprev small { color: var(--label); }
.cs-nz .nextprev a > span { min-width: 0; }
.cs-nz .nextprev .arr { color: var(--note-ink); }
.cs-nz__rec { flex: 1 0 100%; font: 400 12.5px/1.5 var(--mono); color: var(--fg-2); }
@media (max-width: 767px) {
  .cs-nz__head .sheet-tb__n { font-size: 19px; }
}
@media (min-width: 1100px) and (min-height: 600px) {
  .cs-nz .cs-nz__film { padding-top: 36px; }
}
/* On a phone, four of the close-ups are cut down to the words they mark, so each marked phrase
   reads at 12 px or more. Each box has the cut's proportions; the whole still and its loops sit
   inside it at the same scale and offset (numbers in the still's own 1x pixels: x, y, w, h).
     pathfinder 40 268 392 250 · visas 14 14 364 516 · steps 12 14 428 158
   The disclaimer (02) is shown instead as its two marked lines, one strip each, magnified:
     a 120 29 211 30 · b 331 29 212 30 · c 18 52 121 28 (in a sheet as wide as strip a) */
.nz-snip { display: none; }
@media (max-width: 599px) {
  .cs-nz .nzc { position: relative; overflow: hidden; border-radius: 6px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 18%, transparent), var(--shadow); }
  .cs-nz .nzc picture, .cs-nz .nzc .pen, .nz-snip__row picture, .nz-snip__row .pen { position: absolute; inset: auto; max-width: none; height: auto; }
  .cs-nz .nzc img, .nz-snip__row img { width: 100%; border-radius: 0; box-shadow: none; }
  .nzc--steps { -webkit-mask: linear-gradient(to right, #000 86%, transparent); mask: linear-gradient(to right, #000 86%, transparent); }
  /* the path finder: the answer, the button, and the whole 'not immigration advice' sentence in the lower third, unfaded */
  .nzc--pathfinder { aspect-ratio: 392 / 250; -webkit-mask: linear-gradient(to right, #000 95%, transparent); mask: linear-gradient(to right, #000 95%, transparent); }
  .cs-nz .nzc--pathfinder :is(picture, .pen) { width: 231.63%; left: -10.204%; top: -107.2%; }
  .nzc--pathfinder .pen { aspect-ratio: 908 / 566; }
  .nzc--visas { aspect-ratio: 364 / 516; }
  .cs-nz .nzc--visas :is(picture, .pen) { width: 307.69%; left: -3.846%; top: -2.713%; }
  .nzc--visas .pen { aspect-ratio: 1120 / 544; }
  .nzc--steps { aspect-ratio: 428 / 158; }
  .cs-nz .nzc--steps :is(picture, .pen) { width: 212.15%; left: -2.804%; top: -8.861%; }
  .nzc--steps .pen { aspect-ratio: 908 / 450; }
  .nz-snip__whole { display: none; }
  .nz-snip { display: grid; width: min(100%, 300px); padding: 14px 16px 16px; background: #031D36; border-radius: 6px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 18%, transparent), var(--shadow); }
  .nz-snip__row { position: relative; overflow: hidden; }
  .nz-snip__row .pen { z-index: 2; aspect-ratio: 564 / 116; }
  /* the tips of the next line's tall letters, at each strip's foot, are painted out (the marks stay on top) */
  .nz-snip__row::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 4px; background: #031D36; }
  .nz-snip__row--a { aspect-ratio: 211 / 30; }
  .nz-snip__row--a :is(picture, .pen) { width: 267.30%; left: -56.87%; top: -96.67%; }
  .nz-snip__row--b { width: 100.47%; aspect-ratio: 212 / 30; }
  .nz-snip__row--b :is(picture, .pen) { width: 266.04%; left: -156.13%; top: -96.67%; }
  .nz-snip__row--c { width: 57.35%; aspect-ratio: 121 / 28; }
  .nz-snip__row--c :is(picture, .pen) { width: 466.12%; left: -14.88%; top: -185.71%; }
}

/* ——— 18d. The GrowMint case study (/work-growmint-media) ———
   Prefixed gmc- (and .live--soon). The crop rules between gmc-crops:begin and gmc-crops:end are
   written by tools/next/marks-growmint-case.py: keep the two comments, and run the script again
   after the films are re-recorded. Merged 25 Sep 2026 from work-growmint.css (copy kept in 3-business/quietlybuild/redesign-2026-09-24/_merged-parts/css/). */
/* "Going live soon" and "Live now" follow the one GrowMint switch (search "the one switch"). */

/* From lines to live, on a case study: the section head above the pinned chapter */
.gmc-build { position: relative; overflow-x: clip; padding-top: clamp(16px, 3vw, 40px); }
.gmc-build .work__head { margin-bottom: clamp(36px, 5vw, 64px); }
.gmc-build .chapter__links { margin-top: 36px; }
.gmc-first { display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid var(--hair); }
.gmc-first li { position: relative; padding-left: 24px; font-size: 16.5px; line-height: 1.5; color: var(--fg-2); }
.gmc-first li::before { content: ''; position: absolute; left: 2px; top: .8em; width: 11px; height: 2px; background: var(--note-ink); }

/* A close-up cut from a whole still in CSS: the box has the crop's proportions, the still is
   placed inside it at its own scale, and the loops are drawn in the still's own pixels
   (the svg's viewBox is the crop), so they land on the thing at any size. */
.detail__img.gmc-crop { position: relative; overflow: hidden; border-radius: 6px; background: var(--bg-2);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 18%, transparent), var(--shadow); }
.detail__img.gmc-crop img { position: absolute; max-width: none; height: auto; border-radius: 0; box-shadow: none; }
.gmc-crop .pen { position: absolute; inset: 0; width: 100%; height: 100%; }
.gmc-crop .mk__loop { stroke-linecap: round; }

/* the pair labels: ".decision p" (grey, 17.5px) would otherwise outrank the class */
.decision p.gmc-pair__l { margin: 0 0 8px; font: 400 12.5px/1.4 var(--mono); color: var(--label); }

/* two close-ups side by side: the price board outside India and in India */
.gmc-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.gmc-pair__l { margin: 0 0 8px; font: 400 12.5px/1.4 var(--mono); color: var(--label); }

/* The page head: the words, and the site playing on a phone beside them (as on the home page) */
.gmc-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: clamp(32px, 5vw, 80px); align-items: start; }
.gmc-phone { width: 100%; max-width: 380px; justify-self: end; }
.gmc-phone .stage__cap { align-items: flex-start; flex-wrap: nowrap; margin-top: 14px; }

/* 03 · What went live: two phone screens beside the list */
.gmc-live { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.gmc-live .h2 { font-size: clamp(30px, 3.6vw, 52px); max-width: 15em; margin-bottom: 28px; }
.gmc-live .ticks { max-width: 40em; }
.gmc-live .ticks li { font-size: 17px; }
.gmc-live__small { margin: 22px 0 0; max-width: 40em; font-size: 15px; color: var(--fg-2); }
.gmc-shots { position: sticky; top: calc(var(--hdr) + 24px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.gmc-shot { margin: 0; }
.gmc-shot__dev { position: relative; aspect-ratio: 390 / 844; padding: 3.2%; border-radius: 13% / 6%; background: var(--device); box-shadow: var(--shadow); }
.gmc-shot__dev .screen { border-radius: 10% / 4.6%; }
.gmc-shot .detail__cap { margin-top: 12px; }

/* 05 · Their words */
.gmc-words .quote__note { max-width: 46em; margin-top: 18px; }
.gmc-words .quote__note + .quote__note { margin-top: 8px; }

/* the close: the card sits on the page's own grid, not inset from it */
.gmc-close .cta-card { padding: 0; }
.gmc-close .cta { margin-top: 28px; }
.gmc-close .lede { color: var(--fg-2); max-width: 30em; margin-top: 20px; }

@media (max-width: 1099px) {
  .gmc-live { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
}
@media (max-width: 899px) {
  .gmc-head { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .gmc-phone { justify-self: start; max-width: 440px; margin-top: 36px; }
  .gmc-live { grid-template-columns: minmax(0, 1fr); }
  .gmc-shots { position: static; max-width: 440px; order: 2; }
}
@media (max-width: 520px) {
  .gmc-pair { grid-template-columns: minmax(0, 1fr); }
}
.still .gmc-shots { position: static; }

/* gmc-crops:begin (written by marks-growmint-case.py: do not edit by hand) */
.gmc-crop--work { aspect-ratio: 484 / 432; }
.gmc-crop.gmc-crop--work img { width: 297.5207%; left: -178.9256%; top: -67.5926%; }
.gmc-crop--work .mk__loop { stroke-width: 1.94; }
.gmc-crop--scope { aspect-ratio: 690 / 370; }
.gmc-crop.gmc-crop--scope img { width: 208.6957%; left: -14.4928%; top: -69.1892%; }
.gmc-crop--scope .mk__loop { stroke-width: 2.76; }
.gmc-crop--usd { aspect-ratio: 480 / 300; }
.gmc-crop.gmc-crop--usd img { width: 113.3333%; left: -6.6667%; top: -14.6667%; }
.gmc-crop--usd .mk__loop { stroke-width: 3.60; }
.gmc-crop--inr { aspect-ratio: 480 / 300; }
.gmc-crop.gmc-crop--inr img { width: 113.3333%; left: -6.6667%; top: -14.6667%; }
.gmc-crop--inr .mk__loop { stroke-width: 3.60; }
.gmc-crop--wa { aspect-ratio: 440 / 222; }
.gmc-crop.gmc-crop--wa img { width: 327.2727%; left: -20.9091%; top: -230.6306%; }
.gmc-crop--wa .mk__loop { stroke-width: 1.76; }
.gmc-crop--trade { aspect-ratio: 620 / 356; }
.gmc-crop.gmc-crop--trade img { width: 232.2581%; left: -13.5484%; top: -37.6404%; }
.gmc-crop--trade .mk__loop { stroke-width: 2.48; }
.gmc-crop--paper { aspect-ratio: 390 / 270; }
.gmc-crop.gmc-crop--paper img { width: 369.2308%; left: -129.4872%; top: -140.0000%; }
.gmc-crop--paper .mk__loop { stroke-width: 1.56; }
/* gmc-crops:end */


/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   21. Merged on 25 September 2026 (the sell build's integration): the three parts the page builders
   wrote beside qb.css while they worked, appended in this order so every page keeps exactly the
   cascade it had: 21a the case studies (was _css-parts/cases.css), 21b the trade pages and the notes
   (was _css-parts/trades.css), 21c the terms, the privacy notice, the specimens and the worked review
   (was _css-parts/legal.css). Copies of the parts as they were: 3-business/quietlybuild/
   redesign-2026-09-24/_merged-parts/sell/css/.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ——— 21a. (was cases.css) ——— */
/* ——— 18e. The three case studies, 5th edition (/work-nz-visa-immigration, /work-the-grand-ambassador,
   /work-growmint-media) ———
   Written 25 Sep 2026 by the case-study builder, to design plan §5 (C1–C8) and the owner's decisions of
   24–25 September. Scoped to main.case (.case--nz, .case--ga, .case--gm). It sits after 18b–18d, which
   still style the close-ups each page keeps (.gac-*, .nz-check, .nzc, .nz-snip, .gmc-crop, .gmc-shot).
   The template, in order: the page head (the line, "At a glance", the jump index, and the site playing
   beside them: on a phone for NZ and the sister studio, on a laptop for the hotel, whose phone page is
   drawn further down); the film on a laptop (NZ, the sister studio; left out on a phone, which met the
   phone film first); the situation; the decisions and the call band; what went live beside what I
   would change; their words and the introduction (the hotel and NZ only); the close on a sheet, with
   the next case studies in the order NZ, the hotel, the sister studio. */

/* the page head */
.case .case-head { padding: clamp(20px, 3vw, 44px) 0 0; }
.case-head__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.case-head .back { margin-bottom: 20px; }
.case-head .eyebrow { margin-bottom: 14px; }
.case-head .h1--page { max-width: 14em; }
.case-head .lede { margin: 20px 0 0; max-width: 37em; color: var(--fg-2); }
.case-head__film { width: 100%; max-width: 400px; }
.case-head__film .stage__cap { align-items: flex-start; margin-top: 12px; }
.case-head__film .stage__rec { flex-basis: 100%; }
.case-head__facts .glance { margin-top: 0; }
@media (min-width: 1100px) {
  /* the words and the facts on the left, the film beside them; on a phone the film follows the lede */
  .case-head__grid--film { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); grid-template-rows: auto 1fr; gap: 0 clamp(48px, 6vw, 104px); }
  .case-head__grid--film .case-head__copy { grid-column: 1; grid-row: 1; }
  .case-head__grid--film .case-head__facts { grid-column: 1; grid-row: 2; margin-top: clamp(24px, 3vw, 36px); }
  .case-head__grid--film .case-head__film { grid-column: 2; grid-row: 1 / 3; }
  .case-head__film { justify-self: end; max-width: min(400px, calc((100vh - var(--hdr) - 170px) * 1000 / 1272)); margin-top: 8px; }
}

/* the hotel's page head: the line beside the site playing on a laptop, the facts under both */
.case .case-head__stage.gac-stage { margin-top: 0; }
.case-head__stage .stage--laptop { max-width: none; }
.case-head__qr { max-width: 26em; margin-top: 28px; }
@media (min-width: 1100px) {
  .case-head__grid--laptop { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 clamp(36px, 4vw, 64px); }
  .case-head__grid--laptop .case-head__copy { grid-column: 1; grid-row: 1; }
  .case-head__grid--laptop .case-head__stage { grid-column: 2; grid-row: 1; margin-top: 12px; max-width: calc((100vh - var(--hdr) - 150px) * 1000 / 700); justify-self: end; width: 100%; }
  .case-head__grid--laptop .case-head__facts { grid-column: 1 / -1; grid-row: 2; margin-top: clamp(20px, 3vw, 40px); }
  .case-head__grid--laptop .h1--page { font-size: clamp(38px, 4.3vw, 66px); }
  .case-head__grid--laptop .glance { max-width: none; }
  .case-head__stage .stage__cap { margin-top: 8px; }
}

/* At a glance: six facts, drawn like a title block (labels in mono, values in the sans) */
.glance { margin-top: clamp(24px, 3vw, 36px); max-width: 980px; }
.glance__h { margin: 0 0 8px; font-size: 14.5px; line-height: 1.4; color: var(--fg-2); }
.glance__h b { font-weight: 500; color: var(--fg); }
.glance__dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--fg); border-bottom: 1px solid var(--hair-2); }
.glance__dl > div { min-width: 0; padding: 11px 16px 13px; border-left: 1px solid var(--hair-2); }
.glance__dl > div:nth-child(3n+1) { border-left: 0; padding-left: 0; }
.glance__dl > div:nth-child(n+4) { border-top: 1px solid var(--hair-2); }
.glance dt { margin-bottom: 4px; font: 400 12.5px/1.4 var(--mono); color: var(--label); }
.glance dd { font-size: 16.5px; line-height: 1.4; overflow-wrap: anywhere; }
.glance dd .live { font-size: inherit; }
.glance__note { display: block; margin-top: 2px; font-size: 14.5px; color: var(--fg-2); }

/* the jump index (C6) */
.jump { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; margin-top: 18px; font-size: 15.5px; line-height: 1.5; }
.jump__l { color: var(--fg-2); }
.jump a { text-decoration-color: var(--hair-2); text-underline-offset: .25em; }
.jump a:hover { color: var(--note); text-decoration-color: var(--note-ink); }
.case-head__copy .jump { margin-top: 24px; }

/* the parts: one gap between them (--sec, above only), then a hairline, then the label */
.case .part { padding: var(--sec) 0 0; border-top: 0; }
.case .part > .wrap { padding-top: clamp(22px, 2.6vw, 34px); border-top: 1px solid var(--hair); }
.case .part__label::before { width: 14px; height: 1.5px; background: var(--note-ink); }
.case .part .h2 { margin-bottom: 24px; }
.case .part__grid { gap: clamp(20px, 5vw, 80px); }
.case-small { margin: 16px 0 0; font-size: 15px; line-height: 1.5; color: var(--fg-2); max-width: 36em; }

/* the film on a laptop, with its story beside it (NZ and the sister studio) */
.case-film__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.case-film__text .part__label { margin: 0 0 14px; }
.case-film__text .h2 { margin-bottom: 16px; }
.case-film__story { font-size: clamp(18px, 1.4vw, 20px); line-height: 1.5; color: var(--fg-2); max-width: 34em; }
.case-film__text > * + * { margin-top: 20px; }
.case-film__text .part__label + .h2 { margin-top: 0; }
.case-film__text .chapter__links { margin-top: 24px; }
@media (min-width: 1100px) and (min-height: 600px) {
  .case-film__grid { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: clamp(40px, 4.4vw, 72px); align-items: start; }
  .case-film__stage { max-width: none; }
  .case-film .h2 { font-size: clamp(30px, 3vw, 44px); }
}
/* the film sticks beside its words only where the whole stage fits under the header (from 720px tall) */
@media (min-width: 1100px) and (min-height: 720px) {
  .case-film__stage { position: sticky; top: calc(var(--hdr) + 3vh); }
}

/* the decisions: numbers in the sans, "1 of 6" */
.case .decision { padding: clamp(32px, 4vw, 56px) 0; }
.case .decision:first-of-type { margin-top: clamp(20px, 3vw, 40px); }
.case .decision p.decision__n { font-size: 15px; color: var(--label); margin-bottom: 10px; }
.case-decisions__head .prose > p { color: var(--fg-2); }
.case .detail__note { max-width: 26em; }
/* the call band, straight after the decisions (C1) */
.case .case-band { margin: 8px 0 0; }
.case-build .prose > p { color: var(--fg-2); }
/* the hotel's situation: the three ways to book direct */
.prose .case-ways { margin: 0 0 1em; gap: 8px; }
.prose .case-ways b { font-weight: 500; }

/* what went live, beside what I would change */
.case-after__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px clamp(40px, 6vw, 112px); align-items: start; }
.case-after .part__label { margin: 0 0 18px; }
.case-after .h2 { font-size: clamp(28px, 3vw, 44px); }
.case-after .ticks { border-top: 1px solid var(--fg); max-width: 36em; }
.case-after .ticks li { font-size: 16.5px; line-height: 1.45; padding-block: 8px; }
.case-after .ticks li::before { top: 14px; }
.case-after .changes { grid-template-columns: minmax(0, 1fr); gap: 24px; }

/* their words, and the introduction */
.case-words .quote--big blockquote p { max-width: 28em; }
.case-words .quote--big blockquote p:first-child { text-indent: -.42em; }
.case-words .quote__who { margin-top: 18px; font-size: 17px; }
.case-words .quote__note { margin-top: 16px; font-size: 15.5px; max-width: 40em; }
.case .case-ask { margin-top: clamp(36px, 5vw, 64px); grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) auto; }
.case-ask .ask__go { align-items: center; }
.case-ask__more { flex-basis: 100%; font-size: 15.5px; }

/* the close: a sheet, the trade's line, the figure and the first step, Book, the call times, the P.S.,
   and the next case studies in the order NZ, the hotel, the sister studio (C2, C8) */
.case-close { margin-top: var(--sec); padding: clamp(48px, 6vw, 96px) 0 clamp(48px, 6vw, 88px); }
.case-close__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px clamp(40px, 6vw, 112px); align-items: end; }
.case-close .h2 { font-size: clamp(32px, 3.9vw, 58px); max-width: 13em; }
.case-close .sec__sub { max-width: 32em; }
.case-close .cta { margin-top: 26px; }
.case-close .callline { margin-top: 14px; }
.case-close .ps { margin-top: 24px; }
.case-next { margin: 0; border-top: 0; }
.case-next__h { margin: 0 0 8px; padding-bottom: 10px; border-bottom: 1px solid var(--fg); font: 400 13px/1.4 var(--mono); color: var(--label); }
.case-next a > span { min-width: 0; }
.case-next .arr { color: var(--note-ink); }

/* ——— the hotel: the phone page, from lines to live (C4) ———
   Three steps (data-st 1 Lay out, 2 Build, 3 Live), which qb.js §5 reads. The drawing opens on the
   layout boxes over the real page ghosted at 11%, never an empty frame; the scan line prints the page
   down; then it is live, film and notes.
     laptop (from 1100 × 600)  "beside": the phone stage sticks beside the steps
     phone and tablet          "pin": the stage and the current step stick together for one screen of
                               scroll (.build-run::after, 75vh), the step names across, the current step's words
     still or no script        nothing pins; the finished page stands with the Lay out step's discs */
.case-build__ch { margin-top: clamp(24px, 3vw, 44px); }
.case-build .gac-pb { width: 100%; margin: 0; }
.case-build .stage__cap { justify-content: flex-start; }
.case-build .bstep__b > :last-child { margin-bottom: 0; }
.case-build .keys { margin-top: 8px; }
/* while it is drawn the page is a ghost, printed down behind the scan line */
.case-build .build-on .stage__box--phone .screen__still { clip-path: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--db, 1) * 100%), rgba(0, 0, 0, .11) calc(var(--db, 1) * 100%));
  mask-image: linear-gradient(to bottom, #000 calc(var(--db, 1) * 100%), rgba(0, 0, 0, .11) calc(var(--db, 1) * 100%)); }
.case-build .build-on.is-live .stage__box--phone .screen__still { -webkit-mask-image: none; mask-image: none; }
@media (min-width: 1100px) and (min-height: 600px) {
  .case-build .build-pin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(40px, 5vw, 96px); align-items: start; }
  .case-build .chapter__stage { position: sticky; top: calc(var(--hdr) + 3vh); }
  .case-build .gac-pb { max-width: calc((100vh - var(--hdr) - 3vh - 96px) * 1000 / 1272); margin-left: auto; }
  .case-build .steps-build { padding-top: 8px; }
  .motion .case-build .bstep[data-st="2"] { min-height: 46vh; }
  .motion .case-build .bstep[data-st="3"] { min-height: 38vh; }
}
@media (max-width: 1099px) {
  .case-build .chapter__stage { max-width: 420px; }
  .case-build .steps-build { margin-top: 18px; }
}
@media (max-width: 1099px) and (min-height: 600px) {
  html.motion .case-build .build-pin { position: sticky; top: calc(var(--hdr) + 8px); }
  /* three quarters of a screen of scroll: the build prints over the first half, then it is live */
  html.motion .case-build .build-run::after { content: ''; display: block; height: 75vh; }
  /* the drawing is sized so the stage, its caption and the steps (about 420px of them) fit one small-viewport screen;
     never under 240px wide: where even that does not fit, qb.js does not pin (.build-nopin, below) */
  html.motion .case-build .chapter__stage { max-width: min(100%, 420px, max(240px, calc((100vh - var(--hdr) - 420px) * 1000 / 1272))); max-width: min(100%, 420px, max(240px, calc((100svh - var(--hdr) - 420px) * 1000 / 1272))); }
  html.motion .case-build .steps-build { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 14px; margin-top: 8px; }
  html.motion .case-build .bstep { display: contents; }
  html.motion .case-build .bstep__h { grid-row: 1; margin: 0; padding-top: 9px; border-top: 1px solid var(--hair-2); font-size: 17px; }
  html.motion .case-build .bstep[data-st="2"] .bstep__h { grid-column: 2; }
  html.motion .case-build .bstep[data-st="3"] .bstep__h { grid-column: 3; }
  html.motion .case-build .bstep.on .bstep__h { border-top: 2px solid var(--label); padding-top: 8px; }
  /* the steps not showing fade out but stay in the page, so a screen reader reads all three */
  html.motion .case-build .bstep__b { grid-row: 2; grid-column: 1 / -1; padding-top: 8px; opacity: 0; transition: opacity .3s var(--ease-io); }
  html.motion .case-build .bstep.on .bstep__b { opacity: 1; }
  /* the Lay out legend stays while the page is built (its discs are still on the drawing); Build's
     line sits under it; Live takes the legend's place */
  html.motion .case-build .bstep[data-st="2"] .bstep__b { grid-row: 3; }
  html.motion .case-build .steps-build:has(.bstep[data-st="2"].on) .bstep[data-st="1"] .bstep__b { opacity: 1; }
  html.motion .case-build :not(.build-nopin) > .build-run .steps-build:has(.bstep[data-st="2"].on) .bstep[data-st="1"] .bstep__b > p { display: none; }
  html.motion .case-build .bstep__b p { font-size: 15.5px; line-height: 1.45; margin-bottom: 6px; }
  html.motion .case-build .keys { gap: 4px; margin-top: 4px; }
  html.motion .case-build .keys li { font-size: 14.5px; line-height: 1.35; }
  /* too tall to pin on this screen (qb.js adds .build-nopin): nothing sticks, the drawing runs as it
     crosses the screen, and the three steps read as a list under it, all shown */
  html.motion .case-build .build-nopin .build-pin { position: static; }
  html.motion .case-build .build-nopin .chapter__stage { max-width: min(100%, 420px); }   /* nothing to fit into one screen: the drawing at full size */
  html.motion .case-build .build-nopin .build-run::after { display: none; }
  html.motion .case-build .build-nopin .steps-build { display: block; }
  html.motion .case-build .build-nopin .bstep { display: block; margin-top: 14px; }
  html.motion .case-build .build-nopin .bstep__b { opacity: 1; padding-top: 6px; }
}

/* ——— the sister studio: whose site this is, and the prices drawn as a route (no figures) ——— */
.case-whose { position: relative; display: grid; grid-template-columns: minmax(0, .55fr) minmax(0, 2fr); gap: 16px clamp(28px, 5vw, 80px); margin-top: var(--sec); padding: clamp(22px, 2.6vw, 34px) clamp(20px, 3vw, 40px); background: var(--bg-2); border: 1px solid var(--hair); }
.case-whose__l { margin: 4px 0 0; font: 400 13px/1.4 var(--mono); color: var(--label); }
.case-whose p { max-width: 40em; }
.case-whose p:last-child { margin-bottom: 0; }
.case-whose__frame { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.5; }
.case-whose__so { color: var(--fg-2); font-size: 17px; }
.gmc-route { padding: clamp(18px, 2.4vw, 28px); background: var(--bg-2); border: 1px solid var(--fg); box-shadow: var(--shadow); }
.gmc-route__step { position: relative; margin: 0 auto; padding: 12px 16px; max-width: 26em; border: 1px dashed var(--label); text-align: center; font-size: 16px; line-height: 1.4; color: var(--fg); }
.gmc-route__k { display: block; margin-bottom: 4px; font: 400 12px/1.3 var(--mono); color: var(--label); }
.gmc-route__edge { border-style: solid; border-color: var(--fg); }
.gmc-route__arrow { display: block; width: 1px; height: 26px; margin: 0 auto; background: var(--label); position: relative; }
.gmc-route__arrow::after { content: ''; position: absolute; left: -4px; bottom: 0; border: 4.5px solid transparent; border-top-color: var(--label); border-bottom: 0; }
.gmc-route__split { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding-top: 26px; }
.gmc-route__split::before { content: ''; position: absolute; top: 0; left: 25%; right: 25%; height: 26px; border: 1px solid var(--label); border-bottom: 0; }
.gmc-route__split .gmc-route__step { max-width: none; width: 100%; }
.gmc-route__out--in { border-color: var(--note-ink); }
.gmc-route__out--in .gmc-route__k { color: var(--note); }
.decision .gmc-route__foot { margin: 16px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--fg-2); text-align: center; }

/* sentences and values in the sans (G10): the close-ups' longer labels, the check's heading and the number */
.case .decision .gac-msg__l, .case .decision .gac-mini__l { font: 400 14.5px/1.4 var(--sans); color: var(--fg-2); }
.case .decision .gac-msg__l:first-child { color: var(--label); }
.case .nz-check__l { font: 500 15.5px/1.4 var(--sans); color: var(--fg); letter-spacing: -.005em; }
.case .nz-check__v { font: 500 16px/1.3 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
/* the sister studio: one page of the finished site, small, under what I would change (laptops only) */
.case-gm-shot { max-width: 220px; margin-top: 36px; }

/* ——— by width ——— */
@media (max-width: 1099px) {
  .case-head__film { max-width: 380px; }
  .case .case-band { grid-template-columns: minmax(0, 1fr); }
  .case .case-band .cta-band__go { justify-content: flex-start; }
  .case-after__grid { grid-template-columns: minmax(0, 1fr); }
  .case-close__grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .case .case-ask { grid-template-columns: minmax(0, 1fr); }
  .case-whose { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 899px) {
  .case .part__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .case .case-head { padding-top: 14px; }
  .case-head .back { margin-bottom: 14px; }
  .case-head .lede { font-size: 17px; line-height: 1.5; margin-top: 16px; }
  .case-head__film { max-width: 330px; }
  .glance__dl { display: block; }
  .glance__dl > div, .glance__dl > div:nth-child(3n+1) { display: grid; grid-template-columns: 94px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-left: 0; border-top: 1px solid var(--hair-2); }
  .glance__dl > div:first-child { border-top: 0; }
  .glance__dl > .glance__serves { display: none; }
  .glance dt { margin: 2px 0 0; }
  .glance dd { font-size: 15.5px; }
  .jump { gap: 4px 16px; font-size: 15px; }
  .case-head__copy .jump { margin-top: 16px; }
  .case .part > .wrap { padding-top: 20px; }
  .case .part .h2 { font-size: clamp(28px, 7.6vw, 34px); margin-bottom: 18px; }
  /* a phone visitor has met the site on a phone at the top: the laptop film is left out */
  .case-film__stage { display: none; }
  .case-film__text > * + * { margin-top: 16px; }
  .case .decision { padding: 26px 0 30px; gap: 18px; }
  .case .decision .h3 { font-size: 22px; }
  .case .decision p { font-size: 16.5px; }
  /* the ticks stay a list here (the price's phone rule turns them into a run of phrases) */
  .case .ticks li { display: block; padding: 7px 0 7px 24px; margin: 0; border-bottom: 1px solid var(--hair); font-size: 15.5px; line-height: 1.45; }
  .case .ticks li::before { left: 2px; top: 13px; width: 9px; height: 4.5px; }
  .case-after__grid { gap: 36px; }
  .case-close .h2 { font-size: clamp(30px, 8.4vw, 38px); }
  .case-close .sec__sub { font-size: 16.5px; }
  .gmc-route__split { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .gmc-route__split::before { left: 50%; right: auto; width: 1px; border: 0; background: var(--label); height: 26px; }
  .case .gac-enq__card { max-width: 230px; }
  .case .gac-enq__grid { gap: 14px; }
  .case-gm-shot { display: none; }
  /* the drawing register: every page by name, two to a row */
  .case .gac-reg__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case .gac-reg__list li + li { border-top: 0; }
  .case .gac-reg__list li { border-bottom: 1px solid var(--hair); }
  .case .gac-reg__list li:nth-child(odd) { border-right: 1px solid var(--hair); }
  .case .gac-reg__list a { padding: 8px 10px; gap: 8px; }
  .case .gac-reg__t small { display: none; }
  .case .gac-reg__t { font-size: 15px; }
}


/* ——— 21b. (was trades.css) ——— */
/* trades.css: the trade pages (/for-immigration-advisers, /for-small-hotels), the notes and their index.
   25 September 2026. Written beside qb.css while other pages are being built; the integrator merges it
   into qb.css (§17, the trade-page template, and §20) and removes the second <link> from these pages.
   Only qb.css's tokens are used, so day, night, the table and the sheet all follow. Page-only parts
   carry a prefix: tp- (a trade page), hot- (small hotels), note- (a note), notes- (the index). */

/* ——— 1. The first screen of a trade page ———
   The home page's hero, with a longer H1 set a little smaller, and the trade's proof on the right. */
.tp-hero .h1 { font-size: clamp(38px, min(4.9vw, 9.6vh - 16px), 70px); max-width: 13.2em; }
.tp-hero .eyebrow { margin-bottom: clamp(12px, 2.2vh, 24px); }
.tp-hero .stage--hero { margin-top: 2px; }
.tp-hero .stage__cap { align-items: flex-start; }
.tp-hero .stage__where { padding-top: 8px; }

/* ——— 2. The proof: the client's site, two or three decisions, their words ——— */
.tp-proof .case-stage { margin-top: clamp(24px, 3vw, 44px); }
.tp-proof .case-stage .stage--laptop { max-width: 1120px; }
.tp-proof__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: start; margin-top: clamp(36px, 4.4vw, 64px); padding-top: clamp(28px, 3vw, 44px); border-top: 1px solid var(--hair); }
.tp-proof__words p { font-size: clamp(18px, 1.3vw, 19.5px); line-height: 1.6; max-width: 34em; }
.tp-proof__words .pull, .hot-direct__words .pull { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.25; letter-spacing: -.022em; }
.tp-proof__words .pull { margin: 26px 0 16px; }
.tp-proof__words .pull + p { color: var(--fg-2); }
.tp-proof__links { display: grid; gap: 18px; justify-items: start; margin-top: 26px; max-width: 30em; }
.tp-proof__shots { display: grid; gap: clamp(30px, 3.4vw, 48px); }
.detail__img--nz { background: var(--tone-nz); }
.tp-words { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 18px clamp(32px, 5vw, 88px); align-items: end; margin-top: clamp(40px, 5vw, 72px); padding-top: clamp(28px, 3vw, 44px); border-top: 1px solid var(--hair); }
.tp-words__side { display: grid; gap: 16px; align-self: end; padding-bottom: 6px; }
.tp-words .quote__note { margin: 0; }
.tp .pen--detail .mk__key { display: none; }
.tp-ask { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; font-size: 16px; line-height: 1.5; }
.tp-ask > span { flex: 1 0 100%; color: var(--fg); }
.tp-ask a { white-space: nowrap; }

/* ——— 3. The rules, one country to a card (advisers), the trade's facts (hotels) ——— */
.tp-rules__head, .tp-studies__head, .tp-sec__head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px clamp(32px, 5vw, 88px); align-items: end; margin-bottom: clamp(28px, 3.4vw, 48px); }
.tp-rules__head .sec__sub, .tp-studies__head .sec__sub, .tp-sec__head .sec__sub { margin: 0 0 .3em; }
.tp-regs { gap: 0 clamp(28px, 3.4vw, 56px); }
.tp-regs .reg { display: flex; flex-direction: column; padding: 20px 0 24px; }
.reg__c { flex-wrap: wrap; }
.reg__who { white-space: nowrap; }
.reg p { margin: 0 0 .7em; }
.reg .reg__site { color: var(--fg); padding-left: 12px; border-left: 2px solid var(--note-ink); }
.reg .reg__site b { font-weight: 500; }
.reg .reg__src { margin: auto 0 0; padding-top: 10px; font-size: 14px; line-height: 1.5; }
.reg__src a { color: var(--fg); white-space: nowrap; }
.reg__c { justify-content: flex-start; }
.reg__who { margin-left: auto; }
.reg__tag { display: inline-block; padding: 3px 8px; border: 1px solid var(--note-ink); color: var(--note); font-size: 13px; line-height: 1.2; }
.tp-rules__end { margin: clamp(20px, 2.4vw, 32px) 0 0; padding-top: 16px; border-top: 1px solid var(--hair); max-width: 62em; font-size: 15.5px; line-height: 1.55; color: var(--fg-2); }
.tp-rules__end .xlink { font-size: 16px; color: var(--fg); margin-left: 4px; }

/* ——— 4. The five checks: plain words, no "Check 01" ——— */
.score__n { white-space: nowrap; }
.tp-checks .check__t { font-size: 19.5px; }
.tp-checks .checks__end .xlink { display: inline-flex; margin-top: 10px; font-size: 16.5px; letter-spacing: 0; }

/* ——— 5. Design studies: two, each marked "A study, not a client" before anything else ——— */
.tp-studies .study + .study { margin-top: clamp(20px, 2.4vw, 32px); }
.study { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "text wf" "notes wf"; grid-template-rows: auto 1fr; row-gap: 0; background: var(--bg-2); }
.study__text { grid-area: text; min-width: 0; }
.study__text .study__why { margin-bottom: 4px; }
.study__notes { grid-area: notes; align-self: start; }
.study__notes li { font-size: 16.5px; }
.study .wf { grid-area: wf; align-self: center; }
.wf__row--keyed { position: relative; }
.wf__row--keyed .wf__key { right: -11px; top: -11px; }
.wf__block--thin { min-height: 30px; padding: 6px 10px; }
.wf__block--img { display: grid; align-content: end; }
.wf__block--img small { color: var(--fg-2); }
.tp-studies__end { margin: clamp(18px, 2vw, 28px) 0 0; font-size: 16px; color: var(--fg-2); }
.tp-studies__end .xlink { color: var(--fg); margin-left: 4px; font-size: 16px; }

/* ——— 6. The price, compact: the figure and how you pay beside the five steps ——— */
.tp-price__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.tp-price__big { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .06em; margin: 0; font-size: clamp(76px, 9vw, 132px); line-height: .84; letter-spacing: -.06em; }
.tp-price__lede { margin: 22px 0 0; font-size: clamp(18.5px, 1.45vw, 21px); line-height: 1.45; letter-spacing: -.01em; max-width: 24em; }
.tp-price__pay { margin-top: clamp(26px, 3vw, 40px); }
.tp-price__pay p { font-size: 15.5px; line-height: 1.5; margin: 10px 0 0; }
.tp-price__pay p + p { color: var(--fg-2); }
.tp-price__pay .keep { margin-top: 14px; }
.tp-price__pay .keep p { color: var(--fg); margin: 0; }
.tp-price__h { margin: 4px 0 14px; font-size: clamp(22px, 2vw, 28px); line-height: 1.15; letter-spacing: -.025em; }
.planc { border-top: 1px solid var(--fg); }
.planc > li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 0 14px; align-items: baseline; padding: 13px 0 12px; border-bottom: 1px solid var(--hair); }
.planc__n { font-size: 20px; line-height: 1.2; color: var(--label); }
.planc__t h4 { margin: 0; font-size: 20px; line-height: 1.2; letter-spacing: -.018em; font-weight: 400; }
.planc__t p { margin: 3px 0 0; font-size: 15.5px; line-height: 1.45; color: var(--fg-2); max-width: 34em; }
.planc__v { font-size: 20px; line-height: 1.2; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.planc__total { margin: 12px 0 0; font-size: 16.5px; }
.planc__total b { font-weight: 500; }
.planc__fnd { margin: 10px 0 0; padding: 10px 14px; border: 1px solid var(--note-ink); font-size: 15.5px; }
.planc__fnd .xlink { font-size: 15.5px; margin-left: 4px; }
.planc__after { margin: 20px 0 0; padding-top: 12px; border-top: 1px dashed var(--hair-2); }
.planc__after > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; }
.planc__after dt { font: 400 12.5px/1.6 var(--mono); color: var(--label); }
.planc__after dd { font-size: 15.5px; line-height: 1.5; color: var(--fg-2); }
.tp-price__links { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 22px 0 0; }
.tp-price__links .xlink { font-size: 16px; }

/* ——— 7. The close on a trade page: where you might be, beside the call ——— */
.tp-close .sec__sub { margin-top: 0; }
.tp-zones { min-width: 0; }
.tp-zones .zones { margin: 0; }
.tp-zones__cap { caption-side: top; text-align: left; padding: 0 0 10px; font-size: 15.5px; color: var(--fg-2); }
.tp-zones .zones th[scope="row"] { white-space: nowrap; }
.tp-zones .zones td[data-extra] { font-variant-numeric: tabular-nums; }
.tp-zones .zones td:first-of-type { font-variant-numeric: tabular-nums; }
.tp-zones .dayline__scale, .tp-zones .dayline__row { grid-template-columns: 104px minmax(0, 1fr) 88px; }
@media (min-width: 1100px) {
  .close__grid > .tp-zones { grid-column: 2; grid-row: 1; margin-top: 28px; }
}
@media (max-width: 1099px) {
  .close__grid > .tp-zones { order: 3; margin-top: 30px; }
}

/* ——— 8. Small hotels: the decisions as three cards, the facts beside the argument ——— */
.hot-decs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); margin-top: clamp(36px, 4.4vw, 64px); padding-top: clamp(28px, 3vw, 44px); border-top: 1px solid var(--hair); }
.hot-dec { display: flex; flex-direction: column; min-width: 0; }
.hot-dec .detail { margin-bottom: 18px; }
.hot-dec .detail__img { max-width: 100%; }
.hot-dec__h { margin: 0 0 8px; font-size: clamp(21px, 1.7vw, 24px); line-height: 1.18; letter-spacing: -.02em; }
.hot-dec p { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--fg-2); }
.hot-msg { margin: 12px 0 0; padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--hair); border-radius: 10px 10px 10px 2px; font-size: 15px; line-height: 1.45; }
.hot-msg__l { display: block; margin-bottom: 4px; font: 400 12px/1.4 var(--mono); color: var(--label); }
.hot-msg__blank { display: inline-block; width: 5.5em; border-bottom: 1px solid var(--fg-2); vertical-align: -2px; }
.hot-direct__grid { margin-top: clamp(28px, 3.4vw, 48px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.hot-direct__words p { font-size: clamp(18px, 1.3vw, 19.5px); line-height: 1.6; max-width: 34em; }
.hot-direct__words .pull { margin: 28px 0; }
.hot-direct__words .hot-honest { padding: 14px 16px; background: var(--bg-2); border: 1px solid var(--hair); border-left: 2px solid var(--note-ink); font-size: 16.5px; }
.hot-facts { display: grid; gap: 0; }
.hot-facts .reg { padding: 18px 0 20px; }
.gac-pen-p { display: none; }
.hot-enq .detail__img { max-width: 340px; }
.hot-pieces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); border-top: 0; }
.hot-pieces li { border-top: 1px solid var(--fg); border-bottom: 0; }
.hot-pieces li:nth-child(n) i { background: none; border-color: var(--label); color: var(--label); }
.tp-price__india { color: var(--fg) !important; }
.tp-price__india b { font-weight: 500; }

/* ——— 8b. Clinics (/for-clinics, 25 September 2026, night): after the two studies, what fits in 12
   pages for the invented clinic, beside the owner's line on Arabic. Page numbers in the sans. ——— */
.cln-more { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; margin-top: clamp(28px, 3.4vw, 48px); padding: clamp(22px, 2.8vw, 36px) clamp(24px, 3vw, 40px); border: 1px dashed var(--hair-2); background: var(--bg-2); }
.cln-pages ol { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: clamp(24px, 3vw, 44px); }
.cln-pages li { break-inside: avoid; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 6px; padding: 9px 0 10px; border-bottom: 1px solid var(--hair); font-size: 16px; line-height: 1.4; }
.cln-pages__n { color: var(--label); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cln-ar { padding: 0 0 0 clamp(18px, 2vw, 28px); border-left: 2px solid var(--note-ink); }
.cln-ar p { margin: 12px 0 0; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.5; max-width: 26em; }
.cln-ar .cln-ar__more { margin-top: 14px; font-size: 15.5px; }
.cln-ar__more .xlink { font-size: 15.5px; }

/* ——— 9. The notes: a readable column, a table where a table helps, the sources ——— */
.note-head .h1 { max-width: 17em; }
.note-head .lede { color: var(--fg); }
.note-body { display: grid; grid-template-columns: minmax(0, 44em) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: start; padding-bottom: var(--sec); }
.note-aside { position: sticky; top: calc(var(--hdr) + 28px); display: grid; gap: 18px; font-size: 15px; color: var(--fg-2); }
.note-aside__h { margin: 0 0 8px; font: 400 12.5px/1.4 var(--mono); color: var(--label); }
.note-aside ol { border-top: 1px solid var(--fg); counter-reset: n; }
.note-aside li { border-bottom: 1px solid var(--hair); }
.note-aside li a { display: block; padding: 8px 0; font-size: 15px; line-height: 1.35; color: var(--fg-2); text-decoration: none; }
.note-aside li a:hover { color: var(--note); }
.article > :first-child { margin-top: 0; }
.article ol { display: grid; gap: 8px; margin: 0 0 1em; counter-reset: q; }
.article ol > li { counter-increment: q; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; }
.article ol > li::before { content: counter(q); display: grid; place-items: center; width: 22px; height: 22px; margin-top: .25em; border: 1px solid var(--note-ink); border-radius: 50%; font-size: 13px; line-height: 1; color: var(--note); }
.article .note-short { margin: 0 0 1.4em; padding: 16px 18px; background: var(--bg-2); border: 1px solid var(--hair); border-left: 2px solid var(--note-ink); }
.article .note-short p { margin: 0; font-size: 17.5px; line-height: 1.55; }
.article .note-short p + p { margin-top: .6em; }
.article blockquote { margin: 0 0 1em; padding-left: 16px; border-left: 2px solid var(--hair-2); }
.article blockquote p { color: var(--fg); }
.article a { text-decoration-color: var(--fg-2); }
.ntable-wrap { margin: 0 0 1.4em; overflow-x: auto; }
.ntable { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.45; }
.ntable caption { caption-side: top; text-align: left; padding: 0 0 8px; font-size: 14.5px; color: var(--fg-2); }
.ntable th, .ntable td { padding: 10px 14px 10px 0; border-bottom: 1px solid var(--hair); text-align: left; vertical-align: top; font-weight: 400; }
.ntable thead th { font: 400 12.5px/1.4 var(--mono); color: var(--label); border-bottom: 1px solid var(--fg); }
.ntable tbody th { color: var(--fg); white-space: nowrap; }
.ntable td { color: var(--fg-2); }
.ntable td.num, .ntable th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--fg); }
.ntable--rules td { font-size: 15px; }
@media (max-width: 420px) { .fxt tbody th, .fxt thead th:first-child { width: 7em; white-space: normal; } .fxt td.num, .fxt th.num { white-space: normal; } .fxt th, .fxt td { padding-right: 10px; } }   /* the currency table fits a 320 px screen, and text spacing, without the page scrolling sideways (WCAG 1.4.10, 1.4.12) */
.article .sources ol { display: block; margin: 0; counter-reset: s; }
.article .sources ol > li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px; padding: 5px 0; counter-increment: s; font-size: 15px; line-height: 1.55; color: var(--fg-2); }
.article .sources ol > li::before { content: counter(s) '.'; display: block; width: auto; height: auto; margin: 0; border: 0; border-radius: 0; font-size: 15px; line-height: 1.55; color: var(--label); font-variant-numeric: tabular-nums; }
.sources a { color: var(--fg); overflow-wrap: anywhere; }
.note-end { margin-top: clamp(28px, 3vw, 40px); }
.note-end .cta-band { margin: 0; grid-template-columns: minmax(0, 1fr); }
.note-end .cta-band__go { justify-content: flex-start; }
.notes-index .note-end { max-width: 60em; }
.notes-sec { padding-top: 0; }

/* the notes' index */
.notes-list { border-top: 1px solid var(--fg); max-width: 60em; }
.notes-list li { border-bottom: 1px solid var(--hair); }
.notes-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 32px; padding: 20px 0 22px; text-decoration: none; }
.notes-list__t { font-size: clamp(22px, 2.1vw, 30px); line-height: 1.15; letter-spacing: -.024em; }
.notes-list__d { grid-column: 1; font-size: 16.5px; line-height: 1.5; color: var(--fg-2); max-width: 40em; }
.notes-list__m { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--fg-2); white-space: nowrap; }
.notes-list a:hover .notes-list__t { color: var(--note); }
.notes-list a:hover .arr { transform: translateX(3px); }

/* ——— 10. By width ——— */
@media (max-width: 1099px) {
  .tp-rules__head, .tp-studies__head, .tp-sec__head { grid-template-columns: minmax(0, 1fr); }
  .cln-more { grid-template-columns: minmax(0, 1fr); }
  .tp-proof__grid, .hot-direct__grid, .tp-price__grid { grid-template-columns: minmax(0, 1fr); }
  .tp-words { grid-template-columns: minmax(0, 1fr); }
  .tp-words .quote { grid-row: auto; }
  .hot-decs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hot-pieces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .study { grid-template-columns: minmax(0, 1fr) 250px; grid-template-areas: "text text" "notes wf"; column-gap: 28px; }
  .study .wf { justify-self: end; align-self: start; }
  .note-body { grid-template-columns: minmax(0, 1fr); }
  .note-aside { position: static; order: -1; }
}
@media (min-width: 800px) and (max-width: 1099px) {
  .tp-regs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .tp-proof__shots { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 767px) {
  .tp-hero .h1 { font-size: clamp(33px, 9vw, 44px); }
  .tp-hero .tblock__cell--keep .tblock__s { display: block; }
  .tp-hero .stage--hero { max-width: min(100%, 350px); margin-top: 22px !important; }
  .tp-hero .stage--hero .stage__box--phone { max-width: calc(330px * 1000 / 1272); }
  .tp-dup, .tp-more { display: none; }
  .tp-proof .case-stage { display: none; }   /* the first screen already shows her site on a phone */
  .tp-zones .zones__foot { display: none; }
  .tp-price__big { font-size: clamp(64px, 19vw, 84px); }
  .cln-more { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 16px 14px 18px; }
  .cln-pages ol { columns: 1; }
  .cln-pages li { grid-template-columns: 40px minmax(0, 1fr); padding: 6px 0 7px; font-size: 14.5px; line-height: 1.4; }
  .cln-ar { padding-left: 14px; }
  .cln-ar p { font-size: 16px; margin-top: 10px; }
  .tp-checks .checks__list .check { padding: 11px 0; }
  .tp-proof__grid { margin-top: 24px; padding-top: 20px; gap: 26px; }
  .tp-proof__words p { font-size: 16.5px; line-height: 1.5; }
  .tp-proof__words .pull, .hot-direct__words .pull { font-size: 21px; }
  .tp-proof__words .pull { margin: 18px 0 12px; }
  .hot-direct__words .pull { margin: 20px 0; }
  .tp-proof__links { margin-top: 16px; }
  .tp-proof__links .btn { width: 100%; min-height: 48px; }
  .tp-proof__shots { gap: 22px; }
  .tp-words { margin-top: 28px; padding-top: 20px; }
  .tp-words .quote--big blockquote p { font-size: 16.5px; line-height: 1.5; }
  .tp-ask { font-size: 15.5px; }
  .tp-regs .reg { padding: 14px 0 16px; }
  .reg p { font-size: 15.5px; line-height: 1.5; }
  .reg .reg__src { font-size: 13.5px; }
  .tp-rules__end { font-size: 14.5px; }
  .tp-checks .check { padding: 13px 0; gap: 12px; }
  .tp-checks .check__t { font-size: 17px; }
  .tp-checks .check__b { font-size: 15px; line-height: 1.45; margin-top: 4px; }
  .checks__side { position: static; }
  .adv-checks__p { font-size: 16px; margin-top: 12px; }
  .score { margin-top: 14px; display: flex; align-items: center; gap: 14px; }
  .score__n { font-size: 44px; }
  .score__bars { margin: 0; flex: 0 0 120px; }
  .score__verdict { margin: 0; font-size: 14.5px; }
  .tp-checks .checks__end { font-size: 17px; margin-top: 18px; }
  /* a study on a phone: the stamp, the name and why, then the drawing beside its numbered notes */
  .study { grid-template-columns: minmax(0, 1fr) 138px; column-gap: 12px; row-gap: 12px; padding: 16px 12px 16px 14px; }
  .study__more { display: none; }
  .study__h { font-size: 22px; margin-bottom: 8px; }
  .study__why { font-size: 14.5px; margin-bottom: 0; }
  .study__notes { gap: 8px; }
  .study__notes li { font-size: 14.5px; line-height: 1.42; grid-template-columns: 22px minmax(0, 1fr); gap: 6px; }
  .study__notes li::before { width: 19px; height: 19px; font-size: 10.5px; }
  .study .wf { width: 138px; justify-self: end; padding: 8px 7px 10px; gap: 5px; border-radius: 18px; }
  .wf__bar { height: 20px; padding: 0 5px; font-size: 8.5px; }
  .wf__block { font-size: 10.5px; line-height: 1.25; min-height: 26px; padding: 4px 6px; }
  .wf__block small { font-size: 8.5px; }
  .wf__block--h { font-size: 12.5px; min-height: 50px; }
  .wf__block--img { min-height: 44px; }
  .wf__btn { min-height: 24px; font-size: 10px; }
  .wf__key, .wf__row--keyed .wf__key { width: 18px; height: 18px; right: -9px; top: -9px; font-size: 10px; }
  .tp-price__big { font-size: clamp(72px, 22vw, 96px); }
  .tp-price__lede { margin-top: 14px; font-size: 17.5px; }
  .tp-price__pay { margin-top: 18px; }
  .tp-price__pay .keep p { font-size: 15px; }
  .planc > li { grid-template-columns: 24px minmax(0, 1fr) auto; gap: 0 10px; padding: 10px 0; }
  .planc__n, .planc__t h4, .planc__v { font-size: 18px; }
  .planc__t p { font-size: 14.5px; }
  .planc__after > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .tp-zones .zones thead { display: none; }
  .tp-zones .zones tr { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 16px; padding: 8px 0; border-bottom: 1px solid var(--hair); }
  .tp-zones .zones th, .tp-zones .zones td { padding: 0; border: 0; font-size: 15px; }
  .tp-zones .zones td:first-of-type { text-align: right; }
  .tp-zones .zones td.note { display: none; }
  .tp-zones .zones td[data-extra] { grid-column: 1 / -1; font-size: 14px; }
  .tp-zones .zones td[data-extra]::before { content: 'Extra calls: '; color: var(--fg-2); }
  .tp-zones .dayline { display: none !important; }
  .hot-decs { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 28px; padding-top: 22px; }
  .hot-dec p { font-size: 15.5px; line-height: 1.5; }
  .hot-film { display: none; }
  .hot-enq .detail__img { max-width: 250px; }   /* the first screen already plays the hotel on a phone */
  .hot-pieces { grid-template-columns: minmax(0, 1fr); }
  .hot-pieces li { padding: 12px 0; border-top: 1px solid var(--hair); }
  .hot-pieces li:first-child { border-top: 1px solid var(--fg); }
  .hot-pieces h3 { font-size: 18px; margin-bottom: 2px; }
  .hot-pieces p { font-size: 15px; line-height: 1.45; }
  .hot-direct__words p { font-size: 16.5px; line-height: 1.5; }
  .gac-pen-d { display: none; }
  .gac-pen-p { display: block; }
  .ntable { font-size: 14.5px; }
  .ntable tbody th { white-space: normal; }
  .ntable--rules thead { display: none; }
  .ntable--rules tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--hair); }
  .ntable--rules th, .ntable--rules td { display: block; padding: 0; border: 0; }
  .ntable--rules tbody th { margin-bottom: 4px; font-size: 16px; font-weight: 500; }
  .ntable--rules td { font-size: 14.5px; }
  .ntable--rules td + td { margin-top: 4px; }
  .ntable--rules td + td::before { content: 'Never: '; color: var(--note); }
  .ntable-wrap { overflow-x: visible; }
  .note-aside { display: none; }
  .note-body { gap: 0; }
  .article h2 { margin-top: 1.3em; }
  .ntable th, .ntable td { padding: 8px 10px 8px 0; }
  .notes-list a { grid-template-columns: minmax(0, 1fr); padding: 16px 0 18px; }
  .notes-list__m { grid-column: 1; grid-row: auto; }
}


/* ——— 21c. (was legal.css) ——— */
/* ——— legal: the terms, the privacy notice, the specimens and the worked site review ———
   Written 25 September 2026 for the 5th edition. Page parts are prefixed .lg- (terms and privacy),
   .spec- (the specimen scope and invoice) and .rv- (the worked review). Everything else on these
   pages is the home page's (qb.css): .doc, .toc, .defs, .keep, .bars, .fnd, .letterhead, .cta-band.
   To be merged into qb.css by the integrator (section 20). */

/* —— Terms: the paperwork, in advance (two specimen documents under the lede) —— */
.lg-head__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; margin-top: 34px; }
.lg-head__row .doc-head__tools { margin-top: 0; }
.lg-papers { display: grid; grid-template-columns: repeat(3, minmax(0, 300px)); gap: 14px; }   /* the example Site plan, the scope, the invoice (25 September 2026, night) */
.lg-links { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.lg-paper { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 16px; align-items: center; height: 100%; padding: 14px 18px 14px 14px; background: var(--bg-2); border: 1px solid var(--hair); text-decoration: none; transition: border-color .2s, transform .3s var(--ease); }
.lg-paper:hover { border-color: var(--note-ink); }
.lg-paper:hover .arr { transform: translateX(3px); }
.lg-paper__sheet { position: relative; display: grid; align-content: start; gap: 5px; width: 58px; height: 80px; padding: 9px 8px; background: var(--bg); border: 1px solid var(--hair-2); box-shadow: 0 8px 14px -10px rgba(28, 26, 23, .5); }
.lg-paper__sheet i { display: block; height: 2px; background: var(--hair-2); }
.lg-paper__sheet i.lg-paper__h { width: 70%; height: 4px; background: var(--fg); }
.lg-paper__sheet i.lg-paper__two { width: 100%; height: 9px; background: linear-gradient(90deg, var(--hair-2) 0 46%, transparent 46% 54%, var(--hair-2) 54%); opacity: .8; }
.lg-paper__sheet i.lg-paper__tbl { height: 14px; background: none; border: 1px dashed var(--label); }
.lg-paper__sheet i.lg-paper__tot { width: 50%; justify-self: end; height: 3px; background: var(--fg); }
.lg-paper__sheet i.lg-paper__short { width: 55%; }
.lg-paper__stamp { position: absolute; left: 50%; top: 52%; padding: 2px 4px; border: 1.5px solid var(--note-ink); background: var(--bg); color: var(--note); font: 400 7.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; transform: translate(-50%, -50%) rotate(-12deg); white-space: nowrap; }
.lg-paper__txt { display: grid; gap: 4px; min-width: 0; }
.lg-paper__t { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; line-height: 1.25; letter-spacing: -.012em; color: var(--fg); }
.lg-paper__t .arr { width: 14px; height: 14px; }
.lg-paper__s { font-size: 14.5px; line-height: 1.45; color: var(--fg-2); }

/* —— Terms §01: the Site plan is the first thing you get —— */
.defs > .lg-first dt { color: var(--note); }
.defs > .lg-first dd { font-size: 18px; }

/* —— Terms §03: the schedule, as a table (Standard · Founding place · In India) —— */
.lg-sched-wrap { max-width: 48em; margin: 8px 0 0; }
.lg-sched { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.lg-sched th, .lg-sched td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--hair); text-align: left; vertical-align: top; font-weight: 400; }
.lg-sched thead th { padding-top: 0; font: 400 12.5px/1.4 var(--mono); color: var(--label); border-bottom: 1px solid var(--fg); vertical-align: bottom; }
.lg-sched thead th small { display: block; font: 400 12px/1.4 var(--sans); color: var(--fg-2); }
.lg-sched tbody th, .lg-sched tfoot th { position: relative; padding-left: 28px; font-size: 17.5px; line-height: 1.3; }
.lg-sched__n { position: absolute; left: 0; top: 12px; color: var(--label); font-size: 17px; line-height: 1.3; }
.lg-sched__t small { display: block; margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--fg-2); }
.lg-sched td { font-size: 19px; line-height: 1.3; letter-spacing: -.015em; white-space: nowrap; }
.lg-sched td small { display: block; margin-top: 2px; font-size: 13.5px; letter-spacing: 0; white-space: normal; color: var(--fg-2); }
.lg-sched tbody tr:first-child td { color: var(--fg-2); }
.lg-sched tfoot th, .lg-sched tfoot td { border-top: 1px solid var(--fg); border-bottom: 0; }
.lg-sched tfoot td { font-weight: 500; }
.lg-sched tfoot td small { font-weight: 400; }
.lg-sched td:last-child, .lg-sched th:last-child { padding-right: 0; }
html[data-advocate^="20"] .lg-sched td.if-founding { color: var(--note); }
.doc__sec p.lg-total { margin: 16px 0 0; padding-top: 14px; border-top: 1px dashed var(--hair-2); font-size: 16.5px; max-width: 48em; }
.lg-total b { font-weight: 500; }
.doc .lg-bars { margin: 28px 0 8px; max-width: 48em; }
/* the bars sit in the document's narrow column: the home page's own sizes, and the red tick on
   its own line (as the home page does below 1100px) */
.doc .lg-bars p { max-width: none; }
.doc .lg-bars .bars__key { font-size: 14.5px; line-height: 1.4; margin-bottom: 14px; }
.doc .lg-bars .bars__name { font-size: 16.5px; line-height: 1.3; }
.doc .lg-bars .bars__ticks { display: flex; flex-wrap: wrap; justify-content: space-between; height: auto; row-gap: 6px; font: 400 12px/1 var(--mono); }
.doc .lg-bars .bars__ticks span { position: static; transform: none; left: auto; right: auto; }
.doc .lg-bars .bars__ticks .t-10, .doc .lg-bars .bars__ticks .t-60, .doc .lg-bars .bars__ticks .t-80 { display: none; }
.doc .lg-bars .bars__ticks .t-red { position: relative; left: 0; margin-left: 0; order: 3; flex: 1 0 100%; padding-left: 12px; font: 400 14.5px/1.3 var(--sans); }
.doc .lg-bars .bars__ticks .t-red::before { content: ''; position: absolute; left: 0; top: -1px; bottom: -1px; width: 2px; background: var(--note-ink); }
.doc .lg-bars .bars__cap { font-size: 15px; }
.doc .lg-refund { margin-top: 22px; }
.doc .lg-refund p { font-size: 17px; }
.lg-fnd { margin: 22px 0 8px; }
.doc__sec h3#t3-pay { margin-top: 34px; }

/* the visitor's own call times under the India times (written by the script; empty without it) */
.lg-yours { display: block; margin-top: 6px; font-size: 15.5px; color: var(--label); }
.lg-yours:empty { display: none; }
.lg-go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 22px; }
.lg-go .xlink { font-size: 16px; }

/* —— Terms §07: after launch, four cells in a row (as on the home page) —— */
.lg-after { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 48em; margin: 18px 0 8px; border-top: 1px solid var(--fg); }
.lg-after > div { padding: 12px 16px 14px; border-left: 1px solid var(--hair); min-width: 0; }
.lg-after > div:first-child { border-left: 0; padding-left: 0; }
.lg-after dt { font: 400 12.5px/1.4 var(--mono); color: var(--label); }
.lg-after__v { display: block; margin-top: 4px; font-size: 19px; line-height: 1.25; letter-spacing: -.02em; }
.lg-after__s { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.45; color: var(--fg-2); }

/* —— Terms §08: If I let you down (behind the advocate switch), a sheet with red corners —— */
.lg-down { position: relative; padding: clamp(18px, 2.4vw, 30px) clamp(18px, 2.6vw, 34px); background: var(--bg-2); border: 1px solid var(--hair); box-shadow: var(--shadow); max-width: 48em; }
.lg-down dl > div { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--hair); }
.lg-down dl > div:first-child { padding-top: 0; }
.lg-down dt { font-size: 17.5px; line-height: 1.35; letter-spacing: -.01em; color: var(--note); }
.lg-down dd { font-size: 16.5px; line-height: 1.55; }
.lg-down__ref { display: block; margin-top: 4px; font: 400 12px/1.4 var(--mono); color: var(--fg-2); }
.doc__sec .lg-down__foot { margin: 14px 0 0; font-size: 15px; color: var(--fg-2); }

/* —— Terms §09: who you are dealing with —— */
.doc__sec p.lg-contract { font-size: clamp(19px, 1.5vw, 22px); line-height: 1.4; letter-spacing: -.012em; max-width: 30em; }
.lg-num { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.doc .letterhead { margin: 22px 0 0; }
.doc .lg-band { margin: 48px 0 0; max-width: 60em; }

/* —— Privacy: the booking link-out and the mail route, set as a small diagram in words —— */
.lg-route { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; max-width: 48em; margin: 8px 0 22px; border-top: 1px solid var(--fg); }
.lg-route > li { position: relative; padding: 12px 18px 14px 0; border-bottom: 1px solid var(--hair); }
.lg-route > li + li { padding-left: 18px; border-left: 1px dashed var(--hair-2); }
.lg-route b { display: block; font: 400 12.5px/1.4 var(--mono); color: var(--label); margin-bottom: 4px; }
.lg-route span { display: block; font-size: 15.5px; line-height: 1.45; color: var(--fg-2); }
.lg-route > li + li::before { content: ''; position: absolute; left: -5px; top: 17px; width: 8px; height: 8px; border-top: 1.5px solid var(--note-ink); border-right: 1.5px solid var(--note-ink); background: var(--bg); transform: rotate(45deg); }
.doc__sec .lg-plain { margin: 0 0 18px; padding: 14px 18px; background: var(--bg-2); border: 1px solid var(--hair); border-left: 2px solid var(--label); max-width: 44em; font-size: 16.5px; }

/* —— The worked site review (/site-review-sample) —— */
.rv-head .h1 { max-width: 14em; }
.rv-head .rv-stamp { margin: 0 0 18px; }
.rv-tb { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 62em; margin: 36px 0 0; border-top: 1px solid var(--fg); border-bottom: 1px solid var(--hair); }
.rv-tb > div { padding: 12px 16px 14px; border-left: 1px solid var(--hair); min-width: 0; }
.rv-tb > div:first-child { border-left: 0; padding-left: 0; }
.rv-tb dt { font: 400 12.5px/1.4 var(--mono); color: var(--label); }
.rv-tb dd { margin-top: 4px; font-size: 16.5px; line-height: 1.4; }
.rv-why { margin: 18px 0 0; max-width: 44em; font-size: 16.5px; color: var(--fg-2); }
.rv-first__grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(36px, 6vw, 110px); align-items: start; }
.rv-phone { position: relative; margin: 0; padding: 10px; background: var(--device); border-radius: 42px; box-shadow: var(--shadow); }
.rv-phone__screen.detail__img { border-radius: 32px; background: #13201A; }
.rv-phone__screen img { border-radius: 32px; box-shadow: none; }
.rv-first__words .h2 { margin-bottom: 24px; }
.rv-big { font-size: clamp(19px, 1.5vw, 22px); line-height: 1.5; letter-spacing: -.01em; max-width: 32em; }
.rv-notes { display: grid; gap: 8px; margin: 26px 0 0; padding: 18px 0 0; border-top: 1px dashed var(--hair-2); }
.rv-notes li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.rv-notes__k { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--key-bg); color: var(--key-fg); font: 400 11.5px/1 var(--mono); transform: translateY(-2px); }
.rv-notes__t { font: 400 clamp(20px, 1.6vw, 23px)/1.3 var(--hand); color: var(--note); }
.rv-list { margin: 30px 0 0; border-top: 1px solid var(--fg); }
.rv-list li { border-bottom: 1px solid var(--hair); }
.rv-list a { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 14px 0; font-size: 16.5px; line-height: 1.5; color: var(--fg-2); text-decoration: none; }
.rv-list a b { display: block; font-weight: 400; font-size: 19px; letter-spacing: -.012em; color: var(--fg); }
.rv-list a:hover b { color: var(--note); }
.rv-list__n { font-size: 19px; color: var(--label); }
.rv-changes { padding-top: calc(var(--sec) * .7); }
.rv-change { display: grid; grid-template-columns: minmax(0, 390px) minmax(0, 1fr); gap: clamp(32px, 6vw, 110px); padding: clamp(40px, 5vw, 72px) 0; border-top: 1px solid var(--hair); align-items: start; scroll-margin-top: calc(var(--hdr) + 16px); }
.rv-change:first-child { border-top: 1px solid var(--fg); }
.rv-fig .detail__img { background: #13201A; }
.rv-fig .rv-fig--light { background: #EFE9DB; }
.rv-change__n { margin: 0 0 10px; font-size: 15px; color: var(--label); }
.rv-change__h.h3 { font-size: clamp(28px, 3vw, 42px); line-height: 1.06; letter-spacing: -.03em; margin: 0 0 22px; max-width: 16em; }
.rv-defs > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 18px; padding: 14px 0; border-top: 1px solid var(--hair); }
.rv-defs dt { font: 400 12.5px/1.7 var(--mono); color: var(--label); }
.rv-defs dd { font-size: 17.5px; line-height: 1.6; max-width: 36em; }
.rv-defs .rv-defs__small { margin-top: 8px; padding: 14px 16px; border: 1px solid var(--hair); border-left: 2px solid var(--note-ink); background: var(--bg-2); }
.rv-defs .rv-defs__small dt { color: var(--note); }
.rv-pen .mk__loop { stroke-width: 2.6; vector-effect: non-scaling-stroke; }
.rv-key__c { fill: var(--key-bg); }
.rv-key__t { fill: var(--key-fg); font-family: var(--mono); font-size: 26px; }
.rv-rest__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); padding-top: 28px; border-top: 1px solid var(--fg); }
.rv-rest__h { margin: 0 0 12px; font-size: 22px; letter-spacing: -.02em; }
.rv-rest p { font-size: 16.5px; line-height: 1.6; }
.rv-rest__small { color: var(--fg-2); font-size: 15.5px !important; }
.rv-ask .rv-ticket { max-width: 760px; }
.rv-ask .rv-band { margin-bottom: 0; }

@media (max-width: 1099px) {
  .rv-rest__grid { grid-template-columns: minmax(0, 1fr); max-width: 44em; }
  .rv-change { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
}
@media (max-width: 899px) {
  .rv-first__grid { grid-template-columns: minmax(0, 1fr); }
  .rv-phone { width: min(300px, 82%); margin-inline: auto; }
  .rv-change { grid-template-columns: minmax(0, 1fr); }
  .rv-fig { max-width: 390px; }
}
@media (max-width: 767px) {
  .rv-tb { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 26px; }
  .rv-tb > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .rv-tb > div:nth-child(n+3) { border-top: 1px solid var(--hair); }
  .rv-tb dd { font-size: 15.5px; }
  .rv-defs > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .rv-defs dd { font-size: 16.5px; }
  .rv-change__h.h3 { font-size: 28px; }
  .rv-list a b { font-size: 17.5px; }
  .rv-list a { font-size: 15.5px; }
}

/* —— The specimens (/specimen-scope, /specimen-invoice): a document on the film, stamped —— */
.spec-head .h1 { max-width: 12em; margin-top: 14px; }
.spec-head .specimen__stamp { margin: 0; }
.spec-note { margin: 18px 0 0; max-width: 44em; padding: 12px 16px; border: 1px dashed var(--note-ink); font-size: 16px; line-height: 1.55; color: var(--fg-2); }
.spec-note b { color: var(--note); font-weight: 500; }
.spec-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 24px; }
.spec-tools .xlink { font-size: 16.5px; }
.spec-wrap { padding-bottom: var(--sec); }
.spec-sheet { position: relative; max-width: 900px; padding: clamp(22px, 4.4vw, 56px) clamp(18px, 4.4vw, 60px) clamp(22px, 3vw, 36px); background: var(--bg-2); border: 1px solid var(--hair); box-shadow: var(--shadow); overflow: hidden; }
/* the watermark: a document that is an example says so on every screen and every printed page */
.spec-sheet::before { content: 'SPECIMEN'; position: absolute; left: 50%; top: 42%; z-index: 0; font: 400 clamp(64px, 13vw, 150px)/1 var(--mono); letter-spacing: .12em; color: var(--note-ink); opacity: .07; transform: translate(-50%, -50%) rotate(-24deg); pointer-events: none; white-space: nowrap; }
.spec-sheet > * { position: relative; z-index: 1; }
.spec-sheet__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 16px; border-bottom: 2px solid var(--fg); }
.spec-brand { display: flex; align-items: center; gap: 10px; font-size: 22px; letter-spacing: -.03em; }
.spec-brand .mark { width: 28px; height: 28px; }
.spec-sheet__ref { margin: 0; font: 400 12.5px/1.4 var(--mono); color: var(--fg-2); text-align: right; }
.spec-sheet__h { margin: 26px 0 18px; font-size: clamp(26px, 3vw, 40px); line-height: 1.08; letter-spacing: -.03em; }
.spec-between > div, .spec-rows > div, .spec-kv > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--hair); }
.spec-between { border-top: 1px solid var(--hair); }
.spec-between dt, .spec-rows dt, .spec-kv dt { font: 400 12.5px/1.6 var(--mono); color: var(--label); }
.spec-between dd, .spec-rows dd, .spec-kv dd { font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.spec-made { display: inline-block; margin-left: 6px; padding: 1px 6px; border: 1px solid var(--note-ink); font: 400 11px/1.5 var(--mono); color: var(--note); vertical-align: 2px; }
.spec-part { margin-top: 34px; }
.spec-part__h { display: flex; align-items: baseline; gap: 12px; margin: 0 0 12px; font-size: 21px; letter-spacing: -.018em; }
.spec-part__h span { font: 400 12.5px/1 var(--mono); color: var(--label); }
.spec-part--two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.spec-part--two .ticks li, .spec-part--two .dashes li { font-size: 15.5px; }
.spec-tbl-wrap { overflow-x: auto; }
.spec-tbl { width: 100%; border-collapse: collapse; }
.spec-tbl th, .spec-tbl td { padding: 10px 14px 10px 0; border-bottom: 1px solid var(--hair); text-align: left; vertical-align: top; font-weight: 400; font-size: 15.5px; line-height: 1.5; }
.spec-tbl thead th { font: 400 12px/1.4 var(--mono); color: var(--label); border-bottom: 1px solid var(--fg); }
.spec-tbl tbody th { font-size: 16px; color: var(--fg); }
.spec-tbl td:first-child { color: var(--label); font-variant-numeric: tabular-nums; }
.spec-tbl--dates td:first-child, .spec-tbl--pay td:first-child { color: var(--fg); }
.spec-tbl tfoot th, .spec-tbl tfoot td { border-top: 1px solid var(--fg); border-bottom: 0; font-weight: 500; }
.spec-tbl--pay td { white-space: nowrap; }
.spec-tbl--pay td:last-child, .spec-tbl--pay td:nth-last-child(2) { white-space: normal; color: var(--fg-2); }
.spec-tbl--pay tfoot td:last-child { font-weight: 400; }
html[data-advocate^="20"] .spec-tbl td.if-founding { color: var(--note); }
.spec-fill { display: inline-block; padding: 0 6px; border-bottom: 1.5px dashed var(--label); color: var(--label); font-size: 14.5px; }
.spec-small { margin: 10px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--fg-2); max-width: 48em; }
.spec-list { display: grid; gap: 6px; }
.spec-list li { position: relative; padding-left: 20px; font-size: 16px; line-height: 1.55; }
.spec-list li::before { content: ''; position: absolute; left: 1px; top: .8em; width: 10px; height: 1.5px; background: var(--fg-2); }
.spec-choices { display: grid; gap: 8px; }
.spec-choices li { display: flex; gap: 12px; align-items: baseline; font-size: 16px; }
.spec-box { flex: none; width: 14px; height: 14px; border: 1.5px solid var(--fg); transform: translateY(2px); }
.spec-price { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 22px; align-items: center; margin: 0 0 16px; padding: 14px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.spec-price__n { font-size: clamp(34px, 4vw, 48px); line-height: 1; letter-spacing: -.045em; }
.spec-price__t { font-size: 15.5px; line-height: 1.5; color: var(--fg-2); max-width: 34em; }
.spec-gbp { display: block; margin-top: 2px; color: var(--fg-2); font-size: .92em; }   /* the pound amount, fixed on signing, under the US$ one */
.spec-part--pay .keep { margin-top: 16px; }
.spec-sign { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.spec-sig p { margin: 0; }
.spec-sig__for { font: 400 12px/1.4 var(--mono); color: var(--label); }
.spec-sig__who { margin-top: 4px !important; font-size: 19px; letter-spacing: -.015em; }
.spec-sig__role, .spec-sig__meta { font-size: 14.5px; color: var(--fg-2); }
.spec-sig__line { position: relative; display: block; height: 44px; margin: 6px 0 8px; border-bottom: 1px solid var(--fg); }
.spec-sig__line::before { content: ''; position: absolute; left: -6px; bottom: -6px; width: 12px; height: 12px; background: linear-gradient(var(--note-ink), var(--note-ink)) center / 100% 1px no-repeat, linear-gradient(var(--note-ink), var(--note-ink)) center / 1px 100% no-repeat; }
.spec-sheet__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 20px; margin: 34px 0 0; padding-top: 12px; border-top: 1px solid var(--hair); font: 400 11.5px/1.5 var(--mono); color: var(--fg-2); }
.spec-sheet__stamp { padding: 3px 8px; border: 1.5px solid var(--note-ink); color: var(--note); letter-spacing: .08em; text-transform: uppercase; transform: rotate(-3deg); }
.spec-band { max-width: 900px; }
/* the invoice */
.spec-inv__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding-bottom: 14px; border-bottom: 2px solid var(--fg); }
.spec-inv__title { margin: 0; font-size: clamp(34px, 4.4vw, 54px); line-height: 1; letter-spacing: -.045em; }
.spec-inv__sub { margin: 0; max-width: 24em; font: 400 12px/1.5 var(--mono); color: var(--fg-2); text-align: right; }
.spec-inv__endorse { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 16px 0 0; padding: 10px 14px; border: 1px solid var(--fg); border-left-width: 3px; }
.spec-inv__endorse p { margin: 0; font: 400 12px/1.5 var(--mono); }
.spec-inv__arn { flex: none; color: var(--fg-2); }
.spec-inv__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 22px; }
.spec-inv__h { margin: 0 0 4px; padding-bottom: 8px; border-bottom: 1px solid var(--fg); font: 400 12.5px/1.4 var(--mono); color: var(--label); }
.spec-kv > div { grid-template-columns: 116px minmax(0, 1fr); gap: 12px; padding: 8px 0; }
.spec-kv dd { font-size: 15px; }
.spec-inv__aside { color: var(--fg-2); font-size: 13.5px; }
.spec-inv__meta { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 24px 0 18px; border-top: 1px solid var(--fg); border-bottom: 1px solid var(--fg); }
.spec-inv__meta > div { padding: 10px 12px; border-left: 1px solid var(--hair); min-width: 0; }
.spec-inv__meta > div:first-child { border-left: 0; padding-left: 0; }
.spec-inv__meta dt { font: 400 11.5px/1.4 var(--mono); color: var(--label); }
.spec-inv__meta dd { margin-top: 4px; font-size: 15px; line-height: 1.35; }
.spec-inv__no { font-variant-numeric: tabular-nums; }
.spec-inv__lines td:nth-child(3), .spec-inv__lines td:nth-child(4) { color: var(--fg-2); white-space: nowrap; }
.spec-num { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.spec-inv__lines th:last-child { text-align: right; }
.spec-inv__totals { width: min(100%, 380px); margin: 12px 0 0 auto; }
.spec-inv__totals > div { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--hair); font-size: 15px; font-variant-numeric: tabular-nums; }
.spec-inv__totals dt { color: var(--fg-2); }
.spec-inv__totals .spec-inv__due { border-top: 1.5px solid var(--fg); border-bottom: 0; padding-top: 10px; font-size: 21px; letter-spacing: -.02em; }
.spec-inv__totals .spec-inv__due dt { color: var(--fg); }
.spec-inv__words { margin: 12px 0 0; font-size: 14.5px; color: var(--fg-2); max-width: 44em; }
.spec-inv__blocks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.spec-inv__block { padding: 12px 14px; background: var(--bg); border: 1px solid var(--hair); border-left: 2px solid var(--fg); }
.spec-inv__block p { margin: 0; font-size: 14.5px; line-height: 1.5; }
.spec-inv__block p + p { margin-top: 8px; }
.spec-inv__block--red { border-left-color: var(--note-ink); }
.spec-inv__bl { margin-bottom: 6px !important; font: 400 11.5px/1.4 var(--mono) !important; color: var(--label); }
.spec-inv__block--red .spec-inv__bl { color: var(--note); }
.spec-inv__acct { padding: 10px 12px; border: 1px dashed var(--hair-2); background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--fg) 5%, transparent) 6px 7px); font-size: 13.5px !important; }
.spec-inv__acct span { color: var(--fg-2); }
.spec-inv__end { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: 26px; }
.spec-inv__thanks { margin: 0; font-size: 14.5px; color: var(--fg-2); }
.spec-inv__end .spec-sig { width: min(260px, 50%); }
.spec-check { max-width: 900px; margin-top: clamp(40px, 5vw, 64px); }
.spec-check__h { margin: 0 0 12px; font-size: clamp(26px, 3vw, 38px); line-height: 1.1; letter-spacing: -.03em; }
.spec-check > p { font-size: 17px; max-width: 44em; }
.spec-check__list { counter-reset: c; border-top: 1px solid var(--fg); max-width: 48em; }
.spec-check__list li { counter-increment: c; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--hair); font-size: 16.5px; line-height: 1.55; color: var(--fg-2); }
.spec-check__list li::before { content: counter(c); color: var(--label); }
.spec-check__list b { font-weight: 400; color: var(--fg); }
.spec-check__go { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 18px; }
.spec-check__go .xlink { font-size: 16px; }
/* the specimens on a phone */
@media (max-width: 767px) {
  .spec-sheet__top { flex-direction: column; align-items: flex-start; }
  .spec-sheet__ref { text-align: left; }
  .spec-between > div, .spec-rows > div, .spec-kv > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .spec-part--two, .spec-sign, .spec-inv__cols, .spec-inv__blocks { grid-template-columns: minmax(0, 1fr); }
  .spec-tbl th, .spec-tbl td { font-size: 14.5px; padding-right: 10px; }
  .spec-tbl--pay td { white-space: normal; }
  .spec-inv__head { flex-direction: column; align-items: flex-start; }
  .spec-inv__sub { text-align: left; }
  .spec-inv__endorse { flex-direction: column; align-items: flex-start; }
  .spec-inv__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec-inv__meta > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .spec-inv__meta > div:nth-child(n+3) { border-top: 1px solid var(--hair); }
  .spec-inv__end { flex-direction: column-reverse; align-items: stretch; }
  .spec-inv__end .spec-sig { width: 100%; }
  .spec-price { grid-template-columns: minmax(0, 1fr); }
  .spec-inv__lines th:nth-child(3), .spec-inv__lines td:nth-child(3), .spec-inv__lines th:nth-child(4), .spec-inv__lines td:nth-child(4) { display: none; }
}
@media print {
  .spec-head .back, .spec-note, .spec-band, .spec-check__go { display: none !important; }
  .spec-sheet { border: 0; padding: 0; }
  .specimen::before { display: none; }
  .specimen::after { display: block; position: absolute; top: 0; right: 0; left: auto; bottom: auto; }
}

/* the links to it from the Site plan step (home page and trade pages): in the sentence, so a phone gains no line for them */
.plan__ex, .planc__ex { white-space: nowrap; }
/* —— The example Site plan (/specimen-site-plan, 25 September 2026, night): the US$750 first step, in full,
   for an invented firm. Written by operations/sales/site-plan/example/publish.py from the example's data;
   the PDF beside it is the same plan as a client receives it. Prefix .sp-. —— */
.specimen--example::before, .specimen--example::after { content: 'EXAMPLE, not a client'; }
.sp-doc.spec-sheet::before { content: 'EXAMPLE'; top: 14%; }
.sp-doc .spec-sheet__stamp { text-transform: none; letter-spacing: .04em; }
.sp-doc em { font-style: normal; color: var(--fg-2); }
.sp-doc h4 { font-weight: 400; }
.sp-lab { margin: 0 0 8px; font-size: 14px; line-height: 1.4; color: var(--label); }   /* labels longer than three words are in the sans (COMPONENTS §2) */
.sp-fine { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--fg-2); }
.sp-url { font-size: 14px; color: var(--fg-2); overflow-wrap: anywhere; }
.sp-for { margin: 26px 0 0; font-size: 14px; color: var(--label); }
.sp-doc .sp-title { margin-top: 8px; }
.sp-lede { max-width: 40em; margin: 0 0 18px; font-size: 17px; line-height: 1.55; color: var(--fg-2); }
.sp-sec { margin-top: clamp(44px, 5vw, 64px); padding-top: 22px; border-top: 2px solid var(--fg); }
.sp-sec__eb { margin: 0 0 6px; font-size: 14px; line-height: 1.4; color: var(--label); }
.sp-h { margin: 0 0 14px; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.1; letter-spacing: -.028em; font-weight: 400; }
.sp-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; margin-top: 22px; }
/* the letter, the contents and the ten working days */
.sp-letter__grid { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 28px 40px; align-items: start; }
.sp-letter__body > p:not(.sp-sec__eb) { max-width: 36em; margin: 0 0 12px; font-size: 17px; line-height: 1.6; }
.sp-letter__body .sp-sig { position: relative; margin: 22px 0 0; padding-left: 56px; font-size: 24px; line-height: 1.2; letter-spacing: -.025em; }
.sp-sig::before { content: ''; position: absolute; left: 0; top: 50%; width: 40px; height: 1px; background: var(--fg); }
.sp-toc ol { border-top: 1px solid var(--hair); }
.sp-toc a { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--hair); font-size: 15px; line-height: 1.35; text-decoration: none; }
.sp-toc a span { font: 400 12px/1.6 var(--mono); color: var(--label); }
.sp-toc a:hover { color: var(--note); }
.sp-band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 28px 0 0; border: 1px solid var(--fg); }
.sp-band > div { padding: 14px 16px; border-left: 1px solid var(--hair); }
.sp-band > div:first-child { border-left: 0; }
.sp-band dt { font-size: 14px; color: var(--label); }
.sp-band dd { margin-top: 4px; font-size: 15.5px; line-height: 1.45; }
.sp-days { margin-top: 26px; }
.sp-days__row { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); border: 1px solid var(--fg); }
.sp-days__row li { min-width: 0; padding: 8px 6px; border-left: 1px solid var(--hair); }
.sp-days__row li:first-child { border-left: 0; }
.sp-days__row li > span, .sp-days__row i { display: block; font: 400 11.5px/1.4 var(--mono); font-style: normal; color: var(--label); }
.sp-days__row b { display: block; font-weight: 400; font-size: 14px; line-height: 1.3; }
.sp-days__wd { display: block; color: var(--fg-2); }
.sp-days__row i { margin-top: 2px; color: var(--fg-2); }
.sp-day--done { background: rgba(var(--npb), .16); }
.sp-day--sent { box-shadow: inset 0 0 0 2px var(--note-ink); }
.sp-days__row .sp-day--sent i { color: var(--note); }
/* 01 and 02: the brief, and who the site is for */
.sp-quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sp-quote { margin: 0; padding: 14px 16px; background: var(--bg); border-left: 2px solid var(--fg); }
.sp-quote:last-child:nth-child(odd) { grid-column: 1 / -1; }
.sp-quote blockquote p { margin: 0; font-size: 17px; line-height: 1.45; letter-spacing: -.01em; }
.sp-quote figcaption { margin-top: 8px; font-size: 14px; color: var(--fg-2); }
.sp-doc .sp-facts { margin-top: 24px; border-top: 1px solid var(--hair); }
.sp-doc .sp-facts dt { font: 400 14px/1.5 var(--sans); }
.sp-job { margin: 0 0 18px; padding: 16px 18px; border: 1px solid var(--fg); font-size: clamp(19px, 1.8vw, 23px); line-height: 1.3; letter-spacing: -.015em; }
.sp-job .sp-lab { display: block; letter-spacing: 0; }
.sp-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sp-person { padding: 16px 18px; border: 1px solid var(--hair); background: var(--bg); }
.sp-person__n { margin: 0; font: 400 12px/1 var(--mono); color: var(--label); }
.sp-person__h { margin: 6px 0 4px; font-size: 20px; line-height: 1.2; letter-spacing: -.015em; }
.sp-person__d { margin: 0 0 10px; font-size: 14.5px; line-height: 1.5; color: var(--fg-2); }
.sp-person dl > div { padding: 8px 0; border-top: 1px solid var(--hair); }
.sp-person dt { font-size: 14px; line-height: 1.4; color: var(--label); }
.sp-person dd { margin-top: 2px; font-size: 15px; line-height: 1.45; }
.sp-person .sp-person__stop dt { color: var(--note); }
/* 03: the pages, drawn as a map, and listed */
.sp-map { margin: 6px 0 26px; padding: 16px; border: 1px solid var(--hair); background: var(--bg); }
.sp-map__home { position: relative; margin: 0 0 14px; }
.sp-map__home::after { content: ''; position: absolute; left: 50%; bottom: -14px; height: 14px; border-left: 1px solid var(--label); }
.sp-map__box { display: block; padding: 8px 10px; border: 1px solid var(--fg); background: var(--bg-2); font-size: 14px; line-height: 1.3; }
.sp-map__box > span:first-child { display: block; font: 400 11px/1.4 var(--mono); color: var(--label); }
.sp-map__box b { display: block; font-weight: 400; }
.sp-map__box .sp-url { display: block; margin-top: 2px; }
.sp-map__box--home { width: min(100%, 220px); margin-inline: auto; border-width: 2px; }
.sp-map__cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; padding-top: 14px; border-top: 1px solid var(--label); }
.sp-map__cols ul { display: grid; gap: 6px; margin-top: 8px; padding-left: 8px; border-left: 1px dashed var(--label); }
.sp-map__box--child { border-style: dashed; }
.sp-map__foot { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--hair-2); }
.sp-map__foot ul { display: flex; flex-wrap: wrap; gap: 10px; }
.sp-leftout { margin-bottom: 26px; }
.sp-leftout b { font-weight: 400; color: var(--fg); }
.sp-plist, .sp-secs, .sp-needs { border-top: 1px solid var(--fg); }
.sp-plist > li, .sp-secs > li, .sp-needs > li { display: grid; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hair); font-size: 14.5px; line-height: 1.45; }
.sp-plist > li { grid-template-columns: 30px minmax(0, 1.1fr) minmax(0, 1.5fr) minmax(0, .9fr) minmax(0, .9fr); }
.sp-plist p, .sp-secs p, .sp-needs p { margin: 0; color: var(--fg-2); }
.sp-plist > .sp-plist__head, .sp-secs > .sp-secs__head, .sp-needs > .sp-needs__head { font-size: 14px; color: var(--label); }
.sp-plist__n, .sp-secs__n { font: 400 12.5px/1.6 var(--mono); color: var(--label); }
.sp-plist__name b { display: block; font-weight: 400; font-size: 16px; color: var(--fg); }
.sp-plist__name > span { display: block; }
.sp-plist .sp-plist__act { color: var(--fg); }
.sp-plist__k, .sp-needs__k { display: none; }
/* 04: every page, section by section */
.sp-pg { margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--fg); }
.sp-pg__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.sp-pg__n { font: 400 12.5px/1.4 var(--mono); color: var(--label); }
.sp-pg__h h4 { margin: 0; font-size: 22px; line-height: 1.2; letter-spacing: -.02em; }
.sp-pg__job { max-width: 44em; margin: 8px 0 14px; font-size: 16px; line-height: 1.5; }
.sp-pg__job .sp-lab { display: inline; margin-right: 10px; }
.sp-pg__body { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 24px; align-items: start; }
.sp-draw { display: grid; gap: 4px; padding: 8px 7px 10px; border: 1.5px solid var(--fg); border-radius: 14px; background: var(--bg); }
.sp-draw i { display: grid; place-items: center; border: 1px dashed var(--label); background: rgba(var(--npb), .1); font: 400 10px/1 var(--mono); font-style: normal; color: var(--label); }
.sp-draw .sp-draw__bar { height: 8px; border: 0; background: var(--hair-2); }
.sp-draw--s { height: 18px; }
.sp-draw--m { height: 30px; }
.sp-draw--l { height: 46px; }
.sp-draw .sp-draw--ask { height: 18px; border-color: var(--note-ink); background: none; color: var(--note); }
.sp-secs > li { grid-template-columns: 22px minmax(0, .8fr) minmax(0, 1.4fr) minmax(0, 1fr); }
.sp-secs b { font-weight: 400; font-size: 15px; }
.sp-ask { margin: 12px 0 0; padding: 10px 14px; border-left: 2px solid var(--note-ink); background: var(--bg); font-size: 15.5px; line-height: 1.45; }
.sp-ask .sp-lab { display: block; margin-bottom: 2px; color: var(--note); }
/* 05: the home page's first words, with my notes in red */
.sp-hw { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 32px; align-items: start; margin: 8px 0 28px; }
.sp-phone-fig { margin: 0; }
.sp-phone { display: grid; gap: 4px; padding: 14px 14px 18px; border: 1.5px solid var(--fg); border-radius: 26px; background: var(--bg); }
.sp-phone__nav { display: flex; justify-content: space-between; align-items: center; margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--hair); font-size: 13px; }
.sp-phone__nav i { width: 16px; height: 8px; border-block: 1.5px solid var(--fg); }
.sp-phone .sp-w-h1 { font-size: 22px; }
.sp-phone .sp-w-p { font-size: 13.5px; }
.sp-phone .sp-w-buttons span { padding: 6px 9px; font-size: 12.5px; }
.sp-phone .sp-w-kicker, .sp-phone .sp-w-small { font-size: 12.5px; }   /* the drawn phone: its words are drawn small, as on the study wireframes */
.sp-hw__how p { margin: 0 0 10px; font-size: 16px; line-height: 1.6; }
.sp-doc .sp-note { color: var(--note); font-size: 15px; line-height: 1.45; }
.sp-ms { border-top: 1px solid var(--fg); }
.sp-ms__row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--hair); }
.sp-ms__side .sp-lab { margin: 0; }
.sp-ms__side .sp-note { margin: 4px 0 0; font-size: 14.5px; }
.sp-w-kicker { margin: 0 0 6px; font-size: 14px; color: var(--fg-2); }
.sp-w-h1 { margin: 0 0 8px; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.12; letter-spacing: -.025em; }
.sp-w-h2 { margin: 0 0 8px; font-size: 22px; line-height: 1.2; letter-spacing: -.02em; }
.sp-w-p { margin: 0 0 8px; font-size: 16px; line-height: 1.55; }
.sp-w-small { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--fg-2); }
.sp-w-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.sp-w-buttons span { padding: 7px 12px; border: 1px solid var(--fg); font-size: 13.5px; }
.sp-w-buttons span:first-child { background: var(--fg); color: var(--bg); }
.sp-w-links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 4px; font-size: 15px; }
.sp-w-links span, .sp-w-door > span { text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--fg-2); }
.sp-w-door { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 4px 16px; padding: 10px 0; border-top: 1px solid var(--hair); }
.sp-w-door b { font-weight: 400; font-size: 16.5px; }
.sp-w-door p { margin: 0; font-size: 15px; line-height: 1.5; }
.sp-w-door > span { grid-column: 2; font-size: 14.5px; }
.sp-w-links .arr, .sp-w-door .arr { display: inline; width: 12px; height: 12px; margin-left: 4px; vertical-align: -.05em; }
.sp-w-person { padding: 8px 0; border-top: 1px solid var(--hair); }
.sp-w-person b { font-weight: 500; font-size: 15.5px; }
.sp-w-person p { margin: 2px 0 0; font-size: 15px; line-height: 1.5; }
.sp-w-todo { margin: 4px 0; padding: 10px 12px; border: 1px dashed var(--label); background: rgba(var(--npb), .1); font-size: 14.5px; line-height: 1.5; color: var(--fg-2); }
.sp-w-todo .sp-lab { display: block; margin-bottom: 4px; }
/* 06 and 07: what the design needs, and the open questions */
.sp-needs { margin-bottom: 26px; }
.sp-needs--photos > li { grid-template-columns: 18px minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .8fr); }
.sp-needs--facts > li { grid-template-columns: 18px minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, .6fr); }
.sp-needs b { font-weight: 400; font-size: 15px; }
.sp-box { width: 13px; height: 13px; margin-top: 3px; border: 1.5px solid var(--fg); }
.sp-pill { display: inline-block; padding: 1px 8px; border: 1px solid var(--label); color: var(--label); font: 400 12px/1.5 var(--mono); }
.sp-qs > li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-top: 1px solid var(--hair); }
.sp-qs__n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--key-bg); color: var(--key-fg); font: 400 12px/1 var(--mono); }
.sp-qs h4 { margin: 2px 0 0; font-size: 19px; line-height: 1.3; letter-spacing: -.015em; }
.sp-qs .sp-two { margin-top: 10px; }
.sp-qs .sp-two p:not(.sp-lab) { margin: 0; font-size: 15px; line-height: 1.5; color: var(--fg-2); }
.sp-qs .sp-two .sp-lab { margin-bottom: 4px; }
.sp-qs__ans { display: flex; align-items: flex-end; gap: 12px; margin: 12px 0 0; }
.sp-qs__ans .sp-lab { margin: 0; }
.sp-qs__ans i { flex: 1; border-bottom: 1px dashed var(--hair-2); }
/* 08: what happens next */
.sp-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--fg); }
.sp-steps > li { min-width: 0; padding: 14px 14px 16px; border-left: 1px solid var(--hair); }
.sp-steps > li:first-child { padding-left: 0; border-left: 0; }
.sp-step__n { margin: 0; font: 400 12px/1.4 var(--mono); color: var(--label); }
.sp-step--done .sp-step__n { color: var(--note); }
.sp-steps h4 { margin: 6px 0 10px; font-size: 18px; line-height: 1.25; }
.sp-step__amt { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 8px; margin: 0; padding: 8px 0 8px 10px; border-left: 2px solid var(--note-ink); }
.sp-step__amt span { font-size: 14px; color: var(--fg-2); }
.sp-step__amt b { font-weight: 400; font-size: 19px; letter-spacing: -.02em; }
/* the founding place's figure under the standard one (behind the advocate and founding switches, 26 September 2026): a hairline, not the red of the plan's own schedule */
.sp-step__amt--f { margin-top: 4px; border-left-color: var(--hair-2); }
.sp-step__amt--f b { color: var(--fg-2); }
/* four steps side by side: the visitor's own figure goes under the amount, so "US$3,000 (about £2,280)" never runs out of its column */
@media (min-width: 768px) {
  .sp-step__amt { display: block; }
  .sp-step__amt > span, .sp-step__amt b { display: block; }
  .sp-step__amt b { margin-top: 2px; }
  .sp-step__amt b .usd-loc { display: block; margin-top: 1px; font-size: 13px; }
}
.sp-step__w { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: var(--fg-2); }
.sp-total { margin: 10px 0 0; font-size: 14.5px; color: var(--fg-2); }
.sp-pages { max-width: 48em; margin: 16px 0 0; font-size: 15.5px; line-height: 1.55; }
.sp-pages b { font-weight: 500; }
.sp-credit { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 28px; align-items: end; margin: 22px 0 0; padding: 18px 20px; border: 2px solid var(--fg); }
.sp-credit p { margin: 0; font-size: clamp(20px, 2vw, 26px); line-height: 1.2; letter-spacing: -.02em; }
.sp-credit .sp-lab { display: block; letter-spacing: 0; }
.sp-credit .sp-credit__by { font-size: 14px; letter-spacing: 0; color: var(--fg-2); text-align: right; }
.sp-credit__by b { display: block; margin-top: 2px; font-weight: 400; font-size: 26px; letter-spacing: -.03em; color: var(--fg); }
.sp-two--ruled > div { padding-top: 12px; border-top: 1px solid var(--fg); }
.sp-two--ruled h4 { margin: 0 0 6px; font-size: 18px; }
.sp-two--ruled p { margin: 0 0 8px; font-size: 15.5px; line-height: 1.55; }
.sp-doc .keep { margin-top: 18px; }
.sp-back__dl dd b { display: block; font-weight: 400; }
.sp-back__dl dd span { display: block; font-size: 14.5px; color: var(--fg-2); }
@media (max-width: 1099px) {
  .sp-letter__grid { grid-template-columns: minmax(0, 1fr); }
}
/* below the width where the checks stand beside the plan, they come first: the plan is some forty phone screens long */
@media (max-width: 1239px) {
  .sp-wrap { display: flex; flex-direction: column; }
  .sp-wrap > .spec-check { order: -1; margin: 0 0 clamp(36px, 5vw, 56px); }
  .sp-wrap .sp-dup { display: none; }   /* the head gives both links a few lines above */
}
@media (max-width: 767px) {
  .sp-two, .sp-quotes, .sp-people, .sp-hw, .sp-credit, .sp-band { grid-template-columns: minmax(0, 1fr); }
  .sp-lede, .sp-letter__body > p:not(.sp-sec__eb) { font-size: 16.5px; }
  .sp-band > div + div { border-left: 0; border-top: 1px solid var(--hair); }
  .sp-days__row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sp-days__row li:nth-child(6) { border-left: 0; }
  .sp-days__row li:nth-child(n+6) { border-top: 1px solid var(--hair); }
  .sp-days__row b { font-size: 13px; }
  .sp-map { padding: 12px; }
  .sp-map__box--home { margin-inline: 0; }
  .sp-map__home::after { left: 10px; }
  .sp-map__cols { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-left: 10px; padding: 0 0 0 12px; border-top: 0; border-left: 1px solid var(--label); }
  .sp-plist > li, .sp-secs > li, .sp-needs > li, .sp-needs--photos > li, .sp-needs--facts > li { grid-template-columns: 24px minmax(0, 1fr); gap: 2px 10px; }
  .sp-plist > li > :not(:first-child), .sp-secs > li > :not(:first-child), .sp-needs > li > :not(:first-child) { grid-column: 2; }
  .sp-plist .sp-plist__head, .sp-secs .sp-secs__head, .sp-needs .sp-needs__head { display: none; }
  .sp-plist__k, .sp-needs__k { display: block; margin-top: 6px; font-size: 14px; color: var(--label); }
  .sp-secs__pr { margin-top: 2px !important; }
  .sp-pg__body { grid-template-columns: minmax(0, 1fr); }
  .sp-draw, .sp-wide { display: none; }
  .sp-phone-fig { max-width: 280px; }
  .sp-ms__row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sp-w-door { grid-template-columns: minmax(0, 1fr); }
  .sp-w-door > span { grid-column: 1; }
  .sp-steps { grid-template-columns: minmax(0, 1fr); }
  .sp-steps > li { padding-left: 0; border-left: 0; }
  .sp-steps > li + li { border-top: 1px solid var(--hair); }
  .sp-credit .sp-credit__by { text-align: left; }
}
@media print {
  .sp-toc { display: none; }
  .sp-pg, .sp-person, .sp-quote, .sp-qs > li, .sp-ms__row { break-inside: avoid; }
}

@media (max-width: 767px) {
  .lg-head__row { margin-top: 26px; }
  .lg-papers { grid-template-columns: minmax(0, 1fr); width: 100%; gap: 10px; }
  .lg-paper { grid-template-columns: 46px minmax(0, 1fr); gap: 14px; padding: 12px 14px 12px 12px; }
  .lg-paper__sheet { width: 46px; height: 64px; padding: 7px 6px; gap: 4px; }
  .lg-paper__stamp { font-size: 6.5px; }
  .lg-paper__t { font-size: 17px; }
  .lg-paper__s { font-size: 14px; }
  .lg-sched th, .lg-sched td { padding: 10px 10px 10px 0; }
  .lg-sched tbody th, .lg-sched tfoot th { padding-left: 20px; font-size: 16px; }
  .lg-sched__n { top: 10px; font-size: 15.5px; }
  .lg-sched__t small { font-size: 13px; }
  .lg-sched td { font-size: 16.5px; }
  .lg-sched td small { font-size: 12.5px; }
  .lg-after { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg-after > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .lg-after > div:nth-child(n+3) { border-top: 1px solid var(--hair); }
  .lg-down dl > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .lg-route { grid-template-columns: minmax(0, 1fr); }
  .lg-route > li + li { padding-left: 0; border-left: 0; }
  .lg-route > li + li::before { left: auto; right: 4px; top: -5px; transform: rotate(135deg); }
  .doc .lg-band { margin-top: 36px; }
}
@media (max-width: 420px) {
  .lg-sched thead th small { display: none; }
  .lg-sched td { font-size: 15.5px; }
}

@media print {
  .lg-papers, .lg-go, .lg-band, .rv-cta, .spec-tools { display: none !important; }
  .lg-head__row { margin-top: 10pt; }
  .lg-down, .spec-sheet { box-shadow: none; background: #fff; }
}

/* the founding box in the document's narrow column: squares on the left, everything else beside them */
.doc .lg-fnd { grid-template-columns: auto minmax(0, 1fr); gap: 6px 18px; max-width: 48em; }
.doc .lg-fnd > .fnd__sq { grid-column: 1; grid-row: 1 / 5; }
.doc .lg-fnd > .fnd__h, .doc .lg-fnd > .fnd__count, .doc .lg-fnd > p.if-founding, .doc .lg-fnd > .if-founding-gone { grid-column: 2; grid-row: auto; }
@media (max-width: 767px) {
  .doc .letterhead { padding: 18px 16px; }
  .doc .letterhead .facts > div { grid-template-columns: 84px minmax(0, 1fr); gap: 10px; }
}

/* the specimens on a wide screen: the document, and beside it what to check */
.spec-check__list li > span { min-width: 0; }
@media (min-width: 768px) { .spec-inv__meta { grid-template-columns: 1.35fr 1.3fr .9fr 1fr .8fr 1.1fr; } }
.spec-inv__no { white-space: nowrap; }
@media (min-width: 1240px) {
  .spec-wrap--aside { display: grid; grid-template-columns: minmax(0, 900px) minmax(0, 1fr); gap: 0 clamp(40px, 4vw, 64px); align-items: start; }
  .spec-wrap--aside > .spec-check { position: sticky; top: calc(var(--hdr) + 28px); margin-top: 0; max-height: calc(100vh - var(--hdr) - 44px); overflow-y: auto; overscroll-behavior: contain; }   /* taller than a laptop screen, it scrolls in itself, so its last link can be reached and seen when it has focus (WCAG 2.4.11) */
  .spec-wrap--aside > .spec-check .spec-check__h { font-size: 26px; }
  .spec-wrap--aside > .spec-check > p { font-size: 15.5px; }
  .spec-wrap--aside > .spec-check .spec-check__list li { font-size: 15.5px; grid-template-columns: 24px minmax(0, 1fr); }
  .spec-wrap--aside > .spec-band { grid-column: 1 / -1; }
}
.doc .lg-fnd .fnd__h { margin: 0; font-size: 19px; }

/* ——— The retest fixes (25 September 2026, evening) ———
   the first two clients, said plainly; a page for your trade; the price in your currency; why the
   payment address differs; email for people without WhatsApp */
.work__first { max-width: 40em; margin: 12px 0 0; font-size: 16.5px; line-height: 1.5; color: var(--fg-2); }
.work__for { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; margin: 18px 0 0; font-size: 17px; }
.work__for-l { flex-basis: 100%; font-size: 14px; color: var(--label); }
.work__for a { text-underline-offset: .22em; }
.price__local { max-width: 34em; margin: 0 0 .7em; font-size: 16.5px; line-height: 1.5; color: var(--fg); }
.keep__why { font-size: .9em; white-space: nowrap; text-underline-offset: .2em; }
.bigl__alt { margin: 12px 0 0; font-size: 15.5px; color: var(--fg-2); }
@media (min-width: 768px) { .work__for-l { flex-basis: auto; } }
.fxt { max-width: 36em; margin: 6px 0 4px; }
.fxt caption { font-size: 15px; }
#why-address b { font-weight: 500; }
.tp-price__head .price__local { margin: 14px 0 0; font-size: 16px; max-width: 26em; }
.tp-price__scope { margin: 12px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--fg-2); max-width: 26em; }
.glance__dl > .glance__known { grid-column: 1 / -1; border-left: 0; padding-left: 0; }
.glance__known dd { max-width: 52em; }
.spec-plain { max-width: 40em; margin: 14px 0 0; padding: 12px 16px; background: var(--bg-2); border-left: 2px solid var(--note-ink); font-size: 16.5px; line-height: 1.5; }
.spec-plain b { font-weight: 500; }
@media print { .spec-plain { border: 1px solid #999; background: none; } }
.tblock .tblock__cell .tblock__s.is-local { display: block; }   /* the price in the visitor’s currency shows on a phone too */
@media (min-width: 1100px) and (max-width: 1239px) { .nav > a[href="/#questions"] { display: none; } }   /* three trade pages: Questions leaves the nav where they would not fit (it stays in the page and the footer) */
.bstep__go { margin: 10px 0 0; font-size: 16px; }
.bstep__go a { text-underline-offset: .2em; }
.keys--live { margin-top: 12px; }
.wi__phone { display: none; }
@media (max-width: 767px) { html[data-advocate^="20"] .wi__phone { display: inline; } }
@media (max-width: 767px) { .price .fnd__amounts { display: none; } }   /* the founding amounts are drawn in the bars just above */

/* ——— The follow-up (25 September 2026, night): the voice walk-through, the visitor's own figures,
   and what the home page leaves out on a phone so it stays under 14 screens with every switch on ———
   data-voice="off"        "on" once the voice walk-through is recorded and in assets/media/
                           (voice-walkthrough.mp4 beside its captions, voice-walkthrough.en.vtt):
                           the film in "Who you'd be working with", at the top of the hotel's
                           decisions, and the link from the hotels page appear. */
html:not([data-voice="on"]) .if-voice { display: none !important; }
.voice { margin: 22px 0 0; max-width: 34em; border-top: 1px solid var(--hair-2); border-bottom: 1px solid var(--hair-2); }
.voice > summary { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 0 14px; align-items: center; padding: 14px 0; cursor: pointer; list-style: none; }
.voice > summary::-webkit-details-marker { display: none; }
.voice > summary:hover .voice__lead { color: var(--note); }
.voice__play { position: relative; width: 38px; height: 38px; border: 1px solid var(--note-ink); border-radius: 50%; }
.voice__play::before { content: ''; position: absolute; left: 14px; top: 11px; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent var(--note-ink); }
.voice[open] > summary .voice__play::before { left: 12px; top: 12px; width: 12px; height: 13px; border: 0; border-left: 4px solid var(--note-ink); border-right: 4px solid var(--note-ink); box-sizing: border-box; }
.who__letter .voice .voice__lead, .voice__lead { font-size: 16.5px; line-height: 1.45; color: var(--fg); max-width: none; }
.voice__film { margin: 2px 0 14px; }
.voice__v { display: block; width: min(100%, 280px); height: auto; aspect-ratio: 390 / 844; background: var(--tone-ga); border: 1px solid var(--hair-2); }
.voice__cap { margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--fg-2); }
.voice__words { margin: 0 0 14px; }
.voice__words > summary { display: inline-block; cursor: pointer; font-size: 15.5px; text-decoration: underline; text-underline-offset: .2em; list-style: none; }
.voice__words > summary::-webkit-details-marker { display: none; }
.who__letter .voice .voice__t p, .voice__t p { margin: 10px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--fg-2); max-width: 36em; }
.voice--open { padding: 18px 0 4px; }
.voice--open .voice__lead { margin: 0 0 12px; font-size: 18px; }
.voice-link { margin: 18px 0 0; font-size: 16px; }
@media (min-width: 900px) {
  .voice--open { display: grid; grid-template-columns: 260px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0 32px; align-items: start; max-width: 52em; }
  .voice--open .voice__lead { grid-column: 2; grid-row: 1; }
  .voice--open .voice__film { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
  .voice--open .voice__words { grid-column: 2; grid-row: 2; }
}

/* the visitor's own figure beside each US dollar amount (qb.js §2b, [data-usd]) */
.usd-loc { display: block; margin-top: 2px; font-size: 14px; line-height: 1.3; letter-spacing: 0; color: var(--fg-2); white-space: nowrap; }
.usd-loc--in { display: inline; margin: 0; font-size: .85em; }
.after__v .usd-loc--in { font-size: 15px; }
.planc__v .usd-loc { text-align: right; }
@media (max-width: 767px) {
  /* on a phone the visitor's figure sits under the dollar amount, at the right of the step's first line
     of words, which make room for it (a float), so a long one (AED 11,000) never runs into the step's name */
  .plan__pay .usd-loc { display: block; margin: 1px 0 0; font-size: 13px; text-align: right; }
  html.has-local .plan__s:not(.plan__s--0) > .plan__head + p::before { content: ''; float: right; width: 116px; height: 1.1em; }
  .planc__v .usd-loc { font-size: 13px; }
}

/* the home page on a phone: what is said twice there is said once (the founding box's terms are in the
   bars just above; step 4's hosting and 30 days are in After launch and What if…; the P.S. repeats the
   call times and the reply promise just above it; the link to terms §08 is in the checks' last line) */
@media (max-width: 767px) {
  .plan__more { display: none; }
  .price .fnd { display: block; padding: 12px 0 0; margin-top: 18px; background: none; border: 0; border-top: 1px solid var(--hair); }
  .price .fnd::before, .price .fnd::after { display: none; }
  .price .fnd__sq { display: inline-flex; vertical-align: 1px; margin-right: 10px; padding: 0; }
  .price .fnd__h { display: inline; font-size: 17px; }
  .price .fnd p:not(.fnd__sq) { margin-top: 4px; }
  .price .fnd__more, .price .fnd__hand { display: none; }
  .ps--home { display: none; }
  #what-if .whatif__more { display: none !important; }
  /* the dock stands aside at the close and in the footer (qb.js §9b), so the footer needs no room for it */
  .js .ftr { padding-bottom: calc(36px + env(safe-area-inset-bottom)); }
}

/* how you pay, included, not included and After launch: one row of four on a laptop */
.terms3 > .after { margin-top: 0; }
.terms3 .after__h { margin: 0; font-size: 13px; letter-spacing: 0; }
.terms3__fold { display: none; }
@media (min-width: 1100px) {
  .terms3 { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .95fr); gap: 0 clamp(28px, 2.6vw, 44px); }
  .terms3__note { grid-column: 2 / 4; margin-top: 14px; }
  .terms3 > .after { grid-column: 4; grid-row: 1 / span 2; }
  .terms3 .after dl { grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--fg); }
  .terms3 .after dl > div, .terms3 .after dl > div:first-child { padding: 8px 0 9px; border-left: 0; border-top: 1px solid var(--hair); }
  .terms3 .after dl > div:first-child { border-top: 0; }
  .terms3 .after__v { font-size: 18px; }
  .terms3 .after__s { font-size: 14.5px; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .terms3 > .after { grid-column: 1 / -1; }
}
/* on a phone, included and not included fold behind one button (qb.js adds .is-folded; no script, no fold) */
@media (max-width: 767px) {
  .terms3 > .after { grid-column: 1 / -1; }
  .terms3 .after__h { padding-bottom: 8px; }
  .terms3__fold:not([hidden]) { display: block; grid-column: 1 / -1; position: relative; width: 100%; margin: 0; padding: 12px 36px 12px 0; border: 0; border-top: 1px solid var(--fg); border-bottom: 1px solid var(--hair); background: none; color: var(--fg); font: 400 17px/1.3 var(--sans); letter-spacing: -.015em; text-align: left; cursor: pointer; }
  .terms3__fold[aria-expanded="false"] .qs__plus::after { transform: none; }
  .terms3__fold[aria-expanded="true"] .qs__plus::after { transform: scaleY(0); }
  .terms3.is-folded .incl, .terms3.is-folded .excl, .terms3.is-folded .terms3__note { display: none; }
}
/* the laptop home page under 12 screens with every switch on: the Site plan's column is the widest of
   the four (it carries the most); What if…'s six answers four across; After launch keeps Care's line */
@media (min-width: 1100px) {
  .price .plan { grid-template-columns: minmax(0, 1.45fr) repeat(3, minmax(0, 1fr)); }
  html[data-advocate^="20"] .whatif__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .terms3 .after dl > div:not(:nth-child(2)) .after__s { display: none; }
}
/* "credited in full for six months" in the title block at every width (26 September 2026, after the review: it was
   hidden from 768px, so a laptop read "credited in full" without its six months) */
@media (max-width: 767px) { .calls__fine > .if-booking { display: none; } }   /* the booking page's own note; the footer says nothing loads from anyone else */
/* the work on a wide laptop: the case study links and the QR code share a row (the links one above the other) */
@media (min-width: 1240px) and (min-height: 600px) {
  .work .chapter__text, .work .chapter__rest { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 28px; align-items: start; }
  .work .chapter__text > *, .work .chapter__rest > * { grid-column: 1 / -1; }
  .work .chapter__text > .chapter__links, .work .chapter__rest > .chapter__links { grid-column: 1; flex-direction: column; align-items: flex-start; gap: 12px; }
  .work .chapter__text > .qr, .work .chapter__rest > .qr { grid-column: 2; margin-top: 24px; padding: 0; border: 0; grid-template-columns: 70px minmax(0, 1fr); }
  .work .qr__code { width: 70px; height: 70px; }
  .work .chapter__text .qr { padding-bottom: 0; }
}
/* the free review on a laptop: what the business does and where you are, side by side */
@media (min-width: 1100px) {
  .ticket .fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 14px; }
  .ticket .fields > .field:first-child { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .close__grid > .ticket .fine { display: none; }   /* the buttons say where they go; the privacy page is in the footer */
  .voice > summary { padding: 12px 0; }
  .who__letter .voice .voice__lead { font-size: 15.5px; }
  .qs summary { padding-top: 9px; padding-bottom: 9px; }
  .price .fnd p.if-founding, .price .fnd p.fnd__count { display: inline; }
  .price .fnd p.fnd__count::before { content: ' '; }
}
/* terms §03: under the payment table on a phone, the GST note says it is India's */
.lg-sched__in { display: none; }
@media (max-width: 767px) { .lg-sched__in { display: inline; } }
@media (max-width: 767px) {
  .price .bars__cap { display: none; }   /* on a phone "Drawn to scale." goes; the key above the bars stays */
  .calls__list li { padding: 7px 0; }
}

/* ——— After the review (26 September 2026) ———
   Every figure in the visitor's own currency: a figure inside a bar's red note keeps to the note's line
   (the ticks are placed absolutely, so the figure and its guide must not be), and a payment table's cell
   gives its guide on a line of its own (qb.js §2b). */
.bars__ticks .t-red span { position: static; transform: none; left: auto; right: auto; margin: 0; white-space: nowrap; }
.lg-sched td .usd-loc { font-size: 13px; }
.usd-loc--lead { display: inline; margin: 0; font-size: inherit; line-height: inherit; color: inherit; white-space: normal; }
/* A trade page's first screen on a short laptop screen (1280 x 720, 1366 x 657, 1440 x 790): the H1, the lede and
   the call line may use all eight of their columns, so the title block ends above the fold in every zone. The
   advisers' four-line H1 and the hotels' four-line lede each lose a line, and India's call line fits on one. */
@media (min-width: 1100px) and (max-height: 820px) {
  .tp-hero .h1 { max-width: 16em; }
  .tp-hero .lede { max-width: 40em; }
  .tp-hero .callline { max-width: none; }
  .hero.tp-hero { padding-top: clamp(14px, 2.6vh, 52px); }
}
/* The specimen scope's payment table on a narrow phone (under 480px): it was wider than its box (360px in 319
   with the founding column, 282 in 250 at 320 without), cut mid-word and scrolled sideways with no cue. It stacks
   instead: each payment on its own rows, the amount on the right, "Invoiced", "Due" and the founding figure as
   labelled lines under the name. The markup carries explicit table roles, so a screen reader still reads a table. */
@media (max-width: 479px) {
  .spec-tbl--pay thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .spec-tbl--pay, .spec-tbl--pay tbody, .spec-tbl--pay tfoot { display: block; width: 100%; }
  .spec-tbl--pay tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; row-gap: 2px; padding: 11px 0; border-bottom: 1px solid var(--hair); }
  .spec-tbl--pay tfoot tr { border-top: 1px solid var(--fg); border-bottom: 0; }
  .spec-tbl--pay th, .spec-tbl--pay td, .spec-tbl--pay tfoot th, .spec-tbl--pay tfoot td { display: block; padding: 0; border: 0; white-space: normal; }
  .spec-tbl--pay tr > th { grid-column: 1; grid-row: 1; }
  .spec-tbl--pay tr > td:nth-of-type(1) { grid-column: 2; grid-row: 1 / span 4; text-align: right; }
  .spec-tbl--pay tr > td:nth-of-type(n+2) { grid-column: 1; font-size: 14px; color: var(--fg-2); }
  .spec-tbl--pay td[data-label]::before { content: attr(data-label) ": "; color: var(--fg-2); }
  html[data-advocate^="20"] .spec-tbl--pay td.if-founding { color: var(--note); }
}
/* A design study on the narrowest phones (under 360px): the notes' column had 110px beside the drawing's 138px and
   long words ran into the drawing ("physiotherapist's", "disbursements,"). Under 360px the drawing sits above its
   numbered notes, which then have the full width. */
@media (max-width: 359px) {
  .study { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "wf" "notes"; }
  .study .wf { justify-self: center; width: 150px; }
  .study__notes li { overflow-wrap: anywhere; }
}