:root{
  --ink:#0c0e0d; --ink-2:#121413; --line-dk:#1d211f; --line-dk-2:#2c302d;
  --paper:#f2efe8; --paper-2:#fbfaf6; --line-lt:#d5d0c4;
  --text-dk:#e6e4de; --mute-dk:#7d817c; --body-dk:#b9b7b0;
  --text-lt:#171614; --mute-lt:#6b675e; --body-lt:#45423b;
  --signal:#e8552f; --signal-lt:#b5321c;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --type:"Courier Prime",Courier,monospace;
  --gutter:20px;
}
@media (min-width:900px){ :root{ --gutter:72px; } }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--text-lt);font-family:var(--mono);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}

/* ── rail ── */
.rail{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px var(--gutter);background:var(--ink);color:var(--text-dk);border-bottom:1px solid var(--line-dk)}
.rail__mark{font-size:11px;letter-spacing:.3em;text-transform:uppercase;font-weight:600;color:var(--text-dk);text-decoration:none}
.rail__status{margin:0;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-dk)}
@media (min-width:900px){
  .rail{padding:24px var(--gutter)}
  .rail__mark{font-size:12px;letter-spacing:.34em}
  .rail__status{font-size:11px;letter-spacing:.16em}
}

/* ── frame ── */
.frame{background:var(--ink);color:var(--text-dk);padding-bottom:36px}
.frame__grid{display:flex;flex-direction:column;padding:32px var(--gutter) 0}
@media (min-width:900px){
  .frame{padding-bottom:0}
  .frame__grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;column-gap:56px;
    align-items:start;padding:92px var(--gutter) 0}
  .frame__lead{grid-column:1;grid-row:1 / span 2}
  .stage{grid-column:2;grid-row:1}
  .readout{grid-column:2;grid-row:2}
}

h1{margin:24px 0 0;font-size:clamp(31px,8.2vw,40px);line-height:1.02;letter-spacing:-.03em;font-weight:500;text-transform:uppercase}
h1 em{font-style:normal;color:var(--signal)}
@media (min-width:900px){ h1{margin:0;font-size:clamp(56px,6vw,86px);line-height:.96;letter-spacing:-.035em} }

.lede{margin:22px 0 0;max-width:62ch;font-family:var(--serif);font-size:17px;line-height:1.6;color:var(--body-dk)}
.lede--ask{margin-top:18px;color:var(--text-dk)}
.lede--ask strong{font-weight:400;color:var(--signal)}
@media (min-width:900px){ .lede{margin-top:46px;font-size:21px;line-height:1.62} .lede--ask{margin-top:22px} }

.chips{display:flex;flex-wrap:wrap;gap:12px 28px;margin:24px 0 0;padding:0;list-style:none;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-dk)}
@media (min-width:900px){ .chips{margin-top:38px;gap:40px;font-size:12px} }

