/* /start, the six question intake (28 Oct 2026). MUUS system v3.1: the work runs full bleed behind each step with its word
   on the photo (wordmark mode, no boxes, no glass, no tints on photos); the question and its answers sit on calm off black.
   Sand Rose once a screen: the main key. Buttons v2 (BRAND/components/buttons-v2.md): the main ask is a physical key with a
   back plate and a spring press; Back is Fusion glass at half the travel; answer tiles rise on a plate when chosen and sit
   recessed when not. Without JavaScript every step shows, stacked, as one plain form with one Send. */
.st-body{background:var(--off)}
.st{--key-top:#E4A699;--key-bot:#D89082;--plate:#B26F62;--spring:cubic-bezier(.34,1.56,.64,1);padding-top:var(--hdr)}
.st-form{margin:0}
.st-step{border:0;margin:0;padding:0;min-width:0;position:relative}
.st-step+.st-step{margin-top:clamp(40px,6vw,80px)}
.st-media{position:relative;height:min(46svh,520px);overflow:hidden;background:var(--lift)}
.st-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.st-word{position:absolute;left:calc(var(--pad) - .06em);bottom:-.16em;margin:0;font:800 clamp(64px,17vw,220px)/.8 var(--d);letter-spacing:-.055em;color:var(--bone);
  text-transform:uppercase;white-space:nowrap;pointer-events:none}
.st-in{max-width:760px;padding:clamp(28px,4vw,48px) var(--pad) 0;margin:0 auto 0 0}
.st-cap{font:500 11px/1.4 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--b58);margin:0 0 18px}
.st-n{font:500 12px "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.12em;color:var(--b58)}
.st-rule{display:block;width:40px;height:2px;background:var(--b58);margin:14px 0 16px}
.st-q,.st-h{font:700 clamp(28px,4.6vw,52px)/1.04 var(--d);letter-spacing:-.035em;margin:0;max-width:18ch;padding:0;color:var(--bone)}
.st-help{color:var(--b72);margin:10px 0 0;max-width:48ch}
.st-lab{font:500 12px "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--b58);margin:0}

/* answer tiles: recessed until chosen, then raised on a plate */
.st-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:24px}
.st-tiles--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:560px){.st-tiles,.st-tiles--3{grid-template-columns:1fr}}
.st-tile{position:relative;display:block;cursor:pointer}
.st-tile input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.st-tile span{display:flex;align-items:center;gap:12px;min-height:60px;padding:14px 16px;background:#101314;border:1px solid var(--b08);color:var(--b58);
  font:600 17px/1.25 var(--t);letter-spacing:-.005em;box-shadow:inset 0 2px 4px rgb(0 0 0 / .75),inset 0 -1px 0 rgb(244 242 232 / .04);
  transform:translateY(1px);transition:transform .18s var(--spring),box-shadow .18s var(--spring),color .18s,background .18s,border-color .18s}
.st-tile span::before{content:"";flex:none;width:10px;height:10px;border:1px solid var(--b40);transition:background .18s,border-color .18s}
.st-tile input[type=radio]+span::before{border-radius:50%}
.st-tile input:checked+span{background:var(--raise2);border-color:rgb(244 242 232 / .3);color:var(--bone);transform:translateY(-3px);
  box-shadow:0 3px 0 #050606,inset 0 1px 0 rgb(244 242 232 / .2)}
.st-tile input:checked+span::before{background:var(--bone);border-color:var(--bone)}
.st-tile input:focus-visible+span{outline:2px solid var(--bone);outline-offset:3px}
.st-tile:active span{transform:translateY(1px)}
.st-date{display:grid;gap:8px;margin-top:16px;max-width:320px}
.st-f{display:grid;gap:8px}
.st-f span{font:500 12px "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--b58)}
.st-f input,.st-f textarea{min-height:52px;width:100%;background:#101314;border:1px solid var(--b16);color:var(--bone);font:500 17px var(--t);padding:12px 14px;border-radius:0;
  box-shadow:inset 0 2px 4px rgb(0 0 0 / .6)}
.st-f textarea{min-height:96px;resize:vertical}
.st-f input:focus-visible,.st-f textarea:focus-visible{outline:2px solid var(--bone);outline-offset:3px}
.st-f input::-webkit-calendar-picker-indicator{filter:invert(1)}
.st-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:24px}
.st-fields .st-wide{grid-column:1 / -1}
@media (max-width:560px){.st-fields{grid-template-columns:1fr}}
.st-hi{color:var(--bone);font:600 17px var(--t);margin:16px 0 0}
.st-consent{color:var(--b58);font-size:14px;margin:18px 0 0;max-width:56ch}
.st-consent a,.st-link{color:var(--bone);text-underline-offset:3px}
.st-soft{margin:18px 0 0;padding-left:14px;border-left:2px solid var(--b40);color:var(--b72);max-width:52ch}
.st-soft[hidden]{display:none}
.st-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* the main ask: a physical key, Sand Rose, the one rose on the screen */
.st-key{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;min-width:164px;padding:0 26px;border:0;cursor:pointer;
  font:700 14px var(--t);letter-spacing:.14em;text-transform:uppercase;color:#0C0E0F;text-decoration:none;white-space:nowrap;
  background:linear-gradient(var(--key-top),var(--key-bot));box-shadow:0 3px 0 var(--plate),inset 0 1px 0 rgb(244 242 232 / .35);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);transform:translateY(0);transition:transform .18s var(--spring),box-shadow .18s var(--spring)}
