/* ========================================
   SELF-HOSTED FONTS
   Served from /assets/fonts/ (no Google CDN request -
   avoids transmitting visitor IPs to Google; see the
   Munich Regional Court Google Fonts ruling, 3 O 17493/20).
   Funnel Display is a variable font: one file covers 400-700.
======================================== */

@font-face {
  font-family: 'Funnel Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/funnel-display-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Funnel Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/funnel-display-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/instrument-serif-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/instrument-serif-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/instrument-serif-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/instrument-serif-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ========================================
   GLOBAL STYLES & CSS VARIABLES
======================================== */

:root {
  /* Brand Colors */
  --accent: #9EFB00;        /* Lime green */
  --secondary: #050549;     /* Deep navy (hero background) */
  --variant: #0A0A6D;       /* Purple navy (shape fill) */
  --text-light: #F2F2F2;    /* White text */

  /* Transitions */
  --transition-fast: 0.3s ease;
  --transition-medium: 0.5s ease;

  /* Spacing Scale */
  --space-xs: 0.75rem;      /* 12px */
  --space-sm: 1.25rem;      /* 20px */
  --space-md: 2.5rem;       /* 40px */
  --space-lg: 3.75rem;      /* 60px */

  /* Border Radius */
  --radius-sm: 1.375rem;    /* 22px - navbar */
  --radius-md: 1.875rem;    /* 30px - cards */
  --radius-pill: 999px;     /* pill buttons */

  /* Additional Transitions */
  --transition-card: 0.6s ease-in-out;

  /* ---- Design-system aliases (see design-system/tokens/) ----
     Canonical token names layered over the legacy variables above.
     Prefer these names in new CSS. */
  --lime: var(--accent);
  --navy: var(--secondary);
  --navy-variant: var(--variant);
  --off-white: var(--text-light);
  --light: #F1F1F1;         /* secondary light background */
  --white: #FFFFFF;         /* pure white - find-me cards */

  --font-display: 'Funnel Display', system-ui, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;

  --radius-nav: 1.375rem;   /* 22px - navbar bar */
  --radius-card: 1.875rem;  /* 30px - cards, panels */
  --radius-btn: 4.625rem;   /* 74px - CTA pill buttons */
  --radius-badge: 1rem;     /* 16px - small badges */

  --border-w: 0.125rem;     /* 2px - standard stroke */
  --border-w-thick: 0.25rem;/* 4px - emphasis */

  --container-max: 94.5rem; /* 1512px - design canvas width */

  --shadow-dot: 0 0.5rem 1.5rem rgba(6, 2, 76, 0.15);   /* timeline circle rest */
  --shadow-dot-h: 0 0.75rem 2rem rgba(6, 2, 76, 0.25);  /* timeline circle hover */

  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);     /* signature bouncy spring */

  --grad-lime-fade: linear-gradient(to right, rgba(158, 251, 0, 1) 0%, rgba(158, 251, 0, 0) 100%);
  --grad-split: linear-gradient(to right, var(--accent) 50%, var(--secondary) 50%);
  --grad-footer: linear-gradient(to top, var(--accent) 0%, var(--text-light) 100%);
  --grad-eclipse: radial-gradient(circle, rgba(158, 251, 0, 1) 0%, rgba(158, 251, 0, 0) 100%);
}

/* CSS Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* Fluid scaling: 16px at 1512px viewport, scales proportionally down to 393px */
  /* Formula: 100vw / 94.5 = 100vw * 16 / 1512 */
  font-size: clamp(4.16px, calc(100vw / 94.5), 16px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

/* Mobile breakpoint - reset to fixed size for mobile layout */
@media (max-width: 393px) {
  html {
    font-size: 16px;
  }
}

body {
  font-family: 'Funnel Display', sans-serif;
  background-color: var(--secondary);
  color: var(--text-light);
  line-height: 1.5;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

/* ========================================
   TYPOGRAPHY CLASSES
======================================== */

/* Main Titles - 78px bold */
.main_title {
  font-family: 'Funnel Display', sans-serif;
  font-weight: 700;
  font-size: 4.875rem;      /* 78/16 */
  line-height: 100%;
  letter-spacing: 0%;
}

/* Titles - 40px regular */
.title {
  font-family: 'Funnel Display', sans-serif;
  font-weight: 400;
  font-size: 2.5rem;        /* 40/16 */
  line-height: 1;
  letter-spacing: 0%;
}

/* Middle - 25px regular */
.middle {
  font-family: 'Funnel Display', sans-serif;
  font-weight: 400;
  font-size: 1.5625rem;     /* 25/16 */
  line-height: 115%;
  letter-spacing: 0%;
}

/* Hits - 80px italic serif */
.hits {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-style: italic;
  font-size: 5rem;          /* 80/16 */
  line-height: 80%;
  letter-spacing: 0%;
}

/* Text - 17px regular */
.text {
  font-family: 'Funnel Display', sans-serif;
  font-weight: 400;
  font-size: 1.0625rem;     /* 17/16 */
  line-height: 1.4;
  letter-spacing: 0%;
}

/* Results Number - 102px italic serif */
.results_number {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-style: italic;
  font-size: 6.375rem;      /* 102/16 */
  line-height: 80%;
  letter-spacing: 0%;
}

/* Results Unit - 64px italic serif */
.results_unit {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-style: italic;
  font-size: 4rem;          /* 64/16 */
  line-height: 80%;
  letter-spacing: 0%;
}

/* Results Unit Small - 48px italic serif (for "confidence rate") */
.results_unit_small {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-style: italic;
  font-size: 3rem;          /* 48/16 */
  line-height: 79%;
  letter-spacing: 0%;
}

/* ========================================
   UTILITY CLASSES
======================================== */

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

/* ========================================
   LAYOUT UTILITIES
======================================== */

.container {
  max-width: 94.5rem;       /* 1512/16 */
  margin: 0 auto;
  width: 100%;
}

/* ========================================
   NAVIGATION BAR
======================================== */

/* Sticky wrapper strip: navy band the page scrolls under */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;                      /* Above all content */
  padding: 1.125rem 3.75rem 0;        /* 18/16 top offset, 60/16 sides */
  background-color: var(--secondary); /* #050549 behind the pill bar */
}

.navbar_bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 5.625rem;                   /* 90/16 */
  padding: 0 2.5rem;                  /* 40/16 - Internal padding */
  background-color: var(--variant);   /* #0A0A6D */
  border-radius: 1.375rem;            /* 22/16 */
}

/* Type-set wordmark - no logo SVG exists, the mark IS type */
.navbar_wordmark {
  font-family: 'Funnel Display', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;                  /* 24/16 */
  letter-spacing: -0.01em;
  color: var(--text-light);
  line-height: 1;
  white-space: nowrap;
}

.navbar_right {
  display: flex;
  align-items: center;
  gap: 2.25rem;                       /* 36/16 - spacing between links and tile */
}

.navbar_link {
  font-family: 'Funnel Display', sans-serif;
  font-weight: 400;
  font-size: 1rem;                    /* 16/16 */
  color: var(--text-light);
  transition: color var(--transition-fast);
}

.navbar_link:hover {
  color: var(--accent);
}

/* "zb" monogram tile - lime mark on purple-navy rounded tile */
.zb_tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5625rem;                   /* 41/16 - approx 1.7x of 24px text */
  height: 2.5625rem;
  background-color: var(--variant);   /* #0A0A6D */
  border-radius: 0.5625rem;           /* ~22% of tile */
  font-family: 'Funnel Display', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;                  /* ~0.8x of wordmark size */
  color: var(--accent);
  line-height: 1;
  flex-shrink: 0;
}

.navbar_monogram_link {
  display: flex;
  align-items: center;
}

/* Mobile Top Bar - Floating transparent container */
.mobile_top_bar {
  display: none;  /* Hidden on desktop */
}

@media (max-width: 768px) {
  .mobile_top_bar {
    display: flex;
    justify-content: flex-end;   /* Monogram tile anchored right */
    align-items: center;
    position: fixed;
    top: 0;
    right: 0;
    padding: 4vw;                /* Padding from edges */
    z-index: 1000;               /* Above all hero content */
    background: transparent;
    pointer-events: none;        /* Allow clicks to pass through the container */
  }

  .mobile_top_logo_link {
    pointer-events: auto;        /* But the actual link is clickable */
  }

  .zb_tile_mobile {
    width: 10.43vw;              /* 41px / 393px */
    height: 10.43vw;
    border-radius: 2.29vw;       /* ~22% of tile */
    font-size: 4.89vw;
  }
}

/* ========================================
   SECTION: HERO
======================================== */

.hero {
  position: relative;
  width: 100%;
  min-height: auto;                   /* Let content determine height */
  background-color: var(--secondary);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;                 /* Prevent horizontal scroll in hero */
  overflow-y: visible;
}

.hero_container {
  position: relative;
  max-width: 94.5rem;                 /* 1512/16 */
  width: 100%;
  margin: 0 auto;
  padding: 5rem 3.75rem 3.75rem;      /* 80/16 top, 60/16 sides/bottom */
  display: flex;
  flex-direction: column;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */
/*
  Note: Previous media queries at 1024px, 768px, 480px have been removed.
  Fluid scaling via rem units now handles proportional sizing automatically.
  Only the 393px mobile breakpoint remains (see html selector above).
*/

/* Hero content - visible by default (logo intro retired with the rebrand) */
.hero_state_2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.75rem;                       /* 60/16 */
  align-items: start;
}

/* Left Column */
.hero_left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.hero_headline {
  color: var(--accent);
  font-family: 'Funnel Display', sans-serif;
  font-weight: 700;
  font-size: 4rem;                    /* 64/16 */
  line-height: 1.05;
}

/* Right Column */
.hero_right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 1.875rem;                      /* 30/16 */
  padding-top: 1.25rem;               /* 20/16 */
}

.hero_shape {
  width: 12.5rem;                     /* 200/16 */
  height: 12.5rem;                    /* 200/16 */
  transition: transform var(--transition-medium);
  cursor: pointer;
}

.hero_shape:hover {
  transform: rotate(90deg);
}

.hero_body_text {
  font-family: 'Funnel Display', sans-serif;
  text-align: right;
  max-width: 32.5rem;                 /* 520/16 */
  font-size: 1.625rem;                /* 26/16 */
  line-height: 1.5;
}

.hero_body_text .highlight {
  font-weight: 700;
  font-size: 1.875rem;                /* 30/16 */
  display: block;
  margin-bottom: 0.375rem;            /* 6/16 */
}

/* Hero CTAs - giant text links */
.hero_ctas {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 4rem;                   /* 64/16 */
}

.hero_cta {
  font-family: 'Funnel Display', sans-serif;
  font-weight: 700;
  font-size: 3rem;                    /* 48/16 */
  line-height: 0.85;                  /* Tighter to remove descender gap */
  letter-spacing: 0%;
  color: var(--accent);
  transition: color var(--transition-fast);
  display: block;
}

.hero_cta:hover {
  color: var(--text-light);
}

/* ========================================
   SECTION: CREDENTIALS (Frame 2)
======================================== */

.credentials {
  position: relative;
  width: 100%;
  min-height: 47.5rem;                /* 760/16 */
  background-color: var(--text-light); /* #F2F2F2 */
  overflow: hidden;
}

.credentials_container {
  position: relative;
  max-width: 94.5rem;                 /* 1512/16 */
  width: 100%;
  min-height: 47.5rem;                /* 760/16 */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr; /* 50/50 split - responsive */
}

