:root{
    --navy:#0e2a47; --navy-deep:#081c33; --blue:#1f6fb2; --blue-bright:#2e8fd8;
    --ice:#eef3f8; --ice-2:#e2eaf2; --line:#cfdbe7; --ink:#16283b; --sub:#5a6f84;
    --white:#fff; --ok:#1d7a4f; --radius:14px;
    --shadow:0 10px 30px rgba(14,42,71,.10);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:system-ui,sans-serif;color:var(--ink);background:
    radial-gradient(1200px 500px at 80% -10%, #dce9f5 0%, transparent 60%),
    radial-gradient(900px 420px at -10% 110%, #e6eef6 0%, transparent 55%),
    var(--ice);
    min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:32px 16px}
  .aaa-quote{width:100%;max-width:640px}
  h1,h2,h3,.price,.step-title{font-family:system-ui,sans-serif}

  .masthead{display:flex;align-items:center;gap:12px;margin-bottom:14px}
  .badge{background:var(--navy);color:#fff;font-family:system-ui;font-weight:800;
    letter-spacing:.5px;padding:8px 12px;border-radius:8px;font-size:14px}
  .masthead small{color:var(--sub);font-size:13px;letter-spacing:.2px}

  .card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:var(--shadow);overflow:hidden}
  .promo-ribbon{background:linear-gradient(90deg,#fff3e0,#ffe7c9);color:#8a5200;
    font-family:system-ui;font-weight:700;font-size:13px;letter-spacing:.2px;
    text-align:center;padding:10px 14px;border-bottom:1px solid #ffcf8f}
  @media(max-width:520px){.promo-ribbon{font-size:12px;padding:8px 10px}}
  .progress{height:5px;background:var(--ice-2)}
  .progress b{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--blue-bright));
    width:0%;transition:width .45s cubic-bezier(.2,.8,.2,1)}
  .body{padding:28px}
  @media(max-width:520px){.body{padding:20px}}

  .step{display:none;animation:rise .35s cubic-bezier(.2,.8,.2,1)}
  .step.on{display:block}
  @keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .kicker{font-size:12px;font-weight:600;color:var(--blue);letter-spacing:1.2px;text-transform:uppercase;margin-bottom:6px}
  .step-title{font-size:24px;font-weight:800;color:var(--navy);line-height:1.15;margin-bottom:6px}
  .hint{color:var(--sub);font-size:14px;line-height:1.5;margin-bottom:18px}

  .opts{display:grid;gap:10px}
  .opts.two{grid-template-columns:1fr 1fr}
  @media(max-width:480px){.opts.two{grid-template-columns:1fr}}
  .opt{border:1.5px solid var(--line);border-radius:10px;padding:14px 16px;cursor:pointer;
    background:#fff;text-align:left;font-size:15px;font-weight:500;color:var(--ink);
    transition:border-color .15s, background .15s, transform .12s;display:flex;flex-direction:column;gap:3px;min-height:100%}
  .opt small{color:var(--sub);font-weight:400;font-size:13px}
  .opt:hover{border-color:var(--blue-bright);transform:translateY(-1px)}
  .opt.sel{border-color:var(--blue);background:#f2f8fd;box-shadow:inset 0 0 0 1px var(--blue)}

  .field{margin-bottom:14px}
  .field label{display:block;font-size:13px;font-weight:600;color:var(--navy);margin-bottom:6px}
  .field input,.field select{width:100%;padding:12px 14px;border:1.5px solid var(--line);
    border-radius:10px;font:15px system-ui;color:var(--ink);background:#fff;outline:none;transition:border-color .15s}
  .field input:focus,.field select:focus{border-color:var(--blue)}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .row3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px}
  @media(max-width:480px){.row2{grid-template-columns:1fr}}

  /* Mobile: ad traffic is ~100% phones — the button and the call-me link must be above the fold */
  @media(max-width:520px){
    body{padding:14px 10px}
    .masthead{margin-bottom:8px}
    .badge{font-size:12px;padding:6px 9px;white-space:nowrap}
    .masthead small{font-size:11px}
    .trustchips{gap:6px;margin:-2px 0 8px}
    .trustchips span{font-size:10.5px;padding:4px 8px}
    .chip-insured{display:none}
    .kicker{font-size:10.5px;margin-bottom:4px}
    .step-title{font-size:19px}
    .hint{font-size:13px;margin-bottom:12px}
    .field{margin-bottom:10px}
    .field label{font-size:12px;margin-bottom:4px}
    .field input,.field select{padding:10px 12px;font-size:15px}
    .row3{grid-template-columns:1.5fr .7fr .9fr;gap:8px}
    .nav{margin-top:14px}
  }

  .countguide{display:flex;gap:16px;justify-content:center;align-items:flex-end;background:var(--ice);
    border:1px solid var(--line);border-radius:10px;padding:14px 10px 10px;margin-bottom:14px}
  .cg{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11.5px;color:var(--sub);font-weight:600}
  .cg .win{flex:none}
  .cg .pair{display:flex;gap:4px}

  .slider-wrap{background:var(--ice);border:1px solid var(--line);border-radius:10px;padding:18px;margin-bottom:14px}
  .slider-val{font-family:system-ui;font-weight:800;font-size:28px;color:var(--navy);text-align:center;margin-bottom:8px}
  .slider-val em{font-style:normal;font-size:14px;color:var(--sub);font-weight:500;display:block}
  input[type=range]{width:100%;accent-color:var(--blue)}

  .nav{display:flex;gap:10px;margin-top:22px}
  .btn{font:600 15px system-ui;padding:13px 22px;border-radius:10px;cursor:pointer;border:none;transition:transform .12s, box-shadow .15s}
  .btn.primary{background:var(--navy);color:#fff;flex:1;box-shadow:0 4px 14px rgba(14,42,71,.25)}
  .btn.primary:hover{transform:translateY(-1px);background:var(--navy-deep)}
  .btn.ghost{background:transparent;color:var(--sub);border:1.5px solid var(--line)}
  .btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

  .lookup-note{display:flex;gap:8px;align-items:flex-start;background:#f2f8fd;border:1px solid #cfe4f5;
    border-radius:10px;padding:12px 14px;font-size:13.5px;color:var(--sub);margin-bottom:14px;line-height:1.45}
  .lookup-note b{color:var(--navy)}

  .windiagram{display:flex;gap:14px;align-items:center;background:var(--ice);border:1px solid var(--line);
    border-radius:10px;padding:14px;margin-bottom:16px;font-size:13.5px;color:var(--sub);line-height:1.45}
  .win{flex:0 0 44px;width:44px;height:58px;border:3px solid var(--navy);border-radius:3px;position:relative;background:#dcebf7}
  .cg .win{flex:none;width:44px;height:58px}
  .win::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;background:var(--navy)}
  .win.pic::before{display:none}
  .win.french::before{display:none}
  .win.french::after{content:"";position:absolute;inset:0;
    background:
      linear-gradient(90deg,transparent calc(33% - 1.5px),var(--navy) calc(33% - 1.5px),var(--navy) calc(33% + 1.5px),transparent calc(33% + 1.5px)),
      linear-gradient(90deg,transparent calc(67% - 1.5px),var(--navy) calc(67% - 1.5px),var(--navy) calc(67% + 1.5px),transparent calc(67% + 1.5px)),
      linear-gradient(0deg,transparent calc(33% - 1.5px),var(--navy) calc(33% - 1.5px),var(--navy) calc(33% + 1.5px),transparent calc(33% + 1.5px)),
      linear-gradient(0deg,transparent calc(67% - 1.5px),var(--navy) calc(67% - 1.5px),var(--navy) calc(67% + 1.5px),transparent calc(67% + 1.5px))}

  /* price reveal */
  .reveal{text-align:center}
  .price-tag{margin:10px 0 4px}
  .price{font-size:56px;font-weight:800;color:var(--navy);letter-spacing:-1px}
  .price sup{font-size:24px;font-weight:700;vertical-align:22px}
  .price-sub{color:var(--sub);font-size:14px;margin-bottom:18px}
  .breakdown{text-align:left;border:1px solid var(--line);border-radius:10px;margin:0 0 20px;overflow:hidden}
  .breakdown div{display:flex;justify-content:space-between;padding:10px 14px;font-size:14px;border-bottom:1px solid var(--ice-2)}
  .breakdown div:last-child{border-bottom:none;background:var(--ice);font-weight:600;color:var(--navy)}
  .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:8px}
  @media(max-width:560px){.plans{grid-template-columns:1fr}}
  .plan{border:1.5px solid var(--line);border-radius:12px;padding:16px 12px;cursor:pointer;background:#fff;
    display:flex;flex-direction:column;gap:6px;transition:border-color .15s,transform .12s;position:relative;min-height:100%}
  .plan:hover{transform:translateY(-2px);border-color:var(--blue-bright)}
  .plan.sel{border-color:var(--blue);background:#f2f8fd;box-shadow:inset 0 0 0 1px var(--blue)}
  .plan .name{font:800 15px system-ui;color:var(--navy)}
  .plan .per{font:800 22px system-ui;color:var(--navy)}
  .plan .per s{color:#9db0c2;font-weight:500;font-size:14px;margin-right:5px}
  .plan .save{color:var(--ok);font-size:12.5px;font-weight:600}
  .plan ul{list-style:none;font-size:12px;color:var(--sub);display:grid;gap:3px;margin-top:2px}
  .plan ul li::before{content:"✓ ";color:var(--blue)}
  .plan .tag{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--blue);
    color:#fff;font:700 10.5px system-ui;letter-spacing:.6px;padding:3px 10px;border-radius:20px;text-transform:uppercase;white-space:nowrap}
  .plan-note{font-size:12px;color:var(--sub);text-align:center;margin-bottom:16px}

  .success{text-align:center;padding:16px 0}
  .success .tick{width:64px;height:64px;border-radius:50%;background:var(--ok);color:#fff;font-size:32px;
    display:flex;align-items:center;justify-content:center;margin:0 auto 16px;animation:pop .4s cubic-bezier(.2,.8,.2,1)}
  @keyframes pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}

  .spin{display:inline-block;width:16px;height:16px;border:2.5px solid rgba(255,255,255,.35);
    border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite;vertical-align:-3px;margin-right:8px}
  @keyframes sp{to{transform:rotate(360deg)}}
  .err{color:#b03030;font-size:13px;margin-top:8px;display:none}
  .foot{margin-top:14px;text-align:center;color:var(--sub);font-size:12px}
