/* ============================================================
   ALL ABOARD — Lapsed Donor Landing Page
   Brand: Fortis Institute / "All Aboard" campaign email art
   Type:  Display = Playfair Display, Body = Lora
   ============================================================ */

:root{
  --navy:#0B2438;
  --navy-deep:#071A2A;
  --navy-lift:#123253;
  --gold:#D3A44A;
  --gold-light:#E4BE72;
  --grey:#EFEFEF;
  --grey-line:#D8D8D8;
  --white:#FFFFFF;
  --ink:#1A2330;
  --display:"Playfair Display","Didot",Georgia,serif;
  --body:"Lora",Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--body);
  font-size:18px;
  line-height:1.65;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 28px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  background:
    radial-gradient(120% 90% at 78% 8%, #17406A 0%, rgba(23,64,106,0) 62%),
    linear-gradient(180deg,#0C2740 0%, #0B2438 55%, #081F33 100%);
  color:var(--white);
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:-20% -30% auto -30%;
  height:150%;
  background:repeating-conic-gradient(from 200deg at 72% 6%,
    rgba(255,255,255,.036) 0deg 1.6deg, rgba(255,255,255,0) 1.6deg 5.4deg);
  pointer-events:none;
}
.hero .wrap{position:relative;z-index:2;padding-top:34px;padding-bottom:0}
.hero-logo{width:232px;height:auto;margin-bottom:46px}
.eyebrow{
  font-family:var(--body);
  font-weight:600;
  font-size:13px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 18px;
}
.hero h1{
  font-family:var(--display);
  font-weight:500;
  font-style:italic;
  font-size:clamp(36px,4.9vw,56px);
  line-height:1.05;
  margin:0;
  letter-spacing:-.01em;
}
.hero h1 .speed{
  display:block;
  font-style:normal;
  font-weight:800;
  color:var(--gold);
  font-size:clamp(56px,10.4vw,118px);
  line-height:.92;
  letter-spacing:.005em;
  margin-top:6px;
}
.hero-lede{
  font-size:clamp(18px,2.1vw,22px);
  line-height:1.5;
  max-width:31ch;
  margin:28px 0 0;
  color:#E8EEF5;
}
.hero-cta{margin:30px 0 0}
.btn{
  display:inline-block;
  font-family:var(--display);
  font-weight:700;
  font-size:21px;
  letter-spacing:.05em;
  text-transform:uppercase;
  text-decoration:none;
  padding:15px 44px;
  border-radius:999px;
  transition:background-color .18s ease,color .18s ease,transform .18s ease;
}
.btn-outline{
  color:var(--gold);
  border:2px solid var(--gold);
  background:transparent;
}
.btn-outline:hover,.btn-outline:focus{background:var(--gold);color:var(--navy-deep)}
.btn-solid{
  background:var(--gold);
  color:var(--navy-deep);
  border:2px solid var(--gold);
}
.btn-solid:hover,.btn-solid:focus{background:var(--gold-light);border-color:var(--gold-light)}
.btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.hero-train{
  position:relative;
  z-index:0;
  margin:-4px 0 0 -6%;
  width:106%;
}
.hero-train img{width:100%;height:auto}

/* ---------- SECTION FRAME ---------- */
section{position:relative}
.band{padding:84px 0;text-align:center}
.band-grey{background:var(--grey);color:var(--ink)}
.band-navy{
  background:linear-gradient(180deg,#0B2438 0%,#0A2035 100%);
  color:var(--white);
}
.band-white{background:var(--white)}
.label{
  font-family:var(--body);
  font-weight:600;
  font-size:12.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  margin:0 0 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
}
.label::before,
.label::after{content:"";width:48px;height:1px;background:currentColor;opacity:.32}
.band-grey .label{color:#6B5426}
.band-navy .label{color:var(--gold)}
h2{
  font-family:var(--display);
  font-weight:700;
  font-style:italic;
  font-size:clamp(32px,4.6vw,52px);
  line-height:1.08;
  margin:0 0 26px;
  letter-spacing:-.01em;
}
.band-navy h2{color:var(--white)}
.copy{max-width:60ch;margin:0 auto}
.copy p{margin:0 0 20px;font-size:clamp(17px,1.5vw,19.5px)}
.copy p:last-child{margin-bottom:0}
.copy strong{font-weight:600}
.band-navy .copy p{color:#DEE7F0}
.band-navy .copy strong{color:var(--white)}

/* ---------- WHAT YOUR SUPPORT FUELS ---------- */
.fuel{
  list-style:none;
  margin:44px auto 0;
  max-width:940px;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border-top:1px solid rgba(211,164,74,.42);
  border-bottom:1px solid rgba(211,164,74,.42);
}
.fuel li{
  padding:26px 22px;
  border-right:1px solid rgba(211,164,74,.28);
}
.fuel li:last-child{border-right:0}
.fuel .fuel-more{
  display:block;
  font-family:var(--display);
  font-style:italic;
  font-weight:500;
  font-size:26px;
  color:var(--gold);
  line-height:1;
  margin-bottom:8px;
}
.fuel .fuel-thing{
  display:block;
  font-size:17px;
  font-weight:500;
  color:var(--white);
  line-height:1.3;
}
.free{
  margin:30px auto 0;
  max-width:52ch;
  font-family:var(--display);
  font-style:italic;
  font-size:clamp(19px,2.2vw,24px);
  color:var(--gold-light);
  line-height:1.4;
}
.destination{
  margin:52px auto 0;
  padding:34px 0 0;
  border-top:1px solid rgba(255,255,255,.16);
  max-width:60ch;
}

/* ---------- GIVE ---------- */
.give{background:var(--white);padding:84px 0 92px}
.give-head{text-align:center;max-width:720px;margin:0 auto 44px}
.give-head .label{justify-content:center;color:#6B5426}
.give-head h2{color:var(--navy);margin-bottom:18px}
.give-head p{font-size:clamp(18px,1.8vw,21px);margin:0 0 10px}
.give-head .ask{
  font-family:var(--display);
  font-style:italic;
  font-weight:500;
  font-size:clamp(20px,2.3vw,26px);
  color:var(--navy);
  line-height:1.35;
}
.signoff{
  margin:26px 0 0;
  font-size:16px;
  letter-spacing:.02em;
  color:#4A5567;
}
.signoff strong{font-family:var(--display);font-size:19px;color:var(--navy);font-weight:700}

/* ---------- GOSPEL GIFTS TABS ---------- */
.gifts{
  background:var(--grey);
  border:1px solid var(--grey-line);
  border-radius:4px;
  padding:34px 26px 30px;
  max-width:1140px;
  margin:0 auto;
  text-align:center;
}
.gifts-title{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(28px,3.4vw,40px);
  color:var(--navy);
  margin:0 0 22px;
  line-height:1.1;
}
.gifts-tabs{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:2px 6px;
  border-bottom:1px solid var(--grey-line);
  margin:0 0 30px;
}
.gt-tab{
  appearance:none;
  background:none;
  border:0;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  padding:10px 14px;
  font-family:var(--body);
  font-size:16px;
  line-height:1.3;
  color:var(--ink);
  cursor:pointer;
  transition:color .15s ease,border-color .15s ease;
}
.gt-tab:hover{color:#6B5426}
.gt-tab[aria-selected="true"]{
  color:#6B5426;
  border-bottom-color:var(--gold);
  font-weight:600;
}
.gt-tab:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:3px}
.gt-panel{max-width:820px;margin:0 auto;text-align:center}
.gt-panel h3{
  font-family:var(--display);
  font-weight:700;
  font-style:italic;
  font-size:clamp(22px,2.4vw,28px);
  color:var(--navy);
  margin:0 0 16px;
}
.gt-panel h4{
  font-family:var(--body);
  font-weight:600;
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#6B5426;
  margin:30px 0 10px;
}
.gt-panel p{font-size:17px;line-height:1.6;margin:0 0 16px;color:#2B3444}
.gt-panel a{color:var(--navy);text-decoration-color:var(--gold);text-underline-offset:3px}
.gt-panel .big-line{
  font-family:var(--display);
  font-size:clamp(21px,2.4vw,27px);
  color:var(--navy);
  margin:0 0 14px;
}
.gt-panel .addr{
  font-family:var(--display);
  font-size:20px;
  line-height:1.5;
  color:var(--navy);
}
.gt-panel .panel-cta{margin:4px 0 24px}
/* PayPal's own branded button asset -- see the comment in the panel markup */
.pp-btn{display:inline-block;line-height:0;border-radius:6px}
.pp-btn img{width:242px;height:auto;max-width:100%;display:block}
.pp-btn:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.pp-text{display:none}
.pp-btn.pp-fallback .pp-text{
  display:inline-block;background:#FFC43A;color:#0B2438;border-radius:32px;
  font-family:var(--body);font-weight:700;font-size:15px;letter-spacing:.06em;
  line-height:1;padding:22px 42px;
}
.gt-panel .panel-note{font-size:15.5px;color:#4A5567;margin-top:24px}
.acct{
  background:var(--white);
  border:1px solid var(--grey-line);
  border-radius:3px;
  padding:22px 24px;
  margin:28px auto 0;
  max-width:560px;
  text-align:left;
}
.acct-title{
  font-family:var(--body);
  font-weight:600;
  font-size:12.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#6B5426;
  margin:0 0 14px !important;
  text-align:center;
}
.acct dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0;font-size:16px}
.acct dt{color:#4A5567}
.acct dd{margin:0;font-weight:600;color:var(--navy)}
.acct dd em{font-weight:400;font-style:italic;color:#4A5567}

/* donation embed slot */
.donation-note{
  font-family:var(--body);
  font-size:13px;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:600;
  color:#4A5567;
  text-align:center;
  margin:0 0 18px;
}
#donation-embed{
  width:100%;
  max-width:800px;
  min-height:1400px;
  margin:0 auto;
  background:var(--white);
  border:2px dashed var(--gold);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  text-align:center;
  padding:40px 24px;
}
#donation-embed .slot-title{
  font-family:var(--display);
  font-weight:700;
  font-size:24px;
  color:var(--navy);
  margin:0;
}
#donation-embed code{
  display:block;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13px;
  line-height:1.6;
  color:#243347;
  background:var(--grey);
  border:1px solid var(--grey-line);
  padding:16px 18px;
  max-width:820px;
  word-break:break-all;
  text-align:left;
}
.give-alt{
  text-align:center;
  margin:30px auto 0;
  max-width:720px;
  font-size:16px;
  color:#4A5567;
}
.give-alt a{color:var(--navy);text-decoration-color:var(--gold);text-underline-offset:3px}

/* ---------- FOOTER ---------- */
footer{
  background:var(--navy-deep);
  color:#C9D4E0;
  padding:56px 0 48px;
  text-align:center;
  font-size:15.5px;
}
.footer-logo{width:196px;margin:0 auto 26px}
footer a{color:#C9D4E0;text-decoration-color:rgba(211,164,74,.7);text-underline-offset:3px}
footer a:hover{color:var(--gold)}
.footer-line{margin:0 0 8px}
.footer-rule{width:60px;height:1px;background:var(--gold);margin:30px auto 22px;opacity:.7}
.footer-fine{font-size:13.5px;color:#8A9AAC;margin:0}

/* ---------- RESPONSIVE ---------- */
@media (min-width:900px){
  .hero .wrap{
    max-width:1240px;
    padding-top:40px;
    padding-bottom:58px;
  }
  .hero-body{
    display:grid;
    grid-template-columns:minmax(0,0.94fr) minmax(0,1.06fr);
    align-items:center;
    gap:clamp(24px,4vw,64px);
    margin-top:clamp(28px,4vw,54px);
  }
  .hero-copy{position:relative;z-index:3;padding:0}
  .hero-train{width:100%;margin:0;z-index:1}
}
@media (min-width:1280px){
  .hero-body{grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr)}
}
@media (max-width:899px){
  .hero-logo{width:200px;margin-bottom:34px}
  .hero-copy{max-width:none;padding-bottom:0}
  .hero-train{width:112%;margin:22px 0 -10px -8%;z-index:0}
}
@media (max-width:760px){
  body{font-size:17px}
  .band{padding:64px 0}
  .fuel{grid-template-columns:repeat(2,1fr)}
  .fuel li{border-bottom:1px solid rgba(211,164,74,.28)}
  .fuel li:nth-child(2n){border-right:0}
  .fuel li:nth-child(n+3){border-bottom:0}
  .gifts{padding:26px 14px 24px}
  .gt-tab{font-size:15px;padding:9px 10px}
  #donation-embed{min-height:1200px}
  .acct dl{grid-template-columns:1fr;gap:2px 0}
  .acct dd{margin-bottom:12px}
}
@media (max-width:520px){
  .wrap{padding:0 20px}
  .hero-logo{width:172px}
  .btn{font-size:18px;padding:13px 32px}
  .fuel{grid-template-columns:1fr}
  .fuel li{border-right:0;border-bottom:1px solid rgba(211,164,74,.28)}
  .fuel li:last-child{border-bottom:0}
  .fuel li:nth-child(n+3){border-bottom:1px solid rgba(211,164,74,.28)}
  .fuel li:last-child{border-bottom:0}
  #donation-embed{min-height:1100px;padding:28px 16px}
  #donation-embed code{font-size:11.5px}
  .gt-tab{font-size:14.5px;padding:8px 8px}
  .gt-panel p{font-size:16px}
  .label::before,.label::after{display:none}
  .label{justify-content:center;gap:0}
}