/* Petal Grid */
.credentials_petals {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Responsive instead of 379px 379px */
  grid-template-rows: 1fr 1fr;    /* Responsive instead of 380px 380px */
  width: 100%;
  max-width: 47.375rem;               /* 758/16 - Cap at original size */
  height: auto;
  max-height: 47.5rem;                /* 760/16 - Cap at original size */
  aspect-ratio: 758 / 760; /* Maintain proportions when scaling */
}

/* Individual Petals */
.petal {
  color: var(--accent); /* Default: lime green */
  cursor: pointer;
  transition: color var(--transition-fast);
}

.petal svg {
  display: block;
  width: 100%;
  height: 100%;
}

.petal.petal_active {
  color: var(--secondary); /* Active: dark navy */
}

/* Petal positioning */
.petal_top_left {
  grid-column: 1;
  grid-row: 1;
}

.petal_top_right {
  grid-column: 2;
  grid-row: 1;
}

/* Wrapper for bottom-left petal + gradient (unified hover area) */
.petal_bottom_left_wrapper {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  cursor: pointer;
  overflow: visible; /* Allow SVG to extend beyond grid cell */
}

/* When inside wrapper, petal fills the wrapper */
.petal_bottom_left_wrapper .petal_bottom_left {
  position: absolute;
  top: 0;
  right: 0; /* Align right edge with wrapper */
  width: 281.3125rem;                 /* 4501/16 */
  height: 23.75rem;                   /* 380/16 */
  pointer-events: none; /* Let wrapper handle all events */
  /* Note: Base color and transition defined in .petal_bottom_left below */
}

/* Bottom-left petal base styles (independent from .petal) */
.petal_bottom_left {
  color: var(--accent); /* Default: lime green #9EFB00 */
  cursor: pointer;
  transition: color var(--transition-fast); /* Explicit 0.3s ease */
}

.petal_bottom_left svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Bottom-left petal active state (independent from .petal_active) */
.petal_bottom_left.petal_active {
  color: var(--secondary); /* Active: dark navy #050549 */
}

.petal_bottom_right {
  grid-column: 2;
  grid-row: 2;
}

/* Content Area (Right Side) */
.credentials_content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 3.75rem;              /* 60/16 */
}

.credentials_gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 47.5rem;                /* 760/16 - Cap at petal grid max height */
  background: linear-gradient(to right, rgba(158, 251, 0, 1) 0%, rgba(158, 251, 0, 0) 100%);
  pointer-events: none;
  z-index: 1;
}

.credentials_text_container {
  position: relative;
  z-index: 1;
}

/* Text Styling */
.credentials_text {
  font-family: 'Funnel Display', sans-serif;
  font-weight: 700;
  font-size: 3.75rem;                 /* 60/16 */
  line-height: 1.02;
  letter-spacing: 0%;
  color: var(--secondary); /* Dark navy */
  opacity: 0;
  position: absolute;
  transition: opacity var(--transition-fast);
  pointer-events: none;
}

.credentials_text.text_active {
  opacity: 1;
  position: relative;
  pointer-events: auto;
}

/* ========================================
   SECTION: RESULTS (Frame 3)
======================================== */

.results {
  position: relative;
  width: 100%;
  /* height removed - now auto to accommodate inline Who/What sections */
  background-color: var(--text-light); /* #F2F2F2 */
  display: flex;
  flex-direction: column;
  overflow: visible; /* Changed from hidden to prevent clipping inline sections */
}

/* Marquee Banner */
.results_marquee {
  width: 100%;
  overflow: hidden;
  padding: 1.875rem 0 1.25rem 0;   /* 30/16 top, 20/16 bottom */
  position: relative;
}

.results_marquee_track {
  display: flex;
  gap: 3.75rem;                    /* 60/16 */
  animation: marquee-scroll 40s linear infinite;
  width: max-content;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.results_marquee_text {
  color: var(--secondary);
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-block;
  letter-spacing: 0.05em;
}

@keyframes marquee-scroll {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

/* Results Container */
.results_container {
  max-width: 94.5rem;              /* 1512/16 */
  width: 100%;
  margin: 0 auto;
  padding: 0 3.75rem;              /* 60/16 */
  flex: 1;
  display: flex;
  align-items: center;
}

/* Cards Grid */
.results_cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;                     /* 24/16 */
  width: 100%;
}

/* Individual Card */
.results_card {
  border: 0.125rem solid var(--secondary);  /* 2/16 */
  border-radius: var(--radius-md); /* 30/16 */
  padding: 1.875rem;               /* 30/16 */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: flex-start;
  min-height: 0;
}

/* Card Label */
.results_label {
  color: var(--secondary);
  margin-bottom: 1.25rem;          /* 20/16 */
  flex-shrink: 0;
}

/* Card Number (uses .results_number class from typography) */
.results_card .results_number {
  color: var(--secondary);
  display: block;
  margin-bottom: 0;
  flex-shrink: 0;
}

/* Card Unit (uses .results_unit class from typography) */
.results_card .results_unit {
  color: var(--secondary);
  display: block;
  margin-bottom: 3.375rem;         /* 54/16 */
  flex-shrink: 0;
}

/* Card Unit Small (uses .results_unit_small class) */
.results_card .results_unit_small {
  color: var(--secondary);
  display: block;
  margin-bottom: 2.875rem;         /* 46/16 */
  flex-shrink: 0;
}

/* Card Description - aligned to top within remaining space */
.results_description {
  color: var(--secondary);
  margin-top: auto;
  flex-shrink: 1;
}

/* ========================================
   SECTION: WHY CHOOSE US (Frame 4)
======================================== */

.why_choose_us {
  position: relative;
  width: 100%;
  background-color: var(--text-light); /* #F2F2F2 */
  padding: var(--space-lg) 0 5rem 0; /* 60/16 top, 80/16 bottom */
  overflow: visible;
}

.why_choose_us_container {
  max-width: 94.5rem;              /* 1512/16 */
  width: 100%;
  margin: 0 auto;
  padding: 0 3.75rem;              /* 60/16 */
}

.why_choose_us_title {
  color: var(--secondary);
  margin-bottom: 2.5rem;           /* 40/16 */
  font-weight: 700;
}

/* Cards Container */
.why_choose_us_cards {
  display: flex;
  gap: 1.5rem;                     /* 24/16 */
  justify-content: center;
  align-items: flex-start;
  padding: 0 2rem;
  transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Individual Card - Collapsed State */
.why_card {
  width: 12.375rem;                /* 198/16 */
  height: 12.5rem;                 /* 200/16 */
  border: 0.125rem solid var(--secondary);  /* 2/16 */
  border-radius: var(--radius-md); /* 30/16 */
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;     /* Align to top instead of center */
  padding-top: 2.5rem;             /* Fixed top padding for icon alignment */
  cursor: pointer;
  transition: all var(--transition-card);
  overflow: hidden;
  flex-shrink: 0;
  position: relative;              /* For absolute positioning of close button */
  box-sizing: border-box;
}

/* Close button - hidden by default */
.why_card_close {
  display: none;
  position: absolute;
  top: 1.25rem;                    /* 20/16 */
  right: 1.25rem;                  /* 20/16 */
  width: 2.5rem;                   /* 40/16 */
  height: 2.5rem;                  /* 40/16 */
  border-radius: 50%;
  background-color: var(--secondary);
  color: var(--text-light);
  border: none;
  font-size: 2rem;                 /* 32/16 */
  cursor: pointer;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  z-index: 10;
  transition: all var(--transition-card);
}

/* Card Icon */
.why_card_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--secondary);
  transition: all var(--transition-card);
}

.why_card_icon svg {
  width: 4.9375rem;                /* 79/16 */
  height: 4.9375rem;               /* 79/16 */
  transition: all var(--transition-card);
}

/* Card Content */
.why_card_content {
  text-align: center;
  padding: 0 1.875rem;             /* 30/16 */
  transition: all var(--transition-card);
}

.why_card_title {
  font-family: 'Funnel Display', sans-serif;
  font-weight: 400;
  font-size: 1.0625rem;            /* 17/16 */
  color: var(--secondary);
  margin-bottom: 0;
  margin-top: 0.75rem;             /* 12/16 */
  transition: all var(--transition-card);
  opacity: 1;
  line-height: 1.4;
}

.why_card.card_expanded .why_card_title {
  margin-bottom: 1rem;             /* 16/16 */
}

.why_card_description {
  font-family: 'Funnel Display', sans-serif;
  font-weight: 400;
  font-size: 1.125rem;             /* 18/16 */
  color: var(--secondary);
  line-height: 1.4;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all var(--transition-card);
}

/* Card - Expanded State */
.why_card.card_expanded {
  width: 33.6875rem;               /* 539/16 */
  height: 27.5rem;                 /* 440/16 */
  justify-content: flex-start;
  padding-top: 3.75rem;            /* 60/16 */
  z-index: 100;                    /* Ensure expanded card appears above backgrounds */
}

.why_card.card_expanded .why_card_close {
  display: flex;
}

.why_card.card_expanded .why_card_icon {
  margin-bottom: 2.5rem;           /* 40/16 */
}

.why_card.card_expanded .why_card_icon svg {
  width: 11.3125rem;               /* 181/16 */
  height: 11.3125rem;              /* 181/16 */
}

.why_card.card_expanded .why_card_title {
  font-size: 1.5625rem;            /* 25/16 */
  font-weight: 700;
  line-height: 115%;
}

.why_card.card_expanded .why_card_description {
  opacity: 1;
  max-height: 12.5rem;             /* 200/16 */
  padding-bottom: 2.5rem;          /* Space for Claude Code Native pill */
}

/* ========================================
   SECTION: GUMLOOP (Frame 5)
======================================== */

.gumloop {
  width: 100vw;
  min-height: 23.75rem;            /* 380/16 - intentionally slim strip */
  margin-left: calc(-50vw + 50%);
  background: linear-gradient(to right, var(--accent) 50%, var(--secondary) 50%);
  display: flex;
  align-items: stretch;
}

.gumloop_container {
  max-width: 94.5rem;              /* 1512/16 */
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Logo Area (Left, lime half) */
.gumloop_logo_area {
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  padding: 0 6.25rem 0 3.75rem;    /* 100/16 inner gutter, 60/16 outer */
}

.gumloop_logo_new {
  width: 100%;
  max-width: 22.5rem;              /* 360/16 */
  height: auto;
  color: var(--secondary);         /* Navy #050549 */
}

/* Content Area (Right, navy half) */
.gumloop_content {
  background-color: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3.75rem 3.75rem 3.75rem 6.25rem; /* 100/16 inner gutter */
}

.gumloop_heading {
  font-family: 'Funnel Display', sans-serif;
  font-weight: 700;
  font-size: 2.125rem;             /* 34/16 */
  line-height: 1.1;
  color: var(--text-light);
  margin-bottom: 1.5rem;           /* 24/16 */
}

.gumloop_description {
  color: var(--text-light);
  margin-bottom: 2.25rem;          /* 36/16 */
  max-width: 30rem;                /* 480/16 */
  line-height: 1.6;
}

/* Pill Button */
.gumloop_pill {
  /* Fit to text content */
  display: inline-flex;
  align-items: center;
  justify-content: left;
  width: fit-content;               /* Only as wide as the text */
  height: 3.25rem;                 /* 52/16 */
  border: 0.125rem solid var(--text-light);  /* 2/16 */
  border-radius: var(--radius-pill);
  padding: 0 1.5rem;               /* 24/16 */
  color: var(--text-light);
  font-family: 'Funnel Display', sans-serif;
  font-size: 1.0625rem;            /* 17/16 */
  text-align: left;
  transition: all var(--transition-fast);
}

.gumloop_pill:hover {
  background-color: var(--text-light);
  color: var(--secondary);
}

/* ========================================
   SECTION: HOW IT WORKS (Frame 6)
======================================== */

.how_it_works {
  position: relative;
  width: 100%;
  background-color: transparent;   /* Transparent - background is in .frame_6_bg */
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8rem 1.5rem 0 1.5rem;   /* 128/16 top */
  z-index: 3;                      /* Layer 4: Above shape (2) */
}

.how_it_works_container {
  max-width: 87.5rem;              /* 1400/16 */
  width: 100%;
  position: relative;
  z-index: 10;
}

/* Header: Title + Subtitle */
.how_it_works_header {
  margin-bottom: 4rem;
}

.how_it_works_title {
  color: var(--secondary);
  margin-bottom: 1rem;
}

.how_it_works_subtitle {
  font-family: 'Funnel Display', sans-serif;
  font-size: 1.125rem;             /* 18/16 */
  font-weight: 500;
  line-height: 1.5;
  color: var(--secondary);         /* Navy text */
  max-width: 40rem;
}


/* Horizontal Timeline */
.how_it_works_timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 6rem;
  padding: 0 3rem;
}

