/* ==========================================================================
   MessageDrift – Global Styles (clean rewrite)
   - Keeps existing selectors for compatibility
   - Fixes spacing/centering + removes duplicates
   - Includes hero split layout (video on right)
   - Dark mode + print polish
   ========================================================================== */

/* ─── Design Tokens ─────────────────────────────────────────────────────── */
:root{
  /* Palette */
  --violet:#5A3FC0;
  --lavender:#E4DDFF;
  --beige:#FAF3E0;
  --accent:#5A3FC0;
  --text:#2E2E2E;
  --error:#FF4D4D;
  --success:#3CBA54;
  --light:#ffffff;

  /* Elevation */
  --shadow-sm:0 2px 6px rgba(0,0,0,.08);
  --shadow-md:0 6px 16px rgba(0,0,0,.12);
  --shadow-lg:0 12px 30px rgba(0,0,0,.14);

  /* Radii */
  --r-sm:8px;
  --r-md:12px;
  --r-lg:16px;
  --r-full:999px;

  /* Spacing scale */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem;
  --s-5:1.25rem; --s-6:1.5rem; --s-7:1.75rem; --s-8:2rem;

  /* Typography */
  --font-ui:'Segoe UI', system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
  --fs-1:.875rem; --fs-2:1rem; --fs-3:1.125rem; --fs-4:1.35rem; --fs-5:1.6rem; --fs-6:2rem;

  /* Focus ring */
  --focus:0 0 0 3px rgba(127,90,240,.35);
}

/* ─── Reset / Base ──────────────────────────────────────────────────────── */
*{ margin:0; padding:0; box-sizing:border-box; }
img{ max-width:100%; height:auto; display:block; }
html, body{ height:100%; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-ui);
  color:var(--text);
  line-height:1.6;
  background:linear-gradient(to bottom right,var(--beige) 0%,#f5e8d8 30%,#e6dbf5 60%,var(--lavender) 100%);
  background-attachment:fixed; background-size:cover; background-repeat:no-repeat;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Layout frame */
.site-wrapper{ display:flex; flex-direction:column; min-height:100vh; }
main{ flex:1; }

/* Accessible focus */
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:none; box-shadow:var(--focus); border-radius:var(--r-sm);
}

/* Links */
a{ color:var(--accent); text-underline-offset:2px; }
a:hover{ filter:brightness(0.95); }

