:root{
  --violet:#5A3FC0;
  --lavender:#E4DDFF;
  --beige:#FAF3E0;
  --accent:#7F5AF0;
  --text:#2E2E2E;
  --error:#FF4D4D;
  --success:#3CBA54;
  --light:#ffffff;
}

/* RESET */
*{ margin:0; padding:0; box-sizing:border-box; }

/* GLOBAL */
html, body{
  height:100%;
  font-family:'Segoe UI', sans-serif;
  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;
  color:var(--text);
  line-height:1.6;
}
/* Let .site-wrapper drive the column layout (not html/body) */
.site-wrapper{ display:flex; flex-direction:column; min-height:100vh; }
main{ flex:1; }

/* Accessible focus ring */
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(127,90,240,.35);
  border-radius:8px;
}

/* Basic image sanity */
img{ max-width:100%; height:auto; }

/* HEADER (generic <header>) */
header{
  background-color:var(--violet);
  color:#fff;
  padding:1rem;
  text-align:center;
  position:sticky;
  top:0;
  z-index:10;
  border-bottom:1px solid rgba(255,255,255,.15);
}
.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:2rem; color:var(--light); margin:0; }
.site-title{ color:#fff; text-decoration:none; }
.site-title:hover{ text-decoration:underline; }

nav{ margin-top:10px; }
nav a{
  color:#fff; text-decoration:none; margin:0 12px; font-weight:500;
  border-radius:999px; padding:.25rem .5rem; /* tiny hit area */
}
nav a:hover, nav a:focus-visible{ text-decoration:underline; }

/* HEADINGS */
.page-heading{
  text-align:center; font-size:2rem; color:var(--violet);
  margin:40px auto 20px; padding:10px 20px;
}
.drift-heading{
  text-align:center; margin:40px auto 20px; padding:10px 20px; max-width:700px;
  font-family:'Georgia', serif; font-size:1.8rem; line-height:1.4; color:#5A3FC0;
}

/* HERO */
.hero{ max-width:900px; margin:60px auto; text-align:justify; padding:0 20px; font-size:1.1rem; line-height:1.8; }
.hero h2{ font-size:1.6rem; color:var(--accent); margin-bottom:20px; }
.center-line{ text-align:center; font-size:1.2rem; margin:30px 0; font-weight:bold; color:var(--accent); }

/* IMAGES */
.centered-photo,.photo-gallery{ text-align:center; margin:40px auto; padding:0 20px; }
.centered-photo img,.photo-gallery img{
  max-width:400px; width:100%; height:auto; display:block; margin:0 auto;
  border-radius:10px; box-shadow:0 4px 8px rgba(0,0,0,.15);
}
.photo-gallery{
  display:flex; justify-content:center; gap:20px; flex-wrap:wrap; max-width:1000px;
}
.photo-gallery img{ width:30%; min-width:200px; }

/* VIDEO */
.video-wrapper{ width:350px; margin:40px auto; }
.video-wrapper video{
  width:100%; height:auto; border-radius:10px; box-shadow:0 4px 12px rgba(0,0,0,.2);
}

/* CARDS (white default) */
.cards-row{
  display:flex; flex-wrap:wrap; gap:40px; justify-content:center;
  max-width:1200px; margin:0 auto 60px; padding:0 20px;
}
.card{
  background:#fff; border-radius:12px; padding:25px;
  flex:1 1 400px; max-width:500px;
  box-shadow:0 4px 10px rgba(0,0,0,0.1);
  transition:transform .2s ease; text-align:justify;
}
.card--beige{ background:var(--beige); } /* use this if you want beige cards */
.card:hover{ transform:translateY(-4px); }
.card h3{ text-align:center; color:var(--violet); margin-bottom:20px; }
.card-section{ display:flex; flex-direction:row; gap:20px; align-items:center; }
.card-image{ width:200px; border-radius:12px; box-shadow:0 2px 6px rgba(0,0,0,.15); }

/* BUTTONS */
.button, button{
  padding:10px 20px; background-color:var(--accent); color:#fff;
  border:none; border-radius:8px; font-weight:bold; font-size:1rem; cursor:pointer;
  transition:background-color .2s ease, transform .06s ease;
}
.button:hover, button:hover{ background-color:var(--violet); transform:translateY(-1px); }
.button-container{ text-align:center; margin-top:20px; }

/* FORMS */
form{ max-width:500px; margin:0 auto; padding:20px; }
form label{ font-weight:bold; color:var(--violet); }
input[type="text"],input[type="password"],input[type="tel"],input[type="date"],textarea{
  width:100%; padding:10px; margin-top:5px; margin-bottom:15px; border:1px solid #CCC; border-radius:5px;
  background-color:var(--lavender); color:var(--text); font-size:1rem;
}

/* MESSAGES */
.message-card{
  background-color:var(--beige); border-left:6px solid var(--accent); border-radius:12px;
  padding:20px; margin-bottom:25px; box-shadow:0 4px 10px rgba(0,0,0,.08);
  transition:transform .2s ease;
}
.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.1rem; white-space:pre-wrap; text-align:justify; }
.message-footer{ margin-top:10px; }
.approve-btn{ background-color:var(--success); }
.approve-btn:hover{ background-color:#2E9A40; }
.delete-btn{ background-color:var(--error); }
.delete-btn:hover{ background-color:#CC0000; }

/* SUPPORT & SUGGESTIONS */
.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:#5A3FC0; 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 #5A3FC0; 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:#5A3FC0; 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:#5A3FC0; 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:#5A3FC0; text-decoration:underline; }
.global-links{ margin-top:30px; padding:15px; background-color:#fff; border-left:4px solid #5A3FC0; border-radius:8px; }
.disclaimer{ margin-top:40px; font-size:.9rem; color:#666; text-align:center; }

/* FAQ */
.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 */
.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:0 12px 30px rgba(0,0,0,.08); 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:#7f5af0; text-align:center; margin-bottom:30px;
  border-left:4px solid #7f5af0; padding-left:15px;
}
.about-signoff{ font-weight:bold; color:var(--violet); margin-top:30px; }
.about-team{ text-align:right; font-style:italic; color:#7f5af0; margin-top:10px; }

/* AUTH / FORMS GROUP */
.form-container{
  max-width:400px; margin:2rem auto; padding:2rem; background-color:#f7f4ff; border-radius:10px;
  box-shadow:0 0 10px rgba(90,63,192,.1);
}
.form-container input{
  width:100%; padding:10px; margin-top:8px; margin-bottom:20px; border:1px solid #ccc; border-radius:6px;
}
.form-container button{
  background-color:#5A3FC0; color:#fff; border:none; padding:12px 20px; border-radius:6px; cursor:pointer; width:100%;
  font-weight:bold; font-size:1rem;
}
.form-container button:hover{ background-color:#3f2aa4; }

/* SAVE CONFIRM */
.saved-message-container{
  max-width:600px; margin:40px auto; background-color:#fff8f2; padding:40px; border-radius:16px;
  box-shadow:0 8px 20px rgba(90,63,192,.1); text-align:center;
}
.success-heading{ color:#5A3FC0; 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:#5A3FC0; color:#fff; font-weight:bold; border-radius:8px;
  text-decoration:none; margin-top:12px; transition:background-color .3s ease;
}
.button-cta:hover{ background-color:#7F5AF0; }
.button-link{ display:inline-block; margin-top:24px; color:#5A3FC0; font-weight:bold; text-decoration:none; }
.button-link:hover{ text-decoration:underline; }

/* HOMEPAGE DISCLAIMER (deduped) */
.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; }

/* Layout helpers */
.home{ max-width:1000px; margin:0 auto; padding:24px 20px; }
.center-line{ text-align:center; margin:12px 0 20px; font-weight:600; }

/* Hero (CTA) */
.hero-intro{ text-align:center; padding:24px 10px 8px; }
.hero-title{ font-size:clamp(1.6rem,3.5vw,2.4rem); line-height:1.25; margin-bottom:8px; }
.hero-title .soft{ font-weight:600; opacity:.9; }
.hero-sub{ font-size:1rem; max-width:720px; margin:8px auto 18px; opacity:.9; }
.hero-ctas{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* CTA Buttons */
.button,.cta-primary,.cta-secondary{ display:inline-block; text-decoration:none; padding:12px 20px; border-radius:10px; font-weight:600; }
.cta-primary{ background:var(--violet); color:#fff; }
.cta-primary:hover{ background:var(--accent); }
.cta-secondary{ background:#fff; color:var(--violet); border:2px solid var(--violet); }
.cta-secondary:hover{ background:var(--lavender); }

/* Count banner */
.count-banner{ text-align:center; margin:18px 0 8px; }
.count-chip{
  display:inline-block; background-color:var(--beige); padding:18px 28px; border-radius:18px;
  box-shadow:0 4px 12px rgba(0,0,0,0.08); font-size:1.3rem; color:var(--violet); font-weight:700; letter-spacing:.5px;
}

/* Steps */
.how-it-works{ margin:26px 0 10px; }
.how-it-works h2{ text-align:center; margin-bottom:14px; }
.steps{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); }
.step{ background:#fff; border-radius:14px; padding:16px; box-shadow:0 4px 12px rgba(0,0,0,0.06); }
.step-num{ width:32px; height:32px; border-radius:50%; background:var(--violet); color:#fff; display:grid; place-items:center; font-weight:700; margin-bottom:10px; }

/* Story / video */
.story{ text-align:center; }
.video-wrapper{ max-width:820px; margin:16px auto; border-radius:14px; overflow:hidden; box-shadow:0 6px 16px rgba(0,0,0,0.12); }
video{ width:100%; height:auto; display:block; }

/* Gallery */
.photo-gallery{ display:grid; place-items:center; margin:18px 0; }
.photo-gallery img{ width:min(100%, 880px); height:auto; border-radius:16px; box-shadow:0 6px 18px rgba(0,0,0,0.1); }

/* Cards (grid variant) */
.cards-row{ display:grid; gap:18px; margin:20px 0; }
.card-section{ display:grid; gap:16px; align-items:center; grid-template-columns:1fr; }
.card-image{ width:100%; max-width:420px; justify-self:center; }
.card{ background:#fff; border-radius:16px; padding:18px; box-shadow:0 6px 16px rgba(0,0,0,0.08); }
.card h3{ margin-bottom:8px; }
.card .button-container{ margin-top:12px; }

/* Trust */
.trust{ margin:26px 0 0; text-align:center; }
.trust h2{ margin-bottom:8px; }
.trust-points{ list-style:none; padding:0; margin:0 auto; max-width:820px; }
.trust-points li{ margin:6px 0; padding:10px 12px; background:#fff; border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.minor{ font-size:.9rem; opacity:.85; text-align:center; }

/* 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; }
}
@media (max-width:768px){
  .cards-row,.card-section{ flex-direction:column; text-align:center; }
  .card-image{ width:100%; max-width:300px; }
  .hero{ font-size:1rem; padding:0 16px; }
  .video-wrapper{ width:90%; }
}

/* Audience intro */
.audience-header{ text-align:center; margin:40px auto 20px; max-width:800px; padding:0 15px; }
.audience-header h2{ font-size:1.8rem; color:var(--violet); margin-bottom:8px; }
.audience-header p{ font-size:1rem; opacity:.9; line-height:1.5; }

/* Centered page helpers */
.page--center{ display:flex; flex-direction:column; align-items:center; }
.card{ width:100%; max-width:900px; margin-left:auto; margin-right:auto; }
.card__header{ justify-content:center; text-align:center; gap:.75rem; }
.card__title{ justify-content:center; }
.pill-row{ justify-content:center; }
.grid-form{ width:100%; max-width:900px; margin-left:auto; margin-right:auto; }
.grid-form__actions{ justify-content:center; }
.cta{ text-align:center; }
.msg-list{ width:100%; max-width:900px; margin-left:auto; margin-right:auto; }
@media (max-width:640px){ .link-muted{ display:inline-block; margin-top:.35rem; } }

/* Pill labels (deduped) */
.pill__label{ font-weight:800; font-size:1rem; color:#1f2937; letter-spacing:.2px; }
.pill--active .pill__label{ color:#fff; }
.pill__meta{ font-size:.8rem; color:#6b7280; }

/* CTA card */
.cta-card{
  background:#fff; border-radius:16px; padding:2rem; margin:2rem 0;
  box-shadow:0 4px 18px rgba(0,0,0,0.08); 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-content .btn-large{ padding:.85rem 2rem; font-size:1rem; border-radius:999px; margin-top:1rem; }
.cta-hint{ margin-top:1rem; font-size:.9rem; color:#9ca3af; }

/* Pill radios */
.pill-radio-group{ display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem; margin-bottom:1rem; }
.pill-radio{ position:relative; cursor:pointer; }
.pill-radio input{ position:absolute; opacity:0; pointer-events:none; }
.pill-radio__label{
  display:inline-flex; align-items:center; gap:.35rem; background:#f9fafb;
  border:2px solid #e5e7eb; border-radius:999px; padding:.5rem 1rem; transition:all .2s ease; font-weight:500;
}
.pill-radio input:checked + .pill-radio__label{ background:var(--violet); color:#fff; border-color:var(--violet); }
.pill-radio__meta{ display:block; font-size:.75rem; color:#6b7280; margin-top:.25rem; }

/* Account page header fixes (deduped) */
.account-page .card__header{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap;
  padding-bottom:.65rem; border-bottom:1px solid rgba(0,0,0,.08); margin-bottom:1rem;
}
.account-page .card__title{ display:flex; align-items:center; gap:.6rem; min-width:0; }
.account-page .card__icon{ font-size:1.25rem; line-height:1; }
.account-page .card__heading{
  margin:0; color:#1f2937; font-size:clamp(1.1rem, 1.2vw + .9rem, 1.4rem); font-weight:800; letter-spacing:.2px;
}
.account-page .card__header-actions{ margin-left:auto; display:flex; gap:.5rem; align-items:center; }
.account-page .link-muted{ color:#6b7280; text-decoration:none; font-size:.95rem; font-weight:600; }
.account-page .link-muted:hover{ color:#4338ca; }
@media (max-width:560px){
  .account-page .card__header{ align-items:flex-start; }
  .account-page .card__header-actions{ width:100%; margin:.4rem 0 0; justify-content:flex-start; }
}

/* Optional SITE HEADER variant (only applies if your <header> has class="site-header") */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:var(--violet); color:#fff;
  border-bottom:1px solid rgba(255,255,255,.12);
  box-shadow:0 8px 22px rgba(90,63,192,.22);
}
.site-header .header-top{ display:flex; align-items:center; gap:.6rem; padding:10px 12px; }
.site-header .logo{ height:42px; width:auto; display:block; }
.site-header .site-title{ color:#fff; text-decoration:none; font-weight:800; }
.site-header .primary-nav{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .5rem; padding:6px 12px 12px; }
.site-header .primary-nav a{
  color:#fff; text-decoration:none; padding:.44rem .74rem; border-radius:999px; border:1px solid transparent;
  transition:background .15s ease, transform .06s ease, box-shadow .15s ease;
}
.site-header .primary-nav a:hover{ background:rgba(255,255,255,.14); transform:translateY(-1px); box-shadow:0 3px 10px rgba(0,0,0,.15); }
.site-header .primary-nav a.nav-cta{ background:var(--accent); box-shadow:0 6px 18px rgba(127,90,240,.28); }
.site-header .primary-nav a.nav-cta:hover{ filter:brightness(1.05); }
.site-header, .site-header *{ backdrop-filter:none; -webkit-backdrop-filter:none; }

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

/* —— Nicer child chooser (scoped) —— */
.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:0 6px 16px rgba(0,0,0,.06);
}

.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; -webkit-appearance:none; -moz-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:#7f5af0;
  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;
}

.account-page .link-muted{ color:#6b7280; text-decoration:none; font-weight:600; }
.account-page .link-muted:hover{ color:#4338ca; }

/* Keep the child row tidy on small screens */
.account-page .child-row { flex-wrap: wrap; }
.account-page .child-row .child-main { flex: 1 1 auto; }

/* Toolbar on the My Children card */
.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; }

/* Make <summary> look like your button, hide default marker */
.account-page details.add-child-toggle > summary::-webkit-details-marker{ display:none; }
.account-page details.add-child-toggle > summary{ list-style:none; }
.account-page details.add-child-toggle .btn{ cursor:pointer; }

/* Panel spacing when opened */
.account-page .add-child-panel{
  margin-top:.75rem; padding-top:.75rem;
  border-top:1px dashed rgba(127,90,240,.25);
}

/* Toggle the label text */
.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; }