/* Connecting Line */
.timeline_line {
  position: absolute;
  top: calc(3rem + 2rem); /* Week label height + gap + half circle */
  left: 3rem;
  right: 3rem;
  height: 0.25rem;                 /* 4px line */
  background-color: var(--secondary);
  z-index: 0;
}

/* Timeline Step */
.timeline_step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* Week Label (above circle) */
.timeline_week {
  font-family: 'Funnel Display', sans-serif;
  font-size: 1.25rem;              /* 20/16 */
  font-weight: 700;
  line-height: 1.15;
  color: var(--secondary);
  margin-bottom: 0.75rem;
}

/* Circle with Number */
.timeline_circle {
  width: 4rem;                     /* 64px */
  height: 4rem;
  border-radius: 50%;
  background-color: var(--accent); /* #7BFF00 Lime */
  border: 0.25rem solid var(--secondary); /* 4px navy border */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.5rem 1.5rem rgba(6, 2, 76, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.timeline_circle:hover {
  transform: scale(1.1);
  box-shadow: 0 0.75rem 2rem rgba(6, 2, 76, 0.25);
}

.timeline_number {
  font-family: 'Funnel Display', sans-serif;
  font-size: 1.5rem;               /* 24/16 */
  font-weight: 700;
  color: var(--secondary);
}

/* Description (below circle) */
.timeline_description {
  font-family: 'Funnel Display', sans-serif;
  font-size: 1rem;                 /* 16/16 */
  font-weight: 400;
  line-height: 1.5;
  color: var(--secondary);         /* Navy text */
  max-width: 12.5rem;              /* 200px */
  margin-top: 0.75rem;
}

/* ========================================
   FRAME 6 & 7 WRAPPER
   5-layer stack: wrapper > backgrounds > shape > content
======================================== */

.frame_6_7_wrapper {
  position: relative;
  width: 100%;
  overflow-y: hidden;              /* Clip decorative shape vertically to prevent overflow into CTA section */
  overflow-x: visible;             /* Allow cards to extend horizontally without clipping */
}

/* Layer 1: Frame 6 Background (light) */
.frame_6_bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 58%;                     /* Covers top portion (Frame 6 area) */
  background-color: var(--text-light); /* #F2F2F2 */
  z-index: 1;
}

/* Layer 2: Frame 7 Background (navy) */
.frame_7_bg {
  position: absolute;
  top: 42%;                        /* Starts above middle - gives pricing title room in navy */
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--secondary); /* #050549 */
  z-index: 1;
}

/* Layer 3: Unified Decorative Shape */
.decorative_shape_unified {
  position: absolute;
  bottom: -4.125rem;               /* -66/16 - repositioned to account for extended height */
  left: 0;
  width: 47.25rem;                 /* 756/16 */
  height: 75rem;                   /* 1200/16 - extended height for 4th path */
  z-index: 2;                      /* Above backgrounds (1), below content (3) */
  pointer-events: none;
}

/* Extension to left edge of screen */
.decorative_shape_unified::before {
  content: '';
  position: absolute;
  top: 0;
  right: 100%;
  width: 100vw;
  height: 100%;
  background-color: var(--variant); /* #0A0A6D */
}

.decorative_shape_svg {
  width: 100%;
  height: 100%;
  color: var(--variant);           /* #0A0A6D */
}

/* ========================================
   SECTION: PRICING (Frame 7)
======================================== */

.pricing {
  position: relative;
  width: 100%;
  background-color: transparent;   /* Transparent - background is in .frame_7_bg */
  padding: 18.75rem 0 6.25rem 0;   /* 300/16 top, 100/16 bottom */
  overflow: visible;
  z-index: 3;                      /* Layer 4: Above shape (2) */
}

/* Section Title */
.pricing_section_title {
  font-family: 'Funnel Display', sans-serif;
  font-weight: 700;
  font-size: 2.5rem;               /* 40/16 */
  line-height: 1;
  color: var(--text-light);        /* White text on navy background */
  margin-bottom: 3.75rem;          /* 60/16 */
  padding-top: 6.25rem;            /* 100/16 - push down into navy */
  position: relative;
  z-index: 4;                      /* Above decorative shape (2) */
}

/* Container */
.pricing_container {
  position: relative;
  max-width: 94.5rem;              /* 1512/16 */
  width: 100%;
  margin: 0 auto;
  padding: 0 3.75rem;              /* 60/16 sides only */
}

/* Cards Row - 3-up grid directly on navy, no panel */
.pricing_cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: 2.5rem;                     /* 40/16 */
}

/* Individual Card */
.pricing_card {
  background-color: #FFFFFF;       /* White card on navy */
  border: 0.125rem solid var(--accent);  /* 2/16 */
  border-radius: var(--radius-md); /* 30/16 */
  padding: 4.25rem 2.5rem 3.75rem 2.5rem;  /* 68/16 40/16 60/16 40/16 */
  display: flex;
  flex-direction: column;
}

/* Card Title Wrapper - tier name + optional badge in one row */
.pricing_card_title_wrapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;                     /* 8/16 */
}

/* Card Title - Instrument Serif Italic */
.pricing_card_title {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 3rem;                 /* 48/16 */
  line-height: 112%;
  color: var(--secondary);
  margin: 0;
}

/* Features List */
.pricing_features {
  list-style: none;
  padding: 1.75rem 0 0 0.9375rem;  /* 28/16 top, 15/16 left */
  margin: 0;
  flex: 1;                         /* Fill remaining space, push CTA to bottom */
}

.pricing_features li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;                    /* 12/16 */
  font-family: 'Funnel Display', sans-serif;
  font-size: 1.0625rem;            /* 17/16 */
  line-height: 140%;
  color: var(--secondary);
  margin-bottom: 0.5rem;           /* 8/16 - tightened for denser cards */
}

.pricing_features li:last-child {
  margin-bottom: 0;
}

/* Bullet Point Shape */
.pricing_bullet {
  flex-shrink: 0;
  width: 0.625rem;                 /* 10/16 */
  height: 0.625rem;                /* 10/16 */
  margin-top: 0.375rem;            /* 6/16 */
  color: var(--secondary);
}

/* Pill Button */
.pricing_pill {
  /* Fixed dimensions - text doesn't affect size */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%; /* Full width of card */
  height: 3.25rem;                 /* 52/16 */
  border: 0.125rem solid var(--secondary);  /* 2/16 */
  border-radius: 4.625rem;         /* 74/16 */
  padding: 0 1.25rem;              /* 20/16 */
  background-color: transparent;
  color: var(--secondary);
  font-family: 'Funnel Display', sans-serif;
  font-size: 1.0625rem;            /* 17/16 */
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 2rem;                /* 32/16 - gap after features */
}

.pricing_pill:hover {
  background-color: var(--secondary);
  color: var(--text-light);
}

/* Badge - Lime green pill inline next to tier name */
.pricing_addon_badge {
  display: inline-block;
  background-color: var(--accent);
  color: var(--secondary);
  font-family: 'Funnel Display', sans-serif;
  font-size: 0.75rem;              /* 12/16 */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.25rem 0.75rem;        /* 4/16 12/16 */
  border-radius: 1rem;             /* 16/16 */
}

/* Includes line - italic subtitle under the tier name */
.pricing_includes_line {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 1.125rem;             /* 18/16 */
  line-height: 140%;
  color: var(--secondary);
  margin: 0.75rem 0 0;             /* 12/16 top */
  padding-left: 0.9375rem;        /* 15/16 - match features list indent */
}

/* Enterprise card - subtle differentiation with thicker border */
.pricing_card_enterprise {
  border-width: 0.25rem;           /* 4/16 - doubled from 2px */
  padding-top: 4.125rem;           /* 4.25 - 0.125 = compensate thicker border under border-box */
  min-height: 45rem;               /* 720/16 - extra room for 8 FR bullets + includes line */
}



/* Security Trust Strip - Desktop */
.security_strip {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;                     /* 40/16 */
  margin-top: 3rem;                /* 48/16 */
  padding: 0 1rem;
}

.security_strip_item {
  display: flex;
  align-items: center;
  gap: 0.5rem;                     /* 8/16 */
  font-family: 'Funnel Display', sans-serif;
  font-size: 0.8125rem;            /* 13/16 */
  color: var(--secondary);         /* Navy text on light bg */
  background: var(--text-light);   /* #F2F2F2 - matches card background */
  padding: 0.375rem 0.75rem;       /* 6/16 12/16 */
  border-radius: 1rem;             /* 16/16 - pill shape */
  border: 0.125rem solid var(--accent); /* Lime green border - matches cards */
}

.security_strip_icon {
  width: 1rem;                     /* 16/16 */
  height: 1rem;
  color: var(--secondary);         /* Navy icon on light bg */
  flex-shrink: 0;
}

/* ========================================
   CTA INLINE SECTIONS (After Marquee Banner)
   Who this is for + What you get - moved up in page flow
======================================== */

/* Desktop inline CTA section */
.cta_section_inline {
  display: block;
  width: 100%;
  background-color: var(--text-light); /* #F2F2F2 */
  padding: 5rem 0;
}

.cta_section_inline .cta_container {
  max-width: 94.5rem;
  width: 100%;
  margin: 0 auto;
  padding: 0 3.75rem;
}

/* Mobile inline CTA section */
.cta_mobile_inline {
  display: none;
  width: 100%;
  background-color: var(--text-light);
  padding: 3rem 1.5rem;
  position: relative;
}

/* Hide desktop inline on mobile, show mobile inline */
@media (max-width: 768px) {
  .cta_section_inline {
    display: none;
  }

  .cta_mobile_inline {
    display: block;
  }
}

/* ========================================
   CTA SECTION (Frame 8 - Top)
======================================== */

.cta_section {
  position: relative;
  width: 100%;
  background-color: var(--text-light); /* #F2F2F2 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.cta_container {
  position: relative;
  max-width: 94.5rem;              /* 1512/16 */
  width: 100%;
  margin: 0 auto;
  padding: 3.75rem;                /* 60/16 all sides */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  z-index: 5;                      /* Above decorative shape (z-index: 2) */
}

/* Two-Column Layout */
.cta_columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.75rem;                    /* 60/16 */
  position: relative;
  align-items: start;              /* Align columns at top for i18n title length differences */
}

.cta_column {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.cta_column_left {
  padding-right: 4rem;               /* Push content left - reduced for i18n */
}

.cta_column_right {
  padding-left: 4rem;                /* Add left padding - reduced for i18n */
}

/* Column Titles */
.cta_column_title {
  color: var(--secondary); /* #050549 - Navy */
  margin-bottom: 2rem;             /* 32/16 */
  margin-left: -0.625rem;          /* -10/16 */
}

/* Checkbox List */
.cta_checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cta_checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;                    /* 12/16 */
  margin-bottom: 1rem;             /* 16/16 */
  color: var(--secondary); /* #050549 */
}

