/* ECHIVO /horeca — how.css · OWNER: V3. "How it works": apply → publish an offer → redeemed at the counter.
   Default markup/CSS = the FINAL state of every scene, inline under its chapter (no-JS, reduced motion, phones).
   Desktop (JS adds .hx-story.is-sticky): scenes move into one sticky stage and crossfade as chapters scroll by.
   Scenes size themselves with container queries (cqi), so the same mock works at 340 px and at 760 px. */

/* ============================================================ STORY LAYOUT */
#how { --how-ease: cubic-bezier(.16, 1, .3, 1); }
#how .hx-story { position: relative; max-width: 1180px; margin: 0 auto; }
#how .hx-story__chaps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(64px, 11vh, 120px); }
#how .hx-chap { position: relative; display: flex; flex-direction: column; gap: 26px; }
#how .hx-chap__txt { max-width: 34rem; }
#how .hx-chap__n { display: block; margin-bottom: 14px; font-family: var(--mono); font-size: .8rem; font-weight: 700; letter-spacing: .2em; color: var(--gold); }
#how .hx-chap__n::after { content: ""; display: inline-block; vertical-align: middle; width: 36px; height: 1px; margin-left: 12px; background: linear-gradient(90deg, var(--gold), transparent); }
#how .hx-chap__t { margin: 0 0 12px; font-size: clamp(1.9rem, 3.4vw, 3.1rem); }
#how .hx-chap__d { margin: 0; font-size: clamp(1rem, 1.2vw, 1.15rem); max-width: 34ch; }
#how .hx-chap__k { display: inline-flex; align-items: center; gap: 10px; margin: 20px 0 0; padding: 9px 14px; border-radius: 999px; background: rgba(245,200,130,.08); border: 1px solid rgba(245,200,130,.22); color: var(--text); font-size: .88rem; font-weight: 600; }
#how .hx-chap__k svg { flex: none; width: 18px; height: 18px; color: var(--gold); }
#how .hx-chap__k { border-radius: 14px; line-height: 1.35; }
@media (max-width: 899px) { #how .hx-chap__k { font-size: .82rem; } }
#how .hx-story__rail, #how .hx-story__stage { display: none; }

/* every scene: a framed, glowing surface */
#how .hx-sc { position: relative; container-type: inline-size; width: 100%; max-width: 720px; }
#how .hx-ex { display: block; margin-top: 12px; text-align: right; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }

/* ---------- desktop: sticky stage (JS adds .is-sticky only ≥ 900 px, motion allowed) ---------- */
#how .hx-story.is-sticky { --stage-h: min(620px, 80vh); display: grid; grid-template-columns: minmax(0, 4.3fr) minmax(0, 7.7fr); column-gap: clamp(32px, 4vw, 64px); max-width: 1320px; }
#how .is-sticky .hx-story__chaps { grid-column: 1; grid-row: 1; gap: 0; padding-left: 52px; }
#how .is-sticky .hx-chap { min-height: 82vh; min-height: 82svh; justify-content: center; }
#how .is-sticky .hx-chap:first-child, #how .is-sticky .hx-chap:last-child { min-height: var(--stage-h); }
#how .is-sticky .hx-chap__txt { opacity: .28; transform: translateX(-8px); transition: opacity .6s var(--how-ease), transform .8s var(--how-ease); }
#how .is-sticky .hx-chap.is-on .hx-chap__txt { opacity: 1; transform: none; }
#how .is-sticky .hx-story__rail { display: block; position: absolute; left: 14px; top: calc(var(--stage-h) / 2); bottom: calc(var(--stage-h) / 2); width: 2px; border-radius: 2px; background: rgba(255,255,255,.08); }
#how .is-sticky .hx-story__rail i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, var(--gold), #ffe2aa); transform: scaleY(0); transform-origin: top; box-shadow: 0 0 14px rgba(245,200,130,.6); }
#how .is-sticky .hx-chap::before { content: ""; position: absolute; left: -45px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--night); border: 2px solid rgba(255,255,255,.18); transition: border-color .4s, background .4s, box-shadow .4s; }
#how .is-sticky .hx-chap.is-on::before, #how .is-sticky .hx-chap.is-past::before { border-color: var(--gold); background: var(--gold); box-shadow: 0 0 0 6px rgba(245,200,130,.14); }
#how .is-sticky .hx-story__stage { display: block; grid-column: 2; grid-row: 1; position: sticky; top: calc(50vh - var(--stage-h) / 2); height: var(--stage-h); perspective: 1400px; }
#how .is-sticky .hx-story__stage::before { content: ""; position: absolute; inset: 8% 4%; border-radius: 50%; background: radial-gradient(closest-side, rgba(245,200,130,.16), rgba(79,179,255,.05) 60%, transparent); pointer-events: none; }
#how .is-sticky .hx-story__stage .hx-sc { position: absolute; inset: 0; max-width: none; display: flex; flex-direction: column; align-items: stretch; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(28px) scale(.965) rotateX(6deg); transition: opacity .55s var(--how-ease), transform .9s var(--how-ease), visibility 0s linear .9s; }
#how .is-sticky .hx-story__stage .hx-sc.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .7s var(--how-ease) .08s, transform 1s var(--how-ease) .08s, visibility 0s; }
#how .hx-tilt { transform-style: preserve-3d; }

/* ============================================================ SCENE 1 · APPLY */
#how .hx-ap { --u: clamp(10.5px, 2.15cqi, 15px); font-size: var(--u); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.4em; align-items: center; width: 100%; }
#how .hx-ap__card { padding: 1.7em 1.6em; border-radius: 1.6em; background: linear-gradient(180deg, #111a2c, #0b1020); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 30px 80px -20px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06); }
#how .hx-ap__h { margin: 0 0 1.1em; font-size: 1.5em; }
#how .hx-ap__f { margin-bottom: .95em; }
#how .hx-ap__f small { display: block; margin-bottom: .4em; font-size: .78em; font-weight: 650; color: var(--text-2); }
#how .hx-ap__in { display: flex; align-items: center; justify-content: space-between; gap: .4em; height: 2.7em; padding: 0 .9em; border-radius: .8em; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.1); font-weight: 600; white-space: nowrap; overflow: hidden; }
#how .hx-ap__in svg { width: 1.2em; height: 1.2em; color: var(--text-3); flex: none; }
#how .hx-ap__f:first-of-type .hx-ap__in { border-color: rgba(245,200,130,.5); box-shadow: 0 0 0 3px rgba(245,200,130,.12); }
#how .hx-ap__in > b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: clip; }
#how .hx-ap__caret, #how .hx-db__caret { flex: none; width: 1.5px; height: 1.2em; margin-right: auto; background: var(--gold); opacity: 0; }
#how .is-typing .hx-ap__caret, #how .is-typing .hx-db__caret { opacity: 1; animation: hx-how-blink 1s steps(1) infinite; }
@keyframes hx-how-blink { 50% { opacity: 0; } }
#how .hx-ap__chips { display: flex; flex-wrap: wrap; gap: .4em; }
#how .hx-ap__chips em { font-style: normal; padding: .45em .8em; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); font-size: .82em; font-weight: 650; color: var(--text-2); transition: background .3s, color .3s, border-color .3s; }
#how .hx-ap__chips em.is-on { background: rgba(245,200,130,.14); border-color: rgba(245,200,130,.5); color: var(--gold); }
#how .hx-ap__btn { display: flex; align-items: center; justify-content: center; gap: .5em; margin-top: 1.3em; height: 3em; border-radius: 999px; background: var(--gold); color: #1a1206; font-weight: 750; font-size: .95em; box-shadow: 0 .8em 2em rgba(245,200,130,.3); }
#how .hx-ap__btn svg { width: 1.2em; height: 1.2em; }
#how .hx-ap > div:not(.hx-ap__card) { grid-column: 2; }
#how .hx-ap__card { grid-row: 1 / span 3; }
#how .hx-ap__ok, #how .hx-ap__mail, #how .hx-ap__trial { display: flex; align-items: center; gap: .8em; padding: .9em 1.1em; border-radius: 1.2em; background: linear-gradient(180deg, rgba(22,33,58,.96), rgba(13,19,34,.96)); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 1.2em 3em -1em rgba(0,0,0,.6); min-width: 0; }
#how .hx-ap__ok svg { flex: none; width: 1.8em; height: 1.8em; color: var(--mint); }
#how .hx-ap__ok b { font-size: 1.05em; }
#how .hx-ap__mi { flex: none; display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: .7em; background: rgba(79,179,255,.14); color: var(--sky); }
#how .hx-ap__mi svg { width: 1.3em; height: 1.3em; }
#how .hx-ap__mail > span:nth-child(2) { min-width: 0; }
#how .hx-ap__mail small, #how .hx-ap__trial small { display: block; font-size: .76em; color: var(--text-3); font-weight: 600; }
#how .hx-ap__mail b { display: block; font-size: .86em; line-height: 1.25; }
#how .hx-ap__mail code { margin-left: auto; padding: .35em .6em; border-radius: .5em; background: rgba(0,0,0,.35); font-family: var(--mono); font-size: .9em; font-weight: 700; letter-spacing: .08em; color: var(--gold); white-space: nowrap; }
#how .hx-ap__ring { position: relative; flex: none; display: grid; place-items: center; width: 3.4em; height: 3.4em; }
#how .hx-ap__ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
#how .hx-ap__ring circle { fill: none; stroke-width: 4; }
#how .hx-ap__rbg { stroke: rgba(255,255,255,.1); }
#how .hx-ap__rfg { stroke: var(--gold); stroke-linecap: round; stroke-dasharray: 100.6; stroke-dashoffset: 0; }
#how .hx-ap__ring b { font-size: 1.15em; font-weight: 800; }
#how .hx-ap__trial b { display: block; }
@container (max-width: 520px) {
  #how .hx-ap { --u: clamp(11px, 3.4cqi, 14px); grid-template-columns: 1fr; gap: .8em; }
  #how .hx-ap > div:not(.hx-ap__card) { grid-column: 1; }
  #how .hx-ap__card { grid-row: auto; }
}

/* ============================================================ SCENE 2 · DASHBOARD WIZARD (dash.echivo.com look) */
#how .hx-db { --u: clamp(9.5px, 1.78cqi, 13px); font-size: var(--u); position: relative; width: 100%; border-radius: 1.4em; overflow: hidden; background: #05070d; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 40px 100px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.6), 0 30px 80px -40px rgba(245,200,130,.25); color: #eef0f7; }
#how .hx-db__chrome { display: flex; align-items: center; gap: .55em; height: 2.8em; padding: 0 1.1em; background: #0b1020; border-bottom: 1px solid rgba(255,255,255,.06); }
#how .hx-db__chrome > i { width: .8em; height: .8em; border-radius: 50%; background: rgba(255,255,255,.14); }
#how .hx-db__url { display: inline-flex; align-items: center; gap: .45em; margin: 0 auto; padding: .35em 1.2em; border-radius: 999px; background: rgba(0,0,0,.35); color: #a7aec4; font-family: var(--mono); font-size: .85em; }
#how .hx-db__url svg { width: 1em; height: 1em; }
#how .hx-db__app { display: grid; grid-template-columns: 12.5em minmax(0, 1fr); min-height: 27em; }
#how .hx-db__side { display: flex; flex-direction: column; gap: .2em; padding: 1.1em .7em; background: #0b1020; border-right: 1px solid rgba(255,255,255,.06); }
#how .hx-db__logo { display: flex; align-items: center; gap: .6em; padding: 0 .4em .9em; }
#how .hx-db__logo img { width: 1.7em; height: 1.7em; }
#how .hx-db__logo b { display: block; font-size: .9em; letter-spacing: .24em; font-weight: 800; }
#how .hx-db__logo small { display: block; font-size: .76em; color: #a7aec4; }
#how .hx-db__venue { display: flex; align-items: center; gap: .55em; margin-bottom: .6em; padding: .6em .7em; border-radius: .7em; border: 1px solid rgba(245,200,130,.32); background: rgba(245,200,130,.08); font-weight: 700; font-size: .9em; white-space: nowrap; overflow: hidden; }
#how .hx-db__venue i { flex: none; width: .55em; height: .55em; border-radius: 50%; background: var(--gold); }
#how .hx-db__nav { display: flex; align-items: center; gap: .65em; padding: .55em .7em; border-radius: .7em; color: #a7aec4; font-weight: 600; font-size: .92em; white-space: nowrap; border: 1px solid transparent; }
#how .hx-db__nav svg { flex: none; width: 1.15em; height: 1.15em; }
#how .hx-db__nav.is-on { color: #eef0f7; background: rgba(245,200,130,.08); border-color: rgba(245,200,130,.32); }
#how .hx-db__nav.is-on svg { color: var(--gold); }
#how .hx-db__main { position: relative; min-width: 0; padding: 1em 1.4em 1.4em; background: radial-gradient(120% 80% at 100% 0%, rgba(245,200,130,.05), transparent 60%), #05070d; }
#how .hx-db__crumb { margin: 0 0 .9em; font-size: .85em; color: #6c7590; }
#how .hx-db__crumb b { color: #eef0f7; font-weight: 700; }
#how .hx-db__top { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-bottom: 1em; }
#how .hx-db__title { font-size: 1.75em; white-space: nowrap; }
#how .hx-db__steps { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .3em; }
#how .hx-db__steps li { display: flex; align-items: center; gap: .4em; padding: .3em .55em .3em .3em; border-radius: 999px; font-size: .82em; font-weight: 650; color: #6c7590; white-space: nowrap; transition: background .35s, color .35s; }
#how .hx-db__steps li + li::before { content: ""; width: 1.2em; height: 1px; margin-right: .3em; background: rgba(255,255,255,.14); }
#how .hx-db__steps i { display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); font-style: normal; font-size: .9em; transition: background .35s, color .35s, border-color .35s; }
#how .hx-db__steps li.is-on { background: #111a2c; color: #eef0f7; }
#how .hx-db__steps li.is-on i { background: var(--gold); border-color: var(--gold); color: #1a1206; }
#how .hx-db__steps li.is-done { color: #a7aec4; }
#how .hx-db__steps li.is-done i { border-color: rgba(94,230,181,.6); color: transparent; background: no-repeat center / 70% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235ee6b5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
#how .hx-db__grid { display: grid; grid-template-columns: minmax(0, 1fr) 13.5em; gap: 1.2em; align-items: start; }
#how .hx-db__panel { display: grid; padding: 1.2em; border-radius: 1.1em; background: #0d1322; border: 1px solid rgba(255,255,255,.09); }
#how .hx-db__pg { grid-area: 1 / 1; min-width: 0; }
#how .hx-db__pg--who { visibility: hidden; opacity: 0; }
#how .hx-db.is-who .hx-db__pg--who { visibility: visible; opacity: 1; }
#how .hx-db.is-who .hx-db__pg--what { visibility: hidden; opacity: 0; }
#how .hx-db__pt { margin: 0 0 .9em; font-size: 1.2em; font-weight: 800; }
#how .hx-db__groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55em; }
#how .hx-db__g { position: relative; display: flex; align-items: center; gap: .55em; min-width: 0; padding: .7em .6em; border-radius: .9em; border: 1px solid rgba(255,255,255,.09); background: #111a2c; transition: border-color .3s, background .3s, box-shadow .3s; }
#how .hx-db__g > i { flex: none; display: grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: .6em; background: rgba(255,255,255,.05); color: #a7aec4; }
#how .hx-db__g > i svg { width: 1.1em; height: 1.1em; }
#how .hx-db__g b { min-width: 0; font-size: .9em; font-weight: 700; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#how .hx-db__g u { flex: none; margin-left: auto; display: grid; place-items: center; width: 1.3em; height: 1.3em; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); }
#how .hx-db__g u svg { width: .9em; height: .9em; color: #1a1206; stroke-width: 3; opacity: 0; }
#how .hx-db__g.is-sel { border-color: rgba(245,200,130,.6); background: linear-gradient(180deg, rgba(245,200,130,.12), rgba(245,200,130,.04)); box-shadow: 0 0 0 3px rgba(245,200,130,.08); }
#how .hx-db__g.is-sel > i { background: rgba(245,200,130,.16); color: var(--gold); }
#how .hx-db__g.is-sel u { background: var(--gold); border-color: var(--gold); }
#how .hx-db__g.is-sel u svg { opacity: 1; }
#how .hx-db__field { margin-bottom: .9em; }
#how .hx-db__field small { display: block; margin-bottom: .45em; font-size: .85em; color: #a7aec4; font-weight: 600; }
#how .hx-db__in { display: flex; align-items: center; gap: .3em; height: 2.7em; padding: 0 .9em; border-radius: .7em; background: #05070d; border: 1px solid rgba(255,255,255,.12); font-weight: 600; white-space: nowrap; overflow: hidden; }
#how .hx-db__in > b { font-weight: 600; min-width: 0; overflow: hidden; }
#how .hx-db__in > b.is-ph { color: #4a5269; }
#how .hx-db__field--v .hx-db__in { width: 8em; justify-content: space-between; }
#how .hx-db__field--v em { font-style: normal; color: #6c7590; }
#how .hx-db__field.is-focus .hx-db__in { border-color: rgba(245,200,130,.6); box-shadow: 0 0 0 3px rgba(245,200,130,.14); }
#how .hx-db__foot { grid-area: 2 / 1; display: flex; justify-content: flex-end; margin-top: .4em; padding-top: .9em; border-top: 1px solid rgba(255,255,255,.06); }
#how .hx-db__btn { display: inline-flex; align-items: center; gap: .45em; padding: .65em 1.2em; border-radius: .7em; background: linear-gradient(180deg, #ffd99c, var(--gold)); color: #1a1206; font-weight: 800; font-size: .92em; box-shadow: 0 .5em 1.4em rgba(245,200,130,.28); }
#how .hx-db__btn svg { width: 1.1em; height: 1.1em; }
#how .hx-db__pv { padding: 1em .9em 1.1em; border-radius: 1.8em; background: linear-gradient(180deg, #0f1526, #070a12); border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 0 0 .35em #111, 0 1.5em 3em -1em rgba(0,0,0,.7); }
#how .hx-db__pvh { margin: .4em .3em .7em; font-size: .9em; }
#how .hx-db__toast { position: absolute; right: 1.4em; bottom: 1.4em; width: 13.5em; flex-wrap: wrap; row-gap: .1em; display: flex; align-items: center; gap: .6em; padding: .7em 1.1em; border-radius: 999px; background: #16213a; border: 1px solid rgba(94,230,181,.4); box-shadow: 0 1em 2.4em rgba(0,0,0,.6); }
#how .hx-db__toast svg { flex: none; width: 1.4em; height: 1.4em; color: var(--mint); }
#how .hx-db__toast { border-radius: 1em; }
#how .hx-db__toast span { flex-basis: 100%; padding-left: 2.2em; color: #a7aec4; font-size: .9em; }
#how .hx-db__cursor { position: absolute; left: 0; top: 0; z-index: 5; width: 1.6em; height: 1.6em; margin: -.8em 0 0 -.8em; border-radius: 50%; border: 2px solid #fff; background: rgba(245,200,130,.35); box-shadow: 0 0 0 4px rgba(245,200,130,.18), 0 4px 12px rgba(0,0,0,.5); opacity: 0; pointer-events: none; }
@container (max-width: 560px) {
  #how .hx-db { --u: clamp(10px, 2.95cqi, 12.5px); }
  #how .hx-db__app { grid-template-columns: 1fr; min-height: 0; }
  #how .hx-db__side { display: none; }
  #how .hx-db__main { padding: .9em 1em 4.2em; }
  #how .hx-db__top { flex-direction: column; align-items: flex-start; gap: .6em; }
  #how .hx-db__title { font-size: 1.5em; }
  #how .hx-db__steps li:not(.is-on) span { display: none; }
  #how .hx-db__steps li { padding-right: .3em; } #how .hx-db__steps li.is-on { padding-right: .7em; }
  #how .hx-db__grid { grid-template-columns: 1fr; gap: .8em; }
  #how .hx-db__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #how .hx-db__g:nth-child(n+5) { display: none; }
  #how .hx-db__pv { border-radius: 1.2em; padding: .6em; box-shadow: none; }
  #how .hx-db__pvh { display: none; }
  #how .hx-db__toast { right: auto; left: 50%; bottom: 1em; width: max-content; max-width: calc(100% - 2em); flex-wrap: nowrap; translate: -50% 0; border-radius: 999px; }
  #how .hx-db__toast span { flex-basis: auto; padding-left: 0; }
  #how .hx-ct__btn { font-size: .8em; white-space: nowrap; overflow: hidden; }
}

/* offer card (as in the app's Taste tab / dash preview) — used by scenes 2 and 3 */
#how .hx-offer { position: relative; display: flex; flex-direction: column; gap: .25em; padding: .9em 1em 1em; border-radius: 1.2em; overflow: hidden; background: radial-gradient(120% 90% at 100% 0%, rgba(79,179,255,.22), transparent 60%), linear-gradient(160deg, #1d2a45, #0d1322 70%); border: 1px solid rgba(79,179,255,.35); }
#how .hx-offer::after { content: ""; position: absolute; right: -10%; bottom: -12%; width: 70%; height: 55%; background: linear-gradient(160deg, transparent 40%, rgba(255,255,255,.05) 41%); transform: skewY(-12deg); pointer-events: none; }
#how .hx-offer__g { align-self: flex-start; display: inline-flex; align-items: center; gap: .35em; padding: .25em .6em; border-radius: 999px; border: 1px solid rgba(79,179,255,.6); color: var(--sky); font-size: .7em; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
#how .hx-offer__g svg { width: 1.1em; height: 1.1em; }
#how .hx-offer__v { display: flex; align-items: baseline; font-size: 2.9em; font-weight: 800; line-height: 1; letter-spacing: -.02em; margin-top: .1em; }
#how .hx-offer__v s { text-decoration: none; color: var(--sky); font-size: .7em; margin-right: .03em; }
#how .hx-offer__v small { font-size: .45em; margin-left: .05em; }
#how .hx-offer__t { font-size: .82em; line-height: 1.15; }
#how .hx-offer__t.is-ph { color: #6c7590; }
#how .hx-offer__venue { font-size: .75em; color: #a7aec4; font-weight: 600; }
@container (max-width: 560px) {
  #how .hx-sc--dash .hx-offer { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: .7em; }
  #how .hx-sc--dash .hx-offer__v { font-size: 2em; order: -1; margin: 0; }
  #how .hx-sc--dash .hx-offer__t { flex: 1 1 8em; }
  #how .hx-sc--dash .hx-offer__venue { display: none; }
}

/* ============================================================ SCENE 3 · AT THE COUNTER + STATS */
#how .hx-ct { --u: clamp(10px, 2.05cqi, 14.5px); font-size: var(--u); position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2.4em; width: 100%; padding: 0 1em; }
#how .hx-ct__phone { position: relative; width: 15em; aspect-ratio: 1206 / 2622; padding: .5em; border-radius: 2.5em; background: linear-gradient(145deg, #3a3a40, #121216 40%, #2a2a30 70%, #0c0c0f); box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 0 0 2px #050507, 0 40px 90px -20px rgba(0,0,0,.8); transform-origin: 50% 60%; }
#how .hx-ct__screen { position: relative; height: 100%; display: flex; flex-direction: column; gap: .8em; padding: 3em 1em 1em; border-radius: 2.05em; overflow: hidden; background: radial-gradient(120% 50% at 50% 0%, rgba(79,179,255,.12), transparent 60%), #070a12; }
#how .hx-ct__isl { position: absolute; top: .7em; left: 50%; width: 32%; height: 1.5em; margin-left: -16%; border-radius: 999px; background: #000; }
#how .hx-ct__h { margin: 0; font-size: .95em; }
#how .hx-offer--big { font-size: 1.05em; padding: 1.1em 1em 1.2em; }
#how .hx-offer--big .hx-offer__v { font-size: 3.4em; }
#how .hx-ct__btn { display: flex; align-items: center; justify-content: center; gap: .45em; height: 2.9em; border-radius: 999px; background: var(--sky); color: #04121f; font-weight: 800; font-size: .9em; }
#how .hx-ct__btn svg { width: 1.2em; height: 1.2em; }
#how .hx-ct__row { display: flex; flex-direction: column; gap: .15em; padding: .7em .9em; border-radius: 1em; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); font-size: .78em; font-weight: 650; color: #a7aec4; }
#how .hx-ct__row b { font-size: .8em; letter-spacing: .12em; text-transform: uppercase; color: #6c7590; }
#how .hx-ct__btn { position: relative; }
#how .hx-ct__tap { position: absolute; left: 50%; top: 50%; width: 3em; height: 3em; margin: -1.5em 0 0 -1.5em; border-radius: 50%; border: 2px solid #fff; background: rgba(255,255,255,.25); opacity: 0; pointer-events: none; }
#how .hx-ct__ok { position: absolute; left: calc(1em + 15.2em); top: 56%; z-index: 3; display: flex; align-items: center; gap: .55em; padding: .7em 1.1em; border-radius: 999px; background: #16213a; border: 1px solid rgba(94,230,181,.45); box-shadow: 0 1em 2.4em rgba(0,0,0,.6); white-space: nowrap; translate: -50% 0; }
#how .hx-ct__ok svg { width: 1.4em; height: 1.4em; color: var(--mint); }
#how .hx-ct__stats { min-width: 0; padding: 1.3em 1.3em 1.2em; border-radius: 1.4em; background: #0d1322; border: 1px solid rgba(255,255,255,.09); box-shadow: 0 30px 80px -24px rgba(0,0,0,.75); }
#how .hx-ct__sh { display: flex; align-items: center; gap: .5em; margin: 0 0 1em; font-size: .8em; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #a7aec4; }
#how .hx-ct__sh svg { width: 1.3em; height: 1.3em; color: var(--gold); }
#how .hx-ct__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: .7em; margin-bottom: 1.1em; }
#how .hx-ct__kpi { position: relative; display: flex; flex-direction: column; padding: .9em 1em; border-radius: 1em; background: #111a2c; border: 1px solid rgba(255,255,255,.08); min-width: 0; }
#how .hx-ct__kpi b { font-size: 2.3em; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
#how .hx-ct__kpi small { font-size: .72em; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #a7aec4; line-height: 1.25; }
#how .hx-ct__kpi.is-gold { border-color: rgba(245,200,130,.4); background: linear-gradient(180deg, rgba(245,200,130,.1), rgba(245,200,130,.02)), #111a2c; }
#how .hx-ct__kpi.is-gold b { color: var(--gold); }
#how .hx-ct__plus { position: absolute; right: .8em; top: .7em; font-style: normal; font-size: .85em; font-weight: 800; color: var(--mint); opacity: 0; }
#how .hx-ct__bars { display: flex; align-items: flex-end; gap: .3em; height: 6.5em; padding-top: .4em; border-top: 1px dashed rgba(255,255,255,.08); }
#how .hx-ct__bars i { flex: 1; height: var(--h); border-radius: .3em .3em .1em .1em; background: #d4a560; opacity: .75; transform-origin: bottom; }
#how .hx-ct__bars i.hx-ct__last { background: linear-gradient(180deg, #ffe2aa, var(--gold)); opacity: 1; box-shadow: 0 0 1em rgba(245,200,130,.4); }
@container (max-width: 520px) {
  #how .hx-ct { --u: clamp(9px, 2.75cqi, 12px); gap: 1.2em; padding: 0; }
  #how .hx-ct__phone { width: 13em; }
  #how .hx-ct__kpis { grid-template-columns: 1fr; }
  #how .hx-ct__kpi b { font-size: 2em; }
  #how .hx-ct__bars { height: 5em; }
  #how .hx-ct__ok { left: .6em; top: 84%; translate: 0 0; }
  #how .hx-ct__row:last-child { display: none; }
  #how .hx-offer--big { font-size: .95em; flex: none; }
  #how .hx-offer--big .hx-offer__v { font-size: 3em; }
}

/* ============================================================ TIERS */
.lp #how .hx-db, .lp #how .hx-ct__stats, .lp #how .hx-ap__card { box-shadow: 0 18px 40px -16px rgba(0,0,0,.7); }
.lp #how .hx-ct__phone { box-shadow: 0 0 0 2px #050507, 0 24px 50px -18px rgba(0,0,0,.8); }
.reduced-motion #how .hx-ap__caret, .reduced-motion #how .hx-db__caret { display: none; }
@media (max-width: 899px) {
  #how .hx-story__chaps { gap: 96px; }
  #how .hx-sc { margin: 0 auto; }
}

/* ============================================================ V8 (D2) · DESKTOP CINEMA (html.hx-cine, how.js adds #how.is-pin)
   The section is pinned (ctx.scene) and exactly one viewport tall. Left: title, one chapter at a time, progress.
   Right: a big stage; the mock of the active chapter is scrubbed by scroll. Phones/reduced/touch never get here. */
.hx-cine #how.is-pin { height: 100vh; height: 100svh; min-height: 640px; padding: 0 var(--gutter); }
.hx-cine #how.is-pin > .container { height: 100%; max-width: var(--hx-max, 1680px); }
.hx-cine #how .hx-story.is-pinned { --top: clamp(92px, 12vh, 132px); display: grid; height: 100%; max-width: none; margin: 0;
  grid-template-columns: minmax(0, 4.3fr) minmax(0, 7.7fr); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: clamp(28px, 3.4vw, 80px);
  padding: var(--top) 0 clamp(36px, 6vh, 64px); }
