/* Primato · app pages (PowerPeak Live, Edge x30, BPMPeak, Speed Peak)
   Built on the shell tokens (/assets/shell/primato-shell.css). One file for the four pages.
   Colour roles: Primato yellow = actions and the record moment; app amber #FFC300 and fluo #FFFF00 live only
   inside the device screens; zone colours are data. */
:root{
  --bg:var(--p-g-990); --s1:var(--p-g-950); --s2:var(--p-g-900); --s3:var(--p-g-850);
  --line:var(--p-g-800); --ink:var(--p-ivory); --ink2:#D9D4C8; --mut:var(--p-g-400);
  --y:var(--p-yellow); --ab-h:56px; --top:calc(var(--primato-header-h,80px) + var(--ab-h));
  --app:var(--p-yellow);
}
html[data-theme="heart"]{--app:#FF5A4A}
html[data-theme="speed"]{--app:#7FD4FF}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--top) + 16px);-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--p-fs-md)/var(--p-lh-text) var(--p-font-text);
  -webkit-font-smoothing:antialiased;overflow-x:clip;padding-top:var(--primato-header-h,80px)}
img,svg,canvas{max-width:100%}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-weight:700}
:focus-visible{outline:2px solid var(--y);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{width:100%;max-width:var(--p-max);margin-inline:auto;padding-inline:var(--p-gutter)}
.h2{font:700 var(--p-fs-2xl)/1.02 var(--p-font-display);letter-spacing:var(--p-track-display);text-wrap:balance}
.h2.big{font-size:var(--p-fs-3xl);line-height:.95}
.lead{color:var(--ink2);font-size:var(--p-fs-lg);line-height:1.5;max-width:58ch}
.sec{padding-block:calc(var(--p-section) * .78);position:relative}
.sec + .sec{border-top:1px solid var(--p-g-900)}
.sec-head{margin-bottom:var(--p-s-7);max-width:60rem}
.sec-head .lead{margin-top:var(--p-s-4)}
.sec-head.center{text-align:center;margin-inline:auto}
.sec-head.center .lead{margin-inline:auto}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:.75em 1.35em;border-radius:var(--p-r-pill);
  font:600 var(--p-fs-sm)/1.1 var(--p-font-text);text-decoration:none;border:1px solid transparent;cursor:pointer;text-align:center;
  transition:background var(--p-dur-2) var(--p-ease-out),color var(--p-dur-2),border-color var(--p-dur-2),transform var(--p-dur-2) var(--p-ease-out)}
.btn-y{background:var(--y);color:var(--p-black)}
.btn-y:hover{background:var(--p-yellow-deep)}
.btn-y:active{transform:translateY(1px)}
.btn-ghost{border-color:var(--p-g-700);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);background:rgba(244,241,232,.04)}
.btn-lg{min-height:56px;padding-inline:1.8em;font-size:var(--p-fs-md)}

/* ---------- app bar: name, sections, licence always in reach ---------- */
.appbar{position:sticky;top:var(--primato-header-h,80px);z-index:800;height:var(--ab-h);
  background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--p-g-900);transition:top var(--p-dur-3) var(--p-ease-out)}
/* the Primato header hides while scrolling down: the app bar takes its place */
primato-header[data-hidden] + .appbar{top:0}
.ab-in{height:100%;max-width:var(--p-max);margin-inline:auto;padding-inline:var(--p-gutter);display:flex;align-items:center;gap:var(--p-s-5)}
.ab-name{display:flex;align-items:center;gap:.6em;text-decoration:none;font:700 1.15rem/1 var(--p-font-display);white-space:nowrap}
.ab-mark{width:10px;height:10px;border-radius:2px;background:var(--app);transform:skewX(var(--p-slant))}
.ab-sub{font:500 var(--p-fs-xs)/1 var(--p-font-text);color:var(--mut);margin-left:.2em}
.ab-links{display:flex;gap:var(--p-s-1);list-style:none;margin:0 0 0 auto;padding:0}
.ab-links a{display:block;padding:.55em .8em;border-radius:var(--p-r-pill);text-decoration:none;color:var(--mut);font-size:var(--p-fs-xs);font-weight:500;
  transition:color var(--p-dur-2),background var(--p-dur-2)}
.ab-links a:hover,.ab-links a[aria-current="true"]{color:var(--ink);background:rgba(244,241,232,.06)}
.ab-cta{min-height:38px;padding:.5em 1.05em;font-size:var(--p-fs-xs);margin-left:auto}
.ab-links + .ab-cta{margin-left:0}
@media (max-width:1100px){.ab-links{display:none}}
@media (max-width:420px){.ab-name{font-size:1rem}.ab-sub{display:none}.ab-cta{padding-inline:.85em}}

