/* HiveSilo site system: the approved homepage's tokens, type, nav, footer and grounds, plus the inner-page components.
   ONE shared file. Page builders never edit it; page-only styling goes in assets/pages/<slug>.css (see SYSTEM.md). */

/* ───────────────── Tokens (the homepage's, verbatim) ───────────────── */
:root{
  --f-head:"Newsreader","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --f-sans:"Onest","Avenir Next","Segoe UI",sans-serif;
  --ivory:#f3eee4; --ink:#131023; --plum:#0d0a15; --paper:#fbf9f4;
  --g0:#06030a; --g1:#1b1242; --g2:#1f2d63; --g3:#1d4a5e; --g4:#07151c; --g5:#123a31;
  --lilac:#c1aaff; --beam:#b49aff; --teal:#2bb8a6; --mint:#91e6c6; --amber:#f2a65a; --amber-ink:#b85f17; --amber-deep:#7a3606;
  --pad:96px; --rail:262px; --gl:42px; --gr:62px;
  --ease:cubic-bezier(.16,1,.3,1);
  /* inner pages: the headline sizes and the lane's x (the light's lane, as on the homepage) */
  --h1:66px; --h2:50px; --h3:21px;
  --lane-x:calc(max(0px,(100% - 1440px)/2) + var(--pad) + var(--rail) + var(--gl));
}
@media (max-width:1199px){ :root{ --pad:40px; --rail:190px; --gl:34px; --gr:58px; --h1:56px; --h2:44px } }
@media (max-width:699px){ :root{ --pad:0px; --rail:0px; --gl:22px; --gr:26px; --h1:clamp(36px,10.4vw,44px); --h2:clamp(30px,8.6vw,36px); --h3:19px } }

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;overflow-x:clip}
html{background:var(--g0);-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-color:#3b3450 var(--g0);scrollbar-width:thin;scroll-padding-top:88px}
body{position:relative;background:var(--g0);color:var(--ivory);font:400 18px/1.6 var(--f-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--lilac);color:var(--plum)}
img,svg{display:block}
a{color:inherit}
p,h1,h2,h3,h4,ul,ol,dl,dd,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--lilac);outline-offset:3px}
.day :focus-visible{outline-color:var(--ink)}
/* keyboard focus and in-page jumps never land under the pinned top bar (WCAG 2.2, 2.4.11; owner item 42): the page's
   scroll padding is the bar's own height (html, above: 88px; 72px on a phone), so a link to a section lands with the
   section's top at the bar's lower edge, and a control the browser scrolls into view to focus it (Shift+Tab back up to a
   form field, a footer index) stops a further 16px clear of the bar (the homepage's rule) */
