/* ===================================================================
   PRESENTATION STYLES
   Mobile-first "flow" layout (native scroll, works without JS), then
   .is-stage overrides for the desktop camera presentation.
   Brand values live in tokens.css.
=================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body{
  margin: 0;
  min-height: 100vh;
  background: var(--c-navy);
  color: var(--c-white);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote, address{ margin: 0; padding: 0; }
ol, ul{ list-style: none; }
address{ font-style: normal; }
img, svg{ display: block; max-width: 100%; }
img{ height: auto; }
a{ color: inherit; }
button{ font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
table{ border-collapse: separate; border-spacing: 0; }
kbd{
  display: inline-grid; place-items: center; min-width: 1.9em; height: 1.9em; padding: 0 .4em;
  font-family: var(--font-display); font-size: .78em; font-weight: 600;
  border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 6px;
}

.sr-only{
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link{
  position: fixed; top: 10px; left: 10px; z-index: 100;
  padding: 10px 16px; border-radius: 8px;
  background: var(--c-orange); color: var(--c-navy); font-family: var(--font-display); font-weight: 600;
  transform: translateY(-160%); transition: transform .2s;
}
.skip-link:focus{ transform: none; }
:focus-visible{ outline: 3px solid var(--c-cyan); outline-offset: 3px; border-radius: 6px; }

svg.icon{
  width: 24px; height: 24px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* ===================================================================
   LAYERS
=================================================================== */
#stage-bg{ position: fixed; inset: 0; z-index: 0; background: var(--c-navy); }
#world{
  position: fixed; inset: 0; z-index: 1; overflow: hidden; pointer-events: none;
  opacity: 0; transition: opacity 1.2s var(--ease-out);
}
.is-ready #world{ opacity: 1; }
#world .world__layer{ position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
#world svg{ overflow: visible; max-width: none; }
#world .w-line{ fill: none; stroke: var(--world-line); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
#world .w-node{ fill: var(--world-node); }
#world .w-tile{ fill: none; stroke: var(--world-line); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
#world .w-route-base{ fill: none; stroke: var(--world-line); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 2 7; }
#world .w-route{ fill: none; stroke: var(--world-route); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: var(--world-route-opacity, .36); }
#world .w-stop{ fill: var(--bg); stroke: var(--world-route); stroke-width: 2; vector-effect: non-scaling-stroke; }
#world .w-here{ fill: var(--world-route); opacity: .7; }
#world .w-pulse{ fill: none; stroke: var(--world-route); stroke-width: 1.5; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; animation: pulse 2.8s var(--ease-out) infinite; }
@keyframes pulse{ from{ transform: scale(.6); opacity: .9; } to{ transform: scale(2.6); opacity: 0; } }
/* stage: world colors follow the active scene theme.
   flow: light scenes are opaque, so the world only shows on dark ones. */
.is-flow #world, .no-js #world{
  --world-line: rgba(181, 231, 250, .17); --world-node: rgba(181, 231, 250, .38);
  --world-route: var(--c-orange); --bg: var(--c-navy);
}

#deck{ position: relative; z-index: 2; transition: opacity .6s var(--ease-out); }
.js:not(.is-ready) #deck,
.js:not(.is-ready) .deck-nav{ opacity: 0; }