/* ---------- hero ---------- */
.hero{position:relative;overflow:clip;padding-block:clamp(2.5rem,1rem + 5vw,6rem) clamp(3rem,2rem + 4vw,6rem);isolation:isolate}
.curve-band{position:relative;margin-top:var(--p-s-7)}
.curve-band canvas{display:block;width:100%;height:clamp(130px,13vw,210px)}
.cb-legend{position:absolute;top:0;right:var(--p-gutter);display:flex;gap:var(--p-s-4);font-size:var(--p-fs-xs);color:var(--mut)}
.cb-legend span::before{content:"";display:inline-block;width:18px;height:0;margin-right:.5em;vertical-align:middle;border-top:2.5px solid var(--y)}
.cb-legend .p::before{border-top:1.5px dashed rgba(244,241,232,.5)}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:30%;z-index:-1;background:linear-gradient(transparent,var(--bg));pointer-events:none}
.hero-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--p-s-6);align-items:center;min-height:calc(100svh - var(--top) - 10rem)}
.hero-copy{grid-column:1 / span 7;position:relative;z-index:2}
.newpill{display:inline-flex;align-items:center;gap:.5em;padding:.45em .95em;border:1px solid var(--p-g-800);border-radius:var(--p-r-pill);
  color:var(--ink2);text-decoration:none;font-size:var(--p-fs-xs);margin-bottom:var(--p-s-5);background:rgba(21,20,18,.6);transition:border-color var(--p-dur-2)}
.newpill:hover{border-color:var(--y)}
.newpill b{color:var(--y);font-weight:600}
.eyebrow{color:var(--mut);font-size:var(--p-fs-sm);margin-bottom:var(--p-s-4)}
.hero-title{font-family:var(--p-font-display);font-weight:700;font-size:clamp(3rem,1.1rem + 6.4vw,7.6rem);line-height:.9;letter-spacing:-.018em;
  margin-bottom:var(--p-s-6);text-wrap:balance}
.hero-title .l1,.hero-title .l2{display:block;overflow:clip;padding-bottom:.06em;margin-bottom:-.06em}
.hero-title .l1>span,.hero-title .l2>span{display:inline-block}
.hero-title .l2{font-style:italic;font-weight:800;color:var(--ink)}
.hero-title .l2>span{padding-right:.12em}
.hero .lead{margin-bottom:var(--p-s-5)}
.qual{color:var(--mut);font-size:var(--p-fs-sm);margin-bottom:var(--p-s-6)}
.qual b{color:var(--ink);font-weight:600}
.buyrow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--p-s-3)}
.buyrow .price{font:700 2.4rem/1 var(--p-font-display);margin-right:var(--p-s-3);font-variant-numeric:tabular-nums}
.buyrow .price small{font:500 var(--p-fs-sm)/1 var(--p-font-text);color:var(--mut);margin-left:.3em}
.badges{display:flex;flex-wrap:wrap;gap:var(--p-s-2);list-style:none;padding:0;margin:var(--p-s-6) 0 0}
.badges li{font-size:var(--p-fs-xs);color:var(--ink2);padding:.4em .85em;border:1px solid var(--p-g-800);border-radius:var(--p-r-pill);background:rgba(21,20,18,.5)}
.vtag{color:var(--p-g-500);font-variant-numeric:tabular-nums}

