/* WorkForceHelp — employer/respondent skin. Palette locked to the founder-supplied swatch:
   #3F5347 (deep green) / #707D6C (sage) / #9BA59C (light sage) / #BBBEB3 (pale grey-green) /
   #E8A266 (tan) / #CF5C09 (rust) — deliberately distinct from BiggerPayout (pink/purple) and
   TerminationHelp (blue/green). Layout mirrors the BiggerPayout/TerminationHelp workspace
   (floating card + "packet" sidebar) — see DEC log for why this isn't a live chat underneath. */
:root {
  --deep: #3F5347; --sage: #707D6C; --sage-light: #9BA59C; --pale: #BBBEB3;
  --tan: #E8A266; --rust: #CF5C09; --rust-dark: #A6480B;
  --bg: #F4F5F1; --surface: #FFFFFF; --surface-alt: #EEF0EA; --ink: #2E3A32; --muted: #6B7669;
  --border: #DADDD2;
  /* Fixed — the header/hero stay dark-green in both themes, like TerminationHelp's navy. */
  --header-bg-1: #3F5347; --header-bg-2: #56695C;
  --shadow: 0 30px 70px -34px rgba(47, 58, 50, .45); --shadow-sm: 0 8px 22px -12px rgba(47, 58, 50, .35);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #171A15; --surface: #1F2319; --surface-alt: #262B1F; --ink: #E7EAE2; --muted: #9CA696;
    --border: #2C3226;
    --pale: #3A4033; --sage-light: #8B9686; --sage: #97A28E;
    --shadow: 0 30px 70px -34px rgba(0, 0, 0, .7); --shadow-sm: 0 8px 22px -12px rgba(0, 0, 0, .55);
  }
}
:root[data-theme="dark"] {
  --bg: #171A15; --surface: #1F2319; --surface-alt: #262B1F; --ink: #E7EAE2; --muted: #9CA696;
  --border: #2C3226;
  --pale: #3A4033; --sage-light: #8B9686; --sage: #97A28E;
  --shadow: 0 30px 70px -34px rgba(0, 0, 0, .7); --shadow-sm: 0 8px 22px -12px rgba(0, 0, 0, .55);
}

*{box-sizing:border-box;}
body{margin:0;color:var(--ink);font:16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;background:var(--bg);}
/* Background image on its own layer (not body's own background-image) so it can be scaled up
   independently via transform — background-size alone can't exceed "cover" while still tracking
   the viewport, but a transform can. NOTE (regression, fixed): this block was silently dropped
   by a stash-pop merge in a prior change and needs to stay a single, easy-to-spot block — don't
   let a future merge split it across an edit again. 150% keeps more map detail visible around
   the workspace card AND crops out the image's own flat pale-olive left edge, which is what
   read as a stray "white strip" at wide/short viewport ratios when this layer was missing. */
body::after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:url("/assets/wfh-map-bg.jpg") center center / cover no-repeat;
  transform:scale(1.5);}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--bg) 88%,transparent) 0%,
    color-mix(in srgb,var(--bg) 62%,transparent) 22%,
    color-mix(in srgb,var(--bg) 55%,transparent) 55%,
    color-mix(in srgb,var(--bg) 86%,transparent) 100%);}
:root[data-theme="dark"] body::before,@media (prefers-color-scheme:dark){body::before{
  background:linear-gradient(180deg,rgba(23,26,21,.92) 0%,rgba(23,26,21,.74) 22%,rgba(23,26,21,.68) 55%,rgba(23,26,21,.9) 100%);}}
a{color:var(--sage);}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px;}

/* Full-height app shell on desktop: header + hero + workspace + footer all fit in one
   viewport, with internal scrolling confined to the chat thread and the packet sidebar —
   nothing pushes the footer off-screen. Mobile is deliberately exempt (below): cramming this
   much into one short phone viewport would make everything illegibly small, so mobile keeps
   ordinary page scrolling instead. */
