/* =========================================================
   Midcove — shared stylesheet
   Deep navy fintech system with amber "beacon" accent
   ========================================================= */

:root{
  /* Core palette */
  --navy-950:#060e1e;
  --navy-900:#0B1F3A;
  --navy-800:#122c4f;
  --navy-700:#1b3b64;
  --navy-600:#2a4f7e;
  --navy-100:#dbe4f0;
  --navy-50:#f2f5fa;

  --amber-600:#c47f14;
  --amber-500:#e2a53a;
  --amber-400:#eab659;
  --amber-100:#fbeed4;

  --teal-600:#0f6f68;
  --teal-500:#158f85;
  --teal-100:#d9f0ed;

  --white:#ffffff;
  --ink:#101826;
  --ink-soft:#3d4a5e;
  --line:#e1e7f0;
  --line-soft:#edf1f7;

  --success:#1b7a4d;
  --danger:#b23b3b;

  /* Type */
  --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", ui-serif, serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Layout */
  --maxw: 1180px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-1: 0 1px 2px rgba(11,31,58,.06);
  --shadow-2: 0 8px 24px rgba(11,31,58,.10);
  --shadow-3: 0 20px 48px rgba(11,31,58,.16);
  --shadow-amber: 0 10px 28px rgba(226,165,58,.28);
  --ease: cubic-bezier(.22,.9,.35,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ margin:0; }
img, svg{ max-width:100%; display:block; }
ul, ol{ margin:0; padding:0; }
h1,h2,h3,h4,p,figure{ margin:0; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }
input, textarea, select{ font:inherit; }
table{ border-collapse:collapse; width:100%; }

body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  font-size:16px;
}

.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:-999px; top:0; z-index:1000;
  background:var(--navy-900); color:var(--white); padding:.75rem 1.25rem;
  border-radius:0 0 var(--radius-sm) 0;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:3px solid var(--amber-500); outline-offset:2px; }

::selection{ background:var(--amber-400); color:var(--navy-950); }

@media (min-width:900px){
  ::-webkit-scrollbar{ width:12px; height:12px; }
  ::-webkit-scrollbar-track{ background:var(--navy-50); }
  ::-webkit-scrollbar-thumb{ background:var(--navy-600); border-radius:999px; border:3px solid var(--navy-50); }
  ::-webkit-scrollbar-thumb:hover{ background:var(--amber-500); }
}

@keyframes rise-in{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: no-preference){
  .hero-grid > *{ animation:rise-in .7s var(--ease) both; }
  .hero-grid > *:nth-child(2){ animation-delay:.12s; }
}

/* ---------- Type scale ---------- */
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; color:var(--navy-900); line-height:1.15; letter-spacing:-.01em; }
h1{ font-size:clamp(2.1rem, 4vw + 1rem, 3.4rem); }
h2{ font-size:clamp(1.7rem, 2.4vw + 1rem, 2.4rem); }
h3{ font-size:clamp(1.25rem, 1vw + 1rem, 1.5rem); }
h4{ font-size:1.1rem; }
p{ color:var(--ink-soft); }
.lede{ font-size:1.2rem; color:var(--ink-soft); max-width:56ch; }
.eyebrow{
  display:inline-block; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  font-size:.78rem; color:var(--teal-600);
  background:var(--teal-100); padding:.35rem .75rem; border-radius:999px;
}

/* ---------- Layout helpers ---------- */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:1.25rem; }
section{ padding-block:clamp(3rem, 6vw, 5.5rem); }
.section-head{ max-width:56rem; margin-bottom:2.5rem; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head > .eyebrow{ margin-bottom:.9rem; }
.section-head > h2{ margin-top:.6rem; }
.section-head > p{ margin-top:.9rem; }

.grid{ display:grid; gap:1.5rem; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; }
}

