/* Home only: the hero, the pinned fix-plan scene and "How urgent is this fix?". The shared design layer is ui.css;
   the ring of cubes is drawn by home.js on canvas #ring. */

/* ---------- hero ---------- */
.h-hero{position:relative;min-height:min(100vh,980px);display:flex;align-items:center;padding:clamp(112px,11vw,140px) 0 clamp(64px,7vw,96px)}
.h-hero__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:48px;align-items:end}
.h-hero__title{margin-top:20px;font-weight:800;font-size:clamp(44px,5.6vw,88px);line-height:.98;letter-spacing:-.048em;color:var(--text);max-width:12.5ch}
.h-hero__title .h-bit{color:var(--h-red);text-shadow:0 0 28px rgba(240,64,42,.7)}
.h-hero .h-text{max-width:560px}
.h-proof{margin-top:36px;display:flex;flex-wrap:wrap;gap:10px;padding:0;list-style:none}
.h-proof li{display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:0 16px;border-radius:999px;background:rgba(255,255,255,.035);border:1px solid var(--h-glass-edge);font-size:14px;color:#D5DAE1;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.h-proof li::before{content:"";width:6px;height:6px;background:var(--h-red);box-shadow:0 0 10px var(--h-red)}
.h-fixcard{padding:18px 20px;max-width:420px;justify-self:end}
.h-fixcard__top{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary)}
.h-fixcard__title{margin-top:12px;font-weight:700;font-size:17px;line-height:1.35;color:var(--text)}
.h-fixcard__meta{margin-top:6px;font-size:14px;color:var(--h-body)}
.h-fixcard__src{margin-top:12px;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#8E95A0}
@media (min-width:1000px){.h-hero__grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}.h-fixcard{align-self:center;margin-top:28vh}}
.h-scrollcue{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-secondary)}


/* pinned only where there is room, with JavaScript and with motion allowed */
@media (min-width:1000px) and (prefers-reduced-motion:no-preference){
  .has-js .h-scene{height:320vh;padding:0}
  .has-js .h-scene__sticky{position:sticky;top:0;min-height:100vh;display:flex;align-items:center;padding:96px 0 48px}
  .has-js .h-scene .h-step{opacity:.66}
  .has-js .h-scene .h-step.is-on{opacity:1;background:rgba(255,255,255,.035);border-color:var(--h-glass-edge)}
  .has-js .h-scene .h-rows tbody tr:first-child{background:transparent;box-shadow:none}
  .has-js .h-scene[data-step="1"] .h-rows tbody tr:first-child,.has-js .h-scene[data-step="2"] .h-rows tbody tr:first-child{background:color-mix(in oklab,var(--h-red) 12%,transparent);box-shadow:inset 3px 0 0 var(--h-red)}
  .has-js .h-scene .h-drawer{position:absolute;top:0;right:0;bottom:0;width:min(560px,78%);border-top:0;border-left:1px solid var(--h-glass-edge);overflow:auto;transform:translateX(104%);transition:transform 520ms cubic-bezier(.2,.8,.2,1);box-shadow:-40px 0 80px -30px rgba(0,0,0,.9)}
  .has-js .h-scene[data-step="1"] .h-drawer,.has-js .h-scene[data-step="2"] .h-drawer{transform:none}
  .has-js .h-scene .h-six div{transition:transform 400ms ease,opacity 400ms ease}
  .has-js .h-scene[data-step="1"] .h-six div:not(.is-key){opacity:.45}
  .has-js .h-scene .h-decide{opacity:0;transform:translateY(8px);transition:opacity 400ms ease,transform 400ms ease}
  .has-js .h-scene[data-step="2"] .h-decide{opacity:1;transform:none}
  .has-js .h-scene .h-app__body{min-height:520px}

/* ---------- 03 try it: the decision ---------- */
.h-try{margin-top:48px;display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
@media (min-width:1000px){.h-try{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.h-try__controls{padding:clamp(20px,3vw,32px);display:grid;gap:22px}
.h-q{border:0;margin:0;padding:0;min-width:0}
.h-q legend{padding:0;font-weight:700;font-size:16px;color:var(--text)}
.h-q__hint{margin-top:3px;font-size:13px;color:var(--text-secondary)}
.h-seg{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px;padding:4px;border-radius:12px;background:rgba(0,0,0,.35);border:1px solid var(--h-glass-edge);width:fit-content;max-width:100%}
.h-seg label{position:relative;cursor:pointer}
.h-seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.h-seg span{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:9px;font-size:14px;font-weight:600;color:var(--text-secondary);transition:background 160ms ease,color 160ms ease}
.h-seg input:checked+span{background:rgba(255,255,255,.1);color:var(--text);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
@media (hover:hover){.h-seg label:hover span{color:var(--text)}}
.h-try__out{padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;justify-content:center;min-height:340px}
.h-try__label{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary)}
.h-try__decision{margin-top:10px;display:flex;align-items:center;gap:16px;font-weight:800;font-size:clamp(40px,5vw,64px);letter-spacing:-.04em;line-height:1;color:var(--h-tone-text);text-shadow:0 0 40px color-mix(in oklab,var(--h-tone) 55%,transparent);transition:color 300ms ease}
.h-try__icon{font-size:.6em}
.h-try__meaning{margin-top:16px;font-size:18px;line-height:1.5;color:var(--text)}
.h-try__inputs{margin-top:20px;font-family:var(--font-mono);font-size:12px;line-height:1.7;color:var(--text-secondary)}
.h-note{margin-top:20px;font-size:14px;line-height:1.6;color:var(--text-secondary);max-width:760px}
.h-try__controls{display:none}
.has-js .h-try__controls{display:grid}
.h-try__static{font-size:14px;color:var(--text-secondary);margin-top:12px}
.has-js .h-try__static{display:none}