/* GradeTheBid. Built on the Life First light brand kit: warm eggshell ground, near-black ink, and the
   green to cyan to blue gradient, with a matching dark mode. Display: Archivo. Body: Public Sans
   (the U.S. government's own web font, familiar to people who bid). */
:root {
  color-scheme: light;
  --paper: #F6F4EC;          /* eggshell ground */
  --white: #FBFAF3;          /* cards and panels */
  --well: #EFECE2;           /* insets inside cards */
  --hover: #F1EEE4;
  --line: #E1DDD0;
  --ink: #14181F;            /* headings and strong text */
  --body: #3E454E;           /* paragraphs */
  --slate: #5C6169;          /* labels and captions */
  --chip: #E9E6DB;
  --brass: #0A8F60;          /* the accent (green); name kept so old rules still work */
  --brass-soft: #DDEFE6;
  --brass-wash: #EEF6F0;
  --brass-line: #B9DCC9;
  --blue: #1560E0;
  --cyan: #0E9FBE;
  --grad: linear-gradient(100deg, #0B9A67 0%, #0E9FBE 46%, #1560E0 100%);
  --on-grad: #FFFFFF;
  --glow: rgba(14,159,190,.26);
  --glow-strong: rgba(14,159,190,.34);
  --glow-ring: rgba(14,159,190,.42);
  --glow-0: rgba(14,159,190,0);
  /* the dark blocks: top bar, grade card, featured plan */
  --block: #0B0F16;
  --block-2: #151B26;
  --block-line: #252E3D;
  --on-block: #E8EEF4;
  --on-block-soft: #A3AEBC;
  --accent-on-block: #34DFA0;
  --on-color: #FFFFFF;
  /* states */
  --info-bg: #E5EBF5; --info-line: #C7D2E6; --info-ink: #1F3B66;
  --ok-bg: #E0F0E6;   --ok-line: #BBDAC6;   --ok-ink: #1E5A36;
  --bad-bg: #F6E2DF;  --bad-line: #E6C0BB;  --bad-ink: #8A2620; --bad-wash: #FAF0EC;
  --warn-bg: #FAEDE5; --warn-line: #EFC3AE; --warn-ink: #93360F;
  --notice-bg: #ECE9DF;
  --need-bg: #DCEBFA; --need-ink: #0B4F75; --need-line: #6FB8E3; --need-wash: #EAF3FA; --need-line-soft: #C3DFF2;
  --input-bg: #FFFEFA; --input-line: #CCC7B8;
  --shadow: 0 1px 2px rgba(20,24,31,.05), 0 8px 24px rgba(20,24,31,.07);
  --shadow-lift: 0 2px 4px rgba(20,24,31,.08), 0 18px 40px rgba(20,24,31,.16);
  /* government adjectival ratings */
  --r-outstanding: #1F4E9C;
  --r-good: #5B3F8F;
  --r-acceptable: #2C7A49;
  --r-marginal: #C9571F;
  --r-unacceptable: #A3322B;
  --serif: "Archivo", "Arial Narrow", Arial, sans-serif;
  --sans: "Public Sans", -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  color-scheme: dark;
  --paper: #070A11; --white: #0E1420; --well: #131B29; --hover: #121A27; --line: #1F2939;
  --ink: #EAF2F8; --body: #C3CDD8; --slate: #8F9DAE; --chip: #18212F;
  --brass: #31D99A; --brass-soft: #10291F; --brass-wash: #0C1F18; --brass-line: #1E4A37;
  --blue: #2E8BFF; --cyan: #13DDE6;
  --grad: linear-gradient(100deg, #20E098 0%, #12C6D6 50%, #2E8BFF 100%);
  --on-grad: #04120C; --glow: rgba(18,198,214,.22); --glow-strong: rgba(18,198,214,.32); --glow-ring: rgba(18,198,214,.40); --glow-0: rgba(18,198,214,0);
  --block: #0B111C; --block-2: #131C2A; --block-line: #223047; --on-block: #EAF2F8; --on-block-soft: #9AA8B8; --accent-on-block: #31E8A3;
  --info-bg: #111E33; --info-line: #233A5C; --info-ink: #A9C6F5;
  --ok-bg: #0F271C; --ok-line: #1F4A35; --ok-ink: #7FE0AE;
  --bad-bg: #2C1517; --bad-line: #5A2A2A; --bad-ink: #FF9A92; --bad-wash: #1E1114;
  --warn-bg: #2B1A10; --warn-line: #5A3520; --warn-ink: #FFB38A;
  --notice-bg: #131B29;
  --need-bg: #0F2A40; --need-ink: #9AD7FF; --need-line: #2E7FB5; --need-wash: #0D1E2E; --need-line-soft: #1E4565;
  --input-bg: #0B111B; --input-line: #2A3647;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --shadow-lift: 0 2px 4px rgba(0,0,0,.5), 0 18px 40px rgba(0,0,0,.5);
  --r-outstanding: #3D7BE0; --r-good: #8A6BD1; --r-acceptable: #2E9E5E; --r-marginal: #E07A3F; --r-unacceptable: #D9534A;
} }
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #070A11; --white: #0E1420; --well: #131B29; --hover: #121A27; --line: #1F2939;
  --ink: #EAF2F8; --body: #C3CDD8; --slate: #8F9DAE; --chip: #18212F;
  --brass: #31D99A; --brass-soft: #10291F; --brass-wash: #0C1F18; --brass-line: #1E4A37;
  --blue: #2E8BFF; --cyan: #13DDE6;
  --grad: linear-gradient(100deg, #20E098 0%, #12C6D6 50%, #2E8BFF 100%);
  --on-grad: #04120C; --glow: rgba(18,198,214,.22); --glow-strong: rgba(18,198,214,.32); --glow-ring: rgba(18,198,214,.40); --glow-0: rgba(18,198,214,0);
  --block: #0B111C; --block-2: #131C2A; --block-line: #223047; --on-block: #EAF2F8; --on-block-soft: #9AA8B8; --accent-on-block: #31E8A3;
  --info-bg: #111E33; --info-line: #233A5C; --info-ink: #A9C6F5;
  --ok-bg: #0F271C; --ok-line: #1F4A35; --ok-ink: #7FE0AE;
  --bad-bg: #2C1517; --bad-line: #5A2A2A; --bad-ink: #FF9A92; --bad-wash: #1E1114;
  --warn-bg: #2B1A10; --warn-line: #5A3520; --warn-ink: #FFB38A;
  --notice-bg: #131B29;
  --need-bg: #0F2A40; --need-ink: #9AD7FF; --need-line: #2E7FB5; --need-wash: #0D1E2E; --need-line-soft: #1E4565;
  --input-bg: #0B111B; --input-line: #2A3647;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --shadow-lift: 0 2px 4px rgba(0,0,0,.5), 0 18px 40px rgba(0,0,0,.5);
  --r-outstanding: #3D7BE0; --r-good: #8A6BD1; --r-acceptable: #2E9E5E; --r-marginal: #E07A3F; --r-unacceptable: #D9534A;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.55 var(--sans); }
a { color: var(--ink); text-decoration-color: var(--brass); text-underline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--serif); line-height: 1.15; margin: 0 0 .4em; letter-spacing: -.01em; }
h1 { font-size: clamp(30px, 4.4vw, 50px); font-weight: 700; margin-top: .4em; }
h2 { font-size: clamp(21px, 2.4vw, 27px); font-weight: 600; margin-top: .2em; }
h3 { font-size: 21px; margin-top: 1.2em; }
h4 { font-family: var(--sans); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--slate); margin: 1.2em 0 .5em; }
p { margin: 0 0 .8em; }
code { background: var(--brass-soft); padding: 1px 5px; border-radius: 4px; font-size: .92em; }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding: 0 28px; } }
.muted { color: var(--slate); }
.small { font-size: 13.5px; }
.nowrap { white-space: nowrap; }
.eyebrow { font-size: 12.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--slate); font-weight: 600; margin: 0 0 .3em; }
.lede { font-size: 18px; color: var(--body); max-width: 760px; }
.row-gap { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.row-between { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 900px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.grid-2.tight { margin: 22px 0; }
.inline { display: inline-block; }

/* top bar */
.topbar { background: var(--block); color: var(--on-block); position: sticky; top: 0; z-index: 10; box-shadow: 0 1px 0 rgba(255,255,255,.06); }
.topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 62px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--on-block); text-decoration: none; }
.mark svg { width: 30px; height: 30px; display: block; }
.mark rect { fill: var(--block-2); }
.mark path { fill: none; stroke: var(--accent-on-block); stroke-width: 7.5; stroke-linecap: round; stroke-linejoin: round; }
.brand-name { font-family: var(--serif); font-weight: 700; font-size: 21px; letter-spacing: -.01em; }
.brand-tag { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--on-block-soft); border: 1px solid var(--block-line); padding: 1px 6px; border-radius: 99px; }
.nav { display: flex; align-items: center; gap: 4px 18px; flex-wrap: wrap; }
.nav a { color: var(--on-block); text-decoration: none; font-size: 14.5px; font-weight: 500; }
.nav a:hover { color: #FFFFFF; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; text-decoration: none;
  background: var(--grad); color: var(--on-grad); font: 600 15.5px/1 var(--sans); padding: 14px 22px; border-radius: 10px;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 6px 16px var(--glow); transition: transform .15s, box-shadow .15s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 10px 22px var(--glow-strong); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; animation: none; }
