/* ============================================================================
   Dough Proposal Tool — styles
   Two layers:
     1. The WORKSPACE chrome (quiet, functional): cream ground, forest accents.
     2. The PROPOSAL document (the star): forest/gold letterhead, letter-sized,
        prints to a single page.
   ========================================================================== */

:root {
  /* palette — locked Dough brand colors (see brand sheet) */
  --forest:       #1A3A0A;  /* Forest — primary accent / buttons */
  --forest-2:     #2D5B14;  /* Moss — focus, hover */
  --forest-tint:  #E8EDD9;  /* Pale Sage — tint panels */
  --midnight:     #0D1F08;  /* Midnight — headings, dark bands */
  --gold:         #C8D430;  /* Gold-Green — hero accent */
  --gold-2:       #7A8217;  /* Olive — accent text on light gnd */
  --sage:         #6A8E3F;  /* Sage — supporting */
  --ink:          #1E3D0E;  /* Deep Forest — body text */
  --muted:        #67715C;  /* quiet olive-gray (derived) */
  --paper:        #FFFFFF;  /* Paper — card/page */
  --cream:        #F7F6F0;  /* Bone — workspace ground */
  --rule:         rgba(13,31,8,.14);
  --rule-strong:  rgba(13,31,8,.30);
  --good:         #6A8E3F;  /* Sage */
  --better:       #2D5B14;  /* Moss */
  --best:         #C8D430;  /* Gold-Green (midnight text) */

  /* type */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body:    "Geist", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --mono:    "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* letter page in px @96dpi */
  --page-w: 816px;
  --page-h: 1056px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- workspace */
.app {
  display: grid;
  grid-template-columns: clamp(340px, 32vw, 460px) 1fr;
  height: 100vh;
  overflow: hidden;
}

.panel {
  background: var(--paper);
  border-right: 1px solid var(--rule);
  overflow-y: auto;
  padding: 0 0 40px;
}

.panel__head {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--midnight);
  color: #fff;
  padding: 18px 22px 16px;
}
.brandmark {
  font-family: var(--display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.brandmark .dot { color: var(--gold); }
.brandlogo { height: 22px; width: auto; display: block; }
.panel__head p {
  margin: 6px 0 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.66);
}

fieldset {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
  padding: 20px 22px 6px;
}
fieldset:first-of-type { border-top: 0; }
legend {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-2);
  padding: 0;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
legend .num {
  width: 18px; height: 18px;
  display: inline-grid; place-items: center;
  background: var(--forest-tint);
  color: var(--forest);
  border-radius: 50%;
  font-size: 10px;
}
legend .num.done { background: var(--gold); color: var(--midnight); font-weight: 700; }

.field { margin: 12px 0; }
.field > label {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  margin-bottom: 5px;
  color: var(--ink);
}
.field .hint {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.35;
}
/* field rows: columns WRAP when the panel narrows instead of squeezing;
   align-items:end keeps inputs on one line even when a label wraps above */
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 12px; align-items: end; }
.row-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px 12px; align-items: end; }
/* grid children default to min-width:auto — inputs must shrink, never overflow */
.row > *, .row-3 > *, .field, .field input, .field select { min-width: 0; max-width: 100%; }
.row .field, .row-3 .field { margin: 6px 0; }
fieldset { min-width: 0; }

input[type=text], input[type=number], input:not([type]), select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--rule-strong);
  border-radius: 7px;
  font-family: var(--body);
  font-size: 13.5px;
  color: var(--ink);
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
input[inputmode=decimal], input[type=number] { font-family: var(--mono); }
input[type=range] { accent-color: var(--forest-2); }
input:focus, select:focus {
  outline: none;
  border-color: var(--forest-2);
  box-shadow: 0 0 0 3px rgba(28,81,64,.14);
}

.derived {
  background: var(--forest-tint);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 12px 0 2px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
}
.derived div { display: flex; justify-content: space-between; align-items: baseline; }
.derived .k { font-size: 11px; color: var(--muted); }
.derived .v { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--forest); }

