/* ODHACO landing — drafting-studio identity: paper, ink, blueprint blue,
   mono kickers, square corners, hard offset shadows. 2D→3D is the theme. */
:root {
  --paper: #eee6d3;
  --paper-2: #e4dbc5;
  --ink: #1c1a17;
  --ink-dim: #6f6a5e;
  --blue: #2b4f9e;
  --blue-bright: #2b63c9;
  --red: #c2453a;
  --line: #c9c2b0;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; background: #eee6d3; }  /* hard fallback: never white */
body {
  background-color: #eee6d3;
  color: var(--ink);
  font: 16px/1.6 var(--sans);
  /* no background-attachment:fixed — iOS Safari drops fixed backgrounds entirely */
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px;
}
h1, h2, h3 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; }
em { font-style: normal; color: var(--blue); }
a { color: inherit; }

.kicker {
  font: 700 11px/1 var(--mono);
  letter-spacing: 0.34em;
  color: var(--blue);
  margin-bottom: 18px;
}
.btn {
  display: inline-block;
  font: 700 12px/1 var(--mono);
  letter-spacing: 0.14em;
  padding: 14px 22px;
  border: 1px solid var(--ink);
  text-decoration: none;
  cursor: pointer;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform .08s, box-shadow .08s;
}
.btn:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--ink); }
.btn:active { transform: translate(3px,3px); box-shadow: 1px 1px 0 var(--ink); }
.btn-blue { background: var(--blue); color: #fff; border-color: var(--ink); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ghost { background: transparent; }

/* ---- logo + splash ---- */
.mark { width: 22px; height: 22px; display: inline-block; vertical-align: -4px; margin-right: 9px; }
#splash {
  position: fixed; inset: 0; z-index: 200; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; background: var(--paper);
  transition: opacity .45s ease;
  /* pure-CSS failsafe: even with all JS dead, the splash removes itself */
  animation: splashAway .5s ease 1.9s forwards;
}
#splash.gone { opacity: 0; pointer-events: none; }
#splash.off { display: none; }
@keyframes splashAway { to { opacity: 0; visibility: hidden; } }
.splash-mark { width: 84px; height: 84px; }
.splash-mark path { opacity: 0; animation: faceIn .4s ease forwards; }
.splash-mark .f1 { animation-delay: .05s; }
.splash-mark .f2 { animation-delay: .22s; }
.splash-mark .f3 { animation-delay: .38s; }
@keyframes faceIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.splash-word {
  font: 800 28px/1 var(--sans); letter-spacing: 0.12em;
  opacity: 0; animation: splashword .45s ease .55s forwards;
}
.splash-word span { color: var(--blue); }
@keyframes splashword { to { opacity: 1; } }

/* ---- nav ---- */
nav {
  position: sticky; top: 0; z-index: 90;
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 28px;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--ink);
}
.brand { font: 800 20px/1 var(--sans); letter-spacing: 0.04em; }
.brand span { color: var(--blue); }
.nav-right { display: flex; gap: 22px; align-items: center; }
.nav-link { font: 700 11px/1 var(--mono); letter-spacing: 0.2em; text-decoration: none; text-transform: uppercase; }
.nav-link:hover { color: var(--blue); }
nav .btn { padding: 10px 16px; box-shadow: 3px 3px 0 var(--ink); }