.btn-small { padding: 9px 14px; font-size: 14px; }
.nav .btn-small { color: var(--on-grad); }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink); }
.pulse { animation: pulse 2.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--glow-ring), 0 6px 16px var(--glow); } 50% { box-shadow: 0 0 0 10px var(--glow-0), 0 6px 16px var(--glow); } }
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } }

/* banners */
.banners { padding-top: 14px; }
.banner, .flash { border-radius: 10px; padding: 11px 14px; margin-bottom: 10px; font-size: 14.5px; }
.banner-engine { background: var(--info-bg); border: 1px solid var(--info-line); }
.flash-ok { background: var(--ok-bg); border: 1px solid var(--ok-line); }
.flash-error { background: var(--bad-bg); border: 1px solid var(--bad-line); }

/* sections */
.hero { padding: 34px 0 10px; }
.page-head { padding: 26px 0 8px; }
.panel { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 22px; margin: 22px 0; box-shadow: var(--shadow); }
@media (min-width: 720px) { .panel { padding: 28px; } }
.panel-head { margin-bottom: 14px; }
.empty { color: var(--slate); padding: 10px 0; }
.callout { background: var(--brass-soft); border-left: 4px solid var(--brass); padding: 12px 16px; border-radius: 8px; margin: 14px 0; }
.warn { color: var(--warn-ink); }
.ok-text { color: var(--r-acceptable); }
.bad-text { color: var(--r-unacceptable); }
.notice { font-size: 13.5px; background: var(--notice-bg); border-radius: 8px; padding: 8px 12px; color: var(--body); }

