/* Site v4 stylesheet, P2 shared builder: public/v4-preview/comp.css (GATE 1, 2026-09-29) promoted verbatim,
   values unchanged. Dark hero, light body. Static: no JS, no raster. Colour tokens from BUILD-MECHANICS-v3 §5.
   The four reconstruction components live in one delimited section below (RECONSTRUCTIONS).
   The components-page-only rules (.cx*, used by public/v4-preview/components.html) are dropped here: that
   page is not part of the live site. Everything else below this line, up to the INNER-PAGE COMPONENTS
   block near the end, is comp.css unchanged. Inner pages open light; the dark stage stays scoped to
   .hero-dark, which only Home's masthead+hero carry. */

@font-face{font-family:"BC Narrow Fallback";src:local("Arial Narrow"),local("ArialNarrow");size-adjust:85%;ascent-override:117.65%;descent-override:23.53%;line-gap-override:0%}
@font-face{font-family:"BC Fallback";src:local("Arial"),local("Liberation Sans"),local("Helvetica");size-adjust:80%;ascent-override:95%;descent-override:22%}
@font-face{font-family:"IS Fallback";src:local("Arial"),local("Liberation Sans"),local("Helvetica");size-adjust:102.74%;ascent-override:94.42%;descent-override:24.33%;line-gap-override:0%}

/* =========================================================
   COLOUR TOKENS (exact). Light is the page; dark is the stage.
   ========================================================= */
:root{
 --bg:#F4F7FB;--surface:#FFFFFF;--sunk:#EAEFF6;--ink:#182332;--ink-2:#526174;
 --accent:#2454D8;--accent-hover:#1B44B8;--accent-ink:#FFFFFF;
 --border:#8391A2;--control-line:#526174;--tint:#DDE7FC;--line:#C9D3E0;--grid:#E5ECF9;
 --focus:var(--accent);
 --mark-p:#0F1B2B;--mark-a:#2454D8;--mark-t:#A9C0F5;
 /* derived, decorative only: the one light behind the hero window */
 --glow:rgba(36,84,216,.10);--glow-2:rgba(36,84,216,.04);
 --display:"Barlow Condensed","BC Narrow Fallback","BC Fallback","Arial Narrow",Arial,sans-serif;
 --body:"Instrument Sans","IS Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
 --mono:ui-monospace,"SFMono-Regular","Cascadia Mono",Menlo,Consolas,monospace;
 --ease:cubic-bezier(.22,1,.36,1);--d1:160ms;--d2:240ms;
 --gut:16px;--cg:16px;--cols:4;--navh:61px;--max:1280px;
 color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
 --bg:#101820;--surface:#1A2633;--sunk:#0C131A;--ink:#EDF3FA;--ink-2:#AFBDCC;
 --accent:#91AEFF;--accent-hover:#B5C8FF;--accent-ink:#0B1426;
 --border:#718095;--control-line:#718095;--tint:#24385A;--line:#2E3E52;--grid:#18212D;
 --focus:var(--accent);
 --mark-p:#FFFFFF;--mark-a:#91AEFF;--mark-t:#3E5C9E;
 --glow:rgba(145,174,255,.16);--glow-2:rgba(145,174,255,.06);
 color-scheme:dark}}
/* the stage: masthead + hero are always dark (scoped block), and the whole page is dark on request */
:root[data-theme="dark"],.hero-dark{
 --bg:#101820;--surface:#1A2633;--sunk:#0C131A;--ink:#EDF3FA;--ink-2:#AFBDCC;
 --accent:#91AEFF;--accent-hover:#B5C8FF;--accent-ink:#0B1426;
 --border:#718095;--control-line:#718095;--tint:#24385A;--line:#2E3E52;--grid:#18212D;
 --focus:var(--accent);
 --mark-p:#FFFFFF;--mark-a:#91AEFF;--mark-t:#3E5C9E;
 --glow:rgba(145,174,255,.26);--glow-2:rgba(145,174,255,.09);
 color-scheme:dark}

/* =========================================================
   TYPE ROLES (Astra: h1 60/36 at 1.02, section 44/30, case titles 34/28, body 17/1.55)
   ========================================================= */
:root{
 --fs-display:clamp(36px, 2.29vw + 27.1px, 60px);   --lh-display:1.02;   /* h1, the page's one bold move */
 --fs-display2:clamp(32px, 1.9vw + 24.6px, 52px);   --lh-display2:1.02;  /* the close, always under the h1 */
 --fs-headline:clamp(30px, 1.33vw + 24.8px, 44px);  --lh-headline:1.05;  /* section h2 */
 --fs-title:clamp(28px, .57vw + 25.8px, 34px);      --lh-title:1.08;     /* case h3 */
 --fs-lead:clamp(17px, .2vw + 15px, 18px);           --lh-lead:1.5;       /* the category paragraph */
 --fs-body:17px;                                     --lh-body:1.55; --measure:62ch;
 --fs-offer:16px;
 --fs-caption:14px;                                  --lh-caption:1.5;
 --fs-fig:clamp(24px, .8vw + 19px, 30px);            /* mono ledger figures */
}
@media (min-width:760px){:root{--fs-caption:15px;--fs-offer:17px}}

