/* =============================================================================
 * /assets/css/site.css
 * SnappyPay Systems — every line annotated
 *
 * Sections:
 *   01. DESIGN TOKENS         — colors, fonts, sizes (single source of truth)
 *   02. GLOBAL RESETS         — strip browser defaults
 *   03. TYPOGRAPHY            — headings, paragraphs, links
 *   04. LAYOUT CONTAINERS     — page widths, section spacing
 *   05. SITE HEADER & NAV     — top bar and menu
 *   06. BUTTONS               — primary, outline, ghost
 *   07. HERO BANNERS          — homepage + inner-page heroes
 *   08. SECTION HEADERS       — eyebrow + title + intro
 *   09. GRIDS                 — 2/3/4 column responsive grids
 *   10. CARDS & STEPS         — content boxes
 *   11. CALLOUTS              — highlighted info boxes
 *   12. TABLES & DESCRIPTOR   — fact tables + descriptor pill
 *   13. LEGAL / POLICY PAGES  — policy text styling
 *   14. SITE FOOTER           — footer columns + disclosure band
 *   15. DIAGRAMS & ICON ROWS  — SVG wrappers + icon+text blocks
 *   16. CTA BAND              — standard call-to-action stripe
 *   17. FORMS                 — contact form fields
 *   18. UTILITIES             — helper classes
 *   19. PREMIUM HOMEPAGE      — hero illustration, stats, audience cards
 * ===========================================================================*/


/* =============================================================================
 * 01. DESIGN TOKENS — change a value here, the whole site updates
 * ===========================================================================*/
:root {
  --navy-900: #1e1b4b;                                /* footer background */
  --navy-800: #4c1d95;                                /* primary buttons */
  --navy-700: #5b21b6;                                /* button hover */
  --navy-600: #6d28d9;                                /* deeper violet accent */

  --slate-700: #3f3f52;                               /* body text */
  --slate-600: #55556b;                               /* secondary text */
  --slate-500: #71718c;                               /* muted text */
  --slate-400: #a1a1b8;                               /* footer secondary */
  --slate-300: #d3d3e0;                               /* light borders */
  --slate-200: #e6e6f0;                               /* default borders */
  --slate-100: #f3f2f9;                               /* code background */
  --slate-50:  #faf9fd;                               /* alt sections */

  --white: #ffffff;                                   /* pure white */

  --accent:      #0891b2;                             /* teal links */
  --accent-soft: #e0f7fb;                             /* icon backgrounds */

  --ink-strong: #1e1b4b;                              /* darkest text */
  --ink-body:   #3f3f52;                              /* body text */
  --ink-muted:  #71718c;                              /* muted text */

  --border:        #e6e6f0;                           /* default border */
  --border-strong: #d3d3e0;                           /* hover border */

  --shadow-sm: 0 1px 2px rgba(76, 29, 149, 0.05);      /* light shadow */
  --shadow-md: 0 4px 16px rgba(76, 29, 149, 0.07);     /* medium shadow */
  --shadow-lg: 0 16px 40px rgba(76, 29, 149, 0.10);    /* heavy shadow */

  --radius-sm: 6px;                                   /* small radius */
  --radius-md: 10px;                                   /* default radius */
  --radius-lg: 16px;                                  /* card radius */

  --serif: 'Manrope', 'Inter', -apple-system, 'Segoe UI', sans-serif; /* headings */
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
           'Helvetica Neue', Arial, sans-serif;       /* body text font */

  --container: 1180px;                                /* max content width */
  --gutter:    32px;                                  /* horizontal padding */
}


/* =============================================================================
 * 02. GLOBAL RESETS
 * ===========================================================================*/
* {
  box-sizing: border-box;                             /* predictable sizing */
}

html, body {
  margin: 0;                                          /* no body margin */
  padding: 0;                                         /* no body padding */
}

body {
  font-family: var(--sans);                           /* default font */
  color: var(--ink-body);                             /* default text color */
  font-size: 16px;                                    /* base font size */
  line-height: 1.65;                                  /* readable spacing */
  background: var(--white);                           /* page background */
  -webkit-font-smoothing: antialiased;                /* smoother text webkit */
  -moz-osx-font-smoothing: grayscale;                 /* smoother text firefox */
}


/* =============================================================================
 * 03. TYPOGRAPHY
 * ===========================================================================*/
h1, h2, h3, h4, h5 {
  font-family: var(--serif);                          /* serif headings */
  color: var(--ink-strong);                           /* dark heading color */
  font-weight: 600;                                   /* semibold weight */
  line-height: 1.2;                                   /* tight heading lines */
  margin: 0 0 0.6em;                                  /* bottom margin only */
  letter-spacing: -0.02em;                            /* slight tightening */
}

h1 { font-size: 2.75rem; font-weight: 600; }          /* main page title */
h2 { font-size: 1.55rem; }                               /* section title */
h3 { font-size: 1.4rem; }                             /* card title */

h4 {
  font-size: 1.15rem;                                 /* small subhead size */
  font-family: var(--sans);                           /* sans for labels */
  font-weight: 600;                                   /* bold label */
  letter-spacing: 0.01em;                             /* normal spacing */
}

h5 {
  font-size: 0.85rem;                                 /* tiny label size */
  font-family: var(--sans);                           /* sans for labels */
  font-weight: 600;                                   /* bold tiny label */
  letter-spacing: 0.08em;                             /* spaced label */
  text-transform: uppercase;                          /* uppercase label */
  color: var(--slate-500);                            /* muted label color */
}

p {
  margin: 0 0 1.15em;                                 /* paragraph spacing */
}

p.lead {
  font-size: 1.15rem;                                 /* larger intro text */
  color: var(--slate-600);                            /* slightly muted */
  line-height: 1.55;                                  /* tighter for size */
}

a {
  color: var(--accent);                               /* blue link color */
  text-decoration: none;                              /* no underline default */
}
a:hover {
  text-decoration: underline;                         /* underline on hover */
}

strong {
  color: var(--ink-strong);                           /* darker for emphasis */
  font-weight: 600;                                   /* semibold emphasis */
}

ul, ol {
  margin: 0 0 1.15em;                                 /* list spacing */
  padding-left: 1.5em;                                /* bullet indent */
}
li {
  margin-bottom: 0.4em;                               /* space between items */
}

hr {
  border: none;                                       /* remove default rule */
  border-top: 1px solid var(--border);                /* subtle divider line */
  margin: 3rem 0;                                     /* vertical spacing */
}

code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;  /* mono font */
  font-size: 0.92em;                                  /* slightly smaller */
  background: var(--slate-100);                       /* light background */
  padding: 1px 6px;                                   /* small padding */
  border-radius: 3px;                                 /* rounded corners */
  color: var(--navy-800);                             /* navy text */
}


/* =============================================================================
 * 04. LAYOUT CONTAINERS
 * ===========================================================================*/
.container {
  max-width: var(--container);                        /* cap content width */
  margin: 0 auto;                                     /* center horizontally */
  padding: 0 var(--gutter);                           /* side padding */
}

.container-narrow {
  max-width: 820px;                                   /* narrower for legal */
  margin: 0 auto;                                     /* center horizontally */
  padding: 0 var(--gutter);                           /* side padding */
}

section          { padding: 3.6rem 0 3rem; }                  /* top ~15mm, bottom ~12mm */
section.tight    { padding: 3.5rem 0; }               /* tighter variant */
section.alt      { background: var(--slate-100); padding: 2.5rem 0 1rem; }  /* zebra band: tighter bottom to close visual gap */
section.dark     { background: var(--navy-900); color: var(--slate-300); }  /* dark variant */
section.dark h1,
section.dark h2,
section.dark h3,
section.dark h4  { color: var(--white); }             /* white text on dark */
section.dark a   { color: var(--slate-300); }         /* light links on dark */


/* =============================================================================
 * 05. SITE HEADER & PRIMARY NAVIGATION
 * ===========================================================================*/
.site-header {
  background: var(--white);                           /* white header bg */
  border-bottom: 1px solid var(--border);             /* divider line */
  position: sticky;                                   /* stays on scroll */
  top: 0;                                             /* stick to top */
  z-index: 100;                                       /* above other content */
}

