/* /start, the one way in. Loaded after brand.css and company.css, so the
   palette, the one gold, the two typefaces and the four curves are the
   company pages' own. The flow (start.js) is the same in all three previews;
   only the layout differs:

     body.sk-scene   its own full-screen page, the footage behind the question
     body.sk-sheet   a sheet over the page you were reading
     body.sk-plan    the question beside the footage, your plan building on it

   One decision a screen. Choices are lit rows, never a grid of cards. */

/* ---------------- the footage ---------------- */
.st-reel{position:absolute;inset:0;overflow:hidden;background:var(--night)}
.st-reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.07);
  filter:saturate(1.02) contrast(1.05) brightness(.58) sepia(.08);
  transition:opacity 1.2s var(--e-soft),transform 7s var(--e-out)}
.st-reel video.on{opacity:1;transform:none}
.st-reel::after{content:"";position:absolute;inset:0;pointer-events:none}

/* ---------------- the progress: a light that fills as you answer ---------------- */
.st-bar{--p:0;position:relative;height:3px;background:rgba(241,236,228,.1);overflow:hidden}
.st-bar::before{content:"";position:absolute;inset:0;background:var(--gold-grad);transform-origin:0 50%;transform:scaleX(var(--p));
  box-shadow:0 0 14px var(--glow);transition:transform .9s var(--e-out)}

.st-back{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 4px;background:none;border:0;cursor:pointer;
  font-size:13.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);transition:color .3s ease}
.st-back::before{content:"";width:9px;height:9px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-left:4px}
.st-back:hover{color:var(--gold)}
.st-back[hidden]{display:none}
.st-close{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 4px;text-decoration:none;background:none;border:0;cursor:pointer;
  font-size:13.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);transition:color .3s ease}
.st-close:hover{color:var(--gold)}
.st-close i{position:relative;width:16px;height:16px}
.st-close i::before,.st-close i::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:1.5px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)}
.st-close i::after{transform:translate(-50%,-50%) rotate(-45deg)}

/* ---------------- one screen of the flow ---------------- */
.st-stage{display:grid;position:relative}
.st-step{grid-area:1/1;min-width:0;opacity:0;transform:translateY(22px);pointer-events:none;
  transition:opacity .55s var(--e-out),transform .8s var(--e-out)}
.st-step.back{transform:translateY(-22px)}
.st-step.on{opacity:1;transform:none;pointer-events:auto}
.st-step.gone{opacity:0;transform:translateY(-18px);transition-duration:.35s,.5s}
.st-step.gone-back{opacity:0;transform:translateY(18px);transition-duration:.35s,.5s}

.st-kicker{margin:0 0 18px;width:fit-content;font-size:13px;letter-spacing:.22em;text-transform:uppercase;
  background:var(--gold-grad) 50% 0/200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.st-q,.st-title{margin:0;outline:none;font-family:var(--serif);font-weight:300;color:var(--ink);text-wrap:balance;text-shadow:0 2px 30px rgba(5,6,8,.55)}
.st-q{font-size:clamp(34px,4.3vw,62px);line-height:1.06;max-width:15ch}
.st-title{font-size:clamp(30px,3.4vw,48px);line-height:1.1;max-width:18ch}
.st-sub{margin:16px 0 0;font-size:16.5px;color:var(--ink-2)}

/* the choices: lit rows you tap, nothing else */
.st-choices{display:flex;flex-direction:column;gap:8px;margin:34px 0 0;padding:0;list-style:none}
.st-choices li{opacity:0;transform:translateX(-14px)}
.st-step.on .st-choices li{animation:st-row .7s var(--e-out) both;animation-delay:calc(.12s + var(--i) * .055s)}
@keyframes st-row{to{opacity:1;transform:none}}
.st-choice{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:18px;width:100%;min-height:66px;
  padding:14px 22px 14px 26px;text-align:left;text-decoration:none;cursor:pointer;border:0;
  background:rgba(5,6,8,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background .35s ease,color .35s ease}
.st-choice::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold-grad);background-size:100% 300%;
  transform:scaleY(0);transform-origin:50% 100%;transition:transform .45s var(--e-out)}