.t-display{font:600 var(--fs-display)/var(--lh-display) var(--display);letter-spacing:-.01em}
.t-display2{font:600 var(--fs-display2)/var(--lh-display2) var(--display);letter-spacing:-.008em}
.t-headline{font:600 var(--fs-headline)/var(--lh-headline) var(--display);letter-spacing:-.005em}
.t-title{font:600 var(--fs-title)/var(--lh-title) var(--display);letter-spacing:-.003em}
.lead{font:400 var(--fs-lead)/var(--lh-lead) var(--body);letter-spacing:-.004em}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}

/* =========================================================
   BASE
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--fs-body)/var(--lh-body) var(--body);
 font-kerning:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
b{font-weight:600}
.nw{white-space:nowrap}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
main:focus{outline:none}
svg{display:block}

.skip{position:absolute;left:8px;top:-200px;z-index:10;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;
 background:var(--surface);color:var(--ink);font-weight:600;border:2px solid var(--accent);border-radius:3px;text-decoration:none}
.skip:focus{top:8px}

/* layout: gutters, columns and column gaps (BUILD-MECHANICS §7) */
@media (min-width:360px){:root{--gut:20px}}
@media (min-width:760px){:root{--gut:32px;--cg:24px;--cols:8;--navh:65px}}
@media (min-width:1024px){:root{--gut:48px;--cg:32px;--cols:12}}
@media (min-width:1920px){:root{--gut:64px;--max:1360px}}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}

/* =========================================================
   MASTHEAD (on the stage)
   ========================================================= */
.masthead{background:var(--bg);color:var(--ink);border-bottom:1px solid var(--line)}
.mast{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;column-gap:24px;min-height:var(--navh)}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:52px;color:var(--ink);text-decoration:none;font:600 16px/1.25 var(--body)}
.mark{display:block;width:22.88px;height:28px;flex:none}
.mark .mk-p{fill:var(--mark-p)}.mark .mk-a{fill:var(--mark-a)}.mark .mk-t{fill:var(--mark-t)}
.nav{width:100%;margin-inline:-10px}
.nav ul{display:flex;flex-wrap:wrap;align-items:center}
.nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 10px;
 color:var(--ink);font:500 15px/1.25 var(--body);text-decoration:none;white-space:nowrap}
.nav a:hover{text-decoration:underline;text-underline-offset:5px}
.nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:5px}
/* the divider says: this link leaves the site */
.nav-out{display:flex;align-items:center}
.nav-out::before{content:"";width:1px;height:20px;background:var(--line);margin:0 4px}
.nav-out a{font-size:14px;color:var(--ink-2)}
@media (max-width:359.98px){.nav-out::before{display:none}}
@media (min-width:760px){
 .mast{flex-wrap:nowrap}
 .nav{width:auto;margin:0 -12px 0 0}
 .nav a{padding:0 12px}
 .nav-out::before{margin:0 6px}
}

/* =========================================================
   BUTTONS AND LINKS (one accent: light on the stage, deep on the body)
   ========================================================= */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border-radius:3px;
 background:var(--accent);color:var(--accent-ink);font:600 16px/1.25 var(--body);text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--accent-hover)}
.btn--lg{min-height:60px;padding:0 32px;font-size:18px}
.more{display:inline-flex;align-items:center;min-height:44px;color:var(--accent);font-weight:600;
 text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.more:hover{text-decoration-thickness:2px;color:var(--accent-hover)}
.reply{font-size:14px;line-height:1.45;color:var(--ink-2)}

/* =========================================================
   1. FIRST SCREEN: the dark stage.
   Headline and category above a broad light window (the order and its documents); the offers,
   then the one action, in the column beside it. Phone: offer 1 and the action above the sample,
   offers 2 and 3 straight after it.
   ========================================================= */
.hero{position:relative;isolation:isolate;background:var(--bg);color:var(--ink);
 border-bottom:1px solid var(--line);padding-block:clamp(18px,2.6vw,40px) clamp(48px,5.4vw,80px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);row-gap:16px}
.hero h1{color:var(--ink)}
.hero-cat{color:var(--ink);max-width:58ch}

/* the offers: ruled lines, Instrument Sans 500 */
.offers-lead{font-size:15px;line-height:1.4;color:var(--ink-2);margin-bottom:8px}
.offer-list li{border-top:1px solid var(--line);padding-block:11px 10px;text-wrap:balance;font:500 var(--fs-offer)/1.42 var(--body);color:var(--ink)}
.offer-list{border-bottom:1px solid var(--line)}

.hero-act{display:grid;justify-items:start;row-gap:10px;margin-top:4px}
.hero .rc-order{margin-top:12px}
.offers--b{margin-top:8px}
/* the one light: brand blue at low alpha, behind the window only */
.hero .rc-order::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:-14% -4% 10%;
 background:radial-gradient(closest-side,var(--glow),var(--glow-2) 64%,transparent)}