/* ===================================================================
   CHROME — top bar, progress, navigation
=================================================================== */
.topbar{
  position: fixed; z-index: 20; top: 0; left: 0; right: 0;
  height: calc(var(--topbar-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  color: var(--fg);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
  transition: background-color .5s var(--ease-out), color .5s var(--ease-out), border-color .5s;
}
.topbar__brand{ display: flex; align-items: center; gap: 14px; text-decoration: none; min-width: 0; }
.topbar__brand img{ width: auto; }
.logo-servion{ height: 20px; }
.logo-sandler{ height: 30px; }
.topbar__x{ width: 1px; height: 26px; background: currentColor; opacity: .3; }
.logo--on-light{ display: none; }
[data-ui="light"] .logo--on-dark, [data-ui="ice"] .logo--on-dark, [data-ui="accent"] .logo--on-dark{ display: none; }
[data-ui="light"] .logo--on-light, [data-ui="ice"] .logo--on-light, [data-ui="accent"] .logo--on-light{ display: block; }
/* the Sandler gold wordmark has no contrast on orange: give the lockup a white chip */
.topbar__brand{ border-radius: 999px; transition: background-color .4s, padding .4s, margin .4s; }
[data-ui="accent"] .topbar__brand{ background: var(--c-white); padding: 8px 16px; margin-left: -16px; }
.topbar__cta{
  flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px;
  border: 1.5px solid currentColor; border-radius: 999px;
  font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: .02em;
  text-decoration: none; transition: background-color .2s, color .2s;
}
.topbar__cta:hover{ background: var(--fg); color: var(--bg); }

.progress{ position: fixed; z-index: 21; top: 0; left: 0; right: 0; height: 3px; pointer-events: none; }
.progress__fill{
  display: block; height: 100%; background: var(--c-orange);
  transform-origin: 0 50%; transform: scaleX(0); transition: transform .9s var(--ease-in-out);
}
[data-ui="accent"] .progress__fill{ background: var(--c-navy); }

.deck-nav{
  position: fixed; z-index: 20; left: 50%; transform: translateX(-50%);
  bottom: calc(14px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 6px;
  height: 56px; padding: 0 6px; max-width: calc(100vw - 24px);
  color: var(--fg);
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--rule); border-radius: 999px;
  box-shadow: 0 10px 40px rgba(10, 12, 40, .18);
  transition: background-color .5s var(--ease-out), color .5s var(--ease-out), border-color .5s, opacity .6s;
}
.deck-nav__btn{
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none;
  transition: background-color .2s, opacity .2s;
}
.deck-nav__btn:hover:not(:disabled){ background: var(--surface); }
.deck-nav__btn--next{ background: var(--c-orange); color: var(--c-navy); }
.deck-nav__btn--next:hover:not(:disabled){ background: var(--c-orange); filter: brightness(1.06); }
[data-ui="accent"] .deck-nav__btn--next{ background: var(--c-navy); color: var(--c-white); }
.deck-nav__btn:disabled{ opacity: .3; cursor: default; }
.deck-nav__btn--next:disabled{ background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1.5px currentColor; }
.deck-nav__meta{ display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 0 8px; width: 210px; }
.deck-nav__count{ font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: .12em; color: var(--accent-2); }
.deck-nav__title{ font-size: 13px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--fg-muted); }
.deck-nav__dots{ display: flex; align-items: center; padding: 0 6px; }
.deck-nav__dot{
  width: 24px; height: 44px; display: grid; place-items: center;
}
.deck-nav__dot::before{
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; opacity: .28; transition: opacity .3s, transform .3s var(--ease-out), background-color .3s;
}
.deck-nav__dot:hover::before{ opacity: .6; }
.deck-nav__dot[aria-current="step"]::before{ opacity: 1; transform: scale(1.35); background: var(--accent); }
@media (max-width: 760px){
  .deck-nav__dots{ display: none; }
  .deck-nav__meta{ width: min(220px, calc(100vw - 150px)); }
}
@media (max-width: 420px){
  .logo-servion{ height: 16px; }
  .logo-sandler{ height: 24px; }
  .topbar__brand{ gap: 10px; }
  .topbar__cta{ padding: 0 14px; font-size: 13px; }
}

/* ===================================================================
   SCENES — shared
=================================================================== */
.scene{
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  padding:
    calc(var(--topbar-h) + env(safe-area-inset-top) + clamp(28px, 6vh, 64px))
    max(var(--gutter), env(safe-area-inset-right))
    calc(var(--nav-h) + env(safe-area-inset-bottom) + clamp(40px, 7vh, 72px))
    max(var(--gutter), env(safe-area-inset-left));
  background: var(--bg);
  color: var(--fg);
  overflow: hidden;
}
.scene[data-theme="dark"]{ background: transparent; }
.scene__inner{ width: 100%; max-width: var(--maxw); margin: 0 auto; position: relative; }

.eyebrow{
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-eyebrow);
  letter-spacing: .22em; text-transform: uppercase; color: var(--accent-2);
  margin-bottom: clamp(12px, 2.2vh, 22px);
}
.display{
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display);
  line-height: .98; letter-spacing: -.01em; text-transform: uppercase; color: var(--c-orange);
}
.display__line{ display: block; }
.h2{
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2);
  line-height: 1.08; letter-spacing: -.018em; color: var(--fg); text-wrap: balance;
}
.h2 em, .h2 .accent{ font-style: normal; color: var(--accent); }
[data-theme="dark"] .h2 .accent{ color: var(--c-orange); }
.lede{
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-lede);
  line-height: 1.38; color: var(--fg-muted); text-wrap: pretty;
}
.lede--cyan{ color: var(--c-cyan); }
.source{ font-size: var(--fs-small); color: var(--fg-soft); margin-top: clamp(14px, 2.6vh, 28px); }
h3{ font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: 1.25; }

