:root{
  --navy:#06152e;
  --navy2:#0c2850;
  --royal:#153e76;
  --gold:#d8b04c;
  --gold2:#f0cd6d;
  --cream:#fff8e7;
  --ink:#071329;
  --muted:#64748c;
  --line:#dfe6f0;
  --surface:#f6f8fc;
  --green:#159a69;
  --shadow:0 26px 70px rgba(7,19,41,.12);
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  color:var(--ink);
  font-family:"DM Sans",sans-serif;
  background:
    linear-gradient(
      180deg,
      #fff 0%,
      #fbfcff 48%,
      #fff 100%
    );
  overflow-x:hidden;
}

h1,h2,h3,
.brand{
  font-family:"Manrope",sans-serif;
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
select{
  font:inherit;
}

button{
  cursor:pointer;
}

.ambient{
  position:absolute;
  z-index:-1;
  border-radius:50%;
  filter:blur(4px);
  pointer-events:none;
}

.ambient-one{
  width:520px;
  height:520px;
  top:30px;
  right:-240px;
  background:rgba(21,62,118,.08);
}

.ambient-two{
  width:450px;
  height:450px;
  top:650px;
  left:-250px;
  background:rgba(216,176,76,.08);
}

.site-header{
  position:relative;
  z-index:30;
  width:min(1420px,94vw);
  min-height:84px;
  margin:0 auto;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:38px;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--navy);
  font-size:22px;
  font-weight:600;
}

.brand b{
  font-weight:800;
}

.brand-crown{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:12px;
  color:var(--navy);
  background:linear-gradient(
    145deg,
    #f8dd88,
    var(--gold)
  );
  box-shadow:
    0 8px 20px
    rgba(216,176,76,.22);
}

.desktop-nav{
  display:flex;
  justify-content:center;
  gap:30px;
}

.desktop-nav a{
  color:#53637b;
  font-size:14px;
  font-weight:700;
}

.desktop-nav a:hover{
  color:var(--navy);
}

.header-actions{
  display:flex;
  align-items:center;
  gap:18px;
}

.text-link{
  font-size:14px;
  font-weight:700;
  color:#53637b;
}

.button{
  border:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  padding:0 22px;
  border-radius:14px;
  font-weight:800;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

.button:hover{
  transform:translateY(-2px);
}

.button-small{
  min-height:44px;
  padding:0 17px;
  border-radius:12px;
  font-size:13px;
}

.button-dark{
  color:#fff;
  background:var(--navy);
  box-shadow:
    0 12px 28px
    rgba(7,19,41,.15);
}

.button-gold{
  color:var(--navy);
  background:
    linear-gradient(
      135deg,
      #f1d36f,
      var(--gold)
    );
  box-shadow:
    0 15px 34px
    rgba(216,176,76,.22);
}

.button-outline{
  color:var(--navy);
  border:1px solid #cfd8e6;
  background:rgba(255,255,255,.72);
}

.button-light-outline{
  color:#fff;
  border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.06);
}

.hero{
  width:min(1420px,94vw);
  min-height:760px;
  margin:25px auto 80px;
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(560px,1.08fr);
  gap:35px;
  align-items:center;
}

.hero-copy{
  position:relative;
  z-index:4;
  padding:30px 0;
}

.hero-eyebrow,
.eyebrow{
  color:#a57711;
  font-size:11px;
  font-weight:900;
  letter-spacing:2px;
}

.hero-eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
}

.hero-eyebrow span{
  width:28px;
  height:2px;
  background:var(--gold);
}

.hero h1{
  max-width:720px;
  margin:18px 0;
  color:var(--navy);
  font-size:clamp(52px,6vw,83px);
  letter-spacing:-4px;
  line-height:.98;
}

.hero h1 span{
  display:block;
  color:#254b7f;
}

.hero-lead{
  max-width:700px;
  color:#5c6c84;
  font-size:18px;
  line-height:1.75;
}

.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:28px;
}

.hero-trust{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:15px;
  margin-top:40px;
}

.hero-trust div{
  padding-top:16px;
  border-top:1px solid #dfe5ef;
}

.hero-trust strong,
.hero-trust span{
  display:block;
}

.hero-trust strong{
  color:var(--navy);
  font-size:13px;
}

.hero-trust span{
  margin-top:4px;
  color:#8794a7;
  font-size:11px;
}

.hero-visual{
  position:relative;
  min-height:660px;
}

.hero-glow{
  position:absolute;
  width:620px;
  height:620px;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  border-radius:50%;
  background:
    radial-gradient(
      circle,
      rgba(216,176,76,.2),
      rgba(21,62,118,.08) 40%,
      transparent 68%
    );
}

.phone{
  position:absolute;
  width:270px;
  height:556px;
  padding:9px;
  border-radius:42px;
  background:#0c111b;
  box-shadow:
    0 35px 80px
    rgba(7,19,41,.28);
}

.phone-left{
  top:65px;
  left:40px;
  transform:rotate(-5deg);
}

.phone-right{
  top:15px;
  right:40px;
  transform:rotate(5deg);
}

.phone-top{
  position:absolute;
  z-index:4;
  top:17px;
  left:50%;
  transform:translateX(-50%);
  width:92px;
  height:25px;
  border-radius:20px;
  background:#030508;
}

.phone-screen{
  position:relative;
  height:100%;
  padding:52px 11px 16px;
  border-radius:34px;
  overflow:hidden;
  background:
    linear-gradient(
      180deg,
      #e8edf5,
      #f7f9fc
    );
}

.google-screen{
  background:
    linear-gradient(
      180deg,
      #f7f9fd,
      #e9eef7
    );
}

.wallet-label{
  margin:0 8px 12px;
  color:#6d7889;
  font-size:12px;
  font-weight:800;
}

.wallet-pass{
  min-height:405px;
  padding:20px;
  border-radius:22px;
  color:#fff;
  box-shadow:
    0 14px 35px
    rgba(7,19,41,.2);
}

.ministry-pass,
.live-demo-pass{
  background:
    radial-gradient(
      circle at 85% 10%,
      rgba(216,176,76,.22),
      transparent 27%
    ),
    linear-gradient(
      155deg,
      #071329,
      #194681
    );
}

.business-pass{
  background:
    radial-gradient(
      circle at 15% 10%,
      rgba(240,205,109,.23),
      transparent 30%
    ),
    linear-gradient(
      155deg,
      #141414,
      #543b12
    );
}

.pass-brand{
  display:grid;
  grid-template-columns:44px 1fr auto;
  align-items:center;
  gap:11px;
}

.pass-logo{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:var(--navy);
  background:
    linear-gradient(
      145deg,
      #f2d76d,
      #d6a938
    );
  font-size:11px;
  font-weight:900;
}

.gold-logo{
  color:#fff;
  background:
    linear-gradient(
      145deg,
      #7d5c18,
      #d0a94d
    );
}

.pass-brand small,
.pass-brand strong{
  display:block;
}

.pass-brand small{
  margin-bottom:2px;
  color:rgba(255,255,255,.61);
  font-size:7px;
  letter-spacing:1px;
}

