/* GENERATED by tools-seo-inject.py (flatten_ds) from _ds/space-heroes-design-system-0f52c487-49d1-49fc-b7ea-0fbe969450ec/styles.css.
   Do not edit: change the token files under _ds, or this script, and
   re-run it. Why this file exists is written above flatten_ds(). */

/* ---- tokens/fonts.css ---- */
/* Space Heroes webfonts.
   SOURCE OF TRUTH: the brand specifies three licensed/custom faces —
   American Captain (display), Sonny Gothic (body), Spacelord Two (script accent).
   No font binaries were supplied with the asset folder, so the closest
   Google Fonts stand-ins are loaded here and aliased in typography.css.
   Replace the @import below with real @font-face rules once the .otf/.ttf
   files land in assets/fonts/. See readme.md → "Font substitutions". */
/* Anton is no longer in this request. It is served from assets/fonts and
   preloaded from the static head, because it sets every headline and the
   hero now paints before any of this stylesheet has run. Leaving it here
   too meant the same 12 KB face arriving twice, from two origins, and the
   later declaration winning the cascade: ds-base.js appends this sheet at
   runtime, so it lands after sh-responsive.css where the local face is.
   If this design system is ever re-synced and the line comes back, the
   site still works, it just pays for Anton twice again. */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/assets/fonts/figtree-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/assets/fonts/figtree-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("/assets/fonts/figtree-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Figtree";
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("/assets/fonts/figtree-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Racing Sans One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/racing-sans-one-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Racing Sans One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/racing-sans-one-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/roboto-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Roboto Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/roboto-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- tokens/colors.css ---- */
/* Space Heroes — Color Palette
   Verbatim from "Design System — Color Palette" (Figma export, see source-refs/).
   Base ramp first, semantic aliases second. Never introduce a hex that is not here. */
:root {
  /* ---- Primary ---- */
  --sh-navy: #141946;            /* Dark Navy — primary background */
  --sh-royal: #0274C9;           /* Royal Blue — secondary background */
  --sh-gold: #FAB90A;            /* Gold — primary accent, borders */
  --sh-white: #FFFFFF;           /* White — text, stars, icons */

  /* ---- Secondary ---- */
  --sh-cyan: #00B9EA;            /* Cyan Blue — accents, highlights */
  --sh-deep-blue: #00539B;       /* Deep Blue — mid-tone background */
  --sh-midnight: #061834;        /* Midnight Navy — darkest background */
  --sh-sky: #1781CF;             /* Sky Blue — gradient mid-tone */

  /* ---- Accent ---- */
  --sh-purple: #86298E;          /* Purple — gradients, space effects */
  --sh-magenta: #D30DC9;         /* Magenta — gradient highlights */
  --sh-yellow: #FEEA02;          /* Bright Yellow — highlight accents */
  --sh-yellow-warm: #F8D23C;     /* Warm Yellow — secondary gold tone */

  /* ---- Deep backdrops ----
     Two shades darker than Midnight, in use across every page as the fill
     behind full-bleed section artwork and as the darkest section floor.
     They were being written as raw hex in the templates; named here so the
     "never introduce a hex that is not here" rule holds. NEEDS BRAND SIGN-OFF:
     neither appears on the supplied Figma palette board. */
  --sh-navy-deep: #0A1130;       /* fill behind full-bleed section imagery */
  --sh-black-space: #030B1C;     /* darkest section floor, below Midnight */

  /* ---- Supporting / Illustration ---- */
  --sh-orange: #EDA64F;          /* Warm Orange — illustration, skin tones */
  --sh-peach: #FDC07C;           /* Peach — character highlights */
  --sh-slate: #2A4566;           /* Slate Blue — illustration shadows */
  --sh-gray: #D9D8D9;            /* Light Gray — silhouettes, buildings */

  /* ---- Brand gradients ---- */
  --sh-gradient-cosmos: linear-gradient(103deg, #141946 0%, #0274C9 42%, #86298E 100%); /* @kind color */
  --sh-gradient-cosmos-deep: linear-gradient(160deg, #061834 0%, #141946 45%, #86298E 100%); /* @kind color */
  --sh-gradient-signal: linear-gradient(90deg, #FAB90A 0%, #FEEA02 100%); /* @kind color */
  --sh-gradient-nebula: linear-gradient(120deg, #00B9EA 0%, #1781CF 30%, #86298E 68%, #D30DC9 100%); /* @kind color */
  --sh-gradient-arc: linear-gradient(90deg, #00B9EA 0%, #FEEA02 55%, #D30DC9 100%); /* @kind color */

  /* ---- Semantic: surfaces ---- */
  --surface-page: var(--sh-navy);
  --surface-deep: var(--sh-midnight);
  --surface-raised: #1B2159;         /* navy lifted one step for cards on navy */
  --surface-card: #1B2159;
  --surface-card-alt: var(--sh-slate);
  --surface-inverse: var(--sh-white);
  --surface-brand: var(--sh-royal);
  --surface-signal: var(--sh-gold);
  --surface-cosmos: var(--sh-gradient-cosmos); /* @kind color */
  --surface-veil: rgba(6, 24, 52, 0.72);      /* protection scrim over imagery */
  --surface-glass: rgba(255, 255, 255, 0.07);
  --surface-glass-strong: rgba(255, 255, 255, 0.13);
  --surface-backdrop: var(--sh-navy-deep);   /* behind full-bleed section imagery */
  --surface-floor: var(--sh-black-space);    /* darkest section floor */

  /* ---- Semantic: text ---- */
  --text-body: var(--sh-white);
  --text-heading: var(--sh-white);
  /* NOTE: the ramp below has five steps because the templates were already
     using 85% and 75% as intermediate body tones in 158 places. They are named
     here at their existing values rather than snapped to --text-body /
     --text-muted, which would have silently restyled every page. NEEDS DESIGN
     SIGN-OFF: five steps is two more than the guide describes — reconcile to
     three and the two tokens below go away. */
  --text-body-soft: rgba(255, 255, 255, 0.85);
  --text-secondary: rgba(255, 255, 255, 0.75);
  --text-muted: rgba(255, 255, 255, 0.68);
  --text-faint: rgba(255, 255, 255, 0.48);  /* 48%, not 44%: 44% measured 4.03:1 on --surface-card and failed WCAG AA */
  --text-critical: #E053D9;                 /* magenta lightened 29% toward white for TEXT only — raw #D30DC9 is 3.32:1 on card and fails AA */
  --text-signal: var(--sh-gold);
  --text-highlight: var(--sh-yellow);
  --text-link: var(--sh-cyan);
  --text-link-hover: var(--sh-yellow);
  --text-on-signal: var(--sh-navy);
  --text-on-light: var(--sh-navy);
  --text-on-light-muted: #4A5378;

  /* ---- Semantic: borders ---- */
  --border-signal: var(--sh-gold);
  --border-hairline: rgba(255, 255, 255, 0.16);
  --border-hairline-strong: rgba(255, 255, 255, 0.3);
  --border-ink: var(--sh-midnight);
  --border-cool: var(--sh-cyan);

  /* ---- Semantic: interactive ---- */
  --action-primary: var(--sh-gold);
  --action-primary-hover: var(--sh-yellow);
  --action-primary-press: #E0A200;
  --action-primary-text: var(--sh-navy);
  --action-secondary: var(--sh-cyan);
  --action-secondary-hover: #2ACDF5;
  --action-secondary-press: var(--sh-sky);
  --action-secondary-text: var(--sh-midnight);
  --action-ghost-border: rgba(255, 255, 255, 0.34);
  --action-ghost-hover-bg: rgba(255, 255, 255, 0.1);
  --action-danger: var(--sh-magenta);
  --focus-ring: var(--sh-cyan);
  --disabled-bg: rgba(255, 255, 255, 0.12);
  --disabled-text: rgba(255, 255, 255, 0.36);

  /* ---- Semantic: status (heating / cooling duality) ---- */
  --status-heating: var(--sh-orange);
  --status-cooling: var(--sh-cyan);
  --status-success: #3FCF8E;
  --status-warning: var(--sh-gold);
  --status-critical: var(--sh-magenta);
}

/* ---- tokens/typography.css ---- */
/* Space Heroes — Typography
   Verbatim from "Design System — Typography" (Figma export, see source-refs/).
   American Captain -> headlines, CTAs, prices. ALL CAPS. 24-300px+
   Sonny Gothic     -> body, service descriptions, contact, disclaimers. Sentence case. 16-78px
   Spacelord Two    -> personal names, signature accents. Title Case. 40-54px
   Google Fonts stand-ins are in use; see tokens/fonts.css. */
:root {
  /* families */
  --font-display: "American Captain", "Anton", "Arial Narrow", sans-serif;
  --font-body: "Sonny Gothic", "Figtree", system-ui, sans-serif;
  --font-script: "Spacelord Two", "Racing Sans One", cursive;
  --font-mono: "Roboto Mono", ui-monospace, monospace;

  /* display scale — American Captain, always uppercase */
  --text-display-hero: clamp(3.5rem, 7.4vw, 8.75rem); /* 56 -> 140 */
  --text-display-1: clamp(2.75rem, 5vw, 5rem);        /* 44 -> 80 */
  --text-display-2: clamp(2.25rem, 3.6vw, 3.5rem);    /* 36 -> 56 */
  --text-display-3: clamp(1.75rem, 2.4vw, 2.5rem);    /* 28 -> 40 */
  --text-display-4: 1.5rem;                            /* 24 — floor per spec */

  /* body scale — Sonny Gothic */
  --text-body-xl: 1.375rem;   /* 22 — hero subhead */
  --text-body-lg: 1.1875rem;  /* 19 — lead paragraph */
  --text-body-md: 1.0625rem;  /* 17 — default */
  --text-body-sm: 0.9375rem;  /* 15 — meta, captions */
  --text-body-xs: 0.8125rem;  /* 13 — legal, disclaimers */

  /* eyebrow / label — American Captain, tracked out */
  --text-eyebrow: 0.8125rem;
  --text-label: 0.75rem;

  /* script accent — Spacelord Two */
  --text-script-lg: 3.375rem; /* 54 */
  --text-script-md: 2.5rem;   /* 40 */

  /* weights */
  --weight-display: 400;   /* the display face has one weight */
  --weight-body: 400;
  --weight-body-medium: 500;
  --weight-body-bold: 700;
  --weight-body-black: 800;

  /* line heights */
  /* Raised from 0.9 / 0.84. American Captain and its Anton stand-in have caps
     that fill almost the whole em box, so a ratio under ~0.9 sets the line box
     shorter than the letters are tall and consecutive lines close up. It looked
     deliberate on a one-line desktop headline and cramped everywhere else — the
     home hero wraps to five lines on a phone and three at 107px on a desktop,
     and both read as broken. 0.92 keeps the display set tight without the
     collision. */
  --leading-display: 0.92;
  --leading-display-tight: 0.88;
  --leading-heading: 1.08;
  --leading-body: 1.58;
  --leading-body-tight: 1.4;

  /* tracking */
  --tracking-display: 0.005em;
  --tracking-eyebrow: 0.22em;
  --tracking-label: 0.14em;
  --tracking-body: 0em;
}

/* ---- tokens/spacing.css ---- */
/* Space Heroes — Spacing & layout.
   4px base unit; section rhythm is generous (marketing site, not an app). */
:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;

  /* section rhythm */
  --section-pad-y: clamp(64px, 8vw, 128px); /* @kind spacing */
  --section-pad-y-tight: clamp(48px, 5vw, 80px); /* @kind spacing */
  --gutter: clamp(20px, 4vw, 56px); /* @kind spacing */

  /* containers */
  --container-max: 1240px;
  --container-narrow: 820px;
  --container-wide: 1520px;

  /* fixed chrome */
  --nav-height: 76px;
  --nav-height-compact: 60px;
  --utility-bar-height: 38px;

  /* control sizing — 44px minimum touch target */
  --control-h-sm: 44px;   /* was 40px, which broke the 44px minimum this comment promises */
  --control-h-md: 48px;
  --control-h-lg: 58px;
  --control-px-sm: 18px;
  --control-px-md: 26px;
  --control-px-lg: 34px;
}

/* ---- tokens/effects.css ---- */
/* Space Heroes — Radii, borders, shadows, textures.
   The brand is sticker/comic art: hard ink outlines, chunky radii, offset
   drop shadows rather than soft blurs. Glow is reserved for gold on navy. */
:root {
  /* radii — chunky, sticker-like */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 40px;
  --radius-pill: 999px;

  /* borders — the gold hairline and the comic ink line */
  --border-width-hair: 1px;
  --border-width-signal: 2px;
  --border-width-ink: 3px;
  --border-width-ink-thick: 5px;
  --border-signal-rule: var(--border-width-signal) solid var(--border-signal); /* @kind other */
  --border-ink-rule: var(--border-width-ink) solid var(--border-ink); /* @kind other */

  /* shadows — hard offset first, ambient second */
  --shadow-sticker: 4px 5px 0 var(--sh-midnight);
  --shadow-sticker-lg: 7px 8px 0 var(--sh-midnight);
  --shadow-card: 0 12px 32px rgba(6, 24, 52, 0.5);
  --shadow-card-lifted: 0 20px 48px rgba(6, 24, 52, 0.62);
  --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.14);

  /* glow — gold and cyan only, never purple */
  --glow-signal: 0 0 0 3px rgba(250, 185, 10, 0.26);
  --glow-signal-strong: 0 0 28px rgba(254, 234, 2, 0.5);
  --glow-cool: 0 0 24px rgba(0, 185, 234, 0.45);
  --focus-ring-shadow: 0 0 0 3px rgba(0, 185, 234, 0.9);

  /* sticker outline — white keyline then ink, as on the mascot art */
  --outline-sticker: 0 0 0 5px var(--sh-white), 0 0 0 8px var(--sh-midnight); /* @kind shadow */

  /* protection scrims for text over imagery */
  --scrim-bottom: linear-gradient(to top, rgba(6, 24, 52, 0.94) 0%, rgba(6, 24, 52, 0.7) 40%, rgba(6, 24, 52, 0) 100%); /* @kind color */
  --scrim-full: linear-gradient(180deg, rgba(6, 24, 52, 0.55), rgba(6, 24, 52, 0.85)); /* @kind color */

  /* textures */
  /* --texture-stars removed: the repeating star tile was taken off the site.
     The asset itself is still at /assets/bg-stars.svg — to bring the texture
     back, restore this token and the __tex layers in HeroCard, ServiceTile,
     SiteFooter and StarField. The scattered star points in the page heroes are
     a separate, generated effect and are unaffected. */
  --blur-glass: blur(14px); /* @kind other */
  --blur-glass-heavy: blur(26px); /* @kind other */
}

/* ---- tokens/motion.css ---- */
/* Space Heroes — Motion.
   Everything launches: quick out, slight overshoot on arrival. Nothing
   fades politely. Hovers are instant-feeling (140ms), entrances are
   staged (520ms + stagger), the mascot and rocket loop forever. */
:root {
  --dur-instant: 90ms; /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 240ms; /* @kind other */
  --dur-slow: 420ms; /* @kind other */
  --dur-entrance: 520ms; /* @kind other */
  --dur-loop-float: 5.5s; /* @kind other */
  --dur-loop-twinkle: 3.4s; /* @kind other */

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-launch: cubic-bezier(0.16, 1.06, 0.3, 1); /* @kind other */   /* slight overshoot */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */  /* pronounced pop */
  --ease-anticipate: cubic-bezier(0.68, -0.4, 0.27, 1.4); /* @kind other */

  --stagger-step: 70ms; /* @kind other */

  --lift-hover: -3px; /* @kind spacing */
  --press-scale: 0.965; /* @kind other */
  --pop-scale: 1.04; /* @kind other */
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms; /* @kind other */ --dur-base: 1ms; /* @kind other */ --dur-slow: 1ms; /* @kind other */ --dur-entrance: 1ms; /* @kind other */
    --lift-hover: 0px; --press-scale: 1; /* @kind other */ --pop-scale: 1; /* @kind other */
  }
}

/* ---- tokens/base.css ---- */
/* Space Heroes — base element defaults. Kept deliberately thin:
   components carry their own styling; this only makes a bare page on-brand. */
*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--text-heading);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: var(--text-display-1) }
h2 { font-size: var(--text-display-2) }
h3 { font-size: var(--text-display-3) }
h4 { font-size: var(--text-display-4) }
p { margin: 0 0 var(--space-4) }
/* Buttons are excluded from the link colours. A button rendered as an <a> was
   otherwise picking up `a:hover { color: --text-link-hover }` — bright yellow —
   because the variants set a background on hover but never re-assert a colour.
   On the filled button that painted yellow text onto a yellow fill and the
   label disappeared. The variants also set their own hover colour now, but this
   is the rule that stops it happening again to a variant added later. */
a:not(.sh-btn) { color: var(--text-link); text-decoration-color: rgba(0,185,234,.45); text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease-out) }
a:not(.sh-btn):hover { color: var(--text-link-hover); text-decoration-color: currentColor }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: none; box-shadow: var(--focus-ring-shadow); border-radius: var(--radius-xs);
}
strong, b { font-weight: var(--weight-body-bold) }
::selection { background: var(--sh-gold); color: var(--sh-navy) }
/* max-width keeps images inside their container; object-fit keeps them in
   proportion while doing it. Without the second half, any image given a fixed
   height distorts as soon as the container is narrower than its proportional
   width — the width gets clamped, the height does not, and the picture is
   squeezed. That was crushing the service-tile artwork by 34% on a tablet.
   Anything that should crop instead of fit sets object-fit: cover on its own
   class, which outranks this element selector. */
