/* ══════════════════════════════════════════════════════════════════════════
   MORRB — WEBSITE VERSION 02
   Layout system: 77rem container, 2.5rem gutter, 3.25rem fixed header,
   section rhythm 5 / 6 / 7.5 / 10rem, 0.75rem card radius, 50rem pill radius.
   Breakpoints 991 / 767 / 479px.

   Palette is greyscale + warm beige + cool silver; there is no accent colour.
   The one exception is MORRB teal #057463 (from the onboarding palette), used
   only for the focus ring and inline links. The darkest surface is the
   onboarding page ground #0d211c.

   Typeface: DM Sans, self-hosted, weights 300–500 in use.
   ══════════════════════════════════════════════════════════════════════════ */

@import url("../assets/fonts/dmsans.css");

/* DM Sans ships as a variable face; dmsans.css declares 400–900 only.
   Weight 300 (.text-weight-light) is registered here from the same files. */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../assets/fonts/dmsans/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K4.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: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../assets/fonts/dmsans/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu6-K6h9Q.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Tokens ───────────────────────────────────────────────────────────── */
:root {
  --brand--black:            #1a1c21;
  --brand--grey:             #2f2f2f;
  --brand--grey-light:       #505655;
  --brand--brown-light:      #d8d5cb;
  --brand--brown-dark:       #4d473c;
  --brand--silver:           #66716f;
  --brand--silver-light:     #c6d0cf;
  --brand--silver-lightest:  #dde3e2;
  --brand--smoke:            #f4f4f5;
  --brand--teal:             #0d211c;

  --neutral--white:          #fff;

  /* Accent — focus ring and inline links only */
  --morrb--teal:             #046a5a; /* morrb-a11y: was #057463 */

  --background-color--background-primary:    var(--brand--smoke);

  --text-color--text-primary:    var(--brand--black);
  --text-color--text-alternate:  var(--neutral--white);
  --link-color--link-alternate:  var(--neutral--white);

  --border-color--border-primary:   color-mix(in srgb, var(--text-color--text-primary) 10%, transparent);
  --transparent: #0000;

  /* Surfaces raised off the page ground — chrome only (nav tint, modal, form
     fields). Bento/feature cards keep their own fixed swatch on purpose and
     are exempt: see `.bento_card` below. */
  --surface-raised: var(--neutral--white);

  /* Primary button — inverts in dark mode so it still reads against the dark
     ground instead of a near-black button nearly disappearing into it. */
  --button-primary-bg:    var(--brand--black);
  --button-primary-text:  var(--neutral--white);
  --button-primary-hover: var(--brand--grey);

  /* Device marquee is flattened to solid ink; dark mode flips it to solid
     light so the band stays visible on the dark ground. */
  --logo-filter: brightness(0);
  /* MORRB wordmark ships as a single currentColor SVG rendered via <img>, so
     the embedding page's `color` can't reach it — dark mode inverts it instead. */
  --logo-mark-filter: none;

  /* MORRB wordmark — the header mark carries more weight than the footer one */
  --logo-nav-w:              9.18rem;
  --logo-footer-w:           7.65rem;
}

/* ── Dark mode ────────────────────────────────────────────────────────────
   Off by default, follows the OS (prefers-color-scheme); the toggle in the
   nav sets [data-theme] explicitly and wins either way. The dark ground is
   --brand--black — already the palette's ink colour, a neutral anthracite,
   not the onboarding product's teal-black (that reads as dark green, ruled
   out on purpose). Overlay tints (button/nav/border tokens) are colour-mixed
   from --text-color--text-primary elsewhere in this file, so they re-derive
   automatically once that flips — only the tokens that don't derive from it
   are redeclared here.
   ────────────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background-color--background-primary: var(--brand--black);
    --text-color--text-primary:  var(--brand--smoke);
    --surface-raised:    color-mix(in srgb, var(--neutral--white) 6%, var(--brand--black));
    --button-primary-bg:    var(--brand--smoke);
    --button-primary-text:  var(--brand--black);
    --button-primary-hover: var(--brand--silver-light);
    --logo-filter:      brightness(0) invert(1);
    --logo-mark-filter: invert(1);
  }
}
:root[data-theme="dark"] {
  --background-color--background-primary: var(--brand--black);
  --text-color--text-primary:  var(--brand--smoke);
  --surface-raised:    color-mix(in srgb, var(--neutral--white) 6%, var(--brand--black));
  --button-primary-bg:    var(--brand--smoke);
  --button-primary-text:  var(--brand--black);
  --button-primary-hover: var(--brand--silver-light);
  --logo-filter:      brightness(0) invert(1);
  --logo-mark-filter: invert(1);
}

/* ── Reset ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--background-color--background-primary);
  color: var(--text-color--text-primary);
  letter-spacing: -.01em;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video { max-width: 100%; display: block; }
figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }

.skip-link {
  position: absolute; left: .5rem; top: -4rem; z-index: 1000;
  background-color: var(--brand--black); color: var(--neutral--white);
  padding: .625rem 1.125rem; border-radius: 50rem; font-size: .875rem;
  text-decoration: none; transition: top .2s;
}
.skip-link:focus { top: .5rem; }

/* ── Type scale ───────────────────────────────────────────────────────── */
h1 { letter-spacing: -.04em; margin: 0; font-size: 3.25rem;  font-weight: 500; line-height: 1.1; }
h2 { letter-spacing: -.04em; margin: 0; font-size: 2.75rem;  font-weight: 500; line-height: 1.1; }
h3 { letter-spacing: -.02em; margin: 0; font-size: 2rem;     font-weight: 400; line-height: 1.1; }
h4 { margin: 0; font-size: 1.625rem; font-weight: 400; line-height: 1.1; }
h5 { margin: 0; font-size: 1.25rem;  font-weight: 400; line-height: 1.5; }
p  { margin: 0; }