/* the stage: device with the live field, the 3D model replaces the CSS frame when WebGL is ready */
.hero-stage{grid-column:8 / span 5;position:relative;margin:0;display:grid;justify-items:center;align-content:center;min-height:min(78svh,780px)}
.hero-stage::before{content:"";position:absolute;inset:8% 0;border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--zone,#FFC300) 22%,transparent),transparent 72%);transition:background 1.2s}
.stage-3d{position:absolute;inset:-10% -30%;display:none;pointer-events:none}
.stage-3d canvas{width:100%!important;height:100%!important;display:block}
.has-3d .stage-3d{display:block}
.has-3d .hero-stage .frame{visibility:hidden}
.hero-stage figcaption{margin-top:var(--p-s-5);font-size:var(--p-fs-xs);color:var(--mut);text-align:center;max-width:34ch;position:relative;z-index:2}
.rec-toast{position:absolute;z-index:3;right:-4%;top:38%;display:grid;grid-template-columns:auto auto;gap:.15em .7em;align-items:baseline;
  padding:.8em 1.05em;border-radius:var(--p-r-md);background:rgba(10,10,9,.82);border:1px solid var(--y);backdrop-filter:blur(8px);
  box-shadow:0 0 0 6px rgba(255,218,36,.08),var(--p-shadow-2);opacity:0;transform:translateY(10px) scale(.96);
  transition:opacity var(--p-dur-3) var(--p-ease-out),transform var(--p-dur-3) var(--p-ease-out)}
.rec-toast.on{opacity:1;transform:none}
.rec-toast b{grid-column:1 / -1;font:600 .72rem/1 var(--p-font-text);letter-spacing:.06em;color:var(--y)}
.rec-toast .rt-i{font:700 1.1rem/1 var(--p-font-display);color:var(--mut)}
.rec-toast .rt-w{font:700 2rem/1 var(--p-font-display);font-variant-numeric:tabular-nums}
.rec-toast .rt-g{grid-column:2;font:600 var(--p-fs-sm)/1 var(--p-font-text);color:var(--y)}

/* device frame drawn in CSS around a live canvas: the silhouette of the 3D model (cut corners, end caps, side keys) */
.frame{position:relative;z-index:0;--fw:min(340px,74vw);width:var(--fw);
  padding:calc(var(--fw)*.194) calc(var(--fw)*.112) calc(var(--fw)*.282);
  --k:linear-gradient(#24272d,#24272d);
  background:var(--k) 0 22.9%/1.6% 9.7%,var(--k) 0 65%/1.6% 9.7%,var(--k) 0 80%/1.6% 9.7%,var(--k) 100% 22.6%/1.6% 9.7%,var(--k) 100% 79.9%/1.6% 9.7%;
  background-repeat:no-repeat;filter:drop-shadow(0 30px 50px rgba(0,0,0,.65))}
.frame::before,.frame::after{content:"";position:absolute;z-index:-1}
.frame::before{inset:0 1%;clip-path:polygon(9% .9%,50% 0,91% .9%,100% 7.2%,100% 93.4%,86.8% 99.1%,50% 100%,13.2% 99.1%,0 93.4%,0 7.2%);
  background:linear-gradient(180deg,#34383f 0,#24272c 3.4%,#121417 7.5%,#0d0e11 50%,#121417 92.5%,#24272c 96.6%,#34383f 100%),#0e0f12}
.frame::after{inset:4.5% 4.2% 5.6%;clip-path:polygon(7.5% 0,92.5% 0,100% 5.6%,100% 95%,88.6% 100%,11.4% 100%,0 95%,0 5.6%);
  background:linear-gradient(160deg,#16181c 0,#030405 30%,#020304 100%)}
.frame canvas{position:relative;display:block;width:100%;height:auto;aspect-ratio:480/800;border-radius:3px;background:#000 url(/live/assets/img/hero-screen.webp) center/100% 100% no-repeat;box-shadow:0 0 0 1px rgba(255,255,255,.04)}
.hero-stage .frame{--fw:min(320px,64vw);transform:rotate(-2deg)}

/* licence right under the first screen: annual and lifetime side by side, equal */
.lic-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--p-s-3);margin-top:var(--p-s-5);position:relative;z-index:2}
.lic{display:flex;align-items:center;gap:var(--p-s-4);padding:var(--p-s-4) var(--p-s-4) var(--p-s-4) var(--p-s-5);border:1px solid var(--p-g-800);
  border-radius:var(--p-r-lg);background:rgba(21,20,18,.72);backdrop-filter:blur(6px)}
.lic-h{font:600 var(--p-fs-sm)/1.2 var(--p-font-text);color:var(--mut)}
.lic-price{font:700 1.6rem/1 var(--p-font-display);font-variant-numeric:tabular-nums;margin-right:auto}
.lic-price small{font:500 var(--p-fs-xs)/1 var(--p-font-text);color:var(--mut);margin-left:.25em}
.lic .btn{min-height:42px;font-size:var(--p-fs-xs)}

/* ---------- story: the field explained on its own screen while you scroll ---------- */
.story-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--p-s-6)}
.story-stage{grid-column:1 / span 5;position:sticky;top:calc(var(--top) + 2rem);height:calc(100svh - var(--top) - 4rem);
  display:grid;place-items:center;align-content:center;gap:var(--p-s-4)}
.story-stage .frame{--fw:min(330px,30vw,calc((100svh - var(--top) - 9rem) * .62))}
.story-clock{font-size:var(--p-fs-xs);color:var(--mut);font-variant-numeric:tabular-nums}
.story-clock b{font:700 1.5rem/1 var(--p-font-display);color:var(--ink);margin-left:.4em}
.story-copy{grid-column:7 / span 6;padding-block:10vh 20vh}
.story-h{margin-bottom:12vh}
.story-step{min-height:62vh;display:flex;flex-direction:column;justify-content:center;opacity:.6;transition:opacity var(--p-dur-4) var(--p-ease-out)}
.story-step.on{opacity:1}
.ss-n{font:700 var(--p-fs-xl)/1 var(--p-font-display);color:var(--mut);font-variant-numeric:tabular-nums;margin-bottom:var(--p-s-4);transition:color var(--p-dur-3)}
.story-step.on .ss-n{color:var(--y)}
.story-step h3{font:700 var(--p-fs-2xl)/1.02 var(--p-font-display);margin-bottom:var(--p-s-4);text-wrap:balance}
.story-step p{color:var(--ink2);font-size:var(--p-fs-lg);max-width:44ch}
.no-js .story-step,.reduced .story-step{opacity:1}

/* ---------- try it: the field in your hands ---------- */
.try{background:linear-gradient(180deg,var(--bg),var(--s1) 40%,var(--bg))}
.try-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--p-s-6) var(--p-s-6);align-items:center}
.try-copy{grid-column:1 / span 6;grid-row:1}
.try-ctrls{grid-column:1 / span 6;grid-row:2}
.try-copy .lead{margin-top:var(--p-s-4)}
.try-device{grid-column:8 / span 5;grid-row:1 / span 3;display:grid;place-items:center}
.try-device .frame{--fw:min(360px,72vw)}
.ctrls{display:grid;gap:var(--p-s-3)}
.seg{display:flex;flex-wrap:wrap;align-items:center;gap:var(--p-s-1);padding:4px;border:1px solid var(--p-g-800);border-radius:var(--p-r-pill);width:max-content;max-width:100%;background:var(--s1)}
.seg-l{font-size:var(--p-fs-xs);color:var(--mut);padding:0 .6em 0 .8em}
.seg button{min-height:40px;padding:.4em 1em;border-radius:var(--p-r-pill);border:0;background:transparent;color:var(--ink2);font:500 var(--p-fs-xs)/1 var(--p-font-text);cursor:pointer;
  transition:background var(--p-dur-2),color var(--p-dur-2)}
.seg button:hover{color:var(--ink);background:rgba(244,241,232,.06)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--p-black)}
.try-count{margin-top:var(--p-s-5);color:var(--mut);font-size:var(--p-fs-sm)}
.try-count b{font:700 2.6rem/1 var(--p-font-display);color:var(--y);margin-right:.2em;vertical-align:-.12em;font-variant-numeric:tabular-nums}
.transport{grid-column:1 / span 6;grid-row:3;display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:var(--p-s-3)}
.tbtn{width:52px;height:52px;border-radius:50%;border:1px solid var(--p-g-700);background:var(--s2);color:var(--ink);display:grid;place-items:center;cursor:pointer;
  transition:background var(--p-dur-2),border-color var(--p-dur-2)}
