/* =========================================================
   SKUBIQ — Peak Season Ready
   Premium monochrome landing page.
   Palette: Black #0A0A0A · White #FFFFFF · Red #E10600
   Sharp corners · Monospace uppercase small text · No gradients · No glow
   ========================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

:root {
  --black:   #000000;
  --white:   #FFFFFF;
  --red:     #EB0B1F;
  --red-hover: #C70A1A;
  /* Same colour as --red-hover, named for its actual job: small text that
     needs more contrast than the brand red can give on white (4.57:1).
     Lives here rather than only in css/style.css because the standalone
     pricing page loads landing/style.css but NOT css/style.css, so it could
     not see a --sk-* dark red token. */
  --red-dark: #C70A1A;

  --grey-50:   #F5F5F5;
  --grey-100:  #F5F5F5;
  --grey-200:  #E5E5E5;
  --grey-300:  #B5B5B5;
  --grey-400:  #B5B5B5;
  --grey-500:  #6B6B6B;
  --grey-700:  #1A1A1A;

  /* ---------------------------------------------------------------
     LAYOUT SYSTEM — single shared container used by every section.
     Max-width 1320px (within the 1280–1360 enterprise range).
     Gutter scales from 20px on phones to 56px on wide desktops.
     The headline, paragraph, ticker, and (on non-hero pages) the
     whole section sit inside this container so the logo, nav, hero
     copy and footer all share one left/right edge.

     The numbers themselves live in static/css/layout.css, which the
     dashboard and admin shell also read, so the public site and the app
     can no longer drift apart. The literal fallbacks mean this block
     still resolves on its own if that file ever fails to load.
     --------------------------------------------------------------- */
  --max-w: var(--sk-layout-max-w, 1320px);
  --pad-x: var(--sk-layout-pad-x, clamp(20px, 5vw, 56px));

  /* ---------------------------------------------------------------
     SPACING SCALE — 8px base. Use these tokens instead of arbitrary
     pixel values so every section feels mathematically aligned.
     Aliased from the shared scale in layout.css.
     --------------------------------------------------------------- */
  --space-1:  var(--sk-space-1, 8px);
  --space-2:  var(--sk-space-2, 16px);
  --space-3:  var(--sk-space-3, 24px);
  --space-4:  var(--sk-space-4, 32px);
  --space-5:  var(--sk-space-5, 48px);
  --space-6:  var(--sk-space-6, 64px);
  --space-7:  var(--sk-space-7, 96px);
  --space-8:  var(--sk-space-8, 128px);

  /* ---------------------------------------------------------------
     TYPE SCALE — hierarchy from eyebrow (smallest) to display
     (largest). clamp() lets values shrink on short viewports while
     never blowing up on ultrawide.
     --------------------------------------------------------------- */
  --fs-eyebrow:   12px;
  --fs-nav:       13px;
  --fs-button:    13px;
  --fs-ticker:    11px;
  --fs-body-sm:   14px;
  --fs-body:      17px;
  --fs-body-lg:   18px;
  --fs-h3:        clamp(24px, 2.4vw, 32px);
  --fs-h2:        clamp(32px, 3.6vw, 48px);
  --fs-h1:         clamp(48px, 5.5vw, 76px);

  --font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-heading: 'Oswald', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* Shared content container — the SINGLE source of truth for the
   left/right page edge. Every section, header, footer and the hero
   copy sit inside this so the logo, nav, hero text, CTAs and ticker
   all align to the same x position at every viewport. The rule itself
   now lives in static/css/layout.css (loaded after Bootstrap, so it
   overrides Bootstrap's .container) and consumes the --sk-layout-*
   tokens declared above. Kept here as a reference only — do not
   redefine it in this file or the two will drift again. */

/* =========================================================
   SECTION COLOUR STATES — three reusable classes.
   Apply ONE of these to every <section> wrapper. They define
   the background, text colour, eyebrow colour, and the heading
   + body type colour for that surface. All other section rules
   inherit from these and stay scoped to their own selectors.

   No gradients, no shadows. Sharp corners. 4.5:1 contrast for
   body text, 3:1 for large text (headings 18px+ bold or 24px+).

   Section rhythm:
     #000 hero → #000 story → #fff customers → #000 platform
     → #fff industries → #000 pricing → #EB0B1F cta → #000 footer
   No two neighbours share a colour, except hero+story (both #000).
   ========================================================= */
/* Smooth scroll for in-page anchors (topbar menu, footer links).
   Always on: the story carousel is no longer pinned or scroll-scrubbed,
   so nothing fights the browser's smooth-scroll any more. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  /* Perspective is set per-card (via .platform-card / .plan) instead of
     globally on <body>. A global 3D context was forcing every section
     and every video element into a 3D rendering tree at page load —
     noticeable jank on the carousel. */
}

