/* ═══════════════════════════════════════════════════════════════════════════
   Apex MD · Client Onboarding · shared stylesheet for all five steps.
   Design language is lifted from the Lifestylers funnel (tokens, logo lockup,
   theme toggle, wipe, CTA, the warm glow off the focal object). That funnel is
   LOCKED; nothing here edits it, it only copies from it.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'ID';src:url('fonts/InterDisplay-Regular-latin.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'ID';src:url('fonts/InterDisplay-Regular-latinext.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'ID';src:url('fonts/InterDisplay-Medium-latin.woff2') format('woff2');font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'ID';src:url('fonts/InterDisplay-Medium-latinext.woff2') format('woff2');font-weight:500;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'ID';src:url('fonts/InterDisplay-SemiBold-latin.woff2') format('woff2');font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'ID';src:url('fonts/InterDisplay-SemiBold-latinext.woff2') format('woff2');font-weight:600;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'ID';src:url('fonts/InterDisplay-Bold-latin.woff2') format('woff2');font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'ID';src:url('fonts/InterDisplay-Bold-latinext.woff2') format('woff2');font-weight:700;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';src:url('fonts/Poppins-Light.ttf') format('truetype');font-weight:300;font-display:swap}
@font-face{font-family:'Poppins';src:url('fonts/Poppins-Medium.ttf') format('truetype');font-weight:500;font-display:swap}

/* ─── LIGHT (default on every fresh open) ─── */
:root{
  color-scheme:light;
  --ink:#2A1810;        /* espresso, type */
  --ink-2:#7A6252;      /* body copy */
  --cream:#FAF6F0;      /* the ground */
  --paper:#FFFFFF;      /* cards, the Back button */
  --line:#EDE3D8;       /* hairlines */
  --terra:#C15F3C;
  --terra-lt:#D9784F;
  --sh:42,24,16;        /* shadow rgb */
  --sh-a:1;
  --fg:42,24,16;        /* faint foreground marks */
  --glow:193,95,60;     /* warm bloom behind the video */
  --glow-a:1;
  --logo-1:#4A3226;     /* mark, standard scheme on a light ground */
  --logo-2:#2A1810;
  --vsl-edge:rgba(42,24,16,.08);
}

/* ─── DARK: a warm espresso night, not an inversion ─── */
:root[data-theme="dark"]{
  color-scheme:dark;
  --ink:#EFE3D8;
  --ink-2:#B3A08E;
  --cream:#171009;
  --paper:#211710;
  --line:#33261D;
  --terra:#E08054;
  --terra-lt:#EE9670;
  --sh:0,0,0;
  --sh-a:1.9;
  --fg:239,227,216;
  --glow-a:1.45;
  --logo-1:#F2E9DE;     /* reversed scheme: the mark follows the ground */
  --logo-2:#C4B2A0;
  --vsl-edge:rgba(239,227,216,.10);
}

*{box-sizing:border-box}
/* clip, not just hidden: the glow behind the video is wider than the column, and
   overflow:hidden alone still left a scrollable strip at ~900px */
html{-webkit-text-size-adjust:100%;overflow-x:hidden;overflow-x:clip}
body{
  margin:0;min-height:100dvh;background:var(--cream);color:var(--ink);
  font-family:'ID',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;overflow-x:clip;
}

/* ─── the column. Wide enough for a big video and one-line heading/lead, and it ends
   a short way under the buttons (no footer) ─── */
.page{
  max-width:1000px;margin:0 auto;
  padding:40px 24px 72px;
  text-align:center;
}

/* ─── logo, centred, no nav ─── */
.logo{display:inline-flex;align-items:center;gap:12px;margin-bottom:clamp(34px,6vw,54px)}
.logo svg{display:block;width:34px;height:34px}
.logo .wm{
  font-family:'Poppins',sans-serif;font-weight:300;font-size:17px;
  letter-spacing:.26em;padding-left:.26em;line-height:1;white-space:nowrap;
}
.logo .wm b{font-weight:300;color:var(--ink)}
.logo .wm i{font-style:normal;font-weight:500;color:var(--terra)}