/* ---- hero ---- */
.hero {
  display: grid; grid-template-columns: minmax(320px, 5fr) minmax(320px, 6fr);
  gap: 48px; align-items: center;
  max-width: 1240px; margin: 0 auto; padding: 84px 28px 96px;
}
.hero h1 { font-size: clamp(38px, 5.2vw, 64px); margin-bottom: 22px; }
.lede { font-size: 18px; color: var(--ink-dim); max-width: 46ch; margin-bottom: 30px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.stage-frame {
  position: relative; border: 1px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  background: var(--paper-2);
  aspect-ratio: 4 / 3;
}
.stage-frame canvas { width: 100%; height: 100%; display: block; }
.stage-tag {
  position: absolute; top: 10px; left: 10px;
  font: 700 10px/1 var(--mono); letter-spacing: 0.28em;
  background: var(--ink); color: var(--paper); padding: 6px 10px;
}
.stage-caption { font: 11px/1.5 var(--mono); color: var(--ink-dim); margin-top: 12px; letter-spacing: 0.06em; }
#heroChat {
  position: absolute; left: 10px; bottom: 10px; max-width: 78%;
  border: 1px solid var(--ink); border-left: 3px solid var(--blue);
  background: var(--paper); box-shadow: 3px 3px 0 var(--ink);
  padding: 8px 12px; font: 12px/1.5 var(--mono);
  opacity: 0; transition: opacity .3s;
}
#heroChat.on { opacity: 1; }
#heroChat b { display: block; font-size: 9px; letter-spacing: 0.28em; color: var(--blue); margin-bottom: 3px; }
#heroChat span::after { content: "▌"; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
#heroPrice {
  position: absolute; right: 10px; bottom: 10px;
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  padding: 7px 11px; font: 700 10px/1 var(--mono); letter-spacing: 0.18em;
  opacity: 0; transition: opacity .3s;
}
#heroPrice.on { opacity: 1; }
#heroHeat {
  position: absolute; left: 10px; bottom: 10px;
  border: 1px solid var(--ink); background: var(--paper);
  box-shadow: 3px 3px 0 var(--ink); padding: 8px 10px;
  display: grid; grid-template-columns: auto auto; gap: 2px 8px; align-items: center;
  font: 700 9px/1 var(--mono); letter-spacing: 0.18em; color: var(--ink-dim);
  opacity: 0; transition: opacity .3s;
}
#heroHeat.on { opacity: 1; }
#heroHeat b { grid-column: 1 / -1; font-size: 9px; letter-spacing: 0.24em; color: var(--blue); margin-bottom: 4px; }
#heroHeat .ramp { grid-column: 1 / -1; height: 8px; border: 1px solid var(--ink);
  background: linear-gradient(90deg, #2b63c9, #e3c400, #c2453a); }
#heroHeat i, #heroHeat u { font-style: normal; text-decoration: none; font-size: 8px; }
#heroHeat u { text-align: right; }

/* ---- scan stage (story 03): fake phone recording → 3D twin ---- */
.scan-frame { aspect-ratio: 16 / 10; margin-top: 28px; }
.scan-hud {
  position: absolute; top: 10px; right: 10px; display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--ink); background: var(--paper);
  padding: 6px 10px; font: 700 10px/1 var(--mono); letter-spacing: 0.18em;
  opacity: 0; transition: opacity .3s;
}
.scan-hud.on { opacity: 1; }
.scan-hud .rec { display: flex; align-items: center; gap: 6px; color: #c2453a; }
.scan-hud .rec i { width: 7px; height: 7px; border-radius: 50%; background: #c2453a;
  animation: recblink 1s steps(1) infinite; }
@keyframes recblink { 50% { opacity: 0; } }
.scan-hud .batt { color: var(--ink-dim); }
.scan-brackets { position: absolute; inset: 26px 18px 30px; pointer-events: none;
  opacity: 0; transition: opacity .3s; }
.scan-brackets.on { opacity: .65; }
.scan-brackets s { position: absolute; width: 18px; height: 18px; text-decoration: none; }
.scan-brackets s:nth-child(1) { top: 0; left: 0; border-top: 2px solid var(--ink); border-left: 2px solid var(--ink); }
.scan-brackets s:nth-child(2) { top: 0; right: 0; border-top: 2px solid var(--ink); border-right: 2px solid var(--ink); }
.scan-brackets s:nth-child(3) { bottom: 0; left: 0; border-bottom: 2px solid var(--ink); border-left: 2px solid var(--ink); }
.scan-brackets s:nth-child(4) { bottom: 0; right: 0; border-bottom: 2px solid var(--ink); border-right: 2px solid var(--ink); }
.scan-note {
  position: absolute; left: 10px; bottom: 10px;
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  padding: 7px 11px; font: 700 10px/1 var(--mono); letter-spacing: 0.18em;
  opacity: 0; transition: opacity .3s;
}
.scan-note.on { opacity: 1; }

/* ---- story ---- */
.story { max-width: 860px; margin: 0 auto; padding: 40px 28px; }
.story-step {
  border: 1px solid var(--ink); background: var(--paper);
  box-shadow: 6px 6px 0 var(--ink);
  padding: 40px 44px; margin-bottom: 40px;
}
.story-step .no { font: 700 12px/1 var(--mono); color: var(--blue); letter-spacing: 0.3em; margin-bottom: 14px; }
.story-step h2 { font-size: clamp(26px, 3.4vw, 38px); margin-bottom: 14px; }
.story-step p { color: var(--ink-dim); max-width: 60ch; }
.ministeps { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 26px; flex-wrap: wrap; }
.ministep { display: flex; flex-direction: column; align-items: center; gap: 8px;
  font: 700 10px/1 var(--mono); letter-spacing: 0.22em; color: var(--blue); }
.ministep svg { width: 92px; height: 68px; color: var(--blue); }
.ministeps .arrow { font-size: 22px; color: var(--ink-dim); }
.lane-diagram { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
.ld-chip { font: 700 11px/1 var(--mono); letter-spacing: 0.16em;
  border: 1px solid var(--ink); padding: 10px 14px; background: var(--paper-2); }
.ld-arrow { font-family: var(--mono); color: var(--ink-dim); }

/* ---- playground ---- */
.play { max-width: 1240px; margin: 0 auto; padding: 60px 28px; }
.play-head h2 { font-size: clamp(30px, 4vw, 46px); margin-bottom: 12px; }
.play-head p { color: var(--ink-dim); max-width: 62ch; }
.play-grid { display: grid; grid-template-columns: minmax(340px, 7fr) minmax(280px, 3fr);
  gap: 24px; margin-top: 30px; }
.play-stage {
  position: relative; border: 1px solid var(--ink); box-shadow: 8px 8px 0 var(--ink);
  background: var(--paper-2); min-height: 480px;
  /* fixed height + no grid stretching: otherwise the canvas grows whenever the
     side column does (e.g. a budget row is added) and the view seems to zoom */
  height: min(70vh, 660px); align-self: start;
}
.play-stage canvas { width: 100%; height: 100%; display: block; position: absolute; inset: 0; }
.play-tools {
  position: absolute; top: 10px; left: 10px; display: flex; gap: 8px; z-index: 5;
  flex-wrap: wrap;
}
.tool {
  font: 700 10px/1 var(--mono); letter-spacing: 0.18em;
  border: 1px solid var(--ink); background: var(--paper); color: var(--ink);
  padding: 8px 12px; cursor: pointer; box-shadow: 2px 2px 0 var(--ink);
}
.tool.active { background: var(--blue); color: #fff; }
.tool.temp { display: flex; align-items: center; gap: 8px; cursor: default; }
.tool.temp input { width: 110px; accent-color: var(--blue); }
.tool.temp b { min-width: 40px; text-align: right; }
#roomCard {
  position: absolute; right: 10px; top: 10px; z-index: 5; display: none;
  border: 1px solid var(--ink); background: var(--paper); box-shadow: 3px 3px 0 var(--ink);
  padding: 10px 14px; font: 12px/1.7 var(--mono); min-width: 190px;
}
#roomCard.open { display: block; }
#roomCard .t { font-weight: 700; letter-spacing: 0.14em; border-bottom: 1px solid var(--line); padding-bottom: 4px; margin-bottom: 6px; }
#roomCard .r { display: flex; justify-content: space-between; gap: 14px; }
#roomCard .r span:first-child { color: var(--ink-dim); }
.tool.hint { cursor: default; background: transparent; box-shadow: none;
  border-color: var(--line); color: var(--ink-dim); }
#furnList { display: flex; flex-direction: column; gap: 8px; }
.furn {
  display: flex; align-items: center; gap: 10px;
  font: 700 11px/1 var(--mono); letter-spacing: 0.1em; text-align: left;
  border: 1px solid var(--ink); background: var(--paper-2); color: var(--ink);
  padding: 7px 12px 7px 7px; cursor: pointer; box-shadow: 2px 2px 0 var(--ink);
  transition: transform .08s;
}
.furn img { width: 34px; height: 34px; object-fit: cover; border: 1px solid var(--ink); background: #fff; flex: none; }
.furn i { font-style: normal; flex: 1; }
.furn:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--ink); }
.furn:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--ink); }
.furn b { color: var(--blue); }
.furn.loading { opacity: 0.5; pointer-events: none; }
.play-side { display: flex; flex-direction: column; gap: 16px; }
.side-block { border: 1px solid var(--ink); background: var(--paper);
  box-shadow: 5px 5px 0 var(--ink); padding: 16px; }
