:root{
    /* ---- token system ---- */
    --white:#FBFAFD;
    --white-warm:#F6F3FB;
    --lilac-100:#EFE9F9;
    --lilac-200:#E1D6F5;
    --lilac-300:#CBB9EC;
    --lavender-400:#A691E0;
    --lavender-500:#8A72D6;
    --lavender-600:#7059C4;
    --purple-deep:#2E1F52;
    --purple-ink:#241A42;
    --grey-body:#5D5872;
    --grey-soft:#8A8497;
    --line:#E4DCF3;
    --shadow-lilac: 0 20px 50px -20px rgba(112,89,196,.35);
    --shadow-soft: 0 10px 30px -12px rgba(46,31,82,.14);
    --radius-lg: 26px;
    --radius-md: 18px;
    --radius-sm: 12px;
    --font-display:'Sora', sans-serif;
    --font-body:'Inter', sans-serif;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
  }

  body{
    margin:0;
    font-family:var(--font-body);
    color:var(--grey-body);
    background:var(--white);
    -webkit-font-smoothing:antialiased;
  }

  a{color:inherit; text-decoration:none;}
  button{font-family:inherit;}
  img,svg{display:block; max-width:100%;}

  h1,h2,h3{
    font-family:var(--font-display);
    color:var(--purple-deep);
    margin:0;
    letter-spacing:-0.01em;
  }

  .wrap{max-width:1180px; margin:0 auto; padding:0 32px;}

  /* ---------- ambient halo signature (used across hero / icons / footer) ---------- */
  .halo{
    position:relative;
  }
  .halo::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:radial-gradient(circle, rgba(166,145,224,.25) 0%, rgba(166,145,224,0) 70%);
    pointer-events:none;
  }

  /* ---------- header ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(251,250,253,.86);
    backdrop-filter: blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 0;
  }
  .logo{
    font-family:var(--font-display);
    font-weight:800;
    font-size:22px;
    background:linear-gradient(120deg, var(--lavender-600), var(--lilac-300));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    display:flex; align-items:center; gap:10px;
  }
  .logo-mark{
    width:34px; height:34px; border-radius:11px;
    background:linear-gradient(145deg, var(--lavender-500), var(--lilac-300));
    display:flex; align-items:center; justify-content:center;
    box-shadow: var(--shadow-lilac);
    flex-shrink:0;
  }
  .logo-mark svg{width:18px; height:18px;}
  .logo-mark img{width:100%; height:100%; border-radius:inherit; object-fit:cover;}

  nav.links{
    display:flex; align-items:center; gap:36px;
  }
  nav.links a{
    font-size:14.5px; font-weight:500; color:var(--purple-ink);
    position:relative; padding:6px 2px;
  }
  nav.links a::after{
    content:"";
    position:absolute; left:0; right:0; bottom:-4px; height:2px;
    background:linear-gradient(90deg, var(--lavender-500), var(--lilac-300));
    border-radius:2px;
    transform:scaleX(0); transform-origin:left;
    transition:transform .25s ease;
  }
  nav.links a:hover::after, nav.links a.active::after{transform:scaleX(1);}
  nav.links a.active{color:var(--lavender-600); text-shadow:0 0 18px rgba(138,114,214,.35);}

  .nav-actions{display:flex; align-items:center; gap:12px;}

  .btn{
    font-weight:600; font-size:14.5px; border:none; cursor:pointer;
    border-radius:999px; padding:11px 22px;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .15s ease;
  }
  .btn:active{transform:translateY(1px);}
  .btn-primary{
    background:var(--lavender-500); color:var(--white);
    box-shadow:0 10px 24px -10px rgba(112,89,196,.55);
  }
  .btn-primary:hover{background:var(--lilac-300); color:var(--purple-deep);}
  .btn-outline{
    background:transparent; color:var(--lavender-600);
    border:1.5px solid var(--lilac-300);
  }
  .btn-outline:hover{background:var(--lavender-500); color:var(--white); border-color:var(--lavender-500);}
  .btn-hero{
    background:linear-gradient(120deg, var(--lavender-500), var(--purple-deep));
    color:var(--white);
    padding:15px 30px; font-size:15.5px;
    box-shadow:0 16px 34px -14px rgba(46,31,82,.5);
  }
  .btn-hero:hover{background:linear-gradient(120deg, var(--purple-deep), var(--lavender-600)); box-shadow:0 18px 40px -12px rgba(46,31,82,.6);}
  :focus-visible{outline:2.5px solid var(--lavender-500); outline-offset:3px;}

  .mobile-toggle{display:none; background:none; border:none; cursor:pointer; padding:6px;}

  /* ---------- hero ---------- */
  .hero{
    position:relative;
    padding:76px 0 90px;
    overflow:hidden;
    background:
      radial-gradient(700px 420px at 85% -10%, rgba(166,145,224,.30), transparent 60%),
      radial-gradient(500px 360px at 0% 110%, rgba(203,185,236,.28), transparent 60%),
      var(--white);
  }
  .hero-grid{
    display:grid; grid-template-columns: 1.05fr .95fr; gap:64px; align-items:center;
  }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:12.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
    color:var(--lavender-600);
    background:var(--lilac-100);
    border:1px solid var(--lilac-200);
    padding:7px 14px; border-radius:999px;
    margin-bottom:22px;
  }
  .eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--lavender-500);
    box-shadow:0 0 0 4px rgba(138,114,214,.25);}
  .hero h1{
    font-size:clamp(34px, 4.4vw, 52px);
    font-weight:800;
    line-height:1.1;
    margin-bottom:22px;
  }
  .hero h1 .accent{
    background:linear-gradient(100deg, var(--lavender-600), var(--lavender-400) 60%, var(--lilac-300));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .hero p.sub{
    font-size:17.5px; line-height:1.65; color:var(--grey-body);
    max-width:480px; margin-bottom:32px;
  }
  .hero-ctas{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
  .hero-note{font-size:13.5px; color:var(--grey-soft); display:flex; align-items:center; gap:8px;}
  .hero-note svg{width:16px; height:16px; flex-shrink:0;}

  .trust-row{
    display:flex; gap:26px; margin-top:44px; flex-wrap:wrap;
  }
  .trust-row span{
    font-size:13.5px; font-weight:500; color:var(--purple-ink);
    display:flex; align-items:center; gap:8px;
  }
  .trust-row .pip{width:7px; height:7px; border-radius:50%; background:var(--lavender-500);}

  /* hero illustration: concentric halo + card */
  .hero-visual{position:relative; display:flex; align-items:center; justify-content:center; min-height:420px;}
  .halo-rings{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  }
  .ring{
    position:absolute; border-radius:50%;
    border:1.5px solid rgba(166,145,224,.35);
  }
  .ring1{width:420px; height:420px; animation: breathe 7s ease-in-out infinite;}
  .ring2{width:330px; height:330px; border-color:rgba(203,185,236,.5); animation: breathe 7s ease-in-out infinite .6s;}
  .ring3{width:240px; height:240px; background:radial-gradient(circle, rgba(166,145,224,.22), transparent 70%); border-color:transparent;}
  @keyframes breathe{
    0%,100%{transform:scale(1); opacity:.7;}
    50%{transform:scale(1.045); opacity:1;}
  }

  .hero-card{
    position:relative; z-index:2;
    background:var(--white);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-soft), 0 0 0 1px rgba(228,220,243,.9);
    padding:30px 30px 26px;
    width:100%; max-width:380px;
  }
  .hero-card .tag{
    font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
    color:var(--lavender-600); margin-bottom:8px; display:block;
  }
  .hero-card h3{font-size:19px; margin-bottom:4px;}
  .hero-card p{font-size:13.5px; color:var(--grey-soft); margin:0 0 18px;}
  .field{margin-bottom:14px;}
  .field label{font-size:12.5px; font-weight:600; color:var(--purple-ink); display:block; margin-bottom:6px;}
  .field select, .field input{
    width:100%; padding:11px 13px; border-radius:10px;
    border:1.5px solid var(--line); background:var(--white-warm);
    font-family:inherit; font-size:14px; color:var(--purple-ink);
    appearance:none;
  }
  .field select:focus, .field input:focus{border-color:var(--lavender-500); background:var(--white);}
  .hero-card .btn-primary{width:100%; margin-top:4px; padding:12px;}
  .hero-card .track-link{display:block; text-align:center; font-size:12.5px; margin-top:14px; color:var(--grey-soft);}
  .hero-card .track-link b{color:var(--lavender-600); font-weight:600;}
  .reassure-list{list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:12px;}
  .reassure-list li{
    display:flex; align-items:flex-start; gap:10px;
    font-size:13.5px; line-height:1.5; color:var(--grey-body);
  }
  .reassure-list svg{
    width:16px; height:16px; flex-shrink:0; margin-top:2px;
    color:var(--lavender-600);
  }

  /* ---------- awareness banner ---------- */
  .awareness{
    padding:0 0 88px;
  }
  .awareness-inner{
    position:relative;
    text-align:center;
    max-width:720px;
    margin:0 auto;
    padding:56px 20px 8px;
    isolation:isolate;
  }
  .awareness-inner .eyebrow{
    background:var(--white);
    border-color:var(--lilac-200);
  }
  .awareness-inner h2{
    font-size:clamp(28px, 3.6vw, 42px);
    line-height:1.18;
    margin:20px 0 18px;
  }
  .awareness-inner h2 .accent{
    background:linear-gradient(100deg, var(--lavender-600), var(--lavender-400) 60%, var(--lilac-300));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .awareness-inner > p{
    font-size:16.5px; line-height:1.65; color:var(--grey-body);
    max-width:520px; margin:0 auto 30px;
  }
  .awareness-ctas{
    display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap;
  }
  .awareness-link{
    font-size:14.5px; font-weight:600; color:var(--lavender-600);
    border-bottom:1.5px solid var(--lilac-300);
    padding-bottom:2px;
    transition:border-color .2s ease, color .2s ease;
  }
  .awareness-link:hover{color:var(--purple-deep); border-color:var(--purple-deep);}
  .awareness-halo{
    z-index:-1;
    opacity:.8;
  }
  .awareness-halo .ring1{width:520px; height:520px;}
  .awareness-halo .ring2{width:380px; height:380px;}

  /* ---------- section shell ---------- */
  section{padding:88px 0;}
  .section-head{max-width:640px; margin-bottom:48px;}
  .section-eyebrow{
    font-size:12.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
    color:var(--lavender-600); margin-bottom:12px; display:block;
  }
  .section-head h2{font-size:clamp(26px,3vw,36px); line-height:1.2;}
  .section-head p{font-size:16px; color:var(--grey-body); margin-top:14px; line-height:1.6;}

  /* ---------- know your rights ---------- */
  .rights-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
  }
  .right-card{
    background:linear-gradient(180deg, var(--lilac-100), var(--white-warm));
    border:1px solid var(--lilac-200);
    border-radius:var(--radius-md);
    padding:28px 26px;
  }
  .right-card .law-tag{
    font-size:11.5px; font-weight:700; color:var(--white); background:var(--lavender-500);
    padding:5px 11px; border-radius:999px; display:inline-block; margin-bottom:16px;
  }
  .right-card{transition:box-shadow .25s ease, transform .25s ease; cursor:default;}
  .right-card:hover, .right-card:focus-within{box-shadow:var(--shadow-soft); transform:translateY(-3px); outline:none;}
  .right-card h3{font-size:18px; color:var(--lavender-600); margin-bottom:4px;}
  .right-hint{
    font-size:12.5px; font-weight:600; color:var(--grey-soft);
    display:block; transition:opacity .2s ease, height .2s ease;
  }
  .right-card:hover .right-hint, .right-card:focus-within .right-hint{opacity:0; height:0; overflow:hidden;}
  .right-detail{
    max-height:0; opacity:0; overflow:hidden;
    transition:max-height .35s ease, opacity .3s ease, margin-top .35s ease;
  }
  .right-card:hover .right-detail, .right-card:focus-within .right-detail{
    max-height:260px; opacity:1; margin-top:14px;
  }
  .right-detail p{font-size:14.5px; line-height:1.6; margin:0 0 10px; color:var(--grey-body);}
  .right-detail .right-extra{font-size:13.3px; color:var(--grey-soft); margin-bottom:0;}

  /* ---------- trust grid ---------- */
  .trust-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
  }
  .trust-card{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    padding:26px 22px;
    box-shadow:var(--shadow-soft);
  }
  .icon-halo{
    width:46px; height:46px; border-radius:14px;
    background:var(--lilac-100);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:16px;
    position:relative;
  }
  .icon-halo::after{
    content:""; position:absolute; inset:-6px; border-radius:18px;
    border:1px dashed var(--lilac-200);
  }
  .icon-halo svg{width:22px; height:22px; color:var(--lavender-600);}
  .trust-card h3{font-size:16.5px; margin-bottom:8px;}
  .trust-card p{font-size:13.8px; line-height:1.55; margin:0; color:var(--grey-soft);}

  /* ---------- how it works ---------- */
  .how-wrap{
    background:var(--white-warm);
    border-radius:var(--radius-lg);
    padding:56px;
  }
  .how-flow{display:flex; align-items:flex-start;}
  .how-flow-step{
    display:flex; flex-direction:column; align-items:center; text-align:center;
    flex:0 1 200px; min-width:0; padding:0 6px;
  }
  .how-icon-circle{
    width:64px; height:64px; border-radius:50%;
    background:var(--lilac-100);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:14px;
  }
  .how-icon-circle svg{width:26px; height:26px; color:var(--lavender-600);}
  .how-flow-num{
    font-family:var(--font-display); font-weight:700; font-size:13px;
    color:var(--lavender-600); letter-spacing:.04em; margin-bottom:6px;
  }
  .how-flow-step h3{font-size:16.5px; margin-bottom:8px;}
  .how-flow-step p{font-size:13.8px; line-height:1.55; margin:0; color:var(--grey-body);}
  .how-flow-connector{
    flex:1 1 30px; height:0; align-self:flex-start;
    margin-top:32px;
    border-top:2px dashed var(--lilac-300);
  }

  /* ---------- report section ---------- */
  .report-section{
    background:linear-gradient(180deg, var(--white), var(--lilac-100) 120%);
  }
  .report-box{
    background:var(--white);
    border:1.5px solid var(--lilac-200);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lilac);
    padding:44px;
    display:grid; grid-template-columns:1fr 1fr; gap:44px;
  }
  .report-box h3{font-size:21px; margin-bottom:6px;}
  .report-box .desc{font-size:14.5px; color:var(--grey-soft); margin-bottom:24px;}
  .toggle-row{
    display:flex; background:var(--lilac-100); border-radius:999px; padding:4px; margin-bottom:22px; gap:4px;
  }
  .toggle-row button{
    flex:1; border:none; background:transparent; padding:10px; border-radius:999px;
    font-size:13.5px; font-weight:600; color:var(--grey-soft); cursor:pointer;
    transition:.2s;
  }
  .toggle-row button.active{background:var(--lavender-500); color:var(--white); box-shadow:0 6px 16px -6px rgba(112,89,196,.6);}
  textarea{
    width:100%; padding:13px; border-radius:12px; border:1.5px solid var(--line);
    background:var(--white-warm); font-family:inherit; font-size:14px; color:var(--purple-ink);
    resize:vertical; min-height:96px;
  }
  textarea:focus, .field select:focus{outline:none;}
  .track-box{
    background:var(--lilac-100);
    border-radius:var(--radius-md);
    padding:30px;
    display:flex; flex-direction:column; justify-content:center;
  }
  .track-box h3{font-size:18px; margin-bottom:8px;}
  .track-box p{font-size:14px; color:var(--grey-body); margin-bottom:20px; line-height:1.6;}
  .code-result{
    margin-top:16px; padding:14px 16px; border-radius:12px;
    background:var(--white); border:1.5px dashed var(--lavender-400);
    font-family:var(--font-display); font-weight:700; letter-spacing:.06em;
    color:var(--lavender-600); font-size:15px; display:none;
  }
  .code-result.show{display:block;}
  .code-result span{display:block; margin-top:2px;}

  /* ---------- footer ---------- */
  footer{
    background:linear-gradient(120deg, var(--lavender-600), var(--lilac-300) 120%);
    padding:52px 0 34px;
    color:var(--white);
  }
  .footer-top{
    display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:24px;
    padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,.28);
  }
  .footer-logo{
    font-family:var(--font-display); font-weight:800; font-size:20px; color:var(--white);
    display:flex; align-items:center; gap:10px; margin-bottom:10px;
  }
  .footer-logo .logo-mark{background:rgba(255,255,255,.22); box-shadow:none;}
  .footer-top p{font-size:14px; color:rgba(255,255,255,.85); max-width:280px; margin:0;}
  .footer-links{display:flex; gap:40px; flex-wrap:wrap;}
  .footer-col h4{
    font-size:12.5px; text-transform:uppercase; letter-spacing:.08em;
    color:rgba(255,255,255,.7); margin:0 0 12px; font-weight:700;
  }
  .footer-col a{display:block; font-size:14.5px; color:var(--white); margin-bottom:9px; opacity:.95;}
  .footer-col a:hover{opacity:.7;}
  .footer-bottom{
    display:flex; justify-content:space-between; align-items:center; padding-top:24px; flex-wrap:wrap; gap:12px;
  }
  .footer-bottom .tagline{font-size:13.5px; color:rgba(255,255,255,.85);}
  .footer-bottom .emergency{font-size:12.5px; color:rgba(255,255,255,.75);}

  /* ---------- responsive ---------- */
  @media (max-width: 980px){
    .hero-grid{grid-template-columns:1fr; gap:48px;}
    .hero-visual{order:-1; min-height:340px;}
    .rights-grid{grid-template-columns:1fr 1fr;}
    .trust-grid{grid-template-columns:1fr 1fr;}
    .how-flow{flex-direction:column; align-items:center; gap:32px;}
    .how-flow-connector{display:none;}
    .how-flow-step{flex:0 0 auto; max-width:320px;}
    .how-wrap{padding:40px 28px;}
    .report-box{grid-template-columns:1fr; padding:30px;}
  }
  @media (max-width: 720px){
    nav.links, .nav-actions .btn-outline{display:none;}
    .mobile-toggle{display:block;}
    .wrap{padding:0 20px;}
    .rights-grid{grid-template-columns:1fr;}
    .trust-grid{grid-template-columns:1fr;}
    .hero{padding:52px 0 60px;}
    .footer-top{flex-direction:column;}
  }

  /* ---------- mobile nav drawer ---------- */
  .mobile-nav{
    display:none; flex-direction:column; gap:2px;
    padding:10px 20px 18px; border-top:1px solid var(--line);
    background:var(--white);
  }
  .mobile-nav a{
    padding:12px 4px; font-size:15px; font-weight:600; color:var(--purple-ink);
    border-bottom:1px solid var(--line);
  }
  @media (max-width:720px){
    .mobile-nav:not([hidden]){display:flex;}
  }

  /* ---------- page visibility ---------- */
  .page[hidden]{display:none !important;}

  /* ---------- ways to report cards ---------- */
  .awareness{padding:76px 0 0;}
  .awareness-grid{
    display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:center;
    background:linear-gradient(160deg, var(--lilac-100) 0%, var(--white) 65%);
    border-radius:var(--radius-lg);
    padding:52px;
    position:relative; overflow:hidden;
  }
  .awareness-copy h2{font-size:clamp(28px,3.4vw,40px); line-height:1.16; margin:16px 0 16px;}
  .awareness-copy .eyebrow{background:var(--white); border-color:var(--lilac-200);}
  .awareness-copy > p{font-size:16px; line-height:1.65; max-width:420px; margin:0 0 20px;}
  .ways-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  }
  .way-card{
    background:var(--white);
    border:1px solid var(--lilac-200);
    border-radius:var(--radius-md);
    padding:26px 20px;
    text-align:center;
    box-shadow:var(--shadow-soft);
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .way-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lilac);}
  .way-icon{
    width:52px; height:52px; border-radius:50%;
    background:var(--lilac-100);
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 16px;
    color:var(--lavender-600);
  }
  .way-icon svg{width:24px; height:24px;}
  .way-card h3{font-size:15.5px; margin-bottom:8px;}
  .way-card p{font-size:13.3px; line-height:1.55; margin:0; color:var(--grey-soft);}
  .way-card-accent{
    background:linear-gradient(165deg, var(--lavender-500), var(--purple-deep));
    border-color:transparent;
  }
  .way-card-accent .way-icon{background:rgba(255,255,255,.18); color:var(--white);}
  .way-card-accent h3{color:var(--white);}
  .way-card-accent p{color:rgba(255,255,255,.82);}
  .way-btn{width:100%; margin-top:16px; padding:9px; font-size:13px;}
  
  
  @media (max-width:980px){
    .awareness-grid{grid-template-columns:1fr; padding:36px 24px;}
    .ways-grid{grid-template-columns:1fr;}
  }

  /* ---------- assess yourself page ---------- */
  .assess-hero{padding:72px 0 8px;}
  .quiz-section{padding:40px 0 100px;}
  .quiz-shell{max-width:640px; margin:0 auto;}
  .quiz-progress{margin-bottom:28px;}
  .quiz-progress-track{
    width:100%; height:8px; border-radius:999px; background:var(--lilac-100); overflow:hidden;
  }
  .quiz-progress-fill{
    height:100%; width:20%; border-radius:999px;
    background:linear-gradient(90deg, var(--lavender-500), var(--lilac-300));
    transition:width .35s ease;
  }
  .quiz-progress-label{
    display:block; margin-top:10px; font-size:13px; font-weight:600; color:var(--grey-soft);
  }
  .quiz-card{
    background:var(--white);
    border:1.5px solid var(--lilac-200);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-soft);
    padding:38px;
  }
  .quiz-card h3{font-size:20px; line-height:1.4; margin-bottom:24px;}
  .quiz-options{display:flex; flex-direction:column; gap:12px;}
  .quiz-option{
    text-align:left; width:100%;
    background:var(--white-warm);
    border:1.5px solid var(--line);
    border-radius:12px;
    padding:14px 18px;
    font-family:inherit; font-size:14.5px; font-weight:500; color:var(--purple-ink);
    cursor:pointer;
    transition:border-color .18s ease, background .18s ease, transform .1s ease;
  }
  .quiz-option:hover:not(:disabled){border-color:var(--lavender-400); background:var(--lilac-100);}
  .quiz-option:disabled{cursor:default;}
  .quiz-option.correct{
    border-color:#5D8C6B; background:#EAF4EC; color:#2E5C3A;
  }
  .quiz-option.incorrect{
    border-color:#C9584F; background:#FBEBE9; color:#8C332B;
  }
  .quiz-feedback{
    margin:18px 0 0; font-size:13.8px; line-height:1.55; color:var(--grey-body);
    background:var(--lilac-100); border-radius:10px; padding:14px 16px;
  }
  .quiz-next{margin-top:22px; width:100%; padding:13px;}

  .quiz-result-card{
    background:var(--white);
    border:1.5px solid var(--lilac-200);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lilac);
    padding:48px; text-align:center;
  }
  .result-score{
    display:inline-block; font-family:var(--font-display); font-weight:800;
    font-size:40px; color:var(--lavender-600); margin-bottom:8px;
  }
  .quiz-result-card h3{font-size:22px; margin-bottom:10px;}
  .quiz-result-card > p{font-size:15px; color:var(--grey-body); max-width:440px; margin:0 auto 26px;}
  .result-recap{text-align:left; display:flex; flex-direction:column; gap:10px; margin-bottom:30px;}
  .recap-row{
    display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--grey-body);
    padding:10px 14px; border-radius:10px; background:var(--white-warm);
  }
  .recap-row svg{width:16px; height:16px; flex-shrink:0; margin-top:2px;}
  .recap-row.right svg{color:#5D8C6B;}
  .recap-row.wrong svg{color:#C9584F;}
  .result-ctas{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}

  /* ---------- inbox page ---------- */
  .inbox-hero{padding:72px 0 0;}
  .inbox-unlock{
    display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap;
    background:var(--lilac-100); border:1px solid var(--lilac-200);
    border-radius:var(--radius-md); padding:22px 26px;
  }
  .inbox-hint{font-size:13px; color:var(--grey-soft); margin-left:auto;}
  .link-btn{
    background:none; border:none; padding:0; cursor:pointer;
    color:var(--lavender-600); font-weight:700; font-size:13px; text-decoration:underline;
  }
  .inbox-body{padding:36px 0 100px;}
  .inbox-grid{display:grid; grid-template-columns:320px 1fr; gap:26px; align-items:flex-start;}
  .inbox-filters{display:flex; gap:8px; margin-bottom:14px;}
  .inbox-filters button{
    border:1.5px solid var(--line); background:var(--white); border-radius:999px;
    padding:7px 14px; font-size:12.8px; font-weight:600; color:var(--grey-soft); cursor:pointer;
  }
  .inbox-filters button.active{background:var(--lavender-500); border-color:var(--lavender-500); color:var(--white);}
  .inbox-list{display:flex; flex-direction:column; gap:10px; max-height:560px; overflow-y:auto; padding-right:4px;}
  .inbox-item{
    text-align:left; width:100%; cursor:pointer;
    background:var(--white); border:1.5px solid var(--line); border-radius:14px;
    padding:16px 18px; font-family:inherit;
  }
  .inbox-item:hover{border-color:var(--lavender-400);}
  .inbox-item.selected{border-color:var(--lavender-500); background:var(--lilac-100);}
  .inbox-item-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;}
  .inbox-item-code{font-family:var(--font-display); font-weight:700; font-size:13.5px; color:var(--purple-ink);}
  .status-pill{font-size:10.8px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:3px 9px; border-radius:999px;}
  .status-review{background:#FDF0DA; color:#8A6316;}
  .status-replied{background:#E4EFFB; color:#2A5F9E;}
  .status-resolved{background:#E6F2E8; color:#3D7A4C;}
  .status-received{background:var(--lilac-100); color:var(--lavender-600);}
  .inbox-item-cat{font-size:12.5px; color:var(--grey-soft); margin-bottom:4px;}
  .inbox-item-snippet{font-size:12.8px; color:var(--grey-body); line-height:1.4; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .inbox-empty{
    display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
    background:var(--white-warm); border:1.5px dashed var(--lilac-300); border-radius:var(--radius-lg);
    padding:70px 30px; min-height:420px;
  }
  .inbox-empty svg{width:38px; height:38px; color:var(--lilac-300); margin-bottom:16px;}
  .inbox-empty h3{font-size:17px; margin-bottom:8px;}
  .inbox-empty p{font-size:13.8px; color:var(--grey-soft); max-width:280px; margin:0;}
  .inbox-thread{
    background:var(--white); border:1.5px solid var(--line); border-radius:var(--radius-lg);
    box-shadow:var(--shadow-soft); display:flex; flex-direction:column; min-height:420px;
  }
  .inbox-thread[hidden]{display:none !important;}
  .thread-header{
    display:flex; justify-content:space-between; align-items:center;
    padding:20px 24px; border-bottom:1px solid var(--line);
  }
  .thread-code{font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--purple-ink); margin-right:10px;}
  .thread-cat{font-size:12.8px; color:var(--grey-soft); font-weight:600; margin-right:10px;}
  .thread-name{font-size:12.8px; color:var(--purple-deep); font-weight:600; background:var(--lilac-100); padding:2px 9px; border-radius:20px;}
  .thread-messages{flex:1; padding:22px 24px; display:flex; flex-direction:column; gap:14px; max-height:380px; overflow-y:auto;}
  .msg{max-width:78%; padding:12px 15px; border-radius:14px; font-size:13.8px; line-height:1.5;}
  .msg-time{display:block; font-size:10.8px; margin-top:5px; opacity:.65;}
  .msg-you{align-self:flex-end; background:var(--lavender-500); color:var(--white); border-bottom-right-radius:4px;}
  .msg-team{align-self:flex-start; background:var(--lilac-100); color:var(--purple-ink); border-bottom-left-radius:4px;}
  .thread-reply{display:flex; gap:10px; padding:16px 20px; border-top:1px solid var(--line);}
  .thread-reply textarea{
    flex:1; resize:none; border-radius:12px; border:1.5px solid var(--line);
    padding:11px 13px; font-family:inherit; font-size:13.8px; background:var(--white-warm);
  }
  .thread-reply .btn{align-self:flex-end; padding:11px 20px;}
  @media (max-width:900px){ .inbox-grid{grid-template-columns:1fr;} }

  /* ---------- chat widget ---------- */
  .chat-widget{position:fixed; right:24px; bottom:24px; z-index:200;}
  .chat-toggle{
    width:58px; height:58px; border-radius:50%; border:none; cursor:pointer;
    background:linear-gradient(145deg, var(--lavender-500), var(--purple-deep));
    color:var(--white); display:flex; align-items:center; justify-content:center;
    box-shadow:0 14px 30px -10px rgba(46,31,82,.55);
    position:relative;
  }
  .chat-toggle svg{width:24px; height:24px;}
  .chat-panel{
    position:absolute; bottom:74px; right:0;
    width:340px; max-height:480px;
    background:var(--white); border-radius:var(--radius-lg);
    box-shadow:0 24px 60px -18px rgba(46,31,82,.45), 0 0 0 1px var(--line);
    display:flex; flex-direction:column; overflow:hidden;
  }
  .chat-panel[hidden]{display:none !important;}
  .chat-header{
    padding:16px 18px; background:linear-gradient(120deg, var(--lavender-600), var(--lilac-300));
    color:var(--white);
  }
  .chat-title{display:block; font-family:var(--font-display); font-weight:700; font-size:14.5px;}
  .chat-subtitle{display:block; font-size:11.5px; opacity:.85; margin-top:2px;}
  .chat-body{flex:1; padding:16px; overflow-y:auto; display:flex; flex-direction:column; gap:10px; min-height:180px; max-height:280px;}
  .chat-msg{max-width:84%; padding:10px 13px; border-radius:13px; font-size:13px; line-height:1.5;}
  .chat-msg.bot{align-self:flex-start; background:var(--lilac-100); color:var(--purple-ink); border-bottom-left-radius:4px;}
  .chat-msg.user{align-self:flex-end; background:var(--lavender-500); color:var(--white); border-bottom-right-radius:4px;}
  .chat-quick{display:flex; flex-wrap:wrap; gap:6px; padding:0 14px 10px;}
  .chat-quick button{
    border:1px solid var(--lilac-300); background:var(--white); color:var(--lavender-600);
    border-radius:999px; font-size:11.5px; font-weight:600; padding:6px 11px; cursor:pointer;
  }
  .chat-quick button:hover{background:var(--lilac-100);}
  .chat-input-row{display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--line);}
  .chat-input-row input{
    flex:1; border:1.5px solid var(--line); border-radius:999px; padding:10px 15px;
    font-family:inherit; font-size:13px; background:var(--white-warm);
  }
  .chat-input-row input:focus{outline:none; border-color:var(--lavender-500);}
  .chat-input-row button{
    width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
    background:var(--lavender-500); color:var(--white); display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .chat-input-row button svg{width:16px; height:16px;}
  @media (max-width:480px){
    .chat-panel{width:calc(100vw - 32px); right:-8px;}
  }