/* ===================================================================
   01 · OPENING
=================================================================== */
.opening{ display: grid; gap: clamp(24px, 4vh, 48px); align-items: center; }
.opening .display{ margin-bottom: clamp(16px, 3vh, 30px); }
.opening .lede{ max-width: 30ch; }
.opening__visual{ width: min(100%, 560px); margin: 0 auto; }
.opening__visual img{
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
  mask-composite: intersect;
}
.cue{ display: flex; align-items: center; gap: 12px; margin-top: clamp(20px, 4vh, 44px); font-size: var(--fs-small); color: var(--fg-soft); letter-spacing: .04em; }
.cue__keys{ display: inline-flex; gap: 6px; }
.cue__text--touch{ display: none; }
@media (pointer: coarse){
  .cue__keys, .cue__text--keys{ display: none; }
  .cue__text--touch{ display: inline; }
}
@media (min-width: 900px){
  .opening{ grid-template-columns: 1fr 1fr; }
  .opening__visual{ width: 100%; max-width: none; }
  .opening__visual img{ transform: scale(1.1); transform-origin: 40% 50%; }
}

/* ===================================================================
   02 · RENEWAL
=================================================================== */
.renewal{ display: grid; gap: clamp(32px, 5vh, 56px); align-items: center; }
.renewal .h2{ max-width: 16ch; }
.renewal__gauges{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 3vw, 48px); }
.gauge{ display: grid; justify-items: center; text-align: center; }
.ring{ grid-area: 1 / 1; width: clamp(140px, min(20vw, 34vh), 290px); height: auto; transform: rotate(-90deg); }
.ring circle{ fill: none; stroke-width: 9; }
.ring__track{ stroke: var(--rule); }
.ring__value{ stroke: var(--c-orange); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p)); }
.gauge--alt .ring__value{ stroke: var(--c-cyan); }
.gauge__label{ display: contents; }
.gauge__num{
  grid-area: 1 / 1; align-self: center;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(38px, min(5vw, 8.5vh), 84px);
  line-height: 1; letter-spacing: -.02em; color: var(--c-navy);
}
.gauge__text{
  margin-top: clamp(12px, 2.4vh, 24px); max-width: 17ch;
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); line-height: 1.3; color: var(--fg-muted);
}
@media (min-width: 900px){
  .renewal{ grid-template-columns: .9fr 1.1fr; }
}

