/* HYBRI8 onboarding — premium visual layer. Presentation only. */
body{
  min-height:100svh;
  background:
    radial-gradient(circle at 86% 2%,rgba(231,185,143,.16),transparent 25rem),
    radial-gradient(circle at 10% 36%,rgba(144,103,73,.08),transparent 24rem),
    linear-gradient(180deg,#0b1114 0%,#071016 44%,#04080a 100%);
}
.shell{width:min(1040px,100%)}
.top{
  border-bottom:1px solid rgba(231,185,143,.08);
  background:linear-gradient(180deg,rgba(6,12,15,.96),rgba(6,12,15,.74),rgba(6,12,15,0));
}
.brand{letter-spacing:.075em}
.mark{
  border-color:rgba(239,193,151,.38);
  background:linear-gradient(145deg,#2c2119,#151311 68%);
  box-shadow:0 10px 34px rgba(0,0,0,.36),inset 0 1px rgba(255,255,255,.05);
}
.back{padding:10px 12px;border-radius:12px;transition:background .18s ease,color .18s ease}
.back:hover{background:rgba(231,185,143,.07);color:#f0d2b7}
.hero{
  isolation:isolate;
  border-color:rgba(231,185,143,.24);
  background:
    radial-gradient(circle at 82% 14%,rgba(231,185,143,.17),transparent 19rem),
    linear-gradient(145deg,rgba(29,26,23,.98),rgba(11,18,21,.98) 58%,rgba(7,12,15,.98));
  box-shadow:0 32px 90px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.035);
}
.hero:before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:linear-gradient(115deg,rgba(255,255,255,.035),transparent 32%,transparent 72%,rgba(213,161,115,.035));
}
.hero h1{max-width:760px;text-wrap:balance}
.hero p{max-width:640px;color:#c9d0cc}
.onboarding-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:18px;align-items:stretch}
.onboarding-hero-copy{align-self:center}
.onboarding-hero-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.onboarding-hero-tags span{padding:7px 9px;border:1px solid rgba(231,185,143,.18);border-radius:999px;background:rgba(213,161,115,.06);color:#e2c3a7;font-size:10px;font-weight:900;letter-spacing:.1em}
.onboarding-hero-visual{position:relative;overflow:hidden;min-height:270px;border:1px solid rgba(231,185,143,.22);border-radius:20px;background:#071014;box-shadow:0 22px 58px rgba(0,0,0,.3);isolation:isolate}
.onboarding-hero-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 27%;filter:saturate(.82) contrast(1.06) brightness(.76)}
.onboarding-hero-visual:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(4,8,10,.04),rgba(4,8,10,.1) 46%,rgba(4,8,10,.9) 100%)}
.onboarding-hero-visual>div{position:absolute;z-index:2;left:14px;right:14px;bottom:14px}
.onboarding-hero-visual small{display:block;color:#e7b98f;font-size:10px;font-weight:900;letter-spacing:.12em}
.onboarding-hero-visual strong{display:block;margin-top:5px;color:#fff;font-size:21px;line-height:1;letter-spacing:-.03em}

.onboarding-carryover{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:14px;align-items:center;margin-top:16px;padding:16px 18px;border:1px solid rgba(158,207,177,.22);border-radius:20px;background:radial-gradient(circle at 96% 0,rgba(158,207,177,.08),transparent 12rem),linear-gradient(145deg,rgba(15,25,22,.97),rgba(7,13,16,.98));box-shadow:0 18px 48px rgba(0,0,0,.22)}.onboarding-carryover[hidden]{display:none!important}.onboarding-carryover-mark{width:52px;height:52px;display:grid;place-items:center;border:1px solid rgba(158,207,177,.24);border-radius:16px;background:rgba(158,207,177,.08);color:#c2e2cc;font-size:22px;font-weight:950}.onboarding-carryover h2{margin:5px 0 5px;font-size:24px;letter-spacing:-.04em}.onboarding-carryover p{margin:0;color:#aebbb3;font-size:12px}.onboarding-carryover>div>small{display:block;margin-top:5px;color:#7f8e86;font-size:10px;line-height:1.4}.onboarding-carryover-next{display:grid;justify-items:end;gap:4px;text-align:right}.onboarding-carryover-next strong{color:#bcd9c5;font-size:10px;letter-spacing:.1em}.onboarding-carryover-next span{color:#e7c3a4;font-size:12px;font-weight:900}
@media(max-width:640px){.onboarding-carryover{grid-template-columns:44px 1fr;padding:14px}.onboarding-carryover-mark{width:44px;height:44px;border-radius:14px}.onboarding-carryover-next{grid-column:1/-1;justify-items:start;text-align:left;padding-top:4px}.onboarding-carryover h2{font-size:21px}}

/* Step hierarchy */
#form{align-items:start;gap:16px;margin-top:20px}
#form>.card{
  position:relative;
  border-color:rgba(231,185,143,.16);
  background:linear-gradient(155deg,rgba(18,27,31,.97),rgba(7,13,16,.98));
  box-shadow:0 18px 52px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.025);
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
#form>.card:hover{border-color:rgba(231,185,143,.25);box-shadow:0 22px 62px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.035)}
#form>.card>.kicker:first-child{
  width:max-content;padding:6px 9px;border:1px solid rgba(231,185,143,.2);border-radius:999px;
  background:rgba(213,161,115,.07);color:#edc39f;
}
#form>.card h2{font-size:clamp(24px,3vw,30px);line-height:1.05;text-wrap:balance}
#form>.card p{max-width:44ch}
#form>details.card{background:linear-gradient(155deg,rgba(14,22,26,.95),rgba(7,12,15,.98))}

/* Tactile fields and controls */
#form label{gap:8px;color:#cbd3ce;font-size:12px;letter-spacing:.005em}
#form label small{color:#7f8d86;font-weight:700}
#form .input,#form .select{
  min-height:52px;border-color:rgba(255,255,255,.12);border-radius:15px;
  background:linear-gradient(180deg,#0a1318,#081015);color:#f5f7f6;
  box-shadow:inset 0 1px rgba(255,255,255,.025),0 8px 18px rgba(0,0,0,.12);
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
#form .input:hover,#form .select:hover{border-color:rgba(231,185,143,.24)}
#form .input:focus,#form .select:focus{
  border-color:rgba(231,185,143,.62);background:#0a1419;
  box-shadow:0 0 0 4px rgba(213,161,115,.09),inset 0 1px rgba(255,255,255,.03);
}
#form fieldset{gap:8px!important}
#form fieldset legend{color:#d2d9d5;font-size:12px;font-weight:850}
#form fieldset label,#form details label{
  grid-template-columns:22px 1fr;align-items:center;min-height:42px;padding:9px 11px;
  border:1px solid rgba(255,255,255,.065);border-radius:13px;background:rgba(255,255,255,.018);
}
#form input[type="checkbox"]{width:18px;height:18px;margin:0;accent-color:#d5a173}
#form fieldset label:has(input:checked),#form details label:has(input:checked){border-color:rgba(231,185,143,.24);background:rgba(213,161,115,.065);color:#f0d6be}

