:root{
      --bg:#09090b;
      --line:rgba(255,255,255,.11);
      --text:#ffffff;
      --muted:#b9b4bb;

      --red:#c8102e;
      --red2:#760016;

      --gold:#e8c47d;
      --gold2:#b98b3f;

      --shadow:0 20px 60px rgba(0,0,0,.42);
      --radius:26px;
    }

    *{
      box-sizing:border-box;
    }

    html{
      scroll-behavior:smooth;
    }

    body{
      margin:0;

      font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Inter,
        sans-serif;

      color:var(--text);

      background:
        radial-gradient(
          circle at 15% 0%,
          rgba(200,16,46,.28),
          transparent 32%
        ),
        radial-gradient(
          circle at 90% 5%,
          rgba(232,196,125,.12),
          transparent 28%
        ),
        linear-gradient(
          180deg,
          #08080a 0%,
          #111014 48%,
          #08080a 100%
        );

      min-height:100vh;
      overflow-x:hidden;
    }

    body::before{
      content:"";

      position:fixed;
      inset:0;

      z-index:-1;
      pointer-events:none;

      background-image:
        linear-gradient(
          rgba(255,255,255,.018) 1px,
          transparent 1px
        ),
        linear-gradient(
          90deg,
          rgba(255,255,255,.018) 1px,
          transparent 1px
        );

      background-size:44px 44px;
    }


    /* =====================================================
       PAGE
    ===================================================== */

    .page{
      width:min(1180px,100%);
      margin:auto;

      padding:
        16px
        16px
        100px;
    }


    /* =====================================================
       STICKY TOOLBAR
    ===================================================== */

    .topbar{
      position:relative;

      z-index:100;

      display:flex;
      align-items:center;
      justify-content:space-between;

      gap:12px;

      padding:10px 12px;

      border-radius:999px;

      border:
        1px solid var(--line);

      background:
        rgba(12,12,14,.88);

      backdrop-filter:
        blur(24px);

      -webkit-backdrop-filter:
        blur(24px);

      box-shadow:
        0 12px 35px rgba(0,0,0,.35);

      margin-bottom:16px;
    }

    .brand{
  display:flex;
  align-items:center;
  justify-content:center;

  flex:1;
  min-width:0;

  gap:10px;

  font-weight:900;
  font-size:17px;
}

     .topbar-agent{
  position:absolute;
  left:50%;
  transform:translateX(-50%);

  width:min(600px, calc(100% - 210px));
  text-align:center;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;

  font-weight:900;
  font-size:17px;
}

    .brand-icon{
      width:38px;
      height:38px;

      border-radius:12px;

      display:grid;
      place-items:center;

      background:
        linear-gradient(
          135deg,
          var(--red),
          var(--red2)
        );

      box-shadow:
        0 8px 25px rgba(200,16,46,.30);
    }

    .view-select{
      flex-shrink:0;
      width:auto;

      min-width:155px;
      min-height:43px;

      padding:
        0 38px 0 15px;

      border-radius:999px;

      color:#f5dfab;

      font-size:14px;
      font-weight:900;

      background:#171719;

      border:
        1px solid rgba(232,196,125,.30);

      outline:none;
    }


    /* =====================================================
       HERO — SCROLLS NORMALLY
    ===================================================== */

    .hero{
  text-align:center;
  padding:34px 20px 22px;

  background:
    radial-gradient(circle at 15% 0%,rgba(200,16,46,.28),transparent 32%),
    radial-gradient(circle at 90% 5%,rgba(232,196,125,.12),transparent 28%),
    linear-gradient(180deg,#08080a 0%,#111014 100%);

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

    .eyebrow{
      position:relative;

      width:min(720px,92%);

      margin:
        0 auto 13px;

      padding:0 24px;

      display:flex;
      align-items:center;
      justify-content:center;

      color:var(--gold);

      font-size:
        clamp(16px,1.8vw,21px);

      font-weight:950;

      letter-spacing:.07em;

      text-transform:uppercase;
    }

    .eyebrow::before{
  content:'✦';
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  margin-right:0;
  flex:none;
}

    .eyebrow-text{
  flex:1;
  display:block;
  text-align:center;

  white-space:normal;
  overflow-wrap:anywhere;
  word-break:normal;

  line-height:1.25;
  padding:0 12px;
}

    .hero h1{
      margin:0;

      white-space:nowrap;

      font-size:
        clamp(52px,7.5vw,86px);

      line-height:.94;

      letter-spacing:-.055em;

      background:
        linear-gradient(
          180deg,
          #ffffff 0%,
          #f9e8c7 42%,
          #d4af67 100%
        );

      -webkit-background-clip:text;
      background-clip:text;

      color:transparent;
    }

    .hero p{
      max-width:720px;

      margin:
        15px auto 0;

      color:var(--muted);

      font-size:
        clamp(14px,1.5vw,18px);

      line-height:1.5;
    }


    /* =====================================================
       PROFILE
    ===================================================== */

    .profile-card{
      border:
        1px solid var(--line);

      background:
        linear-gradient(
          145deg,
          rgba(255,255,255,.08),
          rgba(255,255,255,.035)
        );

      border-radius:
        var(--radius);

      padding:19px;

      box-shadow:
        var(--shadow);

      margin:
        8px 0 14px;
    }

    .section-title{
      margin:
        0 0 5px;

      font-size:23px;
      font-weight:950;

      letter-spacing:-.03em;
    }

    .section-sub{
      color:var(--muted);

      font-size:14px;

      margin-bottom:16px;
    }

    .selector-grid{
      display:grid;

      grid-template-columns:
        repeat(3,1fr);

      gap:11px;
    }

    .field label{
      display:block;

      margin:
        0 0 8px 3px;

      color:#f1edf2;

      font-size:14px;
      font-weight:950;

      letter-spacing:.045em;
    }

    select,
    input{
      width:100%;

      min-height:60px;

      padding:
        0 17px;

      border-radius:17px;

      border:
        1px solid var(--line);

      color:white;

      background:
        rgba(0,0,0,.30);

      font-size:21px;
      font-weight:850;

      outline:none;
    }

    select:focus,
    input:focus{
      border-color:
        rgba(232,196,125,.68);

      box-shadow:
        0 0 0 4px
        rgba(232,196,125,.07);
    }

    option{
      color:black;
    }


    /* =====================================================
       PROFILE SUMMARY
    ===================================================== */

    .profile-summary{
      min-height:78px;

      display:flex;
      align-items:center;
      justify-content:center;

      text-align:center;

      padding:
        12px 20px;

      margin:
        12px 0 22px;

      border-radius:21px;

      border:
        1px solid rgba(232,196,125,.25);

      background:
        linear-gradient(
          120deg,
          rgba(232,196,125,.15),
          rgba(255,255,255,.035)
        );

      color:#f1d68f;

      font-size:
        clamp(23px,3.3vw,38px);

      font-weight:950;

      letter-spacing:.03em;

      line-height:1.1;

      text-shadow:
        0 5px 22px rgba(232,196,125,.12);
    }


    /* =====================================================
       PLAN CONTROLS
    ===================================================== */

    .controls-wrap{
      display:flex;

      justify-content:space-between;
      align-items:center;

      gap:12px;

      flex-wrap:wrap;

      margin:
        18px 0 14px;
    }

    .controls-right{
      display:flex;

      gap:9px;

      flex-wrap:wrap;
      align-items:center;
    }

    .pill-tabs{
      display:flex;
      flex-wrap:wrap;

      padding:4px;

      border-radius:999px;

      border:
        1px solid var(--line);

      background:
        rgba(255,255,255,.05);
    }

    .pill-btn{
      border:0;

      cursor:pointer;

      color:var(--muted);

      background:transparent;

      padding:
        9px 15px;

      border-radius:999px;

      font-size:13px;
      font-weight:950;
    }

    .pill-btn.active{
      color:#241807;

      background:
        linear-gradient(
          135deg,
          #f0d28d,
          #bd8d3f
        );
    }


    /* =====================================================
       PLAN CARDS
    ===================================================== */

    .plans-grid{
      display:grid;

      grid-template-columns:
        repeat(2,minmax(0,1fr));

      gap:17px;
    }

    .plan-card{
      position:relative;

      overflow:hidden;

      border-radius:30px;

      padding:23px;

      border:
        1px solid var(--line);

      box-shadow:
        var(--shadow);

      transition:
        transform .25s ease;
    }

    .plan-card:hover{
      transform:
        translateY(-5px);
    }

    .plan-card.silver{
      background:
        radial-gradient(
          circle at 100% 0%,
          rgba(255,255,255,.22),
          transparent 34%
        ),
        linear-gradient(
          145deg,
          #45464b,
          #17181b 72%
        );
    }

    .plan-card.platinum{
      background:
        radial-gradient(
          circle at 100% 0%,
          rgba(255,115,135,.30),
          transparent 38%
        ),
        linear-gradient(
          145deg,
          #b40028,
          #46000f 72%
        );
    }

    .plan-card.default{
      background:
        radial-gradient(
          circle at 100% 0%,
          rgba(232,196,125,.17),
          transparent 34%
        ),
        linear-gradient(
          145deg,
          #30271e,
          #151515 72%
        );
    }

    .plan-name{
      font-size:14px;

      font-weight:950;

      letter-spacing:.16em;

      text-transform:uppercase;

      opacity:.86;
    }

    .coverage{
      margin:
        12px 0 5px;

      font-size:
        clamp(48px,5.6vw,68px);

      font-weight:950;

      line-height:.95;

      letter-spacing:-.055em;
    }

    .coverage-caption{
      font-size:15px;
      font-weight:800;

      color:
        rgba(255,255,255,.75);
    }


    /* =====================================================
       PRICE
    ===================================================== */

    .price-box{
      margin-top:22px;

      padding:
        17px 18px;

      border-radius:21px;

      border:
        1px solid rgba(255,255,255,.11);

      background:
        rgba(0,0,0,.22);
    }

    .price-label{
      color:
        rgba(255,255,255,.74);

      font-size:13px;

      font-weight:950;

      letter-spacing:.04em;
    }

    .price-row{
      display:flex;

      align-items:baseline;

      flex-wrap:wrap;

      gap:
        9px;

      margin-top:7px;
    }

    .price{
      color:#f5d995;

      font-size:
        clamp(40px,4.8vw,56px);

      font-weight:950;

      letter-spacing:-.045em;

      line-height:1;
    }

    .price-unit{
      color:#f5d995;

      font-size:
        clamp(17px,1.7vw,22px);

      font-weight:900;

      white-space:nowrap;

      opacity:.95;
    }

    .placeholder-note{
      display:inline-block;

      margin-top:10px;

      padding:
        6px 10px;

      border-radius:999px;

      background:
        rgba(255,255,255,.07);

      border:
        1px solid rgba(255,255,255,.08);

      color:#ded8df;

      font-size:10px;
      font-weight:850;
    }


    /* =====================================================
       PLAN BENEFITS
    ===================================================== */

    .benefit-preview{
      display:grid;

      gap:0;

      margin-top:18px;
    }

    .mini-benefit{
      display:grid;

      grid-template-columns:
        minmax(0,1fr) auto;

      gap:14px;

      align-items:center;

      padding:
        12px 0;

      border-bottom:
        1px solid rgba(255,255,255,.09);
    }

    .mini-benefit:last-child{
      border-bottom:none;
    }

    .mini-benefit span{
      color:
        rgba(255,255,255,.88);

      font-size:
        clamp(15px,1.45vw,18px);

      font-weight:800;

      line-height:1.25;
    }

    .mini-benefit strong{
      text-align:right;

      color:white;

      font-size:
        clamp(16px,1.55vw,20px);

      font-weight:950;

      white-space:nowrap;
    }


    /* =====================================================
       UPGRADE
    ===================================================== */

    .upgrade-card{
      display:grid;

      grid-template-columns:
        auto 1fr auto;

      align-items:center;

      gap:15px;

      padding:
        17px 19px;

      margin:
        19px 0 25px;

      border-radius:22px;

      border:
        1px solid rgba(232,196,125,.26);

      background:
        linear-gradient(
          130deg,
          rgba(232,196,125,.14),
          rgba(255,255,255,.035)
        );
    }

    .upgrade-icon{
      width:46px;
      height:46px;

      display:grid;
      place-items:center;

      border-radius:14px;

      color:#1b1304;

      background:
        linear-gradient(
          135deg,
          #f2d895,
          #bd8c3b
        );

      font-size:20px;
      font-weight:950;
    }

    .upgrade-title{
      font-size:17px;
      font-weight:950;
    }

    .upgrade-sub{
      margin-top:3px;

      color:var(--muted);

      font-size:13px;
      font-weight:650;
    }

    .upgrade-amount{
      text-align:right;

      color:var(--gold);

      font-size:
        clamp(23px,2.3vw,30px);

      font-weight:950;

      white-space:nowrap;
    }


    /* =====================================================
       COMPARISON
    ===================================================== */

    .comparison-section{
      margin-top:27px;
    }

    .table-wrap{
      overflow-x:auto;

      border-radius:24px;

      border:
        1px solid var(--line);

      background:
        rgba(255,255,255,.035);
    }

    .comparison-table{
      width:100%;

      min-width:820px;
      table-layout:fixed;

      border-collapse:collapse;
      font-size:18px;
    }

    .comparison-table th,
    .comparison-table td{
      padding:
        20px 22px;

      border-bottom:
        1px solid rgba(255,255,255,.08);
    }

    .comparison-table th{
      color:#f4dda6;

      font-size:
        clamp(21px,2vw,26px);

      font-weight:950;

      background:
        rgba(255,255,255,.04);
    }

    .comparison-table td{
      color:#f0edf1;

      font-size:
        clamp(22px,2.15vw,28px);

      font-weight:850;
    }

    .comparison-table td:first-child,
    .comparison-table th:first-child{
      text-align:left;
    }

    .comparison-table td:first-child,
    .comparison-table th:first-child{
      width:52%;
    }

    .comparison-table td:not(:first-child),
    .comparison-table th:not(:first-child){
      width:24%;
    }

    .comparison-table td:not(:first-child),
    .comparison-table th:not(:first-child){
      text-align:center;

      font-weight:950;
    }

    .comparison-table tr:last-child td{
      border-bottom:none;
    }

    .plan-header-coverage{
      display:block;

      margin-top:4px;

      color:#d5b86d;

      font-size:
        clamp(13px,1.25vw,16px);

      font-weight:950;
    }

    .special-note{
      width:100%;
      margin-top:11px;

      padding:
        18px 22px;

      border-radius:17px;

      border:
        1px solid rgba(232,196,125,.16);

      background:
        rgba(232,196,125,.08);

      color:#ecd9a9;

      font-size:
        clamp(22px,2.15vw,28px);

      font-weight:850;

      line-height:1.45;
    }


    /* =====================================================
       TOOLS
    ===================================================== */

    .tools-grid{
      display:grid;

      grid-template-columns:
        1fr 1fr;

      gap:15px;

      margin-top:28px;
    }

    .tool-card{
      border:
        1px solid var(--line);

      border-radius:25px;

      padding:21px;

      background:
        rgba(255,255,255,.035);
    }

    .tool-title{
      font-size:20px;
      font-weight:950;

      margin-bottom:5px;
    }

    .tool-desc{
      margin-bottom:14px;

      color:var(--muted);

      font-size:14px;

      line-height:1.5;
    }


    /* =====================================================
       BUDGET MODE
    ===================================================== */

    .budget-card{
      min-height:310px;

      display:flex;

      flex-direction:column;

      justify-content:center;

      transition:
        .25s ease;
    }

    .budget-card:not(.has-budget){
      grid-column:1 / -1;
      width:100%;
    }

    .budget-card.has-budget{
      grid-column:1 / -1;
      width:100%;
      justify-content:center;
    }

    .budget-head{
      text-align:center;
    }

    .budget-card.has-budget .budget-head{
      text-align:center;
    }

    .budget-input-wrap{
      width:min(430px,100%);

      margin:
        8px auto 0;
    }

    .budget-card.has-budget .budget-input-wrap{
      width:min(430px,100%);
      margin:8px auto 0;
    }

    .budget-card.has-budget .budget-result{
      width:min(430px,100%);
      margin-left:auto;
      margin-right:auto;
    }

    .budget-result{
      display:none;

      margin-top:14px;

      border-radius:17px;

      padding:15px;

      background:
        rgba(232,196,125,.09);

      border:
        1px solid rgba(232,196,125,.18);

      color:#ead9b4;

      font-size:15px;

      font-weight:700;

      line-height:1.5;
    }

    .budget-card.has-budget
    .budget-result{
      display:block;
    }

    .budget-empty-hint{
      margin-top:12px;

      text-align:center;

      color:
        rgba(255,255,255,.48);

      font-size:13px;
    }

    .budget-card.has-budget
    .budget-empty-hint{
      display:none;
    }


    /* =====================================================
       AGENT EDIT
    ===================================================== */

    .agent-grid{
      display:grid;

      grid-template-columns:
        1fr 1fr;

      gap:10px;
    }

    .agent-grid .full{
      grid-column:
        1 / -1;
    }


    /* =====================================================
       PRESENTED BY
    ===================================================== */

    .presented-card{
      margin-top:18px;

      padding:
        27px 22px;

      text-align:center;

      border-radius:26px;

      border:
        1px solid rgba(232,196,125,.24);

      background:
        radial-gradient(
          circle at 50% 0%,
          rgba(232,196,125,.12),
          transparent 45%
        ),
        rgba(255,255,255,.035);
    }

    .presented-label{
      color:var(--gold);

      font-size:13px;
      font-weight:950;

      letter-spacing:.14em;

      text-transform:uppercase;
    }

    .presented-name{
      margin-top:10px;

      font-size:
        clamp(30px,3.5vw,44px);

      font-weight:950;

      letter-spacing:-.035em;
    }

    .presented-phone{
      margin-top:7px;

      color:#f1edf2;

      font-size:
        clamp(20px,2vw,27px);

      font-weight:900;
    }

    .presented-cta{
      width:min(560px,100%);

      margin:
        18px auto 0;
    }


    /* =====================================================
       BUTTONS
    ===================================================== */

    .btn{
      width:100%;

      min-height:54px;

      border:0;

      border-radius:16px;

      cursor:pointer;

      font-size:15px;
      font-weight:950;
    }

    .btn-primary{
      color:white;

      background:
        linear-gradient(
          135deg,
          #d31336,
          #850019
        );

      box-shadow:
        0 10px 30px
        rgba(200,16,46,.24);
    }

    .btn-gold{
      color:#241807;

      background:
        linear-gradient(
          135deg,
          #f0d38f,
          #bd8d3f
        );
    }

    .btn-secondary{
      color:white;

      border:
        1px solid var(--line);

      background:
        rgba(255,255,255,.06);
    }


    /* =====================================================
       SHARE
    ===================================================== */

    .share-card{
      margin-top:15px;
    }

    .action-grid{
      display:grid;

      grid-template-columns:
        1fr 1fr;

      gap:11px;

      margin-top:14px;
    }


    /* =====================================================
       FOOTER
    ===================================================== */

    .footer{
      margin-top:40px;

      text-align:center;

      color:#777279;

      font-size:10px;

      line-height:1.7;
    }


    /* =====================================================
       CLIENT MODE
    ===================================================== */

    .client-mode
    .agent-edit-card{
      display:none !important;
    }

    .client-mode
    .prototype-only{
      display:none !important;
    }


    /* =====================================================
       TOAST
    ===================================================== */

    .toast{
      position:fixed;

      left:50%;
      bottom:24px;

      z-index:1000;

      opacity:0;

      pointer-events:none;

      transform:
        translate(-50%,30px);

      padding:
        12px 18px;

      border-radius:999px;

      color:#1a1204;

      background:
        linear-gradient(
          135deg,
          #f0d28d,
          #c19447
        );

      font-size:13px;
      font-weight:950;

      box-shadow:
        0 15px 40px rgba(0,0,0,.38);

      transition:.25s;
    }

    .toast.show{
      opacity:1;

      transform:
        translate(-50%,0);
    }


    /* =====================================================
       LOADING
    ===================================================== */

    .loading{
      min-height:70vh;

      display:grid;
      place-items:center;

      text-align:center;
    }

    .loader-ring{
      width:44px;
      height:44px;

      margin:
        0 auto 15px;

      border:
        3px solid rgba(255,255,255,.12);

      border-top-color:
        var(--gold);

      border-radius:50%;

      animation:
        spin .8s linear infinite;
    }

    @keyframes spin{
      to{
        transform:
          rotate(360deg);
      }
    }


    /* =====================================================
       RESPONSIVE
    ===================================================== */

    @media(max-width:780px){

      .selector-grid,
      .plans-grid,
      .tools-grid{
        grid-template-columns:1fr;
      }

      .hero{
        padding-left:8px;
        padding-right:8px;
      }

      .eyebrow{
        width:95%;
      }

      .upgrade-card{
        grid-template-columns:
          auto 1fr;
      }

      .upgrade-amount{
        grid-column:
          1 / -1;

        text-align:left;

        padding-left:61px;
      }

      .budget-card{
        min-height:250px;
      }
    }

    @media(max-width:560px){

      .page{
        padding-left:12px;
        padding-right:12px;
      }

      .brand{
        font-size:14px;
      }

      .view-select{
        min-width:128px;

        font-size:12px;
      }

      .hero h1{
        white-space:normal;

        font-size:45px;
      }

      .eyebrow{
        font-size:10px;
      }

      .selector-grid{
        gap:9px;
      }

      select,
      input{
        min-height:56px;

        font-size:18px;
      }

      .profile-summary{
        min-height:66px;

        font-size:22px;
      }

      .agent-grid,
      .action-grid{
        grid-template-columns:1fr;
      }

      .mini-benefit{
        grid-template-columns:
          1fr;
      }

      .mini-benefit strong{
        text-align:left;
      }
    }