/* Clausel site: shared tokens + components. Light and dark. */
:root{
  --paper:#FFFFFF;
  --vellum:#F4F2EE;
  --vellum-2:#ECE9E3;
  --ink:#1A1C22;
  --ink-2:#3A3D45;
  --muted:#676B73;
  --hair:#E3E0DA;
  --page:#FFFFFF;
  --coral:#EC4C6B;
  --coral-ink:#C7304F;
  --coral-wash:rgba(236,76,107,.07);
  --ins:#1B7F4B;
  --ins-wash:rgba(27,127,75,.11);
  --del:#A8322A;
  --del-wash:rgba(168,50,42,.07);
  --amber:#B8954A;
  --violet:#7C5CBF;
  --teal:#3C6E78;
  --blue:#3F6FB0;
  --shadow:0 1px 2px rgba(26,28,34,.05),0 12px 40px -12px rgba(26,28,34,.16);
  --shadow-lg:0 2px 4px rgba(26,28,34,.04),0 30px 80px -24px rgba(26,28,34,.25);
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Source Serif 4",Georgia,serif;
  --max:1200px;
  --gutter:clamp(16px,4vw,40px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#15171C; --vellum:#1C1F25; --vellum-2:#262A31; --ink:#ECEBE8; --ink-2:#C9C8C4; --muted:#9A9DA4; --hair:#2D3139; --page:#1B1E24;
    --coral-wash:rgba(236,76,107,.13); --ins:#6FD3A0; --ins-wash:rgba(111,211,160,.13); --del:#E58A80; --del-wash:rgba(229,138,128,.10);
    --amber:#D4B26A; --violet:#A38BE0; --teal:#76AAB4; --blue:#8FB3E6;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 16px 48px -16px rgba(0,0,0,.6);
    --shadow-lg:0 2px 4px rgba(0,0,0,.3),0 30px 80px -24px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#15171C; --vellum:#1C1F25; --vellum-2:#262A31; --ink:#ECEBE8; --ink-2:#C9C8C4; --muted:#9A9DA4; --hair:#2D3139; --page:#1B1E24;
  --coral-wash:rgba(236,76,107,.13); --ins:#6FD3A0; --ins-wash:rgba(111,211,160,.13); --del:#E58A80; --del-wash:rgba(229,138,128,.10);
  --amber:#D4B26A; --violet:#A38BE0; --teal:#76AAB4; --blue:#8FB3E6;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 16px 48px -16px rgba(0,0,0,.6);
  --shadow-lg:0 2px 4px rgba(0,0,0,.3),0 30px 80px -24px rgba(0,0,0,.7);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-optical-sizing:auto;font-feature-settings:"cv11" 0;margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;transition:background .3s,color .3s}
main{overflow-x:clip}
a{color:inherit}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--coral);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:var(--paper);padding:8px 14px;border-radius:8px;z-index:100}
.skip:focus{left:8px}

/* ---------- wordmark ---------- */
.mark{font-weight:600;font-size:19px;letter-spacing:-.02em;text-decoration:none;display:inline-flex;align-items:baseline;white-space:nowrap}
.mark b{color:var(--coral);font-weight:500}
.mark b:first-child{margin-right:.28em}
.mark b:last-child{margin-left:.28em}

/* ---------- header ---------- */
header.top{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 84%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s,background .3s}
header.top.scrolled{border-bottom-color:var(--hair)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px;gap:20px}
.nav-links{display:flex;gap:14px;list-style:none;margin:0;padding:0;font-size:15px;color:var(--muted);align-items:center}
/* nav items: the clasp. hover ghosts the left bracket in, the current page is held by both */
.nav-links>li>a,.nav-links>li>button{position:relative;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:8px;text-decoration:none;background:none;border:0;cursor:pointer;color:inherit;font-size:15px;font-weight:500;transition:color .2s,background .2s}
.nav-links>li>a::before,.nav-links>li>button::before,.nav-links>li>a::after,.nav-links>li>button::after{content:"";position:absolute;top:3px;bottom:3px;width:6px;border:2px solid var(--coral);opacity:0;pointer-events:none;transition:opacity .25s,transform .3s cubic-bezier(.2,.8,.2,1)}
.nav-links>li>a::before,.nav-links>li>button::before{left:0;border-right:0;border-radius:3px 0 0 3px;transform:translateX(-4px)}
.nav-links>li>a::after,.nav-links>li>button::after{right:0;border-left:0;border-radius:0 3px 3px 0;transform:translateX(4px)}
.nav-links>li>a:hover,.nav-links>li>button:hover,.nav-links>li>button[aria-expanded="true"]{color:var(--ink);background:color-mix(in srgb,var(--ink) 5%,transparent)}
.nav-links>li>a:hover::before,.nav-links>li>button:hover::before,.nav-links>li>button[aria-expanded="true"]::before,.nav-links>li>a:hover::after,.nav-links>li>button:hover::after,.nav-links>li>button[aria-expanded="true"]::after{opacity:.55;transform:none}
.nav-links a[aria-current="page"],.nav-links button.is-current{color:var(--ink);font-weight:600}
.nav-links a.is-here{color:var(--ink)}
.nav-links a.is-here::before,.nav-links a.is-here::after{opacity:1;transform:none}
.nav-links a[aria-current="page"]::before,.nav-links a[aria-current="page"]::after,.nav-links button.is-current::before,.nav-links button.is-current::after{opacity:1;transform:none}
.chev{width:10px;height:10px;transition:transform .2s}
button[aria-expanded="true"] .chev{transform:rotate(180deg)}
.nav-cta{display:flex;align-items:center;gap:10px}
.icon-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--hair);background:transparent;cursor:pointer;display:grid;place-items:center;color:var(--ink)}
.icon-btn svg{width:16px;height:16px}
.menu-btn{display:none}