img { max-width: 100%; object-fit: contain }
hr { border: 0; border-top: 1px solid var(--border-hairline); margin: var(--space-8) 0 }
code, kbd { font-family: var(--font-mono); font-size: 0.92em }

/* Tap targets. The guide requires 44px minimum for anything tappable on mobile;
   chrome links were measuring 21-40px. They sit in rows and columns with their
   own spacing, so they get a real min-height rather than an overlapping
   pseudo-element hit area, which would make neighbouring links unclickable. */
@media (pointer: coarse), (max-width: 1080px) {
  header a, header button, footer a, footer button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* Links inline in a sentence keep their natural box: WCAG 2.5.8 exempts them,
     and padding them out would overlap the line above and below. */
  header p a, footer p a, main p a, section p a { min-height: 0; display: inline }
}

/* Utility: the eyebrow label used above nearly every section heading */
.sh-eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-signal);
}

@keyframes sh-float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-14px) } }
@keyframes sh-twinkle { 0%,100% { opacity: .25 } 50% { opacity: 1 } }
@keyframes sh-drift { 0% { background-position: 0 0 } 100% { background-position: 760px 760px } }

/* ---- components/core/Badge.jsx, from _ds_bundle.js ---- */
.sh-badge{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);text-transform:uppercase;letter-spacing:var(--tracking-label);border-radius:var(--radius-pill);white-space:nowrap;line-height:1}
.sh-badge--sm{font-size:var(--text-label);padding:6px 11px}
.sh-badge--md{font-size:var(--text-eyebrow);padding:8px 14px}
.sh-badge--signal{background:var(--sh-gold);color:var(--sh-navy)}
.sh-badge--yellow{background:var(--sh-yellow);color:var(--sh-navy)}
.sh-badge--cool{background:var(--sh-cyan);color:var(--sh-midnight)}
.sh-badge--magenta{background:var(--sh-magenta);color:var(--sh-white)}
.sh-badge--heating{background:var(--status-heating);color:var(--sh-midnight)}
.sh-badge--outline{background:transparent;color:var(--text-signal);box-shadow:inset 0 0 0 var(--border-width-signal) var(--border-signal)}
.sh-badge--glass{background:var(--surface-glass);color:var(--text-body);box-shadow:inset 0 0 0 1px var(--border-hairline)}
.sh-badge__dot{width:7px;height:7px;border-radius:50%;background:currentColor;animation:sh-badge-pulse 1.8s var(--ease-in-out) infinite}
@keyframes sh-badge-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

