/* Fallbacks in case your global vars are not set here */
    :root{
      --bg: #F6F7FB;
      --ink: #0D1321;
      --muted: #6B7280;
      --paper: #FFFFFF;
      --brand: #0B5F82;
      --cta: #FF7A00;
      --border: #E8EEF5;
      --radius: 20px;
    }

    *{ box-sizing: border-box }
    html,body{ height:100% }
    body{
      margin:0; background:var(--bg); color:var(--ink);
      font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      line-height:1.45;
    }
    a{ color:inherit; text-decoration:none }
    img{ display:block; max-width:100%; height:auto }

    .wrap{ max-width:1120px; margin:0 auto; padding:18px 16px 48px }

    /* Hero */
    .hero{
      margin:8px 0 20px; text-align:center; padding:24px 12px;
      border-radius:16px; background: radial-gradient(120% 100% at 50% 0%, #EDF7FF 0%, rgba(255,255,255,0) 70%);
    }
    .hero h1{ margin:0 0 8px; font-weight:900; font-size:clamp(28px,4vw,44px); letter-spacing:.2px }
    .hero p.sub{ margin:6px auto 0; max-width:880px; color:var(--muted); font-size:clamp(15px,1.8vw,18px) }

    /* Three-tile band */
    .pillars{ margin:26px 0 8px }
    .grid{ display:grid; grid-template-columns:1fr; gap:14px }
    @media (min-width:900px){ .grid{ grid-template-columns:repeat(3,1fr) } }

    .card{
      background:var(--paper); border:1px solid var(--border); border-radius:var(--radius);
      box-shadow:0 8px 30px rgba(0,0,0,.08); overflow:hidden; transition:transform 140ms ease, box-shadow 140ms ease;
    }
    .card:hover{ transform:translateY(-4px); box-shadow:0 14px 48px rgba(0,0,0,.12) }
    .media{ display:grid; place-items:center; padding:12px; aspect-ratio:16/10; background:#fff }
    @media (max-width:520px){ .media{ aspect-ratio:5/4 } }
    .sticker{ width:min(420px,76%); padding:10px; border-radius:18px; background:#fff; border:3px solid #fff;
              filter:drop-shadow(0 10px 26px rgba(0,0,0,.10)) }

    .body{ border-top:1px solid var(--border); padding:14px 16px 18px; display:grid; gap:6px }
    .body h3{ margin:0; font-size:clamp(18px,2vw,22px); font-weight:900 }
    .body p{ margin:0; color:var(--muted); font-size:clamp(14px,1.6vw,16px) }
    .link{ margin-top:6px; font-weight:800; font-size:14px; color:var(--brand); text-decoration:underline }

    /* Scroll affordance */
    .scroll-cue{ margin:18px 0 0; text-align:center; color:var(--muted); font-size:14px }
    .chev{ display:inline-block; margin-top:4px; font-size:20px; animation:bob 1.8s ease-in-out infinite }
    @keyframes bob{
      0%,100%{ transform:translateY(0); opacity:.7 }
      50%{ transform:translateY(6px); opacity:1 }
    }

    /* Explainer band that follows */
    .explain{
      margin:28px 0 12px; background:#fff; border:1px solid var(--border); border-radius:var(--radius);
      padding:18px; display:grid; gap:10px
    }
    .explain h2{ margin:0; font-size:clamp(20px,2.4vw,26px) }
    .bullets{ display:grid; gap:6px; color:var(--muted) }
    .outcomes{ display:flex; flex-wrap:wrap; gap:10px; margin-top:2px; font-size:14px }
    .badge{
      background:var(--paper); border:1px solid var(--border); border-radius:999px; padding:6px 10px;
      box-shadow:0 1px 0 rgba(0,0,0,.03)
    }