*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy: #0D1B2A;
  --navy-mid: #1B3050;
  --teal: #0F6E56;
  --teal-light: #1D9E75;
  --teal-pale: #E1F5EE;
  --cream: #F8F5EE;
  --warm-white: #FDFCFA;
  --text-main: #0D1B2A;
  --text-muted: #5A6472;
  --text-light: #8A95A0;
  --border: rgba(13,27,42,0.1);
  /* Risk-flag amber and the needs-facts neutral. Referenced by .row.flag,
     .row.review, .row-status.* and .chart-summary .flagword since those rules
     were written, but never defined, so every Risk Check chart rendered its
     matched and needs-facts rails in navy. Amber is #B5760A to match the
     existing rails at .risk-flag and .forms-wrap .currency-note. The review
     pair stays inside navy and does not open a second palette. */
  --amber-text: #B5760A;
  --amber-border: #B5760A;
  /* A tint of the same amber, not a second palette. The memo needs a fill
     behind the gaps panel, the separate-question flag and the lawyer block;
     the rest of the site uses amber only as a rule and as text. */
  --amber-pale: #FDF6E7;
  --review-text: #5A6472;
  --review-border: rgba(13,27,42,0.25);
  /* Form validation and failed sign-in. A muted brick, deliberately NOT amber:
     #B5760A carries a specific meaning here, a risk flag, and a mistyped
     password is not one. Dark enough to clear contrast on the pale fill. */
  --field-bad: #9C3A2E;
  --field-bad-pale: #FBF1EF;
  --field-bad-line: rgba(156,58,46,0.28);
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'DM Sans', system-ui, sans-serif;
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--warm-white);
  color: var(--text-main);
  line-height: 1.55;
  overflow-x: hidden;
}

/* Nav */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 2rem;
  background: rgba(253,252,250,0.96);
  backdrop-filter: blur(12px);
  border-bottom: 0.5px solid var(--border);
}
.nav-logo {
  font-family: var(--serif);
  font-size: 1.55rem;
  color: var(--navy);
  text-decoration: none;
}
.nav-logo span { color: var(--teal); }
.nav-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
}
.nav-links a {
  font-size: 0.875rem;
  color: var(--text-muted);
  text-decoration: none;
}
.nav-links a:hover,
.nav-links a.active { color: var(--navy); }
.nav-cta {
  background: var(--navy) !important;
  color: var(--warm-white) !important;
  padding: 0.45rem 1.1rem;
  border-radius: 6px;
  font-weight: 500 !important;
}

/* Shared utilities */
.section-label {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 0.4rem;
}
.section-title {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--navy);
  text-align: center;
  margin-bottom: 0.5rem;
}
.section-sub {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.95rem;
  max-width: 540px;
  margin: 0 auto 1.5rem;
}
.btn-primary {
  background: var(--teal);
  color: white;
  border: none;
  padding: 0.7rem 1.5rem;
  border-radius: 7px;
  font-size: 0.95rem;
  font-weight: 500;
  font-family: var(--sans);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.btn-primary:hover { background: var(--teal-light); }
.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border: 0.5px solid var(--border);
  padding: 0.7rem 1.35rem;
  border-radius: 7px;
  font-size: 0.9rem;
  font-family: var(--sans);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.btn-ghost:hover {
  border-color: var(--navy);
  color: var(--navy);
}

/* Page hero (inner pages) */
.page-hero {
  padding: 2.5rem 2rem 1.75rem;
  text-align: center;
  background: var(--warm-white);
  border-bottom: 0.5px solid var(--border);
}
.page-hero .badge {
  display: inline-block;
  background: var(--teal-pale);
  color: var(--teal);
  font-size: 0.72rem;
  font-weight: 500;
  padding: 0.28rem 0.85rem;
  border-radius: 100px;
  margin-bottom: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.page-hero h1 {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 400;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 0.6rem;
}
.page-hero h1 em { font-style: italic; color: var(--teal); }
.page-hero p {
  font-size: 1rem;
  color: var(--text-muted);
  max-width: 560px;
  margin: 0 auto;
}

/* Footer */
footer {
  background: var(--navy);
  padding: 1.75rem 2rem;
  text-align: center;
  margin-top: 2rem;
}
.footer-logo {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: white;
  margin-bottom: 0.35rem;
}
.footer-logo span { color: var(--teal-light); }
footer p {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
}
footer a {
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  font-size: 0.78rem;
}
footer a:hover { color: rgba(255,255,255,0.75); }

/* Disclaimer bar */
.disclaimer {
  background: var(--teal-pale);
  border-top: 1px solid rgba(15,110,86,0.15);
  padding: 1rem 2rem;
  text-align: center;
}
.disclaimer p {
  font-size: 0.8rem;
  color: var(--teal);
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.55;
}

/* Hamburger button, hidden on desktop */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px; height: 38px;
  margin-left: auto;
  padding: 0;
  background: transparent;
  border: 0.5px solid var(--border);
  border-radius: 7px;
  cursor: pointer;
  color: var(--navy);
}
.nav-toggle span {
  position: relative;
  display: block;
  width: 18px; height: 1.5px;
  background: currentColor;
  transition: background 0.15s;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute; left: 0;
  width: 18px; height: 1.5px;
  background: currentColor;
  transition: transform 0.18s ease;
}
.nav-toggle span::before { top: -5.5px; }
.nav-toggle span::after  { top:  5.5px; }
nav.nav-open .nav-toggle span { background: transparent; }
nav.nav-open .nav-toggle span::before { transform: translateY(5.5px) rotate(45deg); }
nav.nav-open .nav-toggle span::after  { transform: translateY(-5.5px) rotate(-45deg); }

/* ===== Law Library engine ===== */
.nav-step-label{font-size:0.7rem;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-light);margin-bottom:0.625rem}
.entity-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0.625rem;margin-bottom:1.25rem}
.entity-card{border:0.5px solid var(--border);border-radius:10px;padding:0.875rem;cursor:pointer;background:var(--warm-white);transition:border-color 0.15s,background 0.15s;text-align:left}
.entity-card:hover{border-color:rgba(15,110,86,0.4)}
.entity-card.active{border:1.5px solid var(--teal);background:var(--teal-pale)}
.entity-emoji{font-size:1.25rem;margin-bottom:0.4rem}
.entity-name{font-size:0.8125rem;font-weight:500;color:var(--text-main);line-height:1.3}
.entity-desc{font-size:0.7rem;color:var(--text-muted);margin-top:2px;line-height:1.4}
.filter-row{display:flex;gap:0.625rem;align-items:center;margin-bottom:1.25rem;flex-wrap:wrap}
.nav-select,.nav-search{font-size:0.8125rem;padding:0.5rem 0.75rem;border-radius:7px;border:0.5px solid var(--border);background:var(--warm-white);color:var(--text-main);font-family:var(--sans)}
.nav-select{min-width:180px}
.nav-search{flex:1;min-width:120px}
.count-pill{font-size:0.7rem;background:var(--teal-pale);color:var(--teal);border-radius:100px;padding:0.25rem 0.75rem;font-weight:500;white-space:nowrap}
.reset-btn{font-size:0.75rem;color:var(--text-muted);background:none;border:0.5px solid var(--border);border-radius:6px;padding:0.375rem 0.75rem;cursor:pointer;font-family:var(--sans)}
.reset-btn:hover{color:var(--text-main)}
.cat-head{font-size:0.7rem;font-weight:500;letter-spacing:0.07em;text-transform:uppercase;margin-bottom:0.5rem;margin-top:1rem;display:flex;align-items:center;gap:0.5rem}
.cat-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.law-card{border:0.5px solid var(--border);border-radius:8px;margin-bottom:0.5rem;background:var(--warm-white);overflow:hidden}
.law-btn{width:100%;text-align:left;padding:0.75rem 0.875rem;background:none;border:none;cursor:pointer;display:flex;align-items:flex-start;gap:0.625rem;font-family:var(--sans)}
.law-btn:hover{background:var(--cream)}
.law-name{font-size:0.8125rem;font-weight:500;color:var(--text-main);line-height:1.35;flex:1}
.law-summary{font-size:0.75rem;color:var(--text-muted);margin-top:2px;line-height:1.5}
.law-detail{padding:0 0.875rem 0.875rem;border-top:0.5px solid var(--border)}
.citation-disclaimer{background:#FEF9EC;border:1px solid #F0C040;border-radius:8px;padding:0.75rem 1rem;margin-bottom:1.25rem;font-size:0.75rem;color:#7A5800;line-height:1.6;display:flex;align-items:flex-start;gap:0.5rem}
.citation-disclaimer strong{color:#5C3D00}
@media(max-width:640px){
  .entity-grid{grid-template-columns:1fr}
}
.ic{width:1.05em;height:1.05em;display:inline-block;vertical-align:-0.14em;flex:none}
.ic-lg .ic{width:26px;height:26px;color:var(--teal);vertical-align:0}
.how-icon .ic,.tool-icon .ic{width:21px;height:21px}
.entity-emoji .ic{width:22px;height:22px}
.tool-icon.navy .ic{color:#fff}

/* ===== Risk Check engine ===== */
.head{padding:8rem 0 2rem;text-align:center}
.eyebrow{font-size:0.75rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--teal);margin-bottom:1rem}
h1{font-family:var(--serif);font-size:clamp(2.25rem,5vw,3.25rem);font-weight:400;line-height:1.1;letter-spacing:-0.02em;color:var(--navy);margin-bottom:1rem}
h1 em{font-style:italic;color:var(--teal)}
.lede{font-size:1.0625rem;color:var(--text-muted);max-width:560px;margin:0 auto;font-weight:300;line-height:1.7}
.privacy-line{margin-top:1rem;font-size:0.8rem;color:var(--teal);font-weight:500}
.card{background:white;border:0.5px solid var(--border);border-radius:16px;padding:2rem;margin:2rem 0;box-shadow:0 1px 3px rgba(13,27,42,0.03)}
.progress{font-size:0.7rem;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-light);display:flex;justify-content:space-between;border-bottom:0.5px solid var(--border);padding-bottom:0.75rem;margin-bottom:1.5rem}
.q-label{font-size:1.1875rem;line-height:1.45;color:var(--navy);margin-bottom:0.5rem;font-weight:400}
.q-help{font-size:0.8125rem;color:var(--text-muted);line-height:1.6;border-left:2px solid var(--teal-pale);padding-left:0.75rem;margin-bottom:1rem}
.opts{display:flex;flex-direction:column;gap:0.5rem;margin-top:1rem}
.opt{text-align:left;font:inherit;font-size:0.9375rem;background:var(--warm-white);border:0.5px solid var(--border);color:var(--text-main);padding:0.875rem 1rem;border-radius:9px;cursor:pointer;transition:border-color .15s,background .15s}
.opt:hover{border-color:rgba(15,110,86,0.5);background:white}
.opt:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.nav-btns{display:flex;gap:0.75rem;align-items:center;margin-top:1.75rem;flex-wrap:wrap}
.btn-primary{background:var(--teal);color:white;border:none;padding:0.75rem 1.75rem;border-radius:8px;font-size:0.9375rem;font-weight:500;font-family:var(--sans);cursor:pointer;text-decoration:none;display:inline-block;transition:background 0.2s,transform 0.15s}
.btn-primary:hover{background:var(--teal-light);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--text-muted);border:0.5px solid var(--border);padding:0.75rem 1.5rem;border-radius:8px;font-size:0.875rem;font-family:var(--sans);cursor:pointer;text-decoration:none;display:inline-block;transition:border-color 0.2s,color 0.2s}
.btn-ghost:hover{border-color:var(--navy);color:var(--navy)}
.btn-ghost[disabled]{opacity:.35;cursor:not-allowed}
.consent{background:var(--cream);border:0.5px solid var(--border);border-radius:12px;padding:1.5rem;font-size:0.8125rem;color:var(--text-muted);line-height:1.7;margin-bottom:1.5rem}
.consent h3{font-family:var(--serif);font-size:1.125rem;color:var(--navy);font-weight:400;margin-bottom:0.5rem}
.consent strong{color:var(--text-main)}
.consent-check{display:flex;gap:0.6rem;align-items:flex-start;margin-top:1rem;cursor:pointer;font-size:0.8125rem;color:var(--text-main)}
.consent-check input{margin-top:0.25rem;flex:none;width:16px;height:16px;accent-color:var(--teal);cursor:pointer}
.chart-summary{font-family:var(--serif);font-size:1.5rem;line-height:1.35;color:var(--navy);max-width:44ch;margin-bottom:0.5rem}
.chart-summary .flagword{color:var(--amber-text);font-style:italic}
.scope{border:0.5px solid var(--border);border-radius:12px;padding:1.25rem 1.5rem;margin:1.5rem 0 2rem;font-size:0.8125rem;background:var(--warm-white)}
.scope dl{display:grid;grid-template-columns:120px 1fr;gap:0.5rem 1rem;margin:0}
.scope dt{font-size:0.65rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-light);padding-top:2px}
.scope dd{margin:0;color:var(--text-muted);line-height:1.55}
.layer-title{font-family:var(--serif);font-size:1.375rem;color:var(--navy);border-bottom:2px solid var(--navy);padding-bottom:0.5rem;margin-bottom:0.25rem}
.layer-note{font-size:0.75rem;color:var(--text-muted);margin-bottom:0.5rem}
.row{border-top:0.5px solid var(--border);padding:1.25rem 0 1.25rem 1rem;border-left:3px solid transparent}
.row:last-of-type{border-bottom:0.5px solid var(--border)}
.row.flag{border-left-color:var(--amber-border)}
.row.review{border-left-color:var(--review-border)}
.row.na{opacity:.6}
.row-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:0.75rem}
.row-var{font-weight:500;font-size:0.9375rem;color:var(--navy)}
.row-status{font-size:0.65rem;font-weight:600;letter-spacing:0.07em;text-transform:uppercase;color:var(--text-light);white-space:nowrap}
.row-status.flag{color:var(--amber-text)}
.row-status.review{color:var(--review-text)}
.row-status.clear{color:var(--teal)}
.kv{margin-bottom:0.75rem}
.kv:last-child{margin-bottom:0}
.kv-key{font-size:0.62rem;font-weight:600;letter-spacing:0.07em;text-transform:uppercase;color:var(--text-light);margin-bottom:0.2rem}
.kv-cite{font-size:0.8125rem;color:var(--teal);line-height:1.5}
.kv-cite a{color:var(--teal);text-decoration:underline;text-underline-offset:2px}
.kv-val{font-size:0.875rem;color:var(--text-main);line-height:1.6}
.kv-val.muted{color:var(--text-muted)}
.gaps{margin-top:2.5rem;border-top:0.5px solid var(--border);padding-top:1.5rem}
.gaps-key{font-size:0.62rem;font-weight:600;letter-spacing:0.07em;text-transform:uppercase;color:var(--text-light);margin-bottom:0.75rem}
.gaps-intro{font-size:0.8125rem;color:var(--text-muted);line-height:1.6;max-width:70ch;margin-bottom:1rem}
.gaps-list{display:flex;flex-wrap:wrap;gap:0.5rem}
.gap-chip{font-size:0.8125rem;color:var(--text-main);background:var(--cream);border:0.5px solid var(--border);border-radius:100px;padding:0.4rem 0.875rem;white-space:nowrap}
.escalate{background:var(--navy);color:var(--warm-white);border-radius:16px;padding:2rem;margin:2.5rem 0 0;text-align:center}
.escalate h3{font-family:var(--serif);font-size:1.5rem;font-weight:400;margin-bottom:0.5rem}
.escalate p{font-size:0.9375rem;color:rgba(253,252,250,0.75);max-width:460px;margin:0 auto 1.5rem;font-weight:300}
.escalate .btn-primary{background:var(--teal)}
.escalate .btn-primary:hover{background:var(--teal-light)}
.foot-note{margin-top:2.5rem;border-top:0.5px solid var(--border);padding-top:1.5rem;font-size:0.75rem;color:var(--text-muted);line-height:1.7;max-width:70ch}
.foot-note p{margin-bottom:0.625rem}
.foot-note .priv{color:var(--teal);font-weight:500}
.disclaimer-bar{background:var(--cream);padding:2rem 1.5rem;margin-top:3rem}
.disclaimer-bar p{max-width:820px;margin:0 auto;font-size:0.75rem;color:var(--text-muted);line-height:1.7}
.footer-logo{font-family:var(--serif);font-size:1.125rem;color:var(--warm-white)}
.footer-logo span{color:var(--teal-light)}
@media(max-width:640px){
  .head{padding:6.5rem 0 1.5rem}
  .card{padding:1.5rem}
  .scope dl{grid-template-columns:1fr;gap:0.15rem}
  .scope dt{margin-top:0.5rem}
  .row-top{flex-direction:column;gap:0.25rem}
}
@media(prefers-reduced-motion:reduce){
  .opt,.btn-primary{transition:none}
}
.body-text,.lead-answer,.part-body p,.standing,.disclaimer,.note p,.callout p,.handoff-note p,.consent p,.disclaimer-bar p,.formwrap .sub,.warn p{text-align:justify;-webkit-hyphens: none;hyphens: none}
.section-label,.section-title,.lede,.section-sub,.hero-sub,.close p,footer p,.page-head{text-align:center}
.handoff-step p,.route li,.pg li,.hint,label,.q-text,.nav-links a,.tab-btn{text-align:left;hyphens:none}

