/* ==========================================================================
   MORE — landing page styles
   Brand: obsidian ground, one red, silver + ice type.
   Tokens from MORE Brand Kit.
   ========================================================================== */

:root{
  --obsidian:#0B0D0F;   /* page ground */
  --asphalt:#171B1E;    /* cards, fields */
  --alt:#0f1214;        /* alternate section ground */
  --well:#0B0D0F;       /* input well */
  --gunmetal:#2C3338;   /* hairlines, borders */
  --silver:#A8AEB4;     /* body copy, labels */
  --silver2:#C9CFD4;    /* brighter body */
  --ice:#F4F6F7;        /* headlines */
  --muted:#6E767C;      /* de-emphasised */
  --red:#D8232A;        /* fill: buttons, bars */
  --red-ink:#E5453C;    /* accent type on dark */
  --bar-inactive:#3A4248;

  --maxw:1080px;
  --pad-y:88px;
  --pad-x:56px;

  --f-display:'Barlow Condensed', system-ui, sans-serif;
  --f-body:'Manrope', system-ui, sans-serif;
  --f-mono:'IBM Plex Mono', ui-monospace, monospace;

  --glow:radial-gradient(38% 60% at 0% 0%, rgba(216,35,42,.07) 0%, transparent 68%),
         radial-gradient(34% 56% at 100% 100%, rgba(168,174,180,.05) 0%, transparent 66%);
}

*,*::before,*::after{ box-sizing:border-box; }
/* Ensure the hidden attribute always wins over component display rules
   (e.g. .success/.drawer set display:flex, which would otherwise show them). */
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  padding-bottom:42px; /* clearance for the fixed ticker bar */
  background:var(--obsidian);
  color:var(--ice);
  font-family:var(--f-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:var(--silver); text-decoration:none; }
a:hover{ color:var(--ice); }
img{ display:block; width:100%; height:100%; object-fit:cover; filter:saturate(.85) contrast(1.06); }
::selection{ background:rgba(216,35,42,.4); }
::placeholder{ color:#5d6266; }
:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }

