/* Dueclear website — shell and components.
   Light, mint and sage, restrained type. Display: Schibsted Grotesk. Body: Hanken Grotesk. Labels: IBM Plex Mono. */
:root{
  --paper:#f7faf5; --white:#ffffff; --ink:#17392a; --ink-2:#4b6254; --ink-3:#7a8c7f;
  --line:#dfe8da; --line-2:#cddcc6; --green:#15603c; --green-2:#1d7a4c; --mint:#e6f2df; --mint-2:#d6eacb;
  --sage:#bcd6b0; --forest:#11301f; --forest-2:#1a4330; --butter:#f4ecd2; --amber:#a5641a; --red:#a8471f;
  --display:"Schibsted Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r-s:12px; --r:20px; --r-l:30px;
  --shadow:0 1px 2px rgba(17,48,31,.05),0 10px 30px rgba(17,48,31,.07);
  --shadow-l:0 30px 80px -20px rgba(17,48,31,.28),0 8px 24px rgba(17,48,31,.08);
  --gutter:max(20px,env(safe-area-inset-left,0px));
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body.www{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.www img{max-width:100%;height:auto;display:block}
.www a{color:inherit}
.www h1,.www h2,.www h3,.www h4{font-family:var(--display);font-weight:500;letter-spacing:-.03em;line-height:1.1;margin:0;text-wrap:balance}
.www p,.www li{text-wrap:pretty}
.www p{margin:0}
.www :focus-visible{outline:2px solid var(--green-2);outline-offset:3px;border-radius:6px}
.www svg[aria-hidden="true"]{width:20px;height:20px;flex:none}
.logo-mark svg{width:22px!important;height:22px!important}
.ftr .proto svg{width:14px;height:14px}
.titem .ci svg{width:20px;height:20px}
.sec,.hero,.page-hero{overflow-x:clip}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:10px 14px;border-radius:10px;z-index:100}
.skip:focus{left:12px}
.container{width:100%;max-width:1200px;margin:0 auto;padding-left:var(--gutter);padding-right:max(20px,env(safe-area-inset-right,0px))}
.eyebrow{font:500 12px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--green-2)}
.lead{font-size:20px;line-height:1.55;color:var(--ink-2);max-width:640px}
.muted{color:var(--ink-3)}
.fine{font-size:14px;color:var(--ink-3)}

