/* BDub Design Studio — the Industry design system.
   Mobile first: this is used on a phone in someone's bathroom before it is ever
   used on a laptop. Industry's own controls are 36px tall, which is a desktop
   number; ours stay at 44px and up because a thumb is not a mouse. That is the
   one place this sheet deliberately departs from the system.

   The tokens below are lifted verbatim from the delivered Industry stylesheet.
   Do not hand-tune a hex here — retune the token and let every screen follow. */

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;700&family=Barlow+Condensed:wght@400;600&display=swap');

:root {
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-accent: #5980a6;
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);

  --color-accent-100: #eef6ff;
  --color-accent-200: #d6ebff;
  --color-accent-300: #b5d9fd;
  --color-accent-400: #94bce3;
  --color-accent-500: #749dc4;
  --color-accent-600: #597ea3;
  --color-accent-700: #416180;
  --color-accent-800: #2c455d;
  --color-accent-900: #1d2d3d;

  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;

  --radius-sm: 2px;
  --radius-md: 4px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);

  /* The names the rest of the studio already speaks, re-pointed at the system.
     brand.py overwrites these four per brand, so the skin layer still works. */
  --navy: var(--color-accent);
  --navy-deep: var(--color-accent-700);
  --gold: var(--color-accent-900);
  --gold-soft: var(--color-accent-400);

  --ink: var(--color-text);
  --muted: color-mix(in srgb, var(--color-text) 58%, transparent);
  --line: var(--color-divider);
  --bg: var(--color-bg);
  --card: transparent;
  --good: #3f6b52;
  --warn: var(--color-accent-800);
  --shadow: none;
  --shadow-lift: none;
  --radius: 0;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 var(--font-body);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
  margin: 0 0 .35em; line-height: 1.14; letter-spacing: -.015em;
  font-family: var(--font-heading); font-weight: 600;
}
h1 { font-size: 2.1rem; }
h2 { font-size: 1.7rem; }
h3 { font-size: 1.25rem; }
p { margin: 0 0 .8em; }
a { color: var(--color-accent-700); text-underline-offset: 3px; }

.muted { color: var(--muted); }
.small { font-size: .86rem; }
.tiny { font-size: .78rem; }
.center { text-align: center; }
.hide { display: none !important; }
.stack > * + * { margin-top: 12px; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* The registration marks. Industry hangs four <i> elements inside every framed
   box; drawing them as a background image puts them on every card in the studio
   without threading four spare nodes through every render path. */
:root {
  --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M5.5 0v11M0 5.5h11' stroke='%23767b7f' stroke-width='1'/%3E%3C/svg%3E");
}
.blueprint,
.card, .qcard, .board, .tier, .choice, .plan, .projcard, .campanel,
.dropzone, .contract, .legalbox, .stat, .internal {
  background-image: var(--mark), var(--mark), var(--mark), var(--mark);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: -5px -5px, calc(100% + 5px) -5px,
                       -5px calc(100% + 5px), calc(100% + 5px) calc(100% + 5px);
}

/* Available for decorative imagery, deliberately not applied to any photo in
   the flow. The system asks for every content photograph to be washed in the
   accent, but here the pictures ARE the decision — design renders, finish
   swatches and the customer's own room. Re-colouring those would have someone
   choosing a tile they cannot see. */
.duotone { position: relative; overflow: hidden; }
.duotone::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: var(--color-accent); mix-blend-mode: color;
}

