/* SO FOREAL SECURITY — Phase 1 design mockups · shared tokens + components
   Concept: Quiet Authority — Controlled. Precise. Expensive. */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --obsidian:#0A0A0B; --carbon:#141416; --charcoal:#1E1F22; --graphite:#3A3C40;
  --steel:#8A8D93; --silver:#C9CCD1; --platinum:#E8E9EB; --white:#FFFFFF;
  --signal:linear-gradient(90deg,#D4D7DC,#9EA2A8);
  --err:#B54A4A; --ok:#5E8F6A;
  --radius:2px; --radius-lg:4px;
  --hair:1px solid rgba(201,204,209,.22);
  --hair-strong:1px solid rgba(201,204,209,.45);
  --ease:cubic-bezier(0.22,1,0.36,1);
  --f-display:'Unbounded','Monument Extended',system-ui,sans-serif;
  --f-body:'Inter','Neue Haas Grotesk',system-ui,sans-serif;
  --f-mono:'JetBrains Mono','IBM Plex Mono',ui-monospace,monospace;
  /* desktop scale */
  --h1:96px; --h2:56px; --h3:28px; --body:18px; --label:13px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:#050506;color:var(--platinum);font-family:var(--f-body);-webkit-font-smoothing:antialiased}
body{font-size:var(--body);line-height:1.6}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}

/* ---------- Mockup chrome (review annotations, not part of design) ---------- */
.mock-bar{position:fixed;bottom:12px;left:12px;z-index:9999;display:flex;gap:8px;align-items:center;
  font:500 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--steel);
  background:rgba(10,10,11,.92);border:var(--hair);padding:8px 10px;border-radius:var(--radius)}
.mock-bar a{color:var(--silver);border-bottom:1px solid var(--graphite)}
.mock-bar a:hover{color:var(--white)}
.anno{font:500 10px/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;
  color:#0A0A0B;background:var(--silver);padding:3px 6px;border-radius:2px;display:inline-block}
.anno-pin{position:absolute;z-index:40}

/* ---------- Artboards ---------- */
.artboard{width:1440px;margin:0 auto;background:var(--obsidian);position:relative;overflow:hidden}
body.desktop{min-width:1440px}

/* film grain ~3% */
.grain::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9000;
  background:url('assets/grain.png');opacity:.03;mix-blend-mode:screen}
.grain-local{position:relative}
.grain-local::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:50;
  background:url('assets/grain.png');opacity:.035;mix-blend-mode:screen}

/* logo on obsidian: 'lighten' lets the file's pure-black bg sit flush on Obsidian; mark itself unaltered */
.logo-img{mix-blend-mode:lighten}

/* ---------- Type ---------- */
.display{font-family:var(--f-display);text-transform:uppercase;letter-spacing:-.01em;color:var(--white);font-weight:600;line-height:.98}
.h1{font-size:var(--h1)}
.h2{font-size:var(--h2);line-height:1.02}
.h3{font-size:var(--h3);line-height:1.1}
.mono{font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.12em;font-size:var(--label);font-weight:500}
.steel{color:var(--steel)} .silver{color:var(--silver)} .white{color:var(--white)}
.lede{font-size:20px;line-height:1.6;color:var(--platinum);max-width:620px}
.eyebrow{display:flex;align-items:center;gap:14px;color:var(--silver)}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--silver)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:56px;padding:0 28px;
  border-radius:var(--radius);font:600 13px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  transition:transform .2s var(--ease),background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);position:relative;overflow:hidden;white-space:nowrap}
.btn-primary{background:var(--white);color:var(--obsidian)}
.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(158,162,168,.55) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ease)}
.btn-primary:hover::after{transform:translateX(120%)}
.btn-primary:hover{background:#D4D7DC}
.btn-outline{border:1px solid rgba(201,204,209,.55);color:var(--white)}
.btn-outline:hover{border-color:var(--white);background:rgba(255,255,255,.04)}
.btn-sm{height:44px;padding:0 20px;font-size:12px}
.arrow{display:inline-block;width:18px;height:1px;background:currentColor;position:relative}
.arrow::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg);transform-origin:center}

