/* ==========================================================================
   home.css — the main domain landing page (HomeCV Landing).
   Layers ON TOP of tokens.css + coverage-model.css + landing.css + story.css.
   Adds: the "flow line" brand motif (lean animated strokes), the hero HomeCV
   sections card, and the narrative card components for the 9-section story.
   Linked ONLY on the home page, so global selectors here are safe to scope.
   ========================================================================== */

/* anchored sections clear the sticky 68px nav */
section[id], main[id] { scroll-margin-top: 84px; }

/* ─── Problem section messages ─────────────────────────────────────────── */
.prob-msg {
  display: flex; flex-direction: column; gap: 14px;
}
.prob-msg-1 {
  font-family: var(--serif); font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600; line-height: 1.25; color: var(--brown);
  text-wrap: pretty; margin: 0;
}
.prob-msg-2 {
  font-family: var(--sans); font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 400; line-height: 1.5; color: var(--brown-3);
  text-wrap: pretty; margin: 0;
  padding-left: 18px; border-left: 3px solid var(--line-strong);
}
.prob-msg-3 {
  font-family: var(--serif); font-size: clamp(19px, 2vw, 24px);
  font-weight: 600; font-style: italic; line-height: 1.3; color: var(--accent);
  text-wrap: pretty; margin: 8px 0 0;
}

/* ─── Stakeholder feat-card list + note ───────────────────────────────── */

/* ─── Homeowner control callout ─────────────────────────────────────────── */
.owner-control {
  max-width: 640px; margin: 32px auto 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 28px 32px;
}
.owner-control-title {
  font-family: var(--serif); font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 600; color: var(--brown); margin: 0 0 16px;
}

.feat-list {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.feat-list li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 16px; line-height: 1.45; color: var(--brown-2);
}
.feat-list li i { font-size: 15px; color: var(--accent); flex: 0 0 auto; margin-top: 2px; }
.feat-note {
  margin: 14px 0 0; padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 13.5px; font-weight: 600; color: var(--brown-3);
  font-style: italic;
}

/* ─── Dark "ink" sections → very dark green (tonality of the teal CTA) ────
   The Start HomeCV button is deep teal (--accent #175f64); these dark bands
   go a few steps deeper into the same green family instead of near-black. */
