:root{
      --bg:#f7f7f5;
      --panel:#ffffff;
      --panel-2:#fbfbfa;
      --text:#171717;
      --muted:#6a6a6a;
      --line:#d9d9d3;
      --line-strong:#bcbcb5;
      --accent:#2b323d;
      --brand-dark:#2b323d;
      --brand-dark-soft:#eef1f4;
      --brand-red:#e80d0d;
      --brand-red-soft:#fff1f1;
      --green:#31b36b;
      --green-soft:#e9f8ef;
      --shadow:0 8px 28px rgba(20,27,36,.06);
      --transition:240ms cubic-bezier(.2,.8,.2,1);
    }

    *{box-sizing:border-box}
    html{
      scroll-behavior:smooth;
      overflow-x:hidden;
    }
    body{
      margin:0;
      font-family:Lato, Raleway, Inter, Arial, sans-serif;
      font-weight:300;
      color:var(--text);
      background:linear-gradient(180deg,#fafaf8 0%, #f2f2ef 100%);
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      overflow-x:hidden;
    }

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

    .topbar{
      position:sticky;
      top:0;
      z-index:40;
      background:rgba(247,247,245,.96);
      backdrop-filter:blur(10px);
      border-bottom:1px solid var(--line);
      box-shadow:0 10px 24px rgba(20,27,36,.04);
      margin:0;
      padding:12px 16px 14px;
    }

    .topbar-inner{
      max-width:1260px;
      margin:0 auto;
      display:grid;
      gap:14px;
    }

    .topbar-row{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:16px;
      flex-wrap:wrap;
      min-height:42px;
    }

    .mobile-menu-toggle{
      display:none;
      appearance:none;
      border:1px solid var(--line);
      background:#fff;
      color:var(--text);
      padding:10px 12px;
      font:inherit;
      font-size:13px;
      font-weight:500;
      cursor:pointer;
    }

    .stepper-wrap{
      border:1px solid var(--line);
      background:#fff;
      padding:18px 16px 12px;
      box-shadow:var(--shadow);
    }

    .stepper-progress{
      position:relative;
      height:4px;
      background:#e6e6e2;
      margin:0 18px 16px;
      overflow:hidden;
    }

    .stepper-progress > i{
      position:absolute;
      left:0;
      top:0;
      bottom:0;
      width:0%;
      background:linear-gradient(90deg,var(--green),#6cd08f);
      transition:width var(--transition);
    }

    .steps-nav{
      display:grid;
      grid-template-columns:repeat(var(--step-count,7),minmax(0,1fr));
      gap:10px;
      align-items:start;
    }

    .step-tab{
      appearance:none;
      border:none;
      background:transparent;
      color:var(--text);
      padding:0;
      font:inherit;
      cursor:pointer;
      text-align:center;
      position:relative;
      min-width:0;
    }

    .step-tab:hover .step-circle{
      transform:translateY(-1px);
      border-color:var(--green);
    }

    .step-circle{
      width:32px;
      height:32px;
      margin:0 auto 10px;
      border-radius:50%;
      border:1px solid #c9c9c2;
      background:#fff;
      display:grid;
      place-items:center;
      font-size:12px;
      font-weight:700;
      color:#7a7a7a;
      transition:all var(--transition);
      position:relative;
      z-index:2;
    }

    .step-tab.active .step-circle{
      border-color:#99d9b1;
      box-shadow:0 0 0 4px rgba(49,179,107,.10);
      color:var(--green);
    }

    .step-tab.done .step-circle{
      background:var(--green);
      border-color:var(--green);
      color:#fff;
    }

    .step-tab .step-title{
      font-size:13px;
      font-weight:600;
      line-height:1.2;
      margin-bottom:3px;
      white-space:normal;
    }

    .step-tab.calculated .step-circle{
      background:#2f80ed;
      border-color:#2f80ed;
      color:#fff;
      box-shadow:0 0 0 4px rgba(47,128,237,.12);
    }

    .step-tab.calculated .step-title{
      color:#2f80ed;
    }

    .step-tab .step-sub{
      font-size:11px;
      color:var(--muted);
      line-height:1.25;
      white-space:normal;
    }

    .hero{
      position:relative;
      overflow:hidden;
      border:1px solid #e3e6ea;
      background:
        radial-gradient(circle at top right, rgba(79,124,255,.12), transparent 30%),
        radial-gradient(circle at bottom left, rgba(30,201,127,.10), transparent 28%),
        linear-gradient(180deg,#fff, #fbfbff);
      box-shadow:var(--shadow);
      padding:22px;
      margin-bottom:18px;
    }

    .hero::before{
      content:"";
      position:absolute;
      left:0;
      top:0;
      width:100%;
      height:4px;
      background:linear-gradient(90deg,var(--brand-red) 0%, var(--brand-red) 22%, var(--brand-dark) 22%, var(--brand-dark) 100%);
    }

    .hero h1{
      margin:0;
      font-size:clamp(28px,5vw,40px);
      line-height:1;
      font-weight:300;
      letter-spacing:-.04em;
    }


    .postal-actions{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
      justify-content:flex-end;
    }

    .summary-strip{
      display:grid;
      grid-template-columns:repeat(5,minmax(0,1fr));
      gap:12px;
      margin-top:16px;
    }

    .summary-item{
      border:1px solid var(--line);
      border-top:3px solid rgba(232,13,13,.18);
      background:#fff;
      padding:14px;
      min-height:74px;
      transition:border-color var(--transition), transform var(--transition), box-shadow var(--transition);
    }

    .summary-item:hover{
      transform:translateY(-1px);
      border-color:#d6dae0;
      box-shadow:0 10px 24px rgba(20,27,36,.05);
    }

    .summary-item .k{
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:.14em;
      color:var(--muted);
      margin-bottom:7px;
      font-weight:600;
    }

    .summary-item .v{
      font-size:18px;
      font-weight:400;
      letter-spacing:-.02em;
    }

    .step-card,
    .result-card{
      border:1px solid var(--line);
      background:var(--panel);
      box-shadow:var(--shadow);
      padding:22px;
      margin-bottom:18px;
      opacity:0;
      transform:translateY(8px);
      animation:fadeIn 320ms ease forwards;
    }

    @keyframes fadeIn{
      to{opacity:1; transform:translateY(0)}
    }

    .step-card{display:none}
    .step-card.active{display:block}

    .step-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      margin-bottom:20px;
    }

    .step-head h2{
      margin:0;
      font-size:clamp(24px,4vw,30px);
      font-weight:300;
      letter-spacing:-.04em;
    }

    .step-count{
      border:1px solid var(--line);
      background:#fafaf9;
      padding:10px 12px;
      font-size:12px;
      color:var(--muted);
      text-transform:uppercase;
      letter-spacing:.14em;
      white-space:nowrap;
      font-weight:600;
    }

    .grid{display:grid; gap:14px}
    .grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
    .grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
    .grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}

    .option-card{
      position:relative;
      border:1px solid var(--line);
      background:#fff;
      min-height:84px;
      padding:15px;
      cursor:pointer;
      transition:border-color var(--transition), background var(--transition), transform var(--transition);
    }

    .option-card:hover{
      border-color:var(--line-strong);
      transform:translateY(-1px);
    }

    .option-card.active{
      border-color:var(--green);
      background:var(--green-soft);
      box-shadow:inset 0 0 0 1px var(--green);
    }

    .option-card .title{
      font-size:15px;
      font-weight:500;
      letter-spacing:-.02em;
    }

    .option-card .sub{
      margin-top:6px;
      font-size:12px;
      color:var(--muted);
      letter-spacing:.02em;
      font-weight:400;
      line-height:1.35;
    }

    .field{
      display:grid;
      gap:8px;
      align-content:start;
    }

    .field-help{
      margin-top:8px;
      font-size:12px;
      line-height:1.45;
      color:#6b6b6b;
    }

    .field label{
      font-size:13px;
      color:#333;
      font-weight:600;
      letter-spacing:.02em;
    }

    .field-note{
      font-size:12px;
      color:var(--muted);
      line-height:1.4;
      margin-top:-2px;
    }

    .input,
    .select{
      width:100%;
      min-height:46px;
      border:1px solid var(--line);
      background:#fff;
      color:var(--text);
      padding:10px 12px;
      font:inherit;
      font-size:15px;
      font-weight:400;
      outline:none;
      transition:border-color var(--transition), box-shadow var(--transition), background var(--transition);
    }

    .input:focus,
    .select:focus{
      border-color:var(--brand-red);
      box-shadow:0 0 0 3px rgba(232,13,13,.08);
    }


    .postal-helper{
      border:1px solid #e3e6ea;
      background:linear-gradient(180deg,#ffffff 0%, #fbfbfa 100%);
      padding:18px;
      margin-bottom:14px;
      box-shadow:var(--shadow);
    }

    .postal-helper-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:16px;
      margin-bottom:16px;
      flex-wrap:wrap;
    }

    .postal-helper-title{
      display:grid;
      gap:6px;
      max-width:760px;
    }

    .postal-helper-kicker{
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-size:11px;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:.14em;
      color:var(--brand-red);
    }

    .postal-helper-title b{
      font-size:18px;
      font-weight:600;
      letter-spacing:-.02em;
    }

    .postal-helper-title p{
      margin:0;
      font-size:13px;
      line-height:1.5;
      color:var(--muted);
    }

    .compact-grid{
      grid-template-columns:1.1fr 1.2fr .9fr;
      align-items:end;
    }

    .postal-helper .field{
      gap:7px;
    }

    .postal-helper .field label{
      font-size:12px;
      text-transform:uppercase;
      letter-spacing:.08em;
      color:var(--muted);
      font-weight:700;
    }

    .postal-helper .input[readonly]{
      background:#f7f7f4;
      color:#4f4f4f;
    }

    .postal-status-wrap{
      grid-column:1 / -1;
      display:flex;
      align-items:center;
      gap:10px;
      padding:12px 14px;
      border:1px dashed #cfe8d8;
      background:#f8fcf9;
      min-height:48px;
    }

    .postal-status-dot{
      width:10px;
      height:10px;
      border-radius:50%;
      background:var(--green);
      flex:0 0 auto;
      box-shadow:0 0 0 4px rgba(49,179,107,.10);
    }

    .postal-status-text{
      font-size:13px;
      color:#38614a;
      line-height:1.4;
    }

    .range-block{
      border:1px solid var(--line);
      background:#fff;
      padding:16px;
      transition:border-color var(--transition);
    }

    .range-block:hover{border-color:#d6dae0}

    .range-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-bottom:12px;
    }

    .range-head b{
      font-size:15px;
      font-weight:500;
    }

    .range-head span{
      font-size:16px;
      font-weight:400;
      letter-spacing:-.02em;
    }

    input[type="range"]{
      -webkit-appearance:none;
      appearance:none;
      width:100%;
      height:2px;
      background:#cdcdc8;
      outline:none;
      cursor:pointer;
    }

    input[type="range"]::-webkit-slider-thumb{
      -webkit-appearance:none;
      appearance:none;
      width:18px;
      height:18px;
      border-radius:50%;
      background:#fff;
      border:1px solid var(--green);
      box-shadow:0 2px 6px rgba(0,0,0,.08);
      transition:transform var(--transition), background var(--transition);
    }

    input[type="range"]::-webkit-slider-thumb:hover{
      transform:scale(1.05);
      background:#f4fff8;
    }

    input[type="range"]::-moz-range-track{
      height:2px;
      background:#cdcdc8;
      border:none;
    }

    input[type="range"]::-moz-range-thumb{
      width:18px;
      height:18px;
      border-radius:50%;
      background:#fff;
      border:1px solid var(--green);
    }

    .radio-row{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
    }

    .radio-chip{
      position:relative;
      display:inline-flex;
      align-items:center;
      gap:10px;
      border:1px solid var(--line);
      background:#fff;
      padding:12px 14px;
      cursor:pointer;
      transition:border-color var(--transition), background var(--transition), transform var(--transition);
    }

    .radio-chip:hover{
      transform:translateY(-1px);
      border-color:var(--line-strong);
    }

    .radio-chip input{
      position:absolute;
      opacity:0;
      pointer-events:none;
    }

    .radio-mark{
      width:16px;
      height:16px;
      border:1px solid #444;
      border-radius:50%;
      display:inline-block;
      position:relative;
      flex:0 0 auto;
    }

    .radio-chip input:checked + .radio-mark::after{
      content:"";
      position:absolute;
      inset:3px;
      background:var(--green);
      border-radius:50%;
    }

    .radio-chip.active{
      border-color:var(--green);
      background:var(--green-soft);
    }

    .section-line{
      height:1px;
      background:var(--line);
      margin:18px 0;
    }

    .form-section{
      border:1px solid #e3e6ea;
      background:linear-gradient(180deg,#ffffff 0%, #fbfbfa 100%);
      padding:18px;
      margin-top:16px;
      box-shadow:var(--shadow);
    }

    .form-section-title{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:14px;
      padding-bottom:10px;
      border-bottom:1px solid var(--line);
    }

    .form-section-title b{
      font-size:15px;
      font-weight:700;
      letter-spacing:-.02em;
      color:var(--brand-dark);
    }

    .form-section-title span{
      font-size:12px;
      color:var(--muted);
      line-height:1.35;
    }

    .actions{
      display:flex;
      justify-content:space-between;
      gap:12px;
      margin-top:24px;
      flex-wrap:wrap;
    }

    .btn{
      appearance:none;
      border:1px solid var(--line);
      background:#fff;
      color:var(--text);
      min-height:46px;
      padding:10px 18px;
      font:inherit;
      font-size:14px;
      font-weight:500;
      cursor:pointer;
      transition:transform var(--transition), border-color var(--transition), background var(--transition), color var(--transition);
    }

    .btn:hover{
      transform:translateY(-1px);
      border-color:var(--line-strong);
    }

    .btn.primary{
      background:var(--brand-dark);
      color:#fff;
      border-color:var(--brand-dark);
    }

    .btn.primary:hover{
      background:#232933;
      border-color:#232933;
    }

    .btn-row{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
    }

    .result-hero{
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:18px;
    }

    .result-main{
      border:1px solid var(--line);
      background:linear-gradient(180deg,#fff,#fafaf9);
      padding:24px;
    }

    .eyebrow{
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:.16em;
      color:var(--muted);
      font-weight:700;
    }

    .result-main h3{
      margin:12px 0 0;
      font-size:30px;
      font-weight:300;
      letter-spacing:-.04em;
    }

    .big-number{
      margin:14px 0 8px;
      font-size:clamp(42px,7vw,64px);
      font-weight:300;
      letter-spacing:-.07em;
      line-height:.95;
    }

    .subline{
      color:var(--muted);
      font-size:14px;
      font-weight:400;
    }

    .mini-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:12px;
    }

    .mini-card{
      border:1px solid var(--line);
      background:#fff;
      padding:16px;
      min-height:120px;
    }

    .mini-card .mk{
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:.14em;
      color:var(--muted);
      font-weight:700;
    }

    .mini-card .mv{
      margin-top:12px;
      font-size:28px;
      font-weight:300;
      letter-spacing:-.04em;
    }

    .list-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:18px;
    }

    .list-card{
      border:1px solid var(--line);
      background:#fff;
      padding:18px;
    }

    .list-card h4{
      margin:0 0 14px;
      font-size:16px;
      font-weight:600;
    }

    .kv{
      display:grid;
      gap:10px;
    }

    .kv-row{
      display:flex;
      justify-content:space-between;
      gap:12px;
      padding-bottom:10px;
      border-bottom:1px dashed #d8d8d2;
    }

    .kv-row:last-child{
      border-bottom:none;
      padding-bottom:0;
    }

    .kv-row span{
      color:var(--muted);
      font-size:14px;
      font-weight:400;
    }

    .kv-row b{
      font-size:14px;
      font-weight:500;
      text-align:right;
    }

    .bar-wrap{
      display:grid;
      gap:12px;
    }

    .bar-row{
      display:grid;
      grid-template-columns:180px 1fr 96px;
      gap:12px;
      align-items:center;
    }

    .bar-row span{
      font-size:14px;
      font-weight:400;
    }

    .bar-row b{
      text-align:right;
      font-size:14px;
      font-weight:500;
    }

    .bar{
      height:6px;
      background:#e7e7e2;
      overflow:hidden;
    }

    .bar > i{
      display:block;
      height:100%;
      background:linear-gradient(90deg,var(--green),#6cd08f);
      transition:width 500ms ease;
    }

    .chart-wrap{
      border:1px solid var(--line);
      background:#fff;
      padding:18px;
      display:grid;
      gap:16px;
    }

    .chart-wrap h4{
      margin:0;
      font-size:16px;
      font-weight:600;
    }

    .products-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:18px;
    }

    .product-card{
      border:1px solid var(--line);
      background:#fff;
      overflow:hidden;
      display:grid;
      grid-template-columns:180px 1fr;
      min-height:220px;
      position:relative;
    }

    .product-card.is-featured{
      border-color:#e7b65b;
      box-shadow:0 10px 28px rgba(181,128,19,.12);
      background:linear-gradient(180deg,#fffdf8,#ffffff 28%);
    }

    .product-featured-ribbon{
      position:absolute;
      top:12px;
      left:12px;
      z-index:3;
      border:1px solid #f0d39b;
      background:#fff4d9;
      color:#8c5a00;
      font-size:11px;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:.08em;
      padding:7px 10px;
    }

    .product-media{
      background:linear-gradient(180deg,#fbfbfa,#f1f1ed);
      display:flex;
      align-items:center;
      justify-content:center;
      padding:16px;
      border-right:1px solid var(--line);
    }

    .product-media img{
      max-width:100%;
      max-height:160px;
      object-fit:contain;
      display:block;
      mix-blend-mode:multiply;
    }

    .product-body{
      padding:18px;
      display:grid;
      gap:12px;
      align-content:start;
    }

    .product-top{
      display:flex;
      justify-content:space-between;
      gap:12px;
      align-items:start;
      flex-wrap:wrap;
      margin-top:4px;
    }

    .product-brand{
      font-size:12px;
      text-transform:uppercase;
      letter-spacing:.14em;
      color:var(--muted);
      font-weight:700;
      margin-bottom:6px;
    }

    .product-name{
      font-size:20px;
      font-weight:400;
      letter-spacing:-.03em;
      line-height:1.15;
    }

    .product-badge{
      border:1px solid #bfe6cb;
      background:var(--green-soft);
      color:#1f6f40;
      font-size:11px;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:.08em;
      padding:8px 10px;
      white-space:nowrap;
    }

    .product-meta{
      display:grid;
      gap:8px;
    }

    .product-meta-row{
      display:flex;
      justify-content:space-between;
      gap:10px;
      border-bottom:1px dashed #d8d8d2;
      padding-bottom:8px;
    }

    .product-meta-row:last-child{
      border-bottom:none;
      padding-bottom:0;
    }

    .product-meta-row span{
      color:var(--muted);
      font-size:13px;
    }

    .product-meta-row b{
      font-size:13px;
      text-align:right;
      font-weight:500;
    }

    .product-note{
      font-size:13px;
      color:var(--muted);
      line-height:1.45;
    }

    .chart-toolbar{
      display:grid;
      grid-template-columns:1fr auto;
      gap:14px;
      align-items:end;
    }

    .chart-readout{
      border:1px solid var(--line);
      background:#fafaf9;
      padding:12px 14px;
      min-width:240px;
      display:grid;
      gap:6px;
    }

    .chart-readout .k{
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:.14em;
      color:var(--muted);
      font-weight:700;
    }

    .chart-readout .v{
      font-size:24px;
      font-weight:300;
      letter-spacing:-.04em;
    }

    .chart-readout .s{
      font-size:13px;
      color:var(--muted);
    }

    canvas{
      width:100%;
      height:320px;
      border:1px solid var(--line);
      background:#fff;
      display:block;
    }

    .report-sheet{
      display:none;
      background:#fff;
      color:#000;
      padding:20px;
      font-family:Arial, sans-serif;
      font-size:12px;
    }

    .report-title{
      font-size:20px;
      font-weight:700;
      margin-bottom:4px;
    }

    .report-sub{
      font-size:11px;
      color:#555;
      margin-bottom:14px;
    }

    .report-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
      margin-bottom:12px;
    }

    .report-card{
      border:1px solid #d8d8d2;
      padding:10px;
      break-inside:avoid;
      page-break-inside:avoid;
    }

    .report-card h5{
      margin:0 0 8px;
      font-size:13px;
    }

    .report-kv{
      display:grid;
      gap:6px;
    }

    .report-row{
      display:flex;
      justify-content:space-between;
      gap:10px;
      border-bottom:1px dashed #ddd;
      padding-bottom:4px;
    }

    .report-row:last-child{
      border-bottom:none;
      padding-bottom:0;
    }


    .seo-sections{display:grid;gap:18px;margin-top:22px}
    .seo-card{border:1px solid var(--line);background:linear-gradient(180deg,#fff,#fcfcfb);box-shadow:var(--shadow);padding:24px}
    .seo-card h2{margin:0 0 12px;font-size:26px;font-weight:300;letter-spacing:-.03em}
    .seo-card p{margin:0 0 12px;color:#45505f;line-height:1.7}
    .seo-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}
    .seo-points{display:grid;gap:10px;margin-top:12px}
    .seo-point{border:1px solid #e8ecef;background:#fff;padding:14px 16px}
    .seo-point b{display:block;margin-bottom:4px}
    .faq-list{display:grid;gap:12px}
    .faq-item{border:1px solid #e7ebef;background:#fff;overflow:hidden}
    .faq-question{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;background:#fff;border:0;cursor:pointer;text-align:left;font:inherit;color:inherit}
    .faq-question h3{margin:0;font-size:16px}
    .faq-icon{flex:0 0 auto;width:28px;height:28px;border:1px solid #d7e0e8;border-radius:999px;display:grid;place-items:center;font-size:18px;line-height:1;color:#40607d;transition:transform .2s ease, background .2s ease, border-color .2s ease}
    .faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .24s ease}
    .faq-answer-inner{overflow:hidden}
    .faq-answer p{margin:0;padding:0 18px 18px;color:#566274;line-height:1.7}
    .faq-item.open .faq-answer{grid-template-rows:1fr}
    .faq-item.open .faq-icon{transform:rotate(45deg);background:#eef6ff;border-color:#bfd8ff}
    .seo-badge-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
    .seo-badge{display:inline-flex;align-items:center;padding:7px 11px;border:1px solid #dbe3ea;background:#fff;font-size:12px;font-weight:700;color:#405062}
    .hidden{display:none !important}

    @media (max-width: 1100px){
      .summary-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
      .result-hero,.list-grid,.products-grid{grid-template-columns:1fr}
      .steps-nav{grid-template-columns:repeat(4,minmax(0,1fr))}
    }

    @media (max-width: 820px){
      .grid.two,.grid.three,.grid.four,.summary-strip,.mini-grid,.report-grid,.products-grid{grid-template-columns:1fr}
      .compact-grid{grid-template-columns:1fr}
      .postal-helper,.form-section{padding:16px}
      .postal-helper-head{align-items:stretch}
      .postal-helper-head .btn{width:100%}
      .step-head{align-items:flex-start; flex-direction:column}
      .bar-row{grid-template-columns:1fr}
      .actions .btn{width:100%}
      .chart-toolbar{grid-template-columns:1fr}
      .chart-readout{min-width:0}
      .mobile-menu-toggle{display:none}
      .stepper-wrap{overflow:visible}
      .steps-nav,
      .steps-nav.open{
        display:grid;
        grid-template-columns:repeat(var(--step-count,7),minmax(0,1fr));
        gap:4px;
        min-width:0;
        align-items:start;
      }
      .step-tab{
        text-align:center;
        display:block;
        min-width:0;
      }
      .step-circle{
        width:22px;
        height:22px;
        margin:0 auto 6px;
        font-size:10px;
      }
      .step-tab .step-title,
      .step-tab .step-sub{
        display:block;
      }
      .step-tab .step-title{font-size:10px;line-height:1.1;margin-bottom:0}
      .step-tab .step-sub{display:none}
      .summary-strip{
        display:none;
      }
      .seo-grid{grid-template-columns:1fr}
      .seo-card{padding:18px}
      .topbar{
        padding-bottom:10px;
      }
      .stepper-wrap{
        padding:12px 10px 10px;
      }
      .stepper-progress{
        margin:0 8px 10px;
      }
    }

    @media (max-width: 520px){
      .app{padding:14px 12px 42px}
      .topbar{margin:0 -12px 14px; padding:10px 12px}
      .hero{padding:18px}
      .step-card,.result-card{padding:16px}
      .seo-card h2{font-size:22px}
      .postal-actions{justify-content:stretch}
      .postal-actions .btn{flex:1 1 100%}
      .brand{min-width:unset}
      .brand-mark{padding:6px 10px;min-height:44px}
      .brand-logo{width:132px}
      .brand-text strong{font-size:14px}
      .field label{font-size:12px}
      .input,.select{min-height:44px; font-size:14px}
      .big-number{font-size:42px}
      canvas{height:260px}
      .summary-item .v{font-size:16px}
      .product-card{grid-template-columns:1fr}
      .product-media{border-right:none;border-bottom:1px solid var(--line)}
    }

    @media print{
      body *{
        visibility:hidden !important;
      }
      .report-sheet, .report-sheet *{
        visibility:visible !important;
      }
      .report-sheet{
        display:block !important;
        position:absolute;
        left:0;
        top:0;
        width:100%;
      }
      .report-grid{
        grid-template-columns:1fr !important;
      }
      .report-card{
        break-inside:avoid;
        page-break-inside:avoid;
      }
      @page{
        margin:10mm;
        size:A4;
      }
    }
    .form-section-accent{margin-top:16px;border-top:2px dashed #e6d9d9;padding-top:18px;background:linear-gradient(180deg,#fff 0,#fffafb 100%)}
    @media (max-width:680px){
      .form-section + .form-section{margin-top:18px}
      .form-section-accent{padding-top:20px}
    }


    .cta-offer-box{
      margin-top:18px;
      border:1px solid #dbe4fb;
      background:linear-gradient(135deg,#f7f9ff 0%, #ffffff 60%, #f2fffa 100%);
      padding:18px;
      display:grid;
      grid-template-columns:1.2fr auto;
      gap:16px;
      align-items:center;
    }
    .cta-offer-box strong{
      display:block;
      font-size:20px;
      font-weight:600;
      letter-spacing:-.03em;
      margin-bottom:6px;
      color:#243b8f;
    }
    .cta-offer-box p{
      margin:0;
      font-size:14px;
      color:#52607a;
      line-height:1.5;
    }
    .btn.cta-red{
      background:linear-gradient(135deg,#5a6bff 0%, #1ec97f 100%);
      color:#fff;
      border-color:#4b63f0;
      box-shadow:0 14px 30px rgba(79,124,255,.24);
      font-weight:700;
    }
    .btn.cta-red:hover{filter:brightness(1.03); transform:translateY(-1px)}
    .offer-modal{
      position:fixed;
      inset:0;
      background:rgba(20,27,36,.58);
      display:flex;
      align-items:center;
      justify-content:center;
      padding:22px;
      z-index:9000;
      backdrop-filter:blur(4px);
      opacity:0;
      visibility:hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    .offer-modal.open{opacity:1;visibility:visible}
    .offer-dialog{
      width:min(920px,100%);
      max-height:min(92vh,980px);
      overflow:auto;
      border:1px solid #e4e6ea;
      background:linear-gradient(180deg,#ffffff 0%,#fbfbfc 100%);
      box-shadow:0 28px 80px rgba(20,27,36,.24);
      padding:0;
      position:relative;
      border-radius:24px;
      transform: translateY(20px) scale(0.96);
      transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .offer-modal.open .offer-dialog{
      transform: translateY(0) scale(1);
    }
    .offer-shell{padding:24px 24px 22px}
    .offer-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:18px;padding:24px 24px 0}
    .offer-head-copy{max-width:640px}
    .offer-head h3{margin:0;font-size:31px;font-weight:300;letter-spacing:-.04em;line-height:1.05}
    .offer-head p{margin:8px 0 0;font-size:14px;color:var(--muted);line-height:1.6}
    .offer-close{appearance:none;border:1px solid var(--line);background:#fff;padding:10px 14px;font:inherit;cursor:pointer;border-radius:12px;font-weight:600;color:var(--text);transition:all var(--transition);box-shadow:0 8px 18px rgba(20,27,36,.05)}
    .offer-close:hover{transform:translateY(-1px);border-color:#cfd5de}
    .offer-summary{
      border:1px solid #eceef2;
      background:linear-gradient(180deg,#fff8f8 0%, #ffffff 100%);
      padding:16px;
      margin:0 24px 18px;
      border-radius:18px;
    }
    .offer-summary b{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:#8b4e4e;margin-bottom:12px}
    .offer-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
    .offer-summary-item{border:1px solid #ece6e6;background:#fff;padding:13px 14px;border-radius:16px;min-width:0}
    .offer-summary-item span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:6px;line-height:1.3}
    .offer-summary-item strong{font-size:17px;font-weight:700;letter-spacing:-.02em;line-height:1.25;display:block;overflow-wrap:anywhere}
    .offer-form{padding:0 24px 24px}
    .offer-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
    .offer-field{display:flex;flex-direction:column;gap:7px;min-width:0}
    .offer-field.full{grid-column:1/-1}
    .offer-field label{font-size:13px;font-weight:700;color:#313845;line-height:1.35}
    .offer-field .input, .offer-field .select, .offer-field .textarea{width:100%;border:1px solid #d9dfe8;background:#fff;color:var(--text);border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5);transition:border-color var(--transition), box-shadow var(--transition)}
    .offer-field .input, .offer-field .select{height:48px;padding:0 14px}
    .offer-field .textarea{min-height:128px;padding:14px;font:inherit;font-size:15px;resize:vertical}
    .offer-field .input:focus, .offer-field .select:focus, .offer-field .textarea:focus{outline:none;border-color:#d97979;box-shadow:0 0 0 4px rgba(232,13,13,.08)}
    .offer-inline-help{font-size:12px;color:var(--muted);line-height:1.45;margin-top:2px}
    .checkbox-row{display:flex;gap:12px;align-items:flex-start;border:1px solid #eceef2;background:#fafbfc;padding:14px 16px;border-radius:16px;margin-top:6px}
    .checkbox-row input{margin-top:4px;flex:0 0 auto}
    .checkbox-copy{display:grid;gap:4px;line-height:1.5}
    .checkbox-copy strong{font-size:13px}
    .checkbox-copy span{font-size:12px;color:var(--muted)}
    .offer-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;flex-wrap:wrap;padding-top:8px;border-top:1px solid #f0f1f4}
    .form-feedback{margin-top:12px;padding:13px 15px;border:1px solid #d9e9de;background:#f5fbf7;color:#2c6540;display:none;border-radius:14px;line-height:1.45}
    .form-feedback.error{border-color:#f0cccc;background:#fff4f4;color:#8b2f2f}
    .form-feedback.show{display:block}
    .required-star{color:#c31717}
    @media (max-width:860px){
      .offer-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
      .cta-offer-box{grid-template-columns:1fr}
      .offer-form-grid{grid-template-columns:1fr 1fr}
      .offer-head h3{font-size:26px}
    }
    @media (max-width:680px){
      .offer-modal{padding:12px}
      .offer-dialog{max-height:94vh;border-radius:20px}
      .offer-head{padding:18px 18px 0;gap:12px}
      .offer-shell{padding:18px 18px 16px}
      .offer-head h3{font-size:24px}
      .offer-head p{font-size:13px}
      .offer-summary{margin:0 18px 16px;padding:14px}
      .offer-summary-grid{grid-template-columns:1fr}
      .offer-form{padding:0 18px 18px}
      .offer-form-grid{grid-template-columns:1fr;gap:12px}
      .offer-actions .btn{width:100%}
      .offer-close{padding:9px 12px}
    }


    /* Modern UI upgrade */
    :root{
      --glass-bg:rgba(255,255,255,.68);
      --glass-bg-strong:rgba(255,255,255,.82);
      --glass-stroke:rgba(255,255,255,.58);
      --glass-shadow:0 24px 70px rgba(15,23,42,.12);
      --glass-shadow-soft:0 14px 36px rgba(15,23,42,.08);
      --radius-xl:32px;
      --radius-lg:24px;
      --radius-md:18px;
    }

    body::before,
    body::after{
      content:"";
      position:fixed;
      inset:auto;
      pointer-events:none;
      z-index:0;
      filter:blur(70px);
      opacity:.75;
    }

    body::before{
      top:-120px;
      right:-100px;
      width:340px;
      height:340px;
      background:radial-gradient(circle, rgba(232,13,13,.16) 0%, rgba(232,13,13,.04) 45%, rgba(232,13,13,0) 72%);
    }

    body::after{
      left:-120px;
      bottom:-140px;
      width:380px;
      height:380px;
      background:radial-gradient(circle, rgba(43,50,61,.15) 0%, rgba(43,50,61,.05) 48%, rgba(43,50,61,0) 75%);
    }

    .topbar,
    .app,
    main,
    .seo-sections{
      position:relative;
      z-index:1;
    }

    .topbar{
      background:rgba(247,247,245,.74);
      border-bottom:1px solid rgba(255,255,255,.7);
      backdrop-filter:blur(18px) saturate(135%);
      -webkit-backdrop-filter:blur(18px) saturate(135%);
      box-shadow:0 18px 44px rgba(20,27,36,.06);
    }

    .stepper-wrap,
    .hero,
    .step-card,
    .result-card,
    .seo-card,
    .postal-helper,
    .form-section,
    .list-card,
    .range-block,
    .mini-card,
    .result-main,
    .chart-readout,
    .cta-offer-box,
    .offer-dialog,
    .offer-summary,
    .offer-summary-item,
    .checkbox-row,
    .seo-point,
    .faq-item,
    .product-card,
    .summary-item,
    .postal-status-wrap{
      border-radius:var(--radius-lg);
      backdrop-filter:blur(18px) saturate(130%);
      -webkit-backdrop-filter:blur(18px) saturate(130%);
    }

    .stepper-wrap{
      background:linear-gradient(135deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.7) 100%);
      border:1px solid rgba(255,255,255,.82);
      box-shadow:var(--glass-shadow-soft);
    }

    .step-tab,
    .option-card,
    .summary-item,
    .mini-card,
    .list-card,
    .range-block,
    .product-card,
    .seo-point,
    .faq-item,
    .btn,
    .radio-chip,
    .input,
    .select,
    .offer-close,
    .hero-badge,
    .hero-panel{
      transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition), color var(--transition), opacity var(--transition);
      will-change:transform;
    }

    .step-tab:hover,
    .option-card:hover,
    .summary-item:hover,
    .mini-card:hover,
    .list-card:hover,
    .range-block:hover,
    .product-card:hover,
    .seo-point:hover,
    .faq-item:hover,
    .radio-chip:hover,
    .hero-panel:hover{
      transform:translateY(-3px);
      box-shadow:0 18px 40px rgba(15,23,42,.08);
    }

    .step-tab.active{
      transform:translateY(-2px);
    }

    .step-circle{
      box-shadow:0 10px 24px rgba(15,23,42,.06);
    }

    .hero{
      padding:30px;
      border-radius:var(--radius-xl);
      border:1px solid rgba(255,255,255,.84);
      background:linear-gradient(135deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.54) 100%);
      box-shadow:var(--glass-shadow);
      overflow:hidden;
    }

    .hero::before{
      height:5px;
      opacity:.95;
    }

    .hero::after{
      content:"";
      position:absolute;
      right:-70px;
      bottom:-90px;
      width:260px;
      height:260px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(232,13,13,.14) 0%, rgba(232,13,13,.05) 45%, rgba(232,13,13,0) 72%);
      filter:blur(14px);
      pointer-events:none;
    }

    .hero-grid{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr);
      gap:18px;
      align-items:start;
    }

    .hero-copy{
      display:grid;
      gap:14px;
      align-content:start;
    }

    .hero-kicker{
      display:inline-flex;
      align-items:center;
      width:max-content;
      max-width:100%;
      padding:8px 12px;
      border-radius:999px;
      border:1px solid rgba(232,13,13,.12);
      background:rgba(255,255,255,.62);
      color:#8f1717;
      font-size:11px;
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.16em;
      box-shadow:0 10px 24px rgba(232,13,13,.06);
    }

    .hero-lead{
      max-width:760px;
      font-size:15px;
      line-height:1.7;
      color:#495362;
    }

    .hero-badges{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }

    .hero-badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:10px 14px;
      border-radius:999px;
      border:1px solid rgba(214,220,230,.9);
      background:rgba(255,255,255,.72);
      color:#334155;
      font-size:12px;
      font-weight:700;
      box-shadow:0 10px 22px rgba(15,23,42,.05);
    }

    .hero-badge::before{
      content:"";
      width:8px;
      height:8px;
      border-radius:50%;
      background:linear-gradient(135deg, #31b36b 0%, #5dd18b 100%);
      box-shadow:0 0 0 4px rgba(49,179,107,.12);
      flex:0 0 auto;
    }

    .hero-aside{
      display:grid;
      gap:12px;
      align-content:start;
    }

    .hero-panel{
      padding:18px;
      border-radius:22px;
      border:1px solid rgba(255,255,255,.82);
      background:linear-gradient(180deg, rgba(255,255,255,.8) 0%, rgba(255,255,255,.6) 100%);
      box-shadow:0 16px 34px rgba(15,23,42,.07);
    }

    .hero-panel span{
      display:block;
      margin-bottom:8px;
      font-size:11px;
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.16em;
      color:#6b7280;
    }

    .hero-panel strong{
      display:block;
      font-size:17px;
      line-height:1.5;
      letter-spacing:-.02em;
      color:#1f2937;
    }

    .hero-panel ul{
      margin:0;
      padding-left:18px;
      color:#4b5563;
      line-height:1.65;
      font-size:14px;
    }

    .step-card,
    .result-card,
    .seo-card{
      border:1px solid rgba(255,255,255,.86);
      background:linear-gradient(180deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.68) 100%);
      box-shadow:var(--glass-shadow-soft);
      overflow:hidden;
    }

    .step-card.active,
    .result-card:not(.hidden),
    .seo-card{
      animation:cardLift .42s cubic-bezier(.2,.8,.2,1) forwards;
    }

    @keyframes cardLift{
      from{opacity:0; transform:translateY(16px) scale(.985)}
      to{opacity:1; transform:translateY(0) scale(1)}
    }

    .form-section,
    .postal-helper,
    .list-card,
    .range-block,
    .mini-card,
    .result-main,
    .chart-readout,
    .seo-point,
    .faq-item,
    .summary-item,
    .offer-summary,
    .offer-summary-item,
    .checkbox-row,
    .product-card,
    .cta-offer-box,
    .postal-status-wrap{
      border-color:rgba(255,255,255,.86);
      background:linear-gradient(180deg, rgba(255,255,255,.8) 0%, rgba(255,255,255,.66) 100%);
      box-shadow:0 12px 30px rgba(15,23,42,.05);
    }

    .form-section-title,
    .product-media,
    .product-card.is-featured{
      position:relative;
      z-index:1;
    }

    .option-card,
    .radio-chip{
      border-radius:18px;
      border-color:#d8dee7;
      background:linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(250,251,252,.72) 100%);
      box-shadow:0 8px 20px rgba(15,23,42,.03);
    }

    .option-card.active,
    .radio-chip.active{
      border-color:rgba(49,179,107,.58);
      background:linear-gradient(180deg, rgba(233,248,239,.96) 0%, rgba(245,252,248,.85) 100%);
      box-shadow:0 14px 30px rgba(49,179,107,.12), inset 0 0 0 1px rgba(49,179,107,.22);
    }

    .input,
    .select{
      border-radius:16px;
      border-color:#d6dde8;
      background:rgba(255,255,255,.78);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 8px 18px rgba(15,23,42,.02);
    }

    .input:hover,
    .select:hover{
      background:rgba(255,255,255,.94);
      border-color:#c8d1dd;
    }

    .input:focus,
    .select:focus{
      background:#fff;
      border-color:rgba(232,13,13,.64);
      box-shadow:0 0 0 4px rgba(232,13,13,.08), 0 16px 32px rgba(232,13,13,.08);
    }

    .btn{
      border-radius:16px;
      box-shadow:0 10px 24px rgba(15,23,42,.05);
      font-weight:700;
    }

    .btn.primary{
      background:linear-gradient(135deg, #2b323d 0%, #40495a 100%);
      border-color:#2b323d;
      box-shadow:0 18px 34px rgba(43,50,61,.18);
    }

    .btn.secondary,
    .offer-close{
      background:rgba(255,255,255,.78);
      border-color:#d8dfe8;
    }

    .btn.cta-red{
      box-shadow:0 18px 34px rgba(209,13,13,.22);
    }

    #postalLookupBtn{
      animation:pulseSoft 2.8s ease-in-out infinite;
    }

    @keyframes pulseSoft{
      0%,100%{box-shadow:0 12px 24px rgba(43,50,61,.12)}
      50%{box-shadow:0 0 0 6px rgba(49,179,107,.10), 0 18px 34px rgba(43,50,61,.16)}
    }

    .result-main{
      border-radius:26px;
      background:linear-gradient(135deg, rgba(255,255,255,.9) 0%, rgba(250,250,249,.76) 100%);
    }

    .big-number{
      text-shadow:0 10px 22px rgba(15,23,42,.06);
    }

    .mini-card,
    .list-card,
    .seo-point,
    .faq-item,
    .summary-item,
    .offer-summary-item{
      overflow:hidden;
    }

    .product-card{
      overflow:hidden;
    }

    .product-media{
      background:linear-gradient(180deg, rgba(251,251,250,.92) 0%, rgba(241,241,237,.78) 100%);
    }

    .cta-offer-box{
      border-radius:24px;
      border-color:rgba(255,216,216,.92);
      background:linear-gradient(135deg, rgba(255,246,246,.88) 0%, rgba(255,255,255,.78) 100%);
      box-shadow:0 18px 38px rgba(209,13,13,.10);
    }

    .postal-status-wrap{
      border-style:solid;
      border-color:rgba(49,179,107,.18);
      background:linear-gradient(180deg, rgba(248,252,249,.96) 0%, rgba(244,250,246,.88) 100%);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
    }

    .offer-dialog{
      border:1px solid rgba(255,255,255,.85);
      background:linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(251,251,252,.84) 100%);
    }

    .chart-readout .v,
    .mini-card .mv,
    .summary-item .v{
      letter-spacing:-.04em;
    }

    @media (max-width: 980px){
      .hero-grid{
        grid-template-columns:1fr;
      }

      .hero-aside{
        grid-template-columns:repeat(2, minmax(0,1fr));
      }
    }

    @media (max-width: 820px){
      .hero{
        padding:24px 20px;
      }

      .actions,
      .btn-row{
        position:sticky;
        bottom:10px;
        z-index:22;
        padding:12px;
        margin-top:18px;
        border:1px solid rgba(255,255,255,.85);
        border-radius:22px;
        background:rgba(255,255,255,.76);
        backdrop-filter:blur(16px) saturate(135%);
        -webkit-backdrop-filter:blur(16px) saturate(135%);
        box-shadow:0 18px 40px rgba(15,23,42,.08);
      }

      .actions .btn,
      .btn-row .btn{
        flex:1 1 calc(50% - 6px);
      }
    }

    @media (max-width: 520px){
      .hero{
        padding:20px 16px;
      }

      .hero-kicker{
        max-width:100%;
        white-space:normal;
        line-height:1.4;
      }

      .hero-lead{
        font-size:14px;
      }

      .hero-aside{
        grid-template-columns:1fr;
      }

      .hero-badge{
        width:100%;
        justify-content:flex-start;
      }

      .actions,
      .btn-row{
        padding:10px;
        bottom:8px;
      }
    }

    @media (prefers-reduced-motion: reduce){
      *, *::before, *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
      }

      #postalLookupBtn{
        animation:none !important;
      }
    }


  

    button,
    .btn,
    .step-tab,
    .option-card,
    .radio-chip{
      -webkit-tap-highlight-color:transparent;
      touch-action:manipulation;
    }

    .topbar{
      background:rgba(247,247,245,.68);
      backdrop-filter:blur(14px) saturate(125%);
      -webkit-backdrop-filter:blur(14px) saturate(125%);
      box-shadow:0 8px 20px rgba(20,27,36,.04);
      margin:0 -16px 12px;
      padding:8px 16px 9px;
    }

    .topbar-inner{gap:8px;}
    .topbar-row{gap:12px; min-height:28px;}
    .mobile-menu-toggle{padding:8px 10px; font-size:12px; font-weight:600;}
    .stepper-wrap{padding:10px 12px 8px;}
    .stepper-progress{height:3px; margin:0 12px 10px;}
    .steps-nav{gap:8px;}
    .step-circle{width:24px; height:24px; margin:0 auto 6px; font-size:10px;}
    .step-tab .step-title{font-size:11px; font-weight:700; line-height:1.15; margin-bottom:1px;}
    .step-tab .step-sub{font-size:10px; line-height:1.2;}

    .step-tab:hover .step-circle,
    .step-tab.active,
    .step-tab:hover,
    .option-card:hover,
    .summary-item:hover,
    .mini-card:hover,
    .list-card:hover,
    .range-block:hover,
    .product-card:hover,
    .seo-point:hover,
    .faq-item:hover,
    .radio-chip:hover,
    .hero-panel:hover{
      transform:none;
      box-shadow:none;
    }

    .step-tab,
    .option-card,
    .radio-chip,
    .btn{
      transition:border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease, opacity .18s ease;
      will-change:auto;
    }

    .summary-item,
    .mini-card,
    .list-card,
    .range-block,
    .product-card,
    .seo-point,
    .faq-item,
    .hero-panel{
      transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
      will-change:auto;
    }

    .step-card.active,
    .result-card:not(.hidden),
    .seo-card{
      animation:none;
      opacity:1;
      transform:translateY(0);
    }

    .btn:hover{transform:none;}

    .btn:active,
    .btn.primary:active,
    .btn.secondary:active,
    #postalLookupBtn:active,
    #computeBtn:active{
      transform:none !important;
      filter:none !important;
      box-shadow:none !important;
    }

    .btn:focus,
    .btn:focus-visible,
    .step-tab:focus,
    .step-tab:focus-visible,
    .option-card:focus,
    .option-card:focus-visible{
      outline:none;
    }

    #postalLookupBtn,
    #computeBtn{
      animation:none !important;
    }

    .bar-wrap{display:grid; gap:12px;}
    .bar-row{
      display:grid;
      grid-template-columns:minmax(0,1.25fr) minmax(0,2fr) auto;
      gap:14px;
      align-items:center;
      padding:14px 16px;
      border:1px solid rgba(255,255,255,.86);
      background:linear-gradient(180deg, rgba(255,255,255,.84) 0%, rgba(255,255,255,.7) 100%);
      box-shadow:0 12px 30px rgba(15,23,42,.05);
      border-radius:18px;
      overflow:visible;
    }
    .bar-row span{
      font-size:14px;
      font-weight:500;
      line-height:1.45;
      word-break:break-word;
    }
    .bar-row b{
      text-align:right;
      font-size:14px;
      font-weight:700;
      white-space:nowrap;
    }
    .bar{
      height:10px;
      background:#e7e7e2;
      border-radius:999px;
      overflow:hidden;
    }
    .bar > i{
      border-radius:999px;
      transition:width 360ms ease;
    }

    .chart-wrap{
      padding:16px;
      border-radius:22px;
      overflow:visible;
    }
    .chart-toolbar{gap:12px; align-items:stretch;}
    .chart-readout{
      min-width:220px;
      border-radius:18px;
    }
    canvas{
      height:340px;
      border-radius:18px;
      overflow:hidden;
    }

    @media (max-width:820px){
      .topbar{margin:0 -12px 10px; padding:8px 12px;}
      .stepper-wrap{padding:8px 10px 7px;}
      .stepper-progress{margin:0 8px 8px;}
      .step-card,.result-card{padding:16px;}
      canvas{height:300px;}
    }

    @media (max-width:760px){
      .bar-row{grid-template-columns:1fr; gap:8px; padding:14px;}
      .bar-row b{text-align:left;}
      .chart-toolbar{grid-template-columns:1fr;}
      .chart-readout{min-width:0;}
    }


    /* === UI refresh v5 === */
    body{
      background:linear-gradient(180deg,#eff2f4 0%, #edf0f1 100%);
      position:relative;
      isolation:isolate;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      z-index:-2;
      background:
        linear-gradient(180deg, rgba(243,246,248,.78) 0%, rgba(241,244,245,.72) 28%, rgba(244,246,246,.86) 100%),
        url('/assets/hero-bg.webp?v=1') center center / cover no-repeat;
      opacity:.72;
      transform:scale(1.03);
      pointer-events:none;
    }
    body::after{
      content:"";
      position:fixed;
      inset:0;
      z-index:-1;
      background:
        radial-gradient(circle at top right, rgba(232,13,13,.07), transparent 24%),
        radial-gradient(circle at top left, rgba(43,50,61,.08), transparent 28%);
      pointer-events:none;
    }
    .topbar{
      margin:0 -16px 14px;
      padding:8px 16px 9px;
      background:rgba(246,248,249,.72);
      backdrop-filter:blur(14px);
      border-bottom:1px solid rgba(198,205,210,.8);
      box-shadow:0 10px 28px rgba(18,28,36,.05);
    }
    .topbar-inner{gap:8px;}
    .topbar-row{min-height:30px;}
    .stepper-wrap{
      padding:10px 12px 8px;
      border-radius:20px;
      background:rgba(255,255,255,.74);
      backdrop-filter:blur(18px);
      border:1px solid rgba(215,220,224,.9);
    }
    .stepper-progress{margin:0 10px 10px;height:3px;border-radius:999px;}
    .steps-nav{gap:8px;}
    .step-circle{width:26px;height:26px;margin:0 auto 6px;font-size:11px;}
    .step-tab .step-title{font-size:11.5px;margin-bottom:2px;}
    .step-tab .step-sub{font-size:10px;line-height:1.15;}
    .hero{
      background:
        linear-gradient(135deg, rgba(255,255,255,.8), rgba(255,255,255,.56)),
        rgba(255,255,255,.44);
      backdrop-filter:blur(18px);
      border:1px solid rgba(221,226,231,.9);
    }
    .result-card,
    .step-card,
    .list-card,
    .chart-wrap,
    .summary-item{
      backdrop-filter:blur(16px);
    }
    #resultBars h4{
      margin-left:10px;
      padding-left:6px;
    }
    .chart-wrap-modern{
      padding:20px;
      border-radius:26px;
      border:1px solid rgba(214,220,225,.9);
      background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(250,252,252,.82));
      box-shadow:0 20px 60px rgba(18,28,36,.08);
      gap:18px;
      overflow:visible;
    }
    .section-kicker{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 10px;
      border-radius:999px;
      border:1px solid rgba(49,179,107,.18);
      background:rgba(49,179,107,.08);
      color:#236941;
      font-size:11px;
      font-weight:700;
      letter-spacing:.14em;
      text-transform:uppercase;
      margin-bottom:12px;
    }
    .chart-headline{
      display:grid;
      grid-template-columns:minmax(0,1.3fr) minmax(320px,.9fr);
      gap:18px;
      align-items:start;
    }
    .chart-headline h4{
      margin:0;
      font-size:24px;
      letter-spacing:-.04em;
      font-weight:400;
    }
    .chart-headline p{
      margin:8px 0 0;
      color:var(--muted);
      font-size:14px;
      line-height:1.55;
      max-width:760px;
    }
    .chart-legend{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      justify-content:flex-end;
      align-self:center;
    }
    .chart-legend span{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:10px 12px;
      border-radius:999px;
      border:1px solid rgba(214,218,222,.9);
      background:rgba(255,255,255,.74);
      color:#485059;
      font-size:12px;
      font-weight:600;
      white-space:nowrap;
    }
    .chart-legend i{
      width:12px;
      height:12px;
      border-radius:999px;
      display:inline-block;
    }
    .chart-legend i.is-curve{background:linear-gradient(135deg,#1f7a46,#5dd290);}
    .chart-legend i.is-biv{background:#485059;}
    .chart-legend i.is-design{background:#9aa4ad;}
    .chart-legend i.is-selected{background:#109566; box-shadow:0 0 0 4px rgba(16,149,102,.14);}
    .chart-toolbar-modern{
      grid-template-columns:minmax(0,1.25fr) minmax(290px,.8fr);
      gap:16px;
      align-items:stretch;
    }
    .chart-control-panel,
    .chart-side-panel{
      display:grid;
      gap:14px;
      align-content:start;
    }
    .range-block-modern{
      padding:16px 16px 14px;
      border-radius:22px;
      border:1px solid rgba(215,219,223,.92);
      background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(247,250,249,.8));
      box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
    }
    .range-head b{font-size:15px;font-weight:600;}
    .range-head span{
      font-size:22px;
      font-weight:700;
      color:var(--brand-dark);
      letter-spacing:-.04em;
    }
    .chart-quicktemps{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:14px;
    }
    .chart-chip{
      appearance:none;
      border:1px solid rgba(208,214,218,.95);
      background:rgba(255,255,255,.88);
      color:#485059;
      padding:9px 11px;
      border-radius:999px;
      font:inherit;
      font-size:12px;
      font-weight:700;
      cursor:pointer;
      transition:transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
    }
    .chart-chip:hover{transform:translateY(-1px);}
    .chart-chip.active{
      border-color:rgba(16,149,102,.34);
      background:rgba(16,149,102,.1);
      color:#0c7f58;
      box-shadow:0 8px 18px rgba(16,149,102,.12);
    }
    .chart-chip.is-special{
      border-color:rgba(72,80,89,.22);
      background:rgba(72,80,89,.06);
    }
    .chart-readout-modern{
      min-width:0;
      padding:16px 18px;
      border-radius:22px;
      border:1px solid rgba(215,220,224,.92);
      background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(246,250,248,.84));
      box-shadow:0 18px 34px rgba(16,149,102,.08);
    }
    .chart-readout-modern .k{font-size:10px;letter-spacing:.16em;}
    .chart-readout-modern .v{font-size:34px;font-weight:700;letter-spacing:-.05em;color:#102b21;}
    .chart-readout-modern .s{font-size:13px;line-height:1.45;}
    .chart-mini-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:10px;
    }
    .chart-mini-card{
      padding:14px 14px 12px;
      border-radius:20px;
      border:1px solid rgba(214,220,224,.92);
      background:rgba(255,255,255,.78);
      display:grid;
      gap:6px;
      min-height:112px;
      align-content:start;
    }
    .chart-mini-card span{
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:.12em;
      color:var(--muted);
      font-weight:700;
      line-height:1.35;
    }
    .chart-mini-card strong{
      font-size:22px;
      line-height:1.05;
      letter-spacing:-.04em;
      font-weight:700;
      color:#20262d;
    }
    .chart-mini-card small{
      font-size:12px;
      line-height:1.45;
      color:#5f6670;
    }
    .chart-mini-card-accent{
      border-color:rgba(16,149,102,.24);
      background:linear-gradient(180deg, rgba(16,149,102,.1), rgba(255,255,255,.84));
    }
    .chart-stage{
      position:relative;
      border-radius:24px;
      overflow:hidden;
      border:1px solid rgba(212,218,223,.94);
      background:linear-gradient(180deg, rgba(246,249,250,.95), rgba(255,255,255,.88));
      box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
    }
    #powerChart{
      width:100%;
      height:380px;
      display:block;
      border:none;
      background:transparent;
    }
    .chart-tooltip{
      position:absolute;
      min-width:160px;
      max-width:220px;
      padding:10px 12px;
      border-radius:16px;
      border:1px solid rgba(213,219,223,.95);
      background:rgba(255,255,255,.92);
      backdrop-filter:blur(16px);
      box-shadow:0 18px 40px rgba(17,29,36,.14);
      pointer-events:none;
      transform:translate(-50%, calc(-100% - 14px));
      z-index:4;
    }
    .chart-tooltip.hidden{display:none;}
    .chart-tooltip b{display:block;font-size:14px;font-weight:700;color:#112f23;}
    .chart-tooltip span{display:block;font-size:12px;color:#5f6670;line-height:1.45;}
    .chart-insights{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:12px;
    }
    .chart-insight-card{
      padding:15px 16px;
      border-radius:20px;
      border:1px solid rgba(214,220,224,.92);
      background:rgba(255,255,255,.76);
      display:grid;
      gap:6px;
      min-height:110px;
      align-content:start;
    }
    .chart-insight-card span{
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:.12em;
      color:var(--muted);
      font-weight:700;
      line-height:1.4;
    }
    .chart-insight-card strong{
      font-size:24px;
      font-weight:700;
      letter-spacing:-.04em;
      color:#20262d;
    }
    .chart-insight-card small{
      font-size:12px;
      line-height:1.45;
      color:#5f6670;
    }
    @media (max-width:980px){
      .chart-headline,
      .chart-toolbar-modern,
      .chart-insights{grid-template-columns:1fr;}
      .chart-legend{justify-content:flex-start;}
    }
    @media (max-width:760px){
      .topbar{padding:7px 12px 8px;}
      .stepper-wrap{padding:9px 10px 8px;}
      .step-circle{width:24px;height:24px;margin-bottom:5px;}
      .chart-wrap-modern{padding:15px; border-radius:22px;}
      .chart-headline h4{font-size:21px;}
      .chart-mini-grid,
      .chart-insights{grid-template-columns:1fr;}
      #powerChart{height:320px;}
      .chart-tooltip{display:none !important;}
      #resultBars h4{margin-left:4px; padding-left:4px;}
    }