/* On-Hold Technologies — Bootstrap 5.3 theme
   Compiled from scss/main.scss. Load AFTER bootstrap.min.css. */

/* ===== tokens ===== */
:root, [data-bs-theme=dark] {
  --oht-ink: #141210; --oht-ink-2: #1F1C18; --oht-paper: #F5F0E6; --oht-signal: #2565A8; --oht-glow: #8FBDF0;
  --oht-muted: #8A8378; --oht-meter: #7FA88C; --oht-amber: #E4772F;
  --oht-rule: rgba(245,240,230,.08); --oht-rule-2: rgba(245,240,230,.14); --oht-rule-3: rgba(245,240,230,.28);
  --oht-display: 'Fraunces', Georgia, serif;

  --bs-body-bg: var(--oht-ink); --bs-body-color: var(--oht-paper);
  --bs-body-font-family: 'Instrument Sans', system-ui, sans-serif; --bs-body-font-size: 1.0625rem; --bs-body-line-height: 1.55;
  --bs-heading-color: var(--oht-paper); --bs-secondary-color: var(--oht-muted); --bs-tertiary-bg: var(--oht-ink-2); --bs-secondary-bg: var(--oht-ink-2);
  --bs-border-color: var(--oht-rule-2); --bs-border-color-translucent: var(--oht-rule);
  --bs-primary: var(--oht-signal); --bs-primary-rgb: 37,101,168; --bs-link-color: var(--oht-glow); --bs-link-color-rgb: 143,189,240;
  --bs-link-hover-color: var(--oht-paper); --bs-link-hover-color-rgb: 245,240,230; --bs-focus-ring-color: rgba(143,189,240,.5);
  --bs-border-radius: .875rem; --bs-border-radius-lg: 1.25rem; --bs-border-radius-xl: 1.5rem;
  --bs-emphasis-color: var(--oht-paper); --bs-light-rgb: 245,240,230;
}
html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body { position: relative; }
body::before { content: ''; position: fixed; inset: 0; z-index: 9000; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
a { text-decoration: none; }
button, .btn { font-family: inherit; }
:focus-visible { outline: 2px solid var(--oht-glow); outline-offset: 3px; }
.btn:focus-visible { box-shadow: 0 0 0 .25rem rgba(143,189,240,.35); }
::placeholder { color: var(--oht-muted) !important; opacity: 1; }
img { max-width: 100%; }
@media (max-width: 991.98px) { body { padding-bottom: 76px; } }

/* ===== keyframes ===== */
@keyframes whum { from { transform: scaleY(.55); } to { transform: scaleY(1.25); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
@keyframes glow { 0%,100% { box-shadow: 0 0 0 8px rgba(37,101,168,.14), 0 0 48px rgba(37,101,168,.45); } 50% { box-shadow: 0 0 0 12px rgba(37,101,168,.08), 0 0 64px rgba(143,189,240,.6); } }
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ===== typography ===== */
.font-display, .display-hero, .display-lg, .display-md, .display-sm, .display-xs { font-family: var(--oht-display); font-weight: 400; letter-spacing: -.03em; text-wrap: balance; color: var(--oht-paper); }
.display-hero { font-size: clamp(2.5rem, 6.2vw, 5rem); line-height: .94; letter-spacing: -.035em; font-variation-settings: 'SOFT' 70, 'WONK' 1, 'opsz' 144; }
.display-lg { font-size: clamp(2.125rem, 4.4vw, 3.5rem); line-height: .98; font-variation-settings: 'SOFT' 60, 'WONK' 1, 'opsz' 144; }
.display-md { font-size: clamp(1.75rem, 3.2vw, 2.75rem); line-height: 1; font-variation-settings: 'SOFT' 60, 'WONK' 1, 'opsz' 144; }
.display-sm { font-size: clamp(1.375rem, 2.2vw, 1.75rem); line-height: 1.1; font-weight: 500; letter-spacing: -.02em; font-variation-settings: 'SOFT' 50, 'opsz' 60; }
.display-xs { font-size: 1.25rem; line-height: 1.15; font-weight: 500; letter-spacing: -.01em; font-variation-settings: 'SOFT' 40, 'opsz' 32; }
.display-hero em, .display-lg em, .display-md em { font-style: italic; color: var(--oht-glow); }
.eyebrow { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--oht-muted); display: flex; align-items: center; gap: .75rem; }
.eyebrow.eyebrow-rule::before { content: ''; width: 28px; height: 1px; background: var(--oht-signal); flex: none; }
.eyebrow-glow { color: var(--oht-glow); }
.lede { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.5; color: rgba(245,240,230,.78); text-wrap: pretty; }
.text-muted, .text-body-secondary { color: var(--oht-muted) !important; }
.text-glow { color: var(--oht-glow) !important; }
.text-meter { color: var(--oht-meter) !important; }
.text-paper { color: var(--oht-paper) !important; }
.text-pretty { text-wrap: pretty; }
.tabular { font-variant-numeric: tabular-nums; }
.small-caps { font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--oht-muted); }
.num { font-size: .75rem; color: var(--oht-muted); font-variant-numeric: tabular-nums; }

/* ===== layout ===== */
.container { --bs-gutter-x: 3rem; max-width: 1320px; }
@media (max-width: 575.98px) { .container { --bs-gutter-x: 2.5rem; } .container .row { --bs-gutter-x: 1.5rem; } }
body, main { overflow-x: clip; }
.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section-sm { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section-raised { background: var(--oht-ink-2); border-top: 1px solid var(--oht-rule); border-bottom: 1px solid var(--oht-rule); }
.section-paper { background: var(--oht-paper); color: var(--oht-ink); }
.section-paper .display-lg, .section-paper .display-md, .section-paper .display-hero, .section-paper .display-sm, .section-paper h1, .section-paper h2, .section-paper h3 { color: var(--oht-ink); }
.section-paper .display-lg em, .section-paper .display-md em { color: var(--oht-signal); }
.section-paper .text-muted, .section-paper .eyebrow, .section-paper .lede { color: #5b554b !important; }
.section-paper .lede { color: #3a352e !important; }
.section-paper a { color: var(--oht-signal); }
.section-paper a.btn-primary, .section-paper .btn-primary { color: var(--oht-paper); }
.section-paper a.btn-primary:hover, .section-paper .btn-primary:hover { color: var(--oht-ink); }
.section-paper a.btn-outline-ink, .section-paper .btn-outline-ink { color: var(--oht-ink); }
.section-paper .cta-pair { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
@media (max-width: 575.98px) { .section-paper .cta-pair .btn-lg { --bs-btn-padding-x: 1.25rem; --bs-btn-padding-y: .875rem; --bs-btn-font-size: 1rem; } }
.section-paper hr, .section-paper .rule { border-color: rgba(20,18,16,.12); }
.hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3.5rem, 8vw, 6rem); background: radial-gradient(1000px 520px at 15% 0%, rgba(37,101,168,.12), transparent 60%); }
.rule { border-top: 1px solid var(--oht-rule-2); }
.rule-soft { border-top: 1px solid var(--oht-rule); }
.sticky-lg-top-nav { top: 96px; }

/* ===== header / nav ===== */
.site-header { position: sticky; top: 0; z-index: 1030; background: rgba(20,18,16,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--oht-rule); }
.site-header .navbar { min-height: 72px; padding-block: 0; }
.logo { display: inline-flex; align-items: center; color: var(--oht-paper); }
.logo svg { width: 130px; height: 60px; display: block; }
@media (max-width: 575.98px) { .logo svg { width: 108px; height: 50px; } }
.nav-main .nav-link { color: rgba(245,240,230,.72); font-size: .9375rem; font-weight: 500; padding: 0 .625rem; min-height: 72px; display: inline-flex; align-items: center; gap: .375rem; box-shadow: inset 0 -2px 0 transparent; }
.nav-main .nav-link:hover, .nav-main .nav-link.show { color: var(--oht-paper); }
.nav-main .nav-link.active { color: var(--oht-paper); box-shadow: inset 0 -2px 0 var(--oht-signal); }
.nav-main .dropdown-toggle::after { display: none; }
.nav-main .dropdown-toggle .fa-chevron-down { font-size: 9px; opacity: .6; transition: transform .2s; }
.nav-main .dropdown-toggle.show .fa-chevron-down { transform: rotate(180deg); }
.nav-main .dropdown { position: static; }
.dropdown-menu-mega { --bs-dropdown-bg: rgba(20,18,16,.97); --bs-dropdown-border-color: var(--oht-rule); --bs-dropdown-border-radius: 0; --bs-dropdown-padding-y: 0;
  left: 0; right: 0; width: 100%; margin-top: 0 !important; backdrop-filter: blur(18px); box-shadow: 0 40px 80px rgba(0,0,0,.6); border-width: 0 0 1px; animation: rise .25s cubic-bezier(.2,.7,.2,1) both; }
.dropdown-menu-mega .container { padding-block: 2rem 2.25rem; }
.mega-item { display: flex; flex-direction: column; gap: .25rem; padding: 1rem 1.125rem; border-radius: var(--bs-border-radius); border: 1px solid transparent; color: var(--oht-paper); }
.mega-item:hover { background: var(--oht-ink-2); border-color: var(--oht-rule); color: var(--oht-paper); }
.mega-item small { color: var(--oht-muted); font-size: .875rem; line-height: 1.45; }
.mega-side { border-left: 1px solid var(--oht-rule); padding-left: 2.5rem; }
.phone-link { color: var(--oht-paper); font-weight: 600; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.phone-link:hover { color: var(--oht-glow); }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--oht-rule-2); background: transparent; color: var(--oht-paper); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.icon-btn:hover { border-color: var(--oht-glow); color: var(--oht-glow); }
.hamburger { width: 44px; height: 44px; border: 0; background: transparent; display: inline-flex; flex-direction: column; justify-content: center; gap: 6px; padding: 0 10px; }
.hamburger span { display: block; height: 2px; background: var(--oht-paper); border-radius: 2px; }
.hamburger span:last-child { width: 60%; }
.offcanvas { --bs-offcanvas-bg: var(--oht-ink-2); --bs-offcanvas-color: var(--oht-paper); --bs-offcanvas-border-color: var(--oht-rule); --bs-offcanvas-width: min(400px, 92vw); }
.offcanvas .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }
.offcanvas-nav .nav-link { color: var(--oht-paper); font-family: var(--oht-display); font-variation-settings: 'SOFT' 50, 'opsz' 60; font-size: 1.625rem; letter-spacing: -.02em; padding: .875rem 0; border-top: 1px solid var(--oht-rule); display: flex; justify-content: space-between; align-items: center; }
.offcanvas-nav .nav-link small { font-family: var(--bs-body-font-family); font-size: .75rem; color: var(--oht-muted); letter-spacing: 0; }
.offcanvas-nav .sub { padding: 0 0 .75rem 0; display: grid; gap: .125rem; }
.offcanvas-nav .sub a { color: rgba(245,240,230,.8); font-size: .9375rem; padding: .5rem 0 .5rem 1rem; border-left: 1px solid var(--oht-rule-2); }
.offcanvas-nav .sub a:hover { color: var(--oht-glow); }
.offcanvas-nav .accordion-button { background: transparent; color: var(--oht-paper); box-shadow: none; padding: 0; }
.offcanvas-nav .accordion-button::after { filter: invert(1) grayscale(1) brightness(1.4); width: .875rem; height: .875rem; background-size: .875rem; }
.offcanvas-nav .accordion-item { background: transparent; border: 0; }
.offcanvas-nav .accordion-body { padding: 0; }

/* mobile bottom bar */
.mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; background: rgba(20,18,16,.92); backdrop-filter: blur(14px); border-top: 1px solid var(--oht-rule); padding: .625rem 1rem calc(.625rem + env(safe-area-inset-bottom)); display: flex; gap: .625rem; }
.mobile-bar .btn { flex: 1; min-height: 48px; }

/* ===== buttons ===== */
.btn { --bs-btn-border-radius: 999px; --bs-btn-padding-x: 1.5rem; --bs-btn-padding-y: .8125rem; --bs-btn-font-weight: 600; --bs-btn-font-size: 1rem; --bs-btn-line-height: 1.2; display: inline-flex; align-items: center; justify-content: center; gap: .625rem; white-space: nowrap; }
.btn-sm { --bs-btn-padding-x: 1.25rem; --bs-btn-padding-y: .6875rem; --bs-btn-font-size: .875rem; }
.btn-lg { --bs-btn-padding-x: 1.75rem; --bs-btn-padding-y: 1rem; --bs-btn-font-size: 1.0625rem; }
.btn-primary { --bs-btn-bg: var(--oht-signal); --bs-btn-border-color: var(--oht-signal); --bs-btn-color: var(--oht-paper); --bs-btn-hover-bg: var(--oht-glow); --bs-btn-hover-border-color: var(--oht-glow); --bs-btn-hover-color: var(--oht-ink); --bs-btn-active-bg: var(--oht-glow); --bs-btn-active-border-color: var(--oht-glow); --bs-btn-active-color: var(--oht-ink); --bs-btn-disabled-bg: rgba(37,101,168,.35); --bs-btn-disabled-border-color: transparent; --bs-btn-disabled-color: rgba(245,240,230,.6); }
.btn-outline-light { --bs-btn-color: var(--oht-paper); --bs-btn-border-color: var(--oht-rule-3); --bs-btn-hover-bg: transparent; --bs-btn-hover-border-color: var(--oht-paper); --bs-btn-hover-color: var(--oht-paper); --bs-btn-active-bg: transparent; --bs-btn-active-border-color: var(--oht-paper); --bs-btn-active-color: var(--oht-paper); }
.btn-paper { --bs-btn-bg: var(--oht-paper); --bs-btn-border-color: var(--oht-paper); --bs-btn-color: var(--oht-ink); --bs-btn-hover-bg: var(--oht-glow); --bs-btn-hover-border-color: var(--oht-glow); --bs-btn-hover-color: var(--oht-ink); --bs-btn-active-bg: var(--oht-glow); --bs-btn-active-border-color: var(--oht-glow); --bs-btn-active-color: var(--oht-ink); }
.btn-outline-ink { --bs-btn-color: var(--oht-ink); --bs-btn-border-color: rgba(20,18,16,.3); --bs-btn-hover-bg: transparent; --bs-btn-hover-border-color: var(--oht-ink); --bs-btn-hover-color: var(--oht-ink); --bs-btn-active-bg: transparent; --bs-btn-active-color: var(--oht-ink); --bs-btn-active-border-color: var(--oht-ink); }
.btn-link { --bs-btn-color: var(--oht-glow); --bs-btn-hover-color: var(--oht-paper); --bs-btn-padding-x: 0; --bs-btn-padding-y: 0; text-decoration: none; font-weight: 600; }
.link-quiet { color: var(--oht-muted); } .link-quiet:hover { color: var(--oht-paper); }
.link-paper { color: var(--oht-paper); font-weight: 600; } .link-paper:hover { color: var(--oht-glow); }

/* chips */
.chip { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid var(--oht-rule-2); border-radius: 999px; padding: .5rem .875rem; font-size: .875rem; font-weight: 500; color: var(--oht-paper); background: transparent; white-space: nowrap; }
.chip:hover { border-color: var(--oht-rule-3); color: var(--oht-paper); }
.chip.active { background: rgba(37,101,168,.12); border-color: var(--oht-signal); color: var(--oht-glow); }
.chip .count { font-size: .75rem; color: var(--oht-muted); font-variant-numeric: tabular-nums; }
.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 767.98px) { .chip-row.chip-scroll { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--bs-gutter-x, 1.25rem)); padding-inline: var(--bs-gutter-x, 1.25rem); padding-bottom: .25rem; scrollbar-width: none; } .chip-row.chip-scroll::-webkit-scrollbar { display: none; } }
.chip-static { pointer-events: none; }

