/* Generated by docs/site-v2/build.mjs from docs/site-v2/src/styles.css. Do not edit here. */
[data-st="01471c"]{padding-bottom:40px!important}
[data-st="02379f"]{padding-bottom:clamp(72px,10vw,136px)!important}
[data-st="0841ac"]{font-size:clamp(2.4rem,5vw,4.2rem)!important}
[data-st="090fbe"]{padding-bottom:64px!important}
[data-st="0cbe1d"]{max-width:70ch!important}
[data-st="0fd943"]{align-self:flex-start!important}
[data-st="12366b"]{background:var(--paper)!important}
[data-st="139935"]{align-items:flex-start!important}
[data-st="159670"]{max-width:560px!important}
[data-st="15f426"]{display:inline-flex!important;font-size:.68rem!important}
[data-st="2702c4"]{height:34px!important}
[data-st="29e360"]{margin-top:28px!important}
[data-st="2be6e4"]{width:9%!important}
[data-st="351c89"]{height:44px!important}
[data-st="3b8d89"]{padding-bottom:clamp(48px,6vw,80px)!important}
[data-st="3bca39"]{margin-top:40px!important}
[data-st="41a4df"]{font-size:1.5rem!important}
[data-st="43a97f"]{margin-top:8px!important}
[data-st="499f99"]{max-width:60ch!important}
[data-st="4f2769"]{display:block!important;width:100%!important;height:auto!important;font-family:Outfit,system-ui,sans-serif!important}
[data-st="55db24"]{justify-content:space-between!important}
[data-st="5b076e"]{color:var(--on-field-muted)!important}
[data-st="5e51a6"]{max-width:58ch!important}
[data-st="6050b3"]{background:#fff!important}
[data-st="632dff"]{color:var(--ink)!important}
[data-st="63fbd7"]{width:62%!important}
[data-st="696835"]{width:16%!important}
[data-st="726e5d"]{border:1px solid var(--line)!important;border-radius:18px!important;overflow:hidden!important}
[data-st="7dd6cd"]{width:75%!important}
[data-st="811a13"]{padding-top:0!important}
[data-st="8c0503"]{height:30px!important;align-self:flex-start!important}
[data-st="929b1d"]{color:var(--muted)!important;max-width:40ch!important}
[data-st="92c18f"]{margin-top:16px!important}
[data-st="9977b7"]{max-width:16ch!important}
[data-st="99b9ba"]{justify-content:center!important}
[data-st="9d8d71"]{max-width:520px!important}
[data-st="a0925a"]{margin-top:0!important}
[data-st="a6dea4"]{width:58%!important}
[data-st="ab79ea"]{margin:0!important}
[data-st="ab7d2e"]{margin-top:auto!important}
[data-st="b6738a"]{font-size:clamp(2.2rem,5vw,3.8rem)!important;max-width:18ch!important}
[data-st="b7aa1e"]{width:100%!important}
[data-st="b8ee25"]{--x:1!important}
[data-st="bb23a4"]{height:34px!important;align-self:flex-start!important}
[data-st="be6f80"]{max-width:56ch!important}
[data-st="c1cf31"]{height:44px!important;width:auto!important;align-self:flex-start!important}
[data-st="c468d9"]{color:var(--mint)!important}
[data-st="cc95e0"]{font-size:.9rem!important}
[data-st="ccfdc6"]{font-size:2rem!important}
[data-st="d081d3"]{color:var(--muted)!important;margin-top:12px!important}
[data-st="da1cf6"]{max-width:62ch!important}
[data-st="dc9d6d"]{width:30%!important}
[data-st="e64077"]{margin-top:24px!important;padding:clamp(12px,3vw,32px)!important}
[data-st="e69a92"]{padding:clamp(18px,3vw,32px)!important}
[data-st="eac769"]{color:var(--muted)!important}
[data-st="efacb0"]{max-width:54ch!important}
[data-st="f1dbc6"]{height:40px!important;align-self:flex-start!important}
@font-face{font-family:Fredoka;src:url(/fonts/fredoka-latin.woff2) format("woff2");font-weight:500 600;font-display:swap}
@font-face{font-family:Outfit;src:url(/fonts/outfit-latin.woff2) format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/plex-mono-400-latin.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/plex-mono-500-latin.woff2) format("woff2");font-weight:500;font-display:swap}
html{-webkit-text-size-adjust:100%}body{margin:0;overflow-x:clip}[hidden]{display:none!important}img{max-width:100%}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:#033627;padding:10px 14px;border-radius:8px;z-index:99}.skip:focus{left:8px}
/* Layout concept: quiet white pages where the real product is the picture; deep forest bands break the rhythm; one mint action colour on dark. */
:root{
  --ink:#033627; --field:#041f16; --field-2:#0a2c20; --accent:#2c9b63; --green:#1f6b4a; --mint:#7fe0a3;
  --paper:#f2f2f3; --white:#ffffff; --plate:#e9f1ec; --line:#dfe5e1; --line-dark:#1c4334;
  --text:#1b2a24; --muted:#55665e; --on-field:#f2f2f3; --on-field-muted:#a9c2b6; --amber:#8a5a00; --amber-bg:#fff3d6; --red:#b42318;
  --display:"Fredoka","Trebuchet MS",system-ui,sans-serif;
  --body:"Outfit","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --wrap:1200px; --r:14px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--white);color:var(--text);font:400 17px/1.55 var(--body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
img{display:block}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);font-weight:600;color:var(--ink);text-wrap:balance;letter-spacing:-.01em}
h1{font-size:clamp(2.6rem,6.4vw,5.2rem);line-height:1.02}
h2{font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.06}
h3{font-size:1.45rem;line-height:1.2}
.lede{font-size:clamp(1.1rem,1.6vw,1.3rem);color:var(--muted);max-width:44ch}
.eyebrow{font:600 .78rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.hl{color:var(--accent)}
.dark{background:var(--field);color:var(--on-field)}
.dark h1,.dark h2,.dark h3{color:var(--on-field)}
.dark .lede,.dark p{color:var(--on-field-muted)}
.dark .eyebrow,.dark .hl{color:var(--mint)}
section{padding-block:clamp(72px,10vw,136px)}
.stack{display:flex;flex-direction:column}
.g8{gap:8px}.g12{gap:12px}.g16{gap:16px}.g24{gap:24px}.g32{gap:32px}.g48{gap:48px}.g64{gap:64px}
.row{display:flex;flex-wrap:wrap;align-items:center}
.center{align-items:center;text-align:center}
.center .lede{margin-inline:auto}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:999px;font:600 1rem/1 var(--body);white-space:nowrap;transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-1px)}
.btn-p{background:var(--ink);color:#fff}
.btn-p:hover{background:#06503a}
.btn-s{border:1.5px solid var(--line);background:#fff;color:var(--ink)}
.btn-s:hover{border-color:var(--ink)}
.dark .btn-p,.btn-mint{background:var(--mint);color:var(--field)}
.dark .btn-p:hover,.btn-mint:hover{background:#a2edbf}
.dark .btn-s{background:transparent;color:var(--on-field);border-color:var(--line-dark)}
.btn-sm{min-height:40px;padding:0 18px;font-size:.94rem}
.link{font-weight:600;color:var(--ink);display:inline-flex;gap:6px;align-items:center}
.link::after{content:"→";transition:transform .15s}
.link:hover::after{transform:translateX(3px)}
.dark .link{color:var(--mint)}
.tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font:600 .74rem/1.2 var(--body);letter-spacing:.04em;background:var(--plate);color:var(--green)}
.tag.coming{background:var(--amber-bg);color:var(--amber)}
.dark .tag{background:var(--field-2);color:var(--mint)}

/* header */
#chrome{position:sticky;top:env(safe-area-inset-top,0px);z-index:40}
/* reading progress: a thin line under the bar. It sits over the page, so it moves nothing. */
.prog{position:absolute;left:0;right:0;top:100%;height:3px;overflow:hidden;pointer-events:none}
.prog i{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .1s linear}
#chrome:has(.nav.open) .prog{display:none}
@media (prefers-reduced-motion:reduce){.prog i{transition:none}}
header.site{position:relative;background:rgba(255,255,255,.9);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s}
header.site.scrolled{border-color:var(--line)}
/* One bar. Nothing in it wraps: when the row does not fit (a narrow window, or enlarged text)
   the menu collapses behind the Menu button instead. See "compact header" below. */
.nav{display:flex;flex-wrap:nowrap;align-items:center;gap:20px;height:72px}
.nav>*{flex:none}
.nav .logo{display:flex;align-items:center}
.nav .logo img{height:34px;width:auto;object-fit:contain;object-position:left center}
.nav ul{display:flex;gap:2px;flex:1 0 auto}
.nav li>button,.nav li>a{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:999px;font-weight:500;color:var(--ink);white-space:nowrap}
.nav li>button:hover,.nav li>a:hover,.nav li>button[aria-expanded="true"]{background:var(--plate)}
.nav li>button::after,.psw::after{content:"";flex:none;width:7px;height:7px;border:solid currentColor;border-width:0 1.6px 1.6px 0;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.nav li>button[aria-expanded="true"]::after,.psw[aria-expanded="true"]::after{transform:rotate(225deg) translateY(-2px)}
.nav li>a[aria-current]{background:var(--plate)}
.nav li.allp{margin-left:auto}
.nav li.allp>a{color:var(--muted)}
.nav li.allp>a:hover{color:var(--ink)}
.nav .acts{display:flex;gap:10px;align-items:center}
.menu-btn{display:none;white-space:nowrap}
/* product pages: the product's own logo is the switcher */
.psw{gap:12px;height:52px;padding:0 12px 0 8px;margin-left:-8px;border-radius:14px;color:var(--ink)}
.psw:hover,.psw[aria-expanded="true"]{background:var(--plate)}
.nav .psw img{height:30px;min-width:0}

.mega{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 40px 60px -30px rgba(3,54,39,.25)}
.mega.on{display:block}
.mega .wrap{display:grid;grid-template-columns:1fr 300px;gap:40px;padding-block:32px 40px}
.mega h4{font:600 .74rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.mega .cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:6px 20px}
.mi{display:flex;gap:14px;align-items:flex-start;padding:12px;border-radius:12px}
.mi:hover{background:var(--paper)}
.mi img{width:36px;height:36px;flex:none}
.mi b{display:block;font:600 1.02rem/1.25 var(--body);color:var(--ink)}
.mi span{display:block;font-size:.9rem;line-height:1.35;color:var(--muted)}
.mega aside{background:var(--field);color:var(--on-field);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.mega aside h3{color:#fff;font-size:1.3rem}
.mega aside p{color:var(--on-field-muted);font-size:.95rem}
.mega aside .link{color:var(--mint)}
.mi b .tag{display:inline-flex;color:var(--amber);font-size:.7rem;margin-left:4px;vertical-align:middle}
.mi:not(:has(img)){padding:12px 14px}
.msw{left:max(12px,calc((100% - var(--wrap))/2 + 12px));right:auto;top:calc(100% - 6px);width:380px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 96px);overflow-y:auto;padding:10px;border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 60px -20px rgba(3,54,39,.35)}
.msw h4{margin:16px 12px 8px}
.msw .mi{align-items:center;padding:9px 12px}
.msw .mi img{width:32px;height:32px}
.msw .mi.cur{background:var(--plate)}
.msw .mi.home{padding-bottom:14px;border-bottom:1px solid var(--line);border-radius:12px 12px 0 0}
/* The bar stays at the top: anchor jumps and keyboard focus land below it. script.js lights the
   section link from this same offset, so the lit link is the section you landed on. */
html{scroll-padding-top:84px}
html:has(.subnav){scroll-padding-top:144px}
@media (max-width:1000px){html:has(.pnav){scroll-padding-top:136px}}
.trial{max-width:60ch;color:var(--muted);font-size:1.02rem}
.trial b{color:var(--ink);font-weight:600}
.offer{font-size:.95rem;line-height:1.45}
.offer a{font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:.2em;white-space:nowrap}
.plan .l .offer a,.pricebox .offer a{color:var(--mint)}
.callband{display:flex;flex-wrap:wrap;gap:24px 40px;align-items:center;justify-content:space-between;background:var(--plate);border-radius:26px;padding:clamp(24px,4vw,44px)}
.callband h2{font-size:clamp(1.45rem,2.6vw,2.1rem);max-width:28ch}
.callband p{color:var(--muted)}
.callband .btn{flex:none}
.launch{font-size:.92rem;color:var(--muted)}
.howmany{width:100%;display:flex;flex-direction:column;gap:10px}
.howmany label{display:flex;justify-content:space-between;gap:12px;color:#fff;font-weight:600}
.howmany output{color:var(--mint);font-variant-numeric:tabular-nums}
.stepper{display:flex;align-items:center;gap:12px}
.stepper input{flex:1;min-width:0}
.stepper button{flex:none;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line-dark);color:#fff;font-size:1.3rem;line-height:1}
.stepper button:hover{border-color:var(--mint);color:var(--mint)}
.howmany p{font-size:.95rem}
#pl-use .box p{max-width:60ch}
.credgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
@media (max-width:860px){.credgrid{grid-template-columns:minmax(0,1fr)}}
.credgrid .box>ul{margin-top:12px}
.ctable{margin-top:16px}
.ctable table{width:100%;min-width:0;border-collapse:collapse;font-size:.95rem}
.ctable tr:last-child td{border-bottom:0}
.ctable th,.ctable td{overflow-wrap:normal;word-break:normal;hyphens:none}
@media (max-width:520px){.credgrid .box{padding-left:18px;padding-right:18px}.ctable table{font-size:.88rem}.ctable th{padding:10px 8px;letter-spacing:.04em;font-size:.66rem}.ctable td{padding:10px 8px}}
.ctable th{text-align:left;font:600 .72rem/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:12px 14px}
.ctable td{padding:12px 14px;border-top:1px solid var(--line);color:var(--muted);vertical-align:top}
.ctable td:first-child{color:var(--ink);font-weight:500}
.ptall td:first-child{min-width:190px}
.ptall td:nth-child(2){min-width:150px}
/* seven products in two columns, four and three, so none sits alone on a row */
#mega-products .cols{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,auto);grid-auto-flow:column}
@media (max-width:560px){#mega-products .cols{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row}}

/* product shot frame */
.shot{border-radius:var(--r);overflow:hidden;background:#fff;border:1px solid rgba(3,54,39,.14);box-shadow:0 2px 4px rgba(3,54,39,.05),0 30px 70px -24px rgba(3,54,39,.35)}
.shot img{width:100%;height:auto}
.dark .shot{border-color:var(--line-dark);box-shadow:0 40px 90px -30px #000}
.plate{background:var(--plate);border-radius:28px;padding:clamp(16px,4vw,56px)}
.dark .plate{background:var(--field-2)}
.cap{font-size:.86rem;color:var(--muted);margin-top:14px;text-align:center}
.dark .cap{color:var(--on-field-muted)}

/* hero */
.hero{padding-block:clamp(48px,7vw,96px) 0;overflow:hidden}
.hero .facts{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:center;color:var(--muted);font-size:.95rem}
.hero .facts li::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:8px;vertical-align:middle}
.ptabs{display:flex;gap:6px;overflow-x:auto;padding:6px;background:var(--paper);border-radius:999px;max-width:100%;scrollbar-width:none}
.ptabs button{display:flex;align-items:center;gap:8px;padding:9px 16px 9px 10px;border-radius:999px;font-weight:500;color:var(--muted);white-space:nowrap}
.ptabs button img{width:24px;height:24px}
.ptabs button[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(3,54,39,.18)}
.stage{perspective:1800px;margin-top:8px}
.stage .plate{transform-origin:50% 0;will-change:transform;border-bottom-left-radius:0;border-bottom-right-radius:0;padding-bottom:0}
.stage .shot{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:0}
#heroShot{display:grid;overflow:hidden;border-radius:var(--r) var(--r) 0 0}
#heroShot .hs{grid-area:1/1;min-width:0}
.hs.in{animation:hsin .65s cubic-bezier(.2,.7,.2,1) both;z-index:1}
.hs.out{animation:hsout .65s ease both}
@keyframes hsin{from{transform:translateX(100%)}to{transform:none}}
@keyframes hsout{to{transform:translateX(-14%);opacity:.35}}
.soon{aspect-ratio:16/10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:24px;background:#fff}
.soon img{height:64px}

/* suite grid */
.suite{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.pc{grid-column:span 2;background:var(--paper);border-radius:22px;padding:28px 28px 0;display:flex;flex-direction:column;gap:10px;overflow:hidden;min-height:340px;transition:background .2s}
.pc:hover{background:var(--plate)}
.pc.wide{grid-column:span 3}
.pc img.lg{height:30px;width:auto;align-self:flex-start}
.pc h3{font-size:1.5rem}
.pc p{color:var(--muted);font-size:1rem}
.pc .peek{margin-top:auto;padding-top:18px}
.pc .peek .shot{border-bottom:0;border-radius:10px 10px 0 0;transform:translateY(6px);transition:transform .3s}
.pc:hover .peek .shot{transform:translateY(0)}
.pc .peek img{aspect-ratio:16/8;object-fit:cover;object-position:0 0}

/* story: five steps across the full width, one large screen beneath */
.jrny{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--line-dark)}
.jrny button{display:flex;flex-direction:column;align-items:flex-start;gap:10px;text-align:left;width:100%;height:100%;padding:24px 20px 8px 0;position:relative;color:var(--on-field-muted);opacity:.72;transition:opacity .25s}
.jrny li+li button{padding-left:20px;border-left:1px solid var(--line-dark)}
.jrny button:hover,.jrny button.on{opacity:1}
.jrny .n{font:600 .72rem/1 var(--body);letter-spacing:.14em;color:var(--mint)}
.jrny img{height:24px;width:auto}
.jrny b{font:600 1.22rem/1.2 var(--display);color:#fff}
.jrny .d{font-size:.95rem;line-height:1.45;color:#c9ddd3}
.jrny i{position:absolute;left:0;right:0;top:-2px;height:3px;background:var(--mint);transform:scaleX(0);transform-origin:0 50%}
.jrny button.on i{transform:scaleX(1)}
.jrny.auto button.on i{animation:jfill 6s linear both}
@keyframes jfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.story .frames{display:grid}
.story .frames .shot{grid-area:1/1;align-self:start;opacity:0;visibility:hidden;transform:scale(1.04);transition:opacity .7s,transform .9s cubic-bezier(.2,.7,.2,1),visibility .7s}
.story .frames .shot.on{opacity:1;visibility:visible;transform:none}
.story .frames img{aspect-ratio:16/9;object-fit:cover;object-position:0 0}
@media (max-width:860px){.jrny{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.jrny li{scroll-snap-align:start}}

/* roles */
.rtabs{display:flex;flex-wrap:wrap;gap:8px;border-bottom:1px solid var(--line)}
.rtabs button{padding:14px 4px;margin-right:24px;font:600 1.05rem/1 var(--body);color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-1px}
.rtabs button[aria-selected="true"]{color:var(--ink);border-color:var(--accent)}
.rpanel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,56px);align-items:center}
.checks li{padding:14px 0 14px 34px;border-top:1px solid var(--line);position:relative}
.checks li::before{content:"";position:absolute;left:4px;top:20px;width:14px;height:8px;border:solid var(--accent);border-width:0 0 2.5px 2.5px;transform:rotate(-45deg)}
.checks b{color:var(--ink);font-weight:600}

/* split feature rows */
.feat{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,64px);align-items:center}
.feat.flip>.txt{order:2}
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);border-radius:var(--r);overflow:hidden}
.trust li{background:var(--field);padding:28px}
.trust b{display:block;font:600 1.25rem/1.25 var(--display);color:#fff;margin-bottom:6px}
.trust span{color:var(--on-field-muted);font-size:.98rem}

/* parallax band: text sits on the dark sky, never on the mountain */
.peak{background:linear-gradient(#06281d 0,#06281d 45%,#1b5a43 85%,#cfe3d9 100%);padding-block:0;overflow:hidden}
.peak .over{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;padding-block:clamp(72px,9vw,128px) 8px}
.peak svg{display:block;width:100%;height:auto}
.peak h2{color:#fff;font-size:clamp(2.2rem,5.4vw,4.4rem)}
.peak p{color:#e3efe9;max-width:40ch}

/* footer: closing call and links share one faint mountain */
footer.site{position:relative;background:var(--field);color:var(--on-field-muted);font-size:.95rem;overflow:hidden}
footer .bg{position:absolute;inset:0;opacity:.2;pointer-events:none}
footer .bg img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 58%}
footer .wrap{position:relative}
footer .ctaf{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:end;padding-block:clamp(56px,7vw,96px) 44px}
footer .ctaf h2{color:#fff;font-size:clamp(2.2rem,4.6vw,3.8rem)}
footer .ctaf p{color:#d6e7de;margin-top:12px;max-width:44ch}
footer .sub{display:flex;gap:8px;background:rgba(4,31,22,.7);border:1px solid var(--line-dark);border-radius:999px;padding:6px}
footer .sub input{flex:1;min-width:0;height:44px;border:0;background:transparent;color:#fff;padding:0 16px;box-shadow:none}
footer .sub input::placeholder{color:var(--on-field-muted)}
footer .fine{font-size:.84rem;margin-top:10px}
footer .cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-block:1px solid var(--line-dark)}
footer .cols>div{padding:28px 20px 30px 0}
footer .cols>div+div{padding-left:20px;border-left:1px solid var(--line-dark)}
footer h4{font:600 .72rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:14px}
footer li{padding:3px 0}
footer li a{display:inline-flex;align-items:center;gap:10px}
footer li img{width:18px;height:18px}
footer a:hover{color:#fff}
footer small.c{font:600 .62rem/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--mint);border:1px solid var(--line-dark);border-radius:999px;padding:3px 6px;margin-left:8px}
footer .legal{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;padding-block:20px 26px;font-size:.86rem}
footer .legal img{height:26px;width:auto}
footer .legal .sp{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px 22px}
footer .mail{color:var(--mint);font-weight:600}

/* pricing tabs and panels */
.pp{display:flex;flex-direction:column;gap:32px}
.pp .none{border:1px dashed var(--line-control,#9aa9a1);border-radius:28px;padding:clamp(28px,5vw,56px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:center;background:var(--paper)}
.pp .none h2{font-size:clamp(2rem,4vw,3rem)}
.bands{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.bands div{border:1px solid var(--line);border-radius:16px;padding:20px;background:#fff;display:flex;flex-direction:column;gap:4px}
.bands div.on{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink)}
.bands b{font:600 .74rem/1.2 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
.bands strong{font:600 1.9rem/1.1 var(--display);color:var(--ink)}
.bands strong small{font:500 .9rem var(--body);color:var(--muted)}
.bands span{font-size:.88rem;color:var(--muted)}
.ptall td,.ptall th{vertical-align:top}
.ptall td:first-child{white-space:nowrap}
.ptall td:first-child img{height:24px;width:auto}
.ptall .pr{font:600 1.15rem/1.2 var(--display);color:var(--ink)}
.ptall small{display:block;color:var(--muted);font-size:.84rem}
.cmp .stt{font:600 .7rem/1 var(--body);padding:5px 9px;border-radius:999px;background:var(--plate);color:var(--green);white-space:nowrap}
.cmp .stt.w{background:var(--amber-bg);color:var(--amber)}

/* content pages */
.page{max-width:820px}
.page h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-top:40px}
.page p,.page li{color:var(--muted);margin-top:12px;max-width:70ch}
.page ol{counter-reset:g}
.page ol li{counter-increment:g;padding-left:44px;position:relative;margin-top:18px}
.page ol li::before{content:counter(g);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--plate);color:var(--green);font:600 .9rem/30px var(--body);text-align:center}
.page ol li b{color:var(--ink)}
.art{display:grid;grid-template-columns:220px minmax(0,1fr);gap:56px;align-items:start}
.art aside{position:sticky;top:110px;display:flex;flex-direction:column;gap:10px;font-size:.95rem}
.art aside b{font:600 .72rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.art aside a{color:var(--muted)}.art aside a:hover{color:var(--ink)}
.gloss{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:0 40px}
.gloss div{padding:20px 0;border-top:1px solid var(--line)}
.gloss dt{font:600 1.2rem/1.2 var(--display);color:var(--ink)}
.gloss dd{margin:6px 0 0;color:var(--muted)}
.dtab td:first-child{font-weight:600;color:var(--ink)}

/* console */
.cgrid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start}
.panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px}
.panel h3{font-size:1.1rem;margin-bottom:14px}
.ibar{display:grid;grid-template-columns:100px 1fr 28px;gap:10px;align-items:center;padding:6px 0;font-size:.94rem}
.ibar i{display:block;height:12px;border-radius:6px;background:var(--accent)}
.ibar b{text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.console tbody tr{cursor:pointer}.console tbody tr:hover td{background:var(--paper)}
.console tbody tr.sel td{background:var(--plate)}
.steps3 li{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:.94rem}
.steps3 li i{width:10px;height:10px;border-radius:50%;background:var(--accent);margin-top:7px;flex:none}
.steps3 li.no i{background:#fff;border:2px solid #9aa9a1}
.gatebox{max-width:420px;margin:12vh auto;background:#fff;border:1px solid var(--line);border-radius:22px;padding:36px;display:flex;flex-direction:column;gap:16px;text-align:center;align-items:center}
@media (max-width:960px){.cgrid,.art{grid-template-columns:1fr}.art aside{position:static;flex-direction:row;flex-wrap:wrap}}
@media (max-width:720px){footer .ctaf,.pp .none{grid-template-columns:minmax(0,1fr)}}

/* comparison, modes, limits */
.cmp{border:1px solid var(--line);border-radius:18px;overflow-x:auto;background:#fff}
.cmp table{min-width:760px;font-size:1rem}
.cmp th{padding:18px 20px;font:600 .78rem/1.3 var(--body);letter-spacing:.08em;vertical-align:bottom}
.cmp td{padding:18px 20px;color:var(--muted)}
.cmp td:first-child{font-weight:600;color:var(--ink);white-space:nowrap}
.cmp th.us,.cmp td.us{background:var(--plate);color:var(--ink);font-weight:600}
.cmp th.us img{height:24px;width:auto}
.modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.modes>div{border-radius:22px;padding:32px;background:var(--paper);display:flex;flex-direction:column;gap:10px}
.modes>div:first-child{background:var(--ink)}
.modes>div:first-child h3{color:#fff}.modes>div:first-child p{color:var(--on-field-muted)}.modes>div:first-child b{color:var(--mint)}
.modes b{font:600 .74rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.modes p{color:var(--muted)}
.rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);border-radius:var(--r);overflow:hidden}
.rules li{background:var(--field);padding:28px}
.rules b{display:block;font:600 1.2rem/1.25 var(--display);color:#fff;margin-bottom:6px}
.rules span{color:var(--on-field-muted);font-size:.98rem}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.box{border:1px solid var(--line);border-radius:22px;padding:32px;background:#fff}
.box h3{margin-bottom:14px}
.box li{padding:12px 0 12px 28px;border-top:1px solid var(--line);position:relative;color:var(--muted)}
.box li::before{content:"";position:absolute;left:4px;top:21px;width:10px;height:2px;background:var(--amber)}
.box.next li::before{width:8px;height:8px;border-radius:50%;background:var(--accent);top:19px}
.ba{border:1px solid var(--line);border-radius:18px;overflow:hidden}
.ba>div{display:grid;grid-template-columns:1fr 1fr}
.ba>div+div{border-top:1px solid var(--line)}
.ba span{padding:18px 22px;color:var(--muted)}
.ba span+span{background:var(--plate);color:var(--ink);font-weight:600}
.ba .hd span{font:600 .74rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase}
.pains{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.pains li{border-left:3px solid var(--mint);padding:6px 0 6px 20px;font:500 1.25rem/1.35 var(--display);color:#fff}

/* product page depth */
.subnav{position:sticky;top:calc(72px + env(safe-area-inset-top,0px));z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-block:1px solid var(--line)}
.subnav .wrap{display:flex;gap:6px;align-items:center;height:58px;overflow-x:auto;scrollbar-width:none}
.subnav img{height:26px;width:auto;margin-right:14px;flex:none}
.subnav button{padding:8px 14px;border-radius:999px;font-weight:500;color:var(--muted);white-space:nowrap}
.subnav button:hover{background:var(--plate);color:var(--ink)}
.subnav .btn{margin-left:auto;flex:none}
.facts3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--line);border-block:1px solid var(--line)}
.facts3 li{background:#fff;padding:28px 24px}
.facts3 b{display:block;font:600 1.25rem/1.25 var(--display);color:var(--ink);margin-bottom:4px}
.facts3 span{color:var(--muted);font-size:.98rem}
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:28px;counter-reset:st}
.flow li{counter-increment:st;border-top:2px solid var(--ink);padding-top:18px;display:flex;flex-direction:column;gap:8px}
.flow li::before{content:counter(st,decimal-leading-zero);font:600 2.4rem/1 var(--display);color:var(--accent)}
.flow h3{font-size:1.3rem}
.flow p{color:var(--muted);font-size:1rem}
.dark .flow li{border-color:var(--mint)}.dark .flow li::before{color:var(--mint)}
.pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.pair a{display:flex;gap:14px;align-items:flex-start;padding:22px;border-radius:18px;background:var(--paper)}
.pair a:hover{background:var(--plate)}
.pair img{width:40px;height:40px;flex:none}
.pair b{display:block;color:var(--ink);font-weight:600}
.pair span{color:var(--muted);font-size:.96rem}
.pricebox{display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:center;background:var(--field);border-radius:26px;padding:clamp(28px,5vw,56px)}
.pricebox .tag{align-self:flex-start}
.pricebox h2{color:#fff}.pricebox p{color:var(--on-field-muted)}.pricebox .price{color:#fff}.pricebox .price small{color:var(--on-field-muted)}

/* generic cards / pricing / resources */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.card{border:1px solid var(--line);border-radius:18px;padding:26px;display:flex;flex-direction:column;gap:10px;background:#fff;min-width:0;overflow-wrap:anywhere}
a.card:hover{border-color:var(--ink)}
.card img.lg{height:28px;width:auto;align-self:flex-start}
.card p{color:var(--muted);font-size:.98rem}
.price{font:600 2.6rem/1 var(--display);color:var(--ink)}
.price small{font:500 1rem var(--body);color:var(--muted)}
.suitecard{background:var(--field);color:var(--on-field);border-radius:26px;padding:clamp(28px,5vw,56px);display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.suitecard h2{color:#fff}
.suitecard .marks{display:flex;flex-wrap:wrap;gap:14px}
.suitecard .marks img{width:44px;height:44px}
.faq details{border-top:1px solid var(--line);padding:20px 0}
.faq summary{font:600 1.15rem/1.3 var(--body);color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::after{content:"+";font:500 1.5rem/1 var(--display);color:var(--accent)}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--muted);margin-top:10px;max-width:70ch}
.code{background:var(--field);color:#d7ebe1;border-radius:var(--r);padding:24px;font:400 .9rem/1.7 var(--mono);overflow-x:auto;border:1px solid var(--line-dark)}
.code .k{color:var(--mint)}.code .s{color:#f3d58a}.code .c{color:#6f9383}
.note{font-size:.86rem;color:var(--amber);background:var(--amber-bg);padding:8px 12px;border-radius:8px;display:inline-block}

/* auth split */
.auth{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:100vh;min-height:100dvh}
.auth .art{position:relative;background:var(--field);overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(24px,4vw,48px);min-height:340px}
.auth .art svg{position:absolute;inset:0;width:100%;height:100%}
.auth .art>*:not(svg){position:relative;z-index:1}
.auth .art::after{content:"";position:absolute;inset:auto 0 0 0;height:62%;background:linear-gradient(rgba(4,31,22,0),rgba(4,31,22,.94) 78%)}
.auth .art img{height:40px;width:auto;align-self:flex-start}
.auth .art h2{color:#fff;font-size:clamp(2rem,4vw,3.4rem)}
.auth .art p{color:#d6e7de;max-width:34ch;margin-top:12px}
.auth .form{display:flex;align-items:center;justify-content:center;padding:clamp(32px,6vw,80px) max(20px,env(safe-area-inset-right,0px)) clamp(32px,6vw,80px) max(20px,env(safe-area-inset-left,0px))}
.auth .box{width:100%;max-width:420px;display:flex;flex-direction:column;gap:18px}
.auth h1{font-size:clamp(2.2rem,4vw,3rem)}
label{font:600 .9rem/1 var(--body);color:var(--ink);display:block;margin-bottom:8px}
input[type=email],input[type=password],input[type=text],input[type=search]{width:100%;height:52px;border:1.5px solid var(--line);border-radius:12px;padding:0 16px;font:inherit;color:var(--text);background:#fff}
input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(44,155,99,.18)}
.btn-block{width:100%}
.or{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:.9rem}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.ws{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;text-align:left}
.ws:hover{border-color:var(--ink)}
.ws i{width:40px;height:40px;border-radius:10px;background:var(--ink);color:#fff;font:600 .9rem/40px var(--body);text-align:center;font-style:normal;flex:none}
.ws b{display:block;color:var(--ink)}.ws span{font-size:.88rem;color:var(--muted)}
.ws::after{content:"→";margin-left:auto;color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border:1.5px solid var(--line);border-radius:999px;font-weight:500;font-size:.95rem}
.chip img{width:24px;height:24px}
.chip[aria-pressed="true"]{border-color:var(--accent);background:var(--plate);color:var(--ink)}
.next li{display:flex;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.next i{font:600 .85rem/28px var(--body);width:28px;height:28px;border-radius:50%;background:var(--plate);color:var(--green);text-align:center;font-style:normal;flex:none}

/* console */
.console{background:var(--paper);min-height:100vh;display:grid;grid-template-columns:230px minmax(0,1fr)}
.console nav{background:var(--field);color:var(--on-field-muted);padding:24px 16px;display:flex;flex-direction:column;gap:6px}
.console nav img{height:30px;width:auto;align-self:flex-start;margin:0 8px 20px}
.console nav a{padding:10px 12px;border-radius:10px;font-weight:500}
.console nav a.on{background:var(--field-2);color:#fff}
.console main{padding:28px clamp(16px,3vw,40px);display:flex;flex-direction:column;gap:20px;min-width:0}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px}
.kpi span{font-size:.86rem;color:var(--muted)}
.kpi b{display:block;font:600 2rem/1.2 var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
.tbl{background:#fff;border:1px solid var(--line);border-radius:14px;overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.94rem;min-width:720px}
th{font:600 .74rem/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;padding:14px 16px;border-bottom:1px solid var(--line)}
td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
td .marks{display:flex;gap:4px}td .marks img{width:22px;height:22px}
.st{font:600 .78rem/1 var(--body);padding:5px 10px;border-radius:999px}
.st.c{background:var(--plate);color:var(--green)}.st.p{background:var(--amber-bg);color:var(--amber)}.st.u{background:#eee;color:#555}

/* product / solution switcher in the sticky bar */
.subnav .wrap{overflow:visible;position:relative}
.subnav .scr{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.sw{position:relative;flex:none;margin-right:8px}
.sw>button{display:flex;align-items:center;gap:10px;padding:7px 12px 7px 10px;border-radius:12px;border:1.5px solid var(--line);background:#fff;color:var(--ink);font-weight:600}
.sw>button:hover{border-color:var(--ink);background:#fff}
.sw>button img{height:24px;margin:0}
.sw>button::after{content:"";width:7px;height:7px;border:solid var(--ink);border-width:0 1.8px 1.8px 0;transform:rotate(45deg) translateY(-2px)}
.sw .dd{position:absolute;top:calc(100% + 12px);left:0;width:360px;max-width:88vw;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 30px 60px -20px rgba(3,54,39,.35);padding:8px;z-index:30;display:flex;flex-direction:column}
.sw .dd a{display:flex;gap:12px;align-items:center;padding:10px;border-radius:10px}
.sw .dd a:hover,.sw .dd a.cur{background:var(--plate)}
.sw .dd img{width:30px;height:30px;margin:0}
.sw .dd b{display:block;color:var(--ink);font-weight:600;line-height:1.2}
.sw .dd span{font-size:.86rem;color:var(--muted);line-height:1.3;display:block}

/* calls to action between sections */
section.ctab{padding-block:clamp(24px,4vw,48px)}
.ctabox{display:flex;flex-wrap:wrap;gap:20px 32px;align-items:center;justify-content:space-between;background:var(--plate);border:1px solid var(--line);border-radius:26px;padding:clamp(24px,4vw,40px)}
.ctabox>.stack{flex:1 1 320px;min-width:0}
.ctabox h2{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.ctabox p{color:var(--muted);max-width:56ch}
/* phones: a slim waitlist bar at the bottom. script.js adds .on while neither the hero nor the footer is on screen. */
.stickycta{display:none}
@media (max-width:720px){
  .stickycta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;align-items:center;justify-content:space-between;gap:12px;padding:8px max(16px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line);box-shadow:0 -10px 24px -18px rgba(3,54,39,.4);transform:translateY(105%);visibility:hidden;transition:transform .25s,visibility .25s}
  .stickycta.on{transform:none;visibility:visible}
  .stickycta .who{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0;font:600 .98rem/1.15 var(--body);color:var(--ink)}
  .stickycta .who img{width:26px;height:26px;flex:none}
  .stickycta .btn{flex:none;min-height:40px;white-space:nowrap}
  /* the bar never covers the last line of the page */
  body:has(.stickycta) footer .legal{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  /* keyboard focus and anchor jumps never land under the bar */
  html:has(.stickycta){scroll-padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){.stickycta{transition:none}}

/* hero variants */
.hero.split .wrap.hs{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);align-items:center;text-align:left;padding-bottom:clamp(56px,8vw,104px)}
.hero.split .lede{margin:0}
.hero.dark .plate{background:var(--field-2)}
.hero.dark .btn-s{color:#fff}

/* signature modules: one per product */
.fig{font-size:.84rem;color:var(--muted);margin-top:14px}
.dark .fig{color:var(--on-field-muted)}
/* ledger: the balanced entry */
.entry{background:#fff;border:1px solid var(--line);border-radius:18px;padding:clamp(18px,3vw,32px);font:400 .98rem/1.5 var(--mono);color:var(--text);box-shadow:0 30px 70px -30px rgba(3,54,39,.35);overflow-x:auto}
.entry .ln{display:grid;grid-template-columns:44px minmax(160px,1fr) 84px 84px;gap:10px;padding:7px 0;min-width:420px}
.entry .ln span:nth-child(n+3){text-align:right;font-variant-numeric:tabular-nums}
.entry .hd{font:600 .7rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:10px}
.entry .src{background:var(--paper);border-radius:10px;padding:10px 12px;display:flex;justify-content:space-between;gap:12px;font-size:.92rem}
.entry .via{font:600 .8rem/1 var(--body);color:var(--green);padding:12px 0 6px;display:flex;align-items:center;gap:8px}
.entry .via::before{content:"↓"}
.entry .eq{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px;padding:14px 16px;border-radius:12px;background:var(--ink);color:#fff;font-weight:500}
.entry .eq b{color:var(--mint);font:600 1.3rem/1 var(--display)}
/* payroll: gross to net */
.g2n{display:flex;flex-direction:column;gap:10px}
.g2n div{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:center}
.g2n span{font-weight:500;color:var(--on-field)}
.g2n i{display:block;height:34px;border-radius:8px;background:var(--line-dark)}
.g2n .net i{background:var(--mint)}
.g2n .gross i{background:#f2f2f3}
.gate{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:28px}
.gate li{overflow-wrap:anywhere;padding:16px;border-radius:12px;background:var(--field-2);border:1px solid var(--line-dark);font-weight:500;color:#fff;font-size:.95rem}
.gate li small{display:block;color:var(--on-field-muted);font-weight:400;margin-top:4px}
.gate li.stop{border-color:#e8a23a;background:#2b2410}
.gate li.stop small{color:#f3d58a}
/* registry: the record */
.doc{border:1px solid var(--ink);outline:1px solid var(--ink);outline-offset:6px;border-radius:3px;padding:clamp(22px,4vw,44px);background:#fff;margin:7px}
.doc h3{font-size:1.5rem}
.juris{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--ink);border:1px solid var(--ink);margin-top:22px}
.juris div{background:#fff;padding:20px}
.juris b{display:block;font:600 1.2rem/1.2 var(--display);color:var(--ink)}
.juris span{font-size:.9rem;color:var(--muted)}
.tl{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));margin-top:30px;border-top:3px dotted var(--accent)}
.tl li{padding:16px 12px 0 0;position:relative;font-weight:500;color:var(--ink);font-size:.95rem}
.tl li::before{content:"";position:absolute;top:-9px;left:0;width:14px;height:14px;border-radius:50%;background:var(--accent)}
.tl small{display:block;color:var(--muted);font-weight:400}
/* expenses: the receipt */
.rwrap{filter:drop-shadow(0 30px 40px rgba(3,54,39,.3));display:flex;justify-content:center}
.rcpt{background:#fff;color:#1b2a24;font:400 .95rem/1.5 var(--mono);padding:30px 26px 46px;width:min(100%,400px);transform:rotate(-1.6deg)}
.rcpt h4{font:500 1.05rem/1.3 var(--mono);text-align:center;margin-bottom:4px}
.rcpt p{text-align:center;color:var(--muted);font-size:.86rem;margin-bottom:16px}
.rcpt .r{display:grid;grid-template-columns:1fr auto 92px;gap:10px;align-items:center;padding:7px 0;border-top:1px dashed #cfd8d3}
.rcpt .r b{font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
.rcpt .r em{font:600 .66rem/1 var(--body);font-style:normal;letter-spacing:.06em;text-transform:uppercase;padding:5px 8px;border-radius:999px;background:var(--plate);color:var(--green);text-align:center}
.rcpt .r em.q{background:var(--amber-bg);color:var(--amber)}
.rcpt .tot{border-top:2px solid #1b2a24;font-weight:500}
/* inventory: stock movements */
.moves{display:flex;flex-direction:column;gap:8px}
.moves div{display:grid;grid-template-columns:minmax(150px,1.1fr) 56px 2fr 54px;gap:12px;align-items:center;font-size:.98rem}
.moves span{font-weight:500;color:var(--ink)}
.moves b{font:500 .95rem var(--mono);text-align:right}
.moves b.p{color:var(--green)}.moves b.m{color:var(--red)}
.moves i{display:block;height:26px;border-radius:6px;background:var(--accent)}
.moves u{text-decoration:none;font:500 .95rem var(--mono);color:var(--muted);text-align:right}
/* practice: the board */
.board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.board>div{min-width:0;overflow-wrap:anywhere;background:var(--paper);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:8px}
.board h4{font:600 .74rem/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;padding:4px 4px 8px}
.board p{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px;font-weight:500;color:var(--ink);font-size:.95rem;line-height:1.3}
.board p small{display:block;font-weight:400;color:var(--muted);margin-top:4px}
.board p em{font:600 .66rem/1 var(--body);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--green);display:inline-block;margin-top:8px;padding:4px 7px;border-radius:999px;background:var(--plate)}
/* insurance: the renewal line */
.renew{position:relative;display:grid;grid-template-columns:repeat(4,1fr);border-top:3px solid var(--line-dark);margin-top:10px}
.renew li{padding-top:22px;position:relative;color:#fff;font-weight:500}
.renew li::before{content:"";position:absolute;top:-10px;left:0;width:17px;height:17px;border-radius:50%;background:var(--field);border:3px solid var(--mint)}
.renew li.now::before{background:var(--mint)}
.renew small{display:block;color:var(--on-field-muted);font-weight:400}
/* solutions */
.matrix{border:1px solid var(--line);border-radius:18px;overflow-x:auto;background:#fff}
.matrix table{min-width:640px}
.matrix th{text-align:center}.matrix th:first-child{text-align:left}
.matrix th img{width:26px;height:26px;margin:0 auto 6px}
.matrix td{text-align:center}.matrix td:first-child{text-align:left;font-weight:500;color:var(--ink)}
.matrix td i{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--accent)}
.matrix td i.o{background:transparent;border:2px solid var(--line)}
.month{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff}
.month li{padding:24px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.month li:first-child{border-left:0}
.month b{font:600 .74rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
.month h3{font-size:1.25rem}
.month p{color:var(--muted);font-size:.96rem}
.month li.done{background:var(--plate)}
.cycle{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:c}
.cycle li{counter-increment:c;padding:26px 22px;border:1px solid var(--line-dark);border-left-width:0;position:relative;color:#fff;font-weight:500}
.cycle li:first-child{border-left-width:1px;border-radius:16px 0 0 16px}.cycle li:last-child{border-radius:0 16px 16px 0}
.cycle li::before{content:counter(c);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--mint);color:var(--field);font:600 1rem var(--display);margin-bottom:14px}
.cycle li small{display:block;color:var(--on-field-muted);font-weight:400;margin-top:4px}
.loop{margin-top:14px;border:1px dashed var(--line-dark);border-top:0;border-radius:0 0 16px 16px;padding:12px;text-align:center;color:var(--mint);font-weight:600;font-size:.9rem}
.big3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.big3 li{background:var(--plate);border-radius:26px;padding:32px;display:flex;flex-direction:column;gap:10px}
.big3 li b{font:600 4.4rem/1 var(--display);color:var(--accent)}
.big3 h3{font-size:1.6rem}
.big3 p{color:var(--muted);font-size:1.08rem}
.sees{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.sees>div{border-radius:22px;padding:30px;background:var(--paper)}
.sees>div+div{background:var(--ink)}.sees>div+div h3{color:#fff}.sees>div+div li{color:var(--on-field-muted);border-color:var(--line-dark)}
.sees li{padding:12px 0;border-top:1px solid var(--line);color:var(--muted)}
.sees h3{margin-bottom:12px}
.rolecards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.rolecards div{border:1px solid var(--line);border-radius:18px;padding:24px}
.rolecards b{font:600 .74rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
.rolecards h3{font-size:1.25rem;margin:8px 0 6px}.rolecards p{color:var(--muted);font-size:.96rem}

/* pricing */
.plan{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);border:1px solid var(--line);border-radius:28px;overflow:hidden;background:#fff;box-shadow:0 40px 80px -40px rgba(3,54,39,.35)}
.plan .l{background:var(--field);color:var(--on-field);padding:clamp(28px,4vw,48px);display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.plan .l img{height:34px}
.plan .l h2{color:#fff;font-size:clamp(3.4rem,7vw,5.4rem);line-height:.95}
.plan .l h2 small{font:500 1.1rem var(--body);color:var(--on-field-muted)}
.plan .l s{color:var(--on-field-muted);font-size:1.3rem}
.plan .l p{color:var(--on-field-muted)}
.plan .r{padding:clamp(28px,4vw,48px)}
.plan .r h3{margin-bottom:8px}
.plan .r li{padding:13px 0 13px 32px;border-top:1px solid var(--line);position:relative}
.plan .r li::before{content:"";position:absolute;left:4px;top:19px;width:14px;height:8px;border:solid var(--accent);border-width:0 0 2.5px 2.5px;transform:rotate(-45deg)}
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.calc .in{display:flex;flex-direction:column;gap:26px}
.calc label{display:flex;justify-content:space-between;gap:12px;font-size:1rem;margin-bottom:10px}
.calc label output{font:600 1.1rem var(--display);color:var(--accent)}
.calc small{color:var(--muted);font-size:.86rem}
input[type=range]{width:100%;accent-color:var(--accent);height:28px}
.calc .out{background:var(--field);color:var(--on-field);border-radius:26px;padding:clamp(24px,4vw,40px);display:flex;flex-direction:column;gap:18px;position:sticky;top:150px}
.calc .out h3{color:#fff}
.calc .meter{height:14px;border-radius:999px;background:var(--line-dark);overflow:hidden;display:flex}
.calc .meter i{display:block;height:100%;background:var(--mint)}
.calc .meter i+i{background:#e8a23a}
.calc .ln{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line-dark);color:var(--on-field-muted)}
.calc .ln b{color:#fff;font-variant-numeric:tabular-nums}
.calc .totl{font:600 2.6rem/1 var(--display);color:#fff}
.calc .totl small{font:500 1rem var(--body);color:var(--on-field-muted)}
.uses{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.uses li{background:#fff;padding:26px}
.uses b{display:block;font:600 2.2rem/1 var(--display);color:var(--ink)}
.uses b small{font:500 .95rem var(--body);color:var(--muted)}
.uses span{display:block;margin-top:10px;color:var(--muted)}
.uses li.free b{color:var(--accent)}
.ptable td:nth-child(n+2),.ptable th:nth-child(n+2){text-align:right;font-variant-numeric:tabular-nums}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.pgrid .card{gap:12px}
.pgrid .card .st{align-self:flex-start;background:var(--plate);color:var(--green);font:600 .72rem/1 var(--body);padding:5px 10px;border-radius:999px}
.pgrid .card .big{font:600 1.5rem/1.1 var(--display);color:var(--ink)}
.firmcard{display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:center;border:1px solid var(--ink);border-radius:26px;padding:clamp(28px,4vw,48px)}
@media (max-width:720px){.plan,.calc,.firmcard,.hero.split .wrap.hs{grid-template-columns:minmax(0,1fr)}.board,.gate,.cycle,.renew{grid-template-columns:repeat(2,minmax(0,1fr))}.cycle li{border-left-width:1px;border-radius:0!important}.calc .out{position:static}.g2n div{grid-template-columns:100px 1fr}.moves div{grid-template-columns:1fr 50px 50px}.moves i{display:none}}

/* ---------- compact header ----------
   Below 1000px the menu sits behind the Menu button; below 600px the waitlist button moves
   into that panel too. script.js adds the same two states as classes (.compact, .tight)
   whenever the row would not fit, for example with text enlarged to 200% on a wide screen.
   On a product page the collapsed bar keeps its section links (Overview, Features, Pricing,
   FAQ) in view as one row under the logo that scrolls sideways; Menu still opens the full list.
   The two copies of these rules must stay the same. */
@media (max-width:1000px){
  .nav{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:0 12px;height:auto;min-height:72px;padding-block:10px}
  .nav .logo{grid-area:1/1;justify-self:start;min-width:0;max-width:100%}
  .nav .logo img{flex:0 1 auto;min-width:0;max-width:100%}
  .nav .acts{grid-area:1/2}
  .nav .menu-btn{grid-area:1/3;display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:999px;border:1.5px solid var(--line);font-weight:600;color:var(--ink)}
  .nav .menu-btn[aria-expanded="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
  .nav ul{display:none;grid-area:3/1/auto/-1;flex-direction:column;gap:0;margin-top:10px;border-top:1px solid var(--line)}
  .nav.open ul{display:flex}
  .nav li>button,.nav li>a{display:flex;justify-content:space-between;width:100%;height:auto;min-height:52px;padding:8px 4px;border-radius:0;border-bottom:1px solid var(--line);font-size:1.06rem;white-space:normal;text-align:left}
  .nav li>button:hover,.nav li>a:hover,.nav li>button[aria-expanded="true"]{background:none}
  .nav li.allp{margin-left:0}
  .nav .msw{grid-area:2/1/auto/-1;position:static;width:auto;max-width:none;max-height:none;margin-top:10px;box-shadow:none}
  .nav .mega:not(.msw){grid-area:4/1/auto/-1;position:static;box-shadow:none;border:0}
  .nav .mega:not(.msw) .wrap{grid-template-columns:1fr;padding:16px 0 8px}
  .nav.open .acts{grid-area:5/1/auto/-1;padding-top:14px}
  .nav.open .acts .btn{width:100%}
  header.site:has(.nav.open,.msw.on){max-height:100dvh;overflow-y:auto}
  .nav.pnav{min-height:0;padding-block:6px}
  .nav.pnav:not(.open) ul{display:flex;flex-direction:row;gap:4px;min-width:0;margin-top:6px;padding:6px 6px 4px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  .nav.pnav:not(.open) ul::-webkit-scrollbar{display:none}
  .nav.pnav:not(.open) li{flex:none}
  .nav.pnav:not(.open) li>a{display:inline-flex;width:auto;height:40px;min-height:40px;padding:0 14px;border-radius:999px;border-bottom:0;font-size:.98rem;white-space:nowrap}
  .nav.pnav:not(.open) li>a[aria-current]{background:var(--plate)}
  .nav.pnav:not(.open) li.allp{margin-left:auto}
  .nav.pnav.measure ul{display:none!important}
}
@media (max-width:600px){.nav .acts{display:none}.nav.open .acts{display:flex}}
.nav.compact{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:0 12px;height:auto;min-height:72px;padding-block:10px}
.nav.compact .logo{grid-area:1/1;justify-self:start;min-width:0;max-width:100%}
.nav.compact .logo img{flex:0 1 auto;min-width:0;max-width:100%}
.nav.compact .acts{grid-area:1/2}
.nav.compact .menu-btn{grid-area:1/3;display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:999px;border:1.5px solid var(--line);font-weight:600;color:var(--ink)}
.nav.compact .menu-btn[aria-expanded="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.nav.compact ul{display:none;grid-area:3/1/auto/-1;flex-direction:column;gap:0;margin-top:10px;border-top:1px solid var(--line)}
.nav.compact.open ul{display:flex}
.nav.compact li>button,.nav.compact li>a{display:flex;justify-content:space-between;width:100%;height:auto;min-height:52px;padding:8px 4px;border-radius:0;border-bottom:1px solid var(--line);font-size:1.06rem;white-space:normal;text-align:left}
.nav.compact li>button:hover,.nav.compact li>a:hover,.nav.compact li>button[aria-expanded="true"]{background:none}
.nav.compact li.allp{margin-left:0}
.nav.compact .msw{grid-area:2/1/auto/-1;position:static;width:auto;max-width:none;max-height:none;margin-top:10px;box-shadow:none}
.nav.compact .mega:not(.msw){grid-area:4/1/auto/-1;position:static;box-shadow:none;border:0}
.nav.compact .mega:not(.msw) .wrap{grid-template-columns:1fr;padding:16px 0 8px}
.nav.compact.open .acts{grid-area:5/1/auto/-1;padding-top:14px}
.nav.compact.open .acts .btn{width:100%}
.nav.tight .acts{display:none}
.nav.tight.open .acts{display:flex}
header.site:has(.nav.compact.open,.nav.compact .msw.on){max-height:100dvh;overflow-y:auto}
.nav.compact.pnav{min-height:0;padding-block:6px}
.nav.compact.pnav:not(.open) ul{display:flex;flex-direction:row;gap:4px;min-width:0;margin-top:6px;padding:6px 6px 4px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.nav.compact.pnav:not(.open) ul::-webkit-scrollbar{display:none}
.nav.compact.pnav:not(.open) li{flex:none}
.nav.compact.pnav:not(.open) li>a{display:inline-flex;width:auto;height:40px;min-height:40px;padding:0 14px;border-radius:999px;border-bottom:0;font-size:.98rem;white-space:nowrap}
.nav.compact.pnav:not(.open) li>a[aria-current]{background:var(--plate)}
.nav.compact.pnav:not(.open) li.allp{margin-left:auto}
.nav.compact.pnav.measure ul{display:none!important}
/* script.js lays the row out unbroken for a moment to see whether it fits. */
.nav.measure{display:flex!important;flex-wrap:nowrap!important}
.nav.measure>*{flex:none!important}
.nav.measure .logo img{max-width:none!important}

@media (max-width:960px){
  footer .cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  footer .cols>div,footer .cols>div+div{padding:20px 12px 20px 0;border-left:0}
  footer .legal .sp{margin-left:0}
  .console{grid-template-columns:1fr}
  .console nav{flex-direction:row;flex-wrap:wrap;align-items:center}
  .console nav img{margin:0 12px 0 0}
}
@media (max-width:720px){
  .story .grid,.rpanel,.feat,.suitecard,.auth,.pricebox{grid-template-columns:minmax(0,1fr)}
  .feat.flip>.txt{order:0}
  .pc,.pc.wide{grid-column:span 6}
  .auth .art{min-height:300px}
  .subnav .btn{display:none}
  .story .stg{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}.story .track{height:auto}.story .stg{position:static;min-height:0;padding-block:96px}}

/* ---------- kept pages: privacy and terms keep their approved text; only the frame is new ---------- */
main.legal{max-width:860px;padding-block:clamp(48px,7vw,104px)}
main.legal h1{font-size:clamp(2.4rem,5vw,3.8rem)}
main.legal h2{font-size:clamp(1.35rem,2.4vw,1.75rem);margin-top:44px}
main.legal p,main.legal li{color:var(--muted);margin-top:14px;max-width:72ch}
main.legal ul{list-style:disc;padding-left:22px}
main.legal strong{color:var(--text);font-weight:600}
main.legal a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:.2em}
main.legal .legal-date{font-size:.92rem;margin-top:16px}

/* Reflow: on a narrow screen, or with text enlarged to 200%, a long word or an email address
   breaks onto the next line instead of pushing the page sideways. */
@media (max-width:720px){body{overflow-wrap:anywhere}main .btn,footer .btn{white-space:normal;text-align:center;line-height:1.2;padding-block:10px;max-width:100%}.sw{flex:0 1 auto;min-width:0}.sw>button{max-width:100%;text-align:left;white-space:normal}.subnav .wrap{height:auto;min-height:58px}}