/* =============================================================================
 * /assets/css/site.css
 * 4Square 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: #0a1929;                                /* footer background */
  --navy-800: #0f2540;                                /* primary buttons */
  --navy-700: #143257;                                /* button hover */
  --navy-600: #1d4373;                                /* deeper navy accent */

  --slate-700: #334155;                               /* body text */
  --slate-600: #475569;                               /* secondary text */
  --slate-500: #64748b;                               /* muted text */
  --slate-400: #94a3b8;                               /* footer secondary */
  --slate-300: #cbd5e1;                               /* light borders */
  --slate-200: #e2e8f0;                               /* default borders */
  --slate-100: #f1f5f9;                               /* code background */
  --slate-50:  #f8fafc;                               /* alt sections */

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

  --accent:      #1e6091;                             /* steel blue links */
  --accent-soft: #e6eef5;                             /* icon backgrounds */

  --ink-strong: #0a1929;                              /* darkest text */
  --ink-body:   #334155;                              /* body text */
  --ink-muted:  #64748b;                              /* muted text */

  --border:        #e2e8f0;                           /* default border */
  --border-strong: #cbd5e1;                           /* hover border */

  --shadow-sm: 0 1px 2px rgba(15, 37, 64, 0.04);      /* light shadow */
  --shadow-md: 0 4px 16px rgba(15, 37, 64, 0.06);     /* medium shadow */
  --shadow-lg: 0 16px 40px rgba(15, 37, 64, 0.08);    /* heavy shadow */

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

  --serif: 'Source Serif Pro', 'Georgia', 'Times New Roman', 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.01em;                            /* 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: 18px;                                  /* top padding */
  padding-bottom: 18px;                               /* 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: 40px;                                       /* logo height */
  width: auto;                                        /* preserve ratio */
  display: block;                                     /* remove inline gap */
}
.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.01em;                            /* 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: 36px;                                       /* logo height */
  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.01em;                            /* 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 */
}