/* =========================================================================
 * demo/page.css — page-local layout glue for the canonical demo.
 *
 * Anything that isn't a component yet lives here:
 *   - hero grid + portrait stack composite
 *   - trust strip grid (StatBlock pattern, planned)
 *   - services grid (3-card layout)
 *   - about grid (image + body)
 *   - newsletter card (planned NewsletterCard pattern, inlined)
 *   - footer market chip band layout (Footer component handles styling)
 *   - reveal animations
 *
 * Promoting these to components is a Phase 2 follow-up; Plan 0001 explicitly
 * keeps the layout glue local for now.
 * ========================================================================= */

/* -------- HERO -------- */
.page-hero {
  padding: var(--s-space-section-y) 0 var(--s-space-3xl);
  position: relative;
  overflow: hidden;
}
.page-hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--s-space-3xl);
  align-items: center;
}
.page-hero__lead { animation: fadeUp 0.8s 0.1s both; }
.page-hero__title {
  margin: 0 0 var(--s-space-lg);
  color: var(--s-text-primary);
}
.page-hero__sub {
  font-size: var(--p-text-19);
  line-height: var(--p-lh-body);
  color: var(--s-text-muted);
  max-width: 520px;
  margin: 0 0 var(--s-space-xl);
  animation: fadeUp 0.8s 0.18s both;
}
.page-hero__chip { margin-bottom: var(--s-space-lg); animation: fadeUp 0.7s 0.05s both; }
.page-hero__form { animation: fadeUp 0.8s 0.26s both; max-width: 540px; }
.page-hero__meta {
  display: flex;
  gap: var(--s-space-lg);
  align-items: center;
  margin-top: var(--s-space-md);
  font-size: var(--p-text-14);
  color: var(--s-text-muted);
  animation: fadeUp 0.8s 0.34s both;
  flex-wrap: wrap;
}
.page-hero__meta-item { display: inline-flex; align-items: center; gap: var(--s-space-xs); }
.page-hero__meta-item svg { color: var(--s-text-brand); }

/* -------- PORTRAIT STACK (planned PortraitStack component, inlined) -------- */
.portrait-stack {
  position: relative;
  width: 100%; /* fix: aspect-ratio + absolutely-positioned children collapse to 0×0 without an explicit width */
  aspect-ratio: 4/5;
  max-width: 480px;
  margin-left: auto;
  animation: fadeUp 1s 0.2s both;
}
.portrait-stack__image {
  position: absolute;
  inset: 0;
  border-radius: var(--s-radius-card);
  background:
    radial-gradient(circle at 30% 25%, #d8c4a8 0%, transparent 55%),
    radial-gradient(circle at 70% 80%, var(--p-accent-coral) 0%, transparent 60%),
    linear-gradient(135deg, #c9b89a 0%, var(--p-ink-300) 100%);
  box-shadow: var(--s-shadow-lg);
  overflow: hidden;
}
.portrait-stack__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 25%;
}
.portrait-stack__badge {
  position: absolute;
  bottom: -22px;
  left: -22px;
  background: var(--s-accent-warm);
  color: var(--s-text-primary);
  border-radius: var(--s-radius-control);
  padding: var(--s-space-sm) var(--s-space-lg);
  font-weight: var(--p-weight-semibold);
  font-size: var(--p-text-14);
  box-shadow: var(--s-shadow-md);
  transform: rotate(-4deg);
  display: flex;
  align-items: center;
  gap: var(--s-space-xs);
}
.portrait-stack__badge .star { color: var(--s-text-primary); }
.portrait-stack__quote {
  position: absolute;
  top: -16px;
  right: -28px;
  background: var(--s-surface-raised);
  border-radius: var(--s-radius-panel);
  padding: var(--s-space-md) var(--s-space-lg);
  font-family: var(--p-font-display);
  font-style: italic;
  font-size: var(--p-text-16);
  max-width: 220px;
  line-height: 1.35;
  box-shadow: var(--s-shadow-md);
  transform: rotate(3deg);
}
.portrait-stack__quote cite {
  display: block;
  font-style: normal;
  font-family: var(--p-font-body);
  font-size: var(--p-text-12);
  color: var(--s-text-muted);
  margin-top: var(--s-space-xs);
  font-weight: var(--p-weight-medium);
}
.doodle-arrow {
  position: absolute;
  left: 44%;
  top: 38%;
  width: 80px;
  color: var(--s-text-primary);
  opacity: 0.5;
  transform: rotate(8deg);
  pointer-events: none;
}

/* -------- TRUST STRIP (planned StatBlock pattern, inlined) -------- */
.strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-space-xl);
}
/* Two-stat variant: centered rather than left-packed into a 4-col track. */
.strip__grid--duo {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 44rem;
  text-align: center;
}
.stat__num {
  font-family: var(--p-font-display);
  font-size: var(--p-text-44);
  font-weight: var(--p-weight-regular);
  letter-spacing: var(--p-ls-tight);
  line-height: 1;
  margin-bottom: 6px;
}
.stat__label {
  font-size: var(--p-text-13);
  color: var(--s-text-muted);
  font-weight: var(--p-weight-medium);
}