.section--black {
  /* Layered "transparent black" depth — a faint red glow top-right and
     bottom-left, plus a top-to-bottom gradient so the surface is never
     a flat slab. Gives the post-carousel section that "transparent,
     modern 3D" feel. */
  background:
    radial-gradient(900px 600px at 92% -8%,  rgba(235, 11, 31, 0.12) 0%, rgba(0,0,0,0) 60%),
    radial-gradient(700px 500px at 4% 108%,  rgba(235, 11, 31, 0.07) 0%, rgba(0,0,0,0) 55%),
    linear-gradient(180deg, #0a0a0a 0%, #000000 100%);
  color: #FFFFFF;
  position: relative;
}
/* Full-viewport video surfaces (hero + story) get a plain flat black so
   the layered gradients + scanline don't burn GPU time painting behind a
   video that's covering them anyway. */
.section--black.hero,
.section--black.story {
  background: #000000;
}
.section--black.story { isolation: isolate; }
/* Scanline overlay removed — the per-frame paint cost on a full-viewport
   dark section was visible at load. The radial-gradient depth still
   gives the section the layered look without the extra compositing. */
.section--black > * { position: relative; z-index: 1; }

.section--white {
  background:
    radial-gradient(800px 500px at 100% 0%, rgba(235, 11, 31, 0.04) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  color: #000000;
}
.section--red {
  background: #EB0B1F;
  color: #FFFFFF;
}

/* ---- Headings, body, eyebrow colour per surface ---- */
.section--black .section-title { color: #FFFFFF; }
.section--black .section-sub   { color: #B5B5B5; }
.section--black .eyebrow-mono {
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.section--black .eyebrow-mono::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--red);
}

.section--white .section-title { color: #000000; }
.section--white .section-sub   { color: #4a4a4a; }
.section--white .eyebrow-mono { color: var(--red); }

.section--red .section-title { color: #FFFFFF; }
.section--red .section-sub   { color: #FFFFFF; opacity: .9; }
.section--red .eyebrow-mono { color: #FFFFFF; }

/* Section-level borders that follow the colour rhythm.
   3px red line on white sections that follow a black section,
   1px translucent white line between two black areas. */
.section--white.section--after-black { border-top: 3px solid var(--red); }
.section--black + .section--black { border-top: 1px solid rgba(255,255,255,.12); }
.section--white + .section--white { border-top: 1px solid #E5E5E5; }

/* =========================================================
   SHARED MONOSPACE BUTTONS — sharp corners, 1px borders
   ========================================================= */
.btn-mono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
  padding: 14px 18px;
  border-radius: 0;
  border: 1px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn-mono.btn-lg { padding: 18px 24px; font-size: 13px; letter-spacing: .15em; }

.btn-mono.btn-solid {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}
.btn-mono.btn-solid:hover { background: var(--red); color: var(--white); border-color: var(--red); }

.btn-mono.btn-outline {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,.55);
}
.btn-mono.btn-outline:hover { background: var(--red); color: var(--white); border-color: var(--red); }

.btn-mono.btn-outline-dark {
  background: transparent;
  color: var(--black);
  border-color: var(--grey-300);
}
.btn-mono.btn-outline-dark:hover { background: var(--red); color: var(--white); border-color: var(--red); }

.btn-mono.btn-red {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
}
.btn-mono.btn-red:hover { background: var(--black); border-color: var(--black); }

/* Eyebrow (small monospace label) */
.eyebrow-mono {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--grey-500);
  margin-bottom: 18px;
}
.eyebrow-red { color: var(--red); }

/* =========================================================
   TOP BAR — transparent over video, minimal
   ========================================================= */
/* .topbar {
  width: 100%;
  position: fixed;
  inset: 0 0 auto 0;

  z-index: 1030;
  display: flex;
  align-items: center;
  justify-content: space-evenly;

  height: 80px;
  box-sizing: border-box;
  padding: 0;
  background: transparent;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
  border-bottom: 1px solid transparent;
}

.topbar-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: var(--space-2);
  height: 100%;
} */
/* =========================================================
   SKUBIQ TOPBAR
   Logo = Left
   Navigation = True Center
   Actions = Right
   ========================================================= */

.topbar {
  width: 100%;
  position: fixed;
  inset: 0 0 auto 0;

  z-index: 1030;
  height: 80px;
  box-sizing: border-box;

  /* No side padding here: the logo, nav and actions live in .topbar-row,
     which uses the shared .sk-container width so they line up with the page. */
  padding: 0;

  background: transparent;
  border-bottom: 1px solid transparent;

  transition:
    background .2s ease,
    border-color .2s ease,
    color .2s ease;
}


/* =========================================================
   MAIN HEADER ROW
   ========================================================= */

.topbar-row {
  position: relative;

  width: var(--sk-container-width);
  max-width: none;

  height: 100%;
  margin: 0 auto;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;

  box-sizing: border-box;
}


/* =========================================================
   LOGO — LEFT
   ========================================================= */

.topbar-row .logo-link {
  position: relative;
  display: block;
  width: 180px;
  height: 50px;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  z-index: 2;
}

.topbar-row .logo-img {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  width: 180px;
  height: auto;
  max-width: none;
  object-fit: contain;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.topbar-row .logo-on-dark {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s, 0s;
}

.topbar.topbar--light .topbar-row .logo-on-dark {
  opacity: 0;
  visibility: hidden;
  transition-delay: 0s, 0.25s;
}

.topbar.topbar--light .topbar-row .logo-on-light {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s, 0s;
}


/* =========================================================
   NAVIGATION — TRUE CENTER
   ========================================================= */

.topbar-nav {
  position: absolute;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 34px;

  margin: 0;
  padding: 0;

  white-space: nowrap;

  z-index: 1;
}


/* Individual navigation items */

.topbar-nav-item {
  position: relative;

  display: flex;
  align-items: center;

  margin: 0;
  padding: 0;
}


/* Navigation buttons */

.topbar-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  margin: 0;
  padding: 8px 0;

  border: 0;
  background: transparent;

  color: #ffffff;

  font-size: 13px;
  font-weight: 700;
  line-height: 1;

  letter-spacing: .04em;
  text-transform: uppercase;

  cursor: pointer;

  white-space: nowrap;
}


/* Chevron */

.topbar-nav-link .bi-chevron-down {
  font-size: 10px;
  line-height: 1;

  transition: transform .2s ease;
}


/* Optional hover */

.topbar-nav-link:hover {
  color: #ffffff;
}

.topbar-nav-item:hover .bi-chevron-down {
  transform: translateY(1px);
}


/* =========================================================
   REGION
   ========================================================= */

.topbar-region-wrap {
  position: relative;

  display: flex;
  align-items: center;

  margin: 0;
  padding: 0;
}

.topbar-region {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  margin: 0;
  padding: 8px 0;

  border: 0;
  background: transparent;

  color: #ffffff;

  font-size: 13px;
  font-weight: 700;

  line-height: 1;
  letter-spacing: .04em;

  cursor: pointer;
}

.topbar-region .bi-globe2 {
  font-size: 14px;
}

.topbar-region .bi-chevron-down {
  font-size: 10px;
}


/* =========================================================
   RIGHT SIDE — LOGIN + REQUEST DEMO
   ========================================================= */

.topbar-right {
  flex: 0 0 auto;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 16px;

  margin-left: auto;
  padding: 0;

  z-index: 2;
}


/* =========================================================
   LOGIN
   ========================================================= */

.topbar-cta-red {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 44px;
  min-width: 88px;

  padding: 0 22px;

  box-sizing: border-box;

  background: #ed1b2f;
  color: #ffffff;

  text-decoration: none;

  font-size: 12px;
  font-weight: 800;

  letter-spacing: .06em;

  transition:
    background .2s ease,
    transform .2s ease;
}

.topbar-cta-red:hover {
  background: #d91428;
  color: #ffffff;
}


/* =========================================================
   REQUEST DEMO
   ========================================================= */

.topbar-right .btn-mono,
.topbar-right .sk-demo-trigger {
  height: 44px;

  padding: 0 26px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  white-space: nowrap;

  font-size: 12px;
  font-weight: 800;

  letter-spacing: .05em;
}


/* =========================================================
   LOGGED-IN ACCOUNT
   ========================================================= */

.topbar-account {
  position: relative;

  display: flex;
  align-items: center;
}

.topbar-account-btn {
  display: inline-flex;
  align-items: center;

  gap: 7px;

  height: 44px;

  padding: 0 4px;

  border: 0;
  background: transparent;

  color: #ffffff;

  font-size: 13px;
  font-weight: 700;

  cursor: pointer;
}


/* =========================================================
   REMOVE UNWANTED CONTAINER BEHAVIOUR
   ========================================================= */

/* Topbar width comes from .sk-container on .topbar-row (see .topbar-row). */


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (min-width: 1200px) {
  .topbar-nav {
    gap: 38px;
  }
}


@media (min-width: 1440px) {
  .topbar-nav {
    gap: 42px;
  }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {
  .topbar-nav {
    gap: 22px;
  }

  .topbar-nav-link,
  .topbar-region {
    font-size: 12px;
  }

  .topbar-right {
    gap: 10px;
  }

  .topbar-right .btn-mono,
  .topbar-right .sk-demo-trigger {
    padding-left: 18px;
    padding-right: 18px;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 900px) {
  .topbar-nav {
    display: none;
  }
}

@media (max-width: 640px) {
  .topbar { height: 64px; }
}
.topbar.is-scrolled {
  background: rgba(10,10,10,.82);
  border-bottom-color: rgba(255,255,255,.08);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
}


.topbar-right {
  display: flex;
  align-items: center;
  /* The right slot of the header row — flex-end inside the .topbar-row.
     Anchors LOGIN + REQUEST DEMO to the right edge of the shared 1320px
     container. `justify-content: flex-end` is explicit (matching the
     request: logo flex-start, nav centred, buttons flex-end). */
  justify-content: flex-end;
  /* 16px between LOGIN and REQUEST DEMO so the pair reads as a
     matched CTA cluster. */
  gap: var(--space-2);
}

/* =========================================================
   PRIMARY NAV — Products / Solutions / Resources + Region
   Sits between the logo and the existing button group. Hidden
   on tablet/mobile (≤1080px) — all items live in the MENU drawer
   there.
   ========================================================= */
.topbar-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  /* The middle slot of the header row.
        • flex: 1 1 auto  — expand to fill the gap left by the surrounding
                              logo (.logo-link at flex-start) and the
                              right-side actions (.topbar-right at
                              flex-end).
        • justify-content: center — centres PRODUCTS / SOLUTIONS /
                                    RESOURCES / IN horizontally inside
                                    the slot.
        • min-width: 0  — lets the nav actually shrink in tight viewports
                            instead of overflowing. */
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
  margin-right: var(--space-1);
}
.topbar-nav-item { position: relative; }
.topbar-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 10px 14px;
  /* Poppins 600 13px uppercase. Reads as a polished enterprise menu. */
  font-family: var(--font-sans);
  font-size: var(--fs-nav);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--white);
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s ease;
}
.topbar-nav-link:hover,
.topbar-nav-link:focus-visible { color: var(--red); }
.topbar-nav-link .bi { font-size: 10px; transition: transform .15s ease; }
.topbar-nav-item:hover .topbar-nav-link .bi,
.topbar-nav-link[aria-expanded="true"] .bi { transform: rotate(180deg); }

/* Region selector — globe + "IN" + caret. Plain-text chrome so it
   stays visually distinct from the boxed CTA buttons next to it. */
.topbar-region {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: var(--fs-nav);
  letter-spacing: .06em;
  font-weight: 500;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s ease;
}
.topbar-region:hover,
.topbar-region:focus-visible { color: var(--red); }
.topbar-region .bi-globe2 { font-size: 14px; }
.topbar-region .bi-chevron-down { font-size: 9px; }

/* Region picker popup — mirrors the old navbar's country picker.
   Anchored under the globe button, dark glass card matching the
   landing topbar palette. */
.topbar-region-wrap { position: relative; }
.region-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 280px;
  background: rgba(10,10,10,.96);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 14px 16px 16px;
  z-index: 90;
  box-shadow: 0 18px 38px -10px rgba(0,0,0,.6);
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
  color: #fff;
  /* Slide-in animation */
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
}
.region-dropdown:not([hidden]) {
  opacity: 1;
  transform: translateY(0);
}
.region-dropdown[hidden] { display: none; }
.region-dropdown-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 6px;
}
.region-dropdown-headline {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,.92);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.region-dropdown-headline strong { font-weight: 600; }
.region-dropdown-headline .badge {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .14em;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.85);
}
.region-dropdown-headline .badge.badge-manual { background: rgba(13,202,240,.18); color: #6edff6; }
.region-dropdown-headline .badge.badge-account { background: rgba(255,255,255,.16); }
.region-dropdown-headline .badge.badge-ip { background: rgba(40,167,69,.22); color: #6fdc8c; }
.region-dropdown-region {
  font-size: 11px;
  color: rgba(255,255,255,.55);
  font-family: var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.region-select {
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  padding: 8px 10px;
  border-radius: 4px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.6) 50%),
    linear-gradient(135deg, rgba(255,255,255,.6) 50%, transparent 50%);
  background-position:
    calc(100% - 14px) 50%,
    calc(100% - 9px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;
}
.region-select:focus {
  outline: none;
  border-color: var(--red);
  background-color: rgba(255,255,255,.10);
}
.region-select option {
  background: #0A0A0A;
  color: #fff;
}
.region-dropdown-foot {
  font-size: 10px;
  color: rgba(255,255,255,.4);
  font-family: var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.region-dropdown-foot .bi { color: rgba(40,167,69,.7); }
.region-apply {
  width: 100%;
  margin-top: 10px;
  background: var(--red);
  color: #fff;
  border: 0;
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}
/* When the topbar scrolls onto a LIGHT section (topbar--light class
   added by the JS observer), invert the popup palette so it stays
   legible on white. */
.topbar--light .region-dropdown {
  background: rgba(255,255,255,.98);
  border-color: rgba(0,0,0,.12);
  color: #0A0A0A;
  box-shadow: 0 18px 38px -10px rgba(0,0,0,.18);
}
.topbar--light .region-dropdown-title,
.topbar--light .region-dropdown-foot { color: rgba(0,0,0,.5); }
.topbar--light .region-dropdown-headline { color: #0A0A0A; }
.topbar--light .region-select {
  background: #fff;
  border-color: rgba(0,0,0,.18);
  color: #0A0A0A;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(0,0,0,.55) 50%),
    linear-gradient(135deg, rgba(0,0,0,.55) 50%, transparent 50%);
}
.topbar--light .region-select option { background: #fff; color: #0A0A0A; }
.topbar--light .region-dropdown-headline .badge {
  background: rgba(0,0,0,.08);
  color: rgba(0,0,0,.7);
}
.topbar--light .region-dropdown-headline .badge.badge-manual { background: rgba(13,202,240,.18); color: #055160; }
.topbar--light .region-dropdown-headline .badge.badge-account { background: rgba(0,0,0,.10); }
.topbar--light .region-dropdown-headline .badge.badge-ip { background: rgba(40,167,69,.18); color: #0f5132; }

/* Dropdown panel — slides out under the parent link on hover or
   keyboard focus. Sits above the rest of the page (z 70 = same as
   the topbar). */
.topbar-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 220px;
  /* The panel is always wider than its trigger (~124px), and it is anchored
     left:0 under that trigger — so an uncapped panel spills sideways across
     the neighbouring nav items. Cap it just above the widest real label
     ("TRANSPORT MANAGEMENT SYSTEM" ≈ 309px) so today's menu is unchanged,
     but a long admin-authored title can never stretch across the header. */
  max-width: min(340px, calc(100vw - 40px));
  background: rgba(10,10,10,.96);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 8px 0;
  z-index: 70;
  display: none;
  flex-direction: column;
  box-shadow: 0 12px 28px -8px rgba(0,0,0,.5);
}
.topbar-nav-item:hover .topbar-dropdown,
.topbar-nav-item:focus-within .topbar-dropdown,
.topbar-nav-link[aria-expanded="true"] + .topbar-dropdown { display: flex; }

/* ── Shop dropdown ────────────────────────────────────────────────────
   Wider than the other menus because it carries a brand grid. Anchored on the
   RIGHT of its trigger instead of the left: the Shop item sits near the end of
   the nav, so a left-anchored 720px panel would run off the side of the screen. */
.topbar-dropdown--shop {
  left: auto;
  right: 0;
  min-width: 680px;
  max-width: min(760px, calc(100vw - 40px));
  padding: 14px 0 16px;
  /* The panel must not inherit `.topbar-dropdown`'s column flex for the two
     side-by-side sections; each row below manages its own layout. */
  gap: 0;
}

/* Headline row: the shop itself, plus the all-products shortcut. */
.topbar-shop-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 4px 18px 14px; border-bottom: 1px solid rgba(255,255,255,.10);
}
.topbar-shop-cta a {
  display: flex; align-items: center; gap: 12px; color: #fff; padding: 0;
}
.topbar-shop-cta a > .bi { font-size: 20px; color: var(--red); }
.topbar-shop-cta strong { display: block; font-size: 15px; line-height: 1.2; }
.topbar-shop-cta em {
  display: block; font-style: normal; font-size: 11.5px;
  color: rgba(255,255,255,.55); margin-top: 2px;
}
.topbar-shop-cta .topbar-shop-cta-link {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--red); white-space: nowrap;
}
.topbar-shop-cta .topbar-shop-cta-link:hover { color: #fff; }

/* Companies + categories as grids rather than one long list: 12 brands in a
   single column would make the menu taller than the viewport. */
.topbar-shop-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px; padding: 6px 12px 8px;
}
.topbar-shop-grid a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; color: rgba(255,255,255,.82);
  font-size: 13.5px; border-radius: 6px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.topbar-shop-grid a:hover { background: rgba(255,255,255,.07); color: #fff; }
.topbar-shop-grid a > .bi { color: var(--red); font-size: 15px; flex-shrink: 0; }
.topbar-shop-grid span { overflow: hidden; text-overflow: ellipsis; }
.topbar-shop-logo {
  height: 18px; width: 28px; object-fit: contain; flex-shrink: 0;
  /* Brand logos are often dark-on-dark; this keeps a black-on-transparent logo
     visible against the dark menu without recolouring the asset itself. */
  filter: brightness(0) invert(1);
}

.topbar-shop-all {
  display: inline-flex !important; align-items: center; gap: 6px;
  margin: 0 18px; padding: 6px 0 10px !important;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--red);
}
.topbar-shop-all:hover { color: #fff; }

/* Secondary tools row: Compare / Offers. */
.topbar-shop-tools {
  display: flex; gap: 6px; padding: 10px 18px 2px;
  border-top: 1px solid rgba(255,255,255,.10); margin-top: 4px;
}
.topbar-shop-tools a {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
  border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
  color: rgba(255,255,255,.85); font-size: 13px;
}
.topbar-shop-tools a:hover { border-color: var(--red); color: #fff; }

@media (max-width: 1080px) {
  .topbar-dropdown--shop { min-width: 0; max-width: min(420px, calc(100vw - 40px)); }
  .topbar-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .topbar-shop-grid { grid-template-columns: 1fr; }
  .topbar-shop-cta { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* Visibility above is driven by :hover OR :focus-within, and those two can
   both be true at once — clicking a trigger leaves it focused, so moving the
   pointer to the next one used to paint TWO panels. Because each is anchored
   under its own ~124px trigger while being ~309px wide, they overlapped by
   ~177px and the upper one clipped the other's labels ("All products" was cut
   to "All produ"). Hovering wins: while any item is hovered, only that item's
   panel may show. Keyboard focus alone still works as before. */
.topbar-nav:has(.topbar-nav-item:hover) .topbar-nav-item:not(:hover) .topbar-dropdown {
  display: none;
}
.topbar-dropdown-divider {
  height: 1px;
  background: rgba(255,255,255,.10);
  margin: 6px 0;
}
.topbar-dropdown-label {
  display: block;
  padding: 6px 18px 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.topbar-dropdown a .bi {
  display: inline-block;
  width: 16px;
  margin-right: 6px;
  font-size: 13px;
  color: rgba(255,255,255,.5);
  vertical-align: -2px;
}
.topbar-dropdown a.is-disabled {
  color: rgba(255,255,255,.4);
  cursor: default;
  pointer-events: none;
}
.topbar-dropdown a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  text-decoration: none;
  /* Labels stay on one line so the panel reads as a tidy single column (the
     widest real label, "TRANSPORT MANAGEMENT SYSTEM", sets the ~309px width).
     With the panel capped above, an outsized admin-authored title is clipped
     with an ellipsis rather than stretching the box across the header. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .12s ease, background .12s ease;
}
.topbar-dropdown a:last-child { border-bottom: 0; }
.topbar-dropdown a:hover,
.topbar-dropdown a:focus-visible { color: var(--red); background: rgba(255,255,255,.04); }

/* =========================================================
   ACCOUNT MENU (signed-in)
   Same dropdown panel + trigger chrome as the primary nav,
   but always visible (not hidden behind the ≤1080px rule that
   collapses .topbar-nav into the MENU drawer).
   ========================================================= */
.topbar-account { position: relative; }
.topbar-account-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: 0;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--white);
  white-space: nowrap;
  cursor: pointer;
  transition: color .15s ease;
}
.topbar-account-btn:hover,
.topbar-account-btn:focus-visible { color: var(--red); }
.topbar-account-btn .bi-chevron-down { font-size: 10px; transition: transform .15s ease; }
.topbar-account-btn[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }
.topbar-account-btn .bi-person-circle { font-size: 14px; }

.topbar-account-menu { right: 0; left: auto; min-width: 240px; }
.topbar-account:hover .topbar-account-menu,
.topbar-account:focus-within .topbar-account-menu,
.topbar-account-btn[aria-expanded="true"] + .topbar-account-menu { display: flex; }

/* Light-bar inversion, matching .topbar--light .topbar-nav-link. */
.topbar.topbar--light .topbar-account-btn { color: var(--black); }
.topbar.topbar--light .topbar-account-btn:hover,
.topbar.topbar--light .topbar-account-btn:focus-visible { color: var(--red); }

/* On narrow viewports, the nav collapses into the MENU drawer. */
@media (max-width: 1080px) {
  .topbar-nav { display: none; }
}
/* Mobile: tighten the topbar height to 64px so the logo and CTAs
   sit comfortably in the available space without cramping. */
@media (max-width: 768px) {
  .topbar { height: 64px; }
  .topbar-row { gap: var(--space-2); }
}

/* LOGIN CTA — brand-red fill, white text. Same height (40px) and
   chrome (Poppins 600 13px uppercase, sharp corners, 12px gap to
   REQUEST DEMO) so the two buttons sit on the same baseline.
   Hover: red turns black. 44px height + sharp corners reads as a
   premium enterprise CTA. */
.topbar-cta-red {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--red);
  color: var(--white);
  border: 0;
  height: 44px;
  padding: 0 22px;
  font-family: var(--font-sans);
  font-size: var(--fs-button);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.topbar-cta-red:hover,
.topbar-cta-red:focus-visible {
  background: var(--black);
  color: var(--white);
}

/* REQUEST DEMO inside the topbar — 44px tall, white fill with
   black text. Same chrome as LOGIN (Poppins 600 13px uppercase,
   sharp corners) and 12px gap to the LOGIN button so the pair
   reads as a matched CTA cluster. Hover: white turns red with
   white text. */
.topbar-right .btn-mono.btn-solid {
  height: 44px;
  padding: 0 22px;
  font-family: var(--font-sans);
  font-size: var(--fs-button);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}
.topbar-right .btn-mono.btn-solid:hover,
.topbar-right .btn-mono.btn-solid:focus-visible {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
}
/* Mobile: shrink the logo to 116px and the LOGIN + REQUEST DEMO cluster
   to 36px and 11px so the header row fits on a 390px viewport
   without overflowing. Goes AFTER the desktop rules so the
   cascade picks the mobile values at small widths. */
@media (max-width: 768px) {
  .topbar-cta-red {
    height: 36px;
    padding: 0 14px;
    font-size: 11px;
    letter-spacing: .05em;
  }
  .topbar-right .btn-mono.btn-solid {
    height: 36px;
    padding: 0 14px;
    font-size: 11px;
    letter-spacing: .05em;
  }
  .topbar-right { gap: var(--space-1); }
}

/* Small screens: the logo and the LOGIN + REQUEST DEMO cluster must share
   one row inside the shared container. At 390px the 180px logo plus the
   cluster is wider than the 343px row, so the logo scales down and the CTA
   padding tightens. Below 480px the header may wrap (cluster drops under
   the logo) instead of overflowing sideways. */
@media (max-width: 768px) {
  .topbar-row .logo-link { width: 116px; height: 32px; }
  .topbar-row .logo-img { width: 116px; }
  .topbar-cta-red,
  .topbar-right .btn-mono.btn-solid { padding: 0 12px; }
}

@media (max-width: 480px) {
  .topbar { height: auto; min-height: 64px; padding-block: 10px; }
  .topbar-row { height: auto; flex-wrap: wrap; row-gap: 8px; column-gap: 8px; }
  .topbar-right { flex-wrap: wrap; row-gap: 8px; margin-left: auto; flex-shrink: 1; min-width: 0; }
}

/* Current-season pill — shows in the topbar so the active theme is obvious */
.topbar-season {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--white);
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(225,6,0,.08);
  white-space: nowrap;
}
.topbar-season::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--red);
  display: inline-block;
}
.topbar-season:hover { border-color: var(--white); }

@media (max-width: 520px) {
  .topbar-season { display: none; } /* tiny screens: rely on the hero eyebrow + switcher */
}

.menu-drawer {
  position: fixed;
  inset: 80px 0 auto 0;
  /* Sits directly below the topbar (inset 80px from the top to match
     the new 80px topbar height), so it only has to beat page content —
     including Bootstrap sticky elements. */
  z-index: 1025;
  background: rgba(10,10,10,.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  padding: var(--space-3) var(--pad-x) var(--space-5);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.menu-drawer[hidden] { display: none !important; }
.menu-drawer a {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--white);
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.menu-drawer a:hover { color: var(--red); }
/* Region indicator inside the mobile drawer — sits alongside the
   other links but uses the brand-red text + globe icon so it's
   obvious at a glance which country is selected. */
.menu-drawer-region {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  cursor: pointer;
}
.menu-drawer-region .bi { font-size: 16px; }

.hero {
  position: relative;
  /* Exactly one viewport tall. Use `100svh` (small viewport) on
     mobile browsers where the URL bar inflates `100vh`. The
     flex column packs two rows: top spacer (topbar height) and
     hero-copy (flexes to fit the headline + paragraph). Everything
     fits inside the first viewport
     at common laptop sizes (1280×720, 1366×768, 1440×900). */
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  width: 100%;
  background: var(--black);
  color: var(--white);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Direct children of .hero (hero-image, hero-overlay, hero-spacer,
   hero-copy) sit above the dark background. Specific
   z-indices below override the catch-all. */
.hero > * { position: relative; z-index: 1; }
/* The hero background image — a real <img> so the browser can preload it,
   report intrinsic dimensions, and the section never depends on a CSS
   background hack. Paints under the overlay (z-index 1 from `.hero > *`).
   Hero is now exactly 100vh tall, so the image fills the visible viewport. */
.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Override the `.hero > *` rule so the image sits at z-index 0 — below
     the overlay (1) and the copy (2). */
  z-index: 0;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  /* Fade the video in over the poster once it can play. If the video
     404s, .is-ready is never added and the poster stays on display. */
  opacity: 0;
  transition: opacity .5s ease;
}
.hero-video.is-ready { opacity: 1; }
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10,10,10,.55);
  z-index: 1;
  pointer-events: none;
}

/* Top spacer — clears the fixed topbar so the hero's first content
   row sits below it. Matches the topbar height at every breakpoint
   (80px desktop, 64px mobile). */
.hero-spacer {
  flex: 0 0 80px;
}
@media (max-width: 768px) {
  .hero-spacer { flex-basis: 64px; }
}

/* Main hero copy column. Anchored to the lower-middle of the hero
   area (around 55–60% from the top) so the headline reads as the
   dominant visual element with intentional negative space above it.
   The .hero-copy itself is a full-width flex wrapper with NO
   horizontal padding/margin/max-width — all of those are provided by
   the inner `.container` (shared with the topbar and the trust
   strip) so the logo, season label, headline, paragraph and trust
   text share one left edge at every viewport. */
.hero-copy {
  position: relative;
  z-index: 3;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
  min-height: 0;       /* required so flex children can shrink */
}
/* The actual content (eyebrow, h1, paragraph) lives inside a
   shared `.container` so it sits in the same 1320px max-width slot
   as the topbar and trust strip. The vertical rhythm follows the
   8/16/24/32/48 spacing scale: eyebrow → 16px → headline → 24px →
   paragraph. */
.hero-copy-inner {
  display: flex;
  flex-direction: column;
  /* Keep the bottom of the inner column clear of the trust strip at
     any viewport. padding-bottom on .hero-copy would push the whole
     copy up; doing it on .hero-copy-inner instead keeps the trust
     strip pinned to the bottom of the hero at all heights. */
  padding-bottom: clamp(48px, 8vh, 96px);
}
.hero-copy-inner > .eyebrow-mono + .hero-title { margin-top: var(--space-2); }
.hero-copy-inner > .hero-title + .hero-paragraph { margin-top: var(--space-3); }

/* Subtle legibility overlay — a vertical gradient at the bottom
   of the hero image, BELOW the text. Sits between the image and
   the copy. Helps the white text stay legible against the dark
   video still without darkening the whole hero. The 55% fade-out
   keeps the upper part of the image clean and reveals the warehouse
   detail; the heavier bottom 30% guarantees the headline stays
   high-contrast against busy logistics elements. */
.hero-legibility {
  position: absolute;
  inset: auto 0 0 0;
  height: 65%;
  background: linear-gradient(to top,
    rgba(0,0,0,.85) 0%,
    rgba(0,0,0,.45) 35%,
    rgba(0,0,0,0) 65%);
  pointer-events: none;
  z-index: 2;
}

/* Hero eyebrow — small uppercase label with a red accent dash.
   Uses Poppins 500 (not monospace) so it reads as part of the
   enterprise design system, not code chrome. */
.hero-copy .eyebrow-mono {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0;
}
.hero-copy .eyebrow-mono::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--red);
}
/* Hero headline — Oswald 500, large but controlled. max-width
   ~14ch guarantees the headline wraps to exactly two lines on
   desktop ("EVERY SUPPLY CHAIN PROBLEM." + "ONE PLATFORM.") without
   awkward third-line breaks. clamp() lets it shrink on short
   viewports while never exceeding 84px on ultrawide. */
.hero-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -.005em;
  line-height: 1.04;
  margin: 0;
  color: var(--white);
  /* Controlled max-width keeps the headline from looking randomly
     wrapped. `min(960px, 100%)` is wide enough to fit "EVERY SUPPLY
     CHAIN PROBLEM." on one line at the headline's 76px size, so the
     natural break lands on the period — the second sentence ("ONE
     PLATFORM.") wraps onto its own line at every viewport. On
     narrow screens the 100% cap lets the headline shrink to the
     container width. */
  max-width: min(960px, 100%);
}
/* Hero paragraph — narrower than the headline, comfortable line
   height, white at 85% so it sits one notch below the headline
   without disappearing. */
.hero-paragraph {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body-lg);
  color: rgba(255,255,255,.85);
  margin: 0;
  max-width: 50ch;
  line-height: 1.6;
}

/* Optional scroll cue — a tiny 1px × 40px white line at 40% opacity
   placed at the right end of the copy block. Gentle 2.4s up-and-down
   animation. Hidden for users who prefer reduced motion.

   The cue sits inside .hero-copy which is now full-viewport-width.
   On screens wider than 1440px, the .container is centred with
   max-width 1440px, so the cue's right edge has to track that
   container rather than the viewport edge. The max() picks the
   smaller of the two values: on wide screens it tracks the centred
   container's right edge (50% - 720 + 48 = viewport-right offset);
   on screens ≤ 1440px it falls back to the container padding. */
.hero-scroll-cue {
  display: block;
  position: absolute;
  right: max(var(--pad-x), calc(50% - var(--max-w) / 2 + var(--pad-x)));
  bottom: 0;
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,.4);
  transform-origin: 50% 0;
  animation: hero-scroll-cue-anim 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hero-scroll-cue-anim {
  0%, 100% { transform: translateY(0); opacity: .4; }
  50%      { transform: translateY(8px); opacity: .85; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-cue { display: none; }
}
@keyframes hero-scroll-cue-anim {
  0%, 100% { transform: translateY(0); opacity: .4; }
  50%      { transform: translateY(8px); opacity: .85; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-cue { display: none; }
}

/* Mobile (≤768px): headline shrinks and the scroll cue is hidden. */
@media (max-width: 768px) {
  .hero-copy-inner { padding-bottom: clamp(40px, 8vh, 72px); }
  .hero-copy .eyebrow-mono { font-size: 11px; letter-spacing: .12em; }
  .hero-title {
    font-size: clamp(34px, 9vw, 48px);
    line-height: 1.05;
    max-width: 100%;
  }
  .hero-paragraph { font-size: var(--fs-body-sm); max-width: 100%; }
  .hero-scroll-cue { display: none; }
}

/* =========================================================
   HORIZONTAL VIDEO STORY — pinned full-viewport, scrubbed by scroll
   ========================================================= */
.story {
  position: relative;
  background: var(--black);
  color: var(--white);
  /* Pinned height provided by GSAP; on mobile we override this below */
  /* The hero used to sit above this section and carry the offset for the
     fixed topbar via .hero-spacer (80px desktop / 64px mobile). The carousel
     is now the first section, so it owns that offset itself — otherwise the
     topbar would sit on top of the first panel. The pin is shortened by the
     same amount so the carousel still fills exactly the visible viewport. */
  padding-top: 80px;
}
.story-pin {
  position: relative;
  height: 100vh;
  height: calc(100vh - 80px);
  height: 100svh;
  height: calc(100svh - 80px);
  width: 100%;
  overflow: hidden;
}
.story-track {
  position: absolute;
  inset: 0;
  display: flex;
  flex-wrap: nowrap;
  height: 100%;
  width: 100%;
  /* The carousel is a self-contained HORIZONTAL scroller. It is never
     pinned and never scrubbed by the page's vertical scroll, so a wheel
     or vertical swipe over this section just scrolls the page normally.
       scroll-snap-type: x  — snaps horizontally only; the vertical axis of
                              the document is untouched.
       overscroll-behavior-x — keep horizontal momentum from chaining into
                              an ancestor; vertical chaining is left alone
                              so the page still scrolls.

     DO NOT add `touch-action: pan-x` here (or anywhere in this section).
     touch-action is INTERSECTED up the ancestor chain rather than falling
     back to `auto`, so declaring `pan-x` on the track strips vertical
     panning from the entire chain and the page stops scrolling under a
     finger. That was measured: with `pan-x` a vertical drag over the
     carousel moved the page 0px, while the identical drag over the hero
     above it and the Customers section below it each moved 534px.
     Leaving touch-action at its default `auto` is the correct setup — the
     track has no vertical scroll range, so a vertical gesture simply
     chains up to the document, while a horizontal one scrolls the track
     and snaps to a panel. */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  /* `scroll-behavior` is inherited, so `html { scroll-behavior: smooth }`
     would otherwise make slide changes animate before JS has decided on a
     transition. Pin it to `auto` and let script.js drive the easing. */
  scroll-behavior: auto;
  scrollbar-width: none;
}
.story-track::-webkit-scrollbar { display: none; }
.story-track.is-dragging { cursor: grabbing; user-select: none; }

.story-panel {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  width: 100%;
  /* One panel per viewport — the snap target. `scroll-snap-stop: always`
     keeps a flick from skipping several steps at once. */
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  /* Solid dark fallback so the panel is never transparent while the
     WebP poster streams in. The gradient adds a little depth, and the
     <img> overlay (z-index 0) paints over it as soon as it decodes. */
  background-color: #050608;
  background-image: linear-gradient(180deg, #14171a 0%, #050608 100%);
  isolation: isolate;
}

/* The actual panel photo — a real <img> element so the browser can
   preload it, honour loading=lazy, decode async, and the panel never
   depends on a CSS-`::before` opacity gate to show its picture. */
.story-panel-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  background: #050608;       /* placeholder while the bitmap streams in */
}
.story-panel video,
.story-panel .story-panel-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;                /* on top of the still, below the overlay */
  opacity: 0;
  transition: opacity .35s ease;
}
.story-panel video.is-ready,
.story-panel .story-panel-video.is-ready { opacity: 1; }
.story-panel-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);   /* ~50% black to keep copy readable */
  z-index: 2;
}
.story-panel-body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  /* Copy uses the shared container so it lines up with the logo, the counter
     and every other section. The panel background itself stays full bleed. */
  width: var(--sk-container-width);
  margin-inline: auto;
  padding: 0 0 clamp(72px, 9vh, 110px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.story-step {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .22em;
  color: var(--red);
  font-weight: 500;
  text-transform: uppercase;
}
.story-panel-title {
  font-size: clamp(32px, 4.4vw, 64px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
  max-width: 760px;
  color: var(--white);
}
.story-panel-benefit {
  font-size: clamp(14px, 1.05vw, 16px);
  color: rgba(255,255,255,.78);
  max-width: 520px;
  margin: 0;
  line-height: 1.55;
}

/* Progress bar + counter + eyebrow (overlays) */
.story-progress {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(255,255,255,.12);
  z-index: 5;
}
.story-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--red);
  transition: width .05s linear;
}
/* ‹ 01 / 06 › control cluster — the only way the slide changes on
   desktop. Typography deliberately matches .story-counter so the control
   reads as part of the existing overlay, not a new UI element. */
.story-nav {
  position: absolute;
  top: 80px;
  right: max(var(--sk-container-gutter), calc((100% - var(--sk-container-max)) / 2));
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 4px;
}
.story-counter {
  z-index: 5;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .22em;
  color: rgba(255,255,255,.7);
  /* Keeps the count optically centred between the two chevrons even
     though the glyphs are not the same width. */
  min-width: 8ch;
  text-align: center;
  padding: 0 2px;
  pointer-events: none;
}
.story-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.7);
  font-family: var(--font-mono);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: color .25s ease, background-color .25s ease, opacity .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.story-nav-btn:hover,
