/* HERIO site, final look (17 Oct 2026): direction C (gold bar, dark logo band, big bold headings)
   with B's floating product, relief, route, pricing cards and compass closing, and A's gold glow and gold buttons.
   Loaded after site.css. Brand colours still come from /herio-tokens.css. */
:root{--bg:#F1F1EF;--bg2:#E5E5E2;--char:#1F1F1F;--gold-big:#8A7240;--gold-ink:#7D6838;--line-c:#DEDDD9;--hd:76px}
html{scroll-padding-top:92px}
body{background:var(--bg);color:#232323;font-family:"Inter",system-ui,sans-serif;font-size:17px;line-height:1.55}
h1,h2,h3,h4,.facts b,.ti-price b,.ti-name,.stn b,.yr-giant b,.pc-title,.st-h b,.an-lead,.pa-txt b,.hc-top b,.film-cap b{font-family:var(--font)}
main{position:relative;z-index:1}
.wrap{position:relative;z-index:1}
.foot{position:relative;z-index:1}

/* ---------- relief and route (B, calmer) ---------- */
.topo{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.topo img{width:100%;height:100%;max-width:none;object-fit:cover;animation:relief 180s ease-in-out infinite alternate}
@keyframes relief{from{transform:scale(1.04)}to{transform:scale(1.08) translate(-1%,.8%) rotate(1deg)}}
.route{position:absolute;left:0;top:0;width:100%;z-index:0;pointer-events:none;overflow:visible}
.route path{fill:none}
.route-base{stroke:rgba(125,104,56,.16);stroke-width:1;stroke-dasharray:2 8}
.route-line{stroke:rgba(178,151,96,.42);stroke-width:1.1;stroke-linecap:round}
.route .city circle{fill:var(--bg);stroke:rgba(178,151,96,.7);stroke-width:1.4;transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.route .city text{font:600 10.5px/1 "Inter",sans-serif;letter-spacing:.18em;text-transform:uppercase;fill:rgba(125,104,56,.7);opacity:0;transition:opacity .8s .2s}
.route .city.on circle{transform:scale(1)}
.route .city.on text{opacity:1}
.route .city.dark circle{fill:var(--char)}
.route .city.dark text{fill:rgba(178,151,96,.8)}

/* ---------- type (C) ---------- */
em{color:var(--gold-big)}
.kicker{font:700 12.5px/1.35 "Inter",sans-serif;letter-spacing:.2em;color:#232323}
.kicker::before{width:28px;height:6px;border-radius:2px;background:var(--accent)}
.night .kicker,.fd-copy .kicker{color:var(--accent)}
.h2{margin-top:20px;font-size:clamp(40px,5.4vw,84px);line-height:.95;letter-spacing:-.055em;font-weight:800;max-width:15ch}
.h2-wide{max-width:18ch}
.h2 em,.h-hero em{color:var(--gold-big);background:none}
.sec-head{margin-bottom:64px}
.lead{color:#45433F}

/* ---------- buttons: A's gold primary, never dimmed ---------- */
.btn{font-family:"Inter",system-ui,sans-serif;height:54px;font-size:16px}
.btn-sm{height:44px;font-size:15px}
.btn-gold{background:var(--accent);color:#1C1C1C;box-shadow:0 14px 34px -16px rgba(178,151,96,.8)}
.btn-gold svg{color:#1C1C1C}
.btn-gold:hover{background:#C2A76F;box-shadow:0 16px 36px -12px rgba(178,151,96,.8)}
.btn-gold:hover svg,.btn-ink:hover svg{transform:translateX(4px)}
.btn svg{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.btn-ink{background:#262626;color:#fff}
.btn-ghost{box-shadow:inset 0 0 0 1.5px #BDBBB5;color:var(--char)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--char)}
.btn-line{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.sample{background:transparent}

/* ---------- header: the gold bar (C) ---------- */
.nav{background:var(--accent);color:var(--char);border-bottom:0;-webkit-backdrop-filter:none;backdrop-filter:none;transition:box-shadow .35s}
.nav.scrolled{box-shadow:0 1px 0 rgba(0,0,0,.12),0 18px 40px -22px rgba(0,0,0,.45)}
.nav-in{height:var(--hd);gap:36px}
.nav .logo .ink{fill:var(--char)}
.nav .logo .ring{stroke:#fff}
.nav .logo .needle{fill:#fff}
.compass{transform-box:fill-box;transform-origin:center}
.nav-links{flex:1;justify-content:center;gap:28px;font-family:"Inter",sans-serif;font-size:15px;font-weight:600}
.nav-links a{padding:8px 0;color:var(--char)}
.nav-links a:hover{color:var(--char)}
.nav-links a::after,.nav-links a[aria-current="true"]::after{content:"";position:absolute;left:0;right:0;bottom:1px;height:2px;border-radius:0;background:var(--char);transform:scaleX(0);transform-origin:right;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.nav-links a:hover::after,.nav-links a[aria-current="true"]::after{transform:scaleX(1);transform-origin:left}
.nav-right{margin-left:0;gap:18px}
.nav-signin{font-family:"Inter",sans-serif;font-size:15px;color:var(--char)}
.nav-signin:hover{color:var(--char);text-decoration:underline;text-underline-offset:4px}
.nav .lang{background:rgba(31,31,31,.1)}
.nav .lang button{color:var(--char)}
.nav .lang button[aria-pressed="true"]{background:var(--char);color:#fff}
.nav .btn-ink:hover{background:#111;box-shadow:0 12px 26px -12px rgba(0,0,0,.55)}
.burger{box-shadow:inset 0 0 0 1.5px var(--char)}
.burger span{background:var(--char)}
.menu{height:calc(100dvh - var(--hd));background:var(--accent);color:var(--char)}
.menu-links a{border-bottom:1px solid rgba(0,0,0,.14)}
.menu-links i{color:var(--char)}
.menu .lang-dark{background:rgba(31,31,31,.1)}
.menu .lang-dark button{color:var(--char)}
.menu .lang-dark button[aria-pressed="true"]{background:var(--char);color:#fff}
.menu .btn-gold{background:var(--char);color:#fff;box-shadow:none}
.menu .btn-gold svg{color:var(--accent)}

/* ---------- hero: text left, floating product right ---------- */
.hero{padding:calc(var(--hd) + 84px) 0 72px;background:linear-gradient(180deg,rgba(229,229,226,.7),rgba(241,241,239,0) 70%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,53fr) minmax(0,47fr);gap:44px;align-items:center}
.hero-copy{min-width:0}
.h-hero{margin-top:22px;font-size:clamp(42px,4.6vw,66px);line-height:1.04;letter-spacing:-.028em;font-weight:600;text-wrap:balance;max-width:none}
:lang(nl) .h-hero{font-size:clamp(42px,4.4vw,64px)}
.hero .lead{margin-top:24px;font-size:19px;line-height:1.55;max-width:31em}
.hero-ctas{justify-content:flex-start;gap:12px;margin-top:34px}
.hero-facts{justify-content:flex-start;gap:8px;margin-top:28px}
.hero-facts li{padding:8px 14px;border-radius:999px;background:#fff;border:1px solid var(--line-c);font-family:"Inter",sans-serif;font-size:13.5px;font-weight:500;color:#3D3D3D}
.hero-facts li::before{display:none}
.hero-prod{position:relative;perspective:1800px;margin-right:-96px}
.glow{position:absolute;left:46%;top:50%;width:96%;height:86%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(178,151,96,.55),rgba(178,151,96,.16) 60%,transparent);filter:blur(36px);animation:glow 10s ease-in-out infinite;pointer-events:none}
@keyframes glow{50%{opacity:.72;transform:translate(-50%,-50%) scale(1.05)}}
.tilt{position:relative;transform-style:preserve-3d;transform:rotateY(-9deg) rotateX(5deg);transition:transform .6s cubic-bezier(.2,.7,.2,1);will-change:transform}
.hero .stage{margin:0;max-width:none;padding:0 12% 0 0}
.browser{border:1px solid var(--line-c);box-shadow:0 2px 4px rgba(0,0,0,.05),0 60px 120px -50px rgba(0,0,0,.55)}
.br-bar{background:#EFEFEE;border-bottom-color:#E1E1DE}
.hero .stage .phone-hero{right:0;bottom:-9%;width:25%;border-radius:34px;padding:8px;background:linear-gradient(160deg,#3B3B3B,#0E0E0E 55%,#2B2B2B);box-shadow:0 0 0 1px #050505,0 50px 90px -30px rgba(0,0,0,.6)}
.phone-hero .ph-screen{border-radius:27px}
.note{left:-34px;bottom:2%;max-width:300px;padding:10px 14px 10px 10px;border:1px solid var(--line-c);background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.06),0 30px 60px -28px rgba(0,0,0,.5)}
.note-ic{background:#262626}
.note-ic::after{animation:ping 2.2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 9px rgba(178,151,96,0)}100%{box-shadow:0 0 0 0 rgba(178,151,96,0)}}
.note small{color:var(--gold-ink);font-family:"Inter",sans-serif}
.stage-tabs{margin-top:84px}
.stage-tabs button{background:#fff;box-shadow:inset 0 0 0 1px var(--line-c);color:#3D3D3D;font-family:"Inter",sans-serif;font-size:14px}
.stage-tabs button:hover{box-shadow:inset 0 0 0 1px var(--char)}
.stage-tabs button[aria-selected="true"]{background:var(--accent);color:var(--char)}
.stage-tabs button i{left:0;right:0;bottom:0;border-radius:0;background:var(--char)}
.stage-tabs.still button i{animation:none}

/* ---------- the black band (C, as is) ---------- */
.strip{background:var(--char);padding:32px 0}
.strip-in{display:flex;align-items:center;gap:48px}
.strip-l{flex:none;max-width:200px;font:700 12px/1.5 "Inter",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.marquee{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee-track{display:flex;width:max-content;animation:mq 42s linear infinite}
.marquee-track > *{flex:none;margin-right:72px}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.strip .lg{background:#E2E0DB;width:128px;height:34px}

/* ---------- sections on the relief ---------- */
.warm{background:rgba(229,229,226,.55)}
.why{padding:140px 0 130px}
.hub-node,.hub-core,.plan-card,.ask-chat,.intro-card,.law,.entry,.dt-grid li,.ask-qs button,.tq{background:#fff;border-color:var(--line-c)}
.hub-core{border-color:var(--char)}

/* credibility cards (C) */
.pillars{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.pil{position:relative;padding:38px;border-radius:26px;background:#fff;border:1px solid var(--line-c);transition:translate .55s cubic-bezier(.2,.7,.2,1),box-shadow .55s,opacity .8s,transform .8s}
.pil:hover{translate:0 -8px;box-shadow:0 46px 80px -46px rgba(0,0,0,.4)}
.card-top{display:flex;align-items:center;gap:14px}
.pil-ic{flex:none;width:46px;height:46px;background:var(--accent);box-shadow:none}
.pil-ic svg{stroke:var(--char);stroke-width:1.9}
.pil h3{font-size:24px;letter-spacing:-.03em;font-weight:800}
.pil .facts{gap:22px;margin-top:6px}
.pil .facts b{font-size:54px;font-weight:800;letter-spacing:-.05em}
.pil .facts span{font-size:14.5px;color:#5E5A54}
.pil .ticks{margin-top:6px}
.pil .logo-row{border-top-color:var(--line-c)}/* stripe-ok: neutral 1px divider */
.pil .lg{background:#3D3D3D}
.pil-tech{grid-column:1/3;grid-row:2/4}
.pil-tech{overflow:hidden;gap:28px}
.pil-tech .facts{margin-top:4px}
.pil-ver,.pil-cur{grid-column:3}
.pil-track{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px 64px;align-items:end;overflow:hidden;padding:56px 60px;border:0;background:var(--accent);color:var(--char)}
.pil-track::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 360px at 0% 100%,rgba(255,255,255,.2),transparent 60%);pointer-events:none}
.yr-giant{position:relative}
.yr-giant b{display:block;font-size:clamp(120px,17vw,236px);line-height:.8;font-weight:800;letter-spacing:-.075em;margin-left:-.04em;font-variant-numeric:tabular-nums}
.yr-giant span{display:block;margin-top:18px;font-size:15px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.pil-track .card-body{position:relative;display:flex;flex-direction:column;gap:16px}
.pil-track .pil-ic{background:var(--char)}
.pil-track .pil-ic svg{stroke:var(--accent)}
.pil-track h3{font-size:clamp(28px,2.8vw,38px)}
.pil-track .facts{grid-template-columns:1fr 1fr;margin-top:12px}
.pil-track .facts b{font-size:68px;color:var(--char)}
.pil-track .facts span{color:#2E2A22}
.pil-track .roles{margin-top:10px;font-size:17px;font-weight:600;line-height:1.45;color:var(--char)}
.pil-track .logo-row{border-top-color:rgba(0,0,0,.2);gap:18px 36px}/* stripe-ok: neutral 1px divider */
.pil-track .lg{background:var(--char);width:112px}
.slide-in > *{transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.js .slide-in > *{opacity:0;transform:translateX(-36px)}
.js .slide-in.in > *{opacity:1;transform:none}
.slide-in > :nth-child(2){transition-delay:.08s}.slide-in > :nth-child(3){transition-delay:.16s}.slide-in > :nth-child(4){transition-delay:.24s}.slide-in > :nth-child(5){transition-delay:.32s}.slide-in > :nth-child(6){transition-delay:.4s}

/* testimonials */
.tq{position:relative;padding:34px 30px 26px;border-radius:22px;transition:translate .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.tq::before{content:"\201C";display:block;height:30px;margin-bottom:-8px;font:800 72px/1 var(--font);color:var(--accent)}
.tq:hover{translate:0 -6px;box-shadow:0 30px 60px -36px rgba(0,0,0,.4)}
.tq blockquote{font:500 17px/1.55 var(--font);letter-spacing:-.01em}
.tq figcaption img{transition:filter .4s}
.tq:hover figcaption img{filter:none}

/* how, try, features, ask, laws, partners, proof: C cards */
.film{background:var(--char)}
.film-play{background:var(--accent)}
.film-play svg{fill:var(--char)}
.scr-tabs button,.ic-tabs button,.io-ch button,.seg button{font-family:"Inter",sans-serif}
.scr-tabs button{background:#fff;box-shadow:inset 0 0 0 1px var(--line-c)}
.scr-tabs button[aria-selected="true"],.ic-tabs button[aria-selected="true"],.io-ch button[aria-selected="true"],.seg button[aria-selected="true"],.seg button[aria-pressed="true"]{background:var(--char)}
.seg button{background:#fff;box-shadow:inset 0 0 0 1px var(--line-c)}
.plan-card,.ask-chat,.intro-card{border-radius:26px}
.step{background:#fff;border-color:var(--line-c)}
.entry{border-radius:26px}
.entry h3,.law h3{font-weight:800}
.ex{background:rgba(255,255,255,.5)}

/* ---------- pricing: B's cards ---------- */
.pricing{padding:130px 0 140px}
.bill{background:#fff;box-shadow:inset 0 0 0 1px var(--line-c)}
.bill button{font-family:"Inter",sans-serif}
.bill button[aria-checked="true"]{background:var(--char)}
.stations{position:relative;display:grid;grid-template-columns:repeat(3,1fr);max-width:920px;margin:0 auto 44px}
.stations::before{content:"";position:absolute;left:10px;right:calc(33.333% - 10px);top:9px;height:2px;background:repeating-linear-gradient(90deg,var(--accent) 0 8px,transparent 8px 14px);transform:scaleX(0);transform-origin:left;transition:transform 1.6s cubic-bezier(.2,.7,.2,1) .2s}
.stations.in::before{transform:scaleX(1)}
.stn{position:relative;display:grid;gap:6px;padding-top:34px}
.stn-dot{position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:var(--bg);border:2px solid var(--accent);transition:background-color .4s}
.stations.in .stn-dot{background:var(--accent)}
.stations.in .stn:nth-child(2) .stn-dot{transition-delay:.8s}.stations.in .stn:nth-child(3) .stn-dot{transition-delay:1.6s}
.stn b{font-size:24px;line-height:1.1;letter-spacing:-.03em;font-weight:700}
.stn span{font-size:15px;color:#5E5A54}
.trial{justify-content:flex-start;gap:12px 22px;margin:0 auto 24px;padding:14px 24px;border-radius:14px;background:#fff;border:1px solid var(--line-c)}
.trial-ic svg{stroke:var(--gold-ink)}
.trial li{color:#5E5A54;font-weight:500;font-size:14.5px;font-family:"Inter",sans-serif}
.tiers-2{gap:24px}
.tier{gap:26px;padding:40px;border-radius:20px;background:#fff;border:1px solid var(--line-c);transition:translate .55s cubic-bezier(.2,.7,.2,1),box-shadow .55s,opacity .8s,transform .8s}
.tier:hover{translate:0 -6px;box-shadow:0 40px 70px -42px rgba(0,0,0,.38)}
.tier-feat{background:var(--char);border-color:var(--char);color:#fff;box-shadow:none}
.ti-name{font-size:26px;line-height:1;font-weight:700;letter-spacing:-.03em;text-transform:none;color:inherit}
.ti-badge{padding:7px 12px;border-radius:8px;background:var(--accent);color:#1E1E1E;font-family:"Inter",sans-serif;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase}
.ti-price b{font-size:56px;font-weight:700;letter-spacing:-.045em}
.ti-price > span:not(.sample){font-size:15px;color:#5E5A54;font-weight:500}
.tier-feat .ti-price > span:not(.sample){color:#C9C7C1}
.ti-price .sample{margin-left:auto}
.tier-feat .sample{color:var(--accent);border-color:rgba(178,151,96,.6)}
.ti-billed{margin-top:-14px;font-size:14px}
.tier-feat .ti-billed{color:#C9C7C1}
.tier-feat .save{background:rgba(178,151,96,.18);color:#DCC48F;box-shadow:inset 0 0 0 1px rgba(178,151,96,.5)}
.ti-list.ticks{margin-top:0;gap:12px}
.ti-list.ticks li{padding-left:30px;font-size:16px;font-weight:500;line-height:1.45}
.ti-list.ticks li::before{left:0;top:2px;width:19px;height:19px;border-radius:50%;background:rgba(178,151,96,.16);box-shadow:none;border:0;transform:none}
.ti-list.ticks li::after{content:"";position:absolute;left:6px;top:7px;width:7px;height:4px;border-left:2px solid var(--gold-ink);border-bottom:2px solid var(--gold-ink);transform:rotate(-45deg)}
.tier-feat .ti-list.ticks li::before{background:rgba(178,151,96,.22)}
.tier-feat .ti-list.ticks li::after{border-color:#DCC48F}
.selfserve{font-family:"Inter",sans-serif;font-size:15px}

/* ---------- closing: B's compass, the HERIO compass ---------- */
.final{position:relative;padding:130px 0;background:var(--char);color:#fff;text-align:left;border-top:0}
.final-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:56px;align-items:center}
.coord{display:inline-flex;align-items:center;gap:10px;font:600 12px/1 "Inter",sans-serif;letter-spacing:.16em;color:var(--accent)}
.coord::before{content:"";width:24px;height:1px;background:currentColor}
.h-final{margin:22px 0 0;font-size:clamp(42px,5.8vw,88px);line-height:.96;letter-spacing:-.05em;font-weight:800;max-width:13ch}
.h-final em{color:var(--accent)}
.final-ctas{justify-content:flex-start;margin-top:40px;gap:12px}
.final .btn-line{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
.final .btn-line:hover{color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}
.rose svg{width:100%;height:auto;overflow:visible}
.rose .r1,.rose .r2{fill:none;stroke:rgba(178,151,96,.32);stroke-width:1}
.rose .r2{stroke-dasharray:3 6}
.ticks-r{stroke:rgba(178,151,96,.7);stroke-width:1.2;transform-origin:200px 200px;animation:spin 240s linear infinite}
.cardinal text{fill:#8E8C87;font:700 14px/1 "Inter",sans-serif;text-anchor:middle;letter-spacing:.1em}
.rose-ring{fill:none;stroke:var(--accent)}
.rose-needle{fill:var(--accent);transform-box:fill-box;transform-origin:center;animation:swing 12s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes swing{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(8deg)}}

/* ---------- footer (C) ---------- */
.foot{background:var(--char);color:#ABA9A4}
.foot h4{color:var(--accent);font-family:"Inter",sans-serif}
.foot a:hover,.f-btn:hover{color:#fff}
.f-bottom{border-top-color:rgba(255,255,255,.08)}/* stripe-ok: neutral 1px divider */

/* ---------- responsive ---------- */
@media (max-width:1240px){
  .nav-in{gap:16px}
  .nav-right{margin-left:auto}
}
@media (max-width:1100px){
  .hero-grid{grid-template-columns:1fr;gap:56px}
  .hero-prod{margin-right:0;max-width:820px}
  .pillars{grid-template-columns:1fr 1fr}
  .pil-track{grid-template-columns:1fr}
  .pil-tech{grid-column:1/-1;grid-row:auto}
  .pil-ver,.pil-cur{grid-column:auto}
}
@media (max-width:720px){
  :root{--hd:64px}
  html{scroll-padding-top:76px}
  body{font-size:16px}
  .nav-in{gap:12px}
  .hero{padding:calc(var(--hd) + 44px) 0 56px}
  .hero-grid{gap:44px}
  .h-hero,:lang(nl) .h-hero{font-size:40px;line-height:1.05}
  .hero .lead{font-size:17px}
  .hero-ctas,.final-ctas{flex-direction:column;align-items:stretch}
  .hero-ctas .btn,.final-ctas .btn{flex:none}
  .hero-facts li{padding:6px 12px;font-size:13px}
  .tilt{transform:none}
  .glow{width:110%;height:90%}
  .hero .stage{padding-right:0}
  .hero .stage .phone-hero{width:31%;right:-4px;bottom:-14%;border-radius:22px;padding:5px}
  .phone-hero .ph-screen{border-radius:18px}
  .note{position:relative;left:auto;bottom:auto;right:auto;margin:16px 34% 0 0;max-width:none}
  .stage-tabs{margin-top:72px}
  .strip-in{flex-direction:column;align-items:stretch;gap:16px}
  .strip-l{max-width:none}
  .strip .lg{width:104px;height:30px}
  .marquee-track > *{margin-right:48px}
  .why,.pricing{padding:84px 0}
  .sec-head{margin-bottom:40px}
  .h2,.h2-wide{font-size:40px;max-width:none}
  .pillars{grid-template-columns:1fr;gap:16px}
  .pil-tech,.pil-ver,.pil-cur{grid-column:auto;grid-row:auto}
  .pil{padding:28px 22px}
  .pil-track{padding:34px 22px;gap:20px}
  .yr-giant b{font-size:124px}
  .pil .facts b,.pil-track .facts b{font-size:44px}
  .pil-track .facts{grid-template-columns:1fr}
  .pil-track .lg{width:88px;height:26px}
  .tq{padding:26px 22px 20px}
  .tq blockquote{font-size:15.5px}
  .stations{grid-template-columns:1fr;gap:22px;padding-left:4px}
  .stations::before{left:13px;right:auto;top:10px;bottom:10px;width:2px;height:auto;background:repeating-linear-gradient(180deg,var(--accent) 0 8px,transparent 8px 14px);transform:scaleY(0);transform-origin:top}
  .stations.in::before{transform:scaleY(1)}
  .stn{padding:0 0 0 40px}
  .stn-dot{top:2px}
  .tier{padding:30px 22px}
  .ti-price b{font-size:46px}
  .final{padding:90px 0}
  .final-grid{grid-template-columns:1fr;gap:40px}
  .rose{max-width:240px}
  .h-final{font-size:42px}
  .route .city text{display:none}
}
@media (prefers-reduced-motion:reduce){
  .topo img{animation:none}
  .tilt{transform:none}
  .js .slide-in > *{opacity:1;transform:none}
  .stations::before{transform:none}
  .stn-dot{background:var(--accent)}
  .marquee{-webkit-mask-image:none;mask-image:none}
  .marquee-track{width:auto;flex-wrap:wrap;row-gap:20px}
}

/* fine tuning after the screenshots */
.pil .facts b{font-variant-numeric:normal}
.tq{justify-content:flex-start}
.tq figcaption{margin-top:auto}
.foot{border-top:1px solid rgba(255,255,255,.08)}

/* ===== PROOF CARD REEL (17 Oct 2026): two rows of real HERIO platform screens drifting in opposite directions.
   Screens follow the language (site.js swapShots). Clones for the seamless loop come from final.js. ===== */
.pil-tech .facts b{font-size:72px}
.pil-tech .facts b span{font:inherit;color:inherit;letter-spacing:inherit}
.reel{display:grid;gap:14px;margin:auto -38px 0;padding:6px 0 2px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.reel-row{overflow:hidden;padding:4px 0 14px}
.reel-track{display:flex;width:max-content;animation:reel 48s linear infinite}
.reel-row[data-dir="r"] .reel-track{animation-direction:reverse;animation-duration:56s}
.pil-tech:hover .reel-track{animation-play-state:paused}
@keyframes reel{to{transform:translateX(-50%)}}
.rl{position:relative;flex:none;width:272px;margin:0 16px 0 0;border-radius:12px;overflow:hidden;background:var(--ground);border:1px solid var(--line-warm);box-shadow:0 18px 30px -22px color-mix(in srgb,var(--ink) 55%,transparent);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.rl:hover{transform:translateY(-4px)}
.rl-bar{display:flex;align-items:center;gap:5px;height:20px;padding:0 10px;background:var(--warm);border-bottom:1px solid var(--line-warm)}
.rl-bar i{width:6px;height:6px;border-radius:50%;background:var(--line-strong)}
.rl-scr{display:block;height:150px;overflow:hidden}
.rl img{display:block;width:100%;height:100%;object-fit:cover;object-position:0 0;transform:scale(1.45);transform-origin:30% 0}
.rl figcaption{position:absolute;left:10px;bottom:10px;padding:5px 10px;border-radius:999px;background:var(--ink);color:var(--ground);font:600 12px/1.2 "Inter",sans-serif;letter-spacing:.01em}
@media (max-width:720px){
  .pil-tech{gap:22px}
  .pil-tech .facts b{font-size:40px;min-width:0}
  .pil-tech .facts div{display:grid;grid-template-columns:116px minmax(0,1fr);align-items:center;gap:12px}
  .reel{margin:4px -22px 0;gap:8px}
  .rl{width:188px;margin-right:12px;border-radius:10px}
  .rl-scr{height:104px}
  .rl-bar{height:16px}
  .rl figcaption{left:8px;bottom:8px;font-size:11px;padding:4px 8px}
}
@media (prefers-reduced-motion:reduce){
  .reel-row{overflow-x:auto;scrollbar-width:none}
}
/* ===== end PROOF CARD REEL ===== */

/* ===== HOW IT WORKS, HORIZONTAL (17 Oct 2026): five steps in one row under one stage that swaps the screen.
   Desktop: the ol and li are display:contents so the head, the five screens and the five steps share one grid.
   Phone (900 and below): a swipe carousel with dots. Timer bars drive the auto-advance (final.js). ===== */
.how{padding:96px 0 104px}
.hw{--hw-gap:28px;position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:auto auto;column-gap:var(--hw-gap);row-gap:52px}
.hw-head{grid-column:1/3;grid-row:1;align-self:center;margin:0}
.hw-head .h2{font-size:clamp(40px,4vw,60px);max-width:11ch}
.hw .how-cta{margin:40px 0 0;padding:0}
.hw .flow,.hw .fl{display:contents}
.hw .flow{list-style:none;margin:0;padding:0}

/* the stage: every screen in the same cell, one shown */
.hw .fl-vis{grid-column:3/-1;grid-row:1;align-self:stretch;height:440px;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:translateX(var(--x,56px)) scale(.97);transition:opacity .55s ease,transform .75s cubic-bezier(.2,.7,.2,1),visibility 0s linear .75s;pointer-events:none}
.hw .fl.on .fl-vis{opacity:1;visibility:visible;transform:none;transition:opacity .55s ease .08s,transform .75s cubic-bezier(.2,.7,.2,1),visibility 0s;pointer-events:auto}
.hw .fl.prep .fl-vis{transition:none}
.hw .fl-ph{padding:0;border-radius:var(--radius-card);background:color-mix(in srgb,var(--warm-2) 70%,transparent)}
.hw .phone-sm{position:relative;right:auto;bottom:auto;width:252px;min-width:0;max-width:62%}
.hw .mini{width:100%}
.hw .mini-scr img{transition:transform 6s ease-in-out}
.hw .fl.on .mini-scr img{transform:translateY(-6%)}
.hw .flag{right:-14px;bottom:-18px}
.hw .fl.on .flag{opacity:1;transform:none}

/* the steps row */
.hw .fl-txt{grid-row:2;position:relative;z-index:1;display:flex;flex-direction:column;gap:8px;margin:-14px -14px 0;padding:14px;border-radius:18px;cursor:pointer;outline:none;transition:background .35s}
.hw .fl:nth-child(1) .fl-txt{grid-column:1}.hw .fl:nth-child(2) .fl-txt{grid-column:2}.hw .fl:nth-child(3) .fl-txt{grid-column:3}.hw .fl:nth-child(4) .fl-txt{grid-column:4}.hw .fl:nth-child(5) .fl-txt{grid-column:5}
.hw .fl-txt:hover{background:color-mix(in srgb,var(--ground) 70%,transparent)}
.hw .fl-txt:focus-visible{box-shadow:0 0 0 2px var(--accent)}
.hw .fl-n{position:relative;display:grid;place-items:center;width:44px;height:44px;margin-bottom:10px;border-radius:50%;background:var(--ground);box-shadow:inset 0 0 0 2px var(--line-strong);font:700 17px/1 var(--font);color:var(--ink);transition:background .4s,box-shadow .4s,color .4s}
.hw .fl.done .fl-n{background:var(--ground);box-shadow:inset 0 0 0 2px var(--accent)}
.hw .fl.on .fl-n{background:var(--accent);color:var(--on-accent);box-shadow:inset 0 0 0 2px var(--accent)}
.hw .fl.on .fl-n::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid var(--accent);opacity:0;animation:hwping 2.2s ease-out infinite}
@keyframes hwping{0%{opacity:.7;transform:scale(.82)}100%{opacity:0;transform:scale(1.25)}}
.hw .fl-txt h3{font-size:21px;line-height:1.15;letter-spacing:-.025em;font-weight:800;text-wrap:balance}
.hw .fl-txt p{margin:0;font-size:15px;line-height:1.45;color:var(--ink-soft)}
.hw .fl-bar{display:block;height:3px;margin-top:auto;border-radius:3px;background:var(--line-warm);overflow:hidden;opacity:0;transition:opacity .3s}
.hw .fl-bar i{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 0}
.hw .fl.on .fl-bar{opacity:1}
.hw .fl.on .fl-bar i,.hw-dot.on i{animation:hwtime var(--hw-dur,5.5s) linear forwards;animation-play-state:paused}
.hw.run .fl.on .fl-bar i,.hw.run .hw-dot.on i{animation-play-state:running}
@media (hover:hover){.hw.run:hover .fl.on .fl-bar i{animation-play-state:paused}}
.hw.hold .fl.on .fl-bar i,.hw.hold .hw-dot.on i{animation-play-state:paused}
@keyframes hwtime{to{transform:scaleX(1)}}

/* the gold line through the numbers */
.hw-line{grid-row:2;grid-column:1/5;align-self:start;position:relative;z-index:0;width:calc(100% + var(--hw-gap));height:2px;margin:21px 0 0 22px;border-radius:2px;background:var(--line-warm)}
.hw-line i{position:absolute;inset:0;border-radius:2px;background:var(--accent);transform:scaleX(var(--p,0));transform-origin:0 0;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.hw-dots{display:none}

@media (max-width:1100px){
  .hw{--hw-gap:20px}
  .hw .fl-vis{height:380px}
  .hw .fl-txt h3{font-size:18px}
  .hw .fl-txt p{font-size:14px}
}
@media (max-width:900px){
  .how{padding:84px 0}
  .hw{display:flex;flex-direction:column;gap:0}
  .hw-head{display:contents}
  .hw-head .h2{margin-bottom:32px}
  .hw .flow{order:1}
  .hw-dots{order:2}
  .hw .how-cta{order:3}
  .hw-head .h2{max-width:none}
  .hw .flow{position:relative;display:flex;gap:12px;margin:0 calc(-1 * var(--gutter));padding:4px var(--gutter) 6px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);overscroll-behavior-x:contain;scrollbar-width:none}
  .hw .flow::-webkit-scrollbar{display:none}
  .hw .fl{display:flex;flex-direction:column;flex:0 0 min(84%,420px);scroll-snap-align:start;border-radius:22px;background:var(--ground);border:1px solid var(--line-warm);overflow:hidden}
  .hw .fl-txt{order:2;margin:0;padding:18px 20px 22px;gap:6px;cursor:default;border-radius:0}
  .hw .fl-txt:hover{background:none}
  .hw .fl-n{width:34px;height:34px;margin-bottom:6px;font-size:14px}
  .hw .fl.on .fl-n::after{display:none}
  .hw .fl-txt h3{font-size:20px}
  .hw .fl-txt p{font-size:15px}
  .hw .fl-bar{display:none}
  .hw .fl-vis,.hw .fl.on .fl-vis{order:1;height:300px;opacity:1;visibility:visible;transform:none;transition:none;pointer-events:auto;padding:18px;border-radius:0}
  .hw .fl-ph{padding:18px 0 0;align-items:flex-start;overflow:hidden}
  .hw .phone-sm{width:200px;max-width:70%}
  .hw .fl-vis:not(.fl-ph){background:color-mix(in srgb,var(--warm-2) 70%,transparent)}
  .hw .flag{right:10px;bottom:12px;padding:10px 12px}
  .hw .fl .flag{opacity:1;transform:none}
  .hw-line{display:none}
  .hw-dots{display:flex;justify-content:center;gap:8px;margin-top:22px}
  .hw-dot{position:relative;width:10px;height:10px;padding:0;border:0;border-radius:999px;background:var(--line-strong);overflow:hidden;cursor:pointer;transition:width .35s cubic-bezier(.2,.7,.2,1),background .35s}
  .hw-dot::before{content:"";position:absolute;inset:-12px -4px}
  .hw-dot i{position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:0 0}
  .hw-dot.on{width:34px;background:color-mix(in srgb,var(--accent) 35%,var(--line-warm))}
  .hw .how-cta{margin-top:28px;padding:0}
}
@media (max-width:720px){
  .hw .fl-vis,.hw .fl.on .fl-vis{height:280px}
  .hw-head .h2{font-size:40px}
}
@media (prefers-reduced-motion:reduce){
  .hw .fl.on .fl-n::after{display:none}
  .hw .fl-bar{display:none}
  .hw-dot.on i{transform:scaleX(1)}
}
/* ===== end HOW IT WORKS, HORIZONTAL ===== */