@media (min-width:821px) {
  html:has(body.app),body.app{height:100%;}
  body.app{display:flex;flex-direction:column;}
  body.app main{flex:1;display:flex;flex-direction:column;min-height:0;}
  .hero{flex:none;}
  /* One row, stretched to fill the space between hero and footer: both columns are held to
     that height, so the left column can't run past it into the footer (the chat thread
     absorbs the squeeze and scrolls) and the right column reaches all the way down to it. */
  main .workspace{flex:1;min-height:0;grid-template-rows:minmax(0,1fr);align-items:stretch;padding-bottom:16px;}
  main .col-main{min-height:0;overflow:hidden;}
  .col-side > .pk:last-child{flex:1 0 auto;}
  .workspace-card{flex:1;min-height:0;}
  .wc-body{flex:1;min-height:0;max-height:none;}
  .col-side{max-height:100%;overflow-y:auto;scrollbar-width:none;}
  .col-side::-webkit-scrollbar{width:0;height:0;}
  body.app > footer{flex:none;margin-top:0;}
}

header{position:sticky;top:0;z-index:20;background:linear-gradient(120deg,var(--header-bg-1),var(--header-bg-2));border-bottom:1px solid rgba(0,0,0,.15);}
header .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none;}
.brand .mk{width:32px;height:32px;border-radius:8px;overflow:hidden;flex:none;display:block;box-shadow:0 0 0 2px rgba(255,255,255,.4);}
.brand .mk img{width:100%;height:100%;object-fit:cover;display:block;}
.brand b{font-weight:800;font-size:19px;letter-spacing:-.03em;color:#fff;}
.brand b span{color:var(--tan);}
/* Everything but the brand mark lives here, flushed to the right edge of the header. */
.bar-right{display:flex;align-items:center;gap:22px;margin-left:auto;}
.hlinks{display:flex;gap:26px;}
.hlinks a{color:rgba(255,255,255,.82);text-decoration:none;font-size:13.5px;font-weight:600;}
.hlinks a:hover{color:#fff;}
@media (max-width:760px){.hlinks{display:none;}}
.badge{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);padding:5px 11px;border-radius:999px;flex:none;}
@media (max-width:520px){.badge{display:none;}}

main .wrap{padding-top:0;}
.hero{max-width:1100px;margin:22px auto 16px;padding:0 24px;text-align:center;}
.hero-badge{display:inline-block;background:linear-gradient(120deg,var(--header-bg-1),var(--header-bg-2));color:#fff;font-weight:700;font-size:19px;letter-spacing:-.01em;padding:12px 24px;border-radius:14px;box-shadow:var(--shadow);}
.hero-badge em{font-style:normal;color:var(--tan);}

/* Two-column workspace, matching the BiggerPayout/TerminationHelp layout: flexible main
   column (left) + a fixed-width status/output sidebar (right). Uses the full available page
   width (matching .wrap) rather than clamping to a narrow reading column — this is a working
   tool, not an article. */
.workspace{display:grid;grid-template-columns:minmax(0,1fr) 264px;gap:22px;max-width:1000px;margin:0 auto;padding:0 24px 24px;align-items:start;}
.col-main{display:flex;flex-direction:column;gap:12px;min-width:0;}
@media (max-width:820px){.workspace{grid-template-columns:1fr;}.col-side{order:2;}}

/* The single floating "workspace" card — mirrors the reference chat card's chrome, without
   pretending to be a live conversation: one continuous card, a head bar with a status pill,
   instructional copy styled as a bubble, then the real upload/confirm/generate flow. */
.workspace-card{background:color-mix(in srgb,var(--surface) 97%,transparent);border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow);overflow:hidden;backdrop-filter:blur(8px);display:flex;flex-direction:column;}
.wc-head{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--border);background:var(--surface-alt);}
.wc-head b{font-size:15.5px;color:var(--ink);}
.statuspill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--sage);}
.statuspill .d{width:7px;height:7px;border-radius:50%;background:var(--sage);box-shadow:0 0 0 4px color-mix(in srgb,var(--sage) 20%,transparent);}

