/* =========================================================================
   Hilal Mahal — shared stylesheet ("Hilal Dusk" theme)
   Masjidul Huda · Hilal Mahal community website
   ========================================================================= */

/* ---------- Theme tokens: light is the bare :root ---------- */
:root{
  --ground:#eef2ea; --ground-2:#e6ece2; --ground-3:#dde5d8;
  --surface:#ffffff; --surface-2:#f7faf5;
  --ink:#16211c; --ink-soft:#556458; --ink-faint:#8a998f;
  --line:#d9e0d5; --line-strong:#c4cebf;
  --primary:#155845; --primary-ink:#0f4636; --primary-tint:#e3ede7;
  --accent:#9a7327; --accent-deco:#c19a44; --accent-tint:#f0e7d1;
  --btn-bg:#155845; --btn-fg:#f4f8f2; --btn-bg-hover:#12503f;
  --gold-btn-bg:#c19a44; --gold-btn-fg:#2a2008; --gold-btn-hover:#b28c39;
  --focus:rgba(21,88,69,.18);
  --good:#2f7d58; --warn:#9a6b1e; --crit:#b23a32; --crit-tint:#f7e7e5;
  --shadow-card:0 1px 2px rgba(16,33,26,.04), 0 10px 30px -18px rgba(16,33,26,.24);
  --shadow-pop:0 14px 44px -14px rgba(16,33,26,.3);
  --r-lg:18px; --r-md:12px; --r-sm:9px;
  --maxw:1160px;
  --nav-h:66px;
  /* dusk — fixed across both themes */
  --sky-top:#06201b; --sky-mid:#0b3830; --sky-glow:#175a49;
  --sky-horizon:#c78f4a; --gold:#e0be74; --gold-deep:#c19a44;
  --hero-ink:#eef3ee; --hero-soft:#a6bcb0;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0c1310; --ground-2:#111b16; --ground-3:#16221c;
    --surface:#17221c; --surface-2:#1c2922;
    --ink:#e9efe7; --ink-soft:#9fb0a6; --ink-faint:#6d7f75;
    --line:#26332c; --line-strong:#35473c;
    --primary:#5cbf9f; --primary-ink:#8ad7bd; --primary-tint:#14241d;
    --accent:#d8b767; --accent-deco:#d8b767; --accent-tint:#221d10;
    --btn-bg:#2b8368; --btn-fg:#effaf4; --btn-bg-hover:#31916f;
    --gold-btn-bg:#d8b767; --gold-btn-fg:#241b06; --gold-btn-hover:#e0c073;
    --focus:rgba(92,191,159,.26);
    --good:#4fb587; --warn:#d0a34e; --crit:#e0736a; --crit-tint:#2a1614;
    --shadow-card:0 1px 2px rgba(0,0,0,.3), 0 12px 34px -18px rgba(0,0,0,.6);
    --shadow-pop:0 18px 50px -16px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#0c1310; --ground-2:#111b16; --ground-3:#16221c;
  --surface:#17221c; --surface-2:#1c2922;
  --ink:#e9efe7; --ink-soft:#9fb0a6; --ink-faint:#6d7f75;
  --line:#26332c; --line-strong:#35473c;
  --primary:#5cbf9f; --primary-ink:#8ad7bd; --primary-tint:#14241d;
  --accent:#d8b767; --accent-deco:#d8b767; --accent-tint:#221d10;
  --btn-bg:#2b8368; --btn-fg:#effaf4; --btn-bg-hover:#31916f;
  --gold-btn-bg:#d8b767; --gold-btn-fg:#241b06; --gold-btn-hover:#e0c073;
  --focus:rgba(92,191,159,.26);
  --good:#4fb587; --warn:#d0a34e; --crit:#e0736a; --crit-tint:#2a1614;
  --shadow-card:0 1px 2px rgba(0,0,0,.3), 0 12px 34px -18px rgba(0,0,0,.6);
  --shadow-pop:0 18px 50px -16px rgba(0,0,0,.7);
  color-scheme:dark;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.6; letter-spacing:-0.003em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection{background:var(--primary-tint); color:var(--ink)}
h1,h2,h3,h4{margin:0; font-family:"Newsreader",Georgia,serif; font-weight:500; text-wrap:balance; letter-spacing:-0.012em; line-height:1.12}
p{margin:0}
a{color:var(--primary-ink); text-decoration:none}
img{max-width:100%; display:block}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--primary); outline-offset:2px; border-radius:4px}