.hero .rc-order .rc-screen{box-shadow:0 1px 0 rgba(255,255,255,.06),0 30px 70px -34px rgba(0,0,0,.9)}

/* dark page: the stage steps down to the dark set's sunk surface so it still meets the body at a clear edge
   (ink 16.7:1, ink-2 9.8:1, accent 8.6:1 on #0C131A) */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero-dark{background:#0C131A}}
:root[data-theme="dark"] .hero-dark{background:#0C131A}

@media (max-width:759.98px){.hero .btn{width:100%}}
@media (min-width:760px) and (max-width:1023.98px){
 .hero-act{grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:center}
 .offers{max-width:60ch}
}
@media (min-width:1024px){
 /* 12 columns: h1 across; category and the window on 8; the offers and the action on 4 */
 .hero-grid{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto auto auto auto 1fr;column-gap:var(--cg);row-gap:0}
 .hero h1{grid-column:1/-1;grid-row:1}
 .hero-cat{grid-column:1/span 8;grid-row:2;margin-top:14px}
 .hero .rc-order{grid-column:1/span 8;grid-row:3/-1;margin-top:34px}
 .hero .rc-order::before{inset:-12% -8% 14%}
 .hero .rc-order .rc-cap{max-width:none}
 .offers--a{grid-column:9/-1;grid-row:3;margin-top:34px}
 .offers--a .offer-list{border-bottom:0}
 .offers--b{grid-column:9/-1;grid-row:4;margin-top:0}
 .hero-act{grid-column:9/-1;grid-row:5;margin-top:28px}
}

/* =========================================================
   2. CASES: the light body. Hairline rules, two geometries.
   ========================================================= */
.cases{padding-block:clamp(56px,7vw,112px) 0}
.cases-h{max-width:20ch;margin-bottom:clamp(28px,3.4vw,48px)}
.case{display:grid;grid-template-columns:minmax(0,1fr);row-gap:28px;border-top:1px solid var(--line);
 padding-block:clamp(32px,4vw,56px) clamp(40px,5vw,72px)}
.case-text{display:grid;justify-items:start;align-content:start;row-gap:20px}
.case-text > *{max-width:var(--measure)}
.case .t-title{max-width:22ch}
.case-proof{display:grid;row-gap:24px;align-content:start;min-width:0}

/* the two-bar mark, once: reconciled. It sits with the match statement, beside the sample sheet. */
.matched{display:flex;align-items:flex-start;gap:16px;max-width:46ch;font:400 var(--fs-lead)/1.45 var(--body);color:var(--ink)}
.eq{display:flex;flex-direction:column;gap:6px;width:34px;flex:none;margin-top:.42em}
.eq i{display:block;height:5px;background:var(--accent)}

/* ledger: tabular mono figures on hairline rows */
.ledger{width:100%;border-bottom:1px solid var(--line)}
.ledger li{display:grid;grid-template-columns:calc(var(--fs-fig) * 3.9) minmax(0,1fr);column-gap:18px;align-items:baseline;
 border-top:1px solid var(--line);padding-block:10px 9px;color:var(--ink-2)}
.fig{font:500 var(--fs-fig)/1 var(--mono);letter-spacing:-.03em;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums lining-nums}

.owned{width:100%}
.also{color:var(--ink-2);font-size:15px;line-height:1.5}
/* K05 figures: one removable body-size sentence, tabular numerals */
.figs{color:var(--ink-2)}
.num{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.app{color:var(--ink)}
.case--audit .rc-phone{--rc-phone-w:300px}
.case > .more{justify-self:start}

@media (min-width:1024px){
 .case{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto 1fr;column-gap:var(--cg);row-gap:0;align-items:start}
 /* Case 1: the text on 5 columns, the match statement and the half-width sheet on 6 */
 .case--mig > .t-title{grid-column:1/span 5;grid-row:1}
 .case--mig .case-text{grid-column:1/span 5;grid-row:2;margin-top:28px}
 .case--mig .case-proof{grid-column:7/span 6;grid-row:1/-1;padding-top:6px}
 /* Case 2, the other geometry: the phone first, top-aligned with the title */
 .case--audit .rc-phone{--rc-phone-w:280px;grid-column:1/span 5;grid-row:1/-1}
 .case--audit .case-text{grid-column:7/span 6;grid-row:1}
 .case--audit .t-title{max-width:28ch}
 .case--audit > .more{grid-column:7/span 6;grid-row:2;margin-top:16px}
 /* v4b review (Astra fix 4): a shorter interval from the audit case into Who */
 .case--audit{padding-bottom:40px}
}

/* =========================================================
   3. WHO: quiet. YJ Eng and the correspondence.
   ========================================================= */
.who{padding-block:clamp(48px,6vw,96px) clamp(72px,9vw,144px)}
.who-grid{display:grid;grid-template-columns:minmax(0,1fr);row-gap:28px}
.who h2{max-width:14ch}
.who-body{display:grid;justify-items:start;row-gap:1.1em;max-width:58ch}
.who-body > *{width:100%}
.who-body > .more{width:auto}
.sig{display:grid;row-gap:2px;margin-top:10px;padding-top:18px;border-top:1px solid var(--line)}
.sig-name{font:600 var(--fs-title)/1.1 var(--display)}
.sig-role{font-size:var(--fs-caption);color:var(--ink-2)}
@media (min-width:1024px){
 .who-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg)}
 .who h2{grid-column:1/span 4}
 .who-body{grid-column:6/span 6}
 .who{padding-top:48px}
}

/* =========================================================
   4. CLOSE: neutral, ruled. A heavy rule, the second-largest type, the button.
   ========================================================= */
.close{padding-bottom:clamp(64px,8vw,128px)}
.close-grid{display:grid;grid-template-columns:minmax(0,1fr);row-gap:28px;border-top:2px solid var(--ink);padding-top:clamp(36px,5vw,72px)}
.close h2{max-width:12ch}
.close-side{display:grid;justify-items:start;row-gap:16px;max-width:40ch}
.close-side p:first-child{font:400 var(--fs-lead)/var(--lh-lead) var(--body);color:var(--ink);margin-bottom:8px}
@media (max-width:759.98px){.close .btn{width:100%}}
@media (min-width:1024px){
 .close-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg);align-items:end}
 .close h2{grid-column:1/span 7}
 .close-side{grid-column:8/span 5}
}