.site-header .container {
  display: flex;                                      /* horizontal layout */
  align-items: center;                                /* vertical center */
  justify-content: space-between;                     /* logo left nav right */
  padding-top: 16px;                                  /* top padding */
  padding-bottom: 16px;                               /* bottom padding */
}

.brand {
  display: flex;                                      /* logo + text side by side */
  align-items: center;                                /* vertical center */
  gap: 12px;                                          /* space between */
  text-decoration: none;                              /* no underline */
}
.brand img {
  height: 46px;                                       /* wordmark height (6.74:1) */
  width: auto;                                        /* preserve ratio */
  display: block;                                     /* remove inline gap */
}
/* .brand-text is no longer rendered - the v3 SVG lockup includes the
   wordmark. Rules kept in case a text variant is reintroduced. */
.brand .brand-text {
  font-family: var(--serif);                          /* serif brand text */
  font-weight: 600;                                   /* semibold */
  font-size: 1.15rem;                                 /* readable size */
  color: var(--ink-strong);                           /* dark text */
  letter-spacing: -0.02em;                            /* slight tightening */
}
.brand:hover {
  text-decoration: none;                              /* no underline hover */
}
.brand:hover .brand-text {
  color: var(--navy-700);                             /* darker on hover */
}

.primary-nav {
  display: flex;                                      /* horizontal nav */
  align-items: center;                                /* vertical center */
  gap: 2rem;                                          /* space between links */
}
.primary-nav a {
  font-size: 0.93rem;                                 /* nav link size */
  color: var(--slate-700);                            /* muted link color */
  font-weight: 500;                                   /* medium weight */
  text-decoration: none;                              /* no underline */
  letter-spacing: 0.01em;                             /* normal spacing */
  transition: color 0.15s;                            /* smooth color change */
}
.primary-nav a:hover {
  color: var(--navy-800);                             /* darker on hover */
  text-decoration: none;                              /* no underline */
}
.primary-nav a.active {
  color: var(--navy-800);                             /* dark active link */
  border-bottom: 2px solid var(--accent);             /* underline current */
  padding-bottom: 4px;                                /* room for underline */
}


/* =============================================================================
 * 06. BUTTONS
 * ===========================================================================*/
.btn {
  display: inline-block;                              /* button rendering */
  padding: 12px 26px;                                 /* internal spacing */
  font-family: var(--sans);                           /* sans font */
  font-size: 0.95rem;                                 /* readable size */
  font-weight: 500;                                   /* medium weight */
  border-radius: var(--radius-md);                    /* rounded corners */
  border: 1px solid transparent;                      /* invisible border */
  cursor: pointer;                                    /* pointer cursor */
  text-decoration: none;                              /* no underline */
  transition: all 0.15s;                              /* smooth hover */
  letter-spacing: 0.01em;                             /* normal spacing */
}

.btn-primary {
  background: var(--navy-800);                        /* solid navy bg */
  color: var(--white);                                /* white text */
  border-color: var(--navy-800);                      /* matching border */
}
.btn-primary:hover {
  background: var(--navy-700);                        /* lighter on hover */
  border-color: var(--navy-700);                      /* matching border */
  text-decoration: none;                              /* no underline */
}

.btn-outline {
  background: transparent;                            /* see-through bg */
  color: var(--navy-800);                             /* navy text */
  border-color: var(--border-strong);                 /* visible border */
}
.btn-outline:hover {
  border-color: var(--navy-800);                      /* darker border hover */
  text-decoration: none;                              /* no underline */
}

.btn-ghost {
  background: transparent;                            /* no background */
  color: var(--navy-800);                             /* navy text */
  padding: 12px 0;                                    /* no side padding */
}
.btn-ghost:hover {
  color: var(--accent);                               /* blue on hover */
  text-decoration: none;                              /* no underline */
}

.btn-group {
  display: flex;                                      /* side by side */
  gap: 14px;                                          /* space between */
  flex-wrap: wrap;                                    /* wrap if needed */
}


/* =============================================================================
 * 07. HERO BANNERS
 * ===========================================================================*/
.hero {
  padding: 7rem 0 5.5rem;                             /* large hero padding */
  background: linear-gradient(180deg, var(--slate-50) 0%, var(--white) 100%);  /* soft gradient */
  border-bottom: 1px solid var(--border);             /* divider line */
}
.hero h1 {
  font-size: 3.25rem;                                 /* huge hero title */
  margin-bottom: 0.5em;                               /* space below */
  max-width: 820px;                                   /* cap line width */
}
.hero .eyebrow {
  display: inline-block;                              /* sit inline */
  font-family: var(--sans);                           /* sans for label */
  font-size: 0.78rem;                                 /* tiny label */
  letter-spacing: 0.12em;                             /* spaced letters */
  text-transform: uppercase;                          /* uppercase label */
  color: var(--accent);                               /* blue accent */
  font-weight: 600;                                   /* bold label */
  margin-bottom: 1.2rem;                              /* space below */
}
.hero p.lead {
  font-size: 1.2rem;                                  /* larger intro */
  max-width: 680px;                                   /* readable width */
  color: var(--slate-600);                            /* slightly muted */
  margin-bottom: 2rem;                                /* space below */
}

.hero-inner-stat {
  display: flex;                                      /* row of stats */
  gap: 3rem;                                          /* space between */
  margin-top: 3rem;                                   /* space above */
  padding-top: 2rem;                                  /* internal top pad */
  border-top: 1px solid var(--border);                /* divider line */
  max-width: 760px;                                   /* cap stat row width */
  flex-wrap: wrap;                                    /* wrap on mobile */
}
.hero-inner-stat div {
  flex: 1;                                            /* equal column width */
  min-width: 180px;                                   /* min before wrap */
}
.hero-inner-stat .label {
  font-size: 0.78rem;                                 /* tiny stat label */
  letter-spacing: 0.08em;                             /* spaced letters */
  text-transform: uppercase;                          /* uppercase label */
  color: var(--slate-500);                            /* muted color */
  margin-bottom: 0.4rem;                              /* small gap */
  font-weight: 600;                                   /* bold label */
}
.hero-inner-stat .value {
  font-family: var(--serif);                          /* serif value */
  font-size: 1.1rem;                                  /* readable size */
  color: var(--ink-strong);                           /* dark text */
  font-weight: 600;                                   /* semibold */
}

.page-hero {
  padding: 5rem 0 3rem;                               /* smaller hero padding */
  background: var(--slate-50);                        /* light gray bg */
  border-bottom: 1px solid var(--border);             /* divider line */
}
.page-hero h1 {
  font-size: 2.2rem;                                  /* large title */
  margin-bottom: 0.4em;                               /* space below */
}
.page-hero .eyebrow {
  display: inline-block;                              /* sit inline */
  font-family: var(--sans);                           /* sans label */
  font-size: 0.95rem;                                 /* tiny label */
  letter-spacing: 0.12em;                             /* spaced letters */
  text-transform: uppercase;                          /* uppercase */
  color: var(--accent);                               /* blue accent */
  font-weight: 600;                                   /* bold */
  margin-bottom: 1rem;                                /* space below */
}
.page-hero p.lead {
  max-width: 720px;                                   /* readable width */
  margin-bottom: 0;                                   /* no bottom margin */
}


/* =============================================================================
 * 08. SECTION HEADERS
 * ===========================================================================*/
.section-header {
  max-width: 720px;                                   /* readable width */
  margin: 0 auto 1.2rem;                            /* tight gap below header */
  text-align: center;                                 /* centered by default */
}
.section-header h2 {
  margin-bottom: 0.4em;                               /* small gap below */
}
.section-header p {
  font-size: 1rem;                                 /* slightly larger */
  color: var(--slate-600);                            /* muted intro */
  margin: 0;                                          /* no margins */
}
.section-header.left {
  text-align: left;                                   /* left-align variant */
  margin-left: 0;                                     /* align left edge */
}
.section-header .eyebrow {
  display: inline-block;                              /* sit inline */
  font-family: var(--sans);                           /* sans label */
  font-size: 1.1rem;                                 /* tiny label */
  letter-spacing: 0.12em;                             /* spaced letters */
  text-transform: uppercase;                          /* uppercase */
  color: var(--accent);                               /* blue accent */
  font-weight: 600;                                   /* bold */
  margin-bottom: 0.8rem;                              /* space below */
}