.story-nav-btn:focus-visible {
  color: var(--white);
  background: rgba(255,255,255,.10);
}
.story-nav-btn:focus-visible {
  outline: 1px solid var(--red);
  outline-offset: 2px;
}
/* Keyboard focus ring on the track itself (it is a scroll container). */
.story-track:focus-visible { outline: 1px solid var(--red); outline-offset: -1px; }

/* .story-eyebrow — REMOVED. Styled the carousel's "PEAK SEASON READY ·
   6 STEPS" eyebrow, which is no longer rendered (see index.html). It was
   absolutely positioned, so nothing else depended on it. */

/* Mobile — the track already scrolls horizontally at every breakpoint
   (see .story-track), so only the overlay offsets need to move up.
   The ‹ 01 / 06 › cluster drops onto its own line instead of running
   into the panel edge — on a 390px screen they overlap if they share a row. */
@media (max-width: 768px) {
  .story { padding-top: 64px; }
  .story-pin { height: 100vh; height: calc(100vh - 64px);
               height: 100svh; height: calc(100svh - 64px); }
  .story-nav { top: 100px; }
}

/* =========================================================
   STATS — white section, big numbers
   ========================================================= */
.stats {
  background: var(--white);
  color: var(--black);
  padding: clamp(64px, 8vw, 110px) 0;
  border-top: 1px solid var(--grey-200);
  border-bottom: 1px solid var(--grey-200);
}
.stats .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: center;
}
.stat-value {
  font-size: clamp(56px, 7vw, 96px);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--black);
}
.stat-unit { color: var(--red); font-weight: 400; }
.stat-label {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--grey-500);
}