/* =========================================================
   FOOTER: identity (pending), reach, legal.
   ========================================================= */
.foot{border-top:1px solid var(--line);padding-block:40px 48px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1fr);row-gap:24px}
.foot-id{display:grid;row-gap:4px;justify-items:start}
.foot-name{font-weight:600;color:var(--ink)}
/* the pending identity reads as a status */
.pending{display:inline-flex;align-items:center;gap:8px;font:500 12px/1.4 var(--mono);color:var(--ink-2)}
.pending::before{content:"";flex:none;width:7px;height:7px;border:1.5px solid var(--accent)}
.foot-links{display:flex;flex-direction:column;align-items:flex-start}
.foot nav .foot-links{flex-direction:row;flex-wrap:wrap;column-gap:24px}
@media (min-width:760px){.foot nav .foot-links{flex-direction:column}}
.foot-links a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:5px;overflow-wrap:anywhere}
.foot-links a:hover{text-decoration-color:currentColor}
.privacy{max-width:48ch}
@media (min-width:760px){
 .foot-grid{grid-template-columns:repeat(8,minmax(0,1fr));column-gap:var(--cg)}
 .foot-id{grid-column:1/span 3}.foot-reach{grid-column:4/span 3}.foot nav{grid-column:7/span 2}
 .privacy{grid-column:1/-1}
}
@media (min-width:1024px){
 .foot-grid{grid-template-columns:repeat(12,minmax(0,1fr))}
 .foot-id{grid-column:1/span 3}.foot-reach{grid-column:4/span 3}.foot nav{grid-column:7/span 2}
 .privacy{grid-column:9/span 4}
}

/* ===== RECONSTRUCTIONS ===== */
/* Four code-drawn sample screens: rc-order, rc-phone, rc-sheet, rc-index (COMPONENTS.md says how to embed them).
   Markup: <figure class="rc rc-NAME"> > <div class="rc-screen" role="img" aria-label="Sample data: ..."> + <figcaption class="rc-cap">.
   The drawing always uses the light token set, scoped on .rc-screen (Astra: the light interfaces and the paper stay light
   on the dark stage and in dark mode). The caption follows the tokens of wherever the figure sits, so nothing here
   depends on .hero-dark. Layout follows the figure's own width through container queries (container "rc"), so the same
   markup works in a 66ch reading column or a full-width band. Text inside the drawings is never under 11px.
   Motion hooks (static here): data-motion="frame" on every .rc-screen, "order-docs" on the order's connector. */