/* ---- media wrapper: graceful fallback if an image is missing ---- */
.media{ position:relative; background:linear-gradient(135deg,#14181b,#0c0f11); }
.media--contain img{ object-fit:contain; }
.media.is-empty img{ display:none; }
.media.is-empty::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(60% 60% at 30% 20%, rgba(216,35,42,.12), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 12px, transparent 12px 24px),
    linear-gradient(135deg,#16191c,#0b0e10);
}

/* ==================== BUTTONS ==================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font:700 12px/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase;
  padding:18px 26px; border-radius:12px; border:1px solid transparent; cursor:pointer;
  transition:transform .12s ease, background .12s ease, color .12s ease;
}
.btn:active{ transform:translateY(1px); }
.btn--red{ background:var(--red); color:var(--ice); }
.btn--red:hover{ background:#c11e25; color:var(--ice); }
.btn--ghost{ background:rgba(23,27,30,.82); border-color:var(--gunmetal); color:var(--ice); padding:17px 25px; }
.btn--ghost:hover{ background:var(--asphalt); color:var(--ice); }
.btn--ice{ background:var(--ice); color:var(--obsidian); padding:20px 30px; }
.btn--ice:hover{ background:#e2e6e8; color:var(--obsidian); }
.btn--block{ width:100%; padding:20px 26px; }

/* ==================== TICKER ==================== */
/* Ticker: a live wins bar pinned to the bottom of the screen, always visible */
.ticker{ position:fixed; left:0; right:0; bottom:0; z-index:80; overflow:hidden;
  border-top:1px solid var(--gunmetal); background:var(--obsidian); padding:11px 0;
  box-shadow:0 -8px 24px rgba(11,13,15,.6); }
.ticker__track{ display:flex; width:max-content; animation:tick 64s linear infinite; }
.ticker__group{
  display:flex; gap:40px; padding-right:40px; white-space:nowrap;
  font:500 11px/1 var(--f-mono); letter-spacing:.06em; color:var(--silver);
}
.ticker__group i{ color:var(--gunmetal); font-style:normal; }
.ticker__group b{ color:var(--red-ink); font-weight:500; }
.ticker__group .tlogo{ display:inline-flex; align-items:center; color:var(--silver); }
.ticker__group .tlogo img{ height:12px; width:auto; opacity:.5; }
@keyframes tick{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ==================== NAV ==================== */
.nav{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:16px var(--pad-x); border-bottom:1px solid var(--asphalt);
  position:sticky; top:0; z-index:30;
  background:rgba(11,13,15,.94); backdrop-filter:blur(10px);
}
.nav__logo{ display:flex; align-items:center; }
.nav__logo img{ height:48px; width:auto; margin:-12px 0; filter:none; mix-blend-mode:screen; }
.nav__logofallback{ font:600 26px/1 var(--f-display); letter-spacing:.04em; color:var(--ice); }
.nav__links{ display:flex; gap:30px; justify-content:center; font:600 11px/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; }
.nav__right{ display:flex; justify-content:flex-end; align-items:center; gap:14px; }
.nav__apply{ padding:14px 20px; }

.nav__toggle{ display:none; flex-direction:column; gap:5px; width:44px; height:44px; align-items:center; justify-content:center; background:transparent; border:1px solid var(--gunmetal); border-radius:12px; cursor:pointer; }
.nav__toggle span{ display:block; width:20px; height:2px; background:var(--ice); transition:transform .2s ease, opacity .2s ease; }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.drawer{ position:sticky; top:81px; z-index:29; background:rgba(11,13,15,.98); border-bottom:1px solid var(--asphalt); backdrop-filter:blur(10px); }
.drawer__links{ display:flex; flex-direction:column; padding:16px var(--pad-x) 24px; gap:4px; }
.drawer__links a{ font:600 13px/1 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; padding:14px 0; border-bottom:1px solid var(--asphalt); }
.drawer__links .btn{ margin-top:12px; }

/* ==================== LAYOUT PRIMITIVES ==================== */
.section{ position:relative; overflow:hidden; padding:var(--pad-y) var(--pad-x); border-top:1px solid var(--asphalt); }
.section--alt{ background:var(--alt); }
.glow{ background-image:var(--glow); }
.section--alt.glow{ background-color:var(--alt); }
.center{ display:flex; flex-direction:column; align-items:center; gap:18px; }
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; }
.center .wrap{ display:flex; flex-direction:column; }

.kicker{ display:flex; align-items:center; gap:14px; }
.kicker .bar{ width:44px; height:3px; background:var(--red); flex:none; }
.kicker span:last-child{ font:500 11px/1 var(--f-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--silver); }

.bar{ width:44px; height:3px; background:var(--red); }
.r{ color:var(--red-ink); }

.h2{ margin:0; font:600 72px/0.94 var(--f-display); text-transform:uppercase; }
.h2--xl{ font-size:82px; line-height:0.92; }
.h2--lg{ font-size:76px; line-height:0.92; }
.h2--md{ font-size:66px; line-height:0.92; }
.clamp24{ max-width:24ch; }
.clamp20{ max-width:20ch; }
.center-text{ text-align:center; }

.lead{ margin:0; font:400 16px/1.8 var(--f-body); color:var(--silver); }
.narrow{ max-width:52ch; }
.wide{ max-width:68ch; }

.microlabel{ font:500 9px/1.4 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--silver); }
.mono20{ font:500 20px/1 var(--f-mono); color:var(--ice); }
.muted{ color:var(--silver); }

.card{ background:var(--asphalt); border:1px solid var(--gunmetal); border-radius:20px; }

/* ==================== HERO ==================== */
.hero{ position:relative; overflow:hidden; padding:84px var(--pad-x) 92px; display:flex; flex-direction:column; align-items:center; }
.hero__bg{ position:absolute; inset:0; }
.hero__scrim{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(11,13,15,.86) 0%, rgba(11,13,15,.7) 45%, rgba(11,13,15,.96) 100%); }
.hero__inner{ position:relative; display:flex; flex-direction:column; align-items:center; gap:26px; width:100%; max-width:1360px; margin:0 auto; }
.badges{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.badge{ display:flex; align-items:center; gap:9px; font:500 10px/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--silver); background:rgba(23,27,30,.82); border:1px solid var(--gunmetal); border-radius:12px; padding:10px 15px; }
.badge .dot{ width:5px; height:5px; background:var(--red-ink); border-radius:50%; }
.hero__title{ margin:0; text-align:center; font:600 clamp(48px,8vw,120px)/0.9 var(--f-display); letter-spacing:.01em; text-transform:uppercase; }
.hero__sub{ margin:0; text-align:center; max-width:72ch; font:400 clamp(16px,1.25vw,18px)/1.75 var(--f-body); color:var(--silver2); }
.hero__frame{ width:100%; max-width:1040px; aspect-ratio:16/9; position:relative; border:1px solid var(--gunmetal); border-radius:20px; overflow:hidden; margin-top:8px; }
.hero__frame-scrim{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, transparent 55%, rgba(11,13,15,.9)); }