/* The chat thread — a real message log, not decoration: every bubble here corresponds to a
   genuine upload, typed note, or generation outcome. See workforcehelp-app.js's own doc
   comment for exactly what is and isn't a live conversation underneath. */
.wc-body{padding:22px;display:flex;flex-direction:column;gap:14px;max-height:60vh;overflow-y:auto;}
.bubble{background:var(--surface-alt);border:1px solid var(--border);border-radius:6px 16px 16px 16px;padding:14px 16px;max-width:88%;align-self:flex-start;}
.bubble.user{background:linear-gradient(135deg,var(--sage),var(--deep));border-color:transparent;border-radius:16px 6px 16px 16px;align-self:flex-end;}
.bubble p{margin:0;font-size:14.5px;color:var(--ink);line-height:1.6;}
/* Spacing between paragraphs / lists inside one bubble (live chat replies, topic answers). */
.bubble p + p,.bubble p + .bubble-list,.bubble .bubble-list + p{margin-top:9px;}
.bubble.user p{color:#fff;}

.action-row{padding:0 22px 14px;display:flex;flex-wrap:wrap;gap:9px;}
.action-row[hidden]{display:none;}
/* FAQ starter chips render INSIDE the already-padded thread (.wc-body has its own padding +
   flex gap), so no extra padding here — unlike .action-row, which sits outside it. */
.chip-row{display:flex;flex-wrap:wrap;gap:9px;}
.chip{font:inherit;font-size:13.5px;font-weight:700;color:var(--sage);background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:10px 16px;cursor:pointer;transition:.15s;}
.chip:hover{border-color:var(--sage);background:var(--surface-alt);}
.chip.primary{color:#fff;background:linear-gradient(135deg,var(--rust),var(--rust-dark));border-color:transparent;box-shadow:var(--shadow-sm);}
.chip.primary:disabled{opacity:.5;cursor:not-allowed;}

/* Composer — the real input surface: "+ Add evidence" uploads a file into the SAME
   documents array a typed note also feeds; nothing here is decorative. */
.wc-composer{margin:0 18px 18px;border:1.5px solid var(--border);border-radius:16px;padding:12px 14px;background:var(--surface);box-shadow:var(--shadow-sm);}
.filelist{display:flex;flex-direction:column;gap:8px;margin-bottom:8px;}
.filelist .f{display:flex;align-items:center;gap:10px;font-size:13.5px;padding:9px 12px;background:var(--surface-alt);border-radius:10px;}
.filelist .f .name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.filelist .f .rm{cursor:pointer;color:var(--muted);border:0;background:none;font-size:15px;padding:0 4px;}
.filelist .f .st{font-size:11px;color:var(--muted);flex:none;}
.composer-row{display:flex;align-items:center;gap:9px;}
.add-evidence{flex:none;font:inherit;font-size:13px;font-weight:700;color:var(--sage);background:var(--surface-alt);border:1px dashed var(--border);border-radius:10px;padding:10px 13px;cursor:pointer;white-space:nowrap;}
.add-evidence:hover{border-color:var(--sage);}
.composer-row input[type="text"]{flex:1;min-width:0;border:0;outline:none;background:transparent;font:inherit;font-size:14.5px;color:var(--ink);padding:8px 4px;}
.composer-row input[type="text"]::placeholder{color:var(--muted);}
.send{flex:none;width:38px;height:38px;border-radius:10px;border:0;background:linear-gradient(135deg,var(--sage),var(--deep));color:#fff;display:grid;place-items:center;cursor:pointer;}
.send:hover{filter:brightness(1.05);}
.composer-foot{font-size:11px;color:var(--muted);margin-top:9px;padding-top:9px;border-top:1px solid var(--border);display:flex;align-items:center;gap:6px;}

.status{font-size:13.5px;color:var(--muted);margin-top:10px;line-height:1.6;}
.status:empty{margin:0;}
.status.err{color:var(--rust-dark);}
.status a{font-weight:700;}


/* Right column: response-pack status strip, matching the other skins' "packet" sidebar. */
.col-side{display:flex;flex-direction:column;gap:11px;}
.col-side .lbl{font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:#fff;padding:6px 11px;background:var(--deep);border:1px solid var(--deep);border-radius:8px;align-self:flex-start;}
.pk{background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:14px;padding:13px 14px;box-shadow:var(--shadow-sm);}
.pk.progress{background:linear-gradient(120deg,var(--tan),var(--rust));border-color:transparent;color:#fff;font-size:12.5px;font-weight:700;padding:12px 14px;}
.pk .ph{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;color:var(--ink);}
.pk .ph .ic{width:26px;height:26px;border-radius:8px;background:var(--surface-alt);color:var(--sage);display:grid;place-items:center;flex:none;}
.pk .tl{display:flex;flex-direction:column;gap:8px;margin-top:10px;}
.pk .tl .r{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted);}
.pk .tl .r .n{width:9px;height:9px;border-radius:50%;flex:none;background:var(--border);}
.pk .tl .r.on .n{background:var(--sage);}
.pk .tl .r.on{color:var(--ink);font-weight:600;}
.docchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px;}
.docchip{font-size:11px;color:var(--muted);background:var(--surface-alt);border:1px solid var(--border);border-radius:7px;padding:4px 8px;}
.docchip.out{color:var(--ink);background:color-mix(in srgb,var(--rust) 14%,var(--surface));border-color:color-mix(in srgb,var(--rust) 34%,var(--border));font-weight:700;}
.evidence-list,.outstanding-list{display:flex;flex-direction:column;gap:6px;margin-top:2px;font-size:12px;color:var(--ink);}
.muted-sm{font-size:12px;color:var(--muted);}
.outstanding-list .item{display:flex;align-items:flex-start;gap:7px;color:var(--rust-dark);}
.outstanding-list .item::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--rust);flex:none;margin-top:6px;}

footer{margin-top:20px;background:linear-gradient(120deg,var(--header-bg-1),var(--header-bg-2));border-top:1px solid rgba(0,0,0,.15);}
/* Thin strip — deliberately no taller than the header. The fineprint takes the full row width
   (not a narrow measure) so it sits on one or two short lines beside the links. */
footer .wrap{padding:6px 24px;display:flex;align-items:center;justify-content:space-between;gap:18px;}
footer .fineprint{flex:1;min-width:0;font-size:10.5px;line-height:1.3;color:rgba(255,255,255,.72);margin:0;}
footer .wrap > div{flex:none;white-space:nowrap;}
footer .link{font-size:12px;color:rgba(255,255,255,.82);text-decoration:none;margin-left:14px;}
@media (max-width:820px){footer .wrap{flex-wrap:wrap;gap:6px 14px;padding:10px 24px;}footer .fineprint{flex-basis:100%;}footer .wrap > div{white-space:normal;}footer .link{margin:0 14px 0 0;}}
footer .link:hover{color:#fff;}

/* Text subpages (privacy, terms): ordinary page scroll, the legal text on a solid card for
   readability over the map background. Same copy as the other two skins — only the brand differs. */
.page{padding:30px 34px 26px;max-width:760px;margin:30px auto;background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);}
@media (max-width:620px){.page{margin:16px;padding:22px 20px;}}
.page .back{text-decoration:none;font-weight:700;font-size:13.5px;color:var(--sage);}
.page h1{font-size:clamp(26px,3.4vw,38px);font-weight:800;letter-spacing:-.02em;margin:14px 0 6px;color:var(--ink);}
.page .lede{font-size:16px;color:var(--muted);margin-bottom:6px;}
.page h2{font-size:20px;font-weight:800;margin:24px 0 8px;color:var(--deep);}
:root[data-theme="dark"] .page h2{color:var(--ink);}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .page h2{color:var(--ink);}}
.page p,.page li{font-size:14.5px;color:var(--ink);}
.page p{margin:8px 0;}
.page ul{margin:8px 0;padding-left:20px;display:flex;flex-direction:column;gap:6px;}
.page .draft-tag{display:inline-flex;font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--rust-dark);background:color-mix(in srgb,var(--tan) 22%,var(--surface));border:1px solid color-mix(in srgb,var(--tan) 50%,var(--border));border-radius:999px;padding:5px 11px;margin:4px 0;}
.page .callout{background:var(--surface-alt);border:1px solid var(--border);border-radius:14px;padding:16px 18px;margin:16px 0;font-size:14px;}
.boundaries{background:var(--surface-alt);border:1px solid var(--border);border-radius:16px;padding:18px 20px;margin:24px 0 6px;}
.boundaries h4{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--sage);margin:0 0 10px;}
.boundaries ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 22px;}
@media (max-width:620px){.boundaries ul{grid-template-columns:1fr;}}
.boundaries li{font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:flex-start;}
.boundaries li svg{flex:none;margin-top:2px;color:var(--sage);}

