/* ============================================================
   Experts Business First — money page premium layer.
   Scoped entirely to .money-page. Loaded only from
   layouts/flightcitysearch.blade.php, so no other template,
   the homepage, blog or checkout is affected.

   Presentation only: no field, link, ID or content is changed.
   Revert: remove the <link> in flightcitysearch.blade.php.
   ============================================================ */

.money-page{
  --mp-navy:#14202B;
  --mp-navy-deep:#0E1822;
  --mp-accent:#C4400E;
  --mp-accent-deep:#D2410E;
  --mp-ink:#14202B;
  --mp-soft:#4A6173;
  --mp-line:#DDE7EF;
  --mp-paper:#fff;
  --mp-haze:#F4F8FC;
  --mp-radius:20px;
  --mp-radius-sm:14px;
  --mp-shadow:0 18px 46px rgba(20,32,43,.09);
  --mp-sec-y:clamp(2.75rem,5.2vw,4.5rem);
}

/* ------------------------------------------------ rhythm ---- */
/* Section padding ranged from 11px to 72px across the page. */
.money-page > section:not(.money-hero){
  padding-top:var(--mp-sec-y);
  padding-bottom:var(--mp-sec-y);
}
.money-page > section.money-hero{padding-top:clamp(1.5rem,3vw,2.5rem);padding-bottom:clamp(2rem,4vw,3.25rem)}
.money-page > section.money-explore{padding-top:var(--mp-sec-y);padding-bottom:var(--mp-sec-y)}
.money-page > aside.tbf-trust{padding-top:1rem;padding-bottom:1rem}
.money-page > nav.money-crumbs{padding-top:1.1rem;padding-bottom:0}

/* ------------------------------------------- typography ---- */
/* The studio overlay forces the hero H1 to weight 800 !important, which reads
   blunt next to the editorial Fraunces 500 used elsewhere. Restore the lighter
   editorial cut at a larger display size. Needs matching specificity + !important. */
body .money-page .money-hero-copy h1{
  font-size:clamp(2.25rem,4.4vw,3.6rem)!important;
  line-height:1.06;
  font-weight:500!important;
  letter-spacing:-.032em;
  max-width:17ch;
  text-wrap:balance;
}
.money-page h1{
  font-size:clamp(2.25rem,4.4vw,3.6rem);
  line-height:1.06;
  font-weight:500;
  letter-spacing:-.03em;
}
/* weight 600, not 500: h3 below is 650, so an h3 rendered HEAVIER than the h2
   it sits under. A child heading must never outweigh its parent. */
.money-page h2{
  font-size:clamp(1.7rem,2.9vw,2.5rem);
  line-height:1.14;
  font-weight:600;
  letter-spacing:-.025em;
  margin-bottom:.85rem;
}
.money-page h3{
  font-size:clamp(1.15rem,1.6vw,1.4rem);
  line-height:1.25;
  font-weight:650;
  letter-spacing:-.015em;
  margin-bottom:.6rem;
}
.money-page .money-body p,
.money-page .money-intro p{
  font-size:1.02rem;
  line-height:1.72;
  color:var(--mp-soft);
}
/* Long-form copy reads better on a controlled measure. */
.money-page .money-intro > p,
.money-page .money-body > .container > p{max-width:70ch}

.money-page .money-hero-kicker{
  display:inline-flex;align-items:center;gap:.7rem;
  font-size:.74rem;font-weight:750;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mp-accent);margin-bottom:1rem;
}
.money-page .money-hero-kicker::before{content:"";width:34px;height:1px;background:currentColor;flex:none}

.money-page .money-hero-lead{
  font-size:clamp(1rem,1.35vw,1.15rem);
  line-height:1.65;
  max-width:44ch;
}

/* ------------------------------------------------- hero ---- */
.money-page .money-hero-grid{align-items:center;gap:clamp(1.5rem,3.5vw,3rem)}
.money-page .money-hero-shade{
  background:linear-gradient(100deg,rgba(10,18,26,.9) 0%,rgba(10,18,26,.72) 42%,rgba(10,18,26,.5) 100%);
}
.money-page .money-hero-answer{
  border-left:2px solid var(--mp-accent);
  padding-left:1rem;
  margin-top:1.1rem;
  font-size:.98rem;
  line-height:1.65;
}
.money-page .money-hero-cta{
  margin-top:1.35rem;
  min-height:52px;
  border-radius:999px;
  padding-inline:1.6rem;
  font-weight:650;
  letter-spacing:-.01em;
}
.money-page .money-hero-form{
  border-radius:var(--mp-radius);
  background:var(--mp-paper);
  box-shadow:0 30px 70px rgba(6,14,22,.28);
  overflow:hidden;
}

