/* Site planner v2 (/spec/v2/). The look of the v1 planner (/spec/), plus the inputs the planner AI can put on a card. */
:root {
  --bg: #f7f4ee; --card: #ffffff; --ink: #1d2729; --muted: #5d6a6c; --faint: #8a9496;
  --line: #e4ded3; --accent: #2f6f62; --accent-ink: #ffffff; --accent-soft: #e3efeb;
  --gold: #a4741f; --gold-soft: #f6ecd8; --flash: #fff4c9; --danger: #a33a2c;
  --shadow: 0 1px 2px rgba(29,39,41,.06), 0 8px 24px rgba(29,39,41,.06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141a1b; --card: #1c2425; --ink: #eef1ef; --muted: #a9b4b3; --faint: #7d8988;
    --line: #2d3839; --accent: #6fbfa9; --accent-ink: #0f1716; --accent-soft: #1f3530;
    --gold: #e0b35f; --gold-soft: #33291a; --flash: #3b3418; --danger: #e58a7c;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
  }
}
:root[data-theme="dark"] {
  --bg: #141a1b; --card: #1c2425; --ink: #eef1ef; --muted: #a9b4b3; --faint: #7d8988;
  --line: #2d3839; --accent: #6fbfa9; --accent-ink: #0f1716; --accent-soft: #1f3530;
  --gold: #e0b35f; --gold-soft: #33291a; --flash: #3b3418; --danger: #e58a7c;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font: 16px/1.55 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: "Source Serif 4", Georgia, serif; font-weight: 600; letter-spacing: -.01em; margin: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
.ico { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico.sm { width: 15px; height: 15px; }

/* shell */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); background: var(--card); position: sticky; top: 0; z-index: 20; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 600; }
.brand img { width: 26px; height: 26px; }
.stage-tag { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; min-width: 0; }
.stage-tag .bar { width: 120px; max-width: 30vw; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; flex: none; }
.stage-tag .bar i { display: block; height: 100%; background: var(--accent); transition: width .4s; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; max-width: 1180px; margin: 0 auto; padding: 28px 20px 120px; align-items: start; }
@media (max-width: 979px) { .layout { grid-template-columns: minmax(0, 1fr); padding: 20px 16px 110px; } }

