/* Porchlight — marketing site. Brand: amber porch glow, dusk blue, warm cream. */
:root{
  --porch-amber:#E8943A; --lantern-glow:#F4B860; --ember:#C2651F;
  --dusk:#1E2A3A; --twilight:#2E4156; --cream:#FBF6EC; --paper:#FFFFFF;
  --ink:#1B2027; --slate:#4A5462; --line:rgba(30,42,58,.10);
  --moss:#3F7D58; --sky:#5E8BB0;
  --maxw:1140px; --readw:720px;
  --shadow:0 14px 40px rgba(30,42,58,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:18px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:"Fraunces","Source Serif 4",Georgia,serif; line-height:1.14; color:var(--dusk); font-weight:600; letter-spacing:-.01em; text-wrap:balance}
h1{font-size:clamp(2.3rem,5vw,3.5rem); margin:.1em 0 .35em}
h2{font-size:clamp(1.7rem,3.4vw,2.4rem); margin:0 0 .5em}
h3{font-size:1.28rem; margin:0 0 .4em}
p{margin:0 0 1.1em}
a{color:var(--ember); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
em{font-style:italic}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.read{max-width:var(--readw); margin:0 auto; padding:0 24px}
.center{text-align:center}
.narrow{max-width:62ch; margin-inline:auto}
.eyebrow{text-transform:uppercase; letter-spacing:.14em; font-size:.78rem; font-weight:700; color:var(--ember); margin:0 0 .5em}
.lead{font-size:1.2rem; color:var(--slate)}

/* Buttons */
.btn{display:inline-block; background:var(--porch-amber); color:var(--dusk)!important; font-weight:600; padding:13px 26px; border-radius:999px; box-shadow:0 6px 18px rgba(232,148,58,.34); transition:transform .15s,box-shadow .15s; white-space:nowrap}
.btn:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(232,148,58,.5); text-decoration:none}
.btn-lg{padding:15px 30px; font-size:1.05rem}
.btn-sm{padding:9px 18px; font-size:.92rem}
.btn-ghost{background:transparent; color:var(--dusk)!important; border:1.6px solid rgba(30,42,58,.22); box-shadow:none}
.btn-ghost:hover{border-color:var(--ember); background:rgba(194,101,31,.06)}
.hero .btn-ghost, .cta-band .btn-ghost{color:var(--cream)!important; border-color:rgba(244,184,96,.55)}
.hero .btn-ghost:hover, .cta-band .btn-ghost:hover{background:rgba(244,184,96,.12)}
.btn-ghost.dark{color:var(--dusk)!important}

/* Header */
.site-head{position:sticky; top:0; z-index:50; background:rgba(251,246,236,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex; align-items:center; gap:18px; height:68px}
.brand{display:flex; align-items:center; gap:10px; font-family:"Fraunces",serif; font-weight:600; font-size:1.38rem; color:var(--dusk)}
.brand:hover{text-decoration:none}
.lamp{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 50% 38%,var(--lantern-glow),var(--porch-amber) 58%,var(--ember));box-shadow:0 0 16px 3px rgba(232,148,58,.55); flex:none}
.nav{display:flex; gap:6px; margin-left:auto}
.navlink{color:var(--slate); font-size:.96rem; padding:6px 12px; font-weight:500; border-radius:8px}
.navlink:hover{color:var(--ember); text-decoration:none; background:rgba(194,101,31,.06)}
.nav-cta{display:flex; align-items:center; gap:10px}
.nav-cta .signin{color:var(--dusk); font-weight:600}

/* Hero */
.hero{background:linear-gradient(165deg,var(--dusk),var(--twilight)); color:var(--cream); position:relative; overflow:hidden}
.hero::after{content:"";position:absolute;right:-160px;top:-160px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(244,184,96,.28),transparent 64%);pointer-events:none}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:54px; align-items:center; padding:82px 24px 86px; position:relative; z-index:1}
.hero h1{color:var(--cream)}
.hero .eyebrow{color:var(--lantern-glow)}
.hero .lede{font-size:1.22rem; color:#dbe1e9; max-width:52ch; margin-bottom:1.7em}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.trustline{margin-top:1.5em; font-size:.9rem; color:#b9c2cd}
/* Hero media + story chip */
.hero-media{position:relative}
.hero-media>img{border-radius:20px; box-shadow:0 24px 60px rgba(0,0,0,.38); aspect-ratio:15/11; object-fit:cover; width:100%}
.story-chip{position:absolute; left:-24px; bottom:-26px; max-width:300px; background:var(--paper); color:var(--ink); border-radius:16px; padding:18px 20px; box-shadow:var(--shadow); border:1px solid var(--line)}
.chip-label{font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; font-weight:700; color:var(--ember)}
.chip-quote{font-family:"Fraunces",serif; font-size:1.08rem; line-height:1.34; color:var(--dusk); margin:.5em 0 .55em}
.chip-by{font-size:.82rem; color:var(--slate)}

/* Generic section rhythm */
.section{padding:74px 0}
.band{padding:60px 0; background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.band h2{margin-bottom:.4em}
.section-tint{background:#F4ECDC}
.section-dark{background:var(--dusk); color:var(--cream)}
.section-dark h2,.section-dark h3{color:var(--cream)}
.section .eyebrow.center,.section-dark .eyebrow{text-align:center}

/* How it works — steps */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px}
.step{background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:30px 26px; box-shadow:0 4px 16px rgba(30,42,58,.05)}
.step-num{display:inline-grid; place-items:center; width:42px; height:42px; border-radius:50%; background:var(--dusk); color:var(--lantern-glow); font-family:"Fraunces",serif; font-weight:700; font-size:1.2rem; margin-bottom:14px}
.step h3{color:var(--dusk)}
.step p{color:var(--slate); font-size:.99rem; margin:0}

/* Who it's for — faces */
.faces{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:44px}
.face{background:var(--paper); border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:0 6px 20px rgba(30,42,58,.06)}
.face>img{width:100%; aspect-ratio:3/2; object-fit:cover}
.face-body{padding:24px 24px 28px}
.face-body h3{color:var(--dusk)}
.face-body p{color:var(--slate); font-size:1rem; margin:0}

/* Outcomes */
.outcomes{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:42px; max-width:920px; margin-inline:auto}
.outcome{background:var(--paper); border:1px solid var(--line); border-left:4px solid var(--porch-amber); border-radius:12px; padding:24px 26px}
.outcome h3{color:var(--dusk); font-size:1.18rem; margin-bottom:.3em}
.outcome p{color:var(--slate); font-size:1rem; margin:0}

/* Evidence */
.evidence-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center}
.evidence-fig{margin:0}
.evidence-fig img{border-radius:18px; box-shadow:0 18px 44px rgba(0,0,0,.34); aspect-ratio:2/1; object-fit:cover; width:100%}

/* Article cards (with images) */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:24px; margin-top:40px}
.card{background:var(--paper); border:1px solid var(--line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 4px 16px rgba(30,42,58,.05); transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow); text-decoration:none}
.card-img{width:100%; aspect-ratio:2/1; object-fit:cover}
.card-pad{padding:22px 24px 26px; display:flex; flex-direction:column; flex:1}
.card .tag{font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; font-weight:700; color:var(--ember)}
.card h3{margin:.45em 0 .35em; color:var(--dusk); font-size:1.16rem}
.card p{color:var(--slate); font-size:.97rem; margin:0}
.card .more{margin-top:auto; padding-top:16px; color:var(--ember); font-weight:600; font-size:.92rem}