.bg-navy{ background:var(--navy-900); color:var(--navy-100); }
.bg-navy h2, .bg-navy h3{ color:var(--white); }
.bg-navy p{ color:var(--navy-100); }
.bg-soft{ background:var(--navy-50); }
.bg-white{ background:var(--white); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem 1.5rem; border-radius:var(--radius-sm); font-weight:700;
  font-size:.98rem; border:2px solid transparent;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s ease, border-color .15s ease, color .15s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn-primary{
  background:linear-gradient(135deg, var(--amber-400), var(--amber-500));
  color:var(--navy-950); border-color:var(--amber-500); box-shadow:0 2px 8px rgba(226,165,58,.22);
}
.btn-primary:hover{ background:linear-gradient(135deg, var(--amber-400), var(--amber-600)); border-color:var(--amber-600); box-shadow:var(--shadow-amber); }
.btn-secondary{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.5); }
.btn-secondary:hover{ border-color:var(--white); background:rgba(255,255,255,.1); box-shadow:0 6px 20px rgba(0,0,0,.18); }
.btn-outline{ background:transparent; color:var(--navy-900); border-color:var(--navy-900); }
.btn-outline:hover{ background:var(--navy-900); color:var(--white); box-shadow:0 8px 20px rgba(11,31,58,.22); }
.btn-block{ width:100%; }
.btn-sm{ padding:.55rem 1.1rem; font-size:.88rem; }
.cta-row{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.94); backdrop-filter:saturate(1.2) blur(6px);
  border-bottom:1px solid var(--line);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-block:.9rem; }
.brand{ display:flex; align-items:center; gap:.55rem; font-family:var(--font-display); font-weight:700; font-size:1.35rem; color:var(--navy-900); flex-shrink:0; }
.brand .mark{ width:34px; height:34px; flex-shrink:0; }

.nav-primary{ display:flex; }
.nav-primary ul{ display:flex; list-style:none; gap:1.4rem; align-items:center; }
.nav-primary a{ font-weight:600; font-size:.95rem; color:var(--ink); padding:.4rem 0; border-bottom:2px solid transparent; }
.nav-primary a:hover{ color:var(--navy-900); border-color:var(--amber-500); }
.has-dropdown{ position:relative; }
.dropdown{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md);
  box-shadow:var(--shadow-2); padding:.6rem; min-width:250px; list-style:none;
  display:none; flex-direction:column; gap:.15rem;
}
/* No-JS baseline only: plain CSS hover/focus. Once script.js runs it adds
   .js-enhanced to <body> and this stops applying — visibility is then set
   directly via inline style.display from script.js instead (see there). */
body:not(.js-enhanced) .has-dropdown:hover .dropdown,
body:not(.js-enhanced) .has-dropdown:focus-within .dropdown{ display:flex; }
.dropdown a{ display:block; padding:.55rem .7rem; border-radius:var(--radius-sm); border:0; }
.dropdown a:hover{ background:var(--navy-50); }

/* Mega menu: a wider variant of .dropdown for Product/Integrations/Solutions/
   Resources — same show/hide mechanics (still just a .dropdown under the
   hood), laid out as flex columns instead of a single stacked list. */
.dropdown.mega{
  left:0; transform:none; flex-direction:row; align-items:stretch;
  min-width:640px; max-width:760px; padding:1.5rem; gap:0;
}
.mega-col{ flex:1 1 0; display:flex; flex-direction:column; gap:.1rem; padding-right:1.25rem; border-right:1px solid var(--line-soft); }
.mega-col:last-of-type{ border-right:0; padding-right:0; }
.mega-col + .mega-col{ padding-left:1.25rem; }
.mega-col h4{
  font-family:var(--font-body); font-size:.74rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--ink-soft); font-weight:700; padding:0 .7rem; margin-bottom:.5rem;
}
.mega-promo{
  flex:0 0 190px; margin-left:1.25rem; background:var(--navy-50); border-radius:var(--radius-sm);
  padding:1.1rem; display:flex; flex-direction:column; gap:.6rem;
}
.mega-promo h4{ font-family:var(--font-display); font-size:1rem; color:var(--navy-900); }
.mega-promo p{ font-size:.85rem; margin:0; }

.header-actions{ display:flex; align-items:center; gap:.9rem; }
.hamburger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:42px; height:42px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--white);
}
.hamburger span{ display:block; height:2px; background:var(--navy-900); border-radius:2px; }

