/* ERGIVO — site layer v2. Built on assets/design-tokens.css.
   ⛔ No hex values. Every colour is a semantic token so a palette swap repaints
   the site. Enforced by scripts/check-tokens.sh. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);
     font-size:var(--fs-md);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;
     font-feature-settings:"kern","liga";overflow-x:hidden}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}

h1,h2,h3,h4{font-family:var(--font-display);color:var(--text);text-wrap:balance}
h1{font-size:var(--fs-h1);line-height:var(--lh-tight);letter-spacing:var(--tr-h1);font-weight:700}
h2{font-size:var(--fs-h2);line-height:var(--lh-head);letter-spacing:var(--tr-h2);font-weight:600}
h3{font-size:var(--fs-h4);line-height:1.3;font-weight:600}
h4{font-size:1.02rem;font-weight:600}
p{max-width:var(--measure)}
.lede{font-size:var(--fs-lg);color:var(--text-muted);max-width:52ch}
.mono{font-family:var(--font-data);font-variant-numeric:tabular-nums}
.muted{color:var(--text-muted)}
.kicker{font-family:var(--font-data);font-size:.7rem;font-weight:500;letter-spacing:.15em;
        text-transform:uppercase;color:var(--signal)}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s-5)}
.narrow{max-width:58rem;margin-inline:auto}
section{padding-block:var(--s-8)}
.rule{border-top:1px solid var(--border)}
.tint{background:var(--surface)}

/* ── nav with mega menu ───────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:40;height:70px;display:flex;align-items:center;
     background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(12px);
     border-bottom:1px solid var(--border)}
.nav .wrap{display:flex;align-items:center;gap:var(--s-6);width:100%}
.brand{display:flex;align-items:center;gap:.5em;text-decoration:none;flex:0 0 auto}
.brand .wm{font-family:var(--font-display);font-weight:700;font-size:1.4rem;
           letter-spacing:var(--tr-wordmark);line-height:1}
.navlinks{display:flex;gap:var(--s-2);margin-left:auto;align-items:center}
.navlinks>a,.navitem>button{display:inline-flex;align-items:center;gap:.3rem;
  padding:.5rem .7rem;border-radius:var(--r-sm);text-decoration:none;color:var(--text-muted);
  font-size:.95rem;font-weight:500;white-space:nowrap;transition:color var(--dur) var(--ease)}
.navlinks>a:hover,.navitem>button:hover{color:var(--text)}
.navitem{position:relative}
.navitem>button::after{content:"";width:.34rem;height:.34rem;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-1px);
  transition:transform var(--dur) var(--ease)}
.navitem[data-open="true"]>button::after{transform:rotate(-135deg) translateY(-2px)}
.mega{position:absolute;top:calc(100% + .6rem);left:-.7rem;width:min(30rem,86vw);
  background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-3);padding:var(--s-4);display:grid;gap:.2rem;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur)}
.navitem[data-open="true"] .mega{opacity:1;visibility:visible;transform:none}
.mega a{display:grid;gap:.15rem;padding:.65rem .75rem;border-radius:var(--r-md);
        text-decoration:none;transition:background var(--dur) var(--ease)}
.mega a:hover{background:var(--surface)}
.mega a b{font-weight:600;font-size:.95rem;color:var(--text)}
.mega a span{font-size:.85rem;color:var(--text-muted);line-height:1.4}
.navtoggle{display:none;margin-left:auto;padding:.5rem}
.navtoggle span{display:block;width:20px;height:1.5px;background:var(--text);margin:4px 0}

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;white-space:nowrap;
  font-family:var(--font-display);font-weight:600;font-size:1rem;padding:.75rem 1.45rem;
  border-radius:var(--r-md);text-decoration:none;border:1.5px solid transparent;
  transition:transform var(--dur) var(--ease),background var(--dur) var(--ease),
             border-color var(--dur) var(--ease)}
.btn-primary{background:var(--signal);color:var(--on-signal)}
.btn-primary:hover{background:var(--signal-hover)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--border-strong)}
.btn-ghost:hover{border-color:var(--text)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:none;box-shadow:var(--ring)}
.btn-sm{padding:.5rem 1rem;font-size:.9rem}
.cta{display:flex;gap:var(--s-3);flex-wrap:wrap}

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero{padding-top:var(--s-7);padding-bottom:var(--s-8);position:relative;overflow:hidden}
.hero .wrap{display:grid;gap:var(--s-6);grid-template-columns:1fr;align-items:center}
@media(min-width:1020px){.hero .wrap{grid-template-columns:1.02fr .98fr;gap:var(--s-8)}}
.hero h1{max-width:15ch}
.hero .lede{margin-top:var(--s-4)}
.hero .cta{margin-top:var(--s-6)}
.hero-note{margin-top:var(--s-5);font-size:.88rem;color:var(--text-faint);display:flex;
           align-items:center;gap:.5rem}
.hero-note b{color:var(--text-muted);font-weight:500}

/* the conversation. plain type, no fake window chrome. */
.convo{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface-raised);
  box-shadow:var(--shadow-3);padding:var(--s-5);display:flex;flex-direction:column;
  gap:var(--s-4);font-size:.95rem;min-height:19rem}
