/* ============================================================================
   FAMILY OBSERVATORY : HOME / HERO + PRODUCT DEMO
   Production component. Depends on tokens.css + base.css. v1.0.0 : 2026-07-10
   Light, warm hero (never dark). Real product UI, never a flattened screenshot.
   ========================================================================== */

.fo-hero { position:relative; overflow:hidden;
  background:
    radial-gradient(900px 520px at 88% 8%, var(--brand-soft), transparent 62%),
    radial-gradient(700px 420px at 6% 96%, var(--accent-soft), transparent 60%),
    var(--bg);
}
.fo-hero-art { position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.fo-hero-art svg { position:absolute; top:50%; right:-4%; transform:translateY(-50%); width:min(720px,60%); height:auto; opacity:0.7; }

/* Top gap under the nav is deliberately small (~24-40px, the locked ecosystem hero
   standard). Real browsers render top padding heavier than headless screenshots, so a
   symmetric clamp reads as dead space under the header. Bottom stays generous. */
.fo-hero-inner { position:relative; z-index:1; max-width:var(--container-xl); margin-inline:auto;
  padding:clamp(var(--space-5), 3vw, 2.5rem) var(--gutter) clamp(var(--space-7), 6vw, var(--space-9));
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:var(--space-8); align-items:center; }

.fo-hero-copy .eyebrow { margin-bottom:var(--space-4); }
.fo-hero-copy h1 { font-size:clamp(2.6rem, 6vw, var(--fs-6xl)); line-height:1.02; letter-spacing:-0.02em; margin-bottom:var(--space-5); }
.fo-hero-copy .lead { font-size:clamp(1.15rem, 2vw, var(--fs-xl)); max-width:34ch; margin-bottom:var(--space-6); }
.fo-hero-actions { display:flex; flex-wrap:wrap; gap:var(--space-3); margin-bottom:var(--space-5); }
.fo-hero-trust { display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--fs-sm); color:var(--muted); font-weight:600; }
.fo-hero-trust svg { color:var(--brand); flex:none; }

/* ---- Hero photo + floating status badge -------------------------------- */
.fo-hero-media { position:relative; }
.fo-hero-photo { aspect-ratio:6/5; border-radius:var(--radius-xl); }
.fo-hero-photo img { object-position:62% center; }
/* Sized to its content, 2026-09-26: at a fixed 330px the nowrap title ran under
   the Covered pill. The card now grows to fit one line where there is room and
   wraps inside itself where there is not, so the pill never overlaps text. */
.fo-hero-badge { position:absolute; left:-24px; bottom:-20px; width:max-content; max-width:calc(100% + 16px); gap:var(--space-3); box-shadow:var(--shadow-lg); }
.fo-hero-badge .status { flex:none; }
@media (max-width:900px){
  .fo-hero-photo { aspect-ratio:3/2; }
  .fo-hero-badge { left:16px; bottom:16px; }
}
@media (max-width:480px){ .fo-hero-badge { position:relative; z-index:1; left:auto; bottom:auto; width:auto; margin-top:calc(-1 * var(--space-6)); max-width:none; } }

/* ---- Product demo mini (senior check-in + family status) --------------- */
.fo-demo { display:grid; gap:var(--space-4); }
.fo-device { background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); padding:var(--space-5); }
.fo-checkin-greet { color:var(--text); }
.fo-device-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-4); }
.fo-device-time { font-size:var(--fs-sm); color:var(--muted); font-weight:600; }
.fo-checkin-greet { font-family:var(--font-display); font-size:var(--fs-xl); margin:0 0 var(--space-2); }
.fo-checkin-q { color:var(--text-2); margin:0 0 var(--space-5); font-size:var(--fs-lg); }
.fo-checkin-btns { display:grid; gap:var(--space-3); }
.fo-big-btn { min-height:var(--touch-senior); border-radius:var(--radius-lg); border:2px solid transparent; font:700 var(--fs-lg)/1 var(--font-sans); display:flex; align-items:center; justify-content:center; gap:var(--space-3); cursor:pointer; }
.fo-big-btn--ok { background:var(--ok); color:#fff; }
.fo-big-btn--help { background:var(--surface); color:var(--help); border-color:var(--help); }
.fo-big-btn svg { width:26px; height:26px; }

.fo-status-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:var(--space-4) var(--space-5); display:flex; align-items:center; gap:var(--space-4); }
.fo-status-avatar { width:46px; height:46px; border-radius:50%; background:var(--brand-soft); color:var(--brand-strong); display:grid; place-items:center; font-weight:700; flex:none; }
.fo-status-body { flex:1; min-width:0; }
.fo-status-name { font-weight:700; margin:0; }
.fo-status-meta { margin:2px 0 0; font-size:var(--fs-sm); color:var(--muted); }

@media (max-width: 900px) {
  .fo-hero-inner { grid-template-columns:1fr; gap:var(--space-7); }
  /* The art is decorative and 0.35 opacity, and at 120% width with right:-30% it
     measured 468px inside a 390px viewport. .fo-hero has overflow:hidden so it was
     clipped visually, but it still fed Chrome's mobile shrink-to-fit calculation.
     Sized to the viewport instead: the composition is unchanged and the page is no
     longer rescaled because of a background decoration. */
  .fo-hero-art svg { opacity:0.35; width:100%; right:-8%; }
}