/* Scroll cue: a red pulsing chevron at the base of the hero that invites the scroll down */
.scrollcue{ position:relative; z-index:3; margin-top:36px; display:grid; place-items:center; width:46px; height:46px;
  border-radius:999px; border:1px solid rgba(216,35,42,.5); background:rgba(216,35,42,.08); color:var(--red-ink);
  -webkit-tap-highlight-color:transparent; }
.scrollcue::before{ content:""; position:absolute; inset:-1px; border-radius:inherit; border:1.5px solid var(--red);
  opacity:0; }
.scrollcue__chev{ width:12px; height:12px; border-right:2px solid var(--red-ink); border-bottom:2px solid var(--red-ink);
  transform:translateY(-3px) rotate(45deg); }
@media (prefers-reduced-motion:no-preference){
  .scrollcue::before{ animation:cuePulse 2s ease-out infinite; }
  .scrollcue__chev{ animation:cueBob 1.8s ease-in-out infinite; }
}
@keyframes cuePulse{ 0%{ transform:scale(1); opacity:.85; } 70%{ transform:scale(1.75); opacity:0; } 100%{ opacity:0; } }
@keyframes cueBob{ 0%,100%{ transform:translateY(-4px) rotate(45deg); } 50%{ transform:translateY(2px) rotate(45deg); } }
.hero__frame-cap{ position:absolute; left:28px; bottom:26px; font:500 10px/1.6 var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ice); pointer-events:none; }
.hero__cta{ display:flex; gap:12px; margin-top:6px; flex-wrap:wrap; justify-content:center; }
.hero__note{ font:500 10px/1.6 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--silver); text-align:center; }

/* ==================== APPLY ==================== */
.applywrap{ width:100%; display:flex; justify-content:center; margin-top:6px; }
.form{ width:100%; max-width:660px; padding:44px; display:flex; flex-direction:column; gap:20px; }
.form__row2{ display:grid; grid-template-columns:2fr 1fr; gap:20px; }
.field{ display:flex; flex-direction:column; gap:9px; }
.field__label{ font:500 10px/1 var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--silver); }
.field input, .field textarea{
  background:var(--well); border:1px solid var(--gunmetal); border-radius:12px; color:var(--ice);
  font:400 15px/1.4 var(--f-body); padding:16px 15px; width:100%;
}
.field textarea{ line-height:1.65; resize:vertical; }
.field input:invalid.err, .field textarea:invalid.err,
.field input.err, .field textarea.err{ border-color:var(--red); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.form__error{ margin:0; color:var(--red-ink); font:500 12px/1.5 var(--f-body); }
.form__fine{ text-align:center; font:500 10px/1 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--silver); }

/* Thank-you state: message + VSL + FAQ */
.success{ width:100%; max-width:780px; background:var(--asphalt); border:1px solid var(--red); border-radius:20px; padding:40px; display:flex; flex-direction:column; align-items:center; gap:30px; text-align:center; }
.success__head{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.success__title{ margin:0; font:600 clamp(38px,6vw,58px)/0.95 var(--f-display); text-transform:uppercase; color:var(--red-ink); }
.success__body{ margin:0; max-width:46ch; font:400 15px/1.7 var(--f-body); color:var(--silver); }

.vsl{ width:100%; display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.vsl__eyebrow{ display:flex; align-items:center; gap:14px; }
.vsl__eyebrow span:last-child{ font:500 11px/1 var(--f-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--silver); }
.vsl__frame{ position:relative; width:100%; aspect-ratio:16/9; border:1px solid var(--gunmetal); border-radius:16px; overflow:hidden; background:var(--obsidian); }
.vsl__media{ position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover; }
.vsl__placeholder{ position:absolute; inset:0; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; cursor:pointer; border:0; background:radial-gradient(60% 60% at 50% 42%, rgba(216,35,42,.14), transparent 70%), var(--alt); }
.vsl__play{ width:66px; height:66px; border-radius:50%; background:var(--red); display:flex; align-items:center; justify-content:center; box-shadow:0 12px 30px -8px rgba(216,35,42,.6); transition:transform .2s ease; }
.vsl__placeholder:hover .vsl__play{ transform:scale(1.06); }
.vsl__play::after{ content:""; width:0; height:0; border-style:solid; border-width:11px 0 11px 18px; border-color:transparent transparent transparent var(--ice); margin-left:4px; }
.vsl__label{ font:500 10px/1 var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--silver); }
/* Tap-for-sound overlay on the autoplaying VSL */
.vsl__unmute{ position:absolute; left:50%; bottom:18px; transform:translateX(-50%); display:inline-flex; align-items:center; gap:9px; font:700 11px/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ice); background:rgba(216,35,42,.94); border:0; border-radius:12px; padding:13px 20px; cursor:pointer; z-index:3; box-shadow:0 12px 30px -8px rgba(216,35,42,.6); animation:vslPulse 2.2s ease-in-out infinite; }
.vsl__unmute-ic{ font-size:14px; line-height:1; }
@keyframes vslPulse{ 0%,100%{ transform:translateX(-50%) scale(1); } 50%{ transform:translateX(-50%) scale(1.06); } }
@media (prefers-reduced-motion:reduce){ .vsl__unmute{ animation:none; } }
/* YouTube VSL: iframe fills the frame */
.vsl-yt{ background:var(--obsidian); }
.vsl__ytmount{ position:absolute; inset:0; width:100%; height:100%; }
.vsl-yt iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.success__faq{ width:100%; display:flex; flex-direction:column; gap:16px; align-items:center; padding-top:6px; border-top:1px solid var(--gunmetal); }
.success__faqtitle{ margin:0; padding-top:20px; font:600 34px/0.95 var(--f-display); text-transform:uppercase; color:var(--ice); }