/* ── the box ── */
.stage{margin-top:10px;perspective:900px;display:flex;align-items:center;justify-content:center;height:182px}
.cube{position:relative;width:132px;height:132px;transform-style:preserve-3d;animation:spin 34s linear infinite}
.face{position:absolute;inset:0;background:var(--ink-2);border:1px solid #30352f;box-shadow:inset 0 0 40px rgba(0,0,0,.9)}
.face--seam{background:linear-gradient(90deg,var(--ink-2) 0,var(--ink-2) 49.2%,var(--signal) 49.5%,var(--signal) 50.5%,var(--ink-2) 50.8%,var(--ink-2) 100%)}
.face{transform:translateZ(66px)}
.face--back{transform:rotateY(180deg) translateZ(66px)}
.face--r{transform:rotateY(90deg) translateZ(66px)}
.face--l{transform:rotateY(-90deg) translateZ(66px)}
.face--t{transform:rotateX(90deg) translateZ(66px)}
.face--b{transform:rotateX(-90deg) translateZ(66px)}
@keyframes spin{from{transform:rotateX(-20deg) rotateY(0)}to{transform:rotateX(-20deg) rotateY(360deg)}}
@media (min-width:900px){
  .stage{perspective:1400px;height:300px}
  .cube{width:240px;height:240px}
  .face{box-shadow:inset 0 0 60px rgba(0,0,0,.9);transform:translateZ(120px)}
  .face--back{transform:rotateY(180deg) translateZ(120px)}
  .face--r{transform:rotateY(90deg) translateZ(120px)}
  .face--l{transform:rotateY(-90deg) translateZ(120px)}
  .face--t{transform:rotateX(90deg) translateZ(120px)}
  .face--b{transform:rotateX(-90deg) translateZ(120px)}
  @keyframes spin{from{transform:rotateX(-22deg) rotateY(0)}to{transform:rotateX(-22deg) rotateY(360deg)}}
}
@media (prefers-reduced-motion:reduce){ .cube{animation:none;transform:rotateX(-20deg) rotateY(-28deg)} }

.readout{margin-top:26px;padding-top:22px;border-top:1px solid var(--line-dk)}
@media (min-width:900px){ .stage{margin-top:8px} }
.readout__value{display:flex;align-items:baseline;gap:10px;margin:0;
  font-size:56px;line-height:.84;letter-spacing:-.04em;color:var(--signal);font-weight:500}
.readout__unit{font-size:12px;letter-spacing:0;color:var(--mute-dk)}
.readout__note{margin:16px 0 0;font-size:12px;line-height:1.85;color:var(--mute-dk);max-width:46ch}
@media (min-width:900px){
  .readout__value{font-size:92px;line-height:.82;letter-spacing:-.05em;gap:12px}
  .readout__unit{font-size:15px}
  .readout__note{margin-top:18px}
}

/* ── signup ── */
.signup{padding:28px var(--gutter) 4px}
.signup__form{display:flex;flex-direction:column;gap:10px}
.signup input{width:100%;height:52px;padding:0 16px;background:#141715;border:1px solid var(--line-dk-2);
  color:var(--text-dk);font-family:var(--mono);font-size:16px;border-radius:0}
.signup input::placeholder{color:#636762}
.signup button{height:52px;padding:0 34px;background:var(--signal);border:0;color:var(--ink);
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;cursor:pointer}
.signup button:hover{background:#f26a45}
.signup button[disabled]{opacity:.55;cursor:default}
.signup__note{margin:14px 0 0;font-size:11px;line-height:1.9;color:var(--mute-dk)}
.signup__note[data-state="ok"]{color:var(--signal)}
@media (min-width:900px){
  .signup{display:flex;align-items:flex-end;gap:28px;margin-top:78px;
    padding:52px var(--gutter) 78px;border-top:1px solid var(--line-dk)}
  .signup__form{flex-direction:row;width:620px;flex:0 0 auto}
  .signup input{height:56px;padding:0 18px;font-size:15px}
  .signup button{height:56px;flex:0 0 auto}
  .signup__note{margin:0 0 6px;font-size:12px}
}

/* ── file ── */
.file{background:var(--paper);color:var(--text-lt);padding:34px var(--gutter) 0}
@media (min-width:900px){ .file{padding:84px var(--gutter) 0} }
.sec{margin:0 0 16px;font-size:10px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:var(--mute-lt)}
@media (min-width:900px){ .sec{font-size:11px;margin-bottom:22px} }
.sec--rule{border-top:1px solid var(--text-lt);padding-top:34px;margin-bottom:30px}

.file__grid{display:grid;gap:40px}
@media (min-width:900px){
  .file__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start;gap:0}
  .file__room{grid-column:span 5}
  .file__notice{grid-column:7 / span 6}
}
.plan{display:block;width:100%;height:auto}
.caption{margin:16px 0 0;font-family:var(--serif);font-size:14px;line-height:1.72;color:var(--body-lt)}
@media (min-width:900px){ .caption{margin-top:24px;font-size:15px;line-height:1.75} }

.note{margin:0;padding:22px 20px;background:var(--paper-2);border:1px solid var(--line-lt)}
.note p{margin:0 0 1.6em;font-family:var(--type);font-size:13px;line-height:1.85}
.note p:last-child{margin-bottom:0}
@media (min-width:900px){ .note{padding:36px 40px;box-shadow:0 1px 0 #e4dfd3} .note p{font-size:16px;line-height:1.95} }

.file__control{margin-top:40px}
@media (min-width:900px){ .file__control{margin-top:88px} }
.cards{display:grid;gap:30px}
@media (min-width:900px){ .cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px} }
.cards h3{margin:0 0 14px;font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.18}
.cards p{margin:0;font-family:var(--serif);font-size:15px;line-height:1.8;color:var(--body-lt)}
@media (min-width:900px){ .cards h3{font-size:30px;margin-bottom:16px} }

/* ── foot ── */
.foot{background:var(--paper);color:var(--mute-lt);margin:0 var(--gutter);
  padding:22px 0 30px;border-top:1px solid var(--line-lt);font-size:11px}
.foot__line{margin:0 0 10px;font-family:var(--serif);font-size:15px;color:var(--text-lt)}
.foot__by{margin:0}
.foot a{color:var(--signal-lt)}
@media (min-width:900px){
  .foot{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-top:84px;
    padding:26px 0 30px;font-size:12px}
  .foot__line{margin:0;font-size:16px}
}