/* Homepage only. Shared header/footer/colour tokens come from style.css. */
html{scroll-behavior:smooth; scroll-padding-top:84px;}
body{overflow-x:hidden;}
main{flex:1 0 auto;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px; border-radius:8px;}

.h-wrap{max-width:1152px; margin:0 auto; padding:0 24px;}
.h-section{padding:84px 0;}
.h-eyebrow{display:inline-block; font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--green); margin-bottom:14px;}
.h-title,.h-lead,.h-sub{text-wrap:balance;}
.h-title{font-size:40px; font-weight:800; letter-spacing:-0.025em; line-height:1.1; max-width:20ch;}
.h-lead{margin-top:16px; font-size:18px; color:var(--muted); max-width:56ch;}
.h-head{margin-bottom:56px;}
.h-head.center{text-align:center;}
.h-head.center .h-title,.h-head.center .h-lead{margin-left:auto; margin-right:auto;}

/* Header nav (homepage) */
.nav{display:flex; align-items:center; gap:28px; margin-left:auto; margin-right:28px;}
.nav a{font-size:14px; font-weight:500; color:var(--muted); text-decoration:none;}
.nav a:hover{color:var(--text);}

/* Hero */
.h-hero{position:relative; padding:72px 0 88px; overflow:hidden;}
.h-hero::before{
  content:""; position:absolute; inset:-20% -10% auto -10%; height:90%;
  background:radial-gradient(60% 60% at 70% 30%, rgba(52,199,89,.18), transparent 70%), radial-gradient(40% 50% at 15% 10%, rgba(0,122,255,.12), transparent 70%);
  pointer-events:none;
}
.h-hero-grid{position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;}
.h-pill{display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; border:1px solid var(--border); background:rgba(24,24,27,.6); font-size:13px; font-weight:600; color:#D4D4D8;}
.h-pill i{width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green);}
.h-hero h1{margin-top:22px; font-size:60px; line-height:1.03; letter-spacing:-0.035em; max-width:13ch;}
.h-sub{margin-top:22px; font-size:20px; line-height:1.55; color:var(--muted); max-width:30em;}
.h-cta{display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:34px;}
.h-cta .app-store-link{margin:0;}
.h-link{font-size:15px; font-weight:600; color:var(--text); text-decoration:none; border-bottom:1px solid var(--border); padding-bottom:2px;}
.h-link:hover{border-color:var(--green);}
.h-trial{margin-top:16px; font-size:14px; color:var(--muted);}
.h-trial strong{color:#0A84FF; font-weight:700;}
.h-chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:34px;}
.h-chip{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:#D4D4D8; padding:8px 14px; border-radius:999px; background:rgba(39,39,42,.55);}
.h-chip svg{color:var(--green); flex:none;}

/* Phone frame */
.phone{
  position:relative; display:block; width:100%; max-width:300px;
  padding:8px; border-radius:46px; background:#17171a;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 30px 60px -18px rgba(0,0,0,.85), 0 40px 90px -40px rgba(52,199,89,.35);
}
.phone img{display:block; width:100%; height:auto; border-radius:38px; background:#000;}
.hero-phones{position:relative; display:flex; justify-content:center; padding:10px 0 10px;}
.hero-phones .phone.main{z-index:2; max-width:310px;}
.hero-phones .phone.back{position:absolute; z-index:1; max-width:250px; left:2%; top:64px; transform:rotate(-7deg); opacity:.85;}
.hero-phones .phone.back2{position:absolute; z-index:1; max-width:250px; right:0; top:90px; transform:rotate(7deg); opacity:.85;}

/* Trust strip */
.h-strip{border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:rgba(24,24,27,.35);}
.h-strip-row{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding-top:28px; padding-bottom:28px;}
.h-strip-item{display:flex; align-items:center; gap:14px;}
.h-ico{flex:none; width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:rgba(52,199,89,.14); color:var(--green);}
.h-ico.blue{background:rgba(0,122,255,.16); color:#0A84FF;}
.h-strip-item b{display:block; font-size:15px; font-weight:700;}
.h-strip-item div span{font-size:13px; color:var(--muted);}

/* How it works rows */
.h-steps{display:flex; flex-direction:column; gap:72px;}
.h-step{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
.h-step.flip .h-step-copy{order:2;}
.h-step-phone{display:flex; justify-content:center;}
.h-num{font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:14px; font-weight:600; color:var(--green); letter-spacing:.08em;}
.h-step h3{margin-top:10px; font-size:32px; font-weight:800; letter-spacing:-0.02em; line-height:1.15;}
.h-step p{margin-top:14px; font-size:17px; color:var(--muted); max-width:44ch;}
.h-bullets{list-style:none; margin-top:20px; display:flex; flex-direction:column; gap:12px;}
.h-bullets li{display:flex; gap:12px; font-size:15px; color:#D4D4D8;}
.h-bullets li::before{content:""; flex:none; width:20px; height:20px; margin-top:1px; border-radius:50%; background:rgba(52,199,89,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5.8 10.4 2.7 2.7 5.7-5.9' fill='none' stroke='%2334C759' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat;}

/* Feature grid */
.h-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.h-card{border-radius:24px; border:1px solid var(--border); background:var(--card); padding:28px; transition:border-color .2s, transform .2s;}
.h-card:hover{border-color:#3f3f46; transform:translateY(-2px);}
.h-card .h-ico{margin-bottom:18px;}
.h-card h3{font-size:18px; font-weight:700; letter-spacing:-0.01em;}
.h-card p{margin-top:8px; font-size:15px; color:var(--muted);}

/* Privacy */
.h-privacy{border-radius:32px; border:1px solid var(--border); background:radial-gradient(70% 120% at 0% 0%, rgba(52,199,89,.12), transparent 60%), #111113; padding:56px; display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.h-privacy .h-title{max-width:16ch;}
.h-priv-list{list-style:none; display:flex; flex-direction:column; gap:20px;}
.h-priv-list li{display:flex; gap:16px;}
.h-priv-list b{display:block; font-size:16px; font-weight:700;}
.h-priv-list div span{display:block; margin-top:2px; font-size:14px; color:var(--muted);}
.h-priv-link{display:inline-block; margin-top:26px; font-size:15px; font-weight:600; color:var(--green); text-decoration:none;}
.h-priv-link:hover{text-decoration:underline;}

/* Pricing */
.h-plans{display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:820px; margin:0 auto;}
.h-plan{position:relative; border-radius:28px; border:1px solid var(--border); background:var(--card); padding:36px;}
.h-plan.best{border-color:rgba(10,132,255,.6); background:linear-gradient(180deg,rgba(0,122,255,.1),rgba(24,24,27,.4));}
.h-plan .tag{position:absolute; top:-13px; left:36px; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; background:var(--green); color:#04210d; padding:5px 12px; border-radius:999px;}
.h-plan h3{font-size:15px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.08em;}
.h-price{margin-top:12px; font-size:48px; font-weight:800; letter-spacing:-0.03em;}
.h-price small{font-size:18px; font-weight:600; color:var(--muted); letter-spacing:0;}
.h-plan .note{margin-top:4px; font-size:14px; color:var(--muted);}
.h-plan .h-bullets{margin-top:24px;}
.h-fine{max-width:820px; margin:28px auto 0; text-align:center; font-size:13px; color:#71717A;}
.h-plan-cta{text-align:center; margin-top:36px;}
.h-plan-cta .app-store-link{margin:0;}

/* FAQ */
.h-faq{max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:12px;}
.h-faq details{border-radius:20px; border:1px solid var(--border); background:var(--card); padding:0 24px;}
.h-faq details[open]{border-color:#3f3f46;}
.h-faq summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 0; font-size:17px; font-weight:600;}
.h-faq summary::-webkit-details-marker{display:none;}
.h-faq summary::after{content:""; flex:none; width:22px; height:22px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M5 8.5 11 14.5 17 8.5' fill='none' stroke='%23A1A1AA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px no-repeat; transition:transform .2s;}
.h-faq details[open] summary::after{transform:rotate(180deg);}
.h-faq details p{padding:0 0 22px; font-size:16px; color:var(--muted); max-width:62ch;}
.h-faq details p a{color:var(--blue);}

/* Final CTA */
.h-final{text-align:center; border-radius:32px; border:1px solid var(--border); padding:72px 24px; background:radial-gradient(60% 90% at 50% 0%, rgba(52,199,89,.2), transparent 70%), #101012;}
.h-final .h-title{margin:0 auto; max-width:16ch; font-size:44px;}
.h-final .h-lead{margin:16px auto 0;}
.h-final .h-cta{justify-content:center;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .h-card,.h-faq summary::after{transition:none;}
}

/* Tablet */
@media (max-width:980px){
  .nav{display:none;}
  .h-hero{padding:48px 0 64px;}
  .h-hero-grid{grid-template-columns:1fr; gap:56px; text-align:center;}
  .h-hero h1,.h-sub{margin-left:auto; margin-right:auto;}
  .h-cta,.h-chips{justify-content:center;}
  .h-hero h1{font-size:52px;}
  .h-strip-row{grid-template-columns:repeat(2,1fr);}
  .h-step,.h-step.flip{grid-template-columns:1fr; gap:36px; text-align:center;}
  .h-step.flip .h-step-copy{order:0;}
  .h-step p,.h-bullets{margin-left:auto; margin-right:auto;}
  .h-bullets{align-items:flex-start; max-width:380px; text-align:left;}
  .h-grid{grid-template-columns:repeat(2,1fr);}
  .h-privacy{grid-template-columns:1fr; padding:40px 28px; gap:36px;}
}
/* Phone */
@media (max-width:640px){
  .h-section{padding:68px 0;}
  .h-title{font-size:32px;}
  .h-lead{font-size:16px;}
  .h-head{margin-bottom:40px;}
  .h-hero h1{font-size:40px;}
  .h-sub{font-size:17px;}
  .h-hero .phone.back,.h-hero .phone.back2{display:none;}
  .h-strip-row{grid-template-columns:1fr 1fr; gap:26px 16px; padding-top:28px; padding-bottom:28px;}
  .h-strip-item{flex-direction:column; text-align:center; gap:10px;}
  .h-step h3{font-size:26px;}
  .h-grid,.h-plans{grid-template-columns:1fr;}
  .h-card{padding:24px;}
  .h-plan{padding:30px 26px;}
  .h-price{font-size:42px;}
  .h-faq summary{font-size:16px;}
  .h-final{padding:52px 20px;}
  .h-final .h-title{font-size:32px;}
}

/* Small phones */
@media (max-width:480px){
  .header-row{gap:8px;}
  .logo{font-size:21px;}
  .btn-download{padding:8px 14px; font-size:13px; gap:6px;}
  .h-hero h1{font-size:34px;}
  .h-hero h1 .accent{white-space:nowrap;}
  .h-title{font-size:28px;}
  .h-final .h-title{font-size:28px;}
}

/* QR (desktop only) */
.h-qr{display:none; align-items:center; gap:16px; margin-top:26px; padding:12px 18px 12px 12px; border-radius:20px; border:1px solid var(--border); background:rgba(24,24,27,.55); max-width:340px;}
.h-qr img{flex:none; width:104px; height:104px; padding:8px; border-radius:12px; background:#fff;}
.h-qr span{font-size:13px; color:var(--muted); line-height:1.45; text-align:left;}
.h-qr b{display:block; font-size:14px; color:var(--text); font-weight:700;}
.h-qr.center{margin-left:auto; margin-right:auto;}
@media (min-width:981px){ .h-qr{display:flex;} }
@media (hover:none) and (pointer:coarse){ .h-qr{display:none !important;} }

/* Demo video */
.h-demo{background:linear-gradient(180deg,transparent,rgba(24,24,27,.4) 20%,rgba(24,24,27,.4) 80%,transparent);}
.h-demo-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
.phone video{display:block; width:100%; height:auto; border-radius:38px; background:#000;}
.h-flow{list-style:none; counter-reset:f; margin-top:28px; display:flex; flex-direction:column; gap:14px;}
.h-flow li{counter-increment:f; display:flex; align-items:baseline; gap:14px; font-size:16px;}
.h-flow li::before{content:counter(f); flex:none; width:26px; height:26px; border-radius:50%; background:rgba(52,199,89,.16); color:var(--green); font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; transform:translateY(5px);}
.h-flow b{font-weight:700; min-width:76px;}
.h-flow span{color:var(--muted);}

/* Maker note */
.h-maker{display:grid; grid-template-columns:1fr; gap:0; align-items:center; max-width:760px; margin:0 auto; border-radius:32px; border:1px solid var(--border); background:radial-gradient(70% 120% at 0% 0%, rgba(0,122,255,.1), transparent 60%), #111113; padding:48px;}
.h-maker p{margin-top:14px; font-size:16px; color:var(--muted); max-width:52ch;}
.h-maker p.h-maker-lead{margin-top:0; font-size:22px; font-weight:700; letter-spacing:-0.015em; line-height:1.3; color:var(--text);}
.h-sign{margin-top:32px !important;}
.h-sign b{display:inline-block; position:relative; font-family:"Mrs Saint Delafield","Snell Roundhand","Segoe Script",cursive; font-size:76px; line-height:.9; font-weight:400; color:#F4F4F5; transform:rotate(-3deg); transform-origin:left bottom; padding-right:10px; text-shadow:0 0 28px rgba(255,255,255,.12);}
.h-sign b::after{content:""; display:block; width:170px; height:14px; margin:-16px 0 0 6px; opacity:.85; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 14'%3E%3Cpath d='M2 11 C34 3 96 1 168 5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M30 12 C70 7 110 6 140 8' fill='none' stroke='white' stroke-width='1.2' stroke-linecap='round' opacity='.6'/%3E%3C/svg%3E") no-repeat left center/100% 100%;}
.h-sign span{display:block; margin-top:8px; font-size:14px; letter-spacing:.02em;}
.h-maker .h-priv-link{margin-top:14px;}

@media (max-width:980px){
  .h-demo-grid{grid-template-columns:1fr; gap:40px; text-align:center;}
  .h-flow{align-items:flex-start; max-width:300px; margin-left:auto; margin-right:auto; text-align:left;}
  .h-maker{padding:40px 28px;}
}
@media (max-width:640px){
    .h-maker p.h-maker-lead{font-size:20px;}
}

/* Landing pages (e.g. /credit-union-budgeting-app) */
.pg-hero{position:relative; padding:64px 0 56px; text-align:center; overflow:hidden;}
.pg-hero::before{content:""; position:absolute; inset:-30% -10% auto -10%; height:100%;
  background:radial-gradient(60% 60% at 50% 20%, rgba(52,199,89,.16), transparent 70%), radial-gradient(40% 50% at 15% 10%, rgba(0,122,255,.10), transparent 70%); pointer-events:none;}
.pg-hero .h-wrap{position:relative; max-width:860px;}
.pg-hero h1{margin-top:12px; font-size:52px; line-height:1.08; letter-spacing:-0.03em; text-wrap:balance;}
.pg-hero .h-sub{margin:22px auto 0; text-wrap:balance;}
.pg-hero .h-cta{justify-content:center; margin-top:30px;}
.pg-hero .h-trial{margin-top:14px;}
.pg-crumb{font-size:13px; color:#71717A; margin-bottom:22px;}
.pg-crumb a{color:var(--muted); text-decoration:none;}
.pg-crumb a:hover{color:var(--text); text-decoration:underline;}
@media (max-width:640px){ .pg-hero{padding:40px 0 40px;} .pg-hero h1{font-size:34px;} }
.in-link{color:var(--green); text-decoration:underline; text-underline-offset:3px;}