/* ---- components/core/Button.jsx, from _ds_bundle.js ---- */
.sh-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-display);font-weight:var(--weight-display);text-transform:uppercase;letter-spacing:.03em;border:0;border-radius:var(--radius-pill);cursor:pointer;text-decoration:none;position:relative;white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:transform var(--dur-fast) var(--ease-launch),background-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.sh-btn:focus-visible{outline:none;box-shadow:var(--focus-ring-shadow)}
.sh-btn--lg{height:var(--control-h-lg);padding:0 var(--control-px-lg);font-size:1.375rem}
.sh-btn--md{height:var(--control-h-md);padding:0 var(--control-px-md);font-size:1.125rem}
.sh-btn--sm{height:var(--control-h-sm);padding:0 var(--control-px-sm);font-size:.9375rem}
.sh-btn--block{width:100%}
.sh-btn__ico{display:inline-flex;align-items:center;transition:transform var(--dur-base) var(--ease-bounce)}
.sh-btn:hover .sh-btn__ico--right{transform:translateX(4px)}
.sh-btn:hover .sh-btn__ico--left{transform:translateX(-2px) rotate(-8deg)}

.sh-btn--primary{background:var(--action-primary);color:var(--action-primary-text);box-shadow:var(--shadow-sticker)}
.sh-btn--primary:hover{background:var(--action-primary-hover);color:var(--action-primary-text);transform:translateY(var(--lift-hover));box-shadow:var(--shadow-sticker-lg),var(--glow-signal-strong)}
.sh-btn--primary:active{background:var(--action-primary-press);color:var(--action-primary-text);transform:translateY(0) scale(var(--press-scale));box-shadow:2px 3px 0 var(--sh-midnight)}

