/* OneComplyWatch local preview — shared stylesheet.
   R1: product-service look for non-expert sellers — distinct hero,
   situation cards, layered consultation, fluid mobile layout.
   Colors below are working values for the sample, not a brand standard. */

:root {
  /* Color tokens (temporary working values) */
  --ink: #18242f;
  --muted: #55616e;
  --accent: #0f5c63;
  --accent-dark: #0b4348;
  --accent-soft: #e5f0f0;
  --bg: #ffffff;
  --bg-soft: #f4f7f8;
  --line: #dfe6ec;
  --banner-bg: #fbf0d9;
  --banner-ink: #6b5416;
  --chip-bg: #eef2f5;
  --disabled-ink: #8b97a3;

  /* Type scale tokens (starting points, adjustable) */
  --fs-h1: clamp(1.7rem, 1.7rem + 1.7vw, 3.25rem);   /* ≈34px mobile → 52px desktop */
  --fs-h1-page: clamp(1.6rem, 1.6rem + 1.4vw, 2.6rem); /* article pages */
  --fs-body: 1.0625rem;                               /* 17px */
  --fs-small: 0.9rem;

  /* Space tokens */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.5rem;
  --max-w: 64rem;
  --radius: 10px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: var(--fs-body);
}

/* Local preview identity: small, out of the way, but always visible. */
.preview-banner {
  margin: 0;
  padding: 0.3rem 1rem;
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  background: var(--banner-bg);
  color: var(--banner-ink);
  border-bottom: 1px solid var(--line);
}

/* Header / navigation (slim primary entries) */
.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.site-header nav {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0.8rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
}

.site-brand {
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--accent-dark);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.1rem;
}

.nav-link {
  display: inline-block;
  padding: 0.2rem 0.25rem;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.97rem;
  border-bottom: 2px solid transparent;
}

.nav-link:hover { color: var(--ink); }

.nav-link[aria-current="page"] {
  color: var(--accent-dark);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

/* Disabled navigation item: not clickable, clearly marked as pending. */
.nav-disabled {
  color: #9aa5b1;
  cursor: not-allowed;
  border-bottom: 2px dotted var(--line);
}

/* Main content */
.page {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1rem 2.5rem;
}

h1 {
  font-size: var(--fs-h1-page);
  line-height: 1.2;
  margin: 1.6rem 0 0.6rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}

h2 {
  font-size: clamp(1.2rem, 1.05rem + 0.8vw, 1.5rem);
  margin: var(--sp-4) 0 0.6rem;
  letter-spacing: -0.01em;
}

h3 {
  font-size: 1.06rem;
  margin: 0.8rem 0 0.4rem;
}

p { margin: 0.55rem 0; }

a { color: var(--accent); }

.text-link { font-weight: 600; }

.lede { font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem); color: var(--ink); }

/* Hero — homepage only, distinct from article pages */
.hero {
  padding: clamp(2rem, 1.5rem + 3vw, 4.5rem) 0 clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.hero h1 {
  font-size: var(--fs-h1);
  max-width: 20ch;
  margin: 0 0 0.7rem;
  color: var(--accent-dark);
}

.hero .lede {
  max-width: 52ch;
  margin-bottom: 1rem;
}

.hero-note {
  color: var(--muted);
  font-size: var(--fs-small);
  max-width: 60ch;
}

/* Homepage top: hero (left) + example card (right column on desktop),
   situations band spanning below. On narrow screens the example card
   drops AFTER the situations section so entries stay near the top. */
.home-top {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 1.2rem 2rem;
  align-items: start;
}

.home-top .hero { grid-column: 1; grid-row: 1; padding-bottom: 0.5rem; }

.home-top .home-example { grid-column: 2; grid-row: 1; margin-top: 1.4rem; }

.home-top .home-situations { grid-column: 1 / -1; grid-row: 2; }

@media (max-width: 900px) {
  .home-top { display: flex; flex-direction: column; gap: 0; }
  .home-top .hero { order: 1; }
  .home-top .home-situations { order: 2; }
  .home-top .home-example { order: 3; margin-top: 1.2rem; }
}

/* Alternating light band for key sections */
.section-alt {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
  /* Extend to the page edge only as far as the page's own padding,
     so the band never causes horizontal overflow at any width. */
  margin: var(--sp-3) max(calc(-1 * var(--sp-3)), -1rem) 0;
}

.section-alt h2 { margin-top: var(--sp-2); }

/* Tags / chips — plain-language label first, wrap-safe */
.tag {
  display: inline-block;
  margin: 0.9rem 0 0.3rem;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.tag-example {
  background: var(--banner-bg);
  color: var(--banner-ink);
}

/* Cards */
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem 1.1rem;
  margin: 0.6rem 0;
  background: var(--bg);
  height: 100%;
}

.section-alt .card { border-color: var(--line); }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 0.8rem;
}

