/* ================================
       Design tokens (miniCODEX)
       Palette: #161032, #412BA3, #14CFBC, #FFE830, #FAFAFA
       Fonts: Roboto (headings), Open Sans (body)
       ================================ */
    :root{
      --haiti:#161032; --hero:#412BA3; --java:#14CFBC; --sun:#FFE830; --alabaster:#FAFAFA; --ink:#333333;
      --radius:16px; --radius-sm:10px; --shadow:0 10px 30px rgba(0,0,0,.25);
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family:"Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color:var(--alabaster);
      background:
        /* TOP glow — unchanged */
        radial-gradient(1200px 800px at 20% -10%, #5C51A2 0%, rgba(92,81,162,0) 50%),
        var(--haiti);
      background-repeat: no-repeat;
      background-attachment: scroll;
      line-height:1.5;
    }
    .page-glow-bottom{
      height: 420px; /* visual band height at page end */
      background: radial-gradient(900px 520px at 0% 100%, #5C51A2 0px, rgba(92,81,162,0.35) 140px, rgba(92,81,162,0) 420px);
      pointer-events: none;
    }
    h1,h2,h3{font-family:Roboto, Arial, sans-serif; margin:0 0 .5rem}
    a{color:var(--java); text-decoration:none}
    a:hover{text-decoration:underline}

    /* Layout */
    .page{max-width:1100px; margin:0 auto; padding:28px 16px 80px}
    .grid{display:grid; grid-template-columns:1fr; gap:24px}
    @media(min-width:900px){ .grid{grid-template-columns: 1.1fr .9fr} }

    /* Card */
    .card{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15); border-radius:var(--radius); box-shadow:var(--shadow); backdrop-filter: blur(8px);}
    .card.header{padding:20px 22px; display:flex; align-items:center; justify-content:space-between; gap:12px}
    .badge{background:var(--java); color:#042f2b; padding:6px 10px; border-radius:999px; font-weight:700; letter-spacing:.2px; font-size:.8rem}

    /* FORM — appears first in DOM */
    .age{display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 2px}
    .pill{display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.08); padding:10px 12px; border-radius:999px; cursor:pointer; user-select:none; transition:transform .06s ease, box-shadow .2s}
    .pill:hover{transform:translateY(-1px)}
    .pill input{appearance:none; width:18px; height:18px; border-radius:50%; border:2px solid rgba(255,255,255,.6); display:inline-block; position:relative}
    .pill input:checked{border-color:var(--sun); box-shadow:0 0 0 3px rgba(255,232,48,.25) inset}
    .pill span{font-weight:700; font-family:Roboto, Arial, sans-serif}

    .form-card{padding:22px}
    form{display:grid; gap:14px}
    .row{display:grid; gap:14px}
    @media(min-width:700px){ .row{grid-template-columns:1fr 1fr} }
    label{font-weight:600; font-size:.95rem}
    .field{display:flex; flex-direction:column; gap:8px}
    input[type="email"], input[type="tel"], input[type="text"]{
      background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); color:var(--alabaster);
      border-radius:12px; padding:14px 14px; font-size:1rem; outline:none; transition: box-shadow .2s, border-color .2s;
    }
    input::placeholder{color:rgba(250,250,250,.6)}
    input:focus{border-color:var(--java); box-shadow:0 0 0 3px rgba(20,207,188,.25)}
    .hint{font-size:.85rem; color:rgba(250,250,250,.8)}

    .checkbox{display:flex; align-items:flex-start; gap:10px}
    .checkbox input{width:20px;height:20px;margin-top:2px}

    .actions{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
    button{
      border:0; border-radius:12px; padding:14px 18px; font-weight:700; cursor:pointer; font-family:Roboto, Arial, sans-serif;
      background:linear-gradient(90deg, var(--hero), #5C51A2); color:#fff; box-shadow:0 8px 20px rgba(65,43,163,.35);
    }
    button[disabled]{opacity:.6; cursor:not-allowed}
    .btn-secondary{background:transparent; color:var(--sun); border:1px solid rgba(255,255,255,.35)}

    .status{display:none; padding:12px 14px; border-radius:12px; font-weight:600}
    .status.ok{display:block; background:rgba(20,207,188,.14); border:1px solid rgba(20,207,188,.5); color:#c8fff6}
    .status.err{display:block; background:rgba(255,70,70,.14); border:1px solid rgba(255,70,70,.45); color:#ffd0d0}

    /* Hero/info card (optional content) */
    .info-card{
      padding:24px;
      display:grid;
      grid-template-rows:auto auto auto 1fr auto; /* title, chips, bullets, spacer, footer */
      row-gap:12px;
      min-height:0; /* allow content to define height */
    }
    .lead{margin:0; font-size:.95rem; opacity:.95}
    .chips{display:flex; flex-wrap:wrap; gap:8px}
    .chip{display:inline-flex; align-items:center; gap:6px; padding:8px 10px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); font-weight:700; font-size:.85rem}
    .chip .dot{width:8px; height:8px; border-radius:50%; background:var(--sun)}
    .kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:4px}
    .kpi{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:10px 12px}
    .kpi b{display:block; font-size:1rem; font-family:Roboto, Arial, sans-serif}
    .kpi small{opacity:.85}
    .divider{height:1px; background:rgba(255,255,255,.15); margin:6px 0}
    @media(max-width:680px){ .kpis{grid-template-columns:1fr 1fr} }
    .bullets{margin:0; padding-left:18px}
    .tiny{font-size:.85rem; opacity:.9}
    /* Compact steps and requirements lists */
    .steps{counter-reset: step; margin:0; padding-left:0; display:grid; gap:8px}
    .steps li{list-style:none; display:grid; grid-template-columns:32px 1fr; align-items:center; gap:8px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:8px 10px}
    .steps li:before{counter-increment: step; content: counter(step); width:24px; height:24px; display:inline-grid; place-items:center; border-radius:50%; background:var(--sun); color:#042f2b; font-weight:800}
    .req{display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 0; padding:0}
    .req li{list-style:none; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); border-radius:999px; padding:6px 10px; font-weight:600; font-size:.85rem}

    /* A11y helper */
    .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; }