.hx-cine #how .is-pinned > .hx-head { grid-column: 1; grid-row: 1; max-width: none; margin: 0; text-align: left; }
.hx-cine #how .is-pinned > .hx-head, .hx-cine #how .is-pinned > .hx-head * { text-align: left !important; }
.hx-cine #how .is-pinned > .hx-head h2 { font-size: clamp(2.1rem, 3.2vw, 4.4rem); line-height: 1.02; }
.hx-cine #how .is-pinned > .hx-head h2 > * { white-space: nowrap; }
.hx-cine #how .is-pinned .hx-story__chaps { grid-column: 1; grid-row: 2; display: grid; align-items: center; gap: 0; padding: 0; }
.hx-cine #how .is-pinned .hx-chap { grid-area: 1 / 1; display: block; min-height: 0; }
.hx-cine #how .is-pinned .hx-chap::before { display: none; }
.hx-cine #how .is-pinned .hx-chap__txt { max-width: 36rem; opacity: 1; transform: none; transition: none; }
.hx-cine #how .is-pinned .hx-chap__n { font-size: .9rem; margin-bottom: 18px; }
.hx-cine #how .is-pinned .hx-chap__t { font-size: clamp(2.2rem, 3.6vw, 4.2rem); line-height: .98; margin-bottom: 18px; }
.hx-cine #how .is-pinned .hx-chap__d { font-size: clamp(1.05rem, 1.3vw, 1.3rem); max-width: 36ch; }
.hx-cine #how .is-pinned .hx-chap__k { font-size: .95rem; margin-top: 26px; }
/* progress: a horizontal gold rail + 01 / 03 */
.hx-cine #how .is-pinned .hx-story__rail { display: flex; align-items: center; gap: 18px; position: static; grid-column: 1; grid-row: 3; width: auto; height: auto; background: none; }
.hx-cine #how .is-pinned .hx-story__rail i { position: relative; inset: auto; display: block; flex: 1; max-width: 340px; height: 2px; order: 2;
  background: linear-gradient(90deg, var(--gold), #ffe2aa); transform: scaleX(0); transform-origin: left; box-shadow: 0 0 14px rgba(245,200,130,.6); }
.hx-cine #how .hx-how-count { order: 1; margin: 0; font-family: var(--mono); font-size: .9rem; letter-spacing: .16em; color: var(--text-3); }
.hx-cine #how .hx-how-count b { color: var(--gold); font-size: 1.15rem; margin-right: 6px; }
/* stage */
.hx-cine #how .is-pinned .hx-story__stage { display: block; position: relative; top: auto; grid-column: 2; grid-row: 1 / -1; height: auto; margin: calc(var(--top) * -0.35) 0 0; perspective: none; }
.hx-cine #how .is-pinned .hx-story__stage::before { content: ""; position: absolute; inset: 4% -6% 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(245,200,130,.16), rgba(79,179,255,.06) 55%, transparent); }
.hx-cine #how .hx-how-num { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.hx-cine #how .hx-how-num b { grid-area: 1 / 1; font-size: clamp(14rem, 30vw, 34rem); font-weight: 900; line-height: .8; letter-spacing: -.06em; color: transparent;
  -webkit-text-stroke: 2px rgba(245,200,130,.2); text-shadow: 0 0 80px rgba(245,200,130,.08); }
