/* Scratch Spy - Website Styles */

:root{
    color-scheme: light only;
    --navy:#031228;
    --blue:#007BFD;
    --slate:#5A6B85;
    --mist:#F2F6FC;
    --ink:#0B0F1A;
    --white:#FFFFFF;
    --line:#E4E9F1;
    --radius:6px;
    --radius-lg:10px;
    --maxw:1180px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth; color-scheme: light only; background:#FFFFFF;}
  body{
    font-family:'Inter', -apple-system, sans-serif;
    color:var(--ink);
    background:var(--white);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    color-scheme: light only;
  }
  h1,h2,h3,.display{
    font-family:'Space Grotesk', sans-serif;
    color:var(--navy);
    font-weight:700;
    letter-spacing:-0.01em;
    line-height:1.08;
  }
  .mono{font-family:'IBM Plex Mono', monospace;}
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
  .eyebrow{
    font-family:'IBM Plex Mono', monospace;
    font-size:12.5px;
    font-weight:500;
    color:var(--blue);
    letter-spacing:0.12em;
    text-transform:uppercase;
    margin-bottom:14px;
  }
  .eyebrow::before{
    content:none;
  }
  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding:13px 26px; border-radius:var(--radius);
    font-weight:600; font-size:15px; font-family:'Inter',sans-serif;
    cursor:pointer; border:1px solid transparent; transition:all .15s ease;
  }
  .btn-primary{background:var(--navy); color:#fff;}
  .btn-primary:hover{background:#0a1f3d;}
  .btn-ghost{border-color:var(--line); color:var(--navy); background:transparent;}
  .btn-ghost:hover{border-color:var(--navy);}
  .btn-blue{background:var(--blue); color:#fff;}
  .btn-blue:hover{background:#0068d8;}

  /* NAV */
  nav{
    position:sticky; top:0; z-index:50;
    background:rgba(255,255,255,0.92);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  nav .inner{
    display:flex; align-items:center; justify-content:space-between;
    height:72px;
  }
  .brand{display:flex; align-items:center; gap:10px; font-family:'Space Grotesk'; font-weight:700; font-size:19px; color:var(--navy);}
  .brand img{width:30px; height:30px;}
  .navlinks{display:flex; align-items:center; gap:36px;}
  .navlinks a{font-size:14.5px; font-weight:500; color:var(--slate);}
  .navlinks a:hover{color:var(--navy);}
  .navcta{display:flex; align-items:center; gap:14px;}
  .mobile-only-cta{display:none;}
  .mobile-only-nav-controls{display:none;}
  .nav-toggle{
    display:none; flex-direction:column; justify-content:center; gap:5px;
    width:36px; height:36px; border:none; background:none; cursor:pointer; padding:0;
  }
  .nav-toggle span{display:block; width:22px; height:2px; background:var(--navy); border-radius:2px;}

  @media (max-width:960px){
    .navcta{display:none;}
    .nav-toggle{display:flex;}
    .navlinks{
      display:none; position:absolute; top:64px; left:0; right:0;
      flex-direction:column; align-items:stretch; gap:0;
      background:#fff; border-bottom:1px solid var(--line);
      padding:8px 20px 20px; box-shadow:0 12px 24px -8px rgba(3,18,40,0.15); z-index:60;
    }
    .navlinks.open{display:flex;}
    .navlinks a{padding:14px 0; border-top:1px solid var(--line); font-size:15.5px;}
    .navlinks a:first-child{border-top:none;}
    .mobile-only-cta{display:block; text-align:center; margin-top:14px;}
    .mobile-only-nav-controls{display:flex;}
  }

/* HERO */
  .hero{padding:88px 0 100px; overflow:hidden; background:#FFFFFF;}
  .hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:64px; align-items:center;}
  .hero h1{font-size:52px; margin-bottom:22px;}
  .hero h1 em{font-style:normal; color:var(--blue);}
  .hero p.lede{font-size:18px; color:var(--slate); max-width:480px; margin-bottom:32px; line-height:1.6;}
  .hero-actions{display:flex; gap:14px; margin-bottom:36px; min-width:0;}
  .hero-meta{display:flex; gap:28px; padding-top:24px; border-top:1px solid var(--line);}
  .hero-meta div{font-size:13px; color:var(--slate);}
  .hero-meta strong{display:block; font-family:'Space Grotesk'; font-size:22px; color:var(--navy); font-weight:700;}

  /* Signature visual: evidence assembly card */
  .evidence-card{
    background:var(--navy); border-radius:var(--radius-lg);
    padding:28px; color:#fff; position:relative;
    box-shadow:0 30px 60px -20px rgba(3,18,40,0.35);
  }
  .evidence-card .case-id{font-family:'IBM Plex Mono'; font-size:12px; color:#a7b6d1; margin-bottom:4px;}
  .evidence-card .case-title{font-family:'Space Grotesk'; font-weight:600; font-size:17px; margin-bottom:20px;}
  .ev-row{display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.08);}
  .ev-row:last-of-type{border-bottom:none;}
  .ev-dot{
    width:22px; height:22px; border-radius:50%; flex-shrink:0;
    border:1.5px solid #35476b; display:flex; align-items:center; justify-content:center;
    opacity:0.35;
  }
  .ev-row.on .ev-dot{background:var(--blue); border-color:var(--blue); opacity:1;}
  .ev-dot svg{width:11px; height:11px;}
  .ev-label{font-size:13.5px; color:#c3d0e5; flex:1;}
  .ev-row.on .ev-label{color:#fff;}
  .ev-time{font-family:'IBM Plex Mono'; font-size:11.5px; color:#a7b6d1;}
  .ev-result{
    margin-top:20px; padding-top:18px; border-top:1px dashed rgba(255,255,255,0.15);
    display:flex; align-items:center; justify-content:space-between;
    opacity:0; transform:translateY(6px);
    animation:reveal 0.5s ease forwards;
    animation-delay:2.6s;
  }
  .ev-result .conf{font-family:'IBM Plex Mono'; font-size:26px; font-weight:500; color:var(--white);}
  .ev-result .conf-label{font-size:11.5px; color:#a7b6d1;}
  @keyframes reveal{ to{opacity:1; transform:translateY(0);} }
  @media (prefers-reduced-motion: reduce){
    .ev-row, .ev-result{ animation:none !important; opacity:1 !important; transform:none !important; }
    .ev-row{opacity:1;}
    .ev-dot{opacity:1;}
  }
  @media (max-width:900px){
    .hero-grid{grid-template-columns:1fr; gap:48px;}
    .hero h1{font-size:38px;}
  }
  @media (max-width:600px){
    .wrap{padding:0 20px;}
    nav .inner{height:64px;}
    .navlinks{display:none;}
    .brand span{font-size:16px;}
    .brand img{width:24px; height:24px;}
    .hero{padding:48px 0 56px;}
    .hero h1{font-size:28px; line-height:1.15;}
    .hero br{display:none;}
    .hero p.lede{font-size:15.5px;}
    .hero-actions{flex-direction:column;}
    .hero-actions .btn{width:100%;}
    .hero-meta{flex-direction:column; gap:14px;}
    .evidence-card{padding:20px; max-width:100%;}
    .ev-time{display:none;}
  }

section{padding:96px 0; background:#FFFFFF;}
  .section-head{max-width:640px; margin-bottom:56px;}
  .section-head h2{font-size:36px; margin-bottom:16px;}
  .section-head p{font-size:17px; color:var(--slate); line-height:1.6;}

  /* PROBLEM */
  .problem{background:var(--mist);}
  .problem-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;}
  .problem-cell{background:#fff; padding:32px;}
  .problem-cell .num{font-family:'IBM Plex Mono'; font-size:12px; color:var(--slate); margin-bottom:14px;}
  .problem-cell h3{font-size:19px; margin-bottom:10px;}
  .problem-cell p{font-size:14.5px; color:var(--slate); line-height:1.6;}

  /* HOW IT WORKS */
  .steps{display:grid; grid-template-columns:repeat(5,1fr); gap:0; position:relative;}
  .steps::before{
    content:''; position:absolute; top:19px; left:10%; right:10%; height:1px; background:var(--line);
  }
  .step{position:relative; padding-right:16px;}
  .step-num{
    width:38px; height:38px; border-radius:50%; background:var(--navy); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-family:'IBM Plex Mono'; font-size:13px; margin-bottom:22px; position:relative; z-index:1;
  }
  .step h3{font-size:16px; margin-bottom:8px;}
  .step p{font-size:13.5px; color:var(--slate); line-height:1.55;}
  @media (max-width:900px){
    .problem-grid{grid-template-columns:1fr;}
    .steps{grid-template-columns:1fr; gap:32px;}
    .steps::before{display:none;}
  }
  @media (max-width:600px){
    section{padding:56px 0;}
    .wrap{padding:0 20px;}
    .section-head h2{font-size:26px;}
    .problem-cell{padding:24px;}
  }

/* INTEGRATIONS */
  .integrations{background:var(--navy); color:#fff;}
  .integrations .section-head h2{color:#fff;}
  .integrations .section-head p{color:#a7b6d1;}
  .vendor-row{display:flex; gap:14px; flex-wrap:wrap;}
  .vendor{
    border:1px solid #1c2c48; border-radius:var(--radius);
    padding:16px 24px; font-family:'Space Grotesk'; font-weight:600; font-size:16px;
    color:#d7e0f0; background:#0a1b36;
  }
  .vendor.plus{color:#a7b6d1; font-weight:500; font-family:'Inter'; font-size:14px;}

  /* PRICING */
  .pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
  .currency-select-row{display:flex; align-items:center; gap:10px; margin-bottom:28px;}
  .currency-select-row label{font-size:13.5px; color:var(--slate); font-weight:500;}
  .currency-select-row select{
    font-family:'Inter',sans-serif; font-size:14px; color:var(--navy); font-weight:600;
    padding:8px 14px; border-radius:var(--radius); border:1px solid var(--line);
    background:#fff; cursor:pointer;
  }
  /* A real, fully-controlled replacement for the native select above
     (kept only as a hidden value-holder for existing JS to read), the
     EU flag's twelve small stars were an unreadable blur at native
     select font sizes, no browser lets you enlarge just the glyph
     inside a closed <select>, this renders it at a real, legible size
     instead, the same fix already proven for the language dropdown. */
  .currency-dropdown-btn{
    display:flex; align-items:center; gap:9px; font-family:'Inter',sans-serif; font-size:14px;
    color:var(--navy); font-weight:600; padding:8px 14px; border-radius:var(--radius);
    border:1px solid var(--line); background:#fff; cursor:pointer;
  }
  .currency-dropdown-btn:hover{ border-color:var(--blue); background:var(--mist); }
  .currency-dropdown-btn svg{ color:var(--slate); flex-shrink:0; margin-left:2px; }
  .price-note{font-size:12.5px; color:var(--slate); margin-top:24px;}
  .plan{border:1px solid var(--line); border-radius:var(--radius-lg); padding:32px; display:flex; flex-direction:column;}
  .plan.featured{border-color:var(--blue); box-shadow:0 0 0 1px var(--blue);}
  .plan-beta{position:relative;}
  .beta-badge{
    position:absolute; top:-11px; right:20px;
    background:var(--navy); color:#fff; font-family:'IBM Plex Mono';
    font-size:11px; font-weight:600; letter-spacing:1px;
    padding:4px 12px; border-radius:20px;
  }
  .plan .tag{font-family:'IBM Plex Mono'; font-size:11.5px; color:var(--blue); margin-bottom:14px;}
  .plan h3{font-size:22px; margin-bottom:6px;}
  .plan .price{font-family:'Space Grotesk'; font-size:34px; font-weight:700; color:var(--navy); margin:14px 0 4px;}
  .plan .price span{font-size:14px; font-weight:500; color:var(--slate);}
  .plan .price .price-value{font-size:34px; font-weight:700; color:var(--navy);}
  .plan .price .price-prefix{font-size:16px; font-weight:500; color:var(--slate); margin-right:2px;}
  .plan ul{list-style:none; margin:24px 0; flex:1;}
  .plan li{font-size:14px; color:var(--ink); padding:8px 0; border-top:1px solid var(--line); display:flex; gap:10px;}
  .plan li:first-child{border-top:none;}
  .plan li::before{content:'-'; color:var(--blue); flex-shrink:0;}
  .plan-note{font-size:11.5px; color:var(--slate); line-height:1.5; margin-bottom:16px;}
  .plan > a.btn{margin-top:auto;}

  /* FOUNDING CTA */
  .founding{background:var(--mist);}
  .founding-box{
    background:var(--navy); border-radius:var(--radius-lg); padding:56px;
    display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:center; color:#fff;
  }
  .founding-box h2{color:#fff; font-size:30px; margin-bottom:14px;}
  .founding-box p{color:#a7b6d1; font-size:15.5px; line-height:1.6;}
  .founding-list{list-style:none;}
  .founding-list li{font-size:14.5px; padding:8px 0; border-top:1px solid #1c2c48; display:flex; gap:10px; color:#d7e0f0;}
  .founding-list li:first-child{border-top:none;}
  .founding-list li::before{content:'✓'; color:var(--blue); font-weight:700;}

  /* FOOTER */
  footer{border-top:1px solid var(--line); padding:48px 0;}
  .footer-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;}
  .footer-brand{display:flex; align-items:center; gap:10px; font-family:'Space Grotesk'; font-weight:700; color:var(--navy);}
  .footer-brand img{width:24px; height:24px;}
  footer .fine{font-size:13px; color:var(--slate);}
  .footer-contact{display:flex; align-items:center; gap:16px;}
  .footer-link{text-decoration:none; font-weight:600; color:var(--slate);}
  /* A real, visible entry point for insurance partners, not another
     plain text link buried among legal boilerplate, this is a genuine,
     built feature (the partner portal) that deserves real visual
     weight, matching the same bordered-pill language as the audience
     switcher up in the nav. */
  .footer-partner-link{
    display:inline-flex; align-items:center; gap:7px; padding:7px 14px;
    border:1px solid var(--line); border-radius:20px; font-size:13px; font-weight:600;
    color:var(--ink); transition:all 0.15s;
  }
  .footer-partner-link:hover{ border-color:var(--blue); background:var(--mist); color:var(--blue); }
  .footer-partner-link svg{ flex-shrink:0; color:var(--blue); }
  .footer-legal{margin-top:20px; padding-top:20px; border-top:1px solid var(--line); display:flex; gap:20px;}
  .footer-legal .footer-link{font-weight:500; font-size:13px;}
  .footer-link:hover{color:var(--blue);}
  .footer-cta{padding:9px 18px; font-size:13.5px;}

  /* CONTACT FORM */
  .contact-form{max-width:640px;}
  .form-row{display:flex; gap:20px; margin-bottom:18px;}
  .form-field{flex:1; display:flex; flex-direction:column; gap:6px; margin-bottom:18px;}
  .form-row .form-field{margin-bottom:0;}
  .form-field label{font-size:13px; font-weight:600; color:var(--navy);}
  .form-field input, .form-field textarea{
    font-family:'Inter',sans-serif; font-size:14px; color:var(--ink);
    padding:11px 14px; border-radius:var(--radius); border:1px solid var(--line);
    background:#fff;
  }
  .form-field input:focus, .form-field textarea:focus{outline:none; border-color:var(--blue);}
  .form-field textarea{resize:vertical;}

  @media (max-width:900px){
    .pricing-grid{grid-template-columns:1fr;}
    .founding-box{grid-template-columns:1fr;}
  }
  @media (max-width:600px){
    section{padding:56px 0;}
    .wrap{padding:0 20px;}
    .founding-box{padding:28px;}
    .founding-box h2{font-size:24px;}
    .footer-row{flex-direction:column; align-items:flex-start; gap:12px;}
    .vendor-row{gap:10px;}
    .vendor, .vendor.plus{padding:12px 16px; font-size:14px;}
    .form-row{flex-direction:column; gap:0;}
    .form-row .form-field{margin-bottom:18px;}
    .contact-form input, .contact-form textarea{width:100%; min-width:0;}
  }
/* ===== Become a client modal ===== */
.ss-modal-overlay{
  position:fixed; inset:0; z-index:1000;
  background:rgba(3,18,40,0.55); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease;
}
.ss-modal-overlay.open{ opacity:1; visibility:visible; }
.ss-modal{
  background:#fff; border-radius:16px; max-width:840px; width:100%; max-height:90vh;
  display:flex; overflow:hidden; box-shadow:0 30px 80px rgba(3,18,40,0.35);
  transform:scale(.94) translateY(10px); transition:transform .3s cubic-bezier(.2,.8,.2,1);
  position:relative;
}
.ss-modal-overlay.open .ss-modal{ transform:scale(1) translateY(0); }
.ss-modal-close{
  position:absolute; top:16px; right:16px; z-index:5;
  width:34px; height:34px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,0.12); color:#fff; display:flex; align-items:center; justify-content:center;
  transition:background .15s ease;
}
.ss-modal-close svg{ width:16px; height:16px; }
.ss-modal-close:hover{ background:rgba(255,255,255,0.25); }

.ss-modal-visual{
  background:var(--navy); color:#fff; width:340px; flex-shrink:0;
  padding:32px 26px; display:flex; flex-direction:column;
}
.ss-modal-eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:1px; color:#7a94c9; margin-bottom:6px; }
.ss-modal-visual-title{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:17px; margin-bottom:18px; }
.ss-modal-timeline{ margin-bottom:24px; }
.ss-modal-benefits{ list-style:none; margin-top:auto; padding-top:20px; border-top:1px solid rgba(255,255,255,0.12); }
.ss-modal-benefits li{ font-size:12.5px; color:#c3d0e5; padding:5px 0 5px 20px; position:relative; line-height:1.4; }
.ss-modal-benefits li::before{ content:"✓"; position:absolute; left:0; color:var(--blue); font-weight:700; }

.ss-modal-form-side{ flex:1; padding:32px 30px; overflow-y:auto; }
.ss-modal-form-side h3{ font-family:'Space Grotesk',sans-serif; font-size:22px; color:var(--navy); margin:4px 0 6px; }
.ss-modal-sub{ font-size:13.5px; color:var(--slate); margin-bottom:20px; }
.ss-field{ margin-bottom:13px; }
.ss-field label{ display:block; font-size:12px; font-weight:600; color:var(--navy); margin-bottom:4px; }
.ss-optional{ font-weight:400; color:var(--slate); }
.ss-field input, .ss-field textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px;
  font-family:'Inter',sans-serif; font-size:14px; color:var(--ink); resize:vertical;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ss-field input:focus, .ss-field textarea:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,123,253,0.15);
}
.ss-submit-btn{ width:100%; margin-top:6px; display:flex; align-items:center; justify-content:center; gap:8px; position:relative; }
.ss-btn-spinner{ width:16px; height:16px; display:none; animation:ss-spin .7s linear infinite; }
.ss-submit-btn.loading .ss-btn-text{ opacity:0.6; }
.ss-submit-btn.loading .ss-btn-spinner{ display:block; }
@keyframes ss-spin{ to{ transform:rotate(360deg); } }
.ss-form-error{ display:none; color:#c0392b; font-size:12.5px; margin-top:10px; }
.ss-form-error.show{ display:block; }

.ss-success-state{ display:none; flex-direction:column; align-items:center; justify-content:center; text-align:center; height:100%; padding:40px 20px; }
.ss-success-state.show{ display:flex; }
.ss-success-icon{
  width:56px; height:56px; border-radius:50%; background:var(--blue);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
  animation:ss-pop .4s cubic-bezier(.2,.8,.2,1);
}
.ss-success-icon svg{ width:26px; height:26px; }
@keyframes ss-pop{ 0%{ transform:scale(0); } 70%{ transform:scale(1.15); } 100%{ transform:scale(1); } }
.ss-success-state h3{ font-family:'Space Grotesk',sans-serif; font-size:22px; color:var(--navy); margin-bottom:8px; }
.ss-success-state p{ font-size:14px; color:var(--slate); margin-bottom:22px; max-width:280px; }

@media (max-width: 720px){
  .ss-modal{ flex-direction:column; max-height:92vh; }
  .ss-modal-visual{ width:auto; padding:24px 22px; }
  .ss-modal-benefits{ display:none; }
  .ss-modal-form-side{ padding:26px 22px; }
}

/* ROI calculator: compact teaser + modern, "next level" modal.
   Kept as real CSS classes (not just inline styles) because the
   backdrop-blur, animation, and sticky-results behavior genuinely need
   real transitions and media queries, not achievable cleanly inline. */
.roi-teaser{
  margin:0 auto;
  background:linear-gradient(135deg, #031228 0%, #0B2A5C 100%);
  border-radius:20px; padding:60px 56px; position:relative; overflow:hidden;
  box-shadow:0 30px 60px rgba(3,18,40,0.2);
}
.roi-teaser-grid{
  display:grid; grid-template-columns:1.15fr 1fr; gap:48px; align-items:center; position:relative;
}
.roi-teaser-text{ text-align:left; }
.roi-teaser-text h2{ font-size:28px; }
/* A real, purposeful second half instead of empty dark space: a live-
   feeling preview of the calculator's own output, using the same
   default numbers the tool itself opens with, not an invented stat.
   Sits in its own glass panel so it reads as "a peek at the real
   thing", not decoration. */
.roi-teaser-preview{
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12);
  border-radius:16px; padding:26px 28px; backdrop-filter:blur(6px);
}
.roi-preview-label{ font-size:11.5px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:#7FB4FF; }
.roi-preview-value{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:38px; color:#fff; margin-top:8px; letter-spacing:-0.02em; }
.roi-preview-caption{ font-size:13px; color:#93A3C2; margin-top:4px; }
.roi-preview-bars{ margin-top:22px; display:flex; flex-direction:column; gap:12px; }
.roi-preview-bar-row{ display:flex; flex-direction:column; gap:5px; }
.roi-preview-bar-row span{ font-size:12px; color:#B8C4D9; }
.roi-preview-track{ height:6px; border-radius:4px; background:rgba(255,255,255,0.1); overflow:hidden; }
.roi-preview-fill{ height:100%; border-radius:4px; }
.roi-preview-fill-pos{ background:linear-gradient(90deg, #34D399, #6EE7B7); }
.roi-preview-fill-neg{ background:rgba(255,255,255,0.35); }
@media (max-width:760px){
  .roi-teaser{ padding:40px 28px; }
  .roi-teaser-grid{ grid-template-columns:1fr; gap:28px; }
  .roi-teaser-text{ text-align:center; }
}

.roi-teaser-glow{
  position:absolute; top:-120px; right:-80px; width:340px; height:340px;
  background:radial-gradient(circle, rgba(0,123,253,0.35), transparent 70%);
  pointer-events:none;
}
.roi-teaser .eyebrow{ position:relative; }
.roi-teaser h2, .roi-teaser p, .roi-teaser button{ position:relative; }

/* A real, visible invitation to the FAQ, not just a small link buried
   in the footer, right where someone comparing plans is most likely
   to have a question, styled to feel like a natural continuation of
   the pricing cards above it, not an afterthought. */

.roi-modal-backdrop{
  position:fixed; inset:0; background:rgba(3,18,40,0.6);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  z-index:1000; padding:24px;
  opacity:0; visibility:hidden; transition:opacity 0.25s ease, visibility 0.25s ease;
}
.roi-modal-backdrop.open{ opacity:1; visibility:visible; }
.roi-modal{
  background:#fff; border-radius:22px; max-width:980px; width:100%;
  max-height:88vh; position:relative; overflow:hidden;
  box-shadow:0 50px 100px rgba(3,18,40,0.35);
  transform:scale(0.94) translateY(14px); transition:transform 0.28s cubic-bezier(.2,.8,.2,1);
}
.roi-modal-backdrop.open .roi-modal{ transform:scale(1) translateY(0); }
.roi-modal-close{
  position:absolute; top:18px; right:18px; width:36px; height:36px; border-radius:50%;
  background:#F2F6FC; border:none; font-size:22px; line-height:1; color:#5A6B85; cursor:pointer;
  display:flex; align-items:center; justify-content:center; z-index:10; transition:background 0.15s;
}
.roi-modal-close:hover{ background:#E4E9F1; }
/* RTL (Arabic): text inside these modals is right-aligned, starting
   from the same corner a right:18px close button sits in, without
   this override the button and the eyebrow/title text visibly overlap.
   Moving the button to the left mirrors it to the true "start" corner,
   same fix needed everywhere a UI chrome element is right-positioned
   near right-aligned text. */
html[dir="rtl"] .roi-modal-close{ right:auto; left:18px; }
.roi-modal-inner{ padding:40px; max-height:88vh; overflow-y:auto; }
.roi-modal-header{ margin-bottom:8px; }

/* A real redesign of the FAQ accordion, not the bare browser default
   triangle marker: a custom plus/minus that rotates into an "x" on
   open, a subtle hover state, and a soft highlight while a question
   is open, so it reads as deliberately designed, not an afterthought. */
.faq-item{ border-top:1px solid #E4E9F1; transition:background 0.2s ease; }
.faq-item-last{ border-bottom:1px solid #E4E9F1; }
.faq-item[open]{ background:linear-gradient(90deg, rgba(0,123,253,0.05), transparent 45%); }
.faq-item-q{
  cursor:pointer; font-weight:600; color:#031228; font-size:15px; padding:17px 4px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; list-style:none;
}
.faq-item-q::-webkit-details-marker{ display:none; }
.faq-item-q::after{
  content:'+'; flex-shrink:0; width:24px; height:24px; border-radius:50%;
  background:var(--mist); color:var(--blue); font-size:16px; font-weight:600; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:transform 0.25s ease, background 0.2s ease, color 0.2s ease;
}
.faq-item[open] .faq-item-q::after{ background:var(--blue); color:#fff; transform:rotate(135deg); }
.faq-item-q:hover{ color:var(--blue); }
.faq-item-a{ margin:0 4px 17px; font-size:13.5px; color:#5A6B85; line-height:1.65; }

.roi-modal-body{
  display:grid; grid-template-columns:1.1fr 1fr; gap:36px; margin-top:22px; align-items:start;
}
.roi-modal-inputs{ max-height:60vh; overflow-y:auto; padding-right:10px; }
.roi-modal-results{ position:sticky; top:0; }
.roi-results-card{
  background:#F2F6FC; border-radius:16px; padding:26px; border:1px solid #E4E9F1;
}
/* A real, robust fix for result rows whose label can get long (a
   recovered-revenue or fraud-avoided line with a parenthetical
   breakdown attached), the value must never be pushed underneath or
   overlapped by the label, regardless of how many words the label
   ends up wrapping to. */
.roi-result-row{
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:8px 0; font-size:13.5px; border-top:1px solid #E4E9F1; gap:14px;
}
.roi-result-label{ color:#5A6B85; flex:1; min-width:0; }
.roi-result-row b{ flex-shrink:0; white-space:nowrap; }
@media (max-width:760px){
  .roi-modal-body{ grid-template-columns:1fr; }
  .roi-modal-inputs{ max-height:none; overflow-y:visible; padding-right:0; }
  .roi-modal-results{ position:static; }
  .roi-modal-inner{ padding:26px 20px; }
  .roi-teaser{ padding:40px 24px; }
}

/* Case review demo modal: toggle buttons + visual-diff mini panel */
.demo-toggle-btn{
  flex:1; padding:10px 16px; border:none; border-radius:8px; background:transparent;
  font-family:'Inter',sans-serif; font-size:13.5px; font-weight:600; color:#5A6B85;
  cursor:pointer; transition:background 0.15s, color 0.15s;
}
.demo-toggle-btn.demo-toggle-active{ background:#fff; color:#031228; box-shadow:0 2px 6px rgba(3,18,40,0.08); }
.demo-diff-pair{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.demo-diff-pair .demo-diff-label{ font-size:10.5px; color:#a7b6d1; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:6px; }
.demo-checklist-step{ border-top:1px solid rgba(255,255,255,0.08); padding:10px 0; }
.demo-checklist-step .step-title{ font-size:12.5px; font-weight:600; color:#fff; }
.demo-checklist-step .step-detail{ font-size:11.5px; color:#a7b6d1; margin-top:3px; line-height:1.4; }

/* Audience selector pills: "I am a: Fleet owner / Leasing / Rental",
   the same real mechanism as language switching, just for messaging. */
.audience-pill{
  padding:6px 14px; border-radius:20px; border:1px solid #E4E9F1; background:#fff;
  font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600; color:#5A6B85;
  cursor:pointer; transition:all 0.15s;
}
.audience-pill:hover{ border-color:#007BFD; color:#007BFD; }
.audience-pill.active{ background:#031228; border-color:#031228; color:#fff; }

/* Audience popup: a real, elegant, first-visit choice, the same visual
   language as the language-switch popup, four selectable cards instead
   of two buttons. */
/* A real, visible nav-bar button, not a subtle text link, the earlier
   version was too easy to miss entirely, this now sits right where the
   language selector already draws the eye, same visual weight. */
.audience-nav-pill{
  display:flex; align-items:center; gap:6px; padding:7px 12px; margin-right:10px;
  border-radius:20px; border:1px solid var(--line); background:#fff;
  font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600; color:var(--ink);
  cursor:pointer; transition:all 0.15s;
}
.audience-nav-pill:hover{ border-color:var(--blue); background:var(--mist); }
.audience-nav-pill svg{ color:var(--slate); flex-shrink:0; }
/* A minimal, icon-only utility button, deliberately quieter than the
   audience pill, a secondary action (returning to an existing
   account) shouldn't compete visually with the primary one (choosing
   your audience), same rounded, bordered language, just without text,
   the right hierarchy for a less prominent action. */
.nav-icon-btn{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:36px; height:36px; border-radius:50%; border:1px solid var(--line);
  background:#fff; color:var(--slate); margin-left:6px; transition:all 0.15s;
}
.nav-icon-btn:hover{ border-color:var(--blue); color:var(--blue); background:var(--mist); }
/* The custom language dropdown, built to replace a native <select>
   entirely: native selects hand emoji-glyph rendering to the browser's
   own internal box model, which clips inconsistently across browsers
   and OSes, no amount of padding/line-height reliably fixes it
   everywhere. This is plain, fully-controlled HTML/CSS instead, the
   same real fix already proven by the audience pill next to it. */
.lang-dropdown-panel{
  display:none; position:absolute; top:calc(100% + 6px); right:0; width:200px;
  max-height:320px; overflow-y:auto; background:#fff; border:1px solid var(--line);
  border-radius:10px; box-shadow:0 12px 32px rgba(3,18,40,0.16); z-index:60; padding:6px;
}
.lang-dropdown-panel.open{ display:block; }
.lang-dropdown-option{
  display:flex; align-items:center; gap:9px; width:100%; padding:8px 10px;
  border:none; background:none; border-radius:7px; font-size:13.5px; color:var(--ink);
  cursor:pointer; text-align:left; font-family:'Inter',sans-serif;
}
.lang-dropdown-option:hover{ background:var(--mist); }
.lang-dropdown-option.active{ background:var(--mist); font-weight:600; }
.audience-popup-overlay{
  position:fixed; inset:0; background:rgba(3,18,40,0.55); z-index:9999;
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; transition:opacity 0.2s ease;
}
.audience-popup-overlay.open{ opacity:1; }
.audience-popup-card{
  background:#fff; border-radius:16px; padding:32px; max-width:560px; width:100%;
  font-family:'Inter',sans-serif; position:relative;
  transform:scale(0.95) translateY(8px); transition:transform 0.2s ease;
  box-shadow:0 40px 80px rgba(3,18,40,0.3);
}
.audience-popup-overlay.open .audience-popup-card{ transform:scale(1) translateY(0); }
.audience-popup-close{
  position:absolute; top:16px; right:16px; width:30px; height:30px; border-radius:50%;
  background:#F2F6FC; border:none; font-size:18px; color:#5A6B85; cursor:pointer;
}
/* Same real RTL fix as .roi-modal-close: this popup's own title is
   right-aligned in Arabic and sits in the same corner a hardcoded
   right:16px button occupies. */
html[dir="rtl"] .audience-popup-close{ right:auto; left:16px; }
.audience-popup-title{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:19px; color:#031228; margin-bottom:6px; }
.audience-popup-sub{ font-size:13px; color:#5A6B85; margin-bottom:22px; line-height:1.5; }
.audience-card-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.audience-card{
  text-align:left; background:#F2F6FC; border:1.5px solid transparent; border-radius:12px;
  padding:16px; cursor:pointer; transition:all 0.15s;
}
.audience-card:hover{ border-color:#007BFD; background:#fff; box-shadow:0 6px 16px rgba(3,18,40,0.08); }
.audience-card-icon{ font-size:22px; margin-bottom:8px; }
.audience-card-title{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14px; color:#031228; margin-bottom:4px; }
.audience-card-desc{ font-size:12px; color:#5A6B85; line-height:1.4; }
@media (max-width:520px){
  .audience-card-grid{ grid-template-columns:1fr; }
}


/* Portfolio pricing for insurers and brokers: shown only for that
   audience, the fleet plan cards are hidden for it instead (a fleet's
   per-vehicle plans are not what an insurer or broker pays). */
#portfolioPricing{ display:none; }
html[data-audience="insurance"] #portfolioPricing, html[data-audience="leasing"] #portfolioPricing{ display:block; }

#faq-list-fleet, #faq-list-leasing, #faq-list-insurance, #faq-list-rental{ display:none; }
html[data-audience="fleet"] #faq-list-fleet,
html[data-audience="leasing"] #faq-list-leasing,
html[data-audience="insurance"] #faq-list-insurance,
html[data-audience="rental"] #faq-list-rental{ display:block; }
html[data-audience="insurance"] .pricing-fleet-only, html[data-audience="leasing"] .pricing-fleet-only{ display:none; }
.pf-wrap{ max-width:1080px; margin:0 auto; }
/* One instrument, not a row of cards: the price is something you operate,
   and the curve shows the one fact that matters, it falls with volume. */
.pf-console{
  position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(900px 420px at 85% -10%, rgba(0,123,253,0.22), transparent 60%),
    linear-gradient(180deg, #06183A 0%, #031228 100%);
  border:1px solid rgba(127,180,255,0.14);
  border-radius:20px; padding:44px 48px 36px;
  box-shadow:0 40px 80px -30px rgba(3,18,40,0.45);
}
.pf-console::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0.5;
  background-image:linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size:40px 40px;
  mask-image:linear-gradient(180deg, #000 0%, transparent 70%);
  -webkit-mask-image:linear-gradient(180deg, #000 0%, transparent 70%);
}
.pf-console > *{ position:relative; }
.pf-console-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:48px; align-items:stretch; }
.pf-console-label{ font-size:13px; color:#93A3C2; }
.pf-console-total{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:60px; line-height:1.05;
  letter-spacing:-0.03em; margin-top:8px; font-variant-numeric:tabular-nums;
}
.pf-console-sub{ font-size:14px; color:#B8C4D9; margin-top:8px; font-variant-numeric:tabular-nums; }
.pf-console-sub b{ color:#fff; font-weight:600; }
.pf-slider-block{ margin-top:34px; }
.pf-slider-head{ display:flex; justify-content:space-between; align-items:baseline; font-size:13px; color:#93A3C2; margin-bottom:14px; }
.pf-slider-count{ font-family:'Space Grotesk',sans-serif; font-size:20px; font-weight:600; color:#fff; font-variant-numeric:tabular-nums; }
.pf-slider{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:6px; outline:none; cursor:pointer;
  background:linear-gradient(90deg, var(--blue) 0%, var(--blue) var(--fill,0%), rgba(255,255,255,0.12) var(--fill,0%)); }
.pf-slider::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:#fff; border:5px solid var(--blue); box-shadow:0 0 0 6px rgba(0,123,253,0.2); }
.pf-slider::-moz-range-thumb{ width:14px; height:14px; border-radius:50%; background:#fff; border:5px solid var(--blue); box-shadow:0 0 0 6px rgba(0,123,253,0.2); }
.pf-slider:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 8px rgba(0,123,253,0.45); }
.pf-slider-scale{ display:flex; justify-content:space-between; font-size:11.5px; color:#6F80A3; margin-top:10px; font-variant-numeric:tabular-nums; }
.pf-breakdown{ margin-top:28px; border-top:1px solid rgba(255,255,255,0.1); }
.pf-breakdown-row{ display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,0.07); font-size:13.5px; color:#B8C4D9; }
.pf-breakdown-row b{ color:#fff; font-weight:500; font-variant-numeric:tabular-nums; white-space:nowrap; }
.pf-breakdown-note{ padding:12px 0; font-size:12.5px; color:#93A3C2; }
.pf-console-chart{ display:flex; flex-direction:column; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:22px 22px 14px; }
.pf-chart-head{ font-size:13px; color:#93A3C2; margin-bottom:10px; }
.pf-chart{ width:100%; height:auto; display:block; overflow:visible; margin-top:auto; }
.pf-chart-axis{ position:relative; height:14px; font-size:11px; color:#6F80A3; margin-top:8px; font-variant-numeric:tabular-nums; }
.pf-chart-axis span{ position:absolute; top:0; white-space:nowrap; }
.pf-console-facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:40px; padding-top:28px; border-top:1px solid rgba(255,255,255,0.1); }
.pf-console-fact h3{ font-size:14.5px; color:#fff; margin-bottom:6px; font-weight:600; }
.pf-console-fact p{ font-size:13px; color:#93A3C2; line-height:1.55; }
.pf-console-actions{ display:flex; align-items:center; gap:24px; margin-top:32px; flex-wrap:wrap; }
.pf-console-cta{ background:#fff; color:var(--navy); padding:14px 28px; font-weight:600; border-radius:10px; }
.pf-console-cta:hover{ background:#EAF2FF; }
.pf-console-faq{ font-size:14px; color:#7FB4FF; text-decoration:none; border-bottom:1px solid rgba(127,180,255,0.4); padding-bottom:2px; }
.pf-console-faq:hover{ color:#fff; border-color:#fff; }
.pf-note{ text-align:center; font-size:12.5px; color:#5A6B85; margin-top:22px; }
@media (max-width:860px){
  .pf-console{ padding:32px 22px 28px; border-radius:16px; }
  .pf-console-grid{ grid-template-columns:1fr; gap:28px; }
  .pf-console-total{ font-size:44px; }
  .pf-console-facts{ grid-template-columns:1fr; gap:18px; }
}
@media (prefers-reduced-motion: reduce){ .pf-chart *{ transition:none !important; } }
html[dir="rtl"] .pf-slider{ background:linear-gradient(270deg, var(--blue) 0%, var(--blue) var(--fill,0%), rgba(255,255,255,0.12) var(--fill,0%)); }
html[dir="rtl"] .pf-chart-console, html[dir="rtl"] .pf-chart, html[dir="rtl"] .pf-chart-axis{ direction:ltr; }

/* Leasing model switch in the pricing console, leasing audience only. */
.pf-model-switch{ display:none; gap:4px; margin-top:22px; padding:4px; border-radius:10px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); }
html[data-audience="leasing"] .pf-model-switch{ display:flex; }
.pf-model-switch button{ flex:1; border:0; background:transparent; color:#93A3C2; font:inherit; font-size:12.5px; font-weight:600; padding:8px 6px; border-radius:7px; cursor:pointer; }
.pf-model-switch button[aria-checked="true"]{ background:#fff; color:#031228; }
.pf-model-switch button:focus-visible{ outline:2px solid #4DA3FF; outline-offset:2px; }