.tbtn:hover{border-color:var(--ink)}
.tbtn svg{width:22px;height:22px;fill:currentColor}
#try-play{background:var(--y);border-color:var(--y);color:var(--p-black)}
#try-play .i-pause,#try-play.playing .i-play{display:none}
#try-play.playing .i-pause{display:inline}
.timeline{position:relative;height:64px}
.timeline canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:var(--p-r-sm)}
.timeline input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.timeline input::-webkit-slider-runnable-track{height:100%;background:transparent}
.timeline input::-moz-range-track{height:100%;background:transparent}
.timeline input::-webkit-slider-thumb{-webkit-appearance:none;width:3px;height:64px;background:var(--y);border-radius:2px;box-shadow:0 0 0 4px rgba(255,218,36,.18)}
.timeline input::-moz-range-thumb{width:3px;height:64px;background:var(--y);border:0;border-radius:2px}
.timeline input:focus-visible{outline:2px solid var(--y);outline-offset:4px}
.marks{position:absolute;inset:0;pointer-events:none;z-index:2}
.marks button{position:absolute;top:-12px;width:26px;height:26px;margin-left:-13px;border-radius:50%;border:2px solid var(--bg);background:var(--y);cursor:pointer;pointer-events:auto;
  box-shadow:0 0 0 3px rgba(255,218,36,.25)}
#try-clock{font:700 1.5rem/1 var(--p-font-display);font-variant-numeric:tabular-nums;min-width:4.2ch;text-align:right}

.try-device .frame.flash{animation:flash 1.4s var(--p-ease-out)}
@keyframes flash{0%{filter:drop-shadow(0 30px 50px rgba(0,0,0,.65)) drop-shadow(0 0 0 rgba(255,218,36,0))}
  18%{filter:drop-shadow(0 30px 50px rgba(0,0,0,.65)) drop-shadow(0 0 46px rgba(255,218,36,.75))}
  100%{filter:drop-shadow(0 30px 50px rgba(0,0,0,.65)) drop-shadow(0 0 0 rgba(255,218,36,0))}}
.try-device canvas{cursor:pointer}