.toggle { display: flex; align-items: center; gap: 9px; margin: 10px 0; cursor: pointer; }
.toggle input { width: 16px; height: 16px; accent-color: var(--forest-2); }
.toggle span { font-size: 13px; }

/* hover tooltips — agent guidance on every input */
.tip {
  position: relative;
  display: inline-grid; place-items: center;
  width: 14px; height: 14px; margin-left: 6px;
  border-radius: 50%;
  background: var(--forest-tint); color: var(--forest);
  font-size: 9.5px; font-weight: 700; font-family: var(--body);
  cursor: help; vertical-align: 1px; flex: none;
  text-transform: none; letter-spacing: 0;
}
.tip::after {
  content: attr(data-tip);
  position: absolute; z-index: 60;
  left: 50%; bottom: 135%; transform: translateX(-58%);
  width: 240px;
  background: var(--midnight); color: #fff;
  font-size: 11px; font-weight: 400; line-height: 1.45; text-align: left;
  padding: 8px 10px; border-radius: 8px;
  box-shadow: 0 6px 18px rgba(13,31,8,.25);
  opacity: 0; pointer-events: none; transition: opacity .12s;
}
.tip:hover::after, .tip:focus::after { opacity: 1; }
.ptype__opt .tip { margin-left: auto; }

/* agent guide */
details.guide {
  margin: 10px 22px; border: 1px solid var(--gold); border-radius: 10px;
  background: rgba(200,212,48,.10); padding: 0 12px;
}
details.guide summary {
  cursor: pointer; padding: 10px 0; font-size: 12.5px; font-weight: 700; color: var(--midnight);
}
details.guide[open] summary { border-bottom: 1px solid rgba(200,212,48,.6); }
details.guide ol { margin: 8px 0 10px; padding-left: 18px; }
details.guide li { font-size: 11.5px; line-height: 1.45; margin: 4px 0; color: var(--ink); }
.guide__t { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-2); margin: 8px 0 5px; }
.guide__row { display: grid; grid-template-columns: 118px 1fr; gap: 8px; font-size: 11px; line-height: 1.4; margin: 3px 0; }
.guide__row b { color: var(--forest); }
.guide__row span { color: var(--muted); }
.guide__note { font-size: 10.5px; color: var(--gold-2); font-style: italic; margin: 9px 0 10px; }

