/* Theme base styles */

/* Tools
Design tokens emitted as CSS custom properties on :root.
Macros (_macros.css) need to be imported into each stylesheet where used.
*/



:root {
  /* === Brand (marketer-tunable via Theme Settings) === */
  --color-brand-salmon: #FF725C;
  --color-brand-navy: #093555;
  --color-brand-mid-blue: #495883;

  /* === Brand: button gradient + border (designer-controlled, salmon-derived) === */
  --color-button-grad-start: #FF816D;
  --color-button-grad-end: #FF745E;
  --color-button-border: #DA624F;

  /* === Greys (11) === */
  --color-background: #FEFBF9;
  --color-white: #FFFFFF;
  --color-gray-1: #F9F9F9;
  --color-surface-stripe: #F7F4F4; /* warm zebra-stripe tint (table rows, between gray-1 and background) */
  --color-gray-2: #EDEDED;
  --color-gray-stroke: #E8E8E8;
  --color-gray-3: #D3D3D3;
  --color-gray-5: #A9A9A9;
  --color-gray-6: #7F7F7F;
  --color-gray-7: #545454;
  --color-gray-8: #292929;
  --color-text-primary: #353E5A;

  /* === AI gradient (5 stops + composed gradient) === */
  --color-ai-cyan: #14BACB;
  --color-ai-blue: #3898F0;
  --color-ai-violet: #8D6AE6;
  --color-ai-pink: #EC67A0;
  --color-ai-rose: #F59593;
  --gradient-ai: linear-gradient(
    90deg,
    var(--color-ai-cyan) 0%,
    var(--color-ai-blue) 25%,
    var(--color-ai-violet) 50%,
    var(--color-ai-pink) 75%,
    var(--color-ai-rose) 100%
  );

  /* === Dropdown surface (warm off-white, design system) === */
  --color-dropdown-bg: #fcfaf9;

  /* === Dropdown page scrim — fades the page behind an open desktop dropdown.
     Exact Figma fill (Dropdown frame): transparent gray-2 at the header edge
     deepening to rgba(45,45,45,.5) at the bottom of the viewport. Off-palette
     45/45/45 is design-specified (nearest token gray-8 #292929 is too dark);
     keep the literal. === */
  --gradient-scrim-dropdown: linear-gradient(
    180deg,
    rgba(237, 237, 237, 0) -2.85%,
    rgba(45, 45, 45, 0.5) 93.85%
  );

  /* === Feedback / status colours — PROVISIONAL ===
     The design system (Marketing 3.0) ships no success/error/warning palette.
     These are the values inherited from boilerplate form + system styling,
     hoisted into tokens so there is one change-point. CONFIRM exact values
     with Anjali, then finalise. Do not add more raw status hex to components. */
  --color-feedback-error: #ef6b51;
  --color-feedback-success-text: #4f7d24;
  --color-feedback-success-bg: #cde3cc;

  /* === Homepage capture colours — PROVISIONAL (no Figma variable exists;
     flagged in the Anjali review doc). homepage/{desktop,mobile}-sections.md */
  --color-alert: #e90f0f; /* "PROBLEM WITHOUT FELLO" overline red */
  --color-stat-positive: #098486; /* GCI calculator teal dollar values */

  /* === Semantic colour tokens — the public consumer-facing names ===
     Component CSS consumes THESE, never the brand primitives directly.
     Change a primitive (or its Theme Setting) and every consumer moves. */
  --color-bg-page: var(--color-background);
  --color-text-heading: var(--color-brand-navy);
  --color-text-body: var(--color-gray-7);
  --color-text-muted: var(--color-gray-6);
  /* Overlines + secondary-button ink. (Nav LABELS are navy per final header
     design 2026-06-11 — they use --color-text-heading, not this.) */
  --color-text-interactive: var(--color-brand-mid-blue);
  --color-border-default: var(--color-gray-stroke);
  /* Card/control hairlines (dropdown panel, mobile drawer cards, hamburger,
     Log In outline) — gray-3, deliberately darker than border-default. */
  --color-border-hairline: var(--color-gray-3);
  --color-border-btn: var(--color-button-border);
  --color-bg-dark: var(--color-brand-navy);
  /* Tinted interaction background — hover AND current-page state share it
     (final header design defines no separate active tint). */
  --color-nav-hover-bg: color-mix(in srgb, var(--color-brand-mid-blue) 5%, transparent);
  /* Button gradient is static across rest/hover/active — matches live
     fello.ai, where only shadow + transform change on interaction. */
  --gradient-btn-primary: linear-gradient(
    180deg,
    var(--color-button-grad-start),
    var(--color-button-grad-end)
  );

  /* === Typography — family only; type-scale lives in .t-* utility classes
     in elements/_typography.hubl.css. The Instrument Sans web font is loaded
     by a manual <link> in templates/layouts/base.hubl.html (NOT a fields.json
     font field — see that file for why). This is just the family reference. === */
  --font-body: "Instrument Sans", sans-serif;

  /* === Font-size scale — single source of truth for type size ===
     The .t-* utility classes AND component CSS both read these, so there
     is one place to retune a step. Base (body) is --font-size-md (16px). */
  --font-size-3xs: 10px;
  --font-size-2xs: 12px;
  --font-size-xs: 13px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-lg2: 20px; /* drawer "Meet Felix" panel title (mobile capture) */
  --font-size-xl: 24px;
  --font-size-2xl: 26px;
  --font-size-3xl: 40px;
  --font-size-4xl: 48px;
  --font-size-5xl: 56px;
  /* Display scale — oversized feature numbers (e.g. LP §8 results stats). */
  --font-size-6xl: 64px;
  --font-size-7xl: 72px;
  --font-size-8xl: 193px; /* LP §8 results "40%" — Figma 192.649 */

  /* === Spacing scale (8pt base, 14 tokens) === */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 40px;
  --space-3xl: 48px;
  --space-4xl: 64px;
  --space-5xl: 80px;
  --space-6xl: 96px;
  --space-7xl: 120px;
  --space-8xl: 160px;
  --space-9xl: 200px;

  /* Named off-grid values from the spec (canonicalised so they're not hardcoded) */
  --space-section-header: 62px;
  --space-hero-cta-gap: 26px;
  --space-headline-tight: 10px;
  /* Header capture 2026-06-11 (docs-cache/design-system/header/) */
  --space-nav-gap: 12px; /* nav item gap, top-of-page. Tightened 34→20→12 — design pass 2026-06-19, links too spread apart */
  --space-btn-cluster: 14px; /* gap between Log In + primary CTA */
  --letter-spacing-overline: 1.2px;

  /* === Layout (9 tokens) === */
  --layout-canvas-max: 1440px;
  --layout-content-max: 1344px;
  --layout-margin: 48px;
  --layout-col-gap: 24px;
  --layout-card-2col: 660px;
  --layout-card-3col: 432px;
  --layout-card-logo: 204px;
  --layout-card-height: 644px;

  /* === Header dimensions — final design capture 2026-06-11
     (docs-cache/design-system/header/{desktop,mobile}-states.md) === */
  --nav-height: 60px; /* desktop bar, no banner */
  --nav-height-banner: 67px; /* desktop bar as a 16px-top-radius sheet over the banner */
  --banner-height: 50px;
  --nav-pill-width: 1119px;
  --nav-pill-height: 54px;
  --nav-pill-top: 30px;
  --nav-height-mobile: 53px;
  --nav-pill-height-mobile: 53px;
  --nav-pill-inset-mobile: 12px;
  --drawer-bar-height: 64px; /* sticky drawer top bar (sub-pages) */
  --drawer-footer-height: 81px; /* sticky drawer footer */
  --drawer-footer-btn-height: 45px; /* Log In / CTA buttons in the footer */
  --control-size-mobile: 34px; /* hamburger / X / Back height */
  --logo-wordmark-width: 59.36px; /* desktop wordmark (Figma exact) */
  --logo-wordmark-height: 25.43px;
  --logo-mark-size: 28px; /* desktop pill mark */
  --logo-mark-size-mobile: 30.8px; /* mobile top-bar mark */

  /* === Footer dimensions — redesign 2026-06-12
     Full-bleed navy band + CSS dot texture (Figma m5ZAREKNUE56sUkiRNgTh1,
     frames 280:1348 desktop / 271:713 iPad / 271:828 mobile).
     Social radius is now --radius-sm (4px). Logo wordmark 40px height. === */
  --logo-footer-height: 40px; /* footer wordmark (Figma 93.4×40) */
  --footer-social-size: 40px; /* square social icon buttons */
  --footer-cta-width: 474px; /* brand-column / email-capture max-width */
  --footer-link-gap: 6px; /* overline→first-link + between nav links */
  /* Footer-own dot-grid pitch — 18px (tighter than the shared 24px used by
     testimonial.module). Kept here so tweaking the footer pitch never mutates
     the shared --dot-grid-pitch token that other modules depend on. */
  --footer-dot-grid-pitch: 18px;
  /* PROVISIONAL — no Figma variable; faint dot overlay on navy.
     colour-mix produces ~8% background on the navy surface.
     FLAG: confirm exact dot colour + pitch with Anjali once Figma
     tiled-watermark asset is confirmed (real pitch ~180px). */
  --footer-dot-color: color-mix(in srgb, var(--color-background) 8%, transparent);
  /* Visible focus ring for elements on the navy band. --shadow-focus-ring is
     rgba(255,114,92,0.2) — 20% opacity, invisible on dark. Solid salmon here
     gives ≥ 3:1 contrast on navy and is distinct from the cream social border. */
  --footer-focus-ring: 0 0 0 3px var(--color-brand-salmon);

  /* === Impact-ticker dimensions (homepage capture §2, Figma 73:2160) === */
  --ticker-dot-size: 2px; /* stat dot separator (ellipse) */

  /* === Logo-bar dimensions (homepage capture §3 desktop / §4 mobile) ===
     figmaName: null for all — desktop grid pitch defines the row height;
     mobile tile measured from Figma at 63.92px, snapped to 64px.
     --logo-photo-overlay: 29% measured from the Figma fill opacity.
     --logo-big-stat-size: PROVISIONAL (no Figma source; 64px chosen for visual
     impact over --font-size-5xl 56px in the 2×2 big card). Flag for design. */
  --logo-tile-height: 118px; /* desktop logo tile row height (col pitch 228, gap 24 → cell 204×118) */
  --logo-tile-height-mobile: 64px; /* mobile tile height (capture: 63.92px) */
  --logo-photo-overlay: rgba(0, 0, 0, 0.29); /* photo stat card dark overlay (capture: 29% black) */
  --logo-big-stat-size: 64px; /* big card stat figure (PROVISIONAL — no Figma source; larger than 5xl/56px) */

  /* === Feature-card dimensions (homepage capture §5 desktop / §6 mobile) === */
  --feature-card-height: 650px; /* desktop card total (design pass 2026-06-12; capture nominal was 677) */
  --feature-card-height-mobile: 480px; /* mobile card total (364×480, clipped) */
  --feature-card-btn-size: 30px; /* capture §5: ↗ icon button 30×30 */

  /* === Channel-card dimensions (LP §6, Figma cards 398×389) === */
  --channel-card-height: 389px; /* desktop card total */
  --channel-card-height-mobile: 380px;

  /* === Testimonial dimensions (homepage capture §6 desktop / §7 mobile) === */
  --testimonial-band-height: 408px; /* dotted band */
  --testimonial-card-width: 1140px; /* foreground card (design pass 2026-06-12: narrower than the capture's 1240 so the dot band reads at both edges) */
  --testimonial-card-height: 257px;
  --testimonial-photo-width: 200px; /* cutout column; card-height cover crop shows the figure waist-up */
  --testimonial-cta-width: 168px; /* capture: CTA 168×40 */

  /* === Problem/Solution section (homepage capture §7/§8 + scroll-story
     design pass 2026-06-12) === */
  --problem-wall-width: 1200px; /* avatar wall native 1x width (24×9 @100px grid, padded to 2400px @2×) */
  --problem-pin-height: 300vh; /* pinned scroll length (3× viewport) — lengthened 200→300 so the story doesn't skip through (design pass 2026-06-19) */
  --problem-tag-size: 16px; /* avatar badge buttons (Figma: 14.3 ellipse → snapped) */
  --cta-width-standard: 168px; /* the recurring 168-wide CTA (problem §7; testimonial §6) */

  /* === Dot-grid pattern (CSS-generated; replaces the Figma SVG strips) === */
  --dot-grid-pitch: 15px; /* match Figma dots-bg pitch; dot spacing both axes (shared — testimonial.module + any future dot-band) */
  /* Between gray-3 (invisible) and gray-5 (too loud) — design pass 2026-06-12 */
  --dot-grid-color: color-mix(in srgb, var(--color-gray-5) 70%, var(--color-background));
  --dot-grid-color-accent: var(--color-brand-mid-blue); /* cursor-glow highlight */

  /* === Proof-carousel cards (homepage capture §10) === */
  --proof-card-width: 375px; /* desktop testimonial card 375×161 */
  --proof-card-height: 161px;
  --proof-card-gap: 56px; /* capture: card gap 56 (off-scale, design value) */
  --proof-rail-width: 80px; /* left headshot/logo rail */
  --proof-headshot-size: 63px; /* capture §10: headshot 62.95 sq */

  /* === Final-CTA panels decor (capture §11 + design pass 2026-06-12:
     single flattened export, 913×200 @2x) === */
  --final-cta-strip-height: 100px; /* panels display height (design pass) */
  --final-cta-strip-inset: 290px; /* strip start beyond the 474 input + air */

  /* === Homepage section rhythm — from the final homepage frames (capture
     2026-06-11). Off the 8pt scale; flagged to design. Mobile values are
     applied via the media override at the bottom of this file. === */
  --space-section-y: 150px; /* between homepage sections (desktop) */
  --space-section-y-deep: 150px; /* late sections (desktop same; mobile 120px) */

  /* === Radius scale (added — not in design system, but needed for impl) === */
  --radius-xs: 2px; /* homepage card surfaces (capture: 2.17–2.24px) */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 16px;
  --radius-2xl: 24px; /* large card radius (24px scale entry) */
  --radius-full: 9999px;

  /* === Z-index scale (added) === */
  --z-base: 0;
  --z-sticky: 50;
  --z-header: 100;
  --z-dropdown: 200;
  --z-modal: 300;
  --z-toast: 400;

  /* === Shadow scale — soft multi-layer diffuse, matched to live fello.ai.
     Card values still pending a Figma drill-down on Feature Card hover. === */
  --shadow-card-default: 0 1px 2px rgba(9, 53, 85, 0.04),
    0 4px 8px rgba(9, 53, 85, 0.06);
  --shadow-card-hover: 0 4px 8px rgba(9, 53, 85, 0.06),
    0 8px 24px rgba(9, 53, 85, 0.08);
  /* Sticky navbar pill + dropdown panel — soft BLACK 4-layer stack, exact
     values from the final header Figma (extracted from the SVG filter;
     desktop-states.md §3/§6). The pill's extra 0 189px 53px layer in Figma
     is zero-alpha — omitted. Replaces the earlier navy rgba(9,53,85) stacks. */
  --shadow-pill: 0 8px 17px rgba(0, 0, 0, 0.07), 0 30px 30px rgba(0, 0, 0, 0.06),
    0 68px 41px rgba(0, 0, 0, 0.04), 0 121px 48px rgba(0, 0, 0, 0.01);
  --shadow-dropdown: var(--shadow-pill);
  /* Buttons (rest + hover) — soft 5-layer black stack, copied from live
     fello.ai (css/elements/_buttons.css). Hover grows the spread. */
  --shadow-btn: 0 21px 6px rgba(0, 0, 0, 0), 0 13px 5px rgba(0, 0, 0, 0.02),
    0 7px 4px rgba(0, 0, 0, 0.06), 0 3px 3px rgba(0, 0, 0, 0.09),
    0 1px 2px rgba(0, 0, 0, 0.11);
  --shadow-btn-hover: 0 32px 9px rgba(0, 0, 0, 0), 0 20px 8px rgba(0, 0, 0, 0.02),
    0 11px 7px rgba(0, 0, 0, 0.06), 0 5px 5px rgba(0, 0, 0, 0.09),
    0 1px 3px rgba(0, 0, 0, 0.11);
  --shadow-focus-ring: 0 0 0 3px rgba(255, 114, 92, 0.2);

  /* === Animation === */
  --transition-fast: 150ms ease-out;
  --transition-default: 200ms ease;
  --transition-slow: 300ms ease;
}