/* =============================================================================
 * 09. GRIDS
 * ===========================================================================*/
.grid {
  display: grid;                                      /* css grid layout */
  gap: 32px;                                          /* space between cells */
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }    /* two equal columns */
.grid-3 { grid-template-columns: repeat(3, 1fr); }    /* three equal columns */
.grid-4 { grid-template-columns: repeat(4, 1fr); }    /* four equal columns */

@media (max-width: 900px) {                           /* mobile breakpoint */
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;                       /* stack on mobile */
  }
}


/* =============================================================================
 * 10. CARDS & STEPS
 * ===========================================================================*/
.card {
  background: var(--white);                           /* white background */
  border: 1px solid var(--border);                    /* light border */
  border-radius: var(--radius-lg);                    /* rounded corners */
  padding: 2rem;                                      /* internal spacing */
  transition: border-color 0.15s, box-shadow 0.15s;   /* smooth hover */
}
.card:hover {
  border-color: var(--border-strong);                 /* darker on hover */
}
.card .card-icon {
  width: 34px;                                        /* small card icon */
  height: 34px;                                       /* matching height */
  margin-bottom: 1rem;                                /* space below */
  color: var(--accent);                               /* blue icon color */
}
.card .card-icon svg {
  width: 100%;                                        /* fill the container */
  height: 100%;                                       /* fill the container */
}
.card h3 {
  font-family: var(--sans);                           /* sans card title */
  font-size: 1.1rem;                                  /* readable title size */
  margin-bottom: 0.6em;                               /* space below */
  letter-spacing: 0;                                  /* normal spacing */
}
.card p {
  font-size: 0.96rem;                                 /* slightly smaller */
  margin-bottom: 0;                                   /* no bottom margin */
  color: var(--slate-600);                            /* muted body */
}

.card.subtle {
  background: var(--slate-50);                        /* gray subtle bg */
  border-color: transparent;                          /* no border */
}

.step {
  position: relative;                                 /* anchor for number */
  padding: 2rem;                                      /* internal spacing */
  background: var(--white);                           /* white bg */
  border: 1px solid var(--border);                    /* light border */
  border-radius: var(--radius-lg);                    /* rounded corners */
}
.step .step-num {
  position: absolute;                                 /* float over corner */
  top: -18px;                                         /* pop above top */
  left: 24px;                                         /* from left edge */
  width: 36px;                                        /* badge size */
  height: 36px;                                       /* matching height */
  background: var(--navy-800);                        /* navy bg */
  color: var(--white);                                /* white text */
  font-family: var(--serif);                          /* serif number */
  font-size: 1.05rem;                                 /* readable size */
  font-weight: 600;                                   /* semibold */
  display: flex;                                      /* flex for centering */
  align-items: center;                                /* vertical center */
  justify-content: center;                            /* horizontal center */
  border-radius: 50%;                                 /* perfect circle */
  box-shadow: var(--shadow-sm);                       /* subtle shadow */
}
.step h3 {
  font-family: var(--sans);                           /* sans title */
  font-size: 1.08rem;                                 /* readable size */
  margin-top: 0.4em;                                  /* space above */
  margin-bottom: 0.5em;                               /* space below */
}
.step p {
  font-size: 0.95rem;                                 /* body size */
  color: var(--slate-600);                            /* muted body */
  margin-bottom: 0;                                   /* no bottom margin */
}


/* =============================================================================
 * 11. CALLOUTS
 * ===========================================================================*/
.callout {
  background: var(--slate-50);                        /* light gray bg */
  border-left: 3px solid var(--accent);               /* blue left stripe */
  padding: 1.5rem 1.75rem;                            /* internal spacing */
  border-radius: 0 var(--radius-md) var(--radius-md) 0;  /* round right side */
  margin: 2rem 0;                                     /* vertical spacing */
}
.callout strong {
  color: var(--ink-strong);                           /* darker emphasis */
}
.callout p:last-child {
  margin-bottom: 0;                                   /* no trailing margin */
}

.callout.dark {
  background: var(--navy-900);                        /* navy bg */
  color: var(--slate-300);                            /* light text */
  border-left-color: var(--accent);                   /* blue stripe */
}
.callout.dark strong {
  color: var(--white);                                /* white emphasis */
}


/* =============================================================================
 * 12. DEFINITION TABLES & DESCRIPTOR BOX
 * ===========================================================================*/
.def-table {
  width: 100%;                                        /* full width */
  border-collapse: collapse;                          /* merge borders */
  margin: 1.5rem 0 2rem;                              /* vertical spacing */
  background: var(--white);                           /* white bg */
  border: 1px solid var(--border);                    /* light border */
  border-radius: var(--radius-lg);                    /* rounded corners */
  overflow: hidden;                                   /* clip rounded corners */
}
.def-table th,
.def-table td {
  padding: 14px 22px;                                 /* cell padding */
  text-align: left;                                   /* left-align cells */
  border-bottom: 1px solid var(--border);             /* row dividers */
  font-size: 0.96rem;                                 /* readable text */
  vertical-align: top;                                /* align to top */
}
.def-table th {
  background: var(--slate-50);                        /* gray label bg */
  font-family: var(--sans);                           /* sans label */
  font-weight: 600;                                   /* bold label */
  font-size: 0.78rem;                                 /* small label */
  letter-spacing: 0.08em;                             /* spaced letters */
  text-transform: uppercase;                          /* uppercase label */
  color: var(--slate-600);                            /* muted label */
  width: 36%;                                         /* fixed label width */
}
.def-table tr:last-child td,
.def-table tr:last-child th {
  border-bottom: none;                                /* no border last row */
}

.descriptor-box {
  background: var(--navy-900);                        /* dark navy bg */
  color: var(--white);                                /* white text */
  padding: 1.4rem 1.75rem;                            /* internal padding */
  border-radius: var(--radius-md);                    /* rounded corners */
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;  /* mono font */
  font-size: 1.05rem;                                 /* readable size */
  letter-spacing: 0.04em;                             /* slight letter space */
  display: inline-flex;                               /* sit inline, flex inside */
  align-items: center;                                /* vertical center */
  gap: 14px;                                          /* space between */
  margin: 1rem 0;                                     /* vertical spacing */
}
.descriptor-box::before {
  content: '';                                        /* empty pseudo */
  width: 8px;                                         /* dot width */
  height: 8px;                                        /* dot height */
  border-radius: 50%;                                 /* perfect circle */
  background: var(--accent);                          /* blue dot */
  display: inline-block;                              /* inline rendering */
}


/* =============================================================================
 * 13. LEGAL / POLICY PAGES
 * ===========================================================================*/
.legal-content {
  padding: 4rem 0 6rem;                               /* large policy padding */
}
.legal-content h2 {
  font-size: 1.4rem;                                  /* smaller policy h2 */
  margin-top: 2.5rem;                                 /* space above */
  margin-bottom: 0.7em;                               /* space below */
  padding-top: 1.5rem;                                /* internal top pad */
  border-top: 1px solid var(--border);                /* divider above */
}
.legal-content h2:first-of-type {
  border-top: none;                                   /* no border first */
  padding-top: 0;                                     /* no padding first */
  margin-top: 0;                                      /* no margin first */
}
.legal-content h3 {
  font-family: var(--sans);                           /* sans subhead */
  font-size: 1.05rem;                                 /* small subhead */
  margin-top: 1.4rem;                                 /* space above */
  margin-bottom: 0.4em;                               /* space below */
  color: var(--navy-800);                             /* navy subhead */
}
.legal-content ul li {
  margin-bottom: 0.5em;                               /* space between items */
}
.legal-content .meta {
  font-size: 0.88rem;                                 /* small meta text */
  color: var(--slate-500);                            /* muted color */
  margin-bottom: 2rem;                                /* space below */
  padding-bottom: 1.5rem;                             /* internal padding */
  border-bottom: 1px solid var(--border);             /* divider below */
}


/* =============================================================================
 * 14. SITE FOOTER
 * ===========================================================================*/