.sh-btn--secondary{background:var(--action-secondary);color:var(--action-secondary-text);box-shadow:var(--shadow-sticker)}
.sh-btn--secondary:hover{background:var(--action-secondary-hover);color:var(--action-secondary-text);transform:translateY(var(--lift-hover));box-shadow:var(--shadow-sticker-lg),var(--glow-cool)}
.sh-btn--secondary:active{background:var(--action-secondary-press);transform:translateY(0) scale(var(--press-scale));box-shadow:2px 3px 0 var(--sh-midnight)}

/* --outline is retired: the site has exactly two buttons, filled and contour. Kept as an alias of --ghost so any surviving markup cannot reintroduce a third style. */
.sh-btn--outline{background:transparent;color:var(--text-body);box-shadow:inset 0 0 0 1px var(--action-ghost-border)}
.sh-btn--outline:hover{background:var(--action-ghost-hover-bg);color:var(--text-highlight);box-shadow:inset 0 0 0 1px var(--border-hairline-strong)}
.sh-btn--outline:active{transform:scale(var(--press-scale))}

.sh-btn--ghost{background:transparent;color:var(--text-body);box-shadow:inset 0 0 0 1px var(--action-ghost-border)}
.sh-btn--ghost:hover{background:var(--action-ghost-hover-bg);color:var(--text-highlight);box-shadow:inset 0 0 0 1px var(--border-hairline-strong)}
.sh-btn--ghost:active{transform:scale(var(--press-scale))}

.sh-btn--onLight{background:var(--sh-navy);color:var(--sh-white);box-shadow:var(--shadow-sticker)}
.sh-btn--onLight:hover{background:var(--sh-royal);transform:translateY(var(--lift-hover));box-shadow:var(--shadow-sticker-lg)}
.sh-btn--onLight:active{transform:translateY(0) scale(var(--press-scale));box-shadow:2px 3px 0 var(--sh-midnight)}

.sh-btn[aria-disabled="true"],.sh-btn:disabled{background:var(--disabled-bg);color:var(--disabled-text);box-shadow:none;cursor:not-allowed;transform:none;pointer-events:none}
.sh-btn--loading{color:transparent!important}
.sh-btn--loading::after{content:"";position:absolute;width:1.1em;height:1.1em;border-radius:50%;border:2.5px solid currentColor;border-top-color:transparent;color:var(--action-primary-text);animation:sh-btn-spin .7s linear infinite}
.sh-btn--secondary.sh-btn--loading::after{color:var(--action-secondary-text)}
.sh-btn--outline.sh-btn--loading::after,.sh-btn--ghost.sh-btn--loading::after{color:var(--text-signal)}
@keyframes sh-btn-spin{to{transform:rotate(360deg)}}