/*
 * Fall Porch Packages - paid-ads landing page.
 * Enqueued by inc/fall-porch-ppc-render.php. Scoped to .fpp so nothing leaks
 * into the rest of the site. Tokens sampled from live calloways.com styles.
 */

/* ==========================================================================
   Fall Porch Packages — PPC landing page
   Scoped to .fpp so nothing leaks. Tokens sampled from calloways.com.
   ========================================================================== */
.fpp-ppc-body{margin:0;padding:0;background:#fff;}
.fpp-ppc-body #wpadminbar{display:none;}
.fpp{
  --fpp-green:#41554C;
  --fpp-green-light:#576B62;
  --fpp-green-dark:#33443C;
  --fpp-sage:#E6EAE8;
  --fpp-sand:#E9E3DB;
  --fpp-sage-line:#A2B5AB;
  --fpp-rule:#EFEFEF;
  --fpp-ink:#000;
  --fpp-ink-60:rgba(0,0,0,.62);
  --fpp-paper:#fff;
  overflow-x:clip;color:var(--fpp-ink);background:var(--fpp-paper);
  font-family:'noto-sans','Noto Sans',Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.7;
}
.fpp *,.fpp *::before,.fpp *::after{box-sizing:border-box;}
.fpp [id]{scroll-margin-top:24px;}
.fpp h1,.fpp h2,.fpp h3{
  font-family:'baskerville-display-pt','Baskervville',Georgia,'Times New Roman',serif;
  font-weight:500;color:var(--fpp-green);margin:0;line-height:1.15;letter-spacing:0;
}
.fpp img{max-width:100%;display:block;height:auto;}
.fpp a{color:inherit;}
.fpp button{font-family:inherit;cursor:pointer;}
.fpp :focus-visible{outline:2px solid var(--fpp-green);outline-offset:3px;}
.fpp-wrap{max-width:1200px;margin:0 auto;padding:0 32px;}
@media(max-width:640px){ .fpp-wrap{padding:0 20px;} }
.fpp .fpp-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}
.fpp caption.fpp-sr,caption.fpp-sr{position:static;}

.fpp-eyebrow{font-size:1.12rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fpp-green);opacity:.8;display:block;margin-bottom:18px;}
.fpp-btn{display:inline-flex;align-items:center;justify-content:center;
  background:var(--fpp-green);color:#fff;border:1px solid var(--fpp-green);border-radius:0;
  padding:17px 34px;font-size:1.28rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;white-space:nowrap;
  transition:background .18s ease,border-color .18s ease,color .18s ease;}