/* =========================================================
   SECTION HEAD — used by platform, industries, pricing
   ========================================================= */
.section-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(36px, 4.5vw, 56px);
}
.section-title {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3.6vw, 48px);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.1;
  margin: 0 0 18px;
}
.section-sub {
  font-family: var(--font-sans);
  font-size: 17px;
  color: var(--grey-500);
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.6;
  font-weight: 400;
}

/* =========================================================
   REVEAL ANIMATIONS — light fade-up / scale-in on scroll
   Activated by adding .reveal (and an optional delay / variant)
   to any element. A single IntersectionObserver in script.js
   toggles .is-visible. Honors prefers-reduced-motion.

   DEFAULT STATE: elements are fully visible. The hidden state is
   gated behind `body.js-ready` so the page never paints blank
   while JS is still parsing the season file or setting up the
   IntersectionObserver. If JS is slow, the page is visible.
   ========================================================= */
.reveal {
  /* Visible by default — no flash-of-invisible on refresh */
  opacity: 1;
  transform: none;
}
/* Once JS confirms it has booted, the observer hides elements that
   haven't been revealed yet, then animates them in as they enter the
   viewport. The `js-ready` class is added by boot.js before the
   observer is constructed (see script.js). */
body.js-ready .reveal {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity .55s cubic-bezier(.22, .61, .36, 1),
    transform .55s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}
