/* Devout — shared landing-page design system (full-fidelity, ported from devout_marketing_site.html).
   One brand + one component library across every angle page. */
:root{--navy:#0B2A4A;--green:#18a06a;--greenink:#0f7a50;--cream:#f4f1ea;--charcoal:#16181c;--ink:#15181d;--mut:#6b7280;--line:#e9ecef;--gtint:#e7f3ec;}
*{box-sizing:border-box;margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;}
body{background:#fbfcfd;color:var(--ink);}
.container{max-width:1080px;margin:0 auto;padding:0 26px;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}

.nav{position:sticky;top:0;z-index:10;background:#fff;border-bottom:0.5px solid var(--line);}
.nav .container{display:flex;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:14px;}
.brand{display:flex;align-items:center;gap:9px;}
.nlinks{display:flex;gap:24px;align-items:center;font-size:14px;color:#374151;}
.cta{background:var(--green);color:#fff;font-size:14px;font-weight:600;padding:10px 18px;border-radius:10px;cursor:pointer;border:none;display:inline-block;}
.cta:hover{background:var(--greenink);}

.hero{background:var(--navy);color:var(--cream);position:relative;overflow:hidden;}
.hero .container{display:flex;gap:44px;align-items:center;padding-top:62px;padding-bottom:70px;position:relative;z-index:1;}
.pitch{position:absolute;top:0;right:0;height:100%;opacity:1;z-index:0;}
.htext{flex:1;min-width:0;}
.hvisual{flex:0 0 auto;}
.eyebrow{font-size:12px;letter-spacing:4px;color:rgba(244,241,234,.6);text-transform:uppercase;}
h1{font-size:clamp(34px,4.6vw,54px);font-weight:600;line-height:1.08;letter-spacing:-1px;margin:14px 0 18px;}
.accent{color:#54d39a;}
.lead{font-size:17px;color:rgba(244,241,234,.84);line-height:1.6;max-width:480px;}
.scarf{display:flex;height:6px;border-radius:3px;overflow:hidden;width:150px;margin:22px 0;}
.scarf i{flex:1;}
.stores{display:flex;gap:12px;flex-wrap:wrap;}
.store{display:flex;align-items:center;gap:9px;background:#000;color:#fff;border-radius:11px;padding:9px 16px;}
.store i{font-size:26px;}
.store small{display:block;font-size:9px;letter-spacing:.5px;opacity:.8;}
.store b{font-size:15px;font-weight:500;}
.micro{font-size:12px;color:rgba(244,241,234,.6);margin-top:16px;}

.phone{width:248px;height:444px;background:#0B0C0E;border-radius:34px;padding:9px;box-shadow:0 24px 60px rgba(0,0,0,.32);}
.hps{width:100%;height:100%;background:#fbfcfd;border-radius:26px;overflow:hidden;position:relative;}
.crestS{width:28px;height:28px;border-radius:50%;background:#8b1e2d;border:2px solid var(--cream);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;}

.split{display:flex;gap:54px;align-items:center;}
.split.rev{flex-direction:row-reverse;}
.scol{flex:1;}
.vcol{flex:0 0 300px;}
.kicker{font-size:12px;letter-spacing:2.5px;color:var(--green);font-weight:600;text-transform:uppercase;}
h2{font-size:clamp(26px,3vw,34px);font-weight:600;color:var(--ink);letter-spacing:-.4px;line-height:1.12;margin:10px 0 14px;}
.body{font-size:16px;color:#4b5563;line-height:1.65;max-width:460px;}

.collage{position:relative;height:260px;}
.ptile{position:absolute;width:122px;height:148px;border-radius:13px;display:flex;align-items:flex-end;padding:11px;color:#fff;font-size:12px;border:4px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.08), 0 14px 28px rgba(0,0,0,.22);}
.ticket{position:absolute;background:var(--cream);border:0.5px solid #e2ddcf;border-radius:11px;padding:9px 14px;font-size:12px;color:#5b5345;display:flex;align-items:center;gap:8px;box-shadow:0 10px 26px rgba(0,0,0,.16);}

.lbcard{background:#fff;border:0.5px solid var(--line);border-radius:17px;padding:10px 16px;box-shadow:0 16px 38px rgba(11,42,74,.10);}
.lbrow{display:flex;align-items:center;gap:11px;padding:11px 3px;border-bottom:0.5px solid #f1f3f5;font-size:14px;}
.lbrow:last-child{border:none;}
.lbav{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:#fff;}
.lbme{background:var(--gtint);border-radius:11px;border:none;}

.band{background:var(--navy);color:var(--cream);position:relative;overflow:hidden;}
.band .container{position:relative;z-index:1;text-align:center;padding-top:54px;padding-bottom:54px;}
.band h2{color:#fff;}
.band .body{margin:0 auto;color:rgba(244,241,234,.84);max-width:560px;}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.step{text-align:center;}
.stepic{width:56px;height:56px;border-radius:16px;background:var(--gtint);color:var(--green);display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 12px;}
.step .t{font-size:15px;font-weight:600;color:var(--ink);}
.step .d{font-size:13px;color:var(--mut);line-height:1.45;margin-top:4px;}

.prem{background:var(--navy);color:var(--cream);position:relative;overflow:hidden;}
.prem .container{position:relative;z-index:1;text-align:center;padding-top:56px;padding-bottom:56px;}
.prem h2{color:#fff;}
.pricePill{display:inline-block;background:rgba(244,241,234,.1);border:0.5px solid rgba(244,241,234,.25);border-radius:30px;padding:11px 24px;font-size:16px;margin:14px 0 18px;}
.unlocks{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;max-width:560px;margin:0 auto 16px;}
.ulk{font-size:13px;background:rgba(244,241,234,.08);border-radius:22px;padding:7px 14px;color:rgba(244,241,234,.92);}

.values{background:#16181c;color:var(--cream);}
.values .container{text-align:center;padding-top:40px;padding-bottom:40px;}
.values p{max-width:560px;margin:0 auto;font-size:17px;line-height:1.6;}

.foot{background:#0e1014;color:rgba(244,241,234,.75);}
.foot .container{padding-top:40px;padding-bottom:32px;}
.frow{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;}
.fcols{display:flex;gap:46px;flex-wrap:wrap;font-size:13px;}
.fcols b{display:block;color:var(--cream);font-weight:500;margin-bottom:10px;}
.fcols a{display:block;color:rgba(244,241,234,.65);margin-bottom:7px;}
.fbar{border-top:0.5px solid rgba(244,241,234,.12);margin-top:26px;padding-top:16px;font-size:12px;color:rgba(244,241,234,.5);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;}

.sec{padding-top:64px;padding-bottom:64px;}
.tint{background:#f6f8f8;border-top:0.5px solid var(--line);border-bottom:0.5px solid var(--line);}

@media(max-width:780px){
  .nlinks span:not(.cta){display:none;}
  .hero .container,.split{flex-direction:column;align-items:flex-start;gap:32px;}
  .split.rev{flex-direction:column;}
  .vcol{flex:0 0 auto;width:100%;}
  .hvisual{align-self:center;}
  .steps{grid-template-columns:1fr 1fr 1fr;}
  .lead,.body{max-width:none;}
}