.heading-style-h3 { letter-spacing: -.02em; font-size: 2rem;    font-weight: 400; line-height: 1.1; }

.text-size-tiny   { font-size: .75rem; }
.text-size-small  { font-size: .875rem; line-height: 1.4; }
.text-size-medium { font-size: 1.125rem; }

.text-weight-light  { font-weight: 300; }
.text-weight-normal { font-weight: 400; }
.text-weight-medium { font-weight: 500; }

.text-style-muted       { opacity: .70; } /* morrb-a11y */
.text-style-muted-light { opacity: .75; }
.text-color-white       { color: var(--text-color--text-alternate); }
.text-align-center      { text-align: center; }
.leading-none           { line-height: 1; }

/* ── Layout system ────────────────────────────────────────────────────── */
.page-wrapper  { overflow: clip; }
.main-wrapper  { padding-top: 3.25rem; }
/* the header is fixed, so an anchored section must clear it */
section[id] { scroll-margin-top: 5rem; }

.padding-global   { padding-left: 2.5rem; padding-right: 2.5rem; }
.container-large  { width: 100%; max-width: 77rem;   margin-left: auto; margin-right: auto; }
.container-small  { width: 100%; max-width: 61.5rem; margin-left: auto; margin-right: auto; }

.padding-section-large         { padding-top: 7.5rem; padding-bottom: 7.5rem; }
.padding-section-xlarge        { padding-top: 10rem;  padding-bottom: 10rem; }
.padding-section-bottom-large  { padding-bottom: 7.5rem; }
.padding-section-xlarge-bottom { padding-bottom: 10rem; }
.padding-section-custom-header { padding-top: 5rem; padding-bottom: 3rem; }

.margin-bottom  { margin-top: 0; margin-left: 0; margin-right: 0; }
.margin-xsmall  { margin-bottom: .5rem; }
.margin-custom4 { margin-bottom: .75rem; }
.margin-medium  { margin-bottom: 2rem; }
.margin-xlarge  { margin-bottom: 4rem; }

.max-width-small  { width: 100%; max-width: 20.75rem; }
.max-width-medium { width: 100%; max-width: 32rem; }
.max-w-26         { max-width: 26rem; }
.align-center     { margin-left: auto; margin-right: auto; }

.grid-layout { display: grid; grid-auto-columns: 1fr; grid-column-gap: 1rem; grid-row-gap: 1rem; }