.rc{container:rc / inline-size;position:relative;display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 32px;min-width:0;margin:0}
.rc-screen{
 --bg:#F4F7FB;--surface:#FFFFFF;--sunk:#EAEFF6;--ink:#182332;--ink-2:#526174;
 --accent:#2454D8;--border:#8391A2;--control-line:#526174;--tint:#DDE7FC;--line:#C9D3E0;--grid:#E5ECF9;
 color-scheme:light;position:relative;flex:1 1 100%;min-width:0;overflow:hidden;
 background:var(--surface);color:var(--ink);font:400 14px/1.4 var(--body);text-align:left;
 border:1px solid var(--border);border-radius:3px;
 box-shadow:0 1px 2px rgba(16,24,32,.06),0 22px 44px -26px rgba(16,24,32,.42)}
/* the sample strip: mono, full ink on the sunk surface (13.7:1), outside the drawn controls */
.rc-tag{margin:0;padding:6px 12px 5px;background:var(--sunk);border-bottom:1px solid var(--line);
 font:500 12px/1.4 var(--mono);letter-spacing:.01em;color:var(--ink)}
.rc-cap{flex:1 1 100%;max-width:62ch;text-wrap:balance;font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--ink-2)}
.rc-id{font-family:var(--mono);font-variant-numeric:tabular-nums}
@container rc (min-width:520px){.rc-tag{padding:7px 16px 6px;font-size:12.5px}}

/* ---- rc-order: an Odoo-style collection order with its documents. Wide: form | documents panel, one blue
   connector from the reference to the Documents heading. Narrow: a short summary above the documents list,
   the connector turning down to the Documents heading. ---- */
.rc-order .rc-screen{max-width:1040px}
.rc-bar{display:flex;align-items:center;min-height:36px;padding:0 12px;border-bottom:1px solid var(--line);
 font:600 13px/1.3 var(--body);color:var(--ink)}
.rc-body{--pd:14px;--dh:40px;position:relative;display:grid;grid-template-columns:20px minmax(0,1fr);
 grid-template-areas:"no no" "link fields" "link dhead" ". docs";padding:14px var(--pd) 12px}
/* the documents panel: page-tone surface behind the Documents heading and its list */
.rc-body::before{content:"";grid-column:1/-1;grid-row:3/5;margin:0 calc(-1 * var(--pd)) -12px;background:var(--bg);border-top:1px solid var(--line)}
.rc-ref{display:contents}
.rc-no{grid-area:no;font:600 22px/1.15 var(--body);font-variant-numeric:tabular-nums;letter-spacing:-.005em;color:var(--ink)}
/* rc-link: the order-to-Documents connector (P3 motion, moment 1). A plain border-drawn elbow (P2's shape,
   restored) plus its square end marker, not an SVG: an SVG path stretched by a non-uniform, preserveAspectRatio
   "none" viewBox from a 100x100 path onto the wide layout's ~234x2 box hits a Chrome bug where
   vector-effect:non-scaling-stroke plus pathLength lays the dasharray out in screen units instead of path
   units, so the "finished" line fell tens of pixels short of the Documents heading; dropping non-scaling-stroke
   instead makes the degenerate y-scale (≈0.02 in that box) render the stroke as a sub-pixel hairline. A border
   box has neither problem. CSS default (clip-path fully open) is the finished, fully-connected state, so
   no-JS and reduced-motion show it complete. v4b review (Astra fix 5): below 520px this is the elbow (a
   vertical stem into a short foot), so its hidden start must clip vertically, not horizontally, or the
   reveal exposes the stem sideways instead of tracing it top to bottom; the --mo-clip-start custom property
   carries each shape's own start clip (no JS measurement) and the motion script reads it via
   getComputedStyle at run time and tweens every shape back to the same finished clip-path (inset(0 0 0 0))
   over 400ms, ending with the marker landing on the heading. */
.rc-link{grid-area:link;position:relative;margin:6px 0 calc(var(--dh) / 2 - 1px) 7px;pointer-events:none;
 border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);clip-path:inset(0 0 0 0);
 --mo-clip-start:inset(0 0 100% 0)}
.rc-link::after{content:"";position:absolute;right:-5px;bottom:-5px;width:8px;height:8px;background:var(--accent)}
.rc-fields{grid-area:fields;padding:6px 0 12px 4px}
.rc-f{display:grid;grid-template-columns:minmax(64px,.42fr) minmax(0,1fr);column-gap:12px;align-items:baseline;
 padding-block:6px 5px;border-bottom:1px solid var(--line)}
.rc-f > :first-child{font-size:13px;color:var(--ink-2)}
.rc-f > :last-child{font-weight:500;color:var(--ink)}
.rc-f--x{display:none}
.rc-dhead{grid-area:dhead;display:flex;flex-wrap:wrap;align-items:center;column-gap:10px;min-height:var(--dh);padding-left:10px;
 font:600 14px/1.3 var(--body);color:var(--ink)}