/* Booking (GoHighLevel calendar) step */
.booking__cal{ width:100%; display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.booking__frame{ width:100%; min-height:720px; border:1px solid var(--gunmetal); border-radius:16px; overflow:hidden; background:var(--obsidian); }
.booking__frame iframe{ display:block; width:100%; min-height:720px; border:0; }
.booking__placeholder{ min-height:340px; display:flex; align-items:center; justify-content:center; text-align:center; padding:40px; background:radial-gradient(60% 60% at 50% 42%, rgba(216,35,42,.1), transparent 70%), var(--alt); }
.booking__placeholder .vsl__label{ max-width:34ch; line-height:1.9; }

/* ==================== PROOF ==================== */
.quote{ width:100%; max-width:var(--maxw); padding:22px 28px; display:grid; grid-template-columns:1fr 150px; gap:28px; align-items:center; margin-top:8px; position:relative; overflow:hidden; box-shadow:0 0 0 1px rgba(216,35,42,.1); }
.quote__glow{ position:absolute; inset:-40% -20% auto -20%; height:180%; pointer-events:none;
  background:radial-gradient(60% 55% at 8% 12%, rgba(216,35,42,.1) 0%, transparent 62%), radial-gradient(50% 50% at 96% 88%, rgba(168,174,180,.07) 0%, transparent 60%); }
.quote__body{ position:relative; display:flex; flex-direction:column; gap:14px; }
.quote__eyebrow{ font:500 10px/1 var(--f-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--red-ink); }
.quote__text{ margin:0; font:400 13.5px/1.65 var(--f-body); color:var(--silver2); }
.quote__by{ font:500 10px/1 var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--silver); }
.quote__body{ gap:10px; }
.quote__photo{ position:relative; aspect-ratio:1/1; border:1px solid var(--gunmetal); border-radius:14px; overflow:hidden; }
.photo__scrim{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, transparent 55%, rgba(11,13,15,.7)); }

.milestones{ width:100%; max-width:var(--maxw); display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.mcard{ position:relative; height:300px; border:1px solid var(--gunmetal); border-radius:20px; overflow:hidden;
  /* floating: depth shadow + faint red halo so the cards lift off the ground */
  box-shadow:0 16px 34px -16px rgba(0,0,0,.72), 0 0 30px -12px rgba(216,35,42,.16); }
@media (prefers-reduced-motion:no-preference){
  /* keep the reveal timing (opacity/transform) and add translate/shadow for the float + hover lift */
  .js .milestones .mcard{ transition:opacity .85s cubic-bezier(.16,.8,.24,1), transform .9s cubic-bezier(.16,.8,.24,1), filter .85s ease, translate .45s cubic-bezier(.16,.8,.24,1), box-shadow .45s ease; }
  .mcard:hover{ translate:0 -8px; box-shadow:0 30px 56px -16px rgba(0,0,0,.82), 0 0 0 1px rgba(229,69,60,.22), 0 0 48px -10px rgba(216,35,42,.32); }
}
.mcard__scrim{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, transparent 26%, rgba(11,13,15,.7) 54%, rgba(11,13,15,.97) 100%); }
.mcard__cap{ position:absolute; inset:auto 0 0 0; padding:24px; pointer-events:none; margin:0; }
.mcard__eyebrow{ font:500 10px/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--red-ink); margin-bottom:8px; }
.mcard__title{ font:700 15px/1.3 var(--f-body); color:var(--ice); }
.mcard__sub{ font:400 12px/1.5 var(--f-body); color:var(--silver); }