/* buttons */
.b{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:999px;padding:13px 22px;font:500 16px/1 var(--body);text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:transform .15s,background .15s,border-color .15s}
.b:hover{transform:translateY(-1px)}
.b.primary{background:var(--ink);color:#fff}
.b.primary:hover{background:#0c2418}
.b.green{background:var(--green);color:#fff}
.b.ghost{background:var(--white);border-color:var(--line-2);color:var(--ink)}
.b.ghost:hover{border-color:var(--ink-3)}
.b.light{background:#fff;color:var(--forest)}
.b.sm{padding:9px 15px;font-size:14.5px}
.b svg{width:18px;height:18px;flex:none}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---------- header ---------- */
.hdr{position:sticky;top:12px;z-index:50;padding:0 var(--gutter);margin-top:12px}
.hdr-in{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:20px;background:rgba(255,255,255,.86);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border:1px solid var(--line);border-radius:999px;padding:9px 10px 9px 18px;box-shadow:0 1px 2px rgba(17,48,31,.04);transition:box-shadow .2s}
.hdr.scrolled .hdr-in{box-shadow:var(--shadow)}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:500 19px var(--display);letter-spacing:-.02em;color:var(--ink)}
.logo-mark{width:32px;height:32px;border-radius:9px;background:var(--green);display:grid;place-items:center;flex:none}
.nav{display:flex;align-items:center;gap:2px;flex:1;justify-content:center}
.nav>a,.nav .dd>button{font:500 15px var(--body);color:var(--ink);text-decoration:none;background:none;border:0;padding:9px 13px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.nav>a:hover,.nav .dd>button:hover,.nav .dd.open>button{background:var(--mint)}
.nav>a[aria-current="page"],.nav .dd.current>button{color:var(--green)}
.nav .dd>button svg{width:14px;height:14px;transition:transform .2s}
.nav .dd.open>button svg{transform:rotate(180deg)}
.dd{position:relative}
.menu{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-l);padding:10px;width:max-content;max-width:min(760px,94vw);display:none}
.dd.open .menu{display:block}
.menu.two{display:none;grid-template-columns:1fr 1fr;gap:2px}
.dd.open .menu.two{display:grid}
.menu a{display:flex;gap:12px;align-items:flex-start;padding:11px 12px;border-radius:14px;text-decoration:none;min-width:250px;max-width:360px}
.menu a:hover,.menu a:focus-visible{background:var(--paper)}
.menu a[aria-current="page"]{background:var(--mint)}
.menu .mi{width:34px;height:34px;border-radius:10px;background:var(--mint);display:grid;place-items:center;flex:none;color:var(--green)}
.menu .mi svg{width:18px;height:18px}
.menu b{display:block;font-weight:600;font-size:15px;line-height:1.3}
.menu small{display:block;font-size:13.5px;color:var(--ink-3);line-height:1.35;margin-top:2px;text-wrap:balance}
.hdr-right{display:flex;align-items:center;gap:8px}
.lang{appearance:none;border:1px solid var(--line);background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234b6254' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center;border-radius:999px;padding:8px 30px 8px 13px;font:500 14px var(--body);color:var(--ink);cursor:pointer}
.burger{display:none;width:42px;height:42px;border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer;place-items:center}
.burger svg{width:20px;height:20px}
.mnav{display:none}
@media (max-width:980px){
  .nav,.hdr-right .lang,.hdr-right .b{display:none}
  .burger{display:grid}
  .hdr-in{justify-content:space-between}
  .mnav{position:fixed;inset:0;z-index:60;background:var(--paper);overflow-y:auto;padding:calc(18px + env(safe-area-inset-top,0px)) var(--gutter) 40px;flex-direction:column;gap:22px}
  .mnav.open{display:flex}
  .mnav .mtop{display:flex;justify-content:space-between;align-items:center}
  .mnav h4{font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:6px 0 4px}
  .mnav a.ml{display:block;padding:11px 2px;border-bottom:1px solid var(--line);text-decoration:none;font-size:18px}
  .mnav .mlangs{display:flex;flex-wrap:wrap;gap:8px}
  .mnav .mlangs a{padding:8px 14px;border:1px solid var(--line);border-radius:999px;text-decoration:none;font-size:15px}
  .mnav .mlangs a[aria-current]{background:var(--ink);color:#fff;border-color:var(--ink)}
}

/* ---------- sections ---------- */
.sec{padding:96px 0}
.sec.tight{padding:64px 0}
.sec-h{display:flex;flex-direction:column;gap:16px;max-width:760px;margin-bottom:48px}
.sec-h.center{text-align:center;align-items:center;margin-left:auto;margin-right:auto}
.sec-h h2{font-size:clamp(32px,4.4vw,52px)}
.band{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band.mint{background:var(--mint);border-color:var(--mint-2)}

/* hero */
.hero{padding:76px 0 24px;overflow-x:clip}
.hero-grid{display:flex;flex-direction:column;align-items:center;gap:52px}
.hero h1{font-size:clamp(36px,7.4vw,96px);line-height:1;letter-spacing:-.05em}
.hero .copy{display:flex;flex-direction:column;gap:26px;align-items:center;text-align:center;max-width:980px}
.hero .copy .lead{max-width:700px}
.hero .copy .actions{justify-content:center}
.hero .devices{width:100%;max-width:1100px}
.hero .desk{padding:6% 10% 3% 7%}
.hero .note{font-size:14px;color:var(--ink-3);display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.hero .note span{display:inline-flex;align-items:center;gap:6px}
.hero .note svg{width:15px;height:15px;color:var(--green-2)}
.page-hero{padding:80px 0 48px}
.page-hero .ph-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.page-hero h1{font-size:clamp(38px,5vw,62px);letter-spacing:-.04em}
.page-hero .copy{display:flex;flex-direction:column;gap:22px}
.page-hero.solo .ph-grid{grid-template-columns:minmax(0,1fr)}
.page-hero.solo .copy{max-width:820px}
.crumbs{font:500 13px var(--mono);color:var(--ink-3);display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--green)}

/* device mockups */
.devices{position:relative;padding:20px 0 40px}
.laptop{position:relative;width:100%;padding-bottom:3%}
.laptop .lid{position:relative;background:#0a0c0b;border-radius:clamp(10px,1.9vw,24px) clamp(10px,1.9vw,24px) clamp(4px,.5vw,7px) clamp(4px,.5vw,7px);padding:1.55% 1.55% 2.3%;
  box-shadow:0 0 0 1px #2c312e inset,0 0 0 clamp(1.5px,.18vw,2.5px) #c3c8c5,0 0 0 clamp(2.5px,.3vw,4px) #9ea5a1,0 50px 70px -30px rgba(17,48,31,.45)}
.laptop .lid::before{content:"";position:absolute;top:.62%;left:50%;width:clamp(4px,.45vw,7px);aspect-ratio:1;border-radius:50%;transform:translateX(-50%);background:radial-gradient(circle at 35% 35%,#3c4a52 0,#121618 55%,#050606 100%);box-shadow:0 0 0 1px #1b1f1d}
.laptop .screen{position:relative;aspect-ratio:16/10;background:#fff;border-radius:clamp(2px,.35vw,5px);overflow:hidden}
.laptop .screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.035) 28%,rgba(255,255,255,0) 42%)}
.laptop .screen img,.laptop .screen video{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
.laptop .base{position:relative;height:clamp(9px,1.45vw,20px);margin:0 -6.8%;border-radius:2px 2px clamp(10px,1.5vw,22px) clamp(10px,1.5vw,22px)/2px 2px clamp(7px,1vw,14px) clamp(7px,1vw,14px);
  background:linear-gradient(180deg,#5d6460 0,#5d6460 7%,#eef1ef 9%,#dfe3e1 30%,#c4cac7 62%,#9aa29e 88%,#7d8581 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 18px 30px -12px rgba(17,48,31,.45),0 34px 60px -24px rgba(17,48,31,.35)}
.laptop .base::before{content:"";position:absolute;top:9%;left:50%;width:15%;height:44%;transform:translateX(-50%);border-radius:0 0 clamp(5px,.7vw,10px) clamp(5px,.7vw,10px);background:linear-gradient(180deg,#b9c0bc,#d7dcd9)}
.laptop .base::after{content:"";position:absolute;left:4%;right:4%;bottom:-38%;height:40%;background:radial-gradient(ellipse at center,rgba(17,48,31,.28),rgba(17,48,31,0) 70%);filter:blur(4px)}
.phone{position:absolute;right:-2%;bottom:0;width:27%;padding:clamp(2px,.25vw,3.5px);border-radius:clamp(26px,3.6vw,52px);
  background:linear-gradient(145deg,#7c8580 0%,#3b413e 22%,#202523 50%,#3e4541 78%,#8a938e 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.35),0 40px 60px -24px rgba(17,48,31,.5),0 12px 24px -10px rgba(17,48,31,.25)}
.phone::before,.phone::after{content:"";position:absolute;width:clamp(2px,.25vw,3.5px);border-radius:2px;background:linear-gradient(90deg,#4a514d,#8a938e)}
.phone::before{left:calc(-1 * clamp(2px,.25vw,3.5px));top:20%;height:9%;box-shadow:0 calc(clamp(30px,4.4vw,64px)) 0 #5b625e}
.phone::after{right:calc(-1 * clamp(2px,.25vw,3.5px));top:26%;height:13%;background:linear-gradient(270deg,#4a514d,#8a938e)}
.phone .ps{position:relative;border:clamp(5px,.75vw,11px) solid #050606;border-radius:clamp(23px,3.3vw,48px);overflow:hidden;aspect-ratio:390/844;background:#fff}
.phone .ps::before{content:"";position:absolute;z-index:2;top:clamp(5px,.75vw,10px);left:50%;width:31%;height:clamp(9px,1.25vw,18px);transform:translateX(-50%);border-radius:999px;background:#050606}
.phone .ps::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(125deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,0) 35%)}
.phone .ps{padding-top:clamp(18px,2.6vw,36px)}.phone .ps img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.phone.solo{position:relative;right:auto;bottom:auto;width:min(300px,70%);margin:0 auto}
.desk{position:relative;border-radius:var(--r-l);background:radial-gradient(120% 90% at 30% 10%,#ffffff 0%,var(--mint) 55%,var(--mint-2) 100%);padding:7% 9% 4% 6%}
.desk.plain{background:none;padding:0}
.browser{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-l)}
.browser .bar{display:flex;gap:6px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);background:#fbfcfa}
.browser .bar i{width:10px;height:10px;border-radius:50%;background:#dfe5dc}
.browser .bar span{margin-left:12px;font:12px var(--mono);color:var(--ink-3);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:3px 12px}
.browser img{width:100%}

/* toolkit slider */
.kit{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(0,1.6fr);gap:40px;align-items:start}
.kit-tabs{display:flex;flex-direction:column;gap:6px}
.kit-tab{all:unset;cursor:pointer;display:grid;grid-template-columns:40px 1fr;gap:4px 14px;padding:16px 18px;border-radius:18px;border:1px solid transparent;position:relative;overflow:hidden}
.kit-tab:focus-visible{outline:2px solid var(--green-2)}
.kit-tab .ki{grid-row:span 2;width:40px;height:40px;border-radius:12px;background:var(--white);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-2)}
.kit-tab .ki svg{width:19px;height:19px}
.kit-tab b{font:500 18px var(--display);letter-spacing:-.02em}
.kit-tab small{font-size:14.5px;color:var(--ink-3);line-height:1.4;display:none}
.kit-tab[aria-selected="true"]{background:var(--white);border-color:var(--line);box-shadow:var(--shadow)}
.kit-tab[aria-selected="true"] .ki{background:var(--green);border-color:var(--green);color:#fff}
.kit-tab[aria-selected="true"] small{display:block}
.kit-tab .prog{position:absolute;left:18px;right:18px;bottom:8px;height:2px;background:var(--line);border-radius:2px;overflow:hidden;display:none}
.kit-tab[aria-selected="true"] .prog{display:block}
.kit-tab .prog i{display:block;height:100%;width:0;background:var(--green-2)}
.kit-stage{position:relative;min-width:0}
.kit-panel{display:none;flex-direction:column;gap:22px}
.kit-panel.on{display:flex;animation:kitIn .45s ease}
@keyframes kitIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.kit-panel .kp-copy{display:flex;flex-direction:column;gap:12px;max-width:620px}
.kit-panel h3{font-size:clamp(24px,2.6vw,32px)}
.kit-panel p{color:var(--ink-2)}
.ticks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.ticks li{display:flex;gap:10px;align-items:flex-start}
.ticks li svg{width:18px;height:18px;color:var(--green-2);flex:none;margin-top:4px}
.ticks.row{flex-direction:row;flex-wrap:wrap;gap:8px 22px}
.kit-visual{position:relative;border-radius:var(--r);background:linear-gradient(160deg,var(--mint) 0%,var(--mint-2) 100%);padding:28px 28px 0;overflow:hidden;min-height:200px}
.kit-visual .browser{border-bottom-left-radius:0;border-bottom-right-radius:0;box-shadow:0 20px 50px -10px rgba(17,48,31,.25)}
.kit-visual.phone-v{display:flex;justify-content:center;padding:28px 28px 0}
.kit-visual.phone-v .phone{position:relative;right:auto;bottom:auto;width:240px;border-bottom-left-radius:0;border-bottom-right-radius:0;padding-bottom:0}.kit-visual.phone-v .phone::after,.kit-visual.phone-v .phone::before{display:none}
.kit-visual.phone-v .phone .ps{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:0;aspect-ratio:390/600}
.kit-nav{display:flex;gap:8px;margin-top:4px}
.kit-nav button{width:42px;height:42px;border-radius:999px;border:1px solid var(--line-2);background:#fff;cursor:pointer;display:grid;place-items:center}
.kit-nav button svg{width:18px;height:18px}
.text-link{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--green);text-decoration:none}
.text-link:hover{text-decoration:underline}
.text-link svg{width:16px;height:16px}

/* marquee */
.marquee{display:flex;flex-direction:column;gap:14px;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);overflow:hidden}
.mq-row{display:flex;gap:14px;width:max-content;animation:mq 60s linear infinite}
.mq-row.rev{animation-direction:reverse;animation-duration:70s}
.marquee:hover .mq-row{animation-play-state:paused}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tile{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px 22px 14px 14px;white-space:nowrap}
.tile .ti{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--mint);color:var(--green)}
.tile .ti svg{width:22px;height:22px}
.tile.b2 .ti{background:var(--butter);color:var(--amber)}
.tile b{font-weight:600;font-size:16px}
.tile small{display:block;font-size:13px;color:var(--ink-3)}
@media (prefers-reduced-motion:reduce){.mq-row{animation:none;flex-wrap:wrap;width:auto}.mq-row [aria-hidden="true"]{display:none}}

/* video */
.tour{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr);gap:48px;align-items:center}
.vwrap{position:relative}
.vplay{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(180deg,rgba(17,48,31,.0),rgba(17,48,31,.35));border:0;cursor:pointer;color:#fff}
.vplay span{display:inline-flex;align-items:center;gap:12px;background:rgba(255,255,255,.95);color:var(--ink);border-radius:999px;padding:14px 22px 14px 16px;font:600 16px var(--body);box-shadow:var(--shadow-l)}
.vplay span i{width:38px;height:38px;border-radius:50%;background:var(--green);display:grid;place-items:center}
.vplay span i svg{width:16px;height:16px;color:#fff;margin-left:2px}
.vplay[hidden]{display:none}
.vcap{position:absolute;left:6%;right:6%;bottom:6%;text-align:center;pointer-events:none}
.vcap span{display:inline;background:rgba(10,24,16,.82);color:#fff;font:500 clamp(12px,1.45vw,17px)/1.5 var(--body);padding:3px 10px;border-radius:6px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.vctrl{display:flex;align-items:center;gap:12px;margin-top:18px;flex-wrap:wrap}
.vctrl .vbtn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:#fff;cursor:pointer;display:grid;place-items:center;flex:none}
.vctrl .vbtn svg{width:18px;height:18px}
.vctrl input[type=range]{flex:1;min-width:120px;accent-color:var(--green)}
.vctrl .vt{font:13px var(--mono);color:var(--ink-3);font-variant-numeric:tabular-nums;min-width:86px}
.vctrl .vcc[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.chapters{display:flex;flex-direction:column;gap:6px}
.chapters button{all:unset;cursor:pointer;display:grid;grid-template-columns:52px 1fr;gap:12px;padding:12px 14px;border-radius:14px;border:1px solid transparent;align-items:baseline}
.chapters button:hover{background:#fff;border-color:var(--line)}
.chapters button.on{background:#fff;border-color:var(--line);box-shadow:var(--shadow)}
.chapters button:focus-visible{outline:2px solid var(--green-2)}
.chapters .t{font:500 13px var(--mono);color:var(--ink-3)}
.chapters b{font-weight:600}
.chapters small{display:block;color:var(--ink-3);font-size:14px}
.vstatus{font-size:14px;color:var(--ink-3);min-height:1em}
.transcript{margin-top:20px;border-top:1px solid var(--line);padding-top:14px}
.transcript summary{cursor:pointer;font-weight:600}
.transcript p{margin-top:10px;color:var(--ink-2);max-width:720px}

/* cards & grids */
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;display:flex;flex-direction:column;gap:12px;min-width:0}
.card h3{font-size:22px}
.card p{color:var(--ink-2);font-size:16px}
.card .ci{width:44px;height:44px;border-radius:13px;background:var(--mint);color:var(--green);display:grid;place-items:center}
.card .ci svg{width:21px;height:21px}
.card.link{text-decoration:none;transition:border-color .15s,transform .15s}
.card.link:hover{border-color:var(--sage);transform:translateY(-2px)}
.card .more{margin-top:auto;padding-top:6px}

/* split feature */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:64px;align-items:center}
.split+.split{margin-top:96px}
.split.rev>:first-child{order:2}
.split .copy{display:flex;flex-direction:column;gap:16px}
.split h3{font-size:clamp(26px,3vw,36px)}
.split p{color:var(--ink-2)}
.shot{border-radius:var(--r);background:linear-gradient(160deg,var(--mint),var(--mint-2));padding:26px;overflow:hidden}
.shot .browser{box-shadow:0 20px 50px -12px rgba(17,48,31,.25)}
.shot.crop .browser{max-height:440px}
.shot.crop .browser img{object-fit:cover;object-position:top left}

/* steps */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:10px}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);font:500 13px var(--mono);color:var(--green-2)}
.step h3{font-size:20px}
.step p{color:var(--ink-2);font-size:16px}

/* story / scenario */
.story{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start}
.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.timeline li{display:grid;grid-template-columns:90px 1fr;gap:18px;padding:18px 0;border-top:1px solid var(--line)}
.timeline li:last-child{border-bottom:1px solid var(--line)}
.timeline .when{font:500 13px var(--mono);color:var(--green-2);padding-top:3px}
.timeline b{display:block;font-weight:600;margin-bottom:4px}
.timeline p{color:var(--ink-2);font-size:16px}

/* before/after */
.ba{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.ba .col{border-radius:var(--r);padding:30px;display:flex;flex-direction:column;gap:14px}
.ba .before{background:#fff;border:1px solid var(--line)}
.ba .after{background:var(--forest);color:#e6f0e9}
.ba h3{font-size:22px}
.ba ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.ba li{display:flex;gap:10px}
.ba li svg{width:18px;height:18px;flex:none;margin-top:4px}
.ba .before li svg{color:var(--red)}
.ba .after li svg{color:#8fd6a9}

/* dark data section */
.dark{background:var(--forest);color:#e2ede5}
.dark .eyebrow{color:#8fd6a9}
.dark .lead,.dark p{color:#b9cfc0}
.dark h2,.dark h3{color:#fff}
.dcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:8px}
.dcard{background:var(--forest-2);border:1px solid #2a5640;border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:10px}
.dcard .ci{width:44px;height:44px;border-radius:13px;background:#24543c;color:#a6e3bd;display:grid;place-items:center}
.dcard .ci svg{width:21px;height:21px}
.dcard h3{font-size:21px}
.commit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;margin-top:40px;border-top:1px solid #2a5640}
.commit div{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid #2a5640;align-items:center}
.pill{font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:6px 9px;border-radius:999px;white-space:nowrap}
.pill.now{background:#2b6a49;color:#d4f3e0}
.pill.later{background:transparent;color:#b9cfc0;border:1px solid #3c6b53}
.pill.lnow{background:var(--mint);color:var(--green)}
.pill.llater{background:transparent;color:var(--ink-3);border:1px solid var(--line-2)}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px;display:flex;flex-direction:column;gap:14px}
.plan.feat{border:2px solid var(--green);background:#fbfdf8}
.plan .amt{font:500 54px/1 var(--display);letter-spacing:-.04em}
.plan .amt span{font:500 16px var(--body);letter-spacing:0;color:var(--ink-3)}
.plan hr{border:0;border-top:1px solid var(--line);margin:4px 0;width:100%}
.plan .b{margin-top:auto}

/* table */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff}
table.tbl{width:100%;border-collapse:collapse;font-size:15.5px;min-width:640px}
.tbl th,.tbl td{text-align:left;padding:16px 18px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl thead th{font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);background:var(--paper)}
.tbl tbody tr:last-child td,.tbl tbody tr:last-child th{border-bottom:0}
.tbl tr.us{background:var(--mint)}
.tbl a{color:inherit}

/* faq */
.faq{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:22px 40px 22px 0;font:500 19px var(--display);letter-spacing:-.015em;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .a{padding:0 0 24px;color:var(--ink-2);max-width:780px;display:flex;flex-direction:column;gap:10px}
.faq-group+.faq-group{margin-top:48px}
.faq-group h3{font-size:22px;margin-bottom:14px}

/* checklist tiles (what to track) */
.track{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.titem{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:10px}
.titem .th{display:flex;gap:12px;align-items:center}
.titem h3{font-size:19px}
.titem dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:15px}
.titem dt{font:500 11.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding-top:3px}
.titem dd{margin:0;color:var(--ink-2)}

/* related, notice */
.notice{background:var(--butter);border:1px solid #e8dcb4;border-radius:var(--r-s);padding:12px 16px;font-size:15px;color:#5e4a10;display:flex;gap:10px;align-items:center}
.notice svg{width:18px;height:18px;flex:none}
.callout{background:var(--mint);border-radius:var(--r);padding:26px 28px;display:flex;gap:16px;align-items:flex-start}
.callout svg{width:22px;height:22px;color:var(--green);flex:none;margin-top:3px}
.callout p{color:var(--ink-2)}
.prose{max-width:760px;display:flex;flex-direction:column;gap:18px}
.prose h2{font-size:30px;margin-top:22px}
.prose h3{font-size:22px;margin-top:10px}
.prose ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;color:var(--ink-2)}
.prose p{color:var(--ink-2)}

/* get started */
.gs{padding:24px 0 96px}
.gs-in{background:linear-gradient(140deg,var(--green) 0%,#0f4a2d 100%);color:#fff;border-radius:var(--r-l);padding:64px;display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:32px;align-items:center;position:relative;overflow:hidden}
.gs-in::after{content:"";position:absolute;right:-80px;top:-80px;width:320px;height:320px;border-radius:50%;border:44px solid rgba(255,255,255,.07)}
.gs h2{font-size:clamp(34px,4.6vw,56px);color:#fff}
.gs p{color:#cfe5d6;font-size:18px;max-width:560px;margin-top:14px}
.gs .actions{position:relative;z-index:1}
.gs .b.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}

/* footer */
.ftr{background:var(--forest);color:#cfe0d4;padding:72px 0 28px}
.ftr-top{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr));gap:40px}
.ftr .logo{color:#fff}
.ftr .brandline{margin-top:16px;font-size:15px;color:#a9c3b2;max-width:280px}
.ftr h4{font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#8fb59e;margin-bottom:14px}
.ftr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ftr ul a{text-decoration:none;font-size:15px;color:#e2ede5}
.ftr ul a:hover{color:#fff;text-decoration:underline}
.ftr-bot{margin-top:56px;padding-top:22px;border-top:1px solid #29503b;display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;font-size:14px;color:#8fb59e}
.ftr-bot nav{display:flex;flex-wrap:wrap;gap:6px 14px}
.ftr-bot a{color:#cfe0d4;text-decoration:none}
.ftr-bot a[aria-current]{color:#fff;font-weight:600}
.ftr .proto{display:inline-flex;gap:8px;align-items:center;margin-top:18px;font-size:13px;color:#a9c3b2;border:1px solid #2c5a43;border-radius:999px;padding:6px 12px}

/* responsive */
@media (max-width:1080px){
  .ftr-top{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ftr-top>div:first-child{grid-column:1/-1}
}
@media (max-width:960px){
  .hero-grid,.page-hero .ph-grid,.split,.story,.tour,.kit{grid-template-columns:minmax(0,1fr)}
  .split.rev>:first-child{order:0}
  .split{gap:32px}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3,.dcards,.plans{grid-template-columns:minmax(0,1fr)}
  .kit-tabs{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;margin:0 calc(-1*var(--gutter));padding-left:var(--gutter);padding-right:var(--gutter)}
  .kit-tab{flex:0 0 auto;scroll-snap-align:start;grid-template-columns:auto;padding:12px 16px}
  .kit-tab .ki{display:none}
  .kit-tab small{display:none!important}
  .kit-tab .prog{left:12px;right:12px;bottom:4px}
  .gs-in{grid-template-columns:minmax(0,1fr);padding:40px 28px}
  .commit,.ba{grid-template-columns:minmax(0,1fr)}
  .sec{padding:72px 0}
  .phone{width:30%}
}
@media (max-width:600px){
  body.www{font-size:16px}
  .g2,.g4{grid-template-columns:minmax(0,1fr)}
  .ftr-top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero{padding-top:44px}
  .lead{font-size:18px}
  .timeline li{grid-template-columns:minmax(0,1fr);gap:4px}
  .hdr-in{padding-left:14px}
  .card,.plan{padding:22px}
  .chapters button{grid-template-columns:44px 1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* photo band: the real workspace on a laptop */
.photoband{padding:8px 0 40px}.photoband img{width:100%;height:auto;border-radius:var(--r-l);box-shadow:var(--shadow-l);aspect-ratio:3/2;object-fit:cover}.photoband .credit{font:12px var(--mono);color:var(--ink-faint);margin-top:10px;text-align:right}

/* comparison matrix */
.tbl.cmp{min-width:820px}
.tbl.cmp thead th{vertical-align:bottom}
.tbl.cmp thead th small{display:block;text-transform:none;letter-spacing:0;font:400 12px var(--body);color:var(--ink-3);margin-top:2px}
.tbl.cmp th.usc,.tbl.cmp td:nth-child(2){background:var(--mint)}
.tbl.cmp th.usc{color:var(--green);font-size:14px}
.tbl.cmp td.yes svg{width:22px!important;height:22px!important;color:var(--green)}
.tbl.cmp td.ns{color:var(--ink-3);font-size:14px}
.tbl.cmp td.strong{font-weight:600}
.tbl.cmp tbody th{font-weight:500;max-width:280px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.commit .ct{display:flex;gap:12px;align-items:center}
.commit .ct svg{width:20px!important;height:20px!important;color:#a6e3bd;flex:none}

/* ---------- what makes it different */
.wowgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.wow{display:flex;flex-direction:column;gap:10px;padding:22px 22px 0;border-radius:22px;background:#fff;border:1px solid var(--rule);text-decoration:none;color:inherit;overflow:hidden;transition:transform .2s,box-shadow .2s}
.wow:hover{transform:translateY(-3px);box-shadow:0 22px 50px rgba(15,23,17,.08)}
.wow .wi{width:40px;height:40px;border-radius:12px;background:var(--mint,#e6f2df);display:grid;place-items:center;color:var(--green,#15603c)}.wow .wi svg{width:20px;height:20px}
.wow h3{font-size:19px;margin:4px 0 0}.wow p{font-size:14.5px;color:var(--ink-soft);margin:0}
.wow .wshot{display:block;margin:8px -22px 0;padding:0 22px;height:170px;overflow:hidden;background:linear-gradient(180deg,#fff,var(--surface-2,#f4f7f1))}
.wow .wshot img{width:100%;height:auto;border-radius:12px 12px 0 0;border:1px solid var(--rule);border-bottom:0;box-shadow:0 10px 30px rgba(15,23,17,.08);object-fit:cover;object-position:top left}
@media (max-width:980px){.wowgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.wowgrid{grid-template-columns:minmax(0,1fr)}}
.cta-box{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;padding:56px 24px;border-radius:28px;background:var(--mint,#e6f2df)}
.cta-box .actions{justify-content:center}
.tbl.cmp td.ns{color:var(--ink-faint,#8a968c);font-size:13px}
.wow p{flex:1}
.plans.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.plans.four .plan{padding:24px}.plans.four .plan .amt{font-size:44px}
@media (max-width:1100px){.plans.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.plans.four{grid-template-columns:minmax(0,1fr)}}
/* ---------- help centre */
.hsearch{display:flex;align-items:center;gap:10px;max-width:520px;margin-top:8px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:#fff}
.hsearch svg{width:18px;height:18px;color:var(--ink-faint,#8a968c)}.hsearch input{border:0;outline:0;flex:1;font:inherit;font-size:16px;padding:14px 0;background:transparent}
.hlist{display:grid;gap:10px;max-width:860px}
.hart{border:1px solid var(--line);border-radius:16px;background:#fff;padding:0 18px}
.hart summary{display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none;padding:16px 0}.hart summary::-webkit-details-marker{display:none}
.hart summary b{flex:1;font-size:17px;font-weight:500}.hart summary>svg{width:18px;height:18px;transition:transform .2s}.hart[open] summary>svg{transform:rotate(180deg)}
.hart .ci{width:34px;height:34px;border-radius:10px;background:var(--mint,#e6f2df);display:grid;place-items:center;color:var(--green,#15603c)}.hart .ci svg{width:18px;height:18px}
.hart p{margin:0 0 18px 46px;color:var(--ink-soft);max-width:68ch}
/* demo request form (inside the get-started band) */
.demo-form{grid-column:1/-1;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:var(--r-m,18px);padding:28px;position:relative;z-index:1}
.demo-form[hidden]{display:none}
.demo-form h3{color:#fff;font-size:24px;margin:0}.demo-form>p{color:#cfe5d6;font-size:16px;margin:8px 0 18px}
.df-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:14px}
.demo-form label{display:grid;gap:6px;font-size:14px;color:#e4f1e8}
.demo-form input,.demo-form textarea{font:inherit;font-size:16px;padding:11px 13px;border-radius:12px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.95);color:#17392a;width:100%;box-sizing:border-box}
.demo-form textarea{resize:vertical;margin-bottom:16px}
.demo-form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.df-status{color:#fff;margin:12px 0 0;font-size:15px;min-height:1.2em}
@media (max-width:720px){.df-grid{grid-template-columns:minmax(0,1fr)}.demo-form{padding:20px}}
/* comparison: competitor names on one line */
.tbl.cmp thead th,.tbl.cmp thead th a{white-space:nowrap}
.tbl.cmp thead th a{letter-spacing:.06em}
.tbl.cmp{min-width:900px}
/* hero: a native-looking app window (bevelled frame, inset content panel) with a floating card, like linear.app */
.hero .mock{position:relative;width:100%;max-width:1240px;margin-top:12px}
.hero .mock::before{content:"";position:absolute;left:10%;right:10%;top:18%;bottom:-6%;background:radial-gradient(50% 50% at 50% 50%,rgba(21,96,60,.20),rgba(21,96,60,0) 70%);filter:blur(50px);z-index:0}
.hero .mock-win{position:relative;z-index:1;border-radius:16px;overflow:hidden;background:#eef3ec;padding:0;
  border:1px solid rgba(23,57,42,.14);
  box-shadow:0 0 0 6px rgba(255,255,255,.55),0 0 0 7px rgba(23,57,42,.06),0 50px 100px -40px rgba(17,48,31,.45),0 18px 40px -20px rgba(17,48,31,.25);
  -webkit-mask-image:linear-gradient(to bottom,#000 70%,rgba(0,0,0,.0) 100%);mask-image:linear-gradient(to bottom,#000 70%,rgba(0,0,0,0) 100%)}
.hero .mock-win::after{content:"";position:absolute;inset:0;border-radius:16px;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.35),inset 0 -1px 0 rgba(23,57,42,.08)}
.hero .mock-win img{display:block;width:100%;height:auto}
.hero .mock-card{position:absolute;z-index:2;right:-3%;top:34%;width:31%;border-radius:16px;overflow:hidden;background:#fff;
  border:1px solid rgba(23,57,42,.14);
  box-shadow:inset 0 1px 0 #fff,0 0 0 5px rgba(255,255,255,.6),0 40px 80px -24px rgba(17,48,31,.42),0 12px 28px -10px rgba(17,48,31,.22);
  transform:translateY(12px);opacity:0;animation:mockcard .9s .5s cubic-bezier(.2,.7,.2,1) forwards}
.hero .mock-card img{display:block;width:100%;height:auto}
@keyframes mockcard{to{transform:none;opacity:1}}
@media (max-width:900px){.hero .mock-card{display:none}.hero .mock-win{border-radius:12px;box-shadow:0 0 0 4px rgba(255,255,255,.55),0 30px 60px -30px rgba(17,48,31,.4)}}
@media (prefers-reduced-motion:reduce){.hero .mock-card{animation:none;opacity:1;transform:none}}
.hero{padding-bottom:72px}
.hero .mock-card{top:30%}
.hero .mock{max-width:1240px}
.hero .mock-card{width:34%;top:28%;right:-4%}
.hero .mock-card{width:40%;top:36%;right:-5%}
@media (max-width:1320px){.hero .mock-card{right:-1%}}
/* contact page */
.cgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:24px;align-items:start}
.ccard{background:#fff;border:1px solid var(--line,#e2eadf);border-radius:var(--r-l,22px);padding:32px;display:grid;gap:14px;align-content:start}
.ccard.first{background:var(--mint,#eaf3e6)}
.ccard h2{font-size:28px;margin:0}.ccard h3{font-size:18px;margin:14px 0 0}.ccard p{margin:0;color:var(--ink-2,#3d5a49)}
.ccard .ci svg{width:28px;height:28px;color:var(--green,#15603c)}
.ccard .b{justify-self:start}
.mails{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.mails li{display:flex;gap:12px;align-items:flex-start}.mails li svg{width:20px;height:20px;color:var(--green,#15603c);margin-top:2px;flex:none}
.mails a{font-weight:600;color:var(--ink,#17392a)}.mails small{display:block;color:var(--ink-3,#5b7364);font-size:14px}
.sform{display:grid;gap:14px}.sform label{display:grid;gap:6px;font-size:14px;color:var(--ink-2,#3d5a49)}
.sform input,.sform select,.sform textarea{font:inherit;font-size:16px;padding:11px 13px;border-radius:12px;border:1px solid var(--line,#d6e3d0);background:#fff;color:var(--ink,#17392a);width:100%;box-sizing:border-box}
.sform textarea{resize:vertical}.sf2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sform .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.sform .b{justify-self:start}.sf-status{margin:0;min-height:1.2em;color:var(--green,#15603c)}
@media (max-width:860px){.cgrid{grid-template-columns:minmax(0,1fr)}.sf2{grid-template-columns:1fr}.ccard{padding:22px}}
/* no lonely last words: let the browser rebalance lines */
p,li,.lead,small{text-wrap:pretty}h1,h2,h3{text-wrap:balance}
.ccard .callout{margin:6px 0 0}
/* help centre sections and step-by-step bodies */
.hsec{font-size:22px;margin:34px 0 12px}.hsec:first-child{margin-top:0}
.hart .hbody{padding:0 0 18px 46px;max-width:72ch;color:var(--ink-2,#3d5a49);line-height:1.6}
.hart .hbody p{margin:0 0 10px}.hart .hbody ol,.hart .hbody ul{margin:6px 0 10px;padding-left:22px;display:grid;gap:6px}
.hart .hbody a{color:var(--green,#15603c);text-decoration:underline}
@media (max-width:640px){.hart .hbody{padding:0 0 16px}}
/* free template: spreadsheet preview in the hero */
.xls{background:#fff;border-radius:14px;box-shadow:0 0 0 1px rgba(23,57,42,.08),0 24px 60px -24px rgba(23,57,42,.28);overflow:hidden;font-size:13px}
.xls .xbar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#f1f5ef;border-bottom:1px solid #e3ebdf;font-family:var(--mono,monospace);font-size:11px;color:#5b7364}
.xls .xbar i{width:9px;height:9px;border-radius:50%;background:#d6e0d2}.xls .xbar span{margin-left:8px}
.xls table{width:100%;border-collapse:collapse}
.xls th{background:#17392a;color:#fff;text-align:left;font-weight:600;padding:9px 12px;font-size:12px;vertical-align:bottom}
.xls td{padding:9px 12px;border-top:1px solid #edf2ea;color:#17392a;vertical-align:top}
.xls td:nth-child(2){white-space:nowrap}
.xls td.d{font-family:var(--mono,monospace);font-size:12px;white-space:nowrap}
.xls tr.o td{background:#f8d7cc}.xls tr.s td{background:#fbefc9}
.xls .st{font-size:12px;white-space:nowrap}
@media (max-width:560px){.xls th:nth-child(2),.xls td:nth-child(2){display:none}}