.cta_checkbox {
  width: 1.125rem;                 /* 18/16 */
  height: 1.125rem;                /* 18/16 */
  flex-shrink: 0;
  color: var(--secondary);
  margin-top: 0.1875rem;           /* 3/16 */
}

/* Eclipse Decorations */
.cta_eclipse {
  position: absolute;
  width: 15.5rem;                  /* 248/16 */
  height: 15.5rem;                 /* 248/16 */
  pointer-events: none;
  z-index: 0;
}

.cta_eclipse_left {
  /* Shifted right for i18n text accommodation */
  top: 1.25rem;                    /* 20/16 */
  left: 24rem;                     /* 384/16 - shifted +6.5rem from original */
}

.cta_eclipse_right {
  /* Shifted right for i18n text accommodation */
  top: 1.25rem;                    /* 20/16 */
  left: 19rem;                     /* 304/16 - shifted +6.5rem from original */
}

/* ========================================
   FOOTER SECTION (Frame 8 - Bottom)
======================================== */

.footer {
  position: relative;
  width: 100%;
  background: linear-gradient(to top, var(--accent) 0%, var(--text-light) 100%);
  padding: 0;                      /* No padding */
  display: flex;
  align-items: center;
  z-index: 5;                      /* Above decorative shape (z-index: 2) */
}

/* Footer wrapper - quote, buttons, stacked wordmark, legal line */
.footer_wrapper {
  max-width: 82rem;                /* 1312/16 */
  width: 100%;
  margin: 0 auto;
  /* Generous vertical space so the off-white -> lime gradient ramps
     slowly, like the pre-rebrand footer (~750px tall). A short footer
     compresses the gradient into a muddy blend. */
  padding: 8.75rem 3.75rem 3.75rem; /* 140/16 top, 60/16 sides, 60/16 bottom */
  text-align: center;
  position: relative;
  z-index: 5;                      /* Above decorative shape (z-index: 2) */
}

/* Pull quote */
.footer_quote {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 2.75rem;              /* 44/16 */
  line-height: 1.1;
  color: var(--secondary);
  max-width: 56.25rem;             /* 900/16 */
  margin: 0 auto 3rem;             /* 48/16 below */
}

/* Footer Buttons - centered row */
.footer_buttons_row {
  display: flex;
  justify-content: center;
  gap: 1.25rem;                    /* 20/16 */
  margin-bottom: 10rem;            /* 160/16 - lime builds through this gap */
  flex-wrap: wrap;
}

.footer_pill {
  /* Fixed equal width so both pills read as matched capsules and the
     pair's visual center lines up with the wordmark/tile below —
     "Follow on LinkedIn" is the longer label, so it sets the width
     (min-width alone let it grow wider than "Email me" and pull the
     pair's visual weight left of true center). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14.5rem;                  /* 232/16 - fits "Follow on LinkedIn" */
  height: 3.5rem;                  /* 56/16 */
  border: 0.125rem solid var(--secondary);  /* 2/16 */
  border-radius: 4.625rem;         /* 74/16 */
  padding: 0 2rem;                 /* 32/16 */
  background-color: transparent;
  color: var(--secondary);
  font-family: 'Funnel Display', sans-serif;
  font-size: 1.125rem;             /* 18/16 */
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.footer_pill:hover {
  background-color: var(--secondary);
  color: var(--text-light);
}

/* Solid navy pill - inverts on hover */
.footer_pill_solid {
  background-color: var(--secondary);
  color: var(--text-light);
}

.footer_pill_solid:hover {
  background-color: transparent;
  color: var(--secondary);
}

/* Stacked wordmark - monogram tile above the type-set name */
.footer_wordmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;                       /* 16/16 */
  margin-bottom: 1.25rem;          /* 20/16 */
}

.zb_tile_footer {
  width: 3.4rem;                   /* ~1.7x of 32px name */
  height: 3.4rem;
  border-radius: 0.75rem;          /* ~22% of tile */
  font-size: 1.6rem;
}

.footer_wordmark_name {
  font-family: 'Funnel Display', sans-serif;
  font-weight: 700;
  font-size: 2rem;                 /* 32/16 */
  letter-spacing: -0.01em;
  color: var(--secondary);
  line-height: 1;
}

/* Legal line */
.footer_legal {
  font-family: 'Funnel Display', sans-serif;
  font-size: 0.875rem;             /* 14/16 */
  color: var(--secondary);
  opacity: 0.7;
  margin: 0;
}

/* ========================================
   MOBILE STYLES - Hero Section (Frame 1)
   Breakpoint: 768px and below
======================================== */

/* Hide mobile elements on desktop */
.hero_state_2_mobile {
  display: none;
}

.credentials_mobile {
  display: none;
}

.results_cards_mobile {
  display: none;
}

.why_choose_us_mobile {
  display: none;
}

.gumloop_mobile {
  display: none;
}

.how_mobile {
  display: none;
}

.pricing_mobile {
  display: none;
}

.transformation_mobile {
  display: none;
}