.rc-dref{padding:3px 6px 2px;border-radius:2px;background:var(--tint);font:500 12px/1.3 var(--mono);color:var(--accent)}
.rc-docs{grid-area:docs;padding:0 0 4px 10px}
.rc-docs li{display:flex;align-items:center;gap:10px;padding-block:7px 6px;border-top:1px solid var(--line);
 font:400 12.5px/1.35 var(--mono);color:var(--ink);overflow-wrap:anywhere}
.rc-file{position:relative;flex:none;width:11px;height:14px;border:1.5px solid var(--control-line);border-radius:1.5px}
.rc-file::after{content:"";position:absolute;left:2px;right:2px;top:3px;height:1.5px;background:var(--control-line);box-shadow:0 3px 0 var(--control-line)}
@container rc (min-width:520px){
 .rc-bar{min-height:40px;padding:0 18px;font-size:14px}
 .rc-body{--pd:clamp(18px,3cqi,26px);--dh:clamp(64px,11.4cqi,90px);grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  grid-template-areas:"ref dhead" "fields docs";padding:0}
 .rc-body::before{grid-column:2;grid-row:1/-1;margin:0;border-top:0;border-left:1px solid var(--line)}
 .rc-ref{grid-area:ref;display:flex;align-items:center;min-height:var(--dh);padding-left:var(--pd)}
 .rc-no{font-size:clamp(24px,3.7cqi,30px)}
 .rc-link{flex:1;align-self:center;height:2px;margin:0 calc(-1 * (var(--pd) - 12px)) 0 18px;border:0;background:var(--accent);
  --mo-clip-start:inset(0 100% 0 0)}
 .rc-link::after{right:-4px;top:-3px;bottom:auto}
 .rc-fields{padding:0 var(--pd) calc(var(--pd) + 4px)}
 .rc-f{padding-block:12px 11px;grid-template-columns:minmax(80px,.36fr) minmax(0,1fr)}
 .rc-f > :last-child{font-size:15px}
 .rc-f--x{display:grid}
 .rc-dhead{padding:0 var(--pd);font-size:15px}
 .rc-dref{font-size:12.5px}
 .rc-docs{padding:0 var(--pd) calc(var(--pd) + 4px)}
 .rc-docs li{padding-block:13px 12px;font-size:13px}
}

/* ---- rc-phone: the driver-app signing screen. A light screen in a thin dark rounded outline;
   no hardware, no status bar. Width: --rc-phone-w (280px default; a page may set up to 300px on phones). ---- */
.rc-phone{--rc-phone-w:280px}
.rc-phone .rc-screen{flex:0 0 auto;width:min(100%,var(--rc-phone-w));padding:5px;border:0;border-radius:30px;background:#182332;
 box-shadow:0 0 0 1px var(--border),0 22px 40px -24px rgba(16,24,32,.55);--mo-rx:29px}
.rc-ph{overflow:hidden;border-radius:25px;background:var(--surface)}
.rc-ph .rc-tag{padding:12px 14px 7px;text-align:center}
.rc-ah{padding:11px 16px 10px;border-bottom:1px solid var(--line);font:600 15px/1.3 var(--body);color:var(--ink)}
.rc-os{display:grid;row-gap:2px;padding:12px 16px 14px}
.rc-os .rc-id{font-weight:600;font-size:16px;color:var(--ink)}
.rc-os span:nth-child(2){font-weight:500}
.rc-os span:nth-child(3){font-size:13px;color:var(--ink-2)}
.rc-sg{padding:0 16px}
.rc-lbl{margin:0 0 6px;font:600 13px/1.3 var(--body);color:var(--ink-2)}
.rc-pad{position:relative;height:150px;border:1.5px solid var(--control-line);border-radius:6px;background:var(--bg)}
.rc-pad svg{position:absolute;left:8%;top:14%;width:84%;height:56%;overflow:visible}
.rc-pad path{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.rc-base{position:absolute;left:12px;right:12px;bottom:30px;border-top:1px dashed var(--border)}
.rc-hint{position:absolute;left:12px;bottom:9px;font-size:12px;line-height:1.2;color:var(--ink-2)}
.rc-acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 16px 18px}
.rc-acts span{display:flex;align-items:center;justify-content:center;min-height:40px;border-radius:6px;font:600 14px/1.2 var(--body)}
.rc-acts span:first-child{border:1.5px solid var(--control-line);color:var(--ink)}
.rc-acts span:last-child{background:var(--ink);color:var(--surface)}
.rc-phone .rc-cap{flex:1 1 26ch;max-width:36ch}

/* ---- rc-sheet: the month-end comparison, paper. Report | Legacy .NET | Odoo; identical text entries per row,
   no amounts, no zeroes, no difference column. Narrow: each report becomes a labelled pair. ---- */