/* ===================================================================
   03 · PRODUCT — Engage360
=================================================================== */
.product{ display: grid; gap: clamp(28px, 5vh, 56px); align-items: center; }
/* tagline gets its own line: Poppins' tall "/" otherwise hits the "g" descender above */
.product .h2 .accent{ display: block; margin-top: .14em; }
.product__quote{
  margin-top: clamp(16px, 3vh, 28px); padding-left: 18px; border-left: 3px solid var(--c-orange);
  font-size: var(--fs-lede); font-family: var(--font-body); line-height: 1.45; color: var(--fg-muted); max-width: 38ch;
}
.product__caps{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; margin-top: clamp(16px, 3vh, 30px); }
.product__caps li{ position: relative; padding-left: 22px; font-size: var(--fs-body); color: var(--fg); line-height: 1.35; }
.product__caps li::before{
  content: ""; position: absolute; left: 0; top: .42em; width: 10px; height: 10px;
  border: 2px solid var(--c-cyan); transform: rotate(45deg) scale(.85);
}
.product__orbit{
  position: relative; container-type: inline-size;
  width: min(100%, 440px); aspect-ratio: 1; margin: 0 auto;
}
.orbit{ position: absolute; inset: 0; width: 100%; height: 100%; }
.orbit__ring{ fill: none; }
.orbit__ring--outer{ stroke: var(--rule); stroke-width: 1.5; stroke-dasharray: 3 8; }
.orbit__ring--mid{ stroke: var(--c-cyan); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .7; }
.orbit__core-halo{ fill: none; stroke: var(--c-purple); stroke-width: 7; opacity: .85; }
.orbit__core{ fill: var(--c-navy-deep); stroke: var(--c-cyan); stroke-width: 2; }
.orbit__center{
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; justify-items: center; text-align: center;
}
.orbit__name{ font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 6.4cqw, 34px); color: var(--c-white); letter-spacing: -.01em; }
.orbit__sub{ font-size: clamp(10px, 2.4cqw, 13px); color: var(--c-cyan); letter-spacing: .08em; text-transform: uppercase; }
.orbit__platforms li{
  position: absolute; left: 50%; top: 50%; white-space: nowrap;
  transform: rotate(var(--a)) translateX(45.4cqw) rotate(calc(var(--a) * -1)) translate(-50%, -50%);
  transform-origin: 0 0;
  padding: .45em 1em; border-radius: 999px;
  background: var(--c-navy-deep); border: 1px solid rgba(0, 173, 239, .45);
  font-family: var(--font-display); font-weight: 500; font-size: clamp(11px, 3.1cqw, 15px); color: var(--c-white);
  box-shadow: 0 6px 24px rgba(5, 8, 30, .45);
}
.orbit__more{
  position: absolute; left: 50%; top: 73%; transform: translateX(-50%);
  font-size: clamp(11px, 2.6cqw, 13px); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-soft);
}
@media (min-width: 900px){
  .product{ grid-template-columns: 1fr 1fr; }
  .product__orbit{ width: min(100%, 62vh, 520px); }
}

/* ===================================================================
   04 · FIVE WAYS
=================================================================== */
.ways{ display: grid; gap: clamp(24px, 4vh, 48px); align-items: center; }
.ways__head{ position: relative; }
.ways__head .h2{ max-width: 12ch; }
.ways__five{
  display: block; margin: 0 0 .06em -.04em;
  font-size: 2.9em; font-weight: 700; line-height: .82; letter-spacing: -.04em; color: transparent;
  -webkit-text-stroke: 2px var(--c-orange);
}
.ways__list{ display: grid; }
.way{
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center;
  padding: clamp(10px, 1.7vh, 16px) 0; border-bottom: 1px solid var(--rule);
}
.way:first-child{ border-top: 1px solid var(--rule); }
.way__icon{
  width: clamp(44px, min(4vw, 7vh), 58px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  border: 2.5px solid var(--c-orange); color: var(--c-cyan-deep);
}
.way__icon .icon{ width: 52%; height: 52%; stroke-width: 2; }
.way h3{ color: var(--c-cyan-deep); }
.way p{ margin-top: 2px; font-size: var(--fs-body); line-height: 1.4; color: var(--fg-muted); }
@media (min-width: 900px){
  .ways{ grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 5vw, 80px); }
}
@media (max-width: 899px){
  .ways__five{ font-size: 2.2em; }
}