/* Rich bot bubbles from the header topics (workforcehelp-app.js TOPICS). */
.bubble .bubble-list{margin:4px 0 8px;padding-left:18px;font-size:13.5px;line-height:1.5;color:var(--ink);}
.bubble .dl-list{display:flex;flex-direction:column;gap:5px;margin:6px 0 2px;font-size:14px;}
.bubble .dl-list a{color:var(--sage);}
.cmp-wrap{overflow-x:auto;margin:10px 0 2px;}
.cmp{border-collapse:collapse;width:100%;min-width:420px;font-size:12.5px;color:var(--ink);}
.cmp th{font-size:11.5px;padding:7px 8px;text-align:center;border-bottom:1px solid var(--border);vertical-align:bottom;}
.cmp td{padding:7px 8px;border-bottom:1px solid var(--border);text-align:center;line-height:1.3;}
.cmp td:first-child{text-align:left;}
.cmp .cmp-us{background:color-mix(in srgb,var(--sage) 12%,transparent);}
.cmp th.cmp-us{color:var(--deep);}
.cmp .cmp-yes{color:var(--sage);font-weight:800;font-size:15px;}
.cmp .cmp-no{opacity:.35;font-weight:700;}
.cmp .cmp-cost td{border-top:2px solid var(--border);border-bottom:0;font-weight:700;}
.cmp .cmp-cost td:first-child{font-weight:800;}
.cmp .cmp-cost .cmp-us b{font-size:16px;color:var(--rust);}
/* Five header links need room: tighten spacing, and drop the badge before the links wrap. */
.hlinks{gap:20px;}
@media (max-width:1040px){.bar-right .badge{display:none;}}
@media (max-width:900px){.hlinks{gap:14px;}.hlinks a{font-size:12.5px;}}