.revstrip{ width:100%; max-width:var(--maxw); padding:28px 32px; margin-top:20px; display:grid; grid-template-columns:auto 1px 1fr; gap:32px; align-items:center; }
.revstrip__left{ display:flex; flex-direction:column; gap:16px; }
.revstrip__hero{ display:flex; flex-direction:column; gap:7px; }
.revstrip__eyebrow{ font:500 9px/1 var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--silver); }
.revstrip__big{ font:600 54px/0.85 var(--f-display); color:var(--red-ink); }
.revstrip__split{ display:flex; gap:28px; }
.revstrip__split > div{ display:flex; flex-direction:column; gap:6px; }
.revstrip__divider{ background:var(--gunmetal); align-self:stretch; }
.revstrip__right{ display:flex; flex-direction:column; gap:14px; }
.revstrip__head{ display:flex; align-items:baseline; justify-content:space-between; gap:24px; }
.revstrip__total{ font:500 11px/1 var(--f-mono); color:var(--ice); }
.chart{ display:grid; grid-template-columns:repeat(8,1fr); gap:10px; align-items:end; height:106px; }
.chart__col{ display:flex; flex-direction:column; gap:7px; justify-content:flex-end; }
.chart__bar{ height:var(--h); background:var(--bar-inactive); border-radius:3px 3px 0 0; }
.chart__bar--on{ background:var(--red); }
.chart__col span{ font:500 9px/1 var(--f-mono); letter-spacing:.08em; color:var(--silver); text-align:center; }

/* ==================== HOW IT WORKS ==================== */
.steps{ list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; }
.step{ display:grid; grid-template-columns:56px 260px 1fr; gap:36px; align-items:baseline; padding:26px 0; border-top:1px solid var(--gunmetal); }
.step:last-child{ border-bottom:1px solid var(--gunmetal); }
.step__n{ font:500 13px/1.7 var(--f-mono); letter-spacing:.1em; color:var(--red-ink); }
.step__t{ font:700 17px/1.55 var(--f-body); color:var(--ice); }
.step__p{ margin:0; font:400 15px/1.75 var(--f-body); color:var(--silver); }

.pillars{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:24px; }
.pillar{ background:var(--asphalt); border:1px solid var(--gunmetal); border-radius:18px; padding:26px; display:flex; flex-direction:column; gap:10px; }
.pillar__letter{ font:600 54px/0.85 var(--f-display); color:var(--red-ink); }
.pillar__name{ font:700 15px/1.25 var(--f-body); }
.pillar p{ margin:0; font:400 12px/1.6 var(--f-body); color:var(--silver); }

/* ==================== EARNINGS ==================== */
.slider{ width:100%; max-width:860px; margin-top:24px; display:flex; flex-direction:column; gap:14px; }
.slider__head{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; }
input[type=range]{ width:100%; height:8px; accent-color:var(--red); background:var(--gunmetal); border-radius:4px; cursor:pointer; }
.slider__scale{ display:flex; justify-content:space-between; font:500 10px/1 var(--f-mono); letter-spacing:.1em; color:var(--silver); }

.figure{ width:100%; max-width:860px; border-color:var(--red); padding:46px; display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:22px; text-align:center; }
.figure__hours{ font:500 11px/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--silver); }
.figure__big{ font:600 clamp(64px,12vw,112px)/0.9 var(--f-display); color:var(--red-ink); }
.figure__cap{ font:500 11px/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--silver); margin-bottom:26px; }
.figure__grid{ width:100%; padding-top:28px; border-top:1px solid var(--gunmetal); display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.figure__grid > div{ display:flex; flex-direction:column; gap:8px; }
.figure__num{ font:500 28px/1 var(--f-mono); color:var(--ice); }
.figure__num.r{ color:var(--red-ink); white-space:nowrap; }

.ramp{ width:100%; max-width:860px; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:18px; }
.rcard{ background:var(--asphalt); border:1px solid var(--gunmetal); border-radius:18px; padding:24px; display:flex; flex-direction:column; gap:8px; }
.rcard__eyebrow{ font:500 10px/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--red-ink); }
.rcard__t{ font:700 14px/1.3 var(--f-body); }
.rcard__s{ font:400 12px/1.5 var(--f-body); color:var(--silver); }
.disclaimer{ margin:16px 0 0; text-align:center; max-width:64ch; font:400 11px/1.7 var(--f-body); color:var(--silver); }