a[href],button,input,select,textarea,summary,[tabindex]:not([tabindex="-1"]){scroll-margin-top:16px}
.skip{position:absolute;left:16px;top:-80px;z-index:20;background:var(--ivory);color:var(--ink);padding:12px 16px;font-weight:500;text-decoration:none}
.skip:focus{top:16px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.nb{white-space:nowrap}
.num{font-variant-numeric:tabular-nums lining-nums}

/* ───────────────── Grid: rail | the light's lane | content (the homepage's) ───────────────── */
.wrap{position:relative;z-index:4;width:100%;max-width:1440px;margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:var(--rail) calc(var(--gl) + var(--gr)) minmax(0,1fr)}
.rail{grid-column:1;min-width:0}
.main{grid-column:3;min-width:0}
@media (max-width:699px){ .wrap{padding-right:18px} .rail{grid-column:3} }

/* ───────────────── Type ───────────────── */
h1,h2,.hl{font-family:var(--f-head);font-weight:460;font-optical-sizing:auto;letter-spacing:-.015em;line-height:1.02;font-variant-numeric:lining-nums;text-wrap:balance}
.link{color:var(--head,var(--ivory));text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:color-mix(in srgb,currentColor 55%,transparent);font-weight:500;transition:text-decoration-color .2s var(--ease);padding:12px 0}
.link:hover{text-decoration-color:currentColor}
.btn{display:inline-flex;align-items:center;justify-content:center;height:54px;padding:0 28px;border-radius:3px;background:var(--ivory);color:var(--ink);font:500 16px/1 var(--f-sans);text-decoration:none;border:0;cursor:pointer;transition:background-color .2s var(--ease),transform .15s var(--ease),box-shadow .3s var(--ease);white-space:normal;text-align:center}
.btn:hover{background:#fff}
.btn:active{transform:scale(.985)}
.btn.dark{background:var(--ink);color:var(--ivory)}
.btn.dark:hover{background:#231d3b}
.btn.dark:focus-visible{outline-color:var(--amber-ink)}

/* ───────────────── Nav (the homepage's, verbatim) ───────────────── */
/* owner item 42: ONE header. The top bar is pinned to the top of the screen and stays exactly as it is at the top of the
   page all the way down: the same items, the same height, the same look (no second, compact bar; nothing swaps on
   scroll). It sits above everything on the page but the skip link and the site menu. The page keeps its place under it
   (.site-top holds the bar's height in the page, on the page's ground), so with the page at its top nothing has moved */
.site-top{position:relative;height:88px;background:var(--g0)}
.nav{position:fixed;top:0;left:0;right:0;height:88px;align-items:center;z-index:10}
.brand{display:inline-flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;font:600 18px/1 var(--f-sans);letter-spacing:-.01em;color:var(--ivory);grid-column:1;justify-self:start}
.brand svg{width:30px;height:30px}
.nav-r{grid-column:2/4;display:flex;align-items:center;gap:22px;margin-left:calc(var(--gl) + 36px);min-width:0}
.nav-links{position:relative;isolation:isolate;display:flex;align-items:center;gap:18px}
.nav-links>li{position:relative;display:flex;align-items:center}
.nav a.nl{font:500 14px/1 var(--f-sans);color:#d6d0e2;text-decoration:none;padding:9px 0;border-bottom:1px solid transparent;white-space:nowrap;transition:color .2s,border-color .2s}
.nav a.nl:hover{color:#fff;border-bottom-color:rgba(243,238,228,.5)}
/* the current section (set by assemble.mjs as aria-current): the page's own link, or its group, carries a lit rule */
.nav a.nl[aria-current]{color:#fff;border-bottom-color:var(--lilac)}
.dd-m a[aria-current],.sm-nav a[aria-current]{color:#fff;text-decoration-line:underline;text-decoration-color:var(--lilac);text-underline-offset:5px;text-decoration-thickness:1px}
.nav-r>.btn{margin-left:auto;height:46px;padding:0 18px;font-size:14.5px}
@media (min-width:1000px){
  .nav{display:flex}
  .nav::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);background:var(--g0);border-bottom:1px solid rgba(243,238,228,.1);pointer-events:none}
  .nav .brand{flex:none}
  .nav-r{flex:1;justify-content:flex-end;gap:32px;margin-left:32px}
  .nav-r>.btn{margin-left:0;flex:none}
}
/* under 1000px the bar has no ground of its own at the top of the page (on the homepage it sits on the hero's, and the
   light falls behind it there); once the page scrolls beneath it, it takes the page's ground and the wide bar's hairline,
   so nothing is ever read through it. The ground is its own layer: the page's (body::before, fixed, the bar's exact
   box, just under the bar: z-index 9 against the bar's 10; nothing on a page stands above 5), not the bar's, so the
   homepage's hero holds no animation of any kind (owner item 39: its first screen is still). Where the browser has
   scroll-driven animations, the scroll position itself turns it on (fully on from the first pixel scrolled), in the same
   frame as the scroll; a script reacting to the scroll is a frame late, and that frame showed the page's text through
   the bar. Elsewhere, and when motion is reduced (every animation is off), html.nav-under does it (set by site.js).
   Without the script the bar always has its ground. The homepage's rules, verbatim */
@media (max-width:999px){
  body::before{content:"";position:fixed;z-index:9;top:0;left:0;right:0;height:88px;background:var(--g0);box-shadow:inset 0 -1px 0 rgba(243,238,228,.1);pointer-events:none;opacity:0}
  html.nav-under body::before{opacity:1}
  @supports (animation-timeline:scroll()){ body::before{animation:nav-ground linear both;animation-timeline:scroll(root);animation-range:0px 1px} }
  html:not(.js) body::before{opacity:1;animation:none}
}
@media (max-width:699px){ body::before{height:72px} }   /* the bar's phone height */
@keyframes nav-ground{from{opacity:0}to{opacity:1}}
/* printed, the bar prints once, at the top of the first page (pinned, it would repeat over the top of every page) */
@media print{ .nav{position:absolute} body::before{content:none} }
@media (min-width:1000px) and (max-width:1099px){ .nav-links{gap:16px} .nav-r{gap:28px} .nav-r>.btn{padding:0 16px;font-size:14px} }
@media (min-width:1200px){ .nav-r{gap:40px} .nav-links{gap:22px} }
@media (min-width:1440px){ .nav-r{gap:44px} .nav-links{gap:26px} .nav a.nl{font-size:15px} .nav-r>.btn{padding:0 20px;font-size:15px} }
.dd-t{display:grid;place-items:center;width:22px;height:44px;margin:0 -5px 0 1px;padding:0;background:none;border:0;border-radius:3px;color:#bdb5d1;cursor:pointer}
.dd-t svg{width:10px;height:6px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .25s var(--ease)}
.dd-t:hover,.dd.open>.dd-t,.dd.open>.nl{color:#fff}
.dd.open>.dd-t svg{transform:rotate(180deg)}
.dd-m{display:none;position:absolute;z-index:2;top:calc(100% + 4px);left:-20px;min-width:250px;padding:8px;background:#1a1530;border:1px solid rgba(243,238,228,.15);border-radius:12px;box-shadow:0 2px 6px rgba(4,2,10,.5),0 28px 48px -20px rgba(4,2,10,.92)}
.dd-m::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.dd.open>.dd-m,html:not(.js) .dd:hover>.dd-m,html:not(.js) .dd:focus-within>.dd-m{display:block}
html.mo .dd.open>.dd-m{animation:ddIn .24s var(--ease)}
@keyframes ddIn{from{opacity:0;transform:translateY(-4px)}}
.dd-m a{display:block;padding:10px 12px;border-radius:7px;font:450 15px/1.35 var(--f-sans);color:#ddd7e8;text-decoration:none;white-space:nowrap;transition:background-color .15s,color .15s}
.dd-m a:hover{background:rgba(243,238,228,.075);color:#fff}
.dd-m a:focus-visible{outline-offset:-2px}
.menu-t{display:none;align-items:center;justify-content:center;gap:10px;height:46px;padding:0 16px;background:none;border:1px solid rgba(243,238,228,.36);border-radius:3px;color:var(--ivory);font:500 15px/1 var(--f-sans);cursor:pointer;white-space:nowrap;transition:border-color .2s,background-color .2s}
.menu-t:hover{border-color:rgba(243,238,228,.7);background:rgba(243,238,228,.05)}
.menu-t svg{width:16px;height:10px;fill:none;stroke:currentColor;stroke-width:1.6;flex:none}
/* a touch screen: every link of the bar and the menu is a 44px target (a mouse keeps the tighter rows); nothing moves:
   the extra hit area is padding given back by a negative margin (the homepage's rules) */
@media (pointer:coarse){
  .nav a.nl{padding:15px 0}
  .dd>a.nl{padding-left:10px;margin-left:-10px}
  .dd-t{--ddx:8px;place-items:center start;padding-left:6px;width:calc(17px + var(--ddx));margin-right:calc(-1 * var(--ddx))}
}
@media (pointer:coarse) and (max-width:1099px){ .dd-t{--ddx:6px} }
@media (pointer:coarse) and (min-width:1200px){ .dd-t{--ddx:12px} }
@media (pointer:coarse) and (min-width:1440px){ .dd-t{--ddx:16px} }
@media (pointer:coarse){
  .sm-top a,.sm-g li a,.sm-gh{display:flex;align-items:center;min-height:44px}
  .sm-gh{align-items:flex-end}
}
.smenu{position:fixed;inset:0;z-index:40}
.smenu[hidden]{display:none}
.sm-scrim{position:absolute;inset:0;background:rgba(6,3,10,.7)}
.sm-panel{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;column-gap:14px;max-height:100vh;max-height:100dvh;overflow:auto;overscroll-behavior:contain;padding:0 calc(max(0px,(100vw - 1440px) / 2) + var(--pad)) 48px;background:var(--ink);border-bottom:1px solid rgba(243,238,228,.16);box-shadow:0 2px 6px rgba(4,2,10,.5),0 40px 70px -34px rgba(4,2,10,.95)}
html.mo .sm-panel{animation:smIn .32s var(--ease)}
html.mo .sm-scrim{animation:smFade .32s var(--ease)}
@keyframes smIn{from{opacity:0;transform:translateY(-10px)}}
@keyframes smFade{from{opacity:0}}
.sm-head{display:contents}
.sm-panel .brand{grid-row:1;grid-column:1;height:60px;font-size:16px;gap:10px}
.sm-panel .brand svg{width:26px;height:26px}
.sm-ask{grid-row:1;grid-column:2}
.sm-ask .btn{height:44px;padding:0 18px;font-size:14.5px}
.sm-x{grid-row:1;grid-column:3;display:inline-flex;height:44px}
.sm-x svg{width:12px;height:12px}
.sm-nav{grid-row:2;grid-column:1/-1;display:grid;grid-template-columns:var(--rail) calc(var(--gl) + var(--gr)) minmax(0,1fr);align-items:start;padding-top:38px;border-top:1px solid rgba(243,238,228,.12)}
.sm-top{grid-column:1;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.sm-top a{font:600 20px/1.3 var(--f-sans);letter-spacing:-.005em;color:var(--ivory);text-decoration:none;text-underline-offset:5px;text-decoration-thickness:1px}
.sm-groups{grid-column:3;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:34px 36px}
.sm-gh{display:block;padding:0 0 12px;margin-bottom:10px;border-bottom:1px solid rgba(243,238,228,.2);font:600 16px/1.3 var(--f-sans);color:var(--ivory);text-decoration:none;text-underline-offset:5px;text-decoration-thickness:1px}
.sm-g ul{display:flex;flex-direction:column;align-items:flex-start}
.sm-g li a{display:inline-block;padding:6px 0;font:450 15px/1.4 var(--f-sans);color:#d9d3e5;text-decoration:none;text-underline-offset:4px;text-decoration-thickness:1px}
.sm-top a:hover,.sm-gh:hover,.sm-g li a:hover{color:#fff;text-decoration-line:underline}
/* the site menu's wide panel on a tablet: every row a 44px target (the homepage's rules) */
@media (min-width:700px) and (max-width:1099px){
  .smenu .sm-top{gap:0}
  .smenu .sm-top a{display:flex;align-items:center;min-height:44px}
  .smenu .sm-g li a{padding:11.5px 0}
  .smenu .sm-gh{display:flex;align-items:flex-end;min-height:44px}
}
@media (max-width:999px){
  .nav-links{display:none}
  .nav .menu-t{display:inline-flex}
  .nav-r{gap:12px}
}
html.nav-compact .nav-links{display:none}
html.nav-compact .nav .menu-t{display:inline-flex}
html.nav-compact .nav-r{gap:12px}
@media (max-width:699px){
  .nav{height:72px;display:flex;justify-content:space-between;align-items:center;padding:0 18px}
  .nav-r{gap:0;margin:0}
  .nav-r>.btn{display:none}
  .nav .menu-t{height:44px;padding:0 15px;font-size:15px}
  html{scroll-padding-top:72px}   /* the bar's phone height (owner item 42) */
  .site-top{height:72px}
  .sm-panel{height:100vh;height:100dvh;max-height:none;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:72px minmax(0,1fr) auto;padding:0;overflow:hidden;border-bottom:0}
  .sm-panel .brand{height:72px;padding-left:18px;font-size:18px;gap:12px}
  .sm-panel .brand svg{width:30px;height:30px}
  .sm-x{grid-column:2;margin-right:18px}
  .sm-ask{grid-row:3;grid-column:1/-1;padding:14px 18px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid rgba(243,238,228,.14)}
  .sm-ask .btn{width:100%;height:52px;font-size:16px}
  .sm-nav{display:block;min-height:0;height:100%;overflow:auto;overscroll-behavior:contain;padding:4px 18px 32px}
  .sm-top{gap:0;align-items:stretch}
  .sm-top a{display:flex;align-items:center;min-height:56px;border-bottom:1px solid rgba(243,238,228,.12)}
  .sm-groups{display:block}
  .sm-g{margin-top:30px}
  .sm-gh{display:flex;align-items:center;min-height:44px;padding:0 0 8px;margin-bottom:2px;font-size:17px}
  .sm-g ul{align-items:stretch}
  .sm-g li a{display:flex;align-items:center;min-height:44px;padding:4px 0;font-size:16.5px}
}
@media (max-width:380px){
  .nav-r .btn{padding:0 11px;font-size:14px}
  .brand{gap:9px}
}

/* ───────────────── Footer (the homepage's, verbatim) ───────────────── */
.foot{position:relative;background:var(--g0);border-top:1px solid rgba(193,170,255,.2);padding:76px 0 30px;--head:#f3eee4;--body:#cbc5d9;--label:#b3abc7}
.foot-brand{grid-column:1;min-width:0}
.foot-mark{display:inline-flex;align-items:center;gap:12px;min-height:44px;margin-top:-8px;font:600 18px/1 var(--f-sans);letter-spacing:-.01em;color:var(--ivory)}
.foot-mark svg{width:30px;height:30px;flex:none}
.foot .hl{margin-top:18px;font-size:27px;line-height:1.12;color:var(--head);max-width:9.5em}
.foot-say{margin-top:12px;font-size:15px;line-height:1.55;color:var(--body);max-width:30em}
.foot-trust{margin-top:8px;font-size:15px;line-height:1.5}
.foot-nav{grid-column:3;min-width:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:28px;align-items:start}
.fcol summary{display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none;margin-bottom:16px;font:600 12.5px/1.3 var(--f-sans);letter-spacing:.11em;color:#c1b9d5}
.fcol summary::-webkit-details-marker{display:none}
.fcol summary svg{display:none;width:12px;height:12px;flex:none;stroke:currentColor;stroke-width:1.5;fill:none;transition:transform .3s var(--ease)}
.fcol ul{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.fcol:not([open]) ul{display:none}
.fcol li{display:flex}
.fcol a{display:inline-block;padding:3px 0;margin:-3px 0;font:450 14.5px/1.45 var(--f-sans);color:#dcd6e7;text-decoration:none;text-underline-offset:4px;text-decoration-thickness:1px;transition:color .2s var(--ease)}
.fcol a:hover{color:#fff;text-decoration-line:underline}
.foot-base{grid-column:1/-1;margin-top:48px;padding-top:20px;border-top:1px solid rgba(193,170,255,.14)}
.fine{font-size:13px;line-height:1.55;color:var(--label);text-wrap:balance}
.legal{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:8px;font-size:13px;line-height:1.55}
.legal a{text-decoration:none;color:#d8d2e4;padding:12px 0;margin:-12px 0}
.legal a:hover{text-decoration:underline;text-underline-offset:4px}
@media (max-width:1199px){
  .foot .hl{font-size:24px}
  .foot-say,.foot-trust,.fcol a{font-size:14px}
  .foot-say{line-height:1.5}
  .foot-nav{column-gap:18px}
  .foot-base{margin-top:40px}
  .foot{padding-bottom:26px}
}
@media (max-width:1099px){
  .foot-in{display:flex;flex-direction:column;align-items:stretch;padding-left:calc(var(--pad) + var(--rail) + var(--gl) + var(--gr))}
  .foot-brand{display:contents}
  .foot .hl{order:1;margin:0;max-width:none}
  .foot-say{order:2}
  .foot-trust{order:3}
  .foot-nav{order:4;margin-top:40px;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}
  .foot-mark{order:5;align-self:flex-start;margin:44px 0 0}
  .foot-base{order:6;margin-top:28px}
}
@media (max-width:699px){
  .foot{padding:44px 0 24px}
  .foot .hl{font-size:28px}
  .foot-say{font-size:16px}
  .foot-trust{font-size:16px}
  .foot-nav{display:block;margin-top:30px;border-top:1px solid rgba(193,170,255,.16)}
  .fcol{border-bottom:1px solid rgba(193,170,255,.16)}
  .fcol summary{min-height:50px;margin:0;cursor:pointer;font-size:13px}
  .fcol summary svg{display:block}
  .fcol[open] summary svg{transform:rotate(45deg)}
  .fcol ul{gap:2px;padding:0 0 16px}
  .fcol a{padding:9px 0;margin:0;font-size:16px}
  .foot-mark{margin-top:40px}
  .foot-base{margin-top:24px}
  .fine{font-size:13.5px}
  .legal{gap:6px 18px;font-size:13.5px}
}

/* ═════════════════════════ INNER PAGES ═════════════════════════ */

/* ───────────────── Grounds ─────────────────
   A page is a sequence of full-width bands. Every band declares its ground; nothing else sets colour.
   .ph     the page header: the homepage's first ground (violet), where the light enters the page
   .night  ink: evidence, drawings, proof
   .day    paper: reading. Two day bands in a row alternate .day / .day.alt and are ruled apart
   .brief  the destination: ink, lit by the amber light (always last before the footer) */
.band{position:relative;background:var(--bg);color:var(--body);padding:120px 0 128px;border-top:1px solid var(--edge,transparent)}
.ph{--bg:var(--g1);--edge:transparent;--head:#f3eee4;--body:#d6d0ec;--label:#c6bfe8;--acc:#d2c2ff;--rule:rgba(210,194,255,.22);--lane:rgba(193,170,255,.34);--mk:#c1aaff;
  --nd-bg:rgba(255,255,255,.04);--nd-bd:rgba(243,238,228,.22);--line-c:rgba(243,238,228,.6);--ok:#91e6c6;--warn:#f6b06b;--seal:#c1aaff}
.night{--bg:var(--ink);--edge:rgba(145,230,198,.3);--head:#f3eee4;--body:#cdc8da;--label:#bab2ce;--acc:#91e6c6;--rule:rgba(243,238,228,.16);--lane:rgba(145,230,198,.32);--mk:#91e6c6;
  --nd-bg:rgba(255,255,255,.035);--nd-bd:rgba(243,238,228,.22);--line-c:rgba(243,238,228,.62);--ok:#91e6c6;--warn:#f6b06b;--seal:#c1aaff;--plate:#19142e;--plate-bd:rgba(243,238,228,.14)}
.day{--bg:#f1ebe0;--edge:#cbbfab;--head:#131023;--body:#2b2638;--label:#443d52;--acc:#7a3606;--rule:#cfc4b0;--lane:rgba(19,16,35,.2);--mk:#7a3606;
  --nd-bg:#fbf8f2;--nd-bd:#c9bca6;--line-c:#5d556a;--ok:#1d6b4c;--warn:#8f3b0b;--seal:#4e3dbf;--plate:#f8f4ec;--plate-bd:#d6cab6}
.day.alt{--bg:#f8f4ec;--plate:#fdfbf7}
.brief{--bg:var(--ink);--edge:rgba(242,166,90,.62);--head:#f3eee4;--body:#cfc9dc;--label:#bab2cd;--acc:var(--amber);--lane:rgba(242,166,90,.4);--mk:var(--amber);border-top-width:2px}
.night + .night{border-top-color:var(--edge)}
.day + .day{border-top-color:var(--edge)}

/* ───────────────── The light's lane (the one light element on inner pages) ─────────────────
   A hairline on the homepage's lane runs down every band; each section heading has a lit marker beside it on the lane.
   In the page header the lane is lit: the light enters from the top of the page and comes to rest beside the h1. */
.band::before{content:"";position:absolute;z-index:1;left:var(--lane-x);top:0;bottom:0;width:1px;background:var(--lane);pointer-events:none}
.ph::after{content:"";position:absolute;z-index:2;left:calc(var(--lane-x) - .5px);top:0;width:2px;height:calc(var(--ph-top) + var(--h1) * .5);
  background:linear-gradient(180deg,rgba(193,170,255,0),rgba(193,170,255,.55) 38%,#e9e1ff 88%,#fff);box-shadow:0 0 14px 1px rgba(180,154,255,.38);pointer-events:none}
.sh{position:relative}
/* the marker: a ring on the lane, level with the heading's first line */
.sh::before{content:"";position:absolute;z-index:3;left:calc(-1 * var(--gr) - 6px);top:calc(var(--h2) * .52 - 6px);width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle,var(--mk) 0 2.6px,var(--bg) 3.2px);box-shadow:0 0 0 1.5px var(--mk),0 0 16px 2px color-mix(in srgb,var(--mk) 40%,transparent)}
/* the light itself, at rest beside the page's h1 */
.ph .sh::before{top:calc(var(--h1) * .5 - 7px);left:calc(-1 * var(--gr) - 7px);width:14px;height:14px;background:radial-gradient(circle,#fff 0 3.4px,#e9e1ff 4.2px,rgba(193,170,255,.9) 5.6px,var(--bg) 6.4px);
  box-shadow:0 0 0 1.5px #d9ccff,0 0 22px 5px rgba(193,170,255,.55)}

/* ───────────────── Section head ─────────────────
   <div class="sh"><h2 id="…">Heading</h2><div class="sh-r"><p class="st">Live</p><p class="sh-l">Section label</p></div></div>
   The section's label and status sit in the rail beside the heading (as the homepage's level markers do); on a phone
   they follow the heading (a heading never wears a kicker). */
.sh h1{font-size:var(--h1);line-height:1.04;color:var(--head);max-width:14.5em}
.sh h2{font-size:var(--h2);line-height:1.06;color:var(--head);max-width:17em}
.sh-r{position:absolute;right:calc(100% + var(--gl) + var(--gr));top:calc(var(--h2) * .17);width:var(--rail);display:flex;flex-direction:column;align-items:flex-end;gap:10px;text-align:right}
.ph .sh-r{top:calc(var(--h1) * .2)}
.sh-l{font:600 15px/1.35 var(--f-sans);letter-spacing:.005em;color:var(--acc);text-wrap:balance}
.sh-r .st{order:2}
.st{display:inline-flex;align-items:center;gap:8px;font:600 14px/1 var(--f-sans)!important;letter-spacing:.02em;color:var(--ok)!important;white-space:nowrap}
.st::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 22%,transparent)}
.st.gated{color:var(--seal)!important}
.sh + *{margin-top:28px}
.lede{font-size:21px;line-height:1.55;color:var(--head);max-width:36em;text-wrap:pretty}
.lede + .lede{margin-top:16px}
.lede.sub{font-size:19px;color:var(--body)}

/* ───────────────── Page header ───────────────── */
.ph{--ph-top:96px;position:relative;background:var(--bg);color:var(--body);padding:var(--ph-top) 0 0;overflow:clip}
.ph::before{content:"";position:absolute;z-index:1;left:var(--lane-x);top:0;bottom:0;width:1px;background:var(--lane);pointer-events:none}
.ph-body{padding-bottom:64px}
.ph .lede{font-size:21px;color:var(--body)}
.ph .lede:first-of-type{color:var(--head)}
.ph-ctas{display:flex;align-items:center;gap:14px 30px;flex-wrap:wrap;margin-top:36px}
/* the page's facts: a quiet ruled row, one lit point per fact */
.facts{display:flex;flex-wrap:wrap;gap:12px 30px;margin-top:40px;padding-top:22px;border-top:1px solid var(--rule)}
.facts li{display:flex;align-items:center;gap:10px;font:500 15.5px/1.4 var(--f-sans);color:var(--head)}
.facts li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px 1px rgba(145,230,198,.5)}
/* the page's status line: what is live, as the source states it */
.statusrow{position:relative;z-index:4;border-top:1px solid var(--rule);padding:22px 0 24px;background:rgba(6,3,10,.22)}
.statusrow .rail{display:flex;justify-content:flex-end;padding-top:2px}
.statusrow .rail p{font:600 14px/1.4 var(--f-sans);letter-spacing:.02em;color:var(--acc)}
.statusrow ul{display:flex;flex-wrap:wrap;gap:8px 26px}
.statusrow li{display:flex;align-items:center;gap:9px;font:500 15px/1.45 var(--f-sans);color:var(--head)}
.statusrow li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--mint)}
/* the page index: every section of the page, in order (the homepage hero's index, for a long page) */
.index{margin-top:48px;padding-top:20px;border-top:1px solid var(--rule)}
.index ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px 28px}
.index a{display:block;padding:9px 0;font:500 15px/1.35 var(--f-sans);color:var(--body);text-decoration:none;border-bottom:1px solid transparent}
.index a:hover{color:var(--head);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}

/* ───────────────── Reading ───────────────── */
.prose{max-width:40em}
.prose p{font-size:18px;line-height:1.66;color:var(--body);text-wrap:pretty}
.prose p + p{margin-top:18px}
.prose strong,.prose b{color:var(--head);font-weight:600}
.prose a:not(.btn):not(.more){color:var(--head);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;font-weight:500}
.verdict{font:500 24px/1.4 var(--f-sans)!important;letter-spacing:-.005em;color:var(--head)!important}
/* two reading columns (desktop), one on a phone */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:56px;row-gap:36px;align-items:start}
.split.wide-l{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.split > .prose{max-width:none}
.block{margin-top:56px}
.block-s{margin-top:32px}
h3,.h3{font:600 var(--h3)/1.3 var(--f-sans);letter-spacing:-.005em;color:var(--head);text-wrap:balance}
.note{max-width:46em;margin-top:40px;padding-top:18px;border-top:1px solid var(--rule);font-size:16px;line-height:1.6;color:var(--label);text-wrap:pretty}
.more{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:24px;font:600 16px/1.3 var(--f-sans);color:var(--head);text-decoration:none;border-bottom:1px solid transparent}
.more svg{width:16px;height:16px;flex:none;stroke:currentColor;stroke-width:1.6;fill:none;transition:transform .2s var(--ease)}
.more:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.more:hover svg{transform:translateX(3px)}
.btn.ghost{background:transparent;color:var(--head);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--head) 55%,transparent)}
.btn.ghost:hover{background:color-mix(in srgb,var(--head) 8%,transparent)}
.day .btn:not(.ghost){background:var(--ink);color:var(--ivory)}
.day .btn:not(.ghost):hover{background:#231d3b}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:32px}

/* ───────────────── Figures in a row (the homepage's results figures) ─────────────────
   <dl class="figs"><div><dt>Label <span class="q">qualifier</span></dt><dd>0 <span class="u">PII</span></dd></div>…</dl>
   Side-by-side figures share one baseline, their labels one top (owner item 22). */
.figs{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));column-gap:40px;padding-top:26px;border-top:1px solid var(--rule)}
.figs>div{display:flex;flex-direction:column}
.figs dd{order:1;font-family:var(--f-head);font-weight:450;font-size:64px;line-height:1;letter-spacing:-.015em;color:var(--head);font-variant-numeric:lining-nums}
.figs dd .u{font:600 19px/1 var(--f-sans);letter-spacing:.02em;color:var(--acc);margin-left:.2em}
.figs dt{order:2;margin-top:12px;font:600 16px/1.4 var(--f-sans);color:var(--head)}
.figs dt .q{display:block;margin-top:2px;font-weight:500;font-size:15px;color:var(--label)}
/* a meter: a full scale with its two ends and one label (a figure's own instrument) */
.meter{margin-top:36px}
.meter-l{display:block;text-align:center;font:600 14px/1.3 var(--f-sans);letter-spacing:.02em;color:var(--ok)}
.meter-b{position:relative;height:8px;margin-top:10px;border-radius:2px;background:color-mix(in srgb,var(--line-c) 18%,transparent)}
.meter-b i{position:absolute;inset:0 calc(100% - var(--v,100%)) 0 0;border-radius:2px;background:var(--ok);opacity:.75}
.meter-b::before{content:"";position:absolute;left:0;right:0;top:-8px;height:5px;border:1px solid var(--ok);border-bottom:0}
.meter-e{display:flex;justify-content:space-between;margin-top:8px;font:500 14px/1 var(--f-sans);color:var(--label)}

/* ───────────────── Lists that are not cards ───────────────── */
/* ruled items in columns: a title and its text, separated by hairlines (no boxes) */
.cols{display:grid;grid-template-columns:repeat(var(--c,2),minmax(0,1fr));column-gap:44px}
.cols>*{padding:22px 0 26px;border-top:1px solid var(--rule)}
.cols h3{font-size:19px}
.cols p{margin-top:8px;font-size:17px;line-height:1.6;color:var(--body);text-wrap:pretty}
.cols p strong{color:var(--head);font-weight:600}
/* a ledger: term | description rows (the homepage's proof ledger) */
.ledger{border-top:1px solid var(--rule)}
.ledger>li,.ledger>div{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);column-gap:44px;row-gap:6px;align-items:baseline;padding:24px 0 26px;border-bottom:1px solid var(--rule)}
.ledger .t{font:600 20px/1.35 var(--f-sans);color:var(--head);text-wrap:balance}
.ledger .n{display:block;margin-bottom:6px;font:600 14px/1 var(--f-sans);letter-spacing:.04em;color:var(--label);font-variant-numeric:tabular-nums}
.ledger .tt{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.ledger p{font-size:17px;line-height:1.62;color:var(--body);text-wrap:pretty}
.ledger p a{color:var(--head);font-weight:500;text-underline-offset:4px}
/* a plain index of items (names, checks): readable columns, never a run-on line */
.items{display:grid;grid-template-columns:repeat(var(--c,2),minmax(0,1fr));column-gap:36px;border-top:1px solid var(--rule)}
.items li{padding:12px 0;border-bottom:1px solid var(--rule);font:500 17px/1.5 var(--f-sans);color:var(--head)}
/* can / cannot: two columns set against each other */
.pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:44px}
.pair>*{padding-top:20px;border-top:2px solid var(--ok)}
.pair>.no{border-top-color:var(--warn)}
.pair h3{font-size:19px}
.pair p{margin-top:8px;font-size:17px;line-height:1.62;color:var(--body)}
/* an aside: a separate note set apart from the reading (one panel, no coloured edge) */
.aside{margin-top:40px;padding:26px 30px 28px;border-radius:12px;background:color-mix(in srgb,var(--head) 5%,var(--bg));border:1px solid var(--rule)}
.aside .ah{display:flex;align-items:center;gap:10px;font:600 16px/1.35 var(--f-sans);color:var(--head)}
.aside .ah svg{width:18px;height:18px;flex:none;stroke:currentColor;stroke-width:1.6;fill:none}
.aside.warn .ah{color:var(--warn)}
.aside p{margin-top:12px;font-size:17px;line-height:1.64;color:var(--body);text-wrap:pretty}
.aside p + p{margin-top:12px}
.aside a:not(:where(.btn)){color:var(--head);font-weight:500;text-underline-offset:4px}
/* a quotation (the homepage's principle) */
.quote{margin-top:64px;max-width:28em}
.quote p{font:500 28px/1.42 var(--f-sans);letter-spacing:-.005em;color:var(--head);text-wrap:pretty}
.quote cite{display:block;margin-top:16px;font:600 15px/1 var(--f-sans);font-style:normal;letter-spacing:.02em;color:var(--label)}

/* ───────────────── Tables (own overflow container; readable on a phone) ─────────────────
   <div class="tbl-wrap"><table class="tbl stack">…</table></div>. .stack turns rows into blocks under 700px, each
   cell labelled from its column head (data-label). Without .stack the table scrolls inside its own container. */
.tbl-wrap{margin-top:40px;overflow-x:auto;overscroll-behavior-x:contain}
.tbl{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tbl caption{caption-side:top;text-align:left;padding-bottom:16px;font:600 16px/1.4 var(--f-sans);color:var(--head)}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:16px 18px;border-top:1px solid var(--rule);font-size:17px;line-height:1.5;color:var(--body)}
.tbl thead th{border-top:0;padding-top:0;font:600 14px/1.35 var(--f-sans);letter-spacing:.03em;color:var(--label)}
.tbl tbody th{font-weight:600;color:var(--head);width:38%}
.tbl tbody tr:last-child>*{border-bottom:1px solid var(--rule)}
.tbl .us{background:color-mix(in srgb,var(--ok) 9%,transparent)}
.tbl thead .us{color:var(--head);background:none}
.tbl .yes,.tbl .no{font-weight:600;color:var(--head)}
.tbl td:not(.us) .yes,.tbl td:not(.us) .no{color:var(--warn)}
.tbl .us .yes,.tbl .us .no{color:var(--ok)}

/* ───────────────── Questions ───────────────── */
.faq{max-width:52em;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:64px;padding:18px 0;cursor:pointer;list-style:none;font:600 19px/1.4 var(--f-sans);color:var(--head)}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:16px;height:16px;flex:none;stroke:var(--acc);stroke-width:1.7;fill:none;transition:transform .3s var(--ease)}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq summary:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.faq .fa{padding:0 0 26px;max-width:44em}
.faq .fa p{font-size:17.5px;line-height:1.66;color:var(--body)}
.faq .fa p + p{margin-top:12px}
.faq .fa a{color:var(--head);font-weight:500;text-underline-offset:4px}

/* ───────────────── Drawings, set in HTML ─────────────────
   Every label is real text (readable at the type floor, selectable, translatable). SVG is used only for geometry
   (lines, curves, hexagons), never for words. Components: .dg (the plate), .nd (a node), .chain (a sequence),
   .track (stages under a drawn line), .hub (a centre and its probes), .gate (a policy gate with lanes),
   .bd (the custody boundary), .cycle (a closed loop), .race (two timelines), .tblock (the drawing's title block). */
.dg{margin-top:48px;padding:28px 32px 30px;border-radius:14px;background:var(--plate);border:1px solid var(--plate-bd);container-type:inline-size}
.dg-h,.dg-f{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 28px}
.dg-h{padding-bottom:16px;margin-bottom:24px;border-bottom:1px solid var(--rule)}
.dg-f{padding-top:16px;margin-top:24px;border-top:1px solid var(--rule)}
.dg-k{font:600 14px/1.4 var(--f-sans);letter-spacing:.02em;color:var(--label)}
.dg-k.ok,.ok>.dg-k{color:var(--ok)}
.dg-k.warn{color:var(--warn)}
.dg-k.seal{color:var(--seal)}
.dg-s{font-size:15px;line-height:1.5;color:var(--body)}
.dg figcaption,.dg .cap{margin-top:20px;font-size:16px;line-height:1.55;color:var(--label);text-wrap:balance}
.dg-art{display:block;width:100%;overflow:visible}
.dg-art .ln{fill:none;stroke:var(--line-c);stroke-width:1.3;vector-effect:non-scaling-stroke}
.dg-art .ok{fill:none;stroke:var(--ok);stroke-width:1.6;vector-effect:non-scaling-stroke}
.dg-art .warn{fill:none;stroke:var(--warn);stroke-width:1.6;vector-effect:non-scaling-stroke}
.dg-art .dash{stroke-dasharray:5 7}
.dg-art .zone{fill:color-mix(in srgb,var(--warn) 9%,transparent);stroke:none}
.dg-art .dot{fill:var(--line-c)}
.dg-art .dot.ok{fill:var(--ok);stroke:none}
.dg-art .ring{fill:none;stroke:var(--warn);stroke-width:1.5;vector-effect:non-scaling-stroke}
.dg-art .hex{fill:var(--nd-bg);stroke:var(--line-c);stroke-width:1.2;vector-effect:non-scaling-stroke}
.dg-art .hex.hot{stroke:var(--warn);stroke-width:1.8}
.dg-art .fillok{fill:color-mix(in srgb,var(--ok) 55%,transparent);stroke:none}

/* a node */
.nd{position:relative;min-width:0;padding:16px 18px 18px;border-radius:10px;background:var(--nd-bg);border:1px solid var(--nd-bd)}
.nd-k{margin-bottom:6px;font:600 14px/1.35 var(--f-sans);letter-spacing:.02em;color:var(--label)}
.nd-k.ok{color:var(--ok)} .nd-k.warn{color:var(--warn)} .nd-k.seal{color:var(--seal)}
.nd-t{font:600 18px/1.3 var(--f-sans);color:var(--head);text-wrap:balance}
.nd-s{margin-top:4px;font-size:15.5px;line-height:1.5;color:var(--body);text-wrap:pretty}
.nd-s.ok{color:var(--ok);font-weight:600} .nd-s.warn{color:var(--warn);font-weight:600}
.nd-th{margin-top:12px;font:600 15.5px/1.5 var(--f-sans);color:var(--seal)}
.nd.seal{border:1.5px solid var(--seal);box-shadow:inset 0 0 0 4px var(--nd-bg),inset 0 0 0 5px color-mix(in srgb,var(--seal) 35%,transparent)}
.nd .tag{position:absolute;top:-12px;right:16px;padding:5px 10px;border-radius:999px;background:var(--seal);color:var(--ink);font:600 14px/1 var(--f-sans);letter-spacing:.02em}
.day .nd .tag{color:#fff}
.nd.open{border-style:dashed;background:transparent}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chips li{padding:7px 11px;border-radius:6px;border:1px solid var(--nd-bd);font:600 14.5px/1.3 var(--f-sans);color:var(--head)}
.keys{margin-top:14px;display:grid;gap:8px}
.keys li{display:flex;align-items:center;gap:10px;font-size:15.5px;line-height:1.45;color:var(--body)}
.keys svg{width:18px;height:18px;flex:none;stroke:var(--seal);stroke-width:1.5;fill:none}

/* a sequence of nodes with connectors (a row on wide screens, a column on a phone) */
.chain{display:flex;align-items:stretch}
.chain>.nd{flex:1 1 0}
.cx{position:relative;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-width:74px;padding:0 8px;text-align:center}
.cx b{font:600 14px/1.3 var(--f-sans);letter-spacing:.02em;color:var(--label);max-width:10em}
.cx.ok b{color:var(--ok)} .cx.warn b{color:var(--warn)}
.cx i{position:relative;display:block;width:100%;min-width:40px;height:1.5px;background:var(--line-c)}
.cx i::after{content:"";position:absolute;right:-1px;top:-4.5px;border:5.25px solid transparent;border-left:8px solid var(--line-c);border-right:0}
.cx.eq i{height:6px;background:none;border-top:1.5px solid var(--ok);border-bottom:1.5px solid var(--ok)}
.cx.eq i::after{display:none}
.cx.back i::before{content:"";position:absolute;left:-1px;top:-4.5px;border:5.25px solid transparent;border-right:8px solid var(--line-c);border-left:0}

/* stages under a drawn line: the drawing is geometry; the words are the list */
.track-l{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:12px 20px;margin-top:14px}
.track-l li{font:600 15.5px/1.4 var(--f-sans);color:var(--head);text-align:center;text-wrap:balance}
.track-l li:first-child{text-align:left}
.track-l li:last-child{text-align:right}
.track-l li.ok{color:var(--ok)} .track-l li.warn{color:var(--warn)}
.track-art{height:120px}

/* two timelines set against each other (e.g. found late vs found the same day) */
.race{display:grid;gap:22px}
.race>div{display:grid;grid-template-columns:minmax(0,210px) minmax(40px,1fr) auto;align-items:center;gap:16px}
.race>.ok{grid-template-columns:minmax(0,210px) 96px auto;justify-content:start}
.race span{font:600 15.5px/1.35 var(--f-sans);color:var(--head)}
.race i{height:1.5px;background:var(--line-c);position:relative}
.race i::after{content:"";position:absolute;right:-1px;top:-4.5px;border:5.25px solid transparent;border-left:8px solid var(--line-c);border-right:0}
.race .warn i{background:repeating-linear-gradient(90deg,var(--warn) 0 6px,transparent 6px 12px)}
.race .warn i::after{border-left-color:var(--warn)}
.race .ok i{background:var(--ok)}
.race .ok i::after{border-left-color:var(--ok)}
.race .warn b{font:600 15.5px/1.35 var(--f-sans);color:var(--warn)}
.race .ok b{font:600 15.5px/1.35 var(--f-sans);color:var(--ok)}

/* a centre and the probes pointed at it */
.hub{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,.85fr) minmax(0,1fr);align-items:center;column-gap:36px}
.hub ul{display:grid;gap:14px}
.hub li{position:relative;padding:14px 16px;border-radius:8px;border:1px solid var(--nd-bd);background:var(--nd-bg);font:600 16px/1.35 var(--f-sans);color:var(--head)}
.hub .hub-l li{text-align:right}
.hub .hub-l li::after,.hub .hub-r li::after{content:"";position:absolute;top:50%;width:36px;height:1.5px;background:var(--line-c)}
.hub .hub-l li::after{left:100%}
.hub .hub-r li::after{right:100%}
.hub .hub-c{text-align:center;padding:26px 20px}

/* a policy gate and its lanes */
.gate{display:grid;grid-template-columns:minmax(0,132px) 36px minmax(0,150px) 36px minmax(0,1fr);align-items:center}
.gate>.cx{min-width:0;padding:0}
.lanes{border-left:1.5px solid var(--line-c);padding-left:22px}
.lanes li{position:relative;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);column-gap:22px;align-items:center;padding:16px 0}
.lanes li + li{border-top:1px solid var(--rule)}
.lanes li::before{content:"";position:absolute;left:-22px;top:50%;width:14px;height:1.5px;background:var(--line-c)}
.lane-c{justify-self:start;padding:7px 11px;border-radius:6px;border:1px solid var(--nd-bd);font:600 14.5px/1.35 var(--f-sans);color:var(--head)}
.lanes .ok .lane-c{border-color:var(--ok);color:var(--ok)}
.lanes .warn .lane-c{border-color:var(--warn);color:var(--warn)}
.ks{margin-top:10px;padding-top:10px;border-top:1px dashed var(--nd-bd)}

/* a closed loop inside a sealed boundary */
.cycle{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr) 24px minmax(0,1fr);align-items:center;margin-top:22px;padding-bottom:34px}
.cycle li{padding:10px 0;border-radius:8px;border:1px solid var(--nd-bd);text-align:center;font:600 15.5px/1.3 var(--f-sans);color:var(--head)}
.cycle li.first{border-color:var(--seal);color:var(--seal)}
.cycle .cx{min-width:0;padding:0 4px}
.cycle::after{content:"";position:absolute;left:calc((100% - 48px) / 6);right:calc((100% - 48px) / 6);bottom:6px;height:22px;border:1.5px solid var(--line-c);border-top:0;border-radius:0 0 12px 12px}
.cycle::before{content:"";position:absolute;left:calc((100% - 48px) / 6 - 5px);bottom:26px;border:5.25px solid transparent;border-bottom:8px solid var(--line-c);border-top:0}

/* the custody boundary: your side | the boundary | HiveSilo's side, flow by flow */
.bd-grid{display:grid;grid-template-columns:minmax(0,1fr) 164px minmax(0,1fr);grid-template-rows:auto auto auto auto auto}
.bd-a,.bd-b{display:grid;grid-template-rows:subgrid;grid-row:1 / 6;min-width:0}
.bd-a{grid-column:1;padding:18px 18px 16px;border-radius:12px;border:1px solid var(--nd-bd);background:color-mix(in srgb,var(--nd-bg) 60%,transparent)}
.bd-b{grid-column:3;padding:18px 0 16px}
.bd-zh{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--rule)}
.bd-flow{display:flex;align-items:stretch;gap:14px;padding:14px 0 14px 22px}
.bd-flow i{position:relative;flex:none;width:1.5px;min-height:56px;background:var(--line-c)}
.bd-flow i::after{content:"";position:absolute;bottom:-1px;left:-4.5px;border:5.25px solid transparent;border-top:8px solid var(--line-c);border-bottom:0}
.bd-flow div{align-self:center}
.bd-w{grid-column:2;grid-row:2 / 5;position:relative;display:grid;grid-template-rows:subgrid;padding:0 10px}
.bd-w::before,.bd-w::after{content:"";position:absolute;top:-10px;bottom:-10px;width:1.5px;background:var(--seal);box-shadow:0 0 12px 1px color-mix(in srgb,var(--seal) 45%,transparent)}
.bd-w::before{left:calc(50% - 6px)}
.bd-w::after{left:calc(50% + 4.5px)}
.bd-x{position:relative;z-index:1;align-self:center;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.bd-x b{padding:4px 6px;border-radius:4px;background:var(--plate);font:600 14px/1.3 var(--f-sans);letter-spacing:.01em;color:var(--head)}
.bd-x i{position:relative;display:block;width:calc(100% + 20px);height:1.5px;background:var(--line-c)}
.bd-x i::after{content:"";position:absolute;top:-4.5px;border:5.25px solid transparent}
.bd-x.out i::after{right:-1px;border-left:8px solid var(--line-c);border-right:0}
.bd-x.in i::after{left:-1px;border-right:8px solid var(--line-c);border-left:0}
.bd-x.in b{color:var(--ok)}
.bd-wl{position:relative;z-index:1;align-self:center;justify-self:center;padding:10px 4px;background:var(--plate);writing-mode:vertical-rl;transform:rotate(180deg);font:600 14px/1.3 var(--f-sans);letter-spacing:.02em;color:var(--warn);text-align:center;max-height:260px}
.bd-port{position:relative;z-index:1;justify-self:center;align-self:start;margin-top:-6px;padding:4px 8px;border-radius:5px;border:1px solid var(--seal);background:var(--plate);font:600 14px/1.25 var(--f-sans);color:var(--seal);text-align:center}
.bd-notes{margin-top:18px}
.bd-notes li{margin-top:6px;font-size:15.5px;line-height:1.5;color:var(--body)}
.bd-dim{align-self:end;padding-top:14px;text-align:center;font:600 14px/1.3 var(--f-sans);letter-spacing:.02em;color:var(--label);border-top:1px solid var(--rule)}
.bd-cross{display:flex;align-items:center;gap:10px;padding:12px 0;font:600 14.5px/1.35 var(--f-sans);color:var(--warn)}
.bd-cross svg{width:18px;height:18px;flex:none;stroke:currentColor;stroke-width:1.8;fill:none}
/* rows of the boundary (children name their row: r1 heads, r2 the signal row, r3 the middle, r4 the result row, r5 the foot) */
.bd-grid .r1{grid-row:1} .bd-grid .r2{grid-row:2} .bd-grid .r3{grid-row:3} .bd-grid .r4{grid-row:4} .bd-grid .r5{grid-row:5}
.bd-a>.r2,.bd-a>.r4,.bd-b>.r2,.bd-b>.r4{align-self:center}
.bd-b>.r1,.bd-w>.r1{align-self:start}
.bd-w{grid-row:1 / 6}
.bd-w .bd-wl{writing-mode:horizontal-tb;transform:none;max-height:none;background:none;padding:18px 0 0;align-self:start;text-wrap:balance}
.bd-lines{grid-row:2 / 5;grid-column:1;position:relative;justify-self:stretch}
.bd-lines::before,.bd-lines::after{content:"";position:absolute;top:0;bottom:0;width:1.5px;background:var(--seal);box-shadow:0 0 12px 1px color-mix(in srgb,var(--seal) 40%,transparent)}
.bd-lines::before{left:calc(50% - 5px)}
.bd-lines::after{left:calc(50% + 3.5px)}
.bd-w::before,.bd-w::after{content:none}
.bd-w>.bd-x,.bd-w>.bd-port,.bd-w>.bd-cross{grid-column:1}
.bd-w>*{position:relative;z-index:1}
.bd-w>.bd-lines{position:relative;z-index:0}
.bd-w>.bd-port{align-self:center;margin:0}
.bd-w>.bd-cross{align-self:center;justify-self:center;flex-direction:column;gap:6px;padding:8px 6px;background:var(--plate);border-radius:6px;text-align:center}
.bd-foot{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,.72fr);column-gap:36px;align-items:start;margin-top:26px;padding-top:6px}
.bd-foot .tblock{margin-top:18px}
.keyline{margin-top:12px}

/* the drawing's title block */
.tblock{display:grid;grid-template-columns:auto 1fr;margin-top:18px;border:1px solid var(--nd-bd);border-radius:8px;overflow:hidden}
.tblock>div{display:contents}
.tblock dt,.tblock dd{padding:8px 12px;border-top:1px solid var(--nd-bd);font-size:14.5px;line-height:1.35}
.tblock>div:first-child>*{border-top:0}
.tblock dt{font-weight:600;letter-spacing:.02em;color:var(--label);border-right:1px solid var(--nd-bd)}
.tblock dd{font-weight:600;color:var(--head)}
.tblock .ok{color:var(--ok)}
.tblock .ok::before{content:"";display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:currentColor;vertical-align:1px}

/* a drawing in a narrow place (a card in a column, a phone) re-flows by ITS width, not the window's */
@container (max-width: 560px){
  .chain{flex-direction:column}
  .chain>.cx{flex-direction:row;justify-content:flex-start;min-height:48px;padding:6px 0 6px 22px;text-align:left}
  .chain>.cx i{width:1.5px;min-width:0;height:36px;order:-1}
  .chain>.cx i::after{right:auto;top:auto;bottom:-1px;left:-4.5px;border:5.25px solid transparent;border-top:8px solid var(--line-c);border-bottom:0}
  .chain>.cx.eq i{width:6px;height:36px;border:0;border-left:1.5px solid var(--ok);border-right:1.5px solid var(--ok)}
  .chain>.cx b{max-width:none}
  .race>div,.race>.ok{grid-template-columns:1fr;gap:8px}
  .hub{grid-template-columns:1fr;row-gap:18px}
  .hub .hub-c{order:-1}
  .hub .hub-l li{text-align:left}
  .hub li::after{display:none}
}
@container (max-width: 620px){
  .gate{grid-template-columns:1fr}
  .gate>.cx{flex-direction:row;justify-content:flex-start;min-height:44px;padding:4px 0 4px 22px}
  .gate>.cx i{width:1.5px;min-width:0;height:32px}
  .gate>.cx i::after{right:auto;top:auto;bottom:-1px;left:-4.5px;border:5.25px solid transparent;border-top:8px solid var(--line-c);border-bottom:0}
  .lanes{margin-top:8px}
  .lanes li{grid-template-columns:1fr;row-gap:10px}
}
@container (max-width: 340px){
  .cycle{grid-template-columns:1fr;padding-bottom:0}
  .cycle::before,.cycle::after{display:none}
  .cycle .cx{justify-content:center;padding:0;min-height:34px}
  .cycle .cx i{width:1.5px;min-width:0;height:24px}
  .cycle .cx i::after{right:auto;top:auto;bottom:-1px;left:-4.5px;border:5.25px solid transparent;border-top:8px solid var(--line-c);border-bottom:0}
}

/* a figure that is its own thing (a capability card): status + title, the drawing, its caption and its text */
.dg.card{padding:24px 26px 26px}
.card-h{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:18px}
.card-h h3{font-size:20px}
.dg .cap-k{margin-top:14px;text-wrap:balance}
.dg-p{margin-top:14px;font-size:16.5px;line-height:1.6;color:var(--body);text-wrap:pretty}
.dg-h.slim{padding-bottom:10px;margin-bottom:14px}
.dg.card .more{margin-top:10px}
.dg.card .nd{padding:12px 14px 14px}
.entries{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.entries li{position:relative;padding:12px 6px 22px;border-radius:7px;border:1px solid var(--nd-bd);background:var(--nd-bg);text-align:center;font:600 15px/1.2 var(--f-sans);color:var(--head)}
.entries li::after{content:"";position:absolute;left:50%;bottom:8px;width:14px;height:6px;margin-left:-7px;border-left:1.6px solid var(--ok);border-bottom:1.6px solid var(--ok);transform:rotate(-45deg)}
.entries li.next{border-style:dashed;background:transparent;color:var(--label)}
.entries li.next::after{content:none}
.hub-k{margin-top:10px}
/* the numbers band: figures under the rail's label, no heading of their own */
.figband{padding:72px 0 76px}
.figband-l{display:flex;justify-content:flex-end;padding-top:30px}
.figband::before{top:0}
.ledger.one>li{grid-template-columns:1fr}
.ledger.one>li:first-child{padding-top:4px}
.ledger.one{border-top:0}
.aside .small{font-size:15.5px;color:var(--label)}
.aside h3.ah{font-size:17px}
.aside.verify{margin-top:0}
.aside.verify .st{margin-top:16px}
.aside.verify .actions{margin-top:18px}

.cycle li.cx{border:0;padding:0}
.loopfig{margin-top:0;padding:14px 0 0;background:none;border:0;border-radius:0}
.loopfig figcaption{margin-top:16px}
.brief .sh::before{display:none}
.cols .st{margin:10px 0 0}
.loopfig .nd.seal{padding:26px 22px 20px}

/* ───────────────── The briefing CTA band (the homepage's destination, set still) ───────────────── */
.brief{padding:120px 0 132px;overflow:clip}
.brief-glow{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(60% 70% at 58% 44%,rgba(242,166,90,.16),rgba(242,166,90,.05) 55%,rgba(242,166,90,0) 80%)}
.panel{position:relative;isolation:isolate;padding:56px 56px 52px;border-radius:14px;color:var(--ivory);background-color:#1d1733;
  background:linear-gradient(180deg,#221b38 0%,#1c1732 32%,#191430 100%) padding-box,linear-gradient(180deg,rgba(255,218,174,.95),rgba(242,166,90,.5) 12%,rgba(242,166,90,.2) 40%,rgba(243,238,228,.12)) border-box;
  border:1px solid transparent;box-shadow:inset 0 1px 0 rgba(255,236,214,.22),0 -3px 34px -16px rgba(247,179,107,.6),0 2px 4px rgba(4,2,10,.4),0 30px 56px -22px rgba(4,2,10,.78)}
.panel::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(247,179,107,.12),rgba(247,179,107,.04) 90px,rgba(247,179,107,0) 220px)}
.brief h2{font-size:var(--h2);line-height:1.06;color:var(--head);max-width:14em}
.brief .lede{margin-top:22px;font-size:19px;line-height:1.6;color:#e7e2f0;max-width:40em}
.brief .actions{margin-top:36px}
.brief .sh::before{top:calc(var(--h2) * .52 - 6px);left:calc(-1 * var(--gr) - 6px)}

/* ───────────────── Forms (the homepage's fields; the preview never sends) ───────────────── */
.field label{display:block;margin-bottom:7px;font:600 14.5px/1.3 var(--f-sans);letter-spacing:.005em;color:var(--head)}
.field input,.field select,.field textarea{display:block;width:100%;height:48px;padding:0 14px;background:rgba(255,255,255,.05);border:1px solid rgba(236,230,245,.52);border-radius:6px;font:400 16.5px/1.2 var(--f-sans);color:#f7f4fb;caret-color:var(--amber);transition:border-color .2s,box-shadow .2s,background-color .2s;-webkit-appearance:none;appearance:none;color-scheme:dark}
.day .field input,.day .field select,.day .field textarea{background:#fffdf9;border-color:#8a8096;color:var(--ink);color-scheme:light;caret-color:var(--amber-deep)}
.field textarea{height:112px;padding:12px 14px;line-height:1.5;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#bbb3cd;opacity:1}
.day .field input::placeholder{color:#5d556a}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(242,166,90,.32)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.f-full{grid-column:1/-1}
.err{margin-top:7px;font:500 14px/1.4 var(--f-sans);color:#ffb7a8}
.day .err{color:#9b2c12}
.err[hidden]{display:none}
.field.bad input,.field.bad select,.field.bad textarea{border-color:#ff9c86;box-shadow:0 0 0 3px rgba(255,156,134,.28)}
.form-status{margin-top:18px;font:600 16px/1.5 var(--f-sans);color:var(--head)}
.form-status:empty{display:none}

/* ───────────────── Legal documents ───────────────── */
.legal-doc{max-width:44em}
.legal-doc h2{font-size:clamp(28px,3vw,36px);line-height:1.12;margin-top:56px;color:var(--head)}
.legal-doc h3{margin-top:32px}
.legal-doc p,.legal-doc li{font-size:17.5px;line-height:1.7;color:var(--body)}
.legal-doc p + p,.legal-doc ul,.legal-doc ol{margin-top:14px}
.legal-doc ul li{position:relative;padding-left:22px}
.legal-doc ul li::before{content:"";position:absolute;left:4px;top:.72em;width:6px;height:2px;background:var(--acc)}
.legal-doc ol{counter-reset:li}
.legal-doc ol li{position:relative;padding-left:30px;counter-increment:li}
.legal-doc ol li::before{content:counter(li) ".";position:absolute;left:0;font-weight:600;color:var(--head)}
.legal-doc li + li{margin-top:8px}
.legal-doc a{color:var(--head);text-underline-offset:4px}
.updated{margin-top:18px;font:500 15px/1.4 var(--f-sans);color:var(--label)}

/* ───────────────── Definition lists (term / value) ───────────────── */
.defs{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);border-top:1px solid var(--rule)}
.defs>div{display:contents}
.defs dt,.defs dd{padding:16px 0;border-bottom:1px solid var(--rule)}
.defs dt{padding-right:24px;font:600 16.5px/1.45 var(--f-sans);color:var(--head)}
.defs dd{font-size:17px;line-height:1.6;color:var(--body)}

/* ───────────────── Estimator shell (renders estimators.js output in the system) ───────────────── */
.est{padding:34px 36px 36px;border-radius:14px;background:var(--plate);border:1px solid var(--plate-bd)}
.est__method{font-size:17px;line-height:1.6;color:var(--body)}
.est__method strong{color:var(--head);font-weight:600}
.est__form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px;margin-top:28px}
.est__field label{display:flex;justify-content:space-between;gap:16px;margin-bottom:10px;font:600 15.5px/1.35 var(--f-sans);color:var(--head)}
.est__field b{font-variant-numeric:tabular-nums;color:var(--acc)}
.est__field input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;cursor:pointer;touch-action:pan-y;--thumb:var(--amber-deep);--track:rgba(122,54,6,.34)}
.night .est__field input[type=range]{--thumb:var(--amber);--track:rgba(242,166,90,.4)}
.est__field input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:var(--track)}
.est__field input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:var(--track)}
.est__field input[type=range]::-moz-range-progress{height:6px;border-radius:999px;background:var(--thumb)}
.est__field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;margin-top:-11px;border-radius:50%;background:var(--thumb);border:3px solid var(--paper);box-shadow:0 0 0 1px var(--thumb),0 2px 6px rgba(19,16,35,.25);cursor:pointer}
.est__field input[type=range]::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:var(--thumb);border:3px solid var(--paper);box-shadow:0 0 0 1px var(--thumb),0 2px 6px rgba(19,16,35,.25);cursor:pointer}
.est__field select{width:100%;height:48px;padding:0 12px;border-radius:6px;border:1px solid var(--nd-bd);background:var(--nd-bg);color:var(--head);font:500 16px/1.2 var(--f-sans)}
.est__results{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px 36px;margin-top:32px;padding-top:24px;border-top:1px solid var(--rule)}
.est__result{display:flex;flex-direction:column;gap:6px}
.est__result-num{font-family:var(--f-head);font-weight:450;font-size:40px;line-height:1.05;letter-spacing:-.01em;color:var(--head);font-variant-numeric:lining-nums tabular-nums}
.est__result-label{font:600 15px/1.4 var(--f-sans);color:var(--label)}
.est__note{margin-top:22px;font-size:15.5px;line-height:1.55;color:var(--label)}
.est__cta{margin-top:24px}

/* ───────────────── Tablet ───────────────── */
@media (max-width:1199px){
  .band{padding:104px 0 112px}
  .figs dd{font-size:54px}
  .index ol{grid-template-columns:repeat(3,minmax(0,1fr))}
  .split{column-gap:40px}
  .ledger>li,.ledger>div{column-gap:32px}
  .dg{padding:24px 24px 26px}
  .bd-grid{grid-template-columns:minmax(0,1fr) 140px minmax(0,1fr)}
}
@media (max-width:999px){
  .split,.split.wide-l{grid-template-columns:1fr}
  .cols{--c:2!important}
  .ledger>li,.ledger>div{grid-template-columns:1fr}
  .hub{grid-template-columns:1fr;row-gap:22px}
  .hub .hub-c{order:-1}
  .hub ul{grid-template-columns:1fr 1fr}
  .hub .hub-l li{text-align:left}
  .hub li::after{display:none}
  /* the boundary as one column: your side, the boundary drawn across, HiveSilo's side */
  .bd-grid{display:block}
  .bd-a,.bd-b{display:block}
  .bd-b{padding:0}
  .bd-w{display:flex;flex-direction:column;align-items:stretch;gap:14px;margin:22px 0;padding:22px 0 20px}
  .bd-lines{position:absolute;left:0;right:0;top:0;height:8px}
  .bd-lines::before,.bd-lines::after{left:0;right:0;width:auto;height:1.5px}
  .bd-lines::before{top:0}
  .bd-lines::after{top:6px;bottom:auto}
  .bd-w .bd-wl{padding:6px 0 0;text-align:center;justify-self:auto;align-self:center}
  .bd-w>.bd-port{align-self:center}
  .bd-w>.bd-cross{align-self:center;flex-direction:row}
  .bd-x{flex-direction:row;justify-content:center;gap:12px}
  .bd-x i{width:1.5px;height:40px}
  .bd-x.out i::after{right:auto;top:auto;bottom:-1px;left:-4.5px;border:5.25px solid transparent;border-top:8px solid var(--line-c);border-bottom:0}
  .bd-x.in i::after{left:-4.5px;top:-1px;border:5.25px solid transparent;border-bottom:8px solid var(--line-c);border-top:0}
  .bd-x b{background:none}
  .bd-dim{margin-top:14px}
  .bd-foot{grid-template-columns:1fr}
}

/* ───────────────── Phone ───────────────── */
@media (max-width:699px){
  body{font-size:16px}
  .band{padding:84px 0 88px}
  .ph{--ph-top:56px}
  .ph-body{padding-bottom:44px}
  .sh h1{max-width:none}
  .sh h2{max-width:none}
  .sh h1,.sh h2{overflow-wrap:break-word;hyphens:manual}
  /* the label follows the heading on a phone (a heading never wears a kicker) */
  .sh-r{position:static;width:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:14px;text-align:left}
  .sh-r .st{order:0}
  .sh + *{margin-top:22px}
  .lede,.ph .lede{font-size:18px}
  .ph-ctas{flex-direction:column;align-items:stretch;gap:6px;margin-top:28px}
  .ph-ctas .btn{width:100%}
  .ph-ctas .link{align-self:flex-start}
  .facts{flex-direction:column;gap:10px;margin-top:30px}
  .statusrow .rail{justify-content:flex-start;margin-bottom:10px}
  .statusrow ul{flex-direction:column;gap:8px}
  .index ol{grid-template-columns:1fr 1fr;column-gap:18px}
  .index a{font-size:15px}
  .prose p{font-size:17px}
  .verdict{font-size:21px!important}
  .figs{--n:1!important;row-gap:24px}
  .figband-l{justify-content:flex-start;padding:0 0 16px}
  .figs dd{font-size:48px}
  .cols{--c:1!important}
  .cols p,.ledger p,.pair p{font-size:16.5px}
  .items{--c:1!important}
  .items li{font-size:16.5px}
  .pair{grid-template-columns:1fr;row-gap:28px}
  .aside{padding:22px 20px 24px}
  .aside p{font-size:16.5px}
  .quote p{font-size:22px}
  .tbl th,.tbl td{font-size:16px;padding:12px 12px}
  .tbl.stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
  .tbl.stack,.tbl.stack tbody,.tbl.stack tr,.tbl.stack th,.tbl.stack td{display:block;width:auto}
  .tbl.stack tr{padding:14px 0;border-top:1px solid var(--rule)}
  .tbl.stack tbody tr:last-child{border-bottom:1px solid var(--rule)}
  .tbl.stack tbody th,.tbl.stack td{border:0;padding:4px 0}
  .tbl.stack tbody th{font-size:17px;padding-bottom:8px}
  .tbl.stack td{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:12px;padding:6px 10px;border-radius:6px}
  .tbl.stack td::before{content:attr(data-label);font:500 15px/1.45 var(--f-sans);color:var(--label)}
  .faq summary{font-size:17.5px}
  .faq .fa p{font-size:16.5px}
  .dg{margin-top:36px;padding:20px 16px 22px;border-radius:12px}
  .dg-h,.dg-f{flex-direction:column;gap:6px}
  .chain{flex-direction:column}
  .cx{flex-direction:row;justify-content:flex-start;min-height:52px;padding:6px 0 6px 22px;text-align:left}
  .cx i{width:1.5px;min-width:0;height:40px;order:-1}
  .cx i::after{right:auto;top:auto;bottom:-1px;left:-4.5px;border:5.25px solid transparent;border-top:8px solid var(--line-c);border-bottom:0}
  .cx.eq i{width:6px;height:40px;border:0;border-left:1.5px solid var(--ok);border-right:1.5px solid var(--ok)}
  .cx.back i::before{left:-4.5px;top:-1px;border:5.25px solid transparent;border-bottom:8px solid var(--line-c);border-top:0}
  .cx b{max-width:none}
  .track-l{--n:1!important;gap:8px}
  .track-l li,.track-l li:first-child,.track-l li:last-child{text-align:left}
  .track-art{height:84px}
  .race>div{grid-template-columns:1fr;gap:8px}
  .race i{height:1.5px;width:100%}
  .hub ul{grid-template-columns:1fr}
  .gate{grid-template-columns:1fr;row-gap:0}
  .lanes{margin-top:8px}
  .lanes li{grid-template-columns:1fr;row-gap:10px}
  .cycle{grid-template-columns:1fr;row-gap:0;padding-bottom:0}
  .cycle::before,.cycle::after{display:none}
  .cycle .cx{justify-content:center;padding:0;min-height:36px}
  .cycle .cx i{height:26px}
  .brief{padding:84px 0 92px}
  .panel{padding:32px 22px 30px;margin-left:-8px}
  .brief .lede{font-size:17px}
  .brief .actions{flex-direction:column;align-items:stretch;gap:6px}
  .brief .actions .btn{width:100%}
  .brief .actions .link{align-self:flex-start}
  .fgrid{grid-template-columns:1fr}
  .defs{grid-template-columns:1fr}
  .defs dt{border-bottom:0;padding-bottom:2px}
  .defs dd{padding-top:0}
  .est{padding:22px 18px 24px}
  .est__form{grid-template-columns:1fr}
  .est__result-num{font-size:34px}
  .legal-doc p,.legal-doc li{font-size:16.5px}
}

/* ───────────────── Reduced motion ───────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* briefing-popup:start */
/* The briefing dialog (owner item 43): the homepage card's pane, fields and key, lit, over the dimmed page. Every rule
   is scoped to .bpop and carries its own tokens, so it looks the same on the homepage and on every inner page. Values
   are the card's (index.html, "Briefing: the destination"); the pane is shown lit (--lit:1) and the key lit, as the
   card is once the light arrives. Reduced motion: nothing animates. */
.bpop{--f-head:"Newsreader","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;--f-sans:"Onest","Avenir Next","Segoe UI",sans-serif;
  --ivory:#f3eee4;--ink:#131023;--amber:#f2a65a;--ease:cubic-bezier(.16,1,.3,1);--head:#f3eee4;--body:#cfc9dc;--label:#bab2cd;--acc:#f2a65a;--lit:1;
  /* the window up to the page's scrollbar (a fixed box stops at clientWidth), so the dialog's own scrollbar stays visible and usable;
     the page behind is held still by the lock's scroll listener */
  position:fixed;inset:0;width:auto;height:100%;max-width:none;max-height:none;margin:0;padding:48px 32px 56px;border:0;background:transparent;color:var(--ivory);
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#3b3450 #06030a;font:400 18px/1.6 var(--f-sans);-webkit-font-smoothing:antialiased;text-align:left}
.bpop::backdrop{background:radial-gradient(900px 560px at 50% 0%,rgba(247,179,107,.17),rgba(242,166,90,.05) 55%,rgba(242,166,90,0) 80%),rgba(6,3,10,.8)}
.bpop *,.bpop *::before,.bpop *::after{box-sizing:border-box}
.bpop :focus-visible{outline:2px solid #c1aaff;outline-offset:3px}
.bpop-in{position:relative;width:100%;max-width:860px;min-height:calc(100% + 1px);margin:0 auto}   /* always 1px of travel: the dialog is always the scroller a wheel or a swipe lands on, never the page */
.bpop .brief-form{position:relative;z-index:1;margin:0}
.bpop .sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.bpop .nb{white-space:nowrap}
.bpop p,.bpop h2{margin:0;padding:0}
/* the close control: top right of the pane (desktop), in a bar pinned to the top of the sheet (phone) */
.bpop-bar{position:absolute;top:18px;right:18px;z-index:3}
.bpop-x{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:44px;height:44px;padding:0 16px;background:rgba(19,16,35,.55);border:1px solid rgba(243,238,228,.4);border-radius:3px;color:var(--ivory);font:500 15px/1 var(--f-sans);cursor:pointer;transition:border-color .2s var(--ease),background-color .2s var(--ease)}
.bpop-x:hover{border-color:rgba(243,238,228,.8);background:rgba(19,16,35,.8)}
.bpop-x svg{width:12px;height:12px;flex:none;stroke:currentColor;stroke-width:1.6;fill:none}
/* the pane: the card's slab of ink, lit through its rim */
.bpop .panel{position:relative;isolation:isolate;margin:0;padding:48px 48px 44px;border-radius:14px;color:var(--ivory);
  background:linear-gradient(180deg,#221b38 0%,#1c1732 32%,#191430 100%) padding-box,linear-gradient(180deg,rgba(214,202,255,.66),rgba(214,202,255,.34) 16%,rgba(226,216,250,.25) 48%,rgba(240,204,166,.32) 82%,rgba(242,166,90,.5)) border-box;
  border:1px solid transparent;
  box-shadow:inset 0 1px 0 rgba(255,236,214,.2),0 -3px 34px -16px rgba(247,179,107,calc(.6 * var(--lit))),0 2px 4px rgba(4,2,10,.4),0 30px 56px -22px rgba(4,2,10,.78),0 96px 140px -60px rgba(4,2,10,.85)}
.bpop .panel::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(247,179,107,.12),rgba(247,179,107,.04) 90px,rgba(247,179,107,0) 220px),radial-gradient(64% 34% at 6% 0%,rgba(250,190,120,.15),rgba(250,190,120,0) 72%);opacity:var(--lit)}
.bpop .panel::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,218,174,1),rgba(242,166,90,.74) 9%,rgba(242,166,90,.5) 30%,rgba(242,166,90,.42) 62%,rgba(247,179,107,.66));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:var(--lit)}
.bpop h2{font-family:var(--f-head);font-weight:460;font-optical-sizing:auto;font-size:50px;line-height:1.02;letter-spacing:-.015em;font-variant-numeric:lining-nums;text-wrap:balance;color:var(--head);max-width:11.5em}
.bpop .brief-intro{margin-top:20px;font-size:19px;line-height:1.5;color:#e7e2f0}
.bpop .fitline{margin-top:6px;font-size:15.5px;line-height:1.55;color:#d6d0e3;max-width:44em;text-wrap:balance}
.bpop fieldset{border:0;border-top:1px solid rgba(243,238,228,.13);margin:32px 0 0;padding:30px 0 0;min-width:0}
.bpop .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.bpop .f-full{grid-column:1/-1}
.bpop .field label{display:block;margin-bottom:7px;font:600 14.5px/1.3 var(--f-sans);letter-spacing:.005em;color:#efeaf5}
.bpop .field input,.bpop .field select,.bpop .field textarea{display:block;width:100%;height:48px;margin:0;padding:0 14px;background:rgba(255,255,255,.05);border:1px solid rgba(236,230,245,.52);border-radius:6px;font:400 16.5px/1.2 var(--f-sans);color:#f7f4fb;caret-color:var(--amber);transition:border-color .2s,box-shadow .2s,background-color .2s;-webkit-appearance:none;appearance:none;color-scheme:dark}
.bpop .field textarea{height:96px;padding:12px 14px;line-height:1.5;resize:vertical}
.bpop .field input::placeholder,.bpop .field textarea::placeholder{color:#bbb3cd;opacity:1}
.bpop .field input:hover,.bpop .field select:hover,.bpop .field textarea:hover{border-color:rgba(236,230,245,.76)}
.bpop .field input:focus,.bpop .field select:focus,.bpop .field textarea:focus{outline:none;border-color:var(--amber);background-color:rgba(255,255,255,.075);box-shadow:0 0 0 3px rgba(242,166,90,.32)}
.bpop .field input:-webkit-autofill,.bpop .field input:-webkit-autofill:focus{-webkit-text-fill-color:#f7f4fb;box-shadow:inset 0 0 0 60px #2a2340;caret-color:var(--amber)}
.bpop .sel{position:relative}
.bpop .sel select{padding-right:42px;cursor:pointer}
.bpop .sel select:invalid{color:#bbb3cd}
.bpop .sel select option{background:#1d1832;color:#f3eee4}
.bpop .sel svg{display:block;position:absolute;right:15px;top:50%;width:12px;height:8px;margin-top:-4px;pointer-events:none;stroke:#d9d2e6;stroke-width:1.6;fill:none}
.bpop .opt{font-weight:400;color:#d3cce0}
.bpop .err{margin-top:7px;font:500 14px/1.4 var(--f-sans);color:#ffb7a8}
.bpop .err[hidden]{display:none}
.bpop .field.bad input,.bpop .field.bad select,.bpop .field.bad textarea{border-color:#ff9c86;box-shadow:0 0 0 3px rgba(255,156,134,.28)}
.bpop .consent.bad .box{border-color:#ff9c86}
.bpop .consent-wrap .err{margin-left:38px}
.bpop .panel-note{margin:18px 0 0;font-size:15.5px;line-height:1.55;color:#ddd7e8;max-width:44em;text-wrap:balance}
.bpop .consent{position:relative;display:grid;grid-template-columns:24px 1fr;gap:14px;margin-top:20px;cursor:pointer;font-size:15.5px;line-height:1.55;color:#e8e3ef}
.bpop .consent input{position:absolute;left:0;top:1px;opacity:0;width:24px;height:24px;margin:0}
.bpop .box{position:relative;width:24px;height:24px;margin-top:1px;border:1.5px solid #d6cfe3;border-radius:5px;background:rgba(255,255,255,.05);display:grid;place-items:center;transition:background-color .15s,border-color .15s}
.bpop .box svg{display:block;width:14px;height:11px;stroke:#131023;stroke-width:2.2;fill:none;opacity:0;transition:opacity .15s}
.bpop .consent input:checked+.box{background:var(--amber);border-color:var(--amber)}
.bpop .consent input:checked+.box svg{opacity:1}
.bpop .consent input:focus-visible+.box{box-shadow:0 0 0 3px rgba(242,166,90,.55)}
.bpop .submit-row{display:flex;align-items:center;gap:28px;margin-top:28px;padding-top:28px;border-top:1px solid rgba(243,238,228,.13)}
.bpop .submit-row p{font-size:16px;line-height:1.55;color:#ddd7e8;max-width:26em;text-wrap:pretty}
/* the key: the card's, lit (the light sweeps across it once as the dialog opens; at once with reduced motion) */
.bpop .btn.go{position:relative;display:inline-flex;align-items:center;justify-content:center;height:58px;padding:0 34px;flex:none;overflow:hidden;isolation:isolate;border:0;border-radius:3px;background:linear-gradient(180deg,#3b3064,#2c2351);color:#fff;font:600 17px/1 var(--f-sans);white-space:nowrap;text-decoration:none;cursor:pointer;
  box-shadow:inset 0 0 0 1.5px rgba(243,238,228,.86),inset 0 2px 0 rgba(255,255,255,.12),0 1px 0 rgba(247,179,107,.42),0 14px 26px -14px rgba(4,2,10,.95);transition:background-color .2s var(--ease),transform .15s var(--ease),box-shadow .6s var(--ease) .35s}
.bpop .btn.go:hover{background:linear-gradient(180deg,#46397a,#342a5f)}
.bpop .btn.go:active{transform:scale(.985)}
.bpop .btn.go::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--amber);opacity:.95}
.bpop .btn.go .lit{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--amber);color:#131023;clip-path:inset(0 100% 0 0);transition:clip-path 1s var(--ease),background-color .2s var(--ease);pointer-events:none}
.bpop .btn.go .lit::after{content:attr(data-label)}
.bpop .btn.go.arrived .lit{clip-path:inset(0 0 0 0)}
.bpop .btn.go.arrived{box-shadow:inset 0 0 0 1px rgba(255,214,170,.92),inset 0 1px 0 rgba(255,246,234,.72),0 1px 0 rgba(250,190,124,.8),0 12px 24px -14px rgba(4,2,10,.88)}
.bpop .btn.go.arrived:hover .lit{background:#f6b373}
.bpop .btn.go:disabled{cursor:not-allowed}
.bpop .btn.go:focus-visible{outline:2px solid #c1aaff;outline-offset:3px}
/* the reassurances before you send: under the key, three across (one after another on a phone) */
.bpop .notes{position:static;width:auto;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.9fr) minmax(0,1.15fr);gap:14px 32px;align-items:start;margin-top:30px;padding-top:26px;border-top:1px solid rgba(243,238,228,.13)}
.bpop .notes .t{font:600 18px/1.35 var(--f-sans);color:var(--head)}
.bpop .notes p{font-size:16px;line-height:1.55;color:var(--body)}
.bpop .notes .lbl{font:600 14px/1.4 var(--f-sans);letter-spacing:.03em;color:var(--label)}
.bpop .notes .direct{font:500 16px/1.4 var(--f-sans);color:var(--head);user-select:all}
.bpop .notes .vt{display:block}
.bpop .notes .link{position:relative;z-index:1;color:var(--head);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:color-mix(in srgb,currentColor 55%,transparent);font-weight:500;padding:12px 0}
.bpop .notes .link:hover{text-decoration-color:currentColor}
/* the confirmation, in the dialog, as on the card */
.bpop .confirm{display:none;align-items:flex-end;gap:18px;margin-top:34px;padding:30px 0 4px;border-top:1px solid rgba(243,238,228,.13)}
.bpop .confirm:focus{outline:none}
.bpop .confirm svg{display:block;width:44px;height:44px;flex:none;stroke:var(--amber);stroke-width:1.5;fill:none}
.bpop .confirm p{font-family:var(--f-head);font-weight:460;font-size:40px;line-height:1.1;letter-spacing:-.012em;color:var(--ivory);max-width:14em}
.bpop .confirm p.small{margin-top:14px;font:500 16px/1.55 var(--f-sans);letter-spacing:0;color:#ddd7e8;max-width:none}
.bpop .brief-form.sent fieldset,.bpop .brief-form.sent .submit-row{display:none}
.bpop .brief-form.sent .confirm{display:flex}
.bpop .brief-form.sent .notes{display:none}   /* after a send the confirmation follows the heading (as on the card's phone layout) */
@media (max-width:999px){
  .bpop .submit-row{flex-direction:column;align-items:flex-start;gap:16px}
  .bpop .submit-row p{order:-1}
}
@media (max-width:860px){
  .bpop{padding:32px 20px 40px}
  .bpop .panel{padding:44px 36px 40px}
  .bpop h2{font-size:44px}
}
/* phone: a full-screen sheet; the close bar stays pinned at its top; the light enters along the sheet's top edge */
@media (max-width:699px){
  .bpop{padding:0;scroll-padding-top:80px;scroll-padding-bottom:16px}
  .bpop-in{display:flex;flex-direction:column;max-width:none;min-height:calc(100% + 1px)}
  .bpop-bar{position:sticky;top:0;right:auto;display:flex;justify-content:flex-end;padding:10px 12px;background:#221b38;border-bottom:1px solid rgba(243,238,228,.12);box-shadow:inset 0 2px 0 #f7b36b,0 -3px 22px -8px rgba(247,179,107,.6)}
  .bpop .brief-form{display:flex;flex-direction:column;flex:1}
  .bpop .panel{flex:1;padding:22px 20px 32px;border:0;border-radius:0;background:linear-gradient(180deg,#221b38 0%,#1c1732 40%,#191430 100%);box-shadow:none}
  .bpop .panel::after{display:none}
  .bpop h2{font-size:min(36px,calc((100vw - 100px) / 9.3));line-height:1.06}
  .bpop .brief-intro{font-size:17px;margin-top:16px}
  .bpop .fitline{font-size:15px}
  .bpop fieldset{margin-top:26px;padding-top:24px}
  .bpop .fgrid{grid-template-columns:1fr;gap:16px}
  .bpop .submit-row{align-items:stretch}
  .bpop .submit-row .btn{width:100%}
  .bpop .notes{grid-template-columns:1fr;gap:12px;margin-top:26px;padding-top:22px}
  .bpop .notes .dl{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
  .bpop .confirm p{font-size:30px}
}
/* motion, only where it is welcome: the pane rises into place (the sheet slides up on a phone), the scrim fades in */
@media (prefers-reduced-motion:no-preference){
  .bpop[open] .bpop-in{animation:bpop-rise .34s var(--ease) both}
  .bpop[open]::backdrop{animation:bpop-fade .24s ease-out both}
}
@media (prefers-reduced-motion:no-preference) and (max-width:699px){
  .bpop[open] .bpop-in{animation-name:bpop-up}
}
@keyframes bpop-rise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes bpop-up{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
@keyframes bpop-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .bpop,.bpop *,.bpop *::before,.bpop *::after,.bpop::backdrop{animation:none!important;transition:none!important}
}
/* briefing-popup:end */

/* release port: the line that names a failed send (and carries the prefilled mailto) under the dialog's and the card's submit */
.brief-form .form-status{margin-top:22px;font:500 16px/1.55 var(--f-sans);color:var(--ivory);max-width:36em}
.brief-form .form-status a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.brief-form .form-status:empty,.brief-form.sent .form-status{display:none}

/* release port (SEO-15): the connector names on /integrations are headings again (<h3 class="dt"> / <p class="dd"> in a
   <div class="defs">, since a <dt> may not hold a heading), drawn exactly as the <dt>/<dd> they replace */
.defs .dt,.defs .dd{padding:16px 0;border-bottom:1px solid var(--rule)}
.defs .dt{padding-right:24px;font:600 16.5px/1.45 var(--f-sans);letter-spacing:normal;text-wrap:wrap;color:var(--head)}
.defs .dd{font-size:17px;line-height:1.6;color:var(--body)}
@media (max-width:699px){
  .defs .dt{border-bottom:0;padding-bottom:2px}
  .defs .dd{padding-top:0}
}