.st-key::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgb(255 248 240 / .45) 50%,transparent 70%);transform:translateX(-120%);pointer-events:none}
.st-key i{font-style:normal;transition:transform .18s var(--spring)}
@media (hover:hover){.st-key:hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--plate),inset 0 1px 0 rgb(244 242 232 / .35)}
  .st-key:hover::after{transition:transform .6s ease;transform:translateX(120%)}.st-key:hover i{transform:translateX(3px)}}
.st-key:active,.st-key.is-press{transform:translateY(3px);box-shadow:0 0 0 var(--plate),inset 0 1px 0 rgb(244 242 232 / .25)}
.st-key:focus-visible{outline:2px solid var(--bone);outline-offset:3px}
.st-key[disabled]{opacity:.5;cursor:default}

/* secondary: Fusion glass on calm off black, half the travel */
.st-glass{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 20px 0 30px;cursor:pointer;color:var(--bone);text-decoration:none;
  font:700 14px var(--t);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;background:rgb(244 242 232 / .08);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgb(244 242 232 / .16);box-shadow:inset 0 1px 0 rgb(244 242 232 / .24),0 1.5px 0 #050606;transition:transform .18s var(--spring),box-shadow .18s var(--spring)}
.st-glass::before{content:"";position:absolute;left:14px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--rose);transition:transform .25s var(--spring),box-shadow .25s}
@media (hover:hover){.st-glass:hover{transform:translateY(-.5px)}.st-glass:hover::before{transform:scale(1.6);box-shadow:0 0 10px var(--rose)}}
.st-glass:focus-visible{outline:2px solid var(--bone);outline-offset:3px}
.st-glass:focus-visible::before{transform:scale(1.6);box-shadow:0 0 10px var(--rose)}
.st-glass:active{transform:translateY(1.5px);box-shadow:inset 0 1px 0 rgb(244 242 232 / .18)}

.st-go{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:32px 0 0;padding:0 var(--pad) clamp(48px,6vw,96px)}
.st-status{margin:12px var(--pad) 0;color:var(--b72)}
.st-prog,.st-nav{display:none}

/* one question per screen, when JavaScript runs */
html.js .st-form .st-step{display:none;margin:0}
html.js .st-form .st-step.is-on{display:block;animation:st-in .42s var(--rev) both}
html.js .st-form .st-go{display:none}
html.js .st-prog{display:flex;align-items:center;gap:14px;position:absolute;top:calc(var(--hdr) + 14px);right:var(--pad);z-index:2}
html.js .st-prog ol{display:flex;gap:4px;list-style:none;margin:0;padding:0}
html.js .st-prog li{width:18px;height:3px;background:rgb(244 242 232 / .3)}
html.js .st-prog li.is-done{background:var(--bone)}
html.js .st-nav{display:flex;gap:12px;align-items:center;justify-content:space-between;position:sticky;bottom:0;z-index:3;padding:14px var(--pad) calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(rgb(12 14 15 / 0),var(--off) 30%);margin-top:28px}
html.js .st-nav .st-back[hidden]{visibility:hidden;display:inline-flex}
@keyframes st-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (min-width:1000px){
  html.js .st-form .st-step.is-on{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:calc(100svh - var(--hdr));align-items:start}
  html.js .st-media{height:calc(100svh - var(--hdr));position:sticky;top:var(--hdr)}
  html.js .st-in{padding-top:clamp(56px,8vh,104px)}
  html.js .st-nav{margin-left:52%;background:none}
  html.js .st-word{font-size:clamp(80px,11vw,200px)}
}

/* the end screen */
.st-done{padding:clamp(32px,5vw,64px) var(--pad) clamp(56px,7vw,104px)}
.st-done--page{padding-top:clamp(48px,8vw,96px)}
.st-done-in{max-width:760px}
.st-done[hidden]{display:none}
.st-copy{color:var(--b72);max-width:52ch;margin:14px 0 0}
.st-cal{display:block;width:100%;height:min(720px,80svh);margin-top:24px;border:0;background:var(--bone)}
.st-done .st-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}

@media (prefers-reduced-motion:reduce){
  .st-key,.st-glass,.st-tile span,.st-key i{transition:none!important;transform:none!important}
  .st-key::after{display:none}
  html.js .st-form .st-step.is-on{animation:none}
}
.st-prog[hidden]{display:none!important}
/* the progress up top carries the count when JavaScript runs; ink chosen by the frame (v3.1): off black on bright photos */
html.js .st-in .st-n{display:none}
.st-step[data-ink=dark] .st-word{color:var(--off)}