/* card */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 28px; }
@media (max-width: 560px) { .card { padding: 20px 18px; border-radius: 14px; } }
.sec { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: .06em; }
.sec .of { color: var(--faint); font-weight: 500; text-transform: none; letter-spacing: 0; }
.q-title { font-size: clamp(22px, 3.2vw, 28px); line-height: 1.25; margin: 12px 0 6px; overflow-wrap: anywhere; }
.q-help { color: var(--muted); margin: 0 0 4px; font-size: 15px; }
.msg { display: flex; gap: 10px; align-items: flex-start; background: var(--accent-soft); border-radius: 12px; padding: 10px 12px; margin: 0 0 16px; font-size: 15px; }
.msg .ico { color: var(--accent); margin-top: 3px; }
.why-ai { display: flex; gap: 8px; align-items: flex-start; background: var(--gold-soft); border-radius: 10px; padding: 10px 12px; font-size: 14px; color: var(--ink); margin: 10px 0 0; }
.why-ai .ico { color: var(--gold); margin-top: 2px; }
.ai-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--gold-soft); color: var(--gold); border-radius: 999px; padding: 4px 10px; font-size: 12.5px; font-weight: 600; margin-left: 8px; }
.fields { display: grid; gap: 22px; margin-top: 22px; }
.fld > .fl-l { display: block; font-weight: 600; font-size: 16px; margin: 0 0 4px; overflow-wrap: anywhere; }
.fld > .fl-l .opt-tag { font-weight: 400; color: var(--faint); font-size: 13.5px; margin-left: 6px; }
.fld > .fl-h { color: var(--muted); font-size: 14px; margin: 0 0 10px; }
.answers { display: grid; gap: 10px; }
.answers.cols { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.opt { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left; background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: pointer; transition: border-color .15s, background .15s, transform .1s; }
.opt:hover { border-color: var(--accent); }
.opt:active { transform: scale(.99); }
.opt:focus-visible, .btn:focus-visible, .link:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, .chipbtn:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }
.opt .box { width: 20px; height: 20px; border: 1.5px solid var(--faint); border-radius: 6px; display: grid; place-items: center; flex: none; margin-top: 2px; color: transparent; }
.opt.radio .box { border-radius: 50%; }
.opt[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.opt[aria-pressed="true"] .box { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.opt .l { font-weight: 500; }
.opt .d { display: block; color: var(--muted); font-size: 14px; font-weight: 400; margin-top: 2px; }
.opt .tag { display: inline-block; margin-left: 6px; font-size: 11.5px; font-weight: 600; color: var(--gold); background: var(--gold-soft); border-radius: 999px; padding: 1px 8px; vertical-align: 1px; }
.opt .tag.seen { color: var(--muted); background: var(--bg); }
.opt.other .l .ico { color: var(--accent); vertical-align: -2px; margin-right: 6px; }
.other-box { margin-top: 10px; }
.other-box label { display: block; font-size: 14px; color: var(--muted); margin: 4px 0 6px; }
.field { width: 100%; background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 17px; }
.field:focus { border-color: var(--accent); outline: none; }
.field.bad { border-color: var(--danger); }
textarea.field { min-height: 110px; resize: vertical; line-height: 1.5; }
select.field { appearance: auto; }
.money { position: relative; max-width: 280px; }
.money span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.money .field { padding-left: 28px; }
.num-row { display: flex; align-items: center; gap: 12px; }
.num-row .field { flex: 0 1 200px; min-width: 0; }
.num-row .unit { color: var(--muted); font-size: 17px; }
.sugg { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chipbtn { background: var(--bg); border: 1.5px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 14px; cursor: pointer; }
.chipbtn:hover { border-color: var(--accent); }
.nav { display: flex; align-items: center; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.nav .spacer { flex: 1; }
.btn { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 12px; padding: 12px 18px; font-weight: 600; cursor: pointer; background: var(--accent); color: var(--accent-ink); text-decoration: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn.big { padding: 15px 22px; font-size: 17px; }
.link { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 8px 4px; text-decoration: underline; text-underline-offset: 3px; }
.err { color: var(--danger); font-size: 14px; margin-top: 8px; min-height: 1em; }
.fld .err { margin-top: 6px; min-height: 0; }
.fade-in { animation: fin .28s ease-out; }
@keyframes fin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fade-in, .flash { animation: none !important; } }
.review-note { display: flex; gap: 8px; align-items: center; background: var(--bg); border: 1px dashed var(--line); border-radius: 10px; padding: 8px 12px; font-size: 14px; color: var(--muted); margin-bottom: 14px; }

/* list + items */
.lrows { display: grid; gap: 8px; }
.lrow { display: flex; gap: 8px; align-items: center; }
.lrow .field { font-size: 16px; padding: 10px 12px; }
.iconbtn { background: none; border: 1.5px solid var(--line); border-radius: 10px; width: 42px; height: 42px; display: grid; place-items: center; cursor: pointer; color: var(--muted); flex: none; }
.iconbtn:hover { color: var(--danger); border-color: var(--danger); }
.addrow { margin-top: 10px; }
.irows { display: grid; gap: 12px; }
.irow { border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--card); }
.irow-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; font-size: 14px; color: var(--muted); margin-bottom: 6px; }
.igrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
@media (max-width: 560px) { .igrid { grid-template-columns: 1fr; } }
.igrid .full { grid-column: 1 / -1; }
.igrid label { display: block; font-size: 13.5px; color: var(--muted); margin: 0 0 4px; }
.igrid .field { font-size: 16px; padding: 10px 12px; }
.igrid textarea.field { min-height: 80px; }
.ph { display: flex; align-items: center; gap: 10px; }
.ph .thumb { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; background: var(--bg); border: 1px solid var(--line); flex: none; display: grid; place-items: center; color: var(--faint); overflow: hidden; }
.ph .thumb img { width: 100%; height: 100%; object-fit: cover; }
.ph .phs { font-size: 13.5px; color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.ph .phs .err { margin: 2px 0 0; }

/* hours + address */
.hmodes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.hmodes .opt { width: auto; padding: 8px 12px; }
.hgrid { display: grid; gap: 6px; }
.hrow { display: grid; grid-template-columns: 56px auto 1fr 1fr; gap: 8px 10px; align-items: center; font-size: 15px; }
.hrow .dn { font-weight: 600; }
.hrow label.cl { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; color: var(--muted); }
.hrow input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--accent); }
.hrow input[type=time] { border: 1.5px solid var(--line); background: var(--card); border-radius: 10px; padding: 7px 8px; font-size: 15px; min-width: 0; width: 100%; }
.hrow input[type=time]:disabled { opacity: .4; }
@media (max-width: 460px) { .hrow { grid-template-columns: 44px auto 1fr 1fr; gap: 6px; font-size: 14px; } }
.hcopy { margin-top: 8px; }
.agrid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px 12px; }
.agrid .full { grid-column: 1 / -1; }
.agrid label { display: block; font-size: 13.5px; color: var(--muted); margin: 0 0 4px; }
.agrid .field { font-size: 16px; padding: 10px 12px; }
@media (max-width: 560px) { .agrid { grid-template-columns: 1fr 1fr; } .agrid .c1 { grid-column: 1 / -1; } }

