/* === "For Families & Students" page ===
   The benefits content is rendered from families.js into #benefitGrid, so the
   styles here cover the audience switcher, the animated cards, and the
   supporting narrative blocks. */

/* --- Hero --- */
.fam-hero {
  position: relative;
  padding: 150px 0 70px;
  background: linear-gradient(165deg, #f8fafa 0%, var(--bg) 55%, #f0f9f9 100%);
  overflow: hidden;
  text-align: center;
}
.fam-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.fam-blob { position: absolute; border-radius: 50%; filter: blur(2px); }
.fam-blob-1 { width: 320px; height: 320px; top: -110px; left: -80px; background: rgba(42,125,125,0.07); }
.fam-blob-2 { width: 240px; height: 240px; bottom: -90px; right: -60px; background: rgba(192,98,42,0.06); }
.fam-blob-3 { width: 140px; height: 140px; top: 55%; left: 12%; background: rgba(42,125,125,0.05); }
.fam-hero-inner { position: relative; z-index: 1; }
.fam-hero h1 {
  font-family: var(--font-heading);
  font-size: 2.7rem;
  line-height: 1.15;
  color: var(--navy);
  max-width: 780px;
  margin: 0 auto 18px;
}
.fam-hero h1 em { font-style: normal; color: var(--teal); }
.fam-hero-sub {
  font-size: 1.1rem;
  color: var(--muted);
  max-width: 640px;
  margin: 0 auto 28px;
  line-height: 1.7;
}
.fam-hero-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--muted);
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--border);
  padding: 8px 16px;
  border-radius: 999px;
}

/* --- Section opener on the home page (NCCD explainer + promises) --- */
.fam-open { padding: 90px 0 70px; background: var(--surface); }
.fam-open .section-header { margin-bottom: 40px; }
.fam-open .eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
  color: var(--teal);
  margin-bottom: 10px;
}
.fam-explainer {
  max-width: 940px;
  margin: 0 auto;
}
.fam-explainer-main {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 34px 32px;
}
.fam-explainer-main h3 {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  color: var(--navy);
  margin-bottom: 16px;
}
.fam-explainer-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  margin-bottom: 20px;
}
.fam-explainer-cols p { font-size: 0.95rem; color: var(--muted); line-height: 1.7; }
.fam-explainer-flag {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--teal-light);
  border-radius: 10px;
  padding: 14px 18px;
}
.fam-explainer-flag svg { flex-shrink: 0; width: 20px; height: 20px; color: var(--teal); margin-top: 2px; }
.fam-explainer-flag span { font-size: 0.93rem; color: var(--navy); line-height: 1.6; }
/* Sits under the explainer card as a full-width strip so it doesn't leave a
   short card stranded beside a tall one. */
.fam-explainer-note {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--teal);
  border-radius: 10px;
}
.fam-explainer-note svg { flex-shrink: 0; width: 22px; height: 22px; color: var(--teal); }
.fam-explainer-note p { font-size: 0.92rem; color: var(--muted); line-height: 1.6; }
.fam-explainer-note strong { color: var(--navy); }

/* --- Three promises --- */
.fam-promises {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 940px;
  margin: 28px auto 0;
  position: relative;
  z-index: 1;
}
.fam-promise {
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 20px;
  text-align: left;
  backdrop-filter: blur(6px);
}
.fam-promise strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--navy);
  margin-bottom: 6px;
}
.fam-promise span { font-size: 0.88rem; color: var(--muted); line-height: 1.55; }

/* --- Audience switcher --- */
.fam-benefits { padding: 70px 0 90px; background: var(--bg); }
.fam-switch {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  margin: 0 auto 12px;
}
.fam-switch-wrap { text-align: center; margin-bottom: 36px; }
/* Arrows either side of the pills, so the section reads as something you can
   move through rather than three unrelated tabs. */
.fam-switch-row { display: flex; align-items: center; justify-content: center; gap: 14px; }
.fam-arrow {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(30,41,59,0.10);
  transition: background 0.2s, color 0.2s, transform 0.2s, opacity 0.2s;
}
.fam-arrow svg { width: 21px; height: 21px; }
.fam-arrow:hover:not(:disabled) { background: var(--teal); color: #fff; transform: scale(1.06); }
.fam-arrow:disabled { opacity: 0.3; cursor: default; }
.fam-switch-title {
  font-family: var(--font-heading);
  font-size: 2rem;
  color: var(--navy);
  margin-bottom: 20px;
}
.fam-switch button {
  border: none;
  background: none;
  font-family: var(--font);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--muted);
  padding: 10px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s, background 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}