.container{max-width:var(--maxw); margin:0 auto; padding-inline:max(18px,4.5vw)}
.section{padding-block:clamp(48px,7vw,88px)}
.section-sm{padding-block:clamp(32px,5vw,56px)}
.center{text-align:center}
.stack{display:flex; flex-direction:column}

/* eyebrow — sentence case, crescent glyph (not tracked-out caps) */
.eyebrow{display:inline-flex; align-items:center; gap:9px; font-size:.86rem; font-weight:600; color:var(--accent)}
.eyebrow::before{content:"\263D"; font-size:1.05em; color:var(--accent-deco); transform:translateY(-1px)}
.eyebrow.on-dark{color:var(--gold)}
.eyebrow.on-dark::before{color:var(--gold)}

.h-xl{font-size:clamp(2.4rem,5.4vw,3.9rem); line-height:1.02; letter-spacing:-0.028em}
.h-lg{font-size:clamp(1.9rem,3.6vw,2.7rem); letter-spacing:-0.02em}
.h-md{font-size:clamp(1.4rem,2.4vw,1.85rem); letter-spacing:-0.015em}
.lede{font-size:1.12rem; color:var(--ink-soft); line-height:1.62; max-width:60ch}
.muted{color:var(--ink-soft)}
.serif-em{font-style:italic; color:var(--accent-deco); font-weight:500}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; height:48px; padding:0 22px;
  border-radius:var(--r-md); border:1px solid transparent; font-size:.96rem; font-weight:700; cursor:pointer;
  font-family:inherit; transition:transform .16s cubic-bezier(.23,1,.32,1), background .16s ease, border-color .16s ease, color .16s ease}
.btn svg{width:18px; height:18px}
.btn:active{transform:scale(.975)}
.btn-primary{background:var(--btn-bg); color:var(--btn-fg); box-shadow:0 8px 22px -12px color-mix(in srgb,var(--primary) 72%, transparent)}
.btn-primary:hover{background:var(--btn-bg-hover)}
.btn-gold{background:var(--gold-btn-bg); color:var(--gold-btn-fg)}
.btn-gold:hover{background:var(--gold-btn-hover)}
.btn-ghost{background:var(--surface); color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--line-strong)}
.btn-sm{height:40px; padding:0 16px; font-size:.88rem}
.btn-block{width:100%}

/* ---------- Navbar ---------- */
.nav{position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--ground) 74%, transparent);
  backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid color-mix(in srgb,var(--line) 70%, transparent)}
.nav-inner{display:flex; align-items:center; gap:16px; height:var(--nav-h); max-width:var(--maxw); margin:0 auto; padding-inline:max(18px,4.5vw)}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); min-width:0}
.brand .mark{flex:none; width:34px; height:34px}
.brand b{font-family:"Hanken Grotesk",sans-serif; font-weight:700; font-size:.95rem; line-height:1.1; white-space:nowrap}
.brand span{display:block; font-size:.72rem; color:var(--ink-soft); white-space:nowrap}
.nav-links{display:flex; align-items:center; gap:2px; margin-left:8px}
.nav-links a{color:var(--ink-soft); font-size:.92rem; font-weight:600; padding:9px 12px; border-radius:9px; transition:color .16s ease, background .16s ease}
.nav-links a:hover{color:var(--ink); background:var(--ground-2)}
.nav-links a.active{color:var(--primary-ink); background:var(--primary-tint)}
.nav-right{margin-left:auto; display:flex; align-items:center; gap:10px}
.iconbtn{flex:none; width:40px; height:40px; border-radius:10px; border:1px solid var(--line); background:var(--surface);
  color:var(--ink-soft); cursor:pointer; display:grid; place-items:center;
  transition:transform .16s cubic-bezier(.23,1,.32,1), color .16s ease, border-color .16s ease}