/* product mega menu: four columns in the order of a contract's life (Draft, Review, Sign and keep, Automate), each with a small label.
   The panel is positioned from the header's content column, so its edges line up with the wordmark and the Book a pilot button.
   Every link is one fixed-height row on one grid (glyph, title, two-line description), so nothing shifts and nothing wraps unevenly. */
.nav{position:relative}
.mega-wrap{position:static}
.mega{position:absolute;top:calc(100% + 6px);left:var(--gutter);right:var(--gutter);transform:translateY(-6px);background:var(--paper);border:1px solid var(--hair);border-radius:16px;box-shadow:var(--shadow-lg);padding:20px 24px 24px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 24px;opacity:0;visibility:hidden;transition:opacity .18s,transform .22s cubic-bezier(.2,.8,.2,1),visibility .18s}
.mega.open{opacity:1;visibility:visible;transform:none}
.mega .grp{min-width:0}
.mega .grp h5{margin:0 0 8px;padding:0 0 10px 16px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--hair)}
.mega a{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr);gap:1px 10px;height:84px;padding:12px 16px;border-radius:10px;text-decoration:none;align-items:start;align-content:start;transition:background .2s}
.mega a+a{margin-top:4px}
.mega a:hover{background:var(--vellum-2)}
.mega a[aria-current="page"]{background:var(--vellum-2)}
.mega a::before,.mega a::after,.sheet a::before,.sheet a::after{content:"";position:absolute;top:8px;bottom:8px;width:8px;border:2px solid var(--coral);pointer-events:none;opacity:0;transition:opacity .25s,transform .3s cubic-bezier(.2,.8,.2,1)}
.mega a::before,.sheet a::before{left:4px;border-right:0;border-radius:3px 0 0 3px;transform:translateX(-4px)}
.mega a::after,.sheet a::after{right:4px;border-left:0;border-radius:0 3px 3px 0;transform:translateX(4px)}
.mega a:hover::before,.mega a:hover::after,.mega a[aria-current="page"]::before,.mega a[aria-current="page"]::after,.sheet a[aria-current="page"]::before,.sheet a[aria-current="page"]::after{transform:none}
.mega a:hover::before,.mega a:hover::after{opacity:.55}
.mega a[aria-current="page"]::before,.mega a[aria-current="page"]::after{opacity:1}
.mega a:hover strong{color:var(--ink)}
.mega a[aria-current="page"] strong{font-weight:600}
/* each column of the menu has one tint: pale ground, same hue for the line */
.mega .grp:nth-child(1){--gh:var(--blue)}.mega .grp:nth-child(2){--gh:var(--violet)}.mega .grp:nth-child(3){--gh:var(--amber)}.mega .grp:nth-child(4){--gh:var(--teal)}
.mega .glyph{grid-row:span 2;width:30px;height:30px;border-radius:8px;background:color-mix(in srgb,var(--gh) 14%,var(--paper));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gh) 26%,var(--paper));display:grid;place-items:center;color:color-mix(in srgb,var(--gh) 78%,var(--ink))}
.mega .glyph svg{width:16px;height:16px}
.mega strong{display:block;font-weight:500;font-size:14px;letter-spacing:-.005em;color:var(--ink);line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mega .grp:nth-child(4) a:first-of-type strong{white-space:normal;line-height:1.3}
.mega .grp:nth-child(4) a:first-of-type span.d{-webkit-line-clamp:1}
.mega span.d{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;color:var(--muted);line-height:1.4}
@media (max-width:1199px){.mega{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px}}

/* mobile sheet */
.sheet{display:none}
@media (max-width:960px){
  .nav-links{display:none}
  .menu-btn{display:grid}
  .nav-cta .btn-quiet{display:none}
  .sheet{display:block;position:fixed;inset:64px 0 0;background:var(--paper);z-index:39;padding:12px var(--gutter) 40px;overflow:auto;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .2s,transform .25s,visibility .2s}
  .sheet.open{opacity:1;visibility:visible;transform:none}
  .sheet a{display:block;padding:16px 0;border-bottom:1px solid var(--hair);text-decoration:none;font-size:18px;font-weight:500}
  .sheet a{position:relative}
  .sheet a[aria-current="page"]{padding-left:22px;padding-right:22px}
  .sheet a[aria-current="page"]::before,.sheet a[aria-current="page"]::after{opacity:1}
  .sheet a.btn::before,.sheet a.btn::after{display:none}
  .sheet a span{display:block;font-size:14px;color:var(--muted);font-weight:400;margin-top:2px}
  .sheet .grp{display:block;padding:22px 0 4px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  .sheet .btn{margin-top:24px;width:100%}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:10px;font-size:15px;font-weight:500;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:background .15s,border-color .15s,transform .15s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:#D83A59;color:#fff}
.btn-primary:hover{background:#C12B4C}
.btn-quiet{border-color:var(--hair);background:var(--paper);color:var(--ink)}
.btn-quiet:hover{border-color:var(--ink-2)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{opacity:.9}
.btn-sm{height:36px;padding:0 14px;font-size:14px}
.link{color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:1.5px;text-underline-offset:4px}
.link:hover{color:var(--coral-ink)}

/* ---------- type ---------- */
h1,h2,h3{text-wrap:balance}
.display{font-size:clamp(44px,6.4vw,88px);line-height:.98;letter-spacing:-.04em;font-weight:600;margin:0 0 24px}
h1{font-size:clamp(40px,5.4vw,68px);line-height:1.02;letter-spacing:-.035em;font-weight:600;margin:0 0 22px}
h2{font-size:clamp(32px,3.8vw,48px);line-height:1.06;letter-spacing:-.03em;font-weight:600;margin:0 0 16px}
h3{font-size:21px;line-height:1.25;letter-spacing:-.015em;font-weight:600;margin:0 0 8px}
.lede{font-size:clamp(17px,1.5vw,20px);color:var(--ink-2);max-width:36em;margin:0 0 32px;line-height:1.55}
.sec-lede{font-size:18px;color:var(--ink-2);max-width:38em;margin:0}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:14.5px;color:var(--muted);margin-bottom:20px;font-weight:500}
.kicker .br{color:var(--coral);font-weight:400;font-size:18px}
.serif{font-family:var(--serif)}
.muted{color:var(--muted)}
p{margin:0 0 16px}

/* ---------- layout ---------- */
section{padding:clamp(72px,10vw,128px) 0}
.alt{background:var(--vellum)}
.ink-sec{background:var(--ink);color:var(--paper)}
.ink-sec .sec-lede,.ink-sec .lede{color:color-mix(in srgb,var(--paper) 78%,transparent)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:end;margin-bottom:clamp(40px,5vw,64px)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,6vw,88px);align-items:center}
.split.flip>:first-child{order:2}
.hero{padding:clamp(48px,7vw,96px) 0 clamp(64px,8vw,112px)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
@media (max-width:900px){
  .sec-head,.split{grid-template-columns:minmax(0,1fr)}
  .split.flip>:first-child{order:0}
  .sec-head{gap:16px}
}

/* ---------- common components ---------- */
.card{background:var(--paper);border:1px solid var(--hair);border-radius:14px;padding:28px}
.alt .card{background:var(--paper)}
.surface{background:var(--page);border:1px solid var(--hair);border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden}
.ticks{list-style:none;margin:0;padding:0}
.ticks li{padding:7px 0 7px 26px;position:relative;color:var(--ink-2)}
.ticks li::before{content:"";position:absolute;left:2px;top:1.02em;width:10px;height:5px;border-left:1.5px solid var(--ink-2);border-bottom:1.5px solid var(--ink-2);transform:rotate(-45deg) translateY(-3px)}
.dash{list-style:none;margin:0;padding:0;font-size:15px;color:var(--muted)}
.dash li{padding:3px 0 3px 16px;position:relative}
.dash li::before{content:"";position:absolute;left:0;top:.85em;width:6px;height:1px;background:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;font-size:13px;font-weight:500;background:var(--vellum);color:var(--ink-2);border:1px solid var(--hair);white-space:nowrap}
.chip .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.sev-high{color:var(--del)}.sev-med{color:var(--amber)}.sev-low{color:var(--muted)}.ok{color:var(--ink)}

/* the clasp: brand bracket around the thing that is held */
.clasp{position:relative}
.clasp::before,.clasp::after{content:"";position:absolute;top:-6px;bottom:-6px;width:10px;border:2.5px solid var(--coral);pointer-events:none;opacity:0;transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.clasp::before{left:-10px;border-right:0;border-radius:3px 0 0 3px;transform:translateX(-6px)}
.clasp::after{right:-10px;border-left:0;border-radius:0 3px 3px 0;transform:translateX(6px)}
.clasp.held::before,.clasp.held::after{opacity:1;transform:none}

/* redline marks */
del.rl{color:var(--del);text-decoration:line-through;text-decoration-thickness:1.5px;background:var(--del-wash);border-radius:2px;padding:0 1px}
ins.rl{text-decoration:underline;text-decoration-color:var(--ins);text-decoration-thickness:1.5px;text-underline-offset:3px;color:var(--ins);background:var(--ins-wash);border-radius:2px;padding:0 1px}

/* feature ledger */
.ledger{border-top:1px solid var(--ink)}
.ledger .row{display:grid;grid-template-columns:minmax(140px,2.2fr) minmax(0,4fr) minmax(0,3.2fr);gap:32px;padding:30px 0;border-bottom:1px solid var(--hair);align-items:baseline}
.ledger .verb{font-family:var(--serif);font-size:clamp(28px,3vw,38px);letter-spacing:-.01em;line-height:1.1}
.ledger .row p{margin:0;color:var(--ink-2)}
.ledger a.verb{text-decoration:none}
.ledger a.verb:hover{color:var(--coral-ink)}
@media (max-width:900px){.ledger .row{grid-template-columns:minmax(0,1fr);gap:10px;padding:26px 0}}

/* numbers strip */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.stat{padding:28px 24px 26px 0}
.stat+.stat{padding-left:24px;border-left:1px solid var(--hair)}
.stat b{display:block;font-size:clamp(36px,4vw,54px);font-weight:600;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;margin-bottom:10px}
.stat span{font-size:14.5px;color:var(--muted);display:block;max-width:18em}
.ink-sec .stats,.ink-sec .stat+.stat{border-color:color-mix(in srgb,var(--paper) 16%,transparent)}
.ink-sec .stat span{color:color-mix(in srgb,var(--paper) 62%,transparent)}
@media (max-width:760px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat:nth-child(3){padding-left:0;border-left:0}
  .stat:nth-child(n+3){border-top:1px solid var(--hair)}
}

/* sub-feature grid (not identical cards: a list with rules between) */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--hair)}
.facts>div{padding:26px 28px 26px 0;border-bottom:1px solid var(--hair)}
.facts>div:not(:nth-child(3n+1)){padding-left:28px;border-left:1px solid var(--hair)}
.facts h3{font-size:17px;margin-bottom:6px}
.facts p{margin:0;font-size:15px;color:var(--muted)}
@media (max-width:900px){
  .facts{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .facts>div:not(:nth-child(3n+1)){padding-left:0;border-left:0}
  .facts>div:nth-child(even){padding-left:24px;border-left:1px solid var(--hair)}
}
@media (max-width:600px){
  .facts{grid-template-columns:minmax(0,1fr)}
  .facts>div:nth-child(even){padding-left:0;border-left:0}
}

/* FAQ */
.faq{max-width:820px}
details{border-bottom:1px solid var(--hair)}
details:first-of-type{border-top:1px solid var(--ink)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;font-size:19px;font-weight:500;letter-spacing:-.01em}
summary::-webkit-details-marker{display:none}
summary .pm{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--hair);position:relative}
summary .pm::before,summary .pm::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;background:var(--ink);transform:translate(-50%,-50%)}
summary .pm::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .3s}
details[open] summary .pm::after{transform:translate(-50%,-50%) rotate(0)}
details .ans{padding:0 56px 26px 0;color:var(--ink-2);max-width:44em}

/* closing CTA */
/* the closing CTA: one full-bleed paper band on every page, the bracketed headline wide enough to break in two or three lines, the paragraph and buttons on its baseline */
.closer{padding:clamp(88px,12vw,160px) 0;background:var(--vellum);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.closer-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:clamp(32px,4vw,48px);align-items:end}
.closer .big-clasp{font-size:clamp(42px,5.2vw,76px);line-height:.98;text-wrap:balance}
.closer-grid>div{max-width:30em}
.big-clasp{font-size:clamp(48px,7.2vw,108px);line-height:.98;letter-spacing:-.045em;font-weight:600;margin:0}
.big-clasp .br{color:var(--coral);font-weight:300}
.closer p{color:var(--ink-2);margin:0 0 24px;font-size:18px}
@media (max-width:900px){.closer-grid{grid-template-columns:minmax(0,1fr)}}

/* footer */
footer.site{border-top:1px solid var(--hair);padding:64px 0 40px;font-size:14.5px;color:var(--muted)}
.foot-grid{display:grid;grid-template-columns:1.35fr repeat(4,1fr);gap:32px}
.foot-grid h4{font-size:14px;color:var(--ink);font-weight:600;margin:0 0 12px}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{padding:4px 0}
.foot-grid a{text-decoration:none}
.foot-grid a:hover{color:var(--ink)}
.foot-grid a.btn-primary,.foot-grid a.btn-primary:hover{color:#fff}
.foot-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:48px;padding-top:24px;border-top:1px solid var(--hair);font-size:13.5px}
@media (max-width:1000px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-grid>div:first-child{grid-column:1/-1}}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}.foot-grid>div:first-child{grid-column:1/-1}}