/* tables */
.table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--slate); border-bottom: 2px solid var(--ink); padding: 10px 10px 8px; }
.table td { border-bottom: 1px solid var(--line); padding: 11px 10px; vertical-align: top; }
.table tr:hover td { background: var(--hover); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table.matrix { min-width: 820px; }
.table.clauses { min-width: 760px; }
.table .total td { font-weight: 700; border-top: 2px solid var(--ink); }
.rid { font-family: var(--serif); font-weight: 700; color: var(--brass); white-space: nowrap; }
.kind { font-size: 12px; background: var(--chip); padding: 2px 7px; border-radius: 99px; white-space: nowrap; }

/* pills and ratings */
.pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 99px; background: var(--chip); }
.pill-done { background: var(--ok-bg); color: var(--ok-ink); }
.pill-running, .pill-queued { background: var(--info-bg); color: var(--info-ink); }
.pill-waiting { background: var(--brass-soft); color: var(--warn-ink); }
.pill-error { background: var(--bad-bg); color: var(--bad-ink); }
.rating { display: inline-block; font-family: var(--sans); font-weight: 700; font-size: 13px; color: var(--on-color); padding: 4px 11px; border-radius: 6px; letter-spacing: .02em; }
.rating.big { font-size: 22px; padding: 6px 16px; border-radius: 8px; }
.r-outstanding { background: var(--r-outstanding); }
.r-good { background: var(--r-good); }
.r-acceptable { background: var(--r-acceptable); }
.r-marginal { background: var(--r-marginal); }
.r-unacceptable { background: var(--r-unacceptable); }

/* job page */
.job-head { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 22px 0 6px; }
.job-actions { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.steps { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 14px 0 10px; counter-reset: s; }
.steps li { counter-increment: s; font-size: 13.5px; font-weight: 600; padding: 7px 12px 7px 10px; border-radius: 99px; background: var(--chip); color: var(--slate); }
.steps li::before { content: counter(s); display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 7px; border-radius: 50%; background: var(--white); font-size: 11.5px; }
.steps li.done { background: var(--ink); color: var(--paper); }
.steps li.done::before { content: "\2713"; background: var(--brass); color: var(--ink); }
.steps li.now { background: var(--brass-soft); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--brass); }
.status-line { font-size: 15px; }

/* grade card: the signature piece */
.grade-card { position: relative; margin: 26px 0; padding: 26px; border-radius: 20px; background: var(--block); color: var(--on-block); border: 1px solid var(--block-line); box-shadow: var(--shadow-lift); overflow: hidden; }
.grade-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 20px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
@media (min-width: 720px) { .grade-card { padding: 36px; } }
.grade-card .eyebrow { color: var(--on-block-soft); }
.grade-card .lede { color: var(--on-block); }
.grade-top { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.score-ring { width: 150px; height: 150px; border-radius: 50%; display: grid; place-content: center; text-align: center; flex: none;
  box-shadow: 0 0 0 8px rgba(255,255,255,.06), 0 14px 30px rgba(0,0,0,.35); }
.score-num { font-family: var(--serif); font-size: 58px; font-weight: 800; line-height: 1; color: var(--on-color); }
.score-of { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.grade-sum { flex: 1 1 320px; }
.factors { margin-top: 26px; display: grid; gap: 10px; }
.factor { background: var(--block-2); border: 1px solid var(--block-line); border-radius: 12px; }
.factor summary { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; flex-wrap: wrap; }
.factor summary::-webkit-details-marker { display: none; }
.factor-id { font-family: var(--serif); font-weight: 700; color: var(--accent-on-block); }
.factor-name { flex: 1 1 200px; font-weight: 600; }
.factor-score { font-family: var(--serif); font-size: 22px; font-weight: 700; min-width: 34px; text-align: right; }
.sw { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 0 16px 16px; }
@media (min-width: 900px) { .sw { grid-template-columns: repeat(2, 1fr); } }
.sw-col { background: rgba(255,255,255,.04); border-radius: 10px; padding: 10px 14px; font-size: 14.5px; }
.sw-col h4 { color: var(--on-block-soft); margin-top: .4em; }
.sw-col ul { margin: 0; padding-left: 18px; }
.sw-col li { margin-bottom: 6px; }
.sw-ok { border-left: 3px solid var(--r-acceptable); }
.sw-mid { border-left: 3px solid var(--r-marginal); }
.sw-bad { border-left: 3px solid var(--r-marginal); }
.sw-worst { border-left: 3px solid var(--r-unacceptable); }

.fixes { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.fix { display: flex; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--well); }
.fix-n { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper); font-family: var(--serif); font-weight: 700; }
.fix-fix-first { border-left: 4px solid var(--r-unacceptable); }
.fix-fix-next { border-left: 4px solid var(--r-marginal); }
.fix-polish { border-left: 4px solid var(--r-acceptable); }
.fix-meta { margin-bottom: 4px; font-size: 13.5px; }
.tag { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: var(--brass-soft); padding: 2px 8px; border-radius: 4px; }
.fix-problem { margin-bottom: 6px; }
.fix-do { margin: 0; }
.gaps, .checks { padding-left: 18px; margin: 0; }
.gaps li { margin-bottom: 10px; }
.checks { list-style: none; padding: 0; }
.checks li { padding: 6px 0; border-bottom: 1px dashed var(--line); }
.checks input { margin-right: 8px; accent-color: var(--brass); }
.regrade { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
select, input[type=text], input:not([type]), textarea { font: inherit; }

.bidfit-top { display: flex; align-items: baseline; gap: 14px; margin-bottom: 8px; }
.bf-score { font-family: var(--serif); font-size: 48px; font-weight: 700; }
.bf-call { font-weight: 700; padding: 4px 12px; border-radius: 6px; color: var(--on-color); }
.call-bid { background: var(--r-acceptable); }
.call-bid-with-caution { background: var(--r-marginal); }
.call-pass { background: var(--r-unacceptable); }
.flags li { color: var(--warn-ink); }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; font-size: 14.5px; }
.facts dt { font-weight: 600; color: var(--slate); }
.facts dd { margin: 0; }
@media (max-width: 520px) { .facts { grid-template-columns: 1fr; } .facts dd { margin-bottom: 6px; } }

.lm { display: grid; gap: 14px; }
.lm-factor { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--well); }
.lm-factor.passfail { border-style: dashed; }
.lm-head { margin-bottom: 4px; }
.lm-reqs { margin: 6px 0 0; padding-left: 18px; font-size: 14.5px; }
.lm-reqs li { margin-bottom: 5px; }