.iconbtn:hover{color:var(--ink); border-color:var(--line-strong)}
.iconbtn:active{transform:scale(.94)}
.iconbtn svg{width:18px; height:18px}
.iconbtn .moon{display:none}
:root[data-theme="dark"] .iconbtn .sun{display:none}
:root[data-theme="dark"] .iconbtn .moon{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .iconbtn .sun{display:none} :root:not([data-theme="light"]) .iconbtn .moon{display:block}}
.hamburger{display:none}
.nav-cta{display:inline-flex}

.mobile-menu{display:none; border-bottom:1px solid var(--line); background:var(--ground)}
.mobile-menu.open{display:block}
.mobile-menu a{display:block; padding:13px 4px; color:var(--ink); font-weight:600; border-bottom:1px solid var(--line)}
.mobile-menu a:last-child{border-bottom:none}

@media (max-width:900px){
  .nav-links{display:none}
  .nav-cta{display:none}
  .hamburger{display:grid}
}

/* ---------- Dusk hero / page head ---------- */
.dusk{position:relative; overflow:hidden; color:var(--hero-ink);
  background:
    radial-gradient(120% 90% at 80% 120%, var(--sky-glow) 0%, transparent 55%),
    radial-gradient(90% 70% at 15% -20%, #0e453a 0%, transparent 60%),
    linear-gradient(170deg, var(--sky-top) 0%, var(--sky-mid) 72%, #0d3f34 100%)}
.dusk .stars{position:absolute; inset:0; pointer-events:none; opacity:.85}
.dusk .horizon{position:absolute; left:0; right:0; bottom:0; height:130px; pointer-events:none;
  background:radial-gradient(120% 200% at 80% 130%, color-mix(in srgb,var(--sky-horizon) 52%, transparent) 0%, transparent 60%)}
.dusk .container{position:relative}
.dusk h1,.dusk h2{color:#fff}
.dusk .lede{color:var(--hero-soft)}

.hero{padding-block:clamp(52px,8vw,104px)}
.hero-grid{display:grid; grid-template-columns:1fr; gap:36px; align-items:center}
@media(min-width:860px){.hero-grid{grid-template-columns:1.35fr .9fr; gap:52px}}
.hero h1{margin-top:16px}
.hero .lede{margin-top:18px}
.hero .cta-row{display:flex; flex-wrap:wrap; gap:13px; margin-top:28px}
.arabic{font-family:"Newsreader",serif; color:var(--gold); opacity:.92; letter-spacing:.02em}

.pagehead{padding-block:clamp(38px,6vw,64px)}
.pagehead .lede{margin-top:14px}

/* ---------- Cards & grids ---------- */
.grid{display:grid; gap:20px}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:920px){.cols-3,.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}}

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; box-shadow:var(--shadow-card)}
.card h3{font-size:1.24rem; margin-bottom:8px}
.card p{color:var(--ink-soft); font-size:.95rem}
.card .ic{width:46px; height:46px; border-radius:12px; background:var(--primary-tint); color:var(--primary);
  display:grid; place-items:center; margin-bottom:16px}
.card .ic svg{width:23px; height:23px}
.card .ic.gold{background:var(--accent-tint); color:var(--accent)}
.card-link{display:inline-flex; align-items:center; gap:7px; margin-top:14px; font-weight:600; color:var(--primary-ink); font-size:.9rem}
.card-link svg{width:15px; height:15px; transition:transform .18s ease}
.card-link:hover svg{transform:translateX(3px)}
a.card{color:inherit; transition:transform .18s cubic-bezier(.23,1,.32,1), border-color .18s ease, box-shadow .18s ease}
a.card:hover{border-color:var(--line-strong); transform:translateY(-2px); box-shadow:var(--shadow-pop)}

/* stat tiles */
.stats{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  grid-template-columns:repeat(4,1fr)}
@media(max-width:720px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--surface); padding:22px}
.stat b{display:block; font-family:"Newsreader",serif; font-size:2.1rem; color:var(--ink); line-height:1; font-variant-numeric:tabular-nums}
.stat span{font-size:.84rem; color:var(--ink-soft); margin-top:6px; display:block}
.dusk .stats{background:rgba(224,190,116,.18); border-color:rgba(224,190,116,.22)}
.dusk .stat{background:rgba(8,40,33,.5)}
.dusk .stat b{color:#fff}
.dusk .stat span{color:var(--hero-soft)}

/* feature list */
.ticks{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.ticks li{display:flex; align-items:flex-start; gap:11px; color:var(--ink-soft); font-size:.96rem}
.ticks li svg{flex:none; width:20px; height:20px; color:var(--primary); margin-top:2px}

/* ---------- Prayer times ---------- */
.prayer-strip{display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:rgba(224,190,116,.2);
  border:1px solid rgba(224,190,116,.25); border-radius:var(--r-lg); overflow:hidden}
@media(max-width:720px){.prayer-strip{grid-template-columns:repeat(3,1fr)}}
.prayer-strip .pt{background:rgba(8,40,33,.55); padding:16px 12px; text-align:center}
.prayer-strip .pt .n{font-size:.78rem; color:var(--hero-soft); font-weight:600}
.prayer-strip .pt .t{font-family:"IBM Plex Mono",monospace; font-size:1.16rem; color:#fff; margin-top:5px; letter-spacing:.02em}
.prayer-strip .pt.next{background:rgba(224,190,116,.16)}
.prayer-strip .pt.next .n{color:var(--gold)}

.times-table{width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.times-table th,.times-table td{padding:14px 18px; text-align:left; border-bottom:1px solid var(--line)}
.times-table th{font-family:"Hanken Grotesk",sans-serif; font-size:.78rem; font-weight:700; letter-spacing:.04em; color:var(--ink-faint); text-transform:uppercase; background:var(--surface-2)}
.times-table td{font-size:.96rem}
.times-table td.time{font-family:"IBM Plex Mono",monospace; color:var(--ink); font-variant-numeric:tabular-nums}
.times-table tr:last-child td{border-bottom:none}
.times-table tr.now td{background:var(--primary-tint)}

/* ---------- Committee ---------- */
.person{display:flex; gap:14px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:16px}
.person .ava{flex:none; width:50px; height:50px; border-radius:50%; background:var(--primary-tint); color:var(--primary);
  display:grid; place-items:center; font-family:"Newsreader",serif; font-size:1.2rem; font-weight:600}
.person .nm{font-weight:700; color:var(--ink); font-size:.98rem}
.person .role{font-size:.84rem; color:var(--ink-soft)}

/* ---------- Announcements ---------- */
.ann{display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line)}
.ann:last-child{border-bottom:none}
.ann .date{flex:none; width:64px; text-align:center}
.ann .date .d{font-family:"Newsreader",serif; font-size:1.6rem; color:var(--primary-ink); line-height:1}
.ann .date .m{font-size:.72rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; margin-top:2px}
.ann .body h4{font-family:"Hanken Grotesk",sans-serif; font-weight:700; font-size:1rem; color:var(--ink)}
.ann .body p{color:var(--ink-soft); font-size:.9rem; margin-top:3px}
.ann .tag{display:inline-block; font-size:.72rem; font-weight:700; color:var(--accent); background:var(--accent-tint); padding:3px 9px; border-radius:99px; margin-top:8px}

/* ---------- CTA band ---------- */
.band{border-radius:var(--r-lg); padding:clamp(28px,5vw,52px); color:var(--hero-ink);
  background:radial-gradient(120% 140% at 85% 120%, var(--sky-glow) 0%, transparent 55%), linear-gradient(150deg,var(--sky-top),var(--sky-mid))}
.band h2{color:#fff}
.band p{color:var(--hero-soft); margin-top:10px; max-width:52ch}
.band .cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:22px}

/* ---------- Forms ---------- */
.form-wrap{display:grid; grid-template-columns:1fr; gap:34px; align-items:start}
@media(min-width:960px){.form-wrap{grid-template-columns:250px 1fr; gap:48px}}
.form-aside{position:relative}
@media(min-width:960px){.form-aside{position:sticky; top:calc(var(--nav-h) + 20px)}}
.aside-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px; box-shadow:var(--shadow-card)}
.aside-card h4{font-family:"Hanken Grotesk",sans-serif; font-weight:700; font-size:.82rem; letter-spacing:.04em; color:var(--ink-faint); text-transform:uppercase; margin-bottom:12px}
.aside-card .who{font-size:.9rem; color:var(--ink-soft); line-height:1.55}
.sheet-badge{display:inline-flex; align-items:center; gap:8px; font-size:.78rem; font-weight:600; color:var(--good);
  background:color-mix(in srgb,var(--good) 12%, transparent); border:1px solid color-mix(in srgb,var(--good) 26%, transparent);
  padding:6px 11px; border-radius:99px; margin-top:14px}
.sheet-badge svg{width:14px; height:14px}

form .fs{border:none; margin:0; padding:0}
form .fs + .fs{margin-top:30px; padding-top:26px; border-top:1px solid var(--line)}
.fs-head{display:flex; align-items:baseline; gap:12px; margin-bottom:4px}
.fs-head .mk{flex:none; font-family:"Newsreader",serif; font-size:.9rem; color:var(--accent); width:28px; height:28px; border-radius:8px;
  border:1px solid var(--accent-deco); background:var(--accent-tint); display:grid; place-items:center; transform:translateY(-2px)}
.fs-head h3{font-size:1.28rem}
.fs-note{color:var(--ink-soft); font-size:.9rem; margin:2px 0 20px 40px}
@media(max-width:560px){.fs-note{margin-left:0}}
.fs-note.warn{color:var(--warn)}

.fgrid{display:grid; gap:15px 18px; grid-template-columns:repeat(2,1fr)}
.fgrid .full{grid-column:1/-1}
@media(max-width:560px){.fgrid{grid-template-columns:1fr} .fgrid .full{grid-column:auto}}

.field{display:flex; flex-direction:column; gap:6px; min-width:0}
.field>label{font-size:.83rem; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:6px}
.field>label .req{color:var(--crit); font-weight:700}
.field>label .opt{color:var(--ink-faint); font-weight:500; font-size:.76rem}
.hint{font-size:.76rem; color:var(--ink-faint)}
.ml{display:block; font-family:"Noto Sans Malayalam","Hanken Grotesk",sans-serif; font-weight:500; color:var(--ink-faint); font-size:.76rem; letter-spacing:0; margin-top:1px}
.fs-head .ml{font-family:"Noto Sans Malayalam",sans-serif; font-weight:500; font-size:.82rem; color:var(--accent); margin-top:3px}
.lock{display:inline-flex; align-items:center; gap:5px; font-size:.72rem; color:var(--accent); font-weight:600}
.lock svg{width:12px; height:12px}

.input,.select,textarea.input{width:100%; font:inherit; font-size:.96rem; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:11px 13px;
  transition:border-color .16s ease, box-shadow .16s ease; -webkit-appearance:none; appearance:none}
textarea.input{resize:vertical; min-height:96px; line-height:1.55}
.input::placeholder,textarea.input::placeholder{color:var(--ink-faint)}
.input:hover,.select:hover{border-color:var(--line-strong)}
.input:focus,.select:focus,textarea.input:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 4px var(--focus)}
.field.invalid .input,.field.invalid .select,.field.invalid textarea.input{border-color:var(--crit); box-shadow:0 0 0 4px var(--crit-tint)}
.field.invalid>label{color:var(--crit)}
.errline{display:none; font-size:.76rem; color:var(--crit); font-weight:600}
.field.invalid .errline{display:block}
.selectwrap{position:relative}
.selectwrap>svg{position:absolute; right:12px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--ink-faint); pointer-events:none}

