/* Fonts are self-hosted from fonts/ (SIL Open Font License 1.1: Archivo, IBM Plex Sans, IBM Plex Mono).
   Latin subset, same files cruxms.com's Board Hub app serves. No request goes to Google.
   Archivo and IBM Plex Sans are variable files, so one file covers every weight used on the page. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:600 800;font-display:swap;src:url(fonts/Archivo-variable.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/IBMPlexSans-variable.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/IBMPlexMono-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/IBMPlexMono-500.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Board Hub pilot page (DRAFT). Look: "the minute book" (BOARD-HUB-COPY-AND-LOOK-GUIDE.md, Part 2).
   Sections are numbered entries (resolution-style references in the mono face), set between ruled lines;
   product extracts are captioned exhibits. Phone first, one column; asymmetric two columns from 960px.

   Colours come from tokens.css, a verbatim copy of /opt/adventureworks-dev/cruxms-design/tokens.css (the one home).
   Drift risk: it is a copy. If the design repo changes, re-copy the file (do not edit it here).
   Colour rules (SHELL.md): blue (--primary) is the one action colour: buttons, links, focus.
     Seal brown (--bh) only marks where you are: entry references, the seal, step numbers. Never a button or link.
     Crux Orange appears only inside the logo mark file.
   Values below that tokens.css does not hold: --bh (from /opt/calibr/public/css/board-hub.css) and layout sizes. */

:root{
  --bh:#6E3B1F;       /* Board Hub Seal brown */
  --f-display:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;
  --maxw:1200px;
  --gutter:clamp(16px,5vw,56px);
  --ease:.18s ease;
  --tap:48px;
  --rule:var(--border-2);   /* ruled lines are decoration, so the lighter control-border token is enough */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
html,body{margin:0}
body{background:var(--chalk);color:var(--text);font-family:var(--f-body);font-size:1.125rem;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%}
img{height:auto}
[hidden]{display:none!important}
h1,h2,h3,p,dl,dd,ol,ul,figure{margin:0}
a{color:var(--primary);text-underline-offset:.18em}
a:hover{color:var(--primary-d)}
p,li,dd{overflow-wrap:break-word}

/* type roles. Archivo only at 20px and up; Plex Sans below; Plex Mono for references, labels and figures. */
.ref{font-family:var(--f-mono);font-weight:500;font-size:.875rem;letter-spacing:.06em;line-height:1.4;color:var(--bh)}
.ref .sep{color:var(--neutral-text);padding-inline:.35em}
.ref .what{color:var(--neutral-text)}
.label{font-family:var(--f-mono);font-weight:500;font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;line-height:1.4;color:var(--neutral-text)}
.lead{font-size:clamp(1.125rem,2.2vw,1.25rem);line-height:1.55;color:var(--neutral-text);max-width:44ch;margin-top:.9em}
.cap{font-size:.9375rem;line-height:1.5;color:var(--neutral-text)}
.sec-h{font-family:var(--f-display);font-weight:800;letter-spacing:-.022em;line-height:1.08;font-size:clamp(1.875rem,5.2vw,2.75rem);margin-top:.35em}

/* focus: blue ring on every ground */
:focus-visible{outline:3px solid var(--primary);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:12px;top:-100px;background:var(--ink);color:var(--chalk);padding:12px 16px;min-height:var(--tap);display:inline-flex;align-items:center;border-radius:10px;z-index:30;text-decoration:none}
.skip:focus{top:12px;color:var(--chalk)}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}