.sev { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 4px; }
.sev-high { background: var(--bad-bg); color: var(--bad-ink); }
.sev-medium { background: var(--brass-soft); color: var(--warn-ink); }
.sev-low, .sev-unknown { background: var(--chip); color: var(--slate); }
.status-tag { font-size: 12px; font-weight: 700; }
.s-eliminated { color: var(--bad-ink); }
.s-moved { color: var(--warn-ink); }
.s-check, .s-unknown { color: var(--slate); }
.s-active { color: var(--ok-ink); }
tr.st-eliminated td { background: var(--bad-wash); }
tr.st-moved td { background: var(--warn-bg); }

.draft-sec { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 18px; }
.draft-sec:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.md { max-width: 820px; }
.md h3, .md h4, .md h5 { font-family: var(--serif); text-transform: none; letter-spacing: 0; color: var(--ink); font-size: 18px; }
mark.need { background: var(--need-bg); color: var(--need-ink); padding: 1px 4px; border-radius: 4px; font-weight: 600; box-shadow: inset 0 -2px 0 var(--need-line); }
.needs { background: var(--need-wash); border: 1px solid var(--need-line-soft); border-radius: 10px; padding: 10px 16px; margin-top: 12px; font-size: 14.5px; }
.needs h4 { margin-top: .3em; color: var(--warn-ink); }
.needs ul { margin: 0; padding-left: 18px; }
.cost { font-size: 14px; }
.pre { white-space: pre-wrap; font-size: 12.5px; max-height: 300px; overflow: auto; }

/* forms */
.form label { display: block; font-weight: 600; font-size: 14.5px; margin-bottom: 14px; }
.form input:not([type=checkbox]):not([type=radio]):not([type=file]), .form textarea, select {
  display: block; width: 100%; margin-top: 6px; padding: 11px 12px; border: 1px solid var(--input-line); border-radius: 9px; background: var(--input-bg); color: var(--ink); font-weight: 400; }
select { display: inline-block; width: auto; margin: 0; }
.form textarea { resize: vertical; }
.form fieldset { border: 0; padding: 0; margin: 0 0 22px; }
.form legend { font-family: var(--serif); font-size: 20px; font-weight: 600; margin-bottom: 10px; }
.file-row { display: block; font-weight: 400; font-size: 13.5px; color: var(--slate); margin-top: 6px; }
.check { font-weight: 400 !important; display: flex !important; gap: 10px; align-items: flex-start; }
.check input { margin-top: 4px; accent-color: var(--brass); }
.drop { border: 2px dashed var(--input-line); border-radius: 12px; padding: 20px; background: var(--well); }
.drop input { display: block; margin-bottom: 6px; }
.seg { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .seg { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .seg { grid-template-columns: repeat(4, 1fr); } }
.seg label { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-weight: 400; display: flex; gap: 10px; cursor: pointer; margin: 0; }
.seg label:has(input:checked) { border-color: var(--brass); background: var(--brass-soft); }
.seg strong { display: block; font-family: var(--serif); font-size: 17px; }
.seg input { accent-color: var(--brass); margin-top: 5px; }
.warn-box { background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: 12px; padding: 14px 16px; margin-bottom: 20px; font-size: 14.5px; }

/* plans */
.plans { display: grid; gap: 18px; grid-template-columns: 1fr; margin: 22px 0; }
@media (min-width: 720px) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .plans { grid-template-columns: repeat(3, 1fr); align-items: start; } }
.plan { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 22px; box-shadow: var(--shadow); }
.plan ul { padding-left: 18px; font-size: 14.5px; min-height: 150px; }
.plan-feature { background: var(--block); color: var(--on-block); border-color: var(--block-line); box-shadow: var(--shadow-lift); }
@media (min-width: 960px) { .plan-feature { transform: translateY(-10px); } }
.plan-flag { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--brass); font-weight: 700; }
.price { font-family: var(--serif); font-size: 40px; font-weight: 700; margin: 4px 0 10px; }
.price span { font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--slate); }
.plan-feature .price span, .plan-feature .muted { color: var(--on-block-soft); }
.founding { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; border: 1.5px solid var(--brass); background: linear-gradient(180deg, var(--brass-wash), var(--brass-soft)); }
.prose { max-width: 860px; }
.prose h2 { margin-top: 1.2em; }
.prose h2:first-child { margin-top: 0; }

/* footer */
.foot { margin-top: 50px; padding: 30px 0 40px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--body); }
.foot-in p { max-width: 900px; }
details.why summary { cursor: pointer; color: var(--slate); text-decoration: underline; text-decoration-color: var(--line); margin-top: 4px; }
details.why div { margin-top: 4px; max-width: 320px; }
.table.clauses { table-layout: fixed; }
.table.clauses td { overflow-wrap: anywhere; }
@media (max-width: 720px) { .topbar { position: static; } .nav { gap: 6px 14px; } }

