/* Generated Build — ported from the round-5 design sketch
   (docs/GENERATED_BUILD_SKETCH.html).
   Design intent lives there; keep this file in step with it. */
:root{
  --ground:#F9FAF9; --surface:#FFFFFF; --surface-2:#F2FAF6;
  --ink:#132019; --ink-2:#43524B; --muted:#6E7C74; --hair:#E3E9E5;
  --accent:#009362; --accent-deep:#00533B; --accent-wash:#E6FAF4;
  --owner:#0066CC; --owner-deep:#0050A0;
  --gold:#D4AF37; --gold-ink:#8A701D;
  --neg:#5F6D66; --band:rgba(95,109,102,.15);
  --chip-good-bg:#E6FAF4; --chip-good-ink:#00533B;
  --chip-warn-bg:#F9F1D8; --chip-warn-ink:#6F5A12;
  --shadow:0 1px 2px rgba(19,32,25,.05), 0 8px 28px rgba(19,32,25,.06);
  /* Light-only, like the rest of the product. The sketch shipped a
     prefers-color-scheme dark palette here, which made this the one dark
     surface in an otherwise light site whenever the OS was in dark mode.
     color-scheme pins the UA-painted bits too (form controls, scrollbars),
     which a token swap alone would not have reached. */
  color-scheme:light;
}

*{box-sizing:border-box}
body{
  background:var(--ground); color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  margin:0; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1040px; margin:0 auto; padding:52px 24px 88px}
button{font:inherit; color:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}

/* ---------- stepper ---------- */
/* No page header above it: the brand lives in the site navbar and the framing
   h1/lede are gone, so the stepper is the first thing under the nav. */
.steps{
  list-style:none; display:flex; gap:6px; padding:0; margin:0 0 26px;
  border-bottom:1px solid var(--hair);
}
.steps button{
  background:none; border:none; padding:10px 14px 12px; display:flex; gap:9px; align-items:baseline;
  color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px;
  font-size:13px; font-weight:600;
}
.steps .num{font-size:11px; font-weight:800; letter-spacing:.08em; color:var(--muted)}
.steps li.active button{color:var(--ink); border-bottom-color:var(--accent)}
.steps li.active .num{color:var(--accent)}
.steps li.done .num{color:var(--accent)}
.steps button:disabled{cursor:default; opacity:.55}

/* ---------- stages ---------- */
.stage{animation:resolve .55s ease both}
@keyframes resolve{from{opacity:0; filter:blur(9px); transform:translateY(10px)} to{opacity:1; filter:blur(0); transform:none}}
.stagehead{margin:0 0 6px; font-size:22px; font-weight:800; letter-spacing:-0.015em}
.stagesub{color:var(--ink-2); margin:0 0 24px; font-size:14.5px}
/* A stage that carries no subtitle takes over the sub's bottom gap, so the
   heading doesn't sit 6px off the content below it. */
.stagehead.nosub{margin-bottom:24px}
.stagesub .hl{color:var(--accent); font-weight:600}

/* ---------- stage 1: prompt ---------- */
.promptcard{
  background:var(--surface); border:1px solid var(--hair); border-radius:14px;
  box-shadow:var(--shadow); padding:26px 26px 24px;
}
.promptcard label{display:block; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}
textarea{
  width:100%; min-height:88px; resize:vertical; border:1px solid var(--hair); border-radius:10px;
  background:var(--ground); color:var(--ink); font:inherit; font-size:17px; padding:14px 16px;
}
textarea:focus{outline:2px solid var(--accent); outline-offset:0; border-color:transparent}
.guides{display:flex; gap:14px; margin-top:18px; flex-wrap:wrap; align-items:stretch}
.guide{flex:1 1 230px; display:flex; flex-direction:column}
.guide input{
  width:100%; border:1px solid var(--hair); border-radius:10px; background:var(--ground);
  color:var(--ink); font:inherit; font-size:15px; padding:10px 14px;
  font-variant-numeric:tabular-nums;
}
.upload{
  flex:1 1 300px; text-align:left; display:flex; flex-direction:column; justify-content:center; gap:2px;
  border:1.5px dashed var(--hair); border-radius:10px; background:none; padding:10px 16px;
  transition:border-color .15s ease;
}
.upload:hover{border-color:var(--accent)}
.upload.has-file{border-color:var(--accent); border-style:solid}
.upload .ut{font-size:13.5px; font-weight:600; color:var(--ink-2)}
.upload .us{font-size:11.5px; color:var(--muted)}
.promptfoot{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:22px; flex-wrap:wrap}
.fineprint{font-size:12px; color:var(--muted)}
.formerror{font-size:13px; font-weight:600; color:var(--chip-warn-ink); background:var(--chip-warn-bg);
  border-radius:9px; padding:8px 14px; margin-top:14px}