/* Mobile token overrides (<992px, the header/site breakpoint). Final
   homepage frames: 80px between early sections, 120px between late ones. */
@media (max-width: 991px) {
  :root {
    --space-section-y: 80px;
    --space-section-y-deep: 120px;
    --logo-tile-height: 81px;
  }
}

/* Generic
This is where reset, normalize & box-sizing styles go.
*/

*, *:before, *:after {
  box-sizing: border-box;
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct box sizing in Firefox.
 */

hr {
  box-sizing: content-box;
  height: 0;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Remove the inheritance of text transform in Edge and Firefox.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
 */

legend {
  padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Objects
Non-cosmetic design patterns including grid and layout classes)
*/



/* CSS variables */

:root {
  --column-gap: 2.13%;
  --column-width-multiplier: 8.333;
}

/* Mobile layout */

.row-fluid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}


  .row-fluid .span1,
  .row-fluid .span2,
  .row-fluid .span3,
  .row-fluid .span4,
  .row-fluid .span5,
  .row-fluid .span6,
  .row-fluid .span7,
  .row-fluid .span8,
  .row-fluid .span9,
  .row-fluid .span10,
  .row-fluid .span11,
  .row-fluid .span12{
  min-height: 1px;
  width: 100%;
}

/* Desktop layout */

@media (min-width: 768px) {
  .row-fluid {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  
    .row-fluid .span1 {
      width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span2 {
      width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span3 {
      width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span4 {
      width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span5 {
      width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span6 {
      width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span7 {
      width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span8 {
      width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span9 {
      width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span10 {
      width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span11 {
      width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100));
    }
  
}
.content-wrapper {
  margin: 0 auto;
  padding: 0 1rem;
}

@media screen and (min-width: 1380px) {
  .content-wrapper {
    padding: 0;
  }
}

.dnd-section > .row-fluid {
  margin: 0 auto;
}

.dnd-section .dnd-column {
  padding: 0 1rem;
}

@media (max-width: 767px) {
  .dnd-section .dnd-column {
    padding: 0;
  }
}

/* Elements
Base HTML elements are styled in this section (<body>, <h1>, <a>, <p>, <button> etc.)
*/



/* Global font + always-on OpenType features per Fello design system */

:root {
  font-family: var(--font-body);
  font-variation-settings: "wdth" 100;
  font-feature-settings: "ss01" 1;
}

body {
  font-family: inherit;
  font-size: var(--font-size-md);
  line-height: 24px;
  color: var(--color-text-body);
  background-color: var(--color-bg-page);
  overflow-wrap: break-word;
  /* Match Figma's text rendering. Figma antialiases glyphs in grayscale;
     browsers on macOS default to subpixel/auto smoothing, which thickens
     strokes at identical font-weights. Force grayscale so web == Figma. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Handles word-breaking for languages that break differently. Remove if no
   localisation into ja/zh/ko is planned. */

html[lang^="ja"] body,
html[lang^="zh"] body,
html[lang^="ko"] body {
  line-break: strict;
  overflow-wrap: normal;
  word-break: break-all;
}

/* === Type-scale utility classes ============================================
   Apply these to text elements regardless of semantic tag. Heading mappings
   below are sensible defaults; override per module by adding a .t-* class.
   ========================================================================== */

.t-display-xl {
  font-size: var(--font-size-5xl);
  line-height: 68px;
  font-weight: 600;
  letter-spacing: -0.5px;
}

.t-display-lg {
  font-size: var(--font-size-4xl);
  line-height: 54px;
  font-weight: 600;
  letter-spacing: -0.25px;
}

.t-heading-xxl {
  font-size: var(--font-size-3xl);
  line-height: 42px;
  font-weight: 600;
  letter-spacing: 0;
}

.t-display-sm {
  font-size: var(--font-size-2xl);
  line-height: 32px;
  font-weight: 500;
  letter-spacing: 0;
}

.t-display-xs {
  font-size: var(--font-size-xl);
  line-height: 30px;
  font-weight: 500;
  letter-spacing: 0;
}

.t-label-lg {
  font-size: var(--font-size-lg);
  line-height: 28px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.t-label-md {
  font-size: var(--font-size-md);
  line-height: 22px;
  font-weight: 500;
  letter-spacing: 0;
}

.t-label-sm {
  font-size: var(--font-size-sm);
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0;
}

.t-paragraph-lg {
  font-size: var(--font-size-lg);
  line-height: 26px;
  font-weight: 400;
  letter-spacing: 0;
}

.t-paragraph-md {
  font-size: var(--font-size-md);
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}

.t-paragraph-sm {
  font-size: var(--font-size-sm);
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}

/* Uppercase-metadata stylistic-sets variant (overlines, badge labels) */

.t-metadata {
  font-feature-settings: "ss01" 1, "ss02" 1, "ss03" 1, "ss04" 1, "ss05" 1,
    "ss06" 1;
}

/* === Heading default mappings ===========================================
   These match HTML semantics to the type scale. Override per-component.
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 var(--space-md);
  color: var(--color-text-heading);
  font-weight: 600;
}

h1 {
  font-size: var(--font-size-5xl);
  line-height: 68px;
  letter-spacing: -0.5px;
}

h2 {
  font-size: var(--font-size-4xl);
  line-height: 54px;
  letter-spacing: -0.25px;
}

h3 {
  font-size: var(--font-size-3xl);
  line-height: 42px;
}

h4 {
  font-size: var(--font-size-2xl);
  line-height: 32px;
  font-weight: 500;
}

h5 {
  font-size: var(--font-size-xl);
  line-height: 30px;
  font-weight: 500;
}

h6 {
  font-size: var(--font-size-lg);
  line-height: 28px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* === Body elements ====================================================== */

p {
  margin: 0 0 var(--space-md);
}

a {
  color: var(--color-brand-salmon);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--color-brand-navy);
}

a:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-ring);
  border-radius: var(--radius-sm);
}

ul,
ol {
  margin: 0 0 var(--space-md);
}

ul ul,
ol ul,
ul ol,
ol ol {
  margin: 0;
}

ul.no-list {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

pre {
  overflow: auto;
}

code {
  vertical-align: bottom;
}

blockquote {
  border-left: 2px solid var(--color-border-default);
  margin: 0 0 var(--space-md);
  padding-left: var(--space-sm);
}

hr {
  border: none;
  border-bottom: 1px solid var(--color-border-default);
}

img {
  font-size: 0.583rem; /* Sizes the alt-text fallback small */
  word-break: normal;
}

/* === Mobile typography adjustments =======================================
   Step-down at <768px (CLAUDE.md mobile-first).

   ⚠️ RECONCILE: these step-down values were set before the mobile spec was
   captured and DIVERGE from docs-cache/design-system/mobile-responsive.md
   (line 167: "H1 56→34px, H2 40→26px"). The heading-tag → design-token
   mapping is also ambiguous. Left as literals deliberately — do NOT promote
   to --font-size-* tokens until the mobile type scale is confirmed with
   Anjali, then add proper mobile tokens (see mobile-responsive.md:186-190).
   ========================================================================== */

@media (max-width: 767px) {
  h1,
  .t-display-xl {
    font-size: 40px;
    line-height: 46px;
  }

  h2,
  .t-display-lg {
    font-size: 32px;
    line-height: 38px;
  }

  h3,
  .t-heading-xxl {
    font-size: 28px;
    line-height: 34px;
  }
}


/* ========================================================================== */
/* Base                                                                       */
/* ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-family: var(--font-body);
  font-variation-settings: "wdth" 100;
  font-feature-settings: "ss01" 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 0;
  border-radius: var(--radius-lg);
  transition: background var(--transition-fast), color var(--transition-fast),
    box-shadow var(--transition-fast), transform var(--transition-fast);
  -webkit-appearance: none;
  appearance: none;
}

.btn:focus {
  outline: none;
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-ring);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ========================================================================== */
/* Sizes                                                                      */
/* ========================================================================== */

/* --- Large (45px / 16px) ---------------------------------------------------
   The standard CTA button: 45px tall, 16px label on desktop, globally (Amit,
   2026-06-19) — no per-module font bumps. Mobile normalises to 40px/14px below. */

.btn--large {
  height: 45px;
  padding: 0 20px;
  font-size: var(--font-size-md);
  line-height: 1;
  font-weight: 600;
  border-radius: var(--radius-lg);
  min-width: 100px;
}

/* --- Medium (36px desktop, 44px mobile) -----------------------------------*/

.btn--medium {
  height: 36px;
  /* Figma "Medium Button" component (73:6225 + capture repeated-patterns):
     label 14/600, pad 16h — the old 13/500/18px was off-spec (the navbar
     mobile override was already correcting it to 14/600) */
  padding: 0 var(--space-md);
  font-size: var(--font-size-sm);
  line-height: 1;
  font-weight: 600;
  border-radius: var(--radius-lg);
  min-width: 80px;
}

/* --- Small (28px desktop, 44px mobile) ------------------------------------*/

.btn--small {
  height: 28px;
  padding: 0 12px;
  font-size: var(--font-size-2xs);
  line-height: 1;
  font-weight: 500;
  border-radius: var(--radius-md);
  min-width: 60px;
}

/* ========================================================================== */
/* Themes                                                                     */
/* ========================================================================== */

/* --- Primary (Salmon gradient + bottom-border lift) ----------------------- */

.btn--primary {
  background: var(--gradient-btn-primary);
  color: var(--color-white);
  /* 3px bottom-border lift, matching the live fello.ai button. The press
     interaction (:active below) collapses this border + drops the button. */
  border-bottom: 3px solid var(--color-border-btn);
}

/* Hover: the gradient does NOT change (matches live) — only the shadow grows,
   handled by .btn--shadow:hover. No transform on hover.
   Active/press: drop 2px, collapse the bottom-border lift, kill the shadow —
   gradient unchanged. Mirrors `button:active` on fello.ai. */
.btn--primary:active {
  transform: translateY(2px);
  border-bottom-color: transparent;
}

/* Keep the label white through hover/focus/active. Buttons are frequently
   <a> elements, and the global `a:hover { color }` rule (elements/_typography)
   would otherwise repaint the text on hover — live fello.ai never does. */
.btn--primary:hover,
.btn--primary:focus,
.btn--primary:active {
  color: var(--color-white);
}

/* --- Secondary (outline) — captured from final header design 2026-06-11
   (desktop-states.md §1 "Log In"): warm bg, gray-3 hairline, mid-blue ink.
   Hover tint mirrors the live site's secondary hover. ---------------------- */

.btn--secondary {
  background: var(--color-background);
  color: var(--color-text-interactive);
  border: 1px solid var(--color-border-hairline);
  font-weight: 600;
}

.btn--secondary:hover,
.btn--secondary:focus {
  background: var(--color-nav-hover-bg);
  color: var(--color-text-interactive);
}

/* --- Navy (mid-blue vertical gradient + navy bottom-border lift + soft shadow)
   The "Talk to Sales" button, promoted to a reusable theme (Figma 8:3277 /
   8:2331). Reused by pricing-cards CTAs and the compare-plans table CTAs.
   Shadow is built in (always elevated), like the primary theme. ----------- */

.btn--navy {
  background: linear-gradient(
    180deg,
    var(--color-brand-mid-blue),
    color-mix(in srgb, var(--color-brand-navy) 35%, var(--color-brand-mid-blue))
  );
  color: var(--color-white);
  border-bottom: 3px solid var(--color-brand-navy);
  box-shadow: var(--shadow-btn);
}

.btn--navy:hover,
.btn--navy:focus {
  color: var(--color-white);
  box-shadow: var(--shadow-btn-hover);
}

.btn--navy:active {
  color: var(--color-white);
  transform: translateY(2px);
  border-bottom-color: transparent;
  box-shadow: none;
}

/* --- Tertiary --- PLACEHOLDER until Figma drill-down -------------------- */
/* Likely outlined/ghost: transparent bg, navy border, navy text. */

.btn--tertiary {
  background: transparent;
  color: var(--color-brand-navy);
  border: 1px solid var(--color-brand-navy);
}

.btn--tertiary:hover {
  background: var(--color-brand-navy);
  color: var(--color-white);
}

/* --- Clean --- PLACEHOLDER until Figma drill-down ----------------------- */
/* Text-only / link-style button. No shadow regardless of Shadow toggle. */

.btn--clean {
  background: transparent;
  color: var(--color-brand-navy);
  padding-left: 0;
  padding-right: 0;
  min-width: 0;
}

.btn--clean:hover {
  color: var(--color-brand-salmon);
}

/* ========================================================================== */
/* Shadow variant                                                             */
/* ========================================================================== */

/* Applied to non-Clean themes when module.shadow=true. Subtle elevation;
   pairs with the primary's bottom-border lift. */

.btn--shadow:not(.btn--clean) {
  box-shadow: var(--shadow-btn);
}

/* Hover deepens the shadow (the only hover change — no colour shift). */
.btn--shadow:not(.btn--clean):hover {
  box-shadow: var(--shadow-btn-hover);
}

/* Press removes the shadow entirely, completing the "push down" feel. */
.btn--shadow:not(.btn--clean):active {
  box-shadow: none;
}

/* ========================================================================== */
/* Width modifiers                                                            */
/* ========================================================================== */

/* Medium-only — pads up to a 125px floor */
.btn--min-125.btn--medium {
  min-width: 125px;
}

/* Large-only — fixed 280px (hero CTA) */
.btn--hero-280.btn--large {
  width: 280px;
  min-width: 0;
}

/* ========================================================================== */
/* Mobile tap-target bump (CLAUDE.md 44×44 rule)                              */
/* ========================================================================== */

@media (max-width: 767px) {
  /* All buttons normalise to one mobile spec: 40px tall, 14px label.
     NOTE: 40px is below the CLAUDE.md 44×44 tap-target guideline (older,
     mobile-heavy audience) — intentional override (Amit, 2026-06-18). */
  .btn--large,
  .btn--medium,
  .btn--small {
    height: 40px;
    padding: 0 var(--space-md);
    font-size: var(--font-size-sm);
  }

  .btn--primary.btn--large,
  .btn--primary.btn--medium,
  .btn--primary.btn--small {
    /* Keep the 3px bottom-border lift at the mobile height. */
    border-bottom: 3px solid var(--color-border-btn);
  }

  /* HubSpot built-in form/CTA buttons match the same mobile spec. */
  .hs-button,
  .button,
  button.cta_button {
    height: 40px;
    padding: 0 var(--space-md);
    font-size: var(--font-size-sm);
  }
}

/* ========================================================================== */
/* HubSpot built-in CTA / form-button compatibility                           */
/* ========================================================================== */

/* HubSpot's built-in form submit (.hs-button) and CTA modules use these
   class names. Apply Fello's primary-Large styling as the sensible default
   so out-of-the-box forms and CTAs match the Fello look without anyone
   having to add classes. Marketers using the Fello button module should
   continue to use .btn .btn--{theme} .btn--{size}.

   Note: HubSpot's form module sometimes outputs <button> with .hs-button
   class but no .btn class — these selectors catch those instances.
*/

.hs-button,
.button,
button.cta_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-family: var(--font-body);
  font-variation-settings: "wdth" 100;
  font-feature-settings: "ss01" 1;
  height: 45px;
  padding: 10px 20px 13px;
  font-size: var(--font-size-md);
  line-height: 1;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 0;
  border-bottom: 3px solid var(--color-border-btn);
  border-radius: var(--radius-lg);
  background: var(--gradient-btn-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-btn);
  transition: background var(--transition-fast), box-shadow var(--transition-fast),
    transform var(--transition-fast);
  -webkit-appearance: none;
  appearance: none;
}

/* Hover deepens the shadow only — gradient + text colour unchanged (matches
   live). The explicit colour overrides the global a:hover colour for CTAs
   rendered as <a>. */
.hs-button:hover,
.button:hover,
button.cta_button:hover {
  color: var(--color-white);
  box-shadow: var(--shadow-btn-hover);
}

/* Press: drop 2px, collapse the lift, kill the shadow. */
.hs-button:active,
.button:active,
button.cta_button:active {
  color: var(--color-white);
  transform: translateY(2px);
  border-bottom-color: transparent;
  box-shadow: none;
}

.hs-button:focus-visible,
.button:focus-visible,
button.cta_button:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-ring);
}

.hs-button:disabled,
.button:disabled,
button.cta_button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* "No button" — the boilerplate's helper for stripping <button> defaults
   when a button element is used as a non-button (e.g. a nav menu toggle).
   Keep this; useful and harmless. */

.no-button,
.no-button:hover,
.no-button:focus,
.no-button:active {
  background: none;
  border: none;
  border-radius: 0;
  color: initial;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  margin-bottom: 0;
  padding: 0;
  text-align: left;
  text-decoration: none;
  transition: none;
  box-shadow: none;
  height: auto;
  min-width: 0;
}

/* Table */

table {
  border-collapse: collapse;
  margin-bottom: 1.4rem;
  overflow-wrap: break-word;
}

/* Table cells */

td,
th {
  vertical-align: top;
}

/* Table header */

thead th {
  vertical-align: bottom;
}

/* Components
Specific pieces of UI that are stylized. Typically used for global partial styling
*/



/* ============================================================================
   Header wrapper variants (per-template header_variant flag)
   ============================================================================ */

.header-wrapper {
  position: relative;
  z-index: var(--z-header);
}

.header-wrapper--no-banner .banner {
  display: none;
}

.header-wrapper--no-nav .nav-items,
.header-wrapper--no-nav .banner {
  display: none;
}

.header-wrapper--logo-only .nav-items,
.header-wrapper--logo-only .navbar__ctas,
.header-wrapper--logo-only .navbar__hamburger,
.header-wrapper--logo-only .banner {
  display: none;
}

/* Variants that hide the banner also drop the with-banner sheet styling */
.header-wrapper--no-banner .navbar--with-banner,
.header-wrapper--no-nav .navbar--with-banner,
.header-wrapper--logo-only .navbar--with-banner {
  height: var(--nav-height);
  border-radius: 0;
}

/* ============================================================================
   Announcement banner — navy strip, not dismissable (50px desktop, scaled mobile)
   ============================================================================ */

.banner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* 50px visible + 16px hidden behind the rounded nav sheet that overlaps
     it (navbar--with-banner margin-top: -16px). Content centers in the
     visible 50px via the padding-bottom. */
  height: calc(var(--banner-height) + var(--radius-xl));
  padding-bottom: var(--radius-xl);
  background-color: var(--color-bg-dark);
  font-family: var(--font-body);
  /* "banner" text role: 16/24 SemiBold — design pass 2026-06-19 (was 18px, "too big") */
  font-size: var(--font-size-md);
  line-height: 24px;
  font-weight: 600;
  color: var(--color-background);
  font-variation-settings: "wdth" 100;
  font-feature-settings: "ss01" 1;
}

.banner__inner {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  text-decoration: none;
  color: inherit;
}

/* Hover = underline the text (design pass 2026-06-19, was opacity fade) */
a.banner__inner:hover .banner__text {
  color: var(--color-background);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a.banner__inner:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-ring);
  border-radius: var(--radius-sm);
}

.banner__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 18px salmon circle with white arrow glyph */
.banner__arrow-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  background-color: var(--color-brand-salmon);
  color: var(--color-background);
  flex-shrink: 0;
}

/* ============================================================================
   Navbar — 60px bar (67px sheet with 16px top radius when banner present)
   ============================================================================ */

.navbar {
  position: relative;
  width: 100%;
  height: var(--nav-height);
  background-color: var(--color-bg-page);
  /* no border-bottom: design pass 2026-06-11 — bar sits flush on the page */
  transition: background-color var(--transition-slow);
  z-index: var(--z-header);
  /* Dropdown left edge = nav cluster left: page margin + wordmark + cluster
     margin (48 + 59.36 + 32 ≈ design x139.5). The pill overrides to 0. */
  --dropdown-left: calc(
    var(--layout-margin) + var(--logo-wordmark-width) + var(--space-xl)
  );
  /* Bridge height: trigger-row bottom -> bar bottom (covers 60/67px bars) */
  --dropdown-gap: 19px;
}

/* With banner: the bar becomes a rounded sheet overlapping the navy strip */
.navbar--with-banner {
  height: var(--nav-height-banner);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  margin-top: calc(-1 * var(--radius-xl));
}

.navbar__inner {
  /* Positioning anchor for the dropdowns: panels must align with the
     CENTERED 1440px content box, not the full-bleed bar — otherwise on
     wide monitors --dropdown-left measures from the viewport edge and the
     panel opens left of the logo. */
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  max-width: var(--layout-canvas-max);
  margin: 0 auto;
  padding: 0 var(--layout-margin); /* symmetric, aligns with the page content box (UI pass 2026-06-12; was 32/48) */
}

/* ============================================================================
   Logo — wordmark on desktop bar; mark in pill + mobile
   ============================================================================ */

.navbar__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.navbar__logo:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-ring);
  border-radius: var(--radius-sm);
}

.logo--wordmark {
  display: block;
  width: var(--logo-wordmark-width);
  height: var(--logo-wordmark-height);
}

.logo--mark {
  display: none;
  width: var(--logo-mark-size);
  height: var(--logo-mark-size);
}

/* ============================================================================
   Navigation items — left-grouped cluster, 34px gaps (24px scrolled)
   ============================================================================ */

.nav-items {
  /* NOT position:relative — dropdowns anchor to the .navbar itself so
     top:100% is always flush with the bar's bottom edge (60 / 67 / 54px
     states alike). The cluster's left offset is mirrored in
     --dropdown-left on .navbar below. */
  display: flex;
  align-items: center;
  gap: var(--space-nav-gap);
  list-style: none;
  margin: 0 0 0 var(--space-xl);
  padding: 0;
}

/* Sibling dim: hovering (or keyboard-opening) any item fades the others.
   Applies to both link items and dropdown triggers. */
.nav-items:hover > .nav-item:not(:hover),
.nav-items:focus-within > .nav-item:not(:focus-within) {
  opacity: 0.5;
}

.nav-item {
  transition: opacity var(--transition-fast);
}

/* Shared trigger/link style — navy Label/md with the 5% tint hover pill.
   Pill = text +10px left / +8px right, 30px tall at top (27px scrolled). */
.nav-item__link,
.nav-item__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  padding: var(--space-xxs) var(--space-xs);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  line-height: 22px;
  font-weight: 500;
  color: var(--color-text-heading);
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background-color var(--transition-fast);
  font-variation-settings: "wdth" 100;
  font-feature-settings: "ss01" 1;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
}

.nav-item__link:hover,
.nav-item__btn:hover,
.nav-item--has-dropdown:focus-within > .nav-item__btn,
.nav-item__link.is-active {
  background-color: var(--color-nav-hover-bg);
  color: var(--color-text-heading);
}

.nav-item__link:focus-visible,
.nav-item__btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-ring);
}