/* credits */
.credit-pill { background: var(--block-2); border: 1px solid var(--block-line); padding: 4px 10px; border-radius: 99px; font-size: 13px !important; color: var(--accent-on-block) !important; font-weight: 600; }
.balance { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px; box-shadow: var(--shadow); margin-top: 14px; }
.balance .muted { flex: 1 1 320px; margin: 0; }
.bal-num { font-family: var(--serif); font-size: 44px; font-weight: 700; line-height: 1; margin-right: 8px; }
.bal-label { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--slate); }
.cost-row { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 820px) { .cost-row { grid-template-columns: repeat(3, 1fr); } }
.cost-row > div { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: start; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--well); }
.cost-row .cost-n { grid-row: span 2; font-family: var(--serif); font-size: 30px; font-weight: 700; color: var(--brass); min-width: 34px; }
.plan-credits { font-size: 15px; margin-bottom: 8px; }
.plan-feature .plan-credits .muted { color: var(--on-block-soft); }
.packs { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .packs { grid-template-columns: repeat(3, 1fr); } }
.pack { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--well); }
.pack-name { font-weight: 700; margin-bottom: 2px; }
.pack-credits { color: var(--slate); margin-bottom: 0; }
.small-price { font-size: 30px; margin: 2px 0 10px; }