.pills{display:flex; flex-wrap:wrap; gap:8px}
.pill{position:relative}
.pill input{position:absolute; opacity:0; inset:0; cursor:pointer}
.pill span{display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:99px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink-soft); font-size:.87rem; font-weight:600; cursor:pointer; transition:all .16s cubic-bezier(.23,1,.32,1)}
.pill:hover span{border-color:var(--line-strong); color:var(--ink)}
.pill input:checked + span{background:var(--primary-tint); border-color:var(--primary); color:var(--primary-ink)}
.pill input:checked + span::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--primary)}
.pill input:focus-visible + span{box-shadow:0 0 0 4px var(--focus)}

.checks{display:grid; gap:10px 16px; grid-template-columns:repeat(2,1fr)}
@media(max-width:560px){.checks{grid-template-columns:1fr}}
.check{display:flex; align-items:flex-start; gap:10px; cursor:pointer; font-size:.9rem; color:var(--ink); user-select:none}
.check input{position:absolute; opacity:0; width:0; height:0}
.check .box{flex:none; margin-top:1px; width:19px; height:19px; border-radius:6px; border:1.5px solid var(--line-strong);
  background:var(--surface); display:grid; place-items:center; transition:all .16s cubic-bezier(.23,1,.32,1)}
.check .box svg{width:12px; height:12px; color:#fff; opacity:0; transform:scale(.6); transition:all .16s cubic-bezier(.23,1,.32,1)}
.check input:checked + .box{background:var(--primary); border-color:var(--primary)}
.check input:checked + .box svg{opacity:1; transform:scale(1)}
.check input:focus-visible + .box{box-shadow:0 0 0 4px var(--focus)}
.check small{display:block; color:var(--ink-faint); font-size:.78rem; font-weight:400}

.reveal{display:none}
.reveal.show{display:block; animation:fadeUp .28s cubic-bezier(.23,1,.32,1)}
.reveal.show.fgrid{display:grid}
@keyframes fadeUp{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

/* privacy + consent */
.privacy{background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent-deco); border-radius:var(--r-md);
  padding:18px 20px; display:flex; gap:15px}
.privacy .ic{flex:none; width:34px; height:34px; border-radius:9px; background:var(--accent-tint); color:var(--accent); display:grid; place-items:center}
.privacy .ic svg{width:18px; height:18px}
.privacy h4{margin:0 0 5px; font-family:"Hanken Grotesk",sans-serif; font-size:.92rem; font-weight:700; color:var(--ink)}
.privacy p{font-size:.86rem; color:var(--ink-soft); line-height:1.55}
.consent{margin-top:16px; padding:16px 18px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md)}
.form-actions{display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:26px}
.form-actions .note{font-size:.82rem; color:var(--ink-soft); max-width:36ch}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* members (family form) */
.members{display:flex; flex-direction:column; gap:16px; margin-top:4px}
.member{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-card); padding:18px; position:relative}
.member.entering{animation:memIn .34s cubic-bezier(.23,1,.32,1)}
@keyframes memIn{from{opacity:0; transform:translateY(10px) scale(.985)}to{opacity:1; transform:none}}
.member.leaving{animation:memOut .2s ease-in forwards}
@keyframes memOut{to{opacity:0; transform:translateY(-6px) scale(.985)}}
.member-top{display:flex; align-items:center; gap:14px; margin-bottom:14px}
.member-top .who{flex:1; min-width:0}
.member-top .who .mid{font-family:"IBM Plex Mono",monospace; font-size:.74rem; color:var(--accent); font-weight:500}
.member-top .who .mname{font-family:"Newsreader",serif; font-size:1.1rem; color:var(--ink); margin-top:2px}
.member-top .who .mname.empty{color:var(--ink-faint); font-style:italic}
.delmember{flex:none; width:32px; height:32px; border-radius:9px; border:1px solid var(--line); background:var(--surface); color:var(--ink-faint);
  cursor:pointer; display:grid; place-items:center; transition:all .16s cubic-bezier(.23,1,.32,1)}