.nav-item__chevron {
  color: currentColor;
  transition: transform var(--transition-default);
  flex-shrink: 0;
}

/* Chevron flips up while the dropdown is open (hover or focus) */
.nav-item--has-dropdown:hover > .nav-item__btn .nav-item__chevron,
.nav-item--has-dropdown:focus-within > .nav-item__btn .nav-item__chevron {
  transform: scaleY(-1);
}

/* ============================================================================
   Dropdown — fused card flush under the bar, left-aligned to the cluster
   ============================================================================ */

/* Anchored to .navbar (nearest positioned ancestor): top:100% is exactly
   the bar's bottom edge in ALL states (60px bar, 67px banner sheet, 54px
   pill) — no per-state gap math. */
.dropdown {
  position: absolute;
  /* +0.5px clears the bar's border-bottom (top:100% only reaches the
     padding box) so the hairline stays visible between bar and panel */
  top: calc(100% + 0.5px);
  left: var(--dropdown-left);
  width: max-content;
  max-width: min(
    var(--nav-pill-width),
    calc(100vw - var(--dropdown-left) - var(--layout-margin))
  );
  background-color: var(--color-dropdown-bg);
  border: 0.5px solid var(--color-border-hairline);
  border-top: none;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  box-shadow: var(--shadow-dropdown);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  z-index: var(--z-dropdown);
}