/* single color */
.cline { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.cpick { position: relative; display: inline-flex; flex: none; }
.cswatch { width: 48px; height: 42px; border-radius: 10px; border: 1.5px solid var(--line); padding: 0; cursor: pointer; background: var(--card); }
.cswatch.empty { border-style: dashed; border-color: var(--faint); background: linear-gradient(to top right, transparent calc(50% - 1px), var(--faint) calc(50% - 1px), var(--faint) calc(50% + 1px), transparent calc(50% + 1px)) var(--card); }
.cswatch:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }
.cnative { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; border: 0; padding: 0; }
.cline .hex { flex: 1 1 200px; max-width: 280px; min-width: 0; }
.cst { font-size: 14px; color: var(--muted); }
.hex { font: 15px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 10px; text-transform: lowercase; }
.hex::placeholder { font-family: Inter, system-ui, sans-serif; text-transform: none; }
.crow { padding: 12px 0; border-bottom: 1px solid var(--line); }
.crow > label { display: block; font-weight: 500; margin: 0 0 8px; }
.swatch-box { margin-top: 14px; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sw { width: 42px; height: 42px; border-radius: 10px; border: 2px solid var(--line); cursor: pointer; padding: 0; }
.sw:hover { transform: scale(1.06); }
.seg { display: inline-flex; border: 1.5px solid var(--line); border-radius: 10px; overflow: hidden; vertical-align: middle; }
.seg button { background: none; border: 0; padding: 6px 12px; font-size: 14px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.cprev { margin-top: 16px; border-radius: 12px; padding: 14px; border: 1px solid var(--line); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.cprev .pill { border-radius: 999px; padding: 8px 16px; font-weight: 600; font-size: 14px; }

/* uploads (photos + logo + files) */
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.slots.one { grid-template-columns: minmax(0, 320px); }
.slot { border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); display: flex; flex-direction: column; transition: border-color .15s, background .15s; }
.slot.has { border-color: var(--accent); }
.slot.drag { border-color: var(--accent); background: var(--accent-soft); }
.slot-media { aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--bg); color: var(--muted); cursor: pointer; font-size: 14px; text-align: center; padding: 8px; position: relative; overflow: hidden; }
.slot-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slot.logo .slot-media img { object-fit: contain; padding: 14px; background: #fff; }
.slot input.sr:focus-visible + .slot-media { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: -3px; }
.slot-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.slot-empty .ico { width: 26px; height: 26px; color: var(--accent); }
.slot-state { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--ink); }
.slot-foot { display: flex; align-items: center; gap: 4px; padding: 8px 10px; font-size: 14px; flex-wrap: wrap; }
.slot-l { font-weight: 500; flex: 1 1 100%; min-width: 0; overflow-wrap: anywhere; }
.slot-l .ok { color: var(--accent); vertical-align: -3px; margin-right: 4px; }
.mini { background: none; border: 0; color: var(--accent); font-weight: 600; font-size: 13.5px; cursor: pointer; padding: 3px 6px 3px 0; text-decoration: underline; text-underline-offset: 3px; }
.mini.rmv { color: var(--muted); }
.slot-err { color: var(--danger); font-size: 13px; padding: 0 10px 9px; }
.slot-err:empty { display: none; }
.slot.bad { border-color: var(--danger); }
.slot-cap { padding: 0 10px 10px; }
.slot-cap label { display: block; font-size: 12.5px; color: var(--muted); margin: 0 0 4px; }
.slot-cap .field { font-size: 16px; padding: 8px 10px; border-radius: 8px; min-width: 0; }
@media (max-width: 560px) { .slots:not(.one) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.drop { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 12px; padding: 22px 14px; border: 1.5px dashed var(--line); border-radius: 12px; background: var(--bg); color: var(--muted); text-align: center; cursor: pointer; font-size: 15px; transition: border-color .15s, background .15s; }
.drop .ico { width: 26px; height: 26px; color: var(--accent); }
.drop strong { color: var(--ink); font-weight: 600; }
.drop.drag, .drop:hover { border-color: var(--accent); background: var(--accent-soft); }
input.sr:focus-visible + .drop { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }
.drop.off { cursor: default; opacity: .6; }
.up-hint { color: var(--faint); font-size: 13px; margin-top: 10px; }
.ideas-l { font-size: 14px; color: var(--muted); margin: 0 0 10px; }
.ideas-l strong { color: var(--ink); }
.pnotes { margin-top: 18px; }
.pnotes label { display: block; font-weight: 500; margin: 0 0 6px; }
.pnotes textarea.field { min-height: 90px; font-size: 16px; }
.fchip { display: inline-flex; gap: 6px; align-items: center; background: var(--accent-soft); color: var(--ink); border-radius: 8px; padding: 6px 10px; font-size: 13px; max-width: 100%; }
.fchip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flist { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.flist:empty { display: none; }
.frow { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 12px; background: var(--card); font-size: 14px; }
.frow.has { border-color: var(--accent); }
.frow .ico { color: var(--accent); flex: none; }
.frow .fn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frow .fs { color: var(--faint); font-size: 13px; flex: none; }
.frow.bad { border-color: var(--danger); flex-wrap: wrap; }
.frow.bad .ico { color: var(--danger); }
.frow .fe { color: var(--danger); font-size: 13px; flex: 1 1 100%; }

/* additional sections */
.sx-list { display: grid; gap: 12px; }
.sx { border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 14px 14px; background: var(--card); min-width: 0; }
.sx-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sx-n { font-weight: 600; font-size: 14px; color: var(--muted); }
.sx label { display: block; font-size: 14px; color: var(--muted); margin: 10px 0 5px; }
.sx .field { font-size: 16px; padding: 11px 12px; }
.sx textarea.field { min-height: 90px; }
.sx-add { margin-top: 12px; }
.sx-full { color: var(--muted); font-size: 14px; margin: 12px 0 0; }
.note-box { background: var(--accent-soft); border-radius: 10px; padding: 10px 12px; font-size: 14px; margin-top: 12px; display: flex; gap: 10px; align-items: flex-start; }
.note-box .ico { color: var(--accent); margin-top: 2px; }
.note-box.warm { background: var(--gold-soft); }
.note-box.warm .ico { color: var(--gold); }
.note-box a { color: var(--ink); }
.rev { display: inline-block; font-size: 11.5px; font-weight: 600; color: var(--gold); background: var(--gold-soft); border-radius: 999px; padding: 1px 8px; vertical-align: 1px; white-space: nowrap; }

/* domain */
.dm-row { display: flex; gap: 8px; margin-top: 14px; }
.dm-row .field { flex: 1; min-width: 0; }
.dm-row .btn { min-width: 96px; justify-content: center; }
.dm-out { margin-top: 10px; font-size: 15px; display: flex; gap: 8px; align-items: flex-start; }
.dm-out:empty { display: none; }
.dm-out .ico { margin-top: 3px; }
.dm-out.ok .ico { color: var(--accent); }
.dm-out.no .ico, .dm-out.err .ico { color: var(--danger); }
.dm-out > span:not(.dots) { min-width: 0; overflow-wrap: anywhere; }
.sugs { display: grid; gap: 6px; margin-top: 8px; }
.sug { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--card); border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 12px; cursor: pointer; font-size: 15px; }
.sug:hover { border-color: var(--accent); }
.sug small { color: var(--accent); font-weight: 600; font-size: 13px; }
.sug span { min-width: 0; overflow-wrap: anywhere; }

/* intro, thinking, waiting */
.intro h1 { font-size: clamp(28px, 4.4vw, 40px); line-height: 1.15; }
.intro p { color: var(--muted); font-size: 17px; max-width: 58ch; }
.intro ul { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.intro li { display: flex; gap: 10px; align-items: flex-start; }
.intro li .ico { color: var(--accent); margin-top: 3px; }
.save-note { margin-top: 18px; max-width: 58ch; font-size: 14px; color: var(--ink); }
.thinking { display: flex; align-items: center; gap: 14px; color: var(--muted); }
.thinking strong { color: var(--ink); }
.dots { display: inline-flex; gap: 5px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: dot 1s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dots i { animation: none; opacity: .7; } }
.think-steps { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; font-size: 14.5px; color: var(--muted); }
.think-steps li { display: flex; gap: 8px; align-items: center; }
.think-steps li .ico { color: var(--accent); }
.think-steps li.now { color: var(--ink); font-weight: 500; }

/* blueprint */
.bp { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow: auto; padding: 22px; }
.bp h2 { font-size: 20px; display: flex; align-items: center; gap: 8px; }
.bp .sub { color: var(--muted); font-size: 14px; margin: 4px 0 0; }
.bp-group { margin-top: 20px; }
.bp-group h3 { font: 600 12.5px/1 Inter, sans-serif; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); margin-bottom: 10px; display: flex; align-items: center; gap: 7px; }
.bp-group h3 .n { background: var(--line); color: var(--muted); border-radius: 999px; padding: 2px 7px; font-size: 11px; letter-spacing: 0; }
.rs { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-top: 14px; font-size: 14px; }
.rs .rs-h { display: flex; gap: 8px; align-items: flex-start; font-weight: 500; }
.rs .rs-h .ico { color: var(--accent); margin-top: 2px; }
.rs details { margin-top: 8px; }
.rs summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 13.5px; }
.rs ul { margin: 8px 0 0; padding-left: 18px; color: var(--muted); }
.rs li { margin: 3px 0; overflow-wrap: anywhere; }
.rs a { color: var(--ink); }
.rs li a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.item { padding: 9px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.item:first-of-type { border-top: 0; }
.item .t { font-weight: 500; display: flex; gap: 8px; align-items: flex-start; }
.item .t .ico { color: var(--accent); margin-top: 3px; }
.item .t > span { min-width: 0; overflow-wrap: anywhere; }
.item .w { color: var(--muted); font-size: 13px; margin: 2px 0 0 23px; }
.item.sug .t { color: var(--muted); }
.item.sug .t .ico { color: var(--gold); }
.pill-s { font-size: 11px; font-weight: 600; color: var(--gold); background: var(--gold-soft); border-radius: 999px; padding: 1px 7px; margin-left: auto; align-self: center; white-space: nowrap; }
.meter { display: inline-block; width: 44px; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; vertical-align: middle; margin-right: 6px; }
.meter i { display: block; height: 100%; background: var(--accent); }
.declined { color: var(--faint); font-size: 13.5px; margin-top: 8px; }
.note-l { font-size: 14px; padding: 6px 0; border-top: 1px solid var(--line); color: var(--ink); }
.note-l:first-of-type { border-top: 0; }
.empty { color: var(--faint); font-size: 14px; font-style: italic; }
.bp-toggle { display: none; }
@media (max-width: 979px) {
  .bp { position: fixed; left: 0; right: 0; bottom: 0; top: auto; max-height: 78vh; border-radius: 16px 16px 0 0; z-index: 40; transform: translateY(105%); transition: transform .28s ease; box-shadow: 0 -8px 30px rgba(0,0,0,.18); padding-bottom: 88px; }
  .bp.open { transform: none; }
  .bp-toggle { display: inline-flex; position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 50; box-shadow: var(--shadow); white-space: nowrap; }
}

/* plan (final) */
.spec h1 { font-size: clamp(26px, 4vw, 36px); }
.spec h2 { font-size: 20px; margin: 26px 0 10px; display: flex; align-items: center; gap: 8px; }
.spec h2 .ico { color: var(--accent); }
.spec h3 { font-size: 17px; margin: 18px 0 6px; }
.spec dl { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 6px 14px; margin: 0; font-size: 15px; }
.spec dt { color: var(--muted); }
.spec dd { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
@media (max-width: 560px) { .spec dl { grid-template-columns: 1fr; } .spec dd { margin-bottom: 8px; } }
.spec ol, .spec ul.plain { margin: 0; padding-left: 20px; }
.spec ol li, .spec ul.plain li { margin: 4px 0; overflow-wrap: anywhere; }
.spec li span.m { color: var(--muted); font-size: 14px; }
.sx-desc { white-space: pre-line; overflow-wrap: anywhere; color: var(--muted); font-size: 14px; margin-top: 2px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.price-line { background: var(--accent-soft); border-radius: 12px; padding: 12px 14px; margin-top: 26px; font-size: 15px; display: flex; gap: 10px; align-items: flex-start; }
.price-line .ico { color: var(--accent); margin-top: 3px; }

/* checkout */
.co h2 { font-size: 19px; margin: 26px 0 10px; display: flex; align-items: center; gap: 8px; }
.co h2 .ico { color: var(--accent); }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
@media (max-width: 560px) { .plans { grid-template-columns: 1fr; } }
.sum { border: 1px solid var(--line); border-radius: 12px; padding: 4px 14px; margin-top: 14px; background: var(--bg); }
.sum .r { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.sum .r:last-child { border-bottom: 0; }
.sum .r span:last-child { text-align: right; }
.sum .r span:first-child { min-width: 0; overflow-wrap: anywhere; }
.sum .r .m { color: var(--muted); font-size: 13.5px; display: block; }
.sum .tot { font-weight: 600; font-size: 17px; }
.form2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .form2 { grid-template-columns: 1fr; } }
.fl label { display: block; font-size: 14px; color: var(--muted); margin: 0 0 5px; }
.fl .field { font-size: 16px; padding: 11px 12px; }
.fl.full { grid-column: 1 / -1; }
.or { display: flex; align-items: center; gap: 10px; color: var(--faint); font-size: 13px; margin: 14px 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.signed { display: flex; gap: 10px; align-items: center; background: var(--accent-soft); border-radius: 10px; padding: 10px 12px; font-size: 15px; }
.signed .ico { color: var(--accent); }
.tos { font-size: 13.5px; color: var(--muted); margin-top: 16px; }
.tos a { color: var(--ink); }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }
.toast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 10px; font-size: 14px; z-index: 60; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.flash { animation: flash 1.6s ease-out; border-radius: 8px; }
@keyframes flash { 0% { background: var(--flash); } 100% { background: transparent; } }

/* save to a login: the header button, the dialog, saved plans */
.top-r { display: flex; align-items: center; gap: 14px; min-width: 0; }
#topActs { display: flex; align-items: center; gap: 8px; }
/* The "Ask a question" honeypot: off screen, never focused; only a form-filling bot types in it. */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.topbtn { display: inline-flex; align-items: center; gap: 7px; background: transparent; color: var(--ink); border: 1.5px solid var(--line); border-radius: 10px; padding: 7px 12px; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.topbtn:hover { border-color: var(--accent); }
.topbtn .ico { color: var(--accent); }
.topbtn.saved { background: var(--accent-soft); border-color: transparent; }
.topbtn:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }
@media (max-width: 560px) { .top { padding: 12px 16px; } .topbtn { padding: 8px 10px; } .topbtn .lbl { display: none; } .stage-tag .bar { width: 72px; } }
@media (max-width: 400px) { .stage-tag > span:first-child { display: none; } }
.modal-back { position: fixed; inset: 0; z-index: 80; background: rgba(15, 20, 21, .45); display: grid; place-items: center; padding: 16px; overflow-y: auto; }
.modal { position: relative; width: min(480px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; }
.md-x { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; }
.md-x:hover { color: var(--ink); border-color: var(--accent); }
.md-title { font-size: 24px; line-height: 1.25; margin: 10px 44px 8px 0; overflow-wrap: anywhere; }
.modal .fl { margin-top: 12px; }
.modal .q-help strong { color: var(--ink); overflow-wrap: anywhere; }
.modal .hint { color: var(--faint); font-size: 13.5px; margin: 6px 0 0; }
.modal .nav { margin-top: 20px; }
.modal .gbox { max-width: 400px; min-height: 44px; margin-top: 16px; }
.intro .reopen { margin: 14px 0 0; font-size: 15px; color: var(--muted); }
.intro .reopen .link { padding: 0; }
.plans-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.plans-list li { display: flex; align-items: center; gap: 12px; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.plans-list li.here { border-color: var(--accent); }
.plans-list .pl { flex: 1; min-width: 0; }
.plans-list .pl-t { font-weight: 600; overflow-wrap: anywhere; }
.plans-list .pl-m { color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.plans-list .btn { padding: 9px 14px; flex: none; }
#rcCodeBox { color: #1d2729; }
.fl-pre { display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: 13.5px; margin: 6px 0 0; }
.fl-pre .ico { color: var(--accent); }
/* the running total (plan panel) */
.tot-r { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 5px 0; border-top: 1px solid var(--line); }
.tot-r:first-of-type { border-top: 0; }
.tot-r span:first-child { min-width: 0; overflow-wrap: anywhere; color: var(--muted); }
.tot-r b { color: var(--ink); }
.tot-m { color: var(--muted); font-size: 13px; margin: 6px 0 0; }