.delmember:hover{color:var(--crit); border-color:var(--crit)}
.delmember:active{transform:scale(.92)}
.delmember svg{width:15px; height:15px}
.member .subrow{margin-top:13px; padding-top:13px; border-top:1px dashed var(--line)}
.addmember{display:inline-flex; align-items:center; justify-content:center; gap:9px; width:100%; padding:15px; border-radius:var(--r-md);
  border:1.5px dashed var(--line-strong); background:var(--surface-2); color:var(--primary-ink); font-size:.92rem; font-weight:600;
  cursor:pointer; margin-top:16px; font-family:inherit; transition:all .18s cubic-bezier(.23,1,.32,1)}
.addmember:hover{border-color:var(--primary); background:var(--primary-tint)}
.addmember:active{transform:scale(.992)}
.addmember svg{width:18px; height:18px}
.count-tag{display:inline-flex; align-items:center; gap:7px; font-size:.8rem; color:var(--ink-soft); font-weight:600; background:var(--ground-2); padding:5px 12px; border-radius:99px; margin-left:auto}
.count-tag b{color:var(--ink); font-family:"IBM Plex Mono",monospace; font-weight:500}

/* confirmation */
.confirm{display:none}
.confirm.show{display:block}
.conf-card{max-width:640px; margin:2vh auto 0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-pop); padding:clamp(28px,5vw,44px); text-align:center; animation:confIn .45s cubic-bezier(.23,1,.32,1)}
@keyframes confIn{from{opacity:0; transform:translateY(14px) scale(.98)}to{opacity:1; transform:none}}
.seal{width:74px; height:74px; margin:0 auto; border-radius:50%; background:var(--primary-tint);
  border:1px solid color-mix(in srgb,var(--primary) 40%, transparent); display:grid; place-items:center}