/* Pricing */
.price-card{max-width:560px; margin-inline:auto; background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:42px 38px; text-align:center; box-shadow:var(--shadow)}
.price-amt{font-family:"Fraunces",serif; font-size:3.4rem; color:var(--dusk); font-weight:700; line-height:1; margin:.1em 0 .25em}
.price-amt span{font-size:1.1rem; color:var(--slate); font-weight:500; font-family:"Inter",sans-serif}
.price-sub{color:var(--slate); font-size:1rem; max-width:42ch; margin-inline:auto}
.price-list{list-style:none; padding:0; margin:22px auto; max-width:34ch; text-align:left}
.price-list li{position:relative; padding-left:30px; margin-bottom:11px; color:var(--ink); font-size:1rem}
.price-list li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--moss); font-weight:800}
.price-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:8px}

/* CTA band */
.cta-band{background:linear-gradient(160deg,var(--dusk),var(--twilight)); color:var(--cream); border-radius:22px; padding:54px 40px; text-align:center; box-shadow:var(--shadow); position:relative; overflow:hidden}
.cta-band::after{content:"";position:absolute;left:50%;top:-140px;transform:translateX(-50%);width:480px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(244,184,96,.22),transparent 65%)}
.cta-band h2{color:var(--cream); margin-bottom:.3em; position:relative}
.cta-band p{font-size:1.18rem; max-width:50ch; margin:0 auto 1.6em; color:#dbe1e9; position:relative}
.cta-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; position:relative}