/* ------------------------------------------------ cards ---- */
.money-page .money-intro-facts{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:12px;
  list-style:none;
  margin:1.6rem 0 0;
  padding:0;
}
.money-page .money-intro-facts li{
  position:relative;
  padding:1.05rem 1.15rem;
  border:1px solid var(--mp-line);
  border-radius:var(--mp-radius-sm);
  background:var(--mp-paper);
  font-size:.92rem;
  line-height:1.55;
  color:var(--mp-soft);
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s,border-color .25s;
}
.money-page .money-intro-facts li:hover{
  transform:translateY(-3px);
  box-shadow:var(--mp-shadow);
  border-color:rgba(240,83,28,.3);
}
.money-page .money-intro-facts strong,
.money-page .money-intro-facts b{display:block;color:var(--mp-ink);font-weight:650;margin-bottom:.2rem}

.money-page .money-feature-fare,
.money-page .money-side-card,
.money-page .money-sidebar > *{
  border-radius:var(--mp-radius);
  border:1px solid var(--mp-line);
  background:var(--mp-paper);
}
.money-page .money-feature-fare{padding:1.35rem 1.4rem;box-shadow:var(--mp-shadow)}

.money-page .money-fare-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.92rem}
.money-page .money-fare-table th,
.money-page .money-fare-table td{padding:.7rem .85rem;border-bottom:1px solid var(--mp-line);text-align:left}
.money-page .money-fare-table thead th{
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mp-soft);
  background:var(--mp-haze);border-bottom:1px solid var(--mp-line);
}
.money-page .money-fare-table tbody tr:last-child th,
.money-page .money-fare-table tbody tr:last-child td{border-bottom:0}
.money-page .money-fare-table tbody tr{transition:background .2s}
.money-page .money-fare-table tbody tr:hover{background:var(--mp-haze)}
.money-page .money-side-title{
  font-size:1.05rem;font-weight:650;letter-spacing:-.015em;color:var(--mp-ink);
}
.money-page .money-side-quote{border-radius:999px;min-height:48px;padding-inline:1.4rem;font-weight:650}

/* --------------------------------------------------- FAQ ---- */
.money-page .money-faq{background:var(--mp-haze)}
.money-page .money-faq .faq-item,
.money-page .money-faq details{
  border:1px solid var(--mp-line);
  border-radius:var(--mp-radius-sm);
  background:var(--mp-paper);
  margin-bottom:10px;
  overflow:hidden;
  transition:border-color .25s,box-shadow .25s;
}
.money-page .money-faq .faq-item:hover,
.money-page .money-faq details:hover{border-color:rgba(240,83,28,.28);box-shadow:0 6px 18px rgba(20,32,43,.06)}
.money-page .money-faq summary,
.money-page .money-faq .faq-q{
  padding:1.05rem 1.2rem;
  font-size:1rem;
  font-weight:650;
  letter-spacing:-.01em;
  color:var(--mp-ink);
  cursor:pointer;
}
.money-page .money-faq .faq-a-in,
.money-page .money-faq summary + *{padding:0 1.2rem 1.1rem;color:var(--mp-soft);line-height:1.7}

/* ----------------------------------------------- related ---- */
.money-page .money-related a[class*="card"],
.money-page .money-explore a[class*="card"]{
  border-radius:var(--mp-radius-sm);
  border:1px solid var(--mp-line);
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s,border-color .25s;
}
.money-page .money-related a[class*="card"]:hover,
.money-page .money-explore a[class*="card"]:hover{
  transform:translateY(-4px);
  box-shadow:var(--mp-shadow);
  border-color:rgba(240,83,28,.3);
}

/* -------------------------------------------- trust strip ---- */
.money-page .tbf-trust{border-block:1px solid var(--mp-line);background:var(--mp-paper)}

/* --------------------------------------------- responsive ---- */
@media (max-width:900px){
  .money-page .money-hero-grid{gap:1.5rem}
  .money-page .money-hero-lead{max-width:none}
  .money-page .money-intro-facts{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
}
@media (max-width:640px){
  .money-page .money-intro-facts{grid-template-columns:1fr}
  .money-page .money-hero-cta{width:100%;justify-content:center}
  .money-page .money-fare-table{font-size:.86rem}
  .money-page .money-fare-table th,
  .money-page .money-fare-table td{padding:.6rem .55rem}
}

@media (prefers-reduced-motion:reduce){
  .money-page .money-intro-facts li,
  .money-page .money-related a[class*="card"],
  .money-page .money-explore a[class*="card"],
  .money-page .money-faq .faq-item,
  .money-page .money-fare-table tbody tr{transition:none}
  .money-page .money-intro-facts li:hover,
  .money-page .money-related a[class*="card"]:hover,
  .money-page .money-explore a[class*="card"]:hover{transform:none}
}