/* THE PAPER — one semantic document, one stylesheet, two shells (slice 9).
   Same data, one template: a theme is a stylesheet, and `structure` is the
   first. It runs bar-to-bottom and sits on THE grid: business 1–6 / meta
   7–12; client 1–6 / project 7–12; note 1–6 beside totals 9–12 — the
   form's twin. Linked by studio.css's shell (Preview, print) and by the
   client shell (the pay page, the receipt): what the studio saw in Preview
   is what the client sees, by the same CSS. Reads tokens.css only. */
.paper,.paper *{box-sizing:border-box}
/* ── the paper ── */
.paper{background:#fff;margin:0;padding:calc(8*var(--u)) var(--content-edge);min-height:calc(100vh - var(--bar) - 2px);position:relative}   /* to the bottom of the viewport under the masthead/bar — its cell plus its line (the chrome pass, Sep 3) */
.paper .p-head,.paper .p-who{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.p-head>.p-from{grid-column:1 / span 6}
.p-head>.p-meta{grid-column:7 / span 6}
.p-from{font-size:13px;line-height:1.5;color:var(--ink2)}
.p-from b{display:block;color:var(--ink);font-weight:500;font-size:14px}
.p-meta{text-align:right}
.p-meta .n{font:400 34px/1 var(--display)}
.p-meta dl{margin:14px 0 0;display:grid;grid-template-columns:auto auto;justify-content:end;gap:4px 16px;font-size:13px}
.p-meta dt{color:var(--ink3);text-align:left}
.p-meta dd{margin:0;font-family:var(--mono)}
.p-who{margin-top:56px;padding-top:16px;border-top:1px solid var(--rule)}
.p-who>div:first-child{grid-column:1 / span 6}
.p-who>div:last-child{grid-column:7 / span 6}
.p-lbl{font:500 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-bottom:8px}
.p-big{font:400 22px/1.2 var(--display)}
.p-sm{font-size:13px;color:var(--ink2);margin-top:8px;line-height:1.6}
.p-items{width:100%;border-collapse:collapse;margin-top:48px;font-size:14px}
.p-items th{font:500 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);text-align:left;padding:0 0 10px;border-bottom:1px solid var(--ink)}
.p-items td{padding:12px 0;border-bottom:1px solid var(--rule);vertical-align:top;line-height:1.4}
.p-items td.n{text-align:right;font-family:var(--mono);white-space:nowrap}
.p-items td.d,.p-items th:first-child{width:calc((100% - 11*var(--gutter))/12*2 + var(--gutter));font-family:var(--mono);font-size:13px;color:var(--ink2)}
.p-items .sub{font-family:var(--mono);font-size:12px;color:var(--ink2);margin-top:3px}
.p-items .desc{font-size:13px;color:var(--ink2);margin-top:3px}
.p-tot{display:grid;grid-template-columns:1fr 1fr;gap:var(--u) 0;margin:24px 0 0 auto;font-size:14px;width:calc((100% - 11*var(--gutter))/12*4 + 3*var(--gutter))}   /* cols 9–12, like the form's */
.p-tot .k{color:var(--ink2)}.p-tot .v{text-align:right;font-family:var(--mono)}
.p-tot .big{font:400 20px/1 var(--display);padding-top:10px;border-top:1px solid var(--ink)}
.p-tot .big.v{font-family:var(--mono);font-weight:500;font-size:20px}
.p-pay{font-size:14px;color:var(--ink2);line-height:1.7}
.p-pay b{color:var(--ink);font-weight:500}

/* ── theme: STRUCTURE (the legacy template, mapped onto THE grid). A
   template is a stylesheet: this class on .paper is one. Vocabulary: logo ·
   vertical rule · business; INVOICE NO. over the numeral; label·rule·value
   blocks; key/value lists; numbered BOXED items. Paper lines are 1px ink —
   the paper prints. Rules by construction: the rule is the business block's
   own border; the logo is a box two columns wide whose HEIGHT is the
   business block's (flex-stretch); the item number owns col 1, the box
   starts on col 2; the date column exists only if any item has a date. ── */
.paper.structure{--pl:var(--line)}   /* the paper's lines are THE line — same stroke, same colour as the fields (Chris, Aug 29; matches the legacy Structure's mint rules). Print may want to override --pl. */
.structure .p-head{align-items:start;padding-bottom:calc(8*var(--u))}
.structure .p-studio{grid-column:1 / span 6;display:flex;align-items:stretch;align-self:start;gap:var(--gutter)}   /* as tall as its own text, never the meta column's */
.structure .p-logo{flex:0 0 calc((100% - 5*var(--gutter))/6 + var(--gutter));align-self:stretch;margin:4px 0;position:relative}   /* Sep 2: one column + a gutter wide; the box's HEIGHT is the text block's minus its 4px paddings (the text sets it), and the mark sits against the rule, so the gutter to the rule equals the gutter past it — the slack falls in the paper's margin. (A box whose width follows its height is a one-pass problem flex can't solve; not worth script.) */
.structure .p-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:right center;display:block}   /* out of the flow so it contributes no height — the old width:100%;height:100% pattern let the image inflate the row */
.structure .p-logo.stand-in{background:var(--rule)}   /* the styleguide's box when there is no mark */
.structure .p-from{border-left:var(--pl);padding:4px 0 4px 16px}
.structure .p-meta{grid-column:9 / span 4}
.structure .p-meta .lbl-no{font:500 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin-bottom:6px}
.structure .p-meta dl{margin-top:16px}
.structure .p-who{margin-top:0;padding-top:0;border-top:0}
.structure .p-lbl{color:var(--ink);line-height:21px;padding-bottom:var(--u);border-bottom:var(--pl);margin-bottom:12px}   /* Sep 2: the label's line box is the totals row's (21), the same 8 beneath: every label rule sits where a totals rule would */
.structure .p-big{font:400 34px/1.1 var(--display)}   /* client and project at the numeral's size: one hierarchy */
.structure .p-kv{margin:calc(4*var(--u)) 0 0;display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:4px;font-size:13px}
.structure .p-kv dt{color:var(--ink2)}.structure .p-kv dd{margin:0;color:var(--ink)}
.structure .p-items{margin-top:calc(8*var(--u));--c:calc((100% - 11*var(--gutter))/12)}   /* one grid column, in this container's terms */
.structure .p-row{display:grid;grid-template-columns:calc(var(--c) + var(--gutter)) calc(2*var(--c) + var(--gutter)) 1fr calc(2*var(--c) + var(--gutter))}   /* num · date · item · amount — tracks on the grid, no gaps so the box is continuous */
.structure .p-items.nodates .p-row{grid-template-columns:calc(var(--c) + var(--gutter)) 1fr calc(2*var(--c) + var(--gutter))}
.structure .p-row>div{border:var(--pl);border-left:0;padding:12px 14px;font-size:14px;line-height:1.4}
.structure .p-row>.num{border:0;padding:12px 0 0;font:400 26px/1 var(--display);color:var(--ink)}
.structure .p-row>.num+div{border-left:var(--pl)}
.structure .p-row+.p-row>div{border-top:0}
.structure .p-row>.d{font-family:var(--mono);font-size:13px;color:var(--ink2)}
.structure .p-row>.n{text-align:right;font-family:var(--mono);white-space:nowrap}
.structure .p-row .sub{font-family:var(--mono);font-size:12px;color:var(--ink2);margin-top:3px}
.structure .p-row .desc{font-size:13px;color:var(--ink2);margin-top:3px}
.structure .p-tot{margin-top:calc(4*var(--u))}
.structure .p-tot .big{border-top:var(--pl)}
.p-foot{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:start;margin-top:calc(4*var(--u))}   /* Sep 2: the form's twin — note on the left, totals on col 9 — one row, no divider */
.p-foot>.p-pay{grid-column:1 / span 6;margin:0;padding:0;border:0;display:block}
.p-foot>.p-tot{grid-column:9 / span 4;width:auto;margin:0}
.p-foot .p-ship{margin-top:calc(4*var(--u))}   /* shipping under the note (FLAGGED: silent in the spec) */