.side-title { font: 700 10px/1 var(--mono); letter-spacing: 0.28em; color: var(--blue); margin-bottom: 12px; }
#chatLog { min-height: 130px; max-height: 220px; overflow-y: auto;
  font: 12px/1.55 var(--mono); display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.msg { padding: 8px 10px; border: 1px solid var(--line); max-width: 95%; }
.msg.you { align-self: flex-end; background: var(--paper-2); }
.msg.ai { align-self: flex-start; border-left: 3px solid var(--blue); }
#chatForm { display: flex; border: 1px solid var(--ink); }
#chatForm input { flex: 1; border: 0; background: var(--paper-2); padding: 10px 12px;
  font: 13px/1 var(--mono); color: var(--ink); outline: none; min-width: 0; }
#chatForm button { border: 0; border-left: 1px solid var(--ink); background: var(--blue);
  color: #fff; font: 700 11px/1 var(--mono); letter-spacing: 0.12em; padding: 0 14px; cursor: pointer; }
.chat-hints { font: 11px/1.8 var(--mono); color: var(--ink-dim); margin-top: 10px; }
.chat-hints a { color: var(--blue); cursor: pointer; text-decoration: underline; }
#budgetTotal { font: 800 30px/1 var(--sans); margin-bottom: 8px; }
#budgetItems { font: 11px/1.8 var(--mono); color: var(--ink-dim); }
#budgetItems div { display: flex; justify-content: space-between; }
.side-note { font: 11px/1.6 var(--mono); color: var(--ink-dim); letter-spacing: 0.04em; }
.dim { color: var(--ink-dim); }