.hx-cine #how .is-pinned .hx-story__stage .hx-sc { position: absolute; inset: 0; max-width: none; display: flex; flex-direction: column; justify-content: center; align-items: center;
  opacity: 1; visibility: visible; transform: none; transition: none; }
.hx-cine #how .is-pinned .hx-sc > .hx-ap, .hx-cine #how .is-pinned .hx-sc > .hx-db, .hx-cine #how .is-pinned .hx-sc > .hx-ct { width: min(100%, 1040px); }
.hx-cine #how .is-pinned .hx-ex { align-self: flex-end; margin-right: max(0px, (100% - 1040px) / 2); }
/* bigger mocks in the big stage (cqi math unchanged, higher caps) */
.hx-cine #how .is-pinned .hx-ap { --u: clamp(11px, 1.95cqi, 20px); }
.hx-cine #how .is-pinned .hx-db { --u: clamp(10px, 1.62cqi, 17px); }
.hx-cine #how .is-pinned .hx-ct { --u: clamp(10px, 1.85cqi, 19px); }
@media (max-height: 760px) {
  .hx-cine #how .is-pinned .hx-db { --u: clamp(10px, 1.45cqi, 14px); }
  .hx-cine #how .is-pinned .hx-ct { --u: clamp(9px, 1.6cqi, 15px); }
  .hx-cine #how .is-pinned .hx-ap { --u: clamp(10px, 1.75cqi, 16px); }
  .hx-cine #how .is-pinned .hx-chap__k { display: none; }
}
/* reduced motion / no-JS desktop: chapters as wide two-column rows (no lone column) */
@media (min-width: 1024px) {
  #how .hx-story:not(.is-sticky):not(.is-pinned) { max-width: var(--hx-max, 1680px); }
  #how .hx-story:not(.is-sticky):not(.is-pinned) .hx-chap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(32px, 4vw, 80px); }
  #how .hx-story:not(.is-sticky):not(.is-pinned) .hx-sc { max-width: none; }
}

/* V10 · F4 (Fable 14:40 #5): in the pinned desktop scene the chapter title is the hero of its chapter: it settles from
   .96 to 1.04 with a cream-to-gold fill, and the 01 / 03 counter is 1.5x bigger. */
.hx-cine #how .is-pinned .hx-chap__t { width: fit-content; transform-origin: 0 100%; scale: .96; transition: scale .9s var(--ease-out);
  background: linear-gradient(100deg, var(--text) 30%, #ffe2aa 70%, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hx-cine #how .is-pinned .hx-chap.is-on .hx-chap__t { scale: 1.04; }
.hx-cine #how .hx-how-count { font-size: 1.35rem; }
.hx-cine #how .hx-how-count b { font-size: 1.75rem; }
.reduced-motion .hx-cine #how .is-pinned .hx-chap__t { transition: none; }