/* ---------- 0908 self-hosted fonts (were Google Fonts; preloaded from the template) ---------- */
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/instrument-sans-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/instrument-serif-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/instrument-serif-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* =============================================================================
FinePrint — site design system (build 0827 "depth")
ide8 language: paper / sand / deep navy, Instrument Serif display,
Instrument Sans UI, amber accent, teal working colour.
Shared by every page. Zero framework. One small js file (js/site.js).
HARD RULES carried forward from canon:
· green / yellow / red are matter-risk colours. Amber is the brand accent and
may decorate — EXCEPT inside .counsel bands, which stay amber-free so
Yellow reads semantically.
· .mj artwork is ink+watercolour on white and is multiplied into the band, so
it must only ever sit on a light band (paper / white / sand).
· every prefers-reduced-motion override must MATCH the specificity of the
rule that set the animation, or the animation wins the cascade.
========================================================================== */
/* ---------- tokens ---------- */
:root{
--paper:#FCFBF9; --paper-2:#FFFFFF; --sand:#F5F2EC; --sand-2:#EFEBE2;
--deep:#0C1A24; --deep-2:#12242F; --deep-3:#1B333F; --ink:#101E28;
--grey-1:#33454F; --grey-2:#566873; --grey-3:#7E8F99; --grey-4:#AFBDC5;
--line:#E4E8E9; --line-soft:#EFF1F0; --line-dark:rgba(236,237,234,.16);
--amber:#F59E0B; --amber-deep:#C77C05; --amber-wash:#FFF2D9;
--teal:#17627A; --teal-deep:#10495B; --teal-wash:#E2EFF3;
--cream:#F2EDE3; --mist:#BCC9D2; --teal-lt:#8FC1D4;
--lv-green:#2F7A4D; --lv-yellow:#B45309; --lv-yellow-dot:#D97706; --lv-red:#C0392B;
--display:'Instrument Serif',ui-serif,Georgia,serif;
--body:'Instrument Sans',system-ui,-apple-system,sans-serif;
--mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
--maxw:1240px; --pad:clamp(20px,5vw,64px); --sec:clamp(64px,9vw,132px);
--r-media:24px; --r-chip:999px;
--navh:74px;
}
@media (max-width:1080px){ :root{--navh:64px} }
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
font-size:16.5px;line-height:1.65;font-variant-ligatures:common-ligatures}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0;padding:0}
ul{list-style:none}
a{color:inherit}
img,svg{max-width:100%}
table{border-collapse:collapse;width:100%}
::selection{background:var(--amber-wash);color:var(--ink)}
a:focus-visible,.btn:focus-visible,summary:focus-visible,button:focus-visible{
outline:3px solid var(--teal);outline-offset:3px;border-radius:8px}
.btn:focus-visible{border-radius:var(--r-chip)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.wrap-n{max-width:900px;margin-inline:auto;padding-inline:var(--pad)}
.band{padding-block:var(--sec)}
.band-tight{padding-block:clamp(46px,6vw,80px)}
.band-paper{background:var(--paper)}
.band-white{background:var(--paper-2)}
.band-sand{background:var(--sand)}
.band-line{border-top:1px solid var(--line)}
.band-deep{background:
radial-gradient(120% 100% at 86% 0%, rgba(23,98,122,.26), transparent 56%),
radial-gradient(90% 80% at 6% 100%, rgba(245,158,11,.09), transparent 55%),
var(--deep)}
section[id],div[id].anchor{scroll-margin-top:calc(var(--navh) + 14px)}
/* ---------- type ---------- */
h1{font-family:var(--display);font-weight:400;font-size:clamp(40px,6vw,72px);
line-height:1.04;letter-spacing:-.01em;color:var(--ink);max-width:13ch;text-wrap:balance}
h2{font-family:var(--display);font-weight:400;font-size:clamp(29px,4.4vw,50px);
line-height:1.08;letter-spacing:-.005em;color:var(--ink);max-width:26ch;text-wrap:balance}
h3{font-family:var(--display);font-weight:400;font-size:clamp(21px,2.1vw,26px);
line-height:1.2;color:var(--ink)}
h1 em,h2 em,h3 em{font-style:italic}
.deck{font-size:clamp(17.5px,1.6vw,20px);line-height:1.62;color:var(--grey-1);
max-width:62ch;margin-top:20px}
.body-l{font-size:17px;line-height:1.72;color:var(--grey-1);max-width:58ch;margin-top:22px}
.body-l + .body-l{margin-top:20px}
.lede{font-size:clamp(17.5px,1.7vw,20.5px);line-height:1.6;color:var(--grey-1);
max-width:46ch;margin-top:24px}
.kick{display:inline-flex;align-items:center;gap:11px;font-size:12.5px;font-weight:600;
letter-spacing:.16em;text-transform:uppercase;color:var(--grey-2)}
.kick::before{content:"";width:24px;height:2.5px;background:var(--amber);border-radius:2px}
.kick-dark{color:var(--teal-lt)}
.secdash{display:block;width:30px;height:3px;border-radius:2px;background:var(--amber);margin-bottom:24px}
.squig-wrap{position:relative;white-space:nowrap}
.squig{position:absolute;left:-2%;bottom:-.1em;width:104%;height:.16em;overflow:visible}
.h-dark{color:var(--cream)}
.deck-dark{color:var(--grey-4)}
.small{font-size:13.8px;line-height:1.7;color:var(--grey-2)}
.mono{font-family:var(--mono);font-size:.92em;letter-spacing:-.01em}
.pull{font-family:var(--display);font-size:clamp(23px,2.8vw,33px);line-height:1.36;
color:var(--ink);max-width:24ch}
.pull-dark{color:var(--cream)}
/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:var(--r-chip);
padding:15px 27px;font-family:var(--body);font-size:15.5px;font-weight:600;line-height:1;
text-decoration:none;border:1px solid transparent;cursor:pointer;
transition:background .22s ease,border-color .22s ease,color .22s ease}
.btn .arr{transition:transform .25s ease}
.btn:hover .arr{transform:translateX(4px)}
.btn-primary{background:var(--deep);color:var(--paper)}
.btn-primary:hover{background:var(--teal-deep)}
.btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal-deep)}
.btn-light{background:var(--cream);color:var(--deep)}
.btn-light:hover{background:#FFFFFF}
.btn-out-dark{border-color:rgba(236,237,234,.4);color:var(--cream)}
.btn-out-dark:hover{border-color:var(--cream);background:rgba(236,237,234,.08)}
.btn-sm{padding:11px 20px;font-size:14px}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:34px}
.tlink{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;
color:var(--teal);text-decoration:none;border-bottom:1px solid rgba(23,98,122,.32);
padding-bottom:2px;transition:border-color .2s ease,color .2s ease}
.tlink:hover{color:var(--teal-deep);border-bottom-color:var(--teal)}
.tlink .arr{transition:transform .25s ease}
.tlink:hover .arr{transform:translateX(3px)}
.tlink-dark{color:var(--teal-lt);border-bottom-color:rgba(143,193,212,.4)}
.tlink-dark:hover{color:var(--cream);border-bottom-color:var(--cream)}
/* ---------- nav ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--deep);color:var(--paper);
padding:12px 20px;border-radius:0 0 12px 0;font-weight:600;text-decoration:none}
.skip:focus{left:0}
.nav{position:sticky;top:0;z-index:60;background:rgba(252,251,249,.86);
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:10px 20px;padding-block:13px}
.brand{display:block;margin-right:auto;flex:none}
.brand svg{display:block;height:25px;width:auto}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links > a,.nav-drop > summary{display:inline-flex;align-items:center;gap:6px;
font-size:14.5px;font-weight:500;color:var(--grey-1);text-decoration:none;white-space:nowrap;
padding:8px 12px;border-radius:10px;cursor:pointer;list-style:none;
transition:background .18s ease,color .18s ease}
.nav-drop > summary::-webkit-details-marker{display:none}
.nav-links > a:hover,.nav-drop > summary:hover{color:var(--ink);background:rgba(16,30,40,.05)}
.nav-links > a[aria-current="page"],.nav-drop[data-current] > summary{color:var(--ink);font-weight:600}
.nav-links > a[aria-current="page"]{position:relative}
.nav-links > a[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;
bottom:2px;height:2px;border-radius:2px;background:var(--amber)}
.nav-drop{position:relative}
.nav-caret{width:9px;height:9px;flex:none;transition:transform .2s ease}
.nav-drop[open] .nav-caret{transform:rotate(180deg)}
.nav-drop[open] > summary{background:rgba(16,30,40,.05);color:var(--ink)}
.nav-menu{position:absolute;top:calc(100% + 10px);left:-6px;z-index:70;min-width:322px;
background:var(--paper-2);border:1px solid var(--line);border-radius:18px;
box-shadow:0 22px 48px -18px rgba(12,26,36,.28),0 2px 6px rgba(12,26,36,.06);
padding:10px;animation:navpop .16s ease both}
@keyframes navpop{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.nav-menu a{display:grid;grid-template-columns:auto 1fr;gap:2px 13px;text-decoration:none;
padding:11px 13px;border-radius:12px;transition:background .16s ease}
.nav-menu a:hover{background:var(--sand)}
.nav-menu .nm-ico{grid-row:1 / span 2;width:19px;height:19px;margin-top:3px;color:var(--teal);flex:none}
.nav-menu .nm-t{font-size:14.8px;font-weight:600;color:var(--ink);line-height:1.3}
.nav-menu .nm-d{font-size:13.2px;color:var(--grey-2);line-height:1.45}
.nav-menu .nm-sep{margin:8px 13px 6px;font-size:11.5px;font-weight:700;letter-spacing:.15em;
text-transform:uppercase;color:var(--grey-3)}
.nav-cta{flex:none;display:flex;align-items:center;gap:10px}
.nav-cta .btn-ghost{border-color:var(--grey-4);color:var(--grey-1)}
.nav-cta .btn-ghost:hover{border-color:var(--teal);color:var(--teal-deep)}
.nav-toggle{display:none}
@media (max-width:1080px){
.nav-in{gap:12px}
.nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
border:1px solid var(--line);border-radius:12px;background:var(--paper-2);cursor:pointer}
.nav-toggle svg{width:18px;height:18px;color:var(--ink)}
.nav-links{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;
align-items:stretch;gap:2px;background:var(--paper-2);border-bottom:1px solid var(--line);
padding:10px var(--pad) 22px;max-height:calc(100vh - var(--navh));overflow-y:auto;
box-shadow:0 24px 40px -22px rgba(12,26,36,.32)}
.nav.is-open .nav-links{display:flex}
.nav-links > a,.nav-drop > summary{padding:13px 8px;font-size:16px;border-radius:10px}
.nav-links > a[aria-current="page"]::after{left:8px;right:auto;width:24px;bottom:8px}
.nav-drop > summary{justify-content:space-between}
.nav-menu{position:static;min-width:0;border:none;box-shadow:none;padding:2px 0 10px 8px;
background:transparent;border-left:2px solid var(--line);margin-left:8px;animation:none}
.nav-cta{display:none}
.nav-links .nav-cta-m{display:flex;gap:10px;margin-top:14px;justify-content:center}
.nav-links .nav-cta-m .btn{flex:1;justify-content:center}
}
@media (min-width:1081px){ .nav-links .nav-cta-m{display:none} }
/* ---------- image slots ---------- */
.mj{position:relative;border-radius:var(--r-media);overflow:hidden;
background-size:cover;background-position:center;mix-blend-mode:multiply}
.mj-01{aspect-ratio:4/5;background-image:url('../img/mj-01.jpg')}
.mj-02{aspect-ratio:4/3;background-image:url('../img/mj-02.jpg')}
.mj-03{aspect-ratio:4/5;background-image:url('../img/mj-03.jpg')}
.mj-04{aspect-ratio:3/2;background-image:url('../img/mj-04.jpg')}
.mj-05{aspect-ratio:21/9;background-image:url('../img/mj-05.jpg')}
@media (max-width:900px){ .mj-01,.mj-03{aspect-ratio:4/3} }
@media (max-width:700px){ .mj-05{aspect-ratio:16/10} }
/* ---------- video in an image slot ----------
A .mj slot that plays instead of sitting still. The video inherits the
slot's aspect-ratio, radius, overflow clip and multiply blend, so it drops
into the band the same way the artwork does. object-fit:cover is doing real
work here: the source is letterboxed 16:9 around a 4:5 subject, and cover
in a 4:5 box crops exactly the black bars. The slot keeps its background
image, which shows through as the still whenever the video has not been
mounted — no JS, reduced motion, or a browser that refuses to autoplay. */
.mj-video video{position:absolute;inset:0;display:block;width:100%;height:100%;
object-fit:cover;border:0}
/* ---------- generic grids ---------- */
.duo{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(34px,5vw,80px);align-items:center}
.duo-t{align-items:start}
.duo-r > :first-child{order:2}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3.2vw,44px)}
.quad{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
/* The collapse below uses !important on purpose. Pages set column ratios with
inline styles (`style="grid-template-columns:1.06fr .94fr"`), and an inline
declaration outranks a media query — without this, a two-column band would
stay two columns on a phone. Nothing else here is !important. */
@media (max-width:900px){
.duo{grid-template-columns:1fr !important;gap:40px}
.duo-r > :first-child{order:0}
.trio{grid-template-columns:1fr !important;gap:26px}
}
@media (max-width:980px){ .quad{grid-template-columns:repeat(2,1fr) !important} }
@media (max-width:560px){ .quad{grid-template-columns:1fr !important} }
/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(38px,5vw,64px)}
.cards-2{grid-template-columns:repeat(2,1fr)}
.cards-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--paper-2);border:1px solid var(--line);border-radius:20px;
padding:30px 28px 34px;display:flex;flex-direction:column}
.band-white .card{background:var(--paper)}
.card h3{font-size:clamp(20px,1.9vw,24px)}
.card p{margin-top:13px;font-size:15.4px;line-height:1.66;color:var(--grey-2)}
.card .card-ico{width:26px;height:26px;color:var(--teal);margin-bottom:18px}
.card-num{font-family:var(--display);font-size:15px;color:var(--amber-deep);
letter-spacing:.06em;margin-bottom:12px}
.card-dark{background:var(--deep-2);border-color:var(--line-dark)}
.card-dark h3{color:var(--cream)}
.card-dark p{color:var(--mist)}
@media (max-width:1000px){ .cards,.cards-4{grid-template-columns:repeat(2,1fr) !important} }
@media (max-width:640px){ .cards,.cards-2,.cards-4{grid-template-columns:1fr !important;gap:13px} }
/* ---------- ledger rows (hairline list) ---------- */
.ledger{margin-top:clamp(34px,4.6vw,54px);border-bottom:1px solid var(--line)}
.ledger li,.ledger .lrow{display:grid;grid-template-columns:minmax(160px,250px) 1fr;
gap:8px 30px;padding:22px 0;border-top:1px solid var(--line)}
.ledger h3{font-size:clamp(19px,1.8vw,22px)}
.ledger p{font-size:15.4px;line-height:1.6;color:var(--grey-2);align-self:center}
.ledger-dark{border-bottom-color:var(--line-dark)}
.ledger-dark li{border-top-color:var(--line-dark)}
.ledger-dark h3{color:var(--cream)}
.ledger-dark p{color:var(--mist)}
@media (max-width:820px){
.ledger li,.ledger .lrow{grid-template-columns:1fr !important;gap:6px;padding:18px 0}
}
/* ---------- page hero (secondary pages) ---------- */
.phero{padding-block:clamp(46px,6vw,86px) clamp(44px,6vw,78px);border-bottom:1px solid var(--line)}
.phero-deep{border-bottom:none}
.phero h1{max-width:17ch;font-size:clamp(38px,5.4vw,64px)}
.phero .lede{max-width:56ch}
.crumbs{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:500;
color:var(--grey-2);margin-bottom:22px}
.crumbs a{text-decoration:none;color:var(--grey-2)}
.crumbs a:hover{color:var(--ink)}
.crumbs-dark{color:var(--mist)}
.crumbs-dark a{color:var(--teal-lt)}
.crumbs-dark a:hover{color:var(--cream)}
/* ---------- in-page contents rail ---------- */
.toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.toc a{font-size:13.4px;font-weight:600;text-decoration:none;color:var(--grey-1);
border:1px solid var(--line);background:var(--paper-2);border-radius:var(--r-chip);
padding:8px 15px;transition:border-color .18s ease,color .18s ease}
.toc a:hover{border-color:var(--grey-4);color:var(--ink)}
.toc-dark a{background:rgba(236,237,234,.05);border-color:var(--line-dark);color:var(--mist)}
.toc-dark a:hover{border-color:var(--teal-lt);color:var(--cream)}
/* ---------- endpoint / code vocabulary ---------- */
.slug{display:inline-flex;align-items:center;font-family:var(--mono);font-size:12.4px;
letter-spacing:-.01em;color:var(--teal-deep);background:var(--teal-wash);
border-radius:7px;padding:4px 9px;white-space:nowrap}
.slug-dark{color:var(--teal-lt);background:rgba(143,193,212,.13)}
.slug-amber{color:var(--amber-deep);background:var(--amber-wash)}
.slugs{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.tally{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
margin:clamp(34px,4.4vw,52px) 0 clamp(28px,3.4vw,42px)}
.tg{flex:none;height:15px;width:calc(var(--n) * 9px - 7px);
background:repeating-linear-gradient(90deg,var(--teal) 0 2px,transparent 2px 9px)}
.tlead{flex:1;min-width:50px;height:2px;
background:repeating-linear-gradient(90deg,var(--grey-4) 0 2px,transparent 2px 9px);opacity:.7}
.tsum{font-family:var(--display);font-size:31px;line-height:1;color:var(--ink);
font-variant-numeric:tabular-nums}
.ep-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ep{background:var(--paper-2);border:1px solid var(--line);border-radius:18px;
padding:22px 21px 24px;display:flex;flex-direction:column}
.band-white .ep{background:var(--paper)}
.ep-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ep-name{font-family:var(--body);font-size:12.5px;font-weight:700;letter-spacing:.13em;
text-transform:uppercase;color:var(--grey-1)}
.ep-count{font-family:var(--display);font-size:30px;line-height:1;color:var(--ink);
font-variant-numeric:tabular-nums}
.ep p{font-size:14px;line-height:1.55;color:var(--grey-2);margin-top:10px}
.ep .slugs{margin-top:auto;padding-top:16px}
@media (max-width:1020px){ .ep-grid{grid-template-columns:repeat(2,1fr) !important} }
@media (max-width:520px){ .ep-grid{grid-template-columns:1fr !important;gap:12px} }
/* ---------- console panel (hero + endpoint pages) ------------------------
A product-true "endpoint call" panel: request line, run trace, result.
Static markup; only the caret and the running dots move. */
.console{background:var(--deep);border-radius:20px;overflow:hidden;
box-shadow:0 34px 70px -34px rgba(12,26,36,.55),0 2px 8px rgba(12,26,36,.10);
font-family:var(--mono);color:var(--cream)}
.console-lt{background:var(--paper-2);color:var(--ink);border:1px solid var(--line);
box-shadow:0 22px 48px -30px rgba(12,26,36,.34)}
.con-bar{display:flex;align-items:center;gap:9px;padding:13px 18px;
border-bottom:1px solid var(--line-dark);background:rgba(255,255,255,.03)}
.console-lt .con-bar{border-bottom-color:var(--line);background:var(--sand)}
.con-dot{width:9px;height:9px;border-radius:50%;background:rgba(236,237,234,.24);flex:none}
.console-lt .con-dot{background:var(--grey-4)}
.con-title{font-size:11.6px;letter-spacing:.11em;text-transform:uppercase;
color:rgba(236,237,234,.72);margin-left:6px}
.console-lt .con-title{color:var(--grey-3)}
.con-live{margin-left:auto;display:inline-flex;align-items:center;gap:7px;
font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-lt)}
.con-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--teal-lt);
animation:conpulse 2.4s ease-in-out infinite}
@keyframes conpulse{0%,100%{opacity:.35}50%{opacity:1}}
.con-body{padding:22px 20px 24px;font-size:13.2px;line-height:1.85;overflow-wrap:anywhere}
@media (min-width:600px){ .con-body{padding:26px 26px 28px;font-size:13.8px} }
.con-req{color:var(--cream);word-break:break-word}
.console-lt .con-req{color:var(--ink)}
.con-verb{color:var(--amber);font-weight:600}
.con-path{color:var(--teal-lt)}
.console-lt .con-path{color:var(--teal)}
.con-com{color:rgba(236,237,234,.66)}
.console-lt .con-com{color:var(--grey-3)}
.con-rule{height:1px;background:var(--line-dark);margin:18px 0}
.console-lt .con-rule{background:var(--line)}
.con-steps{display:grid;gap:9px}
.con-step{display:grid;grid-template-columns:17px 1fr auto;gap:12px;align-items:baseline;
color:rgba(236,237,234,.78);font-size:12.8px}
.console-lt .con-step{color:var(--grey-1)}
.con-tick{color:var(--lv-green);font-family:var(--body);font-weight:700;line-height:1.5}
.con-step .con-t{color:rgba(236,237,234,.66);font-size:11.4px;white-space:nowrap}
.console-lt .con-step .con-t{color:var(--grey-3)}
.con-step-run .con-tick{color:var(--teal-lt)}
.con-step-run{color:var(--cream)}
@media (max-width:560px){
.con-step{grid-template-columns:17px 1fr}
.con-step .con-t{grid-column:2;font-size:11px}
}
.con-run-dots::after{content:"";animation:condots 1.6s steps(4,end) infinite}
@keyframes condots{0%{content:""}25%{content:"·"}50%{content:"··"}75%{content:"···"}}
.con-flag{display:inline-flex;align-items:center;gap:6px;font-family:var(--body);
font-size:11.4px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
border-radius:var(--r-chip);padding:3px 9px}
.con-flag-y{color:#F5C978;background:rgba(217,119,6,.18)}
.con-flag-g{color:#8FD3AB;background:rgba(47,122,77,.2)}
.console-lt .con-flag-y{color:var(--lv-yellow);background:#FDF0DC}
.console-lt .con-flag-g{color:var(--lv-green);background:#E4F2EA}
.con-out{margin-top:18px;padding:15px 16px;border-radius:13px;
background:rgba(236,237,234,.055);border:1px solid var(--line-dark);
font-size:12.6px;line-height:1.7;color:rgba(236,237,234,.8)}
.console-lt .con-out{background:var(--sand);border-color:var(--line);color:var(--grey-1)}
.con-out b{color:var(--cream);font-weight:600}
.console-lt .con-out b{color:var(--ink)}
@media (prefers-reduced-motion: reduce){
.con-live::before{animation:none}
.con-run-dots::after{animation:none;content:"···"}
}
/* ---------- the system loop (home §4) -----------------------------------
The argument is a cycle, so the drawing is a cycle — and it is ONE drawing.
A single square-ish SVG reflows with its column at every width, so there is
no second variant, no media-query swap, and therefore no width at which the
diagram is torn down, restarted or lost mid-resize. Three stations sit on
the ring, a single payload sweeps it (teal on the way out, amber on the way
home) and each station pings as the payload arrives. The fourth item is not
a station: it is what the loop pays out, so inside the four-item column it
is set below a rule, keyed in amber, and marked with a solid diamond
instead of a station circle. */
.loop{position:relative;margin-top:clamp(40px,5.4vw,66px);border-radius:26px;
border:1px solid var(--line);
padding:clamp(24px,3.4vw,42px) clamp(20px,3.4vw,46px) clamp(24px,3vw,36px);
background:
radial-gradient(88% 88% at 8% 4%, rgba(23,98,122,.075), transparent 58%),
radial-gradient(74% 88% at 96% 96%, rgba(245,158,11,.10), transparent 54%),
var(--paper-2)}
.band-white .loop{background:
radial-gradient(88% 88% at 8% 4%, rgba(23,98,122,.075), transparent 58%),
radial-gradient(74% 88% at 96% 96%, rgba(245,158,11,.10), transparent 54%),
var(--paper)}
/* diagram left, four items right */
.loop-in{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1fr);
gap:clamp(24px,3.2vw,52px);align-items:center}
.loop-stage{position:relative;min-width:0}
.loop-svg{display:block;width:100%;max-width:420px;height:auto;margin-inline:auto}
.loop-nodes{display:grid;gap:clamp(16px,2.1vw,24px)}
.lnode{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:15px}
.lnode-m{grid-row:1 / span 3;width:30px;height:30px;border-radius:50%;
border:2px solid var(--teal);background:var(--paper-2);position:relative;margin-top:2px}
.lnode-k{font-family:var(--mono);font-size:11.4px;letter-spacing:.1em;
text-transform:uppercase;color:var(--teal)}
.lnode h3{font-size:clamp(19px,1.9vw,23px);margin-top:3px}
.lnode p{margin-top:7px;font-size:14.8px;line-height:1.62;color:var(--grey-2)}
.lnode:nth-child(3) .lnode-k{color:var(--amber-deep)}
.lnode:nth-child(3) .lnode-m{border-color:var(--amber-deep)}
/* the markers echo the three station glyphs on the ring */
.gm-doc,.gm-doc::before,.gm-doc::after{position:absolute;height:2.4px;border-radius:2px;
background:var(--teal);left:7px}
.gm-doc{top:12px;width:11px}
.gm-doc::before{content:"";top:-5px;width:15px;left:0}
.gm-doc::after{content:"";top:5px;width:15px;left:0}
.gm-net{position:absolute;top:8px;left:8px;width:10px;height:10px;border-radius:50%;
border:2px solid var(--teal)}
.gm-mod{position:absolute;top:9px;left:9px;width:8px;height:8px;border-radius:50%;
background:var(--amber)}
/* the fourth item — an outcome, not a station. Rule above it, amber cap,
amber key, a solid diamond where the stations carry an open circle, and a
thin amber wash so it reads as the tray the loop drops into. */
.lnode-out{margin-top:clamp(4px,.9vw,10px);margin-inline:-10px;
padding:clamp(16px,1.7vw,20px) 10px clamp(12px,1.4vw,16px);
border-top:1px solid var(--line);border-radius:0 0 14px 14px;
background:linear-gradient(180deg,rgba(245,158,11,.085),rgba(245,158,11,0) 76%)}
.lnode-out::before{content:"";position:absolute;left:10px;top:-1px;width:88px;height:2px;
background:var(--amber);border-radius:2px}
.lnode-out .lnode-k{color:var(--amber-deep)}
.lnode-out .lnode-m{border-color:transparent;background:none}
.gm-pay{position:absolute;top:8px;left:8px;width:12px;height:12px;border-radius:2px;
background:var(--amber);transform:rotate(45deg)}
/* motion — one payload, one lap every ten seconds, three equal legs */
.loop .lp3-run{animation:lp3run 10s linear infinite, lp3hue 10s linear infinite}
@keyframes lp3run{from{stroke-dashoffset:0}to{stroke-dashoffset:-100}}
@keyframes lp3hue{0%,63%{stroke:#17627A}66%,96%{stroke:#C77C05}99%,100%{stroke:#17627A}}
.loop .lp3-p1,.loop .lp3-p2,.loop .lp3-p3{transform-box:fill-box;transform-origin:center;opacity:0}
.loop .lp3-p1{animation:lp3ping 10s ease-out 0s infinite}
.loop .lp3-p2{animation:lp3ping 10s ease-out -6.667s infinite}
.loop .lp3-p3{animation:lp3ping 10s ease-out -3.333s infinite}
@keyframes lp3ping{
0%{transform:scale(1);opacity:.55}
18%{transform:scale(1.45);opacity:0}
100%{transform:scale(1.45);opacity:0}}
@media (max-width:900px){
/* one column: the drawing on top, the four items beneath it. The drawing is
the same drawing — it simply gets the full panel width. */
.loop{padding-inline:clamp(14px,3.4vw,30px)}
.loop-in{grid-template-columns:minmax(0,1fr);gap:clamp(22px,3.4vw,32px)}
.loop-stage{width:100%;max-width:420px;margin-inline:auto}
.loop-svg{max-width:none}
.loop-nodes{gap:22px}
}
@media (prefers-reduced-motion: reduce){
.loop .lp3-run{animation:none}
.loop .lp3-p1,.loop .lp3-p2,.loop .lp3-p3{animation:none}
}
/* ---------- the demo frame ---------- */
.demo{margin-top:clamp(38px,5vw,60px)}
.demo-frame{position:relative;border-radius:18px;overflow:hidden;background:var(--paper-2);
border:1px solid rgba(12,26,36,.14);
box-shadow:0 40px 80px -36px rgba(12,26,36,.5),0 2px 10px rgba(12,26,36,.12)}
.demo-chrome{display:flex;align-items:center;gap:9px;padding:11px 16px;background:var(--sand);
border-bottom:1px solid var(--line)}
.demo-chrome .con-dot{background:var(--grey-4)}
.demo-url{margin-left:8px;flex:1;min-width:0;font-family:var(--mono);font-size:11.8px;
color:var(--grey-2);background:var(--paper-2);border:1px solid var(--line);
border-radius:var(--r-chip);padding:5px 13px;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap;max-width:340px}
.demo-live{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;
letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
.demo-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--teal);
animation:conpulse 2.4s ease-in-out infinite}
.demo-stage{position:relative;aspect-ratio:1400/880;background:var(--paper-2)}
.demo-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.demo-fallback{position:absolute;inset:0;display:grid;place-items:center;padding:24px;
background:var(--paper-2) center/cover no-repeat}
.demo-cap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
gap:10px 26px;margin-top:16px}
.demo-cap p{font-size:14px;line-height:1.6;color:var(--grey-2)}
.demo-cap-dark p{color:var(--mist)}
@media (max-width:820px){
.demo-stage{aspect-ratio:3/4}
.demo-url{display:none}
}
@media (prefers-reduced-motion: reduce){ .demo-live::before{animation:none} }
/* ---------- walkthrough steps (how it works) ---------- */
/* Walkthrough steps stack rather than sit side by side. These figures are
1400px-wide product screenshots: in a 40%-width column the UI type renders
at about five pixels and the picture stops being evidence. Full column
width is the point of the page. */
.steps{margin-top:clamp(44px,5.6vw,72px);display:grid;gap:clamp(52px,6.4vw,92px)}
.step{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(26px,3vw,38px)}
.step-copy{max-width:66ch}
.step-k{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;
letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin-bottom:16px}
.step-k::before{content:"";width:22px;height:2px;background:var(--amber);border-radius:2px}
.step-copy h3{font-family:var(--display);font-size:clamp(24px,2.7vw,33px);line-height:1.16}
.step-copy p{margin-top:15px;font-size:16.3px;line-height:1.72;color:var(--grey-1);max-width:62ch}
.step-copy p + p{margin-top:14px}
.step-note{margin-top:20px;padding-left:16px;border-left:2px solid var(--amber);
font-size:15px;line-height:1.65;color:var(--grey-2);max-width:58ch}
.shot{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line);
background:var(--paper-2);box-shadow:0 30px 60px -34px rgba(12,26,36,.45)}
.shot-fig figcaption{margin-top:12px;font-size:13.2px;line-height:1.6;color:var(--grey-3)}
@media (max-width:900px){
.step{gap:24px}
}
/* ---------- stats / proof row ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.6vw,34px);
margin-top:clamp(40px,5vw,62px)}
.stat{border-top:2px solid var(--line);padding-top:20px}
.stat-n{font-family:var(--display);font-size:clamp(34px,4vw,50px);line-height:1;color:var(--ink);
font-variant-numeric:tabular-nums}
.stat-l{margin-top:12px;font-size:14.4px;line-height:1.55;color:var(--grey-2);max-width:26ch}
.stats-dark .stat{border-top-color:var(--line-dark)}
.stats-dark .stat-n{color:var(--cream)}
.stats-dark .stat-l{color:var(--mist)}
@media (max-width:900px){ .stats{grid-template-columns:repeat(2,1fr) !important} }
/* ---------- judgment levels (NO amber inside .counsel) ---------- */
.levels{margin-top:clamp(32px,4.4vw,50px);border-bottom:1px solid var(--line)}
.level{display:grid;grid-template-columns:36px 1fr;gap:16px;border-top:1px solid var(--line);
padding:clamp(26px,3.4vw,40px) 0}
.lv-dot{width:15px;height:15px;border-radius:50%;margin-top:9px}
.lv-green .lv-dot{background:var(--lv-green)}
.lv-yellow .lv-dot{background:var(--lv-yellow-dot)}
.lv-red .lv-dot{background:var(--lv-red)}
.level h3{font-size:clamp(22px,2.2vw,27px)}
.level p{margin-top:11px;font-size:16px;line-height:1.68;color:var(--grey-1);max-width:68ch}
.wg{color:var(--lv-green)}
.wy{color:var(--lv-yellow)}
.wr{color:var(--lv-red)}
@media (max-width:600px){ .level{grid-template-columns:26px 1fr;gap:12px} }
/* ---------- spec table ---------- */
.spec{margin-top:clamp(32px,4.4vw,50px);font-size:15.2px}
.spec th,.spec td{text-align:left;vertical-align:top;padding:16px 20px 16px 0;
border-top:1px solid var(--line)}
.spec thead th{border-top:none;border-bottom:1px solid var(--ink);padding-top:0;
font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.13em;
text-transform:uppercase;color:var(--grey-1)}
.spec td:first-child{font-weight:600;color:var(--ink);width:30%}
.spec td{color:var(--grey-1);line-height:1.62}
.spec-wrap{overflow-x:auto}
@media (max-width:700px){ .spec{min-width:560px} }
/* ---------- checklist ---------- */
.checks{display:grid;gap:13px;margin-top:26px}
/* block layout, not grid: these list items carry mixed inline content (, bare
text, links) and a grid would promote every one of them to its own track */
.checks li{position:relative;padding-left:32px;font-size:15.6px;
line-height:1.62;color:var(--grey-1)}
.checks li::before{content:"";position:absolute;left:0;top:5px;width:17px;height:17px;
border-radius:50%;background:var(--teal-wash);
box-shadow:inset 0 0 0 1px rgba(23,98,122,.3)}
.checks b{color:var(--ink);font-weight:600}
.checks-dark li{color:var(--mist)}
.checks-dark li::before{background:rgba(143,193,212,.16);box-shadow:inset 0 0 0 1px rgba(143,193,212,.4)}
.checks-dark b{color:var(--cream)}
/* ---------- stage cards (solutions) ---------- */
.stages{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(40px,5vw,66px)}
.stage{background:var(--paper-2);border:1px solid var(--line);border-radius:22px;
padding:30px 28px 32px;display:flex;flex-direction:column}
.band-white .stage{background:var(--paper)}
.stage-mark{width:44px;height:44px;color:var(--teal);margin-bottom:20px}
.stage-k{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--grey-2)}
.stage h3{margin-top:10px;font-size:clamp(23px,2.2vw,28px)}
.stage-t{margin-top:12px;font-family:var(--display);font-style:italic;font-size:18px;
line-height:1.4;color:var(--grey-1)}
.stage p{margin-top:14px;font-size:15.2px;line-height:1.65;color:var(--grey-2)}
.stage .checks{margin-top:20px;gap:9px}
.stage .checks li{font-size:14.6px}
.stage-foot{margin-top:auto;padding-top:26px}
.stage-price{font-family:var(--display);font-size:15px;color:var(--amber-deep);
letter-spacing:.03em;margin-bottom:14px}
@media (max-width:1000px){ .stages{grid-template-columns:1fr !important} }
/* ---------- pricing ---------- */
.plans{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line); /* 0907: four plans */
border-bottom:1px solid var(--line);margin-top:clamp(36px,4.6vw,56px)}
.plan{position:relative;padding:32px 24px 38px;border-left:1px solid var(--line)}
.plan:first-child{border-left:none}
.p-name{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-2)}
.p-price{margin-top:16px;display:flex;align-items:baseline;gap:3px}
.p-num{font-family:var(--display);font-size:clamp(29px,2.6vw,37px);line-height:1;color:var(--ink);
font-variant-numeric:tabular-nums}
.p-per{font-size:14px;color:var(--grey-2)}
.p-stage{margin-top:12px;font-family:var(--display);font-style:italic;font-size:17px;
line-height:1.4;color:var(--grey-1)}
.p-inc{margin-top:14px;font-size:14.5px;line-height:1.62;color:var(--grey-2)}
.plan-founder{background:linear-gradient(180deg,var(--amber-wash),rgba(255,242,217,.28))}
.plan-founder::before{content:"";position:absolute;top:-1px;left:0;right:0;height:3px;background:var(--amber)}
.plan-founder .p-num{font-size:clamp(36px,3.2vw,45px)}
.plan-founder .p-name{color:var(--amber-deep)}
.count-h{display:inline-flex;align-items:center;gap:11px;font-size:13px;font-weight:700;
letter-spacing:.15em;text-transform:uppercase;color:var(--grey-1)}
.count-h::before{content:"";width:20px;height:2.5px;background:var(--amber);border-radius:2px}
.count-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px clamp(34px,5vw,62px);margin-top:20px}
.count-grid p{font-size:15.6px;line-height:1.7;color:var(--grey-1);max-width:54ch}
.fns{margin-top:clamp(30px,4vw,44px);border-top:1px solid var(--line-soft);padding-top:18px}
.fns p{font-size:13.8px;line-height:1.7;color:var(--grey-2)}
@media (max-width:1060px){
.plans{grid-template-columns:1fr !important;border-bottom:none}
.plan{display:grid;grid-template-columns:1fr auto;grid-template-areas:"name price" "stage price" "inc inc";
gap:0 24px;border-left:none;border-bottom:1px solid var(--line);padding:24px 18px 28px}
.p-name{grid-area:name}
.p-price{grid-area:price;align-self:start;justify-self:end;margin-top:0}
.p-stage{grid-area:stage;margin-top:8px}
.p-inc{grid-area:inc;margin-top:12px;max-width:56ch}
.count-grid{grid-template-columns:1fr}
}
/* ---------- federated diagram (network / model pages) ---------- */
.fed{margin-top:clamp(40px,5.2vw,64px);border-radius:26px;padding:clamp(26px,4.2vw,54px);
background:
radial-gradient(90% 90% at 12% 8%, rgba(23,98,122,.34), transparent 60%),
radial-gradient(80% 90% at 92% 92%, rgba(245,158,11,.11), transparent 55%),
var(--deep)}
.fed-in{display:grid;grid-template-columns:1fr clamp(180px,24vw,272px) 1fr;
gap:clamp(18px,3vw,40px);align-items:center}
.fed-vault{position:relative;justify-self:end;width:100%;max-width:310px;min-height:186px;
background:var(--deep-2);border:1px solid var(--line-dark);border-radius:18px;
display:flex;align-items:center;justify-content:center;padding:28px 24px}
.fdoc{width:58px;height:74px;background:#F7F4EC;border-radius:7px;
box-shadow:0 8px 18px rgba(0,0,0,.35);padding-top:13px;flex:none}
.fdoc i{display:block;height:3px;border-radius:2px;background:rgba(16,30,40,.28);
margin:0 auto 7px;width:62%}
.fdoc i:first-child{width:44%;background:rgba(16,30,40,.46)}
.fdoc.d1{transform:rotate(-5.5deg)}
.fdoc.d2{transform:rotate(1.5deg);margin-left:-12px;position:relative;z-index:1}
.fdoc.d3{transform:rotate(6.5deg);margin-left:-12px}
.fed-flows{display:block;width:100%;height:auto}
.fed-v{display:none}
.fed-net{position:relative;justify-self:start;width:min(212px,100%);aspect-ratio:1}
.ring{position:absolute;inset:9%;border:1px dashed rgba(236,237,234,.3);border-radius:50%}
.nuc{position:absolute;left:50%;top:50%;width:37px;height:37px;border-radius:50%;
background:#FF9F1C;transform:translate(-50%,-50%);box-shadow:0 0 26px rgba(255,159,28,.32)}
.an{position:absolute;width:13px;height:13px;border-radius:50%;background:#E9E5DA;
transform:translate(-50%,-50%)}
.a1{left:92%;top:50%}.a2{left:79.7%;top:79.7%}.a3{left:50%;top:92%}.a4{left:20.3%;top:79.7%}
.a5{left:8%;top:50%}.a6{left:20.3%;top:20.3%}.a7{left:50%;top:8%}.a8{left:79.7%;top:20.3%}
.fed-tag{position:absolute;top:calc(100% + 11px);left:50%;transform:translateX(-50%);
font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.06em;
color:rgba(236,237,234,.55);white-space:nowrap}
.fed .flow-a{animation:fedflow 9s linear infinite}
.fed .flow-b{animation:fedflow 10.8s linear 2.6s infinite}
@keyframes fedflow{to{stroke-dashoffset:-108}}
.fed-cap{margin-top:20px;font-size:14.5px;line-height:1.6;color:var(--grey-2);
text-align:center;max-width:64ch;margin-inline:auto}
.band-deep .fed-cap,.fed-cap-dark{color:var(--mist)}
@media (max-width:820px){
.fed-in{grid-template-columns:1fr;justify-items:center;gap:26px}
.fed-vault{justify-self:center;max-width:300px;min-height:160px}
.fed-h{display:none}
.fed-v{display:block;width:130px;height:auto}
.fed-net{justify-self:center;width:min(200px,80vw);margin-bottom:28px}
}
@media (prefers-reduced-motion: reduce){
.fed .flow-a{animation:none}
.fed .flow-b{animation:none}
}
/* ---------- FAQ ---------- */
.faq{margin-top:clamp(34px,4.4vw,52px);border-bottom:1px solid var(--line)}
.faq details{border-top:1px solid var(--line)}
.faq summary{display:flex;align-items:baseline;justify-content:space-between;gap:22px;
padding:22px 0;cursor:pointer;list-style:none;font-family:var(--display);
font-size:clamp(19px,1.9vw,23px);line-height:1.3;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--body);font-size:22px;font-weight:400;
color:var(--grey-3);flex:none;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{padding:0 0 24px;font-size:15.8px;line-height:1.72;color:var(--grey-1);max-width:70ch}
.faq p + p{padding-top:0;margin-top:-8px;padding-bottom:24px}
/* ---------- closing CTA band ---------- */
.cta-band .paths{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,68px);
margin-top:clamp(40px,5.4vw,64px)}
.cta-band .path{border-top:1px solid var(--grey-4);padding-top:24px;
display:flex;flex-direction:column;align-items:flex-start}
.cta-band .path p{font-size:16.2px;line-height:1.68;color:var(--grey-1);max-width:46ch}
.cta-band .path .btn{margin-top:24px}
.band-deep .cta-band .path{border-top-color:var(--line-dark)}
.band-deep .cta-band .path p{color:var(--mist)}
.push{margin-top:22px;font-family:var(--display);font-style:italic;
font-size:clamp(19px,2vw,23px);line-height:1.45;color:var(--grey-1)}
.push-dark{color:var(--mist)}
.close-h{font-size:clamp(33px,5.4vw,60px);max-width:19ch}
.mj-wide{margin-top:clamp(48px,6.4vw,84px)}
@media (max-width:820px){ .cta-band .paths{grid-template-columns:1fr !important;gap:32px} }
/* ---------- footer ---------- */
.foot{background:var(--deep);padding-block:clamp(54px,6.4vw,80px) clamp(30px,4vw,44px)}
.foot-top{display:grid;grid-template-columns:minmax(0,1.25fr) repeat(4,minmax(0,1fr));
gap:40px clamp(26px,4vw,58px)}
.f-brand svg{display:block;height:25px;width:auto}
.f-mission{margin-top:20px;font-size:15px;line-height:1.7;color:var(--grey-4);max-width:36ch}
.f-col h3{font-family:var(--body);font-size:11.6px;font-weight:700;letter-spacing:.15em;
text-transform:uppercase;color:rgba(236,237,234,.5);margin-bottom:16px}
.f-col li + li{margin-top:11px}
.f-col a{font-size:14.6px;color:var(--grey-4);text-decoration:none;
border-bottom:1px solid transparent;transition:color .18s ease,border-color .18s ease}
.f-col a:hover{color:var(--cream);border-bottom-color:rgba(236,237,234,.4)}
.foot-rule{height:1px;background:var(--line-dark);margin-block:clamp(40px,5vw,58px) 26px}
.foot-bot{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:22px clamp(30px,5vw,64px);
align-items:start}
.f-boundary{font-size:13.6px;line-height:1.72;color:var(--grey-4);max-width:74ch}
.f-boundary b{color:var(--mist);font-weight:600}
.f-meta{justify-self:end;text-align:right;font-size:13.4px;line-height:1.8;color:var(--grey-4)}
.f-meta .f-pow{color:var(--mist)}
@media (max-width:1000px){
.foot-top{grid-template-columns:repeat(2,minmax(0,1fr))}
.f-brand-col{grid-column:1 / -1}
}
@media (max-width:600px){
.foot-top{grid-template-columns:1fr;gap:32px}
.foot-bot{grid-template-columns:1fr}
.f-meta{justify-self:start;text-align:left}
}
/* ---------- paragraph stacking ----------
The reset zeroes every margin, which is right for single-paragraph
components and wrong the moment a component holds two. These are the
containers that actually carry running prose. .faq keeps its own rule. */
.count-grid p + p,
.card p + p,
.ledger p + p,
.level p + p,
.tri p + p,
.stage p + p,
.lnode p + p,
.loop-out p + p,
.note p + p,
.checks li p + p,
.spec td p + p,
.f-boundary + p,
.demo-cap p + p{margin-top:14px}
/* ---------- misc helpers ---------- */
.mt-s{margin-top:16px}.mt-m{margin-top:28px}.mt-l{margin-top:clamp(38px,5vw,62px)}
.maxw-n{max-width:64ch}
.note{margin-top:26px;padding:18px 22px;border-radius:16px;background:var(--sand);
border:1px solid var(--line);font-size:14.8px;line-height:1.68;color:var(--grey-1)}
.band-sand .note{background:var(--paper-2)}
.note b{color:var(--ink)}
.note-dark{background:rgba(236,237,234,.05);border-color:var(--line-dark);color:var(--mist)}
.note-dark b{color:var(--cream)}
.own{font-family:var(--display);font-size:clamp(20px,2.2vw,26px);line-height:1.5;
color:var(--ink);max-width:46ch;margin-top:clamp(40px,5.4vw,64px)}
.tri{border-top:1px solid var(--grey-4);padding-top:22px}
.tri h3{font-size:clamp(20px,2vw,24px)}
.tri p{margin-top:11px;font-size:15.3px;line-height:1.65;color:var(--grey-1);max-width:38ch}
/* ---------- hero console: the running loop -------------------------------
Opt-in via .console-run, on the ONE hero panel in index.html. The bare
.console is reused on seven other pages where a still panel is correct, so
nothing here may be attached to .console itself.
The idea: the panel should read as a run in progress, not a screenshot —
without ever showing a visitor an empty box. The cycle is phase-shifted by
a negative delay so FIRST PAINT LANDS INSIDE THE HELD-COMPLETE WINDOW: you
arrive to a finished console, it holds ~6s, then the trace clears and
refills step by step behind you, and holds again. Every 17s.
One vocabulary, used everywhere: a 3px rise into place with a fade, 0.55s,
ease-out. Nothing bounces, slides, blinks or changes colour. Each step line
arrives as a single unit — tick, label and timestamp together — rather than
inventing a second entrance for its parts.
The Yellow beat earns its emphasis in TIME, not decoration: 1.6s of
stillness before it lands, against the 0.25–0.45s between the others, and a
0.75s settle rather than 0.55s. That is the system stopping to ask a
lawyer. It does not flash, pulse or change colour.
Cycle: 17s, entered at -9.5s (i.e. 55.9%, mid-hold). Times below are
local to the cycle, not wall-clock from page load.
0.00s step 1 7.70s result card
0.80s step 2 8.50s panel complete
1.75s step 3 9.50s ← FIRST PAINT lands here
3.90s step 4 ← Yellow, 15.60s trace begins to clear
after 1.6s of silence 16.50s cleared
5.40s step 5 17.00s round again
6.35s step 6
Change the -9.5s and you change what a visitor sees on arrival. It must
stay between 8.5s and 15.6s of the cycle, or the panel loads incomplete.
Everything animated here is opacity and transform only — never height,
display, or anything that reflows — so the panel's box is identical at
every moment of the cycle and identical to its static height. Measured at
1400px and 390px across fifteen points of the cycle: console height,
H1 position and document height never move.
The clear is handled by fading .con-steps as a group, so the six step
keyframes only have to describe an arrival. Each step also resets itself
at 99%, inside the blacked-out window, so the group fade and the per-step
reset can never desync into a one-frame flash at the loop seam. */
/* The request line, its params and the rule never animate: they are the
constant the run belongs to, and they are on screen from first paint. */
/* the trace clears as a group at 15.60s and is back at 1 on the loop seam,
which is exactly where every step below resets */
@keyframes conclear{0%,91.76%{opacity:1}97.06%,100%{opacity:0}}
.console-run .con-steps{animation:conclear 17s ease-in-out -9.5s infinite both}
/* six arrivals, one vocabulary, different clocks */
@keyframes constep1{0%{opacity:0;transform:translateY(3px)}
3.24%,98.9%{opacity:1;transform:none}
99%,100%{opacity:0;transform:translateY(3px)}}
@keyframes constep2{0%,4.71%{opacity:0;transform:translateY(3px)}
7.94%,98.9%{opacity:1;transform:none}
99%,100%{opacity:0;transform:translateY(3px)}}
@keyframes constep3{0%,10.29%{opacity:0;transform:translateY(3px)}
13.53%,98.9%{opacity:1;transform:none}
99%,100%{opacity:0;transform:translateY(3px)}}
@keyframes constep4{0%,22.94%{opacity:0;transform:translateY(3px)}
27.35%,98.9%{opacity:1;transform:none}
99%,100%{opacity:0;transform:translateY(3px)}}
@keyframes constep5{0%,31.76%{opacity:0;transform:translateY(3px)}
35.00%,98.9%{opacity:1;transform:none}
99%,100%{opacity:0;transform:translateY(3px)}}
@keyframes constep6{0%,37.35%{opacity:0;transform:translateY(3px)}
40.59%,98.9%{opacity:1;transform:none}
99%,100%{opacity:0;transform:translateY(3px)}}
.console-run .con-step:nth-child(1){animation:constep1 17s ease-out -9.5s infinite both}
.console-run .con-step:nth-child(2){animation:constep2 17s ease-out -9.5s infinite both}
.console-run .con-step:nth-child(3){animation:constep3 17s ease-out -9.5s infinite both}
.console-run .con-step:nth-child(4){animation:constep4 17s ease-out -9.5s infinite both}
.console-run .con-step:nth-child(5){animation:constep5 17s ease-out -9.5s infinite both}
.console-run .con-step:nth-child(6){animation:constep6 17s ease-out -9.5s infinite both}
/* the result card is the payoff, so it settles a shade more slowly (0.8s).
It sits outside .con-steps, so it carries its own clear. */
@keyframes conres{0%,45.29%{opacity:0;transform:translateY(3px)}
50.00%{opacity:1;transform:none}
91.76%{opacity:1;transform:none;animation-timing-function:ease-in-out}
97.06%,100%{opacity:0;transform:none}}
.console-run .con-out{animation:conres 17s ease-out -9.5s infinite both}
/* Motion off: every rule above is cancelled at MATCHING specificity, so the
panel renders in its complete finished state — verified pixel-identical to
the panel as it stands today. (.con-live and .con-run-dots are already
handled in the console block above.) */
@media (prefers-reduced-motion: reduce){
.console-run .con-steps,
.console-run .con-out,
.console-run .con-step:nth-child(1),
.console-run .con-step:nth-child(2),
.console-run .con-step:nth-child(3),
.console-run .con-step:nth-child(4),
.console-run .con-step:nth-child(5),
.console-run .con-step:nth-child(6){animation:none}
}
/* ---------- forms: sign up · book a demo ---------------------------------
Two pages carry a real form (signup.html, book-demo.html). Nothing posts
anywhere yet — the markup is complete and correct, the `action` is left for
the application to wire. Two-up rows are a GRID change, never a width change
on the control: every input is 100% of its track, so the collapse at 700px
is one line and nothing overflows. No inline column ratios are used on
.fgrid, so unlike .duo/.trio this collapse needs no !important.
------------------------------------------------------------------------ */
.formcard{background:var(--paper-2);border:1px solid var(--line);
border-radius:var(--r-media);padding:clamp(24px,3.2vw,38px)}
.band-white .formcard{background:var(--paper)}
.formcard h3{font-size:clamp(20px,2vw,25px)}
.formcard > p{margin-top:11px;font-size:15.2px;line-height:1.65;color:var(--grey-2);max-width:48ch}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:17px 20px;margin-top:26px}
.fgrid .full{grid-column:1 / -1}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field label{font-size:13.2px;font-weight:600;color:var(--grey-1)}
.field .req{color:var(--amber-deep)}
.field input,.field select,.field textarea{width:100%;font-family:var(--body);
font-size:15.4px;line-height:1.5;color:var(--ink);background:var(--paper);
border:1px solid var(--line);border-radius:12px;padding:12px 14px;
transition:border-color .18s ease,box-shadow .18s ease}
.band-white .field input,.band-white .field select,.band-white .field textarea{background:var(--paper-2)}
.field textarea{min-height:104px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--grey-4)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;
border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-wash)}
/* native select chrome is the one control that will not take the ide8 look, so
it is replaced with a drawn caret; padding-right keeps text off the caret */
.field select{appearance:none;-webkit-appearance:none;padding-right:38px;
background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%237E8F99' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 14px center;background-size:12px}
.field .hint{font-size:12.7px;line-height:1.5;color:var(--grey-3)}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:26px}
.fine{margin-top:16px;font-size:12.9px;line-height:1.62;color:var(--grey-3);max-width:56ch}
.fine a{color:var(--teal)}
/* Netlify honeypot: present in the DOM for bots, gone for people. Not
display:none — some bots skip those; off-screen still gets filled. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* single sign-on row — the three identity providers a founder already has */
.sso{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;margin-top:20px}
.sso a{display:inline-flex;align-items:center;justify-content:center;gap:9px;
padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-chip);
background:var(--paper);font-size:14.2px;font-weight:600;color:var(--ink);
text-decoration:none;transition:border-color .18s ease,color .18s ease}
.band-white .sso a{background:var(--paper-2)}
.sso a:hover{border-color:var(--grey-4);color:var(--teal-deep)}
.sso svg{width:17px;height:17px;flex:none}
.ordiv{display:flex;align-items:center;gap:14px;margin-top:24px;font-size:12.4px;
font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-3)}
.ordiv::before,.ordiv::after{content:"";flex:1;height:1px;background:var(--line)}
/* numbered rail — "what happens after you press the button" */
.nums{counter-reset:num;list-style:none;margin-top:26px;border-bottom:1px solid var(--line)}
.nums li{counter-increment:num;position:relative;padding:16px 0 16px 46px;
border-top:1px solid var(--line);font-size:15.3px;line-height:1.62;color:var(--grey-1)}
.nums li::before{content:counter(num);position:absolute;left:0;top:17px;width:27px;height:27px;
border-radius:50%;background:var(--sand);color:var(--grey-2);font-size:12.6px;
font-weight:700;display:grid;place-items:center}
.nums li b{color:var(--ink);font-weight:600}
.nums-dark{border-bottom-color:var(--line-dark)}
.nums-dark li{border-top-color:var(--line-dark);color:var(--mist)}
.nums-dark li::before{background:rgba(236,237,234,.08);color:var(--cream)}
.nums-dark li b{color:var(--cream)}
@media (max-width:700px){
.fgrid{grid-template-columns:1fr}
.sso{grid-template-columns:1fr}
}
/* ---------- 0829 review pass additions --------------------------------------
Four small component families added for the launch-readiness review:
the collapsible endpoint catalogue (+ its filter), the legal-page prose
block (privacy / terms), footer legal links, and the slim footer used on
the conversion pages (book-demo, thanks).
------------------------------------------------------------------------- */
/* collapsible endpoint category — a holding one category's table */
.epd{border:1px solid var(--line);border-radius:16px;background:var(--paper-2);
margin-top:12px;overflow:hidden}
.band-white .epd{background:var(--paper)}
.epd > summary{display:flex;align-items:baseline;gap:14px;padding:18px 22px;
cursor:pointer;list-style:none}
.epd > summary::-webkit-details-marker{display:none}
.epd-n{font-family:var(--body);font-size:12.5px;font-weight:700;letter-spacing:.13em;
text-transform:uppercase;color:var(--grey-1)}
.epd-c{font-family:var(--display);font-size:22px;line-height:1;color:var(--ink);
font-variant-numeric:tabular-nums}
.epd-d{flex:1;font-size:13.6px;color:var(--grey-3);min-width:0;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.epd-mark{flex:none;font-size:20px;font-weight:400;color:var(--grey-3);line-height:1}
.epd[open] .epd-mark::before{content:"–"}
.epd:not([open]) .epd-mark::before{content:"+"}
.epd > summary:hover .epd-n{color:var(--ink)}
.epd .spec-wrap{padding:0 22px 20px}
.epd .spec{margin-top:0}
.epd .spec td:first-child{width:34%}
@media (max-width:640px){
.epd > summary{flex-wrap:wrap;gap:8px 14px;padding:15px 16px}
.epd-d{flex-basis:100%;white-space:normal}
.epd .spec-wrap{padding:0 16px 16px}
}
/* the catalogue filter — one input, wired by js/site.js; the catalogue works
without it (details open by hand), so JS off degrades to collapsible */
.ep-search{display:flex;align-items:center;gap:12px;margin-top:clamp(26px,3.4vw,38px)}
.ep-search input{flex:1;max-width:420px;font-family:var(--body);font-size:15.4px;
line-height:1.5;color:var(--ink);background:var(--paper-2);border:1px solid var(--line);
border-radius:var(--r-chip);padding:12px 20px;
transition:border-color .18s ease,box-shadow .18s ease}
.band-white .ep-search input{background:var(--paper)}
.ep-search input::placeholder{color:var(--grey-4)}
.ep-search input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-wash)}
.ep-count-live{font-size:13.6px;color:var(--grey-2);white-space:nowrap}
/* legal prose — privacy & terms. Running text with real lists and dates. */
.legal{margin-top:clamp(30px,4vw,46px)}
.legal h2{font-size:clamp(23px,2.6vw,30px);margin-top:clamp(34px,4.4vw,50px)}
.legal h2:first-child{margin-top:0}
.legal p{margin-top:14px;font-size:15.8px;line-height:1.74;color:var(--grey-1);max-width:70ch}
.legal ul{margin-top:12px;padding-left:0;display:grid;gap:9px}
.legal ul li{position:relative;padding-left:24px;font-size:15.4px;line-height:1.68;
color:var(--grey-1);max-width:68ch}
.legal ul li::before{content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;
border-radius:50%;background:var(--grey-4)}
.legal b{color:var(--ink);font-weight:600}
.legal a{color:var(--teal)}
.legal-date{font-size:13.6px;color:var(--grey-3);margin-top:14px}
/* footer legal links + the slim footer for conversion pages */
.f-meta a.f-leg{color:var(--grey-4);text-decoration:none;
border-bottom:1px solid rgba(236,237,234,.28)}
.f-meta a.f-leg:hover{color:var(--cream);border-bottom-color:var(--cream)}
.foot-slim{padding-block:clamp(30px,4vw,44px)}
/* a matter-risk dot inside a plain card (homepage judgment cards) */
.card .lv-dot{margin:0 0 16px}
/* the epd two-column tables stack on phones instead of scrolling sideways,
and the +/– mark keeps to the summary's first row */
@media (max-width:700px){
.epd .spec{min-width:0}
.epd .spec tbody tr{display:block;border-top:1px solid var(--line);padding:13px 0 15px}
.epd .spec tbody tr:first-child{border-top:none}
.epd .spec td{display:block;border-top:none;padding:0}
.epd .spec td:first-child{width:auto}
.epd .spec td:last-child{padding-top:7px}
}
@media (max-width:640px){
.epd-mark{margin-left:auto}
.epd-d{order:5}
}
/* ---------- 0830 repositioning pass ------------------------------------------
The three segment pages (startups · mid-market · enterprise) and the AI
Counsel page each carry a run of named workflows — "what it runs for you",
stated as mechanism. It is the one component the three-segment IA needed
that the 0827 vocabulary didn't already have; everything else on those
pages is composed from .stages, .stats, .levels, .checks, .spec and .faq.
A workflow row is a hairline-separated band: a short verb in the left rail,
then the heading, the mechanism, and a link into the page that owns the
detail. Same geometry as .level, deliberately kept a separate family so the
judgment lanes and their reserved colours are never borrowed for marketing.
------------------------------------------------------------------------- */
.wfs{margin-top:clamp(34px,4.6vw,54px);border-bottom:1px solid var(--line)}
/* 144px, not 112: the labels are uppercased and letter-spaced, so the widest
two-word label in use ("Front door") measures 131px. Every one-word label
sits on one line, and a single wrapping rail reads as a mistake rather than
a choice — so the rail is sized for two words with headroom. */
.wf{display:grid;grid-template-columns:144px 1fr;gap:14px clamp(24px,3.4vw,46px);
border-top:1px solid var(--line);padding:clamp(26px,3.4vw,40px) 0}
.wf-m{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--amber-deep);padding-top:8px}
.wf h3{font-size:clamp(21px,2.1vw,26px)}
.wf p{margin-top:12px;font-size:16px;line-height:1.68;color:var(--grey-1);max-width:68ch}
.wf p + p{margin-top:12px}
.wf .tlink{display:inline-block;margin-top:16px}
.wfs-dark{border-bottom-color:var(--line-dark)}
.wfs-dark .wf{border-top-color:var(--line-dark)}
.wfs-dark .wf-m{color:var(--amber)}
.wfs-dark .wf h3{color:var(--cream)}
.wfs-dark .wf p{color:var(--mist)}
/* the rail label sits above the heading on narrow screens — !important because
pages set .wf column ratios inline, exactly as .duo does above */
@media (max-width:760px){
.wf{grid-template-columns:1fr !important;gap:7px}
.wf-m{padding-top:0}
}
/* the segment router (home §3) reuses .stages, but its cards carry a segment
name rather than a stage number, and the price line is a plain footnote */
.stage-seg .stage-price{color:var(--grey-2);font-family:var(--body);font-size:13.4px;
letter-spacing:0}
/* ---------- 0902 AnswerLoop pass ----------
The homepage moat band and the /answerloop page hero. Everything else on
those surfaces composes from the existing vocabulary (band-deep, duo,
console, loop, card-dark, levels, checks-dark, nums, faq, cta-band). */
.moat-h{font-size:clamp(40px,6.2vw,74px);line-height:1.02}
.moat-lines{margin-top:clamp(26px,3vw,38px);border-top:1px solid var(--line-dark);counter-reset:none}
.moat-lines li{display:grid;grid-template-columns:46px 1fr;align-items:baseline;
padding:13px 0;border-bottom:1px solid var(--line-dark);
font-family:var(--display);font-size:clamp(21px,2.3vw,28px);line-height:1.2;color:var(--cream)}
.moat-lines li span{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--teal-lt)}
.moat-body{color:var(--grey-4);max-width:60ch}
.moat-sig{margin-top:clamp(26px,3vw,36px);font-family:var(--display);
font-size:clamp(27px,3.3vw,42px);line-height:1.16;color:var(--cream);max-width:20ch;text-wrap:balance}
.moat-sig-light{color:var(--ink);margin-top:clamp(22px,2.6vw,30px);font-size:clamp(25px,2.8vw,34px)}
.moat .loop{margin-top:clamp(40px,5vw,64px)}
.moat-tiles{margin-top:clamp(28px,3.6vw,48px)}
.moat-close{margin-top:clamp(30px,3.8vw,48px);max-width:66ch}
.phero .moat-lines{margin-top:clamp(22px,2.8vw,32px);margin-bottom:clamp(22px,2.8vw,32px)}
@media (max-width:860px){
.moat-lines li{grid-template-columns:36px 1fr;font-size:clamp(19px,4.6vw,24px)}
.moat-tiles{grid-template-columns:1fr}
}
/* ---------- 0902 hero — AnswerLoop flow (option A, legibility pass a2) ----------
Five stations, one payload, the Yellow beat at the lawyer, a return arc into
OpenLegalLM. Two layouts (desktop + phone) share one timeline. Generated by
scratchpad hero-options/option-a2/gen.py; edit timings there. */
.ha1-art{--ha1-t0:0s;--ha1-k:0;position:relative;width:100%;container-type:inline-size;font-family:'Instrument Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.ha1-art svg{display:block;width:100%;height:auto;overflow:visible}
.ha1-art .ha1-lay-m{display:none}
@container (max-width:480px){.ha1-art .ha1-lay-d{display:none}.ha1-art .ha1-lay-m{display:block}}
@supports not (container-type:inline-size){@media (max-width:480px){.ha1-art .ha1-lay-d{display:none}.ha1-art .ha1-lay-m{display:block}}}
.ha1-art .ha1-k{font:500 12px 'Instrument Sans',system-ui,sans-serif;letter-spacing:1px;text-transform:uppercase;fill:#7E8F99}
.ha1-art .ha1-t{font:600 16px 'Instrument Sans',system-ui,sans-serif;fill:#101E28}
.ha1-art .ha1-q{font:400 24px 'Instrument Serif',Georgia,serif;fill:#101E28}
.ha1-art .ha1-caret{fill:#17627A}
.ha1-art .ha1-n{font:400 20px 'Instrument Serif',Georgia,serif;fill:#101E28}
.ha1-art .ha1-cap{font:italic 400 17px 'Instrument Serif',Georgia,serif;fill:#566873}
.ha1-art .ha1-s{font:400 14.5px 'Instrument Sans',system-ui,sans-serif}
.ha1-art .ha1-sm{font:400 14px 'Instrument Sans',system-ui,sans-serif;fill:#566873}
.ha1-art .ha1-mono{font:500 15px ui-monospace,Menlo,Consolas,monospace;fill:#101E28}
.ha1-art .ha1-st{font-size:12.5px;fill:#566873}
.ha1-art .ha1-yt{fill:#B45309}
.ha1-art .ha1-tt{fill:#17627A}
.ha1-art .ha1-chipt{font:600 12px 'Instrument Sans',system-ui,sans-serif;fill:#17627A;letter-spacing:.01em}
.ha1-art .ha1-card{fill:#FFFFFF;stroke:#E4E8E9;stroke-width:1;filter:drop-shadow(0 4px 18px rgba(16,30,40,.06))}
.ha1-art .ha1-p{fill:none;stroke:#8FC1D4;stroke-width:2;stroke-linejoin:round}
.ha1-art .ha1-dash{stroke-linecap:butt}
.ha1-art .ha1-link{stroke:#17627A}
.ha1-art .ha1-ah{fill:#8FC1D4}
.ha1-art .ha1-h{fill:none;stroke:#17627A;stroke-width:2;stroke-dasharray:100;stroke-linecap:round;stroke-linejoin:round}
.ha1-art .ha1-hd{stroke-linecap:butt}
.ha1-art .ha1-y{stroke:#D97706}
.ha1-art .ha1-dot{stroke:#FCFBF9;stroke-width:2.5;offset-rotate:0deg}
.ha1-art .ha1-d{stroke:none}
.ha1-art .ha1-ring{fill:none;stroke-width:2;stroke-dasharray:6 5;transform-box:fill-box;transform-origin:center}
.ha1-art .ha1-flash{fill:none;stroke:#17627A;stroke-width:1.5;transform-box:fill-box;transform-origin:center}
.ha1-art .ha1-ldot{fill:#17627A;offset-rotate:0deg}
.ha1-art .ha1-lay-m .ha1-t{font-size:13px}
.ha1-art .ha1-lay-m .ha1-s{font-size:13.5px}
.ha1-art .ha1-lay-m .ha1-sm{font-size:13px}
.ha1-art .ha1-lay-m .ha1-st{font-size:12px}
.ha1-art .ha1-lay-m .ha1-k{font-size:11px}
@keyframes ha1-spin{to{transform:rotate(360deg)}}
@keyframes ha1-bounce{0%{offset-distance:0%}50%{offset-distance:100%}100%{offset-distance:0%}}
.ha1-art .ha1-ld1{animation:ha1-bounce 1.6s ease-in-out var(--ha1-t0) infinite}
.ha1-art .ha1-ld2{animation:ha1-bounce 1.6s ease-in-out calc(var(--ha1-t0) - .8s) infinite}
@keyframes ha1-w1{0.0%{fill-opacity:0}1.875%{fill-opacity:0}2.625%{fill-opacity:1}93.75%{fill-opacity:1}97.5%{fill-opacity:0}100.0%{fill-opacity:0}}
.ha1-art .ha1-w1{animation:ha1-w1 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-w2{0.0%{fill-opacity:0}3.438%{fill-opacity:0}4.188%{fill-opacity:1}93.75%{fill-opacity:1}97.5%{fill-opacity:0}100.0%{fill-opacity:0}}
.ha1-art .ha1-w2{animation:ha1-w2 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-w3{0.0%{fill-opacity:0}5.0%{fill-opacity:0}5.75%{fill-opacity:1}93.75%{fill-opacity:1}97.5%{fill-opacity:0}100.0%{fill-opacity:0}}
.ha1-art .ha1-w3{animation:ha1-w3 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-w4{0.0%{fill-opacity:0}6.562%{fill-opacity:0}7.312%{fill-opacity:1}93.75%{fill-opacity:1}97.5%{fill-opacity:0}100.0%{fill-opacity:0}}
.ha1-art .ha1-w4{animation:ha1-w4 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-w5{0.0%{fill-opacity:0}8.438%{fill-opacity:0}9.188%{fill-opacity:1}93.75%{fill-opacity:1}97.5%{fill-opacity:0}100.0%{fill-opacity:0}}
.ha1-art .ha1-w5{animation:ha1-w5 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-w6{0.0%{fill-opacity:0}10.312%{fill-opacity:0}11.062%{fill-opacity:1}93.75%{fill-opacity:1}97.5%{fill-opacity:0}100.0%{fill-opacity:0}}
.ha1-art .ha1-w6{animation:ha1-w6 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-caret{0.0%{opacity:0;--ha1-k:0}10.312%{opacity:0;--ha1-k:0}10.375%{opacity:1;--ha1-k:1}12.812%{opacity:1}12.875%{opacity:0}14.062%{opacity:0}14.125%{opacity:1}16.562%{opacity:1}16.625%{opacity:0}17.812%{opacity:0}17.875%{opacity:1}19.375%{opacity:1}19.438%{opacity:0}93.75%{--ha1-k:1}97.5%{--ha1-k:0}100.0%{opacity:0;--ha1-k:0}}
.ha1-art .ha1-caret{animation:ha1-caret 16s steps(1,end) var(--ha1-t0) infinite}
@keyframes ha1-legA{0.0%{stroke-dashoffset:100}15.625%{stroke-dashoffset:100}20.0%{stroke-dashoffset:0}93.75%{stroke-dashoffset:0}97.5%{stroke-dashoffset:100}100.0%{stroke-dashoffset:100}}
.ha1-art .ha1-legA{animation:ha1-legA 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-dotA{0.0%{opacity:0;offset-distance:0%}15.313%{opacity:0}15.625%{offset-distance:0%}15.938%{opacity:1}19.688%{opacity:1}20.0%{offset-distance:100%}20.312%{opacity:0}93.75%{offset-distance:100%}97.5%{offset-distance:0%}100.0%{opacity:0;offset-distance:0%}}
.ha1-art .ha1-dotA{animation:ha1-dotA 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-ahA{0.0%{fill:#8FC1D4}19.688%{fill:#8FC1D4}20.312%{fill:#17627A}93.75%{fill:#17627A}97.5%{fill:#8FC1D4}100.0%{fill:#8FC1D4}}
.ha1-art .ha1-ahA{animation:ha1-ahA 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-box{0.0%{stroke:#E4E8E9}20.0%{stroke:#E4E8E9}21.875%{stroke:#8FC1D4}93.75%{stroke:#8FC1D4}97.5%{stroke:#E4E8E9}100.0%{stroke:#E4E8E9}}
.ha1-art .ha1-box{animation:ha1-box 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-d1{0.0%{fill:#E4E8E9}20.625%{fill:#E4E8E9}22.188%{fill:#17627A}26.875%{fill:#17627A}28.438%{fill:#12242F}93.75%{fill:#12242F}97.5%{fill:#E4E8E9}100.0%{fill:#E4E8E9}}
.ha1-art .ha1-d1{animation:ha1-d1 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-t1{0.0%{fill:#7E8F99}20.625%{fill:#7E8F99}22.188%{fill:#101E28}93.75%{fill:#101E28}97.5%{fill:#7E8F99}100.0%{fill:#7E8F99}}
.ha1-art .ha1-t1{animation:ha1-t1 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-st1{0.0%{fill-opacity:0}26.875%{fill-opacity:0}28.438%{fill-opacity:1}93.75%{fill-opacity:1}97.5%{fill-opacity:0}100.0%{fill-opacity:0}}
.ha1-art .ha1-st1{animation:ha1-st1 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-d2{0.0%{fill:#E4E8E9}26.875%{fill:#E4E8E9}28.438%{fill:#17627A}33.125%{fill:#17627A}34.688%{fill:#D97706}58.75%{fill:#D97706}60.312%{fill:#12242F}93.75%{fill:#12242F}97.5%{fill:#E4E8E9}100.0%{fill:#E4E8E9}}
.ha1-art .ha1-d2{animation:ha1-d2 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-t2{0.0%{fill:#7E8F99}26.875%{fill:#7E8F99}28.438%{fill:#101E28}93.75%{fill:#101E28}97.5%{fill:#7E8F99}100.0%{fill:#7E8F99}}
.ha1-art .ha1-t2{animation:ha1-t2 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-st2y{0.0%{fill-opacity:0}33.125%{fill-opacity:0}34.688%{fill-opacity:1}58.75%{fill-opacity:1}60.312%{fill-opacity:0}100.0%{fill-opacity:0}}
.ha1-art .ha1-st2y{animation:ha1-st2y 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-st2{0.0%{fill-opacity:0}58.75%{fill-opacity:0}60.312%{fill-opacity:1}93.75%{fill-opacity:1}97.5%{fill-opacity:0}100.0%{fill-opacity:0}}
.ha1-art .ha1-st2{animation:ha1-st2 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-d3{0.0%{fill:#E4E8E9}58.75%{fill:#E4E8E9}60.312%{fill:#17627A}63.75%{fill:#17627A}65.312%{fill:#12242F}93.75%{fill:#12242F}97.5%{fill:#E4E8E9}100.0%{fill:#E4E8E9}}
.ha1-art .ha1-d3{animation:ha1-d3 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-t3{0.0%{fill:#7E8F99}58.75%{fill:#7E8F99}60.312%{fill:#101E28}93.75%{fill:#101E28}97.5%{fill:#7E8F99}100.0%{fill:#7E8F99}}
.ha1-art .ha1-t3{animation:ha1-t3 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-st3{0.0%{fill-opacity:0}63.75%{fill-opacity:0}65.312%{fill-opacity:1}93.75%{fill-opacity:1}97.5%{fill-opacity:0}100.0%{fill-opacity:0}}
.ha1-art .ha1-st3{animation:ha1-st3 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-d4{0.0%{fill:#E4E8E9}63.75%{fill:#E4E8E9}65.312%{fill:#17627A}68.75%{fill:#17627A}70.312%{fill:#12242F}93.75%{fill:#12242F}97.5%{fill:#E4E8E9}100.0%{fill:#E4E8E9}}
.ha1-art .ha1-d4{animation:ha1-d4 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-t4{0.0%{fill:#7E8F99}63.75%{fill:#7E8F99}65.312%{fill:#101E28}93.75%{fill:#101E28}97.5%{fill:#7E8F99}100.0%{fill:#7E8F99}}
.ha1-art .ha1-t4{animation:ha1-t4 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-st4{0.0%{fill-opacity:0}68.75%{fill-opacity:0}70.312%{fill-opacity:1}93.75%{fill-opacity:1}97.5%{fill-opacity:0}100.0%{fill-opacity:0}}
.ha1-art .ha1-st4{animation:ha1-st4 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-dimA{0.0%{opacity:1;--ha1-k:0}33.125%{opacity:1;--ha1-k:0}35.625%{opacity:0.55;--ha1-k:1}53.75%{opacity:0.55;--ha1-k:1}56.25%{opacity:1;--ha1-k:0}100.0%{opacity:1;--ha1-k:0}}
.ha1-art .ha1-dimA{animation:ha1-dimA 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-dimB{0.0%{opacity:1;--ha1-k:0}33.125%{opacity:1;--ha1-k:0}35.625%{opacity:0.55;--ha1-k:1}53.75%{opacity:0.55;--ha1-k:1}56.25%{opacity:1;--ha1-k:0}100.0%{opacity:1;--ha1-k:0}}
.ha1-art .ha1-dimB{animation:ha1-dimB 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-dimC{0.0%{opacity:1;--ha1-k:0}33.125%{opacity:1;--ha1-k:0}35.625%{opacity:0.55;--ha1-k:1}53.75%{opacity:0.55;--ha1-k:1}56.25%{opacity:1;--ha1-k:0}100.0%{opacity:1;--ha1-k:0}}
.ha1-art .ha1-dimC{animation:ha1-dimC 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-dimD{0.0%{opacity:1;--ha1-k:0}33.125%{opacity:1;--ha1-k:0}35.625%{opacity:0.55;--ha1-k:1}53.75%{opacity:0.55;--ha1-k:1}56.25%{opacity:1;--ha1-k:0}100.0%{opacity:1;--ha1-k:0}}
.ha1-art .ha1-dimD{animation:ha1-dimD 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-cr{0.0%{fill:#566873}20.625%{fill:#566873}22.188%{fill:#17627A}27.5%{fill:#17627A}29.063%{fill:#566873}100.0%{fill:#566873}}
.ha1-art .ha1-cr{animation:ha1-cr 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-ld{0.0%{fill-opacity:0}20.625%{fill-opacity:0}21.875%{fill-opacity:1}33.125%{fill-opacity:1}34.375%{fill-opacity:0}58.75%{fill-opacity:0}60.0%{fill-opacity:1}68.75%{fill-opacity:1}70.0%{fill-opacity:0}100.0%{fill-opacity:0}}
.ha1-art .ha1-ld{animation:ha1-ld 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-ring{0.0%{stroke:#8FC1D4}20.625%{stroke:#8FC1D4}21.875%{stroke:#17627A}33.125%{stroke:#17627A}34.375%{stroke:#8FC1D4}58.75%{stroke:#8FC1D4}60.0%{stroke:#17627A}68.75%{stroke:#17627A}70.0%{stroke:#8FC1D4}77.5%{stroke:#8FC1D4}78.75%{stroke:#17627A}93.75%{stroke:#17627A}97.5%{stroke:#8FC1D4}100.0%{stroke:#8FC1D4}}
.ha1-art .ha1-ring{animation:ha1-ring 16s ease-in-out var(--ha1-t0) infinite,ha1-spin 14s linear var(--ha1-t0) infinite}
@keyframes ha1-core{0.0%{fill:#E2EFF3}20.625%{fill:#E2EFF3}21.875%{fill:#8FC1D4}33.125%{fill:#8FC1D4}34.375%{fill:#E2EFF3}58.75%{fill:#E2EFF3}60.0%{fill:#8FC1D4}68.75%{fill:#8FC1D4}70.0%{fill:#E2EFF3}77.5%{fill:#E2EFF3}78.75%{fill:#17627A}93.75%{fill:#17627A}97.5%{fill:#E2EFF3}100.0%{fill:#E2EFF3}}
.ha1-art .ha1-core{animation:ha1-core 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-flash{0.0%{stroke-opacity:0;transform:scale(1)}77.5%{stroke-opacity:0;transform:scale(1)}78.438%{stroke-opacity:0.9}83.125%{stroke-opacity:0.9}83.75%{transform:scale(1.6)}84.062%{stroke-opacity:0}93.75%{transform:scale(1.6)}97.5%{transform:scale(1)}100.0%{stroke-opacity:0;transform:scale(1)}}
.ha1-art .ha1-flash{animation:ha1-flash 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-stubY{0.0%{stroke-dashoffset:100;opacity:1}33.125%{stroke-dashoffset:100}37.5%{stroke-dashoffset:0}53.75%{opacity:1}55.625%{opacity:0}93.75%{stroke-dashoffset:0;opacity:0}97.5%{stroke-dashoffset:100;opacity:1}100.0%{stroke-dashoffset:100;opacity:1}}
.ha1-art .ha1-stubY{animation:ha1-stubY 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-dotY{0.0%{opacity:0;offset-distance:0%}32.812%{opacity:0}33.125%{offset-distance:0%}33.438%{opacity:1}37.188%{opacity:1}37.5%{offset-distance:100%}37.812%{opacity:0}93.75%{offset-distance:100%}97.5%{offset-distance:0%}100.0%{opacity:0;offset-distance:0%}}
.ha1-art .ha1-dotY{animation:ha1-dotY 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-ahY{0.0%{fill-opacity:0}37.188%{fill-opacity:0}37.812%{fill-opacity:1}53.75%{fill-opacity:1}54.375%{fill-opacity:0}100.0%{fill-opacity:0}}
.ha1-art .ha1-ahY{animation:ha1-ahY 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-cov{0.0%{fill-opacity:0}33.75%{fill-opacity:0}35.312%{fill-opacity:1}58.75%{fill-opacity:1}60.312%{fill-opacity:0}100.0%{fill-opacity:0}}
.ha1-art .ha1-cov{animation:ha1-cov 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-ans{0.0%{stroke-dashoffset:100}53.75%{stroke-dashoffset:100}58.125%{stroke-dashoffset:0}93.75%{stroke-dashoffset:0}97.5%{stroke-dashoffset:100}100.0%{stroke-dashoffset:100}}
.ha1-art .ha1-ans{animation:ha1-ans 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-dotB{0.0%{opacity:0;offset-distance:0%}53.438%{opacity:0}53.75%{offset-distance:0%}54.062%{opacity:1}57.812%{opacity:1}58.125%{offset-distance:100%}58.438%{opacity:0}93.75%{offset-distance:100%}97.5%{offset-distance:0%}100.0%{opacity:0;offset-distance:0%}}
.ha1-art .ha1-dotB{animation:ha1-dotB 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-ahB{0.0%{fill-opacity:0}57.812%{fill-opacity:0}58.438%{fill-opacity:1}93.75%{fill-opacity:1}97.5%{fill-opacity:0}100.0%{fill-opacity:0}}
.ha1-art .ha1-ahB{animation:ha1-ahB 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-cardr{0.0%{stroke:#E4E8E9}36.875%{stroke:#E4E8E9}38.438%{stroke:#D97706}53.75%{stroke:#D97706}55.312%{stroke:#E4E8E9}100.0%{stroke:#E4E8E9}}
.ha1-art .ha1-cardr{animation:ha1-cardr 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-bar{0.0%{fill:#E4E8E9}36.875%{fill:#E4E8E9}38.438%{fill:#D97706}53.75%{fill:#D97706}55.312%{fill:#17627A}93.75%{fill:#17627A}97.5%{fill:#E4E8E9}100.0%{fill:#E4E8E9}}
.ha1-art .ha1-bar{animation:ha1-bar 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-alt{0.0%{fill:#101E28}36.875%{fill:#101E28}38.438%{fill:#B45309}53.75%{fill:#B45309}55.312%{fill:#101E28}100.0%{fill:#101E28}}
.ha1-art .ha1-alt{animation:ha1-alt 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-cbody{0.0%{fill-opacity:0.4}37.5%{fill-opacity:0.4}39.062%{fill-opacity:1}93.75%{fill-opacity:1}97.5%{fill-opacity:0.4}100.0%{fill-opacity:0.4}}
.ha1-art .ha1-cbody{animation:ha1-cbody 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-chip{0.0%{fill-opacity:0}40.625%{fill-opacity:0}42.812%{fill-opacity:1}93.75%{fill-opacity:1}97.5%{fill-opacity:0}100.0%{fill-opacity:0}}
.ha1-art .ha1-chip{animation:ha1-chip 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-ing{0.0%{fill-opacity:0}37.5%{fill-opacity:0}38.438%{fill-opacity:1}53.75%{fill-opacity:1}54.688%{fill-opacity:0}100.0%{fill-opacity:0}}
.ha1-art .ha1-ing{animation:ha1-ing 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-ed{0.0%{fill-opacity:0}53.75%{fill-opacity:0}54.688%{fill-opacity:1}93.75%{fill-opacity:1}97.5%{fill-opacity:0}100.0%{fill-opacity:0}}
.ha1-art .ha1-ed{animation:ha1-ed 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-legD{0.0%{stroke-dashoffset:100}68.75%{stroke-dashoffset:100}73.75%{stroke-dashoffset:0}93.75%{stroke-dashoffset:0}97.5%{stroke-dashoffset:100}100.0%{stroke-dashoffset:100}}
.ha1-art .ha1-legD{animation:ha1-legD 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-dotD{0.0%{opacity:0;offset-distance:0%}68.438%{opacity:0}68.75%{offset-distance:0%}69.062%{opacity:1}73.438%{opacity:1}73.75%{offset-distance:100%}74.062%{opacity:0}93.75%{offset-distance:100%}97.5%{offset-distance:0%}100.0%{opacity:0;offset-distance:0%}}
.ha1-art .ha1-dotD{animation:ha1-dotD 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-ahD{0.0%{fill:#8FC1D4}73.438%{fill:#8FC1D4}74.062%{fill:#17627A}93.75%{fill:#17627A}97.5%{fill:#8FC1D4}100.0%{fill:#8FC1D4}}
.ha1-art .ha1-ahD{animation:ha1-ahD 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-ru{0.0%{fill-opacity:0}71.25%{fill-opacity:0}72.812%{fill-opacity:1}93.75%{fill-opacity:1}97.5%{fill-opacity:0}100.0%{fill-opacity:0}}
.ha1-art .ha1-ru{animation:ha1-ru 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-l1{0.0%{fill-opacity:0}73.75%{fill-opacity:0}75.0%{fill-opacity:1}93.75%{fill-opacity:1}97.5%{fill-opacity:0}100.0%{fill-opacity:0}}
.ha1-art .ha1-l1{animation:ha1-l1 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-l2{0.0%{fill-opacity:0}75.312%{fill-opacity:0}76.562%{fill-opacity:1}93.75%{fill-opacity:1}97.5%{fill-opacity:0}100.0%{fill-opacity:0}}
.ha1-art .ha1-l2{animation:ha1-l2 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-l3{0.0%{fill-opacity:0}76.875%{fill-opacity:0}78.125%{fill-opacity:1}93.75%{fill-opacity:1}97.5%{fill-opacity:0}100.0%{fill-opacity:0}}
.ha1-art .ha1-l3{animation:ha1-l3 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-upd{0.0%{fill-opacity:0}80.0%{fill-opacity:0}81.562%{fill-opacity:1}93.75%{fill-opacity:1}97.5%{fill-opacity:0}100.0%{fill-opacity:0}}
.ha1-art .ha1-upd{animation:ha1-upd 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-arc{0.0%{stroke-dashoffset:100}68.75%{stroke-dashoffset:100}77.5%{stroke-dashoffset:0}93.75%{stroke-dashoffset:0}97.5%{stroke-dashoffset:100}100.0%{stroke-dashoffset:100}}
.ha1-art .ha1-arc{animation:ha1-arc 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-dotR{0.0%{opacity:0;offset-distance:0%}68.438%{opacity:0}68.75%{offset-distance:0%}69.062%{opacity:1}77.188%{opacity:1}77.5%{offset-distance:100%}77.812%{opacity:0}93.75%{offset-distance:100%}97.5%{offset-distance:0%}100.0%{opacity:0;offset-distance:0%}}
.ha1-art .ha1-dotR{animation:ha1-dotR 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-ahR{0.0%{fill-opacity:0}77.188%{fill-opacity:0}77.812%{fill-opacity:1}93.75%{fill-opacity:1}97.5%{fill-opacity:0}100.0%{fill-opacity:0}}
.ha1-art .ha1-ahR{animation:ha1-ahR 16s ease-in-out var(--ha1-t0) infinite}
@keyframes ha1-cap{0.0%{fill-opacity:0}78.125%{fill-opacity:0}81.25%{fill-opacity:1}93.75%{fill-opacity:1}97.5%{fill-opacity:0}100.0%{fill-opacity:0}}
.ha1-art .ha1-cap{animation:ha1-cap 16s ease-in-out var(--ha1-t0) infinite}
@media (prefers-reduced-motion: reduce){
.ha1-art .ha1-ld1{animation:none}
.ha1-art .ha1-ld2{animation:none}
.ha1-art .ha1-w1{animation:none;fill-opacity:1}
.ha1-art .ha1-w2{animation:none;fill-opacity:1}
.ha1-art .ha1-w3{animation:none;fill-opacity:1}
.ha1-art .ha1-w4{animation:none;fill-opacity:1}
.ha1-art .ha1-w5{animation:none;fill-opacity:1}
.ha1-art .ha1-w6{animation:none;fill-opacity:1}
.ha1-art .ha1-caret{animation:none;opacity:0;--ha1-k:1}
.ha1-art .ha1-legA{animation:none;stroke-dashoffset:0}
.ha1-art .ha1-dotA{animation:none;opacity:0;offset-distance:100%}
.ha1-art .ha1-ahA{animation:none;fill:#17627A}
.ha1-art .ha1-box{animation:none;stroke:#8FC1D4}
.ha1-art .ha1-d1{animation:none;fill:#12242F}
.ha1-art .ha1-t1{animation:none;fill:#101E28}
.ha1-art .ha1-st1{animation:none;fill-opacity:1}
.ha1-art .ha1-d2{animation:none;fill:#12242F}
.ha1-art .ha1-t2{animation:none;fill:#101E28}
.ha1-art .ha1-st2y{animation:none;fill-opacity:0}
.ha1-art .ha1-st2{animation:none;fill-opacity:1}
.ha1-art .ha1-d3{animation:none;fill:#12242F}
.ha1-art .ha1-t3{animation:none;fill:#101E28}
.ha1-art .ha1-st3{animation:none;fill-opacity:1}
.ha1-art .ha1-d4{animation:none;fill:#12242F}
.ha1-art .ha1-t4{animation:none;fill:#101E28}
.ha1-art .ha1-st4{animation:none;fill-opacity:1}
.ha1-art .ha1-dimA{animation:none;opacity:1;--ha1-k:0}
.ha1-art .ha1-dimB{animation:none;opacity:1;--ha1-k:0}
.ha1-art .ha1-dimC{animation:none;opacity:1;--ha1-k:0}
.ha1-art .ha1-dimD{animation:none;opacity:1;--ha1-k:0}
.ha1-art .ha1-cr{animation:none;fill:#566873}
.ha1-art .ha1-ld{animation:none;fill-opacity:0}
.ha1-art .ha1-ring{animation:none;stroke:#17627A}
.ha1-art .ha1-core{animation:none;fill:#17627A}
.ha1-art .ha1-flash{animation:none;stroke-opacity:0;transform:scale(1.6)}
.ha1-art .ha1-stubY{animation:none;stroke-dashoffset:0;opacity:0}
.ha1-art .ha1-dotY{animation:none;opacity:0;offset-distance:100%}
.ha1-art .ha1-ahY{animation:none;fill-opacity:0}
.ha1-art .ha1-cov{animation:none;fill-opacity:0}
.ha1-art .ha1-ans{animation:none;stroke-dashoffset:0}
.ha1-art .ha1-dotB{animation:none;opacity:0;offset-distance:100%}
.ha1-art .ha1-ahB{animation:none;fill-opacity:1}
.ha1-art .ha1-cardr{animation:none;stroke:#E4E8E9}
.ha1-art .ha1-bar{animation:none;fill:#17627A}
.ha1-art .ha1-alt{animation:none;fill:#101E28}
.ha1-art .ha1-cbody{animation:none;fill-opacity:1}
.ha1-art .ha1-chip{animation:none;fill-opacity:1}
.ha1-art .ha1-ing{animation:none;fill-opacity:0}
.ha1-art .ha1-ed{animation:none;fill-opacity:1}
.ha1-art .ha1-legD{animation:none;stroke-dashoffset:0}
.ha1-art .ha1-dotD{animation:none;opacity:0;offset-distance:100%}
.ha1-art .ha1-ahD{animation:none;fill:#17627A}
.ha1-art .ha1-ru{animation:none;fill-opacity:1}
.ha1-art .ha1-l1{animation:none;fill-opacity:1}
.ha1-art .ha1-l2{animation:none;fill-opacity:1}
.ha1-art .ha1-l3{animation:none;fill-opacity:1}
.ha1-art .ha1-upd{animation:none;fill-opacity:1}
.ha1-art .ha1-arc{animation:none;stroke-dashoffset:0}
.ha1-art .ha1-dotR{animation:none;opacity:0;offset-distance:100%}
.ha1-art .ha1-ahR{animation:none;fill-opacity:1}
.ha1-art .ha1-cap{animation:none;fill-opacity:1}
}
.hero-art{min-width:0;align-self:center}
/* ---------- 0902 AnswerLoop page v2 (al2-) ----------
/answerloop, legal vertical. Two drawn figures survive the 0904 copy cut:
the journey with its gate, and the one-answer fan-out. The lanes bar chart
and the flywheel are retired with their rules; so are the al2-hero plate
and the fact strip. The al2- text classes below are what the figures wear.
Figures are hand-held in pages/answerloop.html — there is no generator. */
.al2-fig{margin-top:clamp(30px,4vw,48px);max-width:960px;margin-inline:auto;
border:1px solid var(--line);border-radius:22px;
background:var(--paper-2);padding:clamp(18px,2.6vw,32px)}
.band-white .al2-fig{background:var(--paper)}
.al2-fig svg{display:block;width:100%;height:auto;overflow:visible}
.al2-scroll{overflow-x:auto}
.al2-scroll svg{min-width:880px}
.al2-fig figcaption{margin-top:16px;font-size:14px;line-height:1.65;color:var(--grey-2);max-width:78ch}
/* the six step labels under the journey figure, and the one link under the
governance ledger — both sit on the same measure as the body copy */
.al2-labels{max-width:78ch;margin-top:clamp(30px,4vw,46px)}
.al2-foot{margin-top:26px;max-width:74ch}
.al2-queues{display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(20px,3vw,40px);
margin-top:clamp(18px,2.4vw,28px);border-bottom:1px solid var(--line)}
.al2-queue{border-top:1px solid var(--line);padding:18px 0 20px}
.al2-queue h4{font-family:var(--body);font-size:15.5px;font-weight:600;color:var(--ink);
display:flex;align-items:center;gap:10px}
.al2-queue h4::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--teal);flex:none}
.al2-queue p{margin-top:8px;font-size:14px;line-height:1.6;color:var(--grey-2)}
/* the figures' type and strokes */
.al2-k{font:500 10.5px var(--body);letter-spacing:1px;text-transform:uppercase;fill:#7E8F99}
.al2-t{font:600 15px var(--body);fill:#101E28}
.al2-s{font:400 12.5px var(--body);fill:#566873}
.al2-q{font:400 16px var(--display);fill:#101E28}
.al2-m{font:500 14px var(--mono);fill:#17627A}
.al2-card{fill:#FFFFFF;stroke:#E4E8E9;stroke-width:1;filter:drop-shadow(0 4px 16px rgba(16,30,40,.06))}
.al2-g{fill:#2F7A4D}.al2-y{fill:#B45309}.al2-a{fill:#C77C05}
.al2-ln{fill:none;stroke:#17627A;stroke-width:1.6}
.al2-ln-lt{fill:none;stroke:#8FC1D4;stroke-width:1.6}
.al2-ln-a{fill:none;stroke:#C77C05;stroke-width:1.6;stroke-dasharray:4 6}
.al2-ln-g{fill:none;stroke:#2F7A4D;stroke-width:1.6}
.al2-ln-y{fill:none;stroke:#D97706;stroke-width:1.6}
/* motion: one payload through the journey, a ping at the reviewer, six dots
fanning out of the model */
.al2-dot{offset-rotate:0deg;animation:al2-dot 14s linear infinite,al2-dotc 14s linear infinite}
@keyframes al2-dot{0%{offset-distance:0%;opacity:0}2%{opacity:1}28%{offset-distance:34.8%}
36%{offset-distance:34.8%}97%{offset-distance:100%;opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes al2-dotc{0%,48%{fill:#17627A}49%,71%{fill:#C77C05}72%,100%{fill:#2F7A4D}}
.al2-ping{transform-box:fill-box;transform-origin:center;opacity:0;animation:al2-ping 14s ease-out infinite}
@keyframes al2-ping{0%,27%{opacity:0;transform:scale(.8)}29%{opacity:.6;transform:scale(.85)}
40%{opacity:0;transform:scale(1.5)}100%{opacity:0;transform:scale(1.5)}}
.al2-feed{offset-rotate:0deg;opacity:0;animation:al2-feed 7s ease-in-out infinite}
@keyframes al2-feed{0%{offset-distance:0%;opacity:1}18%{offset-distance:100%;opacity:1}
22%{opacity:0}100%{offset-distance:100%;opacity:0}}
.al2-fan{offset-rotate:0deg;opacity:0;animation:al2-fan 7s ease-in-out infinite}
@keyframes al2-fan{0%{offset-distance:0%;opacity:0}4%{opacity:1}40%{offset-distance:100%;opacity:1}
46%{offset-distance:100%;opacity:0}100%{offset-distance:100%;opacity:0}}
@media (max-width:900px){ .al2-queues{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .al2-queues{grid-template-columns:1fr} }
@media (prefers-reduced-motion: reduce){
.al2-dot,.al2-ping,.al2-fan,.al2-feed{animation:none}
.al2-dot,.al2-fan,.al2-feed,.al2-ping{opacity:0}
}
/* ---------- 0904 · /answerloop merged with the AnswerLoop platform (al3-) ----------
/answerloop is now the front door to the AnswerLoop platform at
answerloop.fineprintai.us. The hero, the three steps and the founder's
paragraph come from the platform's own landing page; the lp- rules in
AnswerLoop/platform/public/css/landing.css are ported here as al3-, on the
deep hero rather than paper, so the loop figure sits on a light plate. */
.al3-hero{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
gap:clamp(30px,4.4vw,68px);align-items:center;margin-top:clamp(24px,3vw,36px)}
.al3-hero h1{max-width:15ch;font-size:clamp(38px,4.7vw,60px)}
.al3-tag{margin-top:clamp(16px,1.9vw,24px);font-family:var(--display);font-weight:400;
font-size:clamp(22px,2.3vw,30px);line-height:1.24;color:var(--cream);max-width:24ch}
.al3-lede{margin-top:15px;font-size:17px;line-height:1.68;color:var(--grey-4);max-width:52ch}
.al3-note{margin-top:16px;font-size:14px;line-height:1.75;color:var(--mist)}
.al3-note .tlink{font-size:14px}
.al3-who{margin-top:clamp(24px,3vw,32px);padding-top:18px;
border-top:1px solid var(--line-dark);font-size:13.5px;line-height:1.7;color:var(--mist)}
.al3-hero .toc{margin-top:22px}
/* the loop figure: a light plate on the deep band */
.al3-fig{border:1px solid var(--line);border-radius:22px;background:var(--paper-2);
padding:clamp(20px,2.6vw,30px) clamp(18px,2.4vw,28px) clamp(16px,2vw,22px);
box-shadow:0 18px 54px rgba(4,12,18,.30);min-width:0}
.al3-loop{display:block;width:100%;height:auto;color:var(--teal-deep)}
.al3-loop .al3-node rect{fill:var(--paper-2);stroke:var(--line);stroke-width:1.2}
.al3-loop .al3-node-fill rect{fill:var(--teal-wash);stroke:#CBE1E9}
.al3-loop .al3-node-mark rect{fill:var(--amber-wash);stroke:#F3DCAE}
.al3-loop .al3-node-k{font-family:var(--mono);font-size:11px;fill:var(--grey-2)}
.al3-loop .al3-node-t{font-family:var(--display);font-size:20px;fill:var(--ink)}
.al3-loop .al3-node-s{font-family:var(--body);font-size:12.5px;font-weight:500;fill:var(--grey-1)}
.al3-fig figcaption{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft);
font-size:13.5px;line-height:1.6;color:var(--grey-2)}
/* the three steps, in a row */
.al3-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
gap:clamp(24px,3vw,48px);margin:clamp(34px,4vw,48px) 0 0;padding:clamp(28px,3.2vw,40px) 0 0;
border-top:1px solid var(--line)}
.al3-step-n{display:inline-flex;align-items:center;justify-content:center;
width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
background:var(--paper-2);font-family:var(--display);font-size:18px;line-height:1;
color:var(--teal-deep)}
.al3-step h3{margin-top:16px;max-width:20ch}
.al3-step p{margin-top:9px;font-size:15.4px;line-height:1.66;color:var(--grey-1);max-width:40ch}
.al3-step-list{margin:10px 0 0;padding-left:19px;
font-size:15.4px;line-height:1.7;color:var(--grey-1);max-width:40ch}
.al3-step-list li{margin:3px 0}
/* the founder's paragraph, centred on the one dark band in the middle */
.al3-creed{text-align:center}
.al3-creed-p{margin-top:0;max-width:34ch;margin-inline:auto;font-style:normal}
.al3-creed-foot{margin-top:30px}
@media (max-width:900px){
.al3-hero{grid-template-columns:1fr;gap:34px}
.al3-hero h1{max-width:none}
.al3-fig{max-width:480px}
.al3-steps{grid-template-columns:1fr;gap:26px;padding-top:26px}
.al3-step{border-top:1px solid var(--line);padding-top:22px}
.al3-steps .al3-step:first-child{border-top:0;padding-top:0}
}
/* ── 0904 AnswerLoop page: open Work Request cards (al3-cards) ─────────── */
.al3-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:34px}
@media (max-width:1100px){.al3-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.al3-cards{grid-template-columns:1fr}}
.al3-card{display:flex;flex-direction:column;gap:12px;background:var(--paper-2);border:1px solid var(--line);
border-radius:14px;padding:20px 20px 16px;color:inherit;text-decoration:none;min-width:0;
transition:border-color .15s,box-shadow .15s}
.al3-card:hover{border-color:var(--grey-4);box-shadow:0 6px 24px rgba(12,26,36,.06)}
.al3-card:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.al3-ask{align-self:flex-start;display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;
text-transform:uppercase;color:var(--teal-deep);background:var(--teal-wash);border-radius:999px;padding:5px 10px}
.al3-ask.is-other{color:var(--grey-1);background:var(--sand-2)}
.al3-card-top{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.al3-card h3{font-family:var(--body);font-weight:600;font-size:16px;line-height:1.35;margin:0;color:var(--ink)}
.al3-rate{font-family:var(--display);font-size:26px;line-height:1;color:var(--ink);white-space:nowrap;flex:none}
.al3-reason{font-size:13.5px;line-height:1.55;color:var(--grey-2);margin:0;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.al3-chips{display:flex;flex-wrap:wrap;gap:6px}
.al3-chips span{font-size:12px;color:var(--grey-1);background:var(--sand);border-radius:999px;padding:4px 10px}
.al3-card-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line-soft);font-size:12.5px;color:var(--grey-2)}
.al3-cards-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.al3-cards-head .lede{margin:0}
/* ── 0905 catalog pass: eight specialists, 101 endpoints ─────────────────── */
.spec tr.ep-group td{padding-top:22px;padding-bottom:6px;border-top:none;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-3);width:auto}
.spec tr.ep-group:first-child td{padding-top:6px}
.spec tr.ep-group td b{font-weight:600;color:var(--grey-2)}
.spec td .slug+br+b{display:inline-block;margin-top:8px;font-weight:600;color:var(--ink)}
.ep-lane{display:block;margin-top:6px;font-size:13px;color:var(--grey-3)}
/* ── 0905 footer: Ide8 line ─────────────────────────────────────────────── */
.f-ide8{margin-top:14px}
.f-ide8 a{color:var(--mist);text-decoration:none;border-bottom:1px solid rgba(188,201,210,.45)}
.f-ide8 a:hover{color:var(--cream);border-bottom-color:var(--cream)}
/* ---------- 0907 product tour (the "watch it" band) ----------
A loop of product screens in the demo frame, replacing the film iframe.
Frames are 1600x1000 captures of the app demo; the first carries src, the
rest data-src and load when the band scrolls into view (js/site.js §4).
With JS blocked the first frame shows and the dots are empty.
0907c legibility pass. The loop was the best proof on the site and the least
readable thing on it: a whole 1600x1000 app window squeezed to ~1110px, so
the product's own 13px type landed near 8px, with the caption sitting in a
gradient over the bottom of the very screen it described. Two changes:
· the caption moved out of the picture into its own column beside it
(>=1080px), and the stage bled out to the page margins so the picture is
~960px wide at a 1440 desktop instead of ~1110px of mostly chrome;
· every frame after the establishing shot is now a CROP — img/app/tour/z/*,
944x590 lifted out of the app's content column — so it draws at roughly
1:1 and the app's type reads at its own size. The first frame of each loop
stays the whole window, so the reader still sees the product once.
Both loops keep the same 8:5 stage, so the crops and the full-window
establishing frames drop into it interchangeably. */
.demo-split{--tour-side:288px}
/* The two columns cost the picture 316px, so they only start where there is
316px to spare. Below 1340 the caption stacks under the frame instead and
the frame keeps the whole column — still never overlaid, and the larger
picture of the two. Measured: a 944px crop draws at 894px at 1340 (13.3px
effective app type) and at 994px at 1440 (14.7px). Splitting any earlier
put the frame back under 800px and undid the point of the pass. */
@media (min-width:1340px){
/* the stage steps out of .wrap into the page margin. The bleed is
(min(1440, 100vw - 2*pad) - 100%) / 2, which is never more than the 64px
of padding it is stepping into, so no scrollbar can push it off-screen. */
.demo-split{
width:min(1440px, calc(100vw - 2*var(--pad)));
margin-inline:calc((100% - min(1440px, calc(100vw - 2*var(--pad)))) / 2);
display:grid;grid-template-columns:minmax(0,1fr) var(--tour-side);
gap:28px;align-items:stretch}
}
.demo-stage.tour{overflow:hidden;aspect-ratio:8/5}
.tour-f{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .7s ease;pointer-events:none}
.tour-f.is-on{opacity:1;z-index:1;pointer-events:auto}
.tour-f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
/* the caption is read aloud from here and shown in .tour-cap beside the frame */
.tour-f figcaption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* the caption column */
.demo-side{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-top:20px}
@media (min-width:1340px){
/* the column runs the full height of the frame: caption at the top, the
dots and the way out at the bottom, so the picture has a wall to sit
against instead of a paragraph floating in the dark. */
.demo-side{margin-top:0;padding:2px 0 2px 24px;border-left:1px solid var(--line-dark)}
.demo-side .tour-dots{margin-top:auto}
}
.tour-num{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--mist)}
.tour-num b{color:var(--amber);font-weight:600}
.tour-cap{font-size:17px;line-height:1.5;color:var(--cream);max-width:40ch;text-wrap:pretty}
.tour-cap.is-fresh{animation:tourcap .45s ease both}
@keyframes tourcap{from{opacity:.25;transform:translateY(4px)}to{opacity:1;transform:none}}
.tour-meta{font-size:13px;line-height:1.6;color:var(--mist)}
@media (min-width:1340px){ .demo-side .tlink{margin-top:2px} }
/* dots: the visible mark stays 8px, the button is a 24px target (Lighthouse) */
.tour-dots{display:flex;flex-wrap:wrap;align-items:center;gap:0;margin-inline:-8px}
.tour-dot{width:24px;height:24px;display:grid;place-items:center;padding:0;border:0;
background:none;border-radius:50%;cursor:pointer;-webkit-appearance:none;appearance:none}
.tour-dot::before{content:"";width:8px;height:8px;border-radius:50%;
background:rgba(255,255,255,.32);transition:background .2s ease,transform .2s ease}
.tour-dot:hover::before{background:rgba(255,255,255,.65)}
.tour-dot.is-on::before{background:var(--amber);transform:scale(1.4)}
.tour-dot:focus-visible{outline:2px solid var(--amber);outline-offset:-3px}
@media (max-width:820px){
/* stacked: picture, then caption under it. Never over it. */
.tour-cap{font-size:15.5px;max-width:none}
.demo-side{gap:14px}
}
@media (prefers-reduced-motion: reduce){
.tour-f{transition:none}
.tour-cap.is-fresh{animation:none}
.tour-dot::before{transition:none}
}
/* ---------- 0908 review pass ---------- */
.p-cred{margin-top:10px;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--grey-2)}
.loop-solo{margin-top:0;padding:clamp(20px,2.6vw,32px)}
.loop-solo .loop-svg{max-width:470px}
@media (max-width:900px){ .loop-solo{margin-top:clamp(24px,4vw,40px)} }
.spec tbody th{text-align:left;font-weight:600;color:var(--ink);vertical-align:top}
@media (max-width:480px){
/* phones: the hero diagram is a tall stack; show its opening (Ask + the endpoint) and fade the rest */
.hero-art{max-height:380px;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent);mask-image:linear-gradient(to bottom,#000 70%,transparent)}
}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.tri-k{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--amber);margin-bottom:12px}
.tri p strong{color:var(--ink);font-weight:600}
/* =============================================================================
0908 · FinePrint LM + AnswerLoop — the homepage band
Meant to be APPENDED to css/site.css on approval. Nothing here overrides an
existing rule; every new class is prefixed .lmb-.
Both variants sit on .band.band-deep and compose from the existing
vocabulary (wrap, kick-dark, h-dark, deck-dark, cta-row, btn-light,
btn-out-dark). What is new is: one light plate (.lmb-plate) that holds ONE
composed figure, the two copy halves (.lmb-half), the signature line
(.lmb-sig) and the loop pulse (.lmb-run).
Motion note (this site has been bitten before): every rule that sets an
animation has a prefers-reduced-motion override at the SAME specificity,
later in the file. Both are (0,2,0): `.lmb .lmb-run`.
========================================================================== */
/* ---------- shared: type ---------- */
.lmb-h{font-size:clamp(36px,5.2vw,62px);line-height:1.04;max-width:20ch}
.lmb-deck{max-width:54ch}
/* the two halves of the argument. On the deep band the keys are keyed to the
figure: teal for the model, amber for the loop. */
.lmb-halves{display:grid;gap:clamp(20px,2.4vw,30px);margin-top:clamp(24px,3vw,36px)}
.lmb-half{border-top:1px solid var(--line-dark);padding-top:15px}
.lmb-k{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;
text-transform:uppercase;color:var(--teal-lt);margin-bottom:9px}
.lmb-half-loop .lmb-k{color:var(--amber)}
.lmb-half p{font-size:16px;line-height:1.64;color:var(--grey-4);max-width:48ch}
.lmb-half p b{color:var(--cream);font-weight:600}
.lmb-sig{margin-top:clamp(24px,2.8vw,34px);font-family:var(--display);
font-size:clamp(25px,2.9vw,38px);line-height:1.16;color:var(--cream);
max-width:22ch;text-wrap:balance}
.lmb-note{margin-top:18px;font-size:13.8px;line-height:1.72;color:var(--mist);max-width:64ch}
/* the three matter levels, legible on the deep ground. Semantic use only. */
.lmb-g{color:#8FD3AB;font-weight:600}
.lmb-y{color:#F5C978;font-weight:600}
.lmb-r{color:#F0A79C;font-weight:600}
/* ---------- shared: the plate the figure sits on ---------- */
.lmb-plate{position:relative;border-radius:26px;border:1px solid var(--line);
padding:clamp(16px,2.2vw,26px) clamp(14px,2.2vw,28px);
background:
radial-gradient(88% 88% at 6% 4%, rgba(23,98,122,.075), transparent 58%),
radial-gradient(74% 88% at 96% 96%, rgba(245,158,11,.10), transparent 54%),
var(--paper-2)}
.lmb-svg{display:block;width:100%;height:auto}
/* ---------- variant A · copy left, one figure right ---------- */
.lmb-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
gap:clamp(30px,3.8vw,62px);align-items:start;margin-top:clamp(26px,3.2vw,42px)}
/* width:100% is load-bearing. A grid item with auto margins loses the default
`justify-self:stretch`, so without it the plate shrink-wraps to the SVG's
300px default intrinsic size once the band stacks. */
.lmb-duo .lmb-plate{width:100%;max-width:580px}
@media (max-width:980px){
.lmb-duo{grid-template-columns:minmax(0,1fr);gap:clamp(30px,4.4vw,40px)}
.lmb-duo .lmb-plate{margin-inline:auto}
}
/* ---------- variant B · one wide figure, the halves beneath it ---------- */
.lmb-wide{margin-top:clamp(28px,3.4vw,44px)}
.lmb-cols{grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(24px,3.2vw,54px);align-items:start}
.lmb-foot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:clamp(24px,3.2vw,54px);align-items:end;margin-top:clamp(26px,3vw,38px)}
.lmb-foot .lmb-sig{margin-top:0}
.lmb-foot .cta-row{margin-top:0}
@media (max-width:820px){
.lmb-cols{grid-template-columns:minmax(0,1fr)}
.lmb-foot{grid-template-columns:minmax(0,1fr);align-items:start;gap:26px}
}
/* the wide figure keeps its proportions: below tablet it scrolls inside its
own box rather than shrinking the labels to nothing. The band never scrolls
sideways; this one box does. */
.lmb-scroll{max-width:100%}
@media (max-width:900px){
.lmb-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.lmb-scroll .lmb-svg{min-width:820px}
}
@media (max-width:480px){
.lmb-scroll .lmb-svg{min-width:700px}
}
/* ---------- the pulse that runs the loop ---------------------------------
One clock, 9s, three legs of 3s each. Each leg is pathLength=100 with a
dash pattern 300 long, so the dash is only ON its own path for the first
third of the cycle. Negative delays put the legs in order: leg 1 fires at
0s, leg 2 at 3s (delay -6s), leg 3 at 6s (delay -3s). Variant B has two
legs and uses the first two slots. */
.lmb .lmb-run{animation:lmbrun 9s linear infinite}
.lmb .lmb-run-2{animation-delay:-6s}
.lmb .lmb-run-3{animation-delay:-3s}
@keyframes lmbrun{from{stroke-dashoffset:0}to{stroke-dashoffset:-300}}
@media (prefers-reduced-motion: reduce){
.lmb .lmb-run{animation:none;stroke-dashoffset:-150}
.lmb .lmb-run-2{animation-delay:0s}
.lmb .lmb-run-3{animation-delay:0s}
}