/* ============================================================
   MetricaTeam – metricateam.com
   Onest is licensed under the SIL Open Font License 1.1
   ============================================================ */

@font-face{font-family:'Onest';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/onest-latin-400-normal.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:'Onest';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/onest-latin-600-normal.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:'Onest';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/onest-latin-700-normal.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:'Onest';font-style:normal;font-weight:800;font-display:swap;
  src:url('/assets/fonts/onest-latin-800-normal.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:'Onest';font-style:normal;font-weight:900;font-display:swap;
  src:url('/assets/fonts/onest-latin-900-normal.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}


/* A metric-matched stand-in for Onest, one face per weight, used while Onest is still
   in flight. `font-display:swap` decides WHEN the real font arrives; it does nothing
   about the fact that the page was laid out in a different font until then, and that
   relaid-out page is the layout shift.
   The stack before this put 'Inter' and system-ui next in line, and both were wildcards:
   Inter is never served from here, so it only applied to visitors who happened to have
   it installed, and system-ui resolves to fonts as much as 14% wider than Onest.
   `size-adjust` scales the stand-in to Onest's width; the ascent/descent overrides give
   it Onest's em box (ascent 970, descent -305, lineGap 0, unitsPerEm 1000), so a line
   keeps its height across the swap. Arial and Roboto average widths differ by 0.22%, so
   one set of numbers covers Windows, macOS, iOS and Android alike.
   Measure the ratios against what this face actually draws, never against
   `font-family:Arial`: `local('Arial')` names one face, the Regular one, so 600-900 are
   drawn as synthetic bold and are narrower than real Arial Bold.
   tools/font-metrics/calibrate.mjs derives them. Weight 900 is the one deliberate
   departure from its output: the tool measures 110.42%, but the hero headline is 323.5px
   wide in Onest inside a 324px column at 360px, so at the measured ratio the stand-in
   wraps it to two lines where Onest keeps one - a 27px jump, CLS 0.154 at that width.
   Below 105.8% the opposite happens at 1280. Swept against real CLS across seven
   viewports and all three pages: 106.5-109.5% all land on 0.001, and 108% is the middle
   of that window. Re-run the sweep, not just the tool, if the headline copy changes. */
@font-face{font-family:'Onest Fallback';font-style:normal;font-weight:400;
  src:local('Arial'),local('Helvetica Neue'),local('Helvetica'),local('Roboto'),local('Liberation Sans'),local('Arimo');
  size-adjust:105.26%;ascent-override:92.15%;descent-override:28.97%;line-gap-override:0%;
  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:'Onest Fallback';font-style:normal;font-weight:600;
  src:local('Arial'),local('Helvetica Neue'),local('Helvetica'),local('Roboto'),local('Liberation Sans'),local('Arimo');
  size-adjust:106.88%;ascent-override:90.75%;descent-override:28.54%;line-gap-override:0%;
  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:'Onest Fallback';font-style:normal;font-weight:700;
  src:local('Arial'),local('Helvetica Neue'),local('Helvetica'),local('Roboto'),local('Liberation Sans'),local('Arimo');
  size-adjust:107.49%;ascent-override:90.24%;descent-override:28.37%;line-gap-override:0%;
  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:'Onest Fallback';font-style:normal;font-weight:800;
  src:local('Arial'),local('Helvetica Neue'),local('Helvetica'),local('Roboto'),local('Liberation Sans'),local('Arimo');
  size-adjust:109.02%;ascent-override:88.98%;descent-override:27.98%;line-gap-override:0%;
  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:'Onest Fallback';font-style:normal;font-weight:900;
  src:local('Arial'),local('Helvetica Neue'),local('Helvetica'),local('Roboto'),local('Liberation Sans'),local('Arimo');
  size-adjust:108.00%;ascent-override:89.81%;descent-override:28.24%;line-gap-override:0%;
  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}

:root{--indigo:#1F63EA;--golub:#6FA8FF;--ink:#232835;--sub:#8C929C;--border:#E3E6EC;--tile:#EFEFF1;
--green:#1E9E6A;--orange:#F08A24;--red:#E8402C;--plan:#CFD6E0;--line:#AFB9CC;--grid:#C9D0DC}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Onest','Onest Fallback','Inter',system-ui,Arial,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
/* Scoped to the landing's own main: a bare `main` selector also caught /guide and
   /privacy, turning them into scroll containers that clipped the card shadow. */
#main{height:100vh;overflow-y:scroll;scroll-snap-type:y mandatory;scroll-behavior:smooth}
html.mt-lock #main{overflow:hidden}
.scr{min-height:100vh;scroll-snap-align:start;background:linear-gradient(160deg,#E5EEFB,#F4F8FE);
     display:flex;align-items:center;padding:80px 76px 48px;position:relative}
.wrap{display:flex;align-items:center;gap:32px;width:100%;max-width:1040px;margin:0 auto}
.side{flex:0 0 50%}
.viz{flex:1;display:flex;align-items:center;justify-content:center}
h1,.h1{font-size:clamp(28px,3.6vw,40px);font-weight:900;letter-spacing:-.02em;line-height:1.12}
.blue{color:var(--indigo)}
.lead{font-size:clamp(15px,1.5vw,17px);line-height:1.55;color:#54607A;margin-top:16px;max-width:520px}
.p8b{margin-top:12px}
.cta{display:inline-flex;align-items:center;gap:8px;margin-top:24px;background:var(--indigo);color:#fff;font-weight:800;
     font-size:15px;font-family:inherit;border:none;border-radius:12px;padding:14px 24px;cursor:pointer;text-decoration:none;box-shadow:0 10px 24px rgba(31,99,234,.28)}
.cta:focus-visible,.ctas:focus-visible,.tf:focus-visible,.dots [data-sec]:focus-visible,.foot a:focus-visible{outline:3px solid var(--indigo);outline-offset:3px}

/* header (hero only) */
.hdr{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:20px 64px;z-index:25}
.lg{display:flex;align-items:center;gap:9px;font-weight:800;font-size:17px;color:inherit;text-decoration:none}
a.lg:focus-visible{outline:3px solid var(--indigo);outline-offset:4px;border-radius:8px}
.lg .wm{font-weight:900;letter-spacing:-.01em}
.ctas{background:var(--indigo);color:#fff;font-weight:800;font-size:14px;font-family:inherit;border:none;border-radius:10px;padding:10px 18px;cursor:pointer;
      box-shadow:0 8px 20px rgba(31,99,234,.24);transition:opacity .25s ease,transform .25s ease,visibility .25s}
.ctas.hide{opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none}

/* dots nav */
.dots{position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:30;background:#fff;border:1px solid var(--border);
      border-radius:999px;padding:12px 8px;display:flex;flex-direction:column;align-items:center;gap:11px;box-shadow:0 8px 24px rgba(20,40,80,.10)}
.dots .up{color:var(--indigo);font-size:14px;cursor:pointer;line-height:1;margin-bottom:2px;background:none;border:none;font-family:inherit;padding:0}
.dots [data-sec]{position:relative;width:9px;height:9px;border-radius:50%;background:var(--golub);cursor:pointer;transition:transform .2s,background .2s;border:none;padding:0;display:block}
.dots [data-sec].act{background:var(--indigo);transform:scale(1.3)}
.dots [data-sec]::after{content:attr(data-l);position:absolute;right:20px;top:50%;transform:translateY(-50%);white-space:nowrap;
     background:#fff;border:1px solid var(--border);color:var(--ink);font-size:12px;font-weight:600;padding:4px 9px;border-radius:8px;
     box-shadow:0 6px 16px rgba(20,40,80,.10);opacity:0;pointer-events:none;transition:opacity .15s}
.dots [data-sec]:hover::after,.dots [data-sec]:focus-visible::after{opacity:1}

/* reveal helpers */
.h{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.h.on{opacity:1;transform:none}
.card{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 12px 30px rgba(20,40,80,.08)}
.scaps{font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--sub);font-weight:800}

/* ---------- HERO card ---------- */
/* Three cards stacked: the product is not about one metric. The two behind show only
   their edges, carry nothing and take no clicks. */
/* --peek is the sliver each card behind shows. Both offsets and the stack's own top
   padding come from it, so the two bands stay equal at every breakpoint. All three cards
   carry the same border: without it the front card's shadow washes the upper sliver out
   and the two read as different heights. */
.hstack{position:relative;width:100%;max-width:430px;--peek:14px;padding-top:calc(var(--peek)*2)}
.hback{position:absolute;left:0;right:0;height:70px;border-radius:20px;background:#fff;pointer-events:none;
       border:1px solid var(--border);box-shadow:0 6px 14px rgba(20,40,80,.05)}
.hback1{top:var(--peek);margin:0 15px;z-index:1}
.hback2{top:0;margin:0 30px;z-index:0}
.hcard{position:relative;z-index:2;width:100%;background:#fff;border:1px solid var(--border);border-radius:20px;
       box-shadow:0 16px 40px rgba(20,40,80,.10);padding:22px 24px}
.hhead{display:flex;align-items:center;gap:10px;min-height:30px;margin-bottom:12px}
.hhead .ht{font-size:20px;font-weight:900}
.hpill{margin-left:auto;font-size:12px;font-weight:700;background:#E4F5EE;color:#14654A;border-radius:999px;padding:5px 12px;transition:opacity .4s}
.hbig{display:flex;align-items:baseline;gap:10px;min-height:38px;flex-wrap:wrap}
.hbig .v{font-size:clamp(24px,2.5vw,32px);font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap}
.hbig .p{font-size:13px;color:var(--sub)}
.hshow{transition:opacity .35s ease}
.hbar{height:7px;border-radius:5px;background:#EEF1F5;overflow:hidden;margin:11px 0 18px}
.hbar>i{display:block;height:100%;width:100%;background:var(--indigo);border-radius:5px}
.hrow{display:flex;align-items:center;gap:11px;margin-bottom:11px}
.hrow .ed{width:9px;height:9px;border-radius:50%;background:var(--sub);transition:opacity .3s;flex:none}
.hrow .ed.green{background:var(--green)}.hrow .ed.orange{background:var(--orange)}.hrow .ed.red{background:var(--red)}
.hrow .nm{font-weight:700;font-size:13.5px;width:60px;flex:none}
.hrow .pf{font-size:12.5px;color:var(--sub);flex:1;text-align:center;font-variant-numeric:tabular-nums}.hrow .pf b{color:var(--ink);font-weight:800}
.hrow .dv{font-size:12px;font-weight:800;width:52px;text-align:right;transition:opacity .3s}
.hrow .dv.green{color:var(--green)}.hrow .dv.orange{color:var(--orange)}.hrow .dv.red{color:var(--red)}
.haic{margin-top:14px;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 10px 24px rgba(20,40,80,.08);
      padding:12px 14px;display:flex;gap:10px;align-items:flex-start;transition:opacity .5s ease}
.haic .ic{width:28px;height:28px;border-radius:50%;background:var(--indigo);color:#fff;font-weight:800;font-size:11px;display:flex;align-items:center;justify-content:center;flex:none}
.haic .tx{font-size:12px;line-height:1.45;color:#2B3B57}.haic .tx b{color:var(--ink);font-weight:800}

/* ---------- s2 chaos ---------- */
/* --cs scales the chips, --x1/--x3 spread the outer columns: the EN labels are
   longer than the RU ones, so both have to shrink on a narrow stage. */
.stg2{position:relative;width:100%;max-width:460px;aspect-ratio:480/400;--cs:1;--x1:18%;--x3:82%}
.glab{position:absolute;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--sub);font-weight:800;transition:opacity .5s}
svg.mesh{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1}
svg.mesh path{stroke:var(--line);stroke-width:1.6;fill:none;stroke-dasharray:5 6;stroke-linecap:round}
.chip{position:absolute;transform:translate(-50%,-50%);z-index:2;background:#fff;border:1px solid var(--border);border-radius:13px;
      padding:calc(8px*var(--cs)) calc(12px*var(--cs)) calc(8px*var(--cs)) calc(8px*var(--cs));display:flex;align-items:center;
      gap:calc(8px*var(--cs));font-size:calc(12.5px*var(--cs));font-weight:700;white-space:nowrap;box-shadow:0 8px 20px rgba(20,40,80,.09);transition:opacity .5s,transform .5s cubic-bezier(.2,.8,.2,1)}
.chip[data-top]{top:14%}.chip[data-bot]{top:86%}
.chip[data-i="1"]{left:var(--x1)}.chip[data-i="2"]{left:50%}.chip[data-i="3"]{left:var(--x3)}
.chip .ic{width:calc(23px*var(--cs));height:calc(23px*var(--cs));border-radius:7px;background:var(--indigo);flex:none;display:flex;align-items:center;justify-content:center}
.chip .ic svg{width:calc(13px*var(--cs));height:calc(13px*var(--cs))}
.qc{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:66px;height:66px;border-radius:50%;background:#fff;
    box-shadow:0 12px 30px rgba(20,40,80,.16);display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:900;color:var(--sub);transition:opacity .5s,transform .55s cubic-bezier(.2,.9,.2,1)}

/* ---------- s3 ritual ---------- */
.flow{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.rcard{width:100%;max-width:300px;background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 10px 26px rgba(20,40,80,.08);
       padding:13px 16px;display:flex;flex-direction:row;align-items:center;gap:13px;text-align:left;position:relative;transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.rcard .ic{width:42px;height:42px;border-radius:12px;background:var(--indigo);display:flex;align-items:center;justify-content:center;flex:none}
.rcard .ic svg{width:22px;height:22px}.rcard .t{font-size:13.5px;font-weight:700;line-height:1.25}
.rcard.lit{box-shadow:0 0 0 2px rgba(31,99,234,.4),0 10px 26px rgba(20,40,80,.08)}
.rarr{color:#9AA6BC;flex:none;display:flex;transform:rotate(90deg);transition:opacity .5s ease}.rarr svg{width:22px;height:14px}

/* ---------- s4 value ---------- */
.grid4{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:420px}
.cell{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 10px 26px rgba(20,40,80,.07);padding:13px 14px;min-height:150px;
      display:flex;flex-direction:column;transition:opacity .5s,transform .5s cubic-bezier(.2,.8,.2,1)}
.cell .cp{font-size:12px;font-weight:800;margin-bottom:10px}.cell .bd{flex:1;display:flex;flex-direction:column;justify-content:center}
.rv{transition:opacity .4s,transform .4s}
.cComp{border:2px solid var(--border);border-radius:11px;padding:8px}.cDept{background:var(--tile);border-radius:9px;padding:7px;margin-top:6px}
.cEmps{display:flex;flex-direction:column;gap:5px;margin-top:7px}
.epill{text-align:left;background:#E4EEFD;border:1px solid #C9DDFB;color:var(--indigo);border-radius:8px;padding:4px 9px;font-size:10.5px;font-weight:700}
.grow{display:flex;align-items:center;gap:7px;margin-top:9px}.grow:first-child{margin-top:0}
.gdot{width:8px;height:8px;border-radius:50%;flex:none}.gdot.green{background:var(--green)}.gdot.orange{background:var(--orange)}.gdot.red{background:var(--red)}
.gl{font-size:10.5px;font-weight:700;color:var(--sub);width:38px}
.trk{height:8px;border-radius:5px;background:#EEF1F5;flex:1;overflow:hidden}.trk i{display:block;height:100%;border-radius:5px;background:var(--indigo);transition:width .7s}
.gb{font-size:10.5px;font-weight:800;width:38px;text-align:right;transition:opacity .4s}.gb.green{color:var(--green)}.gb.orange{color:var(--orange)}.gb.red{color:var(--red)}
.bars{display:flex;align-items:flex-end;justify-content:center;gap:14px;height:52px}.bgrp{display:flex;gap:3px;align-items:flex-end}
.bb{width:11px;border-radius:3px 3px 0 0;transition:height .5s}.bb.plan{background:var(--plan)}.bb.fact{background:var(--indigo)}.bb.fore{background:var(--orange)}
.wl{display:flex;justify-content:center;gap:28px;margin-top:6px;font-size:10px;color:var(--sub);font-weight:700}
.leg{display:flex;gap:10px;justify-content:center;margin-top:8px;font-size:9px;color:var(--sub);font-weight:600}
.leg i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:3px;vertical-align:-1px}
.leg i.plan{background:var(--plan)}.leg i.fact{background:var(--indigo)}.leg i.fore{background:var(--orange)}
.ddots{display:flex;gap:8px;margin-bottom:11px}.ddots .d{width:19px;height:19px;border-radius:50%;background:var(--tile);transition:background .3s}.ddots .d.on{background:var(--indigo)}
.dtext{font-size:13.5px;font-weight:700;color:var(--sub)}.dtext b{font-weight:900}.dsub{font-size:11.5px;color:var(--red);font-weight:700;margin-top:6px}

/* ---------- s5 timeline ---------- */
.tl{position:relative;display:flex;flex-direction:column;gap:12px;width:100%;max-width:420px}
.axis{position:absolute;left:70px;top:12px;bottom:12px;width:2px;background:var(--border);transform-origin:top;transition:transform 1.4s ease}
.titem{display:flex;align-items:center;gap:13px;position:relative;transition:opacity .5s,transform .5s cubic-bezier(.2,.8,.2,1)}
.tm{width:52px;text-align:right;font-size:10.5px;font-weight:800;color:var(--indigo);flex:none;line-height:1.25}
.tdot{width:13px;height:13px;border-radius:50%;background:#fff;border:3px solid var(--golub);flex:none;z-index:1}.tdot.acc{border-color:var(--indigo);background:var(--indigo)}
.tev{flex:1;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 20px rgba(20,40,80,.07);padding:9px 12px;display:flex;align-items:center;gap:10px}
.tev.acc{border-color:var(--indigo);box-shadow:0 0 0 2px rgba(31,99,234,.18),0 8px 20px rgba(20,40,80,.07)}
.tic{width:28px;height:28px;border-radius:8px;background:var(--indigo);flex:none;display:flex;align-items:center;justify-content:center}.tic svg{width:15px;height:15px}.tic.ai{font-size:9px;font-weight:800;color:#fff}
.tx .t{font-size:12.5px;font-weight:700;line-height:1.2}.tx .s{font-size:10.5px;color:var(--sub);margin-top:2px}.tx .s.g{color:var(--green);font-weight:700}.tx .s.r{color:var(--red);font-weight:700}

/* ---------- s6 not-tracker ---------- */
.row6{display:flex;align-items:stretch;gap:12px;flex-wrap:wrap;justify-content:center;width:100%;max-width:430px}
.tile{position:relative;flex:1 1 120px;min-width:118px;min-height:150px;border-radius:16px;padding:13px;border:1px solid var(--border);
      transition:opacity .5s,transform .5s cubic-bezier(.2,.8,.2,1)}
.tile.wrong{background:#F4F6FA;opacity:.72}
.tile.ours{background:#fff;border:2px solid var(--indigo);box-shadow:0 14px 34px rgba(31,99,234,.16)}
.tcap{font-size:11.5px;font-weight:800;color:var(--sub);margin-bottom:11px}.tile.ours .tcap{color:var(--ink)}
.badge{position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;color:#fff;transition:opacity .35s,transform .4s cubic-bezier(.2,.9,.2,1)}
.badge.x{background:var(--red)}.badge.ok{background:var(--indigo)}
.kan{display:flex;border-top:1.5px solid var(--grid);padding-top:8px}.kan .col{flex:1;padding:0 4px;display:flex;flex-direction:column;gap:5px}.kan .col+.col{border-left:1.5px solid var(--grid)}.kan .cc{height:9px;background:#D7DCE5;border-radius:2px}
.gan{position:relative;height:70px;margin-top:2px}.gan .vl{position:absolute;top:0;bottom:0;width:1.5px;background:var(--grid)}.gan .bar{position:absolute;height:10px;background:#D7DCE5;border-radius:5px}
.res .lab{font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--sub);font-weight:800}.res .val{font-size:17px;font-weight:900;margin-top:4px}.res .pf{font-size:10.5px;color:var(--sub);margin-top:2px}.res .st{display:flex;align-items:center;gap:6px;margin-top:9px;font-size:11px;font-weight:800;color:var(--green)}.res .st i{width:8px;height:8px;border-radius:50%;background:var(--green)}

/* ---------- s7 AI ---------- */
.aicard{width:100%;max-width:400px;background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:0 18px 44px rgba(20,40,80,.12);padding:20px 22px}
.ahead{display:flex;align-items:center;gap:11px;margin-bottom:15px}.ahead .ic{width:30px;height:30px;border-radius:50%;background:var(--indigo);color:#fff;font-weight:800;font-size:11px;display:flex;align-items:center;justify-content:center;flex:none}.ahead .h2{font-weight:900;font-size:15px}
.apro{margin-left:auto;font-size:10px;font-weight:800;color:var(--indigo);background:#EAF1FD;border-radius:999px;padding:4px 10px;transform-origin:right center;transition:opacity .4s,transform .45s cubic-bezier(.2,.9,.2,1)}
.ar{display:flex;gap:10px;margin-bottom:10px;transition:opacity .45s,transform .45s cubic-bezier(.2,.8,.2,1)}.ar:last-child{margin-bottom:0}
.ar .n{width:19px;height:19px;border-radius:6px;background:#EAF1FD;color:var(--indigo);font-size:10.5px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none;margin-top:1px}
.ar .tx{font-size:12.5px;line-height:1.45;color:#2B3B57}
.g{color:var(--green);font-weight:700}.o{color:var(--orange);font-weight:700}.rd{color:var(--red);font-weight:700}

/* ---------- s8 who it's for ---------- */
.stg8{position:relative;width:100%;max-width:460px;aspect-ratio:560/440}
svg.conv{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1}
svg.conv path{stroke:var(--line);stroke-width:1.6;fill:none;stroke-dasharray:5 6;stroke-linecap:round}
.onode{position:absolute;transform:translate(-50%,-50%);z-index:2;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 8px 20px rgba(20,40,80,.08);padding:10px 11px;text-align:center;transition:opacity .5s}
.onode .lb{font-size:10.5px;font-weight:800;color:var(--sub);margin-bottom:6px}.onode svg{display:block;margin:0 auto}
.hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:160px;background:#fff;border:2px solid var(--indigo);border-radius:16px;box-shadow:0 16px 38px rgba(31,99,234,.16);padding:13px 15px;transition:opacity .5s,transform .5s cubic-bezier(.2,.9,.2,1)}
.hub .cap{font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--sub);font-weight:800;margin-bottom:9px}
.crow{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;margin-bottom:7px}.crow:last-child{margin-bottom:0}.cd{width:9px;height:9px;border-radius:50%;flex:none}.cd.green{background:var(--green)}.cd.orange{background:var(--orange)}.cd.red{background:var(--red)}


/* ---------- s9 agreement ---------- */
/* The card is the hero's, one screen on: same week, same three people, same figures -
   but here you see where the numbers came from and that words come with them. */
.agcard{width:100%;max-width:430px;background:#fff;border:1px solid var(--border);border-radius:20px;
        box-shadow:0 16px 40px rgba(20,40,80,.10);padding:20px 22px}
.aghead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.agt{font-weight:900;font-size:15px}

/* A two-state label. Both readings sit in the same grid cell, so the box is as wide as
   the longer of them and swapping between them cannot move anything. `.off` is the
   before state; the final state is the default, which is what the static HTML shows. */
.sw{display:inline-grid;align-items:center}
.sw>i{grid-area:1/1;font-style:normal;transition:opacity .3s ease}
.sw>.s-e{opacity:0}
.sw.off>.s-e,.agcap.off .sw>.s-e{opacity:1}
.sw.off>.s-f,.agcap.off .sw>.s-f{opacity:0}

.agpill{justify-items:center;font-size:11px;font-weight:800;padding:5px 11px;border-radius:999px;
        background:#E6F5EE;color:var(--green);transition:background .3s ease,color .3s ease}
.agpill.off{background:var(--tile);color:var(--sub)}
.agbig{display:flex;align-items:baseline;gap:10px;min-height:36px;flex-wrap:wrap}
.agbig .v{font-size:clamp(23px,2.4vw,30px);font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap}
.agbig .p{font-size:13px;color:var(--sub)}
.agbar{height:7px;border-radius:5px;background:#EEF1F5;overflow:hidden;margin:10px 0 13px}
.agbar>i{display:block;height:100%;width:100%;background:var(--indigo);border-radius:5px;transition:width .9s cubic-bezier(.4,0,.2,1)}

.agrow{padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid #F1F3F7}
.agrow:last-of-type{border-bottom:0;padding-bottom:0;margin-bottom:0}
.agmain{display:flex;align-items:center;gap:10px}
.agmain .ed{width:9px;height:9px;border-radius:50%;background:var(--sub);transition:opacity .3s;flex:none}
.agmain .ed.green{background:var(--green)}.agmain .ed.orange{background:var(--orange)}.agmain .ed.red{background:var(--red)}
.agmain .nm{font-weight:700;font-size:13.5px;width:50px;flex:none}
.agmain .pf{font-size:12.5px;color:var(--sub);flex:1;text-align:center;font-variant-numeric:tabular-nums}
.agmain .pf b{color:var(--ink);font-weight:800}
.agmain .dv{font-size:12px;font-weight:800;width:50px;text-align:right;transition:opacity .3s}
.agmain .dv.green{color:var(--green)}.agmain .dv.orange{color:var(--orange)}.agmain .dv.red{color:var(--red)}

/* The comment sits in the flow from the first frame and only fades, so the row reserves
   exactly the height the line needs however it wraps - nothing to guess or hard-code. */
.agnote{margin:4px 0 0 19px;font-size:11.5px;line-height:1.4;color:var(--sub)}
.agnote span{transition:opacity .4s ease}
.agrow.off .agnote span{opacity:0}

.agcap{display:flex;align-items:center;gap:8px;margin-top:11px;font-size:12px;font-weight:800;
       color:var(--green);transition:color .3s ease}
.agcap.off{color:var(--orange)}
.agci{width:19px;height:19px;border-radius:50%;flex:none;background:#E6F5EE;color:var(--green);
      justify-items:center;font-size:11px;font-weight:900;transition:background .3s ease,color .3s ease}
.agcap.off .agci{background:#FDF0E1;color:var(--orange)}
/* Below 360px the landing is already over the viewport on several screens, so this one
   at least gives back what the "How to set it up" link under the subtitle costs it -
   32px - rather than adding to the pile. Sections are min-height:100vh, so tightening
   the card changes nothing at 360 and up, where it already fits exactly. */
@media(max-width:360px){
  .agcard{padding:16px 18px}
  .aghead{margin-bottom:8px}
  .agbar{margin:8px 0 10px}
  .agrow{padding-bottom:6px;margin-bottom:6px}
  .agnote{margin-top:3px}
  .agcap{margin-top:8px}
  #s9 .lead-link{margin-top:10px}
}

/* ---------- s10 no bureaucracy ---------- */
.row9{display:flex;gap:13px;flex-wrap:wrap;justify-content:center;align-items:stretch;width:100%;max-width:440px}
.pcard{flex:1 1 150px;min-width:150px;background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 10px 26px rgba(20,40,80,.07);padding:15px 14px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;transition:opacity .5s,transform .5s cubic-bezier(.2,.8,.2,1)}
.pcap{font-size:13.5px;font-weight:800}.psub{font-size:11px;color:var(--sub);line-height:1.4;margin-top:auto}
.hand{transform-box:view-box;transform-origin:40px 40px;transform:rotate(30deg);transition:transform .85s cubic-bezier(.2,.85,.25,1)}
.wk{display:flex;align-items:center;gap:11px}.wchip{background:var(--tile);border-radius:9px;padding:8px 11px;min-width:74px}.wchip .w{font-size:8.5px;font-weight:800;color:var(--sub);text-transform:uppercase}.wchip .pn{font-size:12px;font-weight:900;color:var(--indigo);margin-top:3px}
.wchip .pn.copy{transition:opacity .5s .2s,transform .5s .2s}
.chs{display:flex;gap:8px}.chi{width:34px;height:34px;border-radius:9px;background:var(--indigo);display:flex;align-items:center;justify-content:center}.chi svg{width:18px;height:18px}

/* ---------- full-width blocks ---------- */
.full{flex-direction:column;justify-content:center;text-align:center}
.full h1,.full .h1{max-width:900px;margin:0 auto}
.tariffs{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.tf{background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:0 12px 30px rgba(20,40,80,.08);padding:24px 22px;width:240px;text-align:left;cursor:pointer;transition:border-color .2s,box-shadow .2s;font-family:inherit;color:inherit}
.tf:hover{border-color:#C9DDFB}
.tf.active{border:2px solid var(--indigo);box-shadow:0 14px 34px rgba(31,99,234,.16)}
.tf .nm{font-size:16px;font-weight:800}.tf .pr{font-size:26px;font-weight:900;margin:8px 0 2px}.tf .pnote{font-size:12px;color:var(--sub);margin-bottom:12px}
.tf .ds{font-size:12.5px;color:var(--sub);line-height:1.45}
.micro{font-size:12.5px;color:var(--sub);margin-top:18px;max-width:640px;margin-left:auto;margin-right:auto}
.faq{display:grid;grid-template-columns:1fr 1fr;gap:16px 28px;max-width:900px;margin:30px auto 0;text-align:left}
.faq .q{font-size:14.5px;font-weight:800;margin-bottom:5px}.faq .a{font-size:13px;color:#54607A;line-height:1.5}
@media(min-width:861px){.faq>div:last-child{grid-column:1/-1;justify-self:center;width:calc(50% - 14px);text-align:center}}
.foot{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:20px 64px;font-size:12.5px;color:var(--sub)}
.foot a{color:var(--sub);text-decoration:none;margin-left:16px}
.foot a:hover{color:var(--ink)}

/* mobile top bar */
.mtop{display:none;position:fixed;top:0;left:0;right:0;z-index:41;padding:9px 16px;justify-content:space-between;align-items:center;background:rgba(244,248,254,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--border)}
.mtop-r{display:flex;align-items:center;gap:9px}
.burger{display:none;width:40px;height:40px;flex:none;border-radius:10px;background:#fff;border:1px solid var(--border);box-shadow:0 4px 12px rgba(20,40,80,.10);
        cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4px;padding:0}
.burger span{display:block;width:17px;height:2px;border-radius:2px;background:var(--ink);transition:transform .22s,opacity .18s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.burger:focus-visible{outline:3px solid var(--indigo);outline-offset:2px}
.mobmenu{display:none;position:fixed;inset:0;z-index:40;background:rgba(244,248,254,.98);flex-direction:column;align-items:center;
         justify-content:flex-start;gap:2px;padding:74px 20px 28px;overflow-y:auto}
.mobmenu[hidden]{display:none}
.mobmenu.open{display:flex}
.mobmenu button{font-size:17px;font-weight:700;color:var(--ink);background:none;border:none;font-family:inherit;padding:9px 20px;cursor:pointer}
.mobmenu button:focus-visible{outline:3px solid var(--indigo);outline-offset:2px;border-radius:8px}
html.mt-menu-open #main{overflow:hidden}

/* ============ waitlist popup ============ */
.mt-ov{position:fixed;inset:0;z-index:100;background:rgba(20,32,56,.46);display:flex;align-items:center;justify-content:center;padding:24px}
.mt-ov[hidden]{display:none}
.mt-dlg:focus{outline:none}
.mt-dlg{position:relative;width:100%;max-width:420px;background:#fff;border-radius:20px;box-shadow:0 28px 70px rgba(20,40,80,.28);padding:28px 26px 22px;max-height:calc(100vh - 48px);overflow-y:auto}
.mt-x{position:absolute;top:10px;right:10px;width:44px;height:44px;border:none;background:transparent;border-radius:12px;cursor:pointer;color:var(--sub);font-size:28px;line-height:1;font-family:inherit;z-index:3}
.mt-x:hover{background:var(--tile);color:var(--ink)}
.mt-x:focus-visible{outline:3px solid var(--indigo);outline-offset:2px}
.mt-h{font-size:21px;font-weight:900;letter-spacing:-.01em;padding-right:44px}
.mt-p{font-size:13.5px;line-height:1.5;color:#54607A;margin-top:9px}
.mt-f{margin-top:18px;display:flex;flex-direction:column;gap:11px}
.mt-lb{font-size:12px;font-weight:800;color:var(--sub);display:block;margin-bottom:5px}
.mt-in{width:100%;font-family:inherit;font-size:16px;font-weight:500;color:var(--ink);background:#fff;border:1px solid var(--border);border-radius:11px;padding:12px 14px}
.mt-in:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px rgba(31,99,234,.16)}
.mt-in[aria-invalid="true"]{border-color:var(--red)}
.mt-err{font-size:12px;font-weight:700;color:var(--red);margin-top:6px}
.mt-err[hidden]{display:none}
.mt-sub{width:100%;justify-content:center;margin-top:4px}
.mt-sub[disabled]{opacity:.6;cursor:default}
.mt-note{font-size:11px;line-height:1.45;color:var(--sub);margin-top:12px}
.mt-note a{color:var(--indigo);text-decoration:none}.mt-note a:hover{text-decoration:underline}
.mt-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0}
.mt-cv{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.mt-ok{text-align:center}
.mt-ok .mt-p{margin-left:auto;margin-right:auto;max-width:320px}
.mt-ok .cta{margin-top:20px}
/* Two actions on the "already on the list" screen. Stacked rather than side by side:
   "Use a different email" does not fit beside Close in a 420px dialog without either
   wrapping or shrinking below a comfortable tap target. */
.mt-acts{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.mt-ok .mt-acts .cta,.mt-ok .mt-acts .cta2{margin-top:0;width:100%;justify-content:center}


/* ---------- document pages (privacy) ---------- */
.page{background:linear-gradient(160deg,#E5EEFB,#F4F8FE);min-height:100vh;display:flex;flex-direction:column}
.page-hd{padding:20px 24px;max-width:760px;width:100%;margin:0 auto}
.page-hd .lg{text-decoration:none;color:inherit}
.doc{flex:1;max-width:760px;width:100%;margin:0 auto;padding:18px 24px 8px}
.doc h1{font-size:clamp(26px,4vw,34px);margin-bottom:4px}
.doc h3{font-size:15px;font-weight:800;margin:24px 0 6px}
.doc p{font-size:15px;line-height:1.6;color:#54607A;max-width:62ch}
.doc .eff{font-size:13px;font-weight:700;color:var(--sub)}
.doc a{color:var(--indigo)}
.doc .back{margin-top:34px;font-weight:700}
.doc .back a{text-decoration:none}
.page-ft{max-width:760px;width:100%;margin:0 auto;padding:28px 24px 32px;display:flex;justify-content:space-between;
         gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--sub)}
.page-ft a{color:var(--sub);text-decoration:none;margin-left:16px}
.page-ft a:hover{color:var(--ink)}
@media(max-width:860px){.page-ft{flex-direction:column;align-items:center;text-align:center;gap:16px;padding:24px}
  .page-ft span:first-child{padding-bottom:12px;border-bottom:1px solid rgba(140,146,156,.45)}
  .page-ft span:last-child{display:flex;flex-direction:column;align-items:center;gap:12px}
  .page-ft a{display:block;margin:0}}

/* ---------- 404 ---------- */
.nf{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:40px 24px;
    background:linear-gradient(160deg,#E5EEFB,#F4F8FE)}
.nf .code{font-size:clamp(56px,12vw,104px);font-weight:900;color:var(--indigo);letter-spacing:-.04em;line-height:1}

@media(min-width:861px) and (max-width:1120px){.side{flex:0 0 44%}.wrap{gap:22px}.scr{padding-left:44px;padding-right:60px}.dots{right:12px}}
@media(max-width:860px){
  .dots{display:none}.mtop{display:flex}.hdr{display:none}.burger{display:flex}
  .ctas{padding:10px 14px;font-size:13.5px}
  .scr{padding:72px 22px 44px}.wrap{flex-direction:column;gap:26px}.side{flex:none;width:100%;text-align:center}.viz{width:100%}.lead{margin-left:auto;margin-right:auto}
  /* On a phone or tablet 100vh is the viewport with the browser bars hidden, so a
     footer pinned to bottom:0 sits underneath them. 100vh - 100dvh is exactly how
     much chrome is overlapping right now, so this lifts the footer clear of it and
     leaves 20px of air; where dvh is unsupported the declaration is dropped and
     bottom:0 stands. Section padding is untouched, so nothing above the footer moves. */
  .foot{position:absolute;bottom:0;left:0;right:0;flex-direction:column;align-items:center;text-align:center;gap:16px;padding:24px}
  .foot{bottom:calc(100vh - 100dvh + 20px)}.foot span:last-child{display:flex;flex-direction:column;align-items:center;gap:12px}.foot a{display:block;margin:0}.foot span:first-child{padding-bottom:12px;border-bottom:1px solid rgba(140,146,156,.45)}
  #s8 .p8b{margin-top:0}
  #s13{padding-bottom:170px}
  #s11,#s12{align-items:flex-start}
  .hstack,.stg2,.grid4,.tl,.row6,.aicard,.stg8,.row9{width:min(440px,92vw)}
  .stg2{--cs:.72;--x1:16%;--x3:84%}
  .stg8{aspect-ratio:560/460}.faq{grid-template-columns:1fr}
  /* Centred rather than a bottom sheet: the short success and "already on the list"
     states are only a few lines tall and looked stranded at the bottom edge. */
  .mt-ov{padding:12px;align-items:center}
  .mt-dlg{max-width:none;border-radius:20px;max-height:calc(100vh - 24px);padding-top:26px}

  /* Auto-plan needs the room, the clock does not */
  .pcard{min-width:0}
  .row9 .p1{flex:0 0 122px}
  .row9 .p2{flex:1 1 0}
  .row9 .p3{flex:1 1 100%}
  .wk{gap:8px}
  .wchip{min-width:0;padding:7px 9px}

  /* Solo and Team side by side, Pro across the bottom, so pricing fits one screen */
  #s11{padding-top:58px;padding-bottom:34px}
  #s11 .wrap{gap:12px}
  #s11 .cta{margin-top:16px}
  #s11 .micro{margin-top:12px}
  .tariffs{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:10px;width:100%;margin-top:16px}
  .tf{width:auto;max-width:none;flex:1 1 calc(50% - 5px);min-width:0;padding:14px 13px}
  .tf:last-child{flex:1 1 100%}
  .tf .nm{font-size:15px}
  .tf .pr{font-size:22px;margin:4px 0 1px}
  .tf .pnote{margin-bottom:7px}
  .tf .ds{font-size:12px}

  /* Questions sit closer to their heading */
  #s12 .wrap{gap:8px}
  .faq{margin-top:14px;gap:14px}

  #s13{padding-top:52px;padding-bottom:150px}
}

/* A short screen plus a tall browser bar leaves too little room for a footer stacked
   into four lines, and it starts to reach the button above it. Laying the links out in
   a row there roughly halves its height. */
/* Under ~700px tall several sections were taller than the viewport, and with
   scroll-snap: mandatory every overflowing pixel becomes an extra snap step - which is
   what showed up as a stray scroll after the last screen. Everything here only tightens
   spacing so each section fits one screen again. */
@media(max-width:860px) and (max-height:700px){
  .scr{padding:58px 18px 30px}
  .wrap{gap:14px}
  h1,.h1{font-size:clamp(24px,6.4vw,30px)}
  .lead{margin-top:10px;font-size:14px;line-height:1.45}
  .p8b{margin-top:8px}
  .hstack{--peek:10px}
  .hcard{padding:16px 18px}
  .hhead{margin-bottom:8px}.hbar{margin:9px 0 13px}.hrow{margin-bottom:8px}
  .haic{margin-top:10px;padding:10px 12px}
  .grid4{gap:9px}.cell{min-height:126px;padding:10px 11px}
  .tl{gap:8px}.tev{padding:7px 10px}
  .row6{gap:9px}.tile{min-height:132px;padding:11px}
  .aicard{padding:15px 16px}.ahead{margin-bottom:11px}.ar{margin-bottom:8px}
  .row9{gap:10px}.pcard{padding:12px 11px;gap:8px}
  .faq{margin-top:10px;gap:11px}
  .faq .q{font-size:13.5px}.faq .a{font-size:12.5px;line-height:1.45}
  #s13{padding-top:44px}
  .foot{gap:10px;padding:16px 24px}
  .foot span:last-child{flex-direction:row;gap:20px}
  .foot span:first-child{padding-bottom:8px}
  .foot a{display:inline}
}

/* ============ animation start states (revealed by JS; see <noscript> in index.html) ============ */
.hpill,.ed,.dv,.hshow,.glab,.chip,.rarr,
.cell,.rv,.gb,.titem,.tile,.badge,
.apro,.ar,.onode,.pcard{opacity:0}
.hbar>i,.agbar>i{width:0}
.chip{transform:translate(-50%,-50%) translateY(10px)}
.qc{opacity:0;transform:translate(-50%,-50%) scale(.6)}
.rcard{opacity:0;transform:translateY(10px)}
.haic{opacity:0}
.cell,.tile,.pcard{transform:translateY(14px)}
.rv{transform:translateY(6px)}
.trk i{width:0}
.bb{height:0}
.axis{transform:scaleY(0)}
.titem{transform:translateX(10px)}
.badge{transform:scale(.5)}
.apro{transform:scale(.6)}
.ar{transform:translateY(8px)}
.hub{opacity:0;transform:translate(-50%,-50%) scale(.8)}
.hand{transform:rotate(0)}
.wchip .pn.copy{opacity:0;transform:translateX(-6px)}

.on,.titem.on,.cell.on,.tile.wrong.on{opacity:1}
.tile.wrong.on{opacity:.72}
.chip.on{opacity:1;transform:translate(-50%,-50%)}
.qc.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.hub.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.rcard.on,.haic.on,.cell.on,.rv.on,.titem.on,
.tile.on,.badge.on,.apro.on,.ar.on,.pcard.on{transform:none}
.axis.on{transform:scaleY(1)}
.pcard.on .hand{transform:rotate(30deg)}
.pcard.on .wchip .pn.copy{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  main{scroll-behavior:auto}
  .hpill,.ed,.dv,.hshow,.glab,.chip,.rarr,
  .cell,.rv,.gb,.titem,.tile,.badge,.qc,
  .apro,.ar,.onode,.pcard,.rcard,.haic,.hub,
  .wchip .pn.copy{opacity:1;transform:none}
  .tile.wrong{opacity:.72}
  .chip{transform:translate(-50%,-50%)}
  .qc,.hub{transform:translate(-50%,-50%)}
  .axis{transform:scaleY(1)}
  .hand{transform:rotate(30deg)}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ---------- Guide page (/guide) ---------- */
/* Eight steps in one block whose size never changes. All steps sit in the same
   grid cell, so the tallest one sets the height and the browser works out the
   worst case per width – no hand-tuned min-height. Inactive steps are hidden
   with visibility, not opacity: a transparent step would still swallow clicks. */
.gd{max-width:720px;width:100%;margin:0 auto}
.gd-hd{max-width:760px;width:100%;margin:0 auto;padding:8px 24px 0}
.gd-hd h1{font-size:clamp(24px,4vw,32px);font-weight:900;letter-spacing:-.02em;line-height:1.12}
.gd-hd p{margin-top:12px;font-size:15px;line-height:1.6;color:#54607A;max-width:640px}
/* 640px is what 64ch measured at this size in Onest, so the line length is the one
   the page was set with. It is spelled in pixels because `ch` is the width of the
   font's own zero: the cap changed the moment the real font replaced the stand-in,
   and this centred paragraph slid sideways by 32px - the last layout shift left on
   /guide. Re-measure if the size or the font changes. */

.gd-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:28px 26px;
  display:flex;flex-direction:column;gap:16px;
  box-shadow:0 2px 4px rgba(20,22,28,.08),0 16px 34px rgba(20,22,28,.12)}
.gd-stack{display:grid;grid-template-columns:1fr}
.gd-step{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:16px;min-width:0}
.gd-step[hidden]{display:flex;visibility:hidden}
.gd-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.gd-eyebrow{font-size:12.5px;font-weight:600;color:var(--sub)}
.gd-step h2{font-size:22px;font-weight:900;letter-spacing:-.02em}
.gd-body{font-size:14px;line-height:1.6;color:var(--ink)}
.gd-mockwrap{flex:1;min-width:0}

/* From 700px the text and the mock sit side by side: that halves the block and
   lets the whole page fit one screen. */
@media(min-width:700px){
  .gd-step{flex-direction:row;gap:28px}
  .gd-side{width:44%;flex-shrink:0}
}

.gd-mock{background:#F7F8FA;border:1px solid var(--border);border-radius:12px;padding:14px;
  display:flex;flex-direction:column;gap:10px}
.gd-cap{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sub)}

.gd-list{display:flex;flex-direction:column;gap:8px}
.gd-li{display:flex;align-items:center;gap:10px;background:#fff;border-radius:8px;padding:10px}
.gd-av{width:24px;height:24px;border-radius:6px;background:#C9DCFA;flex:none}
.gd-av.round{border-radius:50%;background:var(--indigo)}
.gd-bar{height:10px;border-radius:5px;background:#E6E8EC}
.gd-li .gd-val{margin-left:auto;height:20px;width:56px;border-radius:6px;background:var(--tile);flex:none}
.gd-add{font-size:12.5px;font-weight:600;color:var(--indigo)}

/* Step 1 schematic: three people, and against each the two fields they fill every week.
   A solid block is the number, two ragged lines are the words - the shapes carry it, so
   there is nothing to label. None of the other schematics in this guide carry words
   either, and the step's own text already names the two fields. */
.gd-mock-ag{gap:0}
.ag-li{gap:8px;padding:7px 9px}
.ag-li .gd-av{width:20px;height:20px}
.ag-num{width:30px;height:11px;border-radius:4px;background:#C9DCFA;flex:none}
.ag-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ag-txt i{display:block;height:5px;border-radius:3px;background:#E6E8EC}
.ag-txt i:first-child{width:100%}
.ag-txt i:last-child{width:58%}

.gd-form{display:flex;flex-direction:column;gap:8px}
.gd-field{display:flex;flex-direction:column;gap:4px}
.gd-label{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sub)}
.gd-input{height:32px;border-radius:8px;border:1px solid var(--border);background:#fff}
.gd-input.acc{border-color:#C9DCFA;background:#E9F0FD}

.gd-table{display:flex;flex-direction:column;gap:6px}
.gd-tr{display:grid;grid-template-columns:var(--gd-cols);gap:6px;align-items:center}
.gd-thead{padding:0 10px;font-size:8.5px;font-weight:700;text-transform:uppercase;color:var(--sub)}
.gd-thead span+span,.gd-tr .gd-cell{text-align:right}
.gd-trow{background:#fff;border-radius:8px;padding:8px 10px}
.gd-name{display:flex;align-items:center;gap:8px;min-width:0}
.gd-dot{width:10px;height:10px;border-radius:3px;flex:none}
.gd-cell{display:flex;justify-content:flex-end}
.gd-cell .gd-bar{background:var(--tile)}
.gd-dev{font-size:11px;font-weight:700;text-align:right}
@media(min-width:420px){
  .gd-thead{font-size:10px;letter-spacing:.06em}
  .gd-tr{gap:8px}
}

.gd-chart{display:flex;flex-direction:column;gap:8px}
/* height:100% on the pair is required: the row is align-items:flex-end, and
   without it the bars' percentage heights resolve against auto and collapse. */
.gd-bars{display:flex;align-items:flex-end;gap:8px;height:96px}
.gd-pair{display:flex;align-items:flex-end;gap:3px;flex:1;height:100%}
.gd-pair i{display:block;flex:1;border-radius:3px 3px 0 0;background:var(--plan)}
.gd-pair i.fact{background:var(--indigo)}
.gd-pair i.fc{background:var(--orange)}
.gd-xaxis{display:flex;gap:8px;font-size:10px;font-weight:600;color:var(--sub)}
.gd-xaxis span{flex:1;text-align:center}
.gd-legend{display:flex;justify-content:center;gap:12px;font-size:11px;color:var(--sub)}
.gd-legend span{display:flex;align-items:center;gap:6px}
.gd-legend i{width:8px;height:8px;border-radius:2px;display:block}

.gd-plans{display:flex;gap:6px}
.gd-plan{flex:1;background:#fff;border-radius:8px;padding:10px 8px;text-align:center;
  display:flex;flex-direction:column;gap:2px}
.gd-plan .nm{font-size:11.5px;font-weight:700}
.gd-plan .pr{font-size:15px;font-weight:900;letter-spacing:-.01em}
.gd-plan .nt{font-size:9.5px;line-height:1.25;color:var(--sub)}
.gd-note{text-align:center;font-size:11px;line-height:1.5;color:var(--sub)}
@media(min-width:420px){
  .gd-plans{gap:8px}
  .gd-plan{padding:10px}
  .gd-plan .nm{font-size:12.5px}
  .gd-plan .pr{font-size:17px}
  .gd-plan .nt{font-size:10.5px}
  .gd-note{font-size:12px}
}

/* The dot is drawn inside a 24×24 button: a 9px circle is too small a target
   for a thumb, and this is exactly what people tap to page through. */
.gd-dots{display:flex;justify-content:center;gap:2px;min-height:24px}  /* the eight dots are built by guide.js; on a slow connection the script lands
     after the first paint, so the row holds its height from the start */
.gd-dots button{width:24px;height:24px;display:flex;align-items:center;justify-content:center;
  background:none;border:none;padding:0;cursor:pointer}
.gd-dots i{display:block;width:9px;height:9px;border-radius:50%;background:#D6DAE2;transition:all .2s}
.gd-dots button.done i{background:var(--golub)}
.gd-dots button.act i{width:11px;height:11px;background:var(--indigo)}

.gd-nav{display:flex;gap:10px}
/* The transparent border matters: Back has a real one, and without it the row
   is two pixels shorter on the first step and the block changes height. */
.gd-nav button{flex:1;border-radius:9px;padding:12px 16px;font-family:inherit;font-size:14.5px;cursor:pointer}
.gd-back{border:1px solid var(--border);background:#fff;color:var(--ink);font-weight:600}
.gd-back:hover{background:var(--tile)}
.gd-next{border:1px solid transparent;background:var(--indigo);color:#fff;font-weight:700}
.gd-next:hover{background:#134FC7}

/* The last step's button carries the longest label; at narrow widths it wrapped
   to two lines and made the block 18px taller than on the other steps. */
@media(max-width:420px){
  .gd-nav button{font-size:13px;padding:12px 10px;white-space:nowrap}
}
/* Trims the last few pixels so the page still fits a 700px-tall window. */
main.gd-main+.page-ft{padding-bottom:24px}

/* main.css already styles `.doc p` (two selectors deep), which outranks the guide's
   own single-class rules on those same paragraphs: the mock captions came out at 15px
   instead of 11px, and every paragraph inherited .doc's colour and 62ch cap. Scoping
   them under .gd-main restores exactly the values guide.css asks for - nothing here
   changes a size, it only wins the cascade. Only font-size, colour and the width cap
   are restated - guide.css sets no line-height on the eyebrow and the caption, so the
   page's own inheritance is left to stand. */
.gd-main .gd-eyebrow,.gd-main .gd-body,.gd-main .gd-cap,.gd-main .gd-note{max-width:none}
.gd-main .gd-eyebrow{font-size:12.5px;color:var(--sub)}
.gd-main .gd-body{font-size:14px;line-height:1.6;color:var(--ink)}
.gd-main .gd-cap{font-size:11px;color:var(--sub)}
.gd-main .gd-note{font-size:11px;line-height:1.5;color:var(--sub)}
@media(min-width:420px){.gd-main .gd-note{font-size:12px}}

/* The popup can now be opened from a document page, where the page itself scrolls
   rather than <main>. Without this the background scrolled behind the dialog. */
html.mt-lock body{overflow:hidden}

/* Text link under the "Three steps" copy, pointing at /guide. */
.lead-link{margin-top:14px;font-size:14.5px;font-weight:700}
.lead-link a{color:var(--indigo);text-decoration:none}
.lead-link a:hover{text-decoration:underline}

/* Guide shell: wider than a plain document page so the heading holds one line, and the
   header carries the waitlist button alongside the logo. */
.gd-page .page-hd{max-width:820px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.gd-main{max-width:820px}
.gd-main .gd-hd{max-width:760px;padding:8px 0 0;text-align:center}
.gd-main .gd-hd p{margin-left:auto;margin-right:auto}
@media(max-width:560px){
  .gd-page .page-hd{padding:14px 20px}
  .gd-page .page-hd .ctas{padding:9px 14px;font-size:13px}
}

/* Primary CTA with the guide link beside it. The row owns the top margin so the two
   buttons share a baseline, and it centres wherever the section's text is centred. */
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:24px}
.cta-row .cta{margin-top:0}
.full .cta-row{justify-content:center}
.cta2{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--ink);font-weight:800;font-size:15px;
      font-family:inherit;border:1px solid var(--border);border-radius:12px;padding:13px 22px;cursor:pointer;
      text-decoration:none;box-shadow:0 6px 16px rgba(20,40,80,.07)}
.cta2:hover{border-color:#C9DDFB;color:var(--indigo)}
.cta2:focus-visible{outline:3px solid var(--indigo);outline-offset:3px}
@media(max-width:860px){
  /* One line, two equal halves, never wrapping. Letting it wrap made the row's height
     depend on the font in use, so the swap from the fallback to Onest reflowed the whole
     hero - CLS went from 0.007 to 0.131 at 360px. Fixed-width halves hold their height
     whatever the metrics. */
  .cta-row{justify-content:center;flex-wrap:nowrap;gap:8px;width:100%}
  .cta-row .cta,.cta-row .cta2{flex:1 1 0;min-width:0;justify-content:center;
    font-size:13px;padding:12px 10px;white-space:nowrap}
}

/* The card sat flush against the subtitle, and on a phone only 8px separated it from
   the footer while its shadow reaches 34px - which is what read as the shadow being
   cut off. Both gaps are explicit now. */
.gd-main .gd{margin-top:20px}
.gd-main{padding-bottom:36px}
/* A 700px-tall desktop window has no slack for those gaps; trim them back there. */
@media(min-width:700px) and (max-height:740px){
  .gd-main{padding-bottom:18px}
  .gd-main .gd{margin-top:14px}
  .gd-main .gd-hd p{margin-top:8px}
}
/* On the last step the header button goes away, and `hidden` would collapse its box and
   lift the whole page by its height. Same treatment the steps themselves get: keep the
   box, drop the paint. visibility also takes it out of the tab order, and the hidden
   attribute still hides it from assistive tech. */
/* No transition here: .ctas carries a 250ms visibility transition for the landing's
   fade, which would leave this button on screen for a quarter second after the step
   changed. */
.gd-page .page-hd .ctas{transition:none}
.gd-page .page-hd .ctas[hidden]{display:inline-flex;visibility:hidden}