.pass-brand strong{
  color:#fff;
  font-size:11px;
}

.pass-hero-copy{
  margin-top:55px;
}

.pass-hero-copy small,
.pass-fields small{
  color:rgba(255,255,255,.55);
  font-size:7px;
  letter-spacing:1px;
}

.pass-hero-copy h3{
  margin:4px 0;
  color:#fff;
  font-size:23px;
}

.pass-fields{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
  margin-top:25px;
}

.pass-fields strong{
  display:block;
  margin-top:3px;
  color:#fff;
  font-size:11px;
}

.qr-box{
  width:93px;
  height:93px;
  display:grid;
  place-items:center;
  margin:30px auto 7px;
  padding:7px;
  border-radius:10px;
  background:#fff;
}

.qr-pattern{
  width:100%;
  height:100%;
  background:
    linear-gradient(
      90deg,
      #111 8px,
      transparent 8px
    ) 0 0/15px 15px,
    linear-gradient(
      #111 8px,
      transparent 8px
    ) 0 0/15px 15px,
    linear-gradient(
      45deg,
      transparent 46%,
      #111 46% 54%,
      transparent 54%
    ) 0 0/10px 10px;
}

.scan-label{
  text-align:center;
  color:rgba(255,255,255,.52);
  font-size:7px;
  letter-spacing:1.5px;
}

.reward-balance{
  margin:38px 0 8px;
  text-align:center;
}

.reward-balance span,
.reward-balance strong,
.reward-balance small{
  display:block;
}

.reward-balance span{
  color:rgba(255,255,255,.56);
  font-size:7px;
  letter-spacing:1.5px;
}

.reward-balance strong{
  margin-top:4px;
  color:#f4d67b;
  font-size:39px;
}

.reward-balance small{
  color:rgba(255,255,255,.65);
}

.notification-float{
  position:absolute;
  z-index:8;
  width:315px;
  left:170px;
  bottom:29px;
  display:grid;
  grid-template-columns:45px 1fr;
  gap:12px;
  padding:15px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:18px;
  background:rgba(255,255,255,.88);
  box-shadow:var(--shadow);
  backdrop-filter:blur(18px);
}

.notification-icon{
  width:45px;
  height:45px;
  display:grid;
  place-items:center;
  border-radius:13px;
  color:#fff;
  background:var(--navy);
}

.notification-float small,
.notification-float strong,
.notification-float span{
  display:block;
}

.notification-float small{
  color:#758196;
  font-size:9px;
}

.notification-float strong{
  margin-top:2px;
  color:var(--navy);
  font-size:11px;
}

.notification-float span{
  margin-top:3px;
  color:#9aa5b4;
  font-size:8px;
}

.admin-float{
  position:absolute;
  z-index:6;
  width:225px;
  top:195px;
  right:170px;
  padding:15px;
  border:1px solid rgba(255,255,255,.5);
  border-radius:18px;
  background:rgba(255,255,255,.9);
  box-shadow:var(--shadow);
  backdrop-filter:blur(16px);
}

.mini-admin-head{
  display:flex;
  gap:4px;
  margin-bottom:13px;
}

.mini-admin-head span{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#cbd3df;
}

.admin-float small,
.admin-float strong{
  display:block;
}

.admin-float>small{
  color:#79869a;
  font-size:7px;
  letter-spacing:1px;
}

.admin-float>strong{
  margin-top:4px;
  font-size:12px;
}

.mini-progress{
  height:5px;
  margin:12px 0;
  overflow:hidden;
  border-radius:10px;
  background:#edf0f5;
}

.mini-progress i{
  display:block;
  width:88%;
  height:100%;
  border-radius:10px;
  background:var(--gold);
}

.mini-status{
  display:flex;
  justify-content:space-between;
  margin-top:7px;
  font-size:7px;
}

.mini-status b{
  color:var(--green);
}

section{
  scroll-margin-top:100px;
}

.pain-section,
.use-cases-section,
.how-section{
  width:min(1320px,92vw);
  margin:0 auto;
  padding:100px 0;
}

.section-heading{
  max-width:770px;
  margin-bottom:42px;
}

.section-heading.centered{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

.section-heading h2,
.solution-copy h2,
.difference-main h2{
  margin:12px 0;
  color:var(--navy);
  font-size:clamp(38px,4vw,58px);
  letter-spacing:-2px;
  line-height:1.08;
}

.section-heading p,
.solution-copy>p,
.difference-main>p{
  color:#66758c;
  font-size:17px;
  line-height:1.7;
}

.pain-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}

.pain-grid article{
  min-height:260px;
  padding:26px;
  border:1px solid #e1e7f0;
  border-radius:25px;
  background:#fff;
  box-shadow:
    0 10px 32px
    rgba(7,19,41,.045);
}

.pain-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:15px;
  color:#8e6815;
  background:#fff5d9;
  font-size:22px;
}

.pain-grid h3{
  margin:25px 0 9px;
  font-size:20px;
}

.pain-grid p{
  color:#718096;
  line-height:1.65;
  font-size:14px;
}

.solution-section{
  width:min(1400px,94vw);
  margin:40px auto 90px;
  padding:70px;
  display:grid;
  grid-template-columns:1fr .8fr;
  gap:70px;
  border-radius:42px;
  background:
    linear-gradient(
      145deg,
      #f8fafd,
      #eef3fa
    );
}

.premium-checks{
  list-style:none;
  margin:32px 0 0;
  padding:0;
}

.premium-checks li{
  display:grid;
  grid-template-columns:28px 1fr;
  gap:12px;
  padding:12px 0;
  color:#42536c;
  border-bottom:1px solid #dfe5ed;
}

.premium-checks span{
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  border-radius:8px;
  color:#8f6811;
  background:#fff0be;
  font-weight:900;
}

.solution-card-stack{
  display:grid;
  gap:13px;
  align-content:center;
}

.solution-feature-card{
  display:grid;
  grid-template-columns:64px 1fr;
  gap:16px;
  align-items:center;
  padding:22px;
  border:1px solid #dce4ef;
  border-radius:21px;
  background:rgba(255,255,255,.7);
}

.solution-feature-card.active{
  transform:translateX(-25px);
  color:#fff;
  border-color:transparent;
  background:
    linear-gradient(
      135deg,
      var(--navy),
      var(--royal)
    );
  box-shadow:var(--shadow);
}

.solution-feature-card>span{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:#fff2c7;
  color:#8b6510;
  font-weight:900;
}

.solution-feature-card.active>span{
  color:var(--navy);
  background:var(--gold2);
}

.solution-feature-card small{
  font-size:9px;
  letter-spacing:1.5px;
  opacity:.6;
}

.solution-feature-card h3{
  margin:4px 0 0;
  font-size:17px;
}

.demo-section{
  padding:110px 0;
  color:#fff;
  background:
    radial-gradient(
      circle at 20% 10%,
      rgba(216,176,76,.16),
      transparent 25%
    ),
    linear-gradient(
      145deg,
      #041128,
      #0b2850
    );
}