.st-choice:hover,.st-choice:focus-visible{background:rgba(20,17,12,.72)}
.st-choice:hover::before,.st-choice:focus-visible::before,.st-choice[aria-pressed="true"]::before{transform:scaleY(1)}
.st-choice:focus-visible{outline-offset:-2px}
.st-c-l{grid-column:1;font-size:clamp(17px,1.35vw,19.5px);font-weight:400;letter-spacing:.01em;color:var(--ink);transition:transform .45s var(--e-out)}
.st-c-t{grid-column:1;margin-top:3px;font-size:13.5px;letter-spacing:.03em;color:var(--gold)}
.st-choice:hover .st-c-l{transform:translateX(6px)}
.st-c-mark,.st-c-go{grid-column:2;grid-row:1/span 2}
/* the four-point spark: lights on the row you're pointing at */
.st-c-mark{width:18px;height:18px;background:var(--gold-grad);opacity:.18;
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  transform:scale(.7) rotate(-20deg);transition:opacity .35s ease,transform .6s var(--e-set)}
.st-choice:hover .st-c-mark,.st-choice:focus-visible .st-c-mark{opacity:1;transform:none}
.st-c-go{font-size:18px;color:var(--ink-3);transition:color .3s ease}
.st-choice:hover .st-c-go{color:var(--gold)}
/* several at once: a box that fills */
.st-choice[aria-pressed] .st-c-mark{position:relative;clip-path:none;width:22px;height:22px;opacity:1;transform:none;background:none;
  box-shadow:inset 0 0 0 1.5px rgba(241,236,228,.4);transition:box-shadow .3s ease,background .3s ease}
.st-choice[aria-pressed="true"]{background:rgba(24,19,11,.8)}
.st-choice[aria-pressed="true"] .st-c-mark{background:var(--gold-grad);box-shadow:none}
.st-choice[aria-pressed="true"] .st-c-mark::after{content:"";position:absolute;left:8px;top:3px;width:6px;height:11px;border:solid var(--night);border-width:0 2px 2px 0;transform:rotate(45deg)}
/* the one you chose flares before the next question arrives */
.st-choice.picked{background:var(--gold-grad) 0 50%/220% 100%;animation:st-flare .5s var(--e-out) both}
.st-choice.picked .st-c-l,.st-choice.picked .st-c-t{color:var(--night)}
.st-choice.picked .st-c-mark{background:var(--night);opacity:1;transform:scale(1.1) rotate(45deg)}
@keyframes st-flare{from{background-position:100% 50%}to{background-position:0 50%}}

/* ---------------- buttons ---------------- */
.st-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 30px;margin-top:22px;
  font-size:14.5px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  border:1px solid rgba(241,236,228,.4);background:none;color:var(--ink);transition:background .35s ease,color .35s ease,border-color .35s ease,opacity .3s ease}
.st-btn.solid{background:var(--ink);border-color:var(--ink);color:var(--night)}
.st-btn.solid:hover{background:var(--gold-grad) 0 50%/280% 100%;border-color:transparent}
.st-btn:disabled{opacity:.35;cursor:default}
.st-continue{min-width:220px}
.st-step.on .st-continue{animation:st-row .7s var(--e-out) .5s both}
.st-acts{display:flex;flex-wrap:wrap;gap:12px}

