/* shared app styles. same room as the landing page: black, thin lowercase type, gold only for the wordmark and throw itself */
:root { --bg:#000; --fg:#F5F2EC; --mute:#8A857C; --dim:#5E5A53; --line:#1A1917; --gold:#D9BC7E; --field:#0C0C0B; --orange:#E2762F;
  --display:'Geist','Helvetica Neue',Arial,sans-serif; --mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace; --logo:'Bodoni Moda','Didot','Bodoni 72',Georgia,serif; color-scheme:dark }
* { box-sizing:border-box; text-transform:lowercase; font-synthesis:none; -webkit-tap-highlight-color:transparent }
html,body { margin:0; background:var(--bg); color:var(--fg); font-family:var(--display); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased }
a { color:inherit; text-decoration:none }
h1,h2,h3,p { margin:0; font-weight:400 }
.keep { text-transform:none }
.wrap { max-width:640px; margin:0 auto; padding:0 max(20px, env(safe-area-inset-left,0px)) 80px }
.top { position:sticky; top:0; z-index:20; background:color-mix(in srgb,#000 82%,transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px) }
.top .bar { max-width:640px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; padding:16px 20px }
.logo { font-family:var(--logo); font-style:italic; font-weight:600; color:var(--gold); text-transform:none; font-size:28px; line-height:1 }
.mono { font-family:var(--mono); font-size:12px; color:var(--dim) }
.kicker { font-family:var(--mono); font-size:12px; color:var(--gold) }
.h1 { font-size:clamp(40px,11vw,64px); font-weight:300; letter-spacing:-0.06em; line-height:1 }
.h1 .soft { color:var(--dim) }
.h2 { font-size:30px; font-weight:400; letter-spacing:-0.045em; line-height:1.05 }
.sub { color:var(--mute); margin-top:10px; font-size:16px }
.pill { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:52px; padding:0 24px; border-radius:999px; background:var(--fg); color:#000; font-size:16px; font-weight:500; border:none; cursor:pointer; font-family:var(--display); white-space:nowrap; transition:transform .2s, opacity .2s }
.pill:active { transform:scale(.98) } .pill[disabled] { opacity:.45; cursor:default }
.pill.ghost { background:transparent; color:var(--fg); box-shadow:inset 0 0 0 1px #2A2824 }
.pill.sm { height:38px; padding:0 16px; font-size:14px }
.pill.block { width:100% }
.btnrow { display:flex; gap:10px; margin-top:28px } .btnrow .pill { flex:1 }
:focus-visible { outline:1.5px solid var(--gold); outline-offset:3px }
.err { font-size:13px; color:#E0917A; margin-top:10px; min-height:20px }
.fine { font-size:13px; color:var(--dim) }

/* inputs */
label.f { display:block; margin-top:18px }
label.f span { display:block; font-family:var(--mono); font-size:11px; color:var(--mute); margin:0 0 8px 4px }
.in { min-width:0; max-width:100%; -webkit-appearance:none; appearance:none; width:100%; height:56px; padding:0 20px; border-radius:18px; background:var(--field); border:none; box-shadow:inset 0 0 0 1px #24231F; color:var(--fg); font-family:var(--display); font-size:17px; letter-spacing:-0.01em; outline:none; transition:box-shadow .25s; text-transform:none }
textarea.in { height:110px; padding:16px 20px; resize:vertical; line-height:1.4 }
.in:focus { box-shadow:inset 0 0 0 1px var(--gold) }
.in::placeholder { color:#4A4741; text-transform:lowercase }
input[type=date].in, input[type=time].in { color-scheme:dark }

/* chips */
.chips { display:flex; flex-wrap:wrap; gap:8px }
.chip { height:44px; padding:0 18px; border-radius:999px; box-shadow:inset 0 0 0 1px #24231F; display:inline-flex; align-items:center; font-size:15px; color:#B8B2A7; background:none; border:none; font-family:var(--display); cursor:pointer }
.chip.on { color:var(--fg); box-shadow:inset 0 0 0 1px var(--gold); background:rgba(217,188,126,.07) }

/* vibe tiles */
.tiles { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:26px }
.tile { position:relative; aspect-ratio:3/4; border-radius:18px; overflow:hidden; background:#111; border:none; padding:0; cursor:pointer; color:var(--fg); font-family:var(--display) }
.tile img { width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1) brightness(.5); transition:filter .4s, transform .8s }
.tile span { position:absolute; left:14px; bottom:12px; font-size:19px; font-weight:500; letter-spacing:-0.03em; text-shadow:0 2px 14px rgba(0,0,0,.6) }
.tile.on img, .tile:hover img { filter:none; transform:scale(1.05) }
.tile.on { box-shadow:0 0 0 2px var(--gold) }
.tile.feat { grid-column:1 / -1; aspect-ratio:16/9 }
.tile.feat img { filter:grayscale(1) sepia(1) hue-rotate(-28deg) saturate(3.2) brightness(.42) }
.tile.feat.on img, .tile.feat:hover img { filter:sepia(1) hue-rotate(-28deg) saturate(3.6) brightness(.62) }
.tile.feat em { position:absolute; left:14px; top:12px; font-style:normal; font-family:var(--mono); font-size:11px; color:#000; background:var(--orange); padding:4px 10px; border-radius:999px }
.tile.feat span { font-size:28px }

/* wizard */
.steps { display:flex; gap:6px; margin:6px 0 30px }
.steps i { flex:1; height:2px; background:#1E1D1A; border-radius:2px; transition:background .3s }
.steps i.on { background:var(--gold) }
.step { animation:in .45s cubic-bezier(.2,.8,.2,1) both }
@keyframes in { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:none } }
.big-num { display:flex; align-items:center; gap:18px; margin-top:26px }
.big-num output { font-size:72px; font-weight:300; letter-spacing:-0.06em; min-width:2.2ch; font-variant-numeric:tabular-nums; line-height:1 }
input[type=range] { width:100%; accent-color:var(--gold); margin-top:22px }

/* building */
.log { font-family:var(--mono); font-size:13px; line-height:2; color:var(--dim); margin-top:30px }
.log div { animation:in .4s ease-out both } .log i { font-style:normal; color:var(--gold) }

/* plan */
.cover { position:relative; height:280px; margin:0 -20px; background:#111 center 40% / cover }
.cover::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.25),#000) }
.cover.hw { filter:sepia(.6) hue-rotate(-28deg) saturate(2) }
.cover-txt { position:relative; margin-top:-120px; z-index:2 }
.card { border-radius:24px; background:#070707; box-shadow:inset 0 0 0 1px var(--line); padding:22px; margin-top:14px }
.card h3 { font-size:22px; font-weight:500; letter-spacing:-0.035em; margin-bottom:8px }
.rowx { display:flex; gap:14px; padding:12px 0; border-top:1px solid var(--line); align-items:baseline }
.rowx:first-of-type { border-top:none }
.rowx b { font-family:var(--mono); font-weight:400; font-size:12px; color:var(--gold); min-width:66px }
.rowx div { flex:1; color:#D8D3CA }
.rowx em { font-style:normal; font-family:var(--mono); font-size:12px; color:var(--mute); white-space:nowrap }
.tag { display:inline-block; font-family:var(--mono); font-size:11px; color:var(--gold); box-shadow:inset 0 0 0 1px rgba(217,188,126,.35); border-radius:999px; padding:3px 10px }
.total { display:flex; justify-content:space-between; align-items:baseline; padding-top:14px; border-top:1px solid #2A2824; margin-top:4px }
.total strong { font-size:26px; font-weight:300; letter-spacing:-0.04em }
.note { margin-top:10px; font-size:14px; color:var(--mute) }
.sticky-cta { position:sticky !important; bottom:0; padding:16px 0 calc(16px + env(safe-area-inset-bottom,0px)); background:linear-gradient(180deg,transparent,#000 30%); margin-top:20px; display:flex; gap:10px }
.sticky-cta .pill { flex:1 }
.toast { position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:50; padding:12px 18px; border-radius:999px; background:#141310; box-shadow:inset 0 0 0 1px rgba(217,188,126,.45); font-size:14px; animation:in .3s both }
.cover-txt ~ * { position:relative; z-index:2 }
input[type=date].in, input[type=time].in { padding:0 14px }