@media (max-width: 768px) {
  /* Adjust html font-size for mobile */
  html {
    font-size: 16px;
  }

  /* Body background matches gradient bottom - prevents gap at page end */
  body {
    background-color: var(--accent);
  }

  /* Hide desktop credentials, show mobile version */
  .credentials .credentials_container {
    display: none !important;
  }

  /* Override desktop credentials section styling on mobile */
  .credentials {
    min-height: auto;
    /* background-color stays as var(--text-light) */
    overflow: visible;
  }

  /* ========================================
     HERO - Mobile Adjustments
     All values in vw for proportional scaling
     Base viewport: 393px (Figma design)
     Formula: vw = (px / 393) × 100
  ======================================== */

  .hero {
    min-height: auto; /* Remove fixed min-height, let content determine height */
  }

  .hero_container {
    position: relative;
    min-height: auto; /* Remove fixed min-height, let content determine height */
    padding: 5.09vw 5.09vw 0 5.09vw; /* 20px top/sides, 0 bottom */
  }

  /* Hero Mobile - visible by default (logo intro retired) */
  .hero_state_2_mobile {
    display: flex !important;
    flex-direction: column;
    opacity: 1;
    position: relative;
    z-index: 1;
  }

  /* Hide desktop state 2 on mobile */
  .hero_state_2 {
    display: none !important;
  }

  /* Hide desktop CTAs on mobile */
  .hero_ctas_desktop {
    display: none !important;
  }

  /* Hide navbar on mobile (use icon instead) */
  .navbar {
    display: none;
  }

  /* ----------------------------------------
     Z Symbol Icon (top right) - NOW HIDDEN
     Logo is now in the mobile_top_bar floating container
  ---------------------------------------- */
  .hero_mobile_icon {
    display: none;  /* Hidden - logo is now in mobile_top_bar */
  }

  /* ----------------------------------------
     Petal Wrapper - Hidden on mobile
  ---------------------------------------- */
  .hero_mobile_petal_wrapper {
    display: none;
  }

  /* ----------------------------------------
     Text Container
     Uses margin-top for spacing (not absolute)
     Gap: 24px between text elements
  ---------------------------------------- */
  .hero_mobile_text_container {
    position: relative;
    margin-top: 10vw; /* Raised up */
    display: flex;
    flex-direction: column;
    gap: 6.11vw;         /* 24px / 393px */
    overflow: hidden;    /* Prevent i18n text overflow */
  }

  /* ----------------------------------------
     Text 1: Green headline
     Font: 72px, max-width: 336px
  ---------------------------------------- */
  .hero_mobile_text_green {
    font-family: 'Funnel Display', sans-serif;
    font-weight: 700;
    font-size: 11vw;  /* 72px / 393px */
    line-height: 1;
    color: var(--accent); /* #9EFB00 */
    max-width: 85.5vw;   /* 336px / 393px */
  }

  /* ----------------------------------------
     Text 2: White body text
     Font: 20px, max-width: 336px (same as green)
  ---------------------------------------- */
  .hero_mobile_text_white {
    font-family: 'Funnel Display', sans-serif;
    font-weight: 400;
    font-size: 4.0vw;   /* 20px / 393px */
    line-height: 1.2;
    color: var(--text-light); /* #F2F2F2 */
    max-width: 85.5vw;   /* 336px / 393px - match green headline */
  }

  .hero_mobile_text_bold {
    font-weight: 700;
  }

  /* ----------------------------------------
     Mobile CTAs
     Font: 54px
  ---------------------------------------- */
  .hero_ctas_mobile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2vw;
    padding-top: 6vw;
    padding-bottom: 8vw;              /* ~31px / 393px */
  }

  .hero_cta_mobile {
    font-family: 'Funnel Display', sans-serif;
    font-weight: 700;
    font-size: 9.16vw;   /* 36px / 393px - fits longer CTA copy */
    line-height: 0.85;   /* Tighter to remove descender gap */
    color: var(--accent);
    transition: color var(--transition-fast);
    display: block;
  }

  .hero_cta_mobile:hover,
  .hero_cta_mobile:active {
    color: var(--text-light);
  }

  /* Animation wrapper adjustments for mobile */
  .logo_animation_wrapper {
    max-width: 100%;
    overflow: visible; /* Allow slide-up animation to exit container bounds */
  }

  /* ----------------------------------------
     Slide-up animation - longer duration for mobile
     Mobile screens are taller, needs more time to exit
  ---------------------------------------- */
  .logo_final_container.slide-up-out {
    animation: slide-up-out 1200ms ease-in-out forwards; /* 1200ms vs 600ms desktop */
  }

  /* ========================================
     CREDENTIALS - Mobile Version (Frame 2)
     All values in vw for proportional scaling
     Base viewport: 393px (Figma design)
     Formula: vw = (px / 393) × 100
  ======================================== */

  /* Show mobile credentials */
  .credentials_mobile {
    display: block;
    position: relative;
    width: 100%;
  }

  /* Background gradient - contains all content */
  .credentials_mobile_bg {
    position: relative;
    width: 100%;
    min-height: 194.4vw;  /* 764px / 393px */
    background: linear-gradient(to right, var(--accent), rgba(158, 251, 0, 0));
    padding: 0 5.09vw;    /* 20px / 393px */
    padding-bottom: 8.14vw; /* 32px / 393px - extra bottom spacing */
  }

  /* ----------------------------------------
     Rows container
     Gap: 15px between petal and text
     Margin-bottom: 32px between rows
  ---------------------------------------- */
  .credentials_mobile_row {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 3.82vw;          /* 15px / 393px */
    padding-left: 0;
    margin-bottom: 8.14vw; /* 32px / 393px */
  }

  /* First row top spacing */
  .credentials_mobile_row:first-child {
    padding-top: 11.96vw; /* 47px / 393px */
  }

  /* ----------------------------------------
     Petal images
     49×49px at 393px viewport
     margin-top aligns petal with first line of text
  ---------------------------------------- */
  .credentials_mobile_petal {
    width: 12.47vw;   /* 49px / 393px */
    height: 12.47vw;
    flex-shrink: 0;   /* Don't shrink petal */
    margin-top: 1.53vw; /* 6px / 393px - adjust to align with text */
  }

  /* Petal rotations for correct orientation */
  .credentials_mobile_row:nth-child(1) .credentials_mobile_petal {
    transform: rotate(90deg); /* Petal 1: rounded bottom-left */
  }

  .credentials_mobile_row:nth-child(2) .credentials_mobile_petal {
    transform: rotate(-180deg); /* Petal 2: rounded top-left */
  }

  .credentials_mobile_row:nth-child(3) .credentials_mobile_petal {
    transform: rotate(270deg); /* Petal 3: rounded top-right */
  }

  .credentials_mobile_row:nth-child(4) .credentials_mobile_petal {
    transform: rotate(0deg); /* Petal 4: rounded bottom-right */
  }

  /* ----------------------------------------
     Text styling
     Font: 32px, fills remaining space
  ---------------------------------------- */
  .credentials_mobile_text {
    font-family: 'Funnel Display', sans-serif;
    font-weight: 700;
    font-size: 8.14vw;    /* 32px / 393px */
    line-height: 1.1;
    color: var(--secondary);
    flex: 1;              /* Take remaining space */
    width: 100%;          /* Fill available width */
    padding-right: 7.63vw; /* 30px / 393px */
  }

  /* ========================================
     RESULTS SECTION - Mobile Marquee Only
     Shows just the "REAL RESULTS" scrolling banner
     All values in vw for proportional scaling
  ======================================== */

  /* Show results section on mobile */
  .results {
    display: flex !important;
    height: auto;
    background-color: var(--text-light); /* #F2F2F2 */
  }

  /* Hide the cards container - only show marquee */
  .results_container {
    display: none !important;
  }

  /* Mobile marquee styling */
  .results_marquee {
    padding: 5.09vw 0; /* 20px / 393px */
  }

  /* Mobile marquee text - 25px */
  .results_marquee_text {
    font-family: 'Funnel Display', sans-serif;
    font-weight: 400;
    font-size: 6.36vw; /* 25px / 393px */
    color: var(--secondary); /* #050549 */
  }

  /* Keep gap proportional */
  .results_marquee_track {
    gap: 10.18vw; /* 40px / 393px - slightly tighter than desktop */
  }

  /* ========================================
     RESULTS CARDS - Mobile Version
     Vertical stack of 4 cards
     All values in vw for proportional scaling
  ======================================== */

  /* Cards container */
  .results_cards_mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7.63vw;           /* 30px / 393px */
    padding: 7.63vw 0;     /* 30px top/bottom */
    width: 100%;
  }

  /* Individual card */
  .results_card_mobile {
    width: 78.88vw;        /* 310px / 393px */
    height: 109.16vw;      /* 429px / 393px */
    background-color: var(--text-light); /* #F2F2F2 */
    border: 0.51vw solid var(--secondary); /* 2px / 393px */
    border-radius: 7.63vw; /* 30px / 393px */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5.09vw;       /* 20px / 393px */
  }

  /* Label (Before/After/ROI/Accuracy) */
  .results_card_mobile_label {
    font-family: 'Funnel Display', sans-serif;
    font-weight: 400;
    font-size: 6.36vw;     /* 25px / 393px */
    line-height: 1.15;
    color: var(--secondary);
    margin-bottom: 2.54vw; /* 10px / 393px */
  }

  /* Main number */
  .results_card_mobile_number {
    font-family: 'Instrument Serif', serif;
    font-weight: 400;
    font-style: italic;
    font-size: 25.95vw;    /* 102px / 393px */
    line-height: 0.8;
    color: var(--secondary);
  }

  /* Unit (hours/minutes/dollars) */
  .results_card_mobile_unit {
    font-family: 'Instrument Serif', serif;
    font-weight: 400;
    font-style: italic;
    font-size: 16.28vw;    /* 64px / 393px */
    line-height: 0.8;
    color: var(--secondary);
    margin-bottom: 5.09vw; /* 20px / 393px */
  }

  /* Description text */
  .results_card_mobile_desc {
    font-family: 'Funnel Display', sans-serif;
    font-weight: 400;
    font-size: 4.33vw;     /* 17px / 393px */
    line-height: 1.4;
    color: var(--secondary);
    max-width: 56.74vw;    /* 223px / 393px */
  }

  /* Accuracy card - smaller number and unit */
  .results_card_mobile_accuracy .results_card_mobile_number {
    font-size: 21.88vw;    /* 86px / 393px */
    line-height: 0.9;
  }

  .results_card_mobile_accuracy .results_card_mobile_unit {
    font-size: 12.21vw;    /* 48px / 393px */
    line-height: 0.79;
  }

  /* ========================================
     WHY CHOOSE US - Mobile Version
     2×3 grid that reflows when card expands
     All values in vw for proportional scaling
  ======================================== */

  /* Hide desktop version on mobile */
  .why_choose_us_cards {
    display: none !important;
  }

  .why_choose_us_title {
    display: none !important;
  }

  /* Show mobile version */
  .why_choose_us_mobile {
    display: block;
    padding: 5.09vw;           /* 20px */
    background-color: var(--text-light);
  }

  /* Section container adjustments */
  .why_choose_us {
    min-height: auto;
    padding: 0;
  }

  .why_choose_us_container {
    padding: 0;
  }

  /* Title */
  .why_choose_us_mobile_title {
    font-family: 'Funnel Display', sans-serif;
    font-weight: 700;
    font-size: 13.74vw;        /* 54px / 393px */
    line-height: 1;
    color: var(--secondary);
    margin-bottom: 5.09vw;     /* 20px */
  }

  /* Grid container - 2 columns with animated column widths */
  .why_cards_mobile_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4.58vw;               /* 18px / 393px */
    transition: grid-template-columns 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
  }

  /* When left column card is expanded - right column shrinks to 0 */
  .why_cards_mobile_grid.expand-left {
    grid-template-columns: 1fr 0fr;
  }

  /* When right column card is expanded - left column shrinks to 0 */
  .why_cards_mobile_grid.expand-right {
    grid-template-columns: 0fr 1fr;
  }

  /* Individual card - collapsed state */
  .why_card_mobile {
    width: 100%;               /* Fill grid cell - grid controls actual width */
    min-width: 0;              /* Allow shrinking below content size */
    height: 43.5vw;            /* Explicit height for animation (aspect ~150:151) */
    background-color: var(--text-light);
    border: 0.51vw solid var(--secondary); /* 2px / 393px */
    border-radius: 7.63vw;     /* 30px / 393px */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    padding: 3.82vw;           /* 15px / 393px - inner padding for text breathing room */
    overflow: hidden;
    touch-action: manipulation; /* Disable double-tap-to-zoom for faster click response */
    -webkit-tap-highlight-color: transparent; /* Remove tap highlight on iOS */
    /* Simplified transitions - grid handles width animation */
    transition: height 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
                opacity 0.3s ease;
  }

  /* Close button - hidden by default */
  .why_card_mobile_close {
    display: none;
    position: absolute;
    top: 4.07vw;               /* 16px / 393px */
    right: 4.07vw;
    width: 7.12vw;             /* 28px / 393px */
    height: 7.12vw;
    border-radius: 50%;
    background-color: var(--secondary);
    color: var(--text-light);
    border: none;
    font-size: 5.09vw;         /* 20px / 393px */
    cursor: pointer;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    z-index: 10;
  }

  /* Icon - collapsed */
  .why_card_mobile_icon {
    width: 15.01vw;            /* 59px / 393px */
    height: 15.01vw;
    margin-bottom: 2.54vw;     /* 10px / 393px */
    /* Match card animation speed */
    transition: width 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
                height 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
                margin-bottom 0.4s ease-in-out;
    will-change: width, height;
  }

  .why_card_mobile_icon svg {
    width: 100%;
    height: 100%;
    color: var(--secondary);
  }

  /* Label - collapsed */
  .why_card_mobile_label {
    font-family: 'Funnel Display', sans-serif;
    font-weight: 400;
    font-size: 4.33vw;         /* 17px / 393px */
    line-height: 1.15;         /* Better for two-line text */
    color: var(--secondary);
    text-align: center;
    max-width: 80%;            /* Force long labels like "Strategic Innovator" to wrap */
    /* Match card animation speed */
    transition: font-size 0.4s ease-in-out,
                font-weight 0.4s ease-in-out;
  }

  /* Description - hidden by default */
  .why_card_mobile_desc {
    display: none;
    font-family: 'Funnel Display', sans-serif;
    font-weight: 400;
    font-size: 4.33vw;         /* 17px / 393px */
    line-height: 1.2;
    color: var(--secondary);
    text-align: center;
    max-width: 49.11vw;        /* 193px / 393px */
    opacity: 0;
    transition: opacity 0.3s ease-in-out 0.2s; /* Fade in after card starts expanding */
  }

  /* ========================================
     ANIMATION STATES
  ======================================== */

  /* Expanded card - base styles */
  .why_card_mobile.card-expanded {
    height: 94vw;              /* Explicit height for proper proportions */
    padding: 5.09vw;           /* 20px */
    z-index: 10;
    /* NO grid-column span needed - grid column animation handles width */
  }

  .why_card_mobile.card-expanded .why_card_mobile_close {
    display: flex;
  }

  .why_card_mobile.card-expanded .why_card_mobile_icon {
    width: 35.88vw;            /* 141px / 393px */
    height: 35.88vw;
    margin-bottom: 3.82vw;     /* 15px */
  }

  .why_card_mobile.card-expanded .why_card_mobile_label {
    font-weight: 700;
    font-size: 6.36vw;         /* 25px / 393px */
    line-height: 1.15;
    margin-bottom: 2.54vw;     /* 10px */
  }

  .why_card_mobile.card-expanded .why_card_mobile_desc {
    display: block;
    opacity: 1;
  }

  /* ----------------------------------------
     Collapsed Column Fade
     Cards in the shrinking column fade out
  ---------------------------------------- */

  /* When left column expands, fade out right column cards (odd: 2nd, 4th, 6th) */
  .why_cards_mobile_grid.expand-left .why_card_mobile:nth-child(even) {
    opacity: 0;
    pointer-events: none;
  }

  /* When right column expands, fade out left column cards (even: 1st, 3rd, 5th) */
  .why_cards_mobile_grid.expand-right .why_card_mobile:nth-child(odd) {
    opacity: 0;
    pointer-events: none;
  }

  /* Mirror close button position for left column cards */
  .why_cards_mobile_grid.expand-left .why_card_mobile.card-expanded .why_card_mobile_close {
    left: 4.07vw;
    right: auto;
  }

  /* ========================================
     GUMLOOP SECTION - Mobile Version (Frame 6)
     "Our Secret Weapon" section
     All values in vw for proportional scaling
  ======================================== */

  /* Show gumloop section on mobile */
  .gumloop {
    display: block !important;
    min-height: auto;
    height: auto;                        /* Override fixed 47.25rem height */
    padding: 0;
    background: var(--secondary);        /* Override gradient - solid navy */
    margin-left: 0;                      /* Override negative margin */
    width: 100%;                         /* Override 100vw */
  }

  /* Hide desktop gumloop content */
  .gumloop_container {
    display: none !important;
  }

  /* Show mobile gumloop */
  .gumloop_mobile {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  /* Lime band with Gumloop logo (mirrors the desktop 50/50 split) —
     kept compact so it reads as a header strip for the section below,
     not a full-bleed splash screen before any context is given. */
  .gumloop_mobile_logo_band {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--accent);   /* Lime */
    padding: 6vw 10.97vw;
  }

  .gumloop_logo_mobile {
    width: 100%;
    max-width: 38vw;
    height: auto;
    color: var(--secondary);           /* Navy logo on lime */
  }

  /* Navy body with text + CTA */
  .gumloop_mobile_body {
    display: flex;
    flex-direction: column;
    background-color: var(--secondary); /* #050549 */
    padding: 13.49vw 10.97vw 16vw 10.97vw;
  }

  /* Title */
  .gumloop_mobile_title {
    font-family: 'Funnel Display', sans-serif;
    font-weight: 700;
    font-size: 9.16vw;         /* 36px / 393px */
    line-height: 1.1;
    color: var(--text-light);  /* #F2F2F2 */
    margin-bottom: 6vw;
  }

  /* Body text */
  .gumloop_mobile_text {
    font-family: 'Funnel Display', sans-serif;
    font-weight: 400;
    font-size: 4.33vw;         /* 17px / 393px */
    line-height: 1.4;
    color: var(--text-light);  /* #F2F2F2 */
    max-width: 68.11vw;        /* 267.681px / 393px */
    margin-bottom: 10.18vw;    /* ~40px gap */
  }

  /* CTA Button - pill outline style */
  .gumloop_mobile_cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 73.47vw;            /* 288.735px / 393px */
    height: 10.94vw;           /* 43px / 393px */
    border: 0.51vw solid var(--text-light); /* 2px / 393px */
    border-radius: 18.83vw;    /* 74px / 393px - pill shape */
    font-family: 'Funnel Display', sans-serif;
    font-weight: 400;
    font-size: 4.33vw;         /* 17px / 393px */
    color: var(--text-light);  /* #F2F2F2 */
    text-decoration: none;
    transition: background-color var(--transition-fast), color var(--transition-fast);
  }

  .gumloop_mobile_cta:hover,
  .gumloop_mobile_cta:active {
    background-color: var(--text-light);
    color: var(--secondary);
  }

  /* ========================================
     HOW IT WORKS - Mobile Version (Frame 7)
     Expandable week circles
     All values in vw for proportional scaling
  ======================================== */

  /* Show how it works section on mobile */
  .how_it_works {
    display: block !important;
    min-height: auto;
    height: auto;              /* Override fixed height from desktop */
    padding: 5.09vw;           /* 20px / 393px */
    background-color: var(--text-light); /* #F2F2F2 */
  }

  /* Hide desktop content */
  .how_it_works_container {
    display: none !important;
  }

  /* Hide background layers and shape on mobile */
  .frame_6_bg,
  .frame_7_bg,
  .decorative_shape_unified {
    display: none !important;
  }

  /* Show mobile version - Timeline Layout */
  .how_mobile {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0 6vw;
  }

  /* Title */
  .how_mobile_title {
    font-family: 'Funnel Display', sans-serif;
    font-weight: 700;
    font-size: 13.74vw;        /* 54px / 393px */
    line-height: 1;
    color: var(--secondary);   /* Navy */
    margin-bottom: 2vw;
  }

  /* Subtitle */
  .how_mobile_subtitle {
    font-family: 'Funnel Display', sans-serif;
    font-weight: 500;
    font-size: 4.5vw;          /* ~18px / 393px */
    line-height: 1.4;
    color: var(--secondary);   /* Navy - matching other text */
    margin-bottom: 8vw;
    max-width: 80vw;
  }

  /* Timeline container */
  .how_mobile_timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10vw;                 /* More spacing between steps */
    padding-bottom: 2vw;       /* Prevent line overflow */
  }

  /* Vertical connecting line */
  .how_mobile_line {
    position: absolute;
    left: 8vw;                 /* Center of circle (16vw / 2) */
    top: 8vw;                  /* Start from center of first circle */
    height: calc(100% - 16vw); /* Stop at center of last circle */
    width: 1vw;
    background-color: var(--secondary);
    transform: translateX(-50%);
    z-index: 1;
  }

  /* Each step container */
  .how_mobile_step {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    position: relative;
    z-index: 2;
  }

  /* Numbered circle - matches desktop .timeline_circle */
  .how_mobile_circle {
    width: 16vw;               /* ~63px / 393px */
    height: 16vw;
    border-radius: 50%;
    background-color: var(--accent);   /* Lime green #9EFB00 */
    border: 1vw solid var(--secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0.5rem 1.5rem rgba(6, 2, 76, 0.15);
    position: relative;
    z-index: 3;                /* Above the line */
  }

  /* Step number inside circle */
  .how_mobile_number {
    font-family: 'Funnel Display', sans-serif;
    font-size: 6vw;
    font-weight: 700;
    color: var(--secondary);   /* Navy */
  }

  /* Content container (week + description) */
  .how_mobile_content {
    margin-left: 6vw;
    display: flex;
    flex-direction: column;
    padding-top: 2vw;          /* Better vertical alignment */
  }

  /* Week label */
  .how_mobile_week {
    font-family: 'Funnel Display', sans-serif;
    font-size: 5vw;            /* ~20px / 393px */
    font-weight: 700;
    color: var(--secondary);   /* Navy */
    margin-bottom: 1vw;
  }

  /* Description text */
  .how_mobile_desc {
    font-family: 'Funnel Display', sans-serif;
    font-size: 4vw;            /* ~16px / 393px */
    font-weight: 400;
    color: var(--secondary);   /* Navy - visible on light background */
    line-height: 1.4;
  }

  /* How It Works - CTA (Mobile) */
  .how_it_works_cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4vw;
    padding: 8vw 0;
    margin-top: 0;
  }

  .how_it_works_cta_text {
    font-size: 6vw;
  }

  .how_it_works_cta_btn {
    min-width: 80vw;
    height: auto;
    padding: 4vw 6vw;
    font-size: 4.5vw;
  }

  /* ========================================
     PRICING - Mobile Version (Frame 7)
     Vertically stacked pricing cards
     All values in vw for proportional scaling
     Base viewport: 393px (Figma design)
     Formula: vw = (px / 393) × 100
  ======================================== */

  /* Show pricing section on mobile */
  .pricing {
    display: block !important;
    min-height: auto;
    padding: 0;
    background-color: var(--secondary); /* Navy #050549 */
  }

  /* Hide desktop content */
  .pricing_container {
    display: none !important;
  }

  /* Show mobile version */
  .pricing_mobile {
    display: block;
    width: 100%;
    padding: 16.54vw 0 10.18vw 0; /* 65px top, 40px bottom */
  }

  /* Title */
  .pricing_mobile_title {
    font-family: 'Funnel Display', sans-serif;
    font-weight: 700;
    font-size: 13.74vw;        /* 54px / 393px */
    line-height: 1;
    color: var(--text-light);  /* White #F2F2F2 */
    padding: 0 8.40vw;         /* 33px / 393px - left padding to match cards */
    margin-bottom: 12.72vw;    /* 50px / 393px - gap before first card */
  }

  /* Cards container */
  .pricing_cards_mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7.63vw;               /* 30px / 393px */
    width: 100%;
  }

  /* Individual card */
  .pricing_card_mobile {
    width: 83.46vw;            /* 328px / 393px */
    background-color: #FFFFFF; /* White card on navy */
    border: 0.51vw solid var(--accent);  /* 2px / 393px, green #9EFB00 */
    border-radius: 7.63vw;     /* 30px / 393px */
    padding: 12vw 7.63vw 10.18vw 7.63vw; /* 47px 30px 40px 30px */
    display: flex;
    flex-direction: column;
  }

  /* Card title wrapper - tier name + optional inline badge */
  .pricing_card_mobile_title_wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2vw;
    margin-bottom: 0;          /* Includes line provides the gap */
  }

  /* Card title */
  .pricing_card_mobile_title {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 12.21vw;        /* 48px / 393px */
    line-height: 112%;
    color: var(--secondary);   /* Navy #050549 */
    margin: 0;
  }

  /* Features list */
  .pricing_features_mobile {
    list-style: none;
    padding: 0;
    margin: 0 0 auto 0;        /* Push button to bottom */
  }

  .pricing_features_mobile li {
    display: flex;
    align-items: flex-start;
    gap: 3.82vw;               /* 15px / 393px */
    font-family: 'Funnel Display', sans-serif;
    font-size: 4.33vw;         /* 17px / 393px */
    line-height: 200%;         /* Double line height for spacing */
    color: var(--secondary);   /* Navy */
  }

  /* Quarter circle bullet */
  .pricing_bullet_mobile {
    flex-shrink: 0;
    width: 2.54vw;             /* 10px / 393px */
    height: 2.54vw;
    margin-top: 3.05vw;        /* 12px / 393px - align with text top */
    color: var(--secondary);
    /* No rotation - curves to bottom-right */
  }

  /* CTA pill button */
  .pricing_pill_mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 50.64vw;        /* ~199px / 393px */
    height: 10.18vw;           /* 40px / 393px */
    border: 0.51vw solid var(--secondary); /* 2px / 393px - standard stroke */
    border-radius: 18.83vw;    /* 74px / 393px */
    padding: 0 5.09vw;         /* 20px / 393px */
    background-color: transparent;
    color: var(--secondary);
    font-family: 'Funnel Display', sans-serif;
    font-size: 4.33vw;         /* 17px / 393px */
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 7.63vw;        /* 30px / 393px */
    align-self: center;
  }

  .pricing_pill_mobile:hover,
  .pricing_pill_mobile:active {
    background-color: var(--secondary);
    color: var(--text-light);
  }

  /* Add-on Badge - Mobile */
  .pricing_addon_badge_mobile {
    display: inline-block;
    background-color: var(--accent);
    color: var(--secondary);
    font-family: 'Funnel Display', sans-serif;
    font-size: 3.05vw;            /* 12px / 393px */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 1.02vw 3.05vw;       /* 4px 12px / 393px */
    border-radius: 4.07vw;        /* 16px / 393px */
    margin-top: 0;
    margin-bottom: 3.05vw;        /* 12px / 393px - gap before features */
    margin-left: 3.82vw;          /* 15px / 393px - align with feature text */
  }

  /* Includes line - Mobile - italic subtitle under tier name */
  .pricing_includes_line_mobile {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-size: 4.58vw;            /* 18px / 393px */
    line-height: 140%;
    color: var(--secondary);
    margin: 2vw 0 5vw 0;          /* gap between title row and features */
  }

  /* Inline badge next to tier name - Mobile */
  .pricing_badge_inline_mobile {
    margin: 0;
  }

  /* Security Trust Strip - Mobile */
  .security_strip_mobile {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 3.82vw;                   /* 15px / 393px */
    margin-top: 7.63vw;            /* 30px / 393px */
    padding: 0 5.09vw;             /* 0 20px / 393px */
  }

  .security_strip_item_mobile {
    display: flex;
    align-items: center;
    gap: 1.53vw;                   /* 6px / 393px */
    font-family: 'Funnel Display', sans-serif;
    font-size: 2.80vw;             /* 11px / 393px */
    color: var(--secondary);       /* Navy text on light bg */
    background: var(--text-light); /* #F2F2F2 - matches card background */
    padding: 1.27vw 3.05vw;        /* 5px 12px / 393px */
    border-radius: 4.07vw;         /* 16px / 393px - pill shape */
    border: 0.51vw solid var(--accent); /* Lime green border - matches cards */
  }

  .security_strip_icon_mobile {
    width: 3.56vw;                 /* 14px / 393px */
    height: 3.56vw;
    color: var(--secondary);       /* Navy icon on light bg */
    flex-shrink: 0;
  }

  /* ========================================
     CTA "WHO THIS IS FOR" - Mobile Version
     Layered design: white bg → eclipse → content
     All values in vw for proportional scaling
     Base viewport: 393px (Figma design)
     Formula: vw = (px / 393) × 100
  ======================================== */

  /* Show CTA section on mobile */
  .cta_section {
    display: block !important;
    min-height: auto;
    padding: 0;
    margin: 0;
    background-color: var(--text-light); /* White #F2F2F2 */
  }

  /* Hide desktop content */
  .cta_container {
    display: none !important;
  }

  /* Show mobile version */
  .cta_mobile {
    display: block;
    position: relative;
    width: 100%;
    min-height: 100vw;         /* Roughly match content height */
    padding: 8.91vw 4.07vw;    /* 35px 16px */
    overflow: hidden;
  }

  /* Eclipse gradient - Layer 2 */
  .cta_mobile_eclipse {
    position: absolute;
    width: 63.10vw;            /* 248px / 393px */
    height: 63.10vw;
    left: 29.77vw;             /* 117px / 393px */
    top: 0;
    background: radial-gradient(circle, var(--accent) 0%, rgba(158, 251, 0, 0) 70%);
    pointer-events: none;
    z-index: 0;
  }

  /* Title */
  .cta_mobile_title {
    position: relative;
    font-family: 'Funnel Display', sans-serif;
    font-weight: 700;
    font-size: 13.74vw;        /* 54px / 393px */
    line-height: 1;
    color: var(--secondary);   /* Navy #050549 */
    margin-bottom: 10.18vw;    /* 40px / 393px */
    z-index: 1;
  }

  /* Checklist container */
  .cta_mobile_checklist {
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 1;
  }

  /* Checklist item */
  .cta_mobile_item {
    display: flex;
    align-items: flex-start;
    gap: 3.05vw;               /* 12px / 393px */
    margin-bottom: 5.09vw;     /* 20px / 393px */
    font-family: 'Funnel Display', sans-serif;
    font-weight: 700;
    font-size: 4.33vw;         /* 17px / 393px */
    line-height: 1.4;
    color: var(--secondary);   /* Navy */
  }

  .cta_mobile_item:last-child {
    margin-bottom: 0;
  }

  /* Checkbox */
  .cta_mobile_checkbox {
    flex-shrink: 0;
    width: 4.58vw;             /* 18px / 393px */
    height: 4.58vw;
    margin-top: 0.51vw;        /* 2px - align with text */
    color: var(--secondary);   /* Navy fill */
  }

  /* Second section (What you get) - eclipse positioning */
  .cta_mobile_checklist + .cta_mobile_eclipse {
    top: auto;                 /* Remove fixed top */
    position: relative;        /* Flow with document */
    margin-bottom: -63.10vw;   /* Full height negative margin - eclipse takes no vertical space */
  }

  /* SPACING: Gap between "Value speed and transparency" and "What you get" title */
  .cta_mobile_checklist + .cta_mobile_eclipse + .cta_mobile_title {
    position: relative;
    z-index: 1;
    margin-top: 10.0vw;        /* <-- ADJUST THIS VALUE (currently 20px) */
  }

  /* ========================================
     MOBILE: Start Your Transformation Section
  ======================================== */
  .transformation_mobile {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 8.91vw 0 0 0;     /* 35px top only */
    margin: 0;
    background-color: var(--text-light); /* White #F2F2F2 */
    overflow: hidden;          /* Clip any overflow */
    z-index: 5;                /* Above decorative shape (z-index: 2) */
  }

  /* Gradient overlay - green from bottom fading up */
  .transformation_mobile::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 102.54vw;          /* 403px / 393px */
    background: linear-gradient(to top, var(--accent) 0%, rgba(158, 251, 0, 0) 100%);
    pointer-events: none;
    z-index: 0;
  }

  /* Title link wrapper */
  .transformation_mobile_title_link {
    text-decoration: none;
    color: inherit;
    display: block;
  }

  /* Title - Instrument Serif Italic */
  .transformation_mobile_title {
    position: relative;
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 13.74vw;        /* 54px / 393px */
    line-height: 0.8;
    text-align: center;
    color: var(--secondary);   /* Navy #050549 */
    margin: 0 0 8.40vw 0;      /* 33px bottom margin */
    z-index: 1;
  }

  /* Body text */
  .transformation_mobile_body {
    position: relative;
    font-family: 'Funnel Display', sans-serif;
    font-weight: 700;
    font-size: 8.14vw;         /* 32px / 393px */
    line-height: 1;
    color: var(--secondary);
    padding: 0 11.20vw;        /* 44px left padding */
    margin: 0 0 10.18vw 0;     /* 40px bottom margin */
    z-index: 1;
  }

  /* Buttons container */
  .transformation_mobile_buttons {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.82vw;               /* 15px gap between buttons */
    z-index: 1;
  }

  /* Pill outline button */
  .transformation_mobile_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 53.69vw;        /* 211px / 393px - min for i18n */
    min-height: 10.18vw;       /* 40px / 393px - min for i18n */
    padding: 2vw 6vw;          /* Padding for i18n text */
    border: 0.51vw solid var(--secondary); /* 2px border */
    border-radius: 18.83vw;    /* 74px / 393px */
    background: transparent;
    font-family: 'Funnel Display', sans-serif;
    font-weight: 400;
    font-size: 4.33vw;         /* 17px / 393px */
    color: var(--secondary);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    box-sizing: border-box;    /* Include padding in size calculation */
  }

  .transformation_mobile_btn:hover {
    background-color: var(--secondary);
    color: var(--text-light);
  }

  /* Logo at bottom - MUST be flush with section bottom */
  .transformation_mobile_logo {
    position: relative;
    display: block;
    margin-top: 15.27vw;       /* 60px spacing */
    margin-bottom: 0;
    padding: 0;
    line-height: 0;
    font-size: 0;
    text-align: center;
    z-index: 1;
  }

  .transformation_mobile_logo img {
    width: 100.25vw;           /* 394px / 393px - full width */
    height: auto;
  }

  .transformation_mobile_logo svg {
    display: block;
    width: 100%;
    height: auto;
    color: var(--secondary);   /* Navy #050549 */
    margin: 0 0 -2.4vw 0;        /* Negative margin - overflow hidden will clip */
    padding: 0;
  }

}

