/* Shared presentation layer. Loaded after legacy layout CSS on every route.
   Keep IDs, hidden state and quiz/checkout behaviour in their existing modules. */
body, body.hos-audit {
  color: var(--hos-ink);
  background: var(--hos-paper);
  font-family: var(--hos-font);
  font-size: 16px;
  line-height: 1.55;
}
button, input, textarea, select { font-family: var(--hos-font); }
:is(h1,h2,h3,h4) { font-family: var(--hos-font); }
:is(.eyebrow,.kicker,.r-title,.qsec b) { color: var(--hos-muted); }
:is(.hero h1,.launch-hero h1) em { font-family: var(--hos-serif); color: var(--hos-gold-text); }
::selection { background: #edaa204d; color: var(--hos-ink); }
:focus-visible, .hos-audit :focus-visible {
  outline: 3px solid var(--hos-gold-text);
  outline-offset: 4px;
}
/* Each header follows its page's content column. Reading columns stay narrower. */
.shell { width: min(var(--hos-content-max),calc(100% - var(--hos-page-gutter) * 2)); }
.home-page { --home-content-gutter: max(var(--hos-page-gutter),calc((100vw - var(--hos-wide-max))/2)); }
.site-header { background: rgba(251,248,241,.96); border-bottom-color: var(--hos-line); }
.top { width: min(var(--hos-content-max),calc(100% - var(--hos-page-gutter) * 2)); max-width: none; min-height: 78px; padding: 16px 0; }
.hos-audit #app { max-width: calc(var(--hos-content-max) + var(--hos-page-gutter) * 2); padding-inline: var(--hos-page-gutter); }
.audit-legal { width: min(var(--hos-content-max),calc(100% - var(--hos-page-gutter) * 2)); max-width: none; }
.hos-audit #consultation, .hos-audit #unsubscribe { max-width: calc(680px + var(--hos-page-gutter) * 2); padding-inline: var(--hos-page-gutter); }
.article-shell { width: min(1020px,calc(100% - var(--hos-page-gutter) * 2)); }
/* Audience rows have no decorative numbering column. */
.audience-item { grid-template-columns: minmax(0,1fr) 240px; gap: 24px; }
.audience-item > div, .audience-item > a { grid-column: auto; }
.audience-item > a {
  border: 1px solid var(--hos-input-border);
  border-radius: var(--hos-control-radius);
  background: var(--hos-paper);
  color: var(--hos-ink);
}
/* Identical primary action across storefront, quiz, report and booking. */
.button.button-primary, .button.button-light, .nav-cta,
.hos-audit .primary, .hos-audit .booking .primary, .hos-audit #result #buy {
  min-height: var(--hos-control-height);
  border: 1px solid var(--hos-gold);
  border-radius: var(--hos-control-radius);
  background: var(--hos-gold);
  color: var(--hos-ink);
  font: 700 14px/1.4 var(--hos-font);
  padding: 13px 20px;
  box-shadow: none;
  text-decoration: none;
  transition: background-color var(--hos-control-duration) var(--hos-ease),border-color var(--hos-control-duration) var(--hos-ease);
}
.button.button-primary:hover, .button.button-light:hover, .nav-cta:hover,
.hos-audit .primary:hover, .hos-audit .booking .primary:hover, .hos-audit #result #buy:hover {
  background: #dfa016; border-color: #dfa016; color: var(--hos-ink); transform: none;
}
.button.button-primary span, .button.button-light span, .nav-cta span,
.hos-audit .primary .arr, .hos-audit #result #buy .arr { color: var(--hos-ink); background: transparent; }
.hos-audit .primary:disabled, .hos-audit .primary.disabled,
.button.button-primary[aria-disabled=true], .button.button-primary:disabled {
  opacity: .5; cursor: not-allowed; transform: none; box-shadow: none;
}
.hos-audit .link, .text-link { color: var(--hos-ink); text-underline-offset: 4px; }
/* Cards share a surface and radius; illustrations and controls have their own tokens. */
.product-card, .guide-card, .launch-deliverables .guide-card,
.launch-sheet, .launch-table-wrap,
.hos-audit .cards4 li, .hos-audit .cards4.compact li,
.hos-audit .receipt, .hos-audit .rcard, .hos-audit .audit-contact,
.hos-audit .thanks, .hos-audit .hos-example {
  background: var(--hos-surface);
  border-color: var(--hos-line);
  border-radius: var(--hos-card-radius);
  color: var(--hos-ink);
}
.product-card, .guide-card { box-shadow: var(--hos-card-shadow); }
.product-card:hover { transform: none; }
.product-body { padding: 24px; }
.product-body h3 { margin: 0 0 12px; font-size: 24px; line-height: 1.15; }
.product-body > p { margin-bottom: 24px; }
.product-price { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: auto; padding-top: 0; border: 0; }
.product-price > strong, .product-price > span { font: 400 13px/1.6 var(--hos-font); letter-spacing: 0; color: var(--hos-muted); }
.product-price > strong { color: var(--hos-ink); font-weight: 700; }
.product-price > span::before { content: "·"; margin-right: 8px; }
.product-link { margin-top: 20px; border-top: 1px solid var(--hos-line); padding-top: 16px; }
.launch-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; border: 0; padding: 0; margin: 24px 0; font-size: 28px; }
.launch-price span { margin: 0; font-size: 13px; }
.launch-price .launch-price-state { flex-basis: 100%; color: var(--hos-muted); }
.launch-format-list { gap: 4px 14px; }
.launch-format-list li { padding: 0; border: 0; }
.hos-audit .cards4 li, .hos-audit .cards4.compact li { padding: 24px; }
.hos-audit .intro-art > img, .hos-audit .hos-process-art > img { border-radius: var(--hos-card-radius); }
.hos-audit .receipt, .hos-audit .rcard { mask: none; -webkit-mask: none; box-shadow: none; }
.hos-audit .rcard::before { border-radius: var(--hos-card-radius) var(--hos-card-radius) 0 0; background: var(--hos-gold); }
.hos-audit .receipt.big { border-top-color: var(--hos-gold); }
.hos-audit .r-title, .hos-audit .score-row .lbl, .hos-audit .g-lbl,
.hos-audit .loss-lbl, .hos-audit .money-lbl { color: var(--hos-muted); }
.hos-audit .r-date, .hos-audit .receipt.big .r-date { color: var(--hos-muted); }
.hos-audit .redact { background: var(--hos-ink); }
.hos-audit .know-card { background: var(--hos-mist); border-radius: var(--hos-card-radius); }
.hos-audit .good, .availability:not(.status-soon), .hos-status-success { color: var(--hos-success); }
.hos-audit .warn, .status-soon, .hos-status-warning { color: var(--hos-warning); }
.hos-audit .err, .hos-status-error, [aria-invalid=true] + .field-error { color: var(--hos-error); }
/* Fields remain full width and retain real browser validation behaviour. */
.audit-contact input:not([type=checkbox]), .audit-contact select,
.audit-contact textarea, .launch-page input:not([type=checkbox]):not([type=hidden]) {
  min-height: var(--hos-control-height);
  border: 1px solid var(--hos-input-border);
  border-radius: var(--hos-control-radius);
  background: var(--hos-surface);
  color: var(--hos-ink);
  font: 400 16px/1.55 var(--hos-font);
  padding: 12px 14px;
  box-shadow: none;
}
.audit-contact input:not([type=checkbox]):focus { border-color: var(--hos-gold-text); }
.audit-contact input[aria-invalid=true], .audit-contact input:user-invalid { border-color: var(--hos-error); }
.audit-consent input { accent-color: var(--hos-gold-text); }
.audit-contact [role=status] { color: var(--hos-muted); font: 400 14px/1.55 var(--hos-font); }
/* A selected answer uses ink; progress uses gold. No application state is changed. */
.hos-audit .progress { height: 4px; background: var(--hos-line); border-radius: var(--hos-pill-radius); }
.hos-audit #bar, .hos-audit .parts li.on, .hos-audit .parts li.done { background: var(--hos-gold); }
.hos-audit .opt { border: 1px solid var(--hos-input-border); border-radius: var(--hos-control-radius); background: var(--hos-surface); color: var(--hos-ink); }
.hos-audit .opt:hover { border-color: var(--hos-gold-text); background: var(--hos-mist); transform: none; }
.hos-audit .opt .key, .hos-audit .opt:hover .key { border-radius: var(--hos-control-radius); background: var(--hos-mist); color: var(--hos-gold-text); }
.hos-audit .opt.picked, .hos-audit .opt.picked:hover { background: var(--hos-ink); color: #fff; border-color: var(--hos-ink); }
.hos-audit .opt.picked .key, .hos-audit .opt.picked:hover .key { background: #ffffff20; color: #fff; }
.hos-audit .opt.dk:not(.picked) { color: var(--hos-muted); border-style: dashed; }
.hos-audit .back, .hos-audit .booking .days button, .hos-audit .booking .times button {
  min-height: 44px; border-color: var(--hos-input-border); border-radius: var(--hos-control-radius); background: var(--hos-surface); color: var(--hos-ink);
}
.hos-audit .booking .days button.on, .hos-audit .booking .times button.on { background: var(--hos-ink); border-color: var(--hos-ink); color: #fff; }
.hos-audit .qicon, .hos-audit .cards4 .ic { background: var(--hos-mist); color: var(--hos-gold-text); border-radius: var(--hos-control-radius); }
.legal blockquote { background: var(--hos-mist); border-left-color: var(--hos-gold-text); }
.legal hr { border-top-color: var(--hos-line); }
.hos-404-copy { color: var(--hos-muted); }
@media(max-width:600px) {
  .audience-item { grid-template-columns: minmax(0,1fr); gap: 16px; padding-inline: 0; }
  .audience-item > div, .audience-item > a { grid-column: 1; }
  .top { min-height: 68px; gap: 16px; }
  .hos-audit .top .prod { max-width: 130px; font-size: 9px; }
  .product-body { padding: 24px; }
  .hos-audit .audit-contact, .hos-audit .thanks, .hos-audit .receipt.big, .hos-audit .rcard { padding: 24px 20px; }
  .hos-audit .who-actions { align-items: stretch; gap: 16px; }
  .hos-audit .who-actions .primary { width: 100%; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  .hos-audit *, .button, .nav-cta { transition: none !important; animation: none !important; }
  .hos-audit .opt:hover, .hos-audit .back:hover, .hos-audit .primary:hover .arr { transform: none; }
}