/* Invisible bridge spanning trigger-row→panel so hover survives the travel */
.dropdown::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--dropdown-gap));
  left: 0;
  width: 100%;
  height: var(--dropdown-gap);
}

/* Mega (3-column) panels span the full pill width */
.nav-item--has-dropdown:has(.dropdown__columns--3) > .dropdown {
  width: min(
    var(--nav-pill-width),
    calc(100vw - var(--dropdown-left) - var(--layout-margin))
  );
}

/* Open on hover (hover-capable devices) or keyboard focus */
@media (hover: hover) {
  .nav-item--has-dropdown:hover > .dropdown {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity var(--transition-default), transform var(--transition-default);
  }
}

.nav-item--has-dropdown:focus-within > .dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity var(--transition-default), transform var(--transition-default);
}

/* ----------------------------------------------------------------------------
   Page scrim behind an open dropdown
   ----------------------------------------------------------------------------
   Full-viewport gradient that darkens the page body while a dropdown is open.
   Lives at z-index:-1 INSIDE .header-wrapper's stacking context: the whole
   header context already paints above <main> (header-wrapper z:--z-header), so
   a negative z orders the scrim above the page yet below the banner, bar, and
   dropdown — the header stays clear, only the page dims. Decorative only
   (pointer-events:none); the hover/:focus-within model closes on its own. */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--gradient-scrim-dropdown);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-default);
}

@media (prefers-reduced-motion: reduce) {
  .nav-backdrop {
    transition: none;
  }
}

/* Mirror the dropdown's open conditions: hover (hover-capable devices only)
   and keyboard/touch :focus-within. :has() anchors on .header-wrapper because
   the scrim is a preceding sibling of the nav, not a descendant of it. */
@media (hover: hover) {
  .header-wrapper:has(.nav-item--has-dropdown:hover) .nav-backdrop {
    opacity: 1;
  }
}

.header-wrapper:has(.nav-item--has-dropdown:focus-within) .nav-backdrop {
  opacity: 1;
}

.dropdown__panel {
  display: flex;
}

/* --- Columns: 53px row pitch, text inset 32 (xs + lg), 1px dividers --- */

/* Padding lives on the COLUMNS (not the grid) so the 1px dividers run the
   full panel height. The column owns only a slim --space-xs inset — that is
   where the hover rect begins. Links and overlines carry an extra --space-lg
   so TEXT sits at xs+lg = 32px, flush across rows and overlines, and the
   hover tint stays inside the column (no negative margins). */
.dropdown__columns {
  flex: 1;
  display: grid;
  padding: 0;
}

.dropdown__columns--1 {
  grid-template-columns: 1fr;
}

.dropdown__columns--3 {
  grid-template-columns: repeat(3, 1fr);
}

.dropdown__column {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-md) var(--space-lg) var(--space-md) var(--space-xs);
}

.dropdown__columns--3 .dropdown__column + .dropdown__column {
  border-left: 1px solid var(--color-border-default);
}

/* Overline — 10px / 500 / ls 1.2 uppercase, mid-blue (salmon for FEATURED).
   margin-left pairs with the link padding-left for a flush text edge. */