/* pills / tabs */
.nav-pills { --bs-nav-pills-border-radius: 999px; --bs-nav-pills-link-active-bg: var(--oht-paper); --bs-nav-pills-link-active-color: var(--oht-ink); --bs-nav-link-color: var(--oht-muted); --bs-nav-link-hover-color: var(--oht-paper); --bs-nav-link-font-size: .875rem; --bs-nav-link-font-weight: 600; --bs-nav-link-padding-x: 1rem; --bs-nav-link-padding-y: .5rem; gap: .25rem; }
.nav-pills.pills-boxed { background: var(--oht-ink); border: 1px solid var(--oht-rule-2); border-radius: 999px; padding: .25rem; display: inline-flex; }
.nav-pills.pills-outline .nav-link { border: 1px solid var(--oht-rule-2); color: var(--oht-paper); }
.nav-pills.pills-outline .nav-link.active { background: rgba(37,101,168,.12); border-color: var(--oht-signal); color: var(--oht-glow); }

/* ===== cards ===== */
.card-dark { background: var(--oht-ink-2); border: 1px solid var(--oht-rule); border-radius: var(--bs-border-radius-lg); color: var(--oht-paper); }
.card-ink { background: var(--oht-ink); border: 1px solid var(--oht-rule); border-radius: var(--bs-border-radius-lg); }
.card-paper { background: var(--oht-paper); color: var(--oht-ink); border-radius: var(--bs-border-radius-lg); }
.card-glass { background: rgba(31,28,24,.96); backdrop-filter: blur(16px); border: 1px solid rgba(245,240,230,.12); border-radius: var(--bs-border-radius-lg); }
.shadow-deep { box-shadow: 0 40px 100px rgba(0,0,0,.5); }
.shadow-mid { box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.photo { position: relative; border-radius: var(--bs-border-radius-lg); overflow: hidden; background: var(--oht-ink-2); }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-fade::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(20,18,16,.8)); pointer-events: none; }
.photo-caption { position: absolute; left: 1.5rem; right: 1.5rem; bottom: 1.25rem; z-index: 1; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.stat-value { font-family: var(--oht-display); font-variation-settings: 'SOFT' 60, 'opsz' 144; font-size: clamp(3rem, 6vw, 5rem); line-height: 1; letter-spacing: -.04em; }
.stat-value small { font-size: .4em; color: var(--oht-muted); letter-spacing: 0; margin-left: .1em; }
.service-tile { text-align: left; background: var(--oht-ink); border: 0; color: var(--oht-paper); padding: 1.875rem 1.75rem 2rem; display: flex; flex-direction: column; gap: .875rem; min-height: 220px; width: 100%; height: 100%; }
.service-tile:hover { background: var(--oht-ink-2); color: var(--oht-paper); }
.service-grid { display: grid; gap: 1px; background: var(--oht-rule-2); border: 1px solid var(--oht-rule-2); border-radius: var(--bs-border-radius-lg); overflow: hidden; grid-template-columns: repeat(2, minmax(0,1fr)); }
.service-grid > :last-child { grid-column: 1 / -1; }
@media (max-width: 575.98px) { .service-grid { grid-template-columns: 1fr; } }
.testimonial { background: var(--oht-ink-2); border: 1px solid var(--oht-rule); border-radius: var(--bs-border-radius-lg); padding: 1.75rem; height: 100%; margin: 0; display: flex; flex-direction: column; gap: 1rem; }
.testimonial .mark { font-family: var(--oht-display); font-size: 3.5rem; line-height: .6; color: var(--oht-signal); background: transparent; padding: 0; height: 2.2rem; }
.testimonial blockquote { font-family: var(--oht-display); font-variation-settings: 'SOFT' 50, 'opsz' 32; font-size: 1.25rem; line-height: 1.35; margin: 0; flex: 1; }
.testimonial figcaption { font-size: .875rem; color: var(--oht-muted); }
.testimonial figcaption b { color: var(--oht-paper); font-weight: 600; }
.badge-outline { border: 1px solid var(--oht-rule-2); border-radius: 999px; padding: .375rem .75rem; font-size: .75rem; font-weight: 600; color: var(--oht-muted); }
.num-list > * { display: grid; grid-template-columns: 3rem 1fr; gap: 1.25rem; padding: 1.5rem 0; border-top: 1px solid var(--oht-rule-2); }
.num-list > :first-child { border-top: 0; }
.num-list .num { padding-top: .25rem; }
.key-list > * { display: grid; grid-template-columns: 6rem 1fr; gap: 1.25rem; padding: 1.25rem 0; border-top: 1px solid var(--oht-rule-2); }
.key-list .k { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--oht-glow); padding-top: .3rem; }
@media (max-width: 575.98px) { .key-list > * { grid-template-columns: 1fr; gap: .375rem; } }
.script-quote { font-family: var(--oht-display); font-variation-settings: 'SOFT' 50, 'opsz' 32; font-style: italic; font-size: 1.0625rem; color: rgba(245,240,230,.85); border-left: 2px solid var(--oht-signal); padding-left: 1rem; margin-top: .75rem; }
.dot-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.dot-list li { display: grid; grid-template-columns: 14px 1fr; gap: .75rem; font-size: .9375rem; line-height: 1.55; color: var(--oht-muted); }
.dot-list li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--oht-signal); margin-top: .55rem; }
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .625rem; }
.check-list li { display: flex; gap: .75rem; font-size: .9375rem; line-height: 1.5; }
.check-list li i { color: var(--oht-glow); margin-top: .25rem; font-size: .8125rem; }