/* ========================================
   CONTACT MODAL
======================================== */
.contact_modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.contact_modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact_modal.visible {
  opacity: 1;
}

/* Dark overlay */
.contact_modal_overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(5, 5, 73, 0.8); /* Navy with opacity */
  cursor: pointer;
}

/* Modal content box */
.contact_modal_content {
  position: relative;
  width: 90%;
  max-width: 500px;
  background-color: var(--text-light);
  border-radius: 1.5rem;
  padding: 3rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  transform: translateY(20px);
  transition: transform 0.3s ease;
  z-index: 1;
}

.contact_modal.visible .contact_modal_content {
  transform: translateY(0);
}

/* Close button */
.contact_modal_close {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  background: none;
  border: none;
  font-size: 2rem;
  color: var(--secondary);
  cursor: pointer;
  line-height: 1;
  padding: 0.5rem;
  transition: opacity 0.2s ease;
}

.contact_modal_close:hover {
  opacity: 0.7;
}

/* Modal title */
.contact_modal_title {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 2.5rem;
  color: var(--secondary);
  margin: 0 0 2rem 0;
  text-align: center;
}

/* Form styles */
.contact_form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact_form_row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.contact_form_input,
.contact_form_textarea {
  width: 100%;
  padding: 1rem 1.25rem;
  font-family: 'Funnel Display', sans-serif;
  font-size: 1rem;
  color: var(--secondary);
  background-color: transparent;
  border: 2px solid var(--secondary);
  border-radius: 0.75rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact_form_input::placeholder,
.contact_form_textarea::placeholder {
  color: rgba(5, 5, 73, 0.5);
}

.contact_form_input:focus,
.contact_form_textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(158, 251, 0, 0.2);
}