.dropdown__overline {
  font-family: var(--font-body);
  font-size: var(--font-size-3xs);
  font-weight: 500;
  color: var(--color-text-interactive);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-overline);
  /* margin-bottom 0 — design pass 2026-06-19, pull overline + title closer */
  margin: 0 0 0 var(--space-lg);
  font-variation-settings: "wdth" 100;
  font-feature-settings: "ss01" 1;
}

.dropdown__overline--featured {
  color: var(--color-brand-salmon);
}

.dropdown__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.dropdown__link-item {
  display: block;
}

/* Row block: 53px pitch, hover = same 5% tint, radius 6.
   padding-left --space-lg puts the text at the column's xs+lg = 32px inset
   while the hover rect starts at the column edge (capture: rect x9 ≈ xs). */
.dropdown__link {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 53px;
  padding: var(--space-xs) var(--space-sm) var(--space-xs) var(--space-lg);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.dropdown__link:hover {
  background-color: var(--color-nav-hover-bg);
}

.dropdown__link:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-ring);
  border-radius: var(--radius-md);
}

.dropdown__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-top: 1px;
}

.dropdown__link-text {
  display: flex;
  flex-direction: column;
}

/* Optional eyebrow ABOVE the title (Why Fello rows: "THE PROBLEM" etc.) —
   overline style, scoped to the row */
.dropdown__link-eyebrow {
  font-family: var(--font-body);
  font-size: var(--font-size-3xs);
  font-weight: 500;
  color: var(--color-text-interactive);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-overline);
  margin-bottom: var(--space-xxs);
  font-variation-settings: "wdth" 100;
  font-feature-settings: "ss01" 1;
}

.dropdown__link-title {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-heading);
  line-height: 18px;
  font-variation-settings: "wdth" 100;
  font-feature-settings: "ss01" 1;
}

.dropdown__link-desc {
  font-family: var(--font-body);
  font-size: var(--font-size-2xs);
  font-weight: 400;
  color: var(--color-text-body);
  line-height: 18px;
  font-variation-settings: "wdth" 100;
  font-feature-settings: "ss01" 1;
}

/* --- Featured panel: flat gray square, whole square is one link --- */

.dropdown__panel-side {
  display: flex;
  flex-direction: column;
  width: 250px;
  flex-shrink: 0;
  background-color: var(--color-background);
  border-left: 1px solid var(--color-border-default);
  border-radius: 0 0 var(--radius-xl) 0;
  text-decoration: none;
  overflow: hidden;
}

.dropdown__panel-side:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-ring);
}

/* Image container — flexes to fill the panel's leftover height so the card
   stays clean when the dropdown is taller than its copy (design pass
   2026-06-19). gray-1 surface, FEATURED overline top-left, orb pinned to the
   bottom edge. min-height guards the short-dropdown case. */
.dropdown__panel-media {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex: 1;
  min-height: 150px;
  background-color: var(--color-gray-1);
  border-bottom: 0.5px solid var(--color-border-default);
  overflow: hidden;
}

.dropdown__panel-media .dropdown__overline--featured {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  margin: 0;
  z-index: 1;
}

/* Transparent orb+dome PNG: full panel width, intrinsic ratio, sat at the
   container's bottom edge (align-items:flex-end on the media box). */
.dropdown__panel-image {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: bottom center;
  transition: transform var(--transition-default);
}

/* Hover spec (Desktop-52): orb scales up from its base; whole panel clickable */
.dropdown__panel-side:hover .dropdown__panel-image {
  transform: scale(1.06);
}

/* Text container — natural height, sits below the flexing media box */
.dropdown__panel-text {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.dropdown__panel-heading {
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  font-weight: 500;
  color: var(--color-text-heading);
  line-height: 22px;
  margin: var(--space-xs) var(--space-md) 0;
  font-variation-settings: "wdth" 100;
  font-feature-settings: "ss01" 1;
}

.dropdown__panel-sub {
  font-family: var(--font-body);
  font-size: var(--font-size-2xs);
  font-weight: 500;
  color: var(--color-text-body);
  line-height: 18px;
  margin: var(--space-xxs) var(--space-md) var(--space-md);
  font-variation-settings: "wdth" 100;
  font-feature-settings: "ss01" 1;
}

/* ============================================================================
   CTA cluster — right-aligned, 14px between buttons
   ============================================================================ */

.navbar__ctas {
  display: flex;
  align-items: center;
  gap: var(--space-btn-cluster);
  flex-shrink: 0;
  margin-left: auto;
}

/* Mobile short label hidden on desktop */
.navbar__cta-label-short {
  display: none;
}

/* ============================================================================
   Mobile hamburger — 34×34, r6, hairline border
   ============================================================================ */

.navbar__hamburger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xxs);
  width: var(--control-size-mobile);
  height: var(--control-size-mobile);
  border-radius: var(--radius-md);
  background: var(--color-background);
  border: 0.5px solid var(--color-border-hairline);
  cursor: pointer;
  color: var(--color-brand-navy);
  flex-shrink: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color var(--transition-fast);
}

.navbar__hamburger:hover {
  background-color: var(--color-gray-1);
}

.navbar__hamburger:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-ring);
}

/* 3 bars that morph into an X while the drawer is open (same pattern as the
   live fello.ai header: outer bars rotate, middle bar fades) */
.navbar__hamburger-bar {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: var(--radius-full);
  background-color: currentColor;
  transition: transform var(--transition-slow), opacity var(--transition-slow);
}

body.drawer-open .navbar__hamburger {
  /* Stays clickable ABOVE the full-screen drawer — it IS the close button.
     Pinned to fixed coordinates so it aligns with the drawer bar's Back
     button whether the nav was at rest or in pill mode when opened. */
  position: fixed;
  top: calc((var(--nav-height-mobile) - var(--control-size-mobile)) / 2);
  right: var(--space-md);
  z-index: calc(var(--z-modal) + 1);
}

body.drawer-open .navbar__hamburger-bar:nth-child(1) {
  transform: translateY(6px) rotate(-45deg);
}

body.drawer-open .navbar__hamburger-bar:nth-child(2) {
  opacity: 0;
}

body.drawer-open .navbar__hamburger-bar:nth-child(3) {
  transform: translateY(-6px) rotate(45deg);
}

/* ============================================================================
   Skip link (a11y)
   ============================================================================ */

.navbar__skip {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.navbar__skip:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-brand-salmon);
  color: var(--color-white);
  border-radius: var(--radius-md);
  font-weight: 600;
  text-decoration: none;
  z-index: var(--z-modal);
}

/* ============================================================================
   Sticky pill — applied by nav-sticky.js when scrollY > 80
   1119×54 @ top 30px, warm surface, hairline, black diffuse shadow
   ============================================================================ */

.navbar.is-pill {
  position: fixed;
  top: var(--nav-pill-top);
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--nav-pill-width), calc(100% - var(--layout-margin) * 2));
  height: var(--nav-pill-height);
  border: 0.5px solid var(--color-border-default);
  border-bottom: 0.5px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  background: var(--color-dropdown-bg);
  box-shadow: var(--shadow-pill);
  margin-top: 0;
  /* Slide-down entrance so the pill doesn't pop into place */
  animation: pill-drop var(--transition-slow) backwards;
}