.seal svg{width:34px; height:34px; color:var(--primary)}
.conf-card h2{font-size:1.9rem; margin-top:20px}
.conf-card>p{color:var(--ink-soft); margin-top:10px; max-width:46ch; margin-inline:auto}
.conf-ref{margin-top:22px; display:inline-flex; flex-direction:column; gap:4px; padding:15px 30px; border-radius:var(--r-md); background:var(--ground-2); border:1px dashed var(--line-strong)}
.conf-ref .l{font-size:.72rem; font-weight:700; letter-spacing:.04em; color:var(--ink-faint); text-transform:uppercase}
.conf-ref .v{font-family:"IBM Plex Mono",monospace; font-size:1.5rem; color:var(--ink)}
.flow{margin-top:26px; padding-top:22px; border-top:1px solid var(--line)}
.flow p{font-size:.76rem; color:var(--ink-faint); font-weight:700; letter-spacing:.04em; text-transform:uppercase; margin-bottom:12px}
.flow ol{list-style:none; margin:0; padding:0; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px}
.flow li{display:flex; align-items:center; gap:6px; font-size:.82rem; color:var(--ink-soft)}
.flow li .s{width:8px; height:8px; border-radius:50%; background:var(--line-strong)}
.flow li.on{color:var(--ink); font-weight:600}
.flow li.on .s{background:var(--primary); box-shadow:0 0 0 3px var(--primary-tint)}
.flow li .arr{color:var(--ink-faint)}