.site-footer {
  background: var(--navy-900);                        /* navy bg */
  color: var(--slate-300);                            /* light text */
  padding: 4.5rem 0 2rem;                             /* footer padding */
  font-size: 0.92rem;                                 /* slightly smaller */
}

.site-footer .footer-grid {
  display: grid;                                      /* css grid */
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;         /* uneven columns */
  gap: 3rem;                                          /* space between */
  margin-bottom: 3rem;                                /* space below */
}
@media (max-width: 900px) {                           /* tablet breakpoint */
  .site-footer .footer-grid {
    grid-template-columns: 1fr 1fr;                   /* two columns */
  }
}
@media (max-width: 560px) {                           /* mobile breakpoint */
  .site-footer .footer-grid {
    grid-template-columns: 1fr;                       /* single column */
  }
}

.site-footer h5 {
  color: var(--white);                                /* white headers */
  font-size: 0.78rem;                                 /* tiny header */
  letter-spacing: 0.12em;                             /* spaced letters */
  text-transform: uppercase;                          /* uppercase */
  margin-bottom: 1.1rem;                              /* space below */
  font-weight: 600;                                   /* bold */
}

.site-footer .footer-brand {
  background: var(--white);                           /* white pill bg */
  padding: 14px 16px;                                 /* internal padding */
  border-radius: var(--radius-md);                    /* rounded corners */
  display: inline-block;                              /* sit inline */
  margin-bottom: 1.25rem;                             /* space below */
}
.site-footer .footer-brand img {
  height: 42px;                                       /* wordmark height (6.74:1) */
  width: auto;                                        /* preserve ratio */
  display: block;                                     /* remove inline gap */
}

.site-footer p {
  color: var(--slate-400);                            /* muted footer text */
  margin-bottom: 1.1rem;                              /* paragraph spacing */
}

.site-footer ul {
  list-style: none;                                   /* no bullets */
  padding: 0;                                         /* no padding */
  margin: 0;                                          /* no margins */
}
.site-footer ul li {
  margin-bottom: 0.55rem;                             /* item spacing */
}
.site-footer ul a {
  color: var(--slate-300);                            /* light link color */
  text-decoration: none;                              /* no underline */
  font-size: 0.92rem;                                 /* readable size */
}
.site-footer ul a:hover {
  color: var(--white);                                /* white on hover */
  text-decoration: none;                              /* no underline */
}

.site-footer .footer-contact-line {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;  /* mono font */
  color: var(--slate-300);                            /* light color */
  font-size: 0.88rem;                                 /* small size */
  margin: 0.4rem 0;                                   /* tight spacing */
}

.footer-disclosure-band {
  background: var(--navy-900);                        /* same navy bg */
  border-top: 1px solid var(--navy-700);              /* subtle divider */
  padding: 1.5rem 0;                                  /* compact band */
  font-size: 0.82rem;                                 /* small text */
  color: var(--slate-400);                            /* muted color */
  line-height: 1.5;                                   /* readable lines */
}
.footer-disclosure-band .container {
  display: flex;                                      /* horizontal layout */
  flex-wrap: wrap;                                    /* wrap if narrow */
  align-items: center;                                /* vertical center */
  justify-content: space-between;                     /* spread ends */
  gap: 1rem;                                          /* min gap */
}
.footer-disclosure-band .mcc-line {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;  /* mono font */
  letter-spacing: 0.04em;                             /* slight spacing */
}
.footer-disclosure-band .geo-line {
  color: var(--slate-400);                            /* muted color */
}
.footer-disclosure-band strong {
  color: var(--slate-200);                            /* lighter emphasis */
}

.site-footer .descriptor-inline {
  display: inline-block;                              /* inline rendering */
  background: rgba(255, 255, 255, 0.06);              /* faint white bg */
  border: 1px solid rgba(255, 255, 255, 0.12);        /* faint border */
  padding: 4px 10px;                                  /* small padding */
  border-radius: 4px;                                 /* rounded chip */
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;  /* mono font */
  font-size: 0.84rem;                                 /* small size */
  color: var(--slate-200);                            /* light color */
  letter-spacing: 0.04em;                             /* slight spacing */
}


/* =============================================================================
 * 15. DIAGRAMS, ICON ROWS, FAQ LIST
 * ===========================================================================*/
.diagram-wrap {
  margin: 2.5rem 0;                                   /* vertical spacing */
  text-align: center;                                 /* center diagrams */
}
.diagram-wrap svg {
  max-width: 100%;                                    /* responsive width */
  height: auto;                                       /* preserve ratio */
  display: block;                                     /* remove inline gap */
  margin: 0 auto;                                     /* center horizontally */
}
.diagram-caption {
  margin-top: 1rem;                                   /* space above */
  font-size: 0.88rem;                                 /* small caption */
  color: var(--slate-500);                            /* muted color */
  font-style: italic;                                 /* italicized caption */
}

.icon-row {
  display: flex;                                      /* horizontal layout */
  align-items: flex-start;                            /* top-align */
  gap: 1rem;                                          /* space between */
  margin-bottom: 1.5rem;                              /* bottom spacing */
}
.icon-row .icon-shell {
  flex-shrink: 0;                                     /* don't shrink */
  width: 32px;                                        /* shell size */
  height: 32px;                                       /* matching height */
  border-radius: var(--radius-md);                    /* rounded shell */
  background: var(--accent-soft);                     /* light blue bg */
  color: var(--accent);                               /* blue icon */
  display: flex;                                      /* flex for centering */
  align-items: center;                                /* vertical center */
  justify-content: center;                            /* horizontal center */
}
.icon-row .icon-shell svg {
  width: 18px;                                        /* small icon */
  height: 18px;                                       /* matching height */
}
.icon-row .icon-body h4 {
  margin-top: 4px;                                    /* align with icon */
  margin-bottom: 0.3em;                               /* tight below */
}
.icon-row .icon-body p {
  font-size: 0.95rem;                                 /* body text size */
  color: var(--slate-600);                            /* muted body */
  margin-bottom: 0;                                   /* no bottom margin */
}

.faq-list {
  border-top: 1px solid var(--border);                /* top divider */
}
.faq-item {
  border-bottom: 1px solid var(--border);             /* divider between */
  padding: 1.5rem 0;                                  /* vertical padding */
}
.faq-item h3 {
  font-family: var(--sans);                           /* sans question */
  font-size: 1.05rem;                                 /* readable size */
  margin-bottom: 0.6em;                               /* space below */
  color: var(--ink-strong);                           /* dark text */
}
.faq-item p {
  font-size: 0.97rem;                                 /* readable answer */
  color: var(--slate-600);                            /* muted answer */
  margin-bottom: 0;                                   /* no bottom margin */
}


/* =============================================================================
 * 16. CTA BAND (standard, used on inner pages)
 * ===========================================================================*/
.cta-band {
  background: var(--navy-900);                        /* navy bg */
  color: var(--white);                                /* white text */
  padding: 4.5rem 0;                                  /* large padding */
  text-align: center;                                 /* center content */
}
.cta-band h2 {
  color: var(--white);                                /* white title */
  font-size: 1.6rem;                                    /* large title */
  max-width: 720px;                                   /* readable width */
  margin: 0 auto 0.8em;                               /* center + below */
}
.cta-band p {
  color: var(--slate-300);                            /* light intro */
  max-width: 580px;                                   /* readable width */
  margin: 0 auto 2rem;                                /* center + below */
  font-size: 1.05rem;                                 /* readable size */
}

.cta-band .btn-primary {
  background: var(--white);                           /* white button on dark */
  color: var(--navy-900);                             /* navy text */
  border-color: var(--white);                         /* white border */
}
.cta-band .btn-primary:hover {
  background: var(--slate-100);                       /* slight gray hover */
  border-color: var(--slate-100);                     /* matching border */
}

.cta-band .btn-outline {
  color: var(--white);                                /* white text */
  border-color: rgba(255, 255, 255, 0.3);             /* faint white border */
}
.cta-band .btn-outline:hover {
  border-color: var(--white);                         /* solid white hover */
}


/* =============================================================================
 * 17. FORMS
 * ===========================================================================*/