/* ---------- accuracy ---------- */
.minis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--p-s-5);margin-bottom:var(--p-s-8)}
.mini{margin:0}
.mini .scrn{border-radius:var(--p-r-md);padding:12px 12px 8px;border:1px solid var(--p-g-800);font:500 13px/1.5 var(--p-font-display);box-shadow:var(--p-shadow-2)}
.mini .scrn.night{background:#000;color:#F2F4F6}
.mini .scrn.day{background:#fff;color:#141414;border-color:#d7d7cf}
.mini .mtop{display:flex;justify-content:space-between;font-weight:700;font-size:12px;margin-bottom:6px}
/* POWER in ink, PEAK in the field's amber, as the field draws its header */
.mini .night .mtop span{color:#FFC300}.mini .night .mtop span:first-child{color:#F2F4F6}.mini .night .mtop b{color:#FFC300}
.mini .day .mtop span{color:#7A5400}.mini .day .mtop span:first-child{color:#141414}.mini .day .mtop b{color:#7A5400}
.mini table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.mini td,.mini th{padding:3px 4px;border-bottom:1px solid rgba(128,128,128,.18);font-weight:500;text-align:left}
.mini td:nth-child(2),.mini td:nth-child(4){text-align:right}
.mini .w{font-weight:700}
.mini .pb{color:#9AA6B2}
.mini .day .pb{color:#5A6470}
.mini tr.hit td.w{background:#FFFF00;color:#141414;border-radius:3px}
.mini tr.hit .pb{color:inherit;font-weight:700}
/* zone chips of the HTML screens: the field's colours, with text that stays readable at 11 px (WCAG AA) */
.mini .zone{display:inline-block;min-width:58px;padding:1px 4px;border-radius:2px;font-size:11px;font-weight:700;color:#141414;text-align:center}
.mini .z1{background:#8E9AA3}.mini .z2{background:#1767B3;color:#fff}.mini .z3{background:#1FA84F}.mini .z4{background:#FFC300}
.mini .z5{background:#F07C12}.mini .z6{background:#EF4B3E}.mini .z7{background:#AA00FF;color:#fff}
.mini figcaption{margin-top:var(--p-s-3);font-size:var(--p-fs-xs);color:var(--mut)}
.mini figcaption b{color:var(--ink);font-weight:600}
.acc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--p-s-6)}
.acc-f{border-top:1px solid var(--p-g-700);padding-top:var(--p-s-5)}
.acc-f h3,.comp h3,.grid3 .feat h3{font:700 var(--p-fs-xl)/1.1 var(--p-font-display);margin-bottom:var(--p-s-3)}
.acc-f p,.grid3 .feat p,.comp p{color:var(--ink2)}

/* ---------- maker ---------- */
.maker-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--p-s-6)}
.maker-grid .h2{grid-column:1 / span 4}
.maker blockquote{grid-column:5 / span 8;margin:0}
.maker blockquote p{font:400 var(--p-fs-xl)/1.45 var(--p-font-text);color:var(--ink);text-wrap:pretty}
.maker blockquote footer{margin-top:var(--p-s-5);color:var(--mut);font-size:var(--p-fs-sm)}
.maker-link{grid-column:5 / span 8}
.maker-link a{color:var(--y);text-underline-offset:.25em}

/* ---------- steps (a real sequence) ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--p-s-6);counter-reset:s;position:relative}
.steps::before{content:"";position:absolute;left:0;right:0;top:2.1rem;height:1px;background:linear-gradient(90deg,var(--y),var(--p-g-800) 70%)}
.step{position:relative;padding-top:5rem}
.step-n{position:absolute;top:0;left:0;width:4.2rem;height:4.2rem;display:grid;place-items:center;border-radius:50%;background:var(--bg);border:1px solid var(--y);
  font:700 1.9rem/1 var(--p-font-display);color:var(--y)}
.step h3{font:700 var(--p-fs-xl)/1.1 var(--p-font-display);margin-bottom:var(--p-s-3)}
.step p{color:var(--ink2)}

/* ---------- devices ---------- */
.devgrid{list-style:none;margin:0 0 var(--p-s-6);padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:var(--p-s-3)}
.devgrid li{display:flex;align-items:center;gap:.7em;padding:.85em 1em;border:1px solid var(--p-g-800);border-radius:var(--p-r-md);background:var(--s1);font-size:var(--p-fs-sm);font-weight:500}
.devgrid svg{width:20px;height:27px;flex:none;fill:none;stroke:var(--mut);stroke-width:1.6}
.devgrid svg .g{stroke:var(--y)}
.need-lines{color:var(--ink2);max-width:70ch}
.need-lines b{color:var(--ink);font-weight:600}
.need-lines a,.install-tip a,.buy-notes a,.faq a,.comp a:not(.btn),.x30back a,.need a{color:var(--y);text-underline-offset:.22em}
.notlisted{margin-top:var(--p-s-7);padding:var(--p-s-6);border:1px solid var(--p-g-800);border-radius:var(--p-r-lg);background:var(--s1);
  display:grid;grid-template-columns:1fr auto;gap:var(--p-s-3) var(--p-s-6);align-items:center}
.notlisted h3{font:700 var(--p-fs-xl)/1.1 var(--p-font-display)}
.notlisted p{color:var(--ink2);grid-column:1}
.notlisted .btn{grid-column:2;grid-row:1 / span 2}

/* ---------- install ---------- */
.install-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--p-s-7)}
.install-h{font:700 var(--p-fs-xl)/1.1 var(--p-font-display);margin-bottom:var(--p-s-4)}
.install-fig{margin:0 0 var(--p-s-5);padding:var(--p-s-5) var(--p-s-5) var(--p-s-4);border:1px solid var(--p-g-800);border-radius:var(--p-r-lg);background:var(--s1)}
.install-fig svg{display:block;width:100%;height:auto}
.install-fig text{font-family:var(--p-font-text);fill:#F4F1E8}
.install-fig .t-dim{fill:#C9C4B8}
.install-fig .t-mut{fill:#8E897F}
.install-fig .mono{font-family:var(--p-font-display)}
.install-figcap{margin-top:var(--p-s-3);text-align:center;color:var(--mut);font-size:var(--p-fs-xs)}
ol.ilist{list-style:none;counter-reset:i;margin:0;padding:0}
ol.ilist li{position:relative;padding:0 0 var(--p-s-4) 3rem;color:var(--ink2);counter-increment:i}
ol.ilist li::before{content:counter(i);position:absolute;left:0;top:-.1em;width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--p-g-700);font:700 1rem/1 var(--p-font-display);color:var(--y)}
ol.ilist li b{color:var(--ink);font-weight:600}
.path{font-size:.92em;color:var(--ink);background:var(--s2);border:1px solid var(--p-g-800);border-radius:6px;padding:1px 7px;display:inline-block}
.install-tip{margin-top:var(--p-s-6);padding:var(--p-s-5) var(--p-s-6);border-left:3px solid var(--y);background:var(--s1);border-radius:0 var(--p-r-md) var(--p-r-md) 0;color:var(--ink2)}
.install-tip b{color:var(--ink)}

/* ---------- companions, generic feature grids ---------- */
.comp-grid,.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:var(--p-s-5)}
.comp,.grid3 .feat{padding:var(--p-s-6);border:1px solid var(--p-g-800);border-radius:var(--p-r-lg);background:var(--s1)}
.comp h3 a{text-decoration:none;color:var(--ink)}
.comp h3 a:hover{color:var(--y)}
.comp p + p{margin-top:var(--p-s-5);display:flex;flex-wrap:wrap;align-items:center;gap:var(--p-s-4)}
.grid3 .feat{background:transparent;border-width:1px 0 0;border-radius:0;padding:var(--p-s-5) 0 0}

/* ---------- buy ---------- */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,22rem));justify-content:center;gap:var(--p-s-5)}
.plan{padding:var(--p-s-6);border:1px solid var(--p-g-700);border-radius:var(--p-r-xl);background:var(--s1);display:flex;flex-direction:column;gap:var(--p-s-3)}
.plan h3{font:600 var(--p-fs-md)/1.2 var(--p-font-text);color:var(--mut)}
.plan .price{font:700 3.4rem/1 var(--p-font-display);font-variant-numeric:tabular-nums}
.plan .price small{font:500 var(--p-fs-sm)/1 var(--p-font-text);color:var(--mut);margin-left:.3em}
.plan p{color:var(--ink2);flex:1}
.plan .btn{margin-top:var(--p-s-3)}
.buy-notes{max-width:40rem;margin:var(--p-s-6) auto 0;text-align:center;color:var(--ink2);font-size:var(--p-fs-sm);display:grid;gap:var(--p-s-3)}
.buy-notes strong{color:var(--ink)}

/* ---------- faq ---------- */
.faq-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--p-s-6)}
.faq-grid .sec-head{grid-column:1 / span 4;align-self:start;position:sticky;top:calc(var(--top) + 2rem)}
.faq{grid-column:5 / span 8}
.faq details{border-bottom:1px solid var(--p-g-800)}
.faq details:first-child{border-top:1px solid var(--p-g-800)}
.faq summary{list-style:none;display:flex;justify-content:space-between;gap:var(--p-s-5);align-items:center;padding:var(--p-s-5) 0;cursor:pointer;
  font:600 var(--p-fs-md)/1.35 var(--p-font-text)}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--p-g-700);position:relative;transition:transform var(--p-dur-3) var(--p-ease-out),border-color var(--p-dur-2)}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;background:var(--ink);transform:translate(-50%,-50%)}
