/* ============================================================================
   FAMILY OBSERVATORY : HOMEPAGE SECTION COMPONENTS
   Depends on tokens.css + base.css + home.css. v1.0.0 : 2026-07-10
   ========================================================================== */

/* ---- Section intro ----------------------------------------------------- */
.sec-head { max-width:56ch; margin-inline:auto; text-align:center; margin-bottom:var(--space-7); }
.sec-head.left { text-align:left; margin-inline:0; }
.sec-head h2 { font-size:clamp(1.9rem, 4vw, var(--fs-4xl)); margin-bottom:var(--space-3); }
.sec-head p { color:var(--text-2); font-size:var(--fs-lg); margin-inline:auto; }
.sec-head.left p { margin-inline:0; }

/* ---- Product demonstration (big, side by side) ------------------------- */
.demo-split { display:grid; grid-template-columns:1fr auto 1fr; gap:var(--space-6); align-items:center; }
.demo-side { display:grid; gap:var(--space-4); }
.demo-caption { display:flex; align-items:center; gap:var(--space-3); font-weight:700; color:var(--brand-strong); }
.demo-caption .n { width:30px; height:30px; border-radius:50%; background:var(--brand); color:#fff; display:grid; place-items:center; font-size:var(--fs-sm); flex:none; }
.demo-arrow { display:grid; place-items:center; color:var(--brand); }
@media (max-width:820px){ .demo-split{ grid-template-columns:1fr; } .demo-arrow{ transform:rotate(90deg); } }

/* ---- The problem ------------------------------------------------------- */
.problem-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:var(--space-5); }
.problem-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--space-6); }
.problem-card .pc-ico { width:44px; height:44px; border-radius:var(--radius-md); background:var(--brand-soft); color:var(--brand-strong); display:grid; place-items:center; margin-bottom:var(--space-4); }
.problem-card h3 { font-family:var(--font-sans); font-size:var(--fs-lg); font-weight:700; margin-bottom:var(--space-2); }
.problem-card p { color:var(--text-2); font-size:var(--fs-sm); margin:0; }

/* ---- How it works steps ----------------------------------------------- */
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--space-6); counter-reset:step; }
.step { position:relative; }
.step .step-n { width:52px; height:52px; border-radius:50%; background:var(--brand); color:#fff; font-family:var(--font-display); font-size:var(--fs-xl); display:grid; place-items:center; margin-bottom:var(--space-4); }
.step h3 { font-family:var(--font-sans); font-size:var(--fs-lg); font-weight:700; margin-bottom:var(--space-2); }
.step p { color:var(--text-2); font-size:var(--fs-sm); margin:0; }

/* ---- Feature split (senior / family experience) ----------------------- */
.feature { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-8); align-items:center; }
.feature.reverse .feature-media { order:2; }
.feature-media { display:grid; place-items:center; }
.feature ul { list-style:none; padding:0; margin:var(--space-4) 0 0; display:grid; gap:var(--space-3); }
.feature li { display:flex; gap:var(--space-3); align-items:flex-start; color:var(--text-2); }
.feature li svg { color:var(--ok); flex:none; margin-top:3px; }
@media (max-width:820px){ .feature{ grid-template-columns:1fr; } .feature.reverse .feature-media{ order:0; } }

/* ---- Differentiators --------------------------------------------------- */
.diff-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--space-4); }
.diff { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--space-5); display:flex; gap:var(--space-4); align-items:flex-start; }
.diff .d-ico { width:40px; height:40px; border-radius:var(--radius-sm); background:var(--brand-soft); color:var(--brand-strong); display:grid; place-items:center; flex:none; }
.diff h3 { font-family:var(--font-sans); font-size:var(--fs-base); font-weight:700; margin:0 0 4px; }
.diff p { font-size:var(--fs-sm); color:var(--muted); margin:0; }