/* ── the one breakpoint: the paper stacks ── */
@media (max-width:855px){
  .structure .p-studio{flex-direction:column}
  .structure .p-logo{flex:0 0 calc(10*var(--u))}
  .paper .p-head>*,.paper .p-who>*{grid-column:1 / span 12}
  .p-meta{text-align:left}.p-meta dl{justify-content:start}
  .p-who>div+div{margin-top:calc(4*var(--u))}
  .p-tot{width:100%}
  .p-foot>.p-pay,.p-foot>.p-tot{grid-column:1 / span 12}
  .p-foot>.p-tot{margin-top:calc(4*var(--u))}
}

/* ── print: the paper's lines go to ink ── */
@media print{
  .paper{min-height:0;padding:0}
  .paper.structure{--pl:1px solid var(--ink)}
}

/* ── THE DOCUMENT (slice 12a; the client page's grammar transcribed from prototypes/proposal.html in 12b — the sitting of Sep 3,
   "I would send this"). The masthead is the invoice's: the studio block and, right, the KIND WORD over the NUMBER — nothing
   else on screen (the dates leave the paper; print gets them back). Then PREPARED FOR over the company at 22 (small display)
   with its facts as quiet lines, and PROJECT under it, the title at 22 on a nine-column measure. The BLOCK STACK is flat and
   typed: a headed block opens a section — a rule (--pl) the paper's full width, 48 before / 32 after, the heading in display
   22; unheaded blocks flow inside a section 24 apart, a table 32. Body text is Home's note voice: 15/24 regular --ink2, nine
   columns of measure. VERTICAL RHYTHM, all on 8u: masthead → parties 64 · parties → body 48 · a section 48/32 · blocks 24 ·
   the sign block is a section. Reads tokens.css only. ── */
