/* =========================================================================
   Velocity Payments — styles.css
   Teal brand system. Accent = teal (#10A19A) ONLY. No red anywhere.
   ========================================================================= */

/* ---- Tokens ---------------------------------------------------------- */
:root{
  --navy:#0A0A0A;       /* primary surface (black) */
  --navy-deep:#000000;  /* depth / footers (pure black) */
  --teal:#10A19A;       /* PAYMENTS accent */
  --teal-deep:#0B7C77;  /* hover / pressed */
  --cream:#F5F1E8;      /* light surface */
  --cream-deep:#ECE6D6;
  --paper:#FBF9F4;      /* page background */
  --ink:#161616;
  --slate:#5B6470;      /* secondary text */
  --mist:#C9C5BC;
  --white:#FFFFFF;

  --maxw:1180px;
  --gutter:clamp(20px, 5vw, 64px);
  --radius:14px;
  --radius-sm:9px;

  --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --shadow:0 18px 50px -24px rgba(8,23,48,.45);
  --shadow-sm:0 8px 24px -16px rgba(8,23,48,.4);
}

/* ---- Reset / base ---------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  margin:0;
  font-family:var(--font-body);
  font-weight:400;
  font-size:clamp(16px,1.05vw,17.5px);
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--teal-deep);text-decoration:none;}
a:hover{text-decoration:underline;}
hr{border:0;border-top:1px solid var(--mist);margin:0;}

/* ---- Skip link ------------------------------------------------------- */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--teal);color:var(--white);
  padding:12px 20px;border-radius:0 0 var(--radius-sm) 0;
  font-family:var(--font-mono);font-size:13px;letter-spacing:.04em;
}
.skip-link:focus{left:0;text-decoration:none;}

/* ---- Layout helpers -------------------------------------------------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}
.section{padding-block:clamp(56px,8vw,118px);}
.section--tight{padding-block:clamp(44px,6vw,80px);}

.surface-navy{background:var(--navy);color:var(--cream);position:relative;overflow:hidden;}
.surface-navy-deep{background:var(--navy-deep);color:var(--cream);}
.surface-cream{background:var(--cream);}
.surface-paper{background:var(--paper);}

/* subtle teal radial glow for navy sections */
.surface-navy::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 70% at 78% 8%, rgba(16,161,154,.20), transparent 60%);
}
.surface-navy > *{position:relative;z-index:1;}

/* ---- Type ------------------------------------------------------------ */
.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--teal);
  margin:0 0 18px;
}
.surface-navy .eyebrow{color:var(--teal);}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;line-height:1.06;
  letter-spacing:-.012em;color:inherit;margin:0 0 .5em;
  font-variation-settings:"opsz" 144,"SOFT" 0;}
.surface-paper h1,.surface-cream h1,
.surface-paper h2,.surface-cream h2,
.surface-paper h3,.surface-cream h3{color:var(--navy);}

h1{font-size:clamp(2.4rem,5.4vw,4.1rem);}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem);}
h3{font-size:clamp(1.25rem,1.9vw,1.55rem);}
h4{font-size:1.05rem;}

h1 em,h2 em,h3 em{font-style:italic;color:var(--teal);font-variation-settings:"opsz" 144,"SOFT" 30;}

.lede{font-size:clamp(1.08rem,1.6vw,1.32rem);line-height:1.55;color:var(--slate);max-width:48ch;}
.surface-navy .lede{color:#CBD8E4;}
.measure{max-width:62ch;}
p{margin:0 0 1.1em;}
p:last-child{margin-bottom:0;}

.label{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--slate);}

/* ---- Buttons --------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--font-body);font-weight:600;font-size:.98rem;
  padding:.92em 1.5em;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  text-decoration:none;line-height:1;
}
.btn:hover{text-decoration:none;transform:translateY(-1px);}
.btn--primary{background:var(--teal);color:var(--white);border-color:var(--teal);}
.btn--primary:hover{background:var(--teal-deep);border-color:var(--teal-deep);}
.btn--ghost{background:transparent;color:var(--navy);border-color:var(--navy);}
.surface-navy .btn--ghost{color:var(--cream);border-color:rgba(245,241,232,.45);}
.btn--ghost:hover{background:rgba(16,161,154,.10);border-color:var(--teal);color:var(--teal);}
.surface-navy .btn--ghost:hover{color:var(--white);}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;}

.arrowlink{font-family:var(--font-mono);font-size:13px;letter-spacing:.04em;
  color:var(--teal-deep);font-weight:500;display:inline-flex;align-items:center;gap:.4em;}
.arrowlink::after{content:"→";transition:transform .15s ease;}
.arrowlink:hover{text-decoration:none;}
.arrowlink:hover::after{transform:translateX(3px);}

/* ---- Focus states ---------------------------------------------------- */
a:focus-visible,.btn:focus-visible,button:focus-visible,
summary:focus-visible,input:focus-visible,.faq__q:focus-visible{
  outline:3px solid var(--teal);outline-offset:3px;border-radius:4px;
}