.demo-heading h2{
  color:#fff;
}

.demo-heading p{
  color:rgba(255,255,255,.65);
}

.demo-section>.section-heading{
  width:min(820px,90vw);
}

.demo-section .eyebrow{
  color:#e1be61;
}

.demo-shell{
  width:min(1400px,94vw);
  margin:40px auto 0;
  display:grid;
  grid-template-columns:390px 1fr;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  border-radius:34px;
  background:rgba(255,255,255,.055);
  box-shadow:
    0 45px 110px
    rgba(0,0,0,.26);
  backdrop-filter:blur(14px);
}

.demo-controls{
  padding:32px;
  border-right:1px solid rgba(255,255,255,.1);
}

.demo-control-block{
  margin-bottom:28px;
}

.demo-control-block>small{
  display:block;
  margin-bottom:10px;
  color:rgba(255,255,255,.48);
  font-size:9px;
  font-weight:900;
  letter-spacing:1.4px;
}

.segment-control{
  display:grid;
  grid-template-columns:1fr 1fr;
  padding:4px;
  border-radius:13px;
  background:rgba(255,255,255,.07);
}

.segment-control button{
  min-height:45px;
  border:0;
  border-radius:10px;
  color:rgba(255,255,255,.57);
  background:transparent;
  font-size:11px;
  font-weight:800;
}

.segment-control button.active{
  color:var(--navy);
  background:var(--gold2);
}

.usecase-buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.usecase-buttons button{
  min-height:46px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  color:rgba(255,255,255,.65);
  background:rgba(255,255,255,.045);
  font-size:11px;
  font-weight:700;
}

.usecase-buttons button.active{
  color:#fff;
  border-color:rgba(216,176,76,.7);
  background:rgba(216,176,76,.14);
}

.demo-story{
  margin-top:34px;
  padding-top:25px;
  border-top:1px solid rgba(255,255,255,.1);
}

.demo-story-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  margin-bottom:16px;
  border-radius:13px;
  color:var(--navy);
  background:var(--gold);
}

.demo-story small{
  color:#d7b758;
  font-size:9px;
  letter-spacing:1.5px;
}

.demo-story h3{
  margin:8px 0;
  color:#fff;
  font-size:23px;
  line-height:1.2;
}

.demo-story p{
  color:rgba(255,255,255,.6);
  line-height:1.7;
  font-size:13px;
}

.demo-cta{
  width:100%;
  margin-top:28px;
  font-size:12px;
}

.demo-stage{
  min-width:0;
  padding:35px;
  display:grid;
  grid-template-columns:minmax(350px,.9fr) minmax(300px,.7fr);
  gap:25px;
  align-items:center;
}

.demo-phone-wrap{
  position:relative;
  min-height:580px;
}

.demo-phone{
  position:absolute;
  top:15px;
  left:50%;
  width:280px;
  height:560px;
  padding:9px;
  transform:translateX(-50%);
  border-radius:42px;
  background:#070b11;
  box-shadow:
    0 35px 80px
    rgba(0,0,0,.35);
}

.demo-phone-screen{
  background:#edf1f7;
}

.demo-wallet-bar{
  display:flex;
  justify-content:space-between;
  margin:0 8px 13px;
  color:#53627a;
  font-size:11px;
  font-weight:800;
}

.live-demo-pass{
  min-height:410px;
  transition:
    background .35s ease,
    transform .35s ease;
}

.demo-update-card{
  position:absolute;
  width:265px;
  right:-10px;
  bottom:42px;
  padding:17px;
  border:1px solid rgba(255,255,255,.6);
  border-radius:18px;
  color:var(--navy);
  background:rgba(255,255,255,.92);
  box-shadow:
    0 24px 55px
    rgba(0,0,0,.18);
  backdrop-filter:blur(17px);
}

.update-header{
  display:grid;
  grid-template-columns:38px 1fr;
  gap:10px;
  align-items:center;
}

.update-header>span{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:10px;
  color:#fff;
  background:var(--navy);
}

.update-header small,
.update-header b{
  display:block;
}

.update-header small{
  color:#8290a3;
  font-size:8px;
}

.update-header b{
  font-size:11px;
}

.demo-update-card p{
  margin:14px 0 9px;
  color:#526178;
  font-size:11px;
  line-height:1.5;
}

.demo-update-card>small{
  color:#9aa5b3;
  font-size:8px;
}

.demo-side-panel{
  padding:24px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:25px;
  background:rgba(255,255,255,.055);
}

.demo-dashboard-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
}

.demo-dashboard-header small,
.demo-dashboard-header strong{
  display:block;
}

.demo-dashboard-header small{
  color:rgba(255,255,255,.4);
  font-size:8px;
  letter-spacing:1.2px;
}

.demo-dashboard-header strong{
  margin-top:4px;
  color:#fff;
  font-size:17px;
}

.status-dot{
  padding:5px 8px;
  border-radius:999px;
  color:#7be0b9;
  background:rgba(37,182,126,.12);
  font-size:8px;
  font-weight:900;
}

.demo-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:25px 0;
}

.demo-stats div{
  padding:15px;
  border-radius:14px;
  background:rgba(255,255,255,.06);
}

.demo-stats small,
.demo-stats strong{
  display:block;
}

.demo-stats small{
  color:rgba(255,255,255,.4);
  font-size:7px;
  letter-spacing:1px;
}

.demo-stats strong{
  margin-top:5px;
  color:#fff;
  font-size:24px;
}

.demo-readiness{
  margin-bottom:20px;
}

.demo-readiness-head{
  display:flex;
  justify-content:space-between;
  font-size:10px;
}

.demo-readiness-head b{
  color:#e2bd56;
}

.demo-progress{
  height:6px;
  margin-top:9px;
  overflow:hidden;
  border-radius:8px;
  background:rgba(255,255,255,.1);
}

.demo-progress i{
  display:block;
  width:100%;
  height:100%;
  border-radius:8px;
  background:var(--gold);
}

.demo-task{
  display:grid;
  grid-template-columns:32px 1fr;
  gap:10px;
  align-items:center;
  padding:12px 0;
  border-top:1px solid rgba(255,255,255,.08);
}

.demo-task>span{
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  border-radius:9px;
  color:#62d6a6;
  background:rgba(44,185,130,.1);
}

.demo-task b,
.demo-task small{
  display:block;
}

.demo-task b{
  color:#fff;
  font-size:10px;
}

.demo-task small{
  margin-top:2px;
  color:rgba(255,255,255,.42);
  font-size:8px;
}

.use-cases-section{
  padding-top:120px;
}

.audience-tabs{
  display:inline-flex;
  gap:5px;
  padding:5px;
  margin-bottom:30px;
  border-radius:14px;
  background:#edf2f8;
}

.audience-tabs button{
  min-height:44px;
  padding:0 17px;
  border:0;
  border-radius:10px;
  color:#718098;
  background:transparent;
  font-weight:800;
}

.audience-tabs button.active{
  color:#fff;
  background:var(--navy);
}