/* ==================== WINS ==================== */
.wins{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:14px; }
.wcard{ background:var(--asphalt); border:1px solid var(--gunmetal); border-radius:20px; overflow:hidden; display:flex; flex-direction:column; margin:0; }
.wcard__shot{ height:520px; background:var(--obsidian); padding:14px; }
.wcard__cap{ padding:22px 24px; border-top:1px solid var(--gunmetal); display:flex; flex-direction:column; gap:7px; }
.wcard__eyebrow{ font:500 10px/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--red-ink); }
.wcard__t{ font:700 15px/1.4 var(--f-body); color:var(--ice); }
.wcard__s{ font:400 12px/1.55 var(--f-body); color:var(--silver); }

/* ==================== LIFESTYLE STRIP ==================== */
.strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:20px; }
.strip__cell{ position:relative; aspect-ratio:4/5; border:1px solid var(--gunmetal); border-radius:18px; overflow:hidden; }
.strip__tag{ position:absolute; inset:auto 0 0 0; padding:18px; background:linear-gradient(180deg, transparent, rgba(11,13,15,.88)); font:500 9px/1.4 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ice); pointer-events:none; }

/* ==================== WAKE UP CALL ==================== */
.wakeup{ display:grid; grid-template-columns:1fr 1.15fr; gap:56px; align-items:center; }
.wakeup__photo{ position:relative; aspect-ratio:3/4; border:1px solid var(--gunmetal); border-radius:20px; overflow:hidden; }
.wakeup__scrim{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(11,13,15,.15), rgba(11,13,15,.75)); }
.wakeup__body{ display:flex; flex-direction:column; gap:24px; }
.tags{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:6px; }
.tagcard{ background:var(--asphalt); border:1px solid var(--gunmetal); border-radius:18px; padding:26px; display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.tagcard__pill{ font:500 9px/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--red-ink); border:1px solid rgba(229,69,60,.45); border-radius:8px; padding:7px 10px; }
.tagcard__t{ font:700 15px/1.25 var(--f-body); }
.tagcard p{ margin:0; font:400 12px/1.6 var(--f-body); color:var(--silver); }
.wakeup__turn{ margin:6px 0 0; font:400 14px/1.6 var(--f-body); font-style:italic; color:var(--red-ink); }

/* ==================== PROCESS ==================== */
.process{ display:flex; justify-content:center; gap:80px; align-items:center; }
.phone{ width:300px; flex:none; background:var(--asphalt); border:1px solid var(--gunmetal); border-radius:22px; padding:14px; }
.phone__status{ display:flex; justify-content:space-between; font:500 10px/1 var(--f-mono); color:var(--silver); padding:6px 8px 14px; }
.phone__stack{ display:flex; flex-direction:column; gap:10px; }
.phone__logo{ background:var(--obsidian); border:1px solid var(--gunmetal); border-radius:14px; padding:14px; height:62px; display:flex; align-items:center; }
.phone__logo img{ height:34px; width:auto; margin:0 auto; filter:none; mix-blend-mode:screen; object-fit:contain; }
.phone__row{ background:var(--obsidian); border:1px solid var(--gunmetal); border-radius:14px; padding:14px; display:flex; gap:12px; align-items:flex-start; }
.phone__num{ flex:none; width:20px; height:20px; background:var(--red); border-radius:6px; color:var(--ice); font:600 10px/20px var(--f-mono); text-align:center; }
.phone__t{ font:700 11px/1.3 var(--f-body); }
.phone__s{ font:400 10px/1.45 var(--f-body); color:var(--silver); }
.process__body{ max-width:470px; display:flex; flex-direction:column; gap:26px; }
.proclist{ display:flex; flex-direction:column; gap:22px; }
.procstep{ display:flex; gap:18px; }
.procstep__n{ flex:none; width:26px; height:26px; background:var(--red); border-radius:8px; color:var(--ice); font:600 12px/26px var(--f-mono); text-align:center; }
.procstep__t{ font:700 15px/1.3 var(--f-body); margin-bottom:5px; }
.procstep p{ margin:0; font:400 13px/1.65 var(--f-body); color:var(--silver); }

/* ==================== FAQ ==================== */
.faq{ width:100%; max-width:780px; display:flex; flex-direction:column; gap:10px; }
.faq__item{ background:var(--asphalt); border:1px solid var(--gunmetal); border-radius:16px; overflow:hidden; }
.faq__q{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px; background:transparent; border:0; padding:20px 24px; cursor:pointer; text-align:left; color:var(--ice); }
.faq__q span:first-child{ font:700 14px/1.35 var(--f-body); }
.faq__sign{ font:500 15px/1 var(--f-mono); color:var(--red-ink); flex:none; }
.faq__a{ margin:0; padding:0 24px; max-height:0; overflow:hidden; font:400 13px/1.75 var(--f-body); color:var(--silver); text-align:left; transition:max-height .28s ease, padding .28s ease; }
.faq__item.open .faq__a{ padding:0 24px 22px; max-height:320px; }