/* ─── eyebrow ─── */
.eyebrow{margin-bottom:18px}
.eyebrow span{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);background:var(--paper);
  border:1px solid var(--line);border-radius:100px;padding:8px 16px;
  box-shadow:0 6px 18px rgba(var(--sh),calc(.06 * var(--sh-a)));
}
.eyebrow i{width:1px;height:12px;background:var(--line)}
.eyebrow b{font-weight:600;color:var(--terra)}

/* ─── heading + the short line under it ─── */
/* ONE line each on desktop (Mharck, 2026-09-30). Phones are too narrow for that at a
   readable size, so below 900px they are allowed to wrap. */
h1{
  margin:0 auto;
  font-size:clamp(30px,4.6vw,48px);font-weight:700;
  letter-spacing:-.035em;line-height:1.08;
  text-wrap:balance;
}
h1 em{font-style:normal;color:var(--terra)}
.lead{
  margin:16px auto 0;
  font-size:clamp(16.5px,1.9vw,19.5px);line-height:1.55;color:var(--ink-2);
  text-wrap:balance;
}
@media (min-width:900px){h1,.lead{white-space:nowrap}}
.lead b{color:var(--ink);font-weight:600}

/* ─── the VSL ─── */
/* Same idea as the Lifestylers laptop: the only shaping on the page comes off the focal
   object. A warm bloom behind it, a contact shadow under it. */
.stage{position:relative;margin:clamp(30px,5vw,42px) auto 0;isolation:isolate}
.stage::before{
  content:"";position:absolute;z-index:-2;pointer-events:none;
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:150%;height:190%;
  background:
    radial-gradient(ellipse 40% 34% at 50% 44%,rgba(var(--glow),calc(.24 * var(--glow-a))),rgba(193,95,60,0) 66%),
    radial-gradient(ellipse 62% 52% at 50% 48%,rgba(var(--glow),calc(.12 * var(--glow-a))),rgba(193,95,60,0) 74%);
}
.stage::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:50%;bottom:-9%;transform:translateX(-50%);
  width:78%;height:18%;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(var(--sh),calc(.18 * var(--sh-a))),rgba(var(--sh),0) 72%);
}