@media (max-width:1080px){
  .nav-primary{
    position:fixed; inset:64px 0 0 0; background:var(--white); padding:1.5rem 1.25rem;
    transform:translateX(100%); transition:transform .2s ease; overflow-y:auto; z-index:150;
  }
  .nav-primary ul{ flex-direction:column; align-items:stretch; gap:0; }
  .nav-primary a{ display:block; padding:.9rem .2rem; border-bottom:1px solid var(--line-soft); }
  /* Collapsed by default (inherits display:none from the base .dropdown rule).
     No-JS fallback: tapping a trigger focuses it, revealing the submenu.
     JS-enhanced: script.js sets inline style.display directly instead. */
  .dropdown{ position:static; transform:none; box-shadow:none; border:0; padding-left:1rem; }
  body:not(.js-enhanced) .has-dropdown:focus-within .dropdown{ display:flex; }
  .dropdown.mega{ flex-direction:column; min-width:0; max-width:none; padding:0; }
  .mega-col{ border-right:0; border-left:0; padding:.5rem 0; }
  .mega-col + .mega-col{ padding-left:0; border-top:1px solid var(--line-soft); }
  .mega-promo{ margin-left:0; margin-top:.5rem; }
  body.nav-open .nav-primary{ transform:translateX(0); }
  .hamburger{ display:flex; }
  .header-actions .btn-primary{ padding:.6rem 1rem; font-size:.88rem; }
}
@media (max-width:480px){
  .header-actions .btn-outline{ display:none; }
}