/* ==================== CLOSE ==================== */
.close{ position:relative; padding:120px var(--pad-x); border-top:1px solid var(--asphalt); display:flex; flex-direction:column; align-items:center; overflow:hidden; }
.close__bg{ position:absolute; inset:0; }
.close__scrim{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(11,13,15,.9), rgba(216,35,42,.5)); }
.close__inner{ position:relative; display:flex; flex-direction:column; align-items:center; gap:24px; }
.close__title{ margin:0; text-align:center; font:600 clamp(56px,9vw,100px)/0.9 var(--f-display); text-transform:uppercase; max-width:22ch; }
.close__sub{ margin:0; text-align:center; max-width:44ch; font:400 15px/1.7 var(--f-body); color:#DDE1E4; }

/* ==================== FOOTER ==================== */
.footer{ padding:26px var(--pad-x); display:flex; justify-content:space-between; align-items:center; gap:16px; font:500 10px/1 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--silver); border-top:1px solid var(--asphalt); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1024px){
  :root{ --pad-x:40px; --pad-y:72px; }
  .quote{ grid-template-columns:1fr; }
  .quote__photo{ aspect-ratio:16/10; max-height:320px; }
  .revstrip{ grid-template-columns:1fr; gap:24px; }
  .revstrip__divider{ display:none; }
  .step{ grid-template-columns:44px 1fr; grid-template-areas:"n t" "n p"; gap:8px 20px; }
  .step__n{ grid-area:n; }
  .step__t{ grid-area:t; }
  .step__p{ grid-area:p; }
  .process{ flex-direction:column; gap:48px; }
  .process__body{ max-width:none; }
}

@media (max-width:820px){
  .nav__links{ display:none; }
  .nav__apply{ display:none; }
  .nav__toggle{ display:flex; }
  .nav{ grid-template-columns:1fr auto; }
  .milestones{ grid-template-columns:1fr; }
  .wins{ grid-template-columns:1fr; }
  .strip{ grid-template-columns:1fr 1fr; }
  .pillars{ grid-template-columns:1fr 1fr; }
  .ramp{ grid-template-columns:1fr 1fr; }
  .figure__grid{ grid-template-columns:1fr 1fr; gap:24px 20px; }
  .wakeup{ grid-template-columns:1fr; gap:32px; }
  .wakeup__photo{ max-height:440px; }
  .tags{ grid-template-columns:1fr; }
  .wcard__shot{ height:auto; aspect-ratio:3/4; }
}

@media (max-width:560px){
  :root{ --pad-x:20px; --pad-y:60px; }
  /* Tighten the hero so the video + CTA buttons sit in the fold on load */
  .hero{ padding-top:12px; }
  .hero__inner{ gap:13px; }
  .hero__title{ font-size:42px; }
  .hero__sub{ font-size:15px; line-height:1.55; }
  .h2{ font-size:46px; }
  .h2--xl,.h2--lg{ font-size:48px; }
  .h2--md{ font-size:42px; }
  .form{ padding:26px 22px; }
  .form__row2{ grid-template-columns:1fr; }
  .figure{ padding:32px 22px; }
  .strip{ grid-template-columns:1fr 1fr; gap:10px; }
  .pillars,.ramp{ grid-template-columns:1fr; }
  .footer{ flex-direction:column; gap:10px; text-align:center; }
  .success{ padding:36px 22px; }
  .success__title{ font-size:44px; }
}

/* ==================== SCROLL REVEAL ====================
   The page "builds" as you scroll. Elements start offset + faded and settle in
   when they enter the viewport. Only applied when JS is on and the viewer has
   not asked for reduced motion; the hero is intentionally excluded so first
   paint / LCP is never delayed. `.reveal-fallback` (set by a failsafe timer)
   disables all hiding at once if the main script fails to run. */