.fpp-btn:hover,.fpp-btn:focus{background:var(--fpp-green-dark);border-color:var(--fpp-green-dark);color:#fff;text-decoration:none;}
.fpp a.fpp-btn,.fpp a.fpp-btn:link,.fpp a.fpp-btn:visited,
.fpp a.fpp-btn:hover,.fpp a.fpp-btn:focus,.fpp a.fpp-btn:active{color:#fff;}
.fpp-btn--block{width:100%;white-space:normal;text-align:center;line-height:1.4;}
.fpp-btn--sm{padding:12px 22px;font-size:1.088rem;}
.fpp-btn--lg{padding:20px 42px;font-size:1.36rem;}
.fpp-btn[aria-disabled="true"]{background:#9AA8A1;border-color:#9AA8A1;pointer-events:none;}

.fpp-section{padding:88px 0;}
@media(max-width:900px){ .fpp-section{padding:56px 0;} }
.fpp-head{max-width:820px;margin:0 auto 48px;text-align:center;}
.fpp-head h2{font-size:clamp(3.04rem,3.4vw,4.16rem);}
.fpp-head p{max-width:660px;margin:18px auto 0;font-size:1.6rem;}

/* ---- masthead: logo left, CTA right, no navigation ---- */
.fpp-mast{border-bottom:1px solid var(--fpp-rule);background:#fff;}
.fpp-mast .fpp-wrap{display:flex;align-items:center;gap:16px;
  min-height:92px;padding-top:16px;padding-bottom:16px;}
/* The Calloway's mark is a wide SVG with no intrinsic pixel size, so it will
   fill whatever box it is given. Pin the width rather than trusting the
   width attribute, and keep flex from stretching or squashing it. */
.fpp-mast img{flex:none;width:230px;max-width:46vw;height:auto;}
/* margin-left:auto rather than justify-content:space-between, so the logo
   stays hard left even if the CTA is ever removed again. */
.fpp-mast-cta{margin-left:auto;flex:none;}
.fpp-mast-cta .fpp-lbl-short{display:none;}
@media(max-width:640px){
  .fpp-mast .fpp-wrap{min-height:72px;gap:10px;}
  .fpp-mast img{width:132px;}
  .fpp-mast-cta{padding:11px 14px;font-size:0.96rem;letter-spacing:.04em;}
  .fpp-mast-cta .fpp-lbl-long{display:none;}
  .fpp-mast-cta .fpp-lbl-short{display:inline;}
}

/* ---- announcement / urgency bar ---- */
.fpp-announce{background:var(--fpp-green);color:rgba(255,255,255,.92);
  font-size:1.184rem;letter-spacing:.1em;text-transform:uppercase;}
.fpp-announce .fpp-wrap{display:flex;align-items:center;justify-content:center;gap:18px;
  min-height:44px;text-align:center;padding-top:9px;padding-bottom:9px;line-height:1.6;}

/* ---- hero ---- */
.fpp-hero{position:relative;background:var(--fpp-sand);overflow:hidden;}
.fpp-hero-grid{display:grid;grid-template-columns:1fr;max-width:1200px;margin:0 auto;}
.fpp-hero-copy{padding:56px 32px 60px;align-self:center;position:relative;z-index:2;order:2;}
.fpp-hero h1{font-size:clamp(3.2rem,3.7vw,4.64rem);margin:0;}
.fpp-lede{font-size:1.76rem;line-height:1.6;max-width:33em;margin:24px 0 0;}
.fpp-priceline{margin:28px 0 0;font-size:1.44rem;line-height:1.5;color:var(--fpp-green);font-weight:600;}
.fpp-priceline strong{font-family:'baskerville-display-pt','Baskervville',Georgia,serif;
  font-size:2.24rem;font-weight:500;display:block;margin-bottom:4px;}
.fpp-hero-cta{margin-top:26px;}
.fpp-scarcity{margin:18px 0 0;font-size:1.184rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fpp-green);opacity:.85;line-height:1.7;}
.fpp-hero-figure{position:relative;min-height:300px;order:1;}
/* Mobile puts the photo first for ad-scent, but the brief wants the price and
   the CTA above the fold. An uncapped figure takes its natural aspect ratio
   (~500px at 390w) and buries both, so cap it and let object-fit crop. */
@media(max-width:959px){
  .fpp-hero-figure{min-height:0;height:30vh;max-height:230px;}
  .fpp-hero-copy{padding:26px 20px 38px;}
  .fpp-hero h1{font-size:clamp(2.7rem,7.8vw,3.4rem);}
  .fpp-lede{font-size:1.52rem;margin-top:14px;}
  .fpp-priceline{margin-top:16px;}
  .fpp-priceline strong{font-size:2rem;}
  .fpp-hero-cta{margin-top:16px;}
  .fpp-scarcity{margin-top:14px;font-size:1.088rem;}
  .fpp-hero-cta .fpp-btn{width:100%;}
}
.fpp-hero-figure img{width:100%;height:100%;object-fit:cover;object-position:center 42%;}
@media(min-width:960px){
  .fpp-hero-grid{grid-template-columns:1.02fr .98fr;align-items:stretch;}
  .fpp-hero-copy{padding:84px 48px 84px 32px;order:1;}
  .fpp-hero-figure{min-height:560px;order:2;}
}

/* ---- trust strip ---- */
.fpp-trust{border-bottom:1px solid var(--fpp-rule);background:#fff;}
.fpp-trust ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;}
@media(min-width:640px){ .fpp-trust ul{grid-template-columns:repeat(2,1fr);} }
@media(min-width:1000px){ .fpp-trust ul{grid-template-columns:repeat(4,1fr);} }
.fpp-trust li{padding:36px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;
  font-size:1.152rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fpp-green);
  font-weight:600;line-height:1.7;border-bottom:1px solid var(--fpp-rule);}
@media(min-width:640px){ .fpp-trust li:nth-last-child(-n+2){border-bottom:0;} }
@media(min-width:1000px){ .fpp-trust li{border-bottom:0;border-right:1px solid var(--fpp-rule);}
  .fpp-trust li:last-child{border-right:0;} }
.fpp-ico{width:42px;height:42px;flex:none;color:var(--fpp-green);stroke:currentColor;fill:none;
  stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;}

/* ---- packages ---- */
.fpp-packages{background:var(--fpp-sage);}
.fpp-grid{display:grid;grid-template-columns:1fr;gap:26px;}
@media(min-width:760px){ .fpp-grid{grid-template-columns:repeat(3,1fr);} }
.fpp-card{background:#fff;border:1px solid var(--fpp-rule);display:flex;flex-direction:column;
  position:relative;min-width:0;transition:border-color .2s ease,box-shadow .2s ease;}
.fpp-card:hover{border-color:var(--fpp-sage-line);box-shadow:0 14px 34px rgba(65,85,76,.10);}
.fpp-card--featured{border-color:var(--fpp-green);}
.fpp-card-figure{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--fpp-sage);}
.fpp-card-figure img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.fpp-card:hover .fpp-card-figure img{transform:scale(1.03);}
.fpp-flag{position:absolute;top:0;left:0;background:var(--fpp-green);color:#fff;font-size:0.992rem;
  letter-spacing:.16em;text-transform:uppercase;font-weight:600;padding:8px 14px;z-index:2;}
.fpp-card-body{padding:26px 24px 28px;display:flex;flex-direction:column;flex:1;}
.fpp-card-size{font-size:1.056rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fpp-ink-60);margin-bottom:10px;min-height:1.6em;}
.fpp-card h3{font-size:2.4rem;}
.fpp-price{font-family:'baskerville-display-pt','Baskervville',Georgia,serif;font-size:2.32rem;
  color:var(--fpp-ink);margin:8px 0 0;}