@keyframes pill-drop {
  from {
    transform: translate(-50%, calc(-1 * var(--nav-pill-top) - 100%));
  }
  to {
    transform: translate(-50%, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .navbar.is-pill {
    animation: none;
  }
}

.navbar.is-pill .navbar__inner {
  height: 100%;
  padding: 0 var(--space-sm) 0 var(--space-md);
}

/* Wordmark → 28px mark */
.navbar.is-pill .logo--wordmark {
  display: none;
}

.navbar.is-pill .logo--mark {
  display: block;
}

/* Tighter cluster: gap 24, trigger rows 27px tall. Dropdowns align to the
   pill's own left edge and the mega spans the pill exactly (D54). */
.navbar.is-pill {
  --dropdown-left: 0px;
  --dropdown-gap: 14px;
}

.navbar.is-pill .dropdown {
  max-width: 100%;
}

.navbar.is-pill .nav-item--has-dropdown:has(.dropdown__columns--3) > .dropdown {
  width: 100%;
}

.navbar.is-pill .nav-items {
  gap: var(--space-sm); /* 12px — matches at-rest nav gap, design pass 2026-06-19 */
}

/* Open dropdown fuses with the pill: flatten the pill's bottom-left corner
   (all panels start at the pill's left edge); flatten bottom-right too when
   the full-width mega is the open one. */
.navbar.is-pill:has(.nav-item--has-dropdown:hover),
.navbar.is-pill:has(.nav-item--has-dropdown:focus-within) {
  border-bottom-left-radius: 0;
}

.navbar.is-pill:has(.nav-item--has-dropdown:hover .dropdown__columns--3),
.navbar.is-pill:has(.nav-item--has-dropdown:focus-within .dropdown__columns--3) {
  border-bottom-right-radius: 0;
}

/* Buttons keep 36px height; 9px breathing room comes from the 54px pill */

/* ============================================================================
   Mobile drawer — full-screen takeover, sub-page views
   (hidden entirely on desktop; [hidden] handles closed state on mobile)
   ============================================================================ */

.drawer {
  display: none;
}

/* ============================================================================
   Mobile (<992px)
   ============================================================================ */

@media (max-width: 991px) {
  /* Banner on mobile (added 2026-06-11 per Amit — missed in the design):
     same navy strip, scaled down. No sheet-overlap padding — the mobile bar
     is flat, so the banner is just its visible height. */
  .banner {
    height: auto;
    min-height: var(--control-size-mobile);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-xs);
    line-height: 20px;
  }

  /* The arrow chip flows INLINE after the last word when the text wraps
     (UI pass 2026-06-12) — as a flex sibling it floated beside two lines.
     The anchor itself stays BLOCK: full-strip tap area + a box-shaped
     focus ring (reviewer R3/R4); only the text + chip are inline. */
  .banner__inner {
    display: block;
    text-align: center;
  }

  .banner__text {
    display: inline;
    white-space: normal;
    overflow: visible;
  }

  .banner__arrow-chip {
    vertical-align: text-bottom;
    margin-left: var(--space-xs);
  }

  .navbar,
  .navbar--with-banner {
    height: var(--nav-height-mobile);
    border-bottom: none;
    border-radius: 0;
    margin-top: 0;
    background: transparent;
  }

  .navbar__inner {
    padding: 0 var(--space-md);
  }

  /* Mark only */
  .logo--wordmark {
    display: none;
  }

  .logo--mark {
    display: block;
    width: var(--logo-mark-size-mobile);
    height: var(--logo-mark-size-mobile);
  }

  /* Desktop nav + Log In leave the top bar */
  .nav-items {
    display: none;
  }

  /* No dropdowns on mobile (the drawer replaces them) — the scrim never
     applies; drop it entirely so it can't interact with the drawer. */
  .nav-backdrop {
    display: none;
  }

  .navbar__login {
    display: none;
  }

  .navbar__hamburger {
    display: flex;
  }

  .navbar__ctas {
    gap: var(--space-sm);
  }

  /* CTA: h34, 14px SemiBold, short label */
  .navbar__cta-primary.btn--medium {
    height: var(--control-size-mobile);
    font-size: var(--font-size-sm);
    font-weight: 600;
    padding: 0 var(--space-xs);
    border-radius: var(--radius-lg);
    min-width: 0;
  }

  .navbar__cta-label-full {
    display: none;
  }

  .navbar__cta-label-short {
    display: inline;
  }

  /* Scrolled: floating bordered pill, 12px insets, NO shadow (per capture) */
  .navbar.is-pill {
    position: fixed;
    top: var(--nav-pill-inset-mobile);
    left: var(--nav-pill-inset-mobile);
    right: var(--nav-pill-inset-mobile);
    transform: none;
    width: auto;
    height: var(--nav-pill-height-mobile);
    border: 0.5px solid var(--color-border-hairline);
    border-radius: var(--radius-lg);
    background: var(--color-bg-page);
    box-shadow: none;
    animation: pill-drop-mobile var(--transition-slow) backwards;
  }

  @keyframes pill-drop-mobile {
    from {
      transform: translateY(calc(-1 * var(--nav-pill-inset-mobile) - 100%));
    }
    to {
      transform: translateY(0);
    }
  }

  .navbar.is-pill .navbar__inner {
    padding: 0 var(--space-xs) 0 var(--space-sm);
  }

  /* ==========================================================================
     Drawer
     ========================================================================== */

  .drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: var(--color-bg-page);
  }

  .drawer[hidden] {
    display: none;
  }

  /* --- Sticky top bar: Back + X --- */

  .drawer__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Matches the mobile nav-bar height so Back aligns with the morphed
       hamburger X pinned at the nav position */
    height: var(--nav-height-mobile);
    padding: 0 var(--space-sm);
    flex-shrink: 0;
    background: var(--color-bg-page);
  }

  /* Hairline appears on sub-pages only (root has no divider in the design) */
  .drawer.in-subview .drawer__bar {
    border-bottom: 0.5px solid var(--color-border-hairline);
  }

  /* No separate in-drawer X: the navbar hamburger morphs into the X above
     the drawer and is the close control (decision 2026-06-11, supersedes
     the spec's drawer-bar X). Back appears on sub-pages only — at top level
     it would duplicate the X. */
  .drawer__back {
    display: none;
  }

  .drawer.in-subview .drawer__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xxs);
    height: var(--control-size-mobile);
    border-radius: var(--radius-md);
    background: var(--color-background);
    border: 0.5px solid var(--color-border-hairline);
    padding: 0 var(--space-xs);
    cursor: pointer;
    color: var(--color-brand-navy);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: 500;
    line-height: 20px;
    -webkit-appearance: none;
    appearance: none;
    font-variation-settings: "wdth" 100;
    font-feature-settings: "ss01" 1;
  }

  .drawer__back:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus-ring);
  }

  /* --- Scrollable middle --- */

  .drawer__scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .drawer__view {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding-top: var(--space-xl);
  }

  .drawer__view[hidden] {
    display: none;
  }

  /* --- Root list card: 5 rows × 52px --- */

  .drawer__list {
    list-style: none;
    margin: 0 var(--space-sm);
    padding: 0;
    border: 0.5px solid var(--color-border-hairline);
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  .drawer__row + .drawer__row {
    border-top: 0.5px solid var(--color-border-hairline);
  }

  .drawer__row-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 52px;
    padding: 0 var(--space-sm) 0 var(--space-md);
    background: var(--color-bg-page);
    border: 0;
    cursor: pointer;
    text-decoration: none;
    font-family: var(--font-body);
    -webkit-appearance: none;
    appearance: none;
  }

  .drawer__row-btn:focus-visible {
    outline: none;
    box-shadow: inset var(--shadow-focus-ring);
  }

  .drawer__row-label {
    font-size: var(--font-size-md);
    line-height: 22px; /* t-label-md standalone (mobile-states.md div #7) */
    font-weight: 500;
    color: var(--color-text-heading);
    font-variation-settings: "wdth" 100;
    font-feature-settings: "ss01" 1;
  }

  .drawer__row-arrow {
    color: var(--color-brand-navy);
    flex-shrink: 0;
  }

  /* --- Sub-page cards: 73px rows, overlines, hairline dividers --- */

  .drawer__card {
    margin: 0 var(--space-sm) var(--space-lg);
    border: 0.5px solid var(--color-border-hairline);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg-page);
    padding-top: var(--space-md);
  }

  .drawer__overline {
    font-family: var(--font-body);
    font-size: var(--font-size-3xs);
    font-weight: 500;
    letter-spacing: var(--letter-spacing-overline);
    text-transform: uppercase;
    color: var(--color-text-interactive);
    /* margin-bottom 0 — design pass 2026-06-19 */
    margin: 0 0 0 var(--space-md);
    font-variation-settings: "wdth" 100;
    font-feature-settings: "ss01" 1;
  }

  .drawer__overline--featured {
    color: var(--color-brand-salmon);
    margin: 0;
  }

  .drawer__sublist {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .drawer__subrow + .drawer__subrow {
    border-top: 0.5px solid var(--color-border-hairline);
  }

  .drawer__subrow-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    min-height: 73px;
    padding: var(--space-sm); /* 12px all sides — design pass 2026-06-19 */
    text-decoration: none;
  }

  .drawer__subrow-link:focus-visible {
    outline: none;
    box-shadow: inset var(--shadow-focus-ring);
  }

  .drawer__subrow-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .drawer__subrow-eyebrow {
    font-family: var(--font-body);
    font-size: var(--font-size-3xs);
    font-weight: 500;
    letter-spacing: var(--letter-spacing-overline);
    text-transform: uppercase;
    color: var(--color-text-interactive);
    margin-bottom: var(--space-xxs);
    font-variation-settings: "wdth" 100;
    font-feature-settings: "ss01" 1;
  }

  .drawer__subrow-title {
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    font-weight: 500;
    line-height: 20px;
    color: var(--color-text-heading);
    font-variation-settings: "wdth" 100;
    font-feature-settings: "ss01" 1;
  }

  .drawer__subrow-desc {
    /* 14px is component chrome per mobile-states.md §4 — NOT body copy;
       intentional carve-out from the body ≥16px rule */
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: 400;
    line-height: 20px;
    color: var(--color-text-body);
    font-variation-settings: "wdth" 100;
    font-feature-settings: "ss01" 1;
  }

  /* --- Featured panel (Meet Felix) — bottom-anchored above the footer --- */

  .drawer__panel {
    display: flex;
    flex-direction: column;
    margin-top: auto; /* pins to the bottom when content is short */
    background: var(--color-gray-2);
    padding: var(--space-md) var(--space-sm) var(--space-lg);
    text-decoration: none;
  }

  .drawer__panel:focus-visible {
    outline: none;
    box-shadow: inset var(--shadow-focus-ring);
  }

  .drawer__panel-media {
    position: relative;
    display: block;
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  .drawer__panel-media .drawer__overline--featured {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    z-index: 1;
  }

  .drawer__panel-image {
    display: block;
    width: 100%;
    height: 178px;
    object-fit: cover;
  }

  .drawer__panel-heading {
    font-family: var(--font-body);
    font-size: var(--font-size-lg2);
    font-weight: 500;
    line-height: 28px;
    color: var(--color-text-heading);
    margin: var(--space-xs) var(--space-sm) 0;
    font-variation-settings: "wdth" 100;
    font-feature-settings: "ss01" 1;
  }

  .drawer__panel-sub {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: 500;
    line-height: 20px;
    color: var(--color-text-body);
    margin: var(--space-xxs) var(--space-sm) 0;
    font-variation-settings: "wdth" 100;
    font-feature-settings: "ss01" 1;
  }

  /* --- Sticky footer: Log In + Book a Demo --- */

  .drawer__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    height: var(--drawer-footer-height);
    padding: 0 var(--space-lg);
    flex-shrink: 0;
    border-top: 1px solid var(--color-border-hairline);
    background: var(--color-bg-page);
  }

  .drawer__footer-btn {
    flex: 1;
    max-width: 150px;
    height: var(--drawer-footer-btn-height);
    font-size: var(--font-size-md);
    font-weight: 600;
    border-radius: var(--radius-lg);
  }

  /* Body scroll-lock while the drawer is open (set by nav-sticky.js) */
}

/* Applied to <body> by nav-sticky.js while the drawer is open */
body.drawer-open {
  overflow: hidden;
}


/* ============================================================================
   Outer band — full-bleed navy, module-margin-free (template owns rhythm)
   Base (mobile): lighter vertical padding, upgraded at desktop.
   ============================================================================ */

.footer {
  position: relative;
  background: var(--color-brand-navy);
  color: var(--color-background);
  padding-block: var(--space-6xl); /* 96px mobile base */
  overflow: hidden;
}

/* Screen-reader heading — visually hidden (used by aria-labelledby) */
.footer__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* CSS dot-texture overlay — PROVISIONAL; see file header note */
.footer__dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(
    circle,
    var(--footer-dot-color) 1px,
    transparent 1px
  );
  background-size: var(--footer-dot-grid-pitch) var(--footer-dot-grid-pitch);
}

/* Reset all footer links and lists */
.footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

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

/* ============================================================================
   Inner layout — mobile-first column stack, centred, 24px gutter.
   Tablet/desktop tiers widen the gutter and switch to row at ≥1280px.
   ============================================================================ */

.footer__inner {
  max-width: var(--layout-canvas-max);
  margin: 0 auto;
  padding: 0 var(--space-lg); /* 24px gutter — mobile base */
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column; /* stacked — mobile base */
  gap: var(--space-2xl); /* 40px between brand + nav — mobile base */
}

/* ============================================================================
   Brand column — identity (logo + socials + terms) + email capture.
   Mobile base: full-width, tighter gap between identity and capture.
   ============================================================================ */

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl); /* 40px mobile — overridden to 96px at ≥1280px */
  width: 100%; /* mobile base; narrows to --footer-cta-width at ≥1280px */
}

.footer__identity {
  display: flex;
  flex-direction: column;
}

/* Logo */
.footer__logo {
  display: inline-flex;
  align-items: center;
  margin-bottom: var(--space-md); /* 16px gap to socials */
  color: var(--color-brand-salmon); /* SVG fallback inherits currentColor */
}

.footer__logo:focus-visible {
  outline: none;
  box-shadow: var(--footer-focus-ring);
  border-radius: var(--radius-sm);
}

.footer__logo svg,
.footer__logo img {
  height: var(--logo-footer-height); /* 40px */
  width: auto;
  object-fit: contain;
}

/* ============================================================================
   Social icons
   ============================================================================ */

.footer__socials {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs); /* 8px */
  margin-bottom: var(--space-xs); /* 8px gap to terms */
}

.footer__social-link {
  position: relative; /* anchor for the ::before tap-target halo */
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--footer-social-size); /* 40px visual box — design fidelity */
  height: var(--footer-social-size);
  border: 1px solid var(--color-background);
  border-radius: var(--radius-sm); /* 4px per redesign (was --radius-lg 8px) */
  color: var(--color-background);
}