.turn{display:grid;grid-template-columns:4.2rem 1fr;gap:var(--s-4);align-items:start;
      opacity:0;transform:translateY(6px)}
.turn.on{opacity:1;transform:none;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.turn .who{font-family:var(--font-data);font-size:.68rem;letter-spacing:.1em;
           text-transform:uppercase;color:var(--text-faint);padding-top:.3em}
.turn.sys .who{color:var(--primary)}
.diff{margin-top:var(--s-3);display:grid;gap:.4rem;font-family:var(--font-data);
      font-size:.84rem;color:var(--text-muted)}
.diff span{display:flex;gap:.45rem;align-items:baseline;flex-wrap:wrap}
.diff b{font-weight:500;color:var(--text);font-variant-numeric:tabular-nums}
.diff .up{color:var(--success)}
.convo .foot{margin-top:auto;border-top:1px solid var(--border);padding-top:var(--s-3);
             font-size:.82rem;color:var(--text-faint)}
.caret{display:inline-block;width:.5rem;height:1em;background:var(--signal);
       vertical-align:-.12em;margin-left:.1rem}
@media(prefers-reduced-motion:no-preference){.caret{animation:blink 1s steps(2) infinite}}
@keyframes blink{50%{opacity:0}}

/* ── stat band ────────────────────────────────────────────────────────── */
.stats{display:grid;gap:var(--s-5);grid-template-columns:1fr}
@media(min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat .v{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,4vw,2.9rem);
  line-height:1;letter-spacing:-.025em;color:var(--text);font-variant-numeric:tabular-nums}
.stat .k{margin-top:.55rem;font-size:.92rem;color:var(--text-muted);line-height:1.4;max-width:24ch}
.stat .src{margin-top:.35rem;font-family:var(--font-data);font-size:.7rem;color:var(--text-faint)}

/* ── tabs ─────────────────────────────────────────────────────────────── */
.tabs{margin-top:var(--s-6)}
.tablist{display:flex;gap:var(--s-2);border-bottom:1px solid var(--border);overflow-x:auto;
         scrollbar-width:none}
.tablist::-webkit-scrollbar{display:none}
.tablist button{padding:.85rem .2rem;margin-right:var(--s-5);white-space:nowrap;
  font-family:var(--font-display);font-weight:600;font-size:1.02rem;color:var(--text-faint);
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.tablist button:hover{color:var(--text-muted)}
.tablist button[aria-selected="true"]{color:var(--text);border-bottom-color:var(--signal)}
.tabpanel{padding-top:var(--s-6);display:none;gap:var(--s-6);grid-template-columns:1fr}
.tabpanel[data-on]{display:grid}
@media(min-width:900px){.tabpanel[data-on]{grid-template-columns:1fr 1fr;gap:var(--s-7)}}
.tabpanel h3{font-size:var(--fs-h3);font-family:var(--font-display);letter-spacing:-.01em}
.tabpanel .body{display:grid;gap:var(--s-4);align-content:start}
.taglist{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:var(--s-2)}
.tag{font-family:var(--font-data);font-size:.74rem;padding:.28rem .6rem;border-radius:var(--r-full);
     background:var(--surface);border:1px solid var(--border);color:var(--text-muted)}

/* ── ledger ───────────────────────────────────────────────────────────── */
.ledger{margin-top:var(--s-6);border-top:1.5px solid var(--text)}
.lhead,.lrow{display:grid;grid-template-columns:2.5rem 1fr 1fr;gap:var(--s-5);
             border-bottom:1px solid var(--border)}
.lhead{padding-block:.6rem}
.lhead span{font-family:var(--font-data);font-size:.67rem;letter-spacing:.13em;
            text-transform:uppercase;color:var(--text-faint)}
.lhead .b{color:var(--primary)}
.lrow{padding-block:var(--s-4);transition:background var(--dur) var(--ease)}
.lrow:hover{background:var(--surface)}
.lrow .n{font-family:var(--font-data);font-size:.8rem;color:var(--signal);padding-top:.15rem;
         font-variant-numeric:tabular-nums}
.lrow .who{font-size:.94rem;color:var(--text-muted)}
.lrow .who b{display:block;font-weight:600;color:var(--text);margin-bottom:.15rem}
.lrow .sys{font-size:.91rem;color:var(--text-muted);border-left:2px solid var(--primary);
           padding-left:var(--s-4)}
.lrow.empty .who b{color:var(--text-faint);font-weight:400;font-style:italic}
.lrow.empty{background:color-mix(in srgb,var(--primary) 4%,transparent)}
.lfoot{margin-top:var(--s-5);max-width:64ch;color:var(--text-muted)}
.lfoot strong{color:var(--text)}
@media(max-width:760px){
  .lhead{display:none}
  .lrow{grid-template-columns:2rem 1fr;gap:var(--s-3)}
  .lrow .sys{grid-column:2;margin-top:var(--s-3)}
}

/* ── generic splits & cards ───────────────────────────────────────────── */
.split{display:grid;gap:var(--s-6);grid-template-columns:1fr;align-items:center}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr;gap:var(--s-8)}}
figure{margin:0}
figcaption{margin-top:var(--s-3);font-size:.84rem;color:var(--text-faint);max-width:48ch}
.pull{margin-top:var(--s-5);padding-left:var(--s-5);border-left:3px solid var(--signal)}
.pull p{font-family:var(--font-display);font-weight:600;font-size:clamp(1.2rem,2.5vw,1.65rem);
        line-height:1.25;letter-spacing:-.01em;color:var(--text);max-width:26ch}