/* ===================================================================
   05 · HOW IT WORKS
=================================================================== */
.how__head{ margin-bottom: clamp(28px, 6vh, 64px); }
.how__track{ position: relative; }
.how__line{ display: none; }
.steps{ display: grid; gap: 22px; position: relative; }
.steps::before{ /* vertical connector on narrow screens */
  content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 2px;
  background: linear-gradient(var(--c-cyan), var(--c-orange)); opacity: .55;
}
.step{ position: relative; display: grid; grid-template-columns: 56px 1fr; column-gap: 18px; align-items: start; }
.step__num{
  grid-row: span 2; position: relative; z-index: 1;
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c-navy-deep); border: 2px solid var(--c-cyan);
  font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--c-cyan);
}
.step h3{ color: var(--c-white); padding-top: 4px; }
.step p{ color: var(--fg-muted); margin-top: 4px; }
.step--payoff .step__num{ background: var(--c-orange); border-color: var(--c-orange); color: var(--c-navy); }
.step--payoff h3{ color: var(--c-orange); }
.how__promise{
  display: inline-flex; align-items: center; gap: 12px; margin-top: clamp(28px, 6vh, 60px);
  padding: 14px 22px; border-radius: 999px; border: 1px solid rgba(248, 160, 31, .5);
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); color: var(--c-orange);
}
@media (min-width: 900px){
  .how__line{
    display: block; position: absolute; left: 12.5%; right: 12.5%; top: 35px; width: 75%; height: 4px;
  }
  .how__line line{ stroke-width: 4; vector-effect: non-scaling-stroke; }
  .how__line-base{ stroke: var(--rule); }
  .how__line-draw{ stroke: var(--c-cyan); stroke-dasharray: 1; stroke-dashoffset: 0; }
  .steps{ grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.4vw, 40px); }
  .steps::before{ display: none; }
  .step{ grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .step__num{ grid-row: auto; width: 72px; height: 72px; font-size: 22px; margin-bottom: clamp(14px, 2.6vh, 26px); }
  .step h3{ max-width: 15ch; }
  .how{ text-align: center; }
  .how__head{ text-align: center; }
}

/* ===================================================================
   06 · TIERS
=================================================================== */
.tiers{ display: grid; gap: clamp(24px, 4vh, 48px); align-items: center; }
.tiers__note{
  display: flex; align-items: center; gap: 12px; margin-top: clamp(16px, 3vh, 30px);
  font-size: var(--fs-body); color: var(--fg-muted); max-width: 32ch;
}
.tiers__note .icon{ color: var(--c-cyan-deep); width: 28px; height: 28px; }
.tiers__table-wrap{ width: 100%; }
.tiers__table{ width: 100%; font-size: var(--fs-body); color: var(--fg); table-layout: fixed; }
.tiers__table th, .tiers__table td{ padding: clamp(12px, 2.2vh, 20px) clamp(8px, 1.2vw, 18px); text-align: center; vertical-align: middle; }
.tiers__table thead th{
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-small); letter-spacing: .16em; text-transform: uppercase;
  color: var(--c-navy); padding-top: 0; vertical-align: bottom;
}
.tiers__table tbody th{ text-align: left; font-weight: 400; color: var(--fg-muted); width: 34%; }
.tiers__table tbody tr:nth-child(odd) > *{ background: var(--c-ice); }
.tiers__table tbody tr > :first-child{ border-radius: 10px 0 0 10px; }
.tiers__table tbody tr > :last-child{ border-radius: 0 10px 10px 0; }
.tiers__table strong{ font-family: var(--font-display); font-weight: 600; font-size: 1.25em; }
.tiers__table .icon--check{ margin: 0 auto; color: var(--c-cyan-deep); stroke-width: 2.6; }
.tiers__table .dash{ color: var(--fg-soft); }
/* the recommended column reads as a raised card */
.tiers__table .is-lead{ background: var(--c-navy) !important; color: var(--c-white); border-radius: 0 !important; }
.tiers__table thead .is-lead{ color: var(--c-white); border-radius: 14px 14px 0 0 !important; padding-top: 14px; padding-bottom: 16px; }
.tiers__table tbody tr:last-child .is-lead{ border-radius: 0 0 14px 14px !important; }
.tiers__table tbody tr:nth-child(odd) .is-lead{ background: var(--c-navy-soft) !important; }
.tiers__table .is-lead strong{ color: var(--c-orange); }
.tiers__table .is-lead .icon--check{ color: var(--c-orange); }
.lead-badge{
  display: block; width: max-content; margin: 0 auto 8px; padding: 3px 10px; border-radius: 999px;
  background: var(--c-orange); color: var(--c-navy); font-size: .82em; letter-spacing: .12em;
}
.tiers__table-wrap{ filter: drop-shadow(0 18px 40px rgba(30, 34, 81, .08)); }
@media (min-width: 900px){
  .tiers{ grid-template-columns: .75fr 1.25fr; gap: clamp(32px, 5vw, 80px); }
}
@media (max-width: 520px){
  .tiers__table{ font-size: 13px; }
  .tiers__table th, .tiers__table td{ padding: 11px 4px; }
  .tiers__table tbody th{ padding-left: 10px; width: 31%; }
  .tiers__table thead th{ font-size: 10px; letter-spacing: .08em; }
  .lead-badge{ font-size: 8.5px; padding: 2px 6px; letter-spacing: .06em; }
  .tiers__table strong{ font-size: 1.1em; }
  .tiers__table .icon--check{ width: 20px; height: 20px; }
}