.card-grid .card { margin: 0; }

/* Situation cards (homepage) and check blocks (guide pages):
   four-item sets use an explicit 2×2 on wide screens, one column on
   narrow screens — no 3+1 wrap. Other grids keep auto-fit. */
.situation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  margin-bottom: 0.5rem;
}

@media (max-width: 640px) {
  .situation-grid { grid-template-columns: 1fr; }
}

.situation-grid .card { margin: 0; }

.situation-card .tag { margin-top: 0.2rem; }

.situation-card h3 { margin-top: 0.35rem; }

/* Check blocks (VAT page) */
.check-block h3 { display: flex; align-items: center; gap: 0.5rem; }

/* Example + reading cards */
.example-card { border-style: dashed; }

.reading-section { margin-top: var(--sp-3); }

.reading-section .reading-card { max-width: 40rem; }

/* Steps */
.steps {
  list-style: none;
  margin: 0.8rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 0.9rem;
}

.steps li {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  background: var(--bg);
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  flex: none;
}

.steps h3 { margin-top: 0.5rem; }

/* Homepage about line */
.about-line {
  margin-top: var(--sp-3);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-small);
}

/* Index list (guide index page) */
.index-list { display: grid; gap: 0.7rem; margin-top: 0.4rem; }

.index-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.7rem 1rem;
}