@media (prefers-reduced-motion:no-preference){
  .js:not(.reveal-fallback) .section .kicker,
  .js:not(.reveal-fallback) .section .h2,
  .js:not(.reveal-fallback) .section .lead,
  .js:not(.reveal-fallback) .form,
  .js:not(.reveal-fallback) .quote,
  .js:not(.reveal-fallback) .revstrip,
  .js:not(.reveal-fallback) .figure,
  .js:not(.reveal-fallback) .slider,
  .js:not(.reveal-fallback) .disclaimer,
  .js:not(.reveal-fallback) .mcard,
  .js:not(.reveal-fallback) .pillar,
  .js:not(.reveal-fallback) .step,
  .js:not(.reveal-fallback) .wcard,
  .js:not(.reveal-fallback) .strip__cell,
  .js:not(.reveal-fallback) .tagcard,
  .js:not(.reveal-fallback) .rcard,
  .js:not(.reveal-fallback) .phone,
  .js:not(.reveal-fallback) .process__body,
  .js:not(.reveal-fallback) .close__inner > *{
    opacity:0;
    transform:translateY(30px) scale(.984);
    filter:blur(7px);
    transition:opacity .85s cubic-bezier(.16,.8,.24,1), transform .9s cubic-bezier(.16,.8,.24,1), filter .85s ease;
  }
  .js .reveal-in{
    opacity:1 !important;
    transform:none !important;
    filter:blur(0) !important;
  }
}

/* ==================== INTRO LOADER + LETTER MORPH ====================
   On load: MORE spells out, then each letter flies (FLIP, driven in app.js)
   into the exact spot of the headline's red M/O/R/E while the rest of the hero
   fades in. JS-driven; the .intro-done failsafe guarantees it always clears. */
.loader{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:var(--obsidian);
  background-image:radial-gradient(60% 60% at 50% 46%, rgba(216,35,42,.14) 0%, transparent 70%); }
.loader__word{ display:flex; gap:.03em; font:600 clamp(64px,17vw,190px)/1 var(--f-display); text-transform:uppercase; color:var(--red-ink); }
.loader__l{ display:inline-block; }

@media (prefers-reduced-motion:no-preference){
  .loader__l{ opacity:0; transform:translateY(48px) rotateX(-72deg); transform-origin:50% bottom;
    animation:loaderLetter .5s cubic-bezier(.16,.8,.24,1) forwards; }
  .loader__l:nth-child(1){ animation-delay:.08s; }
  .loader__l:nth-child(2){ animation-delay:.2s; }
  .loader__l:nth-child(3){ animation-delay:.32s; }
  .loader__l:nth-child(4){ animation-delay:.44s; }

  /* Hero content hidden until the intro reveals it (app.js adds .hero-in) */
  .hero__inner > *{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.16,.8,.24,1), transform .7s cubic-bezier(.16,.8,.24,1); }
  .hero-in .hero__title{ opacity:1; transform:none; transition:opacity .4s ease; }
  .hero-in .hero__inner > .badges{ opacity:1; transform:none; transition-delay:.12s; }
  .hero-in .hero__inner > .hero__sub{ opacity:1; transform:none; transition-delay:.22s; }
  .hero-in .hero__inner > .hero__frame{ opacity:1; transform:none; transition-delay:.3s; }
  .hero-in .hero__inner > .hero__cta{ opacity:1; transform:none; transition-delay:.4s; }
  .hero-in .hero__inner > .hero__note{ opacity:1; transform:none; transition-delay:.48s; }
}
@keyframes loaderLetter{ to{ opacity:1; transform:none; } }
/* Failsafe: once intro-done is set, force the loader gone and the hero visible */
.intro-done .loader{ display:none !important; }
.intro-done .hero__inner > *{ opacity:1 !important; transform:none !important; }

/* Processing overlay between the application submit and the thank-you page */
.processing{ position:fixed; inset:0; z-index:250; display:flex; align-items:center; justify-content:center;
  background:var(--obsidian);
  background-image:radial-gradient(60% 60% at 50% 46%, rgba(216,35,42,.14) 0%, transparent 70%); }
.processing__inner{ display:flex; flex-direction:column; align-items:center; gap:22px; text-align:center; padding:0 24px; }
.processing__spinner{ width:54px; height:54px; border-radius:50%;
  border:3px solid rgba(168,174,180,.22); border-top-color:var(--red); }
.processing__title{ font:600 clamp(22px,4.4vw,32px)/1.15 var(--f-display); text-transform:uppercase; letter-spacing:.02em; color:var(--ice); }
.processing__sub{ font:400 14px/1.6 var(--f-body); color:var(--silver); }
@media (prefers-reduced-motion:no-preference){
  .processing__spinner{ animation:procSpin .8s linear infinite; }
}
@keyframes procSpin{ to{ transform:rotate(360deg); } }

/* ==================== MOTION ==================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .ticker__track{ animation:none; }
  .btn{ transition:none; }
  .faq__a{ transition:none; }
  .loader{ display:none; }
  .hero__inner > *{ opacity:1; animation:none; }
}