/* Progressive disclosure */
#form>details.card{padding:0;overflow:hidden}
#form>details.card summary{
  min-height:64px;padding:20px;display:flex;align-items:center;justify-content:space-between;gap:14px;
  cursor:pointer;list-style:none;color:#edf1ef;transition:background .18s ease;
}
#form>details.card summary::-webkit-details-marker{display:none}
#form>details.card summary:after{
  content:"+";display:grid;place-items:center;width:30px;height:30px;border-radius:10px;
  border:1px solid rgba(231,185,143,.18);background:rgba(213,161,115,.055);color:#e9bb91;font-size:18px;
  transition:transform .18s ease,background .18s ease;
}
#form>details.card[open] summary:after{transform:rotate(45deg);background:rgba(213,161,115,.1)}
#form>details.card summary:hover{background:rgba(231,185,143,.025)}
#form>details.card summary small{margin-left:auto;color:#7f8c86;font-weight:750}
#form>details.card>div{padding:0 20px 20px;margin-top:0!important}

/* Premium completion and feedback */
#form>section.card:last-child{
  border-color:rgba(231,185,143,.25);
  background:
    radial-gradient(circle at 100% 0,rgba(231,185,143,.11),transparent 14rem),
    linear-gradient(155deg,rgba(24,27,26,.98),rgba(8,14,17,.98));
}
#form>section.card:last-child .btn[type="submit"]{
  width:100%;min-height:54px;margin-top:8px;border:1px solid rgba(255,230,208,.18);border-radius:16px;
  background:linear-gradient(180deg,#efc39d,#cf9463);color:#1a1009;
  box-shadow:0 14px 34px rgba(201,137,88,.2),inset 0 1px rgba(255,255,255,.32);
  letter-spacing:.01em;transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;
}
#form>section.card:last-child .btn[type="submit"]:hover{filter:brightness(1.04);box-shadow:0 17px 42px rgba(201,137,88,.25),inset 0 1px rgba(255,255,255,.35)}
#form>section.card:last-child .btn[type="submit"]:active{transform:translateY(1px) scale(.992)}
#state,#formError{
  border-color:rgba(255,255,255,.075);background:rgba(4,10,13,.72);backdrop-filter:blur(10px);
}
#formError:not([hidden]){border-color:rgba(223,136,127,.28);background:rgba(93,37,34,.14);color:#f0b1aa}
#continue{width:100%;min-height:50px;border-color:rgba(231,185,143,.17);background:rgba(231,185,143,.055);color:#efd0b5}