.faq summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] summary i{transform:rotate(45deg);border-color:var(--y)}
.faq .ans{padding:0 0 var(--p-s-5);color:var(--ink2);max-width:62ch}
.faq-tail{margin-top:var(--p-s-5);color:var(--mut)}

/* ---------- closing ---------- */
.closing{text-align:center;overflow:clip}
.mega{font:800 italic var(--p-fs-4xl)/.9 var(--p-font-display);letter-spacing:-.02em;text-wrap:balance;max-width:14ch;margin:0 auto var(--p-s-6)}
.closing .lead{margin:0 auto var(--p-s-6)}
.closing-cta{display:flex;flex-wrap:wrap;gap:var(--p-s-3);justify-content:center}

/* ---------- x30, BPMPeak, Speed Peak ---------- */
.hero-alt .hero-copy{grid-column:1 / span 7}
.hero-alt .hero-title{font-size:clamp(2.8rem,1rem + 5vw,6.2rem)}
.hero-shot{grid-column:8 / span 5;margin:0;display:grid;justify-items:center;gap:var(--p-s-4);perspective:1200px}
.hero-shot img{display:block;max-width:min(340px,70vw);height:auto;filter:drop-shadow(0 40px 60px rgba(0,0,0,.7));transform:rotateY(-10deg) rotateX(4deg) rotateZ(-1.5deg);
  transition:transform 1.2s var(--p-ease-out)}