/* buttons: pills. Blue is the one action colour; anything else is visibly secondary. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:var(--tap);font-family:var(--f-body);font-weight:500;font-size:1rem;line-height:1.2;text-decoration:none;padding:.7em 1.6em;border-radius:999px;border:1.5px solid transparent;cursor:pointer;transition:transform var(--ease),box-shadow var(--ease),background var(--ease),border-color var(--ease)}
.btn .arw{font-family:var(--f-mono);transition:transform var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--primary);color:#fff;box-shadow:var(--shadow-1)}
.btn-primary:hover{background:var(--primary-d);color:#fff;box-shadow:var(--shadow-2)}
.btn-secondary{background:var(--surface);color:var(--ink);border-color:var(--stone-brand)}
.btn-secondary:hover{color:var(--ink);border-color:var(--ink)}
.btn-sm{font-size:1rem;padding:.55em 1.3em}
.btn-lg{min-height:56px;font-size:1.0625rem;padding:.8em 2em}
.btn:disabled{background:var(--primary);opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.btn[aria-busy="true"]:disabled{cursor:progress}
.btn-block{width:100%}
.textlink{display:inline-flex;align-items:center;min-height:var(--tap);font-weight:500;padding:0 .4em}

/* header: the product name is the main name; the endorsement is smaller. Sticky, so Apply is one tap away from anywhere. */
.top{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:8px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-height:var(--tap);color:var(--ink)}
.brand .name{font-family:var(--f-display);font-weight:800;font-size:1.375rem;letter-spacing:-.02em;line-height:1}
.brand .by{display:flex;align-items:center;gap:7px;padding-left:12px;border-left:1px solid var(--rule);font-family:var(--f-mono);font-weight:500;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--neutral-text);line-height:1}
.brand .by img{width:22px;height:22px;display:block}

/* entries: each section is a numbered entry under a ruled line */
.entry{border-top:2px solid var(--ink);padding-block:clamp(40px,7vw,88px)}
.entry-grid{display:grid;gap:28px}
.entry-head .sec-h{max-width:14ch}
.entry-head .lead{max-width:30ch}

.entry.wide .entry-head{grid-column:1/-1;margin-bottom:clamp(24px,4vw,44px)}
.entry.wide .entry-body{grid-column:1/-1;min-width:0}
.entry.wide .entry-head .sec-h{max-width:20ch}
.entry.wide .entry-head .lead{max-width:48ch}
.entry.legal .sec-h{font-size:clamp(1.5rem,3.4vw,2rem)}
.entry.legal{padding-block:clamp(32px,5vw,56px)}

/* hero */
.hero{position:relative;background:var(--surface);padding-block:clamp(28px,4.5vw,60px) 0}
.hero .wrap{position:relative}
.hero h1{font-family:var(--f-display);font-weight:800;letter-spacing:-.03em;line-height:1.03;font-size:clamp(2.125rem,6vw,3.5rem);margin-top:.4em;max-width:19em}
.hero-grid{display:grid;gap:32px;margin-top:clamp(24px,3vw,40px)}
.who{font-family:var(--f-mono);font-weight:400;font-size:.9375rem;line-height:1.55;color:var(--ink);max-width:58ch;padding-bottom:16px;border-bottom:1px solid var(--rule)}
.sub{font-size:clamp(1.125rem,2.2vw,1.25rem);line-height:1.5;color:var(--ink);max-width:44ch;margin-top:1em}
.sub+.sub{margin-top:.8em;color:var(--neutral-text)}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:1.3em}
.hero-cta .btn{width:100%}

/* the facts under the hero: a ledger line of figures, with the compliance statement as its last cell */
.ledger{display:grid;margin-top:clamp(32px,5vw,56px);border-top:2px solid var(--ink)}
.cell{padding:16px 0;border-bottom:1px solid var(--rule)}
.cell dt,.cell .fig{font-family:var(--f-display);font-weight:800;letter-spacing:-.025em;font-size:2.25rem;line-height:1.05;color:var(--ink)}
.cell dd,.cell .fig-note{color:var(--neutral-text);font-size:1rem;line-height:1.4;margin-top:.35em;max-width:26ch}
.cell.note{padding-block:18px}
.cell.note .label{color:var(--bh)}
.cell.note p{margin-top:.5em;max-width:46ch;color:var(--ink);font-size:1rem;line-height:1.55}

/* the seal: Board Hub's mark for a signed record. A marker only; used once per screen at most. */
.seal{display:none}
.seal svg{display:block;width:100%;height:auto;overflow:visible}