.contact_form_textarea {
  min-height: 120px;
  resize: vertical;
}

/* Submit button */
.contact_form_submit {
  margin-top: 0.5rem;
  padding: 1rem 2rem;
  font-family: 'Funnel Display', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-light);
  background-color: var(--secondary);
  border: 2px solid var(--secondary);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.contact_form_submit:hover {
  background-color: transparent;
  color: var(--secondary);
}

/* Honeypot field - hidden from users, catches bots */
.contact_form_honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  width: 0;
  pointer-events: none;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .contact_modal {
    height: 100dvh; /* Dynamic viewport height - shrinks when keyboard appears */
  }

  .contact_modal_content {
    width: 95%;
    max-height: 85dvh;
    overflow-y: auto;
    padding: 2rem 1.5rem;
    border-radius: 1rem;
  }

  .contact_modal_title {
    font-size: 2rem;
    margin-bottom: 1.5rem;
  }

  .contact_form_input,
  .contact_form_textarea {
    padding: 0.875rem 1rem;
    font-size: 16px; /* Prevents zoom on iOS */
  }
}

/* Tech Stack Badges Container (Gumloop section) */
.tech_stack_badges {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.tech_stack_badges .gumloop_pill {
  margin: 0;
}

.tech_stack_badges_mobile {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

.tech_stack_badges_mobile .gumloop_mobile_cta {
  margin: 0;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .tech_stack_badges {
    display: none; /* Hide desktop version on mobile */
  }
}

@media (min-width: 769px) {
  .tech_stack_badges_mobile {
    display: none; /* Hide mobile version on desktop */
  }
}


/* ========================================
   REBRAND 2026: ZACHARY BOLAND PERSONAL SITE
   New sections: Writing, What I'm deep in,
   Selected work header, Story title, Footer mobile
======================================== */

/* Anchored sections clear the sticky navbar (18px offset + 90px bar + gap) */
#writing,
#about,
#work,
#story,
#connect {
  scroll-margin-top: 7.5rem;           /* 120/16 */
}

/* ----------------------------------------
   SECTION: WRITING (blog index)
---------------------------------------- */
.writing {
  width: 100%;
  background-color: var(--text-light); /* #F2F2F2 */
  padding: 5.625rem 3.75rem;           /* 90/16 60/16 */
}

.writing_container {
  max-width: 87rem;                    /* 1392/16 */
  margin: 0 auto;
}

.writing_header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1rem;                 /* 16/16 */
}

.writing_title {
  font-family: 'Funnel Display', sans-serif;
  font-weight: 700;
  font-size: 2.5rem;                   /* 40/16 */
  line-height: 1;
  color: var(--secondary);
  margin: 0;
}

.writing_accent {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 1.5rem;                   /* 24/16 */
  color: var(--secondary);
}

.writing_intro {
  font-family: 'Funnel Display', sans-serif;
  font-size: 1.125rem;                 /* 18/16 */
  line-height: 1.5;
  color: var(--secondary);
  max-width: 42.5rem;                  /* 680/16 */
  margin: 0 0 3.5rem;                  /* 56/16 */
}

.writing_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;                           /* 32/16 */
}

/* Post card - whole card is a link, fills lime on hover */
.writing_card {
  display: flex;
  flex-direction: column;
  gap: 1rem;                           /* 16/16 */
  padding: 2.25rem;                    /* 36/16 */
  background: transparent;
  border: 0.125rem solid var(--secondary);
  border-radius: var(--radius-md);     /* 30/16 */
  text-decoration: none;
  transition: background var(--transition-fast);
}

.writing_card:hover {
  background: var(--accent);
}

.writing_card_kind {
  font-family: 'Funnel Display', sans-serif;
  font-weight: 700;
  font-size: 0.8125rem;                /* 13/16 */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--secondary);
}

.writing_card_title {
  font-family: 'Funnel Display', sans-serif;
  font-weight: 700;
  font-size: 1.625rem;                 /* 26/16 */
  line-height: 1.15;
  color: var(--secondary);
}

.writing_card_teaser {
  font-family: 'Funnel Display', sans-serif;
  font-size: 1rem;                     /* 16/16 */
  line-height: 1.5;
  color: var(--secondary);
}

.writing_card_status {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 1.125rem;                 /* 18/16 */
  color: var(--secondary);
  margin-top: auto;                    /* Push to card bottom */
}