.hero-shot figcaption{font-size:var(--p-fs-xs);color:var(--mut)}
.hero-shot{position:relative;isolation:isolate}
.hero-shot::before{content:"";position:absolute;inset:-6% -12% 12%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--app) 26%,transparent),transparent 70%)}
html[data-theme="heart"] .hero-shot::before{animation:beat 1.2s var(--p-ease-out) infinite}
@keyframes beat{0%,100%{opacity:.55;transform:scale(.97)}14%{opacity:1;transform:scale(1.03)}28%{opacity:.7;transform:scale(.99)}42%{opacity:.9;transform:scale(1.015)}}
@media (prefers-reduced-motion:reduce){html[data-theme="heart"] .hero-shot::before{animation:none}}
.x30shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--p-s-6);align-items:end}
.x30shots figure{margin:0;text-align:center}
.x30shots img{width:100%;max-width:300px;height:auto;filter:drop-shadow(0 24px 40px rgba(0,0,0,.55))}
.x30shots figcaption{margin-top:var(--p-s-3);font-size:var(--p-fs-sm);color:var(--mut)}
.x30list{list-style:none;margin:0;padding:0;display:grid;gap:var(--p-s-4);max-width:62rem}
.x30list li{padding:var(--p-s-5) var(--p-s-6);border:1px solid var(--p-g-800);border-radius:var(--p-r-lg);background:var(--s1);color:var(--ink2)}
.x30list li b{color:var(--ink);font-weight:600}
.x30steps{list-style:none;counter-reset:i;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:var(--p-s-5)}
.x30steps li{counter-increment:i;padding-top:4.2rem;position:relative;color:var(--ink2)}
.x30steps li::before{content:counter(i);position:absolute;top:0;left:0;width:3.2rem;height:3.2rem;border-radius:50%;display:grid;place-items:center;border:1px solid var(--y);
  font:700 1.5rem/1 var(--p-font-display);color:var(--y)}
.x30steps li b{color:var(--ink)}
.upsell{background:linear-gradient(180deg,var(--bg),var(--s1))}
.upgrid{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--p-s-7);align-items:center}
.upgrid .h2{margin-bottom:var(--p-s-4)}
.uplist{list-style:none;padding:0;margin:var(--p-s-5) 0}
.uplist li{padding:var(--p-s-4) 0;border-bottom:1px solid var(--p-g-800);color:var(--ink2)}
.uplist li b{display:block;color:var(--ink);font-weight:600}
.upbtns{display:flex;flex-wrap:wrap;gap:var(--p-s-3)}
.x30dev{display:block;margin:0 auto;max-width:min(320px,74vw);height:auto;filter:drop-shadow(0 30px 60px rgba(0,0,0,.6))}
.x30back{margin-top:var(--p-s-6)}

/* ---------- entrance: one orchestrated moment on load ---------- */
.js .hero-title .l1>span,.js .hero-title .l2>span{transform:translateY(105%)}
.js .hero .lead,.js .hero .qual,.js .hero .buyrow,.js .hero .badges,.js .hero .eyebrow,.js .hero .newpill,.js .lic-strip,.js .curve-band{opacity:0;transform:translateY(14px)}
.js .hero-stage,.js .hero-shot{opacity:0}
.ready .hero-title .l1>span,.ready .hero-title .l2>span{transform:none;transition:transform 1.1s var(--p-ease-out)}
.ready .hero-title .l2>span{transition-delay:.12s}
.ready .hero .lead,.ready .hero .qual,.ready .hero .buyrow,.ready .hero .badges,.ready .hero .eyebrow,.ready .hero .newpill,.ready .lic-strip,.ready .curve-band{opacity:1;transform:none;
  transition:opacity .9s var(--p-ease-out),transform .9s var(--p-ease-out)}