/* Transparent tap-target halo — extends interactive area to 44×44 without
   changing the 40px visual box (WCAG 2.5.5 / CLAUDE.md real-estate UX). */
.footer__social-link::before {
  content: "";
  position: absolute;
  inset: -2px; /* +2px each side → 44×44 hit area */
}

.footer__social-link:focus-visible {
  outline: none;
  box-shadow: var(--footer-focus-ring);
}

.footer__social-link img {
  width: 18px;
  height: 18px;
  display: block;
}

.footer__social-fallback {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
}

/* ============================================================================
   Copyright + inline legal links
   ============================================================================ */

.footer__terms {
  font-family: var(--font-body);
  font-size: var(--font-size-2xs); /* 12px */
  line-height: normal;
  letter-spacing: -0.015em;
  color: var(--color-background);
  opacity: 0.5;
  margin: 0;
  margin-top: var(--space-md);
}

.footer__terms a {
  font-size: var(--font-size-2xs);
  letter-spacing: -0.015em;
  color: inherit;
}

.footer__terms a:hover {
  color: var(--color-brand-salmon);
  opacity: 1;
}

/* ============================================================================
   Email capture block (footer-specific heading + inlined form)
   ============================================================================ */

.footer__cta-heading {
  font-family: var(--font-body);
  font-size: var(--font-size-lg2); /* 20px */
  font-weight: 500;
  line-height: 28px;
  color: var(--color-background);
  margin: 0 0 var(--space-sm); /* 12px below heading */
}

/* .footer__capture is the scoped class for .capture-form.capture-form--embedded
   inside the footer. Base (mobile): full-width.
   Desktop tier caps to brand-column width — see ≥1280px block below.
   Scoped as .footer .footer__capture to win specificity over the later-loading
   .capture-form { max-width: 474px } rule (same-specificity, source-order fight). */
.footer .footer__capture {
  max-width: 100%; /* mobile base */
}

/* Force-embed at ≤991px — overrides the shared _email-capture.hubl.css
   un-embed block that applies in this range. All three Figma frames
   (desktop / iPad / mobile) show the button embedded in the input.
   At ≥992px the shared CSS already provides embedded layout; no conflict. */
@media (max-width: 991px) {
  /* Compact field — design pass 2026-06-19 (was 50px, "too big on mobile").
     35px / 12px input + embedded 12px button. NOTE: drops below the 44px
     tap-target floor the 50px was protecting — explicit override per Amit. */
  .footer__capture .capture-form__input {
    height: 35px;
    text-align: left;
    font-size: var(--font-size-2xs); /* 12px */
    padding-right: 120px; /* clearance for the smaller embedded button */
  }

  .footer__capture .capture-form__btn {
    position: absolute;
    top: 50%;
    right: var(--space-xs);
    transform: translateY(-50%);
    width: auto;
    height: 28px; /* fits inside the 35px field */
    min-height: unset;
    padding: 0 var(--space-sm); /* 12px */
    font-size: var(--font-size-2xs); /* 12px */
  }
}

/* ============================================================================
   Mobile-only (<768px) layout tweaks — design pass 2026-06-19
   - CTA heading drops to 12px.
   - Inner stack reverses so the brand block (logo + socials + form) sits at
     the BOTTOM, nav links on top ("fello, social links, and form field
     should be at the bottom").
   ============================================================================ */

@media (max-width: 767px) {
  .footer__inner {
    flex-direction: column-reverse;
  }

  .footer__cta-heading {
    font-size: var(--font-size-2xs); /* 12px (was 20px) */
    line-height: 18px;
  }
}

/* ============================================================================
   Nav grid — base (mobile): single-column stack.
   Tablet tier: 2×3 grid. Desktop tier: inherited from tablet (same grid).
   ============================================================================ */

.footer__nav-grid {
  display: grid;
  grid-template-columns: 1fr; /* mobile base: all 6 columns stack single-column */
  column-gap: 0;
  row-gap: var(--space-xl); /* 32px */
}

.footer__col {
  display: flex;
  flex-direction: column;
}

/* Column heading */
.footer__overline {
  font-family: var(--font-body);
  font-size: var(--font-size-sm); /* 14px */
  font-weight: 700;
  line-height: 20px;
  text-transform: uppercase;
  color: var(--color-background);
  margin: 0 0 var(--footer-link-gap); /* 6px */
}

/* Nav links */
.footer__nav {
  display: flex;
  flex-direction: column;
}

.footer__nav li {
  margin-bottom: var(--footer-link-gap); /* 6px */
}

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

.footer__nav li a {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--font-size-sm); /* 14px */
  font-weight: 500;
  line-height: 20px;
  color: var(--color-background);
  transition: color var(--transition-fast);
}

.footer__nav li a:hover {
  color: var(--color-brand-salmon);
}

.footer__nav li a:focus-visible {
  outline: none;
  color: var(--color-brand-salmon);
  box-shadow: var(--footer-focus-ring);
  border-radius: var(--radius-sm);
}

/* ============================================================================
   Tablet+ (≥768px, stacked — brand above nav)
   Widened gutter (48px each side). Nav expands to 2×3 grid.
   Content width at 768px: 768 - 96 = 672px > 595px nav min-content — fits.
   Brand column stays full-width (stacked layout; no side-by-side until ≥1280px).
   ============================================================================ */

@media (min-width: 768px) {
  .footer__inner {
    padding: 0 var(--space-3xl); /* 48px gutter each side */
  }

  .footer__nav-grid {
    grid-template-columns: repeat(3, auto); /* 2×3 grid; 6 cols auto-flow */
    column-gap: var(--space-4xl); /* 64px */
    row-gap: var(--space-xl); /* 32px */
  }
}

/* ============================================================================
   Desktop (≥1280px) — side-by-side layout.
   Content width at 1280px: 1280 - 192 = 1088px.
   Brand 474px + nav ~595px = ~1069px min — 1088 ≥ 1069 → fits (19px margin).
   Content width at 1440px: 1440 - 192 = 1248px — Figma ~1245px — faithful.
   ============================================================================ */

@media (min-width: 1280px) {
  .footer {
    padding-block: var(--space-7xl); /* 120px; Figma ~112/146 → clean snap */
  }

  .footer__inner {
    flex-direction: row;
    justify-content: space-between;
    /* stretch so the brand column matches the nav-grid height — lets the
       email form pin to the bottom and line up with the last nav links
       (design pass 2026-06-19) */
    align-items: stretch;
    gap: 0; /* space-between owns the gap in row mode */
    padding: 0 var(--space-6xl); /* 96px gutter each side */
  }

  .footer__brand {
    width: var(--footer-cta-width); /* 474px */
    /* identity pinned top, CTA (heading + form) pinned bottom so the input's
       bottom edge aligns with the nav links' bottom; 96px is the min gap */
    justify-content: space-between;
    gap: var(--space-6xl); /* 96px; Figma 91px → snap to --space-6xl */
  }

  .footer .footer__capture {
    max-width: var(--footer-cta-width); /* 474px — caps to brand column */
  }

  /* Desktop nav-grid spacing — design pass 2026-06-19 (was 32/64) */
  .footer__nav-grid {
    row-gap: var(--space-2xl); /* 40px */
    column-gap: var(--space-5xl); /* 80px */
  }
}
/* Menu and simple menu */

.hs-menu-wrapper ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding-left: 0;
}

/* Horizontal menu */

.hs-menu-wrapper.hs-menu-flow-horizontal .hs-menu-children-wrapper {
  flex-direction: column;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.hs-menu-flow-horizontal ul {
    flex-direction: column;
  }
}

/* Vertical menu */

.hs-menu-wrapper.hs-menu-flow-vertical ul {
  flex-direction: column;
}

/* Flyouts */

.hs-menu-wrapper.hs-menu-flow-vertical.flyouts ul {
  display: inline-flex;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.hs-menu-flow-vertical ul {
    display: flex;
  }
}

.hs-menu-wrapper.flyouts .hs-item-has-children {
  position: relative;
}

.hs-menu-wrapper.flyouts .hs-menu-children-wrapper {
  left: -9999px;
  opacity: 0;
  position: absolute;
}

.hs-menu-wrapper.flyouts .hs-menu-children-wrapper a {
  display: block;
  white-space: nowrap;
}

.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
  left: 0;
  opacity: 1;
  top: 100%;
}

.hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
  left: 100%;
  opacity: 1;
  top: 0;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.flyouts .hs-menu-children-wrapper,
  .hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper,
  .hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
    left: 0;
    opacity: 1;
    position: relative;
    top: auto;
  }
}

/* CTA, logo, and rich text images */

.hs_cos_wrapper_type_cta img,
.hs_cos_wrapper_type_logo img,
.hs_cos_wrapper_type_rich_text img {
  height: auto;
  max-width: 100%;
}

/* Homepage shared primitives — consumed by MULTIPLE homepage modules, so
   they stay global (~3KB). MODULE-PRIVATE CSS does NOT belong here: it
   lives in the module's own module.hubl.css, which HubSpot injects only
   on pages that use the module (CLAUDE.md → HubL discipline). */


.section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px; /* capture D2 — intentional tight stack, flagged */
  /* No max-width cage (Amit, 2026-06-12): heading/sub use allow_new_line —
     the field's newlines control the measure, not a width clamp. */
  margin-inline: auto;
}

.section-header--left {
  align-items: flex-start;
  text-align: left;
  margin-inline: 0;
}

