/* ============================================================================
   WavvyBaby Design Tokens — v1.0 (2026-10-12)
   Extracted verbatim from the live Shopify theme (wavvy-theme/assets/wavvy-custom.css).
   Drop this in, point --wb-font-path at wherever you serve brand-kit/fonts/,
   and the portal will match wavvybaby.com.

   Companion doc: WAVVYBABY-DESIGN-SYSTEM.md (read that first)
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. FONTS
   Athletics = display/UI face (licensed, self-hosted). Lato = body face.
   Adjust the url() paths to match where you serve the fonts/ folder.
   --------------------------------------------------------------------------- */

@font-face {
  font-family: 'Athletics';
  src: url('./fonts/Athletics-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Athletics';
  src: url('./fonts/Athletics-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Athletics';
  src: url('./fonts/Athletics-MediumItalic.woff2') format('woff2');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Athletics';
  src: url('./fonts/Athletics-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Athletics';
  src: url('./fonts/Athletics-Black.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}

/* Lato via Google Fonts — put this in <head> rather than @import for performance:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
*/

/* ---------------------------------------------------------------------------
   2. TOKENS
   --------------------------------------------------------------------------- */

:root {
  /* --- Brand blues --- */
  --wavvy-blue:        #0444a4;  /* PRIMARY. CTAs, headings, links, icon strokes */
  --wavvy-blue-deep:   #032E6F;  /* hover / pressed state of primary */
  --wavvy-blue-line:   #A4B6E0;  /* hairline + outline tone */

  /* --- Ink. One single text color site-wide. Hierarchy = size + weight, NOT color. --- */
  --wavvy-ink:         #102463;
  --wavvy-ink-soft:    #102463;  /* alias — intentionally identical */
  --wavvy-ink-deep:    #102463;  /* alias — intentionally identical */

  /* --- Surfaces --- */
  --wavvy-canvas:      #FFFFFF;  /* default page + card background */
  --wavvy-tint:        #F0F7FF;  /* light blue-tinted section background */
  --wavvy-tint-deep:   #E1ECFB;  /* deeper tint for callout blocks */
  --wavvy-mist:        #E3EEF3;  /* soft mist */
  --wavvy-oat:         #F3ECDF;  /* warm neutral (panel variant uses #FAF5EC) */

  /* --- Accents (use sparingly) --- */
  --wavvy-sky:         #BEE6FA;  /* eyebrow text on dark navy bands */
  --wavvy-green:       #78D97E;  /* "save" badges, positive pops */
  --wavvy-green-soft:  #E9F8EC;  /* check-chip background */
  --wavvy-green-deep:  #2E7D52;  /* success text + check strokes */
  --wavvy-coral:       #F3756D;  /* error ICON/border + micro-accent. Fails contrast as text. */
  --wavvy-coral-text:  #C8453C;  /* accessible error TEXT (4.9:1 on white) — portal addition */
  --wavvy-star:        #F5B341;  /* review stars only */

  /* --- The one gradient. Thin accents only: top bar, badge, divider.
         NEVER a section background. --- */
  --wavvy-gradient: linear-gradient(90deg, #C9CEEF 0%, #C5E2EF 38%, #C8EAD8 78%, #D9F0DD 100%);

  /* --- Reserved: Final-CTA band only. Do not use as a general dark. --- */
  --wavvy-final-cta:   #0E2768;

  /* --- Hairlines --- */
  --wavvy-hairline:       rgba(15, 44, 73, .08);   /* footer/section separators */
  --wavvy-hairline-row:   #EEF1F8;                  /* table + list row dividers */
  --wavvy-hairline-ink:   rgba(16, 36, 99, .18);    /* trust-strip rules */

  /* --- Type --- */
  --wb-font-display: "Athletics", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wb-font-body:    "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* --- Radii. Pill is for BUTTONS ONLY. --- */
  --wb-r-pill:   999px;  /* buttons, chips-on-buttons, icon buttons, inputs */
  --wb-r-card:   16px;   /* default card */
  --wb-r-panel:  22px;   /* large panel / accordion shell */
  --wb-r-img:    18px;   /* image container */
  --wb-r-tile:   12px;   /* icon tile, inline callout */
  --wb-r-chip:   8px;    /* small badge */

  /* --- Shadows. Always navy-tinted, always layered, always soft. --- */
  --wb-shadow-card:  0 12px 26px -22px rgba(4, 68, 164, .30),
                     inset 0 0 0 1px rgba(164, 182, 224, .30);
  --wb-shadow-panel: 0 18px 40px -30px rgba(4, 68, 164, .40),
                     inset 0 0 0 1px rgba(164, 182, 224, .35);
  --wb-shadow-cta:   0 8px 20px -12px rgba(4, 68, 164, .55);
  --wb-shadow-cta-h: 0 12px 28px -14px rgba(4, 68, 164, .65);
  --wb-shadow-float: 0 10px 32px -22px rgba(3, 46, 111, .25);

  /* --- Motion --- */
  --wb-ease:      cubic-bezier(.25, .46, .45, .94);  /* the house curve */
  --wb-ease-out:  cubic-bezier(.2, .7, .2, 1);       /* entrances */
  --wb-t-fast:    .15s;
  --wb-t-base:    .2s;
  --wb-t-slow:    .25s;

  /* --- Layout --- */
  --wb-max:       1280px;
  --wb-gutter:    clamp(1.5rem, 5vw, 4rem);
  --wb-sec-y:     clamp(3rem, 5.5vw, 5rem);
}

/* ---------------------------------------------------------------------------
   3. BASE
   --------------------------------------------------------------------------- */

/* Border-box everywhere. Required — several components below pair width:100%
   with horizontal padding (.wb-acc__q, .wb-field, .wb-btn), which overflows
   its container under the default content-box. */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--wavvy-canvas);
  color: var(--wavvy-ink);
  font: 400 .98rem/1.6 var(--wb-font-body);
  -webkit-font-smoothing: antialiased;
}

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

/* ---------------------------------------------------------------------------
   4. TYPOGRAPHY
   All headings are Athletics 700 in --wavvy-blue with negative tracking.
   All body copy is Lato in --wavvy-ink. No exceptions worth making.
   --------------------------------------------------------------------------- */

.wb-h1 {
  font: 700 clamp(2.3rem, 4.9vw, 3.8rem)/1.06 var(--wb-font-display);
  letter-spacing: -.018em; color: var(--wavvy-blue); margin: 0;
}
.wb-h2 {
  font: 700 clamp(1.7rem, 3vw, 2.4rem)/1.1 var(--wb-font-display);
  letter-spacing: -.022em; color: var(--wavvy-blue); margin: 0 0 .65rem;
}
.wb-h3 {
  font: 700 clamp(1.05rem, 1.4vw, 1.2rem)/1.3 var(--wb-font-display);
  letter-spacing: -.005em; color: var(--wavvy-blue); margin: 0 0 .3rem;
}
/* Caps section kicker — e.g. "HOW IT WORKS", "YOUR ORDERS" */
.wb-eyebrow {
  font: 600 .78rem/1 var(--wb-font-display);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--wavvy-blue); margin: 0 0 1rem;
}
.wb-lead  { font: 500 1.1rem/1.5 var(--wb-font-body); color: var(--wavvy-ink); }
.wb-body  { font: 400 .98rem/1.6 var(--wb-font-body); color: var(--wavvy-ink); max-width: 32rem; }
.wb-micro { font: 500 .85rem/1.4 var(--wb-font-body); color: var(--wavvy-ink); }
/* Table/column headers, form labels, nav — Athletics, not Lato */
.wb-label {
  font: 600 .88rem/1.3 var(--wb-font-display);
  color: var(--wavvy-ink); margin: 0;
}
.wb-col-title {
  font: 700 .82rem/1 var(--wb-font-display);
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--wavvy-blue); margin: 0 0 1rem;
}

/* On blue / navy surfaces everything flips to white */
.wb-on-dark :where(h1, h2, h3, h4, p, a, span, li,
                   .wb-h1, .wb-h2, .wb-h3) { color: #fff; }
.wb-on-dark :where(.wb-lead, .wb-body)     { color: rgba(255,255,255,.85); }
.wb-on-dark .wb-eyebrow                    { color: var(--wavvy-sky); }
.wb-on-dark *:focus-visible                { outline-color: #fff; }

/* ---------------------------------------------------------------------------
   5. LAYOUT
   --------------------------------------------------------------------------- */

.wb-sec  { padding: var(--wb-sec-y) 0; position: relative; }
.wb-wrap { max-width: var(--wb-max); margin: 0 auto; padding: 0 var(--wb-gutter); }

/* Full-bleed bands. Alternate white / tint. At most ONE full-color band per view. */
.wb-band          { padding: var(--wb-sec-y) 0; position: relative; }
.wb-band--white   { background: var(--wavvy-canvas); }
.wb-band--tint    { background: var(--wavvy-tint); }
.wb-band--oat     { background: #FAF5EC; }
.wb-band--blue    { background: var(--wavvy-blue); color: #fff; }
.wb-band--navy    { background: var(--wavvy-final-cta); color: #fff; } /* final CTA only */
.wb-band--tall    { padding: clamp(4.5rem, 8vw, 7rem) 0; }

/* ---------------------------------------------------------------------------
   6. BUTTONS — pill, always. Three variants, nothing else.
   --------------------------------------------------------------------------- */

.wb-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  border-radius: var(--wb-r-pill);
  font: 600 .95rem/1 var(--wb-font-display);
  padding: .95rem 1.7rem;
  text-decoration: none; cursor: pointer; border: 0;
  outline: 2px solid transparent; outline-offset: 3px;
  transition: transform var(--wb-t-slow) var(--wb-ease),
              background-color var(--wb-t-slow),
              box-shadow var(--wb-t-slow),
              outline-color var(--wb-t-fast);
}
.wb-btn:focus-visible { outline-color: var(--wavvy-blue); }

/* Solid — the primary action. One per view. */
.wb-btn--solid {
  background: var(--wavvy-blue); color: #FFFFFF;
  box-shadow: var(--wb-shadow-cta);
}
.wb-btn--solid:hover {
  background: var(--wavvy-blue-deep); color: #FFFFFF;
  transform: translateY(-1px); box-shadow: var(--wb-shadow-cta-h);
}

/* Outline — white pill, 1.5px blue ring. The workhorse secondary. */
.wb-btn--outline {
  background: #fff; color: var(--wavvy-blue);
  box-shadow: inset 0 0 0 1.5px var(--wavvy-blue);
}
.wb-btn--outline:hover {
  background: #F2F4FA;
  box-shadow: inset 0 0 0 1.5px var(--wavvy-blue-deep);
  transform: translateY(-1px);
}

/* Ghost — for use ON blue/navy backgrounds */
.wb-btn--ghost-light {
  background: transparent; color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6);
}
.wb-btn--ghost-light:hover { background: rgba(255,255,255,.1); }

.wb-btn--lg { padding: 1.15rem 2rem; font-size: 1.05rem; }
.wb-btn--sm { padding: .65rem 1.2rem; font-size: .88rem; }

/* Circular icon button (e.g. submit arrow inside an input) */
.wb-icon-btn {
  width: 2.1rem; height: 2.1rem;
  border-radius: var(--wb-r-pill); border: 0;
  background: var(--wavvy-blue); color: #fff;
  display: grid; place-items: center; cursor: pointer; flex: none;
  transition: background var(--wb-t-base) ease;
}
.wb-icon-btn:hover { background: var(--wavvy-blue-deep); }
.wb-icon-btn svg {
  width: 1rem; height: 1rem;
  stroke: #FFFFFF; stroke-width: 2; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------------------------------------------------------------------------
   7. CARDS & PANELS — rounded rects. Never pills.
   --------------------------------------------------------------------------- */

.wb-card {
  background: var(--wavvy-canvas);
  border-radius: var(--wb-r-card);
  padding: 1.5rem 1.35rem;
  box-shadow: var(--wb-shadow-card);
}
.wb-panel {
  background: var(--wavvy-canvas);
  border-radius: var(--wb-r-panel);
  overflow: hidden;
  box-shadow: var(--wb-shadow-panel);
}
/* Cards flip to white when the band behind them is tinted — keep contrast. */
.wb-band--tint .wb-card { background: #FFFFFF; }

/* Inline emphasis block (a stat, a note, a policy line) */
.wb-callout {
  background: var(--wavvy-tint-deep);
  border-radius: var(--wb-r-img);
  padding: 1rem 1.2rem;
  font: 500 .98rem/1.35 var(--wb-font-body);
  color: var(--wavvy-ink);
  display: inline-block;
}
.wb-callout--quiet {
  background: rgba(4, 68, 164, .06);
  border-radius: var(--wb-r-tile);
  padding: .7rem .95rem;
  font: 500 .95rem/1.5 var(--wb-font-body);
  max-width: 34rem;
}

/* Image container */
.wb-img {
  background: linear-gradient(180deg, #EAF1F6, #DBE6EE);
  border-radius: var(--wb-r-img);
  overflow: hidden;
}
.wb-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------------------------------------------------------------------------
   8. ICONS — line icons in a round tint tile. Never a pill, never filled.
   --------------------------------------------------------------------------- */

.wb-ic-tile {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: var(--wavvy-tint);
  flex: none;
}
.wb-ic-tile svg {
  width: 1.4rem; height: 1.4rem;
  fill: none; stroke: var(--wavvy-blue); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Small green check chip — for "included"/"done"/"active" lists */
.wb-check {
  width: 1.2rem; height: 1.2rem;
  border-radius: var(--wb-r-pill);
  background: var(--wavvy-green-soft);
  display: grid; place-items: center; flex: none;
}
.wb-check svg {
  width: .8rem; height: .8rem;
  stroke: var(--wavvy-green-deep); stroke-width: 2.8; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------------------------------------------------------------------------
   9. FORMS — pill inputs, 1.5px border, blue on focus
   --------------------------------------------------------------------------- */

.wb-field {
  position: relative;
  display: flex; align-items: center;
  background: #FFFFFF;
  border: 1.5px solid rgba(15, 44, 73, .15);
  border-radius: var(--wb-r-pill);
  padding: .35rem .4rem .35rem 1rem;
  width: 100%;
  transition: border-color var(--wb-t-base) ease;
}
.wb-field:focus-within { border-color: var(--wavvy-blue); }
.wb-field input,
.wb-field select {
  flex: 1; border: 0; outline: 0; background: transparent;
  font: 500 .9rem/1.4 var(--wb-font-body);
  color: var(--wavvy-ink);
  padding: .55rem 0; min-width: 0;
}
.wb-field input::placeholder { color: rgba(16, 36, 99, .45); }

/* Multi-line / block input: same treatment, card radius instead of pill */
.wb-field--block { border-radius: var(--wb-r-card); padding: .75rem 1rem; }

.wb-msg-ok  { font: 500 .82rem/1.4 var(--wb-font-body); color: var(--wavvy-green-deep); margin: .25rem 0 0; }
.wb-msg-err { font: 500 .82rem/1.4 var(--wb-font-body); color: var(--wavvy-coral-text); margin: .25rem 0 0; }

/* Selectable option row (plan picker, address picker, radio card) */
.wb-option {
  position: relative; display: flex; align-items: flex-start; gap: .75rem;
  border: 1.5px solid #E0E6F0; border-radius: var(--wb-r-card);
  padding: 1rem 1rem 1rem 1.1rem; cursor: pointer;
  transition: border-color var(--wb-t-base), background-color var(--wb-t-base);
}
.wb-option:hover,
.wb-option.is-selected { border-color: var(--wavvy-blue); background: var(--wavvy-tint); }
.wb-option input[type="radio"],
.wb-option input[type="checkbox"] { margin-top: .15rem; accent-color: var(--wavvy-blue); width: 1.1rem; height: 1.1rem; }
.wb-option__title { font: 600 .95rem/1.2 var(--wb-font-body); color: var(--wavvy-ink); }
.wb-option__meta  { font-size: .85rem; color: var(--wavvy-ink); opacity: .75; }
/* Green "save" flag pinned to a selected option */
.wb-option__flag {
  position: absolute; top: -.6rem; right: .9rem;
  font: 600 .7rem/1 var(--wb-font-body);
  background: var(--wavvy-green); color: #062a13;
  border-radius: var(--wb-r-chip); padding: .3rem .6rem;
}

/* ---------------------------------------------------------------------------
   10. TABLES & LISTS
   --------------------------------------------------------------------------- */

.wb-table {
  width: 100%; border-collapse: collapse;
  background: #FFFFFF;
  border-radius: var(--wb-r-panel); overflow: hidden;
  box-shadow: var(--wb-shadow-panel);
}
.wb-table th, .wb-table td { padding: 1.25rem 1rem; text-align: left; }
.wb-table thead th {
  font: 700 .95rem/1.2 var(--wb-font-display);
  color: var(--wavvy-blue);
}
.wb-table tbody td {
  font: 400 .94rem/1.5 var(--wb-font-body);
  color: var(--wavvy-ink);
  border-bottom: 1px solid var(--wavvy-hairline-row);
}
.wb-table tbody tr:last-child td { border-bottom: 0; }
.wb-table tbody tr:hover td { background: rgba(15, 44, 73, .015); }
/* Horizontal scroll container — the ONE place horizontal overflow is allowed */
.wb-table-wrap { overflow-x: auto; }

/* ---------------------------------------------------------------------------
   11. ACCORDION (FAQ / collapsible detail)
   --------------------------------------------------------------------------- */

.wb-acc {
  background: #fff; border-radius: var(--wb-r-panel); overflow: hidden;
  box-shadow: 0 10px 30px -22px rgba(3, 46, 111, .3);
}
.wb-acc__item { border-bottom: 1px solid var(--wavvy-hairline-row); }
.wb-acc__item:last-child { border-bottom: none; }
.wb-acc__q {
  width: 100%; background: transparent; border: none; text-align: left;
  padding: 1.1rem 1.25rem;
  font: 500 1rem/1.3 var(--wb-font-body); color: var(--wavvy-ink);
  cursor: pointer; display: flex; justify-content: space-between;
  align-items: center; gap: 1rem;
}
.wb-acc__q:focus-visible { outline: 2px solid var(--wavvy-blue); outline-offset: -2px; }
/* Works as either <summary> or <button>. Kill the native disclosure triangle. */
.wb-acc__q { list-style: none; }
.wb-acc__q::-webkit-details-marker,
.wb-acc__q::marker { display: none; content: ""; }
.wb-acc__q .chev {
  width: 1rem; height: 1rem; stroke: var(--wavvy-ink); fill: none; stroke-width: 2;
  transition: transform var(--wb-t-slow); flex: none;
}
.wb-acc__item[open] .chev { transform: rotate(180deg); }
.wb-acc__a { padding: 0 1.25rem 1.2rem; font: 400 .94rem/1.55 var(--wb-font-body); color: var(--wavvy-ink); }

/* ---------------------------------------------------------------------------
   12. NAV / HEADER
   --------------------------------------------------------------------------- */

.wb-header {
  max-width: var(--wb-max); margin: 0 auto;
  padding: 18px var(--wb-gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.wb-logo { height: clamp(32px, 3.52vw, 46px); width: auto; max-width: 292px; display: block; }

.wb-nav { display: flex; gap: clamp(1.25rem, 2.8vw, 2.5rem); }
.wb-nav a {
  font: 500 .9rem/1 var(--wb-font-display);
  letter-spacing: .01em; color: var(--wavvy-ink);
  text-decoration: none; position: relative; padding: .25rem 0;
  transition: color var(--wb-t-base) ease;
}
.wb-nav a:hover { color: var(--wavvy-blue); }
/* Signature underline: grows from the center on hover */
.wb-nav a::after {
  content: ""; position: absolute; left: 50%; bottom: -.2rem;
  width: 0; height: 1.5px; background: var(--wavvy-blue); border-radius: 2px;
  transition: width var(--wb-t-slow) ease, left var(--wb-t-slow) ease;
}
.wb-nav a:hover::after { width: 100%; left: 0; }

/* Compact pill CTA in the header */
.wb-nav-cta {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .65rem 1.2rem;
  background: var(--wavvy-blue); color: #FFFFFF;
  font: 600 .88rem/1 var(--wb-font-display); letter-spacing: .01em;
  text-decoration: none; border-radius: var(--wb-r-pill);
  box-shadow: 0 6px 16px -10px rgba(4, 68, 164, .45);
  transition: background var(--wb-t-base) ease,
              transform var(--wb-t-base) var(--wb-ease),
              box-shadow var(--wb-t-base) ease;
}
.wb-nav-cta:hover {
  background: var(--wavvy-blue-deep); color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -12px rgba(4, 68, 164, .55);
}

/* The one gradient: a thin top bar. Nothing else. */
.wb-topbar {
  background: var(--wavvy-gradient);
  color: var(--wavvy-ink);
  font: 500 .8rem/1.2 var(--wb-font-body);
  padding: 10px var(--wb-gutter);
  text-align: center;
}

/* ---------------------------------------------------------------------------
   13. FOOTER
   --------------------------------------------------------------------------- */

.wb-footer {
  background: #FFFFFF; color: var(--wavvy-ink);
  border-top: 1px solid var(--wavvy-hairline);
  padding: clamp(2.5rem, 5vw, 3.5rem) var(--wb-gutter) 1.5rem;
}
.wb-footer__inner { max-width: var(--wb-max); margin: 0 auto; }
.wb-footer__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .55rem; }
.wb-footer__list a {
  font: 400 .92rem/1.4 var(--wb-font-body); color: var(--wavvy-ink);
  text-decoration: none; transition: color var(--wb-t-fast) ease;
}
.wb-footer__list a:hover { color: var(--wavvy-blue); }

/* ---------------------------------------------------------------------------
   14. WAVE DIVIDER
   The brand's signature section transition. Paste the SVG, set fill to the
   color of the section BELOW it. Place it at the bottom of the upper section.
   --------------------------------------------------------------------------- */

.wb-wave {
  position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2;
  display: block; width: 100%; line-height: 0; pointer-events: none;
}
.wb-wave svg { width: 100%; display: block; height: clamp(60px, 7vw, 96px); }

/* Static (non-overlapping) variant, between two stacked bands */
.wb-wave--inline { position: relative; bottom: auto; height: clamp(50px, 5vw, 80px); }
.wb-wave--inline svg { height: 100%; }

/* ---------------------------------------------------------------------------
   15. MOTION
   Lift-on-hover is the house interaction: translateY(-1px) + deeper shadow.
   Respect reduced motion.
   --------------------------------------------------------------------------- */

.wb-lift { transition: transform var(--wb-t-slow) var(--wb-ease), box-shadow var(--wb-t-slow) var(--wb-ease); }
.wb-lift:hover { transform: translateY(-2px); box-shadow: var(--wb-shadow-panel); }

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

/* ---------------------------------------------------------------------------
   16. RESPONSIVE
   Breakpoints as used in the live theme: 540 / 749 / 980 / 1024.
   749px is the main mobile cut.
   --------------------------------------------------------------------------- */

@media (max-width: 749px) {
  .wb-header { padding-top: 14px; padding-bottom: 14px; }
  .wb-logo   { height: 32px; max-width: 220px; }

  /* The inline nav does not fit next to the wordmark + CTA on a phone.
     The live site swaps to a drawer here. Supply your own menu button and
     drawer; this just stops the row from overflowing the viewport. */
  .wb-nav { display: none; }

  /* Multi-column grids collapse */
  .wb-footer__cols { grid-template-columns: 1fr; }
}

/* Nothing may push the page wider than the viewport. Tables opt out via
   .wb-table-wrap; everything else stays inside. */
body { overflow-x: hidden; }
img, svg, video { max-width: 100%; }