/* ---------- Status pulse ---------- */
.status{display:inline-flex;align-items:center;gap:10px;color:var(--silver)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--white);animation:pulse 2s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* ---------- Corner brackets ---------- */
.brackets{position:relative}
.brackets>.br{position:absolute;width:14px;height:14px;border-color:var(--silver);border-style:solid;border-width:0;transition:transform .2s var(--ease),opacity .2s var(--ease);z-index:5;pointer-events:none}
.br.tl{top:10px;left:10px;border-top-width:1px;border-left-width:1px}
.br.tr{top:10px;right:10px;border-top-width:1px;border-right-width:1px}
.br.bl{bottom:10px;left:10px;border-bottom-width:1px;border-left-width:1px}
.br.brr{bottom:10px;right:10px;border-bottom-width:1px;border-right-width:1px}
.brackets.lock .br{opacity:.55}
.brackets.lock:hover .br{opacity:1}
.brackets.lock:hover .br.tl{transform:translate(8px,8px)}
.brackets.lock:hover .br.tr{transform:translate(-8px,8px)}
.brackets.lock:hover .br.bl{transform:translate(8px,-8px)}
.brackets.lock:hover .br.brr{transform:translate(-8px,-8px)}

/* ---------- Hairlines ---------- */
.rule{height:1px;background:rgba(201,204,209,.22);transform-origin:left;animation:draw 1s var(--ease) both}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- Photo slots (CSS-only cinematic frames) ---------- */
.photo{position:relative;overflow:hidden;background:#0d0d0f;isolation:isolate}
.photo .scene{position:absolute;inset:0;transition:transform .8s var(--ease),filter .8s var(--ease)}
.photo .slot-tag{position:absolute;z-index:6;font:500 10px/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--steel);
  border:1px dashed rgba(138,141,147,.5);padding:5px 8px;background:rgba(10,10,11,.65);border-radius:2px}