body.js-ready .reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
body.js-ready .reveal--scale {
  transform: translate3d(0, 0, 0) scale(.985);
}
body.js-ready .reveal--scale.is-visible {
  transform: translate3d(0, 0, 0) scale(1);
}
body.js-ready .reveal--glide {
  /* A slightly softer glide — used on the big section headings */
  transition-duration: .7s;
}
body.js-ready .reveal--delay-1 { transition-delay:  40ms; }
body.js-ready .reveal--delay-2 { transition-delay:  80ms; }
body.js-ready .reveal--delay-3 { transition-delay: 120ms; }
body.js-ready .reveal--delay-4 { transition-delay: 160ms; }
body.js-ready .reveal--delay-5 { transition-delay: 200ms; }
body.js-ready .reveal--delay-6 { transition-delay: 240ms; }
body.js-ready .reveal--delay-7 { transition-delay: 280ms; }
body.js-ready .reveal--delay-8 { transition-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  body.js-ready .reveal,
  body.js-ready .reveal--scale,
  body.js-ready .reveal--glide {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
/* Override section-sub colour per surface (defined above). */

/* =========================================================
   PLATFORM — one card per active product (DB-driven)
   Layout fills the container with even gaps and equal card heights.
   Four colour variants cycle via .platform-card--{white,red,dark}.
   ========================================================= */
.platform {
  /* background comes from .section--black */
  color: #FFFFFF;
  padding: clamp(56px, 7vw, 100px) 0 clamp(40px, 5vw, 72px);
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
@media (max-width: 768px) { .platform { padding: clamp(40px, 8vw, 56px) 0 clamp(32px, 6vw, 48px); } }

.platform .section-head { text-align: center; margin-bottom: 56px; }

.card-grid {
  display: grid;
  gap: 20px;
}
/* Cards are flex items, not grid tracks, so every card has the same width and
   a partial last row is centred (5 cards = 4 + 1 centred). The column count
   and gap come from the breakpoints below. */
.platform-grid {
  --card-cols: 4;
  --card-gap: 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--card-gap);
}
.platform-grid > .platform-card {
  flex: 0 0 calc((100% - (var(--card-cols) - 1) * var(--card-gap)) / var(--card-cols));
  min-width: 0;
}
@media (max-width: 768px) { .platform-grid { --card-gap: 20px; } }

/* ----- CARD BASE ----- */
.platform-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 360px;
  padding: 36px 32px;
  border: 1px solid #E5E5E5;
  border-radius: 0;
  text-decoration: none;
  color: inherit;
  background: var(--white);
  font-family: 'Poppins', sans-serif;
  box-shadow: none;
  transition: transform 200ms ease,
              background-color 200ms ease,
              border-color 200ms ease,
              border-top-width 200ms ease,
              color 200ms ease;
  outline: none;
}
.platform-card .num {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  letter-spacing: .02em;
}
.platform-card .icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 0;
  flex: 0 0 44px;
  font-size: 22px;
  line-height: 1;
}
.platform-card .icon-tile .bi {
  font-size: 22px;
  line-height: 1;
}
.platform-card h3 {
  margin: 0;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: clamp(26px, 2.2vw, 30px);
  line-height: 1.15;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.platform-card p {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.7;
  /* Up to ~5 lines; descriptions longer than this are clipped with an ellipsis
     so cards stay aligned even if DB text grows. */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.platform-card .more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #E5E5E5;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
}
.platform-card .more .more-arrow {
  display: inline-block;
  transition: transform 200ms ease;
}

/* Top row — number on the left, icon tile on the right */
.platform-card { display: grid; }
.platform-card .num       { grid-area: num; align-self: start; }
.platform-card .icon-tile { grid-area: icon; justify-self: end; }
.platform-card h3         { grid-area: title; }
.platform-card p          { grid-area: desc; margin-top: 12px; }
.platform-card .more      { grid-area: more; margin-top: auto; }
.platform-card {
  grid-template-columns: 1fr 44px;
  grid-template-areas:
    "num   icon"
    "title title"
    "desc  desc"
    "more  more";
  row-gap: 18px;
  column-gap: 12px;
}

/* ----- VARIANT 1 & 3: WHITE ----- */
.platform-card--white {
  background: #FFFFFF;
  color: #000000;
  border-color: #E5E5E5;
  border-top: 3px solid #EB0B1F;
}
.platform-card--white .num,
.platform-card--white .more,
.platform-card--white .more .more-arrow { color: #EB0B1F; }
.platform-card--white .icon-tile {
  background: #FFFFFF;
  color: #EB0B1F;
  border: 1px solid #E5E5E5;
}
.platform-card--white .more { border-top-color: #E5E5E5; }

/* ----- VARIANT 2: RED ----- */
.platform-card--red {
  background: #EB0B1F;
  color: #FFFFFF;
  border-color: #EB0B1F;
  border-top: 3px solid #EB0B1F;
}
.platform-card--red .num,
.platform-card--red .more,
.platform-card--red .more .more-arrow { color: #FFFFFF; }
.platform-card--red .icon-tile {
  background: #FFFFFF;
  color: #EB0B1F;
}
.platform-card--red .more { border-top-color: rgba(255,255,255,.3); }

/* ----- VARIANT 4: BLACK ----- */
.platform-card--dark {
  background: #111111;
  color: #FFFFFF;
  border-color: #333333;
  border-top: 3px solid #EB0B1F;
}
.platform-card--dark .num,
.platform-card--dark .more,
.platform-card--dark .more .more-arrow { color: #EB0B1F; }
.platform-card--dark .icon-tile {
  background: #EB0B1F;
  color: #FFFFFF;
}
.platform-card--dark .more { border-top-color: rgba(255,255,255,.2); }

/* ----- HOVER & FOCUS — modern 3D lift ----- */
.platform-card {
  /* 3D layer — cards physically rise out of the surface on hover.
     `perspective` is set on the same element so the 3D effect works
     without needing a perspective ancestor on <body>. */
  perspective: 1200px;
  transform-style: preserve-3d;
  transition:
    transform .35s cubic-bezier(.22,.61,.36,1),
    box-shadow .35s cubic-bezier(.22,.61,.36,1),
    background-color .25s ease,
    border-color .25s ease,
    color .25s ease;
  will-change: transform;
}
.platform-card:hover,
.platform-card:focus-visible {
  transform: translateY(-8px) translateZ(18px);
  box-shadow:
    0 24px 48px -16px rgba(0,0,0,.45),
    0 8px 16px -8px rgba(235, 11, 31, .25);
}
.platform-card:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.platform-card:hover .more .more-arrow,
.platform-card:focus-visible .more .more-arrow {
  transform: translateX(6px);
}
/* WHITE → red border + thicker top border */
.platform-card--white:hover,
.platform-card--white:focus-visible {
  border-color: #EB0B1F;
  border-top-width: 6px;
}
/* RED → black background */
.platform-card--red:hover,
.platform-card--red:focus-visible {
  background: #000000;
  border-color: #000000;
}
/* DARK → red background */
.platform-card--dark:hover,
.platform-card--dark:focus-visible {
  background: #EB0B1F;
  border-color: #EB0B1F;
}

@media (prefers-reduced-motion: reduce) {
  .platform-card,
  .platform-card .more .more-arrow { transition: none; }
  .platform-card:hover,
  .platform-card:focus-visible { transform: none; box-shadow: none; }
  .platform-card:hover .more .more-arrow,
  .platform-card:focus-visible .more .more-arrow { transform: none; }
}

/* Breakpoints: 4 cols from 1200, 2 cols from 640 to 1199, 1 col under 640. */
@media (max-width: 1199.98px) {
  .platform-grid { --card-cols: 2; }
}
@media (max-width: 639.98px) {
  .platform-grid { --card-cols: 1; }
}

/* =========================================================
   ABOUT SKUBIQ — product video carousel
   ========================================================= */
.about-skubiq {
  /* Deep slate — slightly lighter than the hero so the section reads
     as its own surface while still sitting in the dark rhythm. */
  background: #111111;
  color: #FFFFFF;
  /* Tighter vertical padding so the section hugs its content rather
     than floating in empty black space. */
  padding: clamp(48px, 6vw, 80px) 0;
  position: relative;
}
.about-skubiq::after {
  /* Soft red glow top-right to keep the section in visual conversation
     with the platform / pricing surfaces above and below. */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 600px at 92% -8%, rgba(235, 11, 31, 0.10) 0%, rgba(0,0,0,0) 60%);
}
.about-skubiq > * { position: relative; z-index: 1; }

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}

/* ── Media column ── */
.about-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-carousel {
  width: 100%;
  max-width: 760px;
}
.about-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 24px 56px rgba(0,0,0,.45);
}
.about-video-frame iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.about-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 14px;
}
.about-carousel-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255,255,255,.35);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.about-carousel-button:hover,
.about-carousel-button:focus-visible {
  color: #fff;
  background: var(--red);
  border-color: var(--red);
}
.about-carousel-count {
  min-width: 52px;
  color: rgba(255,255,255,.72);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-align: center;
}