/* ---- Logo lockup ----------------------------------------------------- */
.velocity-logo{display:inline-flex;align-items:flex-start;font-family:var(--font-display);
  font-weight:400;font-style:italic;font-variation-settings:"opsz" 144,"SOFT" 30;
  line-height:1;color:var(--white);text-decoration:none;font-size:34px;}
.velocity-logo:hover{text-decoration:none;}
.velocity-logo .v{font-size:2.05em;line-height:.82;letter-spacing:-.02em;
  margin-right:.06em;margin-top:-.05em;}
.velocity-logo .stack{display:flex;flex-direction:column;padding-top:.22em;}
.velocity-logo .word{font-size:1em;line-height:.9;letter-spacing:.005em;}
.velocity-logo .line{height:1px;background:var(--teal);margin:.22em 0 .2em;width:100%;}
.velocity-logo .desc{font-family:var(--font-body);font-style:normal;
  font-size:.135em;font-weight:500;letter-spacing:.36em;text-transform:uppercase;
  white-space:nowrap;color:inherit;font-variation-settings:normal;}
.velocity-logo.on-light{color:var(--navy);}
.velocity-logo.on-light .line{background:var(--teal);}

/* ---- Header / nav ---------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:100;background:var(--navy);
  border-bottom:1px solid rgba(245,241,232,.10);}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding-block:14px;}
.nav{display:flex;align-items:center;gap:6px;}
.nav a{font-family:var(--font-body);font-size:.93rem;font-weight:500;color:var(--cream);
  padding:.5em .72em;border-radius:8px;}
.nav a:hover{color:var(--white);background:rgba(255,255,255,.06);text-decoration:none;}
.nav a[aria-current="page"]{color:var(--teal);}
/* two equal-width teal CTAs, stacked (single-column grid → both match the wider one) */
.header-cta{display:grid;gap:8px;justify-items:stretch;}
.header-cta .btn{justify-content:center;white-space:nowrap;font-size:.82rem;padding:.5em 1.1em;}
.header-phone{font-family:var(--font-mono);font-size:.9rem;color:var(--cream);
  white-space:nowrap;display:flex;align-items:center;gap:.45em;}
.header-phone:hover{color:var(--teal);text-decoration:none;}

.nav-toggle{display:none;background:transparent;border:1.5px solid rgba(245,241,232,.4);
  border-radius:8px;width:44px;height:44px;cursor:pointer;color:var(--cream);
  align-items:center;justify-content:center;}
.nav-toggle svg{width:22px;height:22px;}

@media (max-width:920px){
  .nav-toggle{display:inline-flex;}
  .nav{position:fixed;inset:0 0 0 auto;width:min(82vw,340px);flex-direction:column;
    align-items:stretch;gap:4px;background:var(--navy-deep);padding:88px 22px 32px;
    transform:translateX(100%);transition:transform .25s ease;box-shadow:var(--shadow);
    z-index:90;}
  .nav.is-open{transform:translateX(0);}
  .nav a{font-size:1.05rem;padding:.7em .6em;border-bottom:1px solid rgba(245,241,232,.08);}
  .header-phone{display:none;}
  .header-cta .btn--consult{display:none;}     /* phones show only the primary CTA */
  .header-cta .btn{font-size:.82rem;padding-inline:.95em;}
  body.nav-open{overflow:hidden;}
  .nav-scrim{position:fixed;inset:0;background:rgba(8,23,48,.55);opacity:0;
    visibility:hidden;transition:opacity .25s ease;z-index:80;}
  .nav-scrim.is-open{opacity:1;visibility:visible;}
}

/* Phones: drop the header CTA button so the logo + menu never overflow.
   The hero on every page carries a Free Statement Analysis button, and the
   hamburger opens the nav — so the conversion path stays intact. */