.section-header__overline {
  font-family: var(--font-body);
  font-size: var(--font-size-2xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2.2px; /* homepage overline tracking (capture) */
  color: var(--color-text-interactive);
  margin: 0 0 var(--space-xxs);
  font-variation-settings: "wdth" 100;
  font-feature-settings: "ss01" 1;
}

/* Overline colour variants */
.section-header__overline--alert {
  color: var(--color-alert);
}

.section-header__overline--brand {
  color: var(--color-brand-salmon);
}

.section-header__heading {
  font-family: var(--font-body);
  font-size: var(--font-size-3xl);
  line-height: 1.1;
  font-weight: 600;
  color: var(--color-text-heading);
  margin: 0;
  /* Marketing controls line breaks via newlines in the field */
  white-space: pre-line;
  font-variation-settings: "wdth" 100;
  font-feature-settings: "ss01" 1;
}

.section-header__sub {
  font-family: var(--font-body);
  font-size: var(--font-size-lg);
  line-height: 26px; /* capture D2: sub 18/26 desktop */
  font-weight: 500;
  color: var(--color-text-body); /* gray-7 */
  margin: 14px 0 0; /* heading → description gap (design) */
  white-space: pre-line;
  font-variation-settings: "wdth" 100;
  font-feature-settings: "ss01" 1;
}

@media (max-width: 991px) {
  .section-header__heading {
    /* Homepage mobile H2 is 26px (capture) — NOT the global 28px step-down.
       Scale conflict flagged in the Anjali review doc (item 7). */
    font-size: var(--font-size-2xl);
  }

  .section-header__sub {
    font-size: var(--font-size-md);
    line-height: 23px; /* mobile capture: sub 16/23 */
  }
}


.marquee {
  overflow: hidden;
  /* Edge fade (capture: alpha-fade masks on ticker + hero strip) */
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}

.marquee__track {
  display: flex;
  align-items: center;
  gap: var(--marquee-gap, var(--space-lg));
  width: max-content;
  animation: marquee-scroll var(--marquee-duration, 40s) linear infinite;
}

/* Pause-on-hover is OPT-IN (add .marquee--interactive) — decorative
   marquees like the hero chips must never react to the user. */
.marquee--interactive:hover .marquee__track {
  animation-play-state: paused;
}

/* Scrollable variant (add .marquee--scroll) — a REAL native scroll
   container; scripts/marquee.js drives the auto-advance via scrollLeft and
   pauses it on interaction. Native touch/trackpad momentum + keyboard come
   free; the JS adds mouse drag-to-scroll on top. The edge fade still
   applies. Pause-on-hover and the CSS keyframes are handled in JS here, so
   the transform animation is switched off. */
.marquee--scroll {
  overflow-x: auto;
  overflow-y: hidden;
  /* Don't let horizontal swipes chain to page-back / browser nav gestures. */
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* decorative — auto-advance is the primary affordance */
  cursor: grab;
}

.marquee--scroll::-webkit-scrollbar {
  display: none;
}

.marquee--scroll.is-grabbing {
  cursor: grabbing;
}

.marquee--scroll .marquee__track {
  animation: none; /* JS drives scrollLeft instead of the CSS transform */
}

/* Visible focus ring for keyboard users who tab to the scrollable region. */
.marquee--scroll:focus-visible {
  outline: 2px solid var(--color-text-interactive);
  outline-offset: 2px;
}

/* Draggable variant (add .marquee--drag) — same continuous look as the
   decorative marquee, but the track is moved by JS translate3d (NOT a native
   scroll container — a continuously-scrolled overflow box blanks the hero
   WebGL orb in Chrome) and is grabbable by mouse/touch/pen so visitors can
   read any card. scripts/marquee.js owns the motion + drag + pause logic. */
.marquee--drag {
  cursor: grab;
  touch-action: pan-y; /* horizontal = our drag; vertical = page scroll */
  user-select: none;
  -webkit-user-select: none;
}

.marquee--drag.is-grabbing {
  cursor: grabbing;
}

.marquee--drag .marquee__track {
  animation: none; /* JS drives translate3d instead of the CSS keyframes */
  width: max-content;
}

.marquee--drag:focus-visible {
  outline: 2px solid var(--color-text-interactive);
  outline-offset: 2px;
}

/* Right-scroll variant: reverse the keyframes for a seamless rightward loop
   (the track holds content + a clone, so 0 and -50% are interchangeable). */
.marquee--right .marquee__track {
  animation-direction: reverse;
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    /* Track holds two copies of the content — -50% loops seamlessly */
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee {
    -webkit-mask-image: none;
    mask-image: none;
    overflow-x: auto;
  }

  .marquee__track {
    animation: none;
  }
}


.surface-card {
  background-color: var(--color-gray-1);
  border: 0.5px solid var(--color-border-hairline);
  border-radius: var(--radius-xs);
  overflow: hidden;
}

/* Lighter hairline variant (logo tiles, GCI cards use gray-stroke) */
.surface-card--soft {
  border-color: var(--color-border-default);
}

/* Slightly rounder variant (proof-carousel cards ≈4px) */
.surface-card--round {
  border-radius: var(--radius-sm);
}

/* Inner mock panel chrome (feature cards): warm surface that bleeds off
   the card edge; the soft black shadow stack reads as elevation. */
.surface-card__panel {
  background-color: var(--color-bg-page);
  border: 0.5px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card-default);
}


.capture-form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: 100%;
  max-width: 474px; /* capture D6/D10: field 474×52 */
}

.capture-form__input {
  width: 100%;
  height: 52px; /* capture D6/D10: field 474×52 */
  background: var(--color-white);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: 0 var(--space-md);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-heading);
  font-variation-settings: "wdth" 100;
  font-feature-settings: "ss01" 1;
}

.capture-form__input::placeholder {
  color: var(--color-text-heading);
  opacity: 0.85;
}

.capture-form__input:focus-visible {
  outline: none;
  border-color: var(--color-border-hairline);
  box-shadow: var(--shadow-focus-ring);
}

/* Desktop: embed the button inside the field */
@media (min-width: 992px) {
  .capture-form--embedded .capture-form__input {
    padding-right: 160px; /* clearance for the embedded button */
  }

  /* Size (36h, 14/600, pad 16) comes from btn--medium — this rule only
     places the button inside the field (capture: inset 8) */
  .capture-form--embedded .capture-form__btn {
    position: absolute;
    top: 50%;
    right: var(--space-xs);
    transform: translateY(-50%);
  }
}

@media (max-width: 991px) {
  .capture-form {
    max-width: none;
    gap: var(--space-sm); /* tighter stack on mobile (design pass 2026-06-12) */
  }

  .capture-form__input {
    height: 50px; /* mobile capture: stacked field 50h */
    text-align: center;
  }

  .capture-form__btn {
    width: 100%;
    /* The btn--medium 44px bump only fires ≤767px, but this form stacks
       ≤991px — the standalone touch button must hit the 44px floor across
       the whole stacked range (reviewer B1) */
    min-height: 44px;
  }
}

/* Utilities
Helper classes with ability to override anything that comes before it
*/



/* === Display ============================================================== */
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.hidden {
  display: none;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.grid {
  display: grid;
}

/* === Flex direction & wrap ================================================ */
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-nowrap {
  flex-wrap: nowrap;
}

/* === Align items (cross axis) ============================================= */
.items-start {
  align-items: flex-start;
}
.items-center {
  align-items: center;
}
.items-end {
  align-items: flex-end;
}
.items-stretch {
  align-items: stretch;
}
.items-baseline {
  align-items: baseline;
}

/* === Justify content (main axis) ========================================== */
.justify-start {
  justify-content: flex-start;
}
.justify-center {
  justify-content: center;
}
.justify-end {
  justify-content: flex-end;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}

/* === Flex item ============================================================ */
.flex-1 {
  flex: 1 1 0%;
}
.flex-auto {
  flex: 1 1 auto;
}
.flex-none {
  flex: none;
}
.grow {
  flex-grow: 1;
}
.shrink-0 {
  flex-shrink: 0;
}

/* === Gap (token-bound; applies to flex + grid) ============================ */
.gap-xs {
  gap: var(--space-xs);
}
.gap-sm {
  gap: var(--space-sm);
}
.gap-md {
  gap: var(--space-md);
}
.gap-lg {
  gap: var(--space-lg);
}
.gap-xl {
  gap: var(--space-xl);
}
.gap-2xl {
  gap: var(--space-2xl);
}

/* === Stack spacing (owl) ==================================================
   For content streams where flex `gap` doesn't apply (prose, stacked blocks).
   Default step is --space-md; .flow-sm / .flow-lg retune via --flow-space. */
.flow > * + * {
  margin-block-start: var(--flow-space, var(--space-md));
}
.flow-sm {
  --flow-space: var(--space-sm);
}
.flow-lg {
  --flow-space: var(--space-lg);
}

/* === Padding (maps to Figma auto-layout padding) ========================== */
.p-xs {
  padding: var(--space-xs);
}
.p-sm {
  padding: var(--space-sm);
}
.p-md {
  padding: var(--space-md);
}
.p-lg {
  padding: var(--space-lg);
}
.p-xl {
  padding: var(--space-xl);
}
.p-2xl {
  padding: var(--space-2xl);
}

.px-xs {
  padding-inline: var(--space-xs);
}
.px-sm {
  padding-inline: var(--space-sm);
}
.px-md {
  padding-inline: var(--space-md);
}
.px-lg {
  padding-inline: var(--space-lg);
}
.px-xl {
  padding-inline: var(--space-xl);
}
.px-2xl {
  padding-inline: var(--space-2xl);
}

.py-xs {
  padding-block: var(--space-xs);
}
.py-sm {
  padding-block: var(--space-sm);
}
.py-md {
  padding-block: var(--space-md);
}
.py-lg {
  padding-block: var(--space-lg);
}
.py-xl {
  padding-block: var(--space-xl);
}
.py-2xl {
  padding-block: var(--space-2xl);
}

/* === Margin (focused — gap/flow handle most spacing) ====================== */
.m-0 {
  margin: 0;
}
.mt-0 {
  margin-top: 0;
}
.mb-0 {
  margin-bottom: 0;
}
.mx-auto {
  margin-inline: auto;
}

.mb-xs {
  margin-bottom: var(--space-xs);
}
.mb-sm {
  margin-bottom: var(--space-sm);
}
.mb-md {
  margin-bottom: var(--space-md);
}
.mb-lg {
  margin-bottom: var(--space-lg);
}
.mb-xl {
  margin-bottom: var(--space-xl);
}
.mb-2xl {
  margin-bottom: var(--space-2xl);
}

/* === Width ================================================================ */
.w-full {
  width: 100%;
}
.w-auto {
  width: auto;
}
.w-fit {
  width: fit-content;
}
.max-w-content {
  max-width: var(--layout-content-max);
}
.max-w-canvas {
  max-width: var(--layout-canvas-max);
}

/* === Text align =========================================================== */
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}

/* === Responsive (< 768px) — curated subset ================================ */
@media (max-width: 767px) {
  .flex-col-mobile {
    flex-direction: column;
  }
  .hidden-mobile {
    display: none;
  }
  .text-center-mobile {
    text-align: center;
  }
  .gap-sm-mobile {
    gap: var(--space-sm);
  }
}
/* For content that needs to be visually hidden but stay visible for screenreaders */

.show-for-sr {
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

@media (max-width: 767px) {
  .show-for-sr--mobile {
    border: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;
  }
}

/* Desktop / mobile copy split — the one source of truth for the per-breakpoint
   text behaviour applied across modules (heroes, CTAs, section headers, etc.).
   Modules wrap allow_new_line copy in spans carrying these classes via the
   dm_text macro, so the SAME convention lives in one place and module CSS never
   has to fight theme CSS over white-space (these classes target spans the module
   CSS does not style — no load-order ambiguity; see CLAUDE.md HubL discipline).

   991px is the site mobile breakpoint (matches every module's media query).

   - u-reflow-mobile: base/desktop copy. Authored newlines render as line breaks
     on desktop, then collapse to spaces on mobile so the copy wraps naturally to
     the viewport instead of forcing the desktop breaks (the default behaviour).
   - u-mobile-lines: marketer-authored mobile copy keeps ITS own newlines.
   - u-hide-mobile / u-show-mobile: swap desktop copy out for mobile copy below
     991px. A span's own white-space wins over the parent's, so reflow/mobile
     line behaviour is deterministic regardless of stylesheet order. */
.u-reflow-mobile,
.u-mobile-lines {
  white-space: pre-line;
}

.u-show-mobile {
  display: none;
}

@media (max-width: 991px) {
  .u-reflow-mobile {
    white-space: normal;
  }

  .u-hide-mobile {
    display: none;
  }

  .u-show-mobile {
    display: inline;
  }
}