/* Evergreen · Field — the site-wide visual layer, loaded after each page's inline styles.
   Lab type (large display type, mono labels), deep green fields with a measured dot
   pattern, and pale laboratory panels. Pages opt in with <body class="evergreen home|about|legal">;
   evergreen.js draws the cursor-reactive dot field and diagrams.js the homepage diagrams. */

/* ---------- Lab type ---------- */
html{scroll-padding-top:90px}
body{font-size:15px;line-height:1.7}
.home .display-title{font-size:clamp(110px,12vw,177px);font-weight:700;line-height:.85;letter-spacing:-9px;margin:45px 0}
.home .display-title em{font-style:italic;font-weight:700;letter-spacing:-12px;color:var(--verified)}
h2{font-size:clamp(40px,5vw,72px);font-weight:600;line-height:1.12;letter-spacing:-3px}
.about-hero .title{font-size:clamp(48px,6vw,85px);font-weight:500;line-height:1.05;letter-spacing:-3px}
.card h3,.step h3,.lead h3,.dates h3{font-size:24px;font-weight:500;line-height:1.12;letter-spacing:-.7px}
.faq h3{font-size:21px;font-weight:500;letter-spacing:-.7px}
.kicker,.tag,.ital,.limited,.sec-num{font-family:var(--font-mono);font-size:11px;line-height:1.6;letter-spacing:1px}
.step .ital{font-size:20px;letter-spacing:-1px}
.home .contrast>.card,.home #products .steps>.step{grid-column:1}
.home .contrast,.home #products .steps{grid-auto-rows:1fr}
.hero-copy p{font-size:17px}
.ledger{font-size:10px;line-height:1.8}
.ledger .row{white-space:normal;overflow:visible}.ledger .v{overflow-wrap:anywhere;min-width:0}
.reveal{opacity:1;transform:none}
.skip-link{position:fixed;top:-100px;left:10px;background:var(--ink);color:var(--paper);padding:12px;z-index:100}.skip-link:focus{top:10px}
.menu-toggle{display:none}button,input,select{font-family:var(--font-body)}
@media(max-width:900px){.menu-toggle{display:flex;gap:18px;background:transparent;border:1px solid var(--rule);color:var(--ink);padding:8px 12px;font-size:12px}.nav-right{display:none;position:absolute;top:100%;left:0;right:0;padding:24px;background:var(--paper);border-bottom:1px solid var(--rule)}.nav-right.open{display:flex;align-items:stretch;flex-direction:column}.nav-right .nav-links{display:flex;flex-direction:column;gap:18px}.nav-right .nav-cta{display:block;align-self:start}}
@media(max-width:800px){.home .display-title{font-size:clamp(68px,21.5vw,155px);letter-spacing:-5px;margin:34px 0}.home .display-title em{letter-spacing:-5px}h2{font-size:42px;letter-spacing:-1.5px}.cta h2{font-size:48px}.hero{padding:42px 0}.sec-head{gap:16px}}
@media print{.skip-link,.menu-toggle{display:none}}

