/* ==========================================================
   AUREA — FIXES (hero resizing + pricing polish)
   Load AFTER aurea.css (and aurea-extra.css). Design unchanged.
   <link rel="stylesheet" href="css/aurea-fixes.css" />
   ========================================================== */

/* ───────────── HERO ─────────────
   Problems in aurea.css:
   - .hero min-height:10vh and .hero-left/.hero-right height:100vh (fixed)
   - 70px nav padding sits ON TOP of 100vh, so the hero is always taller than the screen
   - 100vh breaks on mobile browsers (address bar) and short laptop screens
   - hero-right is `sticky` with no `top`, so it does nothing
   Fix: let the hero fill the viewport but grow when content needs more room. */

.hero{
  min-height:100vh;               /* fallback */
  min-height:100svh;              /* mobile-safe */
  box-sizing:border-box;          /* the 70px nav offset is now INSIDE the height */
  align-items:stretch;
}

.hero-left{
  height:auto;                    /* was 100vh */
  min-height:0;
  padding-top:clamp(2.5rem,6vh,6rem);
  padding-bottom:clamp(2.5rem,6vh,6rem);
  padding-left:clamp(1.5rem,8vw,8rem);
  padding-right:clamp(1rem,4vw,4rem);
}

.hero-right{
  position:relative;              /* was sticky (no effect) */
  height:auto;                    /* was 100vh */
  min-height:100%;
  align-self:stretch;             /* was start */
  /* keep the original look: wide panel pulled left behind the cream column */
  width:180%;
  transform:translateX(-20%);
}

/* iframe already fills hero-right via inset:0, so it now follows the hero height */

/* Short laptop screens: tighten the vertical rhythm instead of overflowing */
@media (max-height:720px) and (min-width:1101px){
  .hero-badge{margin-bottom:1.2rem}
  .hero-sub{margin-top:1rem}
  .hero-actions{margin-top:1.5rem}
  .hero-trust{margin-top:1.6rem;padding-top:1.2rem}
  .hero h1{font-size:clamp(2.4rem,4vw,3.6rem)}
}

/* Tablet / phone (globe panel is hidden below 1100px in aurea.css) */
@media (max-width:1100px){
  .hero{min-height:auto}
  .hero-left{
    padding:clamp(3rem,10vw,5rem) 7vw;
    height:auto;
  }
  .hero-sub{max-width:520px}
}

/* ───────────── PRICING ───────────── */