/* -------- SERVICES (3-card grid) -------- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-space-lg);
}

/* -------- ABOUT -------- */
.about__grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: var(--s-space-3xl);
  align-items: center;
}
.about__portrait {
  aspect-ratio: 3/4;
  border-radius: var(--s-radius-card);
  background:
    radial-gradient(circle at 40% 30%, #d8c4a8 0%, transparent 55%),
    radial-gradient(circle at 70% 80%, var(--p-olive-500) 0%, transparent 70%),
    linear-gradient(135deg, var(--p-ink-300) 0%, var(--p-olive-700) 100%);
  box-shadow: var(--s-shadow-lg);
  position: relative;
  overflow: hidden;
}
.about__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 35%, rgba(249, 246, 243, 0.18) 0%, transparent 40%);
  pointer-events: none;
}
/* S7: the portrait renders. Same treatment as the hero portrait image. */
.about__portrait img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 25%;
}
.about__quote {
  margin: 0 0 var(--s-space-xl);
}
.about__body p {
  color: var(--s-text-muted);
  margin: 0 0 var(--s-space-md);
}
.about__sig {
  font-family: var(--p-font-display);
  font-style: italic;
  font-size: var(--p-text-22);
  margin-top: var(--s-space-md);
  color: var(--s-text-primary);
}

/* -------- NEWSLETTER (planned NewsletterCard, inlined) -------- */
.newsletter__card {
  background: var(--s-surface-inverse);
  color: var(--s-text-inverse);
  border-radius: var(--s-radius-card);
  padding: var(--s-space-3xl) 60px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--s-space-2xl);
  align-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--s-shadow-lg);
}
.newsletter__card::before {
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 194, 92, 0.22) 0%, transparent 70%);
  pointer-events: none;
}
.newsletter__title {
  font-family: var(--p-font-display);
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: var(--p-weight-regular);
  line-height: var(--p-lh-snug);
  letter-spacing: var(--p-ls-tight);
  margin: 0 0 var(--s-space-md);
}
.newsletter__title em {
  font-style: italic;
  color: var(--s-accent-warm);
}
.newsletter__sub {
  color: rgba(249, 246, 243, 0.7);
  font-size: var(--p-text-16);
  margin: 0 0 var(--s-space-xs);
}
.newsletter__form { margin-top: var(--s-space-xl); max-width: 460px; }
.newsletter__trust {
  margin-top: var(--s-space-md);
  font-size: var(--p-text-13);
  color: rgba(249, 246, 243, 0.55);
  display: flex;
  gap: var(--s-space-md);
  align-items: center;
}
.newsletter__avatars { display: flex; }
.newsletter__avatars span {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--s-surface-inverse);
  margin-left: -8px;
}
.newsletter__avatars span:first-child  { margin-left: 0; background: var(--p-accent-coral); }
.newsletter__avatars span:nth-child(2) { background: var(--p-accent-yellow); }
.newsletter__avatars span:nth-child(3) { background: var(--p-olive-500); }
.newsletter__avatars span:nth-child(4) { background: var(--p-accent-brick); }

.issue-stack { position: relative; }
.issue-card {
  background: rgba(249, 246, 243, 0.08);
  border: 1px solid rgba(249, 246, 243, 0.12);
  border-radius: var(--s-radius-panel);
  padding: var(--s-space-lg);
  transform: rotate(-2deg);
}
.issue-card--front {
  background: var(--s-accent-warm);
  color: var(--s-text-primary);
  border: 0;
  transform: rotate(3deg) translate(20px, -30px);
  position: relative;
  z-index: -1;
  opacity: 0.95;
}
.issue-card__eyebrow {
  font-size: var(--p-text-12);
  color: rgba(249, 246, 243, 0.5);
  margin-bottom: var(--s-space-xs);
  font-weight: var(--p-weight-semibold);
  letter-spacing: var(--p-ls-wide);
  text-transform: uppercase;
}
.issue-card--front .issue-card__eyebrow { color: var(--s-text-primary); }
.issue-card__title {
  font-family: var(--p-font-display);
  font-size: var(--p-text-22);
  line-height: 1.2;
  margin-bottom: var(--s-space-sm);
}
.issue-card__meta {
  font-size: var(--p-text-13);
  color: rgba(249, 246, 243, 0.55);
}