.image-cover { width: 100%; height: 100%; object-fit: cover; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.button {
  gap: .5rem;
  border: 1px solid var(--transparent);
  background-color: var(--button-primary-bg);
  color: var(--button-primary-text);
  text-align: center;
  border-radius: 50rem;
  outline: .125rem solid var(--transparent);
  outline-offset: 0;
  justify-content: center;
  align-items: center;
  padding: .625rem 1.125rem;
  font-family: inherit;
  font-size: .875rem;
  font-weight: 400;
  text-decoration: none;
  transition: all .25s;
  display: inline-flex;
  cursor: pointer;
  white-space: nowrap;
}
.button:hover { background-color: var(--button-primary-hover); outline: .125rem solid color-mix(in srgb, var(--button-primary-hover) 50%, transparent); }
.button.is-large  { padding: 1rem 2rem; }
.button.is-small  { padding: .375rem .75rem; }
.button.is-secondary { border-color: var(--border-color--border-primary); color: var(--text-color--text-primary); background-color: var(--transparent); }
.button.is-secondary:hover { border-color: color-mix(in srgb, var(--text-color--text-primary) 50%, transparent); background-color: var(--transparent); outline-color: var(--transparent); }
.button.is-tertiary { border-color: var(--border-color--border-primary); color: var(--text-color--text-primary); background-color: color-mix(in srgb, var(--text-color--text-primary) 4%, transparent); }
.button.is-tertiary:hover { background-color: color-mix(in srgb, var(--text-color--text-primary) 8%, transparent); border-color: color-mix(in srgb, var(--text-color--text-primary) 50%, transparent); outline-color: var(--transparent); }
.button.is-text { color: var(--text-color--text-primary); background-color: var(--transparent); }
.button.is-text:hover { color: color-mix(in srgb, var(--text-color--text-primary) 55%, transparent); outline-color: var(--transparent); }

.button-group { gap: .75rem; flex-flow: wrap; justify-content: flex-start; align-items: center; display: flex; }
.button-group.is-center { justify-content: center; align-items: center; }

.button-icon_component {
  gap: .75rem; color: #2f2f2fbf; justify-content: flex-start; align-items: center;
  font-size: .875rem; text-decoration: none; transition: color .25s; display: inline-flex;
}
.button-icon_component.is-white { color: #ffffffbf; }
.button-icon_component:hover { color: var(--brand--black); }
.button-icon_component.is-white:hover { color: var(--neutral--white); }
.button-icon_icon-wrapper {
  background-color: #1a1c2114; border-radius: 50rem; flex: none;
  justify-content: center; align-items: center; width: 2rem; height: 2rem;
  transition: transform .25s; display: flex;
}
.button-icon_icon-wrapper.is-white { background-color: #fff3; }
.button-icon_icon { width: 1.25rem; height: 1.25rem; color: var(--brand--black); display: flex; }
.button-icon_icon.is-white { color: var(--text-color--text-alternate); }
a:hover .button-icon_icon-wrapper { transform: translateX(.125rem); }

.icon-1x1-small  { width: 1.25rem; height: 1.25rem; }

/* Sprite icons carry no fill of their own — the symbol is cloned into a
   shadow tree that never sees the sprite file's root attributes. Without
   this they fall back to the SVG default fill (black) and stay dark on a
   dark ground; with it they take the ink of whatever they sit in. */
svg:has(> use) { fill: currentColor; }

/* Focus — the one place the accent appears */
a:focus-visible, button:focus-visible, summary:focus-visible,
label:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--morrb--teal);
  outline-offset: 2px;
  border-radius: .25rem;
}

/* ── Navigation ───────────────────────────────────────────────────────── */
.nav_component-wrapper { z-index: 999; position: fixed; inset: 0 0 auto; }
.nav_component {
  -webkit-backdrop-filter: blur(1rem); backdrop-filter: blur(1rem);
  background-color: color-mix(in srgb, var(--background-color--background-primary) 90%, transparent);
  width: 100%;
}
.nav_container {
  gap: 1.75rem; flex-direction: row; justify-content: flex-start; align-items: center;
  width: 100%; max-width: 77rem; height: 3.25rem; margin: 0 auto; display: flex;
}
.nav_brand { display: flex; align-items: center; color: var(--brand--black); }
.nav_logo  { width: var(--logo-nav-w); display: flex; }
.nav_logo img { width: 100%; height: auto; filter: var(--logo-mark-filter); }

/* ── Theme toggle ─────────────────────────────────────────────────────── */
.theme-toggle_icon.is-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle_icon.is-moon { display: none; }
  :root:not([data-theme="light"]) .theme-toggle_icon.is-sun  { display: block; }
}
:root[data-theme="dark"] .theme-toggle_icon.is-moon { display: none; }
:root[data-theme="dark"] .theme-toggle_icon.is-sun  { display: block; }
.nav_menu  { justify-content: flex-start; align-items: stretch; height: 100%; display: flex; position: relative; }
.nav_menu_link {
  color: var(--text-color--text-primary); justify-content: center; align-items: center;
  padding: 0 .625rem; font-size: .875rem; text-decoration: none; display: flex;
  transition: opacity .25s;
}
.nav_menu_link:hover { opacity: .6; }
.nav_menu_link.is-mobile { display: none; }
.nav_button_wrapper { gap: .5rem; justify-content: flex-start; align-items: center; margin-left: auto; display: flex; }
.nav_menu_toggle { display: none; }
#nav-toggle { position: absolute; opacity: 0; pointer-events: none; }