.use-case-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:15px;
}

.use-case-card{
  position:relative;
  min-height:270px;
  overflow:hidden;
  padding:27px;
  border:1px solid #e0e6ef;
  border-radius:25px;
  background:#fff;
}

.use-case-card:after{
  content:"";
  position:absolute;
  width:120px;
  height:120px;
  right:-55px;
  bottom:-55px;
  border-radius:50%;
  border:1px solid rgba(216,176,76,.22);
  box-shadow:
    0 0 0 25px rgba(216,176,76,.035);
}

.use-case-card>span{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:14px;
  color:#8c6510;
  background:#fff4d4;
  font-size:20px;
}

.use-case-card h3{
  margin:24px 0 8px;
  font-size:19px;
}

.use-case-card p{
  color:#718096;
  line-height:1.65;
  font-size:13px;
}

.use-case-card small{
  display:block;
  margin-top:20px;
  color:#9a741b;
  font-size:9px;
  font-weight:900;
  letter-spacing:1px;
}

.how-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px;
  margin-top:50px;
}

.how-grid article{
  position:relative;
  min-height:300px;
  padding:28px;
  border-radius:27px;
  background:#f5f7fb;
}

.step-number{
  position:absolute;
  top:20px;
  right:22px;
  color:#cbd3de;
  font-size:13px;
  font-weight:900;
}

.how-icon{
  width:53px;
  height:53px;
  display:grid;
  place-items:center;
  border-radius:16px;
  color:#fff;
  background:var(--navy);
  font-size:22px;
}

.how-grid h3{
  margin:50px 0 10px;
  font-size:19px;
}

.how-grid p{
  color:#728097;
  line-height:1.7;
  font-size:13px;
}

.difference-section{
  width:min(1400px,94vw);
  margin:70px auto 110px;
  padding:72px;
  display:grid;
  grid-template-columns:1fr .85fr;
  gap:70px;
  border-radius:42px;
  color:#fff;
  background:
    radial-gradient(
      circle at 85% 12%,
      rgba(216,176,76,.18),
      transparent 27%
    ),
    linear-gradient(
      145deg,
      #041128,
      #0d315f
    );
}

.difference-main h2{
  color:#fff;
}

.difference-main>p{
  color:rgba(255,255,255,.62);
}

.difference-section .eyebrow{
  color:#e1bd5b;
}

.difference-list{
  display:grid;
  gap:19px;
  margin-top:34px;
}

.difference-list>div{
  display:grid;
  grid-template-columns:45px 1fr;
  gap:15px;
  padding-top:17px;
  border-top:1px solid rgba(255,255,255,.1);
}

.difference-list>div>span{
  color:#e0bd5a;
  font-size:11px;
  font-weight:900;
}

.difference-list h3{
  margin:0 0 5px;
  color:#fff;
}

.difference-list p{
  margin:0;
  color:rgba(255,255,255,.55);
  font-size:13px;
  line-height:1.6;
}

.difference-visual{
  display:grid;
  place-items:center;
}

.difference-dashboard{
  width:min(440px,100%);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.15);
  border-radius:28px;
  color:var(--navy);
  background:#fff;
  box-shadow:
    0 35px 85px
    rgba(0,0,0,.25);
}

.difference-dashboard-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:19px 22px;
  border-bottom:1px solid #e6ebf2;
}

.difference-dashboard-top div{
  display:flex;
  align-items:center;
  gap:8px;
}

.difference-dashboard-top span{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:8px;
  color:var(--navy);
  background:var(--gold);
}

.difference-dashboard-top small{
  color:#8793a4;
  font-size:8px;
  letter-spacing:1px;
}

.difference-dashboard-body{
  padding:28px;
}

.dashboard-eyebrow{
  color:#9a741b;
  font-size:8px;
  font-weight:900;
  letter-spacing:1.4px;
}

.difference-dashboard-body h3{
  margin:8px 0;
  font-size:27px;
}

.difference-dashboard-body p{
  color:#6b7890;
  line-height:1.6;
  font-size:12px;
}

.readiness-circle{
  width:145px;
  height:145px;
  display:grid;
  place-items:center;
  margin:25px auto;
  border-radius:50%;
  background:
    conic-gradient(
      var(--gold) 0 100%,
      #edf1f7 0
    );
  padding:9px;
}

.readiness-circle>div{
  width:100%;
  height:100%;
  display:grid;
  place-content:center;
  text-align:center;
  border-radius:50%;
  background:#fff;
}

.readiness-circle strong,
.readiness-circle small{
  display:block;
}

.readiness-circle strong{
  font-size:33px;
}

.readiness-circle small{
  margin-top:2px;
  color:#8592a4;
}

.difference-dashboard-body button{
  width:100%;
  min-height:50px;
  border:0;
  border-radius:13px;
  color:#fff;
  background:var(--navy);
  font-weight:800;
}

.audience-cta{
  width:min(1320px,92vw);
  margin:0 auto 120px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.audience-card{
  min-height:390px;
  padding:44px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  position:relative;
  border-radius:32px;
}

.ministry-audience{
  color:#fff;
  background:
    radial-gradient(
      circle at 85% 15%,
      rgba(216,176,76,.18),
      transparent 25%
    ),
    linear-gradient(
      145deg,
      #071329,
      #174b89
    );
}

.business-audience{
  color:#fff;
  background:
    radial-gradient(
      circle at 10% 10%,
      rgba(240,205,109,.2),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #18140c,
      #70521d
    );
}

.audience-card>span{
  color:#e3c268;
  font-size:10px;
  font-weight:900;
  letter-spacing:1.8px;
}

.audience-card h2{
  max-width:520px;
  margin:10px 0;
  color:#fff;
  font-size:36px;
  line-height:1.1;
}

.audience-card p{
  max-width:520px;
  color:rgba(255,255,255,.67);
  line-height:1.65;
}

.text-cta{
  width:max-content;
  margin-top:16px;
  padding:0;
  border:0;
  color:#f1d47d;
  background:transparent;
  font-weight:900;
}

.final-cta{
  position:relative;
  overflow:hidden;
  padding:120px 6vw;
  text-align:center;
  color:#fff;
  background:
    linear-gradient(
      145deg,
      #041126,
      #0a315f
    );
}

.final-cta-glow{
  position:absolute;
  width:620px;
  height:620px;
  top:-340px;
  left:50%;
  transform:translateX(-50%);
  border-radius:50%;
  background:rgba(216,176,76,.16);
  filter:blur(50px);
}

.final-cta .eyebrow{
  position:relative;
  color:#e0bd5a;
}

.final-cta h2{
  position:relative;
  max-width:880px;
  margin:16px auto;
  color:#fff;
  font-size:clamp(45px,5vw,68px);
  letter-spacing:-3px;
  line-height:1.04;
}

.final-cta p{
  position:relative;
  max-width:680px;
  margin:0 auto;
  color:rgba(255,255,255,.65);
  font-size:17px;
  line-height:1.7;
}

.centered-actions{
  position:relative;
  justify-content:center;
}

footer{
  padding:60px 6vw 25px;
  color:#fff;
  background:#020a19;
}

.light-brand{
  color:#fff;
}

.footer-brand{
  max-width:470px;
}

.footer-brand p{
  color:rgba(255,255,255,.45);
  line-height:1.6;
}

.footer-links{
  display:flex;
  justify-content:flex-end;
  gap:90px;
  margin-top:-60px;
}

.footer-links div{
  display:grid;
  gap:10px;
}

.footer-links strong{
  margin-bottom:5px;
  font-size:12px;
}

.footer-links a{
  color:rgba(255,255,255,.5);
  font-size:12px;
}

.footer-bottom{
  margin-top:60px;
  padding-top:22px;
  display:flex;
  justify-content:space-between;
  color:rgba(255,255,255,.32);
  border-top:1px solid rgba(255,255,255,.08);
  font-size:10px;
}

@media(max-width:1150px){

  .desktop-nav{
    display:none;
  }

  .site-header{
    grid-template-columns:1fr auto;
  }

  .hero{
    grid-template-columns:1fr;
    padding-top:40px;
  }

  .hero-copy{
    text-align:center;
  }

  .hero h1,
  .hero-lead{
    margin-left:auto;
    margin-right:auto;
  }

  .hero-eyebrow,
  .hero-actions{
    justify-content:center;
  }

  .hero-trust{
    max-width:800px;
    margin-left:auto;
    margin-right:auto;
  }

  .hero-visual{
    width:min(700px,100%);
    margin:auto;
  }

  .pain-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .solution-section,
  .difference-section{
    grid-template-columns:1fr;
  }

  .solution-feature-card.active{
    transform:none;
  }

  .demo-shell{
    grid-template-columns:1fr;
  }

  .demo-controls{
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.1);
  }

  .demo-stage{
    grid-template-columns:1fr 1fr;
  }

  .use-case-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .how-grid{
    grid-template-columns:repeat(2,1fr);
  }

}