/* ── Copy column ── */
.about-copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 620px;
}
.about-copy .eyebrow-mono {
  /* Red eyebrow, small caps, letter-spaced — matches the section-head
     eyebrow rhythm used on platform / pricing / industries. */
  color: var(--red);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 500;
}
.about-copy .eyebrow-mono::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--red);
  margin-right: 12px;
  vertical-align: middle;
}
.about-headline {
  font-family: var(--font-heading);
  /* Larger headline — matches the visual weight of the other section
     titles now that the section is shorter. */
  font-size: clamp(34px, 4.2vw, 56px);
  font-weight: 500;
  text-transform: none;
  letter-spacing: .005em;
  line-height: 1.1;
  margin: 0;
  color: #FFFFFF;
}
.about-lede {
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.25vw, 19px);
  font-weight: 400;
  line-height: 1.6;
  margin: 4px 0 0;
  color: #E5E5E5;
}
.about-body {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: 300;
  line-height: 1.65;
  margin: 0;
  color: #B5B5B5;
}

/* ── Mobile: stack image above text ── */
@media (max-width: 880px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: clamp(28px, 5vw, 48px);
    text-align: left;
  }
  .about-media { order: 1; }
  .about-copy  { order: 2; }
}

/* =========================================================
   INDUSTRIES — text grid, uses the shared .sk-container width and the
   same centred flex wrap as the platform cards
   ========================================================= */
.industries {
  /* background comes from .section--white */
  padding: clamp(48px, 6vw, 88px) 0 clamp(48px, 6vw, 88px);
}
/* Bigger headline — same uppercase Oswald rhythm but with more weight
   for visual presence on this section. */
.industries .section-title {
  font-size: clamp(32px, 4vw, 52px);
}
.industries-list {
  list-style: none;
  margin: 0;
  padding: 0;
  --list-cols: 4;
  --list-gap: 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* Real gap between cards (matches the platform-card rhythm). The
     previous `gap: 0` design relied on touching borders which made
     the grid feel like a spreadsheet — the new gap gives each card
     its own space, matching the visual language of the platform
     cards above. */
  gap: var(--list-gap);
}
/* Flex rows, not grid tracks: every card is the same width and a partial last
   row (7 cards = 4 + 3) stays centred. */
.industries-list > li {
  flex: 0 0 calc((100% - (var(--list-cols) - 1) * var(--list-gap)) / var(--list-cols));
  min-width: 0;
}
@media (max-width: 1199.98px) {
  .industries-list { --list-cols: 2; --list-gap: 20px; }
}
@media (max-width: 639.98px) {
  .industries-list { --list-cols: 1; --list-gap: 16px; }
}
.industries-list li {
  position: relative;
  /* Card chrome mirrors .platform-card--white: 1px grey border +
     3px brand-red top accent that is always visible. */
  border: 1px solid #E5E5E5;
  border-top: 3px solid var(--red);
  /* Bigger interior padding — gives the larger fonts room to breathe
     and makes each cell feel more substantial. */
  padding: clamp(28px, 2.4vw, 40px) clamp(24px, 2.2vw, 36px);
  background: #FFFFFF;
  perspective: 1200px;
  transition:
    background-color .15s ease,
    transform .25s cubic-bezier(.22,.61,.36,1);
  transform-style: preserve-3d;
}
.industries-list li:hover,
.industries-list li:focus-within {
  background: #FAFAFA;
  transform: translateZ(6px);
}
.industries-list .ind-num {
  font-family: var(--font-mono);
  font-size: clamp(12px, .9vw, 13px);
  letter-spacing: .22em;
  color: var(--red);
  display: block;
  margin-bottom: 14px;
}
.industries-list h3 {
  margin: 0 0 10px;
  font-family: var(--font-heading);
  font-size: clamp(19px, 1.5vw, 22px);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.2;
}
.industries-list p {
  margin: 0;
  font-size: clamp(14px, 1.05vw, 16px);
  color: var(--grey-500);
  line-height: 1.55;
  max-width: 32ch;
}

/* =========================================================
   PRICING — four plans
   ========================================================= */
.pricing {
  /* background comes from .section--black */
  color: #FFFFFF;
  padding: clamp(56px, 7vw, 100px) 0 clamp(48px, 6vw, 88px);
}
.pricing-grid { grid-template-columns: repeat(4, 1fr); align-items: stretch; gap: 20px; }