/* ===== Article body styles (article pages) ===== */
.article-head{background:linear-gradient(160deg,var(--dusk),var(--twilight)); color:var(--cream); padding:66px 0 52px}
.article-head .read{padding-top:0}
.article-head .kicker{color:var(--lantern-glow); text-transform:uppercase; letter-spacing:.12em; font-size:.8rem; font-weight:700}
.article-head h1{color:var(--cream); margin-top:.3em}
.article-head .sub{color:#dbe1e9; font-size:1.18rem; max-width:60ch}
.article-hero{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.article-hero img{width:100%; aspect-ratio:2/1; object-fit:cover; border-radius:18px; margin-top:-34px; box-shadow:var(--shadow); position:relative; z-index:2}
.article-body{padding:46px 0 40px}
.article-body h2{border-top:1px solid var(--line); padding-top:1.2em; margin-top:1.6em}
.article-body figure{margin:1.8em 0}
.article-body figure img{border-radius:14px}
.article-body figcaption{font-size:.86rem; color:var(--slate); margin-top:.5em; text-align:center}
blockquote{margin:1.6em 0; padding:18px 26px; background:var(--paper); border-left:4px solid var(--porch-amber); border-radius:0 12px 12px 0; font-size:1.08rem; color:var(--dusk)}
blockquote cite{display:block; margin-top:.6em; font-size:.9rem; color:var(--slate); font-style:normal}
.callout{background:rgba(63,125,88,.08); border:1px solid rgba(63,125,88,.25); border-radius:12px; padding:22px 24px; margin:1.8em 0}
.callout h3{margin-top:0; color:var(--moss)}
.pull{font-family:"Fraunces",serif; font-size:1.5rem; line-height:1.35; color:var(--ember); margin:1.4em 0; font-weight:500}
ul.clean li,ol li{margin-bottom:.5em}
.refs{font-size:.9rem; color:var(--slate); border-top:1px solid var(--line); margin-top:2.4em; padding-top:1.4em}
.refs h3{font-size:1rem; color:var(--slate)}
.refs ol{padding-left:1.2em}
.note{font-size:.86rem; color:var(--slate); font-style:italic}
.next-reads{margin-top:40px}
.next-reads .cards{margin-top:18px}

/* Footer */
footer{background:var(--dusk); color:#aeb8c4; padding:54px 0 44px; font-size:.94rem}
footer a{color:var(--lantern-glow)}
footer a:hover{color:var(--cream)}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:36px}
footer .brand{color:var(--cream)}
.footer-col h4{color:var(--cream); font-family:"Inter",sans-serif; font-size:.82rem; text-transform:uppercase; letter-spacing:.1em; margin:0 0 .9em}
.footer-col a{display:block; margin-bottom:.6em; color:#c8bca8}
.footer-col a:hover{color:var(--lantern-glow)}
.disclaimer{font-size:.82rem; color:#8b97a4; max-width:46ch; margin-top:14px}

/* Responsive */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:54px; padding:64px 24px 70px}
  .hero-media{max-width:520px}
  .evidence-grid{grid-template-columns:1fr; gap:30px}
  .steps,.faces{grid-template-columns:1fr}
  .outcomes{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  body{font-size:17px}
  .nav{display:none}
  .story-chip{left:0; right:0; max-width:none; bottom:-18px}
  .hero-media{margin-bottom:24px}
  .footer-grid{grid-template-columns:1fr}
  .price-card{padding:34px 24px}
}