/* ---------- Animated diagrams: each shares its row with the corresponding text card. ---------- */
.home .motion-scene{grid-column:2;min-width:0;margin:0;display:flex;flex-direction:column;justify-content:center;padding:12px 22px}
.motion-scene svg{display:block;width:100%;height:auto;aspect-ratio:12/7}
.motion-scene figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 6px;color:var(--ink-soft);font:10px/1.5 var(--font-mono);letter-spacing:.02em}
.motion-scene button{flex:none;border:0;background:transparent;color:var(--ink-soft);font:inherit;cursor:pointer;padding:8px}
.motion-scene button:hover{color:var(--ink)}
.motion-scene button:focus-visible{outline:2px solid var(--verified);outline-offset:2px}
/* The comparison rows are 30% shorter, including their diagram and caption space. */
.home .contrast>.card{padding-block:20px}
.home .contrast .motion-scene svg{width:calc(70% - 36.5px);align-self:center;transform:scale(1.5)}
@media(max-width:820px){.home .contrast{grid-template-columns:1fr}.home .contrast,.home #products .steps{grid-auto-rows:1fr auto}.home .motion-scene{grid-column:1;padding:0 16px 24px}.home .contrast .motion-scene{padding-top:18px}.motion-scene svg{max-width:480px;align-self:center}}
@media(prefers-reduced-motion:reduce){.motion-scene button{display:none}}
/* Solid editorial diagrams: deliberate motion, warm paper, forest ink. */
.motion-scene svg{overflow:visible;--diagram-ink:#1e6b4e;--diagram-soft:#e3ede6;--diagram-accent:#ad744b;--diagram-alert:#c8372d}
.motion-scene .sheet,.motion-scene .node{fill:#fbf7ef;stroke:var(--diagram-ink);stroke-width:1.6}
.motion-scene .block{fill:var(--diagram-soft);stroke:var(--diagram-ink);stroke-width:1.6}
.motion-scene .sheet,.motion-scene .block{stroke-width:2.5}
.motion-scene .shadow{fill:#e5dece}
.motion-scene .wire,.motion-scene .cycle{fill:none;stroke:var(--diagram-ink);stroke-width:1.5}
.motion-scene .rule{fill:none;stroke:#c6cebf;stroke-width:1.2}
.motion-scene .check,.motion-scene .signal{fill:none;stroke:var(--diagram-ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.motion-scene .signal{stroke-width:2.5}
.motion-scene .out-of-band .signal{stroke:var(--diagram-alert)}
.motion-scene .light-check{fill:none;stroke:#fbf7ef;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.motion-scene .solid,.motion-scene .scan,.motion-scene .window{fill:var(--diagram-ink)}
.motion-scene .token{fill:var(--diagram-ink);stroke:#fbf7ef;stroke-width:2}
.motion-scene .range{fill:#e3e9dc}
.motion-scene .diagram-label{fill:var(--diagram-ink);font:9px var(--font-mono);letter-spacing:1px;text-anchor:middle}
.motion-scene .diagram-title{fill:var(--diagram-ink);font:600 15px var(--font-body);text-anchor:middle}
.motion-scene .flow-token{animation:diagram-flow 6s linear infinite;animation-delay:var(--delay)}
.motion-scene .flow-token .token{animation:diagram-token-color 6s steps(1,end) infinite;animation-delay:var(--delay)}
.motion-scene .test-token{animation:diagram-flow 5.4s linear infinite;animation-delay:var(--delay)}
.motion-scene .outcome,.motion-scene .local-node,.motion-scene .support-module{animation:diagram-emphasis 6s ease-in-out infinite;animation-delay:var(--delay)}
.motion-scene .report-line{animation:diagram-reveal 6s ease-in-out infinite;animation-delay:var(--delay)}
.motion-scene .seal{transform-origin:311px 190px;animation:diagram-seal 6s ease-in-out infinite}
.motion-scene .scanner{animation:diagram-scan 3s ease-in-out infinite alternate}
.motion-scene .trace{animation:diagram-trace 7s linear infinite}
.motion-scene .live-dot{fill:var(--diagram-accent);animation:diagram-emphasis 3s ease-in-out infinite}
.motion-scene .cycle{stroke-dasharray:5 6;animation:diagram-cycle 3s linear infinite}
.motion-scene .probability-input{fill:var(--diagram-ink);stroke:#fbf7ef;stroke-width:2;offset-path:path('M70 130H198');animation:probability-input 6s linear infinite}
.motion-scene .ai-process{transform-origin:235px 130px;animation:probability-process 6s ease-in-out infinite}
.motion-scene .probability-output{fill:var(--diagram-accent);stroke:#fbf7ef;stroke-width:2;opacity:0;visibility:hidden;animation:probability-output 6s linear infinite}
.motion-scene .probability-result{transform-box:fill-box;transform-origin:center;animation:probability-result 6s ease-in-out infinite}
.motion-scene .probability-branch.is-selected{--result-opacity:1;--result-scale:1.12}
.motion-scene .probability-branch.is-selected .probability-output{visibility:visible}
@keyframes probability-input{0%{offset-distance:0%;opacity:0}3%{opacity:1}38%{offset-distance:100%;opacity:1}41%,100%{offset-distance:100%;opacity:0}}
@keyframes probability-process{0%,36%,52%,100%{transform:scale(1)}44%{transform:scale(1.14);fill:#b6cbb2}}
@keyframes probability-output{0%,45%{offset-distance:0%;opacity:0}47%{opacity:1}80%{offset-distance:100%;opacity:1}85%,100%{offset-distance:100%;opacity:0}}
@keyframes probability-result{0%,75%,100%{opacity:.5;transform:scale(1)}80%,94%{opacity:var(--result-opacity,.5);transform:scale(var(--result-scale,1))}}
/* !important so the pause also beats more specific animation rules (.flow-token .token);
   otherwise the token colour runs on while its movement is paused and the two drift apart. */
.motion-scene:not(.is-visible) svg *,.motion-scene.is-paused svg *{animation-play-state:paused!important}
@keyframes diagram-flow{0%{transform:translateX(0);opacity:0}10%,85%{opacity:1}100%{transform:translateX(335px);opacity:0}}
/* Inputs enter green and leave brown; the swap at 50% happens inside the fixed-rule box, which
   is drawn over the tokens (fully inside it from 36% to 67% of the journey). */
@keyframes diagram-token-color{0%{fill:var(--diagram-ink)}50%,100%{fill:var(--diagram-accent)}}
@keyframes diagram-emphasis{0%,100%{opacity:.35}25%,50%{opacity:1}}
@keyframes diagram-reveal{0%,12%{opacity:0;transform:translateY(5px)}25%,85%{opacity:1;transform:translateY(0)}100%{opacity:0}}
@keyframes diagram-seal{0%,40%{opacity:0;transform:scale(1.25)}50%,88%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@keyframes diagram-scan{to{transform:translateY(96px)}}
@keyframes diagram-trace{to{transform:translateX(-344px)}}
@keyframes diagram-cycle{to{stroke-dashoffset:-44}}
@media(prefers-reduced-motion:reduce){.motion-scene svg *{animation:none!important}.motion-scene .probability-input,.motion-scene .probability-output{display:none}}
@media print{.motion-scene svg *{animation:none!important}.motion-scene button{display:none}}

/* ---------- Evergreen: deep green fields punctuated by pale laboratory panels. ---------- */
.evergreen .hero{position:relative;isolation:isolate;overflow:hidden;border-bottom:0;background:#14513b;color:var(--paper);--mx:50%;--my:50%}
.evergreen .hero>.wrap{position:relative;z-index:1}
.evergreen .sec-num{display:inline-grid;place-items:center;min-width:36px;height:36px;border:1px solid currentColor;border-radius:4px;flex:none}
.evergreen #products .steps,.evergreen #benefits .steps{gap:30px 36px}
.evergreen .hero .kicker,.evergreen .hero-copy p,.evergreen .hero .footnote,.evergreen .hero .demo-note{color:var(--verified-soft)}
.evergreen .hero .kicker:before{background:#a3e3c3}
.evergreen .hero .display-title em{color:#a3e3c3}
.evergreen .hero .btn-primary,.evergreen .about-hero .btn-primary{background:var(--paper);border-color:var(--paper);color:var(--verified)}
.evergreen .hero .btn-secondary{color:var(--paper);border-color:var(--paper)}
.evergreen .motion-scene{border-radius:6px;background:#fbf7ef;box-shadow:0 10px 30px #1e6b4e0c;border:1px solid var(--rule)}
/* Each diagram takes the border of the card beside it; the "now" cards use the darker beige. */
.evergreen .card.now+.motion-scene{border-color:#c9bfa9}
.evergreen #independence{background:var(--paper-deep);background-image:radial-gradient(#1e6b4e26 1px,transparent 1.2px);background-size:22px 22px}

/* ---------- Field: a measured dot field that bends toward the cursor; the ledger tilts with it. ---------- */
.evergreen .about-hero{background:#14513b;--mx:50%;--my:50%;position:relative;isolation:isolate;overflow:hidden;color:var(--paper);border-bottom:0;padding:96px 0 88px}
.evergreen .about-hero>.wrap{position:relative;z-index:1}
.evergreen .about-hero .kicker{color:var(--verified-soft)}.evergreen .about-hero .kicker:before{background:#a3e3c3}
.evergreen .about-hero .title{color:var(--paper)}.evergreen .about-hero p{color:#c8ddd1}
.evergreen.legal .hero .meta,.evergreen.legal .hero .lede{color:#c8ddd1}.evergreen.legal .hero .todo{color:#a3e3c3}
.evergreen.legal .hero .display-title{color:var(--paper)}.evergreen.legal .tbl{border-radius:6px;overflow:hidden}
.evergreen .ev-field{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}
.evergreen .hero:after,.evergreen .about-hero:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
 background:radial-gradient(560px circle at var(--mx) var(--my),#a3e3c32e 0,#a3e3c30c 38%,transparent 68%)}
.evergreen .ledger{border-radius:6px;border:1px solid #a3e3c355;transform:perspective(1100px);transition:transform .3s cubic-bezier(.2,.6,.2,1);will-change:transform;
 background:#0f2e22;box-shadow:0 30px 60px #0a2a1e80,0 0 0 1px #ffffff0d inset}
.evergreen .ledger .seal{border-top-style:solid;border-top-color:#a3e3c333}
.evergreen .card,.evergreen .dates,.evergreen .cta-box{border-radius:6px}
.evergreen .card,.evergreen .dates{background:#fbf7ef;background-image:radial-gradient(#1e6b4e1f 1px,transparent 1.2px);background-size:18px 18px;background-position:center}
.evergreen #products,.evergreen #benefits{background:var(--paper);border-top:1px solid var(--rule);background-image:radial-gradient(#1e6b4e26 1px,transparent 1.2px);background-size:22px 22px}
.evergreen #products .step,.evergreen #benefits .step,.evergreen #independence .step{background:#fbf7efd9;border:1px solid var(--rule);border-top:3px solid var(--verified);padding-inline:24px;border-radius:6px}
.evergreen #who .card,.evergreen .contrast>.card{border-top:3px solid var(--verified)}
.evergreen .lead{border-radius:6px;background:#0f2e22;color:var(--paper);border:1px solid #a3e3c355;box-shadow:0 24px 50px -30px #0a2a1e;background-image:radial-gradient(#a3e3c326 1px,transparent 1.2px);background-size:18px 18px;background-position:center}
.evergreen .lead .tag{color:#9fc8b4}.evergreen .lead h3{color:var(--paper)}.evergreen .lead .role{color:#a3e3c3}.evergreen .lead p{color:#c8ddd1}
.evergreen .cta{background:#14513b;background-image:radial-gradient(#a3e3c326 1px,transparent 1.2px);background-size:22px 22px}
.evergreen .cta-box{background:#0f2e22;border:1px solid #a3e3c355}

@media(max-width:880px){
 .evergreen .hero{padding-block:48px}
 .evergreen .motion-scene{margin-bottom:18px}
 .evergreen .about-hero{padding:56px 0 48px}
}
@media(prefers-reduced-motion:reduce){
 .evergreen *,.evergreen *:before{animation:none!important;transition:none!important}
 .evergreen .ledger{transform:none!important}
}