/* exhibits: real extracts from the product, cropped tight, with a caption */
.exhibit{margin-top:20px}
.exhibit img{display:block;width:100%;height:auto;border:1px solid var(--rule);background:var(--surface)}
.exhibit figcaption{margin-top:10px;font-size:.9375rem;line-height:1.5;color:var(--neutral-text);max-width:60ch}
.exhibit .ex{font-family:var(--f-mono);font-weight:500;font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--bh);margin-right:.5em}
.exhibit.narrow{max-width:378px}

/* the register of what Board Hub does today */
.items{list-style:none;padding:0}
.item{padding:22px 0 26px;border-top:1px solid var(--rule);display:grid;gap:0}
.item-b{min-width:0}
.item:first-child{border-top:2px solid var(--ink)}
.item .ref{font-size:.8125rem}
.item h3{font-family:var(--f-display);font-weight:700;font-size:1.375rem;letter-spacing:-.012em;line-height:1.25;margin-top:.25em}
.item-b>p:first-child{margin-top:.55em}
.item p{max-width:58ch;color:var(--neutral-text)}
.item-b>p+p{margin-top:.8em}
.item p.muted{font-size:1rem;border-left:2px solid var(--bh);padding-left:14px;margin-top:1em}

.pending{list-style:none;padding:0;margin-top:20px;display:grid;gap:14px;max-width:58ch}
.pending li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;color:var(--neutral-text)}
.dia{width:9px;height:9px;border:1.5px solid var(--bh);border-radius:2px;transform:rotate(45deg);margin-top:.6em}
.after{margin-top:18px;max-width:58ch;color:var(--ink)}

/* offer: a ledger, not a card */
.terms{border-top:2px solid var(--ink)}
.terms .row{display:grid;gap:4px;padding:16px 0;border-bottom:1px solid var(--rule)}
.terms dd{font-size:1.125rem;font-weight:500;line-height:1.5}
.terms .row.big dd{font-family:var(--f-display);font-weight:800;font-size:1.625rem;letter-spacing:-.015em;line-height:1.2}
.offer-notes{margin-top:20px;display:grid;gap:8px;max-width:62ch}
.offer-notes p{color:var(--neutral-text)}
.steps-h{font-family:var(--f-display);font-weight:800;font-size:1.5rem;letter-spacing:-.015em;line-height:1.2;margin-top:clamp(36px,6vw,56px)}
.steps{list-style:none;padding:0;margin-top:16px;display:grid;gap:14px;counter-reset:s;max-width:62ch}
.steps li{counter-increment:s;display:grid;grid-template-columns:40px 1fr;gap:16px;align-items:start}
.steps li::before{content:counter(s);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--bh);color:var(--bh);font-family:var(--f-mono);font-weight:500;font-size:1rem}
.steps li span{padding-top:7px}
.provider{margin-top:28px;max-width:62ch}
.sign{display:flex;align-items:center;gap:16px;margin-top:28px}
.sign .seal{display:block;width:72px;flex:0 0 72px}
.sign .cap{max-width:52ch}

/* data note, privacy and terms: ruled paragraphs */
.dgrid{list-style:none;padding:0}
.dgrid li{border-top:1px solid var(--rule);padding:18px 0 20px}
.dgrid li:first-child{border-top:2px solid var(--ink)}
.dgrid h3{font-family:var(--f-display);font-weight:700;font-size:1.25rem;letter-spacing:-.01em;line-height:1.3;margin-bottom:.35em}
.dgrid p{color:var(--neutral-text);max-width:62ch}
.dgrid p+p{margin-top:.7em}
.data-cta{margin-top:28px}
#privacy .dgrid p,#terms .dgrid p{font-size:1.0625rem}