.fpp-blurb{font-size:1.44rem;margin:14px 0 0;line-height:1.6;}
.fpp-includes{list-style:none;margin:18px 0 0;padding:18px 0 0;border-top:1px solid var(--fpp-rule);
  font-size:1.376rem;line-height:1.85;}
.fpp-includes li{display:flex;gap:12px;}
.fpp-includes .fpp-qty{color:var(--fpp-green);font-weight:600;min-width:2.4em;}
.fpp-spacer{flex:1;}
.fpp-card .fpp-btn{margin-top:24px;font-size:1.088rem;letter-spacing:.06em;padding:16px 12px;}
.fpp-addon{max-width:780px;margin:44px auto 0;text-align:center;background:#fff;
  border:1px solid var(--fpp-sage-line);padding:26px 28px;font-size:1.44rem;line-height:1.65;}
.fpp-addon strong{color:var(--fpp-green);}
.fpp-finenote{max-width:780px;margin:22px auto 0;font-size:1.2rem;line-height:1.65;
  text-align:center;color:var(--fpp-ink-60);}

/* ---- how it works ---- */
.fpp-steps{background:#fff;}
.fpp-step-grid{display:grid;grid-template-columns:1fr;border-top:1px solid var(--fpp-rule);}
@media(min-width:860px){ .fpp-step-grid{grid-template-columns:repeat(3,1fr);} }
.fpp-step{padding:34px 30px 34px 0;border-bottom:1px solid var(--fpp-rule);}
@media(min-width:860px){
  .fpp-step{border-bottom:0;border-right:1px solid var(--fpp-rule);padding:38px 34px;}
  .fpp-step:first-child{padding-left:0;}
  .fpp-step:last-child{border-right:0;padding-right:0;}
}
.fpp-step .fpp-n{font-family:'baskerville-display-pt','Baskervville',Georgia,serif;font-size:4rem;
  color:var(--fpp-green);opacity:.35;line-height:1;display:block;margin-bottom:16px;}
.fpp-step h3{font-size:1.888rem;margin-bottom:12px;}
.fpp-step p{font-size:1.44rem;margin:0;}

/* ---- comparison ---- */
.fpp-compare{background:var(--fpp-sand);}
.fpp-table-scroll{position:relative;overflow-x:auto;border:1px solid var(--fpp-sage-line);
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;}
.fpp-table{width:100%;border-collapse:collapse;min-width:760px;font-size:1.408rem;background:#fff;}
.fpp-table thead th{background:var(--fpp-green);color:#fff;text-align:left;padding:22px 20px;
  vertical-align:bottom;font-family:'baskerville-display-pt','Baskervville',Georgia,serif;
  font-weight:500;font-size:1.856rem;}
.fpp-table thead th .fpp-p{display:block;font-family:'noto-sans','Noto Sans',sans-serif;
  font-size:1.152rem;letter-spacing:.14em;text-transform:uppercase;opacity:.85;margin-top:8px;font-weight:400;}
.fpp-table tbody th{text-align:left;padding:16px 20px;font-weight:600;color:var(--fpp-green);
  font-size:1.184rem;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  background:var(--fpp-sage);border-bottom:1px solid var(--fpp-rule);width:220px;
  position:sticky;left:0;z-index:2;box-shadow:1px 0 0 var(--fpp-rule);}
.fpp-table thead th:first-child{position:sticky;left:0;z-index:3;background:var(--fpp-green);width:220px;}
.fpp-table tbody td{padding:16px 20px;border-bottom:1px solid var(--fpp-rule);border-left:1px solid var(--fpp-rule);}
.fpp-table tbody tr:last-child th,.fpp-table tbody tr:last-child td{border-bottom:0;}
.fpp-table .fpp-dash{color:rgba(0,0,0,.6);}
.fpp-table .fpp-inc{color:var(--fpp-green);font-weight:600;}
.fpp-tablenote{font-size:1.28rem;margin-top:18px;text-align:center;opacity:.8;}
@media(max-width:900px){
  .fpp-table tbody th{width:140px;min-width:140px;white-space:normal;font-size:1.088rem;padding:14px 12px;}
  .fpp-table tbody td{padding:14px;font-size:1.312rem;}
  .fpp-table{min-width:640px;}
}

/* ---- faq ---- */
.fpp-faq{background:#fff;}
.fpp-faq-list{max-width:820px;margin:0 auto;border-top:1px solid var(--fpp-rule);}
.fpp-faq-item{border-bottom:1px solid var(--fpp-rule);}
.fpp-faq-item h3{margin:0;font-size:inherit;font-weight:inherit;line-height:inherit;color:inherit;}
.fpp-faq-q{width:100%;background:none;border:0;text-align:left;display:flex;align-items:center;
  justify-content:space-between;gap:24px;padding:26px 4px;color:var(--fpp-green);
  font-family:'baskerville-display-pt','Baskervville',Georgia,serif;font-size:1.856rem;font-weight:500;}
.fpp-pm{flex:none;width:16px;height:16px;position:relative;}
.fpp-pm::before,.fpp-pm::after{content:"";position:absolute;background:var(--fpp-green);transition:transform .2s ease;}
.fpp-pm::before{left:0;top:50%;width:100%;height:1px;transform:translateY(-50%);}
.fpp-pm::after{top:0;left:50%;width:1px;height:100%;transform:translateX(-50%);}
.fpp-faq-item.is-open .fpp-pm::after{transform:translateX(-50%) scaleY(0);}
.fpp-faq-a{max-height:0;overflow:hidden;transition:max-height .28s ease;}
.fpp-faq-a p{margin:0;padding:0 4px 28px;font-size:1.536rem;max-width:68ch;}

/* ---- final cta + zip ---- */
.fpp-final{background:var(--fpp-sand);text-align:center;}
.fpp-final h2{color:var(--fpp-green);font-size:clamp(3.04rem,3.6vw,4.48rem);}
.fpp-final p{max-width:44em;margin:20px auto 0;font-size:1.6rem;}
.fpp-zipform{max-width:620px;margin:36px auto 0;display:flex;flex-wrap:wrap;gap:14px;justify-content:center;}
.fpp-zipform input[type="text"]{flex:1 1 200px;min-width:160px;max-width:260px;background:#fff;
  border:1px solid var(--fpp-sage-line);border-radius:0;padding:18px 20px;font-size:1.44rem;
  font-family:inherit;color:var(--fpp-ink);letter-spacing:.06em;}
.fpp-zipform input[type="text"]:focus{outline:2px solid var(--fpp-green);outline-offset:2px;}
.fpp-zipform .fpp-btn{flex:0 1 auto;}
.fpp-zipstatus{max-width:560px;margin:20px auto 0;font-size:1.376rem;line-height:1.6;min-height:1.6em;}
.fpp-zipstatus.is-ok{color:var(--fpp-green);font-weight:600;}
.fpp-zipstatus.is-err{color:#8A3B2E;}
.fpp-final .fpp-fine{margin:28px auto 0;font-size:1.184rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fpp-green);opacity:.85;}

/* ---- minimal footer (no navigation) ---- */
.fpp-foot{background:var(--fpp-green);color:rgba(255,255,255,.85);text-align:center;padding:48px 0;}
.fpp-foot .fpp-foot-mark{font-family:'baskerville-display-pt','Baskervville',Georgia,serif;
  font-size:2.24rem;color:#fff;margin:0 0 18px;}
.fpp-foot p{margin:0;font-size:1.152rem;letter-spacing:.1em;text-transform:uppercase;line-height:2;}
.fpp-foot a{color:rgba(255,255,255,.85);text-decoration:underline;text-underline-offset:4px;}

@media(prefers-reduced-motion:reduce){ .fpp *{transition:none !important;} }
