/* ===== Savvli shared stylesheet ===== */
/* Design tokens, page shell, header/logo/back-link */
:root{
    --paper:#F8F6FC;
    --ink:#14121B;
    --ink-soft:#5B5665;
    --line:#E5E1F0;
    --lav:#6E56CF;
    --lav-soft:#ECE7FA;
    --lav-deep:#4C3A9E;
    --green:#2F7D53;
    --green-soft:#E3EFE7;
    --radius:14px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html,body{
    background:
      radial-gradient(circle at top left, rgba(110,86,207,0.14), transparent 45%),
      radial-gradient(circle at bottom right, rgba(183,166,240,0.12), transparent 45%),
      var(--paper);
    background-attachment:fixed;
    color:var(--ink);
    font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    overflow-x:hidden;
  }
  a{ color:var(--lav-deep); }
  .wrap{
    max-width:1040px;
    width:100%;
    margin:0 auto;
    padding:0 20px 100px;
    flex:1 0 auto;
    display:flex;
    flex-direction:column;
  }

  /* header */
  .site-header{
    display:flex;
    align-items:center;
    gap:10px;
    padding:28px 0 24px 56px;
  }
  @media (max-width:480px){
    .site-header{ padding-left:48px; }
  }
  .site-header a{
    display:flex;
    align-items:center;
    gap:8px;
    text-decoration:none;
  }
  .logo-mark{ width:26px; height:26px; }
  .logo{
    font-family:'Fraunces', serif;
    font-weight:600;
    font-size:22px;
    color:var(--ink);
  }
  .logo .dot{ color:var(--lav); }

  /* header search bar - lets people search from any subpage, not just
     the homepage. Plain HTML form (no JS needed): submits to
     index.html?store=... which the homepage's existing redirect logic
     picks up and sends to the real store page automatically. */
  .header-search{
    display:flex;
    align-items:center;
    flex:1;
    max-width:540px;
    background:#fff;
    border:1.5px solid var(--line);
    border-radius:999px;
    padding:4px 4px 4px 16px;
    margin:0 8px;
    transition:border-color .15s ease;
  }
  .header-search:focus-within{ border-color:var(--lav); }
  .header-search input{
    flex:1;
    border:none;
    outline:none;
    background:transparent;
    font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size:13px;
    color:var(--ink);
  }
  .header-search input::placeholder{ color:#A199B3; }
  .header-search button{
    display:flex;
    align-items:center;
    justify-content:center;
    width:30px; height:30px;
    border:2px solid #fff;
    border-radius:50%;
    background:var(--lav);
    color:#fff;
    cursor:pointer;
    flex-shrink:0;
    box-shadow:0 0 0 1.5px var(--lav);
    transition:background .15s ease;
  }
  .header-search button:hover{ background:var(--lav-deep); box-shadow:0 0 0 1.5px var(--lav-deep); }
  @media (max-width:680px){
    .header-search{ display:none; }
  }

  .back-link{
    margin-left:auto;
    font-size:13px;
    color:var(--ink-soft);
    text-decoration:none;
  }
  .back-link:hover{ color:var(--lav-deep); }

  

/* ===== Cookie consent banner ===== */

  #cookie-banner{
    position:fixed; left:16px; right:16px; bottom:16px; max-width:560px; margin:0 auto;
    background:var(--ink, #14121B); color:#fff; border-radius:14px; padding:18px 20px;
    box-shadow:0 10px 30px rgba(0,0,0,0.25); z-index:9999; font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; display:none;
  }
  #cookie-banner.show{ display:block; }
  #cookie-banner p{ font-size:13px; line-height:1.5; color:#D8D4E6; margin-bottom:14px; }
  #cookie-banner .cookie-actions{ display:flex; gap:10px; }
  #cookie-banner button{ flex:1; border:none; border-radius:999px; padding:9px 14px; font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size:13px; font-weight:500; cursor:pointer; }
  #cookie-decline{ background:transparent; color:#fff; border:1.5px solid #4A4658; }
  #cookie-decline:hover{ border-color:#7A748F; }
  #cookie-accept{ background:var(--lav, #6E56CF); color:#fff; }
  #cookie-accept:hover{ background:var(--lav-deep, #4C3A9E); }
  @media (max-width:480px){ #cookie-banner{ left:12px; right:12px; bottom:12px; padding:16px; } }


/* ===== Hamburger menu (mobile nav) ===== */

  .menu-btn{
    position:fixed;
    top:24px; left:24px;
    width:40px; height:40px;
    border-radius:50%;
    border:1.5px solid var(--line);
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:20;
    transition:border-color .15s ease, background .15s ease;
  }
  .menu-btn:hover{ border-color:var(--lav); }
  .menu-btn svg{ color:var(--ink); }
  .menu-btn .icon-close{ display:none; }
  .menu-btn.open .icon-bars{ display:none; }
  .menu-btn.open .icon-close{ display:block; }
  .menu-btn.open{ background:var(--ink); border-color:var(--ink); }
  .menu-btn.open svg{ color:#fff; }
  .nav-menu{
    position:fixed;
    top:72px; left:24px;
    background:#fff;
    border:1.5px solid var(--line);
    border-radius:var(--radius);
    box-shadow:0 10px 30px rgba(20,18,27,0.12);
    padding:8px;
    min-width:180px;
    z-index:19;
    display:none;
    flex-direction:column;
  }
  .nav-menu.show{ display:flex; }
  .nav-menu a{
    display:block;
    padding:10px 14px;
    font-size:14px;
    color:var(--ink-soft);
    text-decoration:none;
    border-radius:9px;
    transition:background .12s ease, color .12s ease;
  }
  .nav-menu a:hover{ background:var(--lav-soft); color:var(--lav-deep); }
  @media (max-width:480px){
    .menu-btn{ top:16px; left:16px; width:36px; height:36px; }
    .nav-menu{ top:60px; left:16px; }
  }


/* ===== Site footer ===== */

  .site-footer-v2{
    margin-top:auto;
    padding-top:56px;
    border-top:1px solid var(--line);
  }
  .footer-cols{
    display:flex;
    justify-content:space-between;
    gap:24px;
    margin-bottom:44px;
  }
  .footer-col h3{
    font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight:600;
    font-size:13px;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin-bottom:18px;
  }
  .footer-col ul{ list-style:none; }
  .footer-col li{ margin-bottom:14px; }
  .footer-col li:last-child{ margin-bottom:0; }
  .footer-col a{
    font-size:13px;
    color:var(--ink-soft);
    text-decoration:none;
    line-height:1.4;
  }
  .footer-col a:hover{ color:var(--lav-deep); text-decoration:underline; }
  .footer-bottom{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding-top:28px;
    border-top:1px solid var(--line);
  }
  .footer-legal{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    row-gap:14px;
    font-size:13px;
    color:var(--ink-soft);
  }
  .footer-legal a, .footer-legal button{
    color:var(--ink-soft);
    text-decoration:none;
    background:none;
    border:none;
    font-size:13px;
    font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    cursor:pointer;
    padding:0;
  }
  .footer-legal a:hover, .footer-legal button:hover{ color:var(--lav-deep); text-decoration:underline; }
  .footer-legal .sep{ color:var(--line); }
  .footer-social{
    display:flex;
    gap:10px;
  }
  .footer-social a{
    width:32px;
    height:32px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    background:var(--lav);
    text-decoration:none;
    transition:background .15s ease;
  }
  .footer-social a svg{ width:16px; height:16px; }
  .footer-social a:hover{ background:var(--lav-deep); }
  @media (max-width:560px){
    .footer-cols{ flex-wrap:wrap; gap:32px 24px; }
    .footer-col{ flex:1 1 calc(50% - 12px); }
    .footer-col:last-child{ flex-basis:100%; }
    .footer-bottom{ flex-direction:column; align-items:flex-start; }
  }
  @media (max-width:400px){
    .footer-cols{ flex-direction:column; }
    .footer-col:last-child{ flex-basis:auto; }
  }


/* ===== Desktop nav row + header responsive behavior ===== */

  .site-header{
    flex-wrap:wrap;
    row-gap:12px;
  }
  .header-nav-row{
    display:none;
    align-items:center;
    gap:16px;
    margin-left:auto;
  }
  .header-nav-row a{
    font-size:13px;
    font-weight:500;
    color:var(--ink-soft);
    text-decoration:none;
    white-space:nowrap;
  }
  .header-nav-row a:hover{ color:var(--lav-deep); }
  .header-nav-row .nav-cta{
    background:var(--ink);
    color:#fff;
    padding:8px 16px;
    border-radius:999px;
    font-size:13px;
    transition:background .15s ease;
  }
  .header-nav-row .nav-cta:hover{
    background:var(--lav-deep);
    color:#fff;
  }
  @media (min-width:681px){
    .site-header{ padding-left:0 !important; }
    .header-nav-row{ display:flex; }
    .menu-btn, .nav-menu{ display:none !important; }
    .back-link{ display:none; }
  }

/* ===== Offer cards ===== */
/* Single source of truth for the rate-comparison cards used on both the
   homepage's live search results and every generated SEO page
   (scripts/generate_seo_pages.py). Previously duplicated in two places,
   which is exactly the kind of drift that caused real bugs earlier - now
   there's one definition both pull from automatically. */

  #cardList{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(160px, 200px));
    gap:10px;
    margin-bottom:40px;
    position:relative;
    z-index:1;
    justify-content:start;
  }
  .card{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    background:#fff;
    border:1.5px solid var(--line);
    border-radius:var(--radius);
    padding:14px;
    overflow:hidden;
    width:100%;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .card:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(20,18,27,0.08);
    border-color:var(--lav);
  }
  .card.best{
    border:2px solid var(--lav);
    padding-top:32px;
  }
  .card.best:hover{ border-color:var(--lav-deep); }
  .ribbon{
    position:absolute;
    top:0; left:0; right:0;
    background:var(--lav);
    color:#fff;
    font-size:10px;
    font-weight:600;
    letter-spacing:0.06em;
    text-transform:uppercase;
    text-align:center;
    padding:4px 0;
  }
  .card-top{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    margin-bottom:10px;
  }
  .provider-badge{
    width:20px; height:20px;
    border-radius:6px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:10px;
    font-weight:600;
    color:#fff;
    flex-shrink:0;
  }
  .provider-name{ font-size:13px; font-weight:500; }
  .rate{
    font-family:'IBM Plex Mono', monospace;
    font-size:26px;
    font-weight:600;
    color:var(--ink);
    line-height:1;
  }
  .card.best .rate{ color:var(--lav-deep); }
  .rate-label{
    font-size:10px;
    font-weight:600;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin-top:3px;
  }
  .card.best .rate-label{ color:var(--lav-deep); }
  .provider-meta{
    font-size:11px;
    color:var(--ink-soft);
    margin-top:8px;
    margin-bottom:12px;
  }
  .go-btn{
    display:block;
    text-align:center;
    text-decoration:none;
    border:none;
    background:var(--ink);
    color:#fff;
    font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size:13px;
    font-weight:500;
    padding:8px 14px;
    border-radius:999px;
    cursor:pointer;
    white-space:nowrap;
    width:100%;
    margin-top:auto;
  }
  .go-btn:hover{ background:var(--lav-deep); }
  .card.best .go-btn{ background:var(--lav); }
  .card.best .go-btn:hover{ background:var(--lav-deep); }
  .referral-link{
    display:block;
    text-align:center;
    margin-top:14px;
    padding-top:10px;
    border-top:1px solid var(--line);
    font-size:11px;
    color:var(--lav);
    text-decoration:none;
  }
  .referral-link:hover{ color:var(--lav-deep); text-decoration:underline; }

/* ===== Reusable components (any page can use these) ===== */

  .verified-badge{
    background:var(--lav-soft);
    color:var(--lav-deep);
    font-size:11px;
    padding:4px 11px;
    border-radius:999px;
    white-space:nowrap;
  }

  .faq-item{
    border-bottom:1px solid var(--line);
    padding:14px 0;
  }
  .faq-item:first-of-type{ padding-top:0; }
  .faq-item:last-of-type{ border-bottom:none; }
  .faq-item summary{
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    list-style:none;
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary::after{
    content:"\2304";
    color:var(--ink-soft);
    font-size:16px;
    transition:transform .15s ease;
  }
  .faq-item[open] summary::after{ transform:rotate(180deg); }
  .faq-item p{
    font-size:13px;
    line-height:1.6;
    color:var(--ink-soft);
    margin-top:8px;
  }

/* ===== Header search suggestions dropdown (used on every page) ===== */

  .header-search{ position:relative; }
  .header-suggestions{
    position:absolute;
    top:calc(100% + 8px);
    left:0; right:0;
    background:#fff;
    border:1.5px solid var(--line);
    border-radius:var(--radius);
    box-shadow:0 8px 24px rgba(20,18,27,0.08);
    overflow:hidden;
    z-index:30;
    display:none;
  }
  .header-suggestions.show{ display:block; }
  .header-suggestion-item{
    padding:10px 16px;
    font-size:13.5px;
    cursor:pointer;
    color:var(--ink);
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  .header-suggestion-item:hover, .header-suggestion-item.highlighted{ background:var(--lav-soft); }
  .header-suggestion-item + .header-suggestion-item{ border-top:1px solid var(--line); }
  .header-suggestion-item .hint{ font-size:11px; color:var(--ink-soft); }