/* ---- Privacy list ------------------------------------------------------ */
.privacy { background:var(--brand-soft); }
.privacy-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--space-4); margin-top:var(--space-6); }
.privacy-item { display:flex; gap:var(--space-3); align-items:flex-start; background:var(--surface); border-radius:var(--radius-md); padding:var(--space-4) var(--space-5); }
.privacy-item svg { color:var(--brand); flex:none; margin-top:2px; }
.privacy-item b { display:block; color:var(--text); } .privacy-item span { font-size:var(--fs-sm); color:var(--muted); }

/* ---- Pricing preview --------------------------------------------------- */
.pricing-card { max-width:440px; margin-inline:auto; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl); box-shadow:var(--shadow-md); padding:var(--space-7); text-align:center; }
.pricing-badge { display:inline-block; background:var(--accent-soft); color:var(--accent-strong); font-size:var(--fs-xs); font-weight:700; letter-spacing:0.08em; text-transform:uppercase; padding:5px 14px; border-radius:var(--radius-pill); margin-bottom:var(--space-4); }
.pricing-amount { font-family:var(--font-display); font-size:var(--fs-6xl); line-height:1; color:var(--text); }
.pricing-amount span { font-family:var(--font-sans); font-size:var(--fs-lg); color:var(--muted); font-weight:600; }
.pricing-list { list-style:none; padding:0; margin:var(--space-6) 0; text-align:left; display:grid; gap:var(--space-3); }
.pricing-list li { display:flex; gap:var(--space-3); align-items:flex-start; }
.pricing-list svg { color:var(--ok); flex:none; margin-top:3px; }
.pricing-note { font-size:var(--fs-sm); color:var(--muted); margin-top:var(--space-4); }

/* ---- FAQ preview ------------------------------------------------------- */
.faq-list { max-width:var(--container-md); margin-inline:auto; display:grid; gap:var(--space-3); }
.faq-item { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; }
.faq-item summary { cursor:pointer; padding:var(--space-5); font-weight:700; font-size:var(--fs-lg); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:var(--space-4); }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary .chev { flex:none; transition:transform var(--dur) var(--ease); color:var(--brand); }
.faq-item[open] summary .chev { transform:rotate(180deg); }
.faq-item .faq-a { padding:0 var(--space-5) var(--space-5); color:var(--text-2); }
.faq-item .faq-a p { margin:0; }

/* ---- CTA band ---------------------------------------------------------- */
.cta-band { background:
    radial-gradient(700px 400px at 50% 120%, var(--accent-soft), transparent 60%),
    var(--brand-soft); text-align:center; }
.cta-band h2 { font-size:clamp(2rem,5vw,var(--fs-5xl)); margin-bottom:var(--space-4); }
.cta-band p { color:var(--text-2); font-size:var(--fs-lg); max-width:52ch; margin:0 auto var(--space-6); }
.cta-actions { display:flex; gap:var(--space-3); justify-content:center; flex-wrap:wrap; }

/* ---- Photography (warm-graded to lock stock to the brand) -------------- */
.fo-photo { position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); background:var(--brand-soft); }
.fo-photo img { display:block; width:100%; height:100%; object-fit:cover; }
.fo-photo::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(120deg, rgba(46,110,98,0.22), rgba(224,160,74,0.10) 60%, rgba(46,110,98,0.05));
  mix-blend-mode:soft-light; }
.fo-photo--ratio { aspect-ratio:3/2; }

/* Emotional anchor band: photo + copy */
.anchor { display:grid; grid-template-columns:1.05fr 0.95fr; gap:var(--space-8); align-items:center; }
.anchor.reverse .anchor-media { order:2; }
.anchor-media { min-width:0; }
@media (max-width:820px){ .anchor{ grid-template-columns:1fr; gap:var(--space-6); } .anchor.reverse .anchor-media{ order:0; } }

/* ---- Disclaimer strip -------------------------------------------------- */
.disclaimer { text-align:center; font-size:var(--fs-sm); color:var(--muted); max-width:60ch; margin:var(--space-6) auto 0; }