/* ===================================================================
   07 · YOU OWN THE RELATIONSHIP
=================================================================== */
.own{ display: grid; gap: clamp(28px, 5vh, 56px); align-items: center; }
.own .lede{ margin-top: clamp(14px, 2.6vh, 26px); max-width: 30ch; color: var(--fg-muted); }
.own__map{ position: relative; display: grid; gap: 14px; }
.own__links{ display: none; }
.node{
  position: relative; z-index: 1;
  background: var(--c-white); color: var(--c-navy); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: 0 14px 40px rgba(30, 34, 81, .14);
  display: grid; gap: 6px;
}
.node h3{ font-size: var(--fs-h3); }
.node p{ font-size: var(--fs-small); line-height: 1.4; color: var(--c-ink); }
.node__icon{ color: var(--c-cyan-deep); }
.node img{ height: 28px; width: auto; }
.node--servion img{ height: 18px; margin: 5px 0; }
.node--customer{ background: var(--c-navy); color: var(--c-white); }
.node--customer p{ color: var(--c-ice); }
.node--customer .node__icon{ color: var(--c-orange); }
@media (min-width: 900px){
  .own{ grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 4vw, 64px); }
  .own__map{ display: block; width: min(100%, calc((100vh - 220px) * 600 / 460)); aspect-ratio: 600 / 460; margin-left: auto; }
  .own__links{ display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
  .own__links path{ fill: none; stroke: var(--c-navy); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .55; }
  .node{ position: absolute; transform: translate(-50%, -50%); width: 36%; text-align: center; justify-items: center; }
  .node--you{ left: 50%; top: 13%; }
  .node--customer{ left: 50%; top: 50%; width: 32%; padding: 22px 18px; }
  .node--sandler{ left: 19%; top: 84%; }
  .node--servion{ left: 81%; top: 84%; }
}

/* ===================================================================
   08 · PROOF
=================================================================== */
.proof{ text-align: center; }
.proof .h2{ margin-bottom: clamp(28px, 6vh, 64px); }
.stats{ display: grid; gap: 0; }
.stat{ padding: clamp(18px, 3vh, 28px) 12px; border-top: 1px solid var(--rule); }
.stat:last-child{ border-bottom: 1px solid var(--rule); }
.stat__num{
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-stat);
  line-height: 1; letter-spacing: -.03em; color: var(--c-navy);
}
.stat__unit{ color: var(--accent); }
.stat dd{ margin-top: 10px; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-lede); color: var(--fg-muted); }
@media (min-width: 760px){
  .stats{ grid-template-columns: repeat(3, 1fr); }
  .stat{ border-top: 0; border-left: 1px solid var(--rule); padding: 0 clamp(12px, 2vw, 32px); }
  .stat:first-child{ border-left: 0; }
  .stat:last-child{ border-bottom: 0; }
}