@media(max-width:750px){

  .site-header{
    min-height:72px;
  }

  .text-link{
    display:none;
  }

  .button-small{
    padding:0 12px;
    font-size:11px;
  }

  .hero{
    min-height:auto;
    margin-top:0;
  }

  .hero h1{
    font-size:48px;
    letter-spacing:-2.5px;
  }

  .hero-lead{
    font-size:16px;
  }

  .hero-trust{
    grid-template-columns:1fr;
  }

  .hero-visual{
    min-height:550px;
    transform:scale(.83);
    transform-origin:top center;
    margin-bottom:-90px;
  }

  .phone-left{
    left:0;
  }

  .phone-right{
    right:0;
  }

  .admin-float{
    display:none;
  }

  .notification-float{
    left:50%;
    transform:translateX(-50%);
  }

  .pain-grid,
  .use-case-grid,
  .how-grid,
  .audience-cta{
    grid-template-columns:1fr;
  }

  .solution-section,
  .difference-section{
    width:94vw;
    padding:35px 25px;
  }

  .demo-shell{
    width:94vw;
  }

  .demo-stage{
    grid-template-columns:1fr;
    padding:20px;
  }

  .demo-phone-wrap{
    min-height:590px;
  }

  .demo-side-panel{
    margin-top:10px;
  }

  .usecase-buttons{
    grid-template-columns:1fr;
  }

  .section-heading h2,
  .solution-copy h2,
  .difference-main h2{
    font-size:38px;
  }

  .audience-card{
    min-height:330px;
    padding:30px;
  }

  .audience-card h2{
    font-size:30px;
  }

  .final-cta{
    padding:90px 7vw;
  }

  .final-cta h2{
    font-size:43px;
    letter-spacing:-2px;
  }

  .footer-links{
    margin-top:40px;
    justify-content:flex-start;
    gap:50px;
  }

  .footer-bottom{
    display:grid;
    gap:8px;
  }

}


/* ============================================================
   Kingdom Pass 3.4.5
   Marketing Typography Readability Upgrade
   ============================================================ */

body{
  font-size:16px;
}


/* EYEBROWS / SECTION LABELS */

.hero-eyebrow,
.eyebrow{
  font-size:13px !important;
  letter-spacing:1.7px !important;
}

.hero-trust strong{
  font-size:15px !important;
}

.hero-trust span{
  font-size:13px !important;
}


/* MAIN SUPPORTING COPY */

.hero-lead{
  font-size:20px !important;
  line-height:1.7 !important;
}

.section-heading p,
.solution-copy>p,
.difference-main>p{
  font-size:18px !important;
}


/* PAIN CARDS */

.pain-grid h3{
  font-size:22px !important;
}

.pain-grid p{
  font-size:16px !important;
  line-height:1.7 !important;
}


/* SOLUTION SECTION */

.premium-checks li{
  font-size:16px !important;
  line-height:1.6 !important;
}

.solution-feature-card small{
  font-size:11px !important;
}

.solution-feature-card h3{
  font-size:19px !important;
}


/* DEMO CONTROLS */

.demo-control-block>small{
  font-size:11px !important;
}

.segment-control button{
  font-size:13px !important;
}

.usecase-buttons button{
  font-size:13px !important;
}

.demo-story small{
  font-size:11px !important;
}

.demo-story h3{
  font-size:26px !important;
}

.demo-story p{
  font-size:15px !important;
  line-height:1.7 !important;
}

.demo-cta{
  font-size:14px !important;
}


/* LIVE PASS MOCKUP */

.pass-brand small{
  font-size:9px !important;
}

.pass-brand strong{
  font-size:13px !important;
}

.pass-hero-copy small,
.pass-fields small{
  font-size:9px !important;
}

.pass-fields strong{
  font-size:13px !important;
}

.scan-label{
  font-size:9px !important;
}


/* DEMO UPDATE CARD */

.update-header small{
  font-size:10px !important;
}

.update-header b{
  font-size:13px !important;
}

.demo-update-card p{
  font-size:13px !important;
}

.demo-update-card>small{
  font-size:10px !important;
}


/* DEMO DASHBOARD */

.demo-dashboard-header small{
  font-size:10px !important;
}

.demo-dashboard-header strong{
  font-size:20px !important;
}

.status-dot{
  font-size:10px !important;
}

.demo-stats small{
  font-size:9px !important;
}

.demo-readiness-head{
  font-size:12px !important;
}

.demo-task b{
  font-size:12px !important;
}

.demo-task small{
  font-size:10px !important;
}


/* USE CASE CARDS */

.use-case-card h3{
  font-size:21px !important;
}

.use-case-card p{
  font-size:15px !important;
  line-height:1.7 !important;
}

.use-case-card small{
  font-size:11px !important;
}


/* HOW IT WORKS */

.how-grid h3{
  font-size:21px !important;
}

.how-grid p{
  font-size:15px !important;
  line-height:1.7 !important;
}


/* DIFFERENCE SECTION */

.difference-list>div>span{
  font-size:13px !important;
}

.difference-list h3{
  font-size:20px !important;
}

.difference-list p{
  font-size:15px !important;
}