/* accounts */
.auth { max-width: 520px; margin: 0 auto; padding-top: 26px; }
.auth .panel { margin-top: 14px; }
.auth-alt { margin: 14px 0 0; }
.nav-form { display: inline; margin: 0; }
.linkish { background: none; border: 0; padding: 0; cursor: pointer; color: var(--on-block); font: 500 14.5px var(--sans); }
.linkish:hover { color: #FFFFFF; }
.form.narrow { max-width: 420px; }
.steps-plain { padding-left: 20px; margin: 0 0 14px; }
.steps-plain li { margin-bottom: 4px; }
.qr-row { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.qr { width: 200px; height: 200px; border: 1px solid var(--line); border-radius: 12px; background: #FFFFFF; padding: 6px; }
.key { font-family: ui-monospace, Menlo, monospace; font-size: 15px; letter-spacing: .08em; background: var(--brass-soft); padding: 6px 10px; border-radius: 8px; word-break: break-all; }

/* samples on New Proposal */
.or-line { margin: 12px 0 6px; }
.samples { display: grid; gap: 6px; }
.samples strong { font-family: var(--serif); }

/* award method */
.award { background: var(--white); border: 1px solid var(--line); border-left: 5px solid var(--r-acceptable); border-radius: 14px; padding: 18px 22px; margin: 22px 0; box-shadow: var(--shadow); }
.award h2 { margin-bottom: .3em; }
.award-low { border-left-color: var(--brass); background: linear-gradient(180deg, var(--brass-wash), var(--brass-soft)); }

/* Responsiveness Check */
.verdict { display: inline-block; font-weight: 700; font-size: 13px; color: var(--on-color); padding: 4px 11px; border-radius: 6px; }
.v-responsive { background: var(--r-acceptable); }
.v-at-risk { background: var(--r-marginal); }
.v-nonresponsive-as-is { background: var(--r-unacceptable); }
.verdict-badge { flex: none; min-width: 170px; min-height: 120px; padding: 16px 20px; border-radius: 18px; display: grid; place-items: center; text-align: center;
  font-family: var(--serif); font-size: 26px; font-weight: 700; line-height: 1.15; color: var(--on-color); box-shadow: 0 0 0 8px rgba(255,255,255,.06), 0 14px 30px rgba(0,0,0,.35); }
.rc-notice { margin: 20px 0 0; font-size: 13.5px; color: var(--on-block-soft); border-top: 1px solid var(--block-line); padding-top: 12px; }
.table.rc-table { min-width: 760px; }
.res { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 99px; }
.res-pass { background: var(--ok-bg); color: var(--ok-ink); }
.res-check-at-submission { background: var(--info-bg); color: var(--info-ink); }
.res-unclear { background: var(--brass-soft); color: var(--warn-ink); }
.res-missing, .res-incomplete { background: var(--bad-bg); color: var(--bad-ink); }
tr.rc-missing td, tr.rc-incomplete td { background: var(--bad-wash); }

/* Texas Checklist */
.tx { border-top: 5px solid var(--brass); }
.tx-list { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .tx-list { grid-template-columns: 1fr 1fr; } }
.tx-item { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--well); }
.tx-item h3 { font-size: 17px; margin: 8px 0 4px; }
.tx-item h3 a { text-decoration: none; }
.tx-item p { margin-bottom: .5em; font-size: 14.5px; }
.tx-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tx-flag { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 99px; }
.tx-found .tx-flag { background: var(--ok-bg); color: var(--ok-ink); }
.tx-missing .tx-flag { background: var(--chip); color: var(--slate); }
.tx-found { border-left: 4px solid var(--r-acceptable); }
.tx-pointers { padding-left: 18px; margin: 0; font-size: 14.5px; }
.tx-pointers li { margin-bottom: 10px; }
.tx-flag-small { font-size: 12px; font-weight: 600; color: var(--slate); margin-left: 6px; }
.tx-flag-small.tx-on { color: var(--ok-ink); }

/* Plan The Win, Annotated Outline, Questions, Final Package Check, Capability Statement */
.block { display: block; margin-top: 4px; }
.dl-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tool-row { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .tool-row { grid-template-columns: repeat(3, 1fr); } }
.tool { border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; background: var(--well); display: flex; flex-direction: column; gap: 4px; }
.tool h3 { font-size: 19px; margin: 2px 0 2px; }
.tool p { margin-bottom: .5em; }
.tool form { margin-top: auto; }
.tool-cost { margin: 0; font-size: 13px; color: var(--slate); }
.tool-cost .cost-n { font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--brass); margin-right: 4px; }
.cost-row .cost-n.cost-free { font-size: 20px; }
.costs-key h4 { margin-top: 1.6em; }
.themes { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .themes { grid-template-columns: 1fr 1fr; } }
.theme { border: 1px solid var(--line); border-left: 4px solid var(--brass); border-radius: 12px; padding: 12px 16px; background: var(--well); }
.theme-text { font-family: var(--serif); font-size: 18px; font-weight: 600; margin-bottom: 6px; }
.theme ul { margin: 0; padding-left: 18px; }
.ol-vol { border-top: 2px solid var(--ink); padding-top: 14px; margin-top: 18px; }
.ol-vol:first-of-type { margin-top: 4px; }
.ol-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ol-head h3 { margin: 0; }
.ol-sec { border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin-top: 10px; background: var(--well); }
.ol-sec p { margin-bottom: .4em; }
.ol-sec-top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.ol-budget { flex: none; font-family: var(--serif); font-weight: 700; color: var(--ink); background: var(--brass-soft); padding: 2px 10px; border-radius: 99px; font-size: 14px; }
.ol-cols { gap: 8px 18px; }
.ol-cols h4 { margin-top: .4em; }
.ol-cols ul { margin: 0; padding-left: 18px; }
.deadline { font-size: 17px; background: var(--brass-soft); border-left: 4px solid var(--brass); padding: 8px 14px; border-radius: 8px; display: inline-block; }
.copy-label { display: block; font-weight: 600; font-size: 14.5px; margin-top: 18px; }
.copy-box { display: block; width: 100%; margin-top: 6px; padding: 11px 12px; border: 1px solid var(--input-line); border-radius: 9px; background: var(--input-bg); color: var(--ink); font: 13.5px/1.5 ui-monospace, Menlo, monospace; resize: vertical; }
.word-box { background: var(--well); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin: 0 0 18px; }
.pc-inputs { display: grid; gap: 4px 18px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .pc-inputs { grid-template-columns: 1fr 1fr; } }
.pc-inputs input[type=file] { display: block; margin-top: 6px; font-weight: 400; }
.pc-results { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.pc-sum .res { font-size: 14px; padding: 4px 12px; }
.pc-file { border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin-top: 10px; background: var(--well); }
.pc-file p { margin-bottom: .4em; }
.pc-missing { border-left: 4px solid var(--r-unacceptable); }
.pc-list { list-style: none; padding: 0; margin: 0; font-size: 14.5px; }
.pc-list li { padding: 5px 0; border-bottom: 1px dashed var(--line); }
.pc-list li:last-child { border-bottom: 0; }
.pc-list .res { margin-right: 6px; min-width: 52px; text-align: center; }
.cap-preview { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin: 14px 0; box-shadow: var(--shadow); }
.cap-band { background: var(--block); color: var(--on-block); padding: 18px 22px; border-bottom: 4px solid var(--brass); }
.cap-band h3 { margin: 0; color: var(--on-block); }
.cap-band p { margin: 4px 0 0; color: var(--on-block); }
.cap-body { display: grid; grid-template-columns: 1fr; }
@media (min-width: 820px) { .cap-body { grid-template-columns: 2fr 1fr; } }
.cap-main { padding: 16px 22px; }
.cap-side { padding: 16px 22px; background: var(--paper); }
.cap-main h4, .cap-side h4 { color: var(--brass); }
.cap-main ul, .cap-side ul { padding-left: 18px; margin-top: 0; }

/* tools hub */
.tool-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .tool-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .tool-grid { grid-template-columns: repeat(3, 1fr); } }
.tool-card { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--well); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.tool-card:hover { border-color: var(--brass); box-shadow: var(--shadow); transform: translateY(-1px); }
.tool-card strong { font-family: var(--serif); font-size: 18px; }
.tool-credits { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--brass); }
.run-status { margin: 12px 0; }
@media (max-width: 1100px) { .nav { gap: 4px 14px; } .nav a, .nav .linkish { font-size: 14px; } }

/* Company Profile tabs (Company, Your Team) and the team list */
.subnav { display: flex; gap: 6px; flex-wrap: wrap; margin: 18px 0 14px; border-bottom: 1px solid var(--line); }
.subnav a { padding: 10px 16px; font-weight: 600; font-size: 15px; text-decoration: none; color: var(--slate); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.subnav a:hover { color: var(--ink); }
.subnav a.on { color: var(--ink); border-bottom-color: var(--brass); }
.subnav .count { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 99px; background: var(--brass-soft); color: var(--ink); font-size: 12px; text-align: center; }
.team-actions { white-space: nowrap; }
.team-actions .inline { margin-left: 4px; }

/* gifts and referrals (Share page, gift pages, the "Who Else Would This Help?" panel) */
.banner-gift { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; background: var(--brass-soft); border: 1px solid var(--brass-line); }
.banner-actions { display: inline-flex; gap: 8px; align-items: center; }
.banner-actions form { margin: 0; }
.share-prompt { background: var(--brass-wash); border-color: var(--brass-line); }
.share-prompt .panel-head { margin-bottom: 0; }
.share-prompt .row-gap { margin-top: 14px; }
.copy-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.copy-field { flex: 1 1 320px; min-width: 0; width: 100%; font: 15px/1.4 ui-monospace, Menlo, monospace; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--well); color: var(--ink); }
.copy-row .copy-field { width: auto; }
.note-box { display: block; font-family: var(--sans); font-size: 15px; resize: vertical; margin-bottom: 4px; }
.copy-note:empty { display: none; }
.gift-cards { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .gift-cards { grid-template-columns: repeat(2, 1fr); } }
.gift-page { max-width: 640px; }
.table .key { font-size: 12.5px; letter-spacing: .04em; }