/* 1) Currency selector: text was var(--ink) on a dark background (unreadable) */
.currency-selector select{
  color:#fff;
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.28);
  padding:.55rem 1.1rem;
}
.currency-selector select option{background:var(--ink);color:#fff}

/* 2) Grid: 4 columns only when there is room, otherwise 2, then 1.
      (4 cols from 1101px made each card ~230px wide and cramped) */
.pricing-grid{align-items:stretch;row-gap:4.5rem}   /* room for medallion overlap when stacked */
@media (max-width:1279px){
  .pricing-grid--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .pricing-grid--4{grid-template-columns:1fr;max-width:460px;margin-inline:auto}
}

/* 3) Equal-height cards with medallions and CTAs lined up across the row */
.price-card-header{display:flex;flex-direction:column;flex:1 0 auto}
.price-card-body{flex:1}
@supports (grid-template-rows:subgrid){
  @media (min-width:769px){
    .pricing-grid--4 .price-card{
      display:grid;
      grid-row:span 2;
      grid-template-rows:subgrid;   /* header row + body row shared by all cards */
    }
    .pricing-grid--4{row-gap:0;column-gap:1.5rem}
    .pricing-grid--4 .price-card{margin-bottom:1.5rem}
  }
}

/* 4) Medallion: legible colours + fits long currencies (UGX, NGN…) */
.price-medallion{
  width:auto;min-width:116px;height:116px;
  padding:0 1.1rem;
  border-radius:58px;               /* circle for short prices, pill for long ones */
  white-space:nowrap;
}
.price-medallion .price-currency,
.price-medallion .price-num,
.price-medallion .price-free,
.price-medallion .price-custom{color:var(--ochre-dark)}   /* was indigo on white (~2.8:1) */
.price-medallion .price-num{font-size:clamp(1.4rem,1.9vw,1.85rem)}
.price-medallion .price-period{font-size:.66rem;color:var(--muted);margin-top:.25rem}

/* 5) Header/body text contrast and rhythm */
.price-card-header{padding:2rem 1.6rem 5rem}
.price-card-header h3{font-size:clamp(1.2rem,1.6vw,1.4rem)}
.price-card-desc{color:rgba(255,255,255,.72);font-size:.82rem}
.price-card-tag{color:var(--mustard)}                    /* indigo on dark was weak */
.price-card-step{color:rgba(255,255,255,.55)}
.price-card-body{padding:5.5rem 1.6rem 1.8rem}

.price-features{gap:.7rem}
.price-features li{color:var(--ink);opacity:.82}
.price-features li.muted{color:#7A6954;opacity:1}
.pf-check svg{stroke:var(--ochre)}                       /* ticks: ochre instead of pale indigo */
.pf-check.dim svg{stroke:#9A8870}

/* 6) CTAs: consistent height, subtle ochre shadows instead of blue glow */
.price-cta a{padding:.95rem 1.5rem;box-shadow:none}
.price-cta.filled a{box-shadow:0 4px 16px rgba(143,74,29,.35)}
.price-cta.outline a:hover{box-shadow:0 6px 20px rgba(143,74,29,.3)}
.price-cta.filled a:hover{box-shadow:0 8px 24px rgba(143,74,29,.4)}

/* 7) Notes under the grid */
.price-note,.pricing-payment-note{color:rgba(255,255,255,.62)}
.price-note a{color:var(--mustard)}


/* ───────────── PRICING: CALMER + UNIFORM ─────────────
   All four cards now share one look. The "featured" card no longer has a
   different header, body, medallion, outline or lift. */
.price-card,
.price-card.featured{box-shadow:0 6px 24px rgba(0,0,0,.22);transform:none}
.price-card:hover,
.price-card.featured:hover{transform:none;box-shadow:0 10px 32px rgba(0,0,0,.3)}

.price-card .price-card-header,
.price-card.featured .price-card-header,
.price-card--free .price-card-header{background:var(--navy-light)}
.price-card .price-card-body,
.price-card.featured .price-card-body{background:#fff}

.price-card .price-medallion,
.price-card.featured .price-medallion{background:#fff;box-shadow:0 3px 12px rgba(0,0,0,.18)}
.price-card.featured .price-medallion .price-currency,
.price-card.featured .price-medallion .price-num,
.price-card.featured .price-medallion .price-free,
.price-card.featured .price-medallion .price-custom{color:var(--ochre-dark)}
.price-card.featured .price-medallion .price-period{color:var(--muted)}

/* Fewer competing elements inside each card */
.price-card-step{display:none}
.price-card-tag:empty{display:none}
.price-card-desc{font-size:.8rem;line-height:1.6}

/* One button style for every card */
.price-cta.filled a,
.price-cta.outline a{background:transparent;color:var(--ochre-dark);border:2px solid var(--ochre-dark);box-shadow:none}
.price-cta.filled a:hover,
.price-cta.outline a:hover{background:var(--ochre-dark);color:#fff;transform:none;box-shadow:none}

/* ── CONSENT CHECKBOX ── */
form .consent-label{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  cursor:pointer;
  font-size:.82rem;
  color:rgba(255,255,255,.55);
  line-height:1.6;
  text-transform:none;
  letter-spacing:0;
  margin-bottom:0;
}
form .consent-label input[type="checkbox"]{
  flex-shrink:0;
  margin-top:.22rem;
  width:15px;
  height:15px;
  accent-color:var(--ochre-dark);
  cursor:pointer;
}