/* -------- TESTIMONIAL AVATAR — initials placeholder (swap for real headshots) -------- */
.testimonial__avatar--initials {
  display: grid;
  place-items: center;
  font-family: var(--p-font-display);
  font-weight: var(--p-weight-semibold);
  font-size: var(--p-text-16);
  color: var(--s-text-primary);
  letter-spacing: 0.01em;
}

/* -------- ANIMATIONS -------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* -------- RESPONSIVE -------- */
@media (max-width: 900px) {
  .page-hero__grid,
  .about__grid,
  .newsletter__card { grid-template-columns: 1fr; }
  .portrait-stack { max-width: 360px; margin: var(--s-space-md) auto var(--s-space-2xl); }
  .svc-grid { grid-template-columns: 1fr; }
  .strip__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-space-lg); }
  .doodle-arrow { display: none; }
  .newsletter__card { padding: var(--s-space-2xl) var(--s-space-xl); }
}

/* ============== RECENTLY CLOSED ============== */
.closed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-space-lg);
  margin-top: var(--s-space-2xl);
}
.closed-card { padding: 0; overflow: hidden; }
.closed-card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--s-surface-sunken);
}
.closed-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.closed-card__media--tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(120% 120% at 30% 20%, var(--s-accent-soft) 0%, var(--s-accent-strong) 100%);
  color: var(--s-text-inverse);
}
.closed-card__tile-city { font-family: 'Fraunces', serif; font-size: 1.6rem; font-weight: 600; line-height: 1; }
.closed-card__tile-state { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.82; margin-top: 4px; }
.closed-card__tag {
  position: absolute; top: var(--s-space-sm); left: var(--s-space-sm);
  background: var(--s-scrim-image); color: var(--s-text-inverse);
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--s-radius-control); backdrop-filter: blur(4px);
}
.closed-card__body { padding: var(--s-space-lg); }
.closed-card__price { font-family: 'Fraunces', serif; font-size: 1.75rem; font-weight: 600; color: var(--s-text-primary); line-height: 1.1; }
.closed-card__loc { color: var(--s-text-secondary); font-size: 0.95rem; margin-top: 6px; }
.closed-card__meta { color: var(--s-text-muted); font-size: 0.8rem; margin-top: 10px; }
@media (max-width: 900px) { .closed-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .closed-grid { grid-template-columns: 1fr; } }

/* ==================================================================
   MOCKUP-ONLY STYLES (homepage-v2)
   Not part of the design system. These exist so Ry can see, on one
   page, which facts are still outstanding. They come off when the
   copy ships to the real site.
   ================================================================== */

.mock-body { padding-top: 44px; }

.mock-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  background: #1b1624;
  color: #f9f6f3;
  font-size: 12px;
  letter-spacing: 0.03em;
  text-align: center;
  padding: 12px 16px;
}
.mock-banner b { text-transform: uppercase; margin-right: 8px; color: #f0b429; }

/* Amber chip: a fact Ry must supply or approve. */
.mock-chip {
  display: block;
  background: #fdf3d8;
  border: 1px solid #e0a800;
  border-left: 4px solid #e0a800;
  border-radius: 4px;
  color: #6b4e00;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
  padding: 8px 10px;
  margin: 10px 0;
  text-align: left;
  white-space: normal;
}
.mock-chip--inline {
  display: inline-block;
  margin: 0;
  padding: 1px 6px;
  font-size: 11px;
  vertical-align: baseline;
  white-space: nowrap;
}

.mock-note {
  background: rgba(27, 22, 36, 0.04);
  border-left: 3px solid rgba(27, 22, 36, 0.25);
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--s-text-muted);
  padding: 12px 14px;
  margin: 0 0 var(--s-space-xl);
}
.mock-note code { font-size: 12px; }

/* Three-tile trust strip. */
.strip__grid--trio {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  text-align: center;
}
@media (max-width: 760px) { .strip__grid--trio { grid-template-columns: 1fr; } }