/* ONBOARDING DESKTOP WORKSPACE X6 — wide setup workspace, mobile chronology unchanged */
@media(min-width:1180px){
  .shell{width:min(1180px,calc(100% - 180px));padding-left:24px;padding-right:24px}
  .hero{padding:36px 38px}
  .onboarding-hero{grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr)}
  .onboarding-hero-visual{min-height:320px}
  .hero h1{font-size:clamp(58px,5.6vw,78px);max-width:820px}
  .hero p{font-size:15px;max-width:720px}
  #form{grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}
  #form>section.card:nth-of-type(1){grid-column:span 6}
  #form>section.card:nth-of-type(2){grid-column:span 6}
  #form>details.card{grid-column:span 5}
  #form>section.card:last-child{grid-column:span 7;position:sticky;top:96px;align-self:start}
  #form>.card{min-width:0}
  #form>details.card>div{padding-bottom:22px}
}

/* One-hand mobile composition */
@media(min-width:1180px) and (max-height:760px){
  #form>section.card:last-child{position:static}
}

@media(max-width:640px){
  .shell{padding-top:calc(env(safe-area-inset-top) + 10px);padding-left:12px;padding-right:12px;padding-bottom:max(42px,calc(env(safe-area-inset-bottom) + 30px))}
  .top{height:58px;margin-left:-2px;margin-right:-2px}
  .hero{padding:18px;border-radius:26px}
  .onboarding-hero{grid-template-columns:1fr;gap:14px}
  .onboarding-hero-copy{padding:6px 2px 0}
  .onboarding-hero-visual{min-height:190px;border-radius:18px}
  .onboarding-hero-visual img{object-position:center 23%}
  .onboarding-hero-visual strong{font-size:18px}
  .hero h1{font-size:clamp(38px,12vw,48px)}
  .hero p{font-size:13px;line-height:1.6}
  #form{gap:12px;margin-top:14px}
  #form>.card{padding:18px;border-radius:21px}
  #form>details.card{padding:0}
  #form>details.card summary{min-height:60px;padding:17px 18px}
  #form>details.card>div{padding:0 18px 18px}
  #form .input,#form .select{min-height:54px}
  #form fieldset label,#form details label{min-height:46px;padding:10px 11px}
  #form>section.card:last-child .btn[type="submit"],#continue{min-height:54px}
}
@media(max-width:390px){
  .shell{padding-left:9px;padding-right:9px}
  .hero{padding:21px 17px}
  #form>.card{padding:16px}
  #form>details.card{padding:0}
  #form>details.card summary{padding:16px}
  #form>details.card>div{padding:0 16px 16px}
}

/* Native-feeling interaction and accessibility finish */
#form :focus-visible,.back:focus-visible,.brand:focus-visible{
  outline:2px solid #edbd92;outline-offset:3px;box-shadow:0 0 0 5px rgba(213,161,115,.08);
}
#form .btn,#form summary,.back{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
#form .btn{user-select:none;-webkit-user-select:none}
@media(hover:none){
  #form>.card:hover{border-color:rgba(231,185,143,.16);box-shadow:0 18px 52px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.025)}
  #form .input:hover,#form .select:hover{border-color:rgba(255,255,255,.12)}
}
@media(prefers-reduced-motion:reduce){
  #form>.card,#form .input,#form .select,#form>details.card summary,#form>details.card summary:after,#form .btn,.back{transition:none!important}
  #form>details.card[open] summary:after{transform:none}
}
@media(prefers-contrast:more){
  #form>.card,.hero{border-color:rgba(255,255,255,.42)}
  #form .input,#form .select,#form fieldset label,#form details label{border-color:rgba(255,255,255,.34)}
  #form label,#form .status,.hero p{color:#eef2ef}
  #form>.card>.kicker:first-child{border-color:rgba(255,255,255,.4)}
}