.form-grid {
  display: grid;                                      /* css grid */
  grid-template-columns: 1fr 1fr;                     /* two columns */
  gap: 1.25rem;                                       /* space between */
}
@media (max-width: 720px) {                           /* mobile breakpoint */
  .form-grid {
    grid-template-columns: 1fr;                       /* single column */
  }
}

.form-field {
  display: flex;                                      /* flex layout */
  flex-direction: column;                             /* stack label+input */
}
.form-field.full {
  grid-column: 1 / -1;                                /* span full width */
}
.form-field label {
  font-size: 0.85rem;                                 /* small label */
  font-weight: 600;                                   /* bold label */
  color: var(--slate-700);                            /* dark label */
  margin-bottom: 0.4rem;                              /* gap below */
  letter-spacing: 0.01em;                             /* normal spacing */
}

.form-field input,
.form-field textarea,
.form-field select {
  font-family: var(--sans);                           /* sans input font */
  font-size: 0.98rem;                                 /* readable size */
  padding: 11px 14px;                                 /* internal spacing */
  border: 1px solid var(--border-strong);             /* visible border */
  border-radius: var(--radius-md);                    /* rounded corners */
  background: var(--white);                           /* white bg */
  color: var(--ink-strong);                           /* dark text */
  transition: border-color 0.15s, box-shadow 0.15s;   /* smooth focus */
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;                                      /* remove default outline */
  border-color: var(--accent);                        /* blue focus border */
  box-shadow: 0 0 0 3px rgba(30, 96, 145, 0.12);      /* blue focus glow */
}
.form-field textarea {
  resize: vertical;                                   /* only vertical resize */
  min-height: 130px;                                  /* minimum height */
}


/* =============================================================================
 * 18. UTILITIES & RESPONSIVE
 * ===========================================================================*/
.text-center { text-align: center; }                  /* center text helper */
.mt-0        { margin-top: 0 !important; }            /* remove top margin */
.mb-0        { margin-bottom: 0 !important; }         /* remove bottom margin */
.mt-2        { margin-top: 2rem; }                    /* add top margin */
.mb-2        { margin-bottom: 2rem; }                 /* add bottom margin */
.mt-3        { margin-top: 3rem; }                    /* larger top margin */
.small       { font-size: 0.88rem; color: var(--slate-500); }  /* small muted text */
.muted       { color: var(--slate-500); }             /* muted text color */

@media print {                                        /* print-specific styles */
  .site-header,
  .site-footer,
  .footer-disclosure-band,
  .cta-band {
    display: none;                                    /* hide chrome on print */
  }
  body {
    color: #000;                                      /* black text print */
  }
  section {
    padding: 1rem 0;                                  /* compact sections */
  }
  a {
    color: #000;                                      /* black links print */
    text-decoration: none;                            /* no underlines print */
  }
}

@media (max-width: 720px) {                           /* mobile breakpoint */
  h1            { font-size: 2.1rem; }                /* shrink huge title */
  .hero h1      { font-size: 2.3rem; }                /* shrink hero title */
  .page-hero h1 { font-size: 1.85rem; }               /* shrink page title */
  h2            { font-size: 1.6rem; }                /* shrink section title */
  section       { padding: 3.5rem 0; }                /* less section padding */
  .hero         { padding: 4rem 0 3rem; }             /* less hero padding */
  .primary-nav  { display: none; }                    /* hide desktop nav */
}


/* =============================================================================
 * 19. PREMIUM HOMEPAGE — hero illustration, stats, audience cards
 * ===========================================================================*/
.hero-premium {
  position: relative;                                 /* anchor for grid bg */
  padding: 4.5rem 0 3.5rem;                           /* hero padding */
  background:                                         /* layered gradients */
    radial-gradient(circle at 15% 30%, rgba(30, 96, 145, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 85% 70%, rgba(30, 96, 145, 0.06) 0%, transparent 50%),
    linear-gradient(180deg, var(--slate-50) 0%, var(--white) 100%);
  border-bottom: 1px solid var(--border);             /* divider line */
  overflow: hidden;                                   /* clip overflow */
}

.hero-premium::before {
  content: '';                                        /* empty pseudo */
  position: absolute;                                 /* float in hero */
  inset: 0;                                           /* cover entire hero */
  background-image:                                   /* grid pattern */
    linear-gradient(to right, rgba(15, 37, 64, 0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 37, 64, 0.025) 1px, transparent 1px);
  background-size: 50px 50px;                         /* grid square size */
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.4) 0%, transparent 70%);  /* fade edges */
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.4) 0%, transparent 70%);  /* safari fade */
  pointer-events: none;                               /* clicks pass through */
}

.hero-premium .container {
  position: relative;                                 /* above grid bg */
  z-index: 1;                                         /* stack above bg */
}

.hero-grid {
  display: grid;                                      /* two-column layout */
  grid-template-columns: 1.15fr 1fr;                  /* content wider */
  gap: 4rem;                                          /* space between */
  align-items: center;                                /* vertical center */
}
@media (max-width: 980px) {                           /* tablet breakpoint */
  .hero-grid {
    grid-template-columns: 1fr;                       /* stack vertically */
    gap: 3rem;                                        /* tighter gap */
  }
}

.hero-premium .eyebrow-badge {
  display: inline-flex;                               /* inline flex */
  align-items: center;                                /* vertical center */
  gap: 8px;                                           /* dot + text gap */
  font-family: var(--sans);                           /* sans badge */
  font-size: 0.85rem;                                 /* tiny badge */
  letter-spacing: 0.1em;                              /* spaced letters */
  text-transform: uppercase;                          /* uppercase */
  color: var(--accent);                               /* blue accent */
  font-weight: 600;                                   /* bold */
  background: var(--accent-soft);                     /* light blue bg */
  border: 1px solid rgba(30, 96, 145, 0.15);          /* faint blue border */
  padding: 7px 14px;                                  /* internal padding */
  border-radius: 999px;                               /* pill shape */
  margin-bottom: 1.5rem;                              /* space below */
}
.hero-premium .eyebrow-badge::before {
  content: '';                                        /* empty pseudo */
  width: 6px;                                         /* dot size */
  height: 6px;                                        /* matching height */
  border-radius: 50%;                                 /* perfect circle */
  background: var(--accent);                          /* blue dot */
  box-shadow: 0 0 0 3px rgba(30, 96, 145, 0.2);       /* soft glow */
  animation: pulse 2s ease-in-out infinite;           /* pulsing animation */
}
@keyframes pulse {                                    /* dot pulse loop */
  0%, 100% { opacity: 1; }                            /* full opacity */
  50% { opacity: 0.5; }                               /* half opacity */
}

.hero-premium h1 {
  font-size: 2.6rem;                                  /* huge hero title */
  line-height: 1.08;                                  /* very tight lines */
  letter-spacing: -0.02em;                            /* tightened tracking */
  margin-bottom: 0.6em;                               /* space below */
}
.hero-premium h1 .accent {
  color: var(--accent);                               /* blue accent word */
  font-style: italic;                                 /* italicized accent */
}

.hero-premium p.lead {
  font-size: 1.05rem;                                  /* larger intro */
  color: var(--slate-600);                            /* muted body */
  margin-bottom: 2.2rem;                              /* space below */
  max-width: 580px;                                   /* readable width */
}

.hero-illustration {
  position: relative;                                 /* anchor for SVG */
  width: 100%;                                        /* responsive width */
  aspect-ratio: 5 / 4;                                /* slightly wide */
  max-width: 360px;                                   /* cap at 280px */
  margin: 0 auto;                                     /* center horizontally */
}
.hero-illustration svg {
  width: 100%;                                        /* fill container */
  height: 100%;                                       /* fill container */
  display: block;                                     /* remove inline gap */
}

@keyframes float-slow {                               /* gentle bobbing */
  0%, 100% { transform: translateY(0); }              /* rest position */
  50% { transform: translateY(-8px); }                /* float up */
}
@keyframes float-medium {                             /* slightly bigger */
  0%, 100% { transform: translateY(0); }              /* rest position */
  50% { transform: translateY(-12px); }               /* float higher */
}