.paper.document .p-meta dl.dates{display:none}
.paper.document .p-who{display:block;margin-top:0;padding-top:0;border-top:0}
.paper.document .p-who>.party{display:block}
.paper.document .p-who>.party.project{margin-top:calc(4*var(--u))}
.paper.document .p-who>.party.project .p-big{max-width:calc((100% - 11*var(--gutter))/12*9 + 8*var(--gutter))}
.paper.document .p-who .p-lbl{color:var(--ink3);border-bottom:0;padding-bottom:0;line-height:1;margin-bottom:8px}   /* the parties, subdued (Chris, Sep 3): not the invoice's bill-to */
.paper.document .p-who .p-big{font:400 22px/1.25 var(--display);margin:0;color:var(--ink)}
.paper.document .p-who .addr{margin-top:8px;font-size:13px;line-height:1.5;color:var(--ink2)}
.paper.document .p-who .addr+.addr{margin-top:6px}   /* address, then email: a little tighter than a paragraph break */
.paper.document .d-blocks{margin-top:calc(6*var(--u))}
.paper.document .blk{margin:0}
.paper.document .blk+.blk{margin-top:calc(3*var(--u))}
.paper.document .blk:has(>h2){border-top:var(--pl);padding-top:calc(4*var(--u))}   /* a headed block opens a section — the rule generalised from Text to every kind (Sep 3 late) */
.paper.document .blk+.blk:has(>h2){margin-top:calc(6*var(--u))}
.paper.document .blk.pricing,.paper.document .blk.pricing+.blk,.paper.document .blk.schedule+.blk{margin-top:calc(4*var(--u))}
.paper.document .blk:first-child:has(>h2){border-top:0;padding-top:0}
.paper.document .blk h2{margin:0 0 8px;font:400 22px/1.2 var(--display);color:var(--ink)}   /* the block's heading — the studio's text, numbers included */
.paper.document .blk.text>*{max-width:calc((100% - 11*var(--gutter))/12*9 + 8*var(--gutter))}   /* nine columns of measure for the words; the block — and its rule — runs the paper's full width */
.paper.document .blk.text p{margin:0 0 12px;font:400 15px/24px var(--ui);color:var(--ink2)}   /* the voice of Home's note: 15/24, regular, the quiet ink */
.paper.document .blk.text p:last-child,.paper.document .blk.text ul:last-child,.paper.document .blk.text ol:last-child,.paper.document .blk.text blockquote:last-child{margin-bottom:0}
.paper.document .blk.text ul,.paper.document .blk.text ol{margin:0 0 12px;padding-left:22px;font:400 15px/24px var(--ui);color:var(--ink2)}
.paper.document .blk.text li+li{margin-top:4px}
.paper.document .blk.text ol{padding-left:24px}
.paper.document .blk.text li ol,.paper.document .blk.text li ul{margin:6px 0 0}
.paper.document .blk.text strong,.paper.document .blk.text b{font-weight:500;color:var(--ink)}
.paper.document .blk.text a{color:var(--acting);text-decoration:underline;text-underline-offset:3px}
.paper.document .blk.text blockquote{margin:0 0 12px;padding-left:16px;border-left:var(--pl);font:400 15px/24px var(--ui);color:var(--ink)}   /* the testimonial: a left rule, the attribution as a quiet line */
.paper.document .blk.text blockquote p{color:var(--ink)}
.paper.document .blk.text blockquote cite{display:block;margin-top:8px;font-style:normal;font-size:13px;color:var(--ink3)}
/* Image: a figure with a mono caption — every image in the decks carries one. */
.paper.document .blk.image figure{margin:0}
.paper.document .blk.image img{display:block;width:100%;height:auto;border:var(--pl)}
.paper.document .blk.image figcaption{margin-top:8px;font:400 12px/1.5 var(--mono);color:var(--ink3)}
/* Pricing, the one-package case: a plain table — a header row on the rules' colour (the eyebrow voice), rows of Date · Item ·
   Amount, then the Total row beneath with transparent borders so the amount ends on the column's edge. No item numbers (the
   invoice's big numeral is the line item's, not a schedule's — Chris, Sep 3). The Date column is opt-in as on the invoice:
   Invoiced · Milestone · Amount with dates, Item · Amount without. A per-unit line carries its qty × rate in mono under the item. */