.formerror[hidden]{display:none}
.cta{
  background:var(--accent); color:#fff; border:none; border-radius:10px;
  padding:12px 22px; font-size:15px; font-weight:600; letter-spacing:.01em;
  transition:transform .15s ease, filter .15s ease;
}
.cta:hover{filter:brightness(1.07); transform:translateY(-1px)}
.cta:disabled{opacity:.55; cursor:default; transform:none}

/* ---------- stage 2: thinking + cards ---------- */
.thinking{display:flex; align-items:center; gap:12px; padding:26px 4px; color:var(--ink-2); font-size:14px}
.thinking[hidden]{display:none}
.dots{display:inline-flex; gap:5px}
.dots i{width:7px; height:7px; border-radius:50%; background:var(--accent); animation:pulse 1.1s ease infinite}
.dots i:nth-child(2){animation-delay:.18s}
.dots i:nth-child(3){animation-delay:.36s}
@keyframes pulse{0%,100%{opacity:.25; transform:scale(.85)} 50%{opacity:1; transform:scale(1)}}
.thinking .ghost{margin-left:6px}

.cards{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
@media (max-width:760px){.cards{grid-template-columns:1fr}}
.vcard{
  text-align:left; background:var(--surface); border:1px solid var(--hair); border-radius:14px;
  box-shadow:var(--shadow); padding:22px 22px 20px; display:flex; flex-direction:column;
  transition:transform .18s ease, border-color .18s ease;
  opacity:0; filter:blur(8px); transform:translateY(10px);
}
.vcard.in{opacity:1; filter:blur(0); transform:none; transition:opacity .5s ease, filter .5s ease, transform .5s ease, border-color .18s ease}
.vcard.in:hover{transform:translateY(-2px); border-color:var(--accent)}
.vcard h3{margin:0 0 2px; font-size:17px; font-weight:800; letter-spacing:-0.01em}
.vtag{font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:10px}
.vthesis{font-size:14px; color:var(--ink-2); margin:0 0 14px; min-height:2.6em}
.vlist{margin:0 0 12px; padding:0; list-style:none; font-size:13px}
.vlist-h{font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 5px}
.vlist li{padding-left:16px; position:relative; margin-bottom:4px; color:var(--ink-2)}
.vlist.get li::before{content:''; position:absolute; left:2px; top:.55em; width:6px; height:6px; border-radius:2px; background:var(--accent)}
.vlist.trade li::before{content:''; position:absolute; left:2px; top:.62em; width:7px; height:2px; border-radius:1px; background:var(--neg)}
.vpick{
  margin-top:auto; align-self:flex-start;
  border:1px solid var(--hair); border-radius:9px; padding:8px 16px;
  font-size:13.5px; font-weight:600; color:var(--accent-deep);
  transition:background .15s ease, border-color .15s ease;
}
.vcard:hover .vpick{background:var(--accent); border-color:var(--accent); color:#fff}
.cardsnote{font-size:12px; color:var(--muted); margin-top:16px}
.samplebanner{
  background:var(--chip-warn-bg); color:var(--chip-warn-ink); border-radius:10px;
  padding:10px 16px; font-size:13px; font-weight:600; margin:0 0 18px;
}
.samplebanner[hidden]{display:none}

/* ---------- stage 3: the build ---------- */
.buildbar{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:18px}
.buildhint{font-size:12.5px; color:var(--muted)}
.ghost{
  border:1px solid var(--hair); background:var(--surface); border-radius:9px;
  padding:7px 14px; font-size:12.5px; font-weight:600; color:var(--ink-2);
}
.ghost:hover{border-color:var(--accent); color:var(--accent-deep)}

.buildrow{display:flex; gap:18px; align-items:stretch}
.pane{
  background:var(--surface); border:1px solid var(--hair); border-radius:14px;
  box-shadow:var(--shadow); padding:18px 20px 14px; min-width:0; position:relative;
}
.walkpane{flex:1 1 100%; transition:flex-basis .75s cubic-bezier(.6,.05,.25,1)}
.tlpane{flex:1 1 0%; opacity:0; overflow:hidden; padding-left:0; padding-right:0;
  transition:flex-basis .75s cubic-bezier(.6,.05,.25,1), opacity .5s ease .35s}
.buildrow.split .walkpane{flex-basis:26%}
.buildrow.split .tlpane{flex-basis:74%; opacity:1; padding-left:20px; padding-right:20px}
.buildrow.split.walk-active .walkpane{flex-basis:74%}
.buildrow.split.walk-active .tlpane{flex-basis:26%}
@media (max-width:860px){
  .buildrow{flex-direction:column}
  .walkpane,.tlpane{flex-basis:auto !important}
  .tlpane{max-height:0; padding-top:0; padding-bottom:0}
  .buildrow.split .tlpane{max-height:1200px; padding:18px 20px 14px; transition:max-height .8s ease, opacity .5s ease .2s}
}
.panehead{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:8px; flex-wrap:wrap}
.panetitle{font-size:13px; font-weight:800; letter-spacing:-0.005em; margin:0}
.panesub{font-size:11px; color:var(--muted)}
svg{display:block; width:100%; height:auto}
svg text{font-family:inherit}

.verdict{
  display:none; font-size:11.5px; font-weight:600; border-radius:999px; padding:4px 12px;
  background:var(--chip-good-bg); color:var(--chip-good-ink);
}
.verdict.warn{background:var(--chip-warn-bg); color:var(--chip-warn-ink)}
.verdict.show{display:inline-block; animation:resolve .4s ease both}

/* walk pane loading (lead variant still building — engine call in flight) */
.paneloading{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px;
  font-size:12.5px; color:var(--muted); pointer-events:none;
}
.paneloading[hidden]{display:none}
.paneloading .wheel{width:26px; height:26px; border-width:3px}

/* walk marks */
.wbar{opacity:0; transform:translateY(-14px)}
.wbar.in{opacity:1; transform:none; transition:opacity .38s ease, transform .38s cubic-bezier(.2,.7,.3,1.2)}
.wconn{opacity:0; transition:opacity .3s ease .1s}
.wconn.in{opacity:1}
.wfn{opacity:0; transition:opacity .45s ease}
.wfn.in{opacity:1}
.wlabel,.wcat{transition:opacity .4s ease}
.dockcap,.tlcap{display:none; font-size:11px; color:var(--muted); text-align:center; margin:6px 0 2px}
@media (min-width:861px){
  .buildrow.split:not(.walk-active) .wlabel,
  .buildrow.split:not(.walk-active) .wcat{opacity:0}
  .buildrow.split:not(.walk-active) .dockcap{display:block; animation:resolve .5s ease .6s both}
  .buildrow.split.walk-active .tlcap{display:block; animation:resolve .5s ease both}
  .buildrow.split.walk-active .tlpane .legend,
  .buildrow.split.walk-active .tlpane .panesub{display:none}
  .buildrow.split:not(.walk-active) .walkpane{cursor:pointer}
  .buildrow.split:not(.walk-active) .walkpane svg{pointer-events:none}
  .buildrow.split.walk-active .tlpane{cursor:pointer}
  .buildrow.split.walk-active .tlpane svg{pointer-events:none}
}

/* legend */
.legend{display:flex; gap:16px; flex-wrap:wrap; font-size:11px; color:var(--ink-2); margin:2px 0 6px}
.legend span{display:inline-flex; align-items:center; gap:6px}
.sw{width:14px; height:3px; border-radius:2px; display:inline-block}
.sw.rev{background:var(--accent)}
.sw.val{background:var(--owner)}
.sw.band{width:14px; height:9px; background:var(--band); border-radius:2px}
.sw.fn{width:14px; height:0; border-top:2px dashed var(--owner)}

/* tiles */
.tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:18px}
@media (max-width:860px){.tiles{grid-template-columns:repeat(2,1fr)}}
.tile{
  background:var(--surface); border:1px solid var(--hair); border-radius:12px; padding:14px 16px;
  opacity:0; transform:translateY(8px); filter:blur(4px);
}
.tile.in{opacity:1; transform:none; filter:blur(0); transition:all .5s ease}
.tile .tl{font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:4px}
.tile .tv{font-size:21px; font-weight:800; letter-spacing:-0.02em; font-variant-numeric:tabular-nums}
.tile .tv.good{color:var(--accent-deep)}
.tile .tv.own{color:var(--owner-deep)}
.tile .ts{font-size:11px; color:var(--muted); margin-top:3px; line-height:1.45}

/* assumptions row */
.assume{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px;
  font-size:11.5px; color:var(--muted); opacity:0;
}
.assume.in{opacity:1; transition:opacity .6s ease}
.assume .ah{font-weight:600; letter-spacing:.08em; text-transform:uppercase; font-size:10px}
.achip{border:1px solid var(--hair); border-radius:999px; padding:3px 11px; background:var(--surface); color:var(--ink-2); font-weight:500}
.assume .an{flex-basis:100%; font-size:11px}
@media (min-width:861px){.assume .an{flex-basis:auto; margin-left:auto}}

/* compare strip */
.compare{margin-top:30px; display:none}
.compare.show{display:block; animation:resolve .5s ease both}
.compare h3{font-size:15px; font-weight:800; margin:0 0 4px; letter-spacing:-0.01em}
.comparesub{font-size:12.5px; color:var(--ink-2); margin:0 0 14px}
.cgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
@media (max-width:860px){.cgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.cgrid{grid-template-columns:1fr}}
.ccard{
  position:relative; text-align:left; background:var(--surface); border:1.5px solid var(--hair); border-radius:12px;
  padding:13px 14px 12px; transition:border-color .18s ease;
}
.ccard:hover{border-color:var(--accent)}
.ccard[aria-pressed="true"]{border-color:var(--accent); background:var(--surface-2)}
.ccard .cn{font-size:12.5px; font-weight:800; margin-bottom:6px; display:flex; justify-content:space-between; align-items:baseline}
.ccard .cnow{font-size:9.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); display:none}
.ccard[aria-pressed="true"] .cnow{display:inline}
.cbody{transition:filter .55s ease, opacity .55s ease}
.ccard.pending{cursor:default}
.ccard.pending:hover{border-color:var(--hair)}
.ccard.pending .cbody{filter:blur(7px); opacity:.45; pointer-events:none}
.cprog{
  position:absolute; inset:34px 0 0 0; display:none; align-items:center; justify-content:center; gap:9px;
  font-size:11px; font-weight:600; color:var(--muted); z-index:2;
}
.ccard.pending .cprog{display:flex}
.ccard.failed .cprog{color:var(--chip-warn-ink)}
.wheel{width:15px; height:15px; border-radius:50%; border:2px solid var(--hair); border-top-color:var(--accent); animation:spin .85s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.cstats{margin-top:8px; font-size:11px; color:var(--ink-2); display:grid; gap:2px; font-variant-numeric:tabular-nums}
.cstats b{font-weight:600; color:var(--ink)}

/* save band */
.saveband{
  margin-top:30px; display:none; align-items:center; gap:22px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--hair); border-left:3px solid var(--accent);
  border-radius:14px; box-shadow:var(--shadow); padding:22px 26px;
}
.saveband.show{display:flex; animation:resolve .55s ease both}
.saveband h3{margin:0 0 4px; font-size:17px; font-weight:800; letter-spacing:-0.01em}
.saveband p{margin:0; font-size:13px; color:var(--ink-2)}
.savemain{flex:1 1 340px}
.savemain .cta{margin-top:14px; display:inline-block; text-decoration:none}
.savelist{flex:1 1 300px; border-left:1px solid var(--hair); padding-left:24px; align-self:center}
@media (max-width:700px){.savelist{border-left:none; padding-left:0}}
.savelist ul{list-style:none; margin:0; padding:0; font-size:13px; display:grid; gap:6px}
.savelist li{padding-left:22px; position:relative; color:var(--ink-2); font-weight:500}
/* Check mark drawn from two borders rather than a glyph: no dependency on the
   Font Awesome CDN, and it takes the accent token like everything else. These
   items wrap, so it stays pinned to the first line. */
.savelist li::before{
  content:''; position:absolute; left:3px; top:.38em; width:5px; height:9px;
  border:solid var(--accent); border-width:0 2px 2px 0; transform:rotate(45deg);
}
.tagline{margin-top:12px !important; font-size:11.5px !important; color:var(--muted) !important}
.tagline b{color:var(--accent-deep); font-weight:600}

/* tooltip */
.tip{
  position:absolute; pointer-events:none; z-index:5; display:none;
  background:var(--ink); color:var(--ground); border-radius:8px; padding:7px 11px;
  font-size:11.5px; line-height:1.5; white-space:nowrap; font-variant-numeric:tabular-nums;
  box-shadow:var(--shadow);
}
.tip b{font-weight:600}

/* Named .toast in the sketch — renamed so Bootstrap (loaded for the navbar)
   can't restyle/hide it via its own .toast component rules. */
.snackbar{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(90px);
  background:var(--ink); color:var(--ground); border-radius:10px; padding:10px 18px;
  font-size:12.5px; font-weight:500; box-shadow:var(--shadow); transition:transform .35s cubic-bezier(.2,.7,.3,1.1);
  z-index:20; max-width:90vw; text-align:center;
}
.snackbar.show{transform:translateX(-50%) translateY(0)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}