/* One ride in one continuous world. Three complete identities for AJ to compare; A is the recommendation. */
body[data-p="a"]{--bg:#0B0A09;--bg2:#1A1512;--ink:#F1E9DC;--ink2:rgba(241,233,220,.82);--acc:#E3B870;--on:#17110A;--disp:"Libre Caslon Display","Times New Roman",serif;--text:"DM Sans","Helvetica Neue",Arial,sans-serif;--dw:400;--track:-.005em;--ital:normal}
body[data-p="b"]{--bg:#0C1322;--bg2:#141D31;--ink:#F4EEE2;--ink2:rgba(244,238,226,.82);--acc:#C9A273;--on:#141008;--disp:"Gilda Display","Times New Roman",serif;--text:"Instrument Sans","Helvetica Neue",Arial,sans-serif;--dw:400;--track:0;--ital:normal}
body[data-p="c"]{--bg:#0F1012;--bg2:#1A1C20;--ink:#E9EAEC;--ink2:rgba(233,234,236,.82);--acc:#F2CD5C;--on:#17130A;--disp:"Encode Sans Expanded","Helvetica Neue",Arial,sans-serif;--text:"Encode Sans Expanded","Helvetica Neue",Arial,sans-serif;--dw:400;--track:-.02em;--ital:normal}
:root{--out:cubic-bezier(.16,1,.3,1);--gut:max(24px,5vw)}
*{box-sizing:border-box}
html{background:#0B0A09;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--text);overflow-x:clip}
a{color:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.skip{position:fixed;left:16px;top:-60px;z-index:40;background:var(--acc);color:var(--on);padding:10px 14px;border-radius:8px}
.skip:focus{top:12px}

.top{position:fixed;left:0;right:0;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:calc(18px + env(safe-area-inset-top,0px)) var(--gut) 18px;pointer-events:none}
.top a{pointer-events:auto;text-decoration:none}
.brand{font:var(--dw) 24px/1 var(--disp);letter-spacing:var(--track);color:var(--ink)}
.cta{background:var(--acc);color:var(--on);font-weight:600;font-size:15px;padding:12px 20px;border-radius:999px;transition:transform .35s var(--out)}
.cta:hover{transform:translateY(-2px)}

.stage{position:fixed;left:0;top:0;width:100%;height:100lvh;overflow:hidden;background:var(--bg);contain:strict}
.layer{position:absolute;left:0;top:0;will-change:transform,opacity;opacity:0;transform-origin:50% 50%}
.layer img{display:block;width:100%;height:100%;user-select:none;-webkit-user-drag:none}
.window{position:absolute;overflow:hidden}
.window img{position:absolute;max-width:none}
.sweep{position:absolute;top:-6%;bottom:-6%;left:-30%;width:160%;background:#050505;opacity:0;will-change:transform}
.sweep img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.sweep::after{content:"";position:absolute;top:0;bottom:0;right:0;width:1.2%;background:linear-gradient(90deg,transparent,rgba(241,233,220,.55))}
.sweep.rtl::after{right:auto;left:0;background:linear-gradient(270deg,transparent,rgba(241,233,220,.55))}
.scrim{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .5s linear}
.scrim.left{background:linear-gradient(90deg,rgba(6,5,4,.78) 0%,rgba(6,5,4,.5) 34%,rgba(6,5,4,0) 62%)}
.scrim.right{background:linear-gradient(270deg,rgba(6,5,4,.86) 0%,rgba(6,5,4,.6) 40%,rgba(6,5,4,0) 70%)}
.scrim.bottom{background:linear-gradient(0deg,rgba(6,5,4,.86) 0%,rgba(6,5,4,.5) 30%,rgba(6,5,4,0) 58%)}
.scrim.top{background:linear-gradient(180deg,rgba(6,5,4,.86) 0%,rgba(6,5,4,.5) 34%,rgba(6,5,4,0) 62%)}
.scrim.lefttop{background:radial-gradient(120% 110% at 0% 12%,rgba(6,5,4,.92) 0%,rgba(6,5,4,.78) 34%,rgba(6,5,4,.34) 58%,rgba(6,5,4,0) 78%)}
.route{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.route path{fill:none;stroke:var(--acc);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke}

.track{height:calc(var(--len,27) * 100lvh)}
.lines{position:fixed;inset:0;z-index:10;pointer-events:none;height:100lvh}
.say{position:absolute;max-width:min(640px,44vw);visibility:hidden;transition:visibility 0s .5s}
.say.on{visibility:visible;transition:visibility 0s}
.say[data-pos="left"]{left:var(--gut);bottom:17vh}
.say[data-pos="left-top"]{left:var(--gut);top:17vh}
.say[data-pos="right"]{right:var(--gut);top:15vh;max-width:min(480px,40vw)}
.say[data-pos="center"]{left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;max-width:80vw;width:max-content}
.say[data-pos="bottom-center"]{left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 11vh);transform:translateX(-50%);text-align:center;max-width:min(760px,86vw);width:max-content}
.say.hero{max-width:min(900px,58vw)}
.say[data-live].on{pointer-events:auto}
h1,h2{margin:0;font-family:var(--disp);font-weight:var(--dw);letter-spacing:var(--track);line-height:1.04;text-wrap:balance}
.say h1{font-size:clamp(46px,6.4vw,104px)}
.say h2{font-size:clamp(36px,4.5vw,74px)}
body[data-p="c"] .say h1{font-size:clamp(36px,4.8vw,78px)}
body[data-p="c"] .say h2{font-size:clamp(28px,3.3vw,54px)}
h1 em,h2 em{font-style:var(--ital);color:var(--acc)}
.sub{margin:16px 0 0;color:var(--ink);font-size:clamp(17px,1.35vw,21px);line-height:1.45;text-shadow:0 1px 18px rgba(0,0,0,.55)}
.ln{display:block;overflow:hidden;padding:.08em 0 .12em;margin:-.08em 0 -.12em}
.ln>span{display:block;transform:translateY(112%);transition:transform .5s cubic-bezier(.4,0,1,1)}
.say.on .ln>span{transform:none;transition:transform .8s var(--out)}
.say.on .ln:nth-of-type(2)>span{transition-delay:.08s}
.say.on .sub .ln>span{transition-delay:.16s}

.planner{margin-top:22px;display:grid;gap:12px}
.planner label{font-size:15px;color:var(--ink)}
.planner select{min-height:50px;width:100%;padding:0 14px;background:rgba(10,9,8,.72);color:var(--ink);border:1px solid rgba(241,233,220,.34);border-radius:10px;font:500 18px var(--text)}
.planner dl{margin:6px 0;display:grid;gap:8px}
.planner dl div{display:flex;justify-content:space-between;gap:14px;align-items:baseline;border-bottom:1px solid rgba(241,233,220,.22);padding-bottom:7px}
.planner dt{font-size:15px;color:var(--ink2)}
.planner dd{margin:0;font:var(--dw) 26px/1.1 var(--disp);font-variant-numeric:tabular-nums}
.planner dl div:last-child dd{color:var(--acc)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border:0;border-radius:999px;background:var(--acc);color:var(--on);font:600 16px var(--text);text-decoration:none;cursor:pointer;transition:transform .35s var(--out)}
.btn:hover{transform:translateY(-2px)}
.fine{margin:0;font-size:14px;color:var(--ink2)}

.meter{position:fixed;left:var(--gut);bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:12;margin:0;font-size:14px;letter-spacing:.06em;color:var(--ink);font-variant-numeric:tabular-nums;display:flex;gap:14px;text-shadow:0 1px 10px rgba(0,0,0,.7);transition:opacity .4s}
.meter b{color:var(--acc);font-weight:600;text-transform:uppercase;letter-spacing:.1em}
.meter.off{opacity:0}

.onlak{position:relative;z-index:15;padding:6vh var(--gut) 40px;max-width:1120px}
.block{padding:12vh 0 4vh;max-width:760px}
.block h2{font-size:clamp(36px,4.6vw,72px)}
body[data-p="c"] .block h2{font-size:clamp(28px,3.3vw,54px)}
.steps{list-style:none;counter-reset:s;margin:34px 0 0;padding:0;display:grid;gap:22px}
.steps li{counter-increment:s;display:grid;grid-template-columns:54px 1fr;color:var(--ink2);font-size:18px}
.steps li::before{content:counter(s);font:var(--dw) 40px/1 var(--disp);color:var(--acc);grid-row:span 2}
.steps b{color:var(--ink);display:block;font-weight:600}
.plain{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:18px;color:var(--ink2);font-size:18px}
.plain b{color:var(--ink);font-weight:600}
.note{margin:28px 0 0;color:var(--ink2);font-size:17px}
.qa{margin-top:26px}
.qa details{border-bottom:1px solid rgba(241,233,220,.2)}
.qa summary{cursor:pointer;padding:18px 0;font-size:19px;font-weight:500;list-style-position:outside}
.qa p{margin:0 0 18px;color:var(--ink2)}
.sub2{margin:16px 0 0;color:var(--ink2);font-size:19px}
.form{margin-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f{display:grid;gap:6px;min-width:0}
.f.wide{grid-column:1/-1}
.f label{font-size:15px;color:var(--ink2)}
.f input,.f select{width:100%;min-height:50px;padding:0 14px;background:rgba(10,9,8,.6);color:var(--ink);border:1px solid rgba(241,233,220,.3);border-radius:10px;font:400 max(16px,1em) var(--text)}
.form .btn{grid-column:1/-1;justify-self:start}
.form .fine{grid-column:1/-1}
.foot{padding:14vh 0 90px;color:var(--ink2);font-size:15px}
.foot p{margin:0 0 6px}

.switch{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:35;display:flex;align-items:center;gap:6px;background:rgba(10,9,8,.8);border:1px solid rgba(241,233,220,.25);border-radius:999px;padding:5px 6px 5px 14px;font-size:13px;color:var(--ink)}
.switch button{width:34px;height:34px;border-radius:50%;border:1px solid rgba(241,233,220,.3);background:transparent;color:var(--ink);font:600 13px var(--text);cursor:pointer}
.switch button.on{background:var(--acc);color:var(--on);border-color:var(--acc)}

@media (max-width:759px),(pointer:coarse) and (max-width:900px){
  :root{--gut:20px}
  .brand{font-size:21px}
  .cta{font-size:14px;padding:10px 16px}
  .say,.say[data-pos]{left:20px;right:20px;top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 84px);max-width:none;width:auto;transform:none;text-align:left}
  .say[data-m="top"]{top:calc(env(safe-area-inset-top,0px) + 92px);bottom:auto}
  .say h1{font-size:clamp(42px,12vw,56px)}
  .say h2{font-size:clamp(33px,9.4vw,44px)}
  body[data-p="c"] .say h1{font-size:clamp(30px,8.6vw,40px)}
  body[data-p="c"] .say h2{font-size:clamp(25px,7vw,34px)}
  .sub{font-size:17px}
  .say.plan{bottom:calc(env(safe-area-inset-bottom,0px) + 72px)}
  .planner{margin-top:12px;gap:8px}
  .planner dl{gap:4px;margin:2px 0}
  .planner dd{font-size:21px}
  .planner .fine{display:none}
  .meter{font-size:13px;gap:10px;bottom:calc(52px + env(safe-area-inset-bottom,0px))}
  .switch span{display:none}
  .switch{padding:4px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  .switch button{width:30px;height:30px}
  .form{grid-template-columns:1fr}
  .block{padding-top:9vh}
}
@media (prefers-reduced-motion:reduce){
  .ln>span,.say.on .ln>span{transition:none;transform:none}
  .scrim{transition:none}
}