/* toast for submit status */
.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px); z-index:80; opacity:0; pointer-events:none;
  background:var(--ink); color:var(--ground); padding:12px 18px; border-radius:var(--r-md); font-size:.9rem; font-weight:600;
  box-shadow:var(--shadow-pop); transition:transform .3s cubic-bezier(.23,1,.32,1), opacity .3s ease; display:flex; align-items:center; gap:9px; max-width:90vw}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast svg{width:17px; height:17px; flex:none}

/* ---------- Footer ---------- */
.footer{background:var(--ground-3); border-top:1px solid var(--line); margin-top:0}
.footer-grid{display:grid; gap:32px; grid-template-columns:1.6fr 1fr 1fr 1.2fr; padding-block:clamp(40px,6vw,64px)}
@media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr}}
.footer .brand{margin-bottom:14px}
.footer p{color:var(--ink-soft); font-size:.9rem; max-width:34ch}
.footer h5{font-family:"Hanken Grotesk",sans-serif; font-size:.78rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 14px}
.footer ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.footer ul a{color:var(--ink-soft); font-size:.9rem; font-weight:500}
.footer ul a:hover{color:var(--ink)}
.footer .contact-line{display:flex; gap:9px; align-items:flex-start; color:var(--ink-soft); font-size:.9rem; margin-bottom:10px}
.footer .contact-line svg{flex:none; width:16px; height:16px; color:var(--accent); margin-top:3px}
.footer-bottom{border-top:1px solid var(--line); padding-block:20px; display:flex; flex-wrap:wrap; gap:10px 20px; align-items:center; color:var(--ink-faint); font-size:.82rem}
.footer-bottom .g{color:var(--accent)}

/* prose (about) */
.prose{max-width:68ch}
.prose p{margin-bottom:18px; color:var(--ink-soft); line-height:1.72}
.prose h2{margin:36px 0 12px}
.prose h3{margin:26px 0 8px; font-size:1.2rem}
.prose .lead{font-size:1.14rem; color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
}