.cards{display:grid;gap:var(--s-4);grid-template-columns:1fr;margin-top:var(--s-6)}
@media(min-width:680px){.cards{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.cards.c3{grid-template-columns:repeat(3,1fr)}}
.card{border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s-5);
      background:var(--surface-raised);display:grid;gap:.7rem;align-content:start;
      transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.card:hover{border-color:var(--border-strong);transform:translateY(-2px)}
.card .n{font-family:var(--font-data);font-size:.72rem;color:var(--signal);letter-spacing:.1em}
.card p{font-size:.93rem;color:var(--text-muted);max-width:none}
.card.wide{grid-column:1/-1}
.card.accent{background:var(--primary-soft);border-color:color-mix(in srgb,var(--primary) 30%,transparent)}

.panels{display:grid;gap:var(--s-4);grid-template-columns:1fr;margin-top:var(--s-6)}
@media(min-width:800px){.panels{grid-template-columns:1fr 1fr}}
.panel{border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s-5);
       background:var(--surface-raised)}
.panel.keep{background:var(--surface)}
.panel h3{margin-bottom:var(--s-3)}
.panel ul{list-style:none;display:grid;gap:.5rem;font-size:.94rem;color:var(--text-muted)}
.panel li{padding-left:1.1rem;position:relative;line-height:1.45}
.panel li::before{content:"";position:absolute;left:0;top:.7em;width:.45rem;height:1px;
                  background:var(--border-strong)}
.panel.take li::before{background:var(--primary);height:2px;top:.65em}

/* ── bilingual toggle ─────────────────────────────────────────────────── */
.lang{display:inline-flex;border:1px solid var(--border);border-radius:var(--r-full);
      padding:.2rem;background:var(--surface);margin-bottom:var(--s-5)}
.lang button{padding:.35rem .95rem;border-radius:var(--r-full);font-size:.88rem;font-weight:500;
             color:var(--text-muted);transition:all var(--dur) var(--ease)}
.lang button[aria-pressed="true"]{background:var(--surface-raised);color:var(--text);
                                  box-shadow:var(--shadow-1)}
.crewscreen{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;
            background:var(--surface-raised);max-width:22rem;box-shadow:var(--shadow-2)}
.crewscreen .bar{background:var(--primary);color:var(--on-primary);padding:.7rem var(--s-4);
                 font-family:var(--font-display);font-weight:600;font-size:.95rem}
.crewscreen .rows{display:grid}
.crewscreen .r{display:flex;justify-content:space-between;gap:var(--s-4);padding:.8rem var(--s-4);
               border-bottom:1px solid var(--border);font-size:.92rem}
