@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-variable.ttf") format("truetype-variations");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/montserrat-variable.ttf") format("truetype-variations");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  /* Los mismos tokens aprobados en pauzen-exact.css. */
  --pz-black: #070604;
  --pz-warm-panel: #12100c;
  --pz-deep: #392a13;
  --pz-gold: #d1a13e;
  --pz-gold-light: #ffe09a;
  --pz-surface: #10171d;
  --pz-line: rgba(139, 164, 194, .2);
  --pz-text: #fff;
  --pz-muted: #94a8c0;
  --pz-radius-control: 14px;
  --pz-radius-card: 18px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --font: "Inter", system-ui, sans-serif;
  --font-display: "Montserrat", "Inter", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  color: var(--pz-text);
  background:
    radial-gradient(circle at 86% 6%, rgba(94, 61, 12, .43), transparent 26rem),
    radial-gradient(circle at 9% 92%, rgba(16, 38, 56, .55), transparent 29rem),
    linear-gradient(135deg, #050503 0%, #090704 52%, #100b04 100%);
  font-family: var(--font);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}

button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; touch-action: manipulation; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--pz-gold-light); outline-offset: 3px; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  color: #070604;
  background: var(--pz-gold-light);
  font-size: 13px;
  font-weight: 700;
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px clamp(18px, 4vw, 54px);
  border-bottom: 1px solid rgba(255, 224, 154, .12);
  background: rgba(7, 6, 4, .78);
  backdrop-filter: blur(18px);
}