/* ----------------------------------------
   SECTION: WHAT I'M DEEP IN
---------------------------------------- */
.deepin {
  width: 100%;
  background-color: var(--secondary);  /* Navy */
  padding: 5.625rem 3.75rem;           /* 90/16 60/16 */
}

.deepin_container {
  max-width: 87rem;                    /* 1392/16 */
  margin: 0 auto;
}

.deepin_title {
  font-family: 'Funnel Display', sans-serif;
  font-weight: 700;
  font-size: 2.5rem;                   /* 40/16 */
  line-height: 1;
  color: var(--text-light);
  margin: 0 0 0.75rem;                 /* 12/16 */
}

.deepin_subtitle {
  font-family: 'Funnel Display', sans-serif;
  font-size: 1.125rem;                 /* 18/16 */
  line-height: 1.5;
  color: var(--text-light);
  opacity: 0.85;
  max-width: 40rem;                    /* 640/16 */
  margin: 0 0 3.75rem;                 /* 60/16 */
}

.deepin_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;                           /* 32/16 */
}

.deepin_card {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;                       /* 14/16 */
  padding: 2.5rem;                     /* 40/16 */
  border: 0.125rem solid var(--accent);
  border-radius: var(--radius-md);     /* 30/16 */
}

.deepin_name {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 2.5rem;                   /* 40/16 */
  line-height: 1;
  color: var(--accent);
}

.deepin_blurb {
  font-family: 'Funnel Display', sans-serif;
  font-size: 1.0625rem;                /* 17/16 */
  line-height: 1.55;
  color: var(--text-light);
}

/* ----------------------------------------
   SECTION: SELECTED WORK (header above metric cards)
---------------------------------------- */
.work_header {
  max-width: 94.5rem;                  /* 1512/16 */
  width: 100%;
  margin: 0 auto;
  padding: 5.625rem 3.75rem 3rem;      /* 90/16 60/16 48/16 */
}

.work_title {
  font-family: 'Funnel Display', sans-serif;
  font-weight: 700;
  font-size: 2.5rem;                   /* 40/16 */
  line-height: 1;
  color: var(--secondary);
  margin: 0 0 0.75rem;                 /* 12/16 */
}

.work_intro {
  font-family: 'Funnel Display', sans-serif;
  font-size: 1.125rem;                 /* 18/16 */
  line-height: 1.5;
  color: var(--secondary);
  max-width: 40rem;                    /* 640/16 */
  margin: 0;
}

.work_section .results_container {
  padding-bottom: 5.625rem;            /* 90/16 */
}

/* ----------------------------------------
   SECTION: STORY SO FAR (title override)
---------------------------------------- */
.story_title {
  font-family: 'Funnel Display', sans-serif;
  font-weight: 700;
  font-size: 2.5rem;                   /* 40/16 */
  line-height: 1;
}

/* ----------------------------------------
   MOBILE: new sections + footer
---------------------------------------- */
@media (max-width: 768px) {
  /* Writing */
  .writing {
    padding: 12vw 5.09vw;
  }

  .writing_header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1vw;
    margin-bottom: 3vw;
  }

  .writing_title {
    font-size: 9.16vw;         /* 36px / 393px */
  }

  .writing_accent {
    font-size: 5.09vw;         /* 20px / 393px */
  }

  .writing_intro {
    font-size: 4.58vw;         /* 18px / 393px */
    margin-bottom: 8vw;
  }

  .writing_grid {
    grid-template-columns: 1fr;
    gap: 5.09vw;
  }

  .writing_card {
    gap: 3.5vw;
    padding: 7.63vw;
    border-width: 0.51vw;
    border-radius: 7.63vw;
  }

  .writing_card_kind {
    font-size: 3.31vw;         /* 13px / 393px */
  }

  .writing_card_title {
    font-size: 5.6vw;          /* 22px / 393px */
  }

  .writing_card_teaser {
    font-size: 4.07vw;         /* 16px / 393px */
  }

  .writing_card_status {
    font-size: 4.58vw;         /* 18px / 393px */
    margin-top: 2vw;
  }

  /* What I'm deep in */
  .deepin {
    padding: 12vw 5.09vw;
  }

  .deepin_title {
    font-size: 9.16vw;         /* 36px / 393px */
    margin-bottom: 2vw;
  }

  .deepin_subtitle {
    font-size: 4.58vw;         /* 18px / 393px */
    margin-bottom: 8vw;
  }

  .deepin_grid {
    grid-template-columns: 1fr;
    gap: 5.09vw;
  }

  .deepin_card {
    gap: 3vw;
    padding: 8.14vw;
    border-width: 0.51vw;
    border-radius: 7.63vw;
  }

  .deepin_name {
    font-size: 8.14vw;         /* 32px / 393px */
  }

  .deepin_blurb {
    font-size: 4.33vw;         /* 17px / 393px */
  }

  /* Selected work header */
  .work_header {
    padding: 10vw 5.09vw 2vw;
  }

  .work_title {
    font-size: 9.16vw;         /* 36px / 393px */
    margin-bottom: 2vw;
  }

  .work_intro {
    font-size: 4.58vw;         /* 18px / 393px */
  }

  /* Footer - visible on mobile with the rebrand */
  .footer_wrapper {
    padding: 20vw 6vw 12vw;
  }

  .footer_quote {
    font-size: 7.12vw;         /* 28px / 393px */
    margin-bottom: 10vw;
  }

  .footer_buttons_row {
    flex-direction: column;
    align-items: center;
    gap: 3vw;
    margin-bottom: 24vw;       /* lime builds through this gap */
  }

  .footer_pill {
    width: 73.47vw;            /* Match mobile pill width elsewhere */
    height: 12vw;
    font-size: 4.58vw;
    border-width: 0.51vw;
    border-radius: 18.83vw;
  }

  .footer_wordmark {
    gap: 3vw;
    margin-bottom: 4vw;
  }

  .zb_tile_footer {
    width: 12vw;
    height: 12vw;
    border-radius: 2.64vw;
    font-size: 5.6vw;
  }

  .footer_wordmark_name {
    font-size: 6.36vw;         /* 25px / 393px */
  }

  .footer_legal {
    font-size: 3.31vw;         /* 13px / 393px */
    line-height: 1.6;
  }
}

/* ========================================
   PAGE BLOCKS: reusable sub-page sections
   Copy-paste partials live in design-system/blocks/.
   Single responsive markup (no desktop/mobile duplication).
======================================== */

/* ----------------------------------------
   BLOCK: Sub-page hero (navy)
---------------------------------------- */
.subpage_hero {
  width: 100%;
  background-color: var(--navy);
  padding: 5rem 3.75rem 3.75rem;       /* 80/16 60/16 60/16 */
}

.subpage_hero_container {
  max-width: 87rem;                    /* 1392/16 */
  margin: 0 auto;
}

.subpage_hero_kicker {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8125rem;                /* 13/16 */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--off-white);
  opacity: 0.7;
  margin-bottom: 1rem;
}

.subpage_hero_title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 4rem;                     /* 64/16 - matches home hero */
  line-height: 1.05;
  color: var(--lime);
  margin: 0;
  max-width: 60rem;
}

.subpage_hero_accent {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.5rem;                   /* 24/16 */
  color: var(--off-white);
  margin-top: 1rem;
}

.subpage_hero_intro {
  font-family: var(--font-display);
  font-size: 1.125rem;                 /* 18/16 */
  line-height: 1.5;
  color: var(--off-white);
  max-width: 42.5rem;                  /* 680/16 */
  margin: 1.5rem 0 0;
}

/* ----------------------------------------
   BLOCK: Article / prose (off-white)
   Reading column for writing posts and text pages.
---------------------------------------- */
.article {
  width: 100%;
  background-color: var(--off-white);
  padding: 5.625rem 3.75rem;           /* 90/16 60/16 */
}

.article_container {
  max-width: 45rem;                    /* ~720px reading measure */
  margin: 0 auto;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 1.125rem;                 /* 18/16 */
  line-height: 1.7;
}

.article_meta {
  font-size: 0.8125rem;                /* 13/16 */
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 2rem;
}

.article_container h2 {
  font-weight: 700;
  font-size: 2rem;                     /* 32/16 */
  line-height: 1.15;
  margin: 3rem 0 1rem;
}

.article_container h3 {
  font-weight: 700;
  font-size: 1.375rem;                 /* 22/16 */
  line-height: 1.2;
  margin: 2rem 0 0.75rem;
}

.article_container p {
  margin: 0 0 1.25rem;
}

.article_container a {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: var(--lime);
  text-decoration-thickness: 0.125rem;
  text-underline-offset: 0.2em;
  transition: background var(--transition-fast);
}

.article_container a:hover {
  background: var(--lime);
}

.article_container ul,
.article_container ol {
  margin: 0 0 1.25rem;
  padding-left: 1.5rem;
}

.article_container li {
  margin-bottom: 0.5rem;
}

.article_container blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.5rem;                   /* 24/16 */
  line-height: 1.3;
  border-left: var(--border-w-thick) solid var(--lime);
  padding-left: 1.5rem;
  margin: 2rem 0;
}

.article_container img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  border: var(--border-w) solid var(--navy);
  margin: 0.5rem 0 1.25rem;
}

.article_container hr {
  border: none;
  border-top: var(--border-w) solid var(--navy);
  opacity: 0.15;
  margin: 3rem 0;
}

.article_container code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.9em;
  background: rgba(5, 5, 73, 0.08);
  padding: 0.1em 0.35em;
  border-radius: 0.375rem;
}

.article_container pre {
  background: var(--navy);
  color: var(--off-white);
  padding: 1.5rem;
  border-radius: 1rem;
  overflow-x: auto;
  margin: 0 0 1.25rem;
}

.article_container pre code {
  background: none;
  color: inherit;
  padding: 0;
}

/* ----------------------------------------
   PAGE BLOCKS: mobile
---------------------------------------- */
@media (max-width: 768px) {
  .subpage_hero {
    padding: 20vw 5.09vw 10vw;         /* top clears the fixed zb tile */
  }

  .subpage_hero_kicker {
    font-size: 3.31vw;
  }

  .subpage_hero_title {
    font-size: 9.16vw;                 /* 36px / 393px */
  }

  .subpage_hero_accent {
    font-size: 5.09vw;
  }

  .subpage_hero_intro {
    font-size: 4.58vw;
  }

  .article {
    padding: 10vw 5.09vw;
  }

  .article_container {
    font-size: 1.0625rem;              /* fixed 17px base reads well on mobile */
  }
}

/* Footer privacy link - subtle, matches legal line */
.footer_legal_link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: opacity var(--transition-fast);
}

.footer_legal_link:hover {
  opacity: 1;
  text-decoration-color: var(--navy);
}

/* ----------------------------------------
   BLOCK: Closer - off-white buffer strip
   Sits between a navy section and the gradient footer so white
   layers through before the lime ramp (mirrors the pre-rebrand
   "Start your transformation" strip). Giant serif-italic link.
---------------------------------------- */
.closer {
  width: 100%;
  background-color: var(--off-white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5.625rem 3.75rem;           /* 90/16 60/16 */
}

.closer_link {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 5rem;                     /* 80/16 - the classic .hits size */
  line-height: 0.9;
  color: var(--navy);
  text-align: center;
  text-decoration: none;
}

.closer_link:hover {
  text-decoration: underline;
  text-decoration-color: var(--lime);
  text-decoration-thickness: 0.25rem;
  text-underline-offset: 0.08em;
}

@media (max-width: 768px) {
  .closer {
    padding: 12vw 5.09vw;
  }

  .closer_link {
    font-size: 12.21vw;                /* 48px / 393px */
  }
}