/* one orchestrated entrance per page: hero only */
.intro{opacity:0;transform:translateY(8px);animation:rise .7s cubic-bezier(.2,.8,.2,1) forwards}
.intro.d1{animation-delay:.05s}.intro.d2{animation-delay:.15s}.intro.d3{animation-delay:.25s}.intro.d4{animation-delay:.35s}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .intro{animation:none;opacity:1;transform:none}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}
@media (max-width:640px){
  body{font-size:16px}
  details .ans{padding-right:0}
  summary{font-size:17px}
}

/* ink sections stay dark in dark mode: swap the two tokens locally */
:root[data-theme="dark"] .ink-sec{--paper:#ECEBE8;--ink:#0E1014;--ins:#6FD3A0;background:#0E1014;border-top:1px solid #2D3139;border-bottom:1px solid #2D3139}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ink-sec{--paper:#ECEBE8;--ink:#0E1014;--ins:#6FD3A0;background:#0E1014;border-top:1px solid #2D3139;border-bottom:1px solid #2D3139}}

/* bracket spacing: a headline held in the clasp breathes, the bracket never touches a letter */
.big-clasp .br,.display .br,h1 .br,h2 .br{display:inline-block}
.big-clasp .br:first-child,.display .br:first-child,h1 .br:first-child,h2 .br:first-child{margin-right:.14em}
.big-clasp .br:last-child,.display .br:last-child,h1 .br:last-child,h2 .br:last-child{margin-left:.16em}

/* hold the first paint until the brand fonts are in (max 1 s), so text never reflows on arrival */
html.fl body{opacity:0}
body{transition:opacity .25s ease}

/* disabled controls stay legible: quiet outline, muted label, full opacity */
.btn:disabled,.btn[aria-disabled="true"]{opacity:1;background:var(--paper);color:var(--muted);border-color:var(--hair);cursor:not-allowed}
.btn-primary:disabled{background:var(--vellum-2);color:var(--muted);border-color:transparent}

/* fact grids on every page: pale tiles, one hue each, cycling so that neighbours differ */
main .facts{gap:10px;border-top:0}
main .facts>div{--h:var(--blue);padding:20px 22px 22px!important;border:0!important;border-radius:16px;background:color-mix(in srgb,var(--h) 9%,var(--paper));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--h) 20%,var(--paper));min-width:0}
main .facts>div:nth-child(5n+2){--h:var(--violet)}
main .facts>div:nth-child(5n+3){--h:var(--amber)}
main .facts>div:nth-child(5n+4){--h:var(--teal)}
main .facts>div:nth-child(5n){--h:var(--coral)}
main .facts h3{color:color-mix(in srgb,var(--h) 60%,var(--ink))}
main .facts p{color:var(--ink-2)}
main .ink-sec .facts>div{background:color-mix(in srgb,var(--h) 24%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--h) 34%,transparent)}
main .ink-sec .facts h3{color:var(--paper)}
main .ink-sec .facts p{color:color-mix(in srgb,var(--paper) 82%,transparent)}
footer.site .mark{color:var(--ink)}