/* ─── Header / Nav ──────────────────────────────────────────────────────── */
header{
  background-color:var(--violet); color:#fff; padding:var(--s-4); text-align:center;
  position:sticky; top:0; z-index:10; border-bottom:1px solid rgba(255,255,255,.15);
  box-shadow:0 8px 22px rgba(90,63,192,.18);
}
.header-top{ display:flex; align-items:center; gap:15px; justify-content:center; }
.logo{ height:60px; width:auto; border-radius:50%; object-fit:cover; }
header h1{ font-size:var(--fs-6); color:var(--light); margin:0; }
.site-title{ color:#fff; text-decoration:none; font-weight:800; }
.site-title:hover{ text-decoration:underline; }

nav{ margin-top:10px; }
nav a{
  color:#fff; text-decoration:none; margin:0 12px; font-weight:600;
  border-radius:var(--r-full); padding:.35rem .7rem; transition:background .15s, transform .06s, box-shadow .15s;
}
nav a:hover, nav a:focus-visible{ background:rgba(255,255,255,.14); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
nav a.nav-cta{ background:var(--accent); box-shadow:0 6px 18px rgba(127,90,240,.28); }
nav a.nav-cta:hover{ filter:brightness(1.05); }

/* ─── Headings / Generic hero text ─────────────────────────────────────── */
.page-heading{
  text-align:center; font-size:var(--fs-6); color:var(--violet);
  margin:40px auto 20px; padding:10px 20px; font-weight:800;
}
.drift-heading{
  text-align:center; margin:40px auto 20px; padding:10px 20px; max-width:700px;
  font-family:var(--font-serif); font-size:1.8rem; line-height:1.4; color:var(--violet);
}

/* ─── Cards / Surfaces ─────────────────────────────────────────────────── */
.cards-row{
  display:grid; gap:18px; padding:0 20px; margin:20px auto;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  max-width:1200px;
}
.card{
  background:#fff; border-radius:var(--r-lg); padding:18px;
  box-shadow:var(--shadow-md); transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.card--beige{ background:var(--beige); }
.card h3{ text-align:center; color:var(--violet); margin-bottom:12px; }
.card-section{ display:grid; gap:16px; align-items:center; grid-template-columns:1fr; }
.card-image{ width:100%; max-width:420px; justify-self:center; border-radius:var(--r-md); box-shadow:0 2px 6px rgba(0,0,0,.12); }

/* Centered page helpers */
.page--center{ display:flex; flex-direction:column; align-items:center; }
.card__header{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding-bottom:.65rem; border-bottom:1px solid rgba(0,0,0,.08); margin-bottom:1rem; }
.card__title{ display:flex; align-items:center; gap:.6rem; min-width:0; }
.card__icon{ font-size:1.25rem; line-height:1; }
.card__heading{ margin:0; color:#1f2937; font-size:clamp(1.1rem, 1.2vw + .9rem, 1.4rem); font-weight:800; letter-spacing:.2px; }
.card__header-actions{ margin-left:auto; display:flex; gap:.5rem; align-items:center; }

/* ─── Buttons ──────────────────────────────────────────────────────────── */
.button, button, .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:10px 20px; background-color:var(--accent); color:#fff;
  border:none; border-radius:var(--r-md); font-weight:700; font-size:1rem; cursor:pointer;
  transition:background-color .2s ease, transform .06s ease, box-shadow .15s ease, filter .15s ease;
}
.button:hover, button:hover, .btn:hover{ background-color:var(--violet); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.btn--primary{ background:var(--accent); }
.btn--ghost{ background:#f8f8fb; color:#111827; border:1px solid #e5e7eb; }
.btn--danger{ background:var(--error); color:#fff; }
.btn--sm{ padding:.45rem .75rem; font-size:.95rem; border-radius:9px; }
.btn-large{ padding:.85rem 2rem; font-size:1rem; border-radius:var(--r-full); }

/* CTA cards */
.button-container{ text-align:center; margin-top:20px; }
.cta-card{
  background:#fff; border-radius:var(--r-lg); padding:2rem; margin:2rem 0;
  box-shadow:var(--shadow-md); text-align:center;
}
.cta-title{ font-size:1.5rem; font-weight:700; margin-bottom:.25rem; color:var(--violet); }
.cta-sub{ font-size:1rem; color:#6b7280; margin-bottom:1.5rem; }
.cta-hint{ margin-top:1rem; font-size:.9rem; color:#9ca3af; }

/* ─── Forms ─────────────────────────────────────────────────────────────── */
form{ max-width:500px; margin:0 auto; padding:20px; }
form label{ font-weight:700; color:var(--violet); }
input[type="text"],input[type="password"],input[type="tel"],input[type="date"],textarea, select{
  width:100%; padding:12px; margin-top:6px; margin-bottom:15px;
  border:1px solid #d9dbe3; border-radius:10px;
  background-color:#fff; color:var(--text); font-size:1rem;
  transition:border .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus{ border-color:var(--accent); box-shadow:var(--focus); }
.form-container{
  max-width:420px; margin:2rem auto; padding:2rem; background-color:#f7f4ff; border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
}
.form-container button{ width:100%; }

/* Grid form (used in account add-child) */
.grid-form{
  width:100%; max-width:900px; margin-left:auto; margin-right:auto;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:end; gap:.75rem;
}
.grid-form label{ display:inline-block; margin-bottom:.35rem; font-size:.9rem; color:#374151; font-weight:700; }
.grid-form input[type="text"], .grid-form input[type="date"]{ width:100%; }
.grid-form__actions{ display:flex; gap:.5rem; justify-content:flex-start; }
@media (max-width:920px){ .grid-form{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .grid-form{ grid-template-columns:1fr; } .grid-form__actions{ justify-content:stretch; } }

/* ─── Messages / Badges ────────────────────────────────────────────────── */
.message-card, .msg{
  background:#fff; border-radius:12px; padding:1rem;
  border:1px solid rgba(0,0,0,.06); box-shadow:var(--shadow-md);
}
.message-card{ background-color:var(--beige); border-left:6px solid var(--accent); }
.message-card:hover{ transform:translateY(-3px); }
.message-header{ display:flex; justify-content:space-between; align-items:center; font-size:.95rem; color:#555; }
.message-body p{ font-size:1.08rem; white-space:pre-wrap; text-align:justify; }
.message-footer{ margin-top:10px; }
.approve-btn{ background-color:var(--success); }
.approve-btn:hover{ filter:brightness(.92); }
.delete-btn{ background-color:var(--error); }
.delete-btn:hover{ filter:brightness(.92); }

.badge{ display:inline-flex; align-items:center; gap:.35rem; padding:.2rem .5rem; border-radius:var(--r-full); font-size:.8rem; font-weight:700; }
.badge--ok{ background:#e9f8ef; color:#176c3f; border:1px solid rgba(23,108,63,.18); }
.badge--pending{ background:#fff7e6; color:#92400e; border:1px solid rgba(146,64,14,.18); }
.badge--muted{ background:#f3f4f6; color:#4b5563; border:1px solid rgba(75,85,99,.18); }

/* ─── Account page helpers ──────────────────────────────────────────────── */
.account-page{ max-width:1000px; margin:0 auto; padding:1.25rem; }
.account-page .muted{ color:#6b7280; }
.account-page .child-list{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.account-page .child-row{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.65rem .8rem; border:1px solid rgba(0,0,0,.06); border-radius:10px; background:#fafafc; flex-wrap:wrap;
}
.account-page .child-row .child-main{ flex:1 1 auto; }
.account-page .child-name{ font-weight:800; color:#1f2937; }
.account-page .child-dob{ color:#6b7280; font-size:.9rem; }
.account-page .link-muted{ color:#6b7280; text-decoration:none; font-weight:600; }
.account-page .link-muted:hover{ color:#4338ca; }

.account-page .card-title-row{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; }
.account-page .card-actions{ display:flex; gap:.5rem; align-items:center; }
.account-page details.add-child-toggle > summary::-webkit-details-marker{ display:none; }
.account-page details.add-child-toggle > summary{ list-style:none; cursor:pointer; }
.account-page .add-child-panel{ margin-top:.75rem; padding-top:.75rem; border-top:1px dashed rgba(127,90,240,.25); }
.account-page details.add-child-toggle[open] .when-open{ display:inline; }
.account-page details.add-child-toggle[open] .when-closed{ display:none; }
.account-page details.add-child-toggle:not([open]) .when-open{ display:none; }

/* Selector helper card */
.account-page .selector-card{
  width:min(520px, 100%); margin:.25rem auto 0; padding:1rem; background:#fff;
  border:1px solid rgba(0,0,0,.06); border-radius:12px; box-shadow:var(--shadow-md);
}
.account-page .chooser-label{ display:block; font-weight:800; color:#1f2937; margin:0 0 .5rem; }
.account-page .chooser-sub{ margin:.15rem 0 1rem; color:#6b7280; font-size:.95rem; }
.account-page .chooser-controls{ display:flex; gap:.6rem; align-items:stretch; }
.account-page .chooser-select{
  flex:1; appearance:none; padding:.7rem .85rem; border:1px solid #e5e7eb; border-radius:10px; background:#fff; font-weight:600;
  transition:border .15s ease, box-shadow .15s ease;
}
.account-page .chooser-select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(127,90,240,.18); }
.account-page .chooser-actions{ display:flex; gap:.6rem; align-items:center; margin-top:.85rem; }

/* Messages list */
.msg-list{ display:grid; gap:.75rem; width:100%; max-width:900px; margin-left:auto; margin-right:auto; }
.msg__top{ display:flex; flex-wrap:wrap; gap:.5rem .75rem; align-items:center; justify-content:space-between; }
.msg__meta{ display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:center; }
.msg__tofrom{ display:flex; flex-wrap:wrap; gap:1rem; }
.msg__body{ margin:.65rem 0 .85rem; white-space:pre-wrap; word-break:break-word; }
.msg__actions{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }

/* ─── Chipbar (filter pills) ───────────────────────────────────────────── */
.chipbar{
  display:flex; align-items:center; gap:.5rem;
  overflow:auto; padding:.25rem; margin:.1rem 0 .9rem; scrollbar-width:thin;
}
.chipbar::-webkit-scrollbar{ height:8px; }
.chipbar::-webkit-scrollbar-thumb{ background:#e5e7eb; border-radius:var(--r-full); }
.chip{
  display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap;
  padding:.45rem .75rem; border-radius:var(--r-full); font-weight:700; text-decoration:none;
  background:#f6f7fb; color:#111827; border:1px solid #e5e7eb; transition:all .15s ease;
}
.chip:hover{ background:#eef0ff; border-color:#d9dcff; }
.chip--active{ background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:0 6px 16px rgba(127,90,240,.25); }
.chip .dot{ width:.5rem; height:.5rem; border-radius:var(--r-full); background:#c7c9d6; }
.chip--active .dot{ background:#fff; opacity:.9; }

/* Mobile fallback select */
.filter-inline{ display:none; gap:.5rem; align-items:center; flex-wrap:wrap; margin:.25rem 0 .75rem; }
.filter-inline select{
  min-width:220px; padding:.55rem .7rem; border:1px solid #e5e7eb; border-radius:10px; background:#fff; font-weight:600;
  transition:border .15s ease, box-shadow .15s ease;
}
.filter-inline select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(127,90,240,.18); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,1px,1px); white-space:nowrap; border:0; }
@media (max-width:480px){
  .chipbar{ display:none; }
  .filter-inline{ display:flex; }
}

/* ─── Support / FAQ / About / Tables ───────────────────────────────────── */
.message-suggestions{
  margin-top:50px; padding:20px; background-color:#f5f0ff; border-radius:10px; box-shadow:0 0 10px rgba(90,63,192,.1);
}
.message-suggestions h2{ color:var(--violet); text-align:center; margin-bottom:20px; }
.suggestion-block{ margin-bottom:30px; }
.suggestion-block h3{ color:#3E2C91; margin-bottom:10px; }
.suggestion-block p{
  background-color:#fff; padding:15px; border-left:4px solid var(--violet); border-radius:6px; font-size:1rem; line-height:1.6;
}

.find-support{
  margin-top:50px; padding:20px; background-color:#fdf6ff; border-radius:10px; text-align:center; box-shadow:0 0 10px rgba(90,63,192,.08);
}
.find-support h2{ color:var(--violet); margin-bottom:15px; }
.find-support p{ font-size:1.1rem; line-height:1.6; color:#333; margin-bottom:15px; }

.support-container{
  max-width:800px; margin:40px auto; padding:20px; background-color:#f7f4ff; border-radius:12px; box-shadow:0 0 10px rgba(90,63,192,.1);
}
.support-container h1{ color:var(--violet); text-align:center; margin-bottom:20px; }
.support-container p{ font-size:1.1rem; line-height:1.6; margin-bottom:20px; color:#333; }
.helpline-table{ width:100%; border-collapse:collapse; margin-top:20px; }
.helpline-table th,.helpline-table td{ border:1px solid #ccc; padding:12px; text-align:left; }
.helpline-table th{ background-color:#e6ddff; color:#3E2C91; }
.helpline-table a{ color:var(--violet); text-decoration:underline; }
.global-links{ margin-top:30px; padding:15px; background-color:#fff; border-left:4px solid var(--violet); border-radius:8px; }
.disclaimer{ margin-top:40px; font-size:.9rem; color:#666; text-align:center; }

.faq-container{
  max-width:900px; margin:40px auto; padding:30px; background-color:#fdfbff; border-radius:16px; box-shadow:0 0 12px rgba(90,63,192,.1);
}
.faq-container h1{ text-align:center; color:var(--violet); margin-bottom:30px; }
.faq-item{ margin-bottom:25px; }
.faq-item h2{ font-size:1.3rem; color:var(--accent); margin-bottom:8px; }
.faq-item p{ font-size:1.05rem; line-height:1.6; color:#333; }

.about-container{ padding:60px 20px; display:flex; justify-content:center; background:linear-gradient(to bottom,#fdf6f0,#ffe8f3); }
.about-card{ max-width:800px; background:#fff; border-radius:20px; padding:40px; box-shadow:var(--shadow-lg); line-height:1.8; font-size:1.1rem; color:#2e2e2e; }
.about-heading{ font-size:2.5rem; color:var(--violet); margin-bottom:20px; text-align:center; }
.about-quote{ font-size:1.4rem; font-style:italic; color:var(--accent); text-align:center; margin-bottom:30px; border-left:4px solid var(--accent); padding-left:15px; }
.about-signoff{ font-weight:bold; color:var(--violet); margin-top:30px; }
.about-team{ text-align:right; font-style:italic; color:var(--accent); margin-top:10px; }

/* Save confirmation */
.saved-message-container{
  max-width:600px; margin:40px auto; background-color:#fff8f2; padding:40px; border-radius:16px; box-shadow:var(--shadow-md); text-align:center;
}
.success-heading{ color:var(--violet); font-size:2rem; margin-bottom:20px; }
.success-text{ font-size:1.1rem; color:#333; margin-bottom:10px; line-height:1.6; }
.success-subtext{ font-size:1rem; color:#666; margin-bottom:30px; }
.dob{ color:#888; font-style:italic; }
.button-cta{ display:inline-block; padding:12px 24px; background-color:var(--violet); color:#fff; font-weight:bold; border-radius:8px; text-decoration:none; margin-top:12px; transition:background-color .2s ease; }
.button-cta:hover{ background-color:var(--accent); }
.button-link{ display:inline-block; margin-top:24px; color:var(--violet); font-weight:bold; text-decoration:none; }
.button-link:hover{ text-decoration:underline; }

/* Homepage disclaimer */
.homepage-disclaimer{
  background-color:var(--lavender); border-left:4px solid var(--violet); padding:12px 16px; margin:20px auto; border-radius:8px;
  font-size:.95rem; line-height:1.5; color:var(--text); text-align:center; max-width:820px;
}
.homepage-disclaimer p{ margin:0; }

/* ─── Hero (centered version) ──────────────────────────────────────────── */
.hero{
  padding-block: clamp(48px, 8vw, 96px);
  padding-inline: 16px;
  display:grid; place-items:center;
  text-align:center;
}
.hero > .hero-inner, .hero > div{ width:min(100%, 920px); margin-inline:auto; }

.hero-title{
  font-size: clamp(32px, 6vw, 64px);
  line-height:1.15; letter-spacing:.2px; margin:0 0 14px;
}
.hero-title .soft{ font-weight:400; color:var(--violet); }

.hero-sub{
  max-width:720px; margin:0 auto 28px;
  font-size:clamp(16px, 2.2vw, 20px); line-height:1.65; color:var(--text); opacity:.9;
}
.hero-ctas{
  display:flex; flex-wrap:wrap; justify-content:center;
  column-gap:14px; row-gap:12px; margin-bottom:24px;
}
.proof{ display:flex; justify-content:center; margin-top:6px; }
.proof .chip{
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px;
  background:var(--lavender); color:var(--violet); font-weight:600; box-shadow:0 6px 20px rgba(127,90,240,.15);
}
@media (max-width:520px){
  .hero-ctas{ flex-direction:column; align-items:center; }
  .hero-ctas .btn{ width:100%; max-width:360px; }
}

/* ─── Hero (split layout: copy left, video right) ──────────────────────── */
.hero-grid{
  width:min(100%, 1120px);
  margin-inline:auto;
  display:grid; grid-template-columns:1.05fr 1fr;
  gap:clamp(20px, 3vw, 40px); align-items:center;
}
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; text-align:center; }
  .hero-copy{ order:1; } .hero-media{ order:2; }
}
.hero-media{ width:100%; }
.media-embed{
  width:100%; aspect-ratio:16/9; display:block; object-fit:cover;
  border-radius:18px; box-shadow:0 18px 50px rgba(17,24,39,.12);
}

/* ─── Benefits / Paths (deduped & tidy) ────────────────────────────────── */
.benefits{ margin:0 auto 18px; max-width:560px; }
.benefits-title{ margin:0 0 10px; font-size:1.2rem; font-weight:900; color:#1f2937; text-align:center; }
.benefits-price{ margin:-4px 0 16px; font-size:1rem; color:#4b5563; text-align:center; font-style:italic; }

.benefits-list.zigzag{
  display:grid; grid-template-columns:1fr 1fr; gap:1rem 2rem;
  margin:0; padding:0; list-style:none; align-items:start;
}
.benefits-list.zigzag > li{
  display:grid; grid-template-columns:24px 1fr; gap:.5rem; color:#374151; font-size:1rem;
}
.benefits-list.zigzag > li:nth-child(odd){ grid-column:1; justify-self:start; text-align:left; }
.benefits-list.zigzag > li:nth-child(even){ grid-column:2; justify-self:end; text-align:right; }
.benefits-list .ico{ width:24px; display:inline-grid; place-items:center; }
.benefits-list .txt{ display:inline-block; }
@media (max-width:640px){
  .benefits-list.zigzag{ grid-template-columns:1fr; }
  .benefits-list.zigzag > li{ grid-column:1 !important; justify-self:start; text-align:left; }
}

/* Paths (two-column cards with media) */
.paths{ display:grid; gap:28px; margin:30px 0; }
.path{
  display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:center;
  background:#fff; border-radius:16px; padding:22px;
  border:1px solid rgba(17,24,39,.1); box-shadow:var(--shadow-md);
}
.path-content h3{ margin:.15rem 0 .4rem; font-size:1.35rem; color:var(--violet); }
.path-content p{ margin:.35rem 0; color:#374151; }
.path-content .minor{ color:#6b7280; font-size:.9rem; }
.path .actions{ margin-top:.6rem; display:flex; gap:.6rem; flex-wrap:wrap; }
.path-media{ display:flex; justify-content:center; }
.path-media img{
  max-width:75%; height:auto; border-radius:14px;
  box-shadow:0 10px 22px rgba(17,24,39,.08); object-fit:cover;
}
.path:nth-child(even) .path-content{ order:1; } /* flip content/media every other card */
.path:nth-child(even) .path-media{ order:2; }
@media (max-width:780px){
  .path{ grid-template-columns:1fr; text-align:left; }
  .path-media img{ max-width:60%; margin:0 auto 14px; }
}

/* ─── Utilities ─────────────────────────────────────────────────────────── */
.hide{ display:none !important; }
.text-center{ text-align:center; }
.muted{ color:#6b7280; }
.mt-1{ margin-top:var(--s-1); } .mt-2{ margin-top:var(--s-2); } .mt-3{ margin-top:var(--s-3); } .mt-4{ margin-top:var(--s-4); }
.mb-1{ margin-bottom:var(--s-1); } .mb-2{ margin-bottom:var(--s-2); } .mb-3{ margin-bottom:var(--s-3); } .mb-4{ margin-bottom:var(--s-4); }

/* ─── Responsive tweaks ─────────────────────────────────────────────────── */
@media (min-width:900px){
  .card-section{ grid-template-columns:1.1fr 1fr; }
  .card-section:nth-child(2){ grid-template-columns:1fr 1.1fr; }
}

/* ─── Motion preference ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}

/* ─── Optional dark mode ────────────────────────────────────────────────── */
/* ─── Optional dark mode (high-contrast, easy to read) ─────────────────── */
@media (prefers-color-scheme: dark){
  /* Global text & surfaces */
  :root{
    --text:#FFFFFF;            /* strong, readable “black-equivalent” on dark */
  }
  body{
    background:linear-gradient(to bottom right,#221b37 0%, #2a2142 40%, #2b2446 100%);
    color:var(--text);
  }

  /* Cards / Surfaces */
  .card,
  .message-card,
  .msg,
  .support-container,
  .faq-container,
  .about-card,
  .saved-message-container,
  .cta-card{
    background:#1f2030;
    color:var(--text);
    border-color:rgba(255,255,255,.10);
    box-shadow:0 6px 16px rgba(0,0,0,.6);
  }

  /* Forms */
  input, select, textarea{
    background:#161827;
    color:var(--text);
    border-color:#454a72;
  }
  .form-container{ background:#1f2030; }

  /* “Muted” and helper text — make it full contrast, not grey */
  .muted,
  .chooser-sub,
  .cta-sub,
  .cta-hint,
  .success-subtext,
  .dob,
  .message-header,
  .benefits-price,
  .path-content .minor,
  .support-container p,
  .disclaimer{
    color:#FFFFFF;            /* no more low-contrast greys */
    opacity:1;                /* ensure full strength */
  }

  /* Chips / Pills */
  .chip{
    background:#2a2d46;
    color:#FFFFFF;
    border-color:#4a4f7a;
  }
  .chip:hover{ background:#323660; border-color:#5a60a0; }
  .chip--active{
    background:var(--accent);
    color:#FFFFFF;
    border-color:var(--accent);
    box-shadow:0 6px 16px rgba(127,90,240,.35);
  }

  /* Ghost buttons and links on dark */
  .btn--ghost{
    background:#23253b;
    color:#FFFFFF;
    border:1px solid #4a4f7a;
  }
  a{ color:#C9C7FF; }               /* keep links distinct & readable */
  a:hover{ filter:brightness(1.06); }

  /* Tables / dividers */
  .helpline-table th,
  .helpline-table td{
    border-color:#3a3f64;
    color:#FFFFFF;
  }
  .helpline-table th{ background:#2a2f54; color:#FFFFFF; }

  /* Special sections */
  .homepage-disclaimer{
    background:#2a2f54;
    color:#FFFFFF;
    border-left-color:#9a8fff;
  }
  .message-suggestions{ background:#262341; }
  .find-support{ background:#231f39; }

  /* Hero split media container */
  .media-embed{ box-shadow:0 18px 50px rgba(0,0,0,.6); }
}
/* Not recommended: black text on dark background */
body, .card, .msg, .muted, .chip, .btn--ghost, input, select, textarea { color:#000 !important; }


/* ─── Print polish ─────────────────────────────────────────────────────── */
@media print{
  header, nav, .button, .btn, .cta-card, .chipbar, .filter-inline{ display:none !important; }
  body{ background:#fff !important; color:#000; }
  .card, .msg, .message-card{ box-shadow:none; border:1px solid #ddd; }
}

/* ===================== Feedback Wall — scoped fixes ===================== */
/* Scope to the Feedback hero: it's the .hero that is also a .card
   (your Feedback page uses: <section class="hero card">) */
.page .wrap > .hero.card{
  /* restore desktop grid (your original feedback layout) */
  background: linear-gradient(135deg, rgba(127,90,240,.12), rgba(71,162,255,.10));
  border: 1px solid rgba(127,90,240,.18);
  border-radius: 20px; /* your calc(var(--radius)+6px) approximation */
  box-shadow: var(--shadow-sm);
  padding: 20px 18px;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  margin-bottom: 18px;
  text-align: left;
  place-items: initial;       /* neutralize global .hero centering */
  justify-items: initial;     /* neutralize global .hero centering */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.page .wrap > .hero.card .hero-icon{
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  background: conic-gradient(from 210deg, rgba(127,90,240,.2), rgba(71,162,255,.2));
  border:1px solid rgba(127,90,240,.25);
  color:#3b2a8f; font-size:24px; font-weight:800;
}

.page .wrap > .hero.card h1{
  margin:0 0 6px 0;
  font-size: clamp(22px, 2.2vw + 14px, 30px);
  letter-spacing:.2px;
  color:#0b1021;
}

.page .wrap > .hero.card p{
  margin:0; color:#33394a;
  /* safe wrapping if someone pastes a long URL */
  overflow-wrap:anywhere; word-break:break-word; hyphens:auto;
}

.page .wrap > .hero.card .stats{
  display:flex; gap:10px; align-items:center; margin-top:8px;
  flex-wrap:wrap; /* lets chips wrap on small desktops too */
}
.page .wrap > .hero.card .pill{
  display:inline-flex; align-items:center; gap:.5ch;
  background:#f4f2ff; color:#3b2a8f;
  border:1px solid rgba(127,90,240,.18);
  padding:6px 10px; border-radius:999px; font-weight:700;
}

/* --------------------- Phone layout (≤ 720px) --------------------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* stop iOS text inflation */

@media screen and (max-width: 720px){
  /* prevent any horizontal scroll */
  html, body, .page { overflow-x:hidden; }

  /* HERO: star on top, centered, small & tidy, never overflow */
  .page .wrap > .hero.card{
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    text-align: center !important;
    gap: 8px !important;
    padding: 14px 12px !important;
  }

  .page .wrap > .hero.card .hero-icon{
    display: grid !important;
    order: -1;                 /* put star above heading */
    place-items: center;
    width: 40px; height: 40px;
    margin: 0 auto 6px;
    border-radius: 50%;
    background: radial-gradient(60% 60% at 30% 20%, rgba(127,90,240,.18), transparent 60%), #f6f5ff;
    border: 1px solid rgba(127,90,240,.25);
    color:#3b2a8f; font-size:18px; font-weight:800;
  }

  .page .wrap > .hero.card > div{
    width: 100%; max-width: 46ch; min-width: 0; box-sizing: border-box;
  }

  .page .wrap > .hero.card h1{
    font-size: 20px !important; line-height: 1.3; margin: 0 0 6px;
    word-break: break-word;
  }
  .page .wrap > .hero.card p{
    font-size: .9rem !important; line-height: 1.4; margin: 0;
    overflow-wrap:anywhere; word-break:break-word; hyphens:auto;
  }

  .page .wrap > .hero.card .stats{
    justify-content:center;
    gap: 6px 8px;
    width:100%; max-width:100%;
  }
  .page .wrap > .hero.card .pill{
    font-size: .85rem !important;
    line-height: 1.3;
    padding: 6px 8px;
    text-align: center;
    white-space: normal;        /* allow chip text to wrap */
    word-break: break-word;
    box-sizing: border-box;
  }

  /* If your feedback list/cards sit on this page, harden their wrapping too */
  .list{ grid-template-columns: 1fr; gap: 10px; }
  .fb{ min-width:0; }
  .fb-msg{ overflow-wrap:anywhere; word-break:break-word; }
  .name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
  .time{ white-space:nowrap; }
}