.paper.document .blk.pricing{--c:calc((100% - 11*var(--gutter))/12)}
.paper.document .p-table+.addons{margin-top:calc(3*var(--u))}
.paper.document .p-table .p-row{display:grid;grid-template-columns:calc(3*var(--c) + 2*var(--gutter)) 1fr calc(2*var(--c) + var(--gutter))}
.paper.document .p-table.nodate .p-row{grid-template-columns:1fr calc(2*var(--c) + var(--gutter))}
.paper.document .p-table .p-row>div{border:var(--pl);border-left:0;padding:12px 14px;font-size:14px;line-height:1.4}
.paper.document .p-table .p-row>div:first-child{border-left:var(--pl)}
.paper.document .p-table .p-row+.p-row>div{border-top:0}
.paper.document .p-table .p-row.hd>div{background:var(--field);border-color:var(--field);padding:9px 14px;font:500 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.paper.document .p-table .p-row.hd>.n{text-align:right;font-family:var(--ui)}
.paper.document .p-table .p-row.tot>div{border-color:transparent;padding-top:10px}   /* the total: a plain row under the table — the borders kept but invisible, so the amount ends where the table's do */
.paper.document .p-table .p-row.tot>.k{grid-column:1 / span 2;text-align:right;font-weight:500;color:var(--ink)}
.paper.document .p-table.nodate .p-row.tot>.k{grid-column:1}
.paper.document .p-table .p-row.tot>.n{font-weight:500;color:var(--ink);display:flex;justify-content:flex-end}   /* flex-end: a wide total spills left, so the digits end where the column's do */
.paper.document .p-table .p-row.tot+.p-row.tot>div{padding-top:0}
.paper.document .p-table .p-row>.d{font-family:var(--mono);font-size:13px;color:var(--ink2);white-space:nowrap}
.paper.document .p-table .p-row>.n{text-align:right;font-family:var(--mono);white-space:nowrap}
.paper.document .p-table .p-row .desc{font-size:13px;color:var(--ink2);margin-top:3px}
.paper.document .p-table .p-row .qr{font:400 12px/1.5 var(--mono);color:var(--ink2);margin-top:3px}
/* Pricing with a CHOICE: packages as columns — name · description · LINES in the invoice's item grammar · the total footed — a
   radio group. Packages sit on the tint; the chosen one is white (the chosen thing); hover swaps to the panel. Add-ons are ticks
   beneath; the total derives (:has(), the generated rules). Stacking by container width: two need 576, three 872, more always stack. */
.paper.document .blk.pricing .lead{margin:0 0 16px;font:400 15px/24px var(--ui);color:var(--ink2)}
.paper.document .blk.pricing.choice{container-type:inline-size}
.paper.document .pk{display:grid;grid-template-columns:1fr;gap:var(--gutter)}
@container (min-width:576px){.paper.document .pk:not(:has(>label:nth-child(3))){grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (min-width:872px){.paper.document .pk:has(>label:nth-child(3)):not(:has(>label:nth-child(4))){grid-template-columns:repeat(3,minmax(0,1fr))}}
.paper.document .pk label{display:flex;flex-direction:column;padding:20px 20px 24px;border:var(--pl);background:var(--tint);cursor:pointer;min-width:0;margin:0}
.paper.document .pk label:hover{background:var(--panel)}
.paper.document .pk label:has(input:checked){background:#fff}
.paper.document .pk label:has(input:disabled){cursor:default}
.paper.document .pk label:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:-4px}
.paper.document .pk .eb{display:flex;align-items:center;justify-content:space-between;font:500 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.paper.document .pk .eb input{margin:0;width:16px;height:16px;accent-color:var(--acting);cursor:pointer}
.paper.document .pk .eb .chosen{color:var(--acting)}
.paper.document .pk h3{margin:12px 0 0;font:400 22px/1.2 var(--display);color:var(--ink)}
.paper.document .pk p{margin:10px 0 0;font:400 14px/1.5 var(--ui);color:var(--ink2)}
.paper.document .pk .ln{margin:16px 0 0;border-top:1px solid var(--rule)}
.paper.document .pk .ln>div{display:grid;grid-template-columns:1fr auto;gap:0 16px;padding:10px 0;border-bottom:1px solid var(--rule);font-size:14px;line-height:1.4;color:var(--ink)}
.paper.document .pk .ln .desc{grid-column:1 / -1;margin-top:2px;font-size:13px;color:var(--ink2)}
.paper.document .pk .ln .qr{display:block;font:400 12px/1.5 var(--mono);color:var(--ink2);margin-top:2px}
.paper.document .pk .ln .n{font-family:var(--mono);white-space:nowrap;text-align:right}
.paper.document .pk .fee{display:flex;justify-content:space-between;align-items:baseline;margin-top:auto;padding-top:12px;font-size:13px;color:var(--ink2)}   /* the total at the foot of every column: grid rows stretch, the flex column pushes it down — aligned across packages by construction */
.paper.document .pk .fee b{font:500 20px/1 var(--mono);color:var(--ink)}
.paper.document .addons{margin-top:calc(3*var(--u))}
.paper.document .addons .head2{padding:0 0 8px;font:500 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.paper.document .addons label{display:flex;align-items:center;gap:12px;min-height:var(--fh);padding:0 14px;border:var(--pl);background:var(--tint);cursor:pointer;font-size:14px;color:var(--ink);margin:0}
.paper.document .addons label+label{border-top:0}
.paper.document .addons label:hover{background:var(--panel)}
.paper.document .addons label:has(input:checked){background:#fff}
.paper.document .addons input{margin:0;width:16px;height:16px;accent-color:var(--acting)}
.paper.document .addons .desc{color:var(--ink2);font-size:13px}
.paper.document .addons .n{margin-left:auto;font-family:var(--mono);white-space:nowrap}
.paper.document .blk.pricing .tot2{display:flex;justify-content:flex-end;align-items:baseline;gap:16px;margin-top:calc(3*var(--u));padding:10px 14px 0;font-size:14px}
.paper.document .blk.pricing .tot2 .k{font-weight:500}
.paper.document .blk.pricing .tot2 .n{font:500 14px/1.4 var(--mono)}
.tot2 .n span{display:none}   /* the generated rules (main:has(…) [data-for]) show the one combo the choice makes — kept LOW in specificity so they win */
/* Schedule: rows of Phase · When, in the table grammar. */
.paper.document .blk.schedule{--c:calc((100% - 11*var(--gutter))/12)}
.paper.document .s-row{display:grid;grid-template-columns:1fr calc(3*var(--c) + 2*var(--gutter))}
.paper.document .s-row>div{border:var(--pl);border-left:0;padding:12px 14px;font-size:14px;line-height:1.4}
.paper.document .s-row>div:first-child{border-left:var(--pl)}
.paper.document .s-row+.s-row>div{border-top:0}
.paper.document .s-row>.d{font-family:var(--mono);font-size:13px;color:var(--ink2);white-space:nowrap}
.paper.document .s-row.hd>div{background:var(--field);border-color:var(--field);padding:9px 14px;font:500 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.paper.document .s-row.hd>.d{font-family:var(--ui)}
/* The sign block: a SECTION of its own (rule, 48/32), with an optional lead — the sentence that belongs to the signatures, 24
   above the lines. Two company slots in six columns each; the signature line is an input in the script face on both sides (the
   rendered one readonly) — same element, aligned by construction, no placeholder; typing is signing. Under it: company (500),
   then Name · Email at 13, then Signed (mono date); one 12 between each. The client's open slot: the line, the facts, the consent
   centred on its first line by 1lh, and ACCEPT & SIGN 48 below, gated by the consent and by an unmade choice (35% until both).
   The script face is Hipster Script (ruled Sep 8; tokens.css); --script is the one place to set it. */
.paper.document .blk.sign{border-top:var(--pl);padding-top:calc(4*var(--u))}
.paper.document .blk+.blk.sign{margin-top:calc(6*var(--u))}
.paper.document .blk.sign .lead{margin:0;font:400 15px/24px var(--ui);color:var(--ink2);max-width:calc((100% - 11*var(--gutter))/12*9 + 8*var(--gutter))}
.paper.document .blk.sign .lead+.p-sign{margin-top:calc(3*var(--u))}
.paper.document .p-sign{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.paper.document .p-sign>.slot:first-child{grid-column:1 / span 6}
.paper.document .p-sign>.slot:last-child{grid-column:7 / span 6}
.paper.document .slot form{margin:0}
.paper.document .slot input.sig{display:block;width:100%;height:calc(9*var(--u) + 1px);padding:calc(3*var(--u)) 0 0 4px;background:transparent;border:0;border-bottom:1px solid var(--ink);border-radius:0;outline:0;font:400 34px/34px var(--script);color:var(--ink)}
.paper.document .slot input.sig[readonly]{pointer-events:none}
.paper.document .slot input.sig:focus{background:var(--highlight)}
.paper.document .slot .co{margin-top:10px;font-size:14px;font-weight:500;color:var(--ink)}
.paper.document .slot dl{margin:12px 0 0;display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:4px;font-size:13px}
.paper.document .slot dl+dl{margin-top:12px}
.paper.document .slot dt{color:var(--ink2)}.paper.document .slot dd{margin:0;color:var(--ink)}
.paper.document .slot .dt{font-family:var(--mono)}   /* the moment (12c): "electronically · " in the ui face, the day and time in mono */
.paper.document .slot .err{margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--error, #b3261e)}
.paper.document .slot .agree{display:flex;align-items:flex-start;gap:10px;margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--ink2);cursor:pointer}
.paper.document .slot .agree input{margin:calc((1lh - 16px) / 2) 0 0;width:16px;height:16px;flex:0 0 16px;accent-color:var(--acting)}   /* centred on the FIRST line by construction: the line-height unit gives the line box */
.paper.document .slot .agree:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:4px}
.paper.document .slot .go{display:flex;align-items:center;width:100%;height:var(--fh);margin-top:calc(6*var(--u));padding:0 24px;border:0;background:var(--acting);color:#fff;cursor:pointer;
  font:500 12px/1.3 var(--ui);letter-spacing:.08em;text-transform:uppercase}
.paper.document .slot .go:hover{background:var(--ink)}
.paper.document .slot .go:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.paper.document .slot:has(.agree input:not(:checked)) .go{opacity:.35;pointer-events:none}   /* the consent gates the action; the fill carries the state */
.paper.document:has(input[name=package]):not(:has(input[name=package]:checked)) .slot .go{opacity:.35;pointer-events:none}   /* a choice unmade cannot be signed */
/* framed: the frame is the letterhead — the paper's logo slot returns in print, and so do the dates */
@media (max-width:855px){
  .paper.document .p-sign>.slot:first-child,.paper.document .p-sign>.slot:last-child{grid-column:1 / span 12}   /* the same specificity as the six-column rules above, or they win and only the margin lands (12c) */
  .paper.document .p-sign>.slot+.slot{margin-top:calc(4*var(--u))}
  .paper.document .blk.text>*,.paper.document .p-who>.party.project .p-big{max-width:none}
  .paper.document .pk{grid-template-columns:1fr}
}
@media print{
  .paper.document .p-meta dl.dates{display:grid}
  .paper.document .slot .agree,.paper.document .slot .go{display:none}
  .paper.document .blk.sign{break-inside:avoid}
  .paper.document .p-sign>.slot:first-child{grid-column:1 / span 6}   /* a letter sheet is narrower than 856 but wide enough: the two slots stay side by side in print (12c) */
  .paper.document .p-sign>.slot:last-child{grid-column:7 / span 6}
  .paper.document .p-sign>.slot+.slot{margin-top:0}
}

/* ── THE CERTIFICATE (ruled Sep 4; slice 12c): the evidence bundle as the signed PDF's last page — print-only after the paper,
   a page break before it; on the verify page (`.screen`) the same section stands alone in the hub's one-column room. The
   paper's voice: the section heading in display 22, facts as label · value rows on the soft rule, each party a slot — the
   typed signature in the script face over the company, then its facts. Plain, FLAGGED. Reads tokens.css only. ── */
.certificate{display:none;font-family:var(--ui);color:var(--ink)}
.certificate.screen{display:block;max-width:calc(var(--content) + 2*var(--content-edge));padding:calc(6*var(--u)) var(--content-edge);box-sizing:border-box}
.certificate h2{margin:0 0 calc(3*var(--u));font:400 22px/1.2 var(--display);color:var(--ink)}
.certificate dl{margin:0;display:grid;grid-template-columns:136px minmax(0,1fr);column-gap:var(--gutter);row-gap:0}
.certificate dt,.certificate dd{margin:0;padding:10px 0;border-top:1px solid var(--rule);font-size:13px;line-height:1.5}
.certificate dt{color:var(--ink2)}
.certificate dd{color:var(--ink);overflow-wrap:anywhere}
.certificate dd.c{font-family:var(--mono);font-size:12px}
.certificate dd a{color:var(--acting);text-decoration:underline;text-underline-offset:3px}
.certificate .ok{display:block;margin-top:2px;font-size:12px;color:var(--ink2)}
.certificate .c-parties{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gutter);margin-top:calc(6*var(--u))}
.certificate .c-party .sig{height:calc(9*var(--u) + 1px);padding:calc(3*var(--u)) 0 0 4px;border-bottom:1px solid var(--ink);font:400 34px/34px var(--script);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.certificate .c-party .co{margin:10px 0 12px;font-size:14px;font-weight:500}
.certificate .c-note{margin:calc(6*var(--u)) 0 0;font-size:12px;line-height:1.5;color:var(--ink3);max-width:calc((100% - 11*var(--gutter))/12*9 + 8*var(--gutter))}
@media (max-width:855px){
  .certificate .c-parties{grid-template-columns:1fr}
  .certificate .c-party+.c-party{margin-top:calc(4*var(--u))}
  .certificate dl{grid-template-columns:96px minmax(0,1fr)}
}
@media print{
  .certificate{display:block;break-before:page;page-break-before:always}
  .certificate .c-parties{grid-template-columns:repeat(2,minmax(0,1fr))}   /* the page is narrower than 856 but the two slots fit a letter sheet — one page, symmetric */
  .certificate .c-party+.c-party{margin-top:0}
  .certificate .c-party,.certificate .c-note{break-inside:avoid}
}