/* FAQ */
.faq details{border-top:1px solid var(--rule)}
.faq details:first-child{border-top:2px solid var(--ink)}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;padding:12px 4px;font-family:var(--f-body);font-weight:500;font-size:1.1875rem;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-mono);font-weight:500;font-size:1.5rem;flex:0 0 auto;width:28px;text-align:center;color:var(--primary)}
.faq details[open] summary::after{content:"\2212"}
.faq summary:hover{color:var(--primary-d)}
.faq .ans{padding:0 4px 20px;color:var(--neutral-text);max-width:62ch}

/* form */
.form-card{background:var(--surface);border:1px solid var(--rule);border-radius:12px;box-shadow:var(--shadow-1);padding:24px 18px 22px;max-width:660px}
.field{display:grid;gap:8px;margin-bottom:22px}
.field>label,.field>.lbl{font-weight:500;font-size:1.0625rem;line-height:1.35}
.field .opt{font-weight:400;color:var(--neutral-text)}
.hint{font-size:.9375rem;color:var(--neutral-text);line-height:1.45}
/* field borders: Stone, 4.24:1 on white (the lighter --border-2 measures 2.83:1, below the 3:1 WCAG 1.4.11 asks of a control boundary) */
.field input[type=text],.field input[type=email],.field input[type=number],.field select{width:100%;min-height:52px;font:inherit;font-size:1.0625rem;color:var(--ink);background:var(--surface);border:1.5px solid var(--stone-brand);border-radius:10px;padding:.6em .85em;transition:border-color var(--ease),box-shadow var(--ease)}
.field select{appearance:none;-webkit-appearance:none;padding-right:2.6em;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%230E1B26' stroke-width='2'%3E%3Cpath d='M1 1.5l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1em center}
.field input:hover,.field select:hover{border-color:var(--ink)}
.field input:focus-visible,.field select:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-color:var(--primary)}
.field input:user-invalid,.field select:user-invalid{border-color:var(--danger)}
.two{display:grid;gap:0;align-items:start}
fieldset{border:0;padding:0;margin:0 0 20px}
legend{padding:0;font-weight:500;margin-bottom:6px}
.sr-legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.check{display:grid;grid-template-columns:28px 1fr;gap:14px;align-items:start;min-height:var(--tap);padding:10px 0;cursor:pointer}
.check input{width:26px;height:26px;margin:1px 0 0;accent-color:var(--primary);cursor:pointer}
.check span{line-height:1.5}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.note-priv{margin-top:16px}
/* closed-form notice: sits at the top of the form, with an icon as well as words */
.form-closed{margin:0 0 22px;padding:14px 16px 14px 52px;border-radius:10px;background:var(--info-pale);border:1.5px solid var(--info);color:var(--ink);font-weight:500;position:relative;line-height:1.5}
.form-closed::before{content:"";position:absolute;left:16px;top:15px;width:24px;height:24px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6FA8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 11v6M12 7.2v.1'/%3E%3C/svg%3E") center/contain no-repeat}
.form-closed a{color:var(--primary);font-weight:500}
.msg{display:flex;gap:12px;align-items:flex-start;border-radius:10px;padding:14px 16px;margin-top:18px;font-weight:500}
.msg svg{flex:0 0 22px;width:22px;height:22px;margin-top:2px}
.msg-ok{background:var(--success-pale);color:var(--success);border:1.5px solid var(--success)}
.msg-err{background:var(--danger-pale);color:var(--danger);border:1.5px solid var(--danger)}
.msg .t{display:block}
.msg .t span{font-weight:400;color:var(--ink)}
.field-err{margin:2px 0 0;color:var(--danger);font-weight:500;font-size:1rem}
input[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--danger);outline:2px solid var(--danger);outline-offset:0}
#apply-status:focus{outline:none}

