/* HubZip draft site styles.
   Brand: purple + white. Product accents are CSS variables so each is a one-line change.
   --hz-purple   #6B2FD6  primary (zip graphic, nav, buttons, wordmark)
   --hz-deep     #1B0B3B  deep purple-ink for text and dark sections
   --hz-lilac    #F3EEFF  light tint
   --tq-accent   #1F7AE0  TubeQuote blue (chosen by Jack)
   --fq-accent   #F2761B  FlatQuote orange (chosen by Jack) */
:root{
  --hz-purple:#6B2FD6;--hz-purple-dark:#5520B5;--hz-deep:#1B0B3B;--hz-deep-2:#2A1459;--hz-lilac:#F3EEFF;--hz-lilac-2:#E6DBFF;
  --white:#FFFFFF;--ink:#1B0B3B;--slate:#5E5876;--line:#E7E2F2;--mist:#FAF8FF;
  --tq-accent:#1F7AE0;--tq-soft:#E6F0FC;
  --fq-accent:#F2761B;--fq-soft:#FEEFE3;
  --accent:var(--hz-purple);--accent-soft:var(--hz-lilac);
  --radius:16px;--max:1160px}
.theme-tq{--accent:var(--tq-accent);--accent-soft:var(--tq-soft)}
.theme-fq{--accent:var(--fq-accent);--accent-soft:var(--fq-soft)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,"Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--hz-purple)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
h1,h2,h3{line-height:1.12;letter-spacing:-.02em;margin:0 0 .5em}
h1{font-size:clamp(2.2rem,5.2vw,3.8rem);font-weight:800}
h2{font-size:clamp(1.7rem,3.3vw,2.5rem);font-weight:800}
h3{font-size:1.2rem;font-weight:700}
p{margin:0 0 1em}
.eyebrow{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.lead{font-size:1.15rem;color:var(--slate);max-width:660px}
.center{text-align:center}.center .lead{margin-left:auto;margin-right:auto}
/* header (always HubZip purple) */
.site-header{position:sticky;top:0;z-index:50;background:var(--hz-purple);color:#fff;box-shadow:0 1px 0 rgba(0,0,0,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;height:66px;gap:16px}
.nav .brand img{height:32px;width:auto}
.nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;align-items:center}
.nav ul a{color:#fff;text-decoration:none;font-weight:600;font-size:.95rem;opacity:.92}
.nav ul a:hover,.nav ul a[aria-current]{opacity:1;text-decoration:underline;text-underline-offset:6px}
.nav .btn{padding:9px 16px;font-size:.9rem}
.btn{display:inline-block;padding:12px 22px;border-radius:10px;font-weight:700;text-decoration:none;border:2px solid transparent;cursor:pointer;font-size:1rem;font-family:inherit;transition:transform .15s,background .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--hz-purple);color:#fff}
.btn-primary:hover{background:var(--hz-purple-dark)}
.btn-white{background:#fff;color:var(--hz-purple)}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{filter:brightness(.93)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:#fff}
.btn-ghost-light{border-color:rgba(255,255,255,.5);color:#fff;background:transparent}
/* ---------- unzip intro ---------- */
.zip-stage{position:relative;height:320vh}
.zip-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--hz-lilac)}
.reveal{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:84px 0 32px;background:radial-gradient(900px 500px at 80% 0%,var(--hz-lilac-2),transparent 60%),var(--mist)}
.reveal h1{max-width:820px}
.reveal .range{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
/* Hero product cards (v2, 19 Oct 2026): light HubZip cards. A purple/lilac cut-corner frame, a real zip down the left edge
   that unzips on hover (slider runs down, teeth open in a V like the hero), and a zip-pull tag holding the link.
   Product colour is an accent only: the dot by the name and the laser-cut lines in the drawing. */
.range-card{--a:var(--card-accent,var(--hz-purple));--ch:22px;position:relative;isolation:isolate;display:block;text-decoration:none;color:var(--hz-deep);
  padding:24px 26px 22px 28px;border:2px solid #E6DBFF;border-radius:22px;
  background:radial-gradient(240px 130px at 100% 0%,color-mix(in srgb,var(--a) 10%,transparent),transparent 72%) padding-box,
    repeating-linear-gradient(0deg,rgba(107,47,214,.035) 0 1px,transparent 1px 22px) padding-box,repeating-linear-gradient(90deg,rgba(107,47,214,.035) 0 1px,transparent 1px 22px) padding-box,
    linear-gradient(170deg,#FFFFFF 0%,#FFFFFF 40%,var(--hz-lilac) 100%) padding-box;
  box-shadow:0 2px 4px rgba(107,47,214,.05),0 18px 36px -18px rgba(107,47,214,.28);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s}
.range-card::before{content:none}
.range{filter:none}
.range-card h3{display:flex;align-items:center;gap:9px;margin:0 0 4px;color:var(--hz-deep);min-height:52px;padding-right:118px;font-size:1.3rem;letter-spacing:-.01em}
.range-card h3::before{content:"";flex:none;width:11px;height:11px;border-radius:50%;background:var(--a);box-shadow:0 0 0 4px color-mix(in srgb,var(--a) 20%,transparent)}
.range-card p{margin:0;color:var(--slate);font-size:.95rem}
/* zip-pull tag holding the link */
.range-card .more{position:relative;display:inline-flex;align-items:center;gap:6px;margin-top:14px;padding:6px 14px 6px 26px;border-radius:999px;
  background:var(--hz-purple);color:#fff;font-weight:700;font-size:.86rem;box-shadow:0 6px 14px -8px rgba(107,47,214,.55);transition:transform .25s ease,background .25s}
.range-card .more::before{content:"";position:absolute;left:9px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px #D9C8FF}
.card-mrp .more{background:#fff;color:var(--hz-purple);box-shadow:inset 0 0 0 1.5px var(--hz-purple)}
.card-mrp .more::before{background:var(--hz-purple);box-shadow:none}
/* the zip border: drawn by site.js as an SVG that follows the card's rounded corners (see rc-zip) */
.rc-zip{position:absolute;inset:-2px;width:calc(100% + 4px);height:calc(100% + 4px);overflow:visible;pointer-events:none}
.rc-zip path{fill:none;stroke-linecap:round}
.rc-zip .za{stroke:var(--hz-purple);stroke-width:5;stroke-dasharray:0 8}
.rc-zip .zb{stroke:#B79AF5;stroke-width:5;stroke-dasharray:0 8;stroke-dashoffset:4}
.rc-zip .zt{stroke:#fff;stroke-width:2.4;stroke-dasharray:0 99999}
.rc-zip .zs{fill:var(--hz-purple);stroke:#fff;stroke-width:2}
.rc-zip .zs-in{fill:#D9C8FF}
.range-card.has-zip{border-color:transparent;background-clip:padding-box}
/* line drawings: purple outlines, product-colour cut paths */
.rc-art{position:absolute;top:16px;right:26px;width:112px;height:66px;overflow:visible}
.rc-art .body{fill:none;stroke:rgba(107,47,214,.3);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rc-art .track{stroke:var(--hz-purple);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:.1 5.5;opacity:.55}
.rc-art .cut{fill:none;stroke:var(--a);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.rc-art .ghost{stroke-dasharray:.04 .03;opacity:.6}
/* hover / focus: lift, frame goes full purple, the zip unzips and the drawing is re-cut */
.range-card:hover,.range-card:focus-visible{transform:translateY(-4px);box-shadow:0 2px 4px rgba(107,47,214,.06),0 26px 44px -20px rgba(107,47,214,.4);
  background:radial-gradient(240px 130px at 100% 0%,color-mix(in srgb,var(--a) 14%,transparent),transparent 72%) padding-box,linear-gradient(170deg,#FFFFFF 0%,#FFFFFF 40%,var(--hz-lilac) 100%) padding-box}
.range-card:focus-visible{outline:3px solid var(--hz-deep);outline-offset:3px}
.range-card:hover .more,.range-card:focus-visible .more{transform:translateX(5px)}
.range-card:hover .rc-art .cut:not(.ghost),.range-card:focus-visible .rc-art .cut:not(.ghost){animation:rc-trace 1.1s cubic-bezier(.6,.1,.3,1) both}
@keyframes rc-trace{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.range-card,.range-card *,.range-card *::before,.range-card *::after{animation:none!important;transition:none!important}
  .range-card:hover,.range-card:focus-visible{transform:none}
      .range-card:hover .more,.range-card:focus-visible .more{transform:none}}
.card-tq{--card-accent:var(--tq-accent)}.card-fq{--card-accent:var(--fq-accent)}.card-mrp{--card-accent:var(--hz-purple)}
.zip-half{position:absolute;inset:0;overflow:hidden;background:var(--hz-purple);will-change:clip-path,transform;color:#fff;--zg:22px;--sp:20px;--u:min(2.857px,.35vw)}
.zip-half::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 2px,transparent 2px 14px)}
/* Both halves hold the same full-width composition. Every row is a 3-column grid whose middle column is the zip,
   so the Hub|Zip gap and the tagline split always sit on the zip line (50%) at any size; only the clip-path differs. */
.zh-comp{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:70px 0 90px}
.zh-row{display:grid;grid-template-columns:minmax(0,1fr) calc(var(--zg)*2) minmax(0,1fr);padding:0 var(--sp);box-sizing:border-box;width:100%}
.zh-l{grid-column:1;justify-self:end;text-align:right;min-width:0}
.zh-r{grid-column:3;justify-self:start;text-align:left;min-width:0}
.zh-brand{align-items:center}
.zh-brand .zh-l,.zh-brand .zh-r{display:flex;align-items:center;gap:calc(var(--u)*10);white-space:nowrap}
img.zh-mark{width:calc(var(--u)*48);height:calc(var(--u)*48);max-width:none;flex:none;display:block}
.zh-word{font-size:calc(var(--u)*28);font-weight:800;letter-spacing:calc(var(--u)*-.5);line-height:1.15;color:#fff}
.zh-zip{color:#D9C8FF}
.zh-tag{align-items:start;margin-top:18px;font-size:clamp(1rem,2.2vw,1.35rem);font-weight:600;line-height:1.35}
.zh-tag span{opacity:.9}
.zh-hint{position:absolute;left:0;right:0;bottom:28px}
.zip-half .zip-hint{white-space:nowrap;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.zip-half .zh-hint .zh-l{margin-right:-.12em}
@media (max-width:600px){.zip-half{--zg:16px;--sp:12px;--u:min(2.857px,.37vw)}.zh-tag{margin-top:14px}}
.zip-teeth{position:absolute;left:50%;width:18px;margin-left:-9px;background:repeating-linear-gradient(to bottom,#E6DBFF 0 6px,#B89BF5 6px 12px);border-radius:3px;box-shadow:0 0 0 2px rgba(27,11,59,.15)}
.zip-teeth.closed{bottom:0}
.zip-edge{position:absolute;width:9px;background:repeating-linear-gradient(to bottom,#E6DBFF 0 6px,transparent 6px 12px);transform-origin:50% 100%}
.zip-pull{position:absolute;left:50%;width:46px;margin-left:-23px;z-index:3;filter:drop-shadow(0 6px 10px rgba(0,0,0,.3))}
.no-zip .zip-stage{height:auto}
.no-zip .zip-sticky{position:relative;height:auto;overflow:visible}
.no-zip .reveal{position:relative;padding:72px 0}
.no-zip .zip-layer{display:none}
/* sections */
section{padding:88px 0}
.section-head{max-width:740px;margin-bottom:44px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.tile{padding:26px;border-radius:var(--radius);background:var(--mist);border:1px solid var(--line)}
.tile .ico{width:44px;height:44px;border-radius:12px;background:var(--accent-soft);display:grid;place-items:center;margin-bottom:14px;color:var(--accent)}
.products{background:var(--hz-deep);color:#fff}
.products .lead{color:#CFC6E6}
.products .eyebrow{color:#C9B3FF}
.product{background:var(--hz-deep-2);border:1px solid #3D2A70;border-top:5px solid var(--card-accent);border-radius:18px;padding:30px;display:flex;flex-direction:column;color:#fff;text-decoration:none}
.product h3{font-size:1.5rem;color:#fff}
.product p{color:#CFC6E6}
.product ul{padding-left:18px;margin:0 0 24px;color:#ECE6FA}
.product li{margin-bottom:6px}
.product .btn{margin-top:auto;align-self:flex-start;background:var(--card-accent);color:#fff}
.badge{display:inline-block;font-size:.75rem;font-weight:700;border-radius:999px;padding:3px 10px;margin-bottom:14px;background:rgba(255,255,255,.12);color:#fff}
.badge.soon{background:#fff;color:var(--hz-purple)}
.product.soon{border-style:dashed}
.steps{counter-reset:step}
.step{padding:30px 26px 26px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.step::before{counter-increment:step;content:counter(step);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--hz-purple);color:#fff;font-weight:800;margin-bottom:16px}
.maker{background:var(--hz-lilac)}
.maker-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.panel{background:#fff;border-radius:18px;border:1px solid var(--line);padding:32px}
.panel ul{margin:0;padding-left:20px}.panel li{margin-bottom:10px}
/* pricing */
.pricing{background:var(--mist)}
.draft-label{display:inline-block;background:#FFF4D6;color:#7A5300;border:1px solid #F0D58A;font-weight:700;font-size:.85rem;border-radius:999px;padding:5px 14px;margin-bottom:18px}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.price{background:#fff;border:1px solid var(--line);border-top:5px solid var(--card-accent,var(--hz-purple));border-radius:18px;padding:28px;display:flex;flex-direction:column}
.price h3{margin-bottom:4px}
.price .for{color:var(--slate);font-size:.95rem;min-height:3em}
.price .opt{border-top:1px dashed var(--line);padding:14px 0}
.price .opt span{display:block;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
.price .amt{font-size:1.9rem;font-weight:800;letter-spacing:-.02em}
.price .amt small{font-size:1rem;font-weight:600;color:var(--slate)}
.price .save{display:inline-block;margin-left:6px;font-size:.8rem;font-weight:700;color:#0B7A4B;background:#E3F6EC;border-radius:999px;padding:2px 9px;vertical-align:middle}
.price .btn{margin-top:auto}
.price.bundle{background:linear-gradient(180deg,#fff 0%,var(--hz-lilac) 100%);border:2px solid var(--hz-purple);border-top-width:5px;position:relative}
.price.bundle .flag{position:absolute;top:-14px;right:20px;background:var(--hz-purple);color:#fff;font-size:.75rem;font-weight:700;border-radius:999px;padding:4px 12px}
.price-note{margin-top:22px;font-size:.9rem;color:var(--slate);text-align:center}
/* waitlist */
.waitlist{background:linear-gradient(135deg,var(--hz-purple) 0%,#3D1690 100%);color:#fff;text-align:center}
.waitlist .lead{color:#E6DBFF;margin:0 auto 32px}
.waitlist .eyebrow{color:#fff;opacity:.85}
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:660px;margin:0 auto;text-align:left}
.form label{font-size:.85rem;font-weight:600;color:#E6DBFF;display:block;margin-bottom:6px}
.form input,.form select{width:100%;padding:13px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;font-size:1rem;font-family:inherit}
.form select option{color:var(--ink)}
.form input::placeholder{color:#C9B8F0}
.form .full{grid-column:1/-1}
.form .btn{width:100%}
.form-note{font-size:.85rem;color:#D9CCF7;margin-top:14px;text-align:center}
.form-msg{display:none;margin-top:14px;color:#fff;font-weight:700;text-align:center}
/* footer (always HubZip purple family) */
.site-footer{background:var(--hz-deep);color:#CFC6E6;padding:56px 0 32px;font-size:.92rem}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
.site-footer h4{color:#fff;font-size:.95rem;margin:0 0 12px}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:8px}
.site-footer a{color:#CFC6E6;text-decoration:none}
.site-footer a:hover{color:#fff}
.footer-logo{height:30px;width:auto;margin-bottom:14px}
.footer-bottom{border-top:1px solid #33215F;margin-top:40px;padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
/* product pages */
.page-hero{background:linear-gradient(180deg,var(--accent-soft) 0%,#fff 100%);padding:72px 0 56px;border-bottom:4px solid var(--accent)}
.page-hero-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:center}
.page-hero .shot{border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(27,11,59,.45)}
.page-hero h1 span{color:var(--accent)}
.breadcrumb{font-size:.9rem;color:var(--slate);margin-bottom:12px}
.breadcrumb a{color:var(--slate)}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.feature-list{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;list-style:none;padding:0;margin:0}
.feature-list li{padding:20px 22px 20px 54px;border:1px solid var(--line);border-radius:14px;position:relative;background:#fff}
.feature-list li::before{content:"";position:absolute;left:20px;top:24px;width:18px;height:18px;border-radius:50%;background:var(--accent);box-shadow:inset 0 0 0 5px var(--accent-soft)}
.feature-list strong{display:block}
.feature-list .new{display:inline-block;margin-left:8px;font-size:.7rem;font-weight:800;color:#fff;background:var(--accent);border-radius:999px;padding:1px 8px;vertical-align:middle}
.shots{background:var(--mist)}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.tabs button{font:inherit;font-weight:600;font-size:.92rem;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:8px 16px;cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.shot-panel{display:none;grid-template-columns:1fr 2fr;gap:32px;align-items:start}
.shot-panel.active{display:grid}
.shot-panel figure{margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:0 24px 50px -30px rgba(27,11,59,.4)}
.shot-panel figure a{display:block;max-height:620px;overflow:auto}
.shot-panel .demo{font-size:.8rem;color:var(--slate);margin-top:10px}
.no-js .shot-panel{display:grid;margin-bottom:48px}
/* responsive */
@media (max-width:900px){
  .maker-grid,.page-hero-grid,.shot-panel,.shot-panel.active{grid-template-columns:1fr}
  .grid-3,.price-grid{grid-template-columns:1fr}
  .reveal .range{grid-template-columns:1fr;gap:14px;margin-top:18px}
  .range-card{padding:16px 18px 16px 20px}
  .range-card p{display:none}
  .range-card h3{min-height:0;padding-right:96px;font-size:1.15rem}
  .range-card .more{margin-top:8px}
  .rc-art{width:84px;height:50px;top:50%;right:20px;margin-top:-25px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .nav ul li.hide-m{display:none}
  section{padding:64px 0}
}
@media (max-width:600px){
  .form,.grid-2,.feature-list{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .nav ul{gap:14px}
  .reveal{padding-top:76px}
  .reveal .lead{font-size:1rem}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.nav ul a.btn-white{color:var(--hz-purple);opacity:1;text-decoration:none}
.price .opt .save{display:inline-block;width:auto;letter-spacing:0;text-transform:none;font-size:.8rem;color:#0B7A4B}
.price-grid.two{grid-template-columns:repeat(2,minmax(0,400px))}
@media (max-width:900px){.price-grid.two{grid-template-columns:1fr}}
/* FlatQuote tiers (Standard vs Plus) */
.plus-note{font-size:.88rem;color:var(--slate);background:var(--fq-soft);border-radius:10px;padding:8px 12px;margin:4px 0 16px}
.plus-note strong{color:#B4530C}
.plus-note.dark{background:rgba(242,118,27,.14);color:#F6D9C2}
.plus-note.dark strong{color:#FFB27A}
.price.soon{border-style:dashed;border-top-style:solid;position:relative}
.price .amt.tbc{font-size:1.15rem;color:var(--slate)}
.flag.soon-flag,.tier .soon-flag{position:absolute;top:-14px;right:20px;background:var(--fq-accent);color:#fff;font-size:.75rem;font-weight:700;border-radius:999px;padding:4px 12px}
.tier-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.tier{position:relative;background:#fff;border:1px solid var(--line);border-top:5px solid var(--fq-accent);border-radius:18px;padding:30px;display:flex;flex-direction:column}
.tier.plus{background:linear-gradient(180deg,#fff 0%,var(--fq-soft) 100%);border-style:dashed;border-top-style:solid}
.tier h3 small{font-size:.8rem;font-weight:700;color:var(--slate);text-transform:uppercase;letter-spacing:.06em;margin-left:6px}
.tier .for{color:var(--slate)}
.tier ul{padding-left:20px;margin:0 0 20px}.tier li{margin-bottom:8px}
.tier-price{font-weight:800;margin-top:auto}
.tier-price span{font-weight:600;color:var(--slate);font-size:.9rem}
.tier .btn{align-self:flex-start;margin-top:12px}
@media (max-width:760px){.tier-grid{grid-template-columns:1fr}}
.product .badge{align-self:flex-start}
/* ---------- live build additions ---------- */
.nav-toggle{display:none;background:transparent;border:0;width:44px;height:44px;padding:10px;cursor:pointer;margin-left:auto}
.nav-toggle span{display:block;height:2px;background:#fff;border-radius:2px;margin:5px 0;transition:transform .2s,opacity .2s}
.menu-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-open .nav-toggle span:nth-child(2){opacity:0}
.menu-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:900px){
  .nav-toggle{display:block}
  #main-menu{position:absolute;top:66px;left:0;right:0;background:var(--hz-purple);border-top:1px solid rgba(255,255,255,.15);box-shadow:0 20px 30px -20px rgba(0,0,0,.4);display:none}
  .menu-open #main-menu{display:block}
  #main-menu ul{flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 20px}
  #main-menu li{display:block!important}
  #main-menu a{display:block;padding:12px 0;font-size:1.05rem}
  #main-menu a.btn{margin-top:10px;text-align:center;padding:12px}
}
.anchor{display:block;position:relative;top:-80px;visibility:hidden}
section[id],#early-access{scroll-margin-top:70px}
.light-link{color:#fff;text-decoration:underline;text-underline-offset:3px}
/* pricing */
.toggle{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px;margin-top:8px}
.toggle button{font:inherit;font-weight:700;font-size:.9rem;border:0;background:transparent;color:var(--slate);border-radius:999px;padding:8px 16px;cursor:pointer}
.toggle button[aria-pressed="true"]{background:var(--hz-purple);color:#fff}
.price .split{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;border-top:1px dashed var(--line);padding-top:14px;margin-bottom:6px}
.price .split .opt{border:0;padding:0}
.price .plus-sign{font-size:1.6rem;font-weight:800;color:var(--hz-purple);padding-bottom:6px}
.price .yearly{display:none;border-top:1px dashed var(--line);padding-top:14px}
.price .yearly>span{display:block;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
.price .yearly .save{display:inline-block;margin-left:6px;font-size:.8rem;font-weight:700;color:#0B7A4B;background:#E3F6EC;border-radius:999px;padding:2px 9px;vertical-align:middle;letter-spacing:0;text-transform:none}
.price .yr-note{font-size:.85rem;color:var(--slate);margin:4px 0 0}
.show-yearly .price .split{display:none}
.show-yearly .price .yearly{display:block}
.price .exvat{font-size:.85rem;color:var(--slate);margin:8px 0 14px}
.price .tbc-box{border-top:1px dashed var(--line);padding:14px 0}
/* form */
.form textarea{width:100%;padding:13px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;font-size:1rem;font-family:inherit;resize:vertical}
.form textarea::placeholder{color:#C9B8F0}
.form [aria-invalid="true"]{border-color:#FFB4B4;box-shadow:0 0 0 2px rgba(255,180,180,.35)}
.form .err{color:#FFD2D2;font-size:.85rem;font-weight:600;margin:6px 0 0;min-height:0}
.form .err:empty{display:none}
.form .hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form .consent{display:flex;gap:10px;align-items:flex-start;font-weight:500;color:#E6DBFF}
.form .consent input{width:18px;height:18px;margin-top:3px;flex:none}
.form button[disabled]{opacity:.7;cursor:wait}
.thanks{max-width:560px;margin:0 auto;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);border-radius:18px;padding:32px;outline:none}
.thanks h3{font-size:1.5rem}
/* demo */
.demo-sec{background:linear-gradient(180deg,#fff 0%,var(--accent-soft) 100%)}
.demo-badge{display:inline-block;background:#FFF4D6;color:#7A5300;border:1px solid #F0D58A;font-weight:800;font-size:.85rem;border-radius:999px;padding:5px 14px}
.demo-grid{display:grid;grid-template-columns:minmax(0,380px) 1fr;gap:28px;align-items:start}
.demo-form,.demo-out{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:0 24px 50px -34px rgba(27,11,59,.45)}
.demo-out{border-top:5px solid var(--accent)}
.demo-form label{display:block;font-weight:700;font-size:.9rem;margin-bottom:14px}
.demo-form input,.demo-form select{display:block;width:100%;margin-top:6px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;font-weight:500;background:#fff;color:var(--ink)}
.demo-form input:focus,.demo-form select:focus{outline:2px solid var(--accent);outline-offset:1px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.demo-err{color:#B42318;font-weight:700;font-size:.9rem;margin:0 0 8px}
.demo-err:empty{display:none}
.demo-assume{font-size:.82rem;color:var(--slate);margin:0}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.kpis div{background:var(--accent-soft);border-radius:12px;padding:12px 14px}
.kpis span{display:block;font-size:.75rem;font-weight:700;color:var(--slate);text-transform:uppercase;letter-spacing:.05em}
.kpis b{display:block;font-size:1.25rem;margin-top:2px;word-break:break-word}
.viz{margin-bottom:16px}
.viz-title{font-size:.85rem;font-weight:700;color:var(--slate);margin:0 0 6px}
.viz svg{width:100%;height:auto;display:block;border-radius:8px;background:#F4F2FA}
[data-demo="tq"] .viz svg{height:60px}
.viz .part{fill:var(--accent);fill-opacity:.85;stroke:#fff;stroke-width:1}
[data-demo="fq"] .viz .part{stroke-width:3}
.viz .off{fill:#22C55E;fill-opacity:.22;stroke:#16A34A;stroke-dasharray:6 4;stroke-width:2}
.viz .end,.viz .sheet-edge{fill:#CFC8E0}
.viz .bar-bg,.viz .sheet-bg{fill:#ECE8F6}
.legend{font-size:.8rem;color:var(--slate);margin:8px 0 0;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.lg{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.lg.part{background:var(--accent)}.lg.off{background:rgba(34,197,94,.3);border:1px dashed #16A34A}.lg.end{background:#CFC8E0}
.breakdown{width:100%;border-collapse:collapse;font-size:.95rem}
.breakdown td{padding:8px 0;border-bottom:1px dashed var(--line)}
.breakdown td:last-child{text-align:right;font-weight:700}
.breakdown .tot td{font-size:1.1rem;font-weight:800;color:var(--accent);border-bottom:2px solid var(--line)}
.demo-foot{font-size:.8rem;color:var(--slate);margin:12px 0 0;font-weight:600}
.prose{max-width:760px}.prose h2{font-size:1.4rem;margin-top:1.4em}
@media (max-width:900px){.demo-grid{grid-template-columns:1fr}.kpis{grid-template-columns:repeat(2,1fr)}}
/* TubeQuote Plus (coming soon): blue variant of the Plus pattern */
.plus-note.tq{background:var(--tq-soft)}
.plus-note.tq strong{color:#165DB0}
.plus-note.dark.tq{background:rgba(31,122,224,.18);color:#D3E4FA}
.plus-note.dark.tq strong{color:#8CC0FF}
.card-tq .soon-flag,.tier.card-tq .soon-flag{background:var(--tq-accent)}
.price.soon.card-tq{border-color:var(--tq-accent);border-style:dashed;border-top-style:solid}
.price.soon.card-fq{border-color:var(--fq-accent)}
.tier.card-tq{border-top-color:var(--tq-accent)}
.tier.plus.card-tq{background:linear-gradient(180deg,#fff 0%,var(--tq-soft) 100%);border-color:var(--tq-accent)}
.tier.plus.card-fq{border-color:var(--fq-accent)}
/* Instant Quote (coming soon) */
.iq{background:radial-gradient(700px 400px at 100% 0%,var(--hz-lilac-2),transparent 60%),var(--hz-lilac)}
.iq-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}
.iq-pill{display:inline-block;background:var(--hz-purple);color:#fff;font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;border-radius:999px;padding:6px 14px;margin-bottom:16px}
.iq-pill.sm{font-size:.68rem;padding:3px 10px;margin:0 6px 0 0;vertical-align:middle}
.iq-head h2{color:var(--hz-deep)}
.iq-products{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 26px}
.iq-chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-weight:700;font-size:.92rem}
.iq-chip i{width:10px;height:10px;border-radius:50%}
.iq-chip.tq i{background:var(--tq-accent)}.iq-chip.fq i{background:var(--fq-accent)}
.iq-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.iq-list li{position:relative;background:#fff;border:1px solid var(--line);border-left:4px solid var(--hz-purple);border-radius:14px;padding:16px 18px 16px 50px;box-shadow:0 14px 30px -26px rgba(27,11,59,.5)}
.iq-list li::before{content:"";position:absolute;left:18px;top:21px;width:16px;height:16px;border-radius:50%;background:var(--hz-purple);box-shadow:inset 0 0 0 4px var(--hz-lilac-2)}
.iq-list li:nth-child(2){border-left-color:var(--tq-accent)}
.iq-list li:nth-child(2)::before{background:linear-gradient(90deg,var(--tq-accent) 50%,var(--fq-accent) 50%)}
.iq-note{margin:22px 0 0;font-weight:600}
.iq-note a{color:var(--hz-purple)}
@media (max-width:900px){.iq-grid{grid-template-columns:1fr;gap:24px}}
/* Pricing v2 (19 Oct 2026): setup + monthly, Plus prices, bundle with Plus, Instant Quote Front add-on */
.v-yearly{display:none}
.show-yearly .v-split{display:none}
.show-yearly .v-yearly{display:inline}
.show-yearly p.v-yearly{display:block}
.soon-chip{display:inline-block;background:var(--hz-purple);color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:3px 9px;vertical-align:middle}
.price .plus-note .v-split,.price .plus-note .v-yearly{font-weight:700;color:var(--ink)}
.plus-opt{border:1px dashed var(--hz-purple);border-radius:14px;background:#fff;padding:14px 16px;margin:0 0 16px}
.plus-opt p{margin:0}
.plus-opt .po-head strong{font-size:1rem}
.plus-opt .po-for{color:var(--slate);font-size:.9rem;margin:4px 0 8px}
.plus-opt .po-price{font-size:1.05rem}
.plus-opt .po-price strong{font-size:1.35rem;font-weight:800;letter-spacing:-.02em}
.plus-opt .save{margin-left:4px}
.plus-opt .po-note{font-size:.82rem;color:var(--slate);margin-top:8px}
.addon{display:grid;grid-template-columns:1fr auto auto;gap:24px;align-items:center;margin-top:22px;background:#fff;border:1px dashed var(--hz-purple);border-left:5px solid var(--hz-purple);border-radius:18px;padding:22px 28px}
.addon p{margin:0}
.addon .addon-text p:last-child{color:var(--slate);margin-top:6px}
.addon .po-head strong{font-size:1.1rem}
.addon .amt{font-size:1.9rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.addon .amt small{font-size:1rem;font-weight:600;color:var(--slate)}
.addon .exvat{font-size:.85rem;color:var(--slate)}
@media (max-width:760px){.addon{grid-template-columns:1fr;gap:12px;padding:20px}.addon .btn{justify-self:start}}
.iq-price{margin:-6px 0 18px;font-size:1.05rem;color:var(--hz-deep)}
/* ===== "Pick the tool" cards (laser-cut v1, 19 Oct 2026): soft dark sheet panels; a laser cuts round each outline on
   scroll-in (cut head + sparks, drawn by site.js), leaving a glowing kerf line in the product colour. ===== */
.products{background:radial-gradient(900px 420px at 50% 0%,#2E1663 0%,transparent 70%),var(--hz-deep)}
.products .grid-3{gap:26px}
.products .product{--a:var(--card-accent,var(--hz-purple));position:relative;isolation:isolate;border:0;border-radius:24px;padding:32px 30px 28px;
  background:radial-gradient(circle at 1px 1px,rgba(217,200,255,.10) 1px,transparent 1.5px) 0 0/18px 18px,
    radial-gradient(320px 200px at 100% 0%,color-mix(in srgb,var(--a) 22%,transparent),transparent 70%),
    linear-gradient(165deg,#2A1459 0%,#21104A 60%,#1E0E44 100%);
  box-shadow:inset 0 0 0 1px rgba(217,200,255,.10),0 24px 50px -30px rgba(0,0,0,.6);transition:transform .3s ease,box-shadow .3s ease}
.products .product:hover,.products .product:focus-visible{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(217,200,255,.16),0 30px 60px -28px color-mix(in srgb,var(--a) 55%,transparent)}
.products .product:focus-visible{outline:3px solid #D9C8FF;outline-offset:4px}
.card-mrp.product{--a:#9B6BF2}
.products .product h3{font-size:1.55rem;letter-spacing:-.01em}
.products .product .badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.07);color:#EDE6FF;border-radius:999px;padding:5px 12px 5px 10px;
  box-shadow:inset 0 0 0 1px rgba(217,200,255,.18);font-size:.76rem;letter-spacing:.04em}
.products .product .badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--a);box-shadow:0 0 0 3px color-mix(in srgb,var(--a) 30%,transparent),0 0 10px var(--a)}
.products .product .badge.soon{background:rgba(255,255,255,.92);color:var(--hz-purple)}
.products .product ul{list-style:none;padding:0;margin:4px 0 24px}
.products .product li{position:relative;padding-left:26px;margin-bottom:9px}
.products .product li::before{content:"";position:absolute;left:3px;top:.5em;width:9px;height:9px;border-radius:50%;border:2px solid var(--a);box-shadow:0 0 8px color-mix(in srgb,var(--a) 60%,transparent)}
.products .product li::after{content:"";position:absolute;left:8px;top:calc(.5em + 13px);width:2px;height:calc(100% - 4px);background:linear-gradient(var(--a),transparent);opacity:.35}
.products .product li:last-child::after{display:none}
.products .product .btn{border-radius:999px;padding:11px 22px;background:var(--a);color:#fff;box-shadow:0 10px 22px -12px var(--a)}
.products .product.soon .btn{background:transparent;color:#EDE6FF;box-shadow:inset 0 0 0 1.5px rgba(217,200,255,.5)}
.products .product .plus-note.dark{border-radius:12px}
.lc{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:-1}
.lc path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.lc .lc-guide{stroke:rgba(217,200,255,.14);stroke-width:1.2}
.lc .lc-kerf{stroke:var(--a);stroke-width:2;filter:drop-shadow(0 0 4px var(--a))}
.lc .lc-glow{stroke:#fff;stroke-width:1;opacity:.85}
.product.soon .lc .lc-kerf{stroke-dasharray:7 7}
.lc .lc-head{fill:#fff;filter:drop-shadow(0 0 6px #fff) drop-shadow(0 0 12px var(--a))}
.lc .lc-spark{fill:#FFE7C2}
/* ===== Instant Quote Front list (laser-cut v1): numbered parts on a lilac sheet, joined by a cut line a laser runs down on scroll-in ===== */
.iq .iq-list{counter-reset:iqf;position:relative;gap:14px;padding:26px 24px 26px 76px;border-radius:26px;
  background:radial-gradient(circle at 1px 1px,rgba(107,47,214,.16) 1px,transparent 1.5px) 0 0/18px 18px,linear-gradient(160deg,#FFFFFF 0%,#F7F2FF 100%);
  box-shadow:inset 0 0 0 1.5px #D9C8FF,0 26px 50px -34px rgba(107,47,214,.45)}
.iq .iq-list::before{content:"";position:absolute;left:43px;top:44px;bottom:44px;width:3px;border-radius:3px;background:repeating-linear-gradient(to bottom,#D9C8FF 0 6px,transparent 6px 11px)}
.iq .iq-list::after{content:"";position:absolute;left:42px;top:44px;width:5px;border-radius:5px;height:calc((100% - 88px) * var(--lp,1));
  background:linear-gradient(to bottom,var(--hz-purple),#9B6BF2);box-shadow:0 0 10px rgba(107,47,214,.55)}
.iq .iq-list li{counter-increment:iqf;border:0;border-radius:18px;background:#fff;padding:16px 18px 16px 20px;
  box-shadow:inset 0 0 0 1px #E6DBFF,0 12px 26px -22px rgba(27,11,59,.45);transition:transform .4s ease,box-shadow .4s ease,opacity .5s ease}
.iq .iq-list li::before{content:counter(iqf,decimal-leading-zero);position:absolute;left:-52px;top:50%;width:34px;height:34px;margin-top:-17px;border-radius:50%;
  display:grid;place-items:center;font-size:.78rem;font-weight:800;letter-spacing:.02em;color:var(--hz-purple);background:#fff;
  box-shadow:inset 0 0 0 2px #D9C8FF;transition:background .3s,color .3s,box-shadow .3s;z-index:1}
.iq .iq-list li.lit::before{background:var(--hz-purple);color:#fff;box-shadow:0 0 0 4px rgba(107,47,214,.18),0 0 14px rgba(107,47,214,.6)}
.iq .iq-list li:nth-child(2){border-left:0}
.iq .iq-list li:nth-child(2).lit::before{background:linear-gradient(135deg,var(--tq-accent) 0 50%,var(--fq-accent) 50% 100%)}
.iq .iq-list li:nth-child(2)::before{background:#fff}
.iq .iq-list li:nth-child(2) {box-shadow:inset 0 0 0 1px #E6DBFF,inset 4px 0 0 0 transparent,0 12px 26px -22px rgba(27,11,59,.45)}
.iq-laser{position:absolute;left:44.5px;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;pointer-events:none;
  box-shadow:0 0 0 3px rgba(155,107,242,.55),0 0 14px 4px rgba(107,47,214,.75),0 0 30px 8px rgba(242,118,27,.25);opacity:0;transition:opacity .3s}
.js-anim .iq .iq-list li:not(.lit){opacity:.55;transform:translateX(8px)}
@media (max-width:600px){.iq .iq-list{padding:20px 14px 20px 62px}.iq .iq-list::before{left:33px}.iq .iq-list::after{left:32px}.iq-laser{left:34.5px}.iq .iq-list li::before{left:-48px;width:30px;height:30px;margin-top:-15px}}
@media (prefers-reduced-motion:reduce){.products .product,.iq .iq-list li{transition:none!important;transform:none!important}.iq-laser{display:none}}
/* IQF list fix (20 Oct 2026): each number dot is a flex child of its own part, centred on it by align-items,
   and placed on the cut line by margins. No fixed vertical offsets, no horizontal nudge, no overflow. */
.iq-grid>*{min-width:0}
@media (max-width:900px){.iq-grid{grid-template-columns:minmax(0,1fr)}}
.iq .iq-list{--pl:76px;--line:44.5px;--d:34px;--lip:20px;box-sizing:border-box;max-width:100%;padding-left:var(--pl)}
.iq .iq-list li{display:flex;align-items:center;box-sizing:border-box;min-width:0;max-width:100%;padding-left:var(--lip);overflow-wrap:anywhere}
.iq .iq-list li::before{position:static;flex:none;top:auto;left:auto;margin:0;width:var(--d);height:var(--d);
  margin-left:calc(var(--line) - var(--d)/2 - var(--pl) - var(--lip));margin-right:calc(var(--pl) + var(--lip) - var(--line) - var(--d)/2)}
.js-anim .iq .iq-list li:not(.lit){transform:none}
@media (max-width:600px){.iq .iq-list{--pl:62px;--line:34.5px;--d:30px;padding:20px 14px 20px var(--pl)}.iq .iq-list li::before{left:auto;margin-top:0}}
/* IQF layering fix: the cut line, its fill and the laser head always pass BEHIND the solid number circles */
.iq .iq-list{isolation:isolate}
.iq .iq-list::before{z-index:0}
.iq .iq-list::after{z-index:1}
.iq-laser{z-index:2}
.iq .iq-list li{position:relative;z-index:3}
.iq .iq-list li::before{background-color:#fff}
.iq .iq-list li.lit::before{background-color:var(--hz-purple)}
/* keep circles fully opaque while unlit: fade the text and box instead of the whole item */
.js-anim .iq .iq-list li:not(.lit){opacity:1;color:rgba(27,11,59,.5);background-color:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1.5px rgba(217,200,255,.6)}
.js-anim .iq .iq-list li:not(.lit)::before{background:#fff;color:#B79AF5}
/* ===================== Site-wide soft "sheet" family (v1, 20 Oct 2026) =====================
   Soft rounded lilac panels with a faint cutting-bed dot grid, a rounded zip seam along the top edge
   (purple/lilac teeth, slider in the product colour), dotted pierce-line separators instead of dashed rules,
   a soft dashed inner "planned cut" outline for coming-soon/Plus items, and a laser cut line (site.js) that
   traces round the main cards on scroll-in. Product colours are accents only. */
:root{--sheet-ring:#D9C8FF;--sheet-bg:radial-gradient(circle at 1px 1px,rgba(107,47,214,.11) 1px,transparent 1.5px) 0 0/18px 18px,linear-gradient(165deg,#FFFFFF 0%,#FFFFFF 45%,#F6F1FF 100%);
  --sheet-shadow:0 2px 4px rgba(107,47,214,.05),0 22px 44px -26px rgba(107,47,214,.38)}
.tier,.price,.demo-form,.demo-out,.addon,.panel,.tile,.step,.feature-list li{border:0!important;border-radius:24px;background:var(--sheet-bg);
  box-shadow:inset 0 0 0 1.5px var(--sheet-ring),var(--sheet-shadow);position:relative;isolation:isolate}
.card-tq,.theme-tq{--a:var(--tq-accent)}.card-fq,.theme-fq{--a:var(--fq-accent)}.card-mrp{--a:var(--hz-purple)}
.demo-out{--a:var(--accent,var(--hz-purple))}
/* zip seam along the top edge, with a slider pill in the product colour */
.tier::after,.price::after,.demo-out::after,.addon::after{content:"";position:absolute;left:28px;right:28px;top:-3px;height:7px;pointer-events:none;border-radius:4px;
  background:radial-gradient(3px 3.2px at 25% 50%,var(--hz-purple) 95%,transparent 100%) 0 0/8px 7px,radial-gradient(3px 3.2px at 75% 50%,#B79AF5 95%,transparent 100%) 0 0/8px 7px}
.tier::before,.price::before,.demo-out::before,.addon::before{content:"";position:absolute;left:20px;top:-6px;width:26px;height:13px;border-radius:7px;z-index:1;
  background:var(--a,var(--hz-purple));box-shadow:0 3px 8px -3px rgba(27,11,59,.4),inset 0 0 0 3px rgba(255,255,255,.35)}
/* coming soon / Plus: soft dashed inner planned-cut line instead of a dashed border */
.tier.plus,.price.soon,.plus-opt,.addon{outline:1.5px dashed color-mix(in srgb,var(--a,var(--hz-purple)) 55%,transparent);outline-offset:-9px}
.tier.plus,.price.soon{background:radial-gradient(260px 160px at 100% 0%,color-mix(in srgb,var(--a) 12%,transparent),transparent 70%),var(--sheet-bg)}
.tier.plus::before,.price.soon::before{background:#fff;box-shadow:inset 0 0 0 2px var(--a),0 3px 8px -3px rgba(27,11,59,.3)}
.price.bundle{background:radial-gradient(320px 200px at 100% 0%,rgba(107,47,214,.12),transparent 70%),var(--sheet-bg);box-shadow:inset 0 0 0 2px #B79AF5,0 26px 50px -24px rgba(107,47,214,.45)}
.price.bundle .flag,.flag.soon-flag,.tier .soon-flag{border-radius:999px;box-shadow:0 6px 14px -6px rgba(27,11,59,.45)}
.plus-opt{border:0!important;border-radius:18px;background:linear-gradient(160deg,#fff,#F3EEFF);box-shadow:inset 0 0 0 1.5px #E6DBFF}
/* dotted pierce-line separators */
.price .opt,.price .split,.price .yearly,.price .tbc-box{border-top:0!important;background:radial-gradient(circle,#C9B3FF 1.3px,transparent 1.6px) 0 0/9px 3px repeat-x}
.breakdown td{border-bottom:0!important;background:radial-gradient(circle,#D9C8FF 1.2px,transparent 1.5px) 0 100%/8px 3px repeat-x}
.breakdown .tot td{font-weight:800;color:var(--hz-deep)}
.tier h3,.price h3{letter-spacing:-.01em}
.tier ul{list-style:none;padding-left:0}
.tier li{position:relative;padding-left:24px}
.tier li::before{content:"";position:absolute;left:2px;top:.5em;width:9px;height:9px;border-radius:50%;border:2px solid var(--a);box-shadow:0 0 6px color-mix(in srgb,var(--a) 45%,transparent)}
.tier-price{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:8px 16px;box-shadow:inset 0 0 0 1.5px #D9C8FF}
.tier-price::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--a)}
/* demo calculator */
.demo-form{padding:28px}
.demo-form input,.demo-form select{border:0;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1.5px #E1D5FB;transition:box-shadow .2s}
.demo-form input:focus,.demo-form select:focus{outline:none;box-shadow:inset 0 0 0 2px var(--accent),0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}
.demo-out{padding:30px 28px 24px}
.kpis div{position:relative;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1.5px #E6DBFF;padding:14px 14px 12px 30px}
.kpis div::before{content:"";position:absolute;left:12px;top:19px;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.kpis b{color:var(--hz-deep)}
.viz svg{border-radius:12px;background:#F1EBFF}
.demo-badge{border-radius:999px}
/* add-on strip and other generic boxes */
.addon{padding:24px 30px}
.feature-list li{padding:20px 22px 20px 56px}
.feature-list li::before{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent,var(--hz-purple)) 20%,transparent),0 0 10px color-mix(in srgb,var(--accent,var(--hz-purple)) 50%,transparent)}
.tile,.step,.panel{padding:30px 28px}
.tile .ico{border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1.5px #E6DBFF}
.shot-panel figure,.page-hero .shot{border:0!important;border-radius:20px;box-shadow:inset 0 0 0 1.5px #D9C8FF,0 26px 50px -30px rgba(107,47,214,.45)}
.tabs button{border:0;border-radius:999px;box-shadow:inset 0 0 0 1.5px #E1D5FB}
.thanks{border:0;border-radius:24px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1.5px rgba(217,200,255,.45),0 20px 40px -24px rgba(0,0,0,.4)}
/* laser cut line on the light cards (drawn by site.js, same as the home page tools section) */
.tier .lc .lc-guide,.price .lc .lc-guide,.demo-out .lc .lc-guide{stroke:transparent}
.tier .lc .lc-kerf,.price .lc .lc-kerf,.demo-out .lc .lc-kerf{stroke-width:2;filter:drop-shadow(0 0 3px color-mix(in srgb,var(--a) 60%,transparent))}
.tier .lc .lc-glow,.price .lc .lc-glow,.demo-out .lc .lc-glow{stroke:#fff;stroke-width:1.2}
.tier .lc .lc-spark,.price .lc .lc-spark,.demo-out .lc .lc-spark{fill:var(--fq-accent)}
.tier .lc .lc-head,.price .lc .lc-head,.demo-out .lc .lc-head{filter:drop-shadow(0 0 4px var(--a)) drop-shadow(0 0 9px var(--a))}
.price.soon .lc .lc-kerf,.tier.plus .lc .lc-kerf{stroke-dasharray:7 7}
@media (max-width:600px){.tier::after,.price::after,.demo-out::after,.addon::after{left:22px;right:22px}.kpis div{padding-left:28px}}
/* flags sit above the zip seam and slider */
.price .flag,.tier .flag,.tier .soon-flag,.price .soon-flag{z-index:3}
/* ===================== Feature spotlights (21 Oct 2026 build) ===================== */
.feat{--a:var(--hz-purple)}.feat.theme-tq,.spot.theme-tq{--a:var(--tq-accent)}.feat.theme-fq,.spot.theme-fq{--a:var(--fq-accent)}
.spot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:26px}
#inside .spot-grid{grid-template-columns:1fr 1fr}
.spot{position:relative;isolation:isolate;border-radius:24px;padding:22px 24px 24px;background:var(--sheet-bg);box-shadow:inset 0 0 0 1.5px var(--sheet-ring),var(--sheet-shadow);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.spot.wide{grid-column:span 2}
.spot::after{content:"";position:absolute;left:28px;right:28px;top:-3px;height:7px;border-radius:4px;pointer-events:none;background:radial-gradient(3px 3.2px at 25% 50%,var(--hz-purple) 95%,transparent 100%) 0 0/8px 7px,radial-gradient(3px 3.2px at 75% 50%,#B79AF5 95%,transparent 100%) 0 0/8px 7px;clip-path:inset(0 100% 0 0 round 4px);transition:clip-path .9s cubic-bezier(.2,.8,.2,1)}
.spot::before{content:"";position:absolute;left:20px;top:-6px;width:26px;height:13px;border-radius:7px;z-index:1;background:var(--a);box-shadow:0 3px 8px -3px rgba(27,11,59,.4),inset 0 0 0 3px rgba(255,255,255,.35);transition:left .9s cubic-bezier(.2,.8,.2,1)}
.spot:hover,.spot:focus-within{transform:translateY(-4px);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--a) 55%,#D9C8FF),0 30px 54px -28px rgba(107,47,214,.5)}
.spot:hover::after,.spot.in::after{clip-path:inset(0 0 0 0 round 4px)}
.spot h3{margin:14px 0 6px;color:var(--hz-deep);letter-spacing:-.01em}.spot p{margin:0;color:#4A3B6B}
.spot .more{display:inline-block;margin-top:12px;font-weight:700;color:var(--a)}
.spot-art{min-height:96px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1.5px #E6DBFF;padding:12px 14px;display:flex;flex-direction:column;justify-content:center;gap:8px;overflow:hidden}
.spot-art svg{width:100%;height:auto;display:block}
.spot-art .bar{fill:#F1EBFF;stroke:#D9C8FF;stroke-width:1.5}.spot-art .brd{fill:#E6DBFF}
.spot-art .pt path{fill:color-mix(in srgb,var(--a) 22%,#fff);stroke:var(--a);stroke-width:2;stroke-linejoin:round}
.spot-art .u{font:700 12px Inter,system-ui,sans-serif;fill:var(--hz-deep);text-anchor:middle}
.spot-art .ub{fill:#F1EBFF}.spot-art .uf{fill:var(--a)}
.spot-art .sheet{fill:#F6F1FF;stroke:#D9C8FF;stroke-width:1.5}
.spot-art .hole *{fill:#fff;stroke:var(--a);stroke-width:1.8;stroke-dasharray:4 3}
.spot-art .iso path,.spot-art .iso ellipse{fill:color-mix(in srgb,var(--a) 14%,#fff);stroke:var(--a);stroke-width:2;stroke-linejoin:round}
.spot-art .file rect{fill:#F3EEFF;stroke:var(--hz-purple);stroke-width:1.8}.spot-art .file text{font:800 12px Inter,system-ui,sans-serif;fill:var(--hz-purple);text-anchor:middle}
.sw{display:inline-flex;align-self:flex-start;background:#F3EEFF;border-radius:999px;padding:3px;font-size:.78rem;font-weight:700}
.sw span{padding:4px 12px;border-radius:999px;color:#6E5C95}.sw .on{background:var(--a);color:#fff;box-shadow:0 4px 10px -4px var(--a)}
.jump{display:flex;align-items:baseline;gap:12px;font-size:2rem;font-weight:800;color:#9C8BC0;letter-spacing:-.02em}
.jump .hi{color:var(--a)}.jump .arr{font-size:1.3rem;color:var(--hz-purple)}
.cap{margin:0!important;font-size:.8rem;color:#6E5C95!important}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:5px 11px;font-size:.8rem;font-weight:700;background:#fff;color:var(--hz-deep);box-shadow:inset 0 0 0 1.5px #E1D5FB}
.chip i{font-style:normal;font-weight:600;font-size:.7rem;color:var(--a)}
.chip.st{box-shadow:inset 0 0 0 2px var(--a);background:color-mix(in srgb,var(--a) 8%,#fff)}
.chip.ghost{box-shadow:inset 0 0 0 1.5px #C9B3FF;background:transparent;color:var(--hz-purple);outline:1.5px dashed transparent}
.chip.sm{align-self:flex-start;font-size:.72rem;padding:3px 10px}
.chip.ly::before{content:"";width:9px;height:9px;border-radius:50%}
.ly.cut::before{background:var(--a)}.ly.fold::before{background:var(--hz-purple)}.ly.etch::before{background:#2BB673}.ly.ign::before{background:#C9C2D9}
.ctab{border-collapse:collapse;font-size:.75rem;width:100%}
.ctab th{color:#6E5C95;font-weight:700;text-align:center}.ctab td{text-align:center;color:var(--a);font-weight:800;padding:2px 0}
.ctab td:first-child{text-align:left;color:var(--hz-deep);font-weight:600}
.dims{display:flex;flex-wrap:wrap;gap:6px;font-size:.78rem}
.dims span{border-radius:10px;background:#F6F1FF;padding:4px 9px;color:#4A3B6B}.dims b{color:var(--hz-deep)}
.dims .ok{background:color-mix(in srgb,#2BB673 14%,#fff);color:#1A7A4A;font-weight:700}
.say{display:flex;align-items:center;gap:10px}
.say q{flex:1;border-radius:14px 14px 14px 4px;background:#F3EEFF;padding:8px 12px;font-size:.88rem;color:var(--hz-deep);font-weight:600;quotes:"\201C" "\201D"}
.mic{flex:none;width:30px;height:30px;border-radius:50%;background:var(--a);box-shadow:0 0 0 5px color-mix(in srgb,var(--a) 18%,transparent);position:relative}
.mic::after{content:"";position:absolute;left:11px;top:7px;width:8px;height:12px;border-radius:5px;background:#fff}
.both{position:relative;border-radius:24px;padding:22px 26px;margin-top:6px;background:linear-gradient(140deg,#F3EEFF,#fff 60%);box-shadow:inset 0 0 0 1.5px #D9C8FF;outline:1.5px dashed rgba(107,47,214,.28);outline-offset:-9px}
.both h3{display:flex;align-items:center;gap:6px;margin:0 0 12px;color:var(--hz-deep)}
.both .dot{width:10px;height:10px;border-radius:50%}.both .dot.tq{background:var(--tq-accent)}.both .dot.fq{background:var(--fq-accent);margin-right:6px}
.both ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 22px}
.both li{position:relative;padding-left:20px;color:#4A3B6B;font-size:.92rem}
.both li::before{content:"";position:absolute;left:0;top:.45em;width:9px;height:9px;border-radius:50%;border:2px solid var(--hz-purple)}
.both strong{display:block;color:var(--hz-deep)}
@media (max-width:900px){.spot-grid,#inside .spot-grid{grid-template-columns:1fr}.spot.wide{grid-column:auto}}
@media (prefers-reduced-motion:reduce){.spot,.spot::after,.spot::before{transition:none}.spot:hover{transform:none}.spot::after{clip-path:none}}
.spot-art svg{max-height:120px}.spot.wide .spot-art{align-items:stretch}
.spot-grid{grid-auto-flow:row dense}
/* nesting mode switch (Box / True shape) */
.sw button{font:inherit;border:0;background:none;cursor:pointer;padding:4px 12px;border-radius:999px;color:#6E5C95}
.sw button.on{background:var(--a);color:#fff;box-shadow:0 4px 10px -4px var(--a)}
.sw button:focus-visible{outline:2px solid var(--a);outline-offset:2px}
.spot-art .bb{fill:none;stroke:#B79AF5;stroke-width:1.2;stroke-dasharray:3 3}
.nest[data-mode="true"] .m-box,.nest[data-mode="box"] .m-true{display:none}
/* unlimited quotes line (21 Oct 2026) */
.unl{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;margin:10px 0 4px;padding:5px 12px 5px 6px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px #D9C8FF;font-size:.85rem;font-weight:700;color:var(--hz-deep)}
.unl.sm{margin:6px 0;font-size:.78rem}
.unl-ico{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--a,var(--hz-purple));color:#fff;font-size:15px;line-height:1;font-weight:800}
.unl-intro{display:inline-flex;align-items:center;gap:10px;margin:4px 0 18px;padding:8px 16px 8px 8px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px #D9C8FF,0 10px 24px -16px rgba(107,47,214,.5);color:#4A3B6B}
.unl-intro strong{color:var(--hz-deep)}
.unl-intro .unl-ico{width:26px;height:26px;background:var(--hz-purple)}
.tier .unl{margin:4px 0 12px}
@media (max-width:600px){.unl-intro{border-radius:18px;align-items:flex-start}}
/* Plus tiers dropped (21 Oct 2026): single full-width tier card, two-card pricing grid at full width */
#tiers .tier-grid{grid-template-columns:1fr}
#tiers .tier{display:grid;grid-template-columns:1fr auto;column-gap:32px;align-items:end;padding:30px 32px}
#tiers .tier h3,#tiers .tier .for,#tiers .tier ul{grid-column:1/-1}
#tiers .tier ul{columns:3;column-gap:32px}#tiers .tier li{break-inside:avoid}
#tiers .tier .unl{grid-column:1;justify-self:start;margin:6px 0 0}#tiers .tier .tier-price{grid-column:2;margin:0}
.price-grid:has(>.price:nth-child(2):last-child){grid-template-columns:1fr 1fr}
@media (max-width:900px){#tiers .tier ul{columns:2}.price-grid:has(>.price:nth-child(2):last-child){grid-template-columns:1fr}}
@media (max-width:600px){#tiers .tier{grid-template-columns:1fr}#tiers .tier ul{columns:1}#tiers .tier .tier-price{grid-column:1;margin-top:10px}}
/* Zip Manager (21 Oct 2026) */
.zm-ico{background:var(--hz-purple)!important;position:relative}
.zm-ico::before{content:"";position:absolute;inset:6px 5px;border-radius:2px;background:radial-gradient(circle,#fff 1.4px,transparent 1.7px) 0 0/4px 4px repeat-y;width:4px;left:9px}
.unl.zm{margin-top:4px}
.spot.full{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:center}
.spot.full h3{margin-top:0}
.zm-flow{list-style:none;margin:0;padding:6px 0 2px;display:flex;position:relative}
.zm-flow::before{content:"";position:absolute;left:12px;right:12px;top:15px;height:7px;border-radius:4px;background:radial-gradient(3px 3.2px at 25% 50%,#D9C8FF 95%,transparent 100%) 0 0/8px 7px,radial-gradient(3px 3.2px at 75% 50%,#E9E0FF 95%,transparent 100%) 0 0/8px 7px}
.zm-flow::after{content:"";position:absolute;left:12px;width:58%;top:15px;height:7px;border-radius:4px;background:radial-gradient(3px 3.2px at 25% 50%,var(--hz-purple) 95%,transparent 100%) 0 0/8px 7px,radial-gradient(3px 3.2px at 75% 50%,#B79AF5 95%,transparent 100%) 0 0/8px 7px}
.zm-flow li{flex:1;position:relative;z-index:1;padding-top:28px;font-size:.78rem;font-weight:700;color:#8C7BB0;text-align:center}
.zm-flow li::before{content:"";position:absolute;top:8px;left:50%;margin-left:-10px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px #D9C8FF}
.zm-flow li.done{color:var(--hz-deep)}.zm-flow li.done::before{background:var(--hz-purple);box-shadow:0 0 0 4px rgba(107,47,214,.15)}
.zm-flow li.now{color:var(--hz-purple)}.zm-flow li.now::before{width:28px;height:14px;top:11px;margin-left:-14px;border-radius:7px;background:var(--hz-purple);box-shadow:0 4px 10px -3px rgba(27,11,59,.45),inset 0 0 0 3px rgba(255,255,255,.35)}
#tiers .tier .unl.zm{grid-column:1;margin-top:6px}
@media (max-width:900px){.spot.full{grid-template-columns:1fr;gap:14px}}
@media (max-width:420px){.zm-flow li{font-size:.7rem}}
/* plan pills row + promise section (21 Oct 2026) */
.pills{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 6px}
.pills .unl{margin:0;font-size:.78rem;padding:4px 10px 4px 5px}
.pills .unl-ico{width:20px;height:20px;font-size:13px}
#tiers .tier .pills{grid-column:1;align-self:end;margin:6px 0 0}
.usr-ico::before,.usr-ico::after{content:"";position:absolute;background:#fff}
.usr-ico{position:relative}.usr-ico::before{width:6px;height:6px;border-radius:50%;left:50%;top:4px;margin-left:-3px}
.usr-ico::after{width:11px;height:5px;border-radius:6px 6px 2px 2px;left:50%;bottom:4px;margin-left:-5.5px}
.free-ico{position:relative}.free-ico::before{content:"";position:absolute;width:9px;height:7px;border-radius:2px;background:#fff;left:50%;margin-left:-4.5px;bottom:4px}
.free-ico::after{content:"";position:absolute;width:6px;height:7px;border:2px solid #fff;border-bottom:0;border-radius:5px 5px 0 0;left:50%;margin-left:-1px;top:3px}
.promise{padding:56px 0 0}
.promise-card{position:relative;isolation:isolate;overflow:hidden;border-radius:28px;padding:44px 48px;color:#fff;
  background:radial-gradient(520px 260px at 100% 0%,rgba(183,154,245,.45),transparent 70%),linear-gradient(140deg,#6B2FD6 0%,#4A1FA3 55%,#1B0B3B 100%);
  box-shadow:0 30px 60px -30px rgba(27,11,59,.6)}
.promise-card::before{content:"";position:absolute;left:0;right:0;top:0;height:9px;background:radial-gradient(3.5px 4px at 25% 50%,#fff 95%,transparent 100%) 0 0/10px 9px,radial-gradient(3.5px 4px at 75% 50%,#D9C8FF 95%,transparent 100%) 0 0/10px 9px;opacity:.55}
.promise-card::after{content:"";position:absolute;right:-60px;bottom:-60px;width:260px;height:260px;border-radius:50%;border:2px dashed rgba(217,200,255,.35);z-index:-1}
.promise .eyebrow{color:#D9C8FF}
.promise h2{color:#fff;font-size:clamp(1.8rem,4vw,2.9rem);line-height:1.08;letter-spacing:-.02em;margin:8px 0 14px;max-width:16em}
.promise p{color:#EDE6FF;max-width:44em;font-size:1.05rem;margin:0 0 22px}
.promise-pts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.promise-pts li{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:7px 14px 7px 10px;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1.5px rgba(217,200,255,.4);font-weight:700;font-size:.88rem}
.promise-pts li::before{content:"";width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.25)}
@media (max-width:600px){.promise{padding-top:36px}.promise-card{padding:30px 22px;border-radius:22px}}
.promise h2{max-width:none;text-wrap:balance}
/* ===================== Instant Quote Front storefront showcase (22 Oct 2026 draft) ===================== */
.sf{--a:var(--hz-purple);position:relative;overflow:hidden;background:radial-gradient(900px 420px at 85% 10%,rgba(183,154,245,.35),transparent 70%),linear-gradient(180deg,#F6F1FF,#fff 70%)}
.sf.theme-tq{--a:var(--tq-accent)}.sf.theme-fq{--a:var(--fq-accent)}
.sf::before{content:"";position:absolute;left:0;right:0;top:0;height:9px;background:radial-gradient(3.5px 4px at 25% 50%,var(--hz-purple) 95%,transparent 100%) 0 0/10px 9px,radial-gradient(3.5px 4px at 75% 50%,#B79AF5 95%,transparent 100%) 0 0/10px 9px;opacity:.5}
.sf-stage{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:start}
.sf-shots{position:relative;padding:28px 40px 70px 0;min-height:420px}
.sf-shots figure{margin:0;border-radius:18px;overflow:hidden;background:#fff}
.sf-shots img{display:block;width:100%;height:auto}
.sf-main{position:relative;z-index:2;box-shadow:0 0 0 1.5px #D9C8FF,0 40px 70px -34px rgba(27,11,59,.55);transform:rotate(-1.2deg);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.sf-bar{display:flex;gap:6px;padding:10px 14px;background:linear-gradient(90deg,#F3EEFF,#fff);border-bottom:1.5px solid #E6DBFF}
.sf-bar i{width:9px;height:9px;border-radius:50%;background:#D9C8FF}.sf-bar i:first-child{background:var(--a)}
.sf-back{position:absolute;z-index:1;right:0;top:0;width:62%;opacity:.95;transform:rotate(4deg) translate(10px,-6px);box-shadow:0 30px 60px -30px rgba(27,11,59,.6);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.sf-float{position:absolute;z-index:3;right:6px;bottom:0;width:52%;box-shadow:0 0 0 1.5px #D9C8FF,0 26px 50px -22px rgba(27,11,59,.5);transform:rotate(1.5deg);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.sf-stage:hover .sf-main{transform:rotate(0) translateY(-4px)}.sf-stage:hover .sf-back{transform:rotate(6deg) translate(22px,-12px)}.sf-stage:hover .sf-float{transform:rotate(0) translateY(-6px)}
.sf-steps{list-style:none;margin:0 0 22px;padding:16px 14px 12px;display:flex;position:relative;border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1.5px #E6DBFF,0 14px 30px -22px rgba(107,47,214,.45)}
.sf-steps::before,.sf-steps::after{content:"";position:absolute;left:34px;right:34px;top:25px;height:7px;border-radius:4px;background:radial-gradient(3px 3.2px at 25% 50%,#D9C8FF 95%,transparent 100%) 0 0/8px 7px,radial-gradient(3px 3.2px at 75% 50%,#EDE5FF 95%,transparent 100%) 0 0/8px 7px}
.sf-steps::after{right:auto;width:calc(50% - 34px);background:radial-gradient(3px 3.2px at 25% 50%,var(--hz-purple) 95%,transparent 100%) 0 0/8px 7px,radial-gradient(3px 3.2px at 75% 50%,#B79AF5 95%,transparent 100%) 0 0/8px 7px}
.sf-steps li{flex:1;position:relative;z-index:1;padding-top:26px;text-align:center;font-size:.76rem;font-weight:700;color:#8C7BB0}
.sf-steps li::before{content:"";position:absolute;top:2px;left:50%;margin-left:-10px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px #D9C8FF}
.sf-steps li.done{color:var(--hz-deep)}.sf-steps li.done::before{background:var(--hz-purple);box-shadow:0 0 0 4px rgba(107,47,214,.14)}
.sf-steps li.now{color:var(--hz-purple)}.sf-steps li.now::before{width:30px;height:15px;top:5px;margin-left:-15px;border-radius:8px;background:var(--a);box-shadow:0 4px 10px -3px rgba(27,11,59,.45),inset 0 0 0 3px rgba(255,255,255,.35);animation:sfPulse 2.4s ease-in-out infinite}
@keyframes sfPulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--a) 20%,transparent),inset 0 0 0 3px rgba(255,255,255,.35)}}
.sf-feats{list-style:none;margin:0 0 22px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sf-feats li{position:relative;padding:14px 14px 14px 46px;border-radius:18px;background:var(--sheet-bg);box-shadow:inset 0 0 0 1.5px #E6DBFF;font-size:.86rem;color:#4A3B6B;line-height:1.45}
.sf-feats strong{display:block;color:var(--hz-deep);font-size:.92rem;margin-bottom:2px}
.sf-ico{position:absolute;left:14px;top:15px;width:22px;height:22px;border-radius:8px;background:var(--hz-purple);box-shadow:0 6px 12px -6px var(--hz-purple)}
.sf-ico::after{content:"";position:absolute;inset:7px;border-radius:50%;background:#fff}
.sf-stepf .sf-ico,.sf-pay .sf-ico,.sf-lead .sf-ico,.sf-track .sf-ico{background:var(--a);box-shadow:0 6px 12px -6px var(--a)}
.sf-start .sf-ico::after{border-radius:2px;inset:6px 6px 9px}
.sf-theme .sf-ico{background:linear-gradient(135deg,#fff 50%,#1B0B3B 50%);box-shadow:inset 0 0 0 2px var(--hz-purple)}.sf-theme .sf-ico::after{display:none}
@media (max-width:1000px){.sf-stage{grid-template-columns:1fr}.sf-shots{padding-right:24px}}
@media (max-width:600px){.sf-feats{grid-template-columns:1fr}.sf-float{width:70%}.sf-shots{padding:12px 12px 56px 0;min-height:0}.sf-steps li{font-size:.66rem}.sf-steps::before,.sf-steps::after{left:24px;right:24px}.sf-steps::after{right:auto;width:calc(50% - 24px)}}
@media (prefers-reduced-motion:reduce){.sf-steps li.now::before{animation:none}.sf-main,.sf-back,.sf-float{transition:none}}