*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--color-packhex-background);color:var(--color-packhex-text);font:400 16px/1.55 var(--font-sans);-webkit-font-smoothing:antialiased}
a{color:var(--color-packhex-link);text-decoration:none}
a:hover{color:var(--color-packhex-text-muted)}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.muted{color:var(--color-packhex-text-muted)}
svg.lucide{width:16px;height:16px;stroke-width:1.5;flex:none}
.btn{text-decoration:none}
.btn-default:hover{background:var(--color-packhex-primary-hover);color:var(--color-packhex-primary-foreground)}
.btn-outline:hover,.btn-ghost:hover{background:var(--color-packhex-selected);color:var(--color-packhex-text)}
.btn:focus-visible,.ico:focus-visible,input[type=range]:focus-visible{outline:2px solid var(--color-packhex-focus-ring);outline-offset:2px}
.eyebrow{font:500 12px var(--font-mono);letter-spacing:0.06em;text-transform:uppercase;color:var(--color-packhex-text-muted)}
.band{background:var(--color-packhex-background);color:var(--color-packhex-text)}
/* third colour: graphics and one headline only, never fills behind text or buttons */
:root{--accent-l:#F2B705;--accent-d:#FFCC1F}
.btn:not(.win .btn){border-radius:999px;height:34px;padding:0 16px;font-size:14px;font-weight:500}
.btn.btn-lg:not(.win .btn){height:46px;padding:0 24px;font-size:16px}
[data-theme="light"]{--accent:var(--accent-l)}
[data-theme="dark"]{--accent:var(--accent-d)}
:root{--on-accent:#141210}
.ac{position:relative;display:inline-block;white-space:nowrap}
.ac>svg{position:absolute;left:-2%;bottom:-.2em;width:104%;height:.34em;overflow:visible;pointer-events:none}
.ac>svg path{fill:none;stroke:var(--accent);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
@media (prefers-reduced-motion:no-preference){
  .js .ac>svg{clip-path:inset(-50% 100% -50% 0);transition:clip-path 900ms cubic-bezier(.45,0,.2,1) 250ms}
  .js .in .ac>svg{clip-path:inset(-50% 0 -50% 0)}
}
/* the lifting part starts neutral and takes the accent when the first spark arrives */
.cube .lift .acc{opacity:0;transition:opacity 1400ms cubic-bezier(.2,0,0,1)}
.cube.lit .lift .acc{opacity:1}
.cube .lift .acc .ft{fill:color-mix(in oklab,var(--accent) 55%,#fff)}
.cube .lift .acc .fl{fill:var(--accent)}
.cube .lift .acc .fr{fill:color-mix(in oklab,var(--accent) 72%,#000)}
.cube .lift .hl{stroke:rgba(255,255,255,.75)}

/* header */
.hdr{position:sticky;top:20px;z-index:10;margin-top:24px;padding:0 20px;pointer-events:none}
.capsule{pointer-events:auto;max-width:880px;margin:0 auto;height:56px;display:flex;align-items:center;gap:24px;padding:0 8px 0 22px;background:var(--color-packhex-surface);border:1px solid var(--color-packhex-border);border-radius:999px;position:relative;overflow:hidden;transition:box-shadow 180ms var(--ease-standard,ease)}
.hdr.scrolled .capsule{box-shadow:var(--shadow-raised)}
.capsule .prog{position:absolute;left:0;bottom:0;height:2px;width:var(--sp,0%);background:var(--accent)}
.logo{color:var(--color-packhex-logo);display:flex}
.hdr nav{display:flex;gap:2px;font-size:14px;margin:0 auto}
.hdr nav a{position:relative;padding:7px 14px;border-radius:999px;color:var(--color-packhex-text-muted);transition:color 180ms,background 180ms,padding 220ms var(--ease-standard,ease)}
.hdr nav a:hover{color:var(--color-packhex-text);background:var(--color-packhex-selected)}
.hdr nav a.on{color:var(--accent)}
.hdr .end{display:flex;align-items:center;gap:4px}
.ico{width:36px;height:36px;display:grid;place-items:center;border-radius:var(--radius-md);border:0;background:none;color:var(--color-packhex-text-muted);cursor:pointer}
.ico:hover{background:var(--color-packhex-selected);color:var(--color-packhex-text)}

/* hero */
.hero{position:relative;overflow:hidden;margin-top:-80px;padding-top:80px;background:var(--color-packhex-background);color:var(--color-packhex-text);--grid-c:#E6E3DC;--ring-c:#CFCBC3;--glow:#F4F1EA}
.hero .wrap{position:relative;z-index:1}
.hero .wrap>div:first-child{position:relative;z-index:2}
.hero-bg{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 500ms var(--ease-standard,ease);-webkit-mask-image:radial-gradient(ellipse 36% 58% at var(--cx,72%) var(--cy,52%),#000 0%,rgba(0,0,0,.45) 52%,transparent 100%);mask-image:radial-gradient(ellipse 36% 58% at var(--cx,72%) var(--cy,52%),#000 0%,rgba(0,0,0,.45) 52%,transparent 100%)}
.hero-bg .igrid path{fill:none;stroke:var(--grid-c);stroke-width:1}
.hero-bg>svg{position:absolute;inset:0;width:100%;height:100%}
.hero-bg .fx mask path{stroke:none}
.hero-bg .fx .pl{fill:none;stroke:var(--accent);stroke-width:1.3}
.hero-bg .fx .fxring{fill:none;stroke:var(--accent);stroke-width:1.5}
/* left accent: a spark slides in along the grid, a soft glow sits in the top-left corner */
.hero-spark{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.hero-spark .trk{fill:none;stroke:var(--accent);stroke-width:1;opacity:0}
.hero-spark .cm{fill:none;stroke:var(--accent);stroke-linecap:round}
.hero-glow{position:absolute;left:-22%;top:-38%;width:62%;height:96%;pointer-events:none;z-index:0;background:radial-gradient(closest-side,color-mix(in oklab,var(--accent) 30%,transparent),transparent);opacity:.14}
@media (prefers-reduced-motion:no-preference){.hero-glow{animation:glowB 9.5s ease-in-out infinite}@keyframes glowB{0%,100%{opacity:.08}50%{opacity:.18}}}
@media (max-width:960px){.hero-spark{display:none}}
.cube{position:relative}
:root[data-hero="grid"] .hero-bg,:root[data-hero="ink"] .hero-bg{opacity:1}
.cube .rings,.cube .spot{display:none}
:root[data-hero="rings"] .cube .rings{display:inline}
:root[data-hero="ink"] .cube .spot{display:inline}
.cube .ring{fill:none;stroke:var(--ring-c);stroke-width:1;vector-effect:non-scaling-stroke;stroke-opacity:calc(1 - var(--i)*.18)}
.cube .rings{transition:transform 900ms cubic-bezier(.2,0,0,1)}
.cube.open .rings{transform:scale(1.07)}
:root .hero{--ring-c:rgba(244,241,234,.26);--cube-t1:#FFFFFF;--cube-t2:#F1EDE5;--cube-l1:#D9D5CD;--cube-l2:#BDB8AF;--cube-r1:#8E897F;--cube-r2:#6B675F;--cube-hl:rgba(255,255,255,.95);--cube-sho:0;--grid-c:rgba(244,241,234,.075)}
:root[data-hero="grid"] .hero{--grid-c:rgba(244,241,234,.13)}

@media (prefers-reduced-motion:no-preference){
  .js .cube .ring{animation:ringIn 1.1s cubic-bezier(.2,0,0,1) both;animation-delay:calc(700ms + var(--i)*110ms)}
  @keyframes ringIn{from{opacity:0}to{opacity:1}}
}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);gap:48px;align-items:center;min-height:calc(100vh - 92px);max-height:none;padding-top:48px;padding-bottom:72px}
.hero h1{margin:0;font:600 clamp(52px,7vw,96px)/0.96 var(--font-heading);letter-spacing:-0.048em;text-wrap:balance}
.hero p{margin:24px 0 0;font-size:20px;line-height:1.4;color:var(--color-packhex-text-muted)}
.acts{display:flex;gap:28px;align-items:center;flex-wrap:wrap;margin-top:44px}
.btn-accent{background:var(--accent);color:var(--on-accent);border-color:transparent;font-weight:600}
.btn-accent:hover{background:color-mix(in oklab,var(--accent) 88%,var(--on-accent));color:var(--on-accent)}
.tlink{font:500 15px var(--font-sans);color:var(--color-packhex-text);text-decoration:underline;text-decoration-color:var(--color-packhex-border-strong);text-decoration-thickness:1px;text-underline-offset:5px;transition:text-decoration-color 180ms var(--ease-standard,ease)}
.tlink:hover{color:var(--color-packhex-text);text-decoration-color:currentColor}
.legend s{text-decoration-thickness:1px;color:var(--color-packhex-text-subtle);margin-right:6px}
.cube{display:flex;justify-content:center;outline:0;cursor:default}
.cube svg{width:min(100%,540px);height:auto;overflow:visible}
.cube .ft{fill:url(#gT)}.cube .fl{fill:url(#gL)}.cube .fr{fill:url(#gR)}
.cube .hl{fill:none;stroke:var(--cube-hl);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.cube .ex{transition:transform 900ms cubic-bezier(.2,0,0,1)}
.cube.open .ex{transform:translate(var(--ex),var(--ey))}
.cube .gsh{transition:transform 900ms cubic-bezier(.2,0,0,1);transform-box:fill-box;transform-origin:center}
.cube.open .gsh{transform:scale(1.25)}
:root,[data-theme="light"]{--cube-t1:#FFFFFF;--cube-t2:#F1EDE5;--cube-l1:#E3DFD7;--cube-l2:#CFCAC1;--cube-r1:#B3AFA7;--cube-r2:#97928A;--cube-hl:rgba(255,255,255,.95);--cube-sh:#5E584F;--cube-sho:.3}
[data-theme="dark"]{--cube-t1:#8D8981;--cube-t2:#6C6861;--cube-l1:#47433E;--cube-l2:#36332F;--cube-r1:#2A2724;--cube-r2:#1E1C1A;--cube-hl:rgba(255,255,255,.22);--cube-sh:#000;--cube-sho:.7}

/* sections */
.sec{padding:160px 0}
.sh{margin-bottom:56px;display:flex;flex-direction:column;gap:16px}
.sh h2{margin:0;font:600 clamp(36px,5vw,64px)/1.02 var(--font-heading);letter-spacing:-0.042em;text-wrap:balance}
.sh p{margin:0;color:var(--color-packhex-text-muted);font-size:18px;max-width:52ch}

/* why */
.why h2{margin:20px 0 0;font:500 clamp(30px,3.8vw,48px)/1.14 var(--font-heading);letter-spacing:-0.032em;max-width:28ch;text-wrap:pretty}
.why h2 span{color:var(--color-packhex-text-muted)}
.pains{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:96px;border-top:1px solid var(--color-packhex-border)}
.pains>div{padding:28px 28px 0 0;display:flex;flex-direction:column;gap:10px}
.pains>div+div{padding-left:28px;border-left:1px solid var(--color-packhex-border)}
.pains b{font:600 18px/1.3 var(--font-heading);letter-spacing:-0.02em}
.pains span{font-size:15px;color:var(--color-packhex-text-muted)}

/* time bars */
.stat{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:64px}
.stat b{font:600 clamp(64px,10vw,148px)/0.9 var(--font-heading);letter-spacing:-0.055em;font-variant-numeric:tabular-nums}
.stat span{font-size:18px;color:var(--color-packhex-text-muted)}
.bars{display:flex;flex-direction:column;gap:40px}
.brow{display:grid;grid-template-columns:140px minmax(0,1fr);gap:24px;align-items:center}
.brow>b{font:600 15px var(--font-heading)}
.brow>b small{display:block;font:400 13.5px var(--font-sans);color:var(--color-packhex-text-muted);margin-top:2px}
.track{display:flex;align-items:center;gap:14px;min-width:0}
.bar{display:flex;height:44px;border-radius:var(--radius-sm);overflow:hidden;gap:2px;flex:none}
.bar i{display:block;height:100%}
.bar.us{background:var(--accent);flex:0 1 auto;min-width:0;transition:width 1400ms var(--ease-standard,ease)}
.track em{font:500 15px var(--font-sans);font-style:normal;white-space:nowrap;font-variant-numeric:tabular-nums}
.legend{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin:28px 0 0 164px;padding-top:20px;border-top:1px solid var(--color-packhex-border)}
.legend div{display:flex;flex-direction:column;gap:4px;font-size:13.5px}
.legend div::before{content:"";width:12px;height:12px;border-radius:3px;background:var(--c);margin-bottom:6px}
.legend b{font-weight:500}
.legend span{color:var(--color-packhex-text-muted);font-variant-numeric:tabular-nums}
.fn{margin:40px 0 0;font-size:13px;color:var(--color-packhex-text-subtle)}

/* bento (kept) */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.card{background:var(--color-packhex-surface);border:1px solid var(--color-packhex-border);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column}
.card.s5{grid-column:span 5}.card.s7{grid-column:span 7}
.card-t{padding:24px 28px 0;display:flex;flex-direction:column;gap:4px}
.card-t .n{font:500 12px var(--font-mono);color:var(--color-packhex-text-subtle)}
.card-t h3{margin:6px 0 0;font:600 20px/1.2 var(--font-heading);letter-spacing:-0.025em}
.card-t p{margin:0;font-size:15px;color:var(--color-packhex-text-muted)}
.win{position:relative;height:340px;margin:28px 0 0 28px;border:1px solid var(--color-packhex-border);border-right:0;border-bottom:0;border-top-left-radius:var(--radius-md);overflow:hidden;background:var(--color-packhex-background)}
.win>div{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none}
/* product windows behave like screenshots: no selecting, copying, dragging or tabbing into the mock UI */
.win{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.win.desk{background:var(--color-packhex-surface-muted)}
.win .pop{display:none}
.win .ring{box-shadow:none!important;outline:0!important}

/* value calculator + pricing */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid var(--color-packhex-border);border-radius:var(--radius-lg);overflow:hidden;background:var(--color-packhex-surface)}
.inputs{padding:40px;display:flex;flex-direction:column;gap:32px}
.rg{display:flex;flex-direction:column;gap:10px}
.rg label{display:flex;justify-content:space-between;align-items:baseline;font-size:14.5px;color:var(--color-packhex-text-muted)}
.rg label output{font:600 20px var(--font-heading);letter-spacing:-0.02em;color:var(--color-packhex-text);font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:24px;margin:0;background:transparent;cursor:pointer;--p:50%}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,var(--accent) var(--p),var(--color-packhex-border-strong) var(--p))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-8px;border-radius:50%;background:var(--accent);border:4px solid var(--color-packhex-surface);box-shadow:0 0 0 1.5px var(--color-packhex-text)}
input[type=range]::-moz-range-track{height:4px;background:var(--color-packhex-border-strong)}
input[type=range]::-moz-range-progress{height:4px;background:var(--accent)}
input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--accent);border:4px solid var(--color-packhex-surface);box-shadow:0 0 0 1.5px var(--color-packhex-text)}
.result{padding:40px;display:flex;flex-direction:column;gap:28px;background:var(--color-packhex-background);color:var(--color-packhex-text)}
.result .big b{display:block;font:600 clamp(56px,7vw,96px)/0.92 var(--font-heading);letter-spacing:-0.052em;font-variant-numeric:tabular-nums}
.result .big span{font-size:15px;color:var(--color-packhex-text-muted)}
.kv{display:grid;grid-template-columns:1fr auto;gap:12px 24px;padding-top:24px;border-top:1px solid var(--color-packhex-border);font-size:15px}
.kv span{color:var(--color-packhex-text-muted)}
.kv b{font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.payback{margin:auto 0 0;font:500 19px/1.4 var(--font-heading);letter-spacing:-0.015em;text-wrap:pretty}
.pcap{display:flex;justify-content:space-between;font:500 12px var(--font-mono);letter-spacing:0.06em;text-transform:uppercase;color:var(--color-packhex-text-muted);margin-bottom:-16px}
.plist{display:flex;flex-direction:column;border:1px solid var(--color-packhex-border);border-radius:var(--radius-md);overflow:hidden}
.prow{all:unset;box-sizing:border-box;display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:16px;align-items:center;padding:13px 16px;font:400 14px var(--font-sans);color:var(--color-packhex-text-muted);position:relative;cursor:pointer;transition:background 180ms,color 180ms}
.prow+.prow{border-top:1px solid var(--color-packhex-border)}
.prow b{font:600 15px var(--font-heading);letter-spacing:-0.015em;color:var(--color-packhex-text)}
.prow em{font:600 15px var(--font-sans);font-style:normal;color:var(--color-packhex-text);font-variant-numeric:tabular-nums}
.prow:hover{background:var(--color-packhex-surface-muted)}
.prow:focus-visible{outline:2px solid var(--color-packhex-focus-ring);outline-offset:-2px}
.prow.on{background:var(--color-packhex-selected);color:var(--color-packhex-text)}
.prow.on::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.btn.go:not(.win .btn){width:100%;height:48px;font-size:15px}

/* price tag: the quote the 20 minutes produce */
.qchip{display:flex;flex-direction:column;gap:3px;padding:12px 18px 13px 16px;border:1px solid var(--color-packhex-border);border-radius:14px;background:var(--color-packhex-surface-raised);box-shadow:var(--shadow-raised);color:var(--color-packhex-text);text-align:left;white-space:nowrap}
.qchip .qh{display:flex;align-items:center;gap:7px;font:500 11.5px var(--font-mono);color:var(--color-packhex-text-muted)}
.qchip .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.qchip b{font:600 26px/1.15 var(--font-heading);letter-spacing:-0.03em;font-variant-numeric:tabular-nums}
.qchip .qs{font-size:12.5px;color:var(--color-packhex-text-muted)}
.qchip.row{flex-direction:row;align-items:center;gap:16px;padding:9px 18px 9px 14px;border-radius:999px}
.qchip.row b{font-size:20px}
@media (prefers-reduced-motion:no-preference){
  .js .qchip{opacity:0}
  .js .qchip.qgo{animation:qin 800ms cubic-bezier(.2,0,0,1) var(--qd,0ms) both}
  @keyframes qin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}
@media (max-width:720px){.qchip.row{display:none!important}}

/* cta + footer */
.cta{padding:200px 0;text-align:center}
.cta .wrap{display:flex;flex-direction:column;align-items:center;gap:36px}
.cta h2{margin:0;font:600 clamp(40px,6.4vw,84px)/1 var(--font-heading);letter-spacing:-0.048em;text-wrap:balance}
.ftr{padding-top:80px;overflow:hidden}
.ftr-top{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap}
.ftr-top p{margin:0;font:500 15px var(--font-sans);color:var(--color-packhex-text-muted);max-width:24ch}
.cols{display:grid;grid-template-columns:repeat(2,auto);gap:96px}
.cols div{display:flex;flex-direction:column;gap:10px;font-size:14px}
.cols b{font:500 11.5px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--color-packhex-text-subtle);margin-bottom:4px}
.cols a{color:var(--color-packhex-text-muted)}
.cols a:hover{color:var(--color-packhex-text)}
.ftr-brand{display:flex;flex-direction:column;gap:18px}
/* logo accent: only the top-right box of the 2x2 face (5th path) takes the accent */
.logo svg path:nth-of-type(5){fill:var(--accent)}
.ftr-bot{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding:22px 0 26px;margin-top:80px;border-top:1px solid var(--color-packhex-border);font-size:13.5px;color:var(--color-packhex-text-muted)}
.sys{display:inline-flex;align-items:center;gap:8px;color:var(--color-packhex-text-muted)}
.sys i{width:6px;height:6px;border-radius:50%;background:var(--color-packhex-success)}
.ftr .links{margin-left:auto;display:flex;gap:24px}
.ftr .links a{color:var(--color-packhex-text-muted)}
.ftr .links a:hover{color:var(--color-packhex-text)}

/* motion */
@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0;transform:translateY(14px);transition:opacity 700ms var(--ease-standard,ease),transform 700ms var(--ease-standard,ease)}
  .js .rv.in{opacity:1;transform:none}
  .js .cube .cb{opacity:0;animation:drop 700ms cubic-bezier(0.2,0,0,1) forwards;animation-delay:var(--d)}
  .js .cube .lift{animation:lift 6s 2.6s ease-in-out infinite}
  @keyframes drop{from{opacity:0;transform:translateY(-36px)}to{opacity:1;transform:none}}
  @keyframes lift{0%,30%,100%{transform:none}45%,80%{transform:translate(10px,-17px)}}
}

@media (max-width:960px){
  .hero .wrap{grid-template-columns:1fr;min-height:0;padding-top:64px}
  .cube svg{width:min(80%,360px)}
  .card.s5,.card.s7{grid-column:1/-1}
  .calc{grid-template-columns:1fr}
  .pains{grid-template-columns:1fr}
  .pains>div+div{padding-left:0;border-left:0;border-top:1px solid var(--color-packhex-border);margin-top:28px}
  .legend{margin-left:0;grid-template-columns:repeat(3,minmax(0,1fr))}
  .brow{grid-template-columns:1fr;gap:10px}
  .sec{padding:112px 0}
}
@media (max-width:720px){
  .wrap{padding:0 20px}
  .hdr nav,.hdr .si{display:none}
  .win{height:280px;margin:24px 0 0 20px}
  .inputs,.result{padding:28px}
  .legend{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cta{padding:136px 0}
  .ftr .links{margin-left:0}
  .cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
}