/* ===== player ===== */
.play-btn { width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--oht-signal); color: var(--oht-paper); display: inline-flex; align-items: center; justify-content: center; flex: none; transition: background .15s, box-shadow .15s; }
.play-btn:hover { background: var(--oht-glow); color: var(--oht-ink); }
.play-btn.sm { width: 42px; height: 42px; } .play-btn.sm svg { width: 18px; height: 18px; }
.play-btn.md { width: 48px; height: 48px; } .play-btn.md svg { width: 20px; height: 20px; }
.play-btn svg { width: 24px; height: 24px; fill: currentColor; }
.play-btn .spinner { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(245,240,230,.3); border-top-color: var(--oht-paper); animation: spin .8s linear infinite; display: none; }
.play-btn .ic { display: none; }
.play-btn[data-state=idle] .ic-play, .play-btn[data-state=paused] .ic-play { display: block; }
.play-btn[data-state=playing] .ic-pause { display: block; }
.play-btn[data-state=complete] .ic-replay { display: block; }
.play-btn[data-state=error] .ic-error { display: block; }
.play-btn[data-state=loading] .spinner { display: block; }
.play-btn[data-state=playing] { background: var(--oht-glow); color: var(--oht-ink); animation: glow 1.6s ease-in-out infinite; }
.play-btn[data-state=paused], .play-btn[data-state=loading] { box-shadow: 0 0 0 4px rgba(37,101,168,.12); }
.play-btn[data-state=error] { background: rgba(37,101,168,.35); }
.wave { display: flex; gap: 2px; height: 44px; align-items: center; width: 100%; }
.wave.sm { height: 26px; }
.wave span { flex: 1; min-width: 1px; border-radius: 2px; align-self: center; background: rgba(245,240,230,.16); transition: background .15s; }
.wave span.played { background: var(--oht-signal); }
.wave.is-playing span.played { background: var(--oht-glow); }
.wave.is-playing span.head { animation: whum .6s ease-in-out infinite alternate; box-shadow: 0 0 10px rgba(143,189,240,.7); }
.wave.is-error span { background: rgba(37,101,168,.22); }
.state-label { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--oht-muted); }
.state-label[data-state=playing] { color: var(--oht-glow); } .state-label[data-state=paused] { color: var(--oht-paper); } .state-label[data-state=complete] { color: var(--oht-meter); } .state-label[data-state=error] { color: var(--oht-amber); }
.player[data-state=playing] { border-color: rgba(37,101,168,.55); }
.player[data-state=paused], .player[data-state=loading], .player[data-state=complete] { border-color: rgba(37,101,168,.3); }
.sample-card { background: var(--oht-ink-2); border: 1px solid var(--oht-rule); border-radius: var(--bs-border-radius-lg); padding: 1.375rem 1.375rem 1.25rem; display: flex; flex-direction: column; gap: .875rem; height: 100%; transition: border-color .2s; }
.sample-card .meta { font-size: .8125rem; color: var(--oht-muted); display: flex; gap: 1rem; flex-wrap: wrap; }
.sample-card .meta b { color: var(--oht-paper); font-weight: 500; }
.sample-card .meta span span { color: var(--oht-muted); }
.sample-card .strategy { font-size: .9375rem; line-height: 1.5; color: rgba(245,240,230,.78); margin: 0; text-wrap: pretty; flex: 1; }
.sample-card .times { display: flex; justify-content: space-between; font-size: .75rem; color: var(--oht-muted); font-variant-numeric: tabular-nums; }
.sample-row { display: flex; gap: .875rem; align-items: center; background: var(--oht-ink-2); border: 1px solid var(--oht-rule); border-radius: 1rem; padding: .875rem 1rem; transition: border-color .2s; }
.sample-row .t { font-family: var(--oht-display); font-variation-settings: 'SOFT' 40, 'opsz' 32; font-size: 1.0625rem; font-weight: 500; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sample-row .s { font-size: .75rem; color: var(--oht-muted); margin: .1875rem 0 .375rem; }
.featured-player { background: rgba(31,28,24,.92); backdrop-filter: blur(14px); border: 1px solid var(--oht-rule-2); border-radius: var(--bs-border-radius-lg); padding: 1.125rem 1.25rem; }
.mini-player { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035; display: flex; justify-content: center; padding: 0 1rem 1rem; pointer-events: none; }
.mini-player.hidden { display: none; }
.mini-player .inner { pointer-events: auto; width: min(760px, 100%); background: rgba(31,28,24,.96); backdrop-filter: blur(16px); border: 1px solid var(--oht-rule-2); border-radius: 999px; padding: .5rem .875rem .5rem .5rem; display: flex; gap: .75rem; align-items: center; box-shadow: 0 30px 80px rgba(0,0,0,.55); }
.mini-player .track { flex: 1; height: 4px; background: var(--oht-rule-2); border-radius: 2px; cursor: pointer; position: relative; }
.mini-player .track > div { height: 100%; width: 0; background: var(--oht-glow); border-radius: 2px; }
.mini-player .name { font-size: .875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.mini-player .sub { font-size: .75rem; color: var(--oht-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-player .time { font-size: .75rem; color: var(--oht-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 991.98px) { .mini-player { bottom: 68px; padding-bottom: .5rem; } .mini-player .sub, .mini-player .time { display: none; } .mini-player .inner { border-radius: 1rem; } }

/* ===== forms ===== */
.form-control, .form-select { --bs-body-bg: var(--oht-ink); background: var(--oht-ink); border-color: var(--oht-rule-2); color: var(--oht-paper); border-radius: .875rem; padding: .875rem 1rem; font-size: 1rem; }
.form-control:focus { background: var(--oht-ink); border-color: var(--oht-glow); color: var(--oht-paper); box-shadow: 0 0 0 .25rem rgba(143,189,240,.2); }
.choice { text-align: left; background: var(--oht-ink); border: 1px solid var(--oht-rule-2); border-radius: .875rem; padding: .875rem 1rem; color: var(--oht-paper); font-weight: 500; display: flex; justify-content: space-between; align-items: center; gap: .75rem; width: 100%; }
.choice::after { content: ''; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--oht-rule-3); flex: none; }
.choice.active { background: rgba(37,101,168,.12); border-color: var(--oht-signal); }
.choice.active::after { background: var(--oht-signal); border-color: var(--oht-signal); box-shadow: inset 0 0 0 3px var(--oht-ink); }
.progress { --bs-progress-bg: var(--oht-rule-2); --bs-progress-bar-bg: var(--oht-signal); --bs-progress-height: 4px; }
.step-dots { display: flex; gap: .375rem; }
.step-dots span { flex: 1; height: 4px; border-radius: 2px; background: var(--oht-rule-2); }
.step-dots span.done { background: var(--oht-meter); } .step-dots span.cur { background: var(--oht-signal); }

/* ===== misc components ===== */
.breadcrumb { --bs-breadcrumb-divider-color: var(--oht-muted); --bs-breadcrumb-item-active-color: var(--oht-paper); font-size: .8125rem; margin: 0; }
.breadcrumb a { color: var(--oht-muted); } .breadcrumb a:hover { color: var(--oht-paper); }
.accordion { --bs-accordion-bg: transparent; --bs-accordion-color: var(--oht-paper); --bs-accordion-border-color: var(--oht-rule-2); --bs-accordion-btn-color: var(--oht-paper); --bs-accordion-btn-bg: transparent; --bs-accordion-active-bg: transparent; --bs-accordion-active-color: var(--oht-paper); --bs-accordion-btn-focus-box-shadow: none; --bs-accordion-btn-padding-x: 0; --bs-accordion-btn-padding-y: 1.375rem; --bs-accordion-body-padding-x: 0; --bs-accordion-body-padding-y: 0; --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23F5F0E6'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon); }
.accordion-item { border-left: 0; border-right: 0; border-radius: 0 !important; }
.accordion-item:first-of-type { border-top: 1px solid var(--oht-rule-2); }
.accordion-button { font-family: var(--oht-display); font-variation-settings: 'SOFT' 40, 'opsz' 32; font-size: 1.25rem; line-height: 1.25; gap: 1rem; text-wrap: balance; }
.accordion-body { padding-bottom: 1.375rem; color: var(--oht-muted); font-size: .9375rem; line-height: 1.55; }
.modal { --bs-modal-bg: transparent; --bs-modal-border-width: 0; --bs-modal-width: 1120px; }
.modal-backdrop { --bs-backdrop-bg: #141210; --bs-backdrop-opacity: .88; }
.modal-content video { width: 100%; aspect-ratio: 16/9; border-radius: 18px; background: #000; box-shadow: 0 40px 120px rgba(0,0,0,.6); display: block; }
.video-poster { position: relative; border-radius: var(--bs-border-radius-lg); overflow: hidden; cursor: pointer; background: var(--oht-ink-2); box-shadow: 0 30px 80px rgba(20,18,16,.18); aspect-ratio: 7/6; }
.video-poster img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; display: block; }
.video-poster .veil { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(20,18,16,0) 55%, rgba(20,18,16,.45)); }
.video-poster .play { width: 84px; height: 84px; border-radius: 50%; background: rgba(245,240,230,.92); display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 40px rgba(20,18,16,.35); transition: transform .2s; }
.video-poster:hover .play { transform: scale(1.06); }
.video-poster .cap { position: absolute; left: 1.375rem; bottom: 1.125rem; display: flex; gap: .625rem; align-items: baseline; color: var(--oht-paper); font-size: .875rem; font-weight: 600; }
.video-poster .cap small { color: rgba(245,240,230,.7); font-variant-numeric: tabular-nums; font-weight: 400; }
.cookie-banner { position: fixed; left: 1.5rem; right: 1.5rem; bottom: 1.5rem; z-index: 1040; display: flex; justify-content: center; pointer-events: none; animation: rise .6s cubic-bezier(.2,.7,.2,1) both; }
.cookie-banner .inner { pointer-events: auto; width: min(880px, 100%); }
@media (max-width: 991.98px) { .cookie-banner { bottom: 84px; left: .75rem; right: .75rem; } }
.tier { background: var(--oht-ink-2); border: 1px solid var(--oht-rule); border-radius: var(--bs-border-radius-xl); padding: 1.75rem; height: 100%; display: flex; flex-direction: column; gap: 1.25rem; position: relative; }
.tier.featured { background: var(--oht-paper); color: var(--oht-ink); border-color: var(--oht-paper); box-shadow: 0 30px 80px rgba(0,0,0,.55); }
.tier.featured .display-sm, .tier.featured .display-xs { color: var(--oht-ink); }
.tier.featured .text-muted { color: #5b554b !important; }
.tier.featured .body { color: #3a352e; }
.tier.featured .rule-soft { border-color: rgba(20,18,16,.12); }
.tier.featured .check-list li i { color: var(--oht-signal); }
.tier .ribbon { position: absolute; top: -.75rem; left: 1.75rem; background: var(--oht-signal); color: var(--oht-paper); font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .3rem .75rem; border-radius: 999px; }
.timeline-bar { display: flex; gap: 3px; height: 10px; }
.timeline-bar span { border-radius: 3px; background: var(--oht-rule-2); }
.timeline-bar span.hot { background: var(--oht-glow); } .timeline-bar span.mid { background: var(--oht-paper); opacity: .8; } .timeline-bar span.dim { background: rgba(245,240,230,.25); }
.q-row { display: grid; grid-template-columns: 3rem 5.5rem 1fr; gap: 1rem; padding: .625rem 0; border-top: 1px solid var(--oht-rule); font-size: .875rem; align-items: baseline; }
.q-row .kind { font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 575.98px) { .q-row { grid-template-columns: 3rem 1fr; } .q-row .kind { grid-column: 2; } .q-row .txt { grid-column: 2; } }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.keypad button { background: var(--oht-ink); border: 1px solid var(--oht-rule); border-radius: .75rem; color: var(--oht-paper); padding: .75rem .25rem; display: flex; flex-direction: column; align-items: center; gap: .125rem; font-size: 1.125rem; font-weight: 600; min-height: 56px; }
.keypad button small { font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--oht-muted); font-weight: 600; }
.keypad button.on { border-color: rgba(37,101,168,.55); }
.keypad button:disabled { color: rgba(245,240,230,.3); }
.ivr-opt { display: flex; gap: .75rem; align-items: center; background: var(--oht-ink); border: 1px solid var(--oht-rule-2); border-radius: .75rem; padding: .625rem .875rem; color: var(--oht-paper); font-size: .875rem; text-align: left; width: 100%; }
.ivr-opt:hover { border-color: var(--oht-signal); }
.ivr-opt b { width: 24px; height: 24px; border-radius: 50%; background: var(--oht-signal); display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; flex: none; }
.loop-btn { text-align: left; background: var(--oht-ink-2); border: 1px solid var(--oht-rule); border-radius: .875rem; padding: .875rem 1rem; color: rgba(245,240,230,.75); display: flex; flex-direction: column; gap: .375rem; min-width: 0; }
.loop-btn.active { background: rgba(37,101,168,.16); border-color: var(--oht-signal); color: var(--oht-paper); }
.loop-btn .k { font-size: .875rem; font-weight: 600; } .loop-btn .t { font-size: .75rem; color: var(--oht-muted); font-variant-numeric: tabular-nums; }
.hour-bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; align-items: end; height: 110px; }
.hour-bars button { border: 0; background: var(--oht-rule-2); border-radius: 4px 4px 0 0; padding: 0; height: var(--h); transition: background .2s; }
.hour-bars button.on { background: var(--oht-signal); }
.hour-labels { display: grid; grid-template-columns: repeat(12, 1fr); font-size: .6875rem; color: var(--oht-muted); text-align: center; }
.hour-labels .on { color: var(--oht-paper); }
.file-row { display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; padding: .75rem 0; border-top: 1px solid var(--oht-rule); font-size: .875rem; font-variant-numeric: tabular-nums; }
.file-row.head { font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--oht-muted); border-top: 0; }
.file-row code { color: var(--oht-paper); font-size: .8125rem; }
@media (max-width: 575.98px) { .file-row { grid-template-columns: 1fr auto; } .file-row > :last-child { display: none; } }
.legal-toc a { display: grid; grid-template-columns: 2rem 1fr; gap: .625rem; padding: .5625rem 0; color: var(--oht-muted); font-size: .875rem; border-top: 1px solid var(--oht-rule); }
.legal-toc a:hover { color: var(--oht-paper); }
.legal-section { display: grid; grid-template-columns: 3.5rem 1fr; gap: 1.5rem; padding: 2.5rem 0; border-top: 1px solid var(--oht-rule-2); scroll-margin-top: 96px; }
@media (max-width: 575.98px) { .legal-section { grid-template-columns: 1fr; gap: .5rem; padding: 2rem 0; } }
.legal-section p { color: rgba(245,240,230,.78); line-height: 1.6; text-wrap: pretty; }
.area-list a, .area-list button { text-align: left; background: transparent; border: 0; border-top: 1px solid var(--oht-rule-2); padding: 1.125rem 0; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; color: var(--oht-paper); width: 100%; }
.area-list a:hover, .area-list button:hover { color: var(--oht-glow); }
.footer { border-top: 1px solid var(--oht-rule); padding: 4rem 0 2rem; font-size: .875rem; color: var(--oht-muted); }
.footer .h { font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--oht-muted); margin-bottom: .875rem; }
.footer a { color: var(--oht-muted); } .footer a:hover { color: var(--oht-paper); }
.footer .list { display: grid; gap: .5rem; }
.footer .social { width: 36px; height: 36px; flex: none; border-radius: 50%; border: 1px solid var(--oht-rule-2); display: inline-flex; align-items: center; justify-content: center; color: var(--oht-paper); font-size: .9375rem; }
.footer .social:hover { border-color: var(--oht-glow); color: var(--oht-glow); }
.footer .legal { border-top: 1px solid var(--oht-rule); margin-top: 3rem; padding-top: 1.5rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .8125rem; }
.footer .legal button { background: transparent; border: 0; padding: 0; font: inherit; color: var(--oht-muted); }
.footer .legal button:hover { color: var(--oht-paper); }
.reveal { animation: rise .8s cubic-bezier(.2,.7,.2,1) both; }
.reveal-2 { animation: rise .8s cubic-bezier(.2,.7,.2,1) .12s both; }
.reveal-3 { animation: rise .8s cubic-bezier(.2,.7,.2,1) .24s both; }
.reveal-4 { animation: rise .9s cubic-bezier(.2,.7,.2,1) .32s both; }
.carousel-fade .carousel-item { transition-duration: .8s; }

/* ===== mobile full-bleed hero (1a) ===== */
.hero-bleed { display: none; position: absolute; inset: -72px 0 auto 0; height: calc(min(68vh, 560px) + 72px); z-index: 0; pointer-events: none; }
.hero-bleed .carousel, .hero-bleed .carousel-inner, .hero-bleed .carousel-item { height: 100%; }
.hero-bleed img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-bleed::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,13,11,.6) 0%, rgba(14,13,11,.08) 28%, rgba(14,13,11,.3) 52%, var(--oht-ink) 100%); }
@media (max-width: 767.98px) {
  .hero-bleed { display: block; }
  .hero.hero-photo { position: relative; padding-top: min(44vh, 300px); background: none; overflow: visible; }
  .hero.hero-photo .hero-bleed { clip-path: none; }
  main#main { position: relative; z-index: 0; }
  .site-header { z-index: 1030; }
  .hero.hero-photo .container { position: relative; z-index: 1; }
  .hero.hero-photo .display-hero { text-shadow: 0 2px 24px rgba(0,0,0,.55); }
  .hero.hero-photo .eyebrow { color: var(--oht-glow); }
  .hero.hero-photo .lede { color: #D9D3C7; }
  .hero.hero-photo .card-dark { background: rgba(31,28,24,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 24px 60px rgba(0,0,0,.5); }
  .site-header { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; transition: background .3s, border-color .3s; }
  .site-header.is-scrolled { background: rgba(20,18,16,.82); border-bottom-color: var(--oht-rule); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .site-header .icon-btn, .site-header .hamburger { background: rgba(20,18,16,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
}
@media (min-width: 768px) and (max-width: 991.98px) { .hero.hero-photo .row { --bs-gutter-x: 2rem; } .hero.hero-photo .col-lg-6 { flex: 0 0 50%; max-width: 50%; } .hero.hero-photo .display-hero { font-size: clamp(2.25rem, 4.6vw, 3rem); } .hero.hero-photo .featured-player { margin-top: -40px !important; } }
.hero .featured-player { position: relative; z-index: 2; }
.hero .carousel { z-index: 1; }
@media (prefers-reduced-motion: reduce) { .hero-bleed .carousel-item { transition: none; } }

/* ===== mobile footer (1b) ===== */
@media (max-width: 767.98px) {
  .footer { padding: 2rem 0 1.25rem; }
  .footer .row { --bs-gutter-y: 1.5rem; --bs-gutter-x: 1rem; }
  .footer .row > .col-6 { flex: 0 0 50%; max-width: 50%; }
  .footer .logo svg { width: 104px; height: 48px; margin-left: -6px; }
  .footer .brand-line { font-size: .8125rem; }
  .footer .h { margin-bottom: .5rem; }
  .footer .list { gap: .375rem; }
  .footer .list .fa-phone { display: none; }
  .footer .list a.studio { line-height: 1.3; }
  .footer .list a.studio .addr { display: none; }
  .footer .list a.studio .city { color: var(--oht-paper); }
  .footer .list a.studio .text-glow .label { display: none; }
  .footer .legal { margin-top: 1.5rem; padding-top: 1rem; flex-direction: column-reverse; gap: .5rem; font-size: .75rem; }
  .footer .legal .d-flex { gap: .875rem !important; }
}
@media (min-width: 768px) { .footer .follow-col { display: none; } .footer .list a.studio .city { display: none; } }

/* ===== v1 parity: proof / argument / credibility / final CTA ===== */
.proof-statement { font-family: var(--oht-display); font-variation-settings: 'SOFT' 50, 'WONK' 1, 'opsz' 60; font-size: 1.625rem; line-height: 1.3; letter-spacing: -.01em; color: var(--oht-paper); text-wrap: pretty; }
.proof-statement b { font-weight: 600; color: var(--oht-glow); }
.display-xl { font-family: var(--oht-display); font-weight: 400; font-size: clamp(3rem, 8.2vw, 7rem); line-height: .92; letter-spacing: -.04em; font-variation-settings: 'SOFT' 80, 'WONK' 1, 'opsz' 144; text-wrap: balance; }
.section-paper .display-xl em { font-style: italic; color: var(--oht-signal); }
.stat-stack { display: grid; gap: 1px; background: rgba(20,18,16,.12); border: 1px solid rgba(20,18,16,.12); }
.stat-stack > div { background: var(--oht-paper); padding: 1.625rem 1.75rem; }
.stat-stack .stat-value { font-size: 3.5rem; color: var(--oht-ink); }
.stat-stack .stat-value small { color: var(--oht-muted); }
.cred-card { position: relative; border-radius: 28px; overflow: hidden; background: var(--oht-ink-2); border: 1px solid var(--oht-rule); }
.cred-card .bg { position: absolute; inset: 0; }
.cred-card .bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cred-card .bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,18,16,.96) 0%, rgba(20,18,16,.9) 48%, rgba(20,18,16,.35) 100%); }
.cred-card .body { position: relative; padding: 6rem 5rem; max-width: 760px; }
.cred-card .display-xl { font-size: clamp(2.5rem, 5.6vw, 4.5rem); line-height: .96; letter-spacing: -.035em; }
.cta-phone { font-family: var(--oht-display); font-variation-settings: 'SOFT' 40, 'opsz' 96; font-size: clamp(2rem, 3.4vw, 2.75rem); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--oht-ink) !important; line-height: 1.1; }
@media (max-width: 767.98px) {
  .cred-card .body { padding: 2.5rem 1.5rem; }
  .cred-card .bg::after { background: linear-gradient(180deg, rgba(20,18,16,.92) 0%, rgba(20,18,16,.9) 60%, rgba(20,18,16,.55) 100%); }
  .stat-stack > div { padding: 1.25rem 1.25rem; }
}

/* ===== v1 parity: How it works (home) ===== */
.steps-home { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
.steps-home::before { content: ''; position: absolute; left: 0; right: 0; top: 11px; height: 1px; background: rgba(245,240,230,.14); }
.steps-home .line { position: absolute; left: 0; right: 0; top: 11px; height: 1px; background: linear-gradient(90deg, var(--oht-signal), var(--oht-glow)); transform: scaleX(0); transform-origin: left; }
.steps-home > div { position: relative; padding: 0 1.5rem 0 0; display: block; }
.steps-home .dot { width: 23px; height: 23px; border-radius: 50%; background: var(--oht-signal); border: 1px solid var(--oht-signal); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--oht-paper); position: relative; z-index: 1; box-shadow: 0 0 0 4px rgba(37,101,168,.18); opacity: 0; }
.steps-home .txt { opacity: 0; }
.steps-home .txt .display-xs { margin: 22px 0 10px !important; font-size: 1.375rem; }
.steps-home .pill { display: inline-block; margin-top: 14px; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--oht-ink); background: var(--oht-glow); border-radius: 999px; padding: 6px 10px; }
.steps-home.is-seen .line { animation: draw 1.8s cubic-bezier(.65,0,.35,1) both; }
.steps-home.is-seen .dot { animation: pop .55s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--d, 0s); }
.steps-home.is-seen .txt { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--d, 0s) + .15s); }
@media (max-width: 991.98px) {
  .steps-home { grid-template-columns: 1fr; }
  .steps-home::before, .steps-home .line { left: 11px; right: auto; top: 11px; bottom: 11px; width: 1px; height: auto; }
  .steps-home .line { background: linear-gradient(180deg, var(--oht-signal), var(--oht-glow)); transform: scaleY(0); transform-origin: top; }
  @keyframes drawY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  .steps-home.is-seen .line { animation-name: drawY; }
  .steps-home > div { display: grid; grid-template-columns: 23px 1fr; gap: 1rem; padding: 0 0 1.75rem; align-items: start; }
  .steps-home .txt .display-xs { margin: 0 0 6px !important; }
}
@media (prefers-reduced-motion: reduce) { .steps-home .dot, .steps-home .txt { opacity: 1; animation: none !important; } .steps-home .line { transform: none; animation: none !important; } }