/* ---------------- the end of a road ---------------- */
.st-price{display:flex;align-items:flex-start;margin:-6px 0 6px;font-family:var(--serif);font-weight:300;font-size:clamp(76px,8.6vw,124px);line-height:1;letter-spacing:.01em}
.st-price .cur{font-size:.42em;margin:.14em .06em 0 0;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.st-price .roll{display:inline-flex}
.st-price .dg{display:inline-block;height:1em;overflow:hidden}
.st-price .dg-c{display:flex;flex-direction:column;transform:translateY(0)}
.st-step.on .st-price .dg-c{transition:transform 1.5s var(--e-out);transition-delay:calc(.25s + var(--k) * .12s);transform:translateY(calc(var(--n) * -1em))}
.st-price i,.st-price .st-sep{display:block;height:1em;font-style:normal;background:var(--gold-grad) 50% 0/200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.st-line{margin:18px 0 0;max-width:44ch;font-size:18px;line-height:1.6;color:var(--ink-2)}
.st-step .st-line + .st-sub{font-size:14.5px;color:var(--ink-3);max-width:48ch}
.st-points{margin:22px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.st-points li{position:relative;padding-left:26px;font-size:16px;color:var(--ink-2);max-width:48ch}
.st-points li::before{content:"";position:absolute;left:0;top:.42em;width:11px;height:11px;background:var(--gold-grad);
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.st-days{margin:22px 0 0;font-size:15px;letter-spacing:.04em;color:var(--ink-2)}
.st-days b{font-family:var(--serif);font-weight:300;font-size:30px;margin-right:6px;vertical-align:-3px;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* the account (or the request): three fields, one button */
.st-account,.st-code,.st-pass,.st-done{margin-top:30px;padding:clamp(22px,2.6vw,34px);
  background:linear-gradient(180deg,rgba(227,172,78,.1),rgba(5,6,8,.72) 58%);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 40px 90px -50px #000,inset 0 1px 0 rgba(227,172,78,.35);animation:st-row .8s var(--e-out) .35s both}
.st-code,.st-pass,.st-done{animation-delay:0s}
.st-form-h{margin:0 0 4px;font-family:var(--serif);font-weight:300;font-size:clamp(24px,2.2vw,30px);color:var(--ink)}
.st-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.st-f{display:flex;flex-direction:column;gap:7px;min-width:0}
.st-f-full{grid-column:1/-1}
.st-f span{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.st-f input{width:100%;min-height:52px;padding:0 16px;border:0;border-radius:0;background:rgba(241,236,228,.07);color:var(--ink);
  font:inherit;font-size:17px;font-weight:300;outline:none;box-shadow:inset 0 -1px 0 rgba(241,236,228,.18);transition:box-shadow .3s ease,background .3s ease}
.st-f input::placeholder{color:rgba(241,236,228,.32)}
.st-f input:focus{background:rgba(241,236,228,.1);box-shadow:inset 0 -2px 0 var(--gold)}
.st-account .st-btn{width:100%}
.st-account .hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.st-fail{margin-top:4px}
.st-fail .st-btn{margin-top:10px}
.st-fine{margin:14px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-3)}
.st-err{margin:12px 0 0;font-size:14.5px;color:var(--gold)}
.st-digits{display:flex;gap:8px;margin-top:20px}
.st-digits input{width:min(52px,13vw);height:64px;padding:0;border:0;border-radius:0;text-align:center;background:rgba(241,236,228,.07);color:var(--ink);
  font-family:var(--serif);font-size:30px;font-weight:300;outline:none;box-shadow:inset 0 -1px 0 rgba(241,236,228,.18)}
.st-digits input:focus{box-shadow:inset 0 -2px 0 var(--gold);background:rgba(241,236,228,.1)}
.st-touch{width:100%;margin-top:22px}
.st-fp{position:relative;width:26px;height:26px;border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 62%,transparent 0 2.5px,currentColor 2.5px 3.6px);
  -webkit-mask:radial-gradient(circle,#000 62%,transparent 64%);mask:radial-gradient(circle,#000 62%,transparent 64%)}
.st-touch.ok{background:var(--gold-grad) 0 50%/280% 100%;border-color:transparent;animation:st-ok .9s var(--e-out) both}
@keyframes st-ok{0%{box-shadow:0 0 0 0 var(--glow)}100%{box-shadow:0 0 0 22px rgba(227,172,78,0)}}
.st-done .st-title{font-size:clamp(28px,2.8vw,38px)}

.st-links{display:flex;flex-direction:column;gap:8px;margin:28px 0 0;padding:0;list-style:none}
.st-links a{position:relative;display:flex;flex-direction:column;gap:3px;min-height:66px;justify-content:center;padding:12px 22px 12px 26px;text-decoration:none;
  background:rgba(5,6,8,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .35s ease}
.st-links a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold-grad);transform:scaleY(0);transform-origin:50% 100%;transition:transform .45s var(--e-out)}
.st-links a:hover{background:rgba(20,17,12,.72)}
.st-links a:hover::before{transform:scaleY(1)}
.st-links .st-c-t{order:-1;margin:0}

/* the plan that builds as you answer (shown in sk-plan) */
.st-plan{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.st-plan li{display:flex;flex-direction:column;gap:2px;animation:st-row .6s var(--e-out) both}
.st-plan span{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.st-plan b{font-family:var(--serif);font-weight:300;font-size:clamp(19px,1.6vw,23px);line-height:1.3;color:var(--ink)}
.st-plan .st-plan-now b{background:var(--gold-grad) 50% 0/200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.st-plan .st-plan-empty b{color:var(--ink-3);font-style:italic}

/* =====================================================================
   A. THE SCENE: /start is its own page, the footage full screen behind
   ===================================================================== */
.sk-scene{min-height:100svh}
.sk-scene .st-reel{position:fixed;z-index:0}
.sk-scene .st-reel::after{background:
  linear-gradient(90deg,rgba(5,6,8,.9) 0%,rgba(5,6,8,.62) 40%,rgba(5,6,8,.4) 70%,rgba(5,6,8,.62) 100%),
  linear-gradient(180deg,rgba(5,6,8,.55),rgba(5,6,8,0) 22%,rgba(5,6,8,0) 70%,rgba(5,6,8,.85))}
.sk-scene .st-top{position:fixed;top:0;left:0;right:0;z-index:5;transition:background .35s ease,box-shadow .35s ease}
/* once the page moves, the header gets its own backdrop, so nothing slides
   under the mark, Back and Close (on a phone the $297 did) */
.sk-scene.st-scrolled .st-top{background:rgba(5,6,8,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 18px 40px -26px #000}
.sk-scene .st-top-acts{margin-left:auto;display:flex;align-items:center;gap:22px}
.sk-scene .st-top-in{display:flex;align-items:center;gap:18px;max-width:1320px;margin:0 auto;padding:14px var(--pad)}
.sk-scene .st-top .mark img{height:34px}
.sk-scene .st-top .st-back{margin-left:auto}
.sk-scene .st-main{position:relative;z-index:1;min-height:100svh;display:flex;align-items:center;padding:calc(var(--hdr) + 36px) 0 64px}
.sk-scene .st-stage{width:100%;max-width:1320px;margin:0 auto;padding:0 var(--pad)}
.sk-scene .st-plan-wrap{display:none}
@media (min-width:980px){
  .sk-scene .st-step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);column-gap:clamp(40px,7vw,120px);align-content:center;align-items:start}
  .sk-scene .st-step > *{grid-column:1}
  .sk-scene .st-step > .st-choices,.sk-scene .st-step > .st-continue,.sk-scene .st-step > .st-account,.sk-scene .st-step > .st-code,
  .sk-scene .st-step > .st-pass,.sk-scene .st-step > .st-done,.sk-scene .st-step > .st-links{grid-column:2;grid-row:1/span 12;align-self:center}
  .sk-scene .st-step > .st-continue{grid-row:13;align-self:start;justify-self:start}
  .sk-scene .st-step > .st-choices,.sk-scene .st-step > .st-links{margin-top:0}
  .sk-scene .st-step > .st-account,.sk-scene .st-step > .st-code,.sk-scene .st-step > .st-pass,.sk-scene .st-step > .st-done{margin-top:0}
  .sk-scene .st-q{font-size:clamp(44px,4.6vw,70px)}
}

/* =====================================================================
   B. THE SHEET: stay on the page; the flow slides over it
   ===================================================================== */
.st-scrim{position:fixed;inset:0;z-index:70;background:rgba(5,6,8,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:opacity .5s var(--e-soft)}
.st-sheet{position:fixed;top:0;right:0;bottom:0;z-index:71;width:min(600px,100vw);display:flex;flex-direction:column;background:var(--night);
  box-shadow:-40px 0 120px -40px #000;transform:translateX(104%);transition:transform .75s var(--e-out);visibility:hidden}
.st-open .st-scrim{opacity:1;pointer-events:auto}
.st-open .st-sheet{transform:none;visibility:visible}
.st-open{overflow:hidden}
.st-sheet .st-band{position:relative;flex:0 0 clamp(150px,24vh,230px)}
.st-sheet .st-reel::after{background:linear-gradient(180deg,rgba(5,6,8,.4),rgba(5,6,8,.1) 40%,var(--night))}
.st-sheet .st-band-top{position:absolute;left:0;right:0;top:0;z-index:2;display:flex;align-items:center;gap:10px;padding:10px clamp(20px,3vw,34px)}
.st-sheet .st-band-top .st-close{margin-left:auto}
.st-sheet .st-band .st-bar{position:absolute;left:0;right:0;bottom:0;z-index:2}
.st-sheet .st-scroll{flex:1;overflow:auto;overscroll-behavior:contain;padding:clamp(24px,3.4vh,40px) clamp(20px,3vw,40px) 48px}
.st-sheet .st-q{font-size:clamp(32px,3.2vw,46px)}
.st-sheet .st-choices{margin-top:26px}
.st-sheet .st-choice,.st-sheet .st-links a{background:rgba(241,236,228,.045)}
.st-sheet .st-choice:hover,.st-sheet .st-links a:hover{background:rgba(227,172,78,.1)}
.st-sheet .st-choice[aria-pressed="true"]{background:rgba(227,172,78,.12)}
.st-sheet .st-plan-wrap{display:none}
.st-sheet .st-price{font-size:clamp(72px,7vw,104px)}
@media (max-width:640px){
  .st-sheet{top:auto;height:calc(100svh - 18px);width:100vw;transform:translateY(104%)}
  .st-sheet .st-band{flex-basis:clamp(120px,19vh,170px)}
}
/* the Work page, with its form gone: the needs open the sheet */
.st-needs{display:flex;flex-direction:column;gap:8px;margin:30px 0 0;padding:0;list-style:none;max-width:760px}
.st-needs .st-choice{background:var(--lift)}
.st-needs .st-choice:hover{background:#15130F}
.st-entry{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(30px,6vw,90px);align-items:start}
.st-entry .lead{margin:0}
@media (max-width:900px){.st-entry{grid-template-columns:1fr}}

/* =====================================================================
   C. YOUR PLAN BESIDE: the question on one side, your plan on the footage
   ===================================================================== */
.sk-plan .st-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);min-height:calc(100svh - var(--hdr))}
.sk-plan .st-side{position:sticky;top:var(--hdr);height:calc(100svh - var(--hdr));overflow:hidden}
.sk-plan .st-reel::after{background:linear-gradient(180deg,rgba(5,6,8,.35),rgba(5,6,8,.05) 35%,rgba(5,6,8,.9) 100%),linear-gradient(90deg,rgba(5,6,8,0) 60%,rgba(5,6,8,.75))}
.sk-plan .st-plan-wrap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(28px,5vh,56px) clamp(24px,3.4vw,52px)}
.sk-plan .st-plan-h{margin:0 0 18px;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(26px,2.3vw,34px);color:var(--ink)}
.sk-plan .st-main{display:flex;flex-direction:column;min-width:0}
.sk-plan .st-nav{display:flex;align-items:center;gap:18px;min-height:64px;padding:0 clamp(24px,4vw,72px)}
.sk-plan .st-nav .st-bar{flex:1}
.sk-plan .st-stage{flex:1;align-content:center;padding:clamp(20px,4vh,48px) clamp(24px,4vw,72px) 72px}
.sk-plan .st-step{max-width:620px}
.sk-plan .st-choice,.sk-plan .st-links a{background:var(--lift)}
.sk-plan .st-choice:hover,.sk-plan .st-links a:hover,.sk-plan .st-choice[aria-pressed="true"]{background:#16130D}
.sk-plan .st-account,.sk-plan .st-code,.sk-plan .st-pass,.sk-plan .st-done{background:linear-gradient(180deg,rgba(227,172,78,.1),var(--lift) 58%)}
@media (max-width:900px){
  .sk-plan .st-split{grid-template-columns:1fr;min-height:0}
  .sk-plan .st-side{position:relative;top:0;height:clamp(170px,26svh,240px)}
  .sk-plan .st-plan-wrap{padding:18px var(--pad)}
  .sk-plan .st-plan-h{display:none}
  .sk-plan .st-plan li:not(:last-child){display:none}
  .sk-plan .st-nav{padding:0 var(--pad)}
  .sk-plan .st-stage{padding:22px var(--pad) 56px}
}

/* ---------------- phones ---------------- */
@media (max-width:640px){
  .st-q{font-size:clamp(30px,8.6vw,38px)}
  .st-title{font-size:clamp(28px,8vw,34px)}
  .st-choice{min-height:60px;padding:12px 16px 12px 20px}
  .st-fields{grid-template-columns:1fr}
  .st-price{font-size:clamp(68px,20vw,88px)}
  .sk-scene .st-main{align-items:flex-start;padding-top:calc(var(--hdr) + 20px)}
  .sk-scene .st-top-in{padding:10px var(--pad)}
  .sk-scene .st-close span{display:none}
}

@media (prefers-reduced-motion:reduce){
  .st-step,.st-step.gone,.st-step.gone-back,.st-reel video,.st-sheet,.st-scrim,.st-bar::before{transition:none}
  .st-step.on .st-choices li,.st-account,.st-code,.st-pass,.st-done,.st-plan li,.st-step.on .st-continue{animation:none;opacity:1;transform:none}
  .st-step.on .st-price .dg-c{transition:none}
}