@media (max-width:600px){
  .header-cta{display:none;}
  .site-header__inner{gap:12px;}
}

/* ---- Hero ------------------------------------------------------------ */
.hero{padding-block:clamp(60px,9vw,120px);}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);
  align-items:center;}
.hero h1{margin-bottom:.32em;}
.hero .lede{max-width:42ch;}
.hero__media{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}
/* product shot floated on a soft teal glow (no card frame) */
.hero__product{background:transparent;box-shadow:none;overflow:visible;border-radius:0;
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:clamp(320px,40vw,520px);}
.hero__product::before{content:"";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);width:80%;aspect-ratio:1/1;border-radius:50%;z-index:0;
  background:radial-gradient(circle, rgba(16,161,154,.60) 0%, rgba(16,161,154,.32) 38%, rgba(16,161,154,0) 70%);
  filter:blur(16px);}
.hero__product img{position:relative;z-index:1;width:auto;max-width:74%;max-height:100%;
  height:auto;filter:drop-shadow(0 26px 46px rgba(0,0,0,.5));}
@media (max-width:840px){.hero__grid{grid-template-columns:1fr;}
  .hero__media{order:-1;max-width:520px;}}

/* ---- Numbered section header ---------------------------------------- */
.sec-head{max-width:60ch;margin-bottom:clamp(34px,4vw,56px);}
.sec-head .eyebrow{margin-bottom:14px;}

/* ---- Cards ----------------------------------------------------------- */
.cards{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.card{background:var(--white);border:1px solid var(--cream-deep);border-radius:var(--radius);
  padding:30px 28px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow-sm);}
.surface-cream .card{background:var(--paper);}
.card__num{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;color:var(--teal);}
.card h3{margin:0;color:var(--navy);}
.card p{color:var(--slate);font-size:.97rem;margin:0;}
.card .arrowlink{margin-top:auto;}

/* feature card on navy */
.surface-navy .card{background:rgba(255,255,255,.04);border-color:rgba(245,241,232,.12);}
.surface-navy .card h3{color:var(--white);}
.surface-navy .card p{color:#C2CFDB;}

/* ---- Chips / pills --------------------------------------------------- */
.chips{display:flex;flex-wrap:wrap;gap:12px;}
.chip{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-mono);
  font-size:.82rem;letter-spacing:.04em;padding:.62em 1.05em;border-radius:999px;
  border:1.5px solid var(--mist);color:var(--navy);background:var(--white);}
.chip:hover{border-color:var(--teal);color:var(--teal-deep);text-decoration:none;}
.surface-navy .chip{background:rgba(255,255,255,.05);border-color:rgba(245,241,232,.18);color:var(--cream);}
.surface-navy .chip:hover{border-color:var(--teal);color:var(--teal);}

/* ---- Two-column prose split ----------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,68px);align-items:start;}
@media (max-width:820px){.split{grid-template-columns:1fr;}}

/* ---- Stat / proof row ------------------------------------------------ */
.statgrid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
.stat__fig{font-family:var(--font-display);font-size:clamp(2rem,3.4vw,2.8rem);
  color:var(--teal);line-height:1;}
.stat__lbl{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--slate);margin-top:8px;}
.surface-navy .stat__lbl{color:#9FB1C2;}

/* ---- Checklist ------------------------------------------------------- */
.checklist{list-style:none;padding:0;margin:0;display:grid;gap:14px;}
.checklist li{position:relative;padding-left:34px;color:var(--slate);}
.checklist li::before{content:"";position:absolute;left:0;top:.15em;width:20px;height:20px;
  border-radius:50%;background:var(--teal);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/14px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/14px no-repeat;}
.surface-navy .checklist li{color:#C2CFDB;}

.crosslist{list-style:none;padding:0;margin:0;display:grid;gap:14px;}
.crosslist li{position:relative;padding-left:34px;color:var(--slate);}
.crosslist li::before{content:"\00d7";position:absolute;left:4px;top:-.05em;
  color:var(--slate);font-size:1.3em;font-weight:700;}

/* ---- Image placeholder ----------------------------------------------- */
.ph{display:flex;align-items:center;justify-content:center;text-align:center;
  background:var(--cream);color:var(--slate);font-family:var(--font-mono);font-size:12px;
  letter-spacing:.06em;border-radius:var(--radius);border:1px dashed var(--mist);
  padding:18px;}
.ph--navy{background:var(--navy-deep);color:#7E93A8;border-color:rgba(245,241,232,.14);}

/* ---- Hardware grid --------------------------------------------------- */
.hw-grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));}
.hw-card{background:var(--white);border:1px solid var(--cream-deep);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);}
.hw-card .ph{border:0;border-radius:0;aspect-ratio:1/1;background:var(--cream);}
.hw-card__body{padding:22px 22px 26px;display:flex;flex-direction:column;gap:8px;}
.hw-card__tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--teal);}
.hw-card h3{margin:0;color:var(--navy);font-size:1.2rem;}
.hw-card p{margin:0;color:var(--slate);font-size:.93rem;}

/* ---- FAQ accordion --------------------------------------------------- */
.faq{display:grid;gap:0;border-top:1px solid var(--mist);max-width:820px;}
.faq__item{border-bottom:1px solid var(--mist);}
.faq__q{width:100%;background:transparent;border:0;cursor:pointer;text-align:left;
  font-family:var(--font-display);font-size:clamp(1.1rem,1.7vw,1.32rem);color:var(--navy);
  padding:24px 44px 24px 0;position:relative;display:block;line-height:1.2;}
.surface-navy .faq{border-color:rgba(245,241,232,.16);}
.surface-navy .faq__item{border-color:rgba(245,241,232,.16);}
.surface-navy .faq__q{color:var(--cream);}
.faq__q::after{content:"";position:absolute;right:6px;top:50%;width:16px;height:16px;
  margin-top:-8px;transition:transform .2s ease;
  background:var(--teal);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/16px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/16px no-repeat;}
.faq__q[aria-expanded="true"]::after{transform:rotate(45deg);}
.faq__a{max-width:68ch;color:var(--slate);padding:0 0 26px;margin:0;}
.surface-navy .faq__a{color:#C2CFDB;}
.faq__a[hidden]{display:none;}

/* ---- Form embed ------------------------------------------------------ */
.form-embed{background:var(--white);border:1px solid var(--cream-deep);border-radius:var(--radius);
  padding:14px;box-shadow:var(--shadow);min-height:560px;}
.form-embed iframe{width:100%;border:0;display:block;border-radius:var(--radius-sm);}
.form-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;min-height:520px;text-align:center;background:var(--cream);border-radius:var(--radius-sm);
  color:var(--slate);font-family:var(--font-mono);font-size:13px;padding:30px;}

/* ---- NAP block ------------------------------------------------------- */
.nap{display:grid;gap:6px;font-family:var(--font-mono);font-size:.92rem;}
.nap dt{color:var(--teal);letter-spacing:.06em;text-transform:uppercase;font-size:11px;margin-top:10px;}
.nap dd{margin:0;color:inherit;}

/* ---- Breadcrumbs ----------------------------------------------------- */
.crumbs{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--slate);
  padding-block:18px 0;}
.crumbs a{color:var(--slate);}
.crumbs a:hover{color:var(--teal-deep);}
.crumbs span[aria-current]{color:var(--navy);}

/* ---- Big CTA band ---------------------------------------------------- */
.cta-band{text-align:center;}
.cta-band .sec-head{margin-inline:auto;text-align:center;}
.cta-band .btn-row{justify-content:center;}

/* ---- Footer ---------------------------------------------------------- */
.site-footer{background:var(--navy-deep);color:var(--cream);padding-block:clamp(48px,6vw,80px) 36px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr;gap:34px;}}
.footer-col h4{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--teal);margin:0 0 16px;font-weight:500;}
.footer-col ul{list-style:none;padding:0;margin:0;display:grid;gap:9px;}
.footer-col a{color:#C2CFDB;font-size:.95rem;}
.footer-col a:hover{color:var(--white);}
.footer-blurb{color:#9FB1C2;font-size:.93rem;max-width:34ch;margin-top:18px;}
.footer-legal{border-top:1px solid rgba(245,241,232,.12);margin-top:42px;padding-top:24px;
  display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:space-between;
  font-size:.8rem;color:#7E93A8;line-height:1.6;}
.footer-legal p{margin:0;max-width:70ch;}
.footer-legal a{color:#9FB1C2;}

/* ---- Utilities ------------------------------------------------------- */
.center{text-align:center;}
.mt-s{margin-top:14px;} .mt-m{margin-top:26px;} .mt-l{margin-top:44px;}
.stack-gap > * + *{margin-top:1.1em;}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;}