.hero-illustration .float-1 { animation: float-slow 6s ease-in-out infinite; }      /* card float */
.hero-illustration .float-2 { animation: float-medium 7s ease-in-out infinite; }    /* shield float */
.hero-illustration .float-3 { animation: float-slow 8s ease-in-out infinite; }      /* check float */

.stats-band {
  background: var(--white);                           /* white band bg */
  border-top: 1px solid var(--border);                /* top divider */
  border-bottom: 1px solid var(--border);             /* bottom divider */
  padding: 2.5rem 0;                                  /* compact padding */
}
.stats-band .stats-grid {
  display: grid;                                      /* css grid */
  grid-template-columns: repeat(5, 1fr);              /* five columns */
  gap: 1.5rem;                                        /* space between */
}
@media (max-width: 1000px) {                          /* tablet breakpoint */
  .stats-band .stats-grid {
    grid-template-columns: repeat(3, 1fr);            /* three columns */
    gap: 1.5rem;                                      /* tighter gap */
  }
}
@media (max-width: 600px) {                           /* mobile breakpoint */
  .stats-band .stats-grid {
    grid-template-columns: repeat(2, 1fr);            /* two columns */
  }
}
.stat-item .stat-icon {
  display: flex;                                      /* flex for centering */
  align-items: center;                                /* vertical center */
  justify-content: center;                            /* horizontal center */
  width: 36px;                                        /* icon shell size */
  height: 36px;                                       /* matching height */
  margin: 0 auto 0.6rem;                              /* center + bottom gap */
  border-radius: var(--radius-md);                    /* rounded shell */
  background: var(--accent-soft);                     /* light blue bg */
  color: var(--accent);                               /* blue icon color */
}
.stat-item .stat-icon svg {
  width: 18px;                                        /* small icon */
  height: 18px;                                       /* matching height */
}
.stat-item {
  text-align: center;                                 /* center stat content */
}
.stat-item .stat-value {
  font-family: var(--serif);                          /* serif numbers */
  font-size: 1.5rem;                                  /* readable stat size */
  font-weight: 600;                                   /* bold numbers */
  color: var(--navy-800);                             /* navy numbers */
  line-height: 1;                                     /* tight lines */
  margin-bottom: 0.4rem;                              /* gap below */
  letter-spacing: -0.02em;                            /* tight tracking */
}
.stat-item .stat-label {
  font-size: 0.78rem;                                 /* tiny label */
  letter-spacing: 0.08em;                             /* spaced letters */
  text-transform: uppercase;                          /* uppercase */
  color: var(--slate-500);                            /* muted color */
  font-weight: 600;                                   /* bold label */
}

.feature-card {
  position: relative;                                 /* anchor for stripe */
  background: var(--white);                           /* white card bg */
  border: 1px solid var(--border);                    /* light border */
  border-radius: var(--radius-lg);                    /* rounded corners */
  padding: 2.25rem 2rem;                              /* internal padding */
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;  /* smooth hover */
  overflow: hidden;                                   /* clip top stripe */
}
.feature-card::before {
  content: '';                                        /* empty pseudo */
  position: absolute;                                 /* float at top */
  top: 0;                                             /* anchor top */
  left: 0;                                            /* anchor left */
  right: 0;                                           /* anchor right */
  height: 3px;                                        /* thin stripe */
  background: linear-gradient(90deg, var(--accent) 0%, var(--navy-600) 100%);  /* gradient stripe */
  opacity: 0;                                         /* hidden by default */
  transition: opacity 0.2s;                           /* fade in smoothly */
}
.feature-card:hover {
  border-color: var(--border-strong);                 /* darker border hover */
  box-shadow: var(--shadow-md);                       /* lift shadow */
  transform: translateY(-2px);                        /* lift up slightly */
}
.feature-card:hover::before {
  opacity: 1;                                         /* show stripe on hover */
}
.feature-card .feature-icon {
  width: 38px;                                        /* icon shell size */
  height: 38px;                                       /* matching height */
  background: var(--accent-soft);                     /* light blue bg */
  border-radius: var(--radius-md);                    /* rounded shell */
  display: flex;                                      /* flex for centering */
  align-items: center;                                /* vertical center */
  justify-content: center;                            /* horizontal center */
  color: var(--accent);                               /* blue icon */
  margin-bottom: 1.25rem;                             /* space below */
}
.feature-card .feature-icon svg {
  width: 20px;                                        /* icon size */
  height: 20px;                                       /* matching height */
}
.feature-card h3 {
  font-family: var(--sans);                           /* sans title */
  font-size: 1.15rem;                                 /* readable size */
  margin-bottom: 0.5em;                               /* space below */
  letter-spacing: -0.005em;                           /* slight tightening */
  color: var(--ink-strong);                           /* dark text */
}
.feature-card p {
  font-size: 0.96rem;                                 /* body size */
  color: var(--slate-600);                            /* muted body */
  margin-bottom: 0;                                   /* no bottom margin */
  line-height: 1.6;                                   /* readable lines */
}

.section-gradient {
  position: relative;                                 /* enable pseudo */
  padding-top: 2rem !important;                       /* tighter top padding */
  padding-bottom: 2rem !important;                    /* tighter bottom padding */
  background:                                         /* layered gradients */
    radial-gradient(circle at 30% 20%, rgba(30, 96, 145, 0.04) 0%, transparent 60%),
    radial-gradient(circle at 70% 80%, rgba(15, 37, 64, 0.03) 0%, transparent 60%),
    var(--white);                                     /* white base */
}

.audience-card {
  position: relative;                                 /* anchor for accents */
  background: var(--white);                           /* white card bg */
  border: 1px solid var(--border);                    /* light border */
  border-radius: 14px;                                /* extra-rounded corners */
  padding: 2.5rem;                                    /* generous padding */
  overflow: hidden;                                   /* clip overflow */
  transition: border-color 0.2s, box-shadow 0.2s;     /* smooth hover */
}
.audience-card:hover {
  border-color: var(--accent);                        /* blue border hover */
  box-shadow: 0 12px 30px rgba(15, 37, 64, 0.07);     /* lift shadow */
}
.audience-card .audience-tag {
  display: inline-block;                              /* inline rendering */
  font-size: 0.72rem;                                 /* tiny tag */
  letter-spacing: 0.1em;                              /* spaced letters */
  text-transform: uppercase;                          /* uppercase */
  color: var(--accent);                               /* blue text */
  font-weight: 700;                                   /* bold tag */
  background: var(--accent-soft);                     /* light blue bg */
  padding: 4px 10px;                                  /* tag padding */
  border-radius: 4px;                                 /* rounded tag */
  margin-bottom: 1rem;                                /* space below */
}
.audience-card h3 {
  font-family: var(--serif);                          /* serif title */
  font-size: 1.5rem;                                  /* large title */
  margin-bottom: 0.6em;                               /* space below */
  color: var(--ink-strong);                           /* dark title */
}
.audience-card p {
  font-size: 1rem;                                    /* readable body */
  color: var(--slate-600);                            /* muted body */
  margin-bottom: 1.5rem;                              /* space below */
  line-height: 1.6;                                   /* readable lines */
}
.audience-card .audience-link {
  display: inline-flex;                               /* flex for arrow */
  align-items: center;                                /* vertical center */
  gap: 8px;                                           /* text + arrow gap */
  font-weight: 600;                                   /* bold link */
  font-size: 0.95rem;                                 /* readable size */
  color: var(--accent);                               /* blue link */
  text-decoration: none;                              /* no underline */
  transition: gap 0.2s;                               /* animate gap on hover */
}
.audience-card .audience-link:hover {
  gap: 12px;                                          /* arrow slides right */
  text-decoration: none;                              /* no underline */
}
.audience-card .audience-link svg {
  width: 16px;                                        /* arrow size */
  height: 16px;                                       /* matching height */
}

