/* ICS Co. v2 — "psychology lab meets studio", turned up. Orange = the one thing to click. Everything else can shout. */
@font-face{font-family:Fraunces;src:url(../fonts/fraunces.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:Fraunces;src:url(../fonts/fraunces-italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:Hanken;src:url(../fonts/hanken.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:JBMono;src:url(../fonts/jbmono.woff2) format("woff2");font-weight:100 800;font-display:swap}
/* metric-matched fallbacks so the web-font swap does not move text (CLS) */
@font-face{font-family:"Hanken Fb";src:local("Arial"),local("Arimo"),local("Liberation Sans"),local("Helvetica");size-adjust:100.4%}
@font-face{font-family:"Fraunces Fb";src:local("Georgia"),local("Gelasio"),local("Times New Roman");size-adjust:112.5%}
@font-face{font-family:"Fraunces Fb";font-style:italic;src:local("Georgia Italic"),local("Gelasio Italic"),local("Times New Roman Italic");size-adjust:108%}
@font-face{font-family:"JBMono Fb";src:local("Courier New"),local("Cousine"),local("Liberation Mono");size-adjust:100%}

/* design tokens: generated from dev/tokens.json (ui-ux-pro-max:design-system), three layers primitive > semantic > component */
:root {
  --primitive-color-paper-50: #fbf8f1;
  --primitive-color-paper-100: #f4efe5;
  --primitive-color-paper-200: #e9dfca;
  --primitive-color-paper-300: #d6cdb8;
  --primitive-color-spruce-100: #dfe8d9;
  --primitive-color-spruce-300: #9db5a0;
  --primitive-color-spruce-700: #3c5d4b;
  --primitive-color-spruce-800: #1a2f29;
  --primitive-color-spruce-900: #11201c;
  --primitive-color-ink: #15201d;
  --primitive-color-slate: #46544e;
  --primitive-color-lake-400: #2dd4bf;
  --primitive-color-lake-800: #0b5d56;
  --primitive-color-sun: #ffc83d;
  --primitive-color-dusk-500: #1d6a86;
  --primitive-color-dusk-700: #1d4a55;
  --primitive-color-dusk-900: #0f2a33;
  --primitive-color-ember-400: #ff7448;
  --primitive-color-ember-500: #ff5b2e;
  --primitive-color-ember-700: #c4380f;
  --primitive-color-mist: #cfdad2;
  --primitive-space-1: 0.25rem;
  --primitive-space-2: 0.5rem;
  --primitive-space-3: 0.75rem;
  --primitive-space-4: 1.0rem;
  --primitive-space-6: 1.5rem;
  --primitive-space-8: 2.0rem;
  --primitive-space-12: 3.0rem;
  --primitive-space-16: 4.0rem;
  --primitive-space-24: 6.0rem;
  --primitive-fontSize-step--1: clamp(.78rem,.1vw + .75rem,.86rem);
  --primitive-fontSize-step-0: clamp(1.03rem,1.1vw + .75rem,1.16rem);
  --primitive-fontSize-step-1: clamp(1.08rem,.5vw + 1rem,1.3rem);
  --primitive-fontSize-step-2: clamp(1.25rem,1vw + 1rem,1.6rem);
  --primitive-fontSize-step-3: clamp(1.7rem,2vw + 1rem,2.6rem);
  --primitive-fontSize-step-4: clamp(2.2rem,4.6vw + .6rem,5.2rem);
  --primitive-fontSize-step-5: clamp(3rem,8vw + .5rem,8rem);
  --primitive-radius-sm: 10px;
  --primitive-radius-md: 16px;
  --primitive-radius-lg: 28px;
  --primitive-radius-full: 999px;
  --primitive-shadow-sm: 0 1px 0 rgba(21,32,29,.08),0 2px 6px -2px rgba(21,32,29,.18);
  --primitive-shadow-md: 0 10px 24px -10px rgba(21,32,29,.35);
  --primitive-shadow-lg: 0 28px 60px -24px rgba(17,32,28,.55);
  --primitive-shadow-press: 0 6px 0 -1px #c4380f,0 14px 28px -8px rgba(255,91,46,.55);
  --primitive-duration-instant: 120ms;
  --primitive-duration-fast: 200ms;
  --primitive-duration-base: 350ms;
  --primitive-duration-slow: 600ms;
  --primitive-duration-scene: 900ms;
  --primitive-ease-out: cubic-bezier(.2,.7,.2,1);
  --primitive-ease-in: cubic-bezier(.5,0,.9,.4);
  --primitive-ease-spring: linear(0, 0.053, 0.187, 0.363, 0.551, 0.73, 0.883, 1.004, 1.088, 1.139, 1.161, 1.16, 1.144, 1.117, 1.087, 1.057, 1.03, 1.007, 0.991, 0.98, 0.975, 0.973, 0.975, 0.979, 0.984, 0.989, 0.993, 0.997, 1., 1.003, 1.004, 1.004, 1.004, 1.004, 1.003, 1.002, 1);
  --primitive-font-serif: Fraunces,"Fraunces Fb",Georgia,serif;
  --primitive-font-sans: Hanken,"Hanken Fb",system-ui,-apple-system,"Segoe UI",sans-serif;
  --primitive-font-mono: JBMono,"JBMono Fb",ui-monospace,Menlo,monospace;
  --color-bg: #f4efe5;
  --color-surface: #fbf8f1;
  --color-sand: #e9dfca;
  --color-line: #d6cdb8;
  --color-text: #15201d;
  --color-text-muted: #46544e;
  --color-deep: #11201c;
  --color-deep-2: #1a2f29;
  --color-brand: #3c5d4b;
  --color-brand-soft: #9db5a0;
  --color-brand-wash: #dfe8d9;
  --color-accent-lake: #2dd4bf;
  --color-accent-lake-deep: #0b5d56;
  --color-accent-sun: #ffc83d;
  --color-night: #0f2a33;
  --color-night-2: #1d4a55;
  --color-plum: #1d6a86;
  --color-action: #ff5b2e;
  --color-action-hover: #ff7448;
  --color-action-edge: #c4380f;
  --color-on-dark: #f4efe5;
  --color-on-dark-2: #cfdad2;
  --btn-radius: 999px;
  --btn-min-h: 48px;
  --btn-bg: #ff5b2e;
  --btn-shadow: 0 6px 0 -1px #c4380f,0 14px 28px -8px rgba(255,91,46,.55);
  --card-radius: 16px;
  --card-shadow: 0 10px 24px -10px rgba(21,32,29,.35);
  --section-gap: clamp(72px,9vw,140px);

  /* legacy aliases (short names used across this stylesheet) -> semantic tokens */
  --paper:var(--color-bg);--paper2:var(--color-surface);--sand:var(--color-sand);--line:var(--color-line);
  --ink:var(--color-text);--muted:var(--color-text-muted);--deep:var(--color-deep);
  --sage:var(--color-brand-soft);--sage-d:var(--color-brand);--sage-l:var(--color-brand-wash);
  --lake:var(--color-accent-lake);--lake-d:var(--color-accent-lake-deep);--sun:var(--color-accent-sun);
  --dusk:var(--color-night);--dusk2:var(--color-night-2);--plum:var(--color-plum);
  --cta:var(--color-action);--cta-h:var(--color-action-hover);--on-dark:var(--color-on-dark);--on-dark-2:var(--color-on-dark-2);
  --serif:var(--primitive-font-serif);--sans:var(--primitive-font-sans);--mono:var(--primitive-font-mono);
  --spring:var(--primitive-ease-spring);--ease:var(--primitive-ease-out);--r:var(--card-radius);--wrap:1240px;--gut:clamp(18px,4vw,40px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 clamp(16.5px,1.1vw + 12px,18.5px)/1.62 var(--sans);overflow-x:hidden;text-rendering:optimizeLegibility}
img,svg{max-width:100%;display:block}
h1,h2,h3{font-family:var(--serif);font-weight:560;line-height:1.05;letter-spacing:-.025em;margin:0 0 .5em;text-wrap:balance}
h2,.h2{font-size:var(--primitive-fontSize-step-4);font-weight:620;letter-spacing:-.035em;line-height:.98}
h3{font-size:var(--primitive-fontSize-step-2);letter-spacing:-.01em}
em{font-style:italic;font-weight:450}
p{margin:0 0 1em;text-wrap:pretty}
a{color:inherit;text-underline-offset:.2em}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:4px}
.sec-dark :focus-visible,.site-footer :focus-visible{outline-color:var(--paper)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:min(100% - 2*var(--gut),var(--wrap));margin-inline:auto}
.skip-link{position:absolute;left:12px;top:-60px;background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:10px;z-index:100;transition:top .15s}
.skip-link:focus{top:12px}
.placeholder-banner{background:var(--ink);color:var(--paper);font-size:.82rem;text-align:center;padding:8px var(--gut);line-height:1.4}
.small{font-size:.86rem;color:var(--muted);line-height:1.5}
.lead{font-size:var(--primitive-fontSize-step-1);line-height:1.55;color:var(--muted);max-width:60ch}
[hidden]{display:none!important}

/* ---- buttons: spring hovers + magnetic ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:var(--btn-min-h);padding:.7em 1.4em;border-radius:var(--btn-radius);font:650 1rem/1.2 var(--sans);text-decoration:none;border:2px solid transparent;cursor:pointer;text-align:center;
  transition:transform .55s var(--spring),translate .5s var(--spring),background-color .15s,box-shadow .2s,color .15s;translate:var(--mx,0) var(--my,0)}
.btn-lg{min-height:58px;padding:.8em 1.8em;font-size:1.1rem}
.btn-cta{background:var(--cta);color:var(--ink);box-shadow:var(--btn-shadow)}
.btn-cta:hover{background:var(--cta-h);transform:translateY(-3px) scale(1.05)}
.btn-cta:active{transform:translateY(3px) scale(.97);box-shadow:0 2px 0 -1px #c4380f}
.btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--ink);color:var(--paper);transform:translateY(-2px) scale(1.03)}
.btn-dark{background:var(--ink);color:var(--paper)}
.btn-dark:hover{background:var(--sage-d);transform:translateY(-2px) scale(1.03)}
.btn-line{border-color:var(--ink);background:var(--paper2);color:var(--ink)}
.btn-line:hover{background:var(--sage-l);transform:translateY(-2px) scale(1.03)}
.btn:active{transform:scale(.97)}

/* ---- header ---- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(244,239,229,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
.site-header.stuck{border-bottom-color:var(--line)}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-mark{transition:transform .7s var(--spring)}.brand:hover .brand-mark{transform:rotate(-12deg) scale(1.08)}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-text strong{font:600 1.1rem var(--serif);letter-spacing:-.01em}
.brand-text small{font:.72rem var(--mono);color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.nav{display:flex;align-items:center;gap:clamp(10px,1.5vw,24px);font-size:.93rem;font-weight:550}
.nav a:not(.btn){text-decoration:none;padding:12px 4px;position:relative}
.nav a:not(.btn)::after{content:"";position:absolute;left:4px;right:4px;bottom:6px;height:3px;border-radius:2px;background:var(--lake-d);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--spring)}
.nav a:not(.btn):hover::after{transform:scaleX(1)}
.nav-cta{min-height:44px;padding:.5em 1.1em;font-size:.93rem}
.nav-toggle{display:none;width:48px;height:48px;border:2px solid var(--ink);border-radius:50%;background:transparent;cursor:pointer;position:relative}
.bars,.bars::before{content:"";position:absolute;left:13px;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s}
.bars{top:20px;box-shadow:0 6px 0 var(--ink)}
.bars::before{top:0;left:0}
.nav-toggle[aria-expanded=true] .bars{box-shadow:none;transform:rotate(45deg)}
.nav-toggle[aria-expanded=true] .bars::before{transform:rotate(90deg)}
.progress{height:4px;background:linear-gradient(90deg,var(--lake),var(--sun),var(--cta));transform-origin:left;transform:scaleX(0)}
@supports (animation-timeline:scroll()){.progress{animation:grow linear both;animation-timeline:scroll(root block)}}
@keyframes grow{to{transform:scaleX(1)}}

/* ---- hero ---- */
.hero{position:relative;overflow:hidden;border-bottom:2px solid var(--ink);padding:clamp(28px,4vw,60px) 0 clamp(190px,21vw,300px);isolation:isolate;background:linear-gradient(180deg,#86e0d2 0%,#c9f0e4 34%,#fff3cf 74%,#ffe9b0 100%)}
.sky{position:absolute;inset:0;z-index:-1;pointer-events:none}
.sun{position:absolute;right:7%;top:5%;width:clamp(200px,28vw,420px);aspect-ratio:1}
.sun i{display:block;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle,#fffbe0 0 24%,#ffd54a 25% 52%,rgba(255,200,61,.45) 53% 62%,rgba(255,200,61,0) 72%)}
.ly{position:absolute;left:0;right:0;bottom:0;transition:translate .5s ease-out;translate:calc(var(--px,0)*var(--dx,0)) calc(var(--py,0)*var(--dy,0))}
.ly svg{width:100%;height:100%}
.ly-far{height:62%;--dx:-8px;--dy:-4px}.ly-mid{height:52%;--dx:-16px;--dy:-6px}.ly-river{height:44%;--dx:-24px;--dy:-8px}.ly-near{height:38%;--dx:-36px;--dy:-10px}
.sun{--dx:14px;--dy:8px;translate:calc(var(--px,0)*var(--dx)) calc(var(--py,0)*var(--dy));transition:translate .5s ease-out}
.rv2{animation:flow 6s linear infinite}
@keyframes flow{to{stroke-dashoffset:-64}}
@supports (animation-timeline:scroll()){
  .sun,.ly{animation:par linear both;animation-timeline:scroll(root block);animation-range:0 110vh}
  .sun{--y:130px}.ly-far{--y:90px}.ly-mid{--y:60px}.ly-river{--y:38px}.ly-near{--y:14px}
}
@keyframes par{to{transform:translate3d(0,var(--y,0),0)}}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.9fr);gap:clamp(20px,3vw,48px);align-items:center}
.hero-h{font-size:clamp(2.6rem,4.3vw + .5rem,5.2rem);font-weight:640;line-height:1.02;letter-spacing:-.04em;margin:0 0 .35em}
.hero-h .w{display:inline-block}
@media (min-width:1021px){.hero-h .ln{display:block;white-space:nowrap}}
.hl{position:relative;z-index:0;font-style:italic;font-weight:750}
.hl::after{content:"";position:absolute;left:-.06em;right:-.06em;bottom:.04em;height:.42em;background:var(--sun);z-index:-1;border-radius:.1em;transform-origin:left;transform:skewX(-8deg)}
.rotline{display:block;color:var(--lake-d)}
.rot{display:inline-grid;font-style:italic;font-weight:560}
.rot em{grid-area:1/1;font-weight:inherit;opacity:0;transform:translateY(55%) rotate(2deg);transition:transform .7s var(--spring),opacity .35s}
.rot em.on{opacity:1;transform:none}
.rot em.out{opacity:0;transform:translateY(-55%) rotate(-2deg)}
.hero .lead{color:#243630;max-width:52ch}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 16px;margin:1.5em 0 1.6em}
.doodle{display:inline-flex;align-items:flex-end;gap:2px;transform:rotate(-4deg);margin-left:6px}
.doodle svg{animation:wig 2.4s ease-in-out infinite;transform-origin:10% 80%}
.doodle b{font:italic 600 1.15rem var(--serif);margin-bottom:.3rem}
@keyframes wig{0%,100%{transform:rotate(0)}30%{transform:rotate(-8deg) translateX(-3px)}60%{transform:rotate(5deg) translateX(3px)}}
.hero-facts{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px 22px;font-size:.92rem;color:#243630}
.hero-facts strong{color:var(--ink)}
.hero-demo{position:relative}
.cluster{position:relative;min-height:clamp(340px,36vw,500px)}
.c-browser,.c-timer,.sticker{position:absolute;translate:calc(var(--px,0)*var(--d,1)*-10px) calc(var(--py,0)*var(--d,1)*-8px);transition:translate .5s ease-out}
.c-browser{left:0;top:3.5%;width:86%;background:var(--paper2);border:2px solid var(--ink);border-radius:16px;box-shadow:12px 14px 0 -2px var(--ink),0 40px 60px -20px rgba(11,40,35,.45)}
.browser-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:2px solid var(--ink);background:var(--sand);border-radius:14px 14px 0 0}
.browser-bar i{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--ink)}
.browser-bar span{margin-left:10px;font:.72rem var(--mono);color:var(--muted)}
.browser-body{padding:clamp(16px,2vw,28px)}
.b-nav{display:flex;align-items:center;gap:10px;margin-bottom:clamp(16px,2.4vw,30px)}
.b-nav b{width:44px;height:14px;border-radius:7px;background:var(--ink);margin-right:auto}
.b-nav span{width:30px;height:8px;border-radius:4px;background:var(--line)}
.b-h{font:600 clamp(1.5rem,2.3vw,2.3rem)/1.05 var(--serif);letter-spacing:-.02em;margin:0 0 .4em}
.b-h em{color:var(--lake-d)}
.b-p{font-size:.95rem;color:var(--muted);margin:0 0 1.2em}
.b-btn{display:inline-block;background:var(--cta);color:var(--ink);font-weight:700;padding:.7em 1.3em;border-radius:999px;position:relative;font-size:.95rem}
.b-btn::after{content:"";position:absolute;inset:-6px;border-radius:999px;border:2px solid var(--cta);opacity:0;animation:ring 2.6s ease-out infinite}
@keyframes ring{0%{transform:scale(.9);opacity:.8}70%,100%{transform:scale(1.18);opacity:0}}
.b-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:clamp(16px,2.4vw,26px)}
.b-cards span{height:40px;border-radius:8px;background:var(--sage-l);border:1.5px solid var(--line)}
.tag{position:absolute;background:#fff;color:var(--ink);border:2px solid var(--ink);font:.7rem/1 var(--mono);padding:.55em .8em;border-radius:999px;white-space:nowrap;letter-spacing:.02em}
.tag b{background:var(--ink);color:var(--paper);border-radius:50%;display:inline-grid;place-items:center;width:1.5em;height:1.5em;margin-right:.5em}
.t1{left:18px;bottom:-16px}.t2{right:-18px;bottom:96px}
.c-timer{right:4%;bottom:3%;background:var(--sun);border:2px solid var(--ink);border-radius:18px;padding:10px 18px;text-align:center;box-shadow:6px 7px 0 -2px var(--ink);--d:2.8;transform:rotate(3deg)}
.c-timer b{font:700 2.2rem/1 var(--serif);display:block}.c-timer b small{font:700 .9rem var(--mono);margin-left:2px}
.c-timer span{font:.66rem var(--mono);text-transform:uppercase;letter-spacing:.08em}
.sticker{right:-2%;top:-8%;width:104px;--d:3.2;transform:rotate(-8deg)}
.sticker .spin{transform-origin:60px 60px;animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}50%{transform:translateY(-9px) rotate(var(--rot,0deg))}}
.c-timer{--rot:3deg}
.von{margin:22px 0 0;font-size:.88rem;color:#243630;display:flex;gap:10px;align-items:flex-start;max-width:44ch}
.swatch{flex:none;width:18px;height:18px;border-radius:50%;background:var(--cta);margin-top:.25em}

/* intro (CSS only, transform-based: text is painted immediately) */
.js .hero-h .w{animation:wpop 1s var(--spring) both;animation-delay:calc(var(--i)*55ms)}
@keyframes wpop{from{transform:translateY(.45em) rotate(3deg) scale(.94)}}
.js .hl::after{animation:mark .8s .55s var(--ease) both}
@keyframes mark{from{transform:skewX(-8deg) scaleX(0)}}
.js .hero .lead,.js .hero-actions,.js .hero-facts{animation:up .9s var(--ease) both}
.js .hero .lead{animation-delay:.25s}.js .hero-actions{animation-delay:.35s}.js .hero-facts{animation-delay:.45s}
@keyframes up{from{translate:0 18px}}
.js .ly svg{animation:rise 1.4s var(--ease) both}
.js .ly-far svg{animation-delay:.05s}.js .ly-mid svg{animation-delay:.15s}.js .ly-river svg{animation-delay:.25s}.js .ly-near svg{animation-delay:.35s}
@keyframes rise{from{transform:translateY(28%)}}
.js .sun i{animation:sunrise 1.6s var(--ease) both}
@keyframes sunrise{from{transform:translateY(50%) scale(.85)}}
.js .c-timer{animation:pop .9s .7s var(--spring) backwards,bob 4.5s 1.6s ease-in-out infinite}
.js .c-browser{animation:pop .9s .2s var(--spring) backwards}
.js .sticker{animation:pop .9s .9s var(--spring) backwards}
@keyframes pop{from{opacity:0;transform:scale(.7) translateY(30px)}}
.js .site-header{animation:hd .7s var(--ease) both}
@keyframes hd{from{transform:translateY(-100%)}}

/* ---- marquee ---- */
.marquee{overflow:hidden;background:var(--ink);padding:18px 0;position:relative;z-index:2}
.mq-track{display:flex;width:max-content;animation:mq 38s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
.mq-track ul{display:flex;list-style:none;margin:0;padding:0;flex:none}
.mq-track li{font:italic 600 clamp(1.3rem,2.4vw,2rem)/1 var(--serif);color:var(--sun);padding:0 .9em;white-space:nowrap;display:flex;align-items:center}
.mq-track li::after{content:"✦";font-style:normal;font-size:.6em;margin-left:1.8em;color:var(--lake)}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---- sections ---- */
.section{padding:var(--section-gap) 0;position:relative}
.sec-head{max-width:820px;margin-bottom:clamp(28px,4vw,56px)}
.sec-head h2 em,.offer h2 em,.contact h2 em{color:var(--lake-d)}
.sec-dark{color:var(--on-dark);isolation:isolate;margin-inline:clamp(0px,1.4vw,22px)}
.sec-dark::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--bg,var(--deep));border-radius:clamp(26px,4.5vw,64px);transform-origin:50% 40%}
.sec-dark .lead,.sec-dark .small{color:var(--on-dark-2)}
.sec-dark h2 em{color:var(--lake)}
@supports (animation-timeline:view()){
  .sec-dark::before{animation:wipe linear backwards;animation-timeline:view();animation-range:entry 0px entry 520px}
}
@keyframes wipe{from{transform:scale(.9,.97);border-radius:80px}}
@supports not (animation-timeline:view()){
  .js .sec-dark::before{transform:scale(.92,.97);transition:transform 1.1s var(--spring)}
  .js .sec-dark.in::before{transform:none}
}

/* ---- idea ---- */
.idea .sec-head h2{max-width:14ch}
.facts-line{font-family:var(--serif);font-weight:560;font-size:clamp(1.7rem,3.2vw + .6rem,3.4rem);line-height:1.12;letter-spacing:-.03em;max-width:24em;margin:0 0 clamp(36px,5vw,64px);text-wrap:balance;color:var(--muted)}
.facts-line strong{font-weight:760;color:var(--ink);font-variant-numeric:lining-nums}
.idea-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(--paper2);border:2px solid var(--ink);border-radius:var(--r);padding:clamp(24px,2.6vw,36px);position:relative}
.card h3{margin-top:2.2em}
.card:nth-child(1){background:#e1f6f0}.card:nth-child(2){background:#fff1c7}.card:nth-child(3){background:#e3f1f6}
.card:nth-child(2){translate:0 18px}
.sticker-s{position:absolute;right:16px;top:-14px;background:var(--ink);color:var(--paper);font:700 .72rem var(--mono);text-transform:uppercase;letter-spacing:.08em;padding:.5em .9em;border-radius:99px;rotate:5deg}
.s2{rotate:-4deg;background:var(--sun);color:var(--ink)}.s3{background:var(--plum);color:#fff}
.honest{margin:clamp(40px,5vw,64px) 0 0;padding:20px 24px;border:2px solid var(--lake-d);background:var(--sage-l);border-radius:14px;max-width:80ch;font-size:.97rem}

/* tilt (pointer:fine; JS sets --rx/--ry/--gx/--gy) */
.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .7s var(--spring);transform-style:preserve-3d}
.tilt.on{transition:transform .12s linear}
.tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(260px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.55),transparent 60%);opacity:0;transition:opacity .3s}
.tilt.on::after{opacity:1}

/* ---- sticky story ---- */
.story{--bg:linear-gradient(165deg,var(--deep) 0%,var(--dusk) 52%,var(--dusk2) 100%)}
.story::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:.5;pointer-events:none;background-image:radial-gradient(1.5px 1.5px at 12% 18%,#fff,transparent),radial-gradient(1.5px 1.5px at 70% 12%,#fff,transparent),radial-gradient(1px 1px at 40% 40%,#fff,transparent),radial-gradient(1.5px 1.5px at 88% 36%,#fff,transparent),radial-gradient(1px 1px at 24% 70%,#fff,transparent),radial-gradient(1.5px 1.5px at 60% 82%,#fff,transparent)}
.story-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,6vw,96px);align-items:start}
.story-pin{position:sticky;top:96px}
.sv{container-type:inline-size;background:#fff;color:var(--ink);border:2px solid var(--ink);border-radius:18px;overflow:hidden;box-shadow:14px 16px 0 -2px var(--sun),0 40px 70px -20px rgba(0,0,0,.6);aspect-ratio:5/4.5;display:flex;flex-direction:column;max-width:600px}
.sv-bar{display:flex;align-items:center;gap:6px;padding:2cqw 3cqw;background:var(--sand);border-bottom:2px solid var(--ink);flex:none}
.sv-bar i{width:2cqw;height:2cqw;border-radius:50%;border:1.5px solid var(--ink)}
.sv-bar span{font:2.2cqw var(--mono);margin-left:2cqw;color:var(--muted)}
.sv-body{position:relative;flex:1;overflow:hidden;background:#fff}
.sv-site,.sv-blur{position:absolute;inset:0}
.sv-site>*{position:absolute;left:6%}
.sv-top{top:5%;left:0!important;right:0;padding:0 6%;display:flex;justify-content:space-between;font-size:3.2cqw}
.sv-top b{font:700 1.1em var(--serif);color:#1d4c3d}.sv-ph{font-weight:700;color:#1d4c3d}
.sv-h{top:18%;font:600 7cqw/1.05 var(--serif);margin:0;width:54%;letter-spacing:-.03em}
.sv-p{top:48%;font-size:3.4cqw;color:var(--muted);margin:0}
.sv-btn{top:58%;background:var(--cta);color:var(--ink);font:700 3.6cqw var(--sans);padding:.7em 1.4em;border-radius:99px;transition:transform .7s var(--spring),box-shadow .5s}
.sv-row{bottom:6%;left:0!important;right:0;padding:0 6%;display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw;font-size:3cqw;font-weight:600}
.sv-row span{background:#eef2ec;border:1px solid #d9e0d5;border-radius:1.6cqw;padding:2.4cqw;text-align:center}
.sv-blur span{position:absolute;filter:blur(2.4cqw);border-radius:2cqw}
.sv-blur .b1{left:4%;top:3%;width:30%;height:9%;background:#1d4c3d}
.sv-blur .b2{left:6%;top:17%;width:62%;height:27%;background:#33403c}
.sv-blur .b3{left:6%;top:55%;width:30%;height:13%;background:var(--cta)}
.sv-blur .b4{left:6%;top:76%;width:88%;height:16%;background:#9db5a0}
.sv-blur,.sv-site,.sv-scan,.sv-heat,.sv-chip,.sv-toast,.sv-cursor,.sv-ping{transition:opacity .6s,transform .8s var(--spring)}
.sv-site{opacity:0}.sv[data-stage="1"] .sv-blur{opacity:1}.sv:not([data-stage="1"]) .sv-blur{opacity:0}
.sv:not([data-stage="1"]) .sv-site{opacity:1}
.sv-scan{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.sv-scan path{fill:none;stroke:#11201c;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s ease-in-out;filter:drop-shadow(0 0 1px #fff)}
.sv[data-stage="2"] .sv-scan{opacity:1}.sv[data-stage="2"] .sv-scan path{stroke-dashoffset:0}
.sv-heat{position:absolute;inset:0;opacity:0;pointer-events:none}
.sv-heat i{position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgba(255,60,20,var(--a,.75)),rgba(255,170,0,.4) 55%,rgba(255,220,0,0));filter:blur(2px)}
.sv[data-stage="2"] .sv-heat{opacity:1}
.sv-chip{position:absolute;background:var(--sun);color:var(--ink);border:2px solid var(--ink);font:700 3cqw var(--sans);padding:.45em .9em;border-radius:99px;box-shadow:.8cqw 1cqw 0 -.2cqw var(--ink);transform:scale(0) rotate(-12deg);opacity:0;transform-origin:20% 80%;white-space:nowrap}
.sv-chip.c1{right:5%;top:12%;--r:6deg;background:var(--sun)}.sv-chip.c2{right:6%;top:30%;--r:-5deg;background:var(--lake)}.sv-chip.c3{right:5%;top:48%;--r:4deg;background:#fff}
.sv[data-stage="3"] .sv-chip,.sv[data-stage="4"] .sv-chip{opacity:1;transform:scale(1) rotate(var(--r))}
.sv[data-stage="3"] .sv-chip.c2{transition-delay:.12s}.sv[data-stage="3"] .sv-chip.c3{transition-delay:.24s}
.sv-ping{position:absolute;left:6%;top:58%;width:34%;height:9%;border-radius:99px;border:3px solid var(--cta);opacity:0;pointer-events:none}
.sv[data-stage="4"] .sv-ping{animation:ping 1.6s .9s ease-out infinite}
@keyframes ping{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.35,1.9);opacity:0}}
.sv[data-stage="4"] .sv-btn{transform:scale(1.1);box-shadow:0 0 0 .8cqw rgba(255,91,46,.3)}
.sv-cursor{position:absolute;left:26%;top:60%;transform:translate(260%,200%);opacity:0;width:7cqw!important;height:7cqw!important}
.sv[data-stage="4"] .sv-cursor{opacity:1;transform:none;transition-delay:.3s}
.sv-toast{position:absolute;left:50%;bottom:4%;translate:-50% 0;background:var(--ink);color:#fff;font:600 3.2cqw var(--sans);padding:.7em 1.3em;border-radius:99px;opacity:0;transform:translateY(160%);white-space:nowrap}
.sv[data-stage="4"] .sv-toast{opacity:1;transform:none;transition-delay:1.2s}
.sv[data-stage="4"] .sv-row{opacity:0}
.sv-row{transition:opacity .4s}
.sv-label{position:absolute;left:4%;top:3%;font:700 2.6cqw var(--mono);text-transform:uppercase;letter-spacing:.1em;display:none}
.rail{list-style:none;display:flex;gap:8px;margin:22px 0 0;padding:0;max-width:600px}
.rail li{flex:1;font:700 .72rem var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--on-dark-2);padding-top:12px;border-top:4px solid rgba(255,255,255,.2);transition:border-color .4s,color .4s}
.rail li.on{border-color:var(--sun);color:var(--sun)}
.story-steps{list-style:none;margin:0;padding:0}
.story-steps li{min-height:76vh;display:flex;flex-direction:column;justify-content:center;opacity:1;transition:opacity .5s}
.story-steps li:last-child{min-height:60vh}
.js .story-steps li{opacity:.5}.js .story-steps li.on{opacity:1}
.sn{font:700 .78rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--sun);margin-bottom:1em}
.story-steps h3{font-size:clamp(1.9rem,3.2vw,3rem);font-weight:620;letter-spacing:-.03em;line-height:1.02}
.story-steps p{color:var(--on-dark-2);max-width:46ch}
.story-steps .principle{font:700 .74rem var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--lake)}
.story-steps .how{color:var(--on-dark)}
.story-steps .how b{color:var(--sun)}

/* ---- lab ---- */
.lab{background:var(--sand);background-image:linear-gradient(rgba(21,32,29,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(21,32,29,.07) 1px,transparent 1px);background-size:32px 32px;border-block:2px solid var(--ink)}
.tracker{display:none}
.js .tracker{display:flex;align-items:center;gap:12px 22px;flex-wrap:wrap;position:sticky;top:80px;z-index:30;background:var(--paper2);border:2px solid var(--ink);border-radius:20px;padding:10px 16px;margin-bottom:28px;box-shadow:6px 7px 0 -2px var(--ink)}
.tr-title{margin:0;font-size:.92rem}.tr-title b{font:700 1rem var(--serif)}.tr-title span{font:700 .72rem var(--mono);color:var(--lake-d);margin-left:.6em;text-transform:uppercase;letter-spacing:.06em}
.tr-slots{display:flex;gap:6px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.tr-slots a{display:flex;align-items:center;gap:8px;min-height:44px;padding:4px 14px 4px 5px;border:2px solid var(--ink);border-radius:99px;text-decoration:none;font-weight:650;font-size:.85rem;background:#fff;transition:background-color .3s,transform .6s var(--spring)}
.tr-slots a:hover{transform:translateY(-2px) scale(1.04)}
.tr-n{width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font:700 .85rem var(--mono);transition:background-color .3s,transform .7s var(--spring)}
.tr-slots a.done{background:#d8f5ee}.tr-slots a.done .tr-n{background:var(--lake-d);transform:rotate(360deg)}
.tr-slots a.done .tr-n{font-size:0}.tr-slots a.done .tr-n::before{content:"✓";font-size:1rem}
.tr-bar{flex:1 1 90px;min-width:90px;height:10px;border-radius:99px;background:var(--line);overflow:hidden}
.tr-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--lake),var(--sun));transform-origin:left;transform:scaleX(0);transition:transform .9s var(--spring)}
.tr-cta{min-height:44px;padding:.4em 1.2em;font-size:.9rem}
.tr-reset{min-height:44px;background:none;border:0;font:600 .86rem var(--sans);text-decoration:underline;color:var(--ink);cursor:pointer;padding:0 6px}
.tr-below{margin:-12px 0 24px}
.exp{scroll-margin-top:150px}
.exp{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:center;background:var(--paper);border:2px solid var(--ink);border-radius:24px;padding:clamp(20px,3vw,44px);margin-bottom:30px;box-shadow:8px 9px 0 -2px var(--ink);position:relative;transition:box-shadow .6s}
.exp.done{box-shadow:8px 9px 0 -2px var(--lake-d)}
.exp.flip .exp-info{order:2}
.stamp{position:absolute;right:clamp(16px,3vw,36px);top:clamp(14px,2vw,24px);rotate:-9deg;border:3px solid var(--lake-d);color:var(--lake-d);font:800 1.05rem var(--mono);text-transform:uppercase;letter-spacing:.2em;padding:.35em .9em;border-radius:10px;opacity:0;pointer-events:none;z-index:4;background:rgba(255,255,255,.7);outline:2px solid var(--lake-d);outline-offset:-8px}
.stamp::before{content:"✓ "}
.exp.done .stamp{opacity:.95}
.exp.stamping .stamp{animation:slam .75s var(--spring) both}
@keyframes slam{from{opacity:0;transform:scale(3.2) rotate(10deg)}40%{opacity:1}}
.exp-tag{display:inline-block;font:700 .72rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:var(--tagc,#d8f5ee);border:2px solid var(--ink);border-radius:99px;padding:.4em .9em;margin-bottom:1em}
#exp-scan{--tagc:#fff1c7}#exp-hick{--tagc:#e3f1f6}#exp-load{--tagc:#d7ecff}#exp-build{--tagc:#ffe3f0}
.exp-info h3{font-size:clamp(1.7rem,2.2vw + 1rem,2.6rem);font-weight:620;letter-spacing:-.03em}
.todo{font:600 .78rem var(--mono);color:var(--plum);margin:1em 0 .6em;text-transform:uppercase;letter-spacing:.05em}
.todo::before{content:"✎ "}
.seg{border:0;padding:0;margin:1.2em 0;display:flex;flex-wrap:wrap;gap:8px}
.seg legend{font:700 .72rem var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:8px;padding:0}
.seg label,.chips label{position:relative}
.seg input,.chips input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.seg label span,.chips label span{display:inline-flex;align-items:center;min-height:44px;padding:.4em 1em;border:2px solid var(--ink);border-radius:999px;font-weight:600;font-size:.92rem;background:var(--paper2);transition:background-color .15s,transform .5s var(--spring)}
.seg label:hover span,.chips label:hover span{transform:scale(1.05)}
.seg input:checked+span,.chips input:checked+span{background:var(--ink);color:var(--paper)}
.seg input:focus-visible+span,.chips input:focus-visible+span{outline:3px solid var(--ink);outline-offset:3px}
.exp-stage{min-width:0}
.exp-ctrl{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px;align-items:center}
.wrap-btns{margin:1.2em 0}
.choices{display:flex;gap:12px;flex-wrap:wrap}
.result{margin-top:14px;min-height:5.5em;font-size:.97rem}
.result .res{background:var(--sage-l);border:2px solid var(--lake-d);border-radius:12px;padding:14px 18px;animation:up2 .6s var(--spring) both}
@keyframes up2{from{opacity:0;transform:translateY(14px) scale(.97)}}
.result p{margin:0 0 .5em}.result p:last-child{margin:0}
.stage{position:relative;aspect-ratio:16/10;background:var(--paper2);border:2px solid var(--ink);border-radius:14px;overflow:hidden;display:grid;place-items:center}
.stage-msg{text-align:center;font:500 1.2rem var(--serif);padding:20px;color:var(--muted)}
.stage-msg p{margin:0}
.stage-screen{position:absolute;inset:0;background:#fff}
.stage-screen:empty,.stage-screen.off{display:none}
.stage-mask{position:absolute;inset:0;background:repeating-conic-gradient(#8a948f 0 25%,#cfd5d1 0 50%) 0 0/14px 14px;display:none}
.stage-mask.on{display:block}
.stage.side{aspect-ratio:auto;display:block;padding:0}
.stage.side .stage-msg,.stage.side .stage-mask{display:none}
.stage.side .stage-screen{position:static;width:100%;display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:2px;background:var(--ink)}
.stage.side .stage-screen>div{position:relative;background:#fff;height:0;padding-bottom:120%;min-width:0}
.stage.side .stage-screen .mock{position:absolute;inset:0;height:auto;aspect-ratio:auto}
.stage.side .stage-screen>div>span{position:absolute;left:6px;bottom:6px;z-index:2;background:var(--ink);color:var(--paper);font:600 .7rem var(--mono);padding:3px 8px;border-radius:99px}

/* mock sites (fictional) — sized with container units */
.mock{container-type:inline-size;position:relative;background:#fff;color:#1a2330;overflow:hidden;font-family:var(--sans);line-height:1.35;width:100%;aspect-ratio:16/10}
.mock>*{font-size:max(8px,2.5cqw)}
.stage-screen .mock{height:100%;aspect-ratio:auto}
.m-top{display:flex;align-items:center;justify-content:space-between;gap:2cqw;padding:2.2cqw 4cqw;border-bottom:1px solid #dfe3e6;font-size:1em}
.m-logo{font:700 1.15em var(--serif);color:#1d4c3d}
.m-links{display:flex;gap:2.4cqw;margin-right:auto;margin-left:5cqw;color:#55616a}.m-links i{font-style:normal}
.m-phone{font-weight:700;color:#1d4c3d;white-space:nowrap}
.m-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:3cqw;padding:5cqw 4cqw 3cqw;align-items:center}
.m-hero.solo{grid-template-columns:1fr;padding:9cqw 8cqw;text-align:center;justify-items:center}
.m-h{font:600 2.2em/1.08 var(--serif);margin:0 0 .4em;color:#16231f}
.clean .m-h{font-size:3.4em}
.m-sub{color:#55616a;margin:0 0 1em}
.m-btn{display:inline-block;background:#1d4c3d;color:#fff;font-weight:700;padding:.65em 1.3em;border-radius:99px}
.clean .m-btn{background:#ff5b2e;color:#15201d;font-size:1.25em}
.m-img{border-radius:1.6cqw;overflow:hidden;aspect-ratio:4/3}.m-img svg{width:100%;height:100%}
.m-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw;padding:1cqw 4cqw 4cqw}
.m-cards span{background:#eef2ec;border:1px solid #d9e0d5;border-radius:1.4cqw;padding:2.2cqw;font-weight:600;text-align:center}
.busy{background:#fff7d6;font-family:Georgia,serif}
.b-strip{background:#d11;color:#ff0;font:700 1em Arial,sans-serif;text-align:center;padding:.5em;letter-spacing:.04em}
.busy .m-top{background:linear-gradient(#0a5,#063);color:#fff;border:0;padding:1.2cqw 2cqw}.busy .m-logo{color:#ff0;font:700 1em Impact,Arial,sans-serif}
.b-links{display:flex;gap:1cqw;font:.8em Arial;color:#cfc}.b-links i{font-style:normal;border-right:1px solid #8c8;padding-right:1cqw}
.b-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:1.5cqw;padding:1.5cqw}
.b-col{background:#fff;border:2px dashed #c60;padding:1.2cqw;position:relative}
.b-t1{font:700 1.6em/1.1 "Comic Sans MS",cursive,sans-serif;color:#c0c;margin:0 0 .3em}
.b-t2{font:800 1.2em Impact,sans-serif;color:#06c;margin:0 0 .3em}
.b-tiny{font:.72em/1.3 Arial;color:#444;margin:0 0 .5em}
.b-col .bz{display:inline-block;font:700 .85em Arial;border-radius:.4em;padding:.4em .9em;margin:0 .6em .4em 0;color:#fff}
.bz.r{background:#e22}.bz.y{background:#fc0;color:#000!important}.bz.g{background:#2a2}.bz.b{background:#26c}
.b-ad{position:absolute;right:.6cqw;top:.6cqw;background:#f0f;color:#fff;font:700 .7em Arial;padding:.3em .6em;transform:rotate(6deg)}
.heat{aspect-ratio:16/11;border:2px solid var(--ink);border-radius:14px}
.heat>*{font-size:max(9px,2.6cqw)}
.m-heat i{position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgba(255,60,20,var(--a,.8)),rgba(255,170,0,.45) 55%,rgba(255,220,0,0));filter:blur(2px);opacity:0;transform:scale(.7);transition:opacity .5s,transform .8s var(--spring)}
.heat.on .m-heat i{opacity:1;transform:none}
.heat::after{content:"";position:absolute;inset:0;background:rgba(10,20,18,.5);opacity:0;transition:opacity .4s;pointer-events:none;mix-blend-mode:multiply}
.heat.on::after{opacity:1}
.heat .m-heat{position:absolute;inset:0;z-index:2}
.m-path{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.m-path path{fill:none;stroke:#fff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;filter:drop-shadow(0 0 1px #000)}
.heat[data-path=f] path[data-p=f],.heat[data-path=z] path[data-p=z]{opacity:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.6s ease-in-out}
.toggles{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:1.2em 0}
.switch{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:6px 18px 6px 6px;border:2px solid var(--ink);border-radius:999px;background:var(--paper2);font:650 1rem var(--sans);cursor:pointer;color:var(--ink);transition:transform .5s var(--spring)}
.switch:hover{transform:scale(1.04)}
.knob{width:42px;height:32px;border-radius:99px;background:var(--line);position:relative;transition:background-color .2s;flex:none}
.knob::after{content:"";position:absolute;left:3px;top:3px;width:26px;height:26px;border-radius:50%;background:var(--ink);transition:transform .6s var(--spring)}
.switch[aria-checked=true] .knob{background:var(--lake)}
.switch[aria-checked=true] .knob::after{transform:translateX(10px)}
.seg-btns{display:flex;border:2px solid var(--ink);border-radius:999px;overflow:hidden}
.seg-btns button{min-height:44px;padding:.4em 1em;border:0;background:var(--paper2);font:600 .9rem var(--sans);cursor:pointer;color:var(--ink);transition:background-color .2s}
.seg-btns button+button{border-left:2px solid var(--ink)}
.seg-btns button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.seg-btns button:focus-visible{outline-offset:-5px;outline-color:var(--cta)}
.read{background:var(--paper2);border:2px dashed var(--line);border-radius:12px;padding:12px 16px;font-size:.95rem;min-height:5.2em}
.hick{aspect-ratio:auto;min-height:340px;border:2px solid var(--ink);border-radius:14px;background:#f8fafb}
.hick>.k-bar{padding:2.4cqw 4cqw;border-bottom:1px solid #dfe3e6;font-size:max(13px,3.6cqw)}
.hick>*{font-size:inherit}
.k-menu{display:flex;flex-wrap:wrap;gap:6px;padding:14px;min-height:230px;align-content:flex-start}
.k-idle{margin:0;padding:30px 12px;font:500 1.1rem var(--serif);color:var(--muted)}
.k-menu button{min-height:44px;padding:.3em .9em;border:1.5px solid #9aa7a2;border-radius:8px;background:#fff;font:500 .92rem var(--sans);color:var(--ink);cursor:pointer;animation:up2 .4s var(--spring) both}
.k-menu button:hover{background:var(--sage-l)}
.k-note{margin:0;padding:0 16px 14px;min-height:2.4em;color:var(--muted);font-size:1rem}
.times{list-style:none;padding:0;margin:0 0 1em;display:grid;gap:4px}
.times strong{font:600 1rem var(--mono)}
.load{aspect-ratio:16/11;border:2px solid var(--ink);border-radius:14px}
.load>*{font-size:max(9px,2.7cqw)}
.l-main{padding:5cqw 6cqw;text-align:center}
.l-phone{font:700 1.7em var(--serif);margin:0 0 .6em}.l-phone span{font:600 .55em var(--sans);color:#55616a;margin-right:.5em;text-transform:uppercase;letter-spacing:.1em}
.load .m-h{font-size:3em;margin-bottom:.2em}
.l-ribbon,.l-wall,.l-cta,.l-pop,.l-chat{display:none}
.load.noisy{background:#fffbe9}
.load.noisy .l-ribbon{display:block;background:#d11;color:#ff0;font:700 1em Arial;text-align:center;padding:.4em}
.load.noisy .m-top{background:#eee}
.load.noisy .l-main{text-align:left;padding:2cqw 3cqw}
.load.noisy .m-h{font-size:1.6em}
.load.noisy .l-phone{font-size:.9em;font-weight:500;color:#999;margin-bottom:.2em}
.load.noisy .m-btn{background:#bbb;font-size:.8em;padding:.4em 1em}
.load.noisy .l-wall{display:block;font:.72em/1.25 Georgia,serif;color:#333;margin:1em 0 .5em;max-width:60%}
.load.noisy .l-cta{display:inline-block;font:700 .9em Arial;color:#fff;padding:.5em 1em;border-radius:.3em;margin:.2em .4em .2em 0}
.c1{background:#e22}.c2{background:#26c}.c3{background:#a2c}
.load.noisy .l-pop{display:block;position:absolute;left:30%;top:32%;width:42%;background:#fff;border:2px solid #333;box-shadow:0 1.5cqw 3cqw rgba(0,0,0,.4);padding:2.4cqw;z-index:3;transform:rotate(-2deg);animation:popin .5s var(--spring) both}
.l-pop b{display:block;font-size:1.2em}.l-pop i{position:absolute;right:.8cqw;top:0;font-size:1.6em;color:#888;font-style:normal}
.load.noisy .l-chat{display:block;position:absolute;right:2cqw;bottom:2cqw;background:#2a7;color:#fff;font-weight:700;padding:1.2cqw 2.4cqw;border-radius:99px;z-index:4;animation:popin .6s .15s var(--spring) both}
@keyframes popin{from{opacity:0;transform:scale(.5) rotate(-8deg)}}

/* exp 05: build your homepage */
.exp-build{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.tg-grid{border:0;padding:0;margin:1.2em 0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tg{position:relative;display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 12px 6px 6px;border:2px solid var(--ink);border-radius:999px;background:var(--paper2);font-weight:600;font-size:.88rem;cursor:pointer;line-height:1.2;transition:transform .5s var(--spring),background-color .2s}
.tg:hover{transform:scale(1.03)}
.tg input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.sw{width:38px;height:30px;border-radius:99px;background:var(--line);position:relative;flex:none;transition:background-color .2s}
.sw::after{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:var(--ink);transition:transform .6s var(--spring)}
.tg:has(input:checked){background:#d8f5ee}
.tg input:checked~.sw{background:var(--lake)}.tg input:checked~.sw::after{transform:translateX(8px)}
.tg:has(input:focus-visible){outline:3px solid var(--ink);outline-offset:3px}
.b-ctrl{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:6px}
.meter{display:flex;align-items:center;gap:16px;margin:14px 0 4px}
.meter svg{width:150px;flex:none;overflow:visible}
.m-track,.m-fill{fill:none;stroke-width:14;stroke-linecap:round;stroke-dasharray:1}
.m-track{stroke:var(--line);stroke-dashoffset:0}
.m-fill{stroke:var(--lake-d);stroke-dashoffset:calc(1 - var(--n,0)/7);transition:stroke-dashoffset .9s var(--spring)}
.needle{transform-origin:100px 100px;transform:rotate(calc(-90deg + var(--n,0)*25.714deg));transition:transform 1s var(--spring)}
.needle path{stroke:var(--ink);stroke-width:4;stroke-linecap:round}.needle circle{fill:var(--ink)}
.meter text{font:700 10px var(--mono);fill:var(--muted);text-transform:uppercase}
.m-read{margin:0;font-size:.95rem}
.site{--ts:.74;--tc:#9aa0a6;--fog:.62;position:relative;background:#fff;border:2px solid var(--ink);border-radius:14px;overflow:hidden;container-type:inline-size;aspect-ratio:1/1.02;display:flex;flex-direction:column;color:#1a2330}
.site>*{font-size:calc(2.5cqw*var(--ts))}
.site>.s-hero,.site>.s-reviews{font-size:inherit}
.s-fog{position:absolute;inset:0;z-index:6;pointer-events:none;background:radial-gradient(circle at 30% 20%,rgba(235,238,240,.95),rgba(205,210,214,.9));opacity:var(--fog);transition:opacity .9s;mix-blend-mode:normal}
.s-head{display:flex;flex-wrap:wrap;align-items:center;gap:1cqw 3cqw;padding:2.2cqw 3.5cqw;border-bottom:1px solid #dcdfe2}
.s-logo{font:700 1.7em var(--serif);color:#1d4c3d;view-transition-name:blogo}
.s-menu{display:flex;flex-wrap:wrap;gap:.8cqw 2cqw;list-style:none;margin:0;padding:0;flex:1 1 100%;order:3;color:var(--tc);view-transition-name:bmenu}
.s-menu li{max-width:20ch;white-space:nowrap;overflow:hidden;transition:max-width .5s,opacity .4s;font-weight:500}
.site.on-menu .s-menu li:not(.keep){max-width:0;opacity:0;margin-left:-2cqw}
.site.on-menu .s-menu{gap:.8cqw 4cqw;font-weight:650}
.s-phone{font-weight:700;color:#1d4c3d;white-space:nowrap}
.s-phone-h{display:none;margin-left:auto;background:#e1f6f0;border:1.5px solid #1d4c3d;border-radius:99px;padding:.4em 1em;font-size:1.15em}
.site.on-contact .s-phone-h{display:inline-block}
.s-phone-f{view-transition-name:bphone}
.site.on-contact .s-phone-f{view-transition-name:none;opacity:.5}
.site.on-contact .s-phone-h{view-transition-name:bphone}
.s-hero{display:grid;grid-template-columns:1.25fr .75fr;gap:3cqw;padding:4cqw 3.5cqw 2cqw;align-items:center}
.s-h,.s-sub{display:grid;margin:0}
.s-h span,.s-sub span{grid-area:1/1;transition:opacity .5s}
.s-h{font:500 calc(3.6cqw*var(--ts))/1.1 var(--serif);color:var(--tc);margin-bottom:.5em;view-transition-name:bh}
.s-h .good,.s-sub .good{opacity:0}
.s-sub{font-size:calc(2.5cqw*var(--ts));color:var(--tc);margin-bottom:1em}
.site.on-headline .s-h .bad,.site.on-headline .s-sub .bad{opacity:0}
.site.on-headline .s-h .good,.site.on-headline .s-sub .good{opacity:1}
.site.on-headline .s-h{color:#16231f}
.site.on-hier .s-h{font-size:6.4cqw;font-weight:700;letter-spacing:-.03em;--tc:#16231f}
.s-ctas{display:flex;flex-wrap:wrap;gap:1.2cqw}
.cta{font:700 calc(2.3cqw*var(--ts))/1 Arial,sans-serif;padding:.8em 1.2em;border-radius:.5em;color:#fff;background:#6b7cff;max-width:30ch;white-space:nowrap;overflow:hidden;transition:max-width .5s,opacity .4s,padding .5s,margin .5s}
.cta:nth-child(2){background:#e22}.cta:nth-child(4){background:#2a2}.cta:nth-child(5){background:#a2c}.cta.main{background:#7d8aa0}
.site.on-cta .cta.x{max-width:0;padding-inline:0;opacity:0;margin-inline:-.6cqw}
.site.on-cta .cta.main{background:var(--cta);color:var(--ink);font-size:3.4cqw;padding:.8em 1.6em;border-radius:99px;box-shadow:0 .8cqw 0 -.2cqw #c4380f}
.cta.main{view-transition-name:bcta}
.s-art{border-radius:2cqw;overflow:hidden;opacity:.55;transition:opacity .5s,transform .8s var(--spring);aspect-ratio:4/3;view-transition-name:bart}
.s-art svg{width:100%;height:100%}
.site.on-hier .s-art{opacity:1}
.s-reviews{display:none;align-items:center;gap:2.4cqw;margin:1cqw 3.5cqw;padding:2cqw 2.6cqw;border:2px dashed #1d4c3d;border-radius:2cqw;background:#f1faf7;font-size:calc(2.5cqw*var(--ts));color:#16231f}
.s-reviews .stars svg{width:3.6cqw;height:3.6cqw}.s-reviews .stars{color:#1d4c3d;flex:none}
.site.on-reviews .s-reviews{display:flex;view-transition-name:breviews}
.s-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw;padding:1.5cqw 3.5cqw 2cqw;margin-top:auto;color:var(--tc)}
.s-cards span{background:#f1f2f4;border:1px solid #dcdfe2;border-radius:1.4cqw;padding:2.2cqw;font-weight:600;text-align:center;transition:background-color .5s,transform .8s var(--spring),color .4s}
.site.on-hier .s-cards .k1{background:#1d4c3d;color:#fff;transform:scale(1.04)}
.site.on-hier .s-cards{color:#16231f}
.s-foot{display:flex;justify-content:space-between;gap:2cqw;padding:2cqw 3.5cqw;border-top:1px solid #dcdfe2;color:var(--tc)}
.site.on-type{--ts:1;--tc:#1a2330}
.site .s-head,.site .s-hero,.site .s-cards,.site .s-foot{transition:color .4s}
.site.vt *{transition:none!important}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-group(*){animation-duration:.7s;animation-timing-function:var(--spring)}

/* ---- principles ---- */
.principles{margin-top:clamp(56px,7vw,96px)}
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 20px;align-items:start}
details{border:2px solid var(--ink);border-radius:14px;background:var(--paper2);transition:background-color .3s}
details[open]{background:#fff}
details summary{cursor:pointer;list-style:none;padding:14px 52px 14px 18px;font:650 1.02rem var(--sans);position:relative;min-height:52px;display:flex;align-items:center}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";position:absolute;right:18px;top:50%;margin-top:-14px;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font:500 1.2rem/1 var(--mono);transition:transform .6s var(--spring),background-color .2s}
details[open] summary::after{content:"+";transform:rotate(135deg);background:var(--lake-d)}
details>p{margin:0;padding:0 18px 14px;font-size:.96rem}
details>p:first-of-type{margin-top:-4px}
details b{color:var(--lake-d)}
.reading{margin-top:16px}
.reading ul{margin:0;padding:0 18px 16px 38px;font-size:.92rem;color:var(--muted)}
.reading li{margin-bottom:.5em}
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  details::details-content{block-size:0;overflow:clip;transition:block-size .45s var(--ease),content-visibility .45s allow-discrete}
  details[open]::details-content{block-size:auto}
}

/* ---- work ---- */
.work{--bg:radial-gradient(900px 500px at 85% 0%,rgba(45,212,191,.22),transparent 60%),var(--deep)}
.pick{display:grid;grid-template-columns:repeat(8,1fr);gap:10px;margin-bottom:26px}
.pc{position:relative;display:block;padding:0;border:2px solid rgba(255,255,255,.22);border-radius:14px;overflow:hidden;background:#0b1512;color:var(--paper);cursor:pointer;text-align:left;font:inherit;min-height:44px;transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .7s var(--spring),border-color .2s}
.pc.on{transition:transform .12s linear}
.pc img{width:100%;aspect-ratio:360/225;object-fit:cover;display:block}
.pc span{position:absolute;left:0;right:0;bottom:0;padding:22px 9px 8px;font:700 .72rem/1.15 var(--sans);background:linear-gradient(transparent,rgba(5,12,10,.92))}
.pc::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(200px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.4),transparent 60%);opacity:0;transition:opacity .3s}
.pc.on::after{opacity:1}
.pc[aria-pressed=true]{border-color:var(--sun);box-shadow:0 0 0 3px rgba(255,200,61,.35)}
.pc[aria-pressed=true] span{color:var(--sun)}
.slider{position:relative;aspect-ratio:934/584;border-radius:18px;overflow:hidden;border:2px solid var(--sage);background:#000;touch-action:pan-y;--p:50;cursor:grab;user-select:none;-webkit-user-select:none}
.slider.drag{cursor:grabbing}
.slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.s-before{clip-path:inset(0 calc(100% - var(--p)*1%) 0 0)}
.slider.swap img{animation:swapin .7s var(--ease) both}
@keyframes swapin{from{opacity:0;transform:scale(1.04)}}
.handle{position:absolute;top:0;bottom:0;left:calc(var(--p)*1%);width:0;pointer-events:none}
.handle::before{content:"";position:absolute;left:-1.5px;top:0;bottom:0;width:3px;background:var(--paper)}
.handle i{position:absolute;left:-28px;top:50%;margin-top:-28px;width:56px;height:56px;border-radius:50%;background:var(--sun);border:3px solid var(--ink);box-shadow:0 6px 18px rgba(0,0,0,.45);transition:transform .5s var(--spring)}
.slider.drag .handle i{transform:scale(1.18)}
.handle i::before,.handle i::after{content:"";position:absolute;top:50%;margin-top:-6px;border:6px solid transparent}
.handle i::before{left:8px;border-right-color:var(--ink)}
.handle i::after{right:8px;border-left-color:var(--ink)}
.slider input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;pointer-events:none}
.slider:has(input:focus-visible){outline:4px solid var(--cta);outline-offset:3px}
.lab-a,.lab-b{position:absolute;top:12px;padding:6px 12px;border-radius:99px;font:700 .72rem var(--mono);text-transform:uppercase;letter-spacing:.1em;pointer-events:none}
.lab-b{left:12px;background:var(--ink);color:var(--paper)}
.lab-a{right:12px;background:var(--paper);color:var(--ink)}
.flick{position:absolute;left:50%;bottom:16px;translate:-50% 0;display:flex;align-items:flex-end;gap:6px;color:#fff;pointer-events:none;transition:opacity .4s;text-shadow:0 1px 6px rgba(0,0,0,.7);animation:wig 2.6s ease-in-out infinite}
.flick b{font:italic 600 1.1rem var(--serif)}
.slider.touched .flick{opacity:0}
.cap{margin:16px 0 8px;font:500 1.15rem var(--serif)}

/* ---- offer ---- */
.offer-sec{background:var(--sun);border-block:2px solid var(--ink);--muted:#34403b}
.offer-sec h2 em{color:#0b5d56}
.offer{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:start}
.price{font:700 clamp(7rem,17vw,15rem)/.8 var(--serif);letter-spacing:-.07em;margin:.1em 0 .25em;display:flex;align-items:flex-start;font-variant-numeric:tabular-nums}
.price span{font-size:.38em;margin-top:.12em;margin-right:.04em;color:var(--ink)}
.price b{display:inline-block;font-weight:700}
.price small{font:700 .78rem var(--mono);text-transform:uppercase;align-self:flex-end;margin:0 0 .8em 1em;letter-spacing:.04em}
.offer-p{font-size:1.15rem;max-width:40ch}
.offer-sec .btn-cta{border-color:var(--ink)}
.bento{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.bt{background:#fffdf4;border:2px solid var(--ink);border-radius:18px;padding:20px 22px;display:flex;flex-direction:column;gap:6px;box-shadow:6px 7px 0 -2px var(--ink);position:relative}
.bt b{font:620 1.3rem/1.15 var(--serif);letter-spacing:-.02em}
.bt span:not(.bn){font-size:.95rem}
.bn{width:2.4rem;height:2.4rem;padding:.5rem;background:var(--ink);border-radius:50%;stroke:var(--sun);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:.6em}
.bt:nth-child(5){grid-column:1/-1}
.bt.wide{grid-column:1/-1;background:var(--ink);color:var(--paper);box-shadow:6px 7px 0 -2px #0b5d56}
.bt.wide b{color:var(--sun)}

/* ---- process ---- */
.process{--bg:linear-gradient(135deg,#083a36,#0f6f66);margin-block:clamp(10px,2vw,28px)}
.process .lead,.process .steps p{color:#d7efe9}
.process h2 em{color:var(--sun)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.steps li{position:relative;padding-top:74px}
.steps li::before{content:"";position:absolute;left:0;right:-24px;top:26px;height:3px;background:rgba(255,255,255,.55);transform-origin:left}
.steps li:last-child::before{display:none}
@supports (animation-timeline:view()){.steps li::before{animation:draw linear backwards;animation-timeline:view();animation-range:entry 10% entry 80%}}
@keyframes draw{from{transform:scaleX(0)}}
.steps .n{position:absolute;left:0;top:0;width:54px;height:54px;border-radius:50%;background:#083a36;border:3px solid #fff;display:grid;place-items:center;font:700 1.3rem var(--serif);transition:transform .7s var(--spring)}
.steps li:hover .n{transform:scale(1.12) rotate(-6deg)}
.steps .peak .n{background:var(--cta);color:var(--ink);border-color:var(--ink);width:66px;height:66px;margin:-6px 0 0 -6px;font-size:1.6rem;animation:glow 2.4s infinite}
@keyframes glow{0%{box-shadow:0 0 0 0 rgba(255,91,46,.6)}80%,100%{box-shadow:0 0 0 18px rgba(255,91,46,0)}}
.steps .end .n{background:var(--sun);color:var(--ink);border-color:var(--ink)}
.pk{position:absolute;left:78px;top:6px;background:var(--sun);color:var(--ink);font:700 .68rem var(--mono);text-transform:uppercase;letter-spacing:.06em;padding:.4em .8em;border-radius:99px;rotate:-4deg;white-space:nowrap}
.steps h3{font-size:1.4rem;font-weight:620}.steps p{font-size:.98rem}

/* ---- about ---- */
.about{background:var(--sand);border-block:2px solid var(--ink)}
.about-grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,6vw,88px);align-items:center}
.s4{left:50%;right:auto;top:auto;bottom:-14px;translate:-50% 0;rotate:-4deg;white-space:nowrap;background:var(--plum);color:#fff}
.about h2{margin-bottom:.4em}
.about .lead{margin-bottom:1em;color:var(--ink)}
.about p{max-width:62ch}

/* ---- faq ---- */
.faq{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(28px,5vw,80px)}
.faq-list{display:grid;gap:12px;align-content:start}
.faq-list details{background:var(--paper2)}
.faq-list details[open]{background:#fff}

/* ---- contact ---- */
.contact{--bg:radial-gradient(800px 500px at 10% 0%,rgba(45,212,191,.28),transparent 60%),linear-gradient(160deg,#11201c,#0c3f3b)}
.contact-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,80px);align-items:start}
.reach{list-style:none;padding:0;margin:2em 0 0}
.reach li{display:flex;gap:18px;padding:12px 0;border-top:1px solid rgba(255,255,255,.2)}
.reach span{font:700 .72rem var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--lake);width:80px;padding-top:.45em;flex:none}
.form{background:var(--paper);color:var(--ink);border-radius:24px;padding:clamp(20px,3vw,40px);display:grid;gap:18px}
.field label,.chips legend{display:block;font-weight:650;font-size:.95rem;margin-bottom:6px;padding:0}
.field label span,.chips legend span{font-weight:400;color:var(--muted)}
.field input,.field textarea{width:100%;min-height:50px;padding:12px 14px;border:2px solid var(--ink);border-radius:12px;background:var(--paper2);font:inherit;color:var(--ink);transition:box-shadow .3s,transform .5s var(--spring)}
.field input:focus,.field textarea:focus{transform:translateY(-2px);box-shadow:0 6px 0 -1px var(--lake)}
.field textarea{resize:vertical}
.field input:focus-visible,.field textarea:focus-visible{outline:3px solid var(--lake-d);outline-offset:2px}
.field input[aria-invalid=true]{border-color:#b3261e;background:#fff4f2}
.err{color:#a3201a;font-size:.88rem;font-weight:600;margin:6px 0 0}
.chips{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips legend{width:100%}
.form-note{font-size:.95rem}
.form-note:focus{outline:none}
.form-note .ok{background:var(--sage-l);border:2px solid var(--lake-d);border-radius:12px;padding:16px 18px;animation:up2 .6s var(--spring) both}
.form-note .ok p{margin:0 0 .6em}
.form-note .ok a.btn{margin-top:4px}

/* ---- footer ---- */
.site-footer{background:var(--ink);color:#d8dfd9;padding:0 0 24px;font-size:.95rem;position:relative;margin-top:clamp(10px,2vw,28px)}
.foot-ridge{width:100%;height:80px;display:block;margin-bottom:34px}
.foot-ridge path{fill:none;stroke:var(--sage);stroke-width:2;vector-effect:non-scaling-stroke}
@supports (animation-timeline:view()){.foot-ridge path{stroke-dasharray:1;animation:dash linear both;animation-timeline:view();animation-range:entry 0% entry 100%}}
@keyframes dash{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.foot{display:grid;grid-template-columns:1.2fr 1fr 1.2fr;gap:32px}
.foot p{margin:0 0 .4em}
.foot-brand{font:600 1.5rem var(--serif);color:var(--paper)}
.foot a{text-underline-offset:.25em}
.foot-base{display:flex;justify-content:space-between;gap:16px;margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.15);font-size:.85rem}
.foot-base p{margin:0}

/* ---- dock, cursor, confetti ---- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));background:linear-gradient(transparent,rgba(244,239,229,.95) 35%);transform:translateY(110%);transition:transform .5s var(--spring);display:none}
.dock .btn{width:100%;min-height:54px}
.dock.on{transform:none}
.cursor{position:fixed;left:0;top:0;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;border:2px solid #fff;mix-blend-mode:difference;pointer-events:none;z-index:200;opacity:0;transition:opacity .3s,width .35s var(--spring),height .35s var(--spring),margin .35s var(--spring),background-color .2s}
.cursor.show{opacity:1}
.cursor.big{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(255,255,255,.25)}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:150;overflow:hidden}
.confetti i{position:absolute;width:10px;height:14px;border-radius:2px;animation:conf 1.3s cubic-bezier(.15,.7,.3,1) forwards}
@keyframes conf{from{transform:translate(0,0) rotate(0);opacity:1}to{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0}}

/* ---- reveals (scroll-driven where supported, IO fallback; JS-only hiding) ---- */
@supports (animation-timeline:view()){
  .js [data-reveal]{animation:rv linear backwards;animation-timeline:view();animation-range:entry 0% entry 26%}
}
@keyframes rv{from{opacity:0;transform:translateY(18px)}}
@supports not (animation-timeline:view()){
  .js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity var(--primitive-duration-slow),transform var(--primitive-duration-slow) var(--ease)}
  .js [data-reveal].in{opacity:1;transform:none}
}
.static *,.static *::before,.static *::after{animation:none!important;transition:none!important}
.static [data-reveal]{opacity:1!important;transform:none!important}
.static .story-steps li{min-height:0!important;padding:24px 0}
.static .section{padding:84px 0}
.static .story-steps li{opacity:1!important}

/* ---- 404 ---- */
.notfound{min-height:100vh;display:grid;place-items:center;padding:40px var(--gut);text-align:center;background:linear-gradient(180deg,#86e0d2,#fff3cf)}
.notfound h1{font-size:clamp(2rem,5vw,3.6rem)}
.notfound .big{font:700 clamp(6rem,20vw,12rem)/1 var(--serif);color:var(--ink);margin:0}

/* ---- responsive ---- */
@media (max-width:1180px){
  .nav-toggle{display:block}
  .nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gut) 20px;background:var(--paper);border-bottom:2px solid var(--ink);display:none}
  .nav.open{display:flex}
  .nav a:not(.btn){padding:14px 4px;border-bottom:1px solid var(--line);font-size:1.05rem}
  .nav a:not(.btn)::after{display:none}
  .nav-cta{margin-top:14px;min-height:52px}
}
@media (max-width:1020px){
  .hero-grid,.exp,.exp-build,.offer,.faq,.contact-grid{grid-template-columns:minmax(0,1fr)}
  .exp.flip .exp-info{order:0}
  .idea-grid{grid-template-columns:1fr}
  .card:nth-child(2){translate:none}
  .steps{grid-template-columns:repeat(2,1fr);gap:40px 24px}
  .steps li:nth-child(2)::before{display:none}
  .hero-demo{max-width:600px}
  .cluster{min-height:420px}
  .pick{grid-template-columns:repeat(4,1fr)}
  .story-grid{grid-template-columns:1fr}
  .story-pin{top:76px;z-index:5;background:rgba(18,17,48,.94);backdrop-filter:blur(8px);margin-inline:calc(var(--gut)*-1);padding:10px var(--gut) 8px;border-bottom:1px solid rgba(255,255,255,.15)}
  .sv{aspect-ratio:auto;height:min(46vh,360px);max-width:none;box-shadow:8px 9px 0 -2px var(--sun)}
  .rail{margin-top:12px}
  .story-steps li{min-height:64vh}
}
@media (max-width:720px){
  .hero{padding-bottom:clamp(150px,36vw,220px)}
  .hero .lead{font-size:1.02rem}
  .hero-facts{font-size:.9rem}
  .pgrid,.about-grid,.foot{grid-template-columns:1fr}
  .about-grid{justify-items:start}
  .steps{grid-template-columns:1fr;gap:30px}
  .steps li{padding:0 0 0 76px;min-height:60px}
  .steps li::before{left:26px;right:auto;top:56px;bottom:-30px;width:3px;height:auto;transform-origin:top}
  .steps li:nth-child(2)::before{display:block}
  .steps .peak .n{margin:-6px 0 0 -6px}
  .pk{left:76px;top:-8px}
  .dock{display:block}
  .site-footer{padding-bottom:96px}
  .hero-actions .btn{flex:1 1 100%}
  .doodle{display:none}
  .exp{box-shadow:5px 6px 0 -2px var(--ink);border-radius:18px}
  .exp.done{box-shadow:5px 6px 0 -2px var(--lake-d)}
  .stamp{font-size:.8rem}
  .tag{font-size:.64rem}.t2{bottom:70px}
  .cluster{min-height:380px}
  .sticker{left:auto;right:8%;top:-6%;width:84px}
  .handle i{width:46px;height:46px;left:-23px;margin-top:-23px}
  .lab-a,.lab-b{top:8px;font-size:.62rem;padding:4px 9px}
  .foot-base{flex-direction:column}
  .heat{aspect-ratio:4/3.3}.load{aspect-ratio:4/3}
  .tg-grid{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr}
  .pick{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:46%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;margin-inline:calc(var(--gut)*-1);padding-inline:var(--gut);scrollbar-width:none}
  .pc{scroll-snap-align:start}
  .js .tracker{top:76px;padding:7px 10px;border-radius:16px;flex-wrap:nowrap;gap:8px}
  .tr-title{flex:none;line-height:1.15}.tr-title b,.tr-title span{display:block;margin:0}
  .tr-slots{flex-wrap:nowrap;margin-left:auto}
  .tr-slots a{padding:2px;min-height:44px;min-width:44px;justify-content:center}.tr-l{display:none}
  .tr-bar,.tr-cta{display:none}
  .sun{right:-22%;top:-3%;width:190px}
  .sec-dark{margin-inline:0}
  .story-steps li{min-height:58vh}
  .sv-chip{font-size:2.9cqw}
}
@media (max-width:560px){
  .js .tracker{flex-wrap:wrap}
  .tr-slots{margin-left:0;width:100%;justify-content:space-between}
  .tr-title{flex:1 1 100%}.tr-title b,.tr-title span{display:inline;margin-right:.5em}
}
/* ===== v3 layer =====
   Driven by: impeccable critique/audit (hero clutter, headline formula, tiny caps labels, targets, side-tabs),
   ui-ux-pro-max (motion tokens, reduced-motion, touch spacing), frontend-design (one orchestrated hero moment, restraint). */
.next{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin:clamp(36px,5vw,64px) 0 0}
.next span{color:var(--muted)}.sec-dark .next span{color:var(--on-dark-2)}
.lab .next{justify-content:center;text-align:center}
/* hero: the single orchestrated moment. The glance blurs in, then resolves to the clear page the site recommends. */
.js .c-browser .browser-body{animation:focus 1.3s .45s var(--ease) backwards}
@keyframes focus{from{filter:blur(9px) saturate(.2);opacity:.5}}
.js .tag{animation:pop .7s 1.5s var(--spring) backwards}
.doodle svg{animation-iteration-count:3}.b-btn::after{animation-iteration-count:4}
.c-timer{right:2%;bottom:-2%}
/* labels: readable minimums, calmer tracking, sentence case where the label is a phrase */
.tag,.todo,.seg legend,.c-timer span,.reach span,.price small,.sticker-s,.exp-tag,.rail li,.sn,.story-steps .principle,.lab-a,.lab-b,.pk,.brand-text small,.browser-bar span,.pc span,.tr-title span{font-size:max(.78rem,12px)}
.todo,.seg legend,.c-timer span,.tr-title span{text-transform:none;letter-spacing:.02em}
.rail li,.exp-tag,.sn,.lab-a,.lab-b,.pk{letter-spacing:.06em}
/* measure: no paragraph runs past ~68 characters */
.section :is(.lead,.sec-head p,.about p,.offer p,.faq p,.exp-info p){max-width:68ch}
/* touch targets (44px) */
.brand{min-height:44px}
@media (min-width:1181px){.nav a:not(.btn){min-width:44px;text-align:center;padding:12px 8px}}
.foot a,.reach a,.foot-base a{display:inline-flex;align-items:center;min-height:44px}
/* cursor ring: scale instead of animating width/height */
.cursor{transition:opacity .3s,scale .35s var(--spring),background-color .2s}
.cursor.big{width:36px;height:36px;margin:-18px 0 0 -18px;scale:1.8}
/* no side-stripe accents: boxed callout, dot marker */
.story-steps .how::before{content:"";display:inline-block;width:.55em;height:.55em;border-radius:50%;background:var(--sun);margin-right:.6em}
/* one colour for the honest-number strip */
@media (max-width:560px){
  .js .tracker{flex-wrap:nowrap;gap:8px}
  .tr-title{flex:1 1 auto;min-width:0}.tr-title b{display:none}.tr-title span{margin:0;display:block}
  .tr-slots{width:auto;flex:none;margin-left:auto}
  .tr-slots a{padding:0;min-width:44px;border-radius:50%}
}
@media (hover:none){.btn-cta:hover{transform:none}}

/* browser surfaces + numerals (typeset) */
::selection{background:var(--sun);color:var(--ink)}
input,textarea{caret-color:var(--cta)}
html{scrollbar-color:var(--sage-d) var(--paper)}
.price b,.c-timer b{font-variant-numeric:lining-nums tabular-nums}
body{font-kerning:normal;hanging-punctuation:first}

/* layout: headline left, supporting paragraph right on wide screens (no dead half-row); FAQ heading follows the list */
@media (min-width:1100px){
  .sec-head:has(>.lead){display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,72px);align-items:end;max-width:none}
  .sec-head:has(>.lead) .lead{margin:0 0 .5em}
  .faq>:first-child{position:sticky;top:110px;align-self:start}
}

/* hero delight: a cursor glides in and presses the one orange button once the glance has resolved */
.b-cursor{position:absolute;left:62%;top:58%;width:26px;height:26px;pointer-events:none;filter:drop-shadow(1px 2px 0 rgba(21,32,29,.25))}
.js .b-cursor{animation:glide 1s 2.1s var(--ease) backwards}
.js .b-btn{animation:press .35s 3.1s var(--ease)}
@keyframes glide{from{opacity:0;transform:translate(90px,-80px)}}
@keyframes press{40%{transform:scale(.93)}}
@media (max-width:420px){
  /* the count stays in the DOM for screen readers; the five slots already show progress */
  .tr-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tr-slots{width:100%;justify-content:space-between;margin:0}
}
.foot a,.reach a,.foot-base a{overflow-wrap:anywhere}
@media (max-width:1180px) and (min-width:721px){.c-timer{right:-2%;bottom:-14%;scale:.85}.von{margin-top:48px}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* calm version: no movement, but state changes (colour, opacity) still ease in briefly so feedback is not lost */
  *,*::before,*::after{animation:none!important;transition:color .12s,background-color .12s,border-color .12s,opacity .12s!important}
  [data-reveal]{opacity:1!important;transform:none!important}
  .sec-dark::before{transform:none!important}
  .cursor,.confetti,.doodle svg{display:none!important}
  .progress{transform:scaleX(0)}
  .mq-track{width:auto;flex-wrap:wrap;transform:none}
  .mq-track ul{flex-wrap:wrap}.mq-track ul+ul{display:none}
  .rot em{opacity:0}.rot em.on{opacity:1;transform:none}
  .js .story-steps li{opacity:1}
  .stage-mask{background:#aab2ad}
  .sv-site{opacity:1}
}