/* Home: split screen. Left = S1 stage. Right = V1 checkout. */
.split{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}
.left{position:sticky;top:0;height:100vh;height:100svh;min-height:600px;overflow:hidden;display:flex;flex-direction:column;background:#000;isolation:isolate}
.right{background:var(--bg-1);border-left:1px solid rgba(255,255,255,.06);padding:calc(var(--nav-h) + 56px) clamp(24px,4.4vw,72px) 56px;min-width:0}

/* ---- S1 hero copy ---- */
.hero-copy{position:relative;z-index:5;text-align:center;padding:calc(var(--nav-h) + clamp(28px,5.2vh,64px)) clamp(24px,4vw,64px) 0;display:flex;flex-direction:column;align-items:center}
.hero-copy .eyebrow{justify-content:center}
.hero-h{font-size:clamp(40px,4.6vw,72px);line-height:1;letter-spacing:-.012em;font-weight:500;margin:0}
.hero-h .grad{display:block;padding-bottom:.06em}
.hero-lead{max-width:34em;margin:16px auto 0;font-size:clamp(16px,1.15vw,18px);line-height:1.42;color:var(--text-2);letter-spacing:0}
.hero-ctas{display:flex;gap:18px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:24px}
.hero-fine{position:absolute;z-index:6;left:0;right:0;bottom:18px;text-align:center;padding:0 24px;pointer-events:none}
.hero-fine .fine{color:rgba(245,245,247,.55)}

/* ---- V1 panel ---- */
.v1-head .eyebrow{color:var(--ok)}
.v1-title{font-size:clamp(40px,4vw,60px);line-height:1;letter-spacing:-.012em;font-weight:500;margin:0}
.v1-title span{display:block;font-size:clamp(20px,1.7vw,26px);letter-spacing:-.006em;line-height:1.2;color:var(--text-2);margin-top:12px;font-weight:500}
.v1-intro{margin:18px 0 0;color:var(--text-2);max-width:36em}
.v1-intro b{color:var(--text);font-weight:600}
.perks{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:22px 0 0;padding:0}
.perks li{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 13px;border-radius:999px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--line);font-size:13px;color:var(--text)}
.perks li svg{width:14px;height:14px;color:var(--ok)}
.perks li.kit{box-shadow:inset 0 0 0 1px rgba(234,57,222,.45);background:rgba(234,57,222,.08)}
.perks li.kit svg{color:#f08df5}
.v1-photo{margin:28px 0 0;border-radius:var(--radius);overflow:hidden;background:radial-gradient(80% 90% at 50% 30%,#1d1d22,#0b0b0d);aspect-ratio:16/10}
.v1-photo img{width:100%;height:100%;object-fit:cover}

.order{margin-top:40px}
.step{padding:28px 0;border-top:1px solid var(--line)}
.step-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 6px}
.step-h h3{font-size:22px;letter-spacing:-.006em;margin:0;font-weight:600}
.step-h .n{font-size:13px;color:var(--text-3);font-weight:600}
.step > p.help{margin:0 0 16px;color:var(--text-3);font-size:14px}

.insts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.inst{position:relative;display:flex;flex-direction:column;gap:2px;padding:16px 16px 14px;border-radius:var(--radius-s);background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .25s,background .25s}
.inst.on{box-shadow:inset 0 0 0 2px #d877ea;background:linear-gradient(180deg,rgba(234,57,222,.10),rgba(125,78,239,.05)),var(--bg-2)}
.inst img{position:absolute;right:12px;bottom:12px;height:58px;width:auto;max-width:42%;object-fit:contain;opacity:.92;pointer-events:none}
.inst .ruo + .nm,.inst .nm{padding-right:4px}
.inst .nm{font-weight:600;font-size:15px;letter-spacing:0;line-height:1.25}
.inst .meta{font-size:13px;color:var(--text-3)}
.inst .ruo{position:absolute;top:14px;right:14px;z-index:1;font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--text-3);border:1px solid var(--line-2);border-radius:6px;padding:2px 6px}
.stepper{display:inline-flex;align-items:center;gap:2px;margin-top:12px;align-self:flex-start;border-radius:999px;background:rgba(255,255,255,.06);padding:3px}
.stepper button{width:32px;height:32px;border-radius:50%;border:0;background:transparent;font-size:18px;line-height:1;cursor:pointer;color:var(--text)}
.stepper button:hover{background:rgba(255,255,255,.1)}
.stepper button:disabled{opacity:.3;cursor:default;background:transparent}
.stepper output{min-width:28px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums}

.seg{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.seg label{position:relative;display:block;padding:16px;border-radius:var(--radius-s);background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;transition:box-shadow .25s}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label:has(input:checked){box-shadow:inset 0 0 0 2px #d877ea}
.seg label:has(input:focus-visible){outline:2px solid var(--magenta);outline-offset:3px}
.seg b{display:block;font-weight:600;font-size:15px}
.seg span{display:block;font-size:13px;color:var(--text-3);margin-top:2px}

.boxes-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding:14px 16px;border-radius:var(--radius-s);background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line)}
.boxes-row b{font-weight:600}
.boxes-row small{display:block;color:var(--text-3);font-size:13px}
.boxes-row .stepper{margin:0}

.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.tier{padding:12px 14px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line);color:var(--text-3);font-size:13px;transition:all .3s}
.tier b{display:block;font-size:18px;color:var(--text-2);font-weight:600;letter-spacing:0}
.tier.on{box-shadow:inset 0 0 0 1px #d877ea;background:rgba(234,57,222,.07);color:var(--text-2)}
.tier.on b{color:#fff}

.summary{margin-top:18px;border-radius:var(--radius-s);background:#000;box-shadow:inset 0 0 0 1px var(--line);padding:18px 18px 14px}
.summary dl{display:grid;grid-template-columns:1fr auto;gap:8px 12px;margin:0;font-size:15px}
.summary dt{color:var(--text-2)}
.summary dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.summary .kit dd{color:#f08df5;font-weight:600}
.summary .total{border-top:1px solid var(--line);padding-top:12px;margin-top:4px;font-size:19px;font-weight:600}
.summary .total dt{color:var(--text)}
.summary .note{margin-top:10px}

details.contract{margin-top:14px;border-radius:var(--radius-s);box-shadow:inset 0 0 0 1px var(--line);padding:0 16px}
details.contract summary{cursor:pointer;list-style:none;padding:14px 0;font-weight:500;display:flex;justify-content:space-between;align-items:center}
details.contract summary::-webkit-details-marker{display:none}
details.contract summary::after{content:"+";font-size:20px;color:var(--text-3);transition:transform .3s}
details.contract[open] summary::after{transform:rotate(45deg)}
details.contract .body{padding:0 0 16px;color:var(--text-3);font-size:14px}

.fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fields .full{grid-column:1/-1}
.f{position:relative;display:block}
.f input,.f select{width:100%;height:56px;padding:22px 14px 6px;border-radius:14px;border:0;background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line-2);font-size:16px;outline:none;transition:box-shadow .2s;appearance:none;-webkit-appearance:none}
.f select{padding-right:34px;background-image:linear-gradient(45deg,transparent 50%,#86868b 50%),linear-gradient(135deg,#86868b 50%,transparent 50%);background-position:calc(100% - 20px) 26px,calc(100% - 15px) 26px;background-size:5px 5px;background-repeat:no-repeat}
.f span{position:absolute;left:15px;top:17px;font-size:16px;color:var(--text-3);pointer-events:none;transition:all .18s var(--ease)}
.f input:focus,.f select:focus{box-shadow:inset 0 0 0 2px #d877ea}
.f input:focus + span,.f input:not(:placeholder-shown) + span,.f select + span{top:8px;font-size:11.5px;font-weight:500}
.f input:user-invalid{box-shadow:inset 0 0 0 2px var(--bad)}
.f em{font-style:normal;color:var(--text-3);font-weight:400}

.pay{display:grid;gap:10px}
.pay label{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:start;padding:16px;border-radius:var(--radius-s);background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer}
.pay label:has(input:checked){box-shadow:inset 0 0 0 2px #d877ea}
.pay input{margin:3px 0 0;accent-color:#d877ea;width:18px;height:18px}
.pay b{font-weight:600}
.pay small{grid-column:2;color:var(--text-3);font-size:13px}
.check{display:flex;gap:10px;align-items:center;margin-top:14px;font-size:15px;color:var(--text-2);cursor:pointer}
.check input{width:18px;height:18px;accent-color:#d877ea}
.place{margin-top:24px;width:100%;min-height:56px;font-size:18px;font-weight:600}
.place-note{text-align:center;margin-top:10px}
.order-msg{margin-top:16px;padding:16px;border-radius:14px;font-size:15px;display:none}
.order-msg.err{display:block;background:rgba(255,69,58,.1);box-shadow:inset 0 0 0 1px rgba(255,69,58,.5)}
.done{display:none;text-align:center;padding:48px 8px}
.done.show{display:block}
.done .ring{width:64px;height:64px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;background:rgba(48,209,88,.12);box-shadow:inset 0 0 0 1.5px var(--ok)}
.done h3{font-size:28px;letter-spacing:-.006em;margin:0}
.done p{color:var(--text-2);margin:10px auto 0;max-width:28em}

.result{margin-top:56px;padding-top:40px;border-top:1px solid var(--line)}
.states{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}
.state{padding:16px 12px 14px;border-radius:var(--radius-s);background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line);text-align:center}
.state svg{width:100%;height:auto;max-width:150px;margin:0 auto 10px}
.state b{display:block;font-size:15px}
.state small{display:block;color:var(--text-3);font-size:12.5px;line-height:1.35;margin-top:4px}
.state.pass b{color:var(--ok)}.state.cool b{color:var(--cool)}.state.hot b{color:var(--bad)}
.inbox{margin-top:56px;padding-top:40px;border-top:1px solid var(--line)}
.inbox figure{margin:20px 0 0;border-radius:var(--radius);overflow:hidden;background:var(--bg-2);aspect-ratio:16/10}
.inbox figure img{width:100%;height:100%;object-fit:cover}
.docs{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.r-foot{margin-top:56px;padding-top:28px;border-top:1px solid var(--line);display:grid;gap:10px}
.r-foot p{margin:0}

/* ---- Responsive ---- */
@media (max-width:1068px){
  .split{grid-template-columns:1fr}
  .left{position:relative;height:100svh;min-height:640px;max-height:980px}
  .right{border-left:0;border-top:1px solid rgba(255,255,255,.06);padding-top:56px}
}
@media (max-width:734px){
  .hero-copy{padding-top:calc(var(--nav-h) + 26px)}
  .hero-h{font-size:clamp(38px,10.6vw,52px)}
  .hero-lead{font-size:16px;margin-top:14px}
  .hero-ctas{margin-top:20px;gap:14px}
  .insts,.seg,.fields{grid-template-columns:1fr}
  .tiers{grid-template-columns:repeat(3,1fr)}
  .states{grid-template-columns:1fr}
  .state{display:grid;grid-template-columns:110px 1fr;text-align:left;align-items:center;gap:0 14px}
  .state svg{margin:0;grid-row:1/3}
}
@media (prefers-reduced-motion:reduce){.rui-rec i{animation:none}.rui-row{animation:none}}