/* ----------------------------------------------------------------- shell */

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  background: var(--gold);
  color: var(--color-bg);
}
.topbar .brand {
  font-family: var(--font-heading); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; font-size: 1rem;
}
.topbar .brand span { color: var(--gold-soft); }
.topbar .spacer { flex: 1; }
.topbar a, .topbar button.link {
  color: var(--color-accent-300); text-decoration: none; font-size: .88rem;
  background: none; border: 0; cursor: pointer; font-family: inherit;
}
.topbar a:hover, .topbar button.link:hover { color: #fff; }

.wrap { max-width: 720px; margin: 0 auto; padding: 24px 18px 120px; }
.wrap.wide { max-width: 1040px; }

/* --------------------------------------------------------------- steprail */

.steps {
  display: flex; flex-direction: column; gap: 10px; padding: 0 0 12px;
  background: var(--bg); border-bottom: 1px solid var(--line);
  position: sticky; top: 49px; z-index: 30;
}
.steps:empty { display: none; }

.prog { height: 2px; background: var(--color-surface); }
.prog .fill {
  height: 100%; width: 0; background: var(--color-accent);
  transition: width .32s cubic-bezier(.22, .61, .36, 1);
}

.chapters {
  display: flex; gap: 4px; overflow-x: auto; padding: 0 18px;
  scrollbar-width: none;
}
.chapters::-webkit-scrollbar { display: none; }
.chapters .step { font: inherit; }

.step {
  flex: 0 0 auto; display: flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 0;
  font-family: var(--font-heading); font-size: .88rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  color: var(--muted); background: transparent;
  border: 1px solid transparent; cursor: pointer;
}
.step .dot {
  width: 19px; height: 19px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--color-surface); color: var(--muted);
  font-size: .68rem; font-weight: 700;
}
.step.done { color: var(--color-accent-700); }
.step.done .dot { background: var(--color-accent-700); color: var(--color-bg); }
.step.active { color: var(--color-bg); background: var(--color-accent); border-color: var(--color-accent); }
.step.active .dot { background: var(--color-bg); color: var(--color-accent-900); }

/* ------------------------------------------------------------------ cards */

.card {
  background-color: transparent; border: 1px solid var(--line);
  border-radius: 0; padding: 22px;
}
.card + .card { margin-top: 22px; }
.card h2 { margin-bottom: 4px; }
.card .lead { color: var(--muted); margin-bottom: 18px; }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 22px;
  border: 1px solid transparent; border-radius: 0; cursor: pointer;
  font-family: var(--font-heading); font-weight: 600; font-size: 1rem;
  letter-spacing: .04em; text-transform: uppercase;
  background: var(--color-accent); color: var(--color-bg);
  transition: background .16s ease;
}
.btn:hover { background: var(--color-accent-600); }
.btn:active { background: var(--color-accent-700); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.gold { background: var(--color-accent-900); color: var(--color-bg); }
.btn.gold:hover { background: var(--color-accent-800); }
.btn.ghost {
  background: transparent; color: var(--color-text); border-color: var(--line);
}
.btn.ghost:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn.full { width: 100%; }
.btn.sm { min-height: 40px; padding: 8px 14px; font-size: .86rem; }

.btnrow { display: flex; gap: 10px; flex-wrap: wrap; }
.btnrow .btn { flex: 1 1 160px; }

.footbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  background: var(--color-bg);
  border-top: 1px solid var(--line);
}
.footbar .inner { max-width: 720px; margin: 0 auto; display: flex; gap: 10px; align-items: center; }
.footbar .price {
  font-family: var(--font-heading); font-weight: 600; font-size: 1.3rem;
}

/* ----------------------------------------------------------------- fields */

label.field { display: block; margin-bottom: 16px; }
label.field .name {
  display: block; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  font-family: var(--font-heading); font-weight: 600;
  color: var(--muted); margin-bottom: 5px;
}
label.field .hint { display: block; color: var(--muted); font-size: .8rem; margin-top: 4px; }