.ready .hero .eyebrow,.ready .hero .newpill{transition-delay:.05s}
.ready .hero .lead{transition-delay:.3s}.ready .hero .qual{transition-delay:.38s}.ready .hero .buyrow{transition-delay:.46s}
.ready .hero .badges{transition-delay:.54s}.ready .curve-band{transition-delay:.6s}.ready .lic-strip{transition-delay:.7s}
.ready .hero-stage,.ready .hero-shot{opacity:1;transition:opacity 1.4s var(--p-ease-out) .2s}
@media (prefers-reduced-motion:reduce){
  .js .hero-title .l1>span,.js .hero-title .l2>span,.js .hero .lead,.js .hero .qual,.js .hero .buyrow,.js .hero .badges,.js .hero .eyebrow,.js .hero .newpill,.js .lic-strip,.js .curve-band,
  .js .hero-stage,.js .hero-shot{opacity:1;transform:none;transition:none}
  .story-step{opacity:1;transition:none}
  .hero-shot img{transform:none}
}

/* ---------- small screens ---------- */
@media (max-width:999px){
  .hero-grid{grid-template-columns:1fr;min-height:0;gap:0}
  /* on a phone the device comes right after the headline */
  .hero-copy{display:contents}
  .newpill{order:1;justify-self:start}.hero .eyebrow{order:2}.hero-title{order:3}.hero-stage,.hero-shot{order:4}
  .hero .lead{order:5}.hero .qual{order:6}.hero .buyrow{order:7}.hero .badges{order:8}
  .hero-shot{margin-bottom:var(--p-s-6)}
  .hero-copy,.hero-alt .hero-copy,.hero-stage,.hero-shot{grid-column:1}
  .hero-stage{min-height:0;padding-block:var(--p-s-5)}
  .hero-stage .frame{--fw:min(270px,62vw)}
  .stage-3d{inset:-6% -18%}
  .rec-toast{right:0;top:1%;padding:.6em .85em}
  .rec-toast .rt-w{font-size:1.6rem}
  .story-grid{grid-template-columns:1fr}
  .story-stage{grid-column:1;top:var(--top);height:auto;z-index:2;padding-top:var(--p-s-3);
    grid-template-columns:auto auto;justify-content:center;gap:var(--p-s-4);background:linear-gradient(var(--bg) 92%,transparent);padding-bottom:var(--p-s-6)}
  .story-stage .frame{--fw:min(172px,40vw)}
  .story-clock{align-self:end;padding-bottom:var(--p-s-5)}
  .story-clock b{display:block;margin:4px 0 0}
  .story-copy{grid-column:1;padding-block:0 10vh}
  .story-h{margin-bottom:var(--p-s-6)}
  .story-step{min-height:52vh}
  .try-grid{grid-template-columns:1fr}
  .try-copy,.try-device,.transport,.try-ctrls{grid-column:1;grid-row:auto}
  .try-copy{order:1}.try-device{order:2}.transport{order:3}.try-ctrls{order:4}
  .maker-grid,.faq-grid{grid-template-columns:1fr}
  .maker-grid .h2,.maker blockquote,.maker-link,.faq-grid .sec-head,.faq{grid-column:1}
  .faq-grid .sec-head{position:static}
  .minis{grid-template-columns:repeat(3,minmax(15rem,1fr));overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--p-s-3);margin-inline:calc(var(--p-gutter) * -1);padding-inline:var(--p-gutter);scroll-padding-inline:var(--p-gutter)}
  .mini{scroll-snap-align:start}
  .acc-grid,.steps,.install-grid,.upgrid{grid-template-columns:1fr}
  .steps::before{left:2.1rem;right:auto;top:0;bottom:0;width:1px;height:auto;background:linear-gradient(var(--y),var(--p-g-800) 70%)}
  .step{padding:0 0 0 5.5rem;min-height:4.2rem}
  .notlisted{grid-template-columns:1fr}
  .notlisted .btn{grid-column:1;grid-row:auto;justify-self:start}
  .x30shots{grid-template-columns:repeat(3,minmax(12rem,1fr));overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--p-gutter) * -1);padding-inline:var(--p-gutter);scroll-padding-inline:var(--p-gutter)}
  .x30shots figure{scroll-snap-align:center}
}
@media (max-width:640px){
  .lic-strip{grid-template-columns:1fr}
  .lic{flex-wrap:wrap;gap:var(--p-s-2) var(--p-s-4);padding:var(--p-s-4) var(--p-s-5)}
  .lic .btn{flex:1 0 100%}
  .plans{grid-template-columns:1fr}
  .transport{grid-template-columns:auto auto 1fr;grid-template-areas:"p r c" "t t t"}
  #try-play{grid-area:p}#try-restart{grid-area:r}#try-clock{grid-area:c}.timeline{grid-area:t}
  .seg{width:100%;border-radius:var(--p-r-md)}
  .seg-l{width:100%;padding:.4em .6em 0}
  .seg button{flex:1}
  .buyrow .price{width:100%}
}