/* ---- intelligence ---- */
.intel { max-width: 1080px; margin: 0 auto; padding: 70px 28px; }
.intel h2 { font-size: clamp(30px, 4vw, 46px); margin-bottom: 12px; }
.intel-lede { color: var(--ink-dim); max-width: 60ch; margin-bottom: 30px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; }
.stat { border: 1px solid var(--ink); background: var(--paper);
  box-shadow: 5px 5px 0 var(--ink); padding: 22px 20px; }
.stat .sv { font: 800 34px/1.1 var(--sans); margin-bottom: 10px; }
.stat .sv .epc { display: inline-block; min-width: 1.3em; text-align: center;
  color: #fff; padding: 0 8px; border: 1px solid var(--ink); }
.epc-A{background:#007f3d}.epc-B{background:#2c9f29}.epc-C{background:#9dcb3c;color:var(--ink)}
.epc-D{background:#e3c400;color:var(--ink)}.epc-E{background:#f7af1d;color:var(--ink)}
.epc-F{background:#ed6823}.epc-G{background:#e31d23}
.stat .sk { font: 700 10px/1.7 var(--mono); letter-spacing: 0.14em; color: var(--ink-dim); }

/* ---- market ---- */
.market { background: var(--ink); color: var(--paper); padding: 80px 28px; }
.market .kicker { color: #8fb0ee; }
.market h2 { font-size: clamp(30px, 4.4vw, 50px); max-width: 900px; margin: 0 auto 40px; }
.market > .kicker, .market > h2 { display: block; }
.market { text-align: left; }
.market > * { max-width: 1080px; margin-left: auto; margin-right: auto; }
.market-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; }
.mcol h3 { font: 700 12px/1 var(--mono); letter-spacing: 0.24em; color: #8fb0ee;
  text-transform: uppercase; margin-bottom: 12px; }
.mcol p { color: #cfc9ba; font-size: 15px; }
.mcol em { color: var(--paper); }

/* ---- waitlist ---- */
.waitlist { max-width: 760px; margin: 0 auto; padding: 90px 28px; text-align: center; }
.waitlist h2 { font-size: clamp(30px, 4.4vw, 50px); margin-bottom: 14px; }
.waitlist p { color: var(--ink-dim); margin-bottom: 30px; }
#wlWebsite { position: absolute; left: -9999px; opacity: 0; }  /* honeypot */
.wl-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.wl-row input[type=email], .wl-row select {
  border: 1px solid var(--ink); background: var(--paper); color: var(--ink);
  font: 14px/1 var(--mono); padding: 14px; box-shadow: 4px 4px 0 var(--ink);
  outline: none; min-width: 230px;
}
#wlMsg { margin-top: 18px; font: 13px/1.6 var(--mono); min-height: 20px; }
#wlMsg.ok { color: #1e7d3c; } #wlMsg.err { color: var(--red); }

/* ---- footer ---- */
footer { border-top: 1px solid var(--ink); padding: 26px 28px; display: flex;
  justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.foot-note { font: 11px/1 var(--mono); color: var(--ink-dim); letter-spacing: 0.1em; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 48px; }
  .nav-link { display: none; }

  /* Mobile demo: the map stays pinned under the nav while the panel scrolls,
     so you can see the plan while typing at the copilot. Block layout (not
     grid) is what makes position:sticky span both children. */
  .play-grid { display: block; }
  .play-stage { position: sticky; top: 54px; z-index: 20;
    height: 44vh; min-height: 260px; margin-bottom: 22px; }
  .play-side { gap: 12px; }
  #chatBlock { order: -1; }          /* copilot first, right under the map */
  #furnList { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .furn { padding: 5px 8px 5px 5px; font-size: 10px; letter-spacing: 0.04em; }
  .furn img { width: 26px; height: 26px; }
  #chatLog { min-height: 84px; max-height: 150px; }
  #chatForm input { font-size: 16px; }   /* <16px makes iOS zoom on focus */
  .side-block { padding: 13px; box-shadow: 4px 4px 0 var(--ink); }
  .chat-hints { line-height: 1.7; }
}