/* =========================================================
   Vaelolab, Apple inspired design, Oct 2026
   Light canvas, black feature bands, real product mockups.
   ========================================================= */
:root{
  --white:#fff;
  --bg:#fbfbfd;
  --gray:#f5f5f7;
  --ink:#1d1d1f;
  --ink-2:#6e6e73;
  --ink-3:#86868b;
  --line:#d2d2d7;
  --blue:#0071e3;
  --blue-h:#0077ed;
  --link:#0066cc;
  --dark:#000;
  --dark-2:#1d1d1f;
  --dark-3:#2c2c2e;
  --d-ink:#f5f5f7;
  --d-ink-2:#a1a1a6;
  --d-link:#2997ff;
  --good:#34c759; --good-t:#248a3d;
  --fair:#ff9f0a; --fair-t:#b25000;
  --weak:#ff3b30; --weak-t:#d70015;
  --grad:linear-gradient(90deg,#2997ff 0%,#8f5cff 50%,#ff5e8a 100%);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.28,.11,.32,1);
  --r-xl:28px; --r-l:20px; --r-m:14px;
  --nav:52px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:110px}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.47;letter-spacing:-.022em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video{display:block;max-width:100%}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;letter-spacing:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;z-index:999;background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px}
.skip:focus{left:8px}
.wrap{width:min(1080px,100% - 44px);margin-inline:auto}
.wide{width:min(1280px,100% - 44px);margin-inline:auto}
.narrow{width:min(692px,100% - 44px);margin-inline:auto}
p{text-wrap:pretty}
h1,h2,h3,h4{font-weight:600;color:inherit;text-wrap:balance}
.center{text-align:center}
.center .lede,.center h1,.center h2{margin-inline:auto}