/* State checklist (every state) */
.st-info { display: grid; gap: 12px; grid-template-columns: 1fr; margin-bottom: 16px; }
@media (min-width: 700px) { .st-info { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .st-info { grid-template-columns: repeat(4, 1fr); } }
.st-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--well); }
.st-card h3 { font-size: 15px; margin: 0 0 8px; }
.st-card ul { margin: 0; padding-left: 18px; }
.st-card li { margin-bottom: 6px; font-size: 14px; overflow-wrap: anywhere; }
.st-card p { margin-bottom: .4em; font-size: 14px; overflow-wrap: anywhere; }
.st-sub { font-size: 17px; margin: 18px 0 10px; }
.st-gaps { margin-top: 14px; }
.st-gaps summary { cursor: pointer; font-weight: 600; }
.st-pick { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-top: 16px; }
.st-pick label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.st-pick select { min-width: 220px; max-width: 100%; }

/* wordmark and theme switch */
.brand-name { font-family: var(--serif); font-weight: 800; font-size: 22px; letter-spacing: -.015em; }
.bn-bid { background: linear-gradient(100deg, #20E098 0%, #12C6D6 50%, #2E8BFF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
h1, h2 { letter-spacing: -.02em; }
h1 { font-weight: 800; }
.theme-btn { background: none; border: 1px solid var(--block-line); color: var(--on-block); border-radius: 99px; padding: 5px 11px; font: 600 13px var(--sans); cursor: pointer; }
.theme-btn:hover { border-color: var(--on-block-soft); color: #FFFFFF; }
.plan-feature .plan-flag { color: var(--accent-on-block); }
.btn:focus-visible, a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }

/* landing page (templates/landing.html): calm, roomy, no images. More space above a heading than below it. */
.lp-hero { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; padding: 30px 0 18px; }
@media (min-width: 980px) { .lp-hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; padding: 56px 0 30px; } }
.lp-hero h1 { font-size: clamp(32px, 5vw, 56px); line-height: 1.05; margin: .2em 0 .35em; max-width: 17ch; }
.lp-hero .lede { font-size: clamp(17px, 1.6vw, 19.5px); }
.lp-hero .row-gap { align-items: center; gap: 14px 22px; margin-top: 24px; }
.lp-quiet { font-weight: 600; font-size: 15.5px; }
.lp-fine { font-size: 14px; color: var(--slate); margin: 12px 0 0; max-width: 560px; }
.lp-fine strong { color: var(--ink); }
.lp-sample { margin: 0; min-width: 0; }
.lp-sample .eyebrow { color: var(--on-block-soft); }
.lp-sample-top { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin: 10px 0 6px; }
.lp-sample .score-ring { width: 118px; height: 118px; }
.lp-sample .score-num { font-size: 46px; }
.lp-sample-kind { font-family: var(--serif); font-size: 20px; font-weight: 700; margin: 0 0 8px; color: var(--on-block); }
.lp-sample-head { font-family: var(--sans); font-size: 12.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--accent-on-block); margin: 22px 0 10px; }
.lp-sample-fixes { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; counter-reset: fx; }
.lp-sample-fixes li { counter-increment: fx; display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; font-size: 14.5px; line-height: 1.45;
  background: var(--block-2); border: 1px solid var(--block-line); border-left: 3px solid var(--r-unacceptable); border-radius: 10px; padding: 10px 12px; }
.lp-sample-fixes li::before { content: counter(fx); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--on-block); color: var(--block); font: 700 12.5px var(--serif); }
.lp-sample-note { margin: 16px 0 0; font-size: 13px; color: var(--on-block-soft); }

.lp-section { padding: 46px 0 6px; }
@media (min-width: 720px) { .lp-section { padding-top: 72px; } }
.lp-section > h2 { font-size: clamp(25px, 3.2vw, 38px); max-width: 26ch; margin-bottom: .45em; }
.lp-section > .lede { margin-bottom: 8px; }
.lp-problem { border-top: 1px solid var(--line); margin-top: 26px; display: grid; grid-template-columns: 1fr; gap: 6px 48px; }
@media (min-width: 900px) { .lp-problem { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .lp-problem .lp-after { grid-column: 2; } }
.lp-problem > h2 { max-width: 20ch; }
.lp-misses { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.lp-misses li { position: relative; padding: 13px 16px 13px 46px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); color: var(--ink); }
.lp-misses li::before { content: ""; position: absolute; left: 16px; top: 17px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--r-marginal); }
.lp-misses li::after { content: ""; position: absolute; left: 23px; top: 21px; width: 2px; height: 6px; background: var(--r-marginal); box-shadow: 0 8px 0 var(--r-marginal); border-radius: 1px; }
.lp-after { margin: 14px 0 0; font-weight: 600; color: var(--ink); }