/* pre-flight chips (stage bar) */
.preflight { display: flex; gap: 5px; align-self: center; }
.pf {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .04em;
  border-radius: 999px; padding: 5px 9px; cursor: help;
}
.pf--ok { background: var(--forest-tint); color: var(--forest); border: 1px solid rgba(45,91,20,.35); }
.pf--warn { background: #FBEFEA; color: #8C2B1E; border: 1px solid #C96A4A; }

/* self-test overlay (?selftest=1) */
.selftest {
  position: fixed; right: 16px; bottom: 16px; z-index: 200;
  width: 380px; max-height: 72vh; overflow-y: auto;
  background: var(--midnight); color: rgba(255,255,255,.85);
  border: 2px solid var(--gold); border-radius: 12px;
  font-family: var(--mono); font-size: 10px; line-height: 1.5;
  padding: 10px 12px 12px; box-shadow: 0 12px 40px rgba(13,31,8,.4);
}
.selftest__head { font-size: 12px; font-weight: 700; color: var(--gold); margin-bottom: 7px; }
.selftest__head.bad { color: #FF8A70; }
.selftest .ok { color: rgba(255,255,255,.8); }
.selftest .bad { color: #FF8A70; font-weight: 700; }
.selftest small { color: rgba(255,255,255,.5); }
.selftest button {
  margin-top: 9px; border: 0; cursor: pointer; border-radius: 7px;
  background: var(--gold); color: var(--midnight); font-weight: 700; padding: 6px 12px;
}
@media print { .selftest { display: none !important; } }

/* mobile heads-up banner */
.mobilenote {
  position: sticky; top: 0; z-index: 90;
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
  background: var(--midnight); color: rgba(255,255,255,.92);
  border-bottom: 2px solid var(--gold);
  padding: 10px 14px; font-size: 12.5px; line-height: 1.4;
}
.mobilenote b { color: var(--gold); }
.mobilenote button {
  flex: none; border: 0; cursor: pointer;
  background: var(--gold); color: var(--midnight);
  font-weight: 700; font-size: 12px; border-radius: 999px; padding: 7px 14px;
}
@media print { .mobilenote { display: none !important; } }

/* proposal-type picker */
.ptype { display: grid; gap: 4px; }
.ptype__opt {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--rule); border-radius: 8px;
  padding: 7px 10px; cursor: pointer; font-size: 12.5px;
  transition: background .12s, border-color .12s;
}
.ptype__opt small { color: var(--muted); font-size: 11px; }
.ptype__opt input { accent-color: var(--forest-2); }
.ptype__opt:has(input:checked) { background: var(--forest-tint); border-color: var(--forest-2); }

/* pricing group labels */
.grouplbl {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--forest); margin: 12px 0 2px; padding-top: 8px; border-top: 1px dashed var(--rule);
}
.grouplbl:first-of-type { border-top: 0; padding-top: 0; margin-top: 6px; }

/* statement uploader */
.uploader { border: 1.5px dashed var(--rule-strong); border-radius: 9px; padding: 10px 12px; margin: 4px 0 12px; background: var(--forest-tint); transition: border-color .12s, background .12s, box-shadow .12s; }
.uploader.drag { border-color: var(--gold-2); background: rgba(200,212,48,.22); box-shadow: 0 0 0 3px rgba(200,212,48,.25); }
.uploader--off .btnfile { background: var(--muted); cursor: not-allowed; }
.uploader--off { background: rgba(13,31,8,.04); }
.btnfile {
  display: inline-block; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: #fff;
  background: var(--forest); border-radius: 7px; padding: 8px 12px;
}
.btnfile input { display: none; }
.btnmini {
  margin-left: 8px; cursor: pointer; font-size: 12px; font-weight: 600;
  color: var(--midnight); background: var(--gold); border: 0; border-radius: 7px; padding: 8px 12px;
}
.evidence { font-family: var(--mono); font-size: 10px; color: var(--muted); margin-top: 6px; line-height: 1.5; }
.evidence b { color: var(--ink); }
.evidence .junkline { color: #7A5410; background: #FCF4E3; border: 1px solid #E8D5A8; border-radius: 6px; padding: 5px 8px; margin: 4px 0 6px; font-family: var(--body); font-size: 11px; }

/* AI "confirm a few things" panel — shown when figures were computed or missing */
.confirm { margin: 8px 0 4px; padding: 10px 12px; background: #F3F8F2; border: 1px solid #CDE3CC; border-radius: 8px; font-family: var(--body); }
.confirm .confirmhead { font-size: 12px; color: var(--ink); margin-bottom: 8px; line-height: 1.5; }
.confirm .readback { display: inline-block; margin-top: 2px; color: var(--forest); font-size: 11px; }
.confirm .qrow { margin: 6px 0; padding-top: 6px; border-top: 1px dashed #D6E6D5; }
.confirm .qrow:first-of-type { border-top: none; padding-top: 0; }
.confirm .qlabel { font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.confirm .qhelp { font-size: 10.5px; color: var(--muted); margin-bottom: 5px; line-height: 1.4; }
.confirm .qinput { width: 170px; max-width: 100%; padding: 5px 7px; border: 1px solid #C4D8C3; border-radius: 6px; font-family: var(--mono); font-size: 12px; }
.confirm .qopts { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.confirm .qopt { font-size: 11.5px; color: var(--ink); display: inline-flex; align-items: center; gap: 4px; }
.confirm .qcustom { width: 74px; padding: 3px 5px; border: 1px solid #C4D8C3; border-radius: 5px; font-family: var(--mono); font-size: 11px; }
.confirm #btnUseFigures { margin-top: 10px; }

.usage { font-family: var(--mono); font-size: 10px; color: var(--muted); margin-top: 6px; letter-spacing: .02em; }
.usage b { color: var(--ink); font-weight: 600; }
.usage.usage--cap { color: #7A5410; background: #FCF4E3; border: 1px solid #E8D5A8; border-radius: 6px; padding: 4px 8px; font-family: var(--body); font-size: 11px; }

.seg { display: flex; gap: 0; border: 1px solid var(--rule-strong); border-radius: 8px; overflow: hidden; }
.seg label {
  flex: 1; text-align: center; padding: 8px 6px; font-size: 12.5px; cursor: pointer;
  background: #fff; color: var(--muted); transition: background .12s, color .12s;
}
.seg label:has(input:checked) { background: var(--forest); color: #fff; font-weight: 500; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }

details.advanced { margin: 10px 0; border: 1px dashed var(--rule-strong); border-radius: 8px; padding: 0 12px; }
details.advanced summary {
  cursor: pointer; padding: 10px 0; font-size: 12px; font-weight: 500; color: var(--forest);
  font-family: var(--mono); letter-spacing: .04em;
}
details.advanced[open] summary { border-bottom: 1px solid var(--rule); margin-bottom: 8px; }
.ic-grid { display: grid; grid-template-columns: minmax(90px, 1.3fr) 1fr 1fr; gap: 6px 10px; align-items: center; margin-bottom: 10px; }
.ic-grid label { min-width: 0; }
.ic-grid .h { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.ic-grid label { font-size: 12px; }
.ic-grid input { padding: 6px 8px; font-size: 12px; width: 100%; min-width: 0; }

/* ---------------------------------------------------------------- preview */
.stage {
  overflow: auto;
  padding: 34px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.stage__inner { transform-origin: top center; }

.stage__bar {
  position: fixed;
  top: 20px; right: 34px;
  display: flex; gap: 8px; z-index: 20;
  flex-wrap: wrap; justify-content: flex-end;
  max-width: min(620px, calc(100vw - 380px));
}
.btn {
  font-family: var(--body);
  font-size: 13px; font-weight: 500;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid var(--forest);
  background: var(--forest); color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(18,58,44,.18);
}
.btn.secondary { background: #fff; color: var(--forest); }
.btn:hover { filter: brightness(1.06); }

/* live one-page fit indicator */
.fitbadge {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em;
  color: var(--forest); background: #fff;
  border: 1px solid var(--rule-strong); border-radius: 8px;
  padding: 9px 12px; align-self: center;
}
.fitbadge.over { color: #8C2B1E; border-color: #C96A4A; background: #FBEFEA; font-weight: 600; }

/* rep-facing sanity flags */
.sanity { display: grid; gap: 4px; margin: 8px 0 4px; }
.sanity:empty { display: none; }
.sanity div {
  font-size: 11px; line-height: 1.4; color: #7A5410;
  background: #FCF4E3; border: 1px solid #E8D5A8; border-radius: 6px; padding: 6px 9px;
}
.sanity div.crit {
  color: #8C2B1E; background: #FBE9E7; border-color: #C96A4A; font-weight: 600;
}

/* ---------------------------------------------------------------- PROPOSAL */
.page {
  width: var(--page-w);
  min-height: var(--page-h);
  background: var(--cream); /* Bone ground, white cards — like shipped proposals */
  color: var(--ink);
  box-shadow: 0 10px 40px rgba(0,0,0,.14);
  display: flex;
  flex-direction: column;
}
.page__body { padding: 0 30px 11px; flex: 1; display: flex; flex-direction: column; }

/* ---- header stack: letterhead band ---- */
.ph {
  background: var(--forest);
  color: #fff;
  padding: 16px 30px 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.ph__logo { height: 26px; width: auto; display: block; }
.ph__title {
  font-family: var(--display); font-size: 26px; font-weight: 600; letter-spacing: -.01em;
  color: #fff; margin-top: 8px; line-height: 1;
}
.ph__title .dot, .ph__title .gold { color: var(--gold); }
.ph__eyebrow {
  font-family: var(--mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin-top: 7px;
}
.ph__meta { text-align: right; font-family: var(--mono); font-size: 9.5px; line-height: 1.6; color: rgba(255,255,255,.8); }
.ph__meta .nm { color: #fff; font-weight: 600; font-size: 12.5px; font-family: var(--display); }
.ph__meta .k, .phx .k { font-family: var(--mono); font-size: 8px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }

/* ---- header stack: prepared-for band ---- */
.phx {
  background: var(--midnight);
  color: rgba(255,255,255,.75);
  padding: 8px 30px 9px;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 18px;
  font-family: var(--mono); font-size: 9.5px; line-height: 1.55;
}
.phx .nm { color: #fff; font-weight: 600; font-family: var(--display); font-size: 13px; line-height: 1.2; }
.phx .nm--lg { font-size: 17px; }
.phx__right { text-align: right; }

/* ---- header stack: stats band ---- */
.stats {
  background: var(--midnight);
  border-top: 1px solid rgba(255,255,255,.14);
  color: #fff;
  padding: 7px 30px 10px;
}
.stats__eyebrow { font-family: var(--mono); font-size: 8px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 6px; }
.stats__grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr .85fr .95fr; gap: 10px; }
.stats .k { font-family: var(--mono); font-size: 7.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.stats .v { font-family: var(--display); font-size: 14.5px; font-weight: 600; margin-top: 2px; }
.stats .v--gold { color: var(--gold); }

/* ---- centered headline ---- */
.headline { text-align: center; margin: 9px 0 7px; }
.headline__t { font-family: var(--display); font-size: 20px; font-weight: 700; color: var(--midnight); letter-spacing: -.01em; }
.headline__t .mark { background: linear-gradient(transparent 62%, rgba(200,212,48,.75) 62%); padding: 0 2px; }
.headline__s { font-size: 10px; color: var(--muted); margin-top: 3px; }
.headline__s b { color: var(--ink); }

/* ---- card line items (shared: tiers + single) ---- */
.cl { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--rule); }
/* screen-only: dotted underline invites hovering for the formula behind a line */
@media screen {
  .cl--calc .cl__l b { border-bottom: 1px dotted rgba(122,130,23,.55); cursor: help; }
}
.cl:last-child { border-bottom: 0; }
.cl__l b { font-size: 9.5px; font-weight: 600; color: var(--midnight); display: block; line-height: 1.25; }
.cl__l small { font-size: 8px; color: var(--muted); line-height: 1.3; display: block; margin-top: 1px; }
.cl__amt { font-family: var(--mono); font-size: 9.5px; font-weight: 500; color: var(--ink); white-space: nowrap; }

.total {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  background: var(--forest-tint); border-radius: 7px; padding: 7px 10px; margin-top: 8px;
}
.total .k { font-family: var(--mono); font-size: 7.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); max-width: 8ch; line-height: 1.35; }
.total .amt { font-family: var(--display); font-size: 18px; font-weight: 700; color: var(--forest); }
.total .amt small { font-family: var(--mono); font-size: 9px; color: var(--muted); font-weight: 400; }
.total--best { background: var(--midnight); }
.total--best .k { color: rgba(255,255,255,.6); }
.total--best .amt { color: var(--gold); }
.total--best .amt small { color: rgba(255,255,255,.55); }

.annual { text-align: center; margin-top: 8px; }
.annual__amt { font-family: var(--display); font-size: 19px; font-weight: 700; color: var(--midnight); line-height: 1; }
.annual__lbl { font-family: var(--mono); font-size: 7.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 2px 0 4px; }
.pill {
  display: inline-block; font-size: 9.5px; font-weight: 700; color: #fff;
  background: var(--forest); border-radius: 999px; padding: 3px 10px;
}
.pill--gold { background: var(--gold); color: var(--midnight); }
.annual__back { font-size: 8.5px; color: var(--muted); margin-top: 4px; }

/* ---- option tiers (Good/Better/Best) ---- */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 3px 0 8px; }
.tier {
  background: var(--paper);
  border: 1px solid var(--rule); border-radius: 10px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 1px 4px rgba(13,31,8,.05);
}
.tier--best { border-color: var(--gold); box-shadow: 0 0 0 1.5px var(--gold), 0 1px 5px rgba(13,31,8,.08); }
.tier__head { padding: 8px 11px 9px; color: #fff; }
.tier--good .tier__head { background: var(--sage); }
.tier--better .tier__head { background: var(--forest); }
.tier--best .tier__head { background: var(--midnight); }
.tier__cap {
  font-family: var(--mono); font-size: 8px; letter-spacing: .16em; text-transform: uppercase;
  display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,.85);
}
.numchip {
  width: 13px; height: 13px; display: inline-grid; place-items: center;
  background: rgba(255,255,255,.92); color: var(--midnight);
  border-radius: 50%; font-size: 8px; font-weight: 700;
}
.tier__cap .rec { margin-left: auto; background: var(--gold); color: var(--midnight); border-radius: 999px; padding: 2px 7px; font-weight: 700; letter-spacing: .08em; }
.tier__prog { font-family: var(--display); font-size: 16.5px; font-weight: 600; margin-top: 5px; line-height: 1.05; }
.tier--best .tier__prog { color: var(--gold); }
.tier__tag { font-size: 8.5px; color: rgba(255,255,255,.75); margin-top: 3px; line-height: 1.3; }
.tier__body { padding: 8px 11px 11px; flex: 1; display: flex; flex-direction: column; }
.tier__stack { flex: 1; }

/* ---- annual savings at a glance ---- */
.glance { background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; padding: 6px 12px 7px; }
.glance__t { font-family: var(--display); font-size: 12.5px; font-weight: 700; color: var(--midnight); margin-bottom: 5px; }
.glance__t span { font-family: var(--body); font-size: 9px; font-weight: 400; color: var(--muted); }
.glance__row { display: grid; grid-template-columns: 132px 1fr; align-items: center; gap: 10px; margin: 2px 0; }
.glance__lbl { font-size: 9px; font-weight: 600; color: var(--ink); text-align: right; line-height: 1.15; }
.glance__track { background: rgba(13,31,8,.07); border-radius: 4px; height: 13px; overflow: hidden; }
.bar { height: 100%; border-radius: 4px; display: flex; align-items: center; justify-content: flex-end; padding: 0 6px; }
.bar span { font-family: var(--mono); font-size: 8.5px; font-weight: 600; color: #fff; }
.bar--sage { background: var(--sage); }
.bar--moss { background: var(--forest-2); }
.bar--midnight { background: var(--midnight); }
.bar--midnight span { color: var(--gold); }
.bar--none { background: transparent; color: var(--muted); font-size: 9px; padding-left: 6px; }
.glance__track { position: relative; }
.bar--today { background: var(--midnight); position: relative; overflow: hidden; }
.bar--today span { color: #fff; position: relative; }
.bar--dough { background: var(--gold); }
.bar--dough span { color: var(--midnight); }
.bar__junk {
  position: absolute; right: 0; top: 0; bottom: 0;
  background: repeating-linear-gradient(45deg, rgba(200,212,48,.85) 0 4px, rgba(200,212,48,.25) 4px 8px);
}
.glance__legend { font-size: 8.5px; color: var(--muted); margin-top: 5px; }
.glance__legend .swatch {
  display: inline-block; width: 10px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: -1px;
  background: repeating-linear-gradient(45deg, rgba(200,212,48,.85) 0 3px, rgba(200,212,48,.25) 3px 6px);
}

/* junk-fee callout — prints on the proposal when filled */
.junkcall {
  display: flex; gap: 9px; align-items: center;
  border: 1px solid #E8D5A8; background: #FCF4E3;
  border-radius: 9px; padding: 5px 11px; margin: 0 0 6px;
}
.junkcall__badge {
  font-family: var(--mono); font-size: 8px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #7A5410; background: #fff; border: 1px solid #E8D5A8; border-radius: 4px; padding: 3px 6px; white-space: nowrap;
}
.junkcall__txt { font-size: 9.5px; color: var(--ink); line-height: 1.35; }
.junkcall__txt b { color: #7A5410; }
.page--tight .junkcall { padding: 5px 10px; margin-bottom: 6px; }

/* ---- single-option ---- */
.single { display: grid; grid-template-columns: 1.12fr 1fr; gap: 12px; margin: 4px 0 10px; }
.scard { background: var(--paper); border: 1.5px solid var(--gold); border-radius: 10px; overflow: hidden; }
.scard__head { background: var(--midnight); color: #fff; padding: 10px 13px 12px; }
.scard__head .k { font-family: var(--mono); font-size: 8px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.scard__prog { font-family: var(--display); font-size: 21px; font-weight: 600; color: var(--gold); margin-top: 4px; }
.scard__tag { font-size: 9px; color: rgba(255,255,255,.75); margin-top: 2px; }
.scard__body { padding: 8px 13px 13px; }
.scard__body .cl__l b { font-size: 10.5px; }
.scard__body .cl__l small { font-size: 8.5px; }
.scard__body .cl__amt { font-size: 10.5px; }

.savecol { display: flex; flex-direction: column; gap: 10px; }
.savecard { background: var(--paper); border: 1.5px solid var(--gold); border-radius: 10px; padding: 14px; text-align: center; }
.savecard__amt { font-family: var(--display); font-size: 34px; font-weight: 700; color: var(--gold-2); line-height: 1; }
.savecard__lbl { font-family: var(--mono); font-size: 8px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin: 5px 0 7px; }
.compare { background: var(--midnight); border-radius: 10px; padding: 10px 13px; color: #fff; }
.compare__t { font-family: var(--mono); font-size: 8px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 5px; }
.compare__row { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,.7); padding: 2px 0; }
.compare__row b { font-weight: 600; color: rgba(255,255,255,.85); }
.compare__row--dough b { color: var(--gold); }
.single__note { font-size: 9.5px; color: var(--muted); line-height: 1.45; padding: 0 2px; }

/* ---- integration callout ---- */
.dcp {
  display: flex; gap: 9px; align-items: center;
  border: 1px solid rgba(200,212,48,.8); background: rgba(200,212,48,.14);
  border-radius: 9px; padding: 5px 11px; margin: 0 0 6px;
}
.dcp__badge { font-family: var(--mono); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-2); background: #fff; border: 1px solid var(--gold); border-radius: 4px; padding: 2px 6px; white-space: nowrap; }
.dcp__txt { font-size: 9.5px; color: var(--ink); line-height: 1.35; }
.dcp__txt b { color: var(--forest); }

/* CTA band — solid gold-green close, like shipped proposals */
.cta {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  background: var(--gold);
  border-radius: 10px; padding: 8px 14px; margin-top: 7px;
}
.cta__txt { font-size: 11.5px; font-weight: 600; line-height: 1.4; color: var(--midnight); }
.cta__txt b { font-weight: 800; }
.cta__call {
  font-family: var(--display); font-size: 12px; font-weight: 600;
  background: var(--midnight); color: #fff; border-radius: 8px;
  padding: 9px 15px; white-space: nowrap;
}

/* "Backed by Dough" guarantees strip */
.backed { background: var(--midnight); color: #fff; border-radius: 10px; padding: 7px 14px 8px; margin-top: 7px; }
.backed__cap { font-family: var(--mono); font-size: 8px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.backed__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 11px; }
.backed .h { font-size: 9px; font-weight: 700; color: #fff; margin-bottom: 2px; }
.backed .t { font-size: 7.8px; line-height: 1.35; color: rgba(255,255,255,.72); }

/* fine print / methodology footer */
.fine {
  margin-top: auto;
  border-top: 1px solid var(--rule);
  padding: 6px 0 0;
  color: var(--muted);
}
.fine__byline { font-size: 9.5px; color: var(--ink); margin-bottom: 3px; }
.fine__byline b { color: var(--midnight); }
.fine__body { font-size: 7.3px; line-height: 1.42; }
.fine__body b { color: var(--ink); }

/* ---- compact mode: applied automatically when content would overflow ---- */
.page--tight .page__body { padding: 0 28px 12px; }
.page--tight .ph { padding: 14px 28px 11px; }
.page--tight .ph__title { font-size: 24px; margin-top: 6px; }
.page--tight .phx { padding: 7px 28px 8px; }
.page--tight .stats { padding: 6px 28px 9px; }
.page--tight .stats .v { font-size: 14px; }
.page--tight .headline { margin: 10px 0 8px; }
.page--tight .headline__t { font-size: 18px; }
.page--tight .dcp { padding: 5px 10px; margin-bottom: 8px; }
.page--tight .tiers { gap: 8px; margin-bottom: 8px; }
.page--tight .tier__head { padding: 7px 10px 8px; }
.page--tight .tier__body { padding: 6px 10px 9px; }
.page--tight .cl { padding: 2px 0; }
.page--tight .cl__l small { font-size: 7.5px; }
.page--tight .total { padding: 4px 9px; margin-top: 5px; }
.page--tight .annual { margin-top: 6px; }
.page--tight .annual__amt { font-size: 19px; }
.page--tight .glance { padding: 7px 12px 9px; }
.page--tight .glance__track { height: 11px; }
.page--tight .glance { padding: 5px 11px 7px; }
.page--tight .glance__row { margin: 2px 0; }
.page--tight .junkcall, .page--tight .dcp { padding: 4px 10px; margin-bottom: 5px; }
.page--tight .stats .v { font-size: 13.5px; }
.page--tight .annual__amt { font-size: 18px; }
.page--tight .fine__body { font-size: 7px; line-height: 1.38; }
.page--tight .cta { padding: 8px 12px; margin-top: 8px; }
.page--tight .backed { padding: 7px 12px 8px; margin-top: 8px; }
.page--tight .backed .t { font-size: 7.4px; }
.page--tight .fine__body { font-size: 7.2px; line-height: 1.4; }

/* ---------------------------------------------------------------- print */
@page { size: letter; margin: 0; }
@media print {
  html, body { background: #fff; height: auto; overflow: visible; }
  .app { display: block; height: auto; overflow: visible; }
  .panel, .stage__bar { display: none !important; }
  .stage { overflow: visible; padding: 0; display: block; }
  .stage__inner { transform: none !important; }
  .page { box-shadow: none; width: 8.5in; min-height: 11in; }
  /* keep ALL brand backgrounds (letterhead, tier caps, save card, tints) in the PDF */
  .page, .page * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media (max-width: 1180px) {
  .app { grid-template-columns: 1fr; grid-template-rows: auto auto; height: auto; overflow: visible; }
  .panel { max-height: none; border-right: 0; border-bottom: 2px solid var(--rule-strong); }
  .stage { padding: 16px; }
  .stage__bar {
    position: sticky; top: 8px; right: auto; max-width: none;
    justify-content: flex-end; margin-bottom: 10px;
  }
  html, body { height: auto; overflow-x: hidden; }
}