/* Zenia Conversation Page V4 — preview-only, scoped by body.ahcv4-preview. */
body.ahcv4-preview .page-body {
  max-width: 760px;
}

body.ahcv4-preview .hero {
  min-height: 150px;
  height: 24vh;
  max-height: 240px;
}

body.ahcv4-preview .hero-content {
  padding-bottom: 24px;
}

body.ahcv4-preview .hero-title {
  font-size: clamp(30px, 9vw, 48px);
}

body.ahcv4-preview .hero-badges {
  display: none;
}

.ahcv4-shell {
  margin: 0 18px 18px;
}

.ahcv4-topbar {
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  gap: 6px;
  padding: 10px 0;
  background: color-mix(in srgb, var(--bg, #fbf8f1) 92%, transparent);
  backdrop-filter: blur(10px);
}

.ahcv4-mode {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-soft, #776f64);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

.ahcv4-mode.is-active {
  background: var(--ink, #171513);
  color: #fff;
}

.ahcv4-mode:focus-visible,
.ahcv4-entry-choice:focus-visible,
.ahcv4-reply:focus-visible,
.ahcv4-action:focus-visible,
.ahcv4-back:focus-visible,
.ahcv4-restart:focus-visible,
.ahcv4-browse-quiet:focus-visible {
  outline: 2px solid var(--gold, #7a5d31);
  outline-offset: 3px;
}

.ahcv4-orient {
  padding: 18px 0 22px;
  border-bottom: 1px solid var(--border, rgba(122,93,49,.18));
}

.ahcv4-eyebrow,
.ahcv4-result-label {
  margin: 0 0 8px;
  color: var(--gold, #7a5d31);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ahcv4-title {
  margin: 0 0 8px;
  color: var(--ink, #171513);
  font-size: clamp(28px, 8vw, 44px);
  line-height: 1.03;
}

.ahcv4-meta {
  color: var(--ink-soft, #776f64);
  font-size: 14px;
  line-height: 1.45;
  margin-bottom: 18px;
}

/* Henry's Take is the visual hero of Guide mode (V4.1-UI-polish §4): editorial
   serif (already used site-wide for chapter/brief headings — no new
   typeface), generous line-height, a readable measure instead of full page
   width. */
.ahcv4-take {
  max-width: 34em;
  margin: 0 0 26px;
  color: var(--ink, #171513);
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(19px, 4.6vw, 22px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -.003em;
}

.ahcv4-take span {
  display: block;
  margin-bottom: 8px;
  font-family: 'DM Sans', -apple-system, sans-serif;
  color: var(--gold, #7a5d31);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ahcv4-question {
  margin: 0 0 12px;
  color: var(--ink, #171513);
  font-size: 17px;
  font-weight: 750;
}

.ahcv4-entry-choices,
.ahcv4-replies,
.ahcv4-actions {
  display: grid;
  gap: 10px;
}

.ahcv4-entry-choice,
.ahcv4-reply,
.ahcv4-action {
  appearance: none;
  width: 100%;
  min-height: 50px;
  border-radius: 10px;
  border: 1px solid var(--border, rgba(122,93,49,.18));
  background: #fffdf8;
  color: var(--ink, #171513);
  padding: 14px 16px;
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease, opacity .16s ease, transform .16s ease;
}

.ahcv4-entry-choice:hover,
.ahcv4-reply:hover {
  border-color: var(--gold, #7a5d31);
  background: #fff;
}

.ahcv4-entry-choice:active,
.ahcv4-reply:active {
  transform: scale(.988);
}

.ahcv4-entry-choice.is-soft {
  opacity: .42;
}

.ahcv4-entry-choice.is-selected {
  border-color: var(--ink, #171513);
  background: var(--ink, #171513);
  color: #fff;
  opacity: 1;
}

.ahcv4-browse-quiet {
  display: inline-block;
  margin-top: 16px;
  color: var(--ink-muted, #9a9184);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.ahcv4-preview #ahConvSection {
  margin: 0 18px 22px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.ahcv4-panel {
  padding: 20px 0 24px;
  border-bottom: 1px solid var(--border, rgba(122,93,49,.16));
  animation: ahcv4In .2s ease-out both;
}

@keyframes ahcv4In {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.ahcv4-history {
  list-style: none;
  padding: 16px 0 0;
  margin: 0;
  color: var(--ink-muted, #9a9184);
}

.ahcv4-history li {
  padding: 7px 0;
  border-bottom: 1px solid rgba(122,93,49,.10);
  font-size: 13px;
  line-height: 1.4;
}

.ahcv4-history span {
  display: block;
  margin-bottom: 2px;
  color: var(--ink-muted, #9a9184);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.ahcv4-back,
.ahcv4-restart {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-muted, #9a9184);
  padding: 0;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

.ahcv4-back {
  margin-bottom: 14px;
}

.ahcv4-lead {
  margin: 0 0 12px;
  color: var(--ink, #171513);
  font-size: 18px;
  line-height: 1.52;
}

.ahcv4-more,
.ahcv4-evidence {
  margin: 10px 0 16px;
}

.ahcv4-more summary,
.ahcv4-evidence summary {
  cursor: pointer;
  color: var(--gold, #7a5d31);
  font-size: 13.5px;
  font-weight: 700;
}

.ahcv4-more p {
  margin: 8px 0 0;
  color: var(--ink-soft, #776f64);
  font-size: 14.5px;
  line-height: 1.55;
}

.ahcv4-evidence-inner {
  margin-top: 10px;
  padding: 12px 0 0;
  border-top: 1px solid var(--border, rgba(122,93,49,.16));
}

.ahcv4-evidence-label {
  margin-bottom: 8px;
  color: var(--ink-muted, #9a9184);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ahcv4-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}

.ahcv4-facts div {
  min-width: 0;
  padding: 10px 0;
  border-bottom: 1px solid rgba(122,93,49,.10);
}

.ahcv4-facts span {
  display: block;
  color: var(--ink-muted, #9a9184);
  font-size: 11px;
  text-transform: uppercase;
}

.ahcv4-facts strong {
  display: block;
  margin-top: 3px;
  color: var(--ink, #171513);
  font-size: 14px;
}

.ahcv4-prompt {
  margin: 18px 0 12px;
  color: var(--ink, #171513);
  font-size: 20px;
  line-height: 1.32;
}

.ahcv4-judgment {
  margin: 10px 0 18px;
}

.ahcv4-judgment p {
  margin: 0 0 12px;
  color: var(--ink, #171513);
  font-size: 16px;
  line-height: 1.56;
}

.ahcv4-judgment p + p {
  color: var(--ink-soft, #776f64);
}

.ahcv4-action-primary {
  background: var(--ink, #171513);
  border-color: var(--ink, #171513);
  color: #fff;
}

.ahcv4-action-secondary {
  background: transparent;
  color: var(--ink-soft, #776f64);
}

.ahcv4-action:hover {
  transform: translateY(-1px);
}

.ahcv4-full-details {
  margin: 26px 18px 0;
  padding-top: 8px;
}

.ahcv4-full-details > summary {
  padding: 16px 0;
  color: var(--ink, #171513);
  border-top: 1px solid var(--border, rgba(122,93,49,.18));
  font-size: 14px;
  font-weight: 750;
}

.ahcv4-full-details[open] > summary {
  margin-bottom: 10px;
}

/* ── Guide-mode conversational label (V4.1 UI polish §7) ──────────────────
   Quieter, less form-like than a default eyebrow — this is Henry talking,
   not a questionnaire section header. Text itself is unchanged (PHP/copy is
   out of scope for a CSS-only pass); this only reduces its visual weight. */
body.ahcv4-preview .your-turn {
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: .12em;
  color: var(--ink-muted, #9a9184);
}

/* ══════════════════════════════════════════════════════════════════════
   LEVEL 2 / LEVEL 3 — Browse mode ("research the project yourself").
   Everything below lives inside #ahFullDetails (V4.1 UI polish §2-3, §6,
   §9, §12-14, §19): informational panels lose their card chrome (border/
   background/shadow) and read as one continuous, quietly-labelled research
   chapter instead of a stack of separate feature modules. Interactive
   elements (the compare-choice buttons, the accordion toggles, real data
   tables) keep a boundary — everything else uses whitespace + typography.
   Guide mode above is untouched by this block, which is what gives Guide
   vs. Browse their distinct density (§11). ────────────────────────────── */

/* Remove the double-indent from nesting a 20px-margin panel inside an
   18px-margin <details> wrapper — one consistent column instead of two
   staggered ones. */
body.ahcv4-preview #ahFullDetails .decision-panel,
body.ahcv4-preview #ahFullDetails .p4,
body.ahcv4-preview #ahFullDetails .research-cat,
body.ahcv4-preview #ahFullDetails .info-list,
body.ahcv4-preview #ahFullDetails .map-wrap,
body.ahcv4-preview #ahFullDetails .layouts-section,
body.ahcv4-preview #ahFullDetails .action-row,
body.ahcv4-preview #ahFullDetails .pgallery-section,
body.ahcv4-preview #ahFullDetails .review-verdict {
  margin-left: 0;
  margin-right: 0;
}

/* Henry's Verdict (§5, §13): the page's other Henry-judgement moment — the
   duplicate quote is already suppressed upstream in consolidated-preview
   mode, and the byline is already a quiet signature (both pre-existing).
   The remaining card chrome around the four structured rows is flattened
   here so it reads as the research chapter's closing reference, not a
   second competing "feature". */
body.ahcv4-preview #ahFullDetails .review-verdict {
  margin-top: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  border-top: 1px solid var(--border, rgba(122,93,49,.16));
}

/* Instant Answer + Decision Brief (§6): compact reference strip, not a
   feature card. #compareSection keeps its card — it holds real interactive
   compare-choice buttons, a genuine interaction boundary (§9). This also
   covers the dark "Henry's Take" quick-take panel (§5): it's the exact same
   curated thesis already shown as the page's one hero at the top of Guide
   mode, so here — its second appearance, deep in Browse mode — it becomes
   plain subordinate copy instead of a second dark hero card. */
body.ahcv4-preview #ahFullDetails .decision-panel:not(#compareSection) {
  margin-top: 0;
  padding: 22px 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  border-top: 1px solid var(--border, rgba(122,93,49,.16));
  box-shadow: none;
  color: var(--ink, #171513);
}

body.ahcv4-preview #ahFullDetails .decision-panel.dark .decision-kicker {
  color: var(--gold, #7a5d31);
}

body.ahcv4-preview #ahFullDetails .quick-take-text {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink, #171513);
}

body.ahcv4-preview #ahFullDetails .decision-panel.dark .scroll-cue {
  color: var(--ink-soft, #776f64);
}

body.ahcv4-preview #ahFullDetails .instant-answer {
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 14px 18px;
  margin-top: 14px;
}

body.ahcv4-preview #ahFullDetails .ia-item {
  border-top: 0;
  padding-top: 0;
}

body.ahcv4-preview #ahFullDetails .ia-label {
  font-size: 9.5px;
  letter-spacing: .07em;
  margin-bottom: 3px;
}

body.ahcv4-preview #ahFullDetails .ia-value {
  font-size: 13.5px;
}

/* The jump-to-Decision-Brief CTA is redundant now that Instant Answer and
   Decision Brief sit directly adjacent in one flattened strip. */
body.ahcv4-preview #ahFullDetails .decision-jump-row {
  display: none;
}

body.ahcv4-preview #ahFullDetails #compareSection {
  margin-top: 0;
}

/* "Detail Mode" / research-chapter header (§12): quieter than a promotional
   section header, without changing its copy. */
body.ahcv4-preview #ahFullDetails #projectDetails > .chapter-h {
  font-size: 19px;
  font-weight: 600;
}

body.ahcv4-preview #ahFullDetails #projectDetails > .chapter-sub {
  margin-top: -2px;
  font-size: 12.5px;
}

/* One shared, quiet sub-heading size for every research sub-section (Area &
   Timing, Quick Answer, Investment & Lifestyle, Facilities, Location,
   Layouts, More Projects, FAQ, Who this suits) — §3, §13: same visual
   weight throughout instead of each one reading as its own landing-page
   module. Bottom CTA heading (.p4-cta-h) is a different class and keeps
   its own scale intentionally (§16 — it's the page's closing moment). */
body.ahcv4-preview #ahFullDetails .p4-h {
  font-size: 17px;
  font-weight: 600;
}

body.ahcv4-preview #ahFullDetails .p4-collapse > summary {
  padding: 13px 14px;
}

/* Accordions keep a boundary (they're a real interactive toggle, §9) but a
   lighter one — smaller radius matching the button scale, no separate card
   tint from the page background. */
body.ahcv4-preview #ahFullDetails .p4-collapse {
  border-radius: 8px;
  border-color: rgba(122,93,49,.14);
  background: transparent;
}

/* Quick Answer isn't behind a toggle (unlike its neighbours) — flatten its
   card so it reads as part of the same research rhythm rather than a
   standalone highlighted module. */
body.ahcv4-preview #ahFullDetails .p4-qa {
  background: transparent;
  border: 0;
  padding: 0;
}

/* Pros/cons and near-project blocks are informational, not interactive —
   lose the card, keep list-row dividers (§9). */
body.ahcv4-preview #ahFullDetails .p4-prosbox,
body.ahcv4-preview #ahFullDetails .p4-consbox {
  background: transparent;
  border: 0;
  padding: 0;
}

body.ahcv4-preview #ahFullDetails .p4-near-item {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border, rgba(122,93,49,.14));
  border-radius: 0;
  padding: 12px 0;
  margin-top: 0;
}

body.ahcv4-preview #ahFullDetails .p4-near-item:first-child {
  border-top: 0;
}

/* Pre-judgment: quiet "ghost" WA button (border only, no fill) instead of a
   solid green CTA — signals "available, not yet the main ask" through
   colour/weight rather than opacity, so the bar and its facts row stay
   fully legible at all times (no risk of the fixed-bar transparency
   bleed-through bug the opacity approach had). */
body.ahcv4-mode-guide:not(.ahcv4-judgment-reached) .sticky-cta {
  padding-top: 9px;
  padding-bottom: 9px;
}

body.ahcv4-mode-guide:not(.ahcv4-judgment-reached) .sticky-fact-value {
  font-size: 15px;
}

body.ahcv4-mode-guide:not(.ahcv4-judgment-reached) .sticky-cta .wa-btn {
  background: transparent;
  color: var(--ink, #171513);
  border: 1px solid var(--border, rgba(122,93,49,.32));
  box-shadow: none;
  padding: 11px 20px;
  transition: border-color .16s ease, background .16s ease;
}

body.ahcv4-mode-guide:not(.ahcv4-judgment-reached) .sticky-cta .wa-btn svg {
  color: var(--gold, #7a5d31);
}

body.ahcv4-mode-guide:not(.ahcv4-judgment-reached) .sticky-cta .wa-btn:hover,
body.ahcv4-mode-guide:not(.ahcv4-judgment-reached) .sticky-cta .wa-btn:focus-visible {
  border-color: var(--gold, #7a5d31);
  background: rgba(122,93,49,.05);
}

body.ahcv4-mode-guide:not(.ahcv4-judgment-reached) .sticky-cta .wa-sub {
  opacity: .78;
}

body.ahcv4-mode-browse .sticky-cta .wa-btn,
body.ahcv4-judgment-reached .sticky-cta .wa-btn {
  background: #25d366;
  color: #fff;
  border-color: #25d366;
  box-shadow: 0 4px 20px rgba(37,211,102,.35);
  padding: 14px 24px;
}

body.ahcv4-mode-browse .sticky-cta .wa-btn svg,
body.ahcv4-judgment-reached .sticky-cta .wa-btn svg {
  color: #fff;
}

body.ahcv4-mode-guide #ahFullDetails:not([open]) {
  min-height: 0;
}

@media (min-width: 760px) {
  .ahcv4-entry-choices {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 480px) {
  .ahcv4-shell,
  body.ahcv4-preview #ahConvSection,
  .ahcv4-full-details {
    margin-left: 14px;
    margin-right: 14px;
  }

  .ahcv4-title {
    font-size: 31px;
  }

  .ahcv4-take {
    font-size: 17.5px;
    line-height: 1.58;
  }

  .ahcv4-lead {
    font-size: 16.5px;
  }

  .ahcv4-prompt {
    font-size: 18px;
  }

  .ahcv4-entry-choice,
  .ahcv4-reply,
  .ahcv4-action {
    font-size: 14.5px;
    padding: 12px 13px;
  }

  .ahcv4-topbar {
    top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ahcv4-panel,
  .ahcv4-entry-choice,
  .ahcv4-reply,
  .ahcv4-action,
  .sticky-cta {
    animation: none !important;
    transition: none !important;
  }
}