/* Live-chat typing indicator (workforcehelp-app.js askModel). */
.bubble.pending{padding:12px 16px;}
.typing{display:inline-flex;gap:5px;align-items:center;height:14px;}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--sage);opacity:.35;animation:wfhTyping 1.1s infinite ease-in-out;}
.typing i:nth-child(2){animation-delay:.18s;}
.typing i:nth-child(3){animation-delay:.36s;}
@keyframes wfhTyping{0%,80%,100%{opacity:.25;transform:translateY(0);}40%{opacity:.9;transform:translateY(-3px);}}
@media (prefers-reduced-motion:reduce){.typing i{animation:none;opacity:.6;}}
.send:disabled{opacity:.55;cursor:wait;}

/* AI connection light beside "Claude Sonnet" (workforcehelp-app.js setAiStatus). Grey while
   checking, green when connected, red when not. */
.ai-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--pale);box-shadow:0 0 0 3px color-mix(in srgb,var(--pale) 25%,transparent);}
.ai-dot.on{background:#2E9E5B;box-shadow:0 0 0 3px rgba(46,158,91,.18);}
.ai-dot.off{background:#C9362B;box-shadow:0 0 0 3px rgba(201,54,43,.18);}

/* Conciliation mode: whose document each upload is (workforcehelp-app.js renderFileList). */
.filelist .f .side{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:2px 7px;border-radius:6px;}
.filelist .f .side.theirs{color:var(--rust-dark);background:color-mix(in srgb,var(--tan) 22%,var(--surface));}
.filelist .f .side.ours{color:var(--deep);background:color-mix(in srgb,var(--sage) 16%,var(--surface));}

/* Subscribe (DEC-0226): header button + the inline forms it opens in the chat. */
.subscribe-btn{flex:none;font-size:13px;font-weight:800;color:#fff;text-decoration:none;background:linear-gradient(135deg,var(--rust),var(--rust-dark));border-radius:999px;padding:7px 15px;box-shadow:0 4px 14px -6px rgba(0,0,0,.4);}
.subscribe-btn:hover{filter:brightness(1.08);}
@media (max-width:760px){.bar-right{gap:10px;}.subscribe-btn{padding:6px 12px;font-size:12.5px;}}
.inline-form{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
.inline-input{flex:1;min-width:180px;font:inherit;font-size:14px;color:var(--ink);background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:9px 11px;}
.inline-input:focus{outline:none;border-color:var(--sage);box-shadow:0 0 0 3px color-mix(in srgb,var(--sage) 20%,transparent);}
.sub-form{display:flex;flex-direction:column;gap:9px;margin-top:8px;}
.sub-form label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:700;color:var(--ink);}
.sub-form .sub-quote{margin:2px 0;line-height:1.5;}
.sub-form .chip.primary{align-self:flex-start;}

/* ---------- Guides + pricing pages (DEC-0230, scripts/seo/build-workforcehelp-pages.mjs) ---------- */
/* The homepage badge is the page's <h1>; reset the heading defaults so it looks exactly as before. */
h1.hero-badge{margin:0;line-height:inherit;}
.page.guide{max-width:820px;}
.page .crumbs{font-size:12.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px;align-items:center;}
.page .crumbs a{color:var(--sage);font-weight:700;text-decoration:none;}
.page .crumbs a:hover{text-decoration:underline;}
.page .crumbs .sep{color:var(--sage-light);}
.page a{color:var(--rust-dark);}
:root[data-theme="dark"] .page a{color:var(--tan);}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .page a{color:var(--tan);}}
.guide-list{display:grid;gap:12px;margin:18px 0;}
.page a.guide-card{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border:1px solid var(--border);border-radius:14px;background:var(--surface-alt);text-decoration:none;color:var(--ink);transition:border-color .15s;}
.page a.guide-card:hover{border-color:var(--sage);}
.guide-card b{font-size:15.5px;color:var(--deep);}
:root[data-theme="dark"] .guide-card b{color:var(--ink);}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .guide-card b{color:var(--ink);}}
.guide-card span{font-size:13.5px;color:var(--muted);}
.price-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0 6px;}
@media (max-width:620px){.price-grid{grid-template-columns:1fr;}}
.price-card{display:flex;flex-direction:column;gap:2px;padding:18px;border:1px solid var(--border);border-radius:14px;background:var(--surface-alt);}
.price-card .price-name{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--sage);}
.price-card .price{font-size:34px;font-weight:800;letter-spacing:-.02em;color:var(--ink);}
.price-card .price-note{font-size:12.5px;color:var(--muted);}
.page .price-card p{font-size:13.5px;margin-top:8px;}
.price-table td,.price-table th{text-align:left;padding:8px 10px;border-bottom:1px solid var(--border);}
.price-table{font-size:14px;}
.page-cta{margin:26px 0 8px;padding:20px 22px;border-radius:16px;background:linear-gradient(120deg,var(--header-bg-1),var(--header-bg-2));color:#fff;}
.page-cta b{font-size:17px;}
.page .page-cta p{color:rgba(255,255,255,.86);margin:6px 0 14px;}
.page a.cta-btn{display:inline-block;background:var(--rust);color:#fff;font-weight:800;font-size:14px;text-decoration:none;padding:10px 18px;border-radius:999px;}
.page a.cta-btn:hover{background:var(--rust-dark);}
.related h2{font-size:16px;}
.page .muted-note{font-size:12.5px;color:var(--muted);margin-top:18px;}