/* ===== Typography: justified body copy ===== */
p, li, .faq-a, .compare p, .chat-feat p, .tool-desc, .diff p {
  text-align: justify; -webkit-hyphens: none; hyphens: none; word-break: normal; overflow-wrap: break-word;
}
h1, h2, h3, .section-title, .section-label, .badge,
.nav-links a, .btn-primary, .btn-ghost, .plan-cta, .tool-cta,
.entity-card, .tool-price, .price-num, .example-q,
.law-card, .law-btn, .law-name, .law-summary, .law-detail { hyphens: none; }
.page-hero p, .hero-sub, .section-sub, footer p, .plan-note,
.tool-note, .chat-note, .library-note, .disclaimer p, .example h2 { text-align: center; }
.law-card p, .law-summary, .law-detail, .entity-desc { text-align: left; }

/* ===== Risk flag: amber reserved for this ===== */
.risk-flag {
  background: #FDF6E7; border-left: 4px solid #B5760A; border-radius: 0 8px 8px 0;
  padding: 1rem 1.25rem; display: flex; gap: 0.6rem; align-items: flex-start; text-align: left;
}
.risk-flag > svg { width: 19px; height: 19px; flex: 0 0 19px; color: #B5760A; margin-top: 0.15rem; }
.risk-flag p { font-size: 0.92rem; text-align: left; }
.risk-flag strong { color: #B5760A; font-weight: 500; }

/* ============================================================
   Chat answer rendering (.ll-answer)
   Matches artifacts/chat-output-draft.html. Do not restyle per answer.
   ============================================================ */
.ll-answer {
  background: #FFFcf7;
  border: 1px solid #E4DFD4;
  border-radius: 18px;
  padding: 28px 28px 24px;
  box-shadow: 0 10px 30px rgba(13, 27, 42, 0.05);
  font-family: 'DM Sans', system-ui, sans-serif;
  color: #0D1B2A;
  line-height: 1.5;
}
.ll-answer .asked {
  background: #F8F5EE;
  border-radius: 12px;
  padding: 14px 16px 15px;
  margin-bottom: 26px;
}
.ll-answer .kicker {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0F6E56;
  margin-bottom: 6px;
}
.ll-answer .asked p {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 22px;
  line-height: 1.3;
  color: #0D1B2A;
  text-align: left;
}
.ll-answer .section { margin-top: 26px; }
.ll-answer .section h2 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #0F6E56;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #E4DFD4;
  text-align: left;
}
.ll-answer .lede { font-size: 15.5px; color: #0D1B2A; margin-bottom: 12px; text-align: left; }
.ll-answer .note { font-size: 14.5px; color: #5A6472; margin-top: 10px; text-align: left; }
.ll-answer .law {
  background: #ffffff;
  border: 1px solid #E4DFD4;
  border-left: 3px solid #0F6E56;
  border-radius: 10px;
  padding: 14px 16px 15px;
  margin: 10px 0;
}
.ll-answer .law a.cite {
  color: #0F6E56;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border-bottom: 1px solid rgba(15, 110, 86, 0.35);
}
.ll-answer .law a.cite:hover { border-bottom-color: #0F6E56; }
.ll-answer .law .name {
  display: block;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 18px;
  margin: 4px 0 6px;
}
.ll-answer .law p { font-size: 14.5px; color: #243040; text-align: left; }
.ll-answer .thanks { font-size: 14.5px; color: #5A6472; margin: -8px 0 22px; text-align: left; }
.ll-answer .q-list { list-style: none; display: grid; gap: 8px; margin-top: 8px; }
.ll-answer .q-list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: start;
  background: #ffffff;
  border: 1px solid #E4DFD4;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14.5px;
  text-align: left;
}
.ll-answer .num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #E1F5EE;
  color: #0F6E56;
  font-size: 13px;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.ll-answer .safe { margin-top: 10px; }
.ll-answer .safe h3 { font-size: 13px; font-weight: 600; color: #0D1B2A; margin-bottom: 8px; text-align: left; }
.ll-answer .safe ul { list-style: none; display: grid; gap: 6px; }
.ll-answer .safe li { font-size: 13.5px; background: #F8F5EE; border-radius: 8px; padding: 9px 12px; text-align: left; }
.ll-answer .safe li strong { font-weight: 600; }
.ll-answer .disclaimer {
  margin-top: 26px;
  background: #FDF6E7;
  border: 1px solid rgba(181, 118, 10, 0.22);
  border-radius: 12px;
  padding: 16px 18px 18px;
  text-align: left;
}
.ll-answer .disclaimer h2 {
  color: #B5760A;
  border-bottom-color: rgba(181, 118, 10, 0.2);
}
.ll-answer .disclaimer p { font-size: 14px; color: #3d3424; margin-bottom: 8px; text-align: left; }
.ll-answer .disclaimer p:last-of-type { margin-bottom: 14px; }
.ll-answer .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #0F6E56;
  color: white;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 11px 18px;
  border-radius: 999px;
}
.ll-answer .btn:hover { background: #168066; }
.ll-answer .btn span { font-size: 16px; line-height: 1; }

/* ============================================================
   Nav dropdown (Products menu)
   ============================================================ */
.nav-dd { position: relative; }
.nav-dd details { position: relative; }
.nav-dd summary {
  list-style: none; cursor: pointer; font-size: 0.875rem;
  color: var(--text-muted); display: inline-flex; align-items: center; gap: 0.3rem;
}
.nav-dd summary::-webkit-details-marker { display: none; }
.nav-dd summary::after {
  content: ""; width: 0; height: 0; margin-top: 1px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 4px solid currentColor; opacity: 0.6;
}
.nav-dd summary:hover, .nav-dd summary.active { color: var(--navy); }
.nav-dd details[open] summary { color: var(--navy); }
.nav-menu {
  position: absolute; top: calc(100% + 0.6rem); left: 50%; transform: translateX(-50%);
  min-width: 200px; background: var(--warm-white);
  border: 0.5px solid var(--border); border-radius: 10px;
  box-shadow: 0 18px 44px rgba(13, 27, 42, 0.12);
  padding: 0.4rem; list-style: none; z-index: 200;
}
.nav-menu li { display: block; }
.nav-menu a {
  display: block; padding: 0.5rem 0.7rem; border-radius: 7px;
  font-size: 0.875rem; color: var(--text-muted); text-decoration: none; white-space: nowrap;
}
.nav-menu a:hover { background: var(--teal-pale); color: var(--teal); }
.nav-menu a.active { color: var(--teal); font-weight: 500; }

/* ============================================================
   Entity Status Check
   ============================================================ */
.entity-wrap { max-width: 820px; margin: 0 auto; padding: 1.75rem 1.5rem 2.5rem; }
.entity-wrap .card {
  background: white; border: 0.5px solid var(--border);
  border-radius: 14px; padding: 1.5rem;
}
.entity-wrap .row-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0.9rem; }
.entity-wrap .field { margin-bottom: 0.4rem; }
.entity-wrap label {
  display: block; font-size: 0.8rem; font-weight: 500;
  margin-bottom: 0.32rem; text-align: left; color: var(--navy);
}
.entity-wrap input, .entity-wrap select {
  width: 100%; font-family: var(--sans); font-size: 0.93rem; color: var(--navy);
  padding: 0.62rem 0.75rem; border: 0.5px solid var(--border);
  border-radius: 7px; background: var(--warm-white);
}
.entity-wrap input:focus, .entity-wrap select:focus {
  outline: none; border-color: var(--teal); background: white;
}
.entity-wrap .hint {
  font-size: 0.79rem; color: var(--text-muted);
  line-height: 1.55; margin: 0.9rem 0 1.1rem; text-align: left;
}
.entity-wrap .actions { display: flex; gap: 0.7rem; align-items: center; flex-wrap: wrap; }
.live-tag {
  font-size: 0.68rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--teal); background: var(--teal-pale); padding: 0.3rem 0.65rem; border-radius: 100px;
}
.entity-wrap .note, .entity-wrap .empty, .entity-wrap .err {
  font-size: 0.88rem; color: var(--text-muted); line-height: 1.6;
  margin-top: 1.1rem; text-align: left;
}
.entity-wrap .err { color: #A66A14; }

.result {
  background: white; border: 0.5px solid var(--border);
  border-left: 3px solid var(--teal); border-radius: 12px;
  padding: 1.1rem 1.25rem; margin-top: 1rem;
}
.result h3 {
  font-family: var(--serif); font-size: 1.2rem; font-weight: 400;
  color: var(--navy); margin-bottom: 0.7rem; text-align: left;
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
}
.result .meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.45rem 1.2rem;
}
.result .meta div { font-size: 0.85rem; color: var(--text-muted); text-align: left; }
.result .meta strong { color: var(--navy); font-weight: 500; }
.result-caveat {
  margin-top: 0.8rem; padding: 0.7rem 0.9rem;
  background: #FDF6E7; border-radius: 8px;
  font-size: 0.82rem; color: #4A3B1F; line-height: 1.55; text-align: left;
}

.status-pill {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 0.25rem 0.6rem; border-radius: 100px;
  white-space: nowrap;
}
.status-pill.ok  { background: var(--teal-pale); color: var(--teal); }
.status-pill.bad { background: #FBEDEA; color: #A32B18; }
.status-pill.mid { background: #FDF6E7; color: #9A6A12; }
.status-pill.unk { background: #EFF1F3; color: #5A6472; }

@media (max-width: 700px) {
  .entity-wrap .row-3 { grid-template-columns: 1fr; }
}

/* ============================================================
   FAQ block, shared by pricing.html and about.html
   ============================================================ */
.faq { max-width: 640px; margin: 2.5rem auto 0; }
.faq h3 {
  font-family: var(--serif); font-size: 1.3rem; font-weight: 400;
  color: var(--navy); text-align: center; margin-bottom: 1.15rem;
}
.faq-item { border-bottom: 0.5px solid var(--border); padding: 1rem 0; }
.faq-item:first-of-type { border-top: 0.5px solid var(--border); }
.faq-q {
  font-size: 0.95rem; font-weight: 500; color: var(--navy);
  margin-bottom: 0.35rem; text-align: left;
}
.faq-a { font-size: 0.88rem; color: var(--text-muted); line-height: 1.6; }

/* ============================================================
   Report sheet, shared by Scan result and CPOM result.
   Navy is a finished-report cover. Do not use it for Chat or Entity.
   ============================================================ */
.report-sheet {
  background: var(--warm-white);
  border: 0.5px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 56px rgba(13, 27, 42, 0.07);
  margin-top: 1.75rem;
}
.report-head {
  background: linear-gradient(180deg, #16283A 0%, var(--navy) 100%);
  color: #E8E2D6;
  padding: 1.4rem 1.6rem 1.25rem;
}
.report-head .kicker {
  font-size: 0.65rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: #8FCBB8; margin-bottom: 0.5rem;
}
.report-head h2 {
  font-family: var(--serif); font-size: 1.5rem; font-weight: 400;
  color: #F7F3EA; line-height: 1.2; text-align: left;
}
.report-head a { color: #8FCBB8; font-size: 0.82rem; text-decoration: none; border-bottom: 1px solid rgba(143,203,184,0.35); }
.report-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: rgba(255,255,255,0.09); margin-top: 1.1rem;
  border-radius: 10px; overflow: hidden;
}
.report-stat { background: #16283A; padding: 0.7rem 0.85rem; }
.report-stat b {
  display: block; font-family: var(--serif); font-size: 1.6rem;
  font-weight: 400; color: #F7F3EA; line-height: 1;
}
.report-stat span { font-size: 0.68rem; color: #9AA6B2; letter-spacing: 0.03em; }
.report-body { padding: 0.5rem 1.6rem 1.75rem; }
.report-sec { padding: 1.35rem 0; border-top: 0.5px solid var(--border); }
.report-sec:first-child { border-top: 0; }
.report-sec h3 {
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--teal); margin-bottom: 0.5rem; text-align: left;
}
.report-sec .lede {
  font-size: 0.94rem; color: var(--text-main); margin-bottom: 0.85rem;
  text-align: left !important; max-width: none !important;
}
.report-note { font-size: 0.82rem; color: var(--text-muted); margin-top: 0.75rem; text-align: left; }
.report-disc {
  background: #FDF6E7; border-radius: 12px;
  padding: 1.1rem 1.25rem 1.25rem; margin-top: 0.5rem;
}
.report-disc h3 { color: #9A6A12; }
.report-disc p { font-size: 0.85rem; color: #4A3B1F; margin-bottom: 0.5rem; text-align: left; }
.report-disc .btn-report {
  display: inline-block; margin-top: 0.5rem; background: var(--navy);
  color: var(--cream); text-decoration: none; font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.02em; padding: 0.65rem 1.15rem; border-radius: 999px;
}
.report-disc .btn-report:hover { background: #16283A; }
@media (max-width: 620px) {
  .report-stats { grid-template-columns: 1fr; }
  .report-head, .report-body { padding-left: 1.1rem; padding-right: 1.1rem; }
}

/* Shared tool form card, used by Entity, Scan input, and any future lookup */
.tool-form { max-width: 760px; margin: 0 auto; padding: 1.75rem 1.5rem 0; }
.tool-form .card {
  background: white; border: 0.5px solid var(--border);
  border-radius: 14px; padding: 1.5rem;
}
.tool-form .row-3 { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 0.9rem; }
.tool-form .field { margin-bottom: 0.4rem; }
.tool-form label {
  display: block; font-size: 0.8rem; font-weight: 500;
  margin-bottom: 0.32rem; text-align: left; color: var(--navy);
}
.tool-form input, .tool-form select {
  width: 100%; font-family: var(--sans); font-size: 0.93rem; color: var(--navy);
  padding: 0.62rem 0.75rem; border: 0.5px solid var(--border);
  border-radius: 7px; background: var(--warm-white);
}
.tool-form input:focus, .tool-form select:focus {
  outline: none; border-color: var(--teal); background: white;
}
.tool-form .hint {
  font-size: 0.79rem; color: var(--text-muted);
  line-height: 1.55; margin: 0.9rem 0 1.1rem; text-align: left;
}
.tool-form .actions { display: flex; gap: 0.7rem; align-items: center; flex-wrap: wrap; }
@media (max-width: 700px) { .tool-form .row-3 { grid-template-columns: 1fr; } }

/* Facility license result extras */
.result-dba { font-size: 0.84rem; color: var(--text-muted); margin: -0.35rem 0 0.6rem; text-align: left; }

/* ============================================================
   Forms and notices checklist
   ============================================================ */
.forms-wrap .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.forms-wrap .counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin: 1.4rem 0 0.4rem; }
.forms-wrap .count {
  background: white; border: 0.5px solid var(--border);
  border-radius: 10px; padding: 0.7rem 0.75rem;
}
.forms-wrap .count b { display: block; font-family: var(--serif); font-size: 1.4rem; font-weight: 400; color: var(--navy); }
.forms-wrap .count span { font-size: 0.72rem; color: var(--text-muted); }
.forms-wrap .sec { margin-top: 1.4rem; }
.forms-wrap .sec h2 {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--teal); margin-bottom: 0.55rem; text-align: left;
}
.forms-wrap .item {
  background: white; border: 0.5px solid var(--border); border-radius: 10px;
  padding: 0.85rem 0.95rem; margin-bottom: 0.45rem;
  display: grid; grid-template-columns: 18px 1fr; gap: 0.7rem;
  align-items: start; cursor: pointer;
}
.forms-wrap .item:hover { border-color: var(--teal); }
.forms-wrap .item input { margin-top: 0.28rem; accent-color: var(--teal); }
.forms-wrap .item h3 { font-size: 0.93rem; font-weight: 600; text-align: left; color: var(--navy); }
.forms-wrap .item p { font-size: 0.81rem; color: var(--text-muted); margin-top: 0.2rem; text-align: left; }
.forms-wrap .meta { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.45rem; align-items: center; }
.forms-wrap .pill {
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; border-radius: 100px; padding: 0.15rem 0.5rem;
}
.forms-wrap .pill.req { background: var(--teal-pale); color: var(--teal); }
.forms-wrap .pill.typ { background: #EEF1F4; color: var(--text-muted); text-transform: none; letter-spacing: 0; font-weight: 500; }
.forms-wrap .pill.iff { background: #FDF6E7; color: #B5760A; text-transform: none; letter-spacing: 0; font-weight: 500; }
.forms-wrap .cite { font-size: 0.75rem; color: var(--teal); text-decoration: none; font-weight: 600; }
.forms-wrap .cite:hover { text-decoration: underline; }
.forms-wrap .note { margin-top: 0.8rem; font-size: 0.85rem; color: var(--text-muted); text-align: left; }
@media (max-width: 700px) {
  .forms-wrap .row-2 { grid-template-columns: 1fr; }
  .forms-wrap .counts { grid-template-columns: 1fr 1fr; }
}
.forms-wrap .pill.ver { background: #EAF3DE; color: #3B6D11; text-transform: none; letter-spacing: 0; font-weight: 500; }
.forms-wrap .currency-note {
  margin-top: 0.7rem; padding: 0.8rem 1rem;
  background: #FDF6E7; border-left: 3px solid #B5760A; border-radius: 0 8px 8px 0;
  font-size: 0.8rem; color: #4A3B1F; line-height: 1.55; text-align: left;
}
.forms-wrap .currency-note strong { color: #B5760A; font-weight: 600; }
.forms-wrap .item p, .forms-wrap .note, .forms-wrap .currency-note {
  text-align: justify; -webkit-hyphens: none; hyphens: none; word-break: normal; overflow-wrap: break-word;
}
.forms-wrap .meta { margin: 0.45rem 0 0.45rem; }

/* Words never break across lines. Justified text may space out instead. */
* { -webkit-hyphens: none !important; hyphens: none !important; }

/* ============================================================
   Mobile nav. Kept last so it overrides the desktop dropdown
   positioning defined earlier in this file.
   ============================================================ */
@media (max-width: 800px) {
  nav { padding: 0.85rem 1.25rem; flex-wrap: wrap; }
  .page-hero { padding: 2rem 1.25rem 1.5rem; }

  /* Hamburger replaces the inline nav */
  .nav-toggle { display: flex; }

  .nav-links {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    order: 3;
    margin-top: 0.85rem;
    padding-top: 0.6rem;
    border-top: 0.5px solid var(--border);
  }
  nav.nav-open .nav-links { display: flex; }

  .nav-links > li { width: 100%; }
  .nav-links > li > a,
  .nav-dd summary {
    display: block;
    padding: 0.7rem 0.25rem;
    font-size: 0.95rem;
  }

  /* The Products group opens inline rather than as a floating panel */
  .nav-dd { position: static; }
  .nav-dd summary { justify-content: space-between; }
  .nav-menu {
    position: static;
    transform: none;
    min-width: 0;
    width: 100%;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--border);
    border-radius: 0;
    margin: 0 0 0.35rem 0.25rem;
    padding: 0 0 0 0.6rem;
  }
  .nav-menu a { padding: 0.55rem 0.5rem; font-size: 0.9rem; }

  .nav-cta {
    text-align: center;
    margin-top: 0.6rem;
    padding: 0.7rem 1.1rem !important;
  }
}

/* Marketing Scan result extras */
.pages-read { list-style: none; margin: 0 0 0.6rem; }
.pages-read li {
  font-size: 0.79rem; color: var(--text-muted); text-align: left;
  padding: 0.3rem 0 0.3rem 0.9rem; position: relative; word-break: break-all;
}
.pages-read li:before {
  content: ""; position: absolute; left: 0; top: 0.72em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--teal);
}
#scan-out .err {
  font-size: 0.92rem; color: #A66A14; background: #FDF6E7;
  border-left: 3px solid #B5760A; border-radius: 0 8px 8px 0;
  padding: 0.85rem 1rem; margin-top: 1.2rem; text-align: left;
}
#scan-out .report-note { margin-top: 1.1rem; }

/* The stats grid is three fixed columns, so any header carrying fewer than
   three tiles needs to say so or it leaves empty cells that read as a broken
   render. Two tiles normally, one when the page could not be read. */
.report-stats.duo  { grid-template-columns: 1fr 1fr; }
.report-stats.solo { grid-template-columns: 1fr; }

/* Shown in place of the notice list when the page could not be read. Amber,
   like the risk flags, because it is a caution about the result and not a
   finding about the site. */
.unreadable {
  background: #FDF6E7;
  border-left: 3px solid #B5760A;
  border-radius: 0 10px 10px 0;
  padding: 1.1rem 1.25rem;
}
.unreadable h4 {
  font-size: 0.95rem;
  font-weight: 500;
  color: #8A6A2A;
  margin: 0 0 0.6rem;
}
.unreadable p {
  font-size: 0.88rem;
  color: #4A3B1F;
  text-align: justify;
  hyphens: none;
  margin: 0 0 0.6rem;
}
.unreadable p:last-child { margin-bottom: 0; }
.notice .pull { margin-top: 0.5rem; font-size: 0.9rem; padding: 0.6rem 0.8rem; }
.notice .cite { margin-left: 0.25rem; }

/* ----------------------------------------------------------------------
   Start here router (/start)
   A router, not a product page. Live tokens only, no second palette.
   ---------------------------------------------------------------------- */
.router-hero { padding-bottom: 1.25rem; border-bottom: 0; }
.router-wrap { max-width: 720px; margin: 0 auto; padding: 0.5rem 1.5rem 4rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.route-search {
  display: flex; gap: 8px; align-items: center;
  background: #fff;
  border: 0.5px solid var(--border);
  border-radius: 14px;
  padding: 8px 8px 8px 16px;
  box-shadow: 0 16px 40px rgba(13,27,42,0.05);
}
.route-search svg { width: 18px; height: 18px; color: var(--teal); flex-shrink: 0; }
.route-search input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font-family: var(--sans); font-size: 16px; line-height: 1.4;
  color: var(--navy); padding: 10px 4px;
}
.route-search input::placeholder { color: var(--text-light); }
.route-search .btn-primary { padding: 0.7rem 1rem; font-size: 0.875rem; white-space: nowrap; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 0.875rem; }
.chip {
  border: 0.5px solid var(--border); background: #fff; color: var(--navy);
  font-family: var(--sans); font-weight: 500; font-size: 0.845rem; line-height: 1.2;
  padding: 0.5rem 0.75rem; border-radius: 999px; cursor: pointer;
  text-align: left; hyphens: none;
}
.chip:hover, .chip.on { border-color: var(--teal); background: var(--teal-pale); color: var(--teal); }

.router-hint { font-size: 0.78rem; color: var(--text-light); margin-top: 0.625rem; text-align: left; }

.route-result {
  display: none; margin-top: 1.125rem; background: #fff;
  border: 0.5px solid var(--border); border-radius: 14px;
  padding: 1.25rem 1.3rem 1.35rem;
}
.route-result.show { display: block; }
.route-result .kicker {
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--teal); margin-bottom: 0.375rem;
}
.route-result h2 {
  font-family: var(--serif); font-size: 1.7rem; font-weight: 400;
  color: var(--navy); letter-spacing: -0.02em;
}
.route-result > p {
  color: var(--text-muted); font-size: 0.95rem; margin: 0.5rem 0 1rem;
  text-align: left; hyphens: none;
}
.route-result .go {
  display: inline-flex; background: var(--navy); color: var(--warm-white);
  text-decoration: none; font-size: 0.92rem; font-weight: 500;
  padding: 0.7rem 1rem; border-radius: 8px;
}
.route-result .go:hover { background: var(--navy-mid); }
.route-result .alt { display: block; margin-top: 0.625rem; font-size: 0.8rem; color: var(--text-light); }
.route-result .also { margin-top: 1rem; padding-top: 0.875rem; border-top: 0.5px solid var(--border); }
.route-result .also b {
  display: block; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-light); margin-bottom: 0.375rem;
}
.route-result .also a { color: var(--teal); font-weight: 500; text-decoration: none; }
.route-result .also a:hover { text-decoration: underline; }
.route-result .also p { margin: 0.25rem 0 0; font-size: 0.85rem; color: var(--text-muted); text-align: left; hyphens: none; }

/* Homepage text link to the router, above the pricing block. */
.router-line { text-align: center; font-size: 0.9rem; color: var(--text-muted); margin-top: 1.75rem; }
.router-line a { color: var(--teal); font-weight: 500; text-decoration: none; }
.router-line a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .route-search { flex-wrap: wrap; padding: 10px; }
  .route-search .btn-primary { width: 100%; }
}

/* ============================================================
   Chat: free-question counter and the end-of-trial prompt

   The counter is quiet on purpose. It only raises its voice at the last
   question, and it uses --field-bad rather than amber: running out of a free
   trial is not a risk flag, and #B5760A means one thing on this site.
   ============================================================ */
.chat-quota {
  font-size: 0.8rem; color: var(--text-muted);
  margin: 0.6rem 0 0; text-align: left; hyphens: none;
}
.chat-quota.low { color: var(--field-bad); font-weight: 500; }
.chat-quota[hidden] { display: none; }

.chat-limit {
  background: var(--cream); border: 0.5px solid var(--border);
  border-radius: 14px; padding: 1.5rem; margin-top: 0.75rem;
}
.chat-limit[hidden] { display: none; }
.chat-limit h3 {
  font-family: var(--serif); font-size: 1.35rem; font-weight: 400;
  color: var(--navy); margin-bottom: 0.4rem; text-align: left;
}
.chat-limit > p {
  font-size: 0.92rem; color: var(--text-muted); line-height: 1.6;
  margin-bottom: 1.1rem; text-align: left; hyphens: none;
}
.chat-limit-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.chat-limit .chat-limit-note {
  font-size: 0.8rem; color: var(--text-light); line-height: 1.55;
  margin: 1.1rem 0 0; text-align: left; hyphens: none;
}

@media (max-width: 520px) {
  .chat-limit-actions { flex-direction: column; }
  .chat-limit-actions .btn-primary,
  .chat-limit-actions .btn-ghost { width: 100%; text-align: center; }
}

/* ============================================================
   Accounts: login, signup, account

   Field styling deliberately mirrors .entity-wrap rather than reusing it,
   because those rules are scoped to that wrapper. Same metrics, same focus
   treatment, so the two forms read as one product.

   Validation and failure states use a muted brick, not amber. Amber #B5760A
   is reserved for risk flags and conditional pills, and a failed password is
   not a risk flag.
   ============================================================ */
.auth-wrap { max-width: 460px; margin: 0 auto; padding: 2.25rem 1.5rem 3rem; }
.auth-wrap.wide { max-width: 560px; }

.auth-card {
  background: white; border: 0.5px solid var(--border);
  border-radius: 14px; padding: 1.75rem;
  box-shadow: 0 1px 3px rgba(13,27,42,0.03);
}
.auth-card h1 {
  font-family: var(--serif); font-size: 1.9rem; font-weight: 400;
  color: var(--navy); margin-bottom: 0.3rem; text-align: left;
}
.auth-card h1 em { font-style: italic; color: var(--teal); }
/* .lede is a global class. The weight is pinned because the global rule asks
   for 300 and no 300 face of DM Sans is loaded on this site. */
.auth-card > p.lede {
  font-size: 0.88rem; font-weight: 400; color: var(--text-muted); line-height: 1.6;
  margin-bottom: 1.35rem; text-align: left; hyphens: none;
}

.auth-wrap .field { margin-bottom: 0.9rem; }
.auth-wrap label {
  display: block; font-size: 0.8rem; font-weight: 500;
  margin-bottom: 0.32rem; text-align: left; color: var(--navy);
}
/* Named .auth-opt, not .opt: a global .opt already exists on this site and it
   is a bordered, padded button face. Same reason .consent is avoided below. */
.auth-wrap label .auth-opt { font-weight: 400; color: var(--text-light); }
.auth-wrap input[type="text"],
.auth-wrap input[type="email"],
.auth-wrap input[type="password"] {
  width: 100%; font-family: var(--sans); font-size: 0.93rem; color: var(--navy);
  padding: 0.62rem 0.75rem; border: 0.5px solid var(--border);
  border-radius: 7px; background: var(--warm-white);
}
.auth-wrap input:focus {
  outline: none; border-color: var(--teal); background: white;
}
.auth-wrap input.bad { border-color: var(--field-bad); background: var(--field-bad-pale); }

.auth-wrap .auth-consent {
  display: flex; align-items: flex-start; gap: 0.55rem;
  margin: 1.1rem 0 1.2rem;
}
.auth-wrap .auth-consent input[type="checkbox"] {
  width: 15px; height: 15px; margin-top: 0.22rem;
  accent-color: var(--teal); flex: none;
}
.auth-wrap .auth-consent label {
  font-size: 0.85rem; font-weight: 400; color: var(--text-muted);
  line-height: 1.55; margin: 0; hyphens: none;
}
.auth-wrap .auth-consent a { color: var(--teal); font-weight: 500; text-decoration: none; }
.auth-wrap .auth-consent a:hover { text-decoration: underline; }

.auth-wrap .btn-primary { width: 100%; text-align: center; }
.auth-wrap .btn-primary[disabled] { opacity: 0.55; cursor: default; }
.auth-wrap .btn-primary[disabled]:hover { background: var(--teal); }

.auth-msg {
  font-size: 0.85rem; line-height: 1.55; text-align: left; hyphens: none;
  border-radius: 8px; padding: 0.7rem 0.85rem; margin-bottom: 1.1rem;
}
.auth-msg.bad {
  color: var(--field-bad); background: var(--field-bad-pale);
  border: 0.5px solid var(--field-bad-line);
}
.auth-msg.ok {
  color: var(--teal); background: var(--teal-pale);
  border: 0.5px solid rgba(15,110,86,0.2);
}
.auth-msg[hidden] { display: none; }

.auth-alt {
  font-size: 0.85rem; color: var(--text-muted);
  margin-top: 1.1rem; text-align: center;
}
.auth-alt a { color: var(--teal); font-weight: 500; text-decoration: none; }
.auth-alt a:hover { text-decoration: underline; }

.auth-note {
  font-size: 0.8rem; color: var(--text-muted); line-height: 1.6;
  margin-top: 1.25rem; text-align: left; hyphens: none;
}

/* Account page rows */
.acct-rows { border-top: 0.5px solid var(--border); margin-top: 0.25rem; }
.acct-rows .r {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; padding: 0.8rem 0; border-bottom: 0.5px solid var(--border);
}
.acct-rows .k {
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-light); flex: none;
}
.acct-rows .v { font-size: 0.93rem; color: var(--navy); text-align: right; word-break: break-word; }
.acct-rows .v.muted { color: var(--text-light); }

.acct-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.4rem; }
.acct-actions .btn-ghost { flex: none; }

@media (max-width: 520px) {
  .acct-rows .r { flex-direction: column; gap: 0.2rem; }
  .acct-rows .v { text-align: left; }
}

/* ============================================================================
   Chat memo renderer. Build spec v5.

   Everything here is namespaced memo- because .gaps already belongs to the
   Risk Check charts and a second meaning for it would have collided.

   Colour carries no verdict. Stated facts are neutral, on the warm white the
   rest of the page uses: an early draft put them in teal panels and four teal
   panels in a row reads as approval, which this tool must never imply. Amber
   is for gaps, for the separate-question flag, and for the lawyer block, which
   are the three places the reader is being told something is unresolved.
   ============================================================================ */

/* 780px, up from 720, inside the 720 to 820 reading range and in the same
   family as the Website Scan and Contract Scan pages. */
.memo-wrap { max-width: 780px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }

/* Sample switcher. A build affordance, outside the memo itself. */
.memo-tabs { display: flex; gap: 0.4rem; margin-bottom: 0.9rem; }
.memo-tab {
  flex: 1; background: var(--warm-white); border: 0.5px solid var(--border);
  border-radius: 9px; padding: 0.55rem 0.5rem;
  font: 500 0.78rem 'DM Sans', system-ui, sans-serif;
  color: var(--text-muted); cursor: pointer;
}
.memo-tab.on { background: var(--navy); color: var(--cream); border-color: var(--navy); }
.memo-tab:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.memo {
  background: var(--warm-white); border: 0.5px solid var(--border);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 18px 50px rgba(13,27,42,0.08);
}

.memo-top {
  background: linear-gradient(180deg, var(--navy-mid), var(--navy));
  color: #E8E2D6; padding: 1.4rem 1.6rem 1.3rem;
}

/* The three things you can do with an answer, in one row at the foot.

   Hierarchy is carried by weight, not by distance. Contact a lawyer is the
   filled primary. Download PDF is the same size and outlined, clearly
   second. Copy is a text control, because it is a utility rather than a
   decision. They sat apart before, with these two shrunk into the navy
   band, and the download was too small to read as an action. */
.memo-acts {
  display: flex; gap: 0.7rem; align-items: center; flex-wrap: wrap;
  margin-top: 0.15rem;
}

/* One box for both buttons. A <button> and an inline-block <button> styled
   as a link do not measure the same way on their own: the UA line-height
   differs and Chrome rounds a 1.5px border down to 1px, so matching them by
   padding arithmetic drifts by a few pixels. Fixed height, centred content
   and a border on both, transparent on the filled one, so the two are the
   same object in two colours. */
.memo-acts .memo-btn, .memo-acts .memo-pdf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.6rem; padding: 0 1.2rem; border-radius: 999px;
  font-family: var(--sans); font-size: 0.87rem; font-weight: 600;
  line-height: 1; border: 2px solid transparent; cursor: pointer;
  hyphens: none; white-space: nowrap;
}
.memo-acts .memo-btn { background: var(--navy); color: var(--cream); }
.memo-acts .memo-btn:disabled { opacity: 0.55; cursor: default; }

.memo-pdf {
  background: transparent; border-color: var(--navy) !important; color: var(--navy);
  transition: background 0.15s, color 0.15s;
}
.memo-pdf:hover { background: var(--navy); color: var(--cream); }
.memo-pdf:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

.memo-copy {
  background: none; border: 0; color: var(--navy);
  font-family: var(--sans); font-size: 0.85rem;
  text-decoration: underline; padding: 0.4rem 0.2rem;
  cursor: pointer; hyphens: none; white-space: nowrap;
}
.memo-copy:hover { color: var(--teal); }
.memo-copy:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.memo-copy.is-done { color: var(--teal); text-decoration: none; font-weight: 600; }
.memo-copy.is-bad { color: #9C3A2E; text-decoration: none; }

/* On a phone the two buttons go full width and stack, so neither ends up a
   thumb-width apart from the other. Copy stays a link and stays inline. */
@media (max-width: 560px) {
  .memo-acts { gap: 0.55rem; }
  .memo-acts .memo-btn, .memo-acts .memo-pdf {
    flex: 1 1 100%; text-align: center;
  }
}

/* Print only. Invisible on screen, so neither changes the memo's layout. */
.memo-print-head, .memo-print-foot { display: none; }
.memo-where { font-size: 0.72rem; color: var(--teal-pale); margin-bottom: 0.5rem; }
.memo-headline {
  font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
  font-size: 1.5rem; line-height: 1.25; color: var(--cream);
}

.memo-body { padding: 1.5rem 1.6rem 1.75rem; }
.memo-sec { padding-top: 1.55rem; margin-top: 1.55rem; border-top: 0.5px solid var(--border); }
.memo-sec:first-child { padding-top: 0; margin-top: 0; border-top: 0; }

.memo-h {
  font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
  /* 1.32rem, up from 1.22. "Your situation" sits between the lead and its
     own paragraph and was reading as a line of prose rather than a section.
     Raised here rather than on that one heading so it stays the same system
     as "The law this comes from" and "What a lawyer decides". */
  /* ONE SECTION HEADING FOR ALL FIVE. Summary and To go further were tiny
     uppercase eyebrows in teal and amber, and What a lawyer decides was this
     serif in amber, so five sections carried three treatments and three
     colours. They are all this now: serif, 1.15rem, navy, sentence case.
     The containers carry the meaning; the heading does not need to. */
  font-size: 1.15rem; line-height: 1.35; margin-bottom: 0.55rem; color: var(--navy);
}
/* .memo-h-amber retired on 5 Oct 2026: the five section headings are one
   colour now, and the container carries the meaning. */

.memo-label {
  font-size: 0.63rem; font-weight: 600; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--teal); margin-bottom: 0.5rem;
}
.memo-label-amber { color: var(--amber-text); }

/* No fill. Section 22: Summary, Your situation and To go further do not all
   need large independent cards, and a container should say something. The
   distinct treatments are kept for the four that earn them: the question, the
   primary source, the lawyer-judgment boundary, and the handoff. */
.memo-summary { background: none; border-radius: 0; padding: 0; }

.memo-summary > .memo-label { margin-bottom: 0.75rem; }
/* The lead answer, not paragraph one of a memo. Modestly larger than body
   copy and more open, with no card and no fill: the weight comes from the
   type, not from a container. 60em caps the measure so the longer line does
   not run past a comfortable reading length. */
/* THE BODY SYSTEM. One size and one line height for every explanatory
   paragraph in the answer: the summary, the situation, the plain-English
   source line and the lawyer paragraph. Summary keeps its emphasis through
   position and spacing rather than through a font size of its own.

   Justified, with hyphens off as everywhere else in this repo, which is why
   the measure matters. Left aligned again under 560px, where justification
   opens visible rivers in a narrow column. */
.memo-summary p {
  font-size: 1rem; line-height: 1.65;
  color: var(--text-main); text-align: justify; text-justify: inter-word; hyphens: none;
}
.memo-summary p + p { margin-top: 0.8rem; }

.memo-sit p { font-size: 1rem; line-height: 1.65; color: var(--text-main); text-align: justify; text-justify: inter-word; hyphens: none; }
.memo-sit p + p { margin-top: 0.7rem; }
.memo-sit b { font-weight: 600; color: var(--navy); }

/* A rule, not a fill. It and "What a lawyer decides" were the same amber
   panel, which flattened the difference between a prompt for more facts and
   the boundary of the product. The amber fill stays on the boundary. */
.memo-gaps {
  margin-top: 1.15rem; background: none;
  border-left: 3px solid var(--amber-border); border-radius: 0;
  padding: 0.2rem 0 0.2rem 1.1rem;
}
.memo-gaps ul { list-style: none; margin: 0; padding: 0; }
.memo-gaps li {
  font-size: 0.97rem; line-height: 1.6; color: var(--text-main); text-align: left; hyphens: none;
  padding: 0.25rem 0 0.25rem 1rem; position: relative;
}
.memo-gaps li:before {
  content: ""; position: absolute; left: 0; top: 0.85em; width: 4px; height: 4px;
  border-radius: 50%; background: var(--amber-border);
}

.memo-note {
  margin-top: 1rem; padding: 0.75rem 0.95rem; background: var(--warm-white);
  border: 0.5px solid var(--border); border-radius: 9px;
  font-size: 0.89rem; color: var(--text-muted); text-align: left; hyphens: none;
}

/* The uncovered-state line, above the Summary. Same quiet recipe as
   .memo-note: warm-white fill, hairline border, muted text. Deliberately NOT
   amber and deliberately no icon. Amber means a risk flag on this site and a
   state we do not hold yet is not a risk, it is a fact about our coverage.

   margin-bottom rather than margin-top, because this sits at the TOP of the
   body with the Summary under it, where every other memo block sits below
   something. */
.memo-coverage {
  margin-bottom: 1.1rem; padding: 0.75rem 0.95rem; background: var(--warm-white);
  border: 0.5px solid var(--border); border-radius: 9px;
}
.memo-coverage p {
  margin: 0; font-size: 0.89rem; line-height: 1.55; color: var(--text-muted);
  text-align: left; hyphens: none;
}

.memo-flag {
  margin-top: 0.6rem; background: var(--amber-pale);
  border-left: 3px solid var(--amber-border); border-radius: 0 10px 10px 0;
  padding: 0.9rem 1.1rem;
}
.memo-flag p { font-size: 0.92rem; color: var(--text-main); text-align: left; hyphens: none; }
.memo-flag-q {
  display: block; margin-top: 0.5rem; font-style: italic;
  color: var(--text-muted); font-size: 0.88rem;
}
.memo-ask {
  display: inline-block; margin-top: 0.65rem; background: var(--navy);
  color: var(--cream); border: 0; border-radius: 999px; padding: 0.5rem 1rem;
  font: 600 0.8rem 'DM Sans', system-ui, sans-serif; cursor: pointer;
}
.memo-ask:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.memo-law {
  border: 0.5px solid var(--border); border-left: 3px solid var(--teal);
  border-radius: 10px; padding: 0.95rem 1.1rem; background: var(--warm-white);
}
.memo-law + .memo-law { margin-top: 0.65rem; }
/* 0.95rem, raised from 0.81. The citation was the smallest text in its own
   card, under the plain sentence at 0.9 and the statute at 0.86, which is the
   wrong way round: the citation is what the card is. */
.memo-cite {
  font-size: 0.95rem; font-weight: 600; color: var(--teal); text-decoration: none;
  border-bottom: 1px solid rgba(15,110,86,0.35);
}

/* The labelled way to the primary source, under the statute. Quiet, because
   the words of the law above it are the thing being read, but unmistakably
   a link rather than metadata. */
.memo-source {
  display: inline-block; margin-top: 0.7rem;
  font-size: 0.84rem; font-weight: 500; color: var(--teal); text-decoration: none;
}

.memo-source:hover { text-decoration: underline; }
/* No official page to point at, so it is text. Navy rather than teal and no
   underline, because teal-with-a-rule is the link signal everywhere else. */
.memo-cite-flat {
  display: inline-block; color: var(--navy); border-bottom: 0; cursor: default;
}
.memo-law-title {
  font-family: 'Instrument Serif', Georgia, serif; font-size: 1rem;
  margin: 0.25rem 0 0.45rem; color: var(--navy);
}
.memo-law-plain { font-size: 0.98rem; line-height: 1.6; color: var(--text-main); text-align: justify; text-justify: inter-word; hyphens: none; }
.memo-quote {
  background: var(--cream); border-radius: 8px; padding: 0.8rem 0.95rem;
  /* 15px with a generous line height. The statute may sit a little under the
     explanation around it, but it is not fine print. Left aligned: it is
     quoted text and justification is the wrong thing to do to it. */
  margin-top: 0.7rem; font-size: 0.94rem; line-height: 1.7; color: var(--text-main);
  text-align: left; hyphens: none;
}
/* The publisher's editorial Note on a statute card. Labelled and outside the
   quote block, because it is the publisher's statement about a session law
   rather than the words of the section, and until 10 Oct 2026 it ran together
   with the quote. Amber is reserved for risk flags, so this is navy at low
   emphasis: it is context, not a warning. */
.memo-note{margin:.5rem 0 0;font-size:.86rem;line-height:1.5;color:#0D1B2A;opacity:.78;border-left:2px solid rgba(13,27,42,.18);padding-left:.7rem;hyphens:none}
.memo-note-label{display:inline-block;font-weight:600;letter-spacing:.02em;text-transform:uppercase;font-size:.7rem;opacity:.75;margin-right:.1rem}

.memo-src { font-size: 0.73rem; color: var(--text-light); margin-top: 0.5rem; }
.memo-nolaw { font-size: 0.86rem; color: var(--text-muted); margin-top: 0.5rem; }

.memo-lawyer {
  background: var(--amber-pale); border-left: 3px solid var(--amber-border);
  border-radius: 0 12px 12px 0; padding: 1.15rem 1.3rem 1.25rem;
}
.memo-lawyer p { font-size: 1rem; line-height: 1.65; color: var(--text-main); margin-bottom: 0.75rem; text-align: justify; text-justify: inter-word; hyphens: none; }
/* A label, not prose, so it does not take the justification its siblings do.
   Body font, semibold, sentence case: one fewer decorative treatment. */
.memo-lawyer p.memo-bring-head {
  font-size: 0.97rem; font-weight: 600; color: var(--navy);
  text-align: left; margin-bottom: 0.3rem !important;
}
.memo-lawyer ul { list-style: none; margin: 0.25rem 0 0.95rem; padding: 0; }
.memo-lawyer li {
  font-size: 0.97rem; line-height: 1.6; color: var(--text-main); text-align: left; hyphens: none;
  padding: 0.3rem 0 0.3rem 1rem; position: relative;
}
.memo-lawyer li:before {
  content: ""; position: absolute; left: 0; top: 0.86em; width: 4px; height: 4px;
  border-radius: 50%; background: var(--amber-border);
}
.memo-btn {
  display: inline-block; background: var(--navy); color: var(--cream);
  text-decoration: none; font-size: 0.87rem; font-weight: 600;
  padding: 0.65rem 1.2rem; border-radius: 999px;
}

.memo-disc { font-size: 0.79rem; color: var(--text-muted); margin-top: 1.2rem; text-align: left; hyphens: none; }

@media (max-width: 600px) {
  .memo-wrap { padding: 1rem 0.6rem 3rem; }
  .memo-body { padding: 1.2rem 1.1rem 1.5rem; }
  .memo-top { padding: 1.15rem 1.1rem 1.1rem; }
  .memo-headline { font-size: 1.28rem; }
  .memo-tab { font-size: 0.72rem; }
  .memo-quote { word-break: normal; overflow-wrap: break-word; }
}

/* ---------------------------------------------------------------------------
   The Chat composer, shared by chat.html and the homepage hero.

   It lived inline in chat.html until the homepage grew one. Two copies of a
   component is the thing this file exists to avoid, and the nav is already a
   standing lesson in what per-page duplication costs here.

   The homepage carries the input, the acknowledgment and Ask, and nothing
   else. Improve, the memo, the quota line and the free-trial screen stay on
   chat.html, so the rules below have to look right with or without them.

   privacy.html and thanks.html do not load this file. Neither has a
   composer, so that does not matter today. It would if either ever did.
   --------------------------------------------------------------------------- */

.chat-compose {
  display:flex; gap:8px; align-items:center; background:#fff;
  border:0.5px solid var(--border); border-radius:14px; padding:14px;
  box-shadow:0 16px 40px rgba(13,27,42,0.05);
}

/* The field has to look like a field. It was border:0 and transparent,
   which read as a search bar while the composer was one line: input on the
   left, button on the right, the card itself doing the work. The card is
   tall now, with the acknowledgment inside it, and a transparent input in a
   white card is just white. Someone arriving has nothing to click. */
/* A defined border rather than var(--border), which is 10% navy and reads
   as a hairline on a white card. The inset shadow gives the field a floor
   so it looks recessed rather than drawn on. */
.chat-compose input {
  flex:1 1 100%; min-width:0; background:#fff; color:var(--navy);
  border:1px solid rgba(13,27,42,0.22); border-radius:10px; outline:none;
  box-shadow:inset 0 1px 2px rgba(13,27,42,0.05);
  font-family:var(--sans); font-size:16px; padding:0.95rem 1rem;
  cursor:text;
}
.chat-compose input::placeholder { color:var(--text-light); opacity:1; }
.chat-compose input:focus {
  border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(15,110,86,0.12), inset 0 1px 2px rgba(13,27,42,0.04);
}
.chat-compose .btn-primary { padding:0.7rem 1.1rem; font-size:0.875rem; white-space:nowrap; }

/* Improve. The composer holds either the plain input or, once a rewrite
   lands, a live document the user can edit every word of. Only one of the
   two is ever on the page. */
.chat-compose { flex-wrap:wrap; }
.chat-compose-row { display:flex; gap:8px; align-items:center; margin-left:auto; }


/* The acknowledgment, inside the composer and above the buttons, so it is
   read before typing rather than after. It replaces both the consent screen
   and the dot-separated line that used to sit under Ask: the first Ask is the
   affirmative act, and there is one block of copy on the composer, not two.

   The last sentence is an instruction, not a term being agreed to, so it sits
   on its own line rather than running on from the clauses above it. */
.chat-ack {
  flex: 1 1 100%; min-width: 0; margin: 0.35rem 0 0.15rem;
  font-size: 0.75rem; line-height: 1.5; color: var(--text-light);
}
.chat-ack a { color: var(--teal); }
.chat-ack strong { display: block; margin-top: 0.3rem; color: var(--navy); font-weight: 600; }

/* Information, not a promotion. It was teal and semibold, competing with the
   headline above it. */
.hero-trial { margin-top: 0.6rem; font-size: 0.85rem; color: var(--text-muted); }

.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

@media (max-width: 640px) {
  .chat-compose { flex-wrap: wrap; padding: 10px; }
  .chat-compose .btn-primary { width: 100%; }

  /* Body copy is justified across the site and hyphenation is off, which
     works down to a point and not past it. This is a narrow column at 390px
     wide, and the instruction is bold, so justifying it opened rivers wide
     enough to read as a rendering fault on the one sentence that most needs
     to be read. Left aligned here and justified everywhere else. Written for
     the consent screen, kept when that screen became this line. */
  .chat-ack { text-align: left; }
}

/* ---------------------------------------------------------------------------
   Improve, the composer's second state.

   Here rather than in chat.html because the homepage composer has an Improve
   button too, and one component in one place is the rule this file already
   holds the plain composer to.

   The rewrite replaces the input rather than sitting beside it: only one of
   the two is on the page at a time.
   --------------------------------------------------------------------------- */

.improve-fill {
  flex:1 1 100%; min-width:0; background:#fff; border:0.5px solid var(--teal);
  border-radius:10px; padding:0.7rem 0.8rem; margin:2px 0 6px;
  font-family:var(--sans); font-size:16px; line-height:2.1; color:var(--navy);
  text-align:left;
}
.improve-fill:focus { outline:none; box-shadow:0 0 0 3px rgba(15,110,86,0.08); }
.improve-fill[hidden] { display:none; }
/* Amber while the fact is missing, neutral grey once it is filled. Never
   teal and never green, which would read as approval. */
.improve-blank {
  display:inline-block; border-bottom:2px solid var(--amber-border);
  background:#FDF6E7; border-radius:4px 4px 0 0; padding:0.05rem 0.45rem;
  margin:0 0.1rem; font-weight:500; color:#4A3B1F;
}
.improve-blank.empty { font-style:italic; opacity:0.85; }
.improve-blank:not(.empty) {
  background:#EEF0F2; border-bottom-color:#9AA6B2; color:var(--navy); font-style:normal;
}
.improve-btn {
  /* Secondary to Ask, per section 20. It was a teal-bordered teal pill beside
     a filled teal button, which read as a pair of equals. */
  background:#fff; border:1px solid var(--border); color:var(--text-muted); border-radius:999px;
  padding:0.55rem 1.05rem; font-family:var(--sans); font-weight:500; font-size:0.85rem;
  cursor:pointer; display:inline-flex; align-items:center; gap:0.4rem; white-space:nowrap;
}
.improve-btn:hover:not(:disabled) { background:var(--cream); color:var(--navy); border-color:var(--text-light); }
.improve-btn:disabled { opacity:0.45; cursor:default; background:#fff; }
.improve-sp {
  width:12px; height:12px; border:2px solid var(--teal); border-right-color:transparent;
  border-radius:50%; display:none; animation:improve-sp 0.7s linear infinite;
}
.improve-btn.busy .improve-sp { display:inline-block; }
@keyframes improve-sp { to { transform:rotate(360deg); } }
.improve-hint { font-size:0.78rem; color:var(--text-light); margin-top:0.55rem; text-align:left; }
.improve-hint b { color:var(--amber-text); }
.improve-changed { margin-top:0.85rem; background:var(--cream); border-radius:10px; padding:0.85rem 1rem; }
.improve-h {
  font-size:0.63rem; font-weight:600; letter-spacing:0.13em; text-transform:uppercase;
  color:var(--teal); margin-bottom:0.45rem;
}
.improve-changed ul { list-style:none; margin:0; padding:0; }
.improve-changed li {
  font-size:0.86rem; color:#2C3947; padding:0.22rem 0 0.22rem 1rem;
  position:relative; text-align:left;
}
.improve-changed li:before {
  content:""; position:absolute; left:0; top:0.8em; width:4px; height:4px;
  border-radius:50%; background:var(--teal);
}
.improve-rule {
  font-size:0.79rem; color:var(--text-muted); margin-top:0.6rem; padding-top:0.6rem;
  border-top:0.5px solid var(--border); text-align:left;
}
.improve-undo {
  background:none; border:0; color:var(--teal); font-family:var(--sans); font-size:0.8rem;
  cursor:pointer; text-decoration:underline; padding:0; margin-top:0.6rem;
}
.chat-scope { font-size:0.78rem; color:var(--text-light); margin-top:0.6rem; text-align:left; }

/* ---------------------------------------------------------------------------
   The wait, in the shape of the answer.

   Same navy header bar and same cream body as a memo, so what arrives looks
   like what was standing there rather than replacing something different. It
   sits in the thread because that is where someone is looking after pressing
   Ask, not on the button they have just clicked.
   --------------------------------------------------------------------------- */

.memo-pending { overflow: hidden; border-radius: 14px; border: 1px solid var(--border); }

.memo-pending-top {
  height: 64px;
  background: linear-gradient(180deg, #17304a 0%, var(--navy) 100%);
}

.memo-pending-body { padding: 20px 22px 22px; background: var(--warm-white); }

.memo-pending-stage {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--teal);
  margin: 0 0 14px; text-align: left;
}

.memo-pending-lines { display: grid; gap: 10px; }
.memo-pending-lines span {
  display: block; height: 11px; border-radius: 6px; background: #ECE7DC;
  background-image: linear-gradient(90deg, #ECE7DC 0%, #F7F4EC 50%, #ECE7DC 100%);
  background-size: 200% 100%;
  animation: memo-shimmer 1.4s ease-in-out infinite;
}
.memo-pending-lines span:nth-child(2) { width: 92%; animation-delay: 0.15s; }
.memo-pending-lines span:nth-child(3) { width: 68%; animation-delay: 0.3s; }

@keyframes memo-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.memo-pending-still {
  margin: 16px 0 0; font-size: 0.78rem; color: var(--text-light); text-align: left;
}
.memo-pending-still[hidden] { display: none; }

/* The stage text is the evidence and stays. The shimmer is decoration and
   goes: a bar sliding back and forth is exactly what someone who turned
   motion off asked not to see. */
@media (prefers-reduced-motion: reduce) {
  .memo-pending-lines span { animation: none; background-image: none; }
}

/* ---------------------------------------------------------------------------
   The draft a lawyer is about to receive.

   Inside the amber "What a lawyer decides" panel, because that is where the
   button is and the draft is what the button does. Amber is already the
   colour for a gap and for the flag; it is not a verdict here either.
   --------------------------------------------------------------------------- */

.memo-send {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid rgba(181, 118, 10, 0.25);
}

/* The one line the review step exists for. Above the draft, not below it. */
.memo-send-tell {
  font-size: 0.86rem; color: #4A3B1F; margin: 0 0 14px; text-align: left;
}
.memo-send-tell strong { color: var(--navy); }

.memo-send-label {
  display: block; font-size: 0.63rem; font-weight: 600; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--teal);
  margin: 0 0 0.35rem; text-align: left;
}

.memo-send-from, .memo-send-body {
  display: block; width: 100%; box-sizing: border-box;
  background: #fff; color: var(--navy);
  border: 1px solid rgba(13, 27, 42, 0.22); border-radius: 10px;
  box-shadow: inset 0 1px 2px rgba(13, 27, 42, 0.05);
  font-family: var(--sans); font-size: 15px; padding: 0.7rem 0.85rem;
  margin: 0 0 14px;
}
.memo-send-from:focus, .memo-send-body:focus {
  outline: none; border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(15, 110, 86, 0.12), inset 0 1px 2px rgba(13, 27, 42, 0.04);
}
/* Monospaced, because it is a message rather than prose and the reader is
   checking it line by line before it goes. */
.memo-send-body {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; line-height: 1.55; resize: vertical;
}

.memo-send-actions { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.memo-send-cancel {
  background: none; border: 0; color: var(--text-muted);
  font-family: var(--sans); font-size: 0.85rem; cursor: pointer;
  text-decoration: underline; padding: 0;
}
/* The send control is an <a> so the browser owns the mailto:. It still has
   to look and sit exactly like the button it replaced. */
.memo-send .memo-btn {
  border: 0; cursor: pointer; font-family: var(--sans);
  text-decoration: none; display: inline-flex; align-items: center;
}
.memo-send .memo-btn:disabled { opacity: 0.55; cursor: default; }

/* The escape hatch for a draft that will not fit. It sits with Cancel and
   reads as a text control until the draft is over the limit, at which point
   is-out gives it a border and it becomes the obvious next move. Prominent
   on every draft would put a paste step on the common case. */
.memo-send-copy {
  background: none; border: 1px solid transparent; color: var(--teal);
  font-family: var(--sans); font-size: 0.85rem; cursor: pointer;
  text-decoration: underline; padding: 6px 2px; border-radius: 999px;
  hyphens: none; white-space: nowrap;
}
.memo-send-copy.is-out {
  border-color: var(--teal); text-decoration: none; padding: 6px 16px;
  font-weight: 500;
}
.memo-send-copy.is-done { color: var(--teal); border-color: var(--teal); }
.memo-send-copy.is-bad { color: #9C3A2E; border-color: #9C3A2E; }

/* Sender-only. Sits with the disclosure line, above the draft. */
.memo-send-aside {
  font-size: 0.82rem; color: var(--text-muted); margin: 0 0 14px;
  text-align: left; hyphens: none;
}

.memo-send-note { font-size: 0.82rem; color: var(--text-muted); margin: 0 0 12px; text-align: left; }
.memo-send-note.bad { color: #9C3A2E; }
.memo-send-note[hidden] { display: none; }

/* The length warning. Amber, because this is the conditional-pill case:
   something to weigh before sending, not an error and not decoration. */
.memo-send-long {
  font-size: 0.82rem; color: #8A5A08; margin: 0 0 12px; text-align: left;
  background: var(--amber-pale); border-left: 2px solid var(--amber-border);
  border-radius: 0 6px 6px 0; padding: 9px 12px; hyphens: none;
}
.memo-send-long[hidden] { display: none; }

.memo-send-done {
  font-size: 0.9rem; color: var(--navy); margin: 0; text-align: left;
}

@media (max-width: 640px) {
  .memo-send-actions { flex-direction: column; align-items: stretch; }
  .memo-send-actions .memo-btn { justify-content: center; }
}

/* ============================================================================
   PRINT, AND ONLY THE MEMO

   Build spec v1, 30 Sep 2026. Download PDF calls window.print(); everything
   that makes a PDF out of a web page happens here.

   Rules only. The on-screen memo is not touched to suit paper.

   Hidden elements are listed rather than blanket-hidden. A "body * { display:
   none }" rule silently swallows anything added to these pages later, and
   this file would rather print something visibly wrong than print something
   unintended and quiet about it.
   ============================================================================ */

/* JUSTIFICATION STOPS AT 560px. A justified column this narrow, with hyphens
   off as this repo requires, opens word gaps wide enough to read as rivers.
   Desktop and tablet stay justified; phones get left. */
@media (max-width: 560px) {
  .memo-summary p, .memo-sit p, .memo-lawyer p, .memo-law-plain {
    text-align: left;
  }
  /* One step down for the headings, matching the homepage's mobile step. */
  .memo-h { font-size: 1.08rem; }
}

@media print {
  @page { size: portrait; margin: 18mm 16mm; }

  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
  }

  /* Everything that is not the answer. */
  nav, footer, .page-hero, .chat-compose, .chat-ack, .improve-hint,
  .chat-quota, .chat-limit, .chat-err, #chat-changed,
  .memo-tabs, .memo-pending, .home-chat, .explainer, .explainers {
    display: none !important;
  }

  /* Other turns in the thread. The button belongs to one answer, and a
     print of turn three should not carry turns one and two. */
  .memo-turn:not(.ll-print) { display: none !important; }

  /* Controls. None of them does anything on paper, and Contact a lawyer
     printed as a dead navy slab is the worst of them. */
  .memo-acts, .memo-copy, .memo-pdf, .memo-btn, .memo-ask, .memo-send {
    display: none !important;
  }

  /* Containers stop being cards. */
  .chat-wrap, .memo-wrap, .chat-live {
    max-width: none !important; margin: 0 !important; padding: 0 !important;
  }
  .memo, .memo-turn {
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    overflow: visible !important; background: #fff !important;
    margin: 0 !important; padding: 0 !important;
  }
  .memo-turn + .memo-turn { border-top: 0 !important; padding-top: 0 !important; }
  .memo-body { padding: 0 !important; }

  /* The wordmark, once, at the top. */
  .memo-print-head {
    display: block !important;
    font-family: 'Instrument Serif', Georgia, serif; font-size: 15pt;
    color: #000; margin-bottom: 10pt;
  }

  /* The dateline. It sits at the end, so it lands on the last page. A
     fixed-position footer repeats on every page in Chrome but overlaps
     content in Safari, and a readable last page beats a broken every page. */
  .memo-print-foot {
    display: block !important;
    margin-top: 14pt; padding-top: 7pt; border-top: 0.5pt solid #999;
    font-size: 8.5pt; color: #444;
  }

  /* The navy block becomes type, not a filled rectangle. Printing it solid
     spends a third of a cartridge and reads as a redaction. */
  .memo-top {
    background: none !important; color: #000 !important;
    padding: 0 0 8pt !important; border-bottom: 1pt solid #000;
  }
  .memo-where { color: #000 !important; font-size: 8.5pt; }
  .memo-headline { color: #000 !important; font-size: 16pt; }
  .memo-top .memo-where, .memo-top .memo-headline { padding-right: 0 !important; }

  /* Panels keep a left rule and lose their fill, so they read as sections
     rather than as blocks of ink. */
  .memo-summary, .memo-gaps, .memo-note, .memo-flag, .memo-lawyer,
  .memo-quote, .memo-law {
    background: none !important; border-radius: 0 !important;
  }
  .memo-summary, .memo-gaps, .memo-note, .memo-flag, .memo-lawyer, .memo-quote {
    border-left: 2pt solid #000 !important; padding-left: 10pt !important;
  }
  .memo-law {
    border: 0 !important; border-left: 2pt solid #000 !important;
    padding: 0 0 0 10pt !important;
  }
  .memo-sec { border-top: 0.5pt solid #999 !important; }

  /* A statute quote is the reason someone printed this. Keep it whole and
     keep it legible: no clamping, no shrinking, no ellipsis. */
  .memo-quote {
    font-size: 10pt !important; max-height: none !important;
    overflow: visible !important;
  }

  /* Justification already breaks at narrow widths, and a printed page is a
     different measure again. */
  p, li, .memo-quote, .memo-summary, .memo-sit { text-align: left !important; }

  /* A citation must not be separated from the text it cites, and the lawyer
     block is one thought. */
  .memo-law, .memo-lawyer, .memo-flag, .memo-quote {
    break-inside: avoid; page-break-inside: avoid;
  }
  .memo-h, .memo-label { break-after: avoid; page-break-after: avoid; }

  /* A link is useless on paper, so the address is printed after the text.
     Parentheses rather than a dash, because page copy carries no em dashes
     and this is page copy the moment it is on a page. */
  .memo-cite {
    color: #000 !important; border-bottom: 0 !important; font-weight: 700;
  }
  /* Anchors only. On a citation with no official page the element is a span,
     and attr(href) there resolves to empty, which would print " ()". */
  a.memo-cite::after {
    content: " (" attr(href) ")";
    font-weight: 400; font-size: 8.5pt; word-break: break-all;
  }

  /* The citation already prints its URL through a.memo-cite::after, so the
     labelled link under the statute would print the same address twice. */
  .memo-source { display: none !important; }

  /* Bullets drawn as positioned dots survive, but they are teal and amber. */
  .memo-lawyer li:before, .memo-gaps li:before { background: #000 !important; }
  .memo-label, .memo-label-amber, .memo-h, .memo-h-amber { color: #000 !important; }
  .memo-src, .memo-nolaw, .memo-disc { color: #333 !important; }
}

/* =====================================================
   Planning a change?

   Light surface, not the navy .report-sheet. That sheet is a finished-report
   cover and belongs to the Scan result and the CPOM result; a Planning result
   is a working list a reader scrolls, jumps around in and copies out of, and
   the v7 prototype treats it that way. Chat and Entity stay light for the
   same reason.

   Teal and navy only. Amber is for risk flags and v1 has no flags, so amber
   does not appear anywhere below.

   Body prose is justified, headings, labels and questions are left. The
   global `* { hyphens: none !important }` higher up already stops words
   breaking, so nothing here sets it again.
   ============================================================ */
.pl-wrap { max-width: 860px; margin: 0 auto; padding: 1.75rem 1.5rem 3rem; }
.pl-loading {
  font-size: 0.95rem; color: var(--text-muted); text-align: left;
  padding: 2rem 0; max-width: 60ch; line-height: 1.65;
}

/* ---- the three-step rail ---- */
.pl-rail {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  list-style: none; margin: 0 0 1.75rem; padding: 0;
}
.pl-rail li {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.8rem; color: var(--text-muted);
  padding: 0.35rem 0.8rem 0.35rem 0.35rem;
  border: 0.5px solid var(--border); border-radius: 100px;
  text-align: left;
}
.pl-rail b {
  width: 1.35rem; height: 1.35rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.72rem; font-weight: 600;
  background: var(--cream); color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.pl-rail li.on { color: var(--navy); border-color: var(--teal); }
.pl-rail li.on b { background: var(--teal); color: #fff; }
.pl-rail li.done b { background: var(--teal-pale); color: var(--teal); }

/* ---- headings shared by all three steps ---- */
.pl-h1, .pl-h2 {
  font-family: var(--serif); font-weight: 400; color: var(--navy);
  line-height: 1.15; text-align: left; margin: 0;
}
.pl-h2 { font-size: clamp(1.5rem, 3vw, 1.95rem); }
.pl-h1 { font-size: clamp(1.6rem, 3.4vw, 2.1rem); }
.pl-lede {
  font-size: 0.97rem; color: var(--text-muted); line-height: 1.65;
  max-width: 62ch; margin: 0.6rem 0 0; text-align: left;
}
.pl-i { width: 1.25rem; height: 1.25rem; flex: none; }
.pl-i-sm { width: 0.82rem; height: 0.82rem; }

/* ---- step 1, the six change types ---- */
.pl-choices {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.6rem; margin-top: 1.4rem;
}
.pl-choice {
  display: flex; gap: 0.75rem; align-items: flex-start; text-align: left;
  border: 0.5px solid var(--border); background: #fff; border-radius: 12px;
  padding: 0.9rem; cursor: pointer; font-family: var(--sans);
  color: var(--navy);
}
.pl-choice:hover { border-color: var(--teal); }
.pl-choice[aria-pressed="true"] {
  border-color: var(--teal); background: var(--teal-pale);
}
.pl-choice-ic { color: var(--teal); margin-top: 0.1rem; }
.pl-choice-t { flex: 1; min-width: 0; }
.pl-choice-t strong {
  display: block; font-size: 0.93rem; font-weight: 600; line-height: 1.35;
}
.pl-choice-t small {
  display: block; font-size: 0.8rem; color: var(--text-muted);
  margin-top: 0.12rem; line-height: 1.45;
}
.pl-tick {
  width: 1.2rem; height: 1.2rem; border-radius: 5px; flex: none;
  border: 1px solid var(--border); display: grid; place-items: center;
  color: transparent;
}
.pl-choice[aria-pressed="true"] .pl-tick {
  background: var(--teal); border-color: var(--teal); color: #fff;
}
.pl-i-tick { width: 0.8rem; height: 0.8rem; stroke-width: 2.6; }

/* ---- step 2, the facts ---- */
.pl-form {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem;
  margin-top: 1.4rem; max-width: 46rem;
}
.pl-form .pl-full { grid-column: 1 / -1; }
.pl-form label {
  display: block; font-size: 0.8rem; font-weight: 500;
  margin-bottom: 0.32rem; text-align: left; color: var(--navy);
}
.pl-form select, .pl-form textarea {
  width: 100%; font-family: var(--sans); font-size: 0.93rem; color: var(--navy);
  padding: 0.62rem 0.75rem; border: 0.5px solid var(--border);
  border-radius: 7px; background: var(--warm-white);
}
.pl-form textarea { min-height: 4.5rem; resize: vertical; line-height: 1.55; }
.pl-form select:focus, .pl-form textarea:focus {
  outline: none; border-color: var(--teal); background: #fff;
}
.pl-opt { font-weight: 400; color: var(--text-light); }
.pl-states { max-height: 15rem; overflow-y: auto; padding: 0.15rem; }
.pl-states .chip small { color: var(--text-light); font-size: 0.75rem; }
.pl-states .chip.on small { color: inherit; opacity: 0.8; }
.pl-privacy {
  grid-column: 1 / -1; display: flex; gap: 0.6rem; align-items: flex-start;
  font-size: 0.82rem; color: var(--text-muted); background: var(--cream);
  border: 0.5px solid var(--border); border-radius: 8px;
  padding: 0.7rem 0.85rem; margin: 0; text-align: left; line-height: 1.55;
}
.pl-privacy svg { color: var(--teal); margin-top: 0.1rem; }

/* ---- the bar of actions under each step ---- */
.pl-bar {
  display: flex; gap: 0.7rem; align-items: center; flex-wrap: wrap;
  margin-top: 1.6rem;
}
.pl-bar-tight { margin-top: 0.8rem; }
.pl-note { font-size: 0.82rem; color: var(--text-muted); }
.pl-dashed { border-style: dashed; }
.pl-related { border-top: 0.5px solid var(--border); padding-top: 1.3rem; }

/* ---- step 3, your plan ---- */
.pl-head { padding-bottom: 1.2rem; border-bottom: 0.5px solid var(--border); }
.pl-head .eyebrow { margin-bottom: 0.45rem; text-align: left; }
.pl-quote {
  font-size: 0.95rem; color: var(--text-muted); margin: 0.55rem 0 0;
  text-align: left; line-height: 1.6; max-width: 62ch;
}
.pl-scope { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.8rem; }
.pl-tag-scope {
  font-size: 0.75rem; color: var(--text-muted); background: var(--cream);
  border: 0.5px solid var(--border); border-radius: 5px;
  padding: 0.15rem 0.5rem; white-space: nowrap;
}

/* ---- the executive summary ---- */
.pl-summary {
  margin-top: 1.5rem; background: var(--cream);
  border: 0.5px solid var(--border); border-radius: 14px; padding: 1.4rem;
}
.pl-banner {
  display: flex; gap: 0.6rem; align-items: flex-start;
  font-size: 0.88rem; line-height: 1.6; color: var(--text-main);
  background: #fff; border: 0.5px solid var(--border); border-radius: 8px;
  padding: 0.8rem 0.9rem; margin: 0 0 1.1rem; text-align: left;
}
.pl-banner svg { color: var(--teal); flex: none; margin-top: 0.1rem; }
.pl-big {
  font-family: var(--serif); font-weight: 400; color: var(--navy);
  font-size: clamp(1.4rem, 2.8vw, 1.8rem); line-height: 1.2;
  margin: 0 0 1.1rem; text-align: left;
}
.pl-big b { font-weight: 400; color: var(--teal); font-variant-numeric: tabular-nums; }
.pl-sum-groups {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.1rem;
}
.pl-sum-groups > div { min-width: 0; }
.pl-sum-groups h3 {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-light);
  margin: 0 0 0.4rem; text-align: left;
}
.pl-sum-groups ul {
  margin: 0; padding-left: 1.1rem; font-size: 0.88rem;
  display: grid; gap: 0.25rem;
}
.pl-sum-groups li { text-align: left; }
.pl-sum-groups a {
  color: var(--text-main); text-decoration: none;
  border-bottom: 0.5px solid var(--border);
}
.pl-sum-groups a:hover { color: var(--teal); border-color: var(--teal); }
.pl-sum-gap {
  font-size: 0.85rem; color: var(--text-muted); line-height: 1.6;
  border-top: 0.5px solid var(--border); margin: 1.1rem 0 0;
  padding-top: 0.9rem; text-align: left;
}
.pl-sum-gap strong { color: var(--text-main); }
.pl-viewall {
  background: none; border: 0; padding: 0; margin-top: 1rem;
  color: var(--teal); font-family: var(--sans); font-weight: 500;
  font-size: 0.88rem; cursor: pointer;
}

/* ---- area cards ---- */
.pl-area { margin-top: 2.2rem; }
.pl-area-h {
  display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
  margin-bottom: 0.7rem;
}
.pl-area-h .eyebrow { margin: 0; text-align: left; }
.pl-area-h h3 {
  font-family: var(--serif); font-weight: 400; font-size: 1.4rem;
  color: var(--navy); margin: 0; text-align: left; line-height: 1.2;
}
.pl-card {
  background: #fff; border: 0.5px solid var(--border);
  border-left: 3px solid var(--teal-pale); border-radius: 10px;
  padding: 1.05rem 1.15rem 1.15rem; margin-bottom: 0.7rem;
  scroll-margin-top: 1.5rem;
}
.pl-card h4 {
  font-size: 1rem; font-weight: 600; color: var(--navy); margin: 0;
  text-align: left; line-height: 1.4;
}
.pl-label {
  display: block; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-light); margin-top: 0.7rem;
}
.pl-intro {
  font-size: 0.92rem; line-height: 1.68; color: var(--text-main);
  margin: 0.3rem 0 0; max-width: 72ch; text-align: justify;
}
.pl-cites { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.8rem; }
.pl-cite {
  font-size: 0.79rem; font-variant-numeric: tabular-nums;
  color: var(--text-main); background: var(--cream);
  border: 0.5px solid var(--border); border-radius: 5px;
  padding: 0.2rem 0.5rem; text-decoration: none; white-space: nowrap;
}
a.pl-cite:hover { border-color: var(--teal); color: var(--teal); }

/* ---- questions on a card ---- */
.pl-q { margin-top: 0.85rem; }
.pl-q summary {
  cursor: pointer; font-size: 0.83rem; font-weight: 600; color: var(--teal);
  text-align: left;
}
.pl-qlist { list-style: none; margin: 0.7rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.pl-qlist li {
  display: flex; gap: 0.6rem; align-items: flex-start; flex-wrap: wrap;
  text-align: left;
}
.pl-qt { flex: 1 1 14rem; min-width: 0; font-size: 0.88rem; line-height: 1.55; }
.pl-tag {
  font-size: 0.68rem; font-weight: 600; border-radius: 5px;
  padding: 0.15rem 0.45rem; white-space: nowrap; flex: none;
  border: 0.5px solid var(--border); font-family: var(--sans);
  display: inline-flex; align-items: center; gap: 0.25rem;
}
.pl-tag-internal { color: var(--text-muted); background: var(--cream); }
.pl-tag-counsel {
  color: var(--text-main); background: transparent; border-style: dashed;
  border-color: var(--review-border);
}
.pl-tag-ll {
  color: var(--teal); background: var(--teal-pale); border-color: transparent;
  cursor: pointer;
}
.pl-tag-ll:hover { background: var(--teal); color: #fff; }

/* ---- a gap line. Dashed, so it never reads as a finding. ---- */
.pl-gap {
  border: 1px dashed var(--review-border); border-radius: 10px;
  padding: 0.8rem 1rem; margin: 0 0 0.7rem;
  font-size: 0.87rem; line-height: 1.6; color: var(--text-muted);
  text-align: justify;
}
.pl-gap strong { color: var(--text-main); }

/* ---- questions for counsel ---- */
.pl-counsel {
  margin-top: 2.2rem; border: 1px dashed var(--review-border);
  border-radius: 12px; padding: 1.2rem 1.3rem;
}
.pl-counsel h3 {
  font-size: 1rem; font-weight: 600; color: var(--navy); margin: 0;
  text-align: left;
}
.pl-counsel-sub {
  font-size: 0.84rem; color: var(--text-muted); margin: 0.3rem 0 0;
  text-align: left;
}
.pl-counsel ol {
  margin: 0.9rem 0 0; padding-left: 1.2rem; display: grid; gap: 0.4rem;
  font-size: 0.89rem; line-height: 1.55;
}
.pl-counsel li { text-align: left; }
.pl-counsel-area { color: var(--text-light); font-size: 0.82rem; }

.pl-foot {
  margin-top: 2rem; padding-top: 1.1rem;
  border-top: 0.5px solid var(--border);
  font-size: 0.82rem; color: var(--text-muted); line-height: 1.65;
  max-width: 80ch; text-align: justify;
}

@media (max-width: 640px) {
  .pl-wrap { padding: 1.25rem 1rem 2.5rem; }
  .pl-form { grid-template-columns: 1fr; }
  .pl-summary, .pl-counsel { padding: 1rem; }
  .pl-card { padding: 0.9rem 0.95rem 1rem; }
  .pl-bar .btn-primary, .pl-bar .btn-ghost { flex: 1 1 auto; text-align: center; }
}

/* ============================================================
   Planning: the inline chat panel

   Two shapes, one markup. At 1100px and wider it is a column beside the
   results that stays in view while they scroll. Below that it is a bar docked
   to the bottom of the screen with the input always reachable, opening to
   about 62% of the screen height.

   The answer inside it is drawn by chat-memo.js, so every .memo-* rule
   already in this file applies unchanged. Nothing here restyles an answer:
   the panel owns the frame and the thread, and the answer stays the answer.
   ============================================================ */
.pl-layout { min-width: 0; }
.pl-results { min-width: 0; }

.pl-dock {
  border: 0.5px solid var(--teal); background: #fff;
  border-radius: 14px; display: flex; flex-direction: column;
  overflow: hidden; min-width: 0;
}
/* With planning-chat.js absent the aside is empty. Collapse it rather than
   drawing an empty teal box beside the results. */
.pl-dock:empty { display: none; }

.pl-dock-head {
  display: flex; align-items: center; gap: 0.6rem; width: 100%;
  padding: 0.75rem 0.9rem; background: var(--teal-pale); border: 0;
  text-align: left; cursor: pointer; font-family: var(--sans);
  color: var(--text-main);
}
.pl-dock-ic {
  width: 2rem; height: 2rem; border-radius: 8px; flex: none;
  background: var(--teal); color: #fff; display: grid; place-items: center;
}
.pl-dock-t { flex: 1; min-width: 0; }
.pl-dock-t strong { display: block; font-size: 0.92rem; font-weight: 600; }
/* Wraps rather than truncating. On one line the ellipsis fell exactly where
   the state is, and "New location · New provider type…" hides the single most
   load-bearing word in the sentence. Two lines, then clip. */
.pl-dock-t small {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  color: var(--text-muted); font-size: 0.77rem;
  line-height: 1.35; overflow: hidden;
}
.pl-chev { margin-left: auto; flex: none; transition: transform 0.2s; }
.pl-dock.open .pl-chev { transform: rotate(180deg); }

.pl-dock-body { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.pl-thread {
  overflow-y: auto; padding: 0.9rem; display: grid; gap: 0.6rem;
  align-content: start; flex: 1; min-height: 0;
}
.pl-hello {
  font-size: 0.86rem; color: var(--text-muted); margin: 0;
  text-align: left; line-height: 1.6;
}
.pl-msg { font-size: 0.88rem; line-height: 1.55; min-width: 0; }
.pl-msg-user {
  justify-self: end; background: var(--teal); color: #fff;
  border-radius: 12px 12px 2px 12px; padding: 0.5rem 0.7rem;
  max-width: 88%; text-align: left;
}
.pl-msg-ll {
  background: var(--cream); border: 0.5px solid var(--border);
  border-radius: 12px 12px 12px 2px; padding: 0.7rem 0.8rem;
  scroll-margin-top: 0.5rem;
}
.pl-err { color: var(--field-bad); }
.pl-err a { color: var(--teal); font-weight: 500; }
.pl-err p { margin: 0 0 0.4rem; text-align: left; }
.pl-err p:last-child { margin-bottom: 0; }

/* The answer is chat-memo's. Only the outer spacing is this panel's business,
   because a memo built for an 820px column needs less padding at 380px. */
.pl-msg-ll .memo-turn, .pl-msg-ll .memo-wrap { margin: 0; }

.pl-waiting { display: flex; align-items: center; gap: 0.5rem; color: var(--text-muted); }
.pl-wait-text { font-size: 0.84rem; }
.pl-dots { display: inline-flex; gap: 3px; }
.pl-dots i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--teal);
  opacity: 0.35; animation: pl-blink 1.2s infinite;
}
.pl-dots i:nth-child(2) { animation-delay: 0.2s; }
.pl-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes pl-blink { 0%, 80%, 100% { opacity: 0.35; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .pl-dots i { animation: none; }
}

.pl-sugg { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0 0.9rem 0.8rem; }
.pl-sugg button {
  border: 0.5px solid var(--border); background: #fff; color: var(--text-main);
  border-radius: 999px; padding: 0.35rem 0.65rem; font-size: 0.79rem;
  cursor: pointer; text-align: left; font-family: var(--sans); line-height: 1.35;
}
.pl-sugg button:hover { border-color: var(--teal); color: var(--teal); }

.pl-composer {
  display: flex; gap: 0.5rem; padding: 0.6rem 0.7rem;
  border-top: 0.5px solid var(--border); background: #fff;
}
.pl-composer input {
  flex: 1; min-width: 0; border: 0.5px solid var(--border);
  border-radius: 999px; padding: 0.55rem 0.85rem;
  /* 16px, so iOS does not zoom the page when the field takes focus. */
  font-size: 16px; font-family: var(--sans); color: var(--navy);
  background: var(--warm-white);
}
.pl-composer input:focus { outline: none; border-color: var(--teal); background: #fff; }
.pl-composer .btn-primary {
  border-radius: 999px; padding: 0.5rem 1rem; font-size: 0.86rem;
  white-space: nowrap;
}

/* ---- desktop: a column that stays in view ---- */
@media (min-width: 1100px) {
  .pl-wrap { max-width: 1300px; }
  .pl-layout {
    display: grid; grid-template-columns: minmax(0, 1fr) 24rem;
    gap: 2rem; align-items: start;
  }
  .pl-dock {
    position: sticky; top: 1.5rem;
    height: min(calc(100vh - 6rem), 46rem);
  }
  /* Always open here, so the header is a label rather than a control. */
  .pl-dock-head { cursor: default; }
  .pl-chev { display: none; }
}

/* ---- narrow: a bar docked to the bottom ---- */
@media (max-width: 1099px) {
  .pl-dock {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 8;
    border-radius: 14px 14px 0 0; border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -8px 28px rgba(13, 27, 42, 0.14);
  }
  .pl-dock .pl-dock-body { display: none; }
  .pl-dock.open .pl-dock-body { display: flex; max-height: 62vh; }
  /* Enough room that the docked bar never covers the end of the results.
     The bar is the header plus the composer, about 7rem, and this leaves
     margin for the safe-area inset on a notched phone. */
  .pl-results { padding-bottom: 9.5rem; }

  /* The disclaimer and the site footer sit OUTSIDE .pl-wrap, so padding the
     results column alone still left them under a fixed bar at full scroll.
     The sibling combinator scopes this to pages that actually have the dock,
     which is planning.html and nothing else, so no other page gains a gap.
     Only the last one needs the clearance; the disclaimer is padded too
     because it is the last element on a short result. */
  .pl-wrap ~ footer { padding-bottom: 9.5rem; }
}

/* ============================================================
   account.html: what we watch for you

   The three profile columns added 6 Oct 2026. Built from .field and .chip,
   which already exist, so this adds spacing and a heading and nothing else.
   ============================================================ */
.acct-mon {
  border-top: 0.5px solid var(--border);
  margin-top: 1.5rem; padding-top: 1.25rem;
}
.acct-mon h2 {
  font-family: var(--serif); font-weight: 400; font-size: 1.25rem;
  color: var(--navy); margin: 0; text-align: left; line-height: 1.25;
}
.acct-mon-sub {
  font-size: 0.82rem; color: var(--text-muted); line-height: 1.6;
  margin: 0.3rem 0 1.1rem; text-align: left;
}
.acct-mon .field { margin-bottom: 1rem; }
.acct-mon label {
  display: block; font-size: 0.8rem; font-weight: 500;
  margin-bottom: 0.35rem; text-align: left; color: var(--navy);
}
.acct-mon select {
  width: 100%; font-family: var(--sans); font-size: 0.93rem; color: var(--navy);
  padding: 0.62rem 0.75rem; border: 0.5px solid var(--border);
  border-radius: 7px; background: var(--warm-white);
}
.acct-mon select:focus { outline: none; border-color: var(--teal); background: #fff; }
.acct-mon .chips { margin-top: 0; }
.acct-mon .acct-actions { margin-top: 1.1rem; }

/* ============================================================
   The Chat home, for a logged-in visitor

   Only ever inside .chat-home, a class chat-home.js puts on <body> when there
   is a session. A logged-out visitor never matches any of these rules, so
   today's Chat page is untouched for them.

   Two columns at 900px and wider. Below that one column with the chat first,
   because the rail is context and the input is the reason they came.
   ============================================================ */
.chat-home .chat-wrap { max-width: 1180px; }

.home { display: grid; gap: 1.75rem; }
@media (min-width: 900px) {
  .home { grid-template-columns: minmax(0, 1fr) 17.5rem; align-items: start; }
}
.home-main { min-width: 0; display: grid; gap: 1rem; align-content: start; }

.home-h1 {
  font-family: var(--serif); font-weight: 400; color: var(--navy);
  font-size: clamp(1.6rem, 3.4vw, 2.2rem); line-height: 1.15;
  margin: 0; text-align: left;
}

/* The composer keeps its own rules from the Chat page. Only its place in the
   stack changes here, so nothing about asking a question moves. */
.chat-home .chat-compose { margin: 0; }

.home-shortcuts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
@media (max-width: 560px) { .home-shortcuts { grid-template-columns: 1fr; } }
.home-shortcut {
  display: flex; gap: 0.7rem; align-items: center; text-align: left;
  border: 0.5px solid var(--border); background: #fff; border-radius: 10px;
  padding: 0.8rem 0.9rem; text-decoration: none; color: var(--text-main);
}
.home-shortcut:hover { border-color: var(--teal); }
.home-shortcut.hl { border-color: var(--teal); background: var(--teal-pale); }
.home-shortcut svg { color: var(--teal); flex: none; }
.home-shortcut strong {
  display: block; font-size: 0.92rem; font-weight: 600; line-height: 1.35;
}
.home-shortcut small {
  display: block; font-size: 0.79rem; color: var(--text-muted);
  margin-top: 0.1rem; line-height: 1.4;
}

.home-label {
  display: block; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-light); margin-bottom: 0.5rem;
}
.home-examples { display: grid; gap: 0.4rem; }
.home-examples[hidden] { display: none; }
.home-examples button {
  text-align: left; border: 0.5px solid var(--border); background: transparent;
  border-radius: 8px; padding: 0.6rem 0.75rem; cursor: pointer;
  color: var(--text-main); font-size: 0.87rem; font-family: var(--sans);
  line-height: 1.5;
}
.home-examples button:hover { border-color: var(--teal); color: var(--teal); }

/* ---- the right rail ---- */
.home-rail { display: grid; gap: 0.75rem; min-width: 0; }
.home-box {
  border: 0.5px solid var(--border); background: var(--cream);
  border-radius: 10px; padding: 0.9rem 1rem;
}
.home-empty {
  font-size: 0.83rem; color: var(--text-muted); line-height: 1.6;
  margin: 0; text-align: left;
}
.home-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.home-list li {
  display: flex; justify-content: space-between; gap: 0.75rem;
  font-size: 0.83rem; border-bottom: 0.5px solid var(--border);
  padding-bottom: 0.5rem; text-align: left;
}
.home-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.home-list li span:first-child { color: var(--text-muted); flex: none; }
.home-list li span:last-child { color: var(--text-main); text-align: right; }
.home-setup {
  display: inline-block; margin-top: 0.7rem; font-size: 0.82rem;
  font-weight: 500; color: var(--teal); text-decoration: none;
}
.home-setup:hover { text-decoration: underline; }

/* ---- the planning suggestion, under an answer ---- */
.home-suggest {
  display: flex; gap: 0.7rem; align-items: flex-start; margin-top: 0.9rem;
  border: 0.5px solid var(--teal); background: var(--teal-pale);
  border-radius: 10px; padding: 0.85rem 0.95rem;
}
.home-suggest > svg { color: var(--teal); flex: none; margin-top: 0.15rem; }
.home-suggest p {
  margin: 0 0 0.7rem; font-size: 0.87rem; line-height: 1.6;
  color: var(--text-main); text-align: left;
}
.home-suggest .btn-primary { font-size: 0.85rem; padding: 0.5rem 1rem; }

/* === manual cards start === */
/* A manual card in a Chat answer. The same card as .memo-law, which already
   carries a 3px teal left border, so this does NOT restyle the border: a
   thinner or second-coloured rule would read as a weaker card rather than a
   different kind of one, and the palette is one teal and one navy.

   What sets it apart is a label that says what it is. A reader should not have
   to decode a border to learn that this is program guidance rather than the
   rule. Statutes print first; these follow.

   No amber: amber belongs to risk flags and conditional pills. */
.memo-manual-kind {
  margin: 0 0 0.3rem;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--teal);
  text-align: left;
  hyphens: none;
}
.memo-manual-dates {
  margin: 0.2rem 0 0.45rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: left;
  hyphens: none;
}
/* === manual cards end === */

/* === manuals start === */
/* Medicaid and Medicare manuals, manuals.html. Appended as one block at
   the end of the file so a merge with another branch is keep-both.
   Everything is scoped under .mn except the #mn-app and #mn-out ids.
   No hyphens property here on purpose: styles.css sets hyphens none
   globally with !important and words never break across lines. */
/* ===== Manuals page (manuals.html). Append to styles.css. All rules scoped under .mn ===== */
/* Layout: one reading column; filter bar on top, results grouped by program, each manual a ruled row like a docket entry. */
.mn {
  --mn-teal: #0F6E56; --mn-teal-soft: #E3EFEA; --mn-navy: #0D1B2A; --mn-cream: #F8F5EE; --mn-white: #FDFCFA;
  --mn-ink: #1D2A36; --mn-muted: #5D6873; --mn-rule: #E3DDD0; --mn-chip: #EFEADF; --mn-mark: #F3E3B8;
  --mn-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --mn-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-family: var(--mn-body); color: var(--mn-ink); background: var(--mn-cream);
  padding-block: 40px 72px; padding-inline: 16px;
}
.mn-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mn [hidden] { display: none !important; }
.mn-wrap { max-width: 920px; margin: 0 auto; display: grid; gap: 28px; }
#mn-app, #mn-out { display: grid; gap: 24px; min-width: 0; }
.mn-eyebrow { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--mn-teal); font-weight: 600; }
.mn h1 { font-family: var(--mn-display); font-weight: 400; font-size: clamp(34px, 6vw, 52px); line-height: 1.05; margin: 6px 0 12px; color: var(--mn-navy); text-wrap: balance; }
.mn-lede { font-size: 17px; line-height: 1.6; max-width: 64ch; margin: 0; text-align: justify; }
.mn-status { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 13px; color: var(--mn-muted); margin-top: 12px; }
.mn-status b { font-weight: 600; color: var(--mn-navy); }

/* tabs */
.mn-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--mn-rule); flex-wrap: wrap; }
.mn-tab { appearance: none; border: 0; background: none; font: 600 15px/1 var(--mn-body); color: var(--mn-muted); padding: 12px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.mn-tab[aria-selected="true"] { color: var(--mn-teal); border-bottom-color: var(--mn-teal); }
.mn-tab:focus-visible, .mn button:focus-visible, .mn a:focus-visible, .mn select:focus-visible, .mn input:focus-visible { outline: 2px solid var(--mn-teal); outline-offset: 2px; }

/* filter panel */
.mn-filters { background: var(--mn-white); border: 1px solid var(--mn-rule); border-radius: 10px; padding: 18px; display: grid; gap: 16px; }
.mn-field { display: grid; gap: 8px; min-width: 0; }
.mn-label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--mn-muted); font-weight: 600; }
.mn-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mn-chip { appearance: none; border: 1px solid var(--mn-rule); background: var(--mn-chip); color: var(--mn-ink); font: 500 14px/1 var(--mn-body); padding: 9px 12px; border-radius: 999px; cursor: pointer; }
.mn-chip[aria-pressed="true"] { background: var(--mn-teal); border-color: var(--mn-teal); color: #fff; }
.mn-chip small { font-size: 12px; opacity: .75; margin-left: 4px; font-variant-numeric: tabular-nums; }
.mn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mn select, .mn input[type="search"] { width: 100%; box-sizing: border-box; font: 15px/1.3 var(--mn-body); color: var(--mn-ink); background: #fff; border: 1px solid var(--mn-rule); border-radius: 8px; padding: 11px 12px; }
.mn-searchbar { display: flex; gap: 8px; }
.mn-searchbar input { flex: 1; min-width: 0; }
.mn-btn { appearance: none; border: 0; background: var(--mn-teal); color: #fff; font: 600 15px/1 var(--mn-body); padding: 12px 18px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.mn-btn:disabled { opacity: .5; cursor: default; }
.mn-hint { font-size: 13px; color: var(--mn-muted); margin: 0; }

/* results */
.mn-summary { font-size: 14px; color: var(--mn-muted); margin: 0; }
.mn-summary b { color: var(--mn-navy); font-variant-numeric: tabular-nums; }
.mn-prog { display: grid; gap: 14px; }
.mn-prog-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; border-bottom: 2px solid var(--mn-navy); padding-bottom: 8px; }
.mn-prog-head h2 { font-family: var(--mn-display); font-weight: 400; font-size: 30px; margin: 0; color: var(--mn-navy); }
.mn-prog-head span { font-size: 14px; color: var(--mn-muted); }
.mn-about { background: var(--mn-white); border: 1px solid var(--mn-rule); border-radius: 10px; }
.mn-about summary { cursor: pointer; padding: 12px 16px; font-weight: 600; font-size: 14px; color: var(--mn-teal); list-style: none; display: flex; align-items: center; gap: 8px; }
.mn-about summary::-webkit-details-marker { display: none; }
.mn-about summary svg { transition: transform .15s; flex: none; }
.mn-about[open] summary svg { transform: rotate(90deg); }
.mn-about dl { margin: 0; padding: 0 16px 14px; display: grid; gap: 10px; }
.mn-about dt { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--mn-muted); font-weight: 600; }
.mn-about dd { margin: 2px 0 0; font-size: 15px; line-height: 1.55; text-align: justify; }
.mn-about ul { margin: 2px 0 0; padding-left: 18px; font-size: 15px; line-height: 1.6; }
.mn-group h3 { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--mn-navy); margin: 8px 0 4px; font-weight: 700; }
.mn-group h3 small { font-weight: 500; color: var(--mn-muted); letter-spacing: 0; text-transform: none; font-size: 13px; margin-left: 6px; }
.mn-list { list-style: none; margin: 0; padding: 0; }
.mn-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; padding: 14px 0; border-bottom: 1px solid var(--mn-rule); }
.mn-item:last-child { border-bottom: 0; }
.mn-title { font-weight: 600; font-size: 16px; line-height: 1.35; color: var(--mn-navy); margin: 0; }
.mn-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; color: var(--mn-muted); font-variant-numeric: tabular-nums; }
.mn-scope { grid-column: 1 / -1; font-size: 14px; line-height: 1.55; margin: 0; text-align: justify; }
.mn-old { grid-column: 1 / -1; font-size: 13px; color: var(--mn-muted); margin: 0; display: flex; gap: 6px; align-items: center; }
.mn-tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.mn-tag { font-size: 12px; background: var(--mn-chip); color: var(--mn-ink); padding: 3px 8px; border-radius: 4px; }
.mn-tag.all { background: var(--mn-teal-soft); color: var(--mn-teal); font-weight: 600; }
.mn-open { grid-row: 1 / span 2; grid-column: 2; align-self: start; display: inline-flex; gap: 6px; align-items: center; font-size: 14px; font-weight: 600; color: var(--mn-teal); text-decoration: none; border: 1px solid var(--mn-teal); border-radius: 8px; padding: 8px 12px; white-space: nowrap; }
.mn-open:hover { background: var(--mn-teal); color: #fff; }
.mn-more { appearance: none; background: none; border: 0; color: var(--mn-teal); font: 600 14px var(--mn-body); padding: 8px 0; cursor: pointer; }
.mn-empty { background: var(--mn-white); border: 1px dashed var(--mn-rule); border-radius: 10px; padding: 20px; font-size: 15px; line-height: 1.55; }
.mn-note { font-size: 13px; line-height: 1.6; color: var(--mn-muted); border-top: 1px solid var(--mn-rule); padding-top: 16px; text-align: justify; }

/* full-text hits */
.mn-hit { padding: 16px 0; border-bottom: 1px solid var(--mn-rule); display: grid; gap: 6px; }
.mn-hit-src { font-size: 13px; color: var(--mn-muted); display: flex; flex-wrap: wrap; gap: 4px 10px; }
.mn-hit-src b { color: var(--mn-navy); }
.mn-snip { font-size: 15px; line-height: 1.6; margin: 0; overflow-wrap: anywhere; }
.mn-snip mark { background: var(--mn-mark); color: inherit; padding: 0 2px; border-radius: 2px; }
.mn-hit a { font-size: 14px; font-weight: 600; color: var(--mn-teal); }

@media (max-width: 640px) {
  .mn-row { grid-template-columns: 1fr; }
  .mn-item { grid-template-columns: minmax(0, 1fr); }
  .mn-open { grid-row: auto; grid-column: 1; justify-self: start; }
  .mn-prog-head h2 { font-size: 26px; }
}
/* === manuals end === */

/* === billing start === */
/* Subscribe page, account billing buttons and the tool purchase buttons
   (13 Oct 2026). The [hidden] rule is the point of this block: .btn-primary
   sets display:inline-block, which beats the browser's own [hidden] rule, so
   a hidden "Subscribe" button still showed to a paying subscriber. Scoped to
   the auth pages rather than made global, so no other page changes. */
.auth-wrap [hidden] { display: none !important; }

.sub-price { display: flex; align-items: baseline; gap: 0.5rem; margin: 0.25rem 0 1rem; }
.sub-num { font-family: var(--serif); font-size: 2.4rem; color: var(--navy); line-height: 1; }
.sub-per { font-size: 0.88rem; color: var(--text-muted); }
.sub-feats {
  list-style: none; margin: 0 0 1.35rem; padding: 0;
  border-top: 0.5px solid var(--border);
}
.sub-feats li {
  font-size: 0.9rem; color: var(--navy); line-height: 1.5; text-align: left;
  padding: 0.6rem 0 0.6rem 1.4rem; border-bottom: 0.5px solid var(--border);
  position: relative; hyphens: none;
}
.sub-feats li::before {
  content: ''; position: absolute; left: 0.2rem; top: 1.05rem;
  width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--teal);
}
/* === billing end === */

/* === oauth start === */
/* Google / Microsoft sign-in and the invite banner (13 Oct 2026). Text-only
   buttons: no provider logos are drawn here. If Google's or Microsoft's own
   branding assets are wanted later, use their official files, not a redraw. */
.auth-or {
  display: flex; align-items: center; gap: 0.75rem;
  margin: 1.1rem 0 0.9rem; color: var(--text-light); font-size: 0.78rem;
}
.auth-or::before, .auth-or::after { content: ''; flex: 1; border-top: 0.5px solid var(--border); }
.auth-oauth { display: grid; gap: 0.55rem; }
.btn-oauth {
  width: 100%; background: white; color: var(--navy);
  border: 0.5px solid var(--border); border-radius: 8px;
  padding: 0.7rem 1rem; font-family: var(--sans); font-size: 0.9rem; font-weight: 500;
  cursor: pointer; transition: border-color 0.2s;
}
.btn-oauth:hover { border-color: var(--navy); }
.btn-oauth[disabled] { opacity: 0.45; cursor: default; }
.btn-oauth[disabled]:hover { border-color: var(--border); }
.auth-oauth-note { font-size: 0.78rem; color: var(--text-light); text-align: left; margin: 0; hyphens: none; }
.auth-invite {
  font-size: 0.88rem; line-height: 1.55; text-align: left; hyphens: none;
  border-radius: 8px; padding: 0.7rem 0.85rem; margin-bottom: 1.1rem;
  color: var(--text-muted); background: var(--cream); border: 0.5px solid var(--border);
}
.auth-invite.ok { color: var(--teal); background: var(--teal-pale); border-color: rgba(15,110,86,0.2); }
/* === oauth end === */
/* === payments closed === */
.auth-invite a { color: var(--teal); font-weight: 500; }