.cta-band-premium {
  position: relative;                                 /* enable pseudo */
  background:                                         /* layered gradients */
    radial-gradient(circle at 20% 50%, rgba(30, 96, 145, 0.4) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(15, 37, 64, 0.3) 0%, transparent 50%),
    var(--navy-900);                                  /* navy base */
  color: var(--white);                                /* white text */
  padding: 4rem 0;                                    /* band padding */
  text-align: center;                                 /* center content */
  overflow: hidden;                                   /* clip pattern */
}
.cta-band-premium::before {
  content: '';                                        /* empty pseudo */
  position: absolute;                                 /* float in band */
  inset: 0;                                           /* cover entire band */
  background-image:                                   /* faint grid pattern */
    linear-gradient(to right, rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 40px 40px;                         /* grid square size */
  pointer-events: none;                               /* clicks pass through */
}
.cta-band-premium .container {
  position: relative;                                 /* above pattern */
  z-index: 1;                                         /* stack above bg */
}
.cta-band-premium h2 {
  color: var(--white);                                /* white title */
  font-size: 1.7rem;                                  /* large title */
  max-width: 720px;                                   /* readable width */
  margin: 0 auto 0.8em;                               /* center + below */
  letter-spacing: -0.02em;                            /* slight tightening */
}
.cta-band-premium p {
  color: var(--slate-300);                            /* light intro */
  max-width: 580px;                                   /* readable width */
  margin: 0 auto 2.2rem;                              /* center + below */
  font-size: 1.08rem;                                 /* readable size */
}
.cta-band-premium .btn-primary {
  background: var(--white);                           /* white button */
  color: var(--navy-900);                             /* navy text */
  border-color: var(--white);                         /* white border */
  padding: 14px 32px;                                 /* larger button */
  font-weight: 600;                                   /* bold button */
}
.cta-band-premium .btn-primary:hover {
  background: var(--slate-100);                       /* slight gray hover */
}
.cta-band-premium .btn-outline {
  color: var(--white);                                /* white text */
  border-color: rgba(255, 255, 255, 0.35);            /* faint white border */
  padding: 14px 32px;                                 /* larger button */
}
.cta-band-premium .btn-outline:hover {
  border-color: var(--white);                         /* solid border hover */
  background: rgba(255, 255, 255, 0.05);              /* faint bg hover */
}

@media (max-width: 720px) {                           /* mobile premium tweaks */
  .hero-premium { padding: 4rem 0 3rem; }             /* compact hero */
  .hero-premium h1 { font-size: 2.4rem; }             /* shrink hero title */
  .stat-item .stat-value { font-size: 1.7rem; }       /* shrink stat numbers */
  .cta-band-premium h2 { font-size: 1.7rem; }         /* shrink cta title */
}

/* =============================================================================
 * End of /assets/css/site.css
 * ===========================================================================*/


/* Hide hero eyebrow badge (per spec) */
.hero-premium .eyebrow-badge { display: none !important; }

/* =============================================================================
 * 20. COMPACT TRUST BAND — single horizontal row of compliance pills
 * ===========================================================================*/
.trust-band-compact {
  background: var(--slate-50);                        /* light gray bg */
  border-bottom: 1px solid var(--border);             /* bottom divider */
  padding: 1.5rem 0;                                  /* compact band height */
}
.trust-row {
  display: flex;                                      /* horizontal layout */
  flex-wrap: wrap;                                    /* wrap on narrow */
  justify-content: center;                            /* center the pills */
  align-items: center;                                /* vertical center */
  gap: 1rem 2rem;                                     /* row and column gap */
}
.trust-pill {
  display: inline-flex;                               /* icon + text inline */
  align-items: center;                                /* vertical center */
  gap: 8px;                                           /* icon-text gap */
  font-size: 0.85rem;                                 /* readable text */
  font-weight: 600;                                   /* bold pill text */
  color: var(--slate-700);                            /* dark muted text */
  white-space: nowrap;                                /* no wrapping mid-pill */
}
.trust-pill svg {
  width: 16px;                                        /* small icon */
  height: 16px;                                       /* matching height */
  color: var(--accent);                               /* blue icon color */
  flex-shrink: 0;                                     /* don't shrink */
}

/* =============================================================================
 * 20. ACCESSIBILITY & MOTION
 * ===========================================================================*/
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy-800); color: #fff; padding: 12px 20px;
  border-radius: 0 0 var(--radius-md) 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

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

html, body { overflow-x: hidden; }           /* no horizontal scroll on mobile */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}


/* =============================================================================
 * 21. BRAND LOCKUP SIZING
 * The v3 SnappyPay lockup is displayed large. Scale it down on narrow
 * viewports so the sticky header does not consume the screen.
 * ===========================================================================*/
@media (max-width: 1100px) {
  .brand img { height: 42px; }
  .site-footer .footer-brand img { height: 40px; }
}
@media (max-width: 860px) {
  .brand img { height: 38px; }
  .site-footer .footer-brand img { height: 36px; }
}
@media (max-width: 620px) {
  .brand img { height: 32px; }
  .site-footer .footer-brand img { height: 32px; }
  .site-header .container { padding-top: 10px; padding-bottom: 10px; }
}

/* =============================================================================
 * 22. PHOTO BANDS
 * Full-width photography with an overlaid copy block, matching the treatment
 * used on the other 4Square-family sites.
 * ===========================================================================*/