.dashboard-eyebrow{
  font-size:10px !important;
}

.difference-dashboard-body p{
  font-size:14px !important;
}


/* AUDIENCE CARDS */

.audience-card>span{
  font-size:12px !important;
}

.audience-card p{
  font-size:16px !important;
}

.text-cta{
  font-size:15px !important;
}


/* FOOTER */

.footer-brand p{
  font-size:14px !important;
}

.footer-links strong{
  font-size:14px !important;
}

.footer-links a{
  font-size:14px !important;
}

.footer-bottom{
  font-size:12px !important;
}


/* HEADER NAV */

.desktop-nav a,
.text-link{
  font-size:15px !important;
}


/* BUTTONS */

.button{
  font-size:15px !important;
}

.button-small{
  font-size:14px !important;
}


/* MOBILE */

@media(max-width:750px){

  .hero-lead{
    font-size:18px !important;
  }

  .section-heading p,
  .solution-copy>p,
  .difference-main>p{
    font-size:17px !important;
  }

  .pain-grid p,
  .use-case-card p,
  .how-grid p{
    font-size:16px !important;
  }

}


/* ============================================================
   Kingdom Pass 3.4.5
   Mockup Composition + FAQ
   ============================================================ */


/* HERO FLOATING ELEMENTS */

.notification-float{
  left:auto !important;
  right:115px !important;
  bottom:5px !important;
  width:295px !important;
}

.admin-float{
  top:205px !important;
  right:145px !important;
  width:215px !important;
}


/* LIVE DEMO COMPOSITION */

.demo-phone-wrap{
  min-height:650px !important;
  padding-bottom:80px !important;
}

.demo-phone{
  top:5px !important;
}

.demo-update-card{
  right:-65px !important;
  bottom:5px !important;

  width:255px !important;

  z-index:8 !important;
}


/*
 Prevent the notification from sitting over the QR/pass.
 Push it primarily outside the phone footprint.
*/

@media(min-width:1151px){

  .demo-phone-wrap{
    padding-right:75px !important;
  }

  .demo-update-card{
    right:-15px !important;
    bottom:15px !important;
    transform:translateX(42%) !important;
  }

}


/* Give demo columns more breathing room */

.demo-stage{
  grid-template-columns:
    minmax(430px,1fr)
    minmax(330px,.75fr) !important;

  gap:70px !important;
}

.demo-side-panel{
  position:relative !important;
  z-index:2 !important;
}


/* HERO CARDS SHOULD FLOAT BESIDE, NOT OVER, PASS CONTENT */

@media(min-width:1151px){

  .hero-visual{
    min-height:690px !important;
  }

  .notification-float{
    right:135px !important;
    bottom:8px !important;
  }

  .admin-float{
    right:190px !important;
    top:185px !important;
  }

}


/* FAQ */

.faq-section{
  width:min(1100px,92vw);
  margin:0 auto;
  padding:110px 0 125px;
}

.faq-list{
  display:grid;
  gap:12px;
  margin-top:45px;
}

.faq-list details{
  overflow:hidden;

  border:1px solid #dfe6f0;
  border-radius:20px;

  background:#fff;

  box-shadow:
    0 10px 28px
    rgba(7,19,41,.035);
}

.faq-list summary{
  list-style:none;

  min-height:74px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:24px;

  padding:20px 24px;

  color:var(--navy);

  font-size:18px;
  font-weight:800;

  cursor:pointer;
}

.faq-list summary::-webkit-details-marker{
  display:none;
}

.faq-list summary span{
  width:34px;
  height:34px;

  flex:0 0 auto;

  display:grid;
  place-items:center;

  border-radius:10px;

  color:#8d6814;

  background:#fff2c9;

  font-size:22px;
  line-height:1;

  transition:
    transform .2s ease,
    background .2s ease;
}

.faq-list details[open] summary span{
  transform:rotate(45deg);
  background:var(--gold);
}

.faq-answer{
  padding:
    0 70px
    24px 24px;

  color:#66758c;

  font-size:16px;
  line-height:1.75;
}


/* FAQ hover */

.faq-list details:hover{
  border-color:#d5bb70;
}


/* MOBILE COMPOSITION */

@media(max-width:1150px){

  .demo-stage{
    grid-template-columns:1fr !important;
    gap:25px !important;
  }

  .demo-phone-wrap{
    min-height:670px !important;
    padding-right:0 !important;
  }

  .demo-update-card{
    right:50% !important;
    bottom:0 !important;

    transform:translateX(65%) !important;
  }

}


@media(max-width:750px){

  .notification-float{
    right:auto !important;
    left:50% !important;

    bottom:0 !important;

    transform:translateX(-50%) !important;
  }

  .demo-phone-wrap{
    min-height:650px !important;
  }

  .demo-update-card{
    width:min(260px,86vw) !important;

    right:50% !important;
    bottom:0 !important;

    transform:translateX(50%) !important;
  }

  .faq-section{
    padding:80px 0 90px;
  }

  .faq-list summary{
    min-height:68px;

    padding:18px;

    font-size:16px;
  }

  .faq-answer{
    padding:
      0 18px
      20px;

    font-size:15px;
  }

}


/* ============================================================
   Kingdom Pass 3.4.5
   DEFINITIVE MOCKUP COMPOSITION
   Floating information may NOT cover device/pass content.
   ============================================================ */


/* ------------------------------------------------------------
   HERO
   Phones own the upper area.
   Supporting cards get their own dedicated lower row.
   ------------------------------------------------------------ */

.hero-visual{
  min-height:780px !important;
  padding-bottom:155px !important;
}


/* Keep phones completely above supporting cards */

.phone-left{
  top:45px !important;
  left:35px !important;
}

.phone-right{
  top:15px !important;
  right:35px !important;
}


/* Command Center moves BELOW phones */

.hero-visual .admin-float{
  top:auto !important;
  right:auto !important;

  left:35px !important;
  bottom:10px !important;

  width:250px !important;

  transform:none !important;

  z-index:10 !important;
}


/* Notification also sits BELOW phones */

.hero-visual .notification-float{
  top:auto !important;
  left:auto !important;

  right:35px !important;
  bottom:10px !important;

  width:310px !important;

  transform:none !important;

  z-index:10 !important;
}


/* Make the lower support cards visually intentional */

.hero-visual .admin-float,
.hero-visual .notification-float{
  min-height:110px !important;
  display:block !important;
}


/* Restore notification's internal grid */

.hero-visual .notification-float{
  display:grid !important;
  grid-template-columns:45px 1fr !important;
  align-items:center !important;
}


/* ------------------------------------------------------------
   LIVE DEMO
   Phone gets exclusive space.
   Notification becomes a card UNDER the phone.
   ------------------------------------------------------------ */

.demo-phone-wrap{
  min-height:760px !important;
  padding:0 0 175px !important;
  position:relative !important;
}

.demo-phone{
  top:5px !important;
  bottom:auto !important;
}


/* Kill every previous transform/side positioning rule */