.rc-sheet .rc-screen{max-width:880px;border-radius:2px;--mo-rx:2px}
.rc-h{margin:0;padding:12px 14px 10px;font:600 15px/1.3 var(--body);color:var(--ink)}
.rc-sheet .rc-tag,.rc-index .rc-tag{border-top:1px solid var(--line)}
.rc-tbl{padding:2px 14px 12px}
.rc-tr{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:1px;padding-block:9px 8px;border-bottom:1px solid var(--line);
 font-variant-numeric:tabular-nums lining-nums}
.rc-tr:last-child{border-bottom:0}
.rc-tr > :first-child{grid-column:1/-1;font-weight:600}
.rc-th{display:none}
.rc-v{display:contents}
.rc-k{font-size:13px;font-weight:400;color:var(--ink-2)}
@container rc (min-width:420px){
 .rc-h{padding:14px 18px 12px}
 .rc-tbl{padding:2px 18px 14px}
 .rc-th{display:grid;padding-block:10px 8px;border-bottom:1px solid var(--control-line);font:600 12.5px/1.3 var(--body);color:var(--ink-2)}
 .rc-tr{grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr);row-gap:0}
 .rc-tr > :first-child{grid-column:auto;font-weight:500}
 .rc-th > :first-child{font-weight:600}
 .rc-v{display:block}
 .rc-k{display:none}
}

/* ---- rc-index: the evidence-pack index, paper. Heading, then the strip, then the index: each container as a
   group line, its collection orders and page references under it, and a checking column left empty.
   About 480px wide; full available width on phones. ---- */
/* portrait paper: at least 5:6, taller when the rows need it (no clipping, so the content sets the minimum) */
.rc-index .rc-screen{flex:0 1 480px;max-width:480px;aspect-ratio:5/6;overflow:visible;border-radius:2px;--mo-rx:2px}
.rc-index .rc-h{padding:22px 16px 12px;font-size:16px}
.rc-index .rc-tbl{padding:4px 16px 26px}
.rc-ir{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) 4.4em;column-gap:10px;align-items:center;
 padding-block:7px 6px;border-bottom:1px solid var(--line);font-size:13.5px;font-variant-numeric:tabular-nums lining-nums}
.rc-ir.rc-th{display:grid;padding-block:10px 7px;border-bottom:1px solid var(--control-line);font:600 12.5px/1.3 var(--body);color:var(--ink-2)}
.rc-ir > :last-child{justify-self:center}
.rc-ir .rc-id{padding-left:12px;font-size:12.5px}
.rc-ig{padding-block:12px 5px;border-bottom:1px solid var(--line);font:600 13.5px/1.3 var(--body);color:var(--ink)}
.rc-box{display:block;width:14px;height:14px;border:1.5px solid var(--control-line);border-radius:1px}
.rc-index .rc-cap{flex:1 1 26ch;max-width:40ch}
@container rc (min-width:520px){.rc-index .rc-h{padding:26px 24px 14px}.rc-index .rc-tbl{padding:4px 24px 32px}}

/* ---- mo-frame: the decorative edge stroke on every [data-motion="frame"] .rc-screen (P3 motion, moment 3).
   Static markup, first child of .rc-screen; inset 1px so the 2px accent stroke sits just inside the screen's
   own border. rx follows --mo-rx (3px default, the base .rc-screen radius; 2px on the paper screens, 29px on
   the phone bezel). pathLength="1" on the rect normalises stroke-dasharray/dashoffset the same way as
   .rc-link's path; CSS default (dashoffset 0) is the finished, fully-stroked state, so no-JS and
   reduced-motion show it complete without needing JS to measure anything. ---- */
.mo-frame{position:absolute;top:1px;left:1px;width:calc(100% - 2px);height:calc(100% - 2px);pointer-events:none;overflow:visible}
.mo-frame rect{fill:none;stroke:var(--accent);stroke-width:2px;vector-effect:non-scaling-stroke;
 rx:var(--mo-rx,3px);stroke-dasharray:1;stroke-dashoffset:0}
/* ===== /RECONSTRUCTIONS ===== */

@media print{.masthead nav,.skip{display:none}.hero .rc-order::before{display:none}}

/* =========================================================
   INNER-PAGE COMPONENTS (P2 shared builder, new). Everything above this line is comp.css unchanged.
   Inner pages open light: their masthead is plain `.masthead` (no `.hero-dark`), so it already reads in
   the light token set through the ambient `--bg`/`--ink` on `.masthead` above — no override needed here.
   These rules reuse the type roles, `.lead`, `.more`, `.also`, `.reply` and `.btn` already defined above,
   and the `.rc`/`.rc-*` reconstruction components verbatim from COMPONENTS.md; nothing here duplicates them.
   A parent selector written `:where(...)` carries zero specificity on purpose, so a component's own width
   (e.g. `.matched`, `.rc-screen`) always wins over the generic column cap it sits inside.
   ========================================================= */