.photo .slot-tag b{color:var(--silver);font-weight:500}
/* scene presets */
.scene-door{background:
  radial-gradient(ellipse 18% 46% at 50% 52%,rgba(232,233,235,.55),rgba(201,204,209,.12) 45%,transparent 70%),
  radial-gradient(ellipse 60% 40% at 50% 100%,rgba(201,204,209,.10),transparent 70%),
  linear-gradient(180deg,#0b0b0d 0%,#121316 55%,#08080a 100%)}
.scene-door::before{content:"";position:absolute;left:50%;top:22%;width:15%;height:62%;transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(201,204,209,.06));box-shadow:0 0 120px 40px rgba(201,204,209,.08)}
.scene-door::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(180deg,transparent,rgba(201,204,209,.05) 40%,#070708)}
.scene-lobby{background:
  linear-gradient(90deg,transparent 0 12%,rgba(201,204,209,.07) 12% 12.4%,transparent 12.4% 37%,rgba(201,204,209,.07) 37% 37.4%,transparent 37.4% 62%,rgba(201,204,209,.07) 62% 62.4%,transparent 62.4% 87%,rgba(201,204,209,.07) 87% 87.4%,transparent 87.4%),
  radial-gradient(ellipse 80% 50% at 70% 10%,rgba(201,204,209,.2),transparent 60%),
  linear-gradient(180deg,#16171a,#0a0a0b)}
.scene-crowd{background:
  radial-gradient(ellipse 50% 30% at 50% 0%,rgba(232,233,235,.28),transparent 70%),
  radial-gradient(ellipse 10% 40% at 30% 0%,rgba(201,204,209,.18),transparent 80%),
  radial-gradient(ellipse 10% 40% at 70% 0%,rgba(201,204,209,.18),transparent 80%),
  linear-gradient(180deg,#121316,#08080a)}
.scene-crowd::after{content:"";position:absolute;left:-5%;right:-5%;bottom:0;height:38%;
  background:radial-gradient(circle at 5% 30%,#060607 18%,transparent 19%) 0 0/9% 100%,radial-gradient(circle at 50% 60%,#060607 22%,transparent 23%) 0 0/7% 100%,linear-gradient(180deg,transparent 45%,#060607 46%)}
.scene-night{background:
  radial-gradient(ellipse 6% 3% at 28% 70%,rgba(255,255,255,.7),transparent 80%),
  radial-gradient(ellipse 6% 3% at 46% 70%,rgba(255,255,255,.7),transparent 80%),
  radial-gradient(ellipse 40% 18% at 37% 72%,rgba(201,204,209,.16),transparent 80%),
  linear-gradient(180deg,#0e0f11 0%,#0a0a0b 60%,#121316 61%,#0a0a0b 100%)}
.scene-night::before{content:"";position:absolute;left:18%;width:40%;top:52%;height:20%;background:linear-gradient(180deg,#1a1b1e,#0c0c0e);clip-path:polygon(12% 0,78% 0,92% 40%,100% 45%,100% 100%,0 100%,0 45%,5% 40%)}
.scene-rope{background:
  radial-gradient(ellipse 70% 30% at 50% 30%,rgba(201,204,209,.14),transparent 70%),
  linear-gradient(180deg,#111214,#09090a)}
.scene-rope::before{content:"";position:absolute;left:10%;right:10%;top:58%;height:18%;border-bottom:3px solid rgba(201,204,209,.28);border-radius:0 0 50% 50%}
.scene-rope::after{content:"";position:absolute;left:9%;top:50%;width:1.6%;height:40%;background:linear-gradient(180deg,#C9CCD1,#3A3C40);box-shadow:calc(var(--rope-gap,1)*0px) 0 0 transparent}
.scene-brief{background:
  radial-gradient(ellipse 30% 40% at 50% 25%,rgba(232,233,235,.2),transparent 70%),
  linear-gradient(180deg,#121316,#070708)}
.scene-wrist{background:
  radial-gradient(ellipse 35% 25% at 55% 55%,rgba(232,233,235,.22),transparent 70%),
  repeating-linear-gradient(120deg,transparent 0 22px,rgba(201,204,209,.03) 22px 23px),
  linear-gradient(180deg,#111214,#08080a)}
.scene-estate{background:
  linear-gradient(180deg,transparent 58%,#08080a 58%),
  radial-gradient(ellipse 4% 3% at 40% 50%,rgba(232,233,235,.45),transparent 80%),
  radial-gradient(ellipse 4% 3% at 60% 50%,rgba(232,233,235,.35),transparent 80%),
  radial-gradient(ellipse 70% 40% at 50% 70%,rgba(201,204,209,.1),transparent 70%),
  linear-gradient(180deg,#0f1012,#0a0a0b)}
.scene-estate::before{content:"";position:absolute;left:25%;right:25%;top:36%;height:22%;background:#0c0c0e;clip-path:polygon(0 30%,50% 0,100% 30%,100% 100%,0 100%);border-top:1px solid rgba(201,204,209,.15)}
/* silhouette figure (from behind) */
.figure{position:absolute;bottom:0;z-index:3;width:var(--w,18%);aspect-ratio:1/2.3;transform:translateX(-50%);left:var(--x,50%);color:#050506}
.figure svg{width:100%;height:100%;display:block}
.vignette{position:absolute;inset:0;z-index:4;background:radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,.65) 100%)}
.dim{position:absolute;inset:0;z-index:4;background:rgba(10,10,11,.35);transition:opacity .8s var(--ease)}

/* ---------- Header ---------- */
.site-header{position:absolute;top:0;left:0;right:0;z-index:60;height:88px;display:flex;align-items:center;justify-content:space-between;padding:0 64px}
.site-header .shield{height:44px;width:auto}
.nav{display:flex;gap:40px}
.nav a{font:500 13px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--platinum);position:relative;padding:6px 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--silver);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav a:hover::after{transform:scaleX(1)}
.head-right{display:flex;align-items:center;gap:28px}
.tel{font:500 13px/1 var(--f-mono);letter-spacing:.1em;color:var(--silver)}
.tel:hover{color:var(--white)}

/* ---------- Generic section ---------- */
.sec{position:relative;padding:144px 120px}
.sec-index{display:flex;justify-content:space-between;align-items:center;margin-bottom:56px;padding-bottom:20px;border-bottom:var(--hair)}
.sec-alt{background:var(--carbon)}

/* ---------- Forms ---------- */
.field{display:flex;flex-direction:column;gap:10px}
.field label,.flabel{font:500 12px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
.input{height:56px;background:var(--carbon);border:1px solid var(--charcoal);border-bottom-color:var(--graphite);border-radius:var(--radius);
  color:var(--white);font:400 16px var(--f-body);padding:0 18px;width:100%;outline:none;transition:border-color .2s var(--ease)}
.input::placeholder{color:#5b5e63}
.input:focus{border-color:var(--silver)}
textarea.input{height:auto;min-height:120px;padding:16px 18px;resize:vertical}
select.input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--silver) 50%),linear-gradient(135deg,var(--silver) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 17px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.input.is-err{border-color:var(--err)}
.input.is-ok{border-color:var(--ok)}
.msg-err{font:500 11px/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--err)}
.msg-ok{font:500 11px/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ok)}
.chip{display:inline-flex;align-items:center;height:44px;padding:0 18px;border:1px solid var(--graphite);border-radius:var(--radius);
  font:500 12px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--platinum);cursor:pointer;transition:all .2s var(--ease)}
.chip:hover{border-color:var(--steel)}
.chip.on{background:var(--white);color:var(--obsidian);border-color:var(--white)}
.check{display:flex;gap:14px;align-items:flex-start;font-size:14px;color:var(--steel);line-height:1.5}
.check .box{flex:0 0 20px;height:20px;border:1px solid var(--steel);border-radius:2px;display:grid;place-items:center;margin-top:1px}
.check .box.on{background:var(--white);border-color:var(--white)}
.check .box.on::after{content:"";width:10px;height:5px;border-left:2px solid #0A0A0B;border-bottom:2px solid #0A0A0B;transform:rotate(-45deg) translate(1px,-1px)}

.progress{height:2px;background:var(--charcoal);position:relative;overflow:hidden}
.progress>i{position:absolute;left:0;top:0;bottom:0;background:var(--signal);transition:width .6s var(--ease)}

/* reveal */
.reveal{animation:fadeUp .8s var(--ease) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.4s!important;animation-iteration-count:1!important;transition-duration:.2s!important}
  .reveal{animation-name:fade!important}
  .rule{animation:none!important}
  .dot{animation:none!important}
  .brackets.lock:hover .br{transform:none!important}
  .btn-primary::after{display:none}
}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ================= Mobile artboard (390) ================= */
/* Shared mobile artboard frame + mobile scale (390) */
body.m-canvas{background:#050506;min-height:100vh;display:flex;justify-content:center;gap:64px;padding:48px 24px 96px;align-items:flex-start}
.device{width:390px;height:844px;border:1px solid var(--graphite);border-radius:44px;padding:0;background:var(--obsidian);position:relative;overflow:hidden;box-shadow:0 0 0 10px #0f0f11,0 0 0 11px #2a2b2f,0 40px 120px rgba(0,0,0,.7);flex:none}
.device.full{height:auto;border-radius:6px}
.device .notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:120px;height:32px;border-radius:20px;background:#000;z-index:200}
.screen{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;--h1:44px;--h2:32px;--h3:22px;--body:16px;--label:12px;font-size:16px}
.device.full .screen{position:relative;overflow:visible}
.screen::-webkit-scrollbar{display:none}
.side{width:340px;position:sticky;top:48px;color:var(--steel);font-size:14px;line-height:1.6}
.side h1{font:600 20px/1.2 var(--f-display);text-transform:uppercase;color:var(--white);margin:14px 0 18px}
.side ul{list-style:none;border-top:var(--hair)}
.side li{padding:12px 0;border-bottom:var(--hair)}
.side li b{display:block;font:500 11px/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--silver);margin-bottom:4px}
.side .btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.side .btns button,.side .btns a{font:500 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;border:var(--hair-strong);padding:10px 12px;border-radius:2px;color:var(--silver)}
.screen .grain-fx{position:sticky;top:0;height:0;z-index:150;pointer-events:none}
.screen .grain-fx::after{content:"";position:absolute;left:0;top:0;width:390px;height:844px;background:url('assets/grain.png');opacity:.03;mix-blend-mode:screen}
.m-header{position:sticky;top:0;z-index:120;height:64px;padding:12px 20px 0;display:flex;align-items:center;justify-content:space-between;margin-bottom:-64px;transition:background .3s var(--ease),border-color .3s var(--ease);border-bottom:1px solid transparent}
.m-header.scrolled{background:rgba(10,10,11,.96);border-bottom-color:var(--graphite)}
.m-header .shield{height:34px}
.burger{width:44px;height:44px;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:7px}
.burger i{display:block;height:1px;background:var(--white);width:26px}
.burger i+i{width:18px}
.sticky-bar{position:sticky;bottom:0;z-index:130;display:grid;grid-template-columns:1.4fr 1fr;gap:8px;padding:12px 16px 26px;background:linear-gradient(0deg,rgba(10,10,11,.98) 70%,rgba(10,10,11,0));transform:translateY(110%);transition:transform .4s var(--ease);margin-top:-100px}
.sticky-bar.show{transform:none}
.sticky-bar .btn{height:52px;padding:0 12px;width:100%}
.m-menu{position:absolute;inset:0;z-index:180;background:var(--obsidian);display:flex;flex-direction:column;padding:24px 24px 40px;opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.m-menu.open{opacity:1;pointer-events:auto}
.m-menu nav{margin-top:72px;display:flex;flex-direction:column;border-top:var(--hair)}
.m-menu nav a{font:600 30px/1 var(--f-display);text-transform:uppercase;color:var(--white);padding:22px 0;border-bottom:var(--hair);display:flex;justify-content:space-between;align-items:center;opacity:0;transform:translateY(12px);transition:all .5s var(--ease)}
.m-menu.open nav a{opacity:1;transform:none}
.m-menu.open nav a:nth-child(2){transition-delay:.07s}.m-menu.open nav a:nth-child(3){transition-delay:.14s}.m-menu.open nav a:nth-child(4){transition-delay:.21s}
.m-menu nav a span{font:500 11px var(--f-mono);color:var(--steel);letter-spacing:.12em}
.close{width:44px;height:44px;position:relative}
.close::before,.close::after{content:"";position:absolute;left:9px;right:9px;top:50%;height:1px;background:var(--white);transform:rotate(45deg)}
.close::after{transform:rotate(-45deg)}
.m-anno{position:absolute;z-index:100;font:500 9px/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;background:var(--silver);color:#0A0A0B;padding:3px 5px;border-radius:2px}
body.no-anno .m-anno,body.no-anno .anno,body.no-anno .slot-tag{display:none!important}

/* ================= Quote form components (shared) ================= */
.q-steps-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:20px 0 0}
.q-steps-nav button{text-align:left;padding:12px 0 0;border-top:1px solid var(--charcoal);font:500 11px/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--graphite)}
.q-steps-nav button.done{color:var(--steel);border-top-color:var(--steel)}
.q-steps-nav button.on{color:var(--white);border-top-color:var(--white)}
.q-step{display:none}
.q-step.on{display:block;animation:fadeUp .6s var(--ease) both}
.show-all .q-step{display:block;margin-bottom:72px;padding-bottom:56px;border-bottom:1px dashed var(--graphite)}
.q-step h2{line-height:1.08;font-family:var(--f-display);text-transform:uppercase;font-weight:600;color:var(--white);letter-spacing:-.01em}
.q-hint{color:var(--steel);font-size:15px}
.tiles{display:grid;gap:12px}
.tile{position:relative;border:1px solid var(--charcoal);background:var(--carbon);border-radius:var(--radius);padding:22px;text-align:left;display:flex;flex-direction:column;gap:14px;cursor:pointer;transition:border-color .2s var(--ease),background .2s var(--ease);min-height:48px}
.tile:hover{border-color:var(--graphite);background:var(--charcoal)}
.tile svg{width:30px;height:30px;stroke:var(--silver);fill:none;stroke-width:1}
.tile .t{font:600 15px/1.2 var(--f-display);text-transform:uppercase;color:var(--white);letter-spacing:-.005em}
.tile .d{font-size:13px;color:var(--steel);line-height:1.45}
.tile .tick{position:absolute;top:14px;right:14px;width:20px;height:20px;border:1px solid var(--graphite);border-radius:2px;display:grid;place-items:center}
.tile.on{border-color:var(--white);background:var(--charcoal)}
.tile.on .tick{background:var(--white);border-color:var(--white)}
.tile.on .tick::after{content:"";width:9px;height:5px;border-left:2px solid #0A0A0B;border-bottom:2px solid #0A0A0B;transform:rotate(-45deg) translate(1px,-1px)}
.tile .br{opacity:0}
.tile.on .br{opacity:1}
.tile.ghost{border-style:dashed}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}
.span2{grid-column:span 2}.span3{grid-column:1/-1}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.seg{display:flex;border:1px solid var(--graphite);border-radius:var(--radius);overflow:hidden}
.seg button{flex:1;height:52px;font:500 12px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--steel);border-right:1px solid var(--graphite)}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--white);color:var(--obsidian)}
.stepper{display:flex;align-items:center;height:56px;border:1px solid var(--charcoal);border-bottom-color:var(--graphite);background:var(--carbon);border-radius:var(--radius)}
.stepper button{width:56px;height:100%;font:400 22px var(--f-body);color:var(--silver)}
.stepper span{flex:1;text-align:center;font:500 18px var(--f-mono);color:var(--white);border-left:1px solid var(--charcoal);border-right:1px solid var(--charcoal);line-height:56px}
.drop{border:1px dashed var(--graphite);border-radius:var(--radius);padding:28px;display:flex;align-items:center;gap:20px;background:rgba(20,20,22,.6)}
.drop svg{width:32px;height:32px;stroke:var(--silver);fill:none;stroke-width:1;flex:none}
.variant-bar{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:12px;border:1px dashed var(--graphite);border-radius:2px;margin-bottom:28px}
.q-variant{display:none}.q-variant.on{display:grid}
.q-actions{display:flex;justify-content:space-between;align-items:center;margin-top:48px;padding-top:28px;border-top:var(--hair)}
.saved{display:inline-flex;align-items:center;gap:8px;color:var(--steel)}
.saved i{width:6px;height:6px;border-radius:50%;background:var(--ok)}
.next-panel{border:var(--hair);border-radius:var(--radius);background:var(--carbon);padding:40px}
.next-panel ol{list-style:none;margin:28px 0 36px}
.next-panel li{display:grid;grid-template-columns:48px 1fr;padding:20px 0;border-top:var(--hair)}
.next-panel li:last-child{border-bottom:var(--hair)}
.next-panel li .n{font:500 12px/1.7 var(--f-mono);color:var(--steel);letter-spacing:.12em}
.next-panel li b{display:block;font:600 16px/1.3 var(--f-display);text-transform:uppercase;color:var(--white);margin-bottom:6px}
.next-panel li p{font-size:14px;color:var(--steel);line-height:1.5}
.dl a{display:block;font:500 16px/1 var(--f-mono);letter-spacing:.04em;color:var(--white);padding:10px 0}
/* real team photography */
.real-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.85) contrast(1.1) brightness(.8);z-index:1}