:root{
    /* Core surfaces (slightly deeper for contrast) */
    --bg: #eff4fb;
    --surface: #ffffff;
    --surface2: #eef5ff;
    --text: #0b1220;
    --muted: #44556b;
    --line: rgba(15,40,84,0.12);

    /* Brand palette (from your screenshot) */
    --navy:  #0F2854;
    --blue:  #1C4D8D;
    --mid:   #4988C4;
    --ice:   #BDE8F5;

    /* Use palette as “brand” */
    --brand:  var(--blue);
    --brand2: var(--mid);

    /* Keep your functional colors */
    --accent:#16a34a;
    --warn:#f59e0b;
    --bad:#ef4444;

    /* Shadows tuned a bit darker for definition */
    --shadow: 0 18px 45px rgba(15,40,84,0.12);
    --radius: 18px;
    --radius2: 14px;
    --max: 1120px;
  }


    *{box-sizing:border-box}
   body{
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      color: var(--text);
      background:
        radial-gradient(1100px 640px at 12% 0%, rgba(73,136,196,0.22), transparent 60%),
        radial-gradient(900px 520px at 88% 10%, rgba(28,77,141,0.20), transparent 55%),
        radial-gradient(760px 520px at 60% 110%, rgba(189,232,245,0.55), transparent 55%),
        var(--bg);
      line-height: 1.55;
    }


    a{color:inherit}
    .wrap{max-width:var(--max); margin:0 auto; padding:24px}
    .topbar{
      position: sticky; top:0; z-index:50;
      background: rgba(247,249,252,0.85);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--line);
    }
    .topbar .wrap{
      display:flex; align-items:center; justify-content:space-between;
      padding: 14px 24px;
    }

    /* Brand (external SVG file: /image/philreb.svg) */
    .brand{
      display:flex; align-items:center; gap:12px;
      text-decoration:none;
    }
    .brand img{display:block; height:40px}

    .nav{
      display:flex; gap:12px; align-items:center;
      font-size:14px; color:var(--muted);
    }
    .nav a{
      text-decoration:none;
      padding:8px 10px;
      border-radius: 12px;
      border:1px solid transparent;
    }
    .nav a:hover{
      background: var(--surface);
      border-color: var(--line);
      color: var(--text);
    }

    /* Icon helpers (Font Awesome) */
    .ico{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width: 1.15em;
    }
    .ico i{ font-size: 1em; line-height: 1; }

    .nav a .ico{ margin-right:8px; color: var(--muted); }
    .nav a:hover .ico{ color: var(--text); }

    .sectionTitle .ico{ margin-right:10px; color: var(--brand); }
    .card h3 .ico{ margin-right:8px; color: var(--brand); }

    /* List feature icons (Live site options) */
    .liIco{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width: 22px;
      height: 22px;
      border-radius: 8px;
      background: rgba(37,99,235,0.10);
      color: var(--brand);
      flex: 0 0 auto;
      margin-top: 1px;
    }
    .liIco i{ font-size: 12px; }


    /* Active nav state (used by tools.html) */
    .nav a.active{
      background: var(--surface);
      border-color: var(--line);
      color: var(--text);
    }

    .btn{
      appearance:none; border:0; cursor:pointer;
      padding:12px 14px; border-radius: 14px;
      font-weight: 800;
      color:#fff;
      background: linear-gradient(135deg, var(--blue), var(--mid));
      box-shadow: 0 18px 40px rgba(15,40,84,.18);
      text-decoration:none;
      display:inline-flex; align-items:center; gap:10px; justify-content:center;
      transition: transform .08s ease;
      white-space:nowrap;
    }
    .btn:active{transform: translateY(1px)}
    .btn.secondary{
      background: rgba(189,232,245,0.35);
      color: var(--navy);
      border: 1px solid rgba(15,40,84,0.14);
      box-shadow:none;
    }


    /* HERO with background image */
    .hero{
      padding: 22px 0 6px;
    }
    .heroCard{
      border: 1px solid var(--line);
      background: var(--surface);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow:hidden;
    }

    .heroMedia{
      position: relative;
      min-height: 320px;
      border-bottom: 1px solid rgba(255,255,255,0.14);
      background:
        radial-gradient(900px 520px at 10% 20%, rgba(189,232,245,0.25), transparent 60%),
        radial-gradient(800px 520px at 90% 30%, rgba(73,136,196,0.35), transparent 60%),
        linear-gradient(135deg, var(--navy), var(--blue), var(--mid));
    }


    .heroMedia::after{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(700px 420px at 20% 30%, rgba(37,99,235,0.20), transparent 65%),
        radial-gradient(700px 420px at 70% 30%, rgba(14,165,233,0.16), transparent 65%);
      pointer-events:none;
    }
    .heroContent{
      position:absolute;
      inset:0;
      display:flex;
      align-items:flex-end;
      padding: 24px;
    }

    /* Give the hero kicker pill breathing room from the top */
    .hero .kicker{
      margin-top: 12px;
    }

    /* Adds top padding inside the hero text container */
    .hero .heroText{
      padding-top: 12px;
    }

    /* Contact hero uses same hero structure; just adjust gradient if desired */
    .contactHero .heroMedia{
      background:
        radial-gradient(900px 520px at 10% 20%, rgba(189,232,245,0.20), transparent 60%),
        radial-gradient(820px 520px at 90% 30%, rgba(73,136,196,0.35), transparent 60%),
        linear-gradient(135deg, #0F2854, #1C4D8D, #4988C4);
    }

    /* CONTACT HERO — align with shared hero layout */
    .contactPage .contactHero .heroBottom{
      padding: 14px 22px 18px;
    }

    .contactPage .contactHeroMeta{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      width: 100%;
    }

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


    /* Contact hero spacing alignment (matches web.html rhythm) */
      .contactPage .contactHero .heroMedia{
        padding: 26px 26px 18px; /* more top, slightly less bottom */
      }

      .contactPage .contactHero .kicker{
        margin-bottom: 14px;
      }

      .contactPage .contactHero h1{
        margin: 0 0 12px; /* consistent title spacing */
      }

      .contactPage .contactHero .heroLead{
        margin: 0;
        max-width: 78ch;
        line-height: 1.55;
      }

      .contactPage .contactHero .heroActions{
        margin-top: 18px;          /* <-- key: gives space after paragraph */
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
      }

      /* Space between hero (blue) and meta cards */
      .contactPage .contactHero .heroBottom{
        padding: 18px 26px 22px;   /* more breathing room around meta row */
      }

      .contactPage .contactHeroMeta{
        gap: 14px;                 /* slightly more spacing between meta cards */
      }


    .heroText{
      max-width: 820px;
      color: #fff;
    }
    .kicker{
    display: inline-flex;
    gap: 10px;
    align-items: center;

    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;

    padding: 10px 14px;
    border-radius: 999px;

    background: linear-gradient(
      180deg,
      rgba(10,20,35,0.95),
      rgba(10,20,35,0.85)
    );
    border: 1px solid rgba(255,255,255,0.18);
    color: #EAF2FF;

    box-shadow:
      0 6px 18px rgba(0,0,0,0.35),
      inset 0 1px 0 rgba(255,255,255,0.06);
  }

    h1{
      margin: 14px 0 10px;
      font-size: clamp(28px, 3.2vw, 46px);
      line-height: 1.08;
      letter-spacing: -0.5px;
    }
    .heroLead{
      margin:0;
      font-size: 16px;
      color: rgba(255,255,255,0.92);
      max-width: 70ch;
    }
    .heroBottom{
      padding: 18px 24px 22px;
      display:flex;
      gap:14px;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
    }
    .heroChips{
      display:flex; gap:10px; flex-wrap:wrap;
      color: var(--muted);
      font-size: 13px;
    }
    .chip{
      display:inline-flex; gap:8px; align-items:center;
      padding: 8px 10px;
      background: var(--surface2);
      border: 1px solid var(--line);
      border-radius: 999px;
    }
    .heroActions{display:flex; gap:12px; flex-wrap:wrap}

    section{padding: 26px 0}
    .sectionTitle{margin:0 0 10px; font-size:20px}
    .sectionSub{margin:0 0 18px; color:var(--muted); max-width: 95ch}

    .grid3{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }
    .grid2{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    .card{
      background: var(--surface);
      border: 1px solid rgba(15,40,84,0.12);
      border-radius: var(--radius2);
      box-shadow: 0 18px 45px rgba(15,40,84,0.10);
      padding: 16px;
    }

    .card h3{margin:0 0 8px; font-size:15px}
    .card p{margin:0; color:var(--muted); font-size:14px}
    .tagRow{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
    .tag{
      font-size: 12px;
      color: #0b1220;
      background: #e9f2ff;
      border: 1px solid #d7e6ff;
      padding: 6px 10px;
      border-radius: 999px;
      font-weight: 700;
    }

    #live .compareSub{
      margin: 8px 0 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.5;
    }

    #live .featSub{
      display:block;
      margin-top:6px;
      font-size:12.5px;
      line-height:1.45;
      color: var(--muted);
      font-weight: 500;
    }


    /* Steps */
    .steps{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }
    .step{
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius2);
      box-shadow: var(--shadow);
      padding: 16px;
      position:relative;
    }
    .num{
      width:34px; height:34px; border-radius: 12px;
      display:grid; place-items:center;
      font-weight: 900;
      color:#fff;
      background: linear-gradient(135deg, var(--brand), var(--brand2));
      box-shadow: 0 14px 30px rgba(37,99,235,.15);
      margin-bottom: 10px;
    }
    .step p{color:var(--muted); margin:0; font-size:14px}

    /* Live sites */
    .planHeader{
      display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap;
    }
    .priceNote{
      font-size: 12px;
      color: var(--muted);
      background: var(--surface2);
      border: 1px solid var(--line);
      padding: 8px 10px;
      border-radius: 12px;
    }
    ul.clean{list-style:none; padding:0; margin: 12px 0 0; display:grid; gap:10px}
    li.item{
      display:flex; gap:10px; align-items:flex-start;
      color: var(--muted);
      font-size: 14px;
      padding: 10px 12px;
      border: 1px solid var(--line);
      background: var(--surface2);
      border-radius: 12px;
    }
    .dot{
      width:10px; height:10px; border-radius: 50%;
      margin-top: 7px;
      background: linear-gradient(135deg, var(--brand), var(--brand2));
      flex: 0 0 auto;
    }

    /* Score section */
    .scoreWrap{
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 18px;
    }
    .scoreGrid{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-top: 12px;
    }
    .scoreCard{
      border:1px solid var(--line);
      border-radius: 16px;
      background: var(--surface2);
      padding: 14px;
    }
    .scoreTop{display:flex; align-items:center; justify-content:space-between; gap:8px}
    .scoreName{font-weight:900; font-size:13px}
    .scoreVal{
      font-weight: 900;
      font-size: 18px;
      padding: 6px 10px;
      border-radius: 12px;
      background: #ecfdf5;
      border: 1px solid #bbf7d0;
      color: #065f46;
    }
    .bar{
      height: 8px;
      border-radius: 999px;
      background: rgba(15,40,84,0.18);
      overflow:hidden;
      margin-top: 10px;
    }
    .bar > span{
      display:block;
      height: 100%;
      width: 0%;
        background: linear-gradient(90deg, var(--blue), var(--mid));
    }
    .scoreHint{margin:10px 0 0; color:var(--muted); font-size:13px}

    /* Contact */
    .contactCard{
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 18px;
    }
    label{display:block; font-size:13px; color:var(--muted); margin:0 0 6px}
    input{
      width: 100%;
      padding: 12px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: #fff;
      color: var(--text);
      outline:none;
    }
    input:focus{border-color: rgba(37,99,235,.40)}
    .small{
      color: var(--muted);
      font-size: 12px;
      margin: 10px 0 0;
    }
    .notice{
      background: #fff7ed;
      border: 1px solid #fed7aa;
      border-radius: 14px;
      padding: 10px 12px;
      color: #7c2d12;
      font-size: 13px;
      margin-bottom: 12px;
    }
    .ok{
      background: #ecfdf5;
      border: 1px solid #bbf7d0;
      color: #065f46;
      padding: 10px 12px;
      border-radius: 14px;
      font-size: 13px;
      margin-top: 12px;
      display:none;
    }
    .err{
      background: #fef2f2;
      border: 1px solid #fecaca;
      color: #7f1d1d;
      padding: 10px 12px;
      border-radius: 14px;
      font-size: 13px;
      margin-top: 12px;
      display:none;
    }

    footer{
      border-top: 1px solid var(--line);
      margin-top: 26px;
      padding: 22px 0 28px;
      color: var(--muted);
      font-size: 13px;
    }
    .footerRow{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:center}
    .tinyLinks{display:flex; gap:10px; flex-wrap:wrap}
    .tinyLinks a{color:var(--muted); text-decoration:none}
    .tinyLinks a:hover{color:var(--text)}

    /* Responsive */
    @media (max-width: 980px){
      .nav{display:none}
      .grid3, .grid2, .steps{grid-template-columns: 1fr}
      .scoreGrid{grid-template-columns: 1fr 1fr}
      .heroMedia{min-height: 320px}
    }
    @media (max-width: 520px){
      .scoreGrid{grid-template-columns: 1fr}
      .brand img{height:36px}
    }

        .brand{
      display:flex;
      align-items:center;
      text-decoration:none;
    }

    .wordmark{
      display:flex;
      flex-direction:column;
      line-height:1.05;
    }

    .wordmark .name{
      font-size:22px;
      font-weight:900;
      letter-spacing:-0.4px;
      color:#0f172a;
    }

    .wordmark .tagline{
      font-size:11.5px;
      font-weight:600;
      letter-spacing:.3px;
      color:#475569;
    }

    /* Mobile refinement */
    @media (max-width:520px){
      .wordmark .name{font-size:20px}
      .wordmark .tagline{font-size:11px}
    }

    .cardAction {
      margin-top: 16px;
      text-align: center;
    }

    .btn-primary {
      display: inline-block;
      padding: 10px 18px;
      background: #0d6efd; /* PHILREB blue */
      color: #fff;
      font-weight: 600;
      font-size: 14px;
      border-radius: 6px;
      text-decoration: none;
      transition: all 0.25s ease;
    }

    .btn-primary:hover {
      background: #084ec1;
      transform: translateY(-1px);
    }

    .directChat {
      margin-top: 24px;
      padding-top: 18px;
      border-top: 1px dashed rgba(255,255,255,0.15);
      text-align: center;
    }

    .directChatLabel {
      margin: 0 0 10px;
      font-size: 14px;
      color: var(--muted);
    }

    .directChatActions {
      display: flex;
      gap: 12px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .chatBtn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 600;
      text-decoration: none;
      color: #fff;
      transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
    }

    .chatBtn i {
      font-size: 18px;
    }

    .chatBtn:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 16px rgba(0,0,0,0.25);
      opacity: 0.95;
    }

    /* Brand colors */
    .chatBtn.whatsapp {
      background: #25D366;
    }

    .chatBtn.viber {
      background: #7360F2;
    }