.plan {
  position: relative;
  border: 1px solid var(--grey-200);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  color: #000000;
  border-top: 3px solid var(--red);
  perspective: 1200px;
  transform-style: preserve-3d;
  transition:
    transform .35s cubic-bezier(.22,.61,.36,1),
    box-shadow .35s cubic-bezier(.22,.61,.36,1);
}
.plan:hover,
.plan:focus-within {
  transform: translateY(-6px) translateZ(12px);
  box-shadow: 0 20px 40px -16px rgba(0,0,0,.35);
}
.plan.is-featured:hover,
.plan.is-featured:focus-within {
  box-shadow: 0 20px 44px -12px rgba(235, 11, 31, .55);
}
.plan.is-featured {
  border-color: var(--red);
  background: #EB0B1F;
  color: #FFFFFF;
  border-top: 3px solid #EB0B1F;
  position: relative;
}
.plan-badge {
  position: absolute;
  top: -10px; left: 24px;
  background: #000000;
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 5px 10px;
}
.plan h3 {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .14em;
  font-family: var(--font-mono);
  text-transform: uppercase;
  color: #6B6B6B;
}
.plan.is-featured h3 { color: #FFFFFF; }

.plan-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
  margin: 8px 0 0;
}
.plan-price .currency {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
}
.plan-price .amount {
  font-family: var(--font-heading);
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #000000;
}
.plan.is-featured .plan-price .amount { color: #FFFFFF; }
.plan-price .amount[style*="line-through"] { color: #B5B5B5; }
.plan-price .per {
  display: block;        /* move "/ N day(s)" onto its own small line under the price */
  width: 100%;
  margin-top: 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: #6B6B6B;
  line-height: 1.4;
}
.plan.is-featured .plan-price .per { color: rgba(255,255,255,.85); }

.plan-tag {
  margin: 12px 0 18px;
  font-size: 13px;
  color: #6B6B6B;
  line-height: 1.5;
}
.plan.is-featured .plan-tag { color: rgba(255,255,255,.85); }

.plan-meta {
  color: #6B6B6B !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  margin-bottom: 14px;
}
.plan.is-featured .plan-meta { color: rgba(255,255,255,.85) !important; }

.plan ul {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 10px;
  font-size: 14px;
  color: #1A1A1A;
  flex: 1;
}
.plan.is-featured ul { color: #FFFFFF; }
.plan li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.plan li::before {
  content: '';
  flex: none;
  width: 10px; height: 10px;
  margin-top: 6px;
  background: var(--red);
}
.plan.is-featured li::before { background: #FFFFFF; }

/* Card buttons. Default: black background, white text, hover red. */
.plan .btn-mono {
  width: 100%;
  background: #000000;
  color: #FFFFFF;
  border-color: #000000;
}
.plan .btn-mono:hover {
  background: var(--red);
  color: #FFFFFF;
  border-color: var(--red);
}
/* Featured (red) card: white button with black text, hover black */
.plan.is-featured .btn-mono {
  background: #FFFFFF;
  color: #000000;
  border-color: #FFFFFF;
}
.plan.is-featured .btn-mono:hover {
  background: #000000;
  color: #FFFFFF;
  border-color: #000000;
}

.pricing-foot {
  text-align: center;
  margin-top: 30px;
  color: #B5B5B5;
  font-size: 13px;
}
.pricing-foot:first-of-type { color: #B5B5B5; }

/* Inline styles inside template add a small "Prices for: India" line; ensure it stays readable. */
.pricing .pricing-foot { color: #B5B5B5; font-size: 13px; }

/* =========================================================
   CTA BAND — grid-pattern, red headline + subtext + two buttons,
              vertically centered with generous breathing room.
   ========================================================= */
.cta-band {
  /* Override .section--white's radial + linear gradient with a flat
     white surface + subtle blueprint grid. The grid is two 1px
     gradient layers cross-blended so it stays cheap to paint and
     scales with the section's height. */
  background-color: #ffffff;
  background-image:
    linear-gradient(to right,  rgba(0,0,0,0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,0.045) 1px, transparent 1px),
    radial-gradient(800px 500px at 100% 0%, rgba(235,11,31,0.04) 0%, rgba(255,255,255,0) 60%);
  background-size: 48px 48px, 48px 48px, auto;
  color: #000000;
  /* Generous top + bottom padding so the content block (headline,
     subtext, buttons) sits with clear breathing room above and
     below — never flush against the black band above or the black
     footer below. min-height + flex keeps the content visually
     centered when the viewport is tall. */
  padding: clamp(96px, 12vw, 160px) 0 clamp(96px, 12vw, 160px);
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* Inner block is the shared container; the 820px cap keeps the headline and
   copy at a readable measure, centred within it. */
.cta-band-inner {
  max-width: 820px;
  margin-inline: auto;
}

.cta-band-title {
  font-family: var(--font-heading);
  font-size: clamp(48px, 6.5vw, 96px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin: 0 auto 26px;
  color: var(--red);            /* brand-red headline, not black */
  text-transform: uppercase;
  max-width: 12ch;
}
.cta-band-sub {
  color: #3a3a3a;
  opacity: 1;
  margin: 0 auto 44px;
  max-width: 620px;
  line-height: 1.55;
  font-size: 17px;
  font-weight: 500;
}
.cta-band-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 8px;
}
/* First CTA: red filled (default .btn-red). Second CTA: outlined dark
   on the white background, picks up the red on hover/focus. */
.cta-band .btn-mono.btn-outline-dark {
  background: transparent;
  color: #000000;
  border-color: #000000;
}
.cta-band .btn-mono.btn-outline-dark:hover,
.cta-band .btn-mono.btn-outline-dark:focus-visible {
  background: var(--red);
  color: #FFFFFF;
  border-color: var(--red);
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
  background: #000000;
  color: #FFFFFF;
  /* 72px bottom padding so the season switcher (bottom right) never overlaps the
     footer text. The left side stays clear of the switcher too. */
  padding: 64px 0 72px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.footer-brand .footer-h { margin-top: 24px; }
.footer-about {
  margin: 0 0 18px;
  color: #B5B5B5;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.7;
}
.footer-about strong {
  color: #E5E5E5;
  font-weight: 600;
}
.footer-h {
  margin: 0 0 14px;
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: .18em;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--red);
}
.footer-link-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.footer-col a {
  display: block;
  font-family: var(--font-sans);
  font-size: 14px;
  color: #E5E5E5;
  padding: 5px 0;
}
.footer-col a:hover { color: var(--red); }
.footer-mail {
  font-family: var(--font-sans);
  font-size: 13px;
  color: #B5B5B5;
  margin: 0;
}
.footer-mail strong { color: #E5E5E5; font-weight: 500; }
.footer-mail a { color: inherit; }
.footer-mail a:hover { color: var(--red); }
.footer-subscribe-copy {
  margin: 0 0 22px;
  color: #B5B5B5;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
}
.footer-subscribe-form {
  position: relative;
  display: grid;
  gap: 12px;
}
.footer-subscribe-form .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;
}
.footer-subscribe-form input {
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 0 12px;
  color: #FFFFFF;
  background: #111111;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 2px;
  font: 14px var(--font-sans);
}
.footer-subscribe-form input::placeholder { color: #A3A3A3; }
.footer-subscribe-form button {
  min-height: 46px;
  padding: 10px 16px;
  color: #FFFFFF;
  background: var(--red);
  border: 1px solid var(--red);
  border-radius: 2px;
  font: 600 14px var(--font-sans);
  transition: background .2s ease, border-color .2s ease;
}
.footer-subscribe-form button:hover,
.footer-subscribe-form button:focus-visible {
  background: var(--red-hover);
  border-color: var(--red-hover);
}
.footer-social-heading {
  margin: 26px 0 12px;
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 500;
  color: #FFFFFF;
}
.socials { display: flex; gap: 8px; margin: 0; }
.social {
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.15);
  font-family: var(--font-mono);
  font-size: 12px;
  color: #E5E5E5;
}
.social:hover { border-color: var(--red); color: var(--red); }
.footer-bottom {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.15);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #B5B5B5;
}
.footer-bottom a { color: #B5B5B5; }
.footer-bottom a:hover { color: var(--red); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
/* Tablet — industries collapses to 2 columns (was 3). The right-hand
   border on the 2nd, 4th, 6th cards is removed so the hairline grid
   stays clean. */
@media (max-width: 1080px) {
  .industries-list { grid-template-columns: repeat(2, 1fr); }
  .industries-list li:nth-child(4n) { border-right: 1px solid var(--grey-200); }
  .industries-list li:nth-child(2n) { border-right: none; }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 820px) {
  .stats .container { grid-template-columns: 1fr; gap: 36px; }
  .industries-list { grid-template-columns: repeat(2, 1fr); }
  .industries-list li:nth-child(3n) { border-right: 1px solid var(--grey-200); }
  .industries-list li:nth-child(2n) { border-right: none; }
  .pricing-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-link-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { padding-top: 100px; padding-bottom: 96px; }
}

@media (max-width: 520px) {
  /* On phones the LOGIN pill stays visible (it's now a primary CTA,
     not just a secondary chrome). Same for the nav and dropdown
     trigger — they collapse below 1080px (see the rule above). */
  .stats .container { grid-template-columns: 1fr; }
  .industries-list { grid-template-columns: 1fr; }
  .industries-list li { border-right: none; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-actions .btn-mono { width: 100%; }
  /* Labels may wrap inside a full-width button on very narrow screens
     (e.g. 200-260 CSS px at high zoom) so the text never overruns it. */
  .cta-band-actions .btn-mono { width: 100%; max-width: 100%; white-space: normal; }
  /* On phones the section naturally fits the content; the 70vh
     floor would force a tall empty band on short screens. */
  .cta-band { min-height: 0; padding: clamp(64px, 14vw, 96px) 0 clamp(64px, 14vw, 96px); }
}

/* =========================================================
   REDUCED MOTION — keep the carousel, drop the animation
   ========================================================= */
/* The horizontal carousel is no longer tied to page scroll, so reduced
   motion no longer needs a stacked fallback. The carousel stays usable
   (arrows, drag, swipe, keyboard) and script.js simply disables autoplay
   and switches slide changes to instant jumps. */
@media (prefers-reduced-motion: reduce) {
  .story-track { scroll-behavior: auto; }
  .story-panel { scroll-snap-stop: normal; }
}


/* Official SKUBIQ logo (img-based replacement for the CSS-square logo tile) */





/* =========================================================
   CUSTOMERS — black-and-white customer-logo marquee (pure CSS).
   ========================================================= */
.customers {
  /* background comes from .section--white */
  color: var(--black);
  padding: clamp(48px, 6vw, 88px) 0 clamp(40px, 5vw, 72px);
}

/* Marquee window: centred in the shared container; the mask fades both edges. */
.sk-customers-marquee {
  --sk-logo-h: 56px;
  --sk-logo-gap: 56px;
  --sk-marquee-duration: 36s;
  width: 100%;
  margin: 48px auto 0;
  padding-block: 12px;
  overflow: hidden;
  -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);
}
.sk-customers-marquee:focus-visible {
  outline: 2px solid var(--sk-red, #EB0B1F);
  outline-offset: 4px;
}

/* Two identical groups side by side; translating by -50% loops seamlessly. */
.sk-customers-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: sk-customers-scroll var(--sk-marquee-duration) linear infinite;
}
@keyframes sk-customers-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.sk-customers-marquee:hover .sk-customers-track,
.sk-customers-marquee:focus-within .sk-customers-track {
  animation-play-state: paused;
}

/* Each group ends with one gap so both halves are exactly the same width. */
.sk-customers-strip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--sk-logo-gap);
  margin: 0;
  padding: 0 var(--sk-logo-gap) 0 0;
  list-style: none;
}

.sk-customers-strip-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .72;
  transition: opacity .25s ease;
}
.sk-customers-strip-item img {
  display: block;
  height: var(--sk-logo-h);
  width: auto;
  max-width: 200px;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: grayscale(100%) contrast(1.05);
  transform: scale(1);
  transition: filter .28s ease, transform .28s ease;
}

/* Full colour and a small lift on hover. Hovering pauses the track, so the
   logo under the pointer stays put. */
.sk-customers-strip-item:hover {
  opacity: 1;
}
.sk-customers-strip-item:hover img {
  filter: grayscale(0%) contrast(1);
  transform: scale(1.08);
}

/* Keyboard focus on the strip (the track is paused) shows every logo in colour. */
.sk-customers-marquee:focus-visible .sk-customers-strip-item {
  opacity: 1;
}
.sk-customers-marquee:focus-visible .sk-customers-strip-item img {
  filter: grayscale(0%) contrast(1);
}

/* Mobile: smaller logos and tighter gaps. */
@media (max-width: 768px) {
  .sk-customers-marquee {
    --sk-logo-h: 48px;
    --sk-logo-gap: 40px;
  }
}

/* Reduced motion: no animation. The strip becomes a centred, wrapping row
   with the repeat copies and the clone group removed. */
@media (prefers-reduced-motion: reduce) {
  .sk-customers-marquee {
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .sk-customers-track {
    width: 100%;
    animation: none;
  }
  .sk-customers-strip {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    padding-inline-end: 0;
  }
  .sk-customers-strip--clone,
  .sk-customers-strip-item--repeat {
    display: none;
  }
  .sk-customers-strip-item img {
    transition: filter .01ms;
  }
  .sk-customers-strip-item:hover img {
    transform: none;
  }
}

/* Base logo sizing for footer and other non-header logos. The topbar
   pair uses fixed overlay dimensions in the header rules above. */
.logo-link {
  display: flex;
  align-items: center;
  flex: 0 0 auto;             /* never shrink */
  padding: 0;
  margin: 0;
  text-decoration: none;
}
.logo-img {
  display: block;
  /* Smaller logo height — 36px desktop (~168px wide at the 4.6:1
     aspect), 32px tablet, 28px mobile. Width follows from the
     aspect-ratio rule below. */
  height: 36px;
  width: auto;
  aspect-ratio: 1121 / 240;
  max-width: none;
  flex: 0 0 auto;
  object-fit: contain;
}

/* Tablet: 641–1024px → 32px tall (~150px wide) */
@media (min-width: 641px) and (max-width: 1024px) {
  .logo-img { height: 32px; }
}
/* Mobile: ≤640px → 28px tall (~131px wide) */
@media (max-width: 640px) {
  .logo-img { height: 28px; }
}

/* The header logo pair cross-fades using the same .topbar--light state
   as the background theme. */

/* Footer logo — taller, kept clear of the page grid. The max-width cap
   (with object-fit) stops it overrunning the container at extreme zoom
   without distorting the artwork. */
.footer-brand .logo-img,
.sk-footer .logo-img {
  height: 48px;
  max-width: 100%;
  object-fit: contain;
}
@media (max-width: 640px) {
  .footer-brand .logo-img,
  .sk-footer .logo-img {
    height: 40px;
  }
}

/* When the topbar swaps to a light background, give it a light bar so
   the dark-lettering logo is legible. The swap is instant, no animation. */
.topbar.topbar--light {
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom-color: var(--grey-200);
}
.topbar.topbar--light .btn-mono.btn-outline {
  color: var(--black);
  border-color: var(--grey-300);
}
.topbar.topbar--light .btn-mono.btn-outline:hover {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
}
.topbar.topbar--light .btn-mono.btn-solid {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}
.topbar.topbar--light .btn-mono.btn-solid:hover {
  background: var(--red);
  border-color: var(--red);
}
.topbar.topbar--light .topbar-season {
  color: var(--grey-500);
  border-color: var(--grey-300);
  background: rgba(235,11,31,.06);
}
/* The nav links and region picker default to white for the dark hero on the
   homepage. Pages without a hero (product, subpage, pricing, CMS) switch the
   topbar to `topbar--light`, so they need an explicit dark ink — otherwise
   PRODUCTS / SOLUTIONS / RESOURCES render white-on-white and disappear. */
.topbar.topbar--light .topbar-nav-link { color: var(--black); }
.topbar.topbar--light .topbar-nav-link:hover,
.topbar.topbar--light .topbar-nav-link:focus-visible { color: var(--red); }
.topbar.topbar--light .topbar-region { color: var(--black); }
.topbar.topbar--light .topbar-region:hover,
.topbar.topbar--light .topbar-region:focus-visible { color: var(--red); }
.topbar.topbar--light .topbar-region .bi { color: inherit; }
/* When over a red section, give the topbar a translucent red wash so the
   buttons (white) and logo (white) stay legible. Same white logo swap. */
.topbar.topbar--red {
  background: rgba(235,11,31,.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom-color: rgba(0,0,0,.18);
}
.topbar.topbar--red .btn-mono.btn-outline {
  color: #FFFFFF;
  border-color: rgba(255,255,255,.7);
}
.topbar.topbar--red .btn-mono.btn-outline:hover {
  background: #FFFFFF;
  color: var(--red);
  border-color: #FFFFFF;
}
.topbar.topbar--red .btn-mono.btn-solid {
  background: #000000;
  color: #FFFFFF;
  border-color: #000000;
}
.topbar.topbar--red .btn-mono.btn-solid:hover {
  background: #FFFFFF;
  color: #000000;
  border-color: #FFFFFF;
}
.topbar.topbar--red .topbar-season {
  color: #FFFFFF;
  border-color: rgba(255,255,255,.5);
  background: rgba(0,0,0,.18);
}

/* =========================================================
   LEGAL PAGES (Terms of Service, Privacy Policy, etc.)
   Same chrome as the rest of the site — Oswald headings,
   Poppins body, the shared 1320px container, the 8/16/24/48
   spacing scale and the existing section rhythm.
   ========================================================= */
.legal-page {
  /* Background matches .section--white so legal pages sit in the
     light surface rhythm of the rest of the site (white between
     dark sections). Subtle radial + linear gradient echo the
     home page so it doesn't feel like a different site. */
  background:
    radial-gradient(800px 500px at 100% 0%, rgba(235, 11, 31, 0.04) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  color: var(--black);
  padding: clamp(48px, 6vw, 96px) 0 clamp(64px, 8vw, 128px);
}
/* Page header — eyebrow + H1 + meta, sharing the same shared
   container used by every section so the page edges line up
   with the rest of the site. */
.legal-header {
  padding-bottom: clamp(24px, 3vw, 40px);
  border-bottom: 1px solid #E5E5E5;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.legal-header .eyebrow-mono {
  color: var(--red);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .22em;
  font-weight: 500;
  text-transform: uppercase;
  margin: 0 0 16px;
}
.legal-header .eyebrow-mono::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--red);
  vertical-align: middle;
  margin-right: 12px;
}
.legal-header h1 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -.005em;
  line-height: 1.05;
  color: var(--black);
}
.legal-header .legal-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grey-500);
  margin: 0;
}

/* Body — long-form text. Two-column at desktop is overkill for a
   legal document; a single column with a comfortable max-width
   keeps the line length readable. */
.legal-body {
  max-width: 880px;
}
.legal-body h2 {
  margin: var(--space-6) 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.15;
  color: var(--black);
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 {
  margin: var(--space-5) 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.2;
  color: var(--black);
}
.legal-body p {
  margin: 0 0 var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: #2A2A2A;
}
.legal-body p strong { color: var(--black); }
.legal-body ul,
.legal-body ol {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-4);
}
.legal-body li {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: #2A2A2A;
  margin-bottom: var(--space-1);
}
.legal-body a {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-body a:hover { color: var(--black); }

/* In-page anchor links — give each H2 a stable scroll offset below
   the fixed topbar so the heading isn't hidden when jumping. */
.legal-body :target { scroll-margin-top: 96px; }

/* Mobile: tighter padding, slightly smaller headings. */
@media (max-width: 768px) {
  .legal-page { padding: var(--space-5) 0 var(--space-6); }
  .legal-header h1 { font-size: clamp(34px, 9vw, 48px); }
  .legal-body h2 { font-size: clamp(24px, 6vw, 32px); }
  .legal-body h3 { font-size: clamp(18px, 4.5vw, 22px); }
  .legal-body p,
  .legal-body li { font-size: var(--fs-body-sm); }
}