input[type=text], input[type=email], input[type=tel], input[type=number],
input[type=password], input[type=search],
select, textarea {
  width: 100%; padding: 12px 14px; font: inherit; color: var(--ink);
  background: var(--color-surface); caret-color: var(--color-accent);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  min-height: 48px;
}
input:hover, select:hover, textarea:hover {
  border-color: color-mix(in srgb, var(--color-text) 45%, transparent);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--color-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 30%, transparent);
}
textarea { min-height: 140px; resize: vertical; line-height: 1.55; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 560px) { .grid2 { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------- photos */

.camopen { width: 100%; margin-bottom: 12px; }

/* Rep-only, and only inside the phone app. Set apart from the camera controls
   so nobody hits it thinking it takes a picture. */
.scanblock {
  margin-bottom: 14px; padding: 12px;
  border: 1px solid var(--line); border-radius: 2px;
}
.scanblock .btn { width: 100%; margin-bottom: 8px; }
.scanblock #scannote:not(:empty) { margin-top: 8px; color: var(--color-accent); }

.campanel {
  position: relative; margin-bottom: 12px;
  border: 1px solid var(--line); overflow: hidden; background-color: #000;
}
.campanel video { display: block; width: 100%; max-height: 62vh; object-fit: cover; }
.cambar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 16px;
  background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
}
.shutter {
  width: 62px; height: 62px; border-radius: 50%; cursor: pointer;
  background: #fff; border: 4px solid rgba(255, 255, 255, .45);
}
.shutter:active { transform: scale(.94); }
.camghost {
  min-width: 68px; padding: 9px 14px; cursor: pointer;
  font-family: var(--font-heading); font-weight: 600; font-size: .9rem;
  letter-spacing: .06em; text-transform: uppercase; color: #fff;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .4);
}

.dropzone {
  display: block;
  border: 1px dashed var(--line); border-radius: 0;
  padding: 30px 20px; text-align: center; background-color: transparent; cursor: pointer;
}
.dropzone:hover, .dropzone.over {
  border-color: var(--color-accent);
  background-color: color-mix(in srgb, var(--color-accent) 6%, transparent);
}
.dropzone .big {
  font-family: var(--font-heading); font-weight: 600;
  font-size: 1.15rem; margin-bottom: 3px;
}

.photogrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 10px; margin-top: 16px;
}
.photo {
  position: relative; aspect-ratio: 1; overflow: hidden;
  background: var(--color-surface); border: 1px solid var(--line);
}
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo button {
  position: absolute; top: 5px; right: 5px; width: 27px; height: 27px;
  border: 0; cursor: pointer; font-size: 15px; line-height: 1;
  background: var(--color-accent-900); color: #fff;
}

/* ---------------------------------------------------------- design boards */

.boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.board {
  border: 1px solid var(--line); border-radius: 0;
  background-color: transparent; cursor: pointer; text-align: left; padding: 0;
  font: inherit; color: inherit; transition: border-color .14s;
}
.board:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.board.sel { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.board .swatches { display: flex; height: 96px; }
.board .swatches i { flex: 1; display: block; }
.board .body { padding: 14px 16px 16px; }
.board .name { font-family: var(--font-heading); font-weight: 600; font-size: 1.15rem; }
.board .tag {
  color: var(--color-accent-700); font-size: .74rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px;
}
.board ul { margin: 10px 0 0; padding-left: 18px; font-size: .84rem; color: var(--muted); }
.board li { margin-bottom: 3px; }

.board .shot {
  display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  animation: shotin .45s ease-out both;
}
@keyframes shotin { from { opacity: 0; } to { opacity: 1; } }

.seeit {
  display: block; width: 100%; margin-top: 12px;
  font-family: var(--font-heading); font-weight: 600; font-size: .88rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--color-accent-700);
  background: transparent; border: 1px solid var(--line); border-radius: 0;
  padding: 10px; cursor: pointer; transition: background .14s;
}
.seeit:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.seeit.working { color: var(--muted); cursor: progress; }
.seeit.working::after {
  content: ''; display: inline-block; width: 11px; height: 11px;
  margin-left: 8px; vertical-align: -1px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--color-accent);
  animation: spin .7s linear infinite;
}

/* ------------------------------------------------------------------ tiers */