.crewscreen .r:last-child{border-bottom:none}
.crewscreen .r span:last-child{font-family:var(--font-data);color:var(--text-muted);
                               font-variant-numeric:tabular-nums}
.crewscreen .big{background:var(--signal);color:var(--on-signal);text-align:center;
                 padding:.95rem;font-family:var(--font-display);font-weight:600}

/* ── honest block ─────────────────────────────────────────────────────── */
.honest{margin-top:var(--s-6);border:1px solid var(--border);border-left:3px solid var(--primary);
        border-radius:var(--r-lg);padding:var(--s-5);background:var(--surface);display:grid;
        gap:var(--s-3)}

/* ── faq ──────────────────────────────────────────────────────────────── */
.faq{margin-top:var(--s-6);border-top:1px solid var(--border)}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{list-style:none;cursor:pointer;padding:var(--s-4) 0;display:flex;
  justify-content:space-between;align-items:center;gap:var(--s-4);
  font-family:var(--font-display);font-weight:600;font-size:1.05rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:0 0 auto;width:.6rem;height:.6rem;
  border-right:1.5px solid var(--text-faint);border-bottom:1.5px solid var(--text-faint);
  transform:rotate(45deg);transition:transform var(--dur) var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .a{padding-bottom:var(--s-4);color:var(--text-muted);max-width:66ch}
.faq .a p+p{margin-top:var(--s-3)}

/* ── closing ──────────────────────────────────────────────────────────── */
.close{text-align:center}
.close h2{max-width:20ch;margin-inline:auto}
.close p{margin:var(--s-4) auto 0;color:var(--text-muted)}
.close .cta{margin-top:var(--s-6);justify-content:center}

/* ── footer ───────────────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--border);padding-block:var(--s-7) var(--s-5);background:var(--surface)}
.foot .cols{display:grid;gap:var(--s-6);grid-template-columns:1fr}
@media(min-width:700px){.foot .cols{grid-template-columns:1.4fr repeat(3,1fr)}}
.foot .col{display:grid;gap:.55rem;align-content:start}
.foot .col b{font-family:var(--font-data);font-size:.67rem;letter-spacing:.13em;
             text-transform:uppercase;color:var(--text-faint);font-weight:500}
.foot a{color:var(--text-muted);text-decoration:none;font-size:.92rem}
.foot a:hover{color:var(--text)}
.foot .about{max-width:30ch;font-size:.9rem;color:var(--text-muted)}
.foot .base{margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--border);
  display:flex;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;
  font-size:.84rem;color:var(--text-faint)}

/* ── motion: scroll reveal ────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(16px)}
.rv.in{opacity:1;transform:none;transition:opacity .55s var(--ease),transform .55s var(--ease)}
@media(prefers-reduced-motion:reduce){
  .rv,.turn{opacity:1!important;transform:none!important}
  .caret{animation:none}
}

@media(max-width:860px){
  .navlinks{display:none}
  .navlinks.open{display:flex;position:absolute;top:70px;left:0;right:0;flex-direction:column;
    align-items:stretch;background:var(--surface-raised);border-bottom:1px solid var(--border);
    padding:var(--s-4);gap:var(--s-2);box-shadow:var(--shadow-3)}
  .navlinks.open .mega{position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:none;padding:0 0 0 var(--s-3);width:auto;display:none}
  .navlinks.open .navitem[data-open="true"] .mega{display:grid}
  .navtoggle{display:block}
  section{padding-block:var(--s-7)}
}

/* ── full-bleed photographic band ─────────────────────────────────────── */
.band{position:relative;width:100vw;margin-left:50%;transform:translateX(-50%);
      padding-block:0;overflow:hidden;background:var(--n-950)}
.band img{width:100%;height:clamp(17rem,38vw,30rem);object-fit:cover;display:block}
.band figcaption{position:absolute;left:0;right:0;bottom:0;padding:var(--s-5);
  background:linear-gradient(to top,color-mix(in srgb,var(--n-950) 80%,transparent),transparent);
  color:var(--n-50);font-size:.9rem;max-width:none}
.band figcaption span{display:block;max-width:44ch;margin-inline:auto;
                      padding-inline:var(--s-5);text-align:center}
.tabshot{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);
         box-shadow:var(--shadow-2)}
.tabshot img{width:100%;display:block}
.tabshot figcaption{padding:var(--s-3) var(--s-4);background:var(--surface-raised);
                    font-size:.85rem;color:var(--text-muted);max-width:none;margin:0}