.demo-update-card{
  top:auto !important;

  left:50% !important;
  right:auto !important;

  bottom:12px !important;

  width:300px !important;
  max-width:90% !important;

  transform:translateX(-50%) !important;

  z-index:10 !important;
}


/* The demo stage should have room around the composition */

.demo-stage{
  grid-template-columns:
    minmax(430px,1fr)
    minmax(330px,.78fr) !important;

  gap:50px !important;
  align-items:center !important;
}


/* ------------------------------------------------------------
   DESKTOP
   ------------------------------------------------------------ */

@media(min-width:1151px){

  .hero{
    align-items:center !important;
  }

  .hero-visual{
    min-height:780px !important;
  }

  .demo-phone-wrap{
    min-height:760px !important;
    padding-right:0 !important;
  }

  .demo-update-card{
    left:50% !important;
    right:auto !important;
    bottom:12px !important;

    transform:translateX(-50%) !important;
  }

}


/* ------------------------------------------------------------
   TABLET
   ------------------------------------------------------------ */

@media(max-width:1150px){

  .hero-visual{
    min-height:790px !important;
  }

  .hero-visual .admin-float{
    left:20px !important;
    bottom:12px !important;
  }

  .hero-visual .notification-float{
    right:20px !important;
    bottom:12px !important;
  }

  .demo-phone-wrap{
    min-height:760px !important;
  }

}


/* ------------------------------------------------------------
   MOBILE
   Stack everything. No overlaps allowed.
   ------------------------------------------------------------ */

@media(max-width:750px){

  .hero-visual{
    min-height:880px !important;

    transform:none !important;

    display:block !important;

    padding-bottom:245px !important;
  }

  .phone-left{
    width:225px !important;
    height:470px !important;

    left:2% !important;
    top:40px !important;

    transform:rotate(-4deg) !important;
  }

  .phone-right{
    width:225px !important;
    height:470px !important;

    right:2% !important;
    top:25px !important;

    transform:rotate(4deg) !important;
  }

  .hero-visual .admin-float{
    display:block !important;

    width:calc(100% - 30px) !important;

    left:15px !important;
    right:auto !important;

    bottom:125px !important;

    min-height:auto !important;
  }

  .hero-visual .notification-float{
    display:grid !important;

    width:calc(100% - 30px) !important;

    left:15px !important;
    right:auto !important;

    bottom:15px !important;

    transform:none !important;

    min-height:auto !important;
  }

  .demo-phone-wrap{
    min-height:740px !important;
    padding-bottom:170px !important;
  }

  .demo-update-card{
    width:calc(100% - 30px) !important;

    left:50% !important;
    right:auto !important;

    bottom:10px !important;

    transform:translateX(-50%) !important;
  }

}



/* ============================================================
   Kingdom Pass 3.4.5
   HERO SUPPORT CARD READABILITY
   These are marketing mockups, not microscopic UI labels.
   ============================================================ */


/* ------------------------------------------------------------
   CLIENT COMMAND CENTER CARD UNDER HERO PHONES
   ------------------------------------------------------------ */

.hero-visual .admin-float{
  width:285px !important;
  min-height:128px !important;

  padding:18px 20px !important;

  border-radius:20px !important;
}


/* CLIENT COMMAND CENTER */

.hero-visual .admin-float > small{
  font-size:10px !important;

  line-height:1.3 !important;

  letter-spacing:1.2px !important;

  color:#77869a !important;
}


/* LAUNCH READINESS */

.hero-visual .admin-float > strong{
  margin-top:5px !important;

  font-size:16px !important;

  line-height:1.3 !important;

  color:#071329 !important;
}


/* TOP DOTS */

.hero-visual .mini-admin-head{
  margin-bottom:10px !important;
}

.hero-visual .mini-admin-head span{
  width:7px !important;
  height:7px !important;
}


/* PROGRESS BAR */

.hero-visual .mini-progress{
  height:7px !important;

  margin:14px 0 12px !important;
}


/* WALLET SETUP / FIRST PROGRAM ROWS */

.hero-visual .mini-status{
  display:flex !important;

  align-items:center !important;
  justify-content:space-between !important;

  gap:12px !important;

  margin-top:8px !important;

  font-size:11px !important;

  line-height:1.35 !important;
}

.hero-visual .mini-status span{
  color:#41516a !important;

  font-size:11px !important;

  font-weight:700 !important;
}

.hero-visual .mini-status b{
  color:#159a69 !important;

  font-size:11px !important;

  font-weight:900 !important;
}


/* ------------------------------------------------------------
   NOTIFICATION CARD UNDER HERO PHONES
   ------------------------------------------------------------ */

.hero-visual .notification-float{
  width:335px !important;
  min-height:128px !important;

  padding:18px 20px !important;

  grid-template-columns:52px 1fr !important;

  gap:14px !important;

  border-radius:20px !important;
}


.hero-visual .notification-icon{
  width:52px !important;
  height:52px !important;

  border-radius:15px !important;

  font-size:18px !important;
}


/* KINGDOM PASS */

.hero-visual .notification-float small{
  font-size:11px !important;

  line-height:1.3 !important;

  color:#748398 !important;
}


/* YOUR MEMBER BENEFITS WERE UPDATED */

.hero-visual .notification-float strong{
  margin-top:4px !important;

  font-size:14px !important;

  line-height:1.35 !important;

  color:#071329 !important;
}


/* NOW */

.hero-visual .notification-float span{
  margin-top:5px !important;

  font-size:10px !important;

  line-height:1.2 !important;

  color:#8795a8 !important;
}


/* ------------------------------------------------------------
   THREE TRUST ITEMS UNDER LEFT HERO COPY
   ------------------------------------------------------------ */

.hero-trust strong{
  font-size:16px !important;

  line-height:1.35 !important;
}

.hero-trust span{
  margin-top:5px !important;

  font-size:14px !important;

  line-height:1.45 !important;
}


/* Give the lower cards enough room */

.hero-visual{
  min-height:810px !important;
  padding-bottom:165px !important;
}


/* ------------------------------------------------------------
   TABLET
   ------------------------------------------------------------ */

@media(max-width:1150px){

  .hero-visual .admin-float{
    width:270px !important;
  }

  .hero-visual .notification-float{
    width:320px !important;
  }

}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media(max-width:750px){

  .hero-visual .admin-float,
  .hero-visual .notification-float{
    width:calc(100% - 30px) !important;
  }

  .hero-visual .admin-float > strong{
    font-size:17px !important;
  }

  .hero-visual .mini-status span,
  .hero-visual .mini-status b{
    font-size:12px !important;
  }

  .hero-visual .notification-float strong{
    font-size:15px !important;
  }

}


/* ============================================================
   KINGDOM PASS 3.4.5
   COMPLETE INTERACTIVE DEMO TYPOGRAPHY SYSTEM

   Applies to ALL dynamic Ministry + Business demo experiences.
   ============================================================ */


/* ------------------------------------------------------------
   LEFT DEMO CONTROLS
   ------------------------------------------------------------ */