.index-area {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.index-item h3 { margin: 0.2rem 0; }

.meta {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0.35rem 0 0.2rem;
}

.method-list { padding-left: 1.2rem; }
.method-list li { margin: 0.5rem 0; }

/* Buttons and CTA rows */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.btn {
  display: inline-block;
  padding: 0.55rem 1.1rem;
  border-radius: 8px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-size: 0.97rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover { background: var(--accent-dark); }

.btn-secondary {
  background: transparent;
  color: var(--accent-dark);
}

.btn-secondary:hover { background: var(--accent-soft); }

/* Unconfirmed Chat/contact entries: native disabled controls. */
button.btn { font: inherit; }

button.btn[disabled],
button.btn[aria-disabled="true"] {
  background: var(--chip-bg);
  border: 1px dashed #a8b4bf;
  color: var(--disabled-ink);
  cursor: not-allowed;
}

.btn-state {
  font-size: 0.85rem;
  color: var(--banner-ink);
}

/* Placeholders for unconfirmed fields */
.placeholder {
  display: inline-block;
  background: var(--chip-bg);
  border: 1px dashed #a8b4bf;
  border-radius: 4px;
  padding: 0 0.35rem;
  font-size: 0.88em;
  color: #52616e;
  word-break: break-word;
}

.note { color: var(--muted); font-size: var(--fs-small); }

.important {
  border: 1px solid var(--line);
  background: var(--bg-soft);
  border-radius: 6px;
  padding: 0.5rem 0.8rem;
}

.careful {
  border-left: 4px solid var(--banner-ink);
  background: var(--banner-bg);
  border-radius: 0 6px 6px 0;
  padding: 0.6rem 0.9rem;
}

.fallback code {
  background: var(--chip-bg);
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
}

/* Core question callout (article pages) */
.core-question {
  border-left: 4px solid var(--accent);
  background: var(--bg-soft);
  padding: 0.65rem 0.9rem;
  border-radius: 0 6px 6px 0;
}

/* Consultation section — layered: short visible, details expandable */
.consultation {
  margin-top: var(--sp-4);
  border-top: 2px solid var(--line);
  padding-top: 0.4rem;
  scroll-margin-top: 3rem;
}

.consultation h2 { margin-top: var(--sp-2); }

.section-note { color: var(--muted); font-size: var(--fs-small); }

.consult-entry {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.4rem 1.1rem 1rem;
  margin: 0.9rem 0;
  scroll-margin-top: 4rem;
}

.consult-details {
  margin-top: 0.6rem;
  border-top: 1px dashed var(--line);
  padding-top: 0.5rem;
}

.consult-details summary {
  cursor: pointer;
  color: var(--accent-dark);
  font-weight: 600;
  font-size: var(--fs-small);
  padding: 0.2rem 0;
}

.consult-details[open] summary { margin-bottom: 0.4rem; }

.include-title { font-weight: 600; margin-bottom: 0.2rem; }

.operation-prompt { color: var(--muted); font-size: var(--fs-small); }

.consult-after {
  color: var(--muted);
  font-size: var(--fs-small);
  margin-top: 0.8rem;
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
  margin-top: 1rem;
}

.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 1.2rem 1rem 1.6rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.footer-brand { font-weight: 700; color: var(--ink); margin: 0 0 0.3rem; }
.footer-inner p { margin: 0.25rem 0; }
.footer-meta { font-size: 0.82rem; }

/* Keyboard focus must be visible on every interactive element. */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid #d97706;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Small screens: fluid, single-column, no horizontal overflow. */
@media (max-width: 600px) {
  .page { padding: 0 0.85rem 2rem; }
  .site-header nav { padding: 0.6rem 0.85rem; }
  .section-alt { margin-left: -0.85rem; margin-right: -0.85rem; padding: var(--sp-2) 0.85rem var(--sp-2); border-radius: 0; border-left: none; border-right: none; }
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { text-align: center; }
  .steps, .card-grid { grid-template-columns: 1fr; }
  .hero { padding-top: 1.6rem; }
}


/* Open-question topic: one entry in the hero, sources stay expandable. */
.site-header { position: sticky; top: 0; z-index: 5; }
#ask-in-chat, #contact-team, #official-source { scroll-margin-top: 9rem; }
.parcel-hero { max-width: 48rem; }
.parcel-hero .consult-entry { margin-top: 1.25rem; }
.fact-short { padding-left: 1rem; border-left: 3px solid var(--accent); }
.topic-sources { margin-top: 1.5rem; padding: 1rem; background: var(--bg-soft); border-radius: var(--radius); }
.topic-sources summary { cursor: pointer; color: var(--accent-dark); font-weight: 600; }
.topic-sources a { overflow-wrap: anywhere; }
.subscription-preview { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.subscription-preview button { max-width: 100%; white-space: normal; }

[hidden]{display:none!important}.language-controls{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}select,input,textarea,button{font:inherit}select,input[type=email],textarea{border:1px solid var(--line);border-radius:6px;padding:.6rem;max-width:100%;background:white;color:var(--ink)}textarea,input[type=email]{width:100%}label{display:block;margin:.65rem 0 .3rem}.check-label{display:flex;align-items:flex-start;gap:.65rem}.check-label input{flex:none;margin-top:.45rem}.first-visit{background:var(--accent-soft);border-radius:var(--radius);padding:.8rem 1rem;margin-top:1rem}.first-visit p{margin:0}.demo-banner{border:1px solid #cda446;background:var(--banner-bg);color:var(--banner-ink);padding:.7rem 1rem;border-radius:6px;font-weight:600}.chat-workspace{max-width:48rem}#messages{min-height:6rem}.message{padding:1rem;margin:.8rem 0;border-radius:8px;background:var(--bg-soft);overflow-wrap:anywhere;white-space:pre-wrap}.message-user{background:var(--accent-soft)}.demo-controls{margin-top:1rem;padding:.6rem;border:1px dashed var(--muted)}button{cursor:pointer}button:disabled{cursor:not-allowed}button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid #b76a07;outline-offset:3px}dialog{border:1px solid var(--line);border-radius:12px;padding:1.25rem;width:min(42rem,calc(100vw - 1.5rem));max-height:85vh;overflow:auto;color:var(--ink)}dialog::backdrop{background:rgba(20,35,45,.25)}.dialog-close{float:right}.tour-target{outline:4px solid #b76a07!important;outline-offset:5px}#contact-payload{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--bg-soft);padding:.75rem;font-size:.85rem}@media(max-width:500px){.site-header nav{gap:.4rem;padding:.45rem .75rem}.language-controls{gap:.3rem}.language-controls .btn{padding:.4rem .6rem}.page{padding:0 .8rem 1rem}}

/* Independent anchored hints never participate in page or field layout. */
#tutorial-dialog { position: fixed; z-index: 20; box-sizing:border-box;
  width:280px; max-width: min(320px, calc(100vw - 24px)); margin:0; padding:.8rem;
  border:1px solid var(--accent); border-radius:10px; background:white;
  box-shadow:0 5px 20px rgba(28,35,39,.16); color:var(--ink);
  font:400 .88rem/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
#tutorial-dialog::before { content:""; position:absolute; width:10px; height:10px;
  background:white; transform:rotate(45deg); }
#tutorial-dialog[data-side=below]::before { top:-6px; left:var(--tour-arrow,20px); border-top:1px solid var(--accent); border-left:1px solid var(--accent); }
#tutorial-dialog[data-side=above]::before { bottom:-6px; left:var(--tour-arrow,20px); border-bottom:1px solid var(--accent); border-right:1px solid var(--accent); }
#tutorial-dialog[data-side=right]::before { left:-6px; top:var(--tour-arrow,20px); border-bottom:1px solid var(--accent); border-left:1px solid var(--accent); }
#tutorial-dialog[data-side=left]::before { right:-6px; top:var(--tour-arrow,20px); border-top:1px solid var(--accent); border-right:1px solid var(--accent); }
#tutorial-dialog h2 { font-size:1rem; line-height:1.4; font-weight:600; margin:.15rem 0; }
#tutorial-text { font-size:.88rem; font-weight:400; margin:.3rem 0 .65rem; }
.tour-progress { color:var(--accent-dark); font-size:.78rem; font-weight:600; margin:0; }
#tutorial-dialog .cta-row { display:flex; flex-direction:row; align-items:center; flex-wrap:wrap; margin:.4rem 0 0; gap:.35rem; }
#tutorial-dialog .btn { font-size:.8rem; padding:.35rem .55rem; margin:0; }
#tour-preference { font-size:.75rem; margin:.5rem 0 0; }
.tour-target { outline:2px solid var(--accent)!important; outline-offset:3px; }

@media(max-width:360px) {
  #tutorial-dialog { padding:.55rem; font-size:.8rem; line-height:1.35; }
  #tutorial-dialog h2 { font-size:.88rem; line-height:1.3; }
  #tutorial-text { font-size:.8rem; line-height:1.35; margin:.125rem 0 .4rem; }
  #tutorial-dialog .tour-progress { font-size:.7rem; line-height:1.3; }
  #tutorial-dialog .cta-row { margin:.25rem 0 0; }
  #tutorial-dialog .btn { font-size:.75rem; line-height:1.2; padding:.3rem .45rem; }
}

/* Open conversation with progressively formed, evidence-labelled results. */
.chat-workspace { max-width: none; }
.chat-heading h1 { font-size: clamp(1.55rem, 3vw, 2.1rem); margin-bottom: .5rem; }
.chat-heading .lede { max-width: 48rem; font-size: 1rem; margin-bottom: 1.25rem; }
.chat-journey-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(15rem, 1fr); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.chat-conversation { min-width: 0; padding: 1.4rem; }
.chat-conversation label { margin-top: 0; }
.chat-conversation textarea { min-height: 5.5rem; resize: vertical; }
.chat-conversation .cta-row { gap: .5rem; margin: .65rem 0; }
.chat-conversation #messages { min-height: 0; }
.chat-conversation #chat-status { font-size: .85rem; color: var(--muted); }
.journey-result { min-width: 0; padding: 1.25rem; background: var(--bg-soft); border-left: 1px solid var(--line); }
.journey-result > summary { font-weight: 600; cursor: pointer; }
#journey-content { margin-top: 1.2rem; overflow-wrap: anywhere; }
#journey-content h2 { font-size: 1.15rem; margin: 0 0 .75rem; }
#journey-content h3 { font-size: .9rem; margin-bottom: .35rem; }
#journey-content p, #journey-content li { font-size: .9rem; line-height: 1.6; }
#journey-content li { margin: .6rem 0; }
.result-section { margin: 1.1rem 0; }
.result-section p { margin: .3rem 0; white-space: pre-wrap; }
.result-section details { font-size: .8rem; margin-top: .5rem; }
.result-badge { color: var(--accent-dark); font-size: .75rem!important; }
.service-card { border: 1px solid var(--line); border-radius: 10px; background: white; padding: 1rem; }
.service-card .btn { width: 100%; text-align: center; white-space: normal; }
.text-button { background: none; border: 0; padding: .5rem 0; color: var(--muted); font-size: .85rem; text-decoration: underline; }
.chat-privacy { font-size: .85rem; color: var(--muted); margin-top: 1rem; }
.chat-privacy summary, .demo-controls > summary { cursor: pointer; }
.chat-workspace > .demo-controls { margin-top: 1.5rem; font-size: .85rem; }
.chat-workspace > .demo-controls .cta-row { gap: .5rem; flex-wrap: wrap; }
@media(max-width:760px) {
  .chat-journey-grid { grid-template-columns: minmax(0, 1fr); }
  .chat-conversation { padding: 1rem; }
  .journey-result { border-left: 0; border-top: 1px solid var(--line); padding: 1rem; }
  .chat-conversation .btn { padding: .5rem .7rem; }
}
body[data-page-key=chat] #first-visit { display: none; }
body[data-page-key=chat] .page > .note { font-size: .75rem; margin: .3rem 0; }
.chat-about { margin: 0 0 1rem; font-size: .9rem; color: var(--muted); }
.chat-about summary { cursor: pointer; }
.chat-about .lede { margin-top: .75rem; }
.service-evidence { margin-top: 1rem; font-size: .85rem; }
.service-evidence > summary { cursor: pointer; }
/* R2: conversation first, compact composer always at the foot of its window. */
.chat-shell-header { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 0; }
.chat-shell-header h1 { font-size:1.3rem; margin:0 0 .2rem; }
.chat-shell-header .note { font-size:.75rem; }
.chat-topic { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; font-size:.85rem; padding:.6rem .8rem; background:var(--bg-soft); border-radius:8px; }
.chat-topic small { flex-basis:100%; color:var(--muted); }
.chat-conversation { padding:0; display:flex; flex-direction:column; min-width:0; }
.chat-conversation #messages { height:320px; overflow:auto; padding:1rem; display:flex; flex-direction:column; gap:.9rem; overscroll-behavior:contain; }
.chat-conversation .message { max-width:90%; flex-shrink:0; margin:0; padding:.7rem .9rem; border-radius:4px 14px 14px 14px; }
.chat-conversation .message strong { font-size:.75rem; }
.chat-conversation .message p { margin:.3rem 0 0; font-size:.95rem; line-height:1.55; }
.chat-conversation .message-user { align-self:flex-end; border-radius:14px 4px 14px 14px; }
.chat-conversation #chat-form { border-top:1px solid var(--line); padding:.7rem; }
.composer-row { display:flex; align-items:flex-end; gap:.4rem; border:1px solid var(--line); border-radius:12px; padding:.35rem; background:white; }
.chat-conversation .composer-row textarea { min-height:32px; max-height:112px; border:0; padding:.4rem; resize:none; font-size:16px; flex:1; min-width:0; }
.composer-row .btn { flex:none; margin:0; padding:.45rem .6rem; font-size:.85rem; }
.input-hint { font-size:.7rem; color:var(--muted); margin:.35rem .1rem 0; }
.chat-conversation #chat-status { margin:.2rem .8rem; }
.chat-conversation .text-button { align-self:flex-start; margin:0 .8rem; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#summary-source,#contact-draft-notice { font-size:.8rem; padding:.5rem; background:var(--bg-soft); }
@media(max-width:760px){ .chat-conversation #messages{height:245px;} .chat-shell-header{gap:.5rem;} .chat-shell-header .btn{padding:.5rem .6rem;} }
@media(max-height:650px) and (max-width:760px){ .chat-conversation #messages{height:190px;} }

/* Keep the activity title visible when its entry URL lands below the sticky header. */
#ocd-campaign { scroll-margin-top:9rem; }
@media(max-width:760px){ #ocd-campaign { scroll-margin-top:15rem; } }
.partner-services { border:1px solid var(--line); border-radius:10px; padding:1rem; margin:1.25rem 0; scroll-margin-top:9rem; }
.partner-services > summary { font-weight:600; cursor:pointer; }
.service-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr)); gap:1rem; margin:1rem 0; }
.partner-services-compact { padding:.75rem; }
.journey-rail { min-width:0; background:var(--bg-soft); border-left:1px solid var(--line); }
.journey-rail .journey-result { border-left:0; }
.journey-rail .partner-services { margin:1rem; }
.partner-services-compact .service-grid { grid-template-columns:minmax(0,1fr); }
.partner-services .service-card { min-width:0; overflow-wrap:anywhere; }
.partner-services .service-card h3 { font-size:1rem; margin:.5rem 0; }
.partner-services .service-card .note { font-size:.78rem; }
#quote-panel { border:1px solid var(--line); padding:.8rem; border-radius:8px; margin:1rem 0; overflow-wrap:anywhere; }
#quote-panel .demo-controls { display:flex; gap:.5rem; flex-wrap:wrap; }
#quote-provider-choice { width:100%; }
@media(max-width:760px){.partner-services { scroll-margin-top:15rem; }.partner-services-compact { margin-top:1rem; }.journey-rail {border-left:0;border-top:1px solid var(--line);} .journey-rail .journey-result {border-top:0;}}

/* Source-backed collection, ahead of guides and optional services. */
.news-hero {max-width: 760px; margin-bottom: 2rem;}
.news-board {display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.25rem; align-items: start;}
.news-column {min-width: 0; padding: 0; margin: 0;}
.news-column-heading {display:flex; align-items:baseline; justify-content:space-between; gap: .75rem; border-bottom:2px solid var(--border,#d7e1df); margin-bottom: .75rem;}
.news-column-heading h2 {font-size:1.25rem; margin:0 0 .5rem;}
.news-card {padding:1.25rem; height:auto;}
.news-card h3 {font-size:1.18rem; line-height:1.4;}
.news-status {font-size:.78rem; color:var(--muted,#526763); margin: .5rem 0;}
.news-card dl {margin:1rem 0;}
.news-card dl div {margin: .7rem 0;}
.news-card dt {font-size:.8rem; font-weight:700; color:var(--muted,#526763);}
.news-card dd {margin: .15rem 0 0; font-size:.92rem; line-height:1.5;}
.news-meta {font-size:.8rem; padding-top:.75rem; border-top:1px solid var(--border,#d7e1df);}
.news-lower {border-top:1px solid var(--border,#d7e1df); padding-top:1.5rem; margin-top:2rem;}
@media(max-width:1000px){.news-board {grid-template-columns: repeat(2,minmax(0,1fr));}}
@media(max-width:600px){.news-board {grid-template-columns:minmax(0,1fr);} .news-card {padding:1rem;} .news-hero h1 {font-size:1.9rem;}}

/* v4: one short reading list; the document owns vertical scrolling. */
.preview-diagnostics { margin: 0.15rem 0 0.65rem; font-size: .78rem; color: var(--muted); }
.preview-diagnostics > summary { cursor: pointer; }
.preview-diagnostics p { margin: .4rem 0; }
.news-hero { display:flex; justify-content:space-between; align-items:center; gap:1.5rem; margin: .5rem 0 1.2rem; }
.news-hero h1 { font-size:2rem; line-height:1.15; margin:0 0 .45rem; }
.news-hero .lede { font-size:1rem; line-height:1.45; margin:0; max-width:42rem; }
.news-hero .btn { flex-shrink:0; }
.news-market-controls,.news-platform-controls { display:flex; align-items:center; flex-wrap:wrap; gap:.45rem; }
.news-market-controls { margin-bottom:.6rem; font-size:.83rem; }
.news-secondary-label { color:var(--muted); margin-left:.8rem; }
.news-market-controls button,.news-platform-controls button { font:inherit; border:1px solid var(--line); border-radius:1.5rem; padding:.4rem .8rem; background:white; color:var(--ink); cursor:pointer; }
.news-market-controls button[aria-pressed="true"],.news-platform-controls button[aria-pressed="true"] { color:white; background:var(--accent); border-color:var(--accent); }
.news-market-controls button.market-secondary[aria-pressed="false"] { border-color:transparent; padding:.3rem .45rem; color:var(--muted); }
.news-platform-controls { font-size:.87rem; }
.news-count { font-size:.76rem; color:var(--muted); margin:.65rem 0 .3rem; }
.news-list { display:block; border-top:1px solid var(--line); }
.news-item { padding:1rem 0; border-bottom:1px solid var(--line); }
.news-item[hidden] { display:none; }
.news-item-meta,.news-dates { display:flex; flex-wrap:wrap; gap:.35rem .75rem; font-size:.76rem; color:var(--muted); margin:0 0 .4rem; }
.news-type { color:var(--accent-dark); font-weight:600; }
.news-item h2 { font-size:1.15rem; line-height:1.3; margin:0 0 .4rem; }
.news-impact { font-size:.92rem; line-height:1.45; margin:0 0 .3rem; }
.news-audience { font-size:.8rem; line-height:1.4; margin:0 0 .4rem; color:var(--muted); }
.news-dates { margin-bottom:.5rem; }
.news-draft { font-size:.72rem; }
.news-item-actions { display:flex; flex-wrap:wrap; gap:1.4rem; font-size:.85rem; }
.news-detail { font-size:.9rem; line-height:1.55; }
.news-detail:not([open]) { display:none; }
.news-detail[open] { margin-top:.8rem; background:var(--bg-soft); padding:1rem; border-radius:6px; }
.news-detail > summary { cursor:pointer; font-weight:600; }
.news-detail dl { margin:.6rem 0; }
.news-detail dt { font-weight:600; margin-top:.6rem; }
.news-detail dd { margin:0; }
.news-detail a { overflow-wrap:anywhere; }
.news-reading-note { margin-top:.7rem; font-size:.8rem; color:var(--muted); }
.news-reading-note > summary { cursor:pointer; }
.news-feed,.news-list,.news-item { overflow:visible; max-height:none; }
@media (max-width:600px) {
 body[data-page-key="home"] .site-header ul { gap:.55rem; }
 body[data-page-key="home"] .nav-link { font-size:.86rem; padding:.2rem; }
 body[data-page-key="home"] #runtime-mode { font-size:.83rem; padding:.45rem .65rem; margin:.5rem 0; }
 .news-secondary-label { display:none; }
 .news-hero { gap:.75rem; align-items:flex-start; flex-direction:column; margin-top:.3rem; }
 .news-hero h1 { font-size:1.55rem; }
 .news-hero .lede { font-size:.92rem; }
 .news-hero .btn { padding:.45rem .8rem; }
 .news-platform-controls { gap:.35rem; }
 .news-platform-controls button { padding:.35rem .65rem; }
 .news-item { padding:.8rem 0; }
 .news-item h2 { font-size:1.06rem; }
 .news-secondary-label { margin-left:.15rem; }
 .news-detail[open] { padding:.8rem; }
}

/* Preserve exact handoff preview text and wrapping inside the existing mobile dialog. */
#contact-preview { margin:1rem 0; padding:.75rem; border:1px solid var(--line); border-radius:8px; }
#contact-preview h4 { margin:.6rem 0 .25rem; font-size:1rem; }
.contact-final-text { white-space:pre-wrap; overflow-wrap:anywhere; margin:.25rem 0; }
#contact-selection-error { color:#922b21; }