/* PAGE HEAD: h1 + one optional lead paragraph. Generous top space; one hairline closes it off, the same
   structural role `.hero`'s border-bottom plays on Home. */
.pagehead{padding-block:clamp(56px,7vw,112px) clamp(28px,3.4vw,48px);border-bottom:1px solid var(--line)}
.pagehead .lead{margin-top:16px;max-width:60ch}

/* PROSE: the reading column. Stack as many `.prose` sections as the page needs; each carries its own
   padding-block, so plain whitespace (not hairlines) separates them, matching `.who`/`.close` on Home.
   A direct child — p, ul, h2, h3, figure.rc, `.work-entries`, `.contact-body` — is capped at 66ch and
   takes the row-gap rhythm; give a child its own narrower width (as `.matched` already does) and that wins. */
.prose{padding-block:clamp(28px,3.4vw,48px);display:grid;justify-items:start;row-gap:1.1em}
:where(.prose) > *{width:100%;max-width:66ch}
.prose > .more{width:auto}

/* space before the shared close on inner pages: Home gets this rhythm from `.who`'s own padding-bottom;
   inner pages end in `.prose`, whose section is the element actually adjacent to `.close`. */
section:has(> .prose) + .close{margin-top:clamp(40px,5vw,96px)}

/* a reading-width reconstruction is simply a direct child of `.prose` (COMPONENTS.md governs the figure
   itself); `.rc-sheet`/`.rc-index` already cap narrower than 66ch, so nothing more is needed. */

/* generic prose list (About's "work you can send us", Contact's "send" list): hairline rows, the same
   grammar as `.ledger`/`.offer-list` above, sized to body text. */
.plist{border-bottom:1px solid var(--line);width:100%}
.plist li{border-top:1px solid var(--line);padding-block:11px 10px}

/* RC-BAND: a reconstruction at full content width, breaking out of the 66ch column between two `.prose`
   sections. Markup: `<div class="wrap rc-band"><figure class="rc rc-NAME">…</figure></div>`, a sibling of
   the `.prose` sections around it, never nested inside one (nesting it would clip it to 66ch). */
.rc-band{padding-block:clamp(8px,1vw,16px) clamp(40px,5vw,72px)}

/* WORK: the two case entries (each in the composition's own case grammar: `.ledger`/`.figs`) and the
   "Also on Odoo" line. `.work-entries` is a direct child of `.prose`, so it inherits the 66ch cap
   (`:where(.prose) > *`, zero specificity); it opts back out here to the full `.wrap`, the same pattern
   `.matched` already uses, so the two-column entry below has room to be a composition, not a thin column. */
.work-entries{display:grid;row-gap:0;width:100%;max-width:none}
.work-entry{display:grid;row-gap:20px;justify-items:start;border-top:1px solid var(--line);padding-block:clamp(28px,3.4vw,44px)}
.work-entries > .work-entry:first-child{border-top:0;padding-top:0}
.work-entry-text{display:grid;row-gap:14px;justify-items:start;align-content:start;min-width:0}
.work-entry-text > *{max-width:var(--measure)}
.work-entry > .ledger,.work-entry > .figs{width:100%;max-width:66ch}
.work-entries > .work-also{border-top:1px solid var(--line);padding-top:clamp(28px,3.4vw,44px);margin-top:clamp(28px,3.4vw,44px);
 display:grid;row-gap:10px;justify-items:start;max-width:66ch}
@media (min-width:1024px){
 .work-entry{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg);row-gap:0;align-items:start}
 .work-entry-text{grid-column:1/span 7}
 .work-entry > .ledger,.work-entry > .figs{grid-column:9/span 4;max-width:none;align-self:start}
}

/* CONTACT: the address as a large link, the three prompts (`.plist`), the reply line (`.reply`, reused
   verbatim) and the client-sign-in line. All inside one `.prose` section, so still capped at 66ch. */
.contact-addr{display:inline-flex;align-items:center;min-height:60px;font:600 var(--fs-title)/1.15 var(--display);
 color:var(--accent);text-decoration:none;overflow-wrap:anywhere}
.contact-addr:hover{color:var(--accent-hover);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.contact-body{display:grid;row-gap:16px;justify-items:start;width:100%}
.contact-lead{font:500 var(--fs-offer)/1.4 var(--body);color:var(--ink-2)}
.contact-signin{color:var(--ink-2)}
.contact-signin a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-weight:600;
 text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.contact-signin a:hover{color:var(--accent)}
@media (min-width:1024px){.contact-addr{font-size:var(--fs-headline)}}