.vsl{
  position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;
  /* the frame stays espresso in BOTH themes, like the Lifestylers slabs */
  background:
    radial-gradient(ellipse 55% 65% at 50% 46%,rgba(193,95,60,.30),rgba(193,95,60,0) 70%),
    linear-gradient(160deg,#36221A 0%,#24160F 55%,#1B100A 100%);
  box-shadow:0 0 0 1px var(--vsl-edge), 0 28px 60px -26px rgba(var(--sh),calc(.45 * var(--sh-a)));
}
/* faint Spearpoint watermark, bottom right, so the placeholder still reads as ours */
.vsl__mark{position:absolute;right:22px;bottom:18px;width:30px;height:30px;opacity:.22;pointer-events:none}

.vsl__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:84px;height:84px;border-radius:50%;border:0;padding:0;cursor:pointer;
  display:grid;place-items:center;
  background:linear-gradient(150deg,#D9784F,#C15F3C);
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 14px 34px rgba(193,95,60,.45);
  transition:transform .2s ease, box-shadow .2s ease;
}
.vsl__play::before{            /* slow ring: says "press me" without shouting */
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1.5px solid rgba(217,120,79,.7);
  animation:ring 2.4s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes ring{0%{transform:scale(1);opacity:.8}80%,100%{transform:scale(1.55);opacity:0}}
.vsl__play:hover{transform:translate(-50%,-50%) scale(1.06);
  box-shadow:0 1px 0 rgba(255,255,255,.26) inset, 0 18px 40px rgba(193,95,60,.55)}
.vsl__play:focus-visible{outline:2px solid #EE9670;outline-offset:5px}
.vsl__play svg{width:28px;height:28px;margin-left:4px;fill:#fff}

.vsl__tag{
  position:absolute;left:50%;bottom:20px;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(250,246,240,.78);
  background:rgba(250,246,240,.08);border:1px solid rgba(250,246,240,.14);
  border-radius:100px;padding:7px 14px;
  transition:color .2s ease, background .2s ease;
}
.vsl__tag::before{content:"";width:6px;height:6px;border-radius:50%;background:#D9784F}
.vsl.is-nudged .vsl__tag{color:#FAF6F0;background:rgba(193,95,60,.35)}

/* live state: Dale's video replaces the placeholder in the same frame */
.vsl.is-live{background:#000}
.vsl.is-live > :not(.vsl__media){display:none}
.vsl__media{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000}
video.vsl__media{object-fit:cover}

/* ─── the line under the video ─── */
.note{
  margin:clamp(26px,4vw,34px) auto 0;max-width:56ch;
  font-size:clamp(16.5px,1.8vw,18.5px);line-height:1.6;color:var(--ink-2);
  text-wrap:balance;
}
.note b{color:var(--ink);font-weight:600}

/* ─── one-off action for a step (intake form, booking link) ─── */
.action{
  display:inline-flex;align-items:center;gap:9px;margin-top:20px;
  color:var(--terra);text-decoration:none;
  font-size:16.5px;font-weight:600;letter-spacing:-.01em;
  padding:13px 22px;border-radius:100px;
  border:1.5px solid color-mix(in srgb, var(--terra) 45%, transparent);
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.action:hover{border-color:var(--terra);background:color-mix(in srgb, var(--terra) 8%, transparent);transform:translateY(-1px)}
.action svg{width:15px;height:15px;flex:0 0 15px}

/* ─── Back / Next ─── */
.nav{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:30px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  text-decoration:none;cursor:pointer;
  font-family:inherit;font-size:17.5px;font-weight:600;letter-spacing:-.01em;
  padding:16px 30px;border-radius:100px;min-height:52px;
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.btn svg{width:16px;height:16px;flex:0 0 16px}
.btn:focus-visible{outline:2px solid var(--terra);outline-offset:3px}
.btn:active{transform:translateY(0)}

.btn--next{
  background:var(--terra);color:#fff;border:1px solid transparent;min-width:168px;
  box-shadow:0 1px 0 rgba(255,255,255,.20) inset, 0 12px 28px rgba(193,95,60,.28);
}
.btn--next:hover{background:var(--terra-lt);transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(255,255,255,.24) inset, 0 16px 36px rgba(193,95,60,.34)}
.btn--next svg{transition:transform .2s ease}
.btn--next:hover svg{transform:translateX(3px)}

.btn--back{
  background:var(--paper);color:var(--ink);
  border:1px solid var(--line);
  box-shadow:0 6px 18px rgba(var(--sh),calc(.05 * var(--sh-a)));
}
.btn--back:hover{border-color:color-mix(in srgb, var(--ink) 28%, transparent);transform:translateY(-2px)}
.btn--back svg{transition:transform .2s ease}
.btn--back:hover svg{transform:translateX(-3px)}

/* ─── phones ─── */
@media (max-width:560px){
  .page{padding:30px 20px 60px}
  .logo{margin-bottom:34px}
  .logo svg{width:30px;height:30px}
  .logo .wm{font-size:15px}
  .vsl{border-radius:14px}
  .vsl__play{width:66px;height:66px}
  .vsl__play svg{width:23px;height:23px}
  .vsl__tag{bottom:12px;font-size:10px;padding:5px 11px}
  .vsl__mark{display:none}
  .nav .btn{flex:1;padding:16px 18px;min-width:0}
  .action{width:100%;justify-content:center}
}

/* ─── load motion: everything rises in, staggered ─── */
.js .page > *{animation:rise .7s cubic-bezier(.22,1,.36,1) backwards}
.js .page > :nth-child(2){animation-delay:.06s}
.js .page > :nth-child(3){animation-delay:.12s}
.js .page > :nth-child(4){animation-delay:.18s}
.js .page > :nth-child(5){animation-delay:.26s}
.js .page > :nth-child(6){animation-delay:.34s}
.js .page > :nth-child(n+7){animation-delay:.40s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
.vsl.is-nudged .vsl__play{animation:nudge .45s ease}
@keyframes nudge{30%{transform:translate(-50%,-50%) scale(.92)}65%{transform:translate(-50%,-50%) scale(1.05)}}

/* ═════════ theme toggle (copied from Lifestylers) ═════════ */
.themer{
  position:fixed;top:16px;right:16px;z-index:70;isolation:isolate;
  display:inline-flex;align-items:center;gap:0;
  width:66px;height:34px;padding:3px;border-radius:100px;cursor:pointer;
  border:1px solid var(--line);
  background:color-mix(in srgb, var(--paper) 72%, transparent);
  -webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);
  box-shadow:0 6px 20px rgba(var(--sh),calc(.14 * var(--sh-a)));
  transition:border-color .25s ease, background .25s ease, box-shadow .25s ease;
  animation:themer-in .7s cubic-bezier(.22,1,.36,1) .6s backwards;
}
@keyframes themer-in{from{opacity:0;transform:translateY(-10px) scale(.9)}}
.themer::after{content:"";position:absolute;inset:-8px -6px;border-radius:100px}
.themer:hover{border-color:var(--terra);box-shadow:0 8px 26px rgba(var(--glow),.28)}
.themer:focus-visible{outline:2px solid var(--terra);outline-offset:3px}
.themer__thumb{
  position:absolute;top:3px;left:3px;width:28px;height:28px;border-radius:50%;
  background:linear-gradient(150deg,var(--terra-lt),var(--terra));
  box-shadow:0 3px 10px rgba(var(--glow),.5);
  transition:transform .45s cubic-bezier(.32,1.5,.45,1);
}
:root[data-theme="dark"] .themer__thumb{transform:translateX(32px)}
.themer__ico{
  position:relative;z-index:1;width:30px;height:28px;flex:0 0 30px;
  display:grid;place-items:center;pointer-events:none;
  transition:opacity .35s ease, transform .45s cubic-bezier(.22,1,.36,1);
}
.themer__ico svg{width:15px;height:15px;display:block}
.themer__ico--sun{color:#fff;opacity:1}
.themer__ico--moon{color:var(--ink-2);opacity:.5}
:root[data-theme="dark"] .themer__ico--sun{color:var(--ink-2);opacity:.5;transform:rotate(-45deg)}
:root[data-theme="dark"] .themer__ico--moon{color:#fff;opacity:1}
@media (max-width:700px){.themer{top:12px;right:12px;width:60px;height:32px}
  .themer__thumb{width:26px;height:26px}
  :root[data-theme="dark"] .themer__thumb{transform:translateX(28px)}
  .themer__ico{width:27px;flex:0 0 27px}}

/* the feathered radial wipe, grown out of the toggle (View Transitions) */
::view-transition-old(root){animation:none;opacity:1;z-index:1}
::view-transition-image-pair(root){isolation:auto}
@property --wipe-r{syntax:'<length>';inherits:false;initial-value:4000px}
::view-transition-new(root){
  opacity:1;z-index:2;mix-blend-mode:normal;
  animation:apex-wipe 620ms cubic-bezier(.42,0,.22,1) forwards;
  -webkit-mask-image:radial-gradient(circle at var(--wipe-x,50%) var(--wipe-y,0px),
    #000 var(--wipe-r), rgba(0,0,0,0) calc(var(--wipe-r) + 170px));
  mask-image:radial-gradient(circle at var(--wipe-x,50%) var(--wipe-y,0px),
    #000 var(--wipe-r), rgba(0,0,0,0) calc(var(--wipe-r) + 170px));
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
@keyframes apex-wipe{from{--wipe-r:0px}to{--wipe-r:var(--wipe-end,150vmax)}}

@media (prefers-reduced-motion:reduce){
  ::view-transition-group(root),::view-transition-old(root),::view-transition-new(root){animation:none!important}
  ::view-transition-new(root){-webkit-mask-image:none!important;mask-image:none!important}
  *{transition:none!important;animation:none!important}
}