.fam-switch button:hover { color: var(--teal); }
.fam-switch button.active {
  background: var(--teal);
  color: #fff;
  box-shadow: 0 4px 14px rgba(42,125,125,0.28);
}
.fam-switch-caption {
  font-size: 0.95rem;
  color: var(--muted);
  max-width: 560px;
  margin: 14px auto 0;
  line-height: 1.6;
  min-height: 3em;
}

/* --- Benefit carousel ---
   The three audiences sit side by side in a horizontal scroll container with
   snap points, the same approach as the features carousel: the scrolling is
   the browser's own, so touch swipes, trackpad swipes and the keyboard all
   work without any of them being reimplemented here.

   The carousel is pulled 14px wider than the container and each panel pads
   that back in, so the cards still line up with the rest of the page while
   their hover shadow has room to fall before the scroll container clips it.
   The inset lives on the panel, not the container: padding on the container
   would leave the scrollport wider than a panel and let the next one peek in
   at the edge. */
.fam-carousel {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* A two-finger sideways swipe would otherwise trigger the browser's back
     gesture once the carousel reaches its end. */
  overscroll-behavior-x: contain;
  margin: -10px -14px -26px;
  padding: 10px 0 26px;
}
.fam-carousel::-webkit-scrollbar { display: none; }
.fam-carousel:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 14px; }

.fam-track { display: flex; }
.fam-panel {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0 14px;
  scroll-snap-align: start;
  /* Stop on each audience rather than letting one hard swipe fly past all three. */
  scroll-snap-stop: always;
}

/* --- Benefit cards ---
   A bento rather than an even grid. Six points per audience: the first is the
   lead, spans two columns and carries a mock of the real product screen; two
   compact cards stack beside it and three run underneath. The uneven sizing is
   the point — it gives the section a hierarchy an even 3x2 grid can't. */
.fam-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}
.fam-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 24px 26px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px);
  animation: fam-card-in 0.5s ease forwards;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.fam-card-lead {
  grid-column: span 2;
  grid-row: span 2;
  padding: 30px 32px 32px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(42,125,125,0.055), transparent 58%),
    var(--surface);
}
@keyframes fam-card-in {
  to { opacity: 1; transform: translateY(0); }
}
.fam-card::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--teal);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s ease;
}
.fam-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 44px rgba(30,41,59,0.10);
  border-color: rgba(42,125,125,0.35);
}
.fam-card:hover::after { transform: scaleY(1); }

/* Small caps eyebrow in place of the old icon tile. Categorises the point
   without another rounded-square icon. */
.fam-card-eyebrow {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 10px;
}
.fam-card h3 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--navy);
  margin-bottom: 8px;
  line-height: 1.32;
}
.fam-card-lead h3 { font-size: 1.55rem; margin-bottom: 12px; }
.fam-card p { font-size: 0.9rem; color: var(--muted); line-height: 1.65; }
.fam-card-lead p { font-size: 0.98rem; line-height: 1.7; max-width: 46ch; }

/* --- Lead-card product mocks ---
   Small facsimiles of real screens, in the demo's palette. Decorative, so
   they're aria-hidden; every fact in them is repeated in the card copy. */
.fam-viz {
  margin-top: auto;   /* sits on the floor of the lead card whatever the copy length */
  padding-top: 24px;
  font-size: 0.78rem;
}
.fam-viz-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 13px;
  background: var(--navy);
  border-radius: 9px 9px 0 0;
}
.fam-viz-title { color: #fff; font-weight: 600; letter-spacing: 0.01em; }
.fam-viz-meta { color: rgba(255,255,255,0.55); font-size: 0.72rem; }
/* Body of a mock panel: white card under the dark title bar. */
.fam-viz-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 9px 9px;
  padding: 14px 14px 15px;
}