.brand { display: inline-flex; align-items: center; gap: 11px; color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .22em; text-decoration: none; }
.brand-mark { width: 34px; height: 34px; display: grid; grid-template-columns: repeat(2, 4px); place-content: center; gap: 5px; border: 1px solid rgba(255, 224, 154, .27); border-radius: 11px; background: linear-gradient(145deg, rgba(57, 42, 19, .8), #10171d); }
.brand-mark i { width: 4px; height: 13px; border-radius: 3px; background: var(--pz-gold-light); }
.topbar-actions { display: flex; align-items: center; gap: 12px; }

.language-switch { display: flex; padding: 4px; border: 1px solid var(--pz-line); border-radius: 12px; background: #0c1217; }
.language-switch button { min-width: 42px; min-height: 34px; border: 0; border-radius: 8px; color: var(--pz-muted); background: transparent; font-size: 11px; font-weight: 700; cursor: pointer; }
.language-switch button.active { color: #080704; background: linear-gradient(105deg, var(--pz-gold), var(--pz-gold-light)); }

.close-link { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border: 1px solid var(--pz-line); border-radius: 12px; color: #fff; background: #10171d; font-size: 12px; font-weight: 600; text-decoration: none; }
.topbar-tour-link { min-height: 44px; display: inline-flex; align-items: center; padding: 0 4px; color: var(--pz-gold-light); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-decoration: none; }

/* Portada comercial. Comparte tokens y proporciones con el producto real. */
.sales-hero { position: relative; min-height: calc(100vh - 72px); min-height: calc(100dvh - 72px); display: grid; place-items: center; overflow: hidden; padding: clamp(54px, 8vw, 112px) clamp(20px, 5vw, 72px); }
.sales-hero::before { content: ""; position: absolute; inset: auto -14rem -20rem auto; width: 50rem; height: 50rem; border-radius: 50%; background: radial-gradient(circle, rgba(17, 70, 103, .32), transparent 68%); pointer-events: none; }
.sales-hero-grid { width: min(1320px, 100%); display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(370px, .72fr); align-items: center; gap: clamp(46px, 8vw, 118px); }
.sales-copy { position: relative; z-index: 2; min-width: 0; }
.sales-eyebrow { margin: 0; color: var(--pz-gold-light); font-size: 10px; font-weight: 700; line-height: 1.3; letter-spacing: .17em; }
.sales-copy h1 { max-width: 770px; margin: 18px 0 24px; font-family: var(--font-display); font-size: clamp(48px, 6.4vw, 88px); font-weight: 520; line-height: .99; letter-spacing: -.064em; text-wrap: balance; }
.sales-copy h1 span, .sales-copy h1 strong { display: block; }
.sales-copy h1 strong { color: var(--pz-gold-light); font-weight: 700; }
.sales-lead { max-width: 700px; margin: 0; color: #b7c5d6; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.68; }
.sales-manifesto { max-width: 650px; display: flex; align-items: center; gap: 16px; margin-top: 30px; padding: 17px 19px; border: 1px solid rgba(255, 224, 154, .22); border-radius: var(--pz-radius-card); background: linear-gradient(110deg, rgba(57, 42, 19, .62), rgba(16, 23, 29, .88)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035); }
.pause-symbol { width: 46px; height: 46px; flex: 0 0 auto; display: grid; grid-template-columns: repeat(2, 5px); place-content: center; gap: 6px; border-radius: 14px; color: #070604; background: linear-gradient(145deg, var(--pz-gold), var(--pz-gold-light)); box-shadow: 0 10px 30px rgba(209, 161, 62, .17); }
.pause-symbol i { width: 5px; height: 18px; border-radius: 4px; background: #080704; }
.sales-manifesto div { display: flex; flex-direction: column; gap: 4px; }
.sales-manifesto strong { font-family: var(--font-display); font-size: 16px; line-height: 1.25; }
.sales-manifesto span { color: var(--pz-muted); font-size: 13px; line-height: 1.45; }
.sales-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.sales-cta { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 0 22px; border: 1px solid var(--pz-line); border-radius: var(--pz-radius-control); color: #fff; background: #10171d; font-size: 12px; font-weight: 750; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; }
.sales-cta-primary { min-width: 220px; color: #080704; border-color: transparent; background: linear-gradient(105deg, #dfa93a, var(--pz-gold-light)); box-shadow: 0 12px 34px rgba(209, 161, 62, .14); }
.sales-cta:hover, .promise-link:hover { transform: translateY(-1px); }
.store-area { margin-top: 30px; }
.store-area > p { margin: 0 0 9px; color: #6f839b; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.store-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.store-badge { min-width: 158px; min-height: 51px; display: flex; align-items: center; gap: 10px; padding: 7px 13px; border: 1px solid var(--pz-line); border-radius: 12px; color: #fff; background: rgba(16, 23, 29, .88); text-align: left; opacity: 1; }
.store-badge:disabled { color: #fff; opacity: 1; cursor: default; }
.store-icon { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(255, 224, 154, .2); border-radius: 9px; color: var(--pz-gold-light); background: rgba(57, 42, 19, .5); font-size: 12px; font-weight: 800; }
.store-badge > span:last-child { display: flex; flex-direction: column; gap: 1px; }
.store-badge small { color: var(--pz-muted); font-size: 7px; font-weight: 650; letter-spacing: .12em; }
.store-badge strong { font-family: var(--font-display); font-size: 14px; line-height: 1.15; }

.sales-product { position: relative; min-height: 650px; display: grid; place-items: center; isolation: isolate; }
.sales-orbit { position: absolute; z-index: -1; border: 1px solid rgba(209, 161, 62, .18); border-radius: 50%; pointer-events: none; }
.orbit-one { width: 590px; height: 590px; background: radial-gradient(circle, rgba(209, 161, 62, .13), transparent 67%); }
.orbit-two { width: 450px; height: 450px; border-color: rgba(66, 133, 174, .2); transform: translate(80px, 72px); }
.focus-preview { position: relative; width: min(390px, 100%); min-height: 625px; overflow: hidden; padding: 34px 28px; border: 1px solid rgba(209, 161, 62, .52); border-radius: 52px; background: linear-gradient(180deg, rgba(57, 42, 19, .88), #070604 27%, #070604 100%); box-shadow: 0 42px 100px rgba(0, 0, 0, .62), inset 0 0 0 9px rgba(29, 48, 62, .56); }
.focus-preview::before { content: ""; position: absolute; inset: 0; background: linear-gradient(118deg, rgba(255, 255, 255, .045), transparent 25%); pointer-events: none; }
.focus-preview header { display: flex; justify-content: space-between; align-items: center; color: #fff; font-size: 10px; font-weight: 750; letter-spacing: .2em; }
.focus-preview header i { color: var(--pz-gold-light); font-style: normal; letter-spacing: -.18em; }
.preview-eyebrow { margin: 52px 0 9px; color: var(--pz-gold-light); font-size: 8px; font-weight: 750; letter-spacing: .12em; }
.focus-preview h2 { max-width: 285px; margin: 0; font-family: var(--font-display); font-size: 34px; font-weight: 520; line-height: 1.03; letter-spacing: -.045em; }
.preview-dial { position: relative; width: 220px; height: 220px; display: grid; place-items: center; margin: 32px auto 25px; border-radius: 50%; background: repeating-conic-gradient(from -90deg, rgba(209, 161, 62, .9) 0deg 1.1deg, transparent 1.1deg 9deg); }
.preview-dial::before { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: #070604; box-shadow: inset 0 0 0 2px rgba(255, 224, 154, .14), 0 0 45px rgba(209, 161, 62, .12); }
.preview-dial::after { content: ""; position: absolute; inset: 26px; border: 1px solid rgba(139, 164, 194, .22); border-radius: 50%; }
.preview-dial > div { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.preview-dial strong { font-size: 41px; font-weight: 450; font-variant-numeric: tabular-nums; letter-spacing: -.045em; }
.preview-dial small { margin-top: 6px; color: var(--pz-gold-light); font-size: 7px; font-weight: 700; letter-spacing: .1em; }
.preview-goal, .preview-block { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--pz-line); border-radius: 16px; background: #10171d; }
.preview-goal > span, .preview-block > span { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; color: var(--pz-gold-light); background: #4b3510; }
.preview-goal div { min-width: 0; display: flex; flex: 1 1 auto; flex-direction: column; gap: 3px; }
.preview-goal small { color: var(--pz-muted); font-size: 7px; letter-spacing: .13em; }
.preview-goal strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.preview-goal b { color: var(--pz-gold-light); font-size: 10px; }
.preview-block { margin-top: 9px; opacity: .72; }
.preview-block p { display: flex; flex-direction: column; gap: 3px; margin: 0; }
.preview-block strong { font-size: 11px; }
.preview-block small { color: var(--pz-muted); font-size: 8px; }
.sales-product-note { position: absolute; right: -16px; bottom: 28px; margin: 0; padding: 9px 13px; border: 1px solid rgba(255, 224, 154, .22); border-radius: 99px; color: var(--pz-gold-light); background: #10171d; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.capabilities { width: min(1320px, calc(100% - 40px)); margin: 0 auto; padding: clamp(70px, 9vw, 126px) 0; border-top: 1px solid rgba(255, 224, 154, .12); }
.capabilities-heading { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: clamp(40px, 9vw, 130px); margin-bottom: 42px; }
.capabilities-heading h2 { max-width: 740px; margin: 12px 0 0; font-family: var(--font-display); font-size: clamp(39px, 5vw, 68px); font-weight: 520; line-height: 1.01; letter-spacing: -.055em; text-wrap: balance; }
.capabilities-heading > p { margin: 0 0 5px; color: #b7c5d6; font-size: 16px; line-height: 1.65; }
.capability-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.capability-card { min-height: 230px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 23px; border: 1px solid var(--pz-line); border-radius: var(--pz-radius-card); background: linear-gradient(145deg, rgba(16, 23, 29, .96), rgba(9, 13, 16, .96)); }
.capability-card.capability-featured { grid-column: span 2; background: linear-gradient(130deg, rgba(57, 42, 19, .84), rgba(16, 23, 29, .96)); border-color: rgba(255, 224, 154, .28); }
.capability-card > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: var(--pz-gold-light); background: rgba(209, 161, 62, .14); font-size: 18px; }
.capability-card div > small { color: #62788f; font-size: 8px; font-weight: 700; letter-spacing: .16em; }
.capability-card h3 { margin: 8px 0 8px; font-family: var(--font-display); font-size: 18px; font-weight: 650; line-height: 1.18; letter-spacing: -.025em; }
.capability-card p { margin: 0; color: var(--pz-muted); font-size: 12px; line-height: 1.55; }

.brand-promise { width: min(1320px, calc(100% - 40px)); min-height: 290px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(24px, 5vw, 70px); margin: 0 auto clamp(76px, 9vw, 130px); padding: clamp(34px, 5vw, 68px); border: 1px solid rgba(255, 224, 154, .22); border-radius: 28px; background: radial-gradient(circle at 8% 20%, rgba(209, 161, 62, .19), transparent 26rem), linear-gradient(118deg, #151108, #10171d 72%); overflow: hidden; }
.promise-mark { width: 78px; height: 78px; display: grid; place-items: center; border-radius: 24px; color: #080704; background: linear-gradient(145deg, var(--pz-gold), var(--pz-gold-light)); box-shadow: 0 15px 44px rgba(209, 161, 62, .2); font-size: 30px; }
.brand-promise h2 { max-width: 760px; margin: 12px 0 13px; font-family: var(--font-display); font-size: clamp(34px, 4.4vw, 62px); font-weight: 520; line-height: 1.02; letter-spacing: -.052em; text-wrap: balance; }
.brand-promise div > p:last-child { max-width: 790px; margin: 0; color: #b7c5d6; font-size: 15px; line-height: 1.65; }
.promise-link { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 0 20px; border-radius: 14px; color: #080704; background: linear-gradient(105deg, #dfa93a, var(--pz-gold-light)); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.tour-intro { width: min(900px, calc(100% - 40px)); margin: 0 auto; padding: 20px 0 clamp(42px, 6vw, 78px); text-align: center; }
.tour-intro h2 { margin: 11px 0 14px; font-family: var(--font-display); font-size: clamp(39px, 5.3vw, 70px); font-weight: 520; line-height: 1.02; letter-spacing: -.055em; text-wrap: balance; }
.tour-intro > p:last-child { max-width: 660px; margin: 0 auto; color: #b7c5d6; font-size: 15px; line-height: 1.65; }

.tutorial-shell { width: min(1440px, 100%); min-height: calc(100vh - 72px); min-height: calc(100dvh - 72px); display: grid; grid-template-columns: minmax(380px, .82fr) minmax(560px, 1.18fr); margin: 0 auto; border-top: 1px solid rgba(139, 164, 194, .14); scroll-margin-top: 72px; }
.guide-panel { position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: center; padding: clamp(38px, 6vw, 88px) clamp(28px, 5vw, 72px); border-right: 1px solid rgba(139, 164, 194, .14); }
.guide-topline, .progress-meta { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.eyebrow, .section-label { margin: 0; color: var(--pz-gold-light); font-size: 10px; font-weight: 700; line-height: 1.3; letter-spacing: .16em; }
.step-counter { display: flex; align-items: baseline; gap: 5px; margin: 0; color: var(--pz-muted); font-size: 11px; }
.step-counter strong { color: #fff; font-size: 19px; font-variant-numeric: tabular-nums; }

.guide-copy { min-height: 310px; padding-top: clamp(32px, 6vh, 62px); }
.guide-copy h1 { max-width: 650px; margin: 12px 0 20px; font-size: clamp(38px, 4vw, 64px); font-weight: 500; line-height: .99; letter-spacing: -.055em; }
.step-description { max-width: 590px; margin: 0; color: #b7c5d6; font-size: clamp(15px, 1.5vw, 18px); line-height: 1.62; }

.step-tip { max-width: 580px; display: flex; align-items: center; gap: 13px; margin-top: 28px; padding: 15px 17px; border: 1px solid rgba(255, 224, 154, .2); border-radius: var(--pz-radius-card); background: linear-gradient(105deg, rgba(57, 42, 19, .58), rgba(16, 23, 29, .8)); }
.tip-icon { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; color: var(--pz-gold-light); background: rgba(209, 161, 62, .16); font-size: 20px; }
.step-tip p { display: flex; flex-direction: column; gap: 3px; margin: 0; }
.step-tip strong { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.step-tip p span { color: var(--pz-muted); font-size: 12px; line-height: 1.4; }

.chapter-nav { display: flex; flex-wrap: wrap; gap: 7px; margin: 38px 0 24px; }
.chapter-nav button { min-height: 36px; padding: 0 12px; border: 1px solid var(--pz-line); border-radius: 99px; color: var(--pz-muted); background: #0e141a; font-size: 10px; font-weight: 600; cursor: pointer; }
.chapter-nav button.active { border-color: rgba(255, 224, 154, .42); color: var(--pz-gold-light); background: rgba(57, 42, 19, .64); }

.guide-controls { display: grid; grid-template-columns: 1fr auto 1fr; gap: 9px; }
.control { min-height: 50px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 18px; border: 1px solid var(--pz-line); border-radius: var(--pz-radius-control); color: #fff; background: #10171d; font-size: 11px; font-weight: 700; letter-spacing: .06em; cursor: pointer; }
.control:disabled { opacity: .35; cursor: not-allowed; }
.control-primary { color: #080704; border-color: transparent; background: linear-gradient(105deg, #dfa93a, var(--pz-gold-light)); }
.control-pause { width: 106px; padding-inline: 12px; color: var(--pz-gold-light); }
.control-icon { font-size: 13px; letter-spacing: -.15em; }

.restart-button { align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 0; border: 0; color: var(--pz-muted); background: none; font-size: 11px; cursor: pointer; }
.keyboard-help { display: flex; align-items: center; gap: 8px; margin: 25px 0 0; color: #6f839b; font-size: 10px; }

.demo-panel { position: relative; min-width: 0; display: grid; grid-template-rows: 1fr auto; place-items: center; overflow: hidden; padding: 30px 24px 26px; isolation: isolate; }
.ambient { position: absolute; z-index: -1; border-radius: 50%; filter: blur(6px); pointer-events: none; }
.ambient-one { width: min(560px, 75vw); height: min(560px, 75vw); background: radial-gradient(circle, rgba(209, 161, 62, .15), transparent 67%); }
.ambient-two { right: -90px; bottom: 8%; width: 340px; height: 340px; background: radial-gradient(circle, rgba(16, 71, 105, .32), transparent 66%); }
.device-wrap { display: flex; flex-direction: column; align-items: center; min-height: 0; }

.demo-instruction { display: flex; align-items: center; gap: 9px; margin: 0 0 13px; color: var(--pz-muted); font-size: 10px; letter-spacing: .04em; }
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pz-gold); box-shadow: 0 0 0 0 rgba(209, 161, 62, .55); animation: pulse 1.8s ease-out infinite; }

/* El iframe muestra el prototipo real a 390 × 844; esta capa solo lo escala. */
.prototype-viewport { position: relative; width: min(342px, 88vw); aspect-ratio: 390 / 844; }
.prototype-scale { position: absolute; top: 0; left: 50%; width: 390px; height: 844px; overflow: hidden; border-radius: 56px; transform-origin: top left; }
.prototype-scale iframe { position: absolute; inset: 0; width: 390px; height: 844px; border: 0; background: transparent; }

.spotlight { position: absolute; z-index: 30; top: 0; left: 0; width: 0; height: 0; border: 2px solid var(--pz-gold-light); border-radius: 15px; box-shadow: 0 0 0 1100px rgba(0, 0, 0, .52), 0 0 28px rgba(209, 161, 62, .5); opacity: 0; pointer-events: none; transition: top .55s cubic-bezier(.2, .8, .2, 1), left .55s cubic-bezier(.2, .8, .2, 1), width .45s ease, height .45s ease, opacity .2s ease; }
.spotlight.show { opacity: 1; animation: spotlightBreathe 2s ease-in-out infinite; }

.demo-cursor { position: absolute; z-index: 42; top: 0; left: 0; width: 30px; height: 38px; opacity: 0; pointer-events: none; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); transition: top .7s cubic-bezier(.2, .78, .2, 1), left .7s cubic-bezier(.2, .78, .2, 1), opacity .2s ease; }
.demo-cursor.show { opacity: 1; }
.demo-cursor svg { width: 100%; height: 100%; overflow: visible; }
.demo-cursor path { fill: #fff; stroke: #070604; stroke-width: 2.4; }
.demo-cursor span { position: absolute; top: -12px; left: -12px; width: 28px; height: 28px; border: 1px solid var(--pz-gold-light); border-radius: 50%; opacity: 0; }
.demo-cursor.pressing span { animation: cursorPress 1.55s ease-out infinite; }

.callout { position: absolute; z-index: 41; top: 0; left: 0; max-width: 185px; display: flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid rgba(255, 224, 154, .4); border-radius: 10px; color: #fff; background: linear-gradient(145deg, #17232d, #0d151b); box-shadow: 0 12px 30px rgba(0, 0, 0, .45); font-size: 8px; line-height: 1.25; opacity: 0; pointer-events: none; transform: translateY(5px); transition: top .55s ease, left .55s ease, opacity .25s ease, transform .25s ease; }
.callout.show { opacity: 1; transform: translateY(0); }
.callout-index { flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; color: #070604; background: var(--pz-gold); font-size: 7px; font-weight: 800; }

.progress-area { width: min(500px, 85%); align-self: end; }
.progress-meta { margin-bottom: 8px; color: var(--pz-muted); font-size: 9px; }
.progress-meta strong { color: var(--pz-gold-light); font-variant-numeric: tabular-nums; }
.progress-track { height: 4px; overflow: hidden; border-radius: 8px; background: #23303a; }
.progress-track span { display: block; width: 7%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--pz-gold), var(--pz-gold-light)); transition: width .45s ease; }
.progress-dots { display: flex; justify-content: space-between; gap: 4px; margin-top: 12px; }
.progress-dots button { width: 10px; height: 10px; min-width: 10px; padding: 0; border: 1px solid #5e6e7d; border-radius: 50%; background: #10171d; cursor: pointer; }
.progress-dots button.complete { border-color: var(--pz-gold); background: var(--pz-gold); }
.progress-dots button.active { border-color: var(--pz-gold-light); background: var(--pz-gold-light); box-shadow: 0 0 0 4px rgba(209, 161, 62, .13); }
.noscript { position: fixed; z-index: 200; inset: 20px; display: grid; place-items: center; padding: 30px; border-radius: 24px; color: #fff; background: #10171d; text-align: center; }

@keyframes pulse { 70%, 100% { box-shadow: 0 0 0 8px rgba(209, 161, 62, 0); } }
@keyframes spotlightBreathe { 50% { border-color: var(--pz-gold); box-shadow: 0 0 0 1100px rgba(0, 0, 0, .5), 0 0 34px rgba(209, 161, 62, .6); } }
@keyframes cursorPress { 0% { transform: scale(.35); opacity: .9; } 75%, 100% { transform: scale(1.5); opacity: 0; } }

@media (max-height: 820px) and (min-width: 801px) {
  .tutorial-shell { min-height: 760px; }
  .prototype-viewport { width: 280px; }
  .guide-copy { min-height: 270px; padding-top: 34px; }
  .guide-copy h1 { font-size: clamp(36px, 3.4vw, 51px); }
  .chapter-nav { margin-block: 25px 18px; }
}

@media (max-width: 1000px) {
  .sales-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(330px, .66fr); gap: 38px; }
  .sales-copy h1 { font-size: clamp(47px, 6vw, 66px); }
  .sales-product { min-height: 590px; }
  .focus-preview { width: 350px; min-height: 570px; padding: 30px 25px; border-radius: 48px; }
  .preview-eyebrow { margin-top: 42px; }
  .focus-preview h2 { font-size: 30px; }
  .preview-dial { width: 190px; height: 190px; margin-block: 26px 20px; }
  .capability-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .capability-card.capability-featured { grid-column: span 2; }
  .brand-promise { grid-template-columns: auto minmax(0, 1fr); }
  .promise-link { grid-column: 2; justify-self: start; }
  .tutorial-shell { grid-template-columns: minmax(340px, .85fr) minmax(440px, 1.15fr); }
  .guide-panel { padding-inline: 30px; }
  .prototype-viewport { width: 320px; }
  .guide-copy h1 { font-size: 42px; }
}

@media (max-width: 800px) {
  .topbar { min-height: 62px; padding: 9px 14px; }
  .topbar-tour-link { display: none; }
  .close-link span:first-child { display: none; }
  .close-link { width: 42px; padding: 0; justify-content: center; }
  .sales-hero { min-height: auto; padding: 58px 18px 72px; }
  .sales-hero-grid { grid-template-columns: 1fr; gap: 62px; }
  .sales-copy h1 { max-width: 670px; font-size: clamp(45px, 11vw, 70px); }
  .sales-lead { font-size: 16px; }
  .sales-product { min-height: 610px; }
  .focus-preview { width: min(370px, 92vw); }
  .sales-product-note { right: max(0px, calc(50% - 205px)); }
  .capabilities { width: min(100% - 36px, 680px); }
  .capabilities-heading { grid-template-columns: 1fr; gap: 20px; }
  .capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .capability-card.capability-featured { grid-column: span 2; }
  .brand-promise { width: calc(100% - 36px); grid-template-columns: 1fr; gap: 24px; }
  .promise-link { grid-column: auto; justify-self: stretch; }
  .tutorial-shell { min-height: auto; display: flex; flex-direction: column-reverse; scroll-margin-top: 62px; }
  .guide-panel { padding: 28px 18px calc(28px + var(--safe-bottom)); border-top: 1px solid var(--pz-line); border-right: 0; }
  .guide-copy { min-height: 0; padding-top: 25px; }
  .guide-copy h1 { margin-bottom: 14px; font-size: clamp(34px, 10vw, 48px); }
  .step-description { font-size: 15px; }
  .chapter-nav { margin: 26px 0 18px; flex-wrap: nowrap; overflow-x: auto; padding: 4px; scrollbar-width: none; }
  .chapter-nav::-webkit-scrollbar { display: none; }
  .chapter-nav button { flex: 0 0 auto; }
  .keyboard-help { display: none; }
  .demo-panel { min-height: 790px; padding: 22px 8px 20px; }
  .prototype-viewport { width: min(342px, 91vw); }
  .progress-area { width: min(400px, 88%); margin-top: 18px; }
  .callout { max-width: 165px; }
}

@media (max-width: 430px) {
  .topbar { gap: 8px; padding-inline: 10px; }
  .brand { font-size: 13px; letter-spacing: .16em; }
  .brand-mark { width: 32px; height: 32px; }
  .topbar-actions { width: 84px; min-width: 84px; flex: 0 0 84px; gap: 0; }
  .close-link { display: none; }
  .language-switch { width: 100%; }
  .language-switch button { min-width: 0; flex: 1 1 0; }
  .sales-hero { padding-inline: 16px; }
  .sales-copy h1 { font-size: clamp(42px, 13.5vw, 57px); }
  .sales-actions, .store-badges { display: grid; grid-template-columns: 1fr; }
  .sales-cta, .sales-cta-primary, .store-badge { width: 100%; }
  .sales-manifesto { align-items: flex-start; padding: 15px; }
  .pause-symbol { width: 42px; height: 42px; }
  .sales-product { min-height: 565px; }
  .focus-preview { min-height: 545px; padding: 28px 22px; border-radius: 44px; }
  .preview-eyebrow { margin-top: 37px; }
  .focus-preview h2 { font-size: 28px; }
  .preview-dial { width: 176px; height: 176px; margin-block: 24px 17px; }
  .preview-dial strong { font-size: 35px; }
  .sales-product-note { display: none; }
  .capabilities { width: calc(100% - 32px); padding-block: 66px; }
  .capabilities-heading h2 { font-size: 39px; }
  .capability-grid { grid-template-columns: 1fr; }
  .capability-card.capability-featured { grid-column: auto; }
  .capability-card { min-height: 206px; }
  .brand-promise { width: calc(100% - 32px); margin-bottom: 76px; padding: 30px 22px; border-radius: 22px; }
  .promise-mark { width: 60px; height: 60px; border-radius: 18px; }
  .tour-intro { width: calc(100% - 32px); }
  .tour-intro h2 { font-size: 39px; }
  .demo-panel { min-height: 720px; }
  .prototype-viewport { width: min(318px, 91vw); }
  .guide-controls { grid-template-columns: 1fr 1fr; }
  .control-pause { grid-row: 2; grid-column: 1 / -1; width: 100%; }
  .step-tip { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .demo-cursor { display: none; }
  .spotlight.show { box-shadow: 0 0 0 1100px rgba(0, 0, 0, .42), 0 0 0 3px rgba(209, 161, 62, .18); }
}

@media (forced-colors: active) {
  .spotlight { border: 3px solid Highlight; box-shadow: none; }
  .control-primary, .language-switch button.active, .sales-cta-primary, .promise-link { color: ButtonText; background: ButtonFace; }
}