/* ---------- type scale ---------- */
.eyebrow{font-size:clamp(19px,2vw,24px);font-weight:600;letter-spacing:.009em;color:var(--ink-2);margin-bottom:10px}
.hero-title{font-size:clamp(44px,7.2vw,88px);line-height:1.05;letter-spacing:-.015em;max-inline-size:20ch}
.h2{font-size:clamp(34px,5.2vw,64px);line-height:1.0625;letter-spacing:-.009em;max-inline-size:22ch}
.h3{font-size:clamp(24px,2.6vw,32px);line-height:1.125;letter-spacing:.004em}
.lede{font-size:clamp(19px,2vw,24px);line-height:1.33;letter-spacing:.009em;color:var(--ink-2);max-inline-size:34em;margin-top:18px;font-weight:400}
.lede strong{color:var(--ink);font-weight:600}
.small{font-size:14px;letter-spacing:-.016em}
.muted{color:var(--ink-2)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- buttons and links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border-radius:980px;font-size:17px;font-weight:400;letter-spacing:-.022em;border:1px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s var(--ease);text-decoration:none!important;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-h)}
.btn-ghost{color:var(--blue);border-color:var(--blue);background:transparent}
.btn-ghost:hover{background:var(--blue);color:#fff}
.dark .btn-ghost{color:var(--d-link);border-color:var(--d-link)}
.dark .btn-ghost:hover{background:var(--d-link);color:#000}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:#e8e8ed}
.btn-sm{min-height:30px;padding:0 14px;font-size:13px;letter-spacing:-.01em}
.more{display:inline-flex;align-items:center;gap:4px;font-size:17px;color:var(--link)}
.dark .more{color:var(--d-link)}
.more svg{width:14px;height:14px;transition:transform .2s var(--ease)}
.more:hover svg{transform:translateX(3px)}
.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:30px}
.center .ctas{justify-content:center}

/* ---------- global nav ---------- */
.gnav{position:sticky;top:0;z-index:100;height:var(--nav);background:rgba(251,251,253,.8);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.08)}
.gnav .wide{height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;height:100%}
.brand img{height:13px;width:auto}
.gnav-links{display:flex;align-items:center;gap:30px}
.gnav-links a{font-size:14px;color:var(--ink);opacity:.8;letter-spacing:-.01em;text-decoration:none;transition:opacity .2s}
.gnav-links a:hover,.gnav-links a[aria-current="page"]{opacity:1}
.gnav-links a[aria-current="page"]{font-weight:600}
.gnav-links .btn{opacity:1;color:#fff}
.menu-btn{display:none;width:44px;height:44px;border:none;background:none;cursor:pointer;position:relative;color:var(--ink)}
.menu-btn span{position:absolute;left:13px;right:13px;height:1.5px;background:currentColor;border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.menu-btn span:nth-child(1){top:18px}.menu-btn span:nth-child(2){top:25px}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
@media (max-width:860px){
  .menu-btn{display:block}
  .gnav-links{position:fixed;top:var(--nav);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:12px 28px 30px;background:rgba(251,251,253,.98);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--line);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s,transform .3s var(--ease),visibility .25s}
  .gnav-links.open{opacity:1;visibility:visible;transform:none}
  .gnav-links a{font-size:24px;font-weight:600;padding:12px 0;opacity:1}
  .gnav-links .btn{margin-top:16px;font-size:17px;min-height:48px}
}

/* ---------- local (product) nav ---------- */
.lnav{position:sticky;top:var(--nav);z-index:90;height:52px;background:rgba(251,251,253,.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.08)}
.lnav .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.lnav-title{font-size:21px;font-weight:600;letter-spacing:.011em;color:var(--ink);white-space:nowrap}
.lnav-right{display:flex;align-items:center;gap:24px}
.lnav-right a:not(.btn){font-size:12px;color:var(--ink);opacity:.8;text-decoration:none}
.lnav-right a:not(.btn):hover{opacity:1}
@media (max-width:640px){.lnav-right a:not(.btn){display:none}.lnav-title{font-size:17px}}

/* ---------- sections ---------- */
.section{padding:clamp(80px,10vw,130px) 0}
.tight{padding:clamp(56px,7vw,90px) 0}
.bg-white{background:var(--white)}
.bg-gray{background:var(--gray)}
.dark{background:var(--dark);color:var(--d-ink)}
.dark .lede,.dark .muted{color:var(--d-ink-2)}
.dark .eyebrow{color:var(--d-ink-2)}
.sec-head{margin-bottom:clamp(40px,5vw,70px)}

/* ---------- hero ---------- */
.hero{padding:clamp(60px,8vw,100px) 0 0;background:var(--white);overflow:hidden}
.hero .price-line{font-size:clamp(17px,1.6vw,21px);color:var(--ink);margin-top:14px;font-weight:600}
.stage{position:relative;margin:clamp(50px,6vw,80px) auto 0;width:min(980px,100% - 44px);padding-bottom:clamp(60px,8vw,110px)}
.stage::before{content:"";position:absolute;left:5%;right:5%;top:12%;bottom:18%;background:radial-gradient(closest-side,rgba(41,151,255,.28),rgba(143,92,255,.18) 55%,transparent);filter:blur(30px);z-index:0}
.stage .mac{position:relative;z-index:1;transform-origin:50% 100%;transform:scale(calc(.9 + .1 * var(--p,1)))}
.stage .phone{position:absolute!important;z-index:2;right:-11%;bottom:clamp(10px,2vw,24px);width:clamp(120px,19%,200px);transform:translateY(calc(60px * (1 - var(--p,1))))}
@media (max-width:620px){.stage .phone{width:34%;right:-1%}}

/* ---------- Mac mockup ---------- */
.mac{width:100%;text-align:left}
.phone{text-align:left}
.mac-lid{background:#0d0d0f;border-radius:22px 22px 10px 10px;padding:1.6% 1.6% 2.4%;box-shadow:0 0 0 1px #3a3a3c inset,0 40px 80px -30px rgba(0,0,0,.45)}
.mac-screen{container-type:inline-size;background:#fff;border-radius:6px;overflow:hidden;aspect-ratio:16/10;position:relative}
.mac-base{height:clamp(10px,1.6vw,18px);margin:0 -6%;background:linear-gradient(#e3e4e6,#b8b9bd);border-radius:0 0 18px 18px;position:relative}
.mac-base::before{content:"";position:absolute;left:50%;top:0;width:16%;height:45%;transform:translateX(-50%);background:#a9aaae;border-radius:0 0 10px 10px}

/* window chrome inside screen */
.win-bar{display:flex;align-items:center;gap:.8cqw;height:4.2cqw;padding:0 1.8cqw;background:#f2f2f4;border-bottom:1px solid #e1e1e6;font-size:1.3cqw;color:#6e6e73}
.win-bar i{width:1.1cqw;height:1.1cqw;border-radius:50%;background:#ff5f57}
.win-bar i:nth-child(2){background:#febc2e}.win-bar i:nth-child(3){background:#28c840}
.win-bar span{margin-left:auto;margin-right:auto;transform:translateX(-2cqw)}

/* the report document */
.doc{display:grid;grid-template-columns:36% 1fr;gap:3.4cqw;padding:3.6cqw 4cqw;height:calc(100% - 4.2cqw);background:linear-gradient(#fff,#fafafc)}
.doc-left{display:flex;flex-direction:column}
.doc-kicker{font-size:1.45cqw;color:#86868b;font-weight:500;letter-spacing:0}
.doc-who{font-size:2.9cqw;font-weight:700;letter-spacing:-.02em;line-height:1.1;margin-top:.4cqw;color:#1d1d1f}
.doc-ring{position:relative;width:18cqw;height:18cqw;margin:2.6cqw 0 2.4cqw}
.doc-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.doc-ring circle{fill:none;stroke-width:9}
.doc-ring .track{stroke:#ececf0}
.doc-ring .val{stroke:url(#ringGrad);stroke-linecap:round;stroke-dasharray:264;transition:stroke-dashoffset 1.4s var(--ease)}
.doc-ring b{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font-size:5.4cqw;font-weight:700;letter-spacing:-.03em;color:#1d1d1f;line-height:1}
.doc-ring b small{display:block;font-size:1.15cqw;font-weight:500;color:#86868b;letter-spacing:0;margin-top:.5cqw}
.doc-fix{background:#fff4f2;border:1px solid #ffd6d1;border-radius:1.2cqw;padding:1.8cqw 2cqw}
.doc-fix b{display:block;font-size:1.2cqw;color:#d70015;margin-bottom:.4cqw;letter-spacing:0}
.doc-fix p{font-size:1.5cqw;line-height:1.4;color:#1d1d1f;letter-spacing:0}
.doc-right h4{font-size:1.8cqw;letter-spacing:-.01em;color:#1d1d1f;margin-bottom:1cqw}
.doc-rows{list-style:none}
.doc-rows li{display:grid;grid-template-columns:1fr 30% 2.6cqw;align-items:center;gap:1.4cqw;padding:1.55cqw 0;border-bottom:1px solid #ededf0;font-size:1.6cqw;color:#1d1d1f;letter-spacing:0}
.doc-rows .bar{height:.75cqw;border-radius:1cqw;background:#ececf0;overflow:hidden}
.doc-rows .bar i{display:block;height:100%;border-radius:1cqw;transition:width 1.2s var(--ease)}
.doc-rows .n{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.good .bar i{background:var(--good)} .good .n{color:var(--good-t)}
.fair .bar i{background:var(--fair)} .fair .n{color:var(--fair-t)}
.weak .bar i{background:var(--weak)} .weak .n{color:var(--weak-t)}
.doc-plan{display:grid;grid-template-columns:repeat(4,1fr);gap:1cqw;margin-top:2.6cqw}
.doc-plan div{background:#f5f5f7;border-radius:1cqw;padding:1.4cqw 1.3cqw;font-size:1.3cqw;color:#6e6e73;letter-spacing:0;line-height:1.3}
.doc-plan b{display:block;color:#1d1d1f;font-size:1.45cqw;margin-bottom:.2cqw}

/* ---------- iPhone mockup ---------- */
.phone{position:relative;aspect-ratio:9/19.3;background:#0d0d0f;border-radius:18%/8.4%;box-shadow:0 0 0 1px #3a3a3c inset,0 30px 60px -24px rgba(0,0,0,.5)}
.phone-screen{container-type:inline-size;position:absolute;inset:1.7% 3.6%;border-radius:15%/7%;overflow:hidden;background:#fff}
.phone-screen::before{content:"";position:absolute;top:2.6%;left:50%;width:32%;height:3.4%;transform:translateX(-50%);background:#000;border-radius:20px;z-index:3}
.ps{padding:19cqw 7cqw 8cqw;height:100%;display:flex;flex-direction:column;font-size:4.6cqw;letter-spacing:0;color:#1d1d1f}
.ps-title{font-size:9cqw;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.ps-sub{font-size:5cqw;color:#86868b;margin-top:1cqw}
.ps-ring{position:relative;width:62cqw;height:62cqw;margin:9cqw auto 9cqw}
.ps-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ps-ring circle{fill:none;stroke-width:10}
.ps-ring .track{stroke:#ececf0}.ps-ring .val{stroke:url(#ringGrad);stroke-linecap:round;stroke-dasharray:264}
.ps-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:16cqw;font-weight:700;letter-spacing:-.03em}
.ps-list{list-style:none;display:grid;gap:3.4cqw}
.ps-list li{display:flex;gap:3.4cqw;align-items:flex-start;background:#f5f5f7;border-radius:5cqw;padding:6cqw 5cqw;font-size:6.2cqw;line-height:1.3;font-weight:500}
.ps-list i{flex:none;width:6cqw;height:6cqw;border-radius:50%;border:1.1cqw solid #0071e3;margin-top:.6cqw}
.ps-list li:first-child i{background:#0071e3}
.phone video{width:100%;height:100%;object-fit:cover;background:#111}
.post-screen{padding:16cqw 0 0;height:100%;display:flex;flex-direction:column;background:#fff}
.post-head{display:flex;align-items:center;gap:3cqw;padding:0 5cqw 3.5cqw;font-size:4.4cqw;font-weight:600}
.post-head i{width:9cqw;height:9cqw;border-radius:50%;background:var(--av,#ddd)}
.post-img{aspect-ratio:4/5;display:flex;flex-direction:column;justify-content:flex-end;padding:7cqw;color:#fff;position:relative;overflow:hidden}
.post-img::after{content:"";position:absolute;right:-25%;bottom:-25%;width:75%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.16)}
.post-img small{font-size:4.2cqw;opacity:.9;position:relative}
.post-img b{font-size:9cqw;line-height:1.05;letter-spacing:-.02em;position:relative;margin-top:1.5cqw}
.post-cap{padding:4cqw 5cqw 5cqw;font-size:4.6cqw;line-height:1.35;color:#1d1d1f}
.post-icons{display:flex;gap:4cqw;padding:3.5cqw 5cqw 0}
.post-icons i{width:6cqw;height:6cqw;border:1cqw solid #1d1d1f;border-radius:50%}
.post-icons i:last-child{margin-left:auto;border-radius:1cqw}
.post-cap span{display:block;height:2.6cqw;border-radius:2cqw;background:#ececf0;margin-top:2.4cqw}
.post-cap span+span{width:70%}

/* ---------- tiles and grids ---------- */
.tile{background:var(--white);border-radius:var(--r-xl);padding:clamp(28px,3.4vw,44px);position:relative;overflow:hidden}
.bg-white .tile{background:var(--gray)}
.dark .tile{background:var(--dark-2);color:var(--d-ink)}
.tile h3{font-size:clamp(22px,2.2vw,28px);line-height:1.15;letter-spacing:.004em}
.tile p{color:var(--ink-2);margin-top:10px;font-size:17px}
.dark .tile p{color:var(--d-ink-2)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media (max-width:900px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid-3,.grid-2{grid-template-columns:1fr}}
.span-2{grid-column:span 2}
@media (max-width:640px){.span-2{grid-column:auto}}
.ico{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;margin-bottom:26px;color:#fff;background:var(--g,linear-gradient(135deg,#2997ff,#8f5cff))}
.ico svg{width:28px;height:28px}
.tile .q{margin-top:22px;font-size:15px;font-weight:600;color:var(--ink)}
.dark .tile .q{color:var(--d-ink)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px}
@media (max-width:760px){.stats{grid-template-columns:1fr}}
.stat{text-align:left}
.stat .num{font-size:clamp(56px,7vw,88px);font-weight:700;line-height:1;letter-spacing:-.03em}
.stat p{margin-top:12px}
.foot-note{font-size:12px;color:var(--ink-3);margin-top:22px;letter-spacing:-.01em}
.dark .foot-note{color:#86868b}
.foot-note a{color:inherit;text-decoration:underline}

/* ---------- self check ---------- */
.checker{display:grid;grid-template-columns:1.15fr .85fr;gap:20px}
@media (max-width:860px){.checker{grid-template-columns:1fr}}
.slider{padding:16px 0;border-bottom:1px solid #e8e8ed}
.slider:last-child{border-bottom:none}
.slider label{display:flex;justify-content:space-between;align-items:baseline;font-weight:600;margin-bottom:10px}
.slider output{font-size:21px;font-weight:700;color:var(--blue);font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--blue) var(--p,50%),#d2d2d7 var(--p,50%))}
input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:#d2d2d7}
input[type=range]::-moz-range-progress{height:4px;border-radius:4px;background:var(--blue)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-11px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.25),0 0 0 .5px rgba(0,0,0,.08)}
input[type=range]::-moz-range-thumb{width:26px;height:26px;border:none;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.check-out{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.big-ring{position:relative;width:220px;height:220px;margin-bottom:22px}
.big-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.big-ring circle{fill:none;stroke-width:14}
.big-ring .track{stroke:#e8e8ed}
.big-ring .val{stroke:url(#ringGrad);stroke-linecap:round;stroke-dasharray:597;transition:stroke-dashoffset .5s var(--ease)}
.big-ring b{position:absolute;inset:0;display:grid;place-content:center;font-size:64px;font-weight:700;letter-spacing:-.03em;line-height:1}
.big-ring b small{font-size:14px;font-weight:500;color:var(--ink-2);letter-spacing:0;margin-top:8px}
.verdict{font-size:21px;font-weight:600;line-height:1.25;min-height:2.5em}
.weakest{color:var(--ink-2);margin:6px 0 22px;min-height:3em;max-width:34ch}

/* ---------- product lineup (aligned with subgrid) ---------- */
.lineup{display:grid;grid-template-columns:repeat(3,1fr);column-gap:24px;row-gap:0}
.model{display:grid;grid-template-rows:subgrid;grid-row:span 8;justify-items:center;text-align:center;padding:0 6px 40px}
.model>*{margin:0}
.model .visual{width:100%;height:250px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:28px}
.model .visual .phone{width:120px}
.model .visual .mac{width:min(320px,100%)}
.model .badge{font-size:12px;font-weight:600;color:#b64400;min-height:18px;margin-bottom:6px}
.model .badge.blue{color:var(--blue)}
.model h3{font-size:28px;letter-spacing:.007em;line-height:1.14}
.model .desc{color:var(--ink-2);margin-top:12px;max-width:30ch}
.model .price{font-size:17px;font-weight:600;margin-top:18px}
.model .actions{display:flex;gap:18px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:22px}
.model>hr{width:100%;border:none;border-top:1px solid var(--line);margin:34px 0 26px}
.model>ul{list-style:none;display:grid;gap:20px;align-content:start}
.model>ul>li{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:14px;color:var(--ink);max-width:24ch;margin-inline:auto}
.model>ul>li svg{width:30px;height:30px;color:var(--ink-2)}
.model>ul>li.off{color:var(--ink-3)}
@supports not (grid-template-rows:subgrid){.model{display:flex;flex-direction:column;align-items:center}}
@media (max-width:860px){
  .lineup{grid-template-columns:1fr;row-gap:30px}
  .model{display:flex;flex-direction:column;align-items:center;border-bottom:1px solid var(--line)}
  .model:last-child{border-bottom:none}
  .model>hr,.model>ul{display:none}
}

/* ---------- steps ---------- */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:s}
.steps li{counter-increment:s}
.steps li::before{content:counter(s);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;font-weight:600;font-size:19px;margin-bottom:22px}
.dark .steps li::before{background:#fff;color:#000}
@media (max-width:760px){.steps{grid-template-columns:1fr}}

/* ---------- tabs (segmented control) ---------- */
.seg{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:4px;padding:4px;border-radius:980px;background:#e8e8ed;margin-bottom:34px}
.seg button{min-height:36px;padding:0 18px;border:none;border-radius:980px;background:transparent;color:var(--ink);font-size:14px;cursor:pointer;transition:background .25s var(--ease),box-shadow .25s}
.seg button[aria-selected="true"]{background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.12);font-weight:600}
.dark .seg{background:#2c2c2e}
.dark .seg button{color:var(--d-ink)}
.dark .seg button[aria-selected="true"]{background:#636366;box-shadow:none}
@media (max-width:520px){.seg{border-radius:18px}}

/* ---------- feature tiles for "what you get" ---------- */
.feature-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.feature-grid .f-a{grid-column:span 3}
.feature-grid .f-b{grid-column:span 3}
.feature-grid .f-c{grid-column:span 3}
@media (max-width:900px){.feature-grid{grid-template-columns:1fr}.feature-grid>*{grid-column:auto!important}}
.f-ring{display:flex;align-items:center;gap:28px;margin-top:28px}
.f-ring .big-ring{width:160px;height:160px;margin:0}
.f-ring .big-ring b{font-size:48px}
.fix-list{list-style:none;margin-top:24px;display:grid;gap:12px}
.fix-list li{display:flex;gap:14px;align-items:flex-start;font-size:16px;color:var(--d-ink)}
.fix-list li b{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:#fff;font-size:14px}
.weeks{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:26px}
.weeks div{background:var(--dark-3);border-radius:14px;padding:14px;font-size:14px;color:var(--d-ink-2);line-height:1.35}
.weeks b{display:block;color:var(--d-ink);margin-bottom:4px}
@media (max-width:520px){.weeks{grid-template-columns:repeat(2,1fr)}}
.quote{margin-top:24px;padding:18px 20px;border-radius:16px;background:var(--dark-3);font-size:16px;color:var(--d-ink);line-height:1.45}

/* ---------- buy panel ---------- */
.buy{display:grid;grid-template-columns:1fr 400px;gap:20px;align-items:start}
.buy .ticks{gap:18px}
.buy>.tile:first-child .ticks li{font-size:19px}
@media (max-width:900px){.buy{grid-template-columns:1fr}}
.buy-box{display:flex;flex-direction:column}
.amount{font-size:72px;font-weight:700;letter-spacing:-.03em;line-height:1}
.amount small{font-size:19px;font-weight:500;color:var(--ink-2);letter-spacing:0}
.ticks{list-style:none;margin:26px 0 30px;display:grid;gap:14px}
.ticks li{display:flex;gap:12px;align-items:flex-start}
.ticks svg{flex:none;width:20px;height:20px;color:var(--good-t);margin-top:2px}
.buy-box .btn{width:100%;min-height:52px}
.buy-box .fine{font-size:12px;color:var(--ink-2);margin-top:14px;letter-spacing:-.01em}

/* ---------- pricing cards (video) ---------- */
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.plan{display:grid;grid-template-rows:subgrid;grid-row:span 6;background:var(--white);border-radius:var(--r-xl);padding:30px 26px;border:2px solid transparent}
.plan>*{margin:0}
.plan.feature{border-color:var(--blue)}
.plan .tag{font-size:12px;font-weight:600;color:var(--blue);min-height:16px;margin-bottom:8px}
.plan h3{font-size:24px}
.plan .p{font-size:40px;font-weight:700;letter-spacing:-.03em;line-height:1;margin-top:14px}
.plan .p small{font-size:15px;font-weight:500;color:var(--ink-2);letter-spacing:0}
.plan .unit{font-size:14px;color:var(--ink-2);margin-top:6px}
.plan ul{list-style:none;margin:22px 0 28px;align-self:start}
.plan li{padding:10px 0;border-top:1px solid #e8e8ed;font-size:15px;color:var(--ink)}
.plan .btn{align-self:end;width:100%}
@supports not (grid-template-rows:subgrid){.plan{display:flex;flex-direction:column}.plan .btn{margin-top:auto}}
@media (max-width:1000px){.plans{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.plans{grid-template-columns:1fr}}

/* ---------- reel ---------- */
.reel{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px max(22px,calc((100vw - 1080px)/2)) 30px;scrollbar-width:none}
.reel::-webkit-scrollbar{display:none}
.reel figure{flex:0 0 clamp(200px,22vw,250px);scroll-snap-align:center}
.reel figcaption{text-align:center;margin-top:14px;font-size:14px;color:var(--d-ink-2)}
.reel figcaption b{display:block;color:var(--d-ink);font-size:17px}
.reel-nav{display:flex;justify-content:flex-end;gap:12px}
.round{width:44px;height:44px;border-radius:50%;border:none;background:rgba(210,210,215,.25);color:var(--d-ink);display:grid;place-items:center;cursor:pointer;transition:background .2s}
.round:hover{background:rgba(210,210,215,.4)}
.round svg{width:18px;height:18px}

/* ---------- templates ---------- */
.fan{display:flex;justify-content:center;align-items:flex-end;gap:clamp(10px,2vw,26px);margin-top:clamp(50px,6vw,80px)}
.fan .phone{width:clamp(140px,22vw,250px)}
.fan .phone:nth-child(1){transform:translateY(30px) rotate(-6deg)}
.fan .phone:nth-child(3){transform:translateY(30px) rotate(6deg)}
@media (max-width:560px){.fan .phone:nth-child(1),.fan .phone:nth-child(3){display:none}.fan .phone{width:62%}}
.packs{display:grid;grid-template-columns:repeat(3,minmax(0,260px));gap:clamp(12px,2vw,22px);justify-content:center}
.packs .phone{width:100%;max-width:260px}
@media (max-width:640px){.packs{grid-template-columns:repeat(3,1fr);gap:8px}}
.caption-tile{margin-top:26px;text-align:left}
.caption-tile p{color:var(--ink)!important;font-size:19px;margin:0}
.caption-tile small{display:block;margin-top:10px;color:var(--ink-2);font-size:14px}

/* ---------- forms ---------- */
.form-tile{text-align:left}
label{display:block;font-weight:600;font-size:15px;margin-bottom:8px}
.hint{display:block;font-weight:400;font-size:13px;color:var(--ink-2);margin-top:2px}
input:not([type=range]),select,textarea{width:100%;min-height:52px;padding:14px 16px;border-radius:12px;border:1px solid #d2d2d7;background:#fff;color:var(--ink);font:17px var(--font);letter-spacing:-.022em;transition:border-color .2s,box-shadow .2s}
input::placeholder,textarea::placeholder{color:#86868b}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,113,227,.18)}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:44px}
textarea{min-height:120px;resize:vertical}
.field{margin-bottom:22px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:640px){.field-row{grid-template-columns:1fr}}
fieldset{border:none;margin:0 0 20px;background:#fff;border-radius:var(--r-xl);padding:clamp(24px,4vw,40px)}
legend{float:left;width:100%;font-size:24px;font-weight:600;margin-bottom:22px;letter-spacing:.004em}
legend+*{clear:both}
.form-status{margin-top:16px;font-weight:600;min-height:1.4em}
.form-status.ok{color:var(--good-t)} .form-status.err{color:var(--weak-t)}
.stepper{display:flex;gap:8px;margin:0 0 22px}
.stepper i{flex:1;height:4px;border-radius:4px;background:#d2d2d7;overflow:hidden;position:relative}
.stepper i b{position:absolute;inset:0;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:24px 50px 24px 0;font-size:clamp(19px,2vw,24px);font-weight:600;letter-spacing:.009em;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:18px;height:18px;margin-top:-9px;background:linear-gradient(currentColor,currentColor) center/18px 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 18px no-repeat;transition:transform .3s var(--ease);opacity:.7}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{padding:0 0 26px;color:var(--ink-2);font-size:17px;max-width:62ch}

/* ---------- finale ---------- */
.finale h2{font-size:clamp(40px,6.4vw,80px);line-height:1.05;letter-spacing:-.015em;max-inline-size:16ch;margin-inline:auto}

/* ---------- blog ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:20px}
.filters button{min-height:36px;padding:0 16px;border-radius:980px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:14px;cursor:pointer;transition:all .2s}
.filters button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.search{max-width:420px;margin:0 auto 50px}
.search label{position:absolute;left:-999px}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:900px){.posts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.posts{grid-template-columns:1fr}}
.post-card{display:flex;flex-direction:column;background:#fff;border-radius:var(--r-l);overflow:hidden;color:var(--ink);box-shadow:0 2px 12px rgba(0,0,0,.06);transition:transform .35s var(--ease),box-shadow .35s var(--ease);text-decoration:none!important}
.post-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,.12)}
.thumb{aspect-ratio:16/9;display:grid;place-items:center;color:#fff;background:var(--tg)}
.thumb svg{width:56px;height:56px;opacity:.95}
.post-body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.post-card .cat{font-size:12px;font-weight:600;color:var(--ink-2);text-transform:none}
.post-card h3{font-size:21px;line-height:1.2;margin-top:8px}
.post-card p{font-size:15px;color:var(--ink-2);margin-top:10px}
.post-card .meta{margin-top:auto;padding-top:16px;font-size:13px;color:var(--ink-3)}
.post-card.is-new .cat::after{content:"New";margin-left:8px;color:#b64400}
.empty{display:none;padding:40px;text-align:center;color:var(--ink-2)}

.article-hero{padding:clamp(50px,7vw,90px) 0 30px;background:var(--white)}
.crumbs{font-size:14px;color:var(--ink-2);margin-bottom:18px}
.crumbs a{color:var(--ink-2)}
.article-hero h1{font-size:clamp(34px,5vw,56px);line-height:1.07;letter-spacing:-.005em}
.article-meta{display:flex;flex-wrap:wrap;gap:6px 18px;color:var(--ink-2);font-size:14px;margin-top:18px}
.article-body{background:var(--white);padding:20px 0 90px}
.prose{font-size:19px;line-height:1.58;letter-spacing:.012em}
.prose>*+*{margin-top:1.05em}
.prose h2{font-size:clamp(26px,3vw,32px);line-height:1.15;margin-top:1.9em}
.prose h3{font-size:22px;margin-top:1.5em}
.prose ul,.prose ol{padding-left:1.25em}
.prose li+li{margin-top:.45em}
.prose a{color:var(--link)}
.prose blockquote{padding:20px 24px;border-radius:16px;background:var(--gray);font-size:17px}
.prose table{width:100%;border-collapse:collapse;font-size:16px}
.prose th,.prose td{text-align:left;padding:12px 10px;border-bottom:1px solid #e8e8ed;vertical-align:top}
.prose th{color:var(--ink-2);font-weight:600}
.callout{margin:2em 0;background:var(--gray);border-radius:var(--r-l);padding:28px 30px}
.callout h3{margin:0 0 6px;font-size:22px}
.callout p{color:var(--ink-2);font-size:17px;margin:0 0 18px}
.sources{font-size:15px;color:var(--ink-2)}
.sources a{color:var(--ink-2);text-decoration:underline}

/* ---------- footer ---------- */
.foot{background:var(--gray);color:var(--ink-2);font-size:12px;letter-spacing:-.01em;padding:40px 0 30px;line-height:1.33}
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:30px;padding-bottom:30px;border-bottom:1px solid var(--line)}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}}
.foot-grid img{height:12px;width:auto;margin-bottom:14px}
.foot-grid p{max-width:30ch}
.foot-grid h4{font-size:12px;font-weight:600;color:var(--ink);margin-bottom:10px}
.foot-grid a{display:block;color:var(--ink-2);padding:4px 0}
.foot-grid a:hover{color:var(--ink);text-decoration:underline}
.foot-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:18px}
.foot-base a{color:var(--ink-2);margin-left:14px}

/* ---------- motion (only when JS confirms motion is allowed) ---------- */
.anim .reveal{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.anim .reveal.in{opacity:1;transform:none}
.anim .stagger>*{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.anim .stagger.in>*{opacity:1;transform:none}
.anim .stagger.in>*:nth-child(2){transition-delay:.08s}
.anim .stagger.in>*:nth-child(3){transition-delay:.16s}
.anim .stagger.in>*:nth-child(4){transition-delay:.24s}
.anim .stagger.in>*:nth-child(5){transition-delay:.32s}
.anim .stagger.in>*:nth-child(6){transition-delay:.4s}
.tile.lift{transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.tile.lift:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 20px 40px -20px rgba(0,0,0,.25)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation:none!important}
  .stage .mac,.stage .phone{transform:none}
}
h1 .s,h2 .s{display:inline-block}
.tile .verdict{color:var(--ink)}