.lp-steps { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 14px; grid-template-columns: 1fr; counter-reset: st; }
@media (min-width: 760px) { .lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .lp-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lp-steps li { counter-increment: st; position: relative; padding: 58px 20px 18px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.lp-steps li::before { content: counter(st); position: absolute; top: 18px; left: 20px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: var(--paper); font: 700 14px var(--serif); }
.lp-steps h3 { font-size: 18.5px; margin: 0 0 .45em; }
.lp-steps p { margin: 0; color: var(--body); font-size: 15px; }

.lp-gets { display: grid; grid-template-columns: 1fr; gap: 0 40px; margin-top: 18px; border-top: 2px solid var(--ink); }
@media (min-width: 860px) { .lp-gets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lp-get { padding: 18px 0 14px; border-bottom: 1px solid var(--line); min-width: 0; }
.lp-get h3 { font-size: 19px; margin: 0 0 .35em; }
.lp-get p { margin: 0 0 .4em; color: var(--body); font-size: 15px; }
.lp-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; }
.lp-chips li { font-size: 12.5px; font-weight: 600; background: var(--chip); color: var(--ink); padding: 4px 10px; border-radius: 99px; }
#what > .small { margin-top: 16px; }

.lp-different { position: relative; }
.lp-diffs { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 22px 0 14px; }
@media (min-width: 760px) { .lp-diffs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lp-diffs > div { padding: 18px 20px; border-radius: 14px; background: var(--brass-wash); border: 1px solid var(--brass-line); }
.lp-diffs > div:first-child { background: var(--block); color: var(--on-block); border-color: var(--block-line); box-shadow: var(--shadow-lift); }
.lp-diffs > div:first-child p { color: var(--on-block-soft); }
.lp-diffs h3 { font-size: 19px; margin: 0 0 .4em; }
.lp-diffs p { margin: 0; color: var(--body); font-size: 15px; }

.lp-plans { margin-top: 26px; align-items: stretch; }
@media (min-width: 960px) { .lp-plans { align-items: stretch; } }
@media (min-width: 1100px) { .lp-plans { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lp-plans .plan { display: flex; flex-direction: column; min-width: 0; }
.lp-plans .plan .btn { margin-top: auto; }
.lp-plans .plan > .muted { margin-bottom: 16px; }
.lp-plan-name { font-size: 22px; margin: 0 0 .2em; }
.plan-feature .lp-plan-name, .plan-feature .plan-credits { color: var(--on-block); }
.plan-feature .btn-ghost { color: var(--on-block); box-shadow: inset 0 0 0 1.5px var(--on-block); }

.lp-faq { display: grid; grid-template-columns: 1fr; gap: 0 40px; margin-top: 14px; }
@media (min-width: 860px) { .lp-faq { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lp-faq > div { padding: 18px 0 12px; border-top: 1px solid var(--line); }
.lp-faq h3 { font-size: 18px; margin: 0 0 .4em; }
.lp-faq p { margin: 0; color: var(--body); font-size: 15px; }

.lp-final { margin: 72px 0 10px; padding: 40px 22px; border-radius: 22px; text-align: center; background: var(--block); color: var(--on-block);
  border: 1px solid var(--block-line); box-shadow: var(--shadow-lift); }
@media (min-width: 720px) { .lp-final { padding: 60px 40px; } }
.lp-final h2 { font-size: clamp(26px, 3.6vw, 42px); max-width: 20ch; margin: 0 auto .7em; color: var(--on-block); }
.lp-final .lp-fine { color: var(--on-block-soft); margin: 12px auto 0; }

/* sign up: the picked plan at the top, with a way to change it */
.plan-pick { border: 1px solid var(--brass-line); background: var(--brass-wash); border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; }
.plan-pick .eyebrow { margin-bottom: 4px; }
.pp-now { margin: 0 0 4px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.pp-now strong { font-family: var(--serif); font-size: 21px; }
.pp-price { font-weight: 600; color: var(--ink); }
.pp-note { margin: 0; color: var(--body); }
.pp-change { margin-top: 10px; }
.pp-change summary { cursor: pointer; font-weight: 600; font-size: 14.5px; text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 3px; width: max-content; }
.pp-options { display: grid; gap: 8px; margin-top: 10px; }
.form .pp-opt { display: flex; gap: 10px; align-items: center; margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); font-weight: 400; cursor: pointer; }
.pp-opt:has(input:checked) { border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass); }
.pp-opt input { accent-color: var(--brass); margin: 0; }
.pp-opt strong { font-family: var(--serif); }

/* typed drafts on the Company Profile and Your Team forms (static/drafts.js) */
.draft-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.draft-note { color: var(--slate); }
.draft-note:empty { display: none; }
.draft-offer p { margin-bottom: .5em; }
.draft-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.draft-actions form { margin: 0; }
.lp-guarantee { margin: 22px 0 0; padding: 20px 22px 18px 64px; position: relative; border-radius: 14px; background: var(--white); border: 1.5px solid var(--brass); box-shadow: var(--shadow); max-width: 820px; }
.lp-guarantee::before { content: "\2713"; position: absolute; left: 20px; top: 20px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--brass); color: var(--white); font-weight: 700; }
.lp-guarantee h3 { font-size: 20px; margin: 0 0 .35em; }
.lp-guarantee p { margin: 0; color: var(--body); }

/* The small Pro badge on a tool the plan does not have (features/plans.py: the one list of Basic and Pro tools). */
.pro-badge { display: inline-block; vertical-align: middle; font-family: var(--sans); font-size: 11px; font-weight: 700; line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; padding: 1px 8px; border-radius: 99px; background: var(--brass-soft); color: var(--brass); border: 1px solid var(--brass-line); white-space: nowrap; }
.tool-credits .pro-badge { margin-left: 6px; }