/* ===== v1 parity: player ===== */
@media (min-width: 992px) {
  .hero #heroCarousel { margin-left: 40px; }
  .hero .featured-player { margin: -120px 64px 0 0 !important; padding: 1.375rem 1.5rem; border-radius: 20px; }
  .hero .featured-player .play-btn { width: 72px; height: 72px; } .hero .featured-player .play-btn svg { width: 28px; height: 28px; }
  .hero .featured-player .d-flex.gap-3 { gap: 1.125rem !important; }
  .hero .featured-player .display-xs { font-size: 1.375rem; line-height: 1.1; }
  .hero .featured-player .state-label { font-size: .75rem; letter-spacing: .12em; }
  .hero .featured-player .small.text-muted { font-size: .875rem; }
}
.featured-player { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 30px 80px rgba(0,0,0,.55); }
.sample-card { border-radius: 18px; padding: 1.375rem; gap: 1rem; }
.sample-card .display-xs { font-size: 1.25rem; }
.wave.is-playing span.head { animation: whum var(--whum, .6s) ease-in-out var(--whum-d, 0s) infinite alternate; }

/* ===== v1 parity: How It Works page — per-step reveal ===== */
@keyframes arrive { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes ticker { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.how-step { position: relative; }
.how-step .rule-draw { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--oht-signal); transform: scaleX(0); transform-origin: left; }
.how-step .display-md, .how-step > .col-lg-6, .how-step > .col-lg-5, .how-step .how-callout, .how-step .dot-list li, .how-step .chip, .how-step .how-mail, .how-step .how-hl { opacity: 0; }
.how-step .display-md { color: rgba(245,240,230,.16); font-size: clamp(3.5rem, 6vw, 6rem); line-height: .85; letter-spacing: -.05em; font-variation-settings: 'SOFT' 80, 'WONK' 1, 'opsz' 144; }
.how-step.is-seen .rule-draw { animation: draw 1.1s cubic-bezier(.2,.7,.2,1) both; }
.how-step.is-seen .display-md { animation: pop .7s cubic-bezier(.2,.7,.2,1) .05s both; }
.how-step.is-seen > .col-lg-6 { animation: rise .7s cubic-bezier(.2,.7,.2,1) .15s both; }
.how-step.is-seen > .col-lg-5 { animation: rise .8s cubic-bezier(.2,.7,.2,1) .3s both; }
.how-step.is-seen .how-callout { animation: pop .5s cubic-bezier(.2,.7,.2,1) .9s both; }
.how-step.is-seen .dot-list li { animation: rise .5s cubic-bezier(.2,.7,.2,1) calc(.5s + var(--j, 0) * .09s) both; }
.how-step.is-seen .chip { animation: pop .5s cubic-bezier(.2,.7,.2,1) calc(.5s + var(--j, 0) * .09s) both; }
.how-step.is-seen .how-mail { animation: arrive .6s cubic-bezier(.2,.7,.2,1) .55s both; }
.how-step.is-seen .how-bell { animation: ticker .9s ease-in-out 1.3s 3; }
.how-step .how-strike { position: relative; color: var(--oht-muted); text-decoration: none; }
.how-step .how-strike::after { content: ''; position: absolute; left: 0; right: 0; top: 54%; height: 2px; background: var(--oht-muted); transform: scaleX(0); transform-origin: left; }
.how-step.is-seen .how-strike::after { animation: draw .45s ease 1.2s both; }
.how-step .how-hl { background: rgba(37,101,168,.16); border-bottom: 2px solid var(--oht-signal); padding: 0 3px; display: inline-block; }
.how-step.is-seen .how-hl { animation: rise .5s cubic-bezier(.2,.7,.2,1) 1.6s both; }
.how-step .how-caret { display: inline-block; width: 2px; height: 1em; background: var(--oht-signal); vertical-align: -2px; margin-left: 3px; animation: blink 1s steps(1) infinite; }
.how-callout { display: inline-block; margin-top: 1.25rem; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--oht-ink); background: var(--oht-glow); border-radius: 999px; padding: 7px 12px; }
@media (prefers-reduced-motion: reduce) { .how-step *, .how-step > div { opacity: 1 !important; animation: none !important; } .how-step .rule-draw, .how-step .how-strike::after { transform: none; } }

/* ===== v1 parity: How It Works hero session sheet ===== */
.sheet-bar { transform-origin: left; animation: draw .7s cubic-bezier(.2,.7,.2,1) calc(.2s + var(--i, 0) * .22s) both; }
.sheet-bar span { display: inline-block; animation: rise .4s ease calc(.55s + var(--i, 0) * .22s) both; }
.sheet-legend > span { animation: rise .5s ease calc(.5s + var(--i, 0) * .12s) both; }
@media (prefers-reduced-motion: reduce) { .sheet-bar, .sheet-bar span, .sheet-legend > span { animation: none !important; } }