/* =========================
   Tools page layout + form components (scoped)
   ========================= */
.toolsPage .gridTwo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 900px){ .toolsPage .gridTwo { grid-template-columns: 1fr; } }

.toolsPage .form .field { display: grid; gap: 6px; margin-bottom: 12px; }
.toolsPage .fieldRow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px){ .toolsPage .fieldRow { grid-template-columns: 1fr; } }

.toolsPage .divider { border: none; border-top: 1px solid var(--line); margin: 16px 0; }

.toolsPage .resultValue { font-size: 20px; font-weight: 800; }
.toolsPage .resultValueLg { font-size: 34px; font-weight: 900; margin-top: 4px; }
.toolsPage .resultTop { display:flex; justify-content: space-between; gap: 12px; }
.toolsPage .resultMain { margin-top: 12px; }

.toolsPage .breakdown { display:grid; gap: 8px; }
.toolsPage .muted { color: var(--muted); font-size: 13px; }
.toolsPage .subTitle { margin: 0 0 8px; font-size: 16px; color: var(--muted); }

.toolsPage .status{ margin-top: 6px; font-size: 12px; }
.toolsPage .status.ok{ color: #15803d; }
.toolsPage .status.err{ color: #b91c1c; }

/* =========================
   Tools page — clean professional theme
   Scoped to .toolsPage so other pages remain unchanged
   ========================= */

/* Tools layout primitives (kept scoped so index.html stays unchanged) */
.toolsPage .section{ padding: 26px 0; }

.toolsPage .gridTwo{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

@media (max-width: 900px){
  .toolsPage .gridTwo{ grid-template-columns: 1fr; }
}

/* tools.html uses the same .topbar/.brand/.nav rules as index.html */

.toolsPage .sectionTitle{
  font-size: 34px;
  letter-spacing: -0.02em;
  margin: 18px 0 10px;
}
.toolsPage .sectionSub{
  color: #475569;
  opacity: 1;
}

.toolsPage .toolsMeta{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 6px;
}
.toolsPage .pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #e6eaf0;
  color: #334155;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(15,23,42,.03);
}
.toolsPage .pillSoft{
  background: #f9fbff;
}

.toolsPage .gridTwo{ gap: 22px; }

.toolsPage .card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius2);
  padding: 18px;
  box-shadow: var(--shadow);
}