/* ── Hero banner strip ────────────────────────────────────────────────── */
.hero_banner {
  gap: .5rem; background-color: color-mix(in srgb, var(--text-color--text-primary) 5%, transparent);
  justify-content: center; align-items: center;
  height: 2.5rem; display: flex; text-decoration: none; color: inherit;
  transition: background-color .25s; font-size: .875rem;
}
.hero_banner:hover { background-color: color-mix(in srgb, var(--text-color--text-primary) 7%, transparent); }
.hero_banner_icon { width: 1.125rem; height: 1.125rem; flex: none; opacity: .45; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.home-hero_component { text-align: center; width: 100%; max-width: 40rem; margin-left: auto; margin-right: auto; }

/* ── Full-bleed video block ───────────────────────────────────────────── */
.full-video_component {
  width: 100%; color: var(--neutral--white); border-radius: .75375rem;
  text-decoration: none; display: block; overflow: hidden; position: relative;
  background-color: var(--brand--black);
}
.full-video_wrapper {
  aspect-ratio: 16/9; flex-flow: column; justify-content: center; align-items: center;
  width: 100%; display: flex; position: relative;
}
/* Fills its container's height instead of the fixed 16/9 block, for a video
   that sits inside a fixed-height bento_card rather than its own section. */
.full-video_component.is-fill { flex: 1; min-height: 0; }
.full-video_wrapper.is-fill { aspect-ratio: unset; height: 100%; }
.full-video_background-wrapper { position: absolute; inset: 0; }
.full-video_overlay {
  z-index: 2; opacity: .4; background-image: linear-gradient(#0000 40%, #0000004d);
  transition: opacity .35s; position: absolute; inset: 0;
}
.play-button_component {
  z-index: 3; gap: 1.5rem; -webkit-backdrop-filter: blur(.4rem); backdrop-filter: blur(.4rem);
  background-color: #00000073; border-radius: 50rem; justify-content: flex-start; align-items: center;
  padding: 1rem 1rem 1rem 1.5rem; text-decoration: none; transition: background-color .25s, opacity .25s;
  display: inline-flex; border: 0; color: inherit; cursor: pointer;
}
.play-button_component:hover { background-color: #0006; }
.button-play_content-wrapper { display: flex; flex-flow: column; align-items: flex-start; gap: .125rem; text-align: left; }
.button-play_icon { width: 2.5rem; height: 2.5rem; flex: none; }
.full-video_component.is-playing .play-button_component,
.full-video_component.is-playing .full-video_overlay { opacity: 0; pointer-events: none; }

/* ── Logo marquee ─────────────────────────────────────────────────────── */
.marquee {
  display: grid;
  gap: 1rem;
  width: 100vw;                       /* full-bleed; .page-wrapper clips x-overflow */
  margin-inline: calc(50% - 50vw);
}

.marquee__row {
  overflow: hidden;
  padding-block: .5rem;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.marquee__belt {
  display: flex;
  width: max-content;
  /* --marquee-speed is the real knob (px/s). site.js derives the duration from
     the MEASURED track width, so both rows always run at the SAME speed and
     curating the band cannot change the tempo. The seconds below are only the
     no-JS fallback for the current 5+5 band. */
  --marquee-speed: 23.1;              /* px per second — BOTH rows, identical */
  animation: marquee-left 35.3s linear infinite;
  will-change: transform;
}
.marquee__row--rev .marquee__belt {
  animation-name: marquee-right;
  animation-duration: 40.7s;          /* = same speed as row 1 at its own width */
}

.marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(1.75rem, 6vw, 3.5rem);
  padding-inline: clamp(.875rem, 3vw, 1.75rem);
  flex: none;
}

/* Monochrome: every logo is flattened to the page's text colour and carried at
   the muted step, so the band reads as one grey rhythm and no brand colour
   competes with the page.
   Equal VISUAL size instead of equal height: each <img> carries --logo-scale
   (= (1/sqrt(aspect*ink) / median)^0.7, clamped 0.75-1.3), measured from the
   trimmed alpha bounding box, so thin wordmarks grow and dense emblems shrink. */
.marquee__track img {
  --logo-base: 1.6rem;
  height: calc(var(--logo-base) * var(--logo-scale, 1));
  width: auto;                        /* wordmarks keep their proportions */
  filter: var(--logo-filter);
  opacity: .55;
}

/* The belt holds N identical copies of the track (N >= 3, added by site.js so the
   belt is always wider than the viewport plus one track). One loop shifts by
   exactly one track width (--track-w, measured by site.js) -> no visible end. */
@keyframes marquee-left  { from { transform: translate3d(0, 0, 0); }                              to { transform: translate3d(calc(-1 * var(--track-w, 50%)), 0, 0); } }
@keyframes marquee-right { from { transform: translate3d(calc(-1 * var(--track-w, 50%)), 0, 0); } to { transform: translate3d(0, 0, 0); } }

img[data-logo="fitbit"]       { --logo-scale: 1.133; }
img[data-logo="garmin"]       { --logo-scale: 1.086; }
img[data-logo="google-health"] { --logo-scale: 0.95; }
img[data-logo="myfitnesspal"] { --logo-scale: 1.104; }
img[data-logo="omron"]        { --logo-scale: 0.783; }
img[data-logo="oura"]         { --logo-scale: 1.157; }
img[data-logo="peloton"]      { --logo-scale: 1.206; }
img[data-logo="polar"]        { --logo-scale: 0.75; }
img[data-logo="suunto"]       { --logo-scale: 1.136; }
img[data-logo="withings"]     { --logo-scale: 0.753; }

/* ── Card row ─────────────────────────────────────────────────────────── */
/* The row is moved with a transform, not with overflow scrolling, so a
   vertical wheel over the cards always scrolls the page. */
/* The row is not boxed in at the container edge: the viewport is pulled out to
   both window edges, so the cards visibly continue past the text column. The
   row is padded back in by the same amount, so the first card still lines up
   with the heading. --row-bleed is the gap between the container and the
   window (77rem container, 2.5rem gutter); the section keeps an `overflow-x:
   clip` as a backstop for the scrollbar width that 100vw includes and the
   container does not. `clip`, not `hidden`: it clips without turning the
   section into a scroll container.

   Widening the viewport rather than just letting it overflow matters for the
   slider script too — it sizes its travel from viewport.clientWidth, so a
   viewport that stops at the container would park the last card short of the
   window edge. */
.section_home-platform { --row-bleed: max(2.5rem, (100vw - 77rem) / 2); overflow-x: clip; }
.card-slider_viewport { overflow: hidden; margin-inline: calc(-1 * var(--row-bleed)); }
.card-slider_component {
  display: flex; gap: 2rem; padding-left: var(--row-bleed);
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
  /* pan-y leaves vertical touch gestures to the page and hands the horizontal
     ones to the drag handler in site.js. */
  touch-action: pan-y;
  cursor: grab;
}
.card-slider_component.is-dragging { cursor: grabbing; }
.card-slider_slide { flex: 0 0 24rem; height: 32.75rem; }

.card-slider_arrows { gap: .75rem; justify-content: flex-end; align-items: center; display: flex; margin-top: 2rem; }
/* Both arrows are the same button: the ink and light arrow of .button. */
.slider-arrow {
  background-color: var(--button-primary-bg);
  color: var(--button-primary-text);
  border: 0; border-radius: 50rem; cursor: pointer;
  justify-content: center; align-items: center; width: 2.5rem; height: 2.5rem;
  padding: 0; transition: color .2s, background-color .2s, opacity .2s; display: flex;
}
.slider-arrow:hover { background-color: var(--button-primary-hover); }
.slider-arrow[disabled] { opacity: .3; cursor: default; }
.slider-arrow[disabled]:hover { background-color: var(--button-primary-bg); }

/* ── Feature cards ────────────────────────────────────────────────────── */
.feature-card_component {
  /* One band height for the whole row: the text panel is exactly this tall on
     every card, and the still is capped to the space left below it. */
  --feature-card-band: 11rem;
  border-radius: .75rem; width: 100%; height: 100%; padding: 2.5rem;
  text-decoration: none; color: inherit;
  display: block; position: relative; overflow: hidden;
}
.feature-card_component.is-light { color: var(--link-color--link-alternate); }

.feature-card_image-wrapper {
  z-index: 0; flex-flow: column; justify-content: flex-end; align-items: stretch;
  display: flex; position: absolute; inset: 0;
}
/* One tone for the whole row, the same anthracite the label band carries.
   The stills are width-driven and land at two different heights, so on the
   4:3 cards a strip of card colour stays visible between band and still —
   with a five-tone palette that strip read as a third zone on every second
   card. Matching it to the band turns band, strip and still into one block.
   The .is-* hooks stay on the markup for a future per-card treatment. */
.feature-card_image-wrapper { background-color: var(--brand--grey); }

/* The still fills the card below the band exactly — not its own natural
   height. Width-driven stills landed at two different heights depending on
   their aspect ratio, which made the band above them look taller on some
   cards than on others; a fixed height puts every band edge on the same line
   and crops the still to fit instead. */
.feature-card_media {
  width: 100%;
  height: calc(100% - var(--feature-card-band));
  object-fit: cover;
  object-position: center;
  margin-top: auto;
}
/* Portrait stills (the note tile) would lose their header to the centre crop;
   anchoring them at the top keeps the part that carries the message. */
.feature-card_media.is-crop-top { object-position: top; }

/* The heading sits on a solid band, not a gradient: one fixed height and one
   fixed anthracite on every card, so the label block reads identically across
   the row. Solid, not a tint or a frosted panel — the still now ends exactly
   at the band edge, so anything semi-transparent would only pick up the card
   surface behind it and put a different cast on each card. */
.feature-card_overlay {
  z-index: 1; position: absolute; inset: 0 0 auto; pointer-events: none;
  height: var(--feature-card-band);
  background-color: var(--brand--grey);
}
.feature-card_content { position: relative; z-index: 2; max-width: 16rem; }

/* ── Bento grid ───────────────────────────────────────────────────────── */
.bento_component { gap: 2.5rem; flex-flow: column; display: flex; }
.bento_grid { display: grid; gap: 2.5rem; grid-template-rows: auto; grid-template-columns: 2fr 1fr; height: 32.75rem; }
.bento_grid.is-reverse { grid-template-columns: 1fr 2fr; }
.bento_grid.is-2col    { grid-template-columns: 1fr 1fr; }
.bento_grid.is-3col    { gap: 1.5rem; grid-template-columns: 1fr 1fr 1fr; height: 22.1875rem; }
.bento_grid.is-3col.is-tall { height: 32.75rem; }

.bento_card {
  border-radius: .75rem; flex-flow: column; text-decoration: none;
  /* fixed, not var(--text-color--text-primary): every swatch below is a
     curated light/dark surface of its own, independent of page theme, so the
     default text stays the light-mode ink even when the page goes dark
     (.text-color-white is applied explicitly on the dark swatches). */
  color: var(--brand--black);
  display: flex; position: relative; overflow: hidden; min-width: 0;
}
.bento_card.is-link { transition: transform .25s; }
.bento_card.is-link:hover { transform: scale(1.01); }

.bento_card.is-bg_white         { background-color: var(--neutral--white); }
.bento_card.is-bg_light-smoke   { background-color: #f7f7f8; }
.bento_card.is-bg_light-beige   { background-color: #e8e7e6; }
.bento_card.is-bg_beige         { background-color: var(--brand--brown-light); }
.bento_card.is-bg_brown-light   { background-color: var(--brand--brown-light); }
.bento_card.is-bg_brown-dark    { background-color: var(--brand--brown-dark); }
.bento_card.is-bg_lightest-grey { background-color: #f3f2ef; }
.bento_card.is-bg_silver-light  { background-color: var(--brand--silver-light); }
.bento_card.is-bg_silver-lightest { background-color: var(--brand--silver-lightest); }
.bento_card.is-bg_silver        { background-color: var(--brand--silver); }
.bento_card.is-bg_grey          { background-color: var(--brand--grey); }
.bento_card.is-bg_light-grey    { background-color: var(--brand--grey-light); }
.bento_card.is-bg_teal          { background-color: var(--brand--teal); }
.bento_card.is-bg_black         { background-color: var(--brand--black); }

.bento_card_content-wrapper { z-index: 2; gap: 1.5rem; flex-flow: column; padding: 2.5rem; display: flex; position: relative; }
.bento_card_content-wrapper.padding-bottom-0 { padding-bottom: 0; }
.bento_card_content-wrapper.is-fill { flex: 1; justify-content: space-between; }
/* Full-width bento card: heading block and body text sit side by side, so the
   copy keeps a readable measure instead of running the whole container width.
   Stacks back into a column at the tablet break (see media query below). */
.bento_card_content-wrapper.is-split { flex-flow: row; gap: 2.5rem; justify-content: space-between; }
.bento_card_content-wrapper.is-split > * { flex: 1; min-width: 0; max-width: 32rem; }
.bento_card_heading-wrapper { gap: .5rem; flex-flow: column; display: flex; }

.bento_card_image-wrapper { z-index: 1; flex: 1; position: relative; min-height: 0; }
.bento_card_image-wrapper.is-padding-full       { padding: 2.5rem; }
.bento_card_image-wrapper.is-padding-horizontal { padding-left: 2.5rem; padding-right: 2.5rem; }
.bento_card_image-wrapper.is-padding-left       { padding-left: 2.5rem; }
.bento_card_image-wrapper.is-padding-top        { padding-top: 2.5rem; }

.bento_media { width: 100%; height: 100%; object-fit: cover; border-radius: .5rem; }
.bento_media.is-crop-top    { object-position: top; }
.bento_media.is-crop-left   { object-position: left center; }
.bento_media.is-contain     { object-fit: contain; object-position: bottom; }

/* A bento_grid cell holding two stacked cards instead of one. */
.bento_stack { display: flex; flex-flow: column; gap: 2.5rem; min-width: 0; }
.bento_stack > .bento_card { flex: 1; min-height: 0; }

/* ── Point lists ──────────────────────────────────────────────────────── */
.point-list { display: flex; flex-flow: column; gap: .75rem; }
.point-list_item { display: flex; gap: .625rem; align-items: flex-start; font-size: .875rem; line-height: 1.4; }
.point-list_icon { width: 1rem; height: 1rem; flex: none; margin-top: .175rem; opacity: .45; }
.point-list.is-light .point-list_icon { opacity: .7; }

/* ── Detail card head (icon + label) ──────────────────────────────────── */
.detail_icon { width: 1.5rem; height: 1.5rem; opacity: .45; }
.detail_icon.is-light { opacity: .7; }

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq_list { display: flex; flex-flow: column; }
.faq_item { border-top: 1px solid var(--border-color--border-primary); }
.faq_item:last-child { border-bottom: 1px solid var(--border-color--border-primary); }
.faq_question {
  display: flex; justify-content: space-between; align-items: center; gap: 2rem;
  padding: 1.75rem 0; cursor: pointer; list-style: none; font-size: 1.125rem;
  transition: opacity .25s;
}
.faq_question::-webkit-details-marker { display: none; }
.faq_question:hover { opacity: .6; }
.faq_icon { width: 1.25rem; height: 1.25rem; flex: none; opacity: .45; transition: transform .25s; }
.faq_item[open] .faq_icon { transform: rotate(90deg); }
.faq_answer { padding-bottom: 1.75rem; max-width: 44rem; }
.faq_answer a { color: var(--morrb--teal); text-decoration: none; }
.faq_answer a:hover { text-decoration: underline; }

/* ── Form fields ──────────────────────────────────────────────────────── */
.field { display: grid; gap: .5rem; }
.field > label { font-size: .875rem; font-weight: 500; }

.input, .textarea {
  width: 100%;
  padding: .625rem .875rem;
  border: 1px solid var(--border-color--border-primary);
  border-radius: .5rem;
  background-color: var(--surface-raised);
  color: var(--text-color--text-primary);
  font-family: inherit;
  font-size: 1rem;                    /* 16px — keeps iOS from zooming on focus */
  line-height: 1.4;
  transition: border-color .25s;
}
.input { min-height: 2.75rem; }
.textarea { min-height: 5.5rem; resize: vertical; }
.input:hover, .textarea:hover { border-color: color-mix(in srgb, var(--text-color--text-primary) 25%, transparent); }
.input::placeholder, .textarea::placeholder { color: color-mix(in srgb, var(--text-color--text-primary) 35%, transparent); }

/* ── Demo dialog ──────────────────────────────────────────────────────── */
.modal {
  width: calc(100% - 2.5rem);
  max-width: 32rem;
  max-height: calc(100dvh - 5rem);
  margin: auto;
  padding: 2.5rem;
  border: 0;
  border-radius: .75rem;
  background-color: var(--surface-raised);
  color: var(--text-color--text-primary);
  font-family: inherit;
  overflow: auto;
}
.modal::backdrop {
  background-color: #1a1c2166;
  -webkit-backdrop-filter: blur(.25rem);
          backdrop-filter: blur(.25rem);
}
.modal_head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; margin-bottom: 2rem; }
.modal_close { flex: none; width: 2rem; height: 2rem; padding: 0; }
.modal_form { display: grid; gap: 1rem; }
.modal_form_row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
/* honeypot: off-screen for people, in the DOM for bots */
.modal_hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.modal_status { font-size: .875rem; line-height: 1.4; opacity: .70; /* morrb-a11y */ min-height: 1.2rem; }
.modal_status[data-state="success"], .modal_status[data-state="error"] { opacity: 1; font-weight: 500; }

/* ── Footer ───────────────────────────────────────────────────────────── */
.footer_cta_container { gap: 2rem; text-align: center; flex-flow: column; justify-content: center; align-items: center; max-width: 32rem; margin: 0 auto; display: flex; }
.footer_cta_divider { background-color: var(--border-color--border-primary); width: calc(100% - 5rem); max-width: 77rem; height: 1px; margin: 0 auto; }

.footer_container { gap: 3rem; flex-flow: column; width: 100%; max-width: 77rem; margin: 0 auto; padding-top: 7.5rem; padding-bottom: 2rem; display: flex; }
.footer_layout { gap: 6rem; display: flex; }
.footer_details_col { gap: 2rem; flex-flow: column; justify-content: flex-start; align-items: flex-start; display: flex; }
.footer_brand_logo { width: var(--logo-footer-w); display: flex; color: var(--brand--black); }
.footer_brand_logo img { width: 100%; height: auto; filter: var(--logo-mark-filter); }
.footer_features_wrapper { gap: 1rem; flex-flow: column; justify-content: flex-start; align-items: flex-start; display: flex; }
.footer_features_item { gap: .75rem; justify-content: flex-start; align-items: center; display: flex; }
.footer_features_icon { width: 1.25rem; height: 1.25rem; flex: none; opacity: .45; }
.footer_features_content-wrapper { display: flex; flex-flow: column; gap: .25rem; }
.footer_links_layout { display: grid; gap: 4rem; flex: 1; grid-template-columns: 1fr 1fr 1fr 1fr; }
.footer_links_col { gap: 1rem; flex-flow: column; justify-content: flex-start; align-items: flex-start; display: flex; }
.footer_links_wrapper { gap: .25rem; flex-flow: column; justify-content: flex-start; align-items: flex-start; display: flex; }
.footer_link { font-size: .875rem; font-weight: 500; text-decoration: none; color: inherit; transition: opacity .25s; }
.footer_link:hover { opacity: .55; }
.footer_bottom_wrapper { gap: 2.5rem; justify-content: space-between; align-items: center; display: flex; flex-wrap: wrap; }
.footer_bottom_link_wrapper { gap: 1rem; justify-content: flex-start; align-items: center; display: flex; flex-wrap: wrap; }
.footer_disclaimer { max-width: 46rem; display: flex; flex-flow: column; gap: .5rem; }
.footer_disclaimer a { color: inherit; }
/* the two partner brands read as marks, not as links: full-strength text
   colour, bold, no underline */
.footer_brandmark {
  color: var(--text-color--text-primary);
  font-weight: 700;
  text-decoration: none;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media screen and (max-width: 991px) {
  .padding-section-xlarge        { padding-top: 6rem; padding-bottom: 6rem; }
  .padding-section-large         { padding-top: 6rem; padding-bottom: 6rem; }
  .padding-section-bottom-large  { padding-bottom: 6rem; }
  .padding-section-xlarge-bottom { padding-bottom: 6rem; }

  .nav_container { gap: 0; }
  .nav_menu {
    gap: .75rem; background-color: var(--background-color--background-primary);
    flex-flow: column; height: calc(100dvh - 3.25rem); margin-top: 3.25rem;
    padding: 2.5rem 2.5rem 0; display: flex; position: fixed; inset: 0;
    overflow: auto; transform: translateX(100%); transition: transform .35s ease;
  }
  .nav_menu_link { justify-content: flex-start; align-items: center; padding: .375rem 0; font-size: 1.5rem; }
  .nav_menu_link.is-mobile { display: flex; }
  .nav_button_wrapper .button.is-text { display: none; }
  .nav_menu_toggle { display: inline-flex; order: 3; }
  #nav-toggle:checked ~ .nav_menu { transform: translateX(0); }

  .section_home-platform { --row-bleed: 0rem; }
  .card-slider_viewport { overflow: visible; margin-inline: 0; }
  .card-slider_component {
    flex-flow: column; gap: 2rem; padding-left: 0; transform: none !important;
    touch-action: auto; cursor: auto;
  }
  .card-slider_slide { flex: none; width: 100%; height: auto; }
  .feature-card_component { min-height: 30rem; }
  .card-slider_arrows { display: none; }

  .bento_grid, .bento_grid.is-reverse { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .bento_grid.is-3col, .bento_grid.is-3col.is-tall { grid-template-columns: 1fr 1fr; height: auto; }
  .bento_card_content-wrapper.is-split { flex-flow: column; gap: 1.5rem; }
  .bento_card_content-wrapper.is-split > * { max-width: none; }
  .footer_layout { gap: 4rem; }
  .footer_links_layout { gap: 2.5rem; }
}

@media screen and (max-width: 767px) {
  h1 { font-size: 2.5rem; }
  h2 { font-size: 2rem; }
  h3, .heading-style-h3 { font-size: 1.5rem; }
  h4 { font-size: 1.25rem; }
  h5 { font-size: 1rem; }

  .padding-global { padding-left: 1.25rem; padding-right: 1.25rem; }
  .padding-global.is-0-mobile { padding-left: 0; padding-right: 0; }
  .padding-section-xlarge        { padding-top: 5rem; padding-bottom: 5rem; }
  .padding-section-large         { padding-top: 5rem; padding-bottom: 5rem; }
  .padding-section-bottom-large  { padding-bottom: 5rem; }
  .padding-section-xlarge-bottom { padding-bottom: 5rem; }
  .padding-section-custom-header { padding-bottom: 4rem; }

  .nav_menu { padding-left: 1.25rem; padding-right: 1.25rem; }

  .home-hero_component { text-align: left; margin-left: 0; margin-right: 0; }
  .home-hero_component .align-center { margin-left: 0; margin-right: 0; }
  .button-group.is-center { justify-content: flex-start; }

  .feature-card_component { min-height: 25rem; }

  .bento_grid, .bento_grid.is-reverse, .bento_grid.is-2col,
  .bento_grid.is-3col, .bento_grid.is-3col.is-tall {
    grid-template-columns: 1fr; gap: 2rem; height: auto;
  }
  .bento_card { min-height: 25rem; }
  .bento_card.is-link:hover { transform: none; }

  .marquee__track img { --logo-base: 1.3rem; }

  .footer_layout { gap: 3rem; flex-flow: column; }
  .footer_links_layout { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .footer_container { padding-top: 5rem; }
}

@media screen and (max-width: 479px) {
  .home-hero_component { max-width: 20rem; }
  .modal { padding: 1.75rem; }
  .modal_form_row { grid-template-columns: 1fr; }
  .footer_links_layout { grid-template-columns: 1fr; }
}

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

  .marquee__row { -webkit-mask-image: none; mask-image: none; }
  .marquee__belt { animation: none !important; width: auto; flex-wrap: wrap; justify-content: center; }
  .marquee__belt > [aria-hidden="true"] { display: none; }
  .marquee__track { flex-wrap: wrap; justify-content: center; row-gap: 1rem; }
}

@media (forced-colors: active) {
  .marquee__track img { filter: none; }
}