/* ===================================================================
   09 · CTA
=================================================================== */
.cta{ display: grid; gap: clamp(28px, 5vh, 56px); align-items: center; }
.display--cta{ font-size: calc(var(--fs-display) * .82); margin-bottom: clamp(16px, 3vh, 28px); }
.cta .lede{ max-width: 34ch; }
.cta__actions{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(22px, 4vh, 40px); }
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px;
  border-radius: 999px; text-decoration: none;
  font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: .08em; text-transform: uppercase;
  transition: transform .2s var(--ease-out), background-color .2s, box-shadow .2s;
}
.btn .icon{ width: 20px; height: 20px; }
.btn--primary{ background: var(--c-orange); color: var(--c-navy); box-shadow: 0 10px 30px rgba(248, 160, 31, .25); }
.btn--primary:hover{ transform: translateY(-2px); box-shadow: 0 14px 36px rgba(248, 160, 31, .35); }
.btn--ghost{ border: 1.5px solid rgba(255, 255, 255, .4); color: var(--c-white); }
.btn--ghost:hover{ background: rgba(255, 255, 255, .08); }
.contact{
  position: relative; z-index: 1;
  padding: clamp(22px, 3.4vh, 36px); border-radius: 22px;
  background: var(--c-navy-deep); border: 1px solid var(--rule);
  box-shadow: 0 30px 80px rgba(5, 8, 30, .35);
}
.contact__label{ font-family: var(--font-display); font-weight: 600; font-size: var(--fs-eyebrow); letter-spacing: .2em; text-transform: uppercase; color: var(--c-cyan); }
.contact__name{ margin: 8px 0 14px; font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, min(2.6vw, 4.4vh), 38px); line-height: 1.1; }
.contact__row{
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 4px 0;
  text-decoration: none; font-size: var(--fs-lede); color: var(--c-white); overflow-wrap: anywhere;
  border-top: 1px solid var(--rule);
}
.contact__row .icon{ color: var(--c-orange); }
.contact__row:hover span{ text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--c-orange); }
.contact__logos{ display: flex; align-items: center; gap: 22px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule); }
.contact__logos img{ height: 30px; width: auto; }
.contact__logos img:first-child{ height: 18px; }
.cta__lines{ position: absolute; right: -10px; bottom: -40px; width: clamp(120px, 16vw, 220px); opacity: .9; pointer-events: none; }
.cta__lines path{ stroke: var(--c-cyan); stroke-width: 2.5; fill: none; stroke-linecap: round; }
@media (min-width: 900px){
  .cta{ grid-template-columns: 1.15fr .85fr; }
}
@media (max-width: 480px){
  .btn{ width: 100%; }
  .cta__lines{ display: none; }
}

/* "Presented by Cresyn" — quiet sign-off, bottom-right of the closing scene */
.presenter{
  position: absolute; z-index: 3; margin: 0;
  right: max(var(--gutter), env(safe-area-inset-right));
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 28px);
}
.presenter a, .presenter a:visited, .presenter a:hover, .presenter a:active{
  display: flex; align-items: center; gap: 12px; min-height: 44px;
  color: var(--c-white); text-decoration: none;
  opacity: .7; transition: opacity .25s var(--ease-out);
}
.presenter a:hover, .presenter a:focus-visible{ opacity: 1; }
.presenter span{ font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; }
.presenter img{ height: clamp(34px, 4vh, 44px); width: auto; }
.scene--cta{ padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 120px); }
.is-stage .presenter{ bottom: calc(14px + env(safe-area-inset-bottom) + 6px); }
@media (min-width: 900px){ .presenter img{ height: clamp(36px, 4.4vh, 48px); } }

/* ===================================================================
   STAGE MODE — one scene at a time, camera transitions (deck.js)
=================================================================== */
.is-stage, .is-stage body{ height: 100%; overflow: hidden; overscroll-behavior: none; }
.is-stage .topbar{ background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.is-stage #deck{ position: fixed; inset: 0; }
.is-stage .scene{
  position: absolute; inset: 0; min-height: 0;
  background: transparent;
  padding-top: calc(var(--topbar-h) + clamp(16px, 4vh, 48px));
  padding-bottom: calc(var(--nav-h) + clamp(28px, 6vh, 64px));
  visibility: hidden;
}
.is-stage .scene.is-active{ visibility: visible; }
.is-stage .scene--cta{ padding-bottom: calc(var(--nav-h) + clamp(28px, 6vh, 64px)); }

/* ===================================================================
   REDUCED MOTION
=================================================================== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  #world .w-pulse{ display: none; }
  .progress__fill{ transition: none; }
}
@media (max-width: 600px){
  .how__promise{ border-radius: 16px; font-size: 17px; }
}