.toolsPage .cardTitle{
  display:flex;
  align-items:center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
}

.toolsPage label{
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}

.toolsPage input,
.toolsPage select{
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid #dbe2ea;
  background: #ffffff;
  color: #0f172a;
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}

.toolsPage input::placeholder{ color: #94a3b8; }

.toolsPage input:focus,
.toolsPage select:focus{
  border-color: #93c5fd;
  box-shadow: 0 0 0 4px rgba(59,130,246,.15);
}

.toolsPage .hint{
  font-size: 12px;
  color: #64748b;
  opacity: 1;
}

.toolsPage .notice{
  background: #f8fafc;
  border: 1px solid #e6eaf0;
  color: #334155;
}

.toolsPage .actions{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.toolsPage .btnPrimary,
.toolsPage .btnGhost{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
}

.toolsPage .btnPrimary{
  border: 1px solid #1d4ed8;
  background: linear-gradient(180deg, #2563eb, #1d4ed8);
  color: #ffffff;
  box-shadow: 0 10px 20px rgba(37,99,235,.18);
}
.toolsPage .btnPrimary:hover{ filter: brightness(1.02); transform: translateY(-1px); }
.toolsPage .btnPrimary:active{ transform: translateY(0px); }

.toolsPage .btnGhost{
  background: #ffffff;
  border: 1px solid #dbe2ea;
  color: #0f172a;
}
.toolsPage .btnGhost:hover{ background:#f3f6fb; }

.toolsPage .icon{ display:block; }
.toolsPage .iconTitle{ color: #1d4ed8; }

.toolsPage .divider{
  border-top: 1px solid #e6eaf0;
  margin: 16px 0;
}

.toolsPage .resultTop{
  background:#f8fafc;
  border: 1px solid #e6eaf0;
  border-radius: 14px;
  padding: 12px;
}

.toolsPage .resultLabel{
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.toolsPage .resultValue{ color:#0f172a; }
.toolsPage .resultValueLg{ color:#0f172a; }

.toolsPage .resultMain{
  background:#ffffff;
  border: 1px solid #e6eaf0;
  border-radius: 14px;
  padding: 12px;
  margin-top: 12px;
}

.toolsPage .breakdown{
  margin-top: 12px;
  padding: 12px;
  border: 1px dashed #dbe2ea;
  border-radius: 14px;
  background:#ffffff;
}

.toolsPage .breakRow{
  padding: 6px 0;
  border-bottom: 1px solid #eef2f7;
}
.toolsPage .breakRow:last-child{ border-bottom: none; }

.toolsPage .muted{ opacity: 1; color:#64748b; }

.toolsPage .status{ font-size: 12px; margin-top: 6px; }
.toolsPage .status.ok{ color: #15803d; }
.toolsPage .status.err{ color: #b91c1c; }

/* Tools: add space below the Lookup button before next input */
.toolsPage #lookupBtn{
  margin-bottom: 20px;
}

/* Breakdown rows: prevent right value from wrapping/squeezing */
.toolsPage .breakRow{
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  column-gap: 16px;
  align-items: start;
}

.toolsPage .breakRow > span:last-child{
  text-align: right;
  white-space: nowrap;     /* keep value on one line */
}

.toolsPage .breakRow .lbl{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}

.toolsPage .breakRow .lbl .t{
  display: block; /* force its own line */
}

/* optional: clamp very long descriptions so they don't get too tall */
.toolsPage .breakRow .lbl .sub{
  font-size: 11px;
  color: #2c333d;   /* lighter muted */
  font-weight: 400; /* normal weight */
  margin-top: 1px;
}

/* NEW UI */
/* =========================
   Tools UI icon enhancements
   ========================= */
.toolsPage .pill{
  position: relative;
  padding-left: 34px; /* room for icon */
}

.toolsPage .pill::before{
  content:"";
  position:absolute;
  left:10px;
  top:50%;
  transform: translateY(-50%);
  width:16px;
  height:16px;
  opacity:.95;
  background: currentColor;
  border-radius: 4px;

  /* default icon (fallback) */
  -webkit-mask: var(--pill-ico) no-repeat center / contain;
  mask: var(--pill-ico) no-repeat center / contain;
}

/* Pill icons via CSS variables (no extra assets needed) */
.toolsPage .pill.pillZonal{ --pill-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 12a8 8 0 1 1-16 0a8 8 0 0 1 16 0ZM12 7a1 1 0 0 0 0 2h1a1 1 0 1 1 0 2h-2a1 1 0 0 0 0 2h1v1a1 1 0 1 0 2 0v-1a3 3 0 0 0 0-6h-1V7a1 1 0 0 0-1-1Z'/%3E%3C/svg%3E"); }
.toolsPage .pill.pillLocation{ --pill-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 10a3 3 0 1 1 0-6a3 3 0 0 1 0 6Z'/%3E%3C/svg%3E"); }
.toolsPage .pill.pillBreakdown{ --pill-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 19V5a2 2 0 0 1 2-2h12v2H6v14h14v2H6a2 2 0 0 1-2-2Zm5-2V9h2v8H9Zm4 0V7h2v10h-2Zm4 0v-5h2v5h-2Z'/%3E%3C/svg%3E"); }

/* Inputs with icons */
.toolsPage .fieldIcon{
  position: relative;
}

.toolsPage .fieldIcon .miniIco{
  position:absolute;
  left: 12px;
  top: 39px; /* aligns under label */
  width: 16px;
  height: 16px;
  color: #1d4ed8;
  opacity: .95;
  pointer-events:none;
}

.toolsPage .fieldIcon input{
  padding-left: 40px;
}

/* Breakdown row icon column */
.toolsPage .breakRow .lbl{
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}

.toolsPage .rowIco{
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: #1d4ed8;
  opacity: .95;
  flex: 0 0 auto;
}

.toolsPage .lblText{
  display:flex;
  flex-direction:column;
  gap: 3px;
  min-width: 0;
}

/* =========================
   Step header UI (1,2,3,4)
   ========================= */

.toolsPage .stepTitle{
  display:flex;
  align-items:center;
  gap:12px;
  margin: 0 0 10px;
}

.toolsPage .stepBadge{
  width:34px;
  height:34px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:14px;
  color:#fff;
  background:#0f2a56; /* default navy */
  flex:0 0 auto;
  box-shadow: 0 10px 20px rgba(15,42,86,.15);
}

.toolsPage .stepIcon{
  width:18px;
  height:18px;
  color:#1d4ed8;
  opacity:.95;
  flex:0 0 auto;
}

.toolsPage .stepH{
  font-size:18px;
  font-weight:800;
  margin:0;
  color:#0f172a;
}

/* colored step badges */
.toolsPage .step1 .stepBadge{ background:#1d4ed8; }  /* blue */
.toolsPage .step2 .stepBadge{ background:#0ea5e9; }  /* sky */
.toolsPage .step3 .stepBadge{ background:#0f2a56; }  /* navy */
.toolsPage .step4 .stepBadge{ background:#334155; }  /* slate */




/* =========================
   Step 1 header (Property Inputs)
   ========================= */
.toolsPage .stepTitle{
  display:flex;
  align-items:center;
  gap:12px;
  margin: 0 0 10px;
}

.toolsPage .stepBadge{
  width:34px;
  height:34px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:14px;
  color:#fff;
  background:#1d4ed8; /* Step 1 blue */
  flex:0 0 auto;
  box-shadow: 0 10px 20px rgba(29,78,216,.15);
}

.toolsPage .stepH{
  font-size:18px;
  font-weight:800;
  margin:0;
  color:#0f172a;
}

/* Step 2 (Property Details) badge color */
.toolsPage .stepTitle.step2 .stepBadge{
  background:#1d4ed8; /* sky */
  box-shadow: 0 10px 20px rgba(14,165,233,.15);
}

/* Step 3 (Result) badge color */
.toolsPage .stepTitle.step3 .stepBadge{
  background:#1d4ed8; /* navy */
  box-shadow: 0 10px 20px rgba(15,42,86,.18);
}

/* Step 4 (Breakdown) badge color */
.toolsPage .stepTitle.step4 .stepBadge{
  background:#1d4ed8; /* slate */
  box-shadow: 0 10px 20px rgba(51,65,85,.18);
}

/* Fallback: Step headers even if not inside .toolsPage */
.stepTitle{
  display:flex;
  align-items:center;
  gap:12px;
  margin: 0 0 10px;
}

.stepBadge{
  width:34px;
  height:34px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:14px;
  color:#fff;
  background:#1d4ed8;
  flex:0 0 auto;
  box-shadow: 0 10px 20px rgba(29,78,216,.15);
}

.stepH{
  font-size:18px;
  font-weight:800;
  margin:0;
  color:#0f172a;
}

/* Step 4 color */
.stepTitle.step4 .stepBadge{
  background:#1d4ed8; /* slate */
  box-shadow: 0 10px 20px rgba(51,65,85,.18);
}

/* =========================
   Step 1 Location "blue panel"
   ========================= */
/* GMAP-only panel (clean like mock) */
.locationPanel{
  background: #3f83bf;
  border-radius: 10px;
  padding: 14px;
  margin-top: 10px;
  color: #eaf2ff;
}

.locationPanel label{
  color: #eaf2ff;
  font-weight: 700;
  font-size: 12px;
}

.locationPanel .hint{
  color: rgba(234,242,255,.85);
  font-size: 12px;
}

/* Inputs inside panel */
.locationPanel input{
  background: #ffffff;
  border: 1px solid rgba(255,255,255,.35);
}

/* Make Lookup button not huge */
.locationPanel .actions{
  display: flex;
  justify-content: flex-start;
}

.locationPanel .btnLookup{
  width: 180px;
  border-radius: 8px;
  background: #0f3f73;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: none;
}

/* Widen GMAP lookup button */
.locationPanel .btnLookup{
  width: 100%;              /* full width */
  max-width: 320px;         /* keeps it elegant on desktop */
  padding: 12px 16px;
  font-weight: 700;
}

/* Space after GMAP panel before Step 2 */
.locationPanel{
  margin-bottom: 28px;
}

/* =====================================================
   TOOLS — FINAL UI OVERRIDES (CLEAN & DEDUPED)
   ===================================================== */

/* ===== Estimated Selling Price (Primary Result Card) ===== */
.toolsPage .resultMain{
  background: #0F2854;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 12px;
  margin-top: 12px;
}

.toolsPage .resultMain .resultLabel{
  color: rgba(255,255,255,0.80);
}

.toolsPage .resultMain .resultValueLg{
  color: #ffffff;
}

.toolsPage .resultMain #capNote{
  color: rgba(255,255,255,0.70);
}

/* ===== Email valuation report button ===== */
.toolsPage .reportActions{
  margin-top: 14px;
}

.toolsPage .emailReportBtn{
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 14px 16px;
  border-radius: 10px;
  border: 0;

  cursor: pointer;
  font-weight: 800;
  font-size: 14px;
  color: #ffffff;

  background: #f97316;
  box-shadow: 0 10px 22px rgba(249,115,22,0.25);

  transition: transform .08s ease, filter .15s ease;
}

.toolsPage .emailReportBtn:hover{
  filter: brightness(0.98);
  transform: translateY(-1px);
}

.toolsPage .emailReportBtn:active{
  transform: translateY(0);
}

.toolsPage .emailReportBtn .btnIco{
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  opacity: .95;
}

/* ===== Amenity breakdown (sub-details under Amenity Adjustments) ===== */
.toolsPage .amenitySub{
  margin: 6px 0 4px;
  padding-left: 28px; /* aligns under row icon */
}

.toolsPage .breakSubRow{
  padding: 4px 0;
  border-bottom: 0;
  opacity: .95;
}

.toolsPage .breakSubRow .lbl .sub{
  display: none;
}

.toolsPage .breakSubRow .lbl .t{
  font-weight: 600;
  font-size: 12px;
  color: #334155;
}


/* =========================
   Estimated Selling Price (Result Main card)
   ========================= */
.toolsPage .resultMain{
  background: #0F2854;
  border-color: rgba(255,255,255,0.12);
}

.toolsPage .resultMain .resultLabel{
  color: rgba(255,255,255,0.80);
}

.toolsPage .resultMain .resultValueLg{
  color: #ffffff;
}

.toolsPage .resultMain #capNote{
  color: rgba(255,255,255,0.70);
}

/* =====================================================
   CONTACT PAGE (scoped)
   ===================================================== */
.contactPage .contactHero{
  padding: 22px 0 6px;
}

.contactPage .contactHeroCard{
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}


.contactPage .contactHeroActions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top: 14px;
}

.contactPage .contactHeroMeta{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 14px 22px 18px;
}

.contactPage .metaItem{
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
}

.contactPage .metaLabel{
  font-size: 12px;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.contactPage .metaVal{
  margin-top: 4px;
  font-weight: 900;
  color: #0f172a;
}

.contactPage .contactGrid{
  padding: 22px 0 10px;
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 14px;
  align-items: start;
}

.contactPage .contactSide .card{
  box-shadow: var(--shadow);
}

.contactPage .contactBtns{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top: 12px;
}

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


/* =====================================================
   CONTACT PAGE (scoped)
   ===================================================== */
.contactPage .contactGrid{
  padding: 22px 0 10px;
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 14px;
  align-items: start;
}

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



/* =====================================================
   CONTACT PAGE (scoped)
   ===================================================== */
.contactPage .contactHero{
  padding: 22px 0 6px;
}

.contactPage .contactHeroCard{
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.contactPage .contactHeroTop{
  padding: 22px 22px 12px;
  background:
    radial-gradient(900px 520px at 10% 0%, rgba(14,165,233,0.14), transparent 60%),
    radial-gradient(900px 520px at 90% 10%, rgba(37,99,235,0.14), transparent 60%),
    linear-gradient(180deg, #ffffff, #fbfdff);
  border-bottom: 1px solid var(--line);
}

.contactPage .contactKicker{
  display:inline-flex;
  gap:10px;
  align-items:center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #1d4ed8;
  background: #eef6ff;
  border: 1px solid #d7e6ff;
  padding: 8px 10px;
  border-radius: 999px;
}

.contactPage .contactTitle{
  margin: 12px 0 6px;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.4px;
}

.contactPage .contactLead{
  margin: 0;
  color: var(--muted);
  max-width: 85ch;
}

/* ✅ THIS is the missing 2-column layout */
.contactPage .contactGrid{
  padding: 22px 0 10px;
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 14px;
  align-items: start;
}

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


/* =========================================
   HERO — Mobile Fix (prevents clipping/overlap)
   ========================================= */

/* On mobile, let hero content FLOW instead of absolute overlay */
@media (max-width: 820px){

  .hero{ padding: 14px 0 6px; }

  /* Let the blue area grow with content */
  .heroMedia{
    min-height: 0 !important;      /* stop forcing a short fixed panel */
    height: auto !important;
    padding: 18px !important;      /* creates top/bottom breathing room */
  }

  /* Remove absolute positioning that causes clipping */
  .heroContent{
    position: relative !important;
    inset: auto !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: 0 !important;
  }

  /* Keep text readable and inside the panel */
  .heroText{
    max-width: 100% !important;
    padding-top: 0 !important;
  }

  /* Kicker pill should not float or get clipped */
  .hero .kicker,
  .kicker{
    transform: none !important;
    margin: 0 0 12px 0 !important;
  }

  /* Headline sizing for small screens */
  .hero h1{
    margin: 0 0 10px !important;
    font-size: 34px !important;
    line-height: 1.06 !important;
  }

  .heroLead{
    font-size: 15px !important;
  }

  /* Bottom area spacing */
  .heroBottom{
    padding: 14px 18px 18px !important;
    gap: 12px !important;
  }

  .heroChips{
    gap: 10px !important;
  }

  .chip{
    white-space: normal !important;
  }
}

/* Extra-small phones: stack buttons nicely */
@media (max-width: 520px){
  .heroActions{
    width: 100% !important;
  }
  .heroActions .btn{
    width: 100% !important;
    justify-content: center !important;
  }
}



/* ========= Font Awesome icon helpers (shared) ========= */
.ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 1.15em;
  margin-right: 8px;
  color: var(--muted);
}
.ico i{ font-size: 1em; line-height: 1; }

.nav a:hover .ico{ color: var(--text); }

/* “Dot replacement” icon badge for list rows */
.liIco{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 22px;
  height: 22px;
  border-radius: 8px;
  background: rgba(28,77,141,0.10);
  border: 1px solid rgba(15,40,84,0.10);
  color: var(--blue);
  flex: 0 0 auto;
  margin-top: 2px;
}
.liIco i{ font-size: 12px; line-height: 1; }

/* Make existing .item rows align nicely when icon is first */
.item{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.item b{ font-weight: 800; }

.btn .ico{ color: inherit; }

/* 404 only: header should only show the left brand */
.page404 .topbar .wrap{
  justify-content: flex-start;
  gap: 0;
}

/* 404 only: hide everything except the brand */
.page404 .topbar .wrap > :not(.brand){
  display: none !important;
}


/* Term cards: 2-row layout so nothing gets squeezed */
.termCards{
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.termCard{
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.02);
  border-radius: 16px;
  padding: 12px;
}

.termTop{
  display: grid;
  grid-template-columns: 90px 1fr 1fr;
  gap: 10px;
  align-items: start;
}
@media (max-width: 560px){
  .termTop{ grid-template-columns: 1fr; }
}

.termBottom{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
@media (max-width: 920px){
  .termBottom{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.mini{
  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
  border-radius: 14px;
  padding: 10px;
}
.mini .k{ font-size: 11.5px; font-weight: 800; opacity: .70; text-transform: uppercase; letter-spacing: .02em; }
.mini .v{ margin-top: 4px; font-weight: 900; font-size: 14px; }

.termTitle{
  font-weight: 900;
  font-size: 14px;
}

.bigValue{
  font-weight: 950;
  font-size: 16px;
}

.badgeRow{ display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }


/* Table wrapper so it never breaks layout */
.loanPage .loanTableWrap{
  margin-top: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
}

/* Table styling */
.loanPage .loanTable{
  width: 100%;
  border-collapse: collapse;
  min-width: 980px; /* ensures readable desktop table; scrolls on small screens */
}

.loanPage .loanTable th,
.loanPage .loanTable td{
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.loanPage .loanTable th{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  font-weight: 900;
  background: #f8fafc;
  position: sticky;
  top: 0;
  z-index: 1;
}

.loanPage .loanTable td b{
  font-weight: 900;
}

.loanPage .loanTable .mono{
  font-variant-numeric: tabular-nums;
}

/* Mobile: convert to stacked "rows" */
@media (max-width: 720px){
  .loanPage .loanTable{
    min-width: 0;
    width: 100%;
  }
  .loanPage .loanTable thead{ display:none; }
  .loanPage .loanTable, 
  .loanPage .loanTable tbody, 
  .loanPage .loanTable tr, 
  .loanPage .loanTable td{
    display:block;
    width:100%;
  }
  .loanPage .loanTable tr{
    border-bottom: 1px solid var(--line);
    padding: 10px 12px;
  }
  .loanPage .loanTable td{
    border: none;
    padding: 6px 0;
  }
  .loanPage .loanTable td::before{
    content: attr(data-label);
    display:block;
    font-size: 12px;
    color: var(--muted);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 2px;
  }
}


/* ==============================
   Loan table typography tuning
   (apply once – affects all rows)
   ============================== */

.loanPage .loanTable{
  font-size: 14px;
}

.loanPage .loanTable th{
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .05em;
}

.loanPage .loanTable td{
  font-size: 14px;
  line-height: 1.4;
}

.loanPage .loanTable td b{
  font-weight: 800;
}

.loanPage .loanTable .mono{
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

/* Slight emphasis only on Final Qualified Max */
.loanPage .loanTable td[data-label="Final qualified max"] b{
  font-size: 15px;
}

/* Cell spacing */
.loanPage .loanTable th,
.loanPage .loanTable td{
  padding: 8px 10px;
}

/* Softer tags */
.loanPage .loanTable .tag{
  font-size: 12px;
  padding: 4px 8px;
  font-weight: 700;
}

/* Row separators */
.loanPage .loanTable tr{
  border-bottom: 1px solid rgba(15,40,84,.08);
}


/* Desired result badges */
.loanPage .tag.ok{
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  color: #065f46;
}

.loanPage .tag.no{
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #7f1d1d;
}

.loanPage .tag.neutral{
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #475569;
}