/* footer: a colophon under a ruled line */
footer{background:var(--surface);border-top:2px solid var(--ink);color:var(--neutral-text)}
footer .wrap{padding-block:40px;display:grid;gap:28px}
footer .fmark{display:flex;align-items:center;gap:12px;margin-bottom:14px}
footer .fmark img{width:36px;height:36px;display:block}
footer .fmark b{font-family:var(--f-display);font-weight:800;font-size:1.375rem;letter-spacing:-.02em;color:var(--ink);line-height:1}
footer p{max-width:46ch;font-size:1rem;line-height:1.55}
.femail{display:inline-flex;align-items:center;min-height:var(--tap)}
.flinks{display:flex;flex-direction:column;gap:0}
.flinks a{display:flex;align-items:center;min-height:var(--tap);text-decoration:none;font-size:1rem}
.flinks a:hover{text-decoration:underline}
.fnote{border-top:1px solid var(--rule);padding-top:18px;font-size:.8125rem;font-family:var(--f-mono);letter-spacing:.04em;display:flex;flex-direction:column;gap:6px}

noscript .msg{margin-top:20px}

/* funding and Marketing Engine sections */
.figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(16px,3vw,40px);border-top:2px solid var(--ink)}
.figs>div{padding:16px 0;border-bottom:1px solid var(--rule)}
.figs dt{font-family:var(--f-display);font-weight:800;letter-spacing:-.03em;font-size:clamp(2.5rem,7vw,3.5rem);line-height:1;color:var(--ink)}
.figs dd{margin-top:.4em;color:var(--neutral-text);font-size:1rem;line-height:1.4;max-width:24ch}
.figs-note{margin:14px 0 clamp(24px,4vw,40px);max-width:62ch;color:var(--ink);font-size:1rem}
.item .fold{margin-top:14px;max-width:58ch}
.fold summary,.pf>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.5em;min-height:var(--tap);font-weight:500;font-size:1rem;color:var(--primary)}
.fold summary::-webkit-details-marker,.pf>summary::-webkit-details-marker{display:none}
.fold summary::before,.pf>summary::before{content:"+";font-family:var(--f-mono);font-weight:500;font-size:1.25rem;width:1.1em;text-align:center}
.fold[open] summary::before,.pf[open]>summary::before{content:"\2212"}
.fold summary:hover,.pf>summary:hover{color:var(--primary-d)}
.fold p{margin-top:.6em}
.path{list-style:none;padding:0;counter-reset:p}
.path>li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;padding:20px 0;border-top:1px solid var(--rule)}
.path>li:first-child{border-top:0;padding-top:0}
.path .n{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--bh);color:var(--bh);font-family:var(--f-mono);font-weight:500;font-size:1rem}
.path h4{font-family:var(--f-display);font-weight:700;font-size:1.25rem;letter-spacing:-.01em;line-height:1.3;margin:.35em 0 0}
.path p{margin-top:.4em;max-width:58ch;color:var(--neutral-text)}
.path .fold{margin-top:6px}
.item .pf{margin-top:8px;max-width:none}
.planned-h{font-family:var(--f-display);font-weight:700;font-size:1.25rem;letter-spacing:-.01em;line-height:1.3;margin-top:clamp(28px,5vw,40px)}
.pf-hint{margin:0;color:var(--neutral-text);font-size:1rem;line-height:1.5;max-width:58ch}
.pf:not([open]) .s-hide,.pf[open] .s-show{display:none}
.me-records{margin-top:18px;color:var(--neutral-text);max-width:58ch}
.pf>summary{margin-bottom:4px}
.terms-line{color:var(--ink)!important;font-weight:500;border-top:1px solid var(--rule);padding-top:12px;margin-top:1em}
/* pictures: the practice-board gallery. Two columns of unequal width (7:5) from 960px, one column below. Each picture links to its full-size file. */
.wrap-wide{max-width:1360px}
.entry.gallery .entry-grid{margin-bottom:clamp(20px,4vw,36px)}
.entry.gallery .entry-head .lead{max-width:56ch}
.gal{display:grid;gap:clamp(24px,4vw,40px)}
.gcol{display:contents}
.shot{margin:0;min-width:0}
.shot-link{display:block;border:1px solid var(--rule);background:var(--surface);line-height:0;transition:border-color var(--ease),box-shadow var(--ease)}
.shot-link:hover{border-color:var(--ink);box-shadow:var(--shadow-1)}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{margin-top:10px;font-family:var(--f-mono);font-size:.8125rem;letter-spacing:.02em;line-height:1.55;color:var(--neutral-text);max-width:62ch}
.shot .ex{display:block;color:var(--bh);font-weight:500;text-transform:uppercase;letter-spacing:.07em;margin-bottom:2px}
.hero-shot{margin:0}
.gal-note{margin-top:clamp(20px,3vw,32px);font-family:var(--f-mono);font-size:.9375rem;line-height:1.5;color:var(--ink)}
.entry.gallery .terms-line{margin-top:clamp(20px,3vw,32px);max-width:62ch}
.entry.gallery .figs{margin-top:0}
.entry.gallery .figs-note{margin-bottom:clamp(28px,5vw,48px)}