.photo-band {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.photo-band > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.photo-band-overlay {
  position: relative; z-index: 2;
  width: 100%; padding: 72px 0;
  background: linear-gradient(90deg,
              rgba(30,27,75,.94) 0%,
              rgba(30,27,75,.80) 55%,
              rgba(30,27,75,.38) 100%);
}
.photo-band-overlay h2 { color: #fff; max-width: 22ch; }
.photo-band-overlay p  { color: #ddd8f0; max-width: 60ch; font-size: 1.08rem; }
.photo-band-overlay .eyebrow-badge { margin-bottom: 1em; }

/* Inline figure used beside body copy */
.photo-figure img {
  width: 100%; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); display: block;
}
.photo-split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 48px; align-items: center;
}

@media (max-width: 900px) {
  .photo-split { grid-template-columns: 1fr; gap: 32px; }
  .photo-band { min-height: 340px; }
  .photo-band-overlay {
    padding: 56px 0;
    background: linear-gradient(90deg, rgba(30,27,75,.95), rgba(30,27,75,.88));
  }
}

/* Hero photograph (replaces the inherited SVG illustration) */
.hero-photo img {
  width: 100%;
  height: 100%;
  min-height: 340px;
  max-height: 460px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: block;
}
@media (max-width: 900px) {
  .hero-photo img { min-height: 240px; max-height: 300px; }
}

/* =============================================================================
 * 23. PHOTO ROWS & SPLITS
 * ===========================================================================*/
.photo-row { display: grid; gap: 20px; }
.photo-row.cols-2 { grid-template-columns: repeat(2, 1fr); }
.photo-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
.photo-card { margin: 0; }
.photo-card img {
  width: 100%; height: 190px; object-fit: cover; display: block;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  transition: transform .3s ease, box-shadow .3s ease;
}
.photo-card:hover img { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.photo-card figcaption {
  margin-top: 10px; font-size: .88rem; color: var(--ink-muted); line-height: 1.5;
}
.photo-split { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.photo-split.is-flipped .photo-split-copy  { order: 2; }
.photo-split.is-flipped .photo-split-media { order: 1; }
.photo-split-media { margin: 0; }
.photo-split-media img {
  width: 100%; max-height: 380px; object-fit: cover; display: block;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
@media (max-width: 900px) {
  .photo-row.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .photo-split { grid-template-columns: 1fr; gap: 30px; }
  .photo-split.is-flipped .photo-split-copy  { order: 1; }
  .photo-split.is-flipped .photo-split-media { order: 2; }
}
@media (max-width: 600px) {
  .photo-row.cols-2, .photo-row.cols-3 { grid-template-columns: 1fr; }
}

/* =============================================================================
 * 24. FULL-BLEED HERO
 * Photograph behind the whole hero with a violet overlay that stays heavy
 * behind the copy and falls away across the frame, so the image reads.
 * ===========================================================================*/
.hero-premium.has-image {
  position: relative;
  padding: 0;
  background: var(--navy-900);
  border-bottom: 0;
  overflow: hidden;
  isolation: isolate;
}
.hero-premium.has-image::before { display: none; }   /* drop the grid pattern */

.hero-premium.has-image .hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-premium.has-image::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg,
              rgba(30,27,75,.94) 0%,
              rgba(30,27,75,.80) 34%,
              rgba(30,27,75,.42) 66%,
              rgba(8,145,178,.28) 100%);
}
.hero-premium.has-image .hero-inner {
  position: relative; z-index: 2;
  padding: 7rem 0 6.5rem;
  max-width: 940px;
}
.hero-premium.has-image h1 {
  color: #fff;
  font-size: clamp(2.3rem, 5vw, 3.9rem);
  margin-bottom: .5em;
}
.hero-premium.has-image h1 .accent { color: #67e8f9; }   /* teal, readable on violet */
.hero-premium.has-image .lead {
  color: #ddd6f3;
  font-size: 1.16rem;
  max-width: 62ch;
}
.hero-premium.has-image .eyebrow-badge {
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.24);
  color: #e9e3ff;
  backdrop-filter: blur(4px);
}
.hero-premium.has-image .btn-outline {
  color: #fff; border-color: rgba(255,255,255,.5);
}
.hero-premium.has-image .btn-outline:hover {
  background: rgba(255,255,255,.12); border-color: #fff;
}
.hero-premium.has-image .btn-ghost {
  background: transparent; color: #fff;
  border: 2px solid rgba(255,255,255,.5);
}
.hero-premium.has-image .btn-ghost:hover {
  background: rgba(255,255,255,.12); border-color: #fff; color: #fff;
}

@media (max-width: 900px) {
  .hero-premium.has-image .hero-inner { padding: 4.5rem 0 4rem; }
  .hero-premium.has-image::after {
    background: linear-gradient(100deg, rgba(30,27,75,.95), rgba(30,27,75,.88));
  }
}

/* =============================================================================
 * 25. PAGE POLISH
 * Small touches that lift the page without changing its structure.
 * ===========================================================================*/

/* Stats band sits directly under the hero — give it a lifted card treatment */
.stats-band {
  position: relative;
  margin-top: -2.5rem;                 /* overlap the hero slightly */
  z-index: 3;
  background: transparent;
  padding: 0 0 3.5rem;
}
.stats-band .stats-grid {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 44px rgba(76, 29, 149, .13);
  padding: 32px 24px;
}
.stats-band .stat-item { transition: transform .25s ease; }
.stats-band .stat-item:hover { transform: translateY(-3px); }
.stats-band .stat-icon { color: var(--navy-800); }
.stats-band .stat-value {
  background: linear-gradient(120deg, var(--navy-800), var(--accent));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* A soft tinted wash on alternating sections instead of flat grey */
.section-gradient {
  background:
    radial-gradient(ellipse at 12% 0%, rgba(124, 58, 237, .06) 0%, transparent 55%),
    radial-gradient(ellipse at 88% 100%, rgba(8, 145, 178, .06) 0%, transparent 55%),
    var(--white);
}

/* Hairline rule between major sections, fading at the edges */
.section + .section::before,
.section-gradient + .section-gradient::before {
  content: ""; display: block;
  height: 1px; margin: 0 auto 3rem;
  max-width: var(--container);
  background: linear-gradient(90deg, transparent, var(--border) 22%, var(--border) 78%, transparent);
}

/* Closing CTA — give it the brand gradient rather than a flat fill */
.cta-band-premium {
  position: relative;
  background: linear-gradient(120deg, var(--navy-900) 0%, var(--navy-800) 48%, #0e7490 100%);
  overflow: hidden;
}
.cta-band-premium::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.10) 0%, transparent 45%),
    radial-gradient(circle at 82% 85%, rgba(103,232,249,.14) 0%, transparent 45%);
  pointer-events: none;
}
.cta-band-premium > * { position: relative; z-index: 1; }

/* Photo cards and bands: rounder, softer, consistent with the hero */
.photo-band { border-radius: 0; }
.photo-card img { border-radius: var(--radius-lg); }

/* Links in body copy get a subtle underline that thickens on hover */
.section a:not(.btn):not(.photo-card):not(.card),
.section-gradient a:not(.btn):not(.photo-card):not(.card) {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness .15s ease;
}
.section a:not(.btn):hover,
.section-gradient a:not(.btn):hover { text-decoration-thickness: 2px; }

@media (max-width: 900px) {
  .stats-band { margin-top: -1.5rem; padding-bottom: 2.5rem; }
  .stats-band .stats-grid { padding: 24px 16px; }
}

/* =============================================================================
 * 26. INTERIOR PAGE HEADERS WITH PHOTOGRAPHY
 * Same treatment as the homepage hero, shorter, so the site reads as one
 * piece rather than a styled front page bolted to plain interiors.
 * ===========================================================================*/
.page-hero.has-image {
  position: relative;
  padding: 0;
  background: var(--navy-900);
  border-bottom: 0;
  overflow: hidden;
  isolation: isolate;
}
.page-hero.has-image .page-hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.page-hero.has-image::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg,
              rgba(30,27,75,.93) 0%,
              rgba(30,27,75,.80) 38%,
              rgba(30,27,75,.46) 72%,
              rgba(8,145,178,.26) 100%);
}
.page-hero.has-image > .container {
  position: relative; z-index: 2;
  padding-top: 4.75rem;
  padding-bottom: 4.25rem;
}
.page-hero.has-image h1 { color: #fff; font-size: clamp(2rem, 3.6vw, 2.7rem); }
.page-hero.has-image .eyebrow { color: #67e8f9; }
.page-hero.has-image p.lead { color: #ddd6f3; max-width: 62ch; }
.page-hero.has-image a:not(.btn) { color: #a5f3fc; }

@media (max-width: 900px) {
  .page-hero.has-image > .container { padding-top: 3.25rem; padding-bottom: 3rem; }
  .page-hero.has-image::after {
    background: linear-gradient(100deg, rgba(30,27,75,.94), rgba(30,27,75,.88));
  }
}

/* =============================================================================
 * 27. PURCHASE FLOW
 * Replaces a fixed-coordinate SVG with a responsive card sequence: numbered,
 * iconned, connected by a line that runs behind the cards.
 * ===========================================================================*/
.flow {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  position: relative;
  counter-reset: flow;
}

/* Connector line behind the row */
.flow::before {
  content: "";
  position: absolute;
  top: 52px; left: 6%; right: 6%;
  height: 2px;
  background: linear-gradient(90deg,
              var(--accent) 0%, var(--navy-700) 50%, var(--accent) 100%);
  opacity: .28;
  z-index: 0;
}

.flow-step {
  position: relative;
  z-index: 1;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 22px 24px;
  box-shadow: 0 2px 6px rgba(76,29,149,.05);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.flow-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(76,29,149,.14);
  border-color: var(--slate-300);
}

/* The two emphasised steps carry the brand gradient */
.flow-step.is-accent {
  background: linear-gradient(150deg, var(--navy-800) 0%, var(--navy-700) 62%, #0e7490 100%);
  border-color: transparent;
  box-shadow: 0 10px 26px rgba(76,29,149,.24);
}
.flow-step.is-accent .flow-title { color: #fff; }
.flow-step.is-accent .flow-body  { color: #ddd6f3; }
.flow-step.is-accent .flow-num   { color: rgba(255,255,255,.55); }
.flow-step.is-accent .flow-icon  {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.26);
  color: #a5f3fc;
}

.flow-num {
  display: block;
  font-family: var(--serif);
  font-size: .95rem; font-weight: 700;
  letter-spacing: .06em;
  color: var(--accent);
  margin-bottom: 14px;
}
.flow-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: 11px;
  background: var(--accent-soft);
  border: 1px solid var(--slate-200);
  color: var(--navy-800);
  margin-bottom: 16px;
}
.flow-icon svg { width: 21px; height: 21px; }

.flow-title {
  font-family: var(--sans);
  font-size: 1.02rem; font-weight: 700;
  color: var(--ink-strong);
  margin: 0 0 .5em;
  line-height: 1.3;
}
.flow-body {
  font-size: .9rem;
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0;
}

@media (max-width: 1080px) {
  .flow { grid-template-columns: repeat(3, 1fr); }
  .flow::before { display: none; }
}
@media (max-width: 760px) {
  .flow { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .flow { grid-template-columns: 1fr; gap: 14px; }
  .flow-step { padding: 22px 20px; }
}