:root{
      --text:#e6edf3;         /* primary text on dark */
      --muted:#b9c0c9;        /* secondary text */
      --bg:#0b0c0f;           /* page background */
      --bg-soft:rgba(12,14,18,.65);
      --card:linear-gradient(180deg, rgba(18,20,26,.52), rgba(10,12,16,.38));
      --border:rgba(255,255,255,.12);
      --ring:rgba(56,189,248,.22);
      --primary:#0ea5e9;      /* brand accent */
      --primary-600:#0284c7;
      --shadow:0 10px 30px rgba(0,0,0,.45);
      --radius:22px;
    }
    *{box-sizing:border-box}

html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text);
  background:var(--bg);
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* Respect OS text-size settings and add optional site-wide scaling */
html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

    /* ===== Background / Ken Burns ===== */
    .hero{
      position:relative;
      min-height:100vh;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:flex-start;
      isolation:isolate;
      padding:56px 0 0 0;
      width:100vw;
    }
    .bg{
      position:fixed;inset:0;z-index:-2;filter:brightness(.85);
      background-position:center; background-size:cover; background-repeat:no-repeat;
      transform:scale(1.08);
      transition: transform 18s ease, opacity .5s ease, background-position 18s ease;
      will-change:transform,opacity,background-image,background-position;
      width:100vw;height:100vh;pointer-events:none;
    }
    #bg{ z-index:-3; opacity:1; }
    #bg2{ z-index:-2; opacity:0; }
    .bg.kb-zoom{transform:scale(1.26)}
    .grain{position:fixed;inset:0;z-index:-1;opacity:.12;mix-blend-mode:overlay;
      background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.6"/></svg>');
      width:100vw;height:100vh;pointer-events:none}
    /* soft top fade for legibility over photography */
    .hero::before{content:"";position:fixed;inset:0 0 45% 0;z-index:-1;pointer-events:none; background:linear-gradient(180deg, rgba(8,10,14,.75), rgba(8,10,14,.35) 60%, transparent)}

    /* ===== Splash (header) ===== */
    .splash{position:absolute;left:50%;top:0;width:100%;max-width:min(880px,92vw);transform:translateX(-50%);
      display:flex;flex-direction:column;align-items:center;justify-content:center;
      height:calc(50vh - 70px); z-index:2; padding:32px 0 24px; text-align:center; color:var(--text);
    }
    .splash .line1{
      font-family:'Playfair Display',serif; font-weight:700;
      font-size:clamp(54px,10vw,108px); letter-spacing:1.2px; margin:0 0 14px;
      text-shadow:0 10px 24px rgba(0,0,0,.45), 0 0 0 2px rgba(0,0,0,.6); /* subtle "rim" */
      line-height:1.06;
    }
    .splash .line1::after{content:"";display:block;margin:16px auto 0;width:64px;height:4px;border-radius:2px;background:#fff;opacity:.85}
    .splash .line2{font-weight:600;font-size:clamp(26px,3.8vw,44px);color:#e5e7eb;margin:0 0 6px;text-shadow:0 6px 18px rgba(0,0,0,.35)}
    .splash .line3{font-weight:400;font-size:clamp(18px,2.6vw,28px);color:#cbd5e1;margin:0;text-shadow:0 6px 18px rgba(0,0,0,.25)}

    /* ===== Card ===== */
    .card{
      width:min(880px,92vw);
      background:var(--card);
      border:1px solid var(--border);
      backdrop-filter:blur(10px);
      border-radius:var(--radius);
      padding:26px 24px 22px;
      box-shadow:var(--shadow);
      margin:calc(50vh - 70px) auto 10px;
      font-size:16px;
    }
    header{display:flex;gap:16px;align-items:center;margin-bottom:10px}
    .brand{display:flex;align-items:center;gap:18px}
    .monogram{width:72px;height:72px;border-radius:16px;display:grid;place-items:center;font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(1.1rem,2.2vw,1.45rem);line-height:1;background:#f1f5f9;color:#0f172a;letter-spacing:.5px;box-shadow:0 8px 22px rgba(0,0,0,.28)}
    h1#title{font-family:'Playfair Display',serif;font-weight:600;font-size:clamp(22px,3.6vw,36px);margin:0;color:var(--text)}
    .sub{font:400 14px/1.5 Inter,system-ui,sans-serif;color:var(--muted);margin:2px 0 18px}

    /* ===== Form ===== */
    form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    .full{grid-column:1/-1}
    label{display:block;font-size:12px;color:#cdd6df;margin:0 0 6px 2px}
    input,select,textarea{width:100%;padding:12px 12px;border-radius:12px;border:1px solid var(--border);
      background:rgba(0,0,0,.30);color:#fff;outline:none;transition:border-color .2s, box-shadow .2s, background .2s}

    /* Keep dark glass bg + white text when browser autofills */
    input, textarea { caret-color:#fff; }
    input:-webkit-autofill,
    textarea:-webkit-autofill,
    select:-webkit-autofill{
      -webkit-text-fill-color:#fff !important;
      transition: background-color 5000s ease-in-out 0s !important;
      box-shadow: 0 0 0 1000px rgba(0,0,0,.30) inset !important;
      -webkit-box-shadow: 0 0 0 1000px rgba(0,0,0,.30) inset !important;
    }
    input:-webkit-autofill:focus,
    textarea:-webkit-autofill:focus,
    select:-webkit-autofill:focus{
      -webkit-text-fill-color:#fff !important;
      box-shadow: 0 0 0 1000px rgba(0,0,0,.30) inset, 0 0 0 4px var(--ring) !important;
      -webkit-box-shadow: 0 0 0 1000px rgba(0,0,0,.30) inset, 0 0 0 4px var(--ring) !important;
    }
    input::placeholder,textarea::placeholder{color:#aeb7c2}
    input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--ring)}
    .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    .tiny{font-size:12px;color:var(--muted)}

    .members{display:flex;flex-direction:column;gap:10px}
    .member{border:1px dashed rgba(255,255,255,.2);border-radius:12px;padding:10px}
    .member .member-row{display:grid;grid-template-columns:1fr 1fr auto auto;gap:10px;align-items:center}
.chk{display:inline-flex;align-items:center;gap:10px;font-size:13px;color:#e5e7eb;white-space:nowrap}
/* Rounded toggle style for checkbox */
.chk input{
  -webkit-appearance:none;
  appearance:none;
  width:42px;height:24px;flex:0 0 42px;cursor:pointer;
  border-radius:999px;border:1px solid var(--border);
  background:rgba(0,0,0,.30); position:relative; outline:none;
  transition:background .2s, border-color .2s, box-shadow .2s;
  box-shadow:inset 0 0 0 0 rgba(0,0,0,0);
}
.chk input::after{
  content:""; position:absolute; top:50%; left:3px; transform:translateY(-50%);
  width:18px;height:18px;border-radius:50%;
  background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.35);
  transition:left .2s ease;
}
.chk input:checked{
  background:var(--primary); border-color:rgba(255,255,255,.22);
  box-shadow:0 0 0 4px var(--ring);
}
.chk input:checked::after{ left: calc(100% - 21px); }
.chk input:focus-visible{ box-shadow:0 0 0 4px var(--ring); }

    .actions{display:flex;gap:12px;align-items:center;margin-top:8px}
    .actions-right{justify-content:flex-end}

.btn{appearance:none;border:1px solid var(--border);background:var(--primary);color:#fff;padding:12px 16px;border-radius:12px;font-weight:600;cursor:pointer;transition:transform .05s ease, filter .15s ease, background .2s}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 4px var(--ring)}
.btn.secondary{background:transparent}
.btn.icon{width:42px;min-width:42px;padding:10px 0;text-align:center}
/* Small text size toggle button */

    /* Submitting state */
    .btn[disabled]{opacity:.6; cursor:not-allowed; filter:grayscale(10%)}
    .btn .spinner{display:inline-block; width:14px; height:14px; margin-left:8px; vertical-align:middle;
      border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:spin .8s linear infinite}
    .btn .spinner[hidden]{display:none !important}
    @keyframes spin{to{transform:rotate(360deg)}}

    /* Inline status text (fades in only on success/error) */
    .status-text {
      font-size:14px;
      color:#e5e7eb;
      min-height:1.2em;
      opacity:0;
      transition:opacity .25s ease;
    }
    .status-text.error {
      color:#fca5a5;
      opacity:1;
    }
    .status-text.success {
      color:#86efac;
      opacity:1;
    }

    /* Keep button width stable as label text changes (Submit ↔ Submitting…) */
    .btn {
      white-space:nowrap;
    }
    .btn .btn-label {
      display:inline-block;
      min-width:12ch;
      text-align:center;
    }

    /* Form label & slider column utilities (refactor inline styles) */
    .field-label-lg{font-size:18px;font-weight:500;color:var(--text);letter-spacing:.1px}
    .slider-col{flex:1;display:flex;flex-direction:column;align-items:stretch}
    /* Slider layout utilities (moved from inline styles) */
    .slider-row{display:flex;align-items:flex-start;gap:12px}
    .emoji{margin-top:10px}
    .scale-grid{position:relative;height:18px;font-size:clamp(10px,2.6vw,12px);color:var(--muted);margin-top:6px}
    .scale-grid span{position:absolute;top:0;white-space:nowrap;line-height:1.1}
    .s0{left:0}
    .s25{left:27%;transform:translateX(-50%);text-align:center}
    .s50{left:50%;transform:translateX(-50%);text-align:center}
    .s75{left:73%;transform:translateX(-50%);text-align:center}
    .s100{right:0}

    /* Range slider (match inputs) */
input[type=range]{appearance:none;-webkit-appearance:none;height:38px;background:transparent}
    input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.08));border:1px solid var(--border)}
    input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.08));border:1px solid var(--border)}
    input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; margin-top:-8px; width:22px;height:22px;border-radius:50%; background:var(--primary); border:1px solid rgba(255,255,255,.22); box-shadow:0 0 0 4px var(--ring)}

    input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%; background:var(--primary); border:1px solid rgba(255,255,255,.22); box-shadow:0 0 0 4px var(--ring)}

    /* Success / Error chips */
    .alert{display:none;margin-top:8px;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:rgba(0,0,0,.30);font-size:14px}
    .alert.success{border-color:rgba(16,185,129,.35)}
    .alert.error{border-color:rgba(239,68,68,.35)}

    /* ===== FAQ (glass + ring parity with inputs) ===== */
    .faq-card{width:min(880px,92vw);margin:0 auto;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);backdrop-filter:blur(10px);padding:26px 24px 16px;position:relative;z-index:1}
    .faq{margin-top:6px}
    .faq h2{font-family:'Playfair Display',serif;font-weight:600;font-size:22px;color:var(--text);letter-spacing:.2px;margin:0 0 10px}
    .faq details{border:1px solid var(--border);background:rgba(0,0,0,.30);border-radius:12px;margin:10px 0;overflow:hidden;transition:border-color .2s, box-shadow .2s}
    .faq summary{font:600 15px Inter,system-ui,sans-serif;color:#e5e7eb;cursor:pointer;padding:14px 16px;display:flex;align-items:center;gap:10px;list-style:none}
    .faq summary::-webkit-details-marker{display:none}
    .faq summary:focus-visible{outline:none;border-radius:12px;box-shadow:0 0 0 4px var(--ring)}
    .faq summary::after{content:"";width:10px;height:10px;border-right:2px solid #cbd5e1;border-bottom:2px solid #cbd5e1;transform:rotate(-45deg);margin-left:auto;transition:transform .2s ease}
    .faq details[open] summary::after{transform:rotate(45deg)}
    .faq details[open]{border-color:var(--primary);box-shadow:0 0 0 4px var(--ring)}
.faq .answer{font:400 14px/1.6 Inter,system-ui,sans-serif;color:#cbd5e1;padding:10px 16px 16px;border-top:1px solid rgba(255,255,255,.12);opacity:.98;transform-origin:top;animation:faqIn .25s ease}
    /* FAQ links: underline only, keep color */
    .faq .answer a{ color: inherit; text-decoration: underline; }
    .faq .answer a:visited{ color: inherit; }
    .faq .answer a:hover, .faq .answer a:focus{ text-decoration: underline; outline: none; }
    @keyframes faqIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

    /* Elder-friendly type sizing: auto on small screens, or when .text-lg is set */
    @media (max-width: 520px){
      body{font-size:17px}
      .tiny{font-size:14px}
      label{font-size:13px}
      input,select,textarea{font-size:16px;padding:14px 14px}
      .btn{font-size:16px}
      .faq summary{font-size:16px}
      .faq .answer{font-size:15px}
    }

    /* ===== Footer ===== */
    footer{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;margin:38px 0 50px;color:#e5e7eb;font-size:13px;text-align:center}

    /* Spacer to lift footer visually (acts like a third-panel offset) */
    .footer-spacer{height:16vh}
    @media (max-width:780px){ .footer-spacer{height:12vh} }

    /* ===== Responsive ===== */
    @media (max-width:780px){
      .hero{padding:24px 0}
      .splash{position:static;transform:none;width:100%;height:auto;margin:10vh auto 20px;padding:18px 10px}
      .card{margin:0 auto 10px}
      form{grid-template-columns:1fr}
      .member .member-row{grid-template-columns:1fr 1fr auto}
      .chk{order:3}
    }

    /* Accessibility niceties */
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
    :focus-visible{outline:none;box-shadow:0 0 0 4px var(--ring)}

    /* Additional mobile tuning for scale-grid/slider labels */
    @media (max-width:520px){
      /* Give labels extra vertical room and allow wrapping at very small widths */
      .scale-grid{height:30px;font-size:clamp(9px,3.2vw,11px)}
      .scale-grid span{white-space:normal;max-width:28%;}
      /* Hide edge emojis to free horizontal space */
      .emoji{display:none}
    }

    /* Respect reduced motion */
    @media (prefers-reduced-motion:reduce){
      .bg{transition:none}
      .bg.kb-zoom{transform:scale(1.06)}
      .faq .answer{animation:none}
    }