/* the full feature list: one closed fold on every screen size */
.ffl{border-top:2px solid var(--ink);border-bottom:1px solid var(--rule)}
.ffl summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:clamp(16px,4vw,48px);min-height:var(--tap);padding:18px 0}
.ffl summary::-webkit-details-marker{display:none}
.ffl summary::after{content:"+";margin-left:auto;font-family:var(--f-mono);font-weight:500;font-size:1.75rem;color:var(--primary);flex:0 0 auto}
.ffl[open] summary::after{content:"\2212"}
.ffl-t{font-family:var(--f-display);font-weight:800;font-size:clamp(1.5rem,3.4vw,2rem);letter-spacing:-.02em;line-height:1.1}
.ffl summary:hover .ffl-t{color:var(--primary-d)}
.ffl-body{padding:0 0 28px}
.ffl-body>.label{margin-top:28px;margin-bottom:10px;color:var(--bh)}
.pf-gal{margin-top:clamp(24px,4vw,40px)}
.gal-note+.pf-hint,.gal+.pf-hint{margin-top:18px}
.terms-more{margin-top:14px;max-width:none}
.terms-more>.terms{margin-top:8px}
.steps-fold{margin-top:clamp(20px,4vw,32px);max-width:62ch}
.steps-fold .steps{margin-top:6px}

@media (min-width:600px){
  .figs{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media (min-width:600px){
  .hero-cta .btn{width:auto}
  .ledger{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(16px,3vw,40px)}
  .cell.note{grid-column:1/-1}
  .terms .row{grid-template-columns:11rem 1fr;gap:24px;align-items:baseline}
  .two{grid-template-columns:1fr 1fr;gap:0 16px}
  .btn-block{width:auto}
  .form-card{padding:34px 32px 28px}
  footer .wrap{grid-template-columns:1.3fr 1fr}
  .fnote{grid-column:1/-1;flex-direction:row;justify-content:space-between;flex-wrap:wrap}
}
@media (min-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,min(600px,54%));gap:clamp(32px,5vw,72px);align-items:start}
  .ledger{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.7fr)}
  .cell.note{grid-column:auto;padding-left:clamp(16px,3vw,40px);border-left:1px solid var(--rule)}
  .cell{border-bottom:0;padding-block:20px 8px}
  .cell.note{padding-block:20px 8px}
}
@media (min-width:960px){
  .gal{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}
  .gcol{display:flex;flex-direction:column;gap:clamp(24px,4vw,40px)}
  .pf>summary{display:none}
  .pf-hint{display:none}
  /* entries: heading in the left column, content in the right, so the reading column stays narrow */
  .entry-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0 clamp(32px,6vw,88px);align-items:start}
  .entry-head{position:sticky;top:96px}
  .entry.wide .entry-head{position:static}
  .item{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0 clamp(32px,6vw,88px)}
  .item-b>p:first-child{margin-top:0}
  .item-h h3{margin-top:.3em}
  .form-card{max-width:none}
}
@media (min-width:1100px){
  .seal-hero{display:block;position:absolute;right:var(--gutter);top:0;width:104px}
  .hero h1{padding-right:128px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}