.demo-control-block > small{
  font-size:12px !important;
  line-height:1.4 !important;
  letter-spacing:1.5px !important;
}

.segment-control button{
  font-size:14px !important;
  line-height:1.25 !important;
  font-weight:800 !important;
}

.usecase-buttons button{
  font-size:14px !important;
  line-height:1.25 !important;
  font-weight:800 !important;
}


/* EXPERIENCE DESCRIPTION */

.demo-story small{
  font-size:12px !important;
  line-height:1.4 !important;
  letter-spacing:1.4px !important;
}

.demo-story h3{
  font-size:28px !important;
  line-height:1.15 !important;
}

.demo-story p{
  font-size:17px !important;
  line-height:1.65 !important;
}

.demo-cta{
  font-size:15px !important;
}


/* ------------------------------------------------------------
   PHONE / WALLET PREVIEW
   ------------------------------------------------------------ */

.demo-wallet-bar{
  font-size:13px !important;
}


/* ORGANIZATION NAME */

.live-demo-pass .pass-brand small{
  font-size:10px !important;
  line-height:1.3 !important;
  letter-spacing:1px !important;
}


/* PASS NAME */

.live-demo-pass .pass-brand strong{
  font-size:14px !important;
  line-height:1.3 !important;
}


/* MEMBER / VIP / GUEST LABEL */

.live-demo-pass .pass-hero-copy small{
  font-size:10px !important;
  line-height:1.3 !important;
  letter-spacing:1px !important;
}


/* PERSON NAME */

.live-demo-pass .pass-hero-copy h3{
  font-size:25px !important;
  line-height:1.2 !important;
}


/* MEMBER ID / CAMPUS / ACCESS LABELS */

.live-demo-pass .pass-fields small{
  font-size:10px !important;
  line-height:1.3 !important;
  letter-spacing:.8px !important;
}


/* FIELD VALUES */

.live-demo-pass .pass-fields strong{
  font-size:14px !important;
  line-height:1.35 !important;
}


/* SCAN LABEL */

.live-demo-pass .scan-label{
  font-size:10px !important;
  line-height:1.4 !important;
  letter-spacing:1.3px !important;
}


/* ------------------------------------------------------------
   PASS UPDATE CARD UNDER PHONE
   ------------------------------------------------------------ */

.demo-update-card{
  width:330px !important;
  padding:20px !important;
}


/* ORGANIZATION */

.demo-update-card .update-header small{
  font-size:11px !important;
  line-height:1.35 !important;
}


/* PASS UPDATE */

.demo-update-card .update-header b{
  font-size:14px !important;
  line-height:1.35 !important;
}


/* MESSAGE */

.demo-update-card p{
  font-size:15px !important;
  line-height:1.55 !important;
}


/* DELIVERED TO PASS HOLDER */

.demo-update-card > small{
  font-size:11px !important;
  line-height:1.35 !important;
}


/* ------------------------------------------------------------
   CLIENT COMMAND CENTER
   ------------------------------------------------------------ */


/* CLIENT COMMAND CENTER */

.demo-dashboard-header small{
  font-size:11px !important;
  line-height:1.35 !important;
  letter-spacing:1.2px !important;
}


/* GRACE COMMUNITY / ORGANIZATION NAME */

.demo-dashboard-header strong{
  font-size:22px !important;
  line-height:1.25 !important;
}


/* LIVE */

.demo-dashboard-header .status-dot,
.demo-side-panel .status-dot{
  font-size:11px !important;
  line-height:1 !important;

  padding:7px 10px !important;
}


/* STAT CARDS */

.demo-stats div{
  padding:18px !important;
}


/* ACTIVE PASSES / THIS MONTH */

.demo-stats small{
  font-size:11px !important;
  line-height:1.35 !important;
  letter-spacing:1px !important;
}


/* 842 / +124 */

.demo-stats strong{
  margin-top:7px !important;

  font-size:28px !important;
  line-height:1 !important;
}


/* LAUNCH READINESS */

.demo-readiness-head{
  font-size:14px !important;
  line-height:1.4 !important;
}

.demo-readiness-head span{
  font-size:14px !important;
  font-weight:700 !important;
}

.demo-readiness-head b{
  font-size:14px !important;
  font-weight:900 !important;
}


/* CHECKMARK BOX */

.demo-task > span{
  width:34px !important;
  height:34px !important;

  font-size:17px !important;
}


/* WALLET SETUP / PASS PROGRAM / DELIVERY / SCANNER */

.demo-task b{
  font-size:14px !important;
  line-height:1.35 !important;
}


/* APPLE + GOOGLE CONNECTED / MEMBER PASS / ETC */

.demo-task small{
  margin-top:3px !important;

  font-size:11px !important;
  line-height:1.4 !important;
}


/* Give dashboard rows room for readable type */

.demo-task{
  grid-template-columns:38px 1fr !important;
  gap:12px !important;

  padding:14px 0 !important;
}


/* ------------------------------------------------------------
   MAKE RIGHT DASHBOARD LARGE ENOUGH FOR THE NEW TYPE
   ------------------------------------------------------------ */

.demo-side-panel{
  padding:28px !important;

  min-width:360px !important;
}


/* ------------------------------------------------------------
   GLOBAL DEMO WIDTH / BALANCE
   ------------------------------------------------------------ */

.demo-stage{
  grid-template-columns:
    minmax(460px,1fr)
    minmax(380px,.8fr) !important;

  gap:55px !important;
}


/* ------------------------------------------------------------
   TABLET
   ------------------------------------------------------------ */

@media(max-width:1150px){

  .demo-stage{
    grid-template-columns:1fr !important;
  }

  .demo-side-panel{
    width:min(650px,100%) !important;
    min-width:0 !important;

    margin-left:auto !important;
    margin-right:auto !important;
  }

}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media(max-width:750px){

  .demo-story h3{
    font-size:25px !important;
  }

  .demo-story p{
    font-size:16px !important;
  }

  .demo-dashboard-header strong{
    font-size:20px !important;
  }

  .demo-stats strong{
    font-size:25px !important;
  }

  .demo-task b{
    font-size:14px !important;
  }

  .demo-task small{
    font-size:12px !important;
  }

  .demo-update-card{
    width:calc(100% - 24px) !important;
  }

  .demo-update-card p{
    font-size:14px !important;
  }

}

/* ============================================================
   Kingdom Pass 3.4.5
   Demo secondary text readability bump
   ============================================================ */

.demo-task small{
  font-size:13px !important;
  line-height:1.45 !important;
}

.demo-dashboard-header small{
  font-size:12px !important;
}

.demo-stats small{
  font-size:12px !important;
}

.demo-update-card .update-header small{
  font-size:12px !important;
}

.demo-update-card > small{
  font-size:12px !important;
}

.live-demo-pass .pass-brand small,
.live-demo-pass .pass-hero-copy small,
.live-demo-pass .pass-fields small{
  font-size:11px !important;
}

.live-demo-pass .scan-label{
  font-size:11px !important;
}

@media(max-width:750px){

  .demo-task small{
    font-size:13px !important;
  }

}