.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.tier {
  position: relative; background-color: transparent; border: 1px solid var(--line);
  border-radius: 0; padding: 24px 22px; cursor: pointer;
  text-align: left; font: inherit; color: inherit;
  transition: border-color .14s;
}
.tier:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.tier.sel { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.tier.best { border-color: var(--color-accent-700); }
.tier.best.sel { border-color: var(--color-accent); }
.tier .flag {
  position: absolute; top: -11px; left: 20px;
  background: var(--color-accent); color: var(--color-bg);
  font-family: var(--font-heading); font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; padding: 4px 10px;
}
.tier .label {
  font-family: var(--font-heading); font-size: .78rem; font-weight: 600;
  color: var(--muted); text-transform: uppercase; letter-spacing: .12em;
}
.tier .amount {
  font-family: var(--font-heading); font-size: 2.6rem; font-weight: 600;
  letter-spacing: -.02em; line-height: 1; margin: 8px 0 4px;
}
.tier .per { color: var(--muted); font-size: .86rem; }
.tier .note { margin-top: 12px; font-size: .88rem; color: var(--muted); }
.tier .pick { margin-top: 16px; }

/* ------------------------------------------- where every dollar goes */

.sheet { margin-top: 20px; border: 1px solid var(--line); }
.sheethead {
  width: 100%; min-height: 52px; display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; background: transparent; border: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.sheethead:hover { background: color-mix(in srgb, var(--color-accent) 7%, transparent); }
.sheethead .ttl {
  font-family: var(--font-heading); font-weight: 600; font-size: 1.12rem;
  letter-spacing: .04em; text-transform: uppercase;
}
.sheethead .sub {
  font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-accent-700); margin-left: auto;
}
.sheethead .caret {
  font-family: var(--font-heading); font-size: 1.3rem; line-height: 1;
  width: 22px; text-align: center; color: var(--color-accent-700);
}
.sheetbody { padding: 4px 16px 18px; border-top: 1px solid var(--line); }

.sline { padding: 14px 0; border-bottom: 1px solid
  color-mix(in srgb, var(--color-text) 8%, transparent); }
.sline .top { display: flex; align-items: baseline; gap: 12px; }
.sline .top .l { font-family: var(--font-heading); font-weight: 600;
  font-size: 1.02rem; letter-spacing: .02em; }
.sline .top .v { margin-left: auto; font-family: var(--font-heading);
  font-weight: 600; font-size: 1.02rem; }
.sline .d { margin-top: 6px; font-size: .84rem; color: var(--muted); }
/* Money coming off the price. No share bar, because it is not a share of
   anything — it is the one line on the sheet the customer is glad to see. */
.sline.off .top .v { color: var(--color-accent, var(--color-text)); }

/* The rep's own control, on the rep screen only. */
.discrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.discrow .discpct { width: 5.5em; font-size: 1rem; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 6px; }
.discrow .pct { color: var(--muted); font-size: .88rem; }
/* The share bar is the whole point of the sheet: it shows at a glance that a
   third of a bathroom is plumbing, which is the fact that stops the "why does
   this cost that" conversation before it starts. */
.sbar { height: 6px; margin-top: 8px;
  background: color-mix(in srgb, var(--color-text) 10%, transparent); }
.sbar i { display: block; height: 100%; background: var(--color-accent); }

/* The work under a heading, with the quantity we priced beside it. Tabular
   figures so the money and the measurements line up down the column — a bid
   whose numbers wander is read as an estimate rather than a price. */
.sitems { margin-top: 10px; display: grid; gap: 6px; }
.sitem { display: grid; grid-template-columns: 1fr auto auto;
  gap: 6px 14px; align-items: baseline; font-size: .88rem; }
.sitem .l { color: var(--color-text); }
.sitem .q { color: var(--muted); font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.sitem .v { font-variant-numeric: tabular-nums; min-width: 5.5em;
  text-align: right; }
@media (max-width: 520px) {
  .sitem { grid-template-columns: 1fr auto; }
  .sitem .q { grid-column: 1; order: 3; }
}

.stotals { margin-top: 16px; display: grid; gap: 8px; }
.trow { display: flex; gap: 12px; font-size: .95rem; }
.trow .v { margin-left: auto; }
.trow.grand {
  border-top: 1px solid var(--color-text); padding-top: 11px; margin-top: 4px;
  font-family: var(--font-heading); font-size: 1.3rem; letter-spacing: .02em;
}

.trimhead { margin: 22px 0 4px; }
.trims { display: grid; }
.trim {
  display: flex; gap: 12px; align-items: baseline; padding: 9px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
  font-size: .92rem;
}
.trim .v {
  margin-left: auto; flex: none; font-family: var(--font-heading);
  font-weight: 600; color: var(--color-accent-700);
}

.optiongrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.opt {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 13px 15px; border: 1px solid var(--line); border-radius: 0;
  background: transparent; cursor: pointer;
}
.opt.on {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
}
.opt input { margin: 3px 0 0; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--color-accent); }
.opt .t { font-weight: 500; font-size: .95rem; }
.opt .b { color: var(--muted); font-size: .82rem; }
.opt .optprice {
  margin-left: 8px; color: var(--color-accent-700);
  font-family: var(--font-heading); font-variant-numeric: tabular-nums;
}
/* Stacked one under another outside the options grid, where the grid's own gap
   is doing this job already. */
.opt + .opt { margin-top: 10px; }
.optiongrid .opt + .opt { margin-top: 0; }
/* A give-up whose prerequisite has not been taken, and one mid re-price.
   Visible but not clickable, so the rule reads as a rule rather than a bug. */
.opt.off { opacity: .45; cursor: not-allowed; }
.opt.working { opacity: .5; pointer-events: none; }
.keepnote { color: var(--muted); font-size: .86rem; margin: 0 0 12px; }

/* -------------------------------------------------------------- financing */

.plan {
  display: block; width: 100%; text-align: left; font: inherit; color: inherit;
  border: 1px solid var(--line); border-radius: 0;
  padding: 20px 22px; background-color: transparent; cursor: pointer; margin-bottom: 14px;
}
.plan.sel { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.plan .head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.plan .pay {
  font-family: var(--font-heading); font-size: 1.8rem; font-weight: 600;
  white-space: nowrap;
}
.plan .disc { margin-top: 10px; font-size: .74rem; line-height: 1.5; color: var(--muted); }

.legal { font-size: .74rem; line-height: 1.55; color: var(--muted); }

.summary { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 14px; }
.row { display: flex; justify-content: space-between; gap: 14px; padding: 6px 0; }
.row .v { font-weight: 500; font-variant-numeric: tabular-nums; }
.row.total {
  border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px;
  font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600;
}

/* -------------------------------------------------------------- internals */

.internal {
  background-color: transparent; border: 1px solid var(--color-accent-700);
  border-left-width: 4px; border-radius: 0; padding: 16px 18px; margin-top: 18px;
}
.internal h3 {
  color: var(--color-accent-700); font-size: .78rem;
  text-transform: uppercase; letter-spacing: .12em;
}
.internal table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.internal td { padding: 4px 0; }
.internal td:last-child { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }

/* The rep's site flag. Rep screen only, so it does not borrow the customer
   palette — it is meant to read as a stop, not as a design note. */
.siteflag {
  margin: 10px 0 4px; padding: 10px;
  border: 1px solid #e0c68d; background: #fbf4e8; border-radius: 2px;
}
.siteflag p { margin: 0 0 8px; color: #6b4a12; }
.siteflag textarea { width: 100%; margin-bottom: 8px; }
.siteflag .btn { width: 100%; }

/* ------------------------------------------------------------------ misc */

.banner {
  padding: 13px 16px; border-radius: 0; font-size: .9rem; margin-bottom: 16px;
  border: 1px solid var(--line);
}
.banner.err { background: #f7ecec; color: #7d2521; border-color: #d9b3b0; }
.banner.ok { background: color-mix(in srgb, var(--good) 12%, transparent); color: var(--good); border-color: var(--good); }
.banner.info {
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--color-accent-800); border-color: var(--color-accent-400);
}
/* Over the budget they gave us. Deliberately not the error red — nothing has
   gone wrong, they are being told the truth early. */
.banner.warn { background: #fbf4e8; color: #6b4a12; border-color: #e0c68d; }
.banner.warn h3 { margin: 0 0 6px; font-size: 1rem; }
.banner.warn p { margin: 0 0 8px; }
.banner.warn p:last-child { margin-bottom: 0; }

.crossover { margin-top: 20px; }
.crossover h3 { margin: 0 0 6px; font-size: 1rem; }
.crossover p { margin: 0 0 8px; }
.crossover .btn { margin-top: 4px; }

.pill {
  display: inline-block; padding: 3px 10px; border-radius: 0;
  font-family: var(--font-heading); font-size: .74rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--color-surface); color: var(--muted);
}
.pill.go { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.pill.gold { background: color-mix(in srgb, var(--color-accent) 16%, transparent); color: var(--color-accent-800); }

/* --------------------------------------------------------------- portal */

.rowhead { display: flex; align-items: center; gap: 10px; margin: 30px 0 12px; }
.rowhead h2 { margin: 0; }
.rowhead .spacer { flex: 1; }

select.mini, input.mini {
  width: auto; padding: 7px 10px; font-size: .85rem; min-height: 40px;
}

.timeline { list-style: none; margin: 6px 0 0; padding: 0; }
.timeline li {
  position: relative; padding: 0 0 16px 26px; border-left: 1px solid var(--line);
  font-size: .9rem;
}
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before {
  content: ''; position: absolute; left: -6px; top: 4px; width: 11px; height: 11px;
  background: var(--color-bg); border: 1px solid var(--muted);
}
.timeline li.done::before { background: var(--color-accent-700); border-color: var(--color-accent-700); }
.timeline li.now::before { background: var(--color-accent); border-color: var(--color-accent); }
.timeline li.now { font-weight: 500; }
.timeline .date { display: block; font-size: .78rem; color: var(--muted); }

.grid-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.grid-photos figure { margin: 0; }
.grid-photos img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
  border: 1px solid var(--line);
}
.grid-photos figcaption { font-size: .76rem; color: var(--muted); margin-top: 4px; }

.doclist { list-style: none; margin: 0; padding: 0; }
.doclist li { padding: 11px 0; border-bottom: 1px solid var(--line); display: flex; gap: 12px; align-items: center; }
.doclist li:last-child { border-bottom: 0; }
.doclist .spacer { flex: 1; }

.projcard {
  display: block; border: 1px solid var(--line); border-radius: 0;
  background-color: transparent; padding: 20px 22px; margin-bottom: 14px;
  text-decoration: none; color: inherit; transition: border-color .14s;
}
.projcard:hover { border-color: var(--color-accent); }
.projcard .n { font-family: var(--font-heading); font-weight: 600; font-size: 1.2rem; }
.projcard .m { font-size: .85rem; color: var(--muted); margin-top: 4px; }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 20px; flex-wrap: wrap; }
.tabs button {
  font-family: var(--font-heading); font-weight: 600; font-size: .92rem;
  letter-spacing: .08em; text-transform: uppercase;
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 11px 14px; cursor: pointer; color: var(--muted);
}
.tabs button.sel { color: var(--color-accent-800); border-bottom-color: var(--color-accent); }

table.list { width: 100%; border-collapse: collapse; background: transparent; }
table.list th {
  text-align: left; font-family: var(--font-heading); font-size: .74rem;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line);
}
table.list td { padding: 13px 12px; border-bottom: 1px solid var(--line); font-size: .9rem; }
table.list tr:hover td { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
table.list a { font-weight: 500; text-decoration: none; }

.spin {
  display: inline-block; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.toast {
  position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%);
  background: var(--color-accent-900); color: var(--color-bg); padding: 12px 20px;
  font-size: .9rem; box-shadow: var(--shadow-lg);
  z-index: 60; max-width: 90vw; text-align: center;
}

/* ------------------------------------------------------- one question card */

.qcard {
  display: block;
  background-color: transparent; border: 1px solid var(--line);
  border-radius: 0; padding: 30px 26px;
  animation: qin .26s cubic-bezier(.22, .61, .36, 1) both;
}
.qcard.back { animation-name: qin-back; }
.qcard.leaving { animation: qout .15s ease-in both; }
.qcard.leaving-back { animation: qout-back .15s ease-in both; }
.qcard.wide { max-width: none; }
.qcard h2 { font-size: 2rem; margin-bottom: 8px; }
.qcard .lead { color: var(--muted); margin-bottom: 22px; }
.qcard > label.field:last-of-type { margin-bottom: 0; }

@keyframes qin { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes qin-back { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
@keyframes qout { to { opacity: 0; transform: translateX(-16px); } }
@keyframes qout-back { to { opacity: 0; transform: translateX(16px); } }

label.field.big .name { font-size: .85rem; }
input.jumbo {
  font-family: var(--font-heading); font-size: 1.8rem; font-weight: 600;
  padding: 14px 16px; min-height: 60px;
}

/* ------------------------------------------------------------- big choices */

.choices { display: grid; gap: 12px; }
.choice {
  display: block; width: 100%; text-align: left; font: inherit; color: inherit;
  border: 1px solid var(--line); border-radius: 0;
  padding: 18px 20px; background-color: transparent; cursor: pointer;
  transition: border-color .14s;
}
.choice:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.choice.sel { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.choice .t { font-family: var(--font-heading); font-weight: 600; font-size: 1.2rem; }
.choice .b { color: var(--muted); font-size: .87rem; margin-top: 3px; }

/* ------------------------------------------------------------------- chat */

.chat {
  height: 46vh; min-height: 280px; overflow-y: auto;
  padding: 16px; margin-bottom: 12px;
  background: transparent; border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 10px;
  overscroll-behavior: contain;
}
.bub {
  max-width: 84%; padding: 11px 15px; border-radius: var(--radius-sm);
  font-size: .95rem; line-height: 1.5; white-space: pre-wrap;
  animation: bubin .22s ease-out both;
}
.bub.her { align-self: flex-start; background: var(--color-surface); border: 1px solid var(--line); }
.bub.me { align-self: flex-end; background: var(--color-accent); color: var(--color-bg); }
@keyframes bubin { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

.bub.typing { display: flex; gap: 5px; align-items: center; padding: 15px; }
.bub.typing i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--muted);
  animation: blink 1.3s infinite ease-in-out both;
}
.bub.typing i:nth-child(2) { animation-delay: .18s; }
.bub.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%, 80%, 100% { opacity: .28; } 40% { opacity: 1; } }

.chatbar { display: flex; gap: 9px; align-items: flex-end; }
.chatbar textarea {
  min-height: 48px; max-height: 160px; resize: none; overflow-y: auto;
  border-radius: var(--radius-md); padding: 12px 14px;
}
.chatbar .btn { flex: 0 0 auto; }

.linky {
  display: block; margin: 16px auto 0; background: none; border: 0;
  font: inherit; font-size: .87rem; color: var(--muted);
  text-decoration: underline; cursor: pointer; padding: 6px;
}
.linky:hover { color: var(--color-accent-700); }

/* ------------------------------------------------------------ price + misc */

.thinking { color: var(--muted); text-align: center; padding: 34px 10px; }
.thinking::after {
  content: ''; display: block; width: 22px; height: 22px; margin: 14px auto 0;
  border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--color-accent);
  animation: spin .7s linear infinite;
}

.detail { margin-top: 18px; }

/* ---------------------------------------------------------------- contract */

.legalbox {
  border: 1px solid var(--line); border-radius: 0; background-color: transparent;
  padding: 18px 20px; margin: 4px 0 20px;
}
.legalbox h3 { font-size: 1.05rem; }
.legalbox p { font-size: .85rem; line-height: 1.6; margin-bottom: .7em; }
.legalbox p:last-child { margin-bottom: 0; }

.contract {
  background-color: transparent; border: 1px solid var(--line); border-radius: 0;
  padding: 26px 24px 30px; margin-bottom: 24px;
}
.contract h3 {
  margin-top: 28px; padding-bottom: 6px; font-size: 1.1rem;
  border-bottom: 1px solid var(--line);
}
.contract p, .contract li { font-size: .88rem; line-height: 1.62; }
.contract ul { margin: 0 0 14px; padding-left: 20px; }
.contract li { margin-bottom: 4px; }

.chead { text-align: center; padding-bottom: 16px; border-bottom: 1px solid var(--color-accent-900); }
.chead h2 { margin-bottom: 6px; }

.cgrid { display: grid; gap: 16px; margin: 20px 0 4px; }
@media (min-width: 720px) { .cgrid { grid-template-columns: repeat(3, 1fr); } }
.cparty { border-left: 2px solid var(--color-accent); padding-left: 12px; font-size: .85rem; line-height: 1.5; }

.clabel {
  margin: 18px 0 6px; font-family: var(--font-heading); font-size: .74rem;
  font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--muted);
}
.cparty .clabel { margin: 0 0 4px; }
.strong { font-weight: 700; }

.cterm { margin-bottom: 16px; }
.cterm .strong { display: block; margin-bottom: 4px; }

.csched { width: 100%; border-collapse: collapse; font-size: .86rem; margin-bottom: 16px; }
.csched td { padding: 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.csched td:first-child { padding-right: 12px; white-space: nowrap; font-weight: 500; }
.csched tr:last-child td { border-bottom: 0; }
.amt { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The two point sizes below are the statutes' numbers, not design choices:
   RCW 18.27.114 says twelve point and bold, 16 CFR 429.1(a) says ten point
   bold. The signed PDF is the document of record and sets them in absolute
   points; the screen matches it so nobody is agreeing on a phone to something
   smaller than what they are handed on paper. Do not convert these to rem, and
   do not let the condensed heading face near them — a condensed twelve point is
   not the twelve point the statute means. */
.stat {
  border: 2px solid var(--color-accent-900); border-radius: 0;
  background-color: transparent; padding: 18px 20px; margin: 12px 0 22px;
  font-family: var(--font-body);
}
.stat p { margin-bottom: .75em; }
.stat p:last-child { margin-bottom: 0; }
.stat .cap { font-weight: 700; }
.stat.notice p { font-size: 12pt; line-height: 1.45; }
.stat.ftc p { font-size: 10pt; font-weight: bold; line-height: 1.4; }

.photo.pop { animation: pop .24s cubic-bezier(.2, .8, .3, 1.2) both; }
@keyframes pop { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }

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

/* The one staff door, injected into every customer-facing page by the server so
   nobody has to be told the address. Deliberately quiet: it sits below the fold
   of whatever the page was actually for, and it is the last thing in the tab
   order. The app pages carry a fixed bar along the bottom, hence the clearance. */
.staff-foot {
  margin: 56px 0 0;
  padding: 18px 0 96px;
  text-align: center;
  border-top: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent);
}
.staff-foot a {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-ink) 45%, transparent);
  text-decoration: none;
}
.staff-foot a:hover, .staff-foot a:focus { text-decoration: underline; }