.band-ink {
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(16,96,101,0.5), transparent 60%),
    #06312e;
}
.demo .scan-card { background: #06312e; }

/* keep hero + cta content layered cleanly */
.hero .hero-grid, .cta-final .wrap, .guide-band .wrap { position: relative; z-index: 1; }

/* ─── Hero adjustments ─────────────────────────────────────────────────── */
.hero { position: relative; }
.hero-secondary {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 18px;
  font-size: 14px; font-weight: 500; color: var(--accent);
  transition: gap .16s ease;
}
.hero-secondary:hover { gap: 11px; }
.hero-secondary i { font-size: 17px; }

/* the HomeCV sections card shown in the hero demo idle state */
.cvsec-photo {
  position: relative; height: 124px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line-strong); margin-bottom: 14px;
  background:
    repeating-linear-gradient(135deg, rgba(36,30,22,0.05) 0 12px, rgba(36,30,22,0.02) 12px 24px),
    linear-gradient(160deg, #cbb98f, #a98f63 60%, #7a4f2a);
}
.cvsec-found {
  position: absolute; left: 12px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 600; color: #fff;
  background: rgba(21,19,15,0.5); padding: 5px 11px; border-radius: 100px;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.cvsec-found i { font-size: 14px; color: #9dc47b; }
.cvsec-list { display: flex; flex-direction: column; gap: 7px; }
.cvsec {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 13px; background: var(--bg); border: 1px solid var(--line);
  border-radius: 9px; transition: border-color .14s ease, transform .14s ease;
}
.cvsec:hover { border-color: var(--accent); transform: translateX(2px); }
.cvsec-ic {
  width: 30px; height: 30px; border-radius: 7px; flex: 0 0 auto;
  display: grid; place-items: center; background: var(--surface-2);
  color: var(--accent); font-size: 16px;
}
.cvsec-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.cvsec-tx b { font-size: 13.5px; font-weight: 600; color: var(--brown); line-height: 1.2; }
.cvsec-tx small { font-size: 12px; color: var(--brown-3); }
.cvsec-on { font-size: 16px; color: var(--success); flex: 0 0 auto; }
.demo-idle { height: auto !important; }

/* the real HomeCV Coverage / Dashboard card shown in the hero */
.hero-cvcard { max-width: 384px; margin: 0 auto; width: 100%; }

/* ─── Imagery ──────────────────────────────────────────────────────────────
   Full-bleed photo scrims are tinted into the dark-green theme (not black),
   so pictures and the dark bands share one tonality. */
.fb { min-height: 70vh; }
.fb::before {
  background:
    linear-gradient(90deg, rgba(4,38,35,0.86) 0%, rgba(4,38,35,0.58) 40%, rgba(4,38,35,0.12) 72%, rgba(4,38,35,0.03) 100%),
    linear-gradient(0deg, rgba(4,38,35,0.5) 0%, rgba(4,38,35,0) 42%);
}
.fb.fb-center::before {
  background:
    radial-gradient(120% 100% at 50% 50%, rgba(4,38,35,0.42), rgba(4,38,35,0.82) 100%),
    linear-gradient(0deg, rgba(4,38,35,0.55) 0%, rgba(4,38,35,0.12) 50%);
}

/* hero: a large home photo with a SMALL live Coverage card resting in its corner */
.hero { position: relative; }
.hero-visual { position: relative; }
/* compact hero so the next section peeks below the fold + cue stays in view */
.hero .hero-grid { padding: 38px 0 32px; }
.hero .hero-pill { margin-bottom: 16px; }
.hero h1 { font-size: clamp(33px, 4vw, 49px); }
.hero .hero-sub { font-size: 16px; line-height: 1.5; margin-top: 14px; max-width: 44ch; }
.hero .addr-form { margin-top: 20px; }
.hero .hero-secondary { margin-top: 13px; }
.hero .hero-assure { display: none; }
.hero-home {
  position: relative; width: 100%; height: 420px;
  border-radius: 16px; background-size: cover; background-position: center 40%;
  box-shadow: 0 36px 72px -42px rgba(36,30,22,0.62);
}
/* scroll cue so the next section is clearly "below the fold" */
.hero-scroll {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brown-4); background: rgba(255,255,255,0.7);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: 100px; padding: 7px 15px;
}
.hero-scroll i { font-size: 15px; color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .hero-scroll i { animation: scrollBob 1.7s ease-in-out infinite; }
}
@keyframes scrollBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@media (max-width: 1000px) { .hero-scroll { display: none; } }
.hero-visual .demo {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  width: 336px; min-height: 0;
  transform: scale(0.64); transform-origin: bottom right;
  box-shadow: 0 26px 54px -22px rgba(6,49,46,0.55);
}
@media (max-width: 1000px) {
  .hero-home { height: 380px; }
  .hero-visual .demo { transform: scale(0.6); right: 8px; bottom: 8px; }
}
@media (max-width: 560px) {
  .hero-home { height: 300px; }
  .hero-visual .demo { transform: scale(0.5); right: -8px; bottom: -8px; }
}

/* ─── Narrative band helpers ───────────────────────────────────────────── */
.lede-strong {
  font-family: var(--serif); font-size: clamp(22px, 2.6vw, 30px); line-height: 1.28;
  color: var(--brown); font-weight: 600; max-width: 22ch; margin: 0; text-wrap: balance;
}
.band-ink .lede-strong { color: #f5f2e7; }
.problem-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 60px; align-items: center; }
.problem-grid .resolve-line { margin-top: 26px; }

/* the "scatter → one record" mini diagram */
.scatter {
  position: relative; aspect-ratio: 1 / 1; max-width: 380px; margin-left: auto;
}
.scatter-doc {
  position: absolute; display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 500; color: var(--brown-3);
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 12px; box-shadow: 0 10px 24px -16px rgba(36,30,22,0.5);
  white-space: nowrap;
}
.scatter-doc i { font-size: 14px; color: var(--brown-4); }
.scatter-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 124px; height: 124px; border-radius: 18px; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: radial-gradient(circle at 50% 36%, #237b80, #175f64 74%);
  color: #f5f2e7; box-shadow: 0 24px 50px -22px rgba(23,95,100,0.7);
}
.scatter-core i { font-size: 30px; color: var(--gold-soft); }
.scatter-core b { font-family: var(--serif); font-size: 17px; font-weight: 600; }
.scatter-line { position: absolute; inset: 0; z-index: 1; }
.scatter-line path { fill: none; stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 4; }
@media (prefers-reduced-motion: no-preference) {
  .scatter-doc { animation: scatterFloat 7s ease-in-out infinite alternate; }
  .scatter-doc:nth-child(2) { animation-delay: -1.4s; }
  .scatter-doc:nth-child(3) { animation-delay: -2.8s; }
  .scatter-doc:nth-child(4) { animation-delay: -4.2s; }
  .scatter-doc:nth-child(5) { animation-delay: -5.6s; }
  .scatter-line path { stroke-dasharray: 3 4; animation: scatterPulse 5s linear infinite; }
}
@keyframes scatterFloat { from { transform: translateY(0); } to { transform: translateY(-7px); } }
@keyframes scatterPulse { to { stroke-dashoffset: -28; } }

/* ─── Feature / stakeholder / outcome cards (one flexible component) ────── */
.feat-grid { display: grid; gap: 16px; margin-top: 46px; }
.feat-grid.c3 { grid-template-columns: repeat(3, 1fr); }
.feat-grid.c2 { grid-template-columns: repeat(2, 1fr); }
.feat-card {
  position: relative; background: var(--bg); border: 1px solid var(--line);
  border-radius: 14px; padding: 28px 26px;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.feat-card.link:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 24px 48px -32px rgba(36,30,22,0.5); }
.feat-ic {
  width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center;
  background: var(--surface-2); color: var(--accent); font-size: 25px; margin-bottom: 18px;
  transition: background .16s ease, color .16s ease;
}
.feat-card.link:hover .feat-ic { background: var(--accent); color: #f3efe3; }
.feat-tag { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--gold); display: block; margin-bottom: 9px; }
.feat-card h3 { font-family: var(--serif); font-size: 22px; font-weight: 600; margin: 0 0 9px; color: var(--brown); }
.feat-card p { font-size: 16px; line-height: 1.55; color: var(--brown-3); margin: 0; text-wrap: pretty; }
.feat-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 16px;
  font-size: 13px; font-weight: 600; color: var(--accent); transition: gap .16s ease;
}
.feat-card.link:hover .feat-link { gap: 10px; }

/* "All together" lead card — full width, calm teal wash */
.feat-card.lead {
  grid-column: 1 / -1; display: flex; gap: 22px; align-items: center;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(23,95,100,0.06), transparent 60%),
    var(--bg);
  border-color: rgba(23,95,100,0.28);
}
.feat-card.lead .feat-ic { margin: 0; width: 54px; height: 54px; font-size: 28px; background: var(--accent); color: #f3efe3; }
.feat-card.lead .lead-tx { flex: 1 1 auto; }
.feat-card.lead h3 { margin-bottom: 6px; }
.feat-card.lead p { font-size: 16px; max-width: 70ch; }

/* ─── Positioning callout (the guide's honest boundary) ────────────────── */
.positioning {
  display: flex; gap: 14px; align-items: flex-start; margin-top: 30px;
  padding: 22px 24px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; max-width: 62ch;
}
.positioning .pos-seal {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  color: var(--accent); font-size: 19px;
  background: radial-gradient(circle at 50% 38%, #fbfaf4, #f1ede0);
  box-shadow: inset 0 0 0 1.5px var(--gold);
}
.positioning p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--brown-2); text-wrap: pretty; }
.positioning b { color: var(--brown); font-weight: 600; }

/* ─── Plan CTA row ─────────────────────────────────────────────────────── */
.plan-cta { display: flex; justify-content: center; margin-top: 44px; }

/* ─── Avoid-failure list as short stress chips ─────────────────────────── */
.stress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 40px; }
.stress-item {
  display: flex; align-items: center; gap: 12px;
  background: rgba(246,241,230,0.05); border: 1px solid rgba(246,241,230,0.14);
  border-radius: 11px; padding: 16px 18px;
}
.stress-item i { font-size: 19px; color: var(--gold-soft); flex: 0 0 auto; }
.stress-item span { font-size: 15px; font-weight: 500; color: #ece6d8; }

/* ─── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .problem-grid { grid-template-columns: 1fr; gap: 40px; }
  .scatter { margin: 0 auto; }
  .feat-grid.c3, .feat-grid.c2 { grid-template-columns: 1fr 1fr; }
  .feat-card.lead { flex-direction: column; align-items: flex-start; gap: 16px; }
  .stress { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .feat-grid.c3, .feat-grid.c2 { grid-template-columns: 1fr; }
}