:root{
    /* Palette pulled from the Wedpic Studio logo: sky-blue camera line art + magenta-pink heart */
    --ivory:#FFFFFF;
    --ivory-soft:#EAF6FC;
    --ink:#152430;
    --wine:#1BA3DB;        /* logo blue */
    --wine-deep:#0E7FB0;   /* deeper blue for hover/footer */
    --gold:#EC1284;        /* logo pink/magenta */
    --gold-soft:#F7A8D2;
    --blush:#FCE3F0;       /* soft pink tint for borders/tags */
    --font-display:'Playfair Display', serif;
    --font-body:'Jost', sans-serif;
  }
  *{scroll-behavior:smooth;}
  body{
    font-family:var(--font-body);
    color:var(--ink);
    background:var(--ivory);
    font-weight:400;
    line-height:1.7;
  }
  h1,h2,h3,h4,.font-display{font-family:var(--font-display);}
  a{color:var(--wine);}
  .text-gold{color:var(--gold);}
  .bg-wine{background-color:var(--wine);}
  .bg-ivory-soft{background-color:var(--ivory-soft);}
  .border-gold{border-color:var(--gold)!important;}

  /* ---------- Navbar ---------- */
  .navbar-brand-text{font-family:var(--font-display);font-weight:700;font-size:1.35rem;color:var(--wine)!important;letter-spacing:.02em;}
  .navbar-custom{background:var(--ivory);border-bottom:1px solid var(--blush);}
  .navbar-custom .nav-link{color:var(--ink);font-size:.92rem;letter-spacing:.03em;text-transform:uppercase;font-weight:500;}
  .navbar-custom .nav-link:hover{color:var(--wine);}
  .btn-wine{background:var(--wine);border-color:var(--wine);color:var(--ivory);font-weight:500;letter-spacing:.03em;}
  .btn-wine:hover{background:var(--wine-deep);border-color:var(--wine-deep);color:var(--ivory);}
  .btn-outline-wine{border:1.5px solid var(--wine);color:var(--wine);font-weight:500;}
  .btn-outline-wine:hover{background:var(--wine);color:var(--ivory);}

  /* ---------- Hero ---------- */
  .hero{
    background:
      radial-gradient(ellipse at top right, rgba(236,18,132,.13), transparent 55%),
      radial-gradient(ellipse at bottom left, rgba(27,163,219,.16), transparent 55%),
      var(--ivory);
    padding:5.5rem 0 4rem;
    border-bottom:1px solid var(--blush);
  }
  .eyebrow{
    font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--wine);font-weight:600;
  }
  .hero h1{
    font-size:clamp(2.1rem, 4.2vw, 3.4rem);
    font-weight:700;
    line-height:1.15;
    margin:.6rem 0 1.1rem;
  }
  .hero h1 em{font-style:italic;color:var(--wine);}
  .hero-lead{font-size:1.12rem;color:#4a3f39;max-width:680px;}
  .meta-row{font-size:.85rem;color:#7a6a5f;margin-top:1.4rem;}
  .meta-row .dot{margin:0 .5rem;}

  /* ---------- TOC ---------- */
  .toc-card{
    background:#fff;border:1px solid var(--blush);border-radius:.5rem;padding:1.5rem 1.6rem;
  }
  .toc-card a{color:var(--ink);text-decoration:none;font-size:.95rem;}
  .toc-card a:hover{color:var(--wine);}
  .toc-card .toc-num{color:var(--gold);font-family:var(--font-display);font-weight:600;margin-right:.5rem;}

  /* ---------- Section headers ---------- */
  .section-label{
    font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:600;
  }
  .section-title{font-weight:700;margin-top:.4rem;margin-bottom:.6rem;}
  .section-rule{width:56px;height:2px;background:var(--wine);margin:1.1rem 0 2rem;}

  /* ---------- Ranked cards (signature element) ---------- */
  .rank-card{
    position:relative;
    background:#fff;
    border:1px solid var(--blush);
    border-radius:.6rem;
    padding:2rem 1.9rem 1.9rem;
    overflow:hidden;
    height:100%;
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .rank-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(14,127,176,.32);}
  .rank-card.featured{
    border:1.5px solid var(--gold);
    background:linear-gradient(180deg, var(--ivory-soft) 0%, #fff 42%);
  }
  .rank-num{
    position:absolute;
    top:-.6rem; right:.4rem;
    font-family:var(--font-display);
    font-weight:700;
    font-size:5.6rem;
    line-height:1;
    color:transparent;
    -webkit-text-stroke:1.5px rgba(27,163,219,.18);
    z-index:0;
    user-select:none;
  }
  .featured .rank-num{-webkit-text-stroke:1.5px rgba(236,18,132,.38);}
  .rank-card .card-inner{position:relative;z-index:1;}
  .rank-icon{
    width:52px;height:52px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:var(--wine); color:var(--ivory); font-size:1.35rem;
    margin-bottom:1rem;
  }
  .featured .rank-icon{background:var(--gold);}
  .rank-card h3{font-size:1.28rem;font-weight:700;margin-bottom:.25rem;}
  .rank-tag{
    display:inline-block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
    background:var(--blush);color:var(--wine-deep);padding:.22rem .6rem;border-radius:2rem;margin-bottom:.8rem;font-weight:600;
  }
  .featured .rank-tag{background:var(--gold);color:#fff;}
  .rank-meta{font-size:.85rem;color:#6b5c53;margin-bottom:.7rem;}
  .rank-meta strong{color:var(--ink);}
  .rank-desc{font-size:.94rem;color:#4a3f39;}
  .badge-pill{
    background:var(--ivory-soft);color:var(--wine-deep);font-weight:500;font-size:.78rem;
    border-radius:2rem;padding:.28rem .7rem;margin-right:.3rem;margin-top:.5rem;display:inline-block;
  }

  /* ---------- Table ---------- */
  .table-comparison thead{background:var(--wine);color:var(--ivory);}
  .table-comparison thead th{font-weight:500;letter-spacing:.03em;font-size:.85rem;text-transform:uppercase;border:none;}
  .table-comparison td, .table-comparison th{vertical-align:middle;font-size:.92rem;}
  .table-comparison tbody tr:first-child{background:var(--ivory-soft);font-weight:600;}

  /* ---------- Guide ---------- */
  .guide-item{border-left:3px solid var(--gold);padding-left:1.2rem;margin-bottom:1.6rem;}
  .guide-item h4{font-size:1.05rem;font-weight:600;margin-bottom:.35rem;}

  /* ---------- CTA band ---------- */
  .cta-band{
    background:linear-gradient(120deg, var(--wine-deep), var(--wine));
    color:var(--ivory);
    border-radius:.7rem;
    padding:3rem 2.2rem;
  }
  .cta-band h2{color:#fff;}
  .cta-band .text-gold{color:var(--gold-soft);}

  /* ---------- Accordion ---------- */
  .accordion-item{border:1px solid var(--blush);margin-bottom:.6rem;border-radius:.5rem!important;overflow:hidden;}
  .accordion-button{font-family:var(--font-display);font-weight:600;color:var(--ink);background:#fff;}
  .accordion-button:not(.collapsed){color:var(--wine);background:var(--ivory-soft);box-shadow:none;}
  .accordion-button:focus{box-shadow:0 0 0 .2rem rgba(236,18,132,.22);}

  /* ---------- Footer ---------- */
  footer{background:var(--wine-deep);color:var(--blush);}
  footer a{color:var(--gold-soft);text-decoration:none;}
  footer a:hover{color:#fff;}
  footer .footer-brand{font-family:var(--font-display);font-weight:700;color:#fff;font-size:1.2rem;}

  @media (max-width:767px){
    .rank-num{font-size:4.2rem;}
    .hero{padding:3.5rem 0 2.5rem;}
  }