/* --- Behaviour web chart --- */
.fam-radar-wrap { display: flex; align-items: center; gap: 14px; }
.fam-radar { flex: 0 1 270px; min-width: 0; height: auto; }
.fam-radar-vals { list-style: none; flex: 1 1 auto; min-width: 0; }
.fam-radar-vals li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(226,221,213,0.7);
  color: var(--navy);
  font-size: 0.74rem;
}
.fam-radar-vals li:last-child { border-bottom: none; }
.fam-radar-vals b {
  flex: none;
  min-width: 22px;
  padding: 1px 0;
  border-radius: 4px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.fam-radar-vals .is-good { background: #dcfce7; color: #166534; }
.fam-radar-vals .is-mid  { background: #fef3c7; color: #92400e; }
.fam-radar-vals .is-bad  { background: #fee2e2; color: #991b1b; }

/* --- Support triangle --- */
.fam-tri-wrap { display: flex; align-items: center; gap: 14px; }
/* Three non-overlapping bands, same clip geometry as the app's component. */
.fam-tri { position: relative; width: 196px; height: 162px; flex: none; }
.fam-tri-band { position: absolute; inset: 0; color: #fff; }
.fam-tri-3 { clip-path: polygon(50% 0%, 65.5% 31%, 34.5% 31%); background: #c92a2a; }
.fam-tri-2 { clip-path: polygon(33% 34%, 67% 34%, 81.5% 63%, 18.5% 63%); background: #e8800c; }
.fam-tri-1 { clip-path: polygon(17% 66%, 83% 66%, 100% 100%, 0% 100%); background: #2f9e44; }
.fam-tri-content { position: absolute; left: 0; right: 0; text-align: center; line-height: 1.05; }
.fam-tri-3 .fam-tri-content { top: 15%; }
.fam-tri-2 .fam-tri-content { top: 41%; }
.fam-tri-1 .fam-tri-content { top: 74%; }
.fam-tri-label { font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; }
.fam-tri-3 .fam-tri-label { font-size: 7px; }
.fam-tri-2 .fam-tri-label { font-size: 9px; }
.fam-tri-1 .fam-tri-label { font-size: 10px; }
.fam-tri-count { font-weight: 800; line-height: 1; margin-top: 1px; }
.fam-tri-3 .fam-tri-count { font-size: 11px; }
.fam-tri-2 .fam-tri-count { font-size: 15px; }
.fam-tri-1 .fam-tri-count { font-size: 18px; }
.fam-tri-count small { font-weight: 500; opacity: 0.9; font-size: 0.5em; margin-left: 2px; }
.fam-tri-rows { list-style: none; flex: 1 1 auto; min-width: 0; }
.fam-tri-rows li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(226,221,213,0.7);
  color: var(--navy);
  font-size: 0.74rem;
  line-height: 1.35;
}
.fam-tri-rows li:last-child { border-bottom: none; }
.fam-tri-rows i { flex: none; width: 7px; height: 7px; border-radius: 50%; }

/* Weekly timetable strip */
.fam-viz-days {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding: 12px 13px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 9px 9px;
}
.fam-viz-days > div { display: flex; flex-direction: column; gap: 5px; }
.fam-viz-day {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1px;
}
.fam-viz .b {
  display: block;
  height: 16px;
  border-radius: 4px;
}
.fam-viz .b-class { background: #e2e8f0; }
.fam-viz .b-lit   { background: var(--teal); }
.fam-viz .b-sp    { background: #c7ddf5; }
.fam-viz .b-ot    { background: #f6ddb4; }
.fam-viz .b-gap   { background: transparent; }
.fam-viz-key {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding-top: 11px;
  color: var(--muted);
  font-size: 0.72rem;
}
.fam-viz-key span { display: inline-flex; align-items: center; gap: 5px; }
.fam-viz-key .b { width: 11px; height: 11px; border-radius: 3px; }

@media (prefers-reduced-motion: reduce) {
  .fam-card { animation: none; opacity: 1; transform: none; }
  .fam-card:hover { transform: none; }
}

/* --- Before / after --- */
.fam-compare { padding: 90px 0; background: var(--surface); }
.fam-compare-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 28px;
  align-items: stretch;
  max-width: 940px;
  margin: 0 auto;
}
.fam-compare-col {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 26px;
}
.fam-compare-col.after { border-color: rgba(42,125,125,0.4); box-shadow: 0 14px 40px rgba(42,125,125,0.10); }
.fam-compare-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 14px;
}
.fam-compare-col.after .fam-compare-label { color: var(--teal); }
.fam-compare-col ul { list-style: none; }
.fam-compare-col li {
  display: flex;
  gap: 10px;
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--muted);
  padding: 9px 0;
  border-bottom: 1px dashed var(--border);
}
.fam-compare-col li:last-child { border-bottom: none; }
.fam-compare-col li .mark { flex-shrink: 0; font-weight: 700; }
.fam-compare-col.before .mark { color: #c0622a; }
.fam-compare-col.after .mark { color: #2f9e44; }
.fam-compare-arrow {
  align-self: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 6px 18px rgba(42,125,125,0.3);
}

/* --- Journey timeline --- */
.fam-journey { padding: 90px 0; background: var(--bg); }
.fam-timeline {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding-left: 34px;
}
.fam-timeline::before {
  content: '';
  position: absolute;
  left: 9px; top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--teal), rgba(42,125,125,0.15));
}
.fam-tl-item { position: relative; padding-bottom: 30px; }
.fam-tl-item:last-child { padding-bottom: 0; }
.fam-tl-item::before {
  content: '';
  position: absolute;
  left: -34px; top: 5px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--bg);
  border: 3px solid var(--teal);
}
.fam-tl-when {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  color: var(--teal);
  margin-bottom: 4px;
}
.fam-tl-item h3 { font-size: 1.05rem; color: var(--navy); margin-bottom: 5px; }
.fam-tl-item p { font-size: 0.93rem; color: var(--muted); line-height: 1.65; }

/* --- Privacy block --- */
.fam-privacy { padding: 90px 0; background: linear-gradient(135deg, var(--navy) 0%, var(--teal-dark) 100%); color: #fff; }
.fam-privacy .section-header h2 { color: #fff; }
.fam-privacy .section-header p { color: rgba(255,255,255,0.78); }
.fam-privacy-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.fam-privacy-card {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius);
  padding: 22px 20px;
}
.fam-privacy-card svg { width: 26px; height: 26px; margin-bottom: 12px; color: #fff; opacity: 0.9; }
.fam-privacy-card strong { display: block; font-size: 0.98rem; margin-bottom: 6px; }
.fam-privacy-card span { font-size: 0.86rem; color: rgba(255,255,255,0.72); line-height: 1.55; }

.fam-privacy-foot { text-align: center; margin-top: 28px; font-size: 0.9rem; color: rgba(255,255,255,0.72); }
.fam-privacy-foot a { color: #fff; text-decoration: underline; }

/* --- Questions to ask --- */
.fam-ask { padding: 90px 0; background: var(--surface); }
.fam-ask-list { max-width: 720px; margin: 0 auto; }
.fam-ask-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
}
.fam-ask-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  background: none;
  border: none;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  text-align: left;
  cursor: pointer;
}
.fam-ask-q:hover { color: var(--teal); }
.fam-ask-chev {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  color: var(--teal);
  transition: transform 0.25s ease;
}
.fam-ask-item.open .fam-ask-chev { transform: rotate(180deg); }
.fam-ask-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.fam-ask-item.open .fam-ask-a { max-height: 320px; }
.fam-ask-a p {
  padding: 0 22px 20px;
  font-size: 0.93rem;
  color: var(--muted);
  line-height: 1.7;
}
.fam-ask-a a { color: var(--teal); }
.fam-ask-foot {
  text-align: center;
  margin-top: 26px;
  font-size: 0.88rem;
  color: var(--muted);
}

/* --- Responsive --- */
@media (max-width: 900px) {
  /* Two up: the lead keeps its full width but drops to a single row. */
  .fam-grid { grid-template-columns: repeat(2, 1fr); }
  .fam-card-lead { grid-column: span 2; grid-row: span 1; padding: 26px 26px 28px; }
  .fam-card-lead h3 { font-size: 1.4rem; }
  .fam-card-lead p { max-width: none; }
  .fam-explainer-cols { grid-template-columns: 1fr; gap: 14px; }
  .fam-promises { grid-template-columns: 1fr; max-width: 460px; }
  .fam-privacy-grid { grid-template-columns: 1fr 1fr; }
  .fam-compare-grid { grid-template-columns: 1fr; }
  .fam-compare-arrow { transform: rotate(90deg); margin: 0 auto; }
}
@media (max-width: 640px) {
  .fam-hero { padding: 120px 0 50px; }
  .fam-hero h1 { font-size: 1.9rem; }
  .fam-grid { grid-template-columns: 1fr; }
  .fam-card-lead { grid-column: span 1; padding: 24px 22px 26px; }
  .fam-card-lead h3 { font-size: 1.3rem; }
  .fam-viz-key { font-size: 0.68rem; gap: 5px 10px; }
  /* Chart above its readout rather than a squeezed two-up. */
  .fam-radar-wrap, .fam-tri-wrap { flex-direction: column; gap: 10px; }
  .fam-radar { max-width: 240px; width: 100%; }
  .fam-radar-vals, .fam-tri-rows { width: 100%; }
  .fam-open { padding: 60px 0 50px; }
  .fam-explainer-main { padding: 22px 20px 24px; }
  .fam-explainer-note { align-items: flex-start; }
  .fam-privacy-grid { grid-template-columns: 1fr; }
  /* The pills go full width here, so let the arrows wrap onto their own line
     underneath rather than being squeezed either side. */
  .fam-switch-row { flex-wrap: wrap; gap: 12px; }
  .fam-switch { flex-direction: column; width: 100%; border-radius: var(--radius); order: -1; }
  .fam-switch button { width: 100%; border-radius: 8px; }
  .fam-switch-caption { min-height: 0; }
}