/* Trust strip with the empty seller-review slot beside the three numbers (S5). */
.strip__grid--quad {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  text-align: center;
  align-items: center;
}
@media (max-width: 900px) { .strip__grid--quad { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .strip__grid--quad { grid-template-columns: 1fr; } }
.review-slot { text-align: left; }

/* Value stack in the hero (S1). */
.value-stack { margin: 0 0 var(--s-space-lg); }
.value-stack__title {
  font-weight: var(--p-weight-semibold);
  color: var(--s-text-primary);
  margin: 0 0 var(--s-space-xs);
}
.value-stack__list {
  margin: 0;
  padding-left: 1.2em;
  color: var(--s-text-muted);
  line-height: 1.7;
}

/* Link out to the full closings wall (S2). */
.closed-more {
  margin: var(--s-space-2xl) 0 0;
  text-align: center;
}

/* Footnote markers and the definitions list under the numbers. */
.fn-ref {
  font-size: 0.7em;
  vertical-align: super;
  line-height: 0;
  margin-left: 2px;
  text-decoration: none;
  color: var(--s-text-brand);
}
.fn-list {
  margin: var(--s-space-xl) auto 0;
  max-width: 52rem;
  font-size: 13px;
  line-height: 1.6;
  text-align: left;
}
.fn-list dt {
  font-weight: 600;
  color: var(--s-text-primary);
  margin-top: var(--s-space-md);
}
.fn-list dd {
  margin: 2px 0 0;
  color: var(--s-text-muted);
}

/* Hero additions: credential line, standalone button, reassurance. */
.page-hero__cred {
  font-size: 15px;
  line-height: 1.65;
  color: var(--s-text-muted);
  max-width: 44rem;
  margin: 0 0 var(--s-space-lg);
}
.page-hero__cta { margin: var(--s-space-lg) 0 var(--s-space-sm); }
.page-hero__undercta {
  font-size: 13px;
  color: var(--s-text-muted);
  margin: 0 0 var(--s-space-lg);
}

/* Closing CTA offer stack. */
.cta-section__stack {
  max-width: 44rem;
  margin: 0 auto var(--s-space-xl);
  text-align: left;
}
.cta-section__stack-line {
  margin: 0 0 var(--s-space-sm);
  font-size: 15px;
  line-height: 1.6;
  color: rgba(249, 246, 243, 0.85);
}

/* Cash Offer Guide block. */
.guide-price {
  font-family: var(--p-font-display);
  font-size: var(--p-text-44);
  line-height: 1;
  margin: 0 0 var(--s-space-md);
}
.guide-cta { margin: 0 0 var(--s-space-2xl); }
.guide-stack { max-width: 48rem; }
.guide-stack__list {
  padding-left: 1.2em;
  margin: var(--s-space-md) 0 0;
}
.guide-stack__list li {
  margin-bottom: var(--s-space-sm);
  line-height: 1.6;
  color: var(--s-text-muted);
}
.guide-stack__list li b { color: var(--s-text-primary); }

/* Footer additions. */
.footer__disclaimer { margin-top: 6px; }
.footer__phone { margin: var(--s-space-lg) 0; }

/* What-changed list. */
.mock-changelog {
  border-top: 3px solid #e0a800;
  background: #fffdf6;
}
.mock-changelog__lead {
  color: var(--s-text-muted);
  margin: 0 0 var(--s-space-xl);
}
.mock-changelog__list { padding-left: 1.3em; max-width: 56rem; }
.mock-changelog__list li {
  margin-bottom: var(--s-space-md);
  line-height: 1.6;
  color: var(--s-text-muted);
}
.mock-changelog__list li b { color: var(--s-text-primary); }

/* Phone-width fix (usability gate 2026-09-21): the eyebrow chip is nowrap and
   was forcing the hero column to 406px at a 375px viewport (sideways scroll). */
.page-hero__lead { min-width: 0; }
@media (max-width: 480px) {
  .page-hero__eyebrow, .chip--eyebrow { white-space: normal; }
}
@media (max-width: 480px) {
  /* Brand text hides, the R mark stays; the one ask keeps its full label. */
  .nav__brand { font-size: 0; gap: 0; white-space: nowrap; }
  .nav__brand-mark { font-size: 1rem; }
  .nav .btn--primary { padding: 0.5rem 0.75rem; font-size: 0.875rem; white-space: nowrap; }
}

/* Usability gate 2026-09-21: footer small text was 3.22:1 on the sunken bg; 5.34:1 now. */
.footer__legal, .footer__legal a, .footer__disclaimer { color: #665b69; }
/* Usability gate 2026-09-21: at 1280x800 the hero button sat under the fold.
   Headline capped at 4rem (was ~79px, four lines) and hero top padding trimmed. */
@media (min-width: 901px) {
  .page-hero { padding-top: 56px; }
  .page-hero__title { font-size: clamp(2.75rem, 4.8vw, 4rem); }
}

/* Usability gate 2026-09-21: footer legal links were 17px tall; 24px floor (WCAG 2.5.8). */
.footer__legal a { display: inline-block; padding: 6px 2px; }

/* Usability gate 2026-09-21, rule 5: city names looked like tappable pills but were not. Plain text now. */
.footer__markets-text { margin: 0; color: var(--p-ink-600, #55505a); font-size: 0.9375rem; line-height: 1.7; }

/* mockup-only: inline chips wrap instead of clipping at 375px */
.mock-chip--inline { white-space: normal; max-width: 100%; }

/* mockup-only: the banner sits at the bottom of the screen, out of the page flow, so the fold test is honest */
.mock-banner { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 50; }
body.mock-body { padding-bottom: 48px; }

/* Usability gate 2026-09-21, rule 8: at 375x812 the button was 21px under the fold with no mockup scaffolding left above it. */
@media (max-width: 480px) { .page-hero { padding-top: 40px; } }