/* ---------- Footer ---------- */
.site-footer{
  position:relative; background:linear-gradient(180deg, var(--navy-950), #030812); color:var(--navy-100); padding-block:3.5rem 1.75rem;
}
.site-footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--teal-500), var(--amber-500), var(--teal-500));
}
.footer-grid{ display:grid; grid-template-columns:1.2fr repeat(5, 1fr); gap:2rem; }
.footer-brand .brand{ color:var(--white); }
.footer-brand p{ color:#93a3bd; margin-top:.9rem; max-width:30ch; }
.footer-col h4{ color:var(--white); font-family:var(--font-body); font-size:.85rem; text-transform:uppercase; letter-spacing:.07em; margin-bottom:1rem; }
.footer-col ul{ list-style:none; display:flex; flex-direction:column; gap:.65rem; }
.footer-col a{ color:#b7c3d9; font-size:.94rem; }
.footer-col a:hover{ color:var(--amber-400); }
.footer-bottom{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; margin-top:3rem; padding-top:1.75rem; border-top:1px solid rgba(255,255,255,.1); color:#7d8caa; font-size:.85rem; }
.footer-bottom .badges{ display:flex; gap:.75rem; flex-wrap:wrap; }
.footer-bottom .badges span{ border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:.3rem .8rem; font-size:.78rem; }
@media (max-width:1080px){
  .footer-grid{ grid-template-columns:repeat(3,1fr); }
  .footer-brand{ grid-column:1 / -1; }
}
@media (max-width:640px){
  .footer-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:420px){
  .footer-grid{ grid-template-columns:1fr; }
}

/* ---------- Hero / cove motif ---------- */
.hero{
  position:relative; color:var(--white); overflow:hidden; padding-block:clamp(3.5rem, 8vw, 6.5rem) clamp(2.5rem, 6vw, 4rem);
  background:
    radial-gradient(760px 420px at 88% -10%, rgba(21,143,133,.30), transparent 60%),
    radial-gradient(620px 380px at 8% 110%, rgba(226,165,58,.16), transparent 60%),
    linear-gradient(180deg, var(--navy-900), var(--navy-950));
}
.hero::before{
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:26px 26px; mask-image:linear-gradient(180deg, rgba(0,0,0,.6), transparent 70%);
}
.hero-grid{ position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center; }
.hero h1{ color:var(--white); }
.hero .lede{ color:var(--navy-100); margin-top:1.2rem; }
.hero .cta-row{ margin-top:2rem; }
.hero .eyebrow{ background:rgba(21,143,133,.25); color:var(--teal-100); }
@media (max-width:920px){ .hero-grid{ grid-template-columns:1fr; } }

.cove-art{ position:relative; }
.cove-caption{ text-align:center; font-size:.82rem; color:var(--navy-100); margin-top:.75rem; opacity:.75; }
@keyframes dot-pulse{
  0%, 100%{ opacity:1; }
  50%{ opacity:.35; }
}

/* ---------- Hero dashboard mockup ---------- */
.mock-wrap{ position:relative; width:100%; max-width:380px; margin-inline:auto; padding:1.5rem 0; }
.mock-glow{ position:absolute; width:220px; height:220px; border-radius:50%; filter:blur(46px); opacity:.5; z-index:0; }
.mock-glow-teal{ background:var(--teal-500); top:-30px; left:-40px; }
.mock-glow-amber{ background:var(--amber-500); bottom:-30px; right:-30px; }

.dash-card{
  position:relative; z-index:1; background:linear-gradient(160deg, var(--navy-800), var(--navy-950));
  border:1px solid var(--navy-700); border-radius:14px; padding:1.1rem 1.15rem 1.25rem;
  box-shadow:0 24px 48px -16px rgba(0,0,0,.5);
  transform:perspective(900px) rotateY(-5deg) rotateX(2deg);
}
@media (prefers-reduced-motion: no-preference){ .dash-card{ transition:transform .4s ease; } }
.dash-card:hover{ transform:perspective(900px) rotateY(0deg) rotateX(0deg); }

.dash-gateways{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.9rem; }
.dash-pill{
  display:inline-flex; align-items:center; gap:.35rem; font-size:.68rem; font-weight:600; color:var(--navy-100);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:.28rem .55rem .28rem .45rem;
}
.dash-dot{ width:6px; height:6px; border-radius:50%; background:#2fd3a8; display:inline-block; flex-shrink:0; }
@media (prefers-reduced-motion: no-preference){
  .dash-dot-live{ transform-box:fill-box; transform-origin:center; animation:dot-pulse 1.8s ease-in-out infinite; }
}
.dash-head{
  display:flex; align-items:center; justify-content:space-between; font-size:.72rem; font-weight:700;
  color:#a8b4c6; text-transform:uppercase; letter-spacing:.05em; padding-bottom:.55rem; border-bottom:1px solid rgba(255,255,255,.08);
}
.dash-live{ display:inline-flex; align-items:center; gap:.35rem; color:#8fe3d3; text-transform:none; letter-spacing:0; font-weight:600; }
.dash-rows{ display:flex; flex-direction:column; }
.dash-row{
  display:grid; grid-template-columns:1fr auto auto; gap:.6rem; align-items:center;
  padding:.6rem 0; border-bottom:1px solid rgba(255,255,255,.06); font-size:.8rem;
}
.dash-type{ color:var(--navy-100); font-weight:600; }
.dash-amount{ color:var(--white); font-variant-numeric:tabular-nums; font-weight:600; }
.dash-status{ font-size:.66rem; font-weight:700; padding:.22rem .5rem; border-radius:999px; white-space:nowrap; }
.dash-status-ok{ background:rgba(21,143,133,.28); color:#8fe3d3; }
.dash-status-pending{ background:rgba(226,165,58,.24); color:#f0c987; }
.dash-alert, .dash-shield{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem; font-size:.76rem; font-weight:600;
  border-radius:8px; padding:.55rem .65rem; margin-top:.6rem;
}
.dash-alert{ background:rgba(226,165,58,.14); color:#f0c987; border:1px solid rgba(226,165,58,.28); }
.dash-shield{ background:rgba(21,143,133,.12); color:#a8ece5; border:1px solid rgba(21,143,133,.26); }
.dash-alert svg, .dash-shield svg{ width:14px; height:14px; flex-shrink:0; }
.dash-alert .left, .dash-shield .left{ display:flex; align-items:center; gap:.45rem; }
.dash-chart{ margin-top:.85rem; display:flex; align-items:flex-end; gap:4px; height:34px; }
.dash-bar{ flex:1; background:linear-gradient(180deg, var(--amber-500), var(--teal-500)); border-radius:2px 2px 0 0; opacity:.85; }

/* Gateway badge strip */
.gateway-strip{ padding-block:2rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--navy-50); }
.gateway-strip .wrap{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1.5rem 2.5rem; }
.gateway-strip .label{ font-size:.82rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
.gateway-badge{
  font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--navy-800);
  border:1.5px solid var(--line); background:var(--white); padding:.6rem 1.2rem; border-radius:var(--radius-sm);
  letter-spacing:.02em; transition:transform .18s var(--ease), border-color .18s ease, box-shadow .18s var(--ease);
}
.gateway-badge:hover{ transform:translateY(-2px); border-color:var(--teal-500); box-shadow:var(--shadow-1); }

/* ---------- Steps ---------- */
.steps{ counter-reset:step; display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.step{
  position:relative; padding:2rem 1.5rem 1.5rem; border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--white); transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s ease;
}
.step:hover{ transform:translateY(-4px); box-shadow:var(--shadow-2); border-color:var(--line); }
.step-num{
  display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%;
  background:linear-gradient(135deg, var(--navy-800), var(--navy-950)); color:var(--amber-400);
  font-family:var(--font-display); font-weight:700; font-size:1.3rem; margin-bottom:1.1rem;
  box-shadow:0 6px 16px rgba(11,31,58,.25);
}
@media (max-width:900px){ .steps{ grid-template-columns:1fr; } }

/* ---------- Cards / features ---------- */
.card{
  position:relative; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--white);
  padding:1.9rem; overflow:hidden;
  transition:transform .2s var(--ease), border-color .2s ease, box-shadow .2s var(--ease);
}
.card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px; transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg, var(--teal-500), var(--amber-500)); transition:transform .25s var(--ease);
}
.card:hover{ border-color:var(--navy-600); box-shadow:var(--shadow-3); transform:translateY(-5px); }
.card:hover::before{ transform:scaleX(1); }
.icon-badge{
  display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px;
  border-radius:var(--radius-md); background:linear-gradient(135deg, var(--navy-50), var(--teal-100)); color:var(--navy-800);
  margin-bottom:1.1rem; transition:transform .2s var(--ease), background .2s ease, color .2s ease;
}
.icon-badge svg{ width:26px; height:26px; }
.card:hover .icon-badge{ background:linear-gradient(135deg, var(--navy-900), var(--teal-600)); color:var(--white); transform:scale(1.08) rotate(-4deg); }
.card h3{ margin-bottom:.6rem; }
.card p{ font-size:.96rem; }
.card .card-link{ display:inline-flex; align-items:center; gap:.35rem; margin-top:1rem; font-weight:700; font-size:.92rem; color:var(--teal-600); transition:gap .2s ease; }
.card .card-link svg{ width:16px; height:16px; transition:transform .2s var(--ease); }
.card:hover .card-link{ gap:.55rem; }
.card:hover .card-link svg{ transform:translateX(2px); }

/* ---------- Trust / security ---------- */
.trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.trust-item{ text-align:center; padding:1.5rem 1rem; border-radius:var(--radius-lg); transition:transform .2s var(--ease), background .2s ease; }
.trust-item:hover{ transform:translateY(-3px); background:rgba(255,255,255,.03); }
.trust-item .icon-badge{ margin-inline:auto; background:linear-gradient(135deg, var(--teal-100), var(--white)); color:var(--teal-600); }
@media (max-width:900px){ .trust-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- Why Merchants Choose Us (glass card list + social proof) ---------- */
.trust-glass{
  position:relative; overflow:hidden; color:var(--white);
  background:
    radial-gradient(560px 340px at 12% 0%, rgba(226,165,58,.22), transparent 60%),
    radial-gradient(700px 420px at 92% 100%, rgba(21,143,133,.2), transparent 60%),
    linear-gradient(180deg, var(--navy-900), var(--navy-950));
}
.trust-glass::before{
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:28px 28px; mask-image:radial-gradient(circle at 18% 8%, black, transparent 70%);
}
.trust-glass .wrap{ position:relative; z-index:1; }

.glass-list{ max-width:38rem; margin:2.75rem auto 0; display:flex; flex-direction:column; gap:1.1rem; }
.glass-card{
  display:flex; gap:1.1rem; align-items:flex-start; padding:1.4rem 1.5rem; border-radius:var(--radius-lg);
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(14px);
  transition:transform .2s var(--ease), background .2s ease, border-color .2s ease;
}
.glass-card:hover{ transform:translateY(-3px); background:rgba(255,255,255,.07); border-color:rgba(226,165,58,.35); }
.glass-icon{
  flex-shrink:0; width:46px; height:46px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(226,165,58,.28), rgba(21,143,133,.22)); border:1px solid rgba(255,255,255,.14); color:var(--amber-400);
}
.glass-icon svg{ width:22px; height:22px; }
.glass-card h3{ color:var(--white); font-size:1.05rem; margin-bottom:.35rem; }
.glass-card p{ color:var(--navy-100); font-size:.92rem; margin:0; }

.glass-tagline{
  text-align:center; font-family:var(--font-display); font-size:1.3rem; color:var(--amber-400);
  margin:3rem auto 0; letter-spacing:.01em; text-wrap:balance;
}

.glass-proof{ display:flex; align-items:center; justify-content:center; gap:1.1rem; flex-wrap:wrap; margin:1.75rem auto 0; }
.avatar-stack{ display:flex; }
.avatar-stack span{
  width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:.76rem; font-weight:700; color:var(--navy-950); border:2px solid var(--navy-900); margin-left:-10px;
}
.avatar-stack span:first-child{ margin-left:0; }
.glass-proof-text{ text-align:left; }
.glass-proof-text strong{ display:block; color:var(--white); font-family:var(--font-display); font-size:1.05rem; }
.glass-proof-text span{ color:var(--navy-100); font-size:.85rem; }
@media (max-width:560px){
  .glass-proof{ flex-direction:column; text-align:center; }
  .glass-proof-text{ text-align:center; }
}

/* ---------- Testimonial ---------- */
.testimonial{
  position:relative; border:1px solid var(--line); border-radius:var(--radius-lg); padding:2.75rem 2.5rem;
  background:linear-gradient(160deg, var(--white), var(--navy-50)); max-width:46rem; margin-inline:auto; text-align:center;
  box-shadow:var(--shadow-2);
}
.testimonial::before{
  content:"\201C"; position:absolute; top:.5rem; left:1.5rem; font-family:var(--font-display); font-size:5rem;
  color:var(--amber-100); line-height:1; z-index:0;
}
.testimonial blockquote{ position:relative; font-family:var(--font-display); font-size:1.35rem; color:var(--navy-900); margin:0 0 1.25rem; line-height:1.5; }
.testimonial cite{ font-style:normal; font-weight:700; color:var(--ink); display:block; }
.testimonial .role{ color:var(--ink-soft); font-size:.9rem; }

/* ---------- CTA band ---------- */
.cta-band{
  position:relative; overflow:hidden; color:var(--white); text-align:center;
  background:
    radial-gradient(600px 300px at 15% 0%, rgba(226,165,58,.14), transparent 60%),
    radial-gradient(600px 300px at 85% 100%, rgba(21,143,133,.22), transparent 60%),
    linear-gradient(135deg, var(--navy-900), var(--navy-800));
}
.cta-band h2{ color:var(--white); }
.cta-band p{ color:var(--navy-100); margin-top:.75rem; }
.cta-band .cta-row{ justify-content:center; margin-top:1.75rem; }

/* ---------- Page header (inner pages) ---------- */
.page-hero{
  position:relative; overflow:hidden; color:var(--white); padding-block:2.75rem 3.25rem;
  background:
    radial-gradient(560px 280px at 90% 0%, rgba(21,143,133,.24), transparent 60%),
    linear-gradient(160deg, var(--navy-900), var(--navy-950));
}
.page-hero h1{ color:var(--white); max-width:42rem; }
.page-hero p{ color:var(--navy-100); max-width:52ch; margin-top:1rem; }
.breadcrumb{ list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; font-size:.85rem; color:var(--navy-100); margin-bottom:1.25rem; }
.breadcrumb li:not(:last-child)::after{ content:"/"; margin-left:.4rem; color:#5a6f92; }
.breadcrumb a{ color:var(--navy-100); }
.breadcrumb a:hover{ color:var(--amber-400); }
.breadcrumb li:last-child{ color:#8b9bbb; }

/* ---------- Two column feature layout ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; } }
.check-list{ list-style:none; display:flex; flex-direction:column; gap:.9rem; }
.check-list li{ display:flex; gap:.75rem; align-items:flex-start; color:var(--ink-soft); }
.check-list svg{ flex-shrink:0; width:22px; height:22px; color:var(--teal-600); margin-top:.1rem; }
.panel{ border:1px solid var(--line); border-radius:var(--radius-lg); padding:2rem; background:var(--navy-50); }
.panel-dark{
  background:linear-gradient(160deg, var(--navy-800), var(--navy-950)); color:var(--navy-100);
  border-color:var(--navy-800); box-shadow:var(--shadow-2);
}
.panel-dark h3, .panel-dark h4{ color:var(--white); }

/* ---------- FAQ accordion ---------- */
.faq-list{ max-width:52rem; margin-inline:auto; display:flex; flex-direction:column; gap:.85rem; }
.faq-item{ border:1px solid var(--line); border-radius:var(--radius-md); background:var(--white); overflow:hidden; transition:border-color .2s ease, box-shadow .2s ease; }
.faq-item:hover{ border-color:var(--navy-600); }
.faq-item[open]{ box-shadow:var(--shadow-1); }
.faq-question{
  width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.1rem 1.4rem; background:none; border:0; font-weight:700; font-size:1rem; color:var(--navy-900);
  transition:background .15s ease;
}
.faq-question:hover{ background:var(--navy-50); }
.faq-question .plus{ flex-shrink:0; width:22px; height:22px; position:relative; }
.faq-question .plus::before, .faq-question .plus::after{
  content:""; position:absolute; background:var(--navy-800); border-radius:2px; transition:transform .2s ease;
}
.faq-question .plus::before{ width:14px; height:2px; top:10px; left:4px; }
.faq-question .plus::after{ width:2px; height:14px; top:4px; left:10px; }
.faq-item[open] .plus::after{ transform:rotate(90deg); opacity:0; }
.faq-item[open] .faq-question{ border-bottom:1px solid var(--line); }
.faq-answer{ padding:0 1.4rem 1.3rem; }
.faq-answer p{ margin:0; }
/* progressive enhancement: use native <details> for no-JS baseline */
summary::-webkit-details-marker{ display:none; }
summary{ list-style:none; cursor:pointer; }

/* ---------- Pricing ---------- */
.pricing-toggle{ display:flex; align-items:center; justify-content:center; gap:.9rem; margin:0 auto 2.5rem; }
.switch{ position:relative; width:52px; height:28px; background:var(--navy-700); border-radius:999px; border:0; flex-shrink:0; }
.switch::after{ content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:var(--white); transition:transform .18s ease; }
.switch[aria-checked="true"]{ background:var(--teal-600); }
.switch[aria-checked="true"]::after{ transform:translateX(24px); }
.save-badge{ background:var(--amber-100); color:var(--amber-600); font-size:.78rem; font-weight:700; padding:.25rem .6rem; border-radius:999px; }

.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem; align-items:stretch; }
@media (max-width:900px){ .pricing-grid{ grid-template-columns:1fr; } }
.plan{ border:1px solid var(--line); border-radius:var(--radius-lg); padding:2.25rem; display:flex; flex-direction:column; background:var(--white); transition:transform .2s var(--ease), box-shadow .2s var(--ease); }
.plan:hover{ transform:translateY(-4px); box-shadow:var(--shadow-2); }
.plan-featured{ border:2px solid var(--navy-900); box-shadow:var(--shadow-3); position:relative; }
.plan-featured:hover{ box-shadow:0 26px 56px rgba(11,31,58,.22); }
.plan-badge{ position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--amber-500); color:var(--navy-950); font-size:.75rem; font-weight:700; padding:.35rem .9rem; border-radius:999px; }
.plan-price{ display:flex; align-items:baseline; gap:.35rem; margin:1.1rem 0 .25rem; }
.plan-price .amount{ font-family:var(--font-display); font-size:2.6rem; font-weight:700; color:var(--navy-900); }
.plan-price .period{ color:var(--ink-soft); font-size:.95rem; }
.plan .desc{ font-size:.92rem; margin-bottom:.5rem; }
.plan .check-list{ margin:1.6rem 0; flex-grow:1; }
.plan .check-list li{ font-size:.92rem; }
.annual-only{ display:none; }
body.annual .monthly-only{ display:none; }
body.annual .annual-only{ display:inline; }

/* ---------- Flow diagram (gateway <-> Midcove <-> same gateway) ---------- */
.flow-card{ max-width:600px; width:100%; margin-inline:auto; filter:drop-shadow(0 24px 48px rgba(11,31,58,.30)); }
.flow-card svg{ width:100%; height:auto; display:block; }
.flow-note{ max-width:34rem; margin:1.25rem auto 0; text-align:center; font-size:.88rem; color:var(--ink-soft); }
@keyframes flow-dash{ to{ stroke-dashoffset:-24; } }
@media (prefers-reduced-motion: no-preference){
  .flow-line{ animation:flow-dash 1.4s linear infinite; }
  .flow-pulse{ transform-box:fill-box; transform-origin:center; animation:dot-pulse 2.2s ease-in-out infinite; }
}

.compare-table{ width:100%; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; }
.compare-table th, .compare-table td{ padding:.9rem 1.1rem; text-align:left; border-bottom:1px solid var(--line-soft); font-size:.92rem; }
.compare-table thead th{ background:var(--navy-50); font-family:var(--font-display); color:var(--navy-900); }
.compare-table tbody tr:last-child td{ border-bottom:0; }
.compare-table td:not(:first-child), .compare-table th:not(:first-child){ text-align:center; }
.compare-table .yes{ color:var(--teal-600); }
.compare-table .no{ color:#b9c2d1; }
.table-scroll{ overflow-x:auto; }

/* ---------- Code blocks ---------- */
pre{
  background:var(--navy-950); color:#d8e3f7; border-radius:var(--radius-md); padding:1.4rem 1.6rem;
  overflow-x:auto; font-size:.86rem; line-height:1.65; border:1px solid var(--navy-800);
}
code{ font-family:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; }
.card code, p code, li code{ background:var(--navy-50); color:var(--navy-800); padding:.15rem .4rem; border-radius:4px; font-size:.88em; }
.code-label{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.6rem; }
.code-label span{ font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); }

/* ---------- Integration setup steps ---------- */
.setup-steps{ list-style:none; counter-reset:setup; display:flex; flex-direction:column; gap:1.5rem; }
.setup-steps li{ display:flex; gap:1.25rem; counter-increment:setup; }
.setup-steps li::before{
  content:counter(setup); flex-shrink:0; width:38px; height:38px; border-radius:50%; background:var(--navy-900);
  color:var(--amber-400); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700;
}

/* ---------- Contact / forms (visual only) ---------- */
.form-grid{ display:grid; gap:1.2rem; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
@media (max-width:640px){ .form-row{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field label{ font-weight:600; font-size:.9rem; color:var(--navy-900); }
.field input, .field select, .field textarea{
  border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:.75rem .9rem; background:var(--white); color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--navy-600); }
.contact-info{ display:flex; flex-direction:column; gap:1.5rem; }
.contact-info .item{ display:flex; gap:1rem; }
.contact-info .icon-badge{ margin-bottom:0; flex-shrink:0; }

/* ---------- Misc content pages (legal) ---------- */
.prose{ max-width:70ch; margin-inline:auto; }
.prose h2{ margin-top:2.2rem; margin-bottom:.8rem; }
.prose h2:first-child{ margin-top:0; }
.prose p, .prose li{ color:var(--ink-soft); margin-bottom:.9rem; }
.prose ul, .prose ol{ padding-left:1.4rem; margin-bottom:.9rem; }
.placeholder-flag{ display:inline-block; background:var(--amber-100); color:var(--amber-600); font-weight:700; font-size:.75rem; padding:.2rem .55rem; border-radius:4px; margin-right:.4rem; }
.updated-line{ color:var(--ink-soft); font-size:.9rem; margin-bottom:2rem; }

/* ---------- Utility ---------- */
.mt-0{ margin-top:0 !important; }
.text-center{ text-align:center; }
.tag-row{ display:flex; flex-wrap:wrap; gap:.6rem; }
.tag{ display:inline-block; border:1px solid var(--line); border-radius:999px; padding:.35rem .85rem; font-size:.82rem; font-weight:600; color:var(--ink-soft); transition:border-color .18s ease, color .18s ease, background .18s ease; }
a.tag:hover{ border-color:var(--teal-500); color:var(--teal-600); background:var(--teal-100); }