/* ==========================================================================
   LineRush — One-Pager
   Plain CSS, mobile-first, BEM-like naming (c-block__element--modifier).
   Breakpoints: mobile (default) < 600px, tablet >= 600px, desktop >= 1024px.
   Design reference: Figma "LineRush REVIEW", node 3:12 (desktop) / 3:282 (mobile).
   ========================================================================== */

/* ---- Reset ------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body,
h1,
h2,
h3,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}
ul[class],
ol[class] {
  margin: 0;
  padding: 0;
  list-style: none;
}
img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
}
a {
  color: inherit;
}

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

/* ---- Design tokens ------------------------------------------------------ */
:root {
  /* Brand colors */
  --color-ink: #1e1b1b;
  --color-hub: #2b2726;
  --color-heading: #1e1b1b;
  --color-body: #2b2b2b;
  /* #8e8e8e read at 3.5:1 on white for the 12px text it's used on — bumped
     for WCAG AA (4.5:1 for small text). */
  --color-muted: #6b6b6b;
  --color-accent: #f16e3c;
  --color-accent-strong: #dd5327;
  --color-cream: #f6f1ed;
  --color-cream-alt: #f7f3f2;
  --color-input-bg: #f6f2f1;
  --color-white: #ffffff;
  --gradient-brand: linear-gradient(130deg, #fbd5c1 0%, #de5327 26%, #a5330f 100%);
  /* Mobile hero content: picks up where the image above it leaves off
     (its visible bottom edge is a flat mid-orange), so this starts there
     instead of at --gradient-brand's light peach. */
  --gradient-brand-mobile: linear-gradient(180deg, #fa521e 0%, #a5330f 100%);
  /* Header is a thin full-width bar: runs dark-to-light left-to-right (darker
     side behind the logo) and skips the hero gradient's palest stop, which
     washed out to near-white and killed contrast with the white logo/nav text. */
  --gradient-brand-header: linear-gradient(90deg, #a5330f 0%, #dd5327 55%, #f16e3c 100%);

  /* Typography */
  --font-heading: "Rubik", "Segoe UI", Arial, sans-serif;
  --font-body: "Quicksand", "Segoe UI", Arial, sans-serif;

  /* Layout */
  --container-width: 1176px;
  --container-width-wide: 1282px;
  --side-padding: 24px;
  --radius-pill: 40px;
  --radius-lg: 24px;
  --radius-md: 20px;
  --radius-sm: 16px;

  /* Motion */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}

@media (min-width: 600px) {
  :root {
    --side-padding: 48px;
  }
}

@media (min-width: 1024px) {
  :root {
    --side-padding: 72px;
  }
}

/* ---- Base ---------------------------------------------------------------*/
html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  font-family: var(--font-body);
  color: var(--color-body);
  background: var(--color-white);
  line-height: 1.5;
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-heading);
  line-height: 1.1;
}

a {
  text-decoration: none;
}

/* Visible, high-contrast focus ring for keyboard users on every interactive element */
/* No border-radius here: modern browsers already round the outline to match
   each element's own border-radius automatically — setting one here used to
   force every focused element (inputs included) to a flat 4px corner. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--color-accent-strong);
  outline-offset: 2px;
}

/* The contact form's inputs sit on the orange gradient, where the orange
   focus outline above has poor contrast — use white there instead. */
.c-form__input:focus-visible,
.c-form__textarea:focus-visible,
.c-form__consent input:focus-visible {
  outline-color: var(--color-white);
}

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  background: var(--color-white);
  color: var(--color-ink);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  z-index: 1000;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: 8px;
}

.c-container {
  width: 100%;
  max-width: calc(var(--container-width) + 2 * var(--side-padding));
  margin-inline: auto;
  padding-inline: var(--side-padding);
}

/* Navbar uses the wider 1282px content width; still centered like everything else. */
.c-container--wide {
  max-width: calc(var(--container-width-wide) + 2 * var(--side-padding));
}

.c-placeholder-note {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  /* var(--color-accent-strong) on this background reads at ~3:1 — too low
     for WCAG AA at this size. Darker, off-token shade fixes contrast while
     keeping the same warm hue. */
  color: #8a3212;
  background: rgba(221, 83, 39, 0.1);
  padding: 4px 10px;
  border-radius: 6px;
}

/* ---- Buttons ------------------------------------------------------------*/
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  border: none;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
  white-space: nowrap;
}

.c-btn--white {
  background: var(--color-white);
  color: var(--color-ink);
  box-shadow: 0 1px 10px rgba(255, 255, 255, 0.55);
}

.c-btn--gradient {
  background: var(--gradient-brand);
  color: var(--color-white);
}

.c-btn:hover {
  transform: translateY(-1px);
}

.c-btn:active {
  transform: translateY(0);
}

@media (min-width: 1024px) {
  .c-btn {
    font-size: 18px;
    padding: 16px 32px;
  }
}

/* ---- Site header / nav ---------------------------------------------------*/
.c-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 20px 0;
}

/* The gradient lives on a ::before rather than directly on .c-header's
   background: `background-image` can't be transitioned/interpolated by the
   browser (it just snaps), but `opacity` fades smoothly. */
.c-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--gradient-brand-header);
  opacity: 0;
  transition: opacity 500ms ease;
}

/* Added by main.js (initHeaderScroll) once the page has scrolled past the
   hero image, so the header stays transparent over the hero on first load. */
.c-header.is-scrolled::before {
  opacity: 1;
}

.c-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.c-nav__logo img {
  height: 24px;
  width: auto;
}

@media (min-width: 1024px) {
  .c-nav__logo img {
    height: 34px;
  }
}

.c-nav__links {
  display: none;
}

@media (max-width: 1023px) {
  .c-nav__cta {
    padding: 10px 20px;
  }
}

@media (min-width: 1024px) {
  .c-nav__links {
    display: flex;
    gap: 32px;
    font-weight: 700;
    font-size: 17px;
    text-transform: uppercase;
    color: var(--color-white);
  }

  .c-nav__links a {
    transition: opacity var(--transition-fast);
  }

  .c-nav__links a:hover {
    opacity: 0.8;
  }
}

/* ---- Hero ----------------------------------------------------------------*/
.c-hero {
  position: relative;
  overflow: hidden;
  color: var(--color-white);
}

/* Mobile (<600px, per Figma "Mobile" frame): the image is its own block
   stacked above the text, not a full-bleed background behind it. */
.c-hero__media {
  position: relative;
  aspect-ratio: 320 / 373;
  overflow: hidden;
}

/* The reset above (line 34) makes <picture> a block box with no height of
   its own, which breaks the img's `height: 100%` below (it would resolve
   against picture's auto height instead of .c-hero__media's aspect-ratio
   height) — give picture the same fill sizing so img's percentage height
   still resolves correctly. */
.c-hero__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.c-hero__media img {
  /* Positioned against .c-hero__media directly (instead of height: 100%
     of .c-hero__media picture) so its size isn't a percentage of a
     percentage — two chained percentage-height calculations can each
     round to a different pixel and leave picture's box (and its
     background) peeking out by 1px at the bottom. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top right;
}

.c-hero__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 var(--side-padding) 32px;
  /* On mobile the image sits above this block, so use the mobile gradient,
     which starts at the image's own orange instead of --gradient-brand's
     light peach (that peach never appears — the image already covers it —
     and left a jarring pale patch at the top of this block). */
  background: var(--gradient-brand-mobile);
  padding-top: 12px;
}

.c-hero__eyebrow {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
}

.c-hero__title {
  font-size: 34px;
  letter-spacing: -0.02em;
  color: var(--color-white);
  overflow-wrap: break-word;
  hyphens: auto;
}

.c-hero__lead {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.92);
  max-width: 34ch;
}

.c-hero__cta {
  margin-top: 24px;
  align-self: stretch;
}

@media (min-width: 730px) {
  /* Tablet/desktop: no dedicated Figma reference yet, so this keeps the
     original layout — image as a full-bleed background behind the
     overlaid text column. Switches at 730px rather than the usual 600px
     tablet breakpoint: below that, the image isn't wide enough yet for
     text and image to coexist and the hero title overlaps the speaker
     graphic — the stacked mobile layout holds until there's room. */
  .c-hero {
    padding: 96px var(--side-padding) 64px;
    background: var(--gradient-brand);
  }

  .c-hero__media {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    /* Caps how wide (and, via object-fit: cover further down, how zoomed-in
       and mis-cropped) the image gets on ultra-wide screens — beyond this,
       .c-hero's own gradient background shows on either side instead of
       the image stretching further. Below this width, same as full-bleed
       (inset: 0) since width: 100% already fills the viewport. */
    max-width: 1920px;
    aspect-ratio: auto;
    z-index: 0;
  }

  .c-hero__media img {
    opacity: 0.9;
  }

  .c-hero__content {
    position: relative;
    z-index: 1;
    padding: 0;
    /* Width comes from .c-container--wide (1282px); unlike the rest of the
       page this column is not centered — it sits flush against .c-hero's own
       padding, so no margin-inline or padding-inline of its own. */
    margin-inline: 0;
    /* Desktop: the image is a full-bleed background behind this column, so
       the gradient belongs on .c-hero instead (see above). */
    background: none;
  }

  .c-hero__cta {
    /* .c-hero__content is a column flexbox, which stretches children to
       its full width by default — pull the button back to its own
       content width. */
    align-self: flex-start;
  }

  .c-hero__title {
    font-size: 56px;
  }
  .c-hero__lead {
    font-size: 16px;
  }
}

@media (min-width: 1024px) {
  .c-hero {
    padding-top: 232px;
    padding-bottom: 120px;
    min-height: 820px;
    /* .c-hero's own padding-inline is a fixed value, so on very wide
       screens it drifts out of alignment with .c-nav above it, which
       re-centers itself (margin-inline: auto) once past its max-width.
       Hand the inset to .c-hero__content's own container behavior instead
       (below), so both use the same computed centering as .c-nav. */
    padding-inline: 0;
  }

  .c-hero__content {
    padding-inline: var(--side-padding);
    margin-inline: auto;
  }

  .c-hero__eyebrow {
    font-size: 18px;
  }
  .c-hero__title {
    font-size: 88px;
  }
  .c-hero__lead {
    font-size: 18px;
    max-width: 32ch;
  }
}

/* ---- Section heading pattern ---------------------------------------------*/
.c-section {
  /* Horizontal inset comes from the inner .c-container, same as .c-footer —
     padding-inline here too would double up with it and shrink the
     container below its own max-width before centering ever kicks in. */
  padding-block: 64px;
}

/* Technology → Integration would otherwise be 64px + 64px = 128px apart
   (each section's own top/bottom padding stacking). Split 64px between
   them instead of the full double padding — see the 1024px+ override below
   for the same treatment at that breakpoint. */
#technology {
  padding-bottom: 32px;
}
#integration {
  padding-top: 32px;
}

.c-section__heading {
  font-size: 32px;
  letter-spacing: -0.02em;
  text-align: center;
  max-width: 240px;
  margin-inline: auto;
}

.c-section__lead {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  text-align: center;
  color: var(--color-heading);
  margin-inline: auto;
}

@media (min-width: 600px) {
  .c-section__heading {
    max-width: none;
  }
}

@media (min-width: 1024px) {
  .c-section {
    padding-block: 112px;
  }
  /* Technology → Integration would otherwise be 112px + 112px = 224px apart
     (each section's own top/bottom padding stacking). Split 136px between
     them instead of the full double padding. */
  #technology {
    padding-bottom: 68px;
  }
  #integration {
    padding-top: 68px;
  }
  #contact {
    padding-block: 92px;
  }
  .c-section__heading {
    font-size: 48px;
  }
  .c-section__lead {
    font-size: 24px;
  }
}

/* ---- About / "It's time for a change" ------------------------------------*/
.c-about {
  text-align: center;
}

.c-about__intro {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}

.c-about__tagline {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-accent-strong);
  font-size: 18px;
  line-height: 1.3;
  max-width: 210px;
}

/* ul.c-features (not just .c-features): needs to out-specificity the
   ul[class] { margin: 0 } reset above, which otherwise wins and wipes out
   margin-top/margin-inline here regardless of source order. */
ul.c-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  margin-top: 56px;
  max-width: 900px;
  margin-inline: auto;
}

.c-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  min-width: 0;
}

.c-feature__icon {
  width: 48px;
  height: 48px;
}

.c-feature__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-heading);
  max-width: 140px;
}

.c-feature__desc {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--color-heading);
  max-width: 24ch;
}

@media (min-width: 600px) {
  .c-about__tagline {
    max-width: 360px;
  }
  ul.c-features {
    grid-template-columns: repeat(3, 1fr);
  }
  .c-feature__title {
    max-width: none;
  }
}

@media (min-width: 1024px) {
  .c-about__tagline {
    font-size: 26px;
    max-width: none;
  }
  ul.c-features {
    gap: 128px;
    max-width: none;
    margin-top: 92px;
  }
  .c-feature__icon {
    width: 64px;
    height: 64px;
  }
  .c-feature__title {
    font-size: 20px;
  }
  .c-feature__desc {
    font-size: 18px;
    max-width: none;
  }
}

/* ---- Statement banner -----------------------------------------------------*/
.c-statement {
  background: var(--gradient-brand);
  color: var(--color-white);
  text-align: center;
  /* Horizontal inset comes from the inner .c-container, same as .c-section —
     padding-inline here too would double up with it. */
  padding-block: 64px;
}

.c-statement .c-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.c-statement__eyebrow {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
}

.c-statement__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.25;
  color: var(--color-white);
  margin-inline: auto;
  padding-inline: 20px;
}

@media (min-width: 600px) {
  .c-statement__title {
    padding-inline: 0;
  }
}

@media (min-width: 1024px) {
  .c-statement {
    padding-block: 104px;
  }
  .c-statement__eyebrow {
    font-size: 24px;
  }
  .c-statement__title {
    font-size: 40px;
  }
}

/* ---- Technology: video teaser + technical facts --------------------------*/
.c-video {
  text-align: center;
}

.c-video__frame {
  position: relative;
  margin-top: 32px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--color-ink);
}

.c-video__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  transition: transform var(--transition-fast);
}

.c-video__play:hover {
  transform: translate(-50%, -50%) scale(1.05);
}

.c-video__play svg {
  width: 22px;
  height: 22px;
}

.c-video__cta {
  margin-top: 32px;
  display: flex;
  width: 100%;
}

@media (min-width: 600px) {
  .c-video__cta {
    display: inline-flex;
    width: auto;
  }
}

.c-facts {
  margin-top: 60px;
}

/* Zero out the gap when .c-video is commented out (see index.html), so
   .c-facts is the first thing in the container instead of sitting below it. */
.c-container > .c-facts:first-child {
  margin-top: 0;
}

@media (min-width: 600px) {
  .c-facts {
    margin-top: 64px;
  }
}

@media (min-width: 1024px) {
  .c-facts {
    margin-top: 136px;
  }
}

/* ul.c-facts__grid: see the note above ul.c-features for why this needs the
   element type in the selector (out-specificities the ul[class] reset). */
ul.c-facts__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 32px;
}

.c-fact-card {
  background: var(--color-cream-alt);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  /* Grid items default to a min-width based on their content's intrinsic size —
     without this, the card image's natural pixel width can force the whole
     grid (and page) wider than the viewport despite width:100% on the img. */
  min-width: 0;
}

.c-fact-card__media {
  width: 100%;
  aspect-ratio: 276 / 141;
  overflow: hidden;
  border-radius: 12px;
}

/* "Monitor all components" card: same box height as the other three cards
   (so all four titles line up on the same row), image just inset with
   padding to appear smaller instead of via a different aspect-ratio —
   changing the aspect-ratio instead would change this card's total height
   and throw off alignment with its siblings. */
.c-fact-card__media--compact {
  padding: 32px 32px 0;
}

.c-fact-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-fact-card__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  color: var(--color-heading);
  padding: 0 12px 16px;
}

@media (min-width: 1024px) {
  ul.c-facts__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
  .c-fact-card__title {
    font-size: 18px;
    padding: 0 16px 32px;
  }
}

/* ---- Integration -----------------------------------------------------------*/
.c-integration__body {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: center;
  color: var(--color-heading);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  margin-inline: auto;
}

.c-integration__media {
  /* margin: 48px auto 0;
  max-width: 900px; */
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: 48px;
  margin-bottom: 48px;
  padding-left: 8px;
  padding-right: 8px;
}

.c-integration__media img {
  width: 100%;
  height: auto;
  display: block;
}

@media (min-width: 600px) {
  .c-integration__media {
    margin-top: 80px;
    margin-bottom: 80px;
  }
}

@media (min-width: 1024px) {
  .c-integration__body {
    font-size: 24px;
  }
}

/* ---- FAQ accordion ----------------------------------------------------------*/
.c-faq {
  margin-top: 48px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.c-faq__item {
  background: var(--color-ink);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.c-faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: transparent;
  border: none;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  text-align: left;
  padding: 24px 16px;
}

.c-faq__icon-wrap {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.c-faq__icon-wrap img {
  width: 16px;
  height: 16px;
  transition: transform var(--transition-base);
}

.c-faq__question[aria-expanded="true"] .c-faq__icon-wrap img {
  transform: rotate(45deg);
}

.c-faq__answer {
  padding: 0 16px;
  max-height: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.8);
  font-size: 15px;
  line-height: 1.6;
  transition:
    max-height var(--transition-base),
    padding var(--transition-base);
}

.c-faq__answer[data-open="true"] {
  padding: 0 16px 24px;
  max-height: 400px;
}

@media (min-width: 1024px) {
  .c-faq__question {
    padding: 32px;
    font-size: 24px;
  }
  .c-faq__answer {
    padding: 0 32px;
  }
  .c-faq__answer[data-open="true"] {
    padding: 0 32px 32px;
  }
}

/* ---- Ecosystem diagram --------------------------------------------------------*/
.c-ecosystem {
  text-align: center;
}

.c-ecosystem__diagram-wrap {
  position: relative;
  margin-top: 32px;
  margin-inline: auto;
}

/* ul.c-ecosystem__diagram: see the note above ul.c-features. */
ul.c-ecosystem__diagram {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/* Card→hub connector lines. --desktop is tuned for the 4-column desktop
   grid, --col for the mobile 2-column grid, --col-3 for the 3-column
   tablet grid (see the HTML comments above the SVG) — each set only shows
   at its matching breakpoint. */
.c-ecosystem__connectors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: none;
}

.c-ecosystem__connectors line {
  stroke: var(--color-accent-strong);
  stroke-width: 4px;
  vector-effect: non-scaling-stroke;
}

.c-ecosystem__connector--desktop,
.c-ecosystem__connector--col,
.c-ecosystem__connector--col-3 {
  display: none;
}

@media (max-width: 599px) {
  .c-ecosystem__connectors {
    display: block;
  }
  .c-ecosystem__connector--col {
    display: block;
  }
}

@media (min-width: 600px) and (max-width: 1023px) {
  .c-ecosystem__connectors {
    display: block;
  }
  .c-ecosystem__connector--col-3 {
    display: block;
  }
}

@media (min-width: 1024px) {
  .c-ecosystem__connectors {
    display: block;
  }
  .c-ecosystem__connector--desktop {
    display: block;
  }
}

.c-ecosystem__card {
  position: relative;
  z-index: 1;
  background: var(--color-cream);
  border-radius: var(--radius-md);
  padding: 16px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  min-width: 0;
}

/* Icons aren't square (e.g. Firmware & Tools is taller/narrower than
   Speakers) — fix the height only and let width follow the icon's own
   aspect ratio, instead of stretching everything into a 32/56px square. */
.c-ecosystem__card-icon {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-ecosystem__card-icon img {
  height: 100%;
  width: auto;
}

.c-ecosystem__card-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  color: #2b2b2b;
}

.c-ecosystem__card-desc {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  color: var(--color-muted);
}

.c-ecosystem__hub {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  background: var(--color-hub);
  border-radius: var(--radius-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.c-ecosystem__hub img {
  height: 24px;
  width: auto;
}

/* Mobile + tablet: DOM order (Speakers…Hardware, Hub, Software) puts
   Software after the hub in both the 2-col (mobile) and 3-col (tablet)
   grids — at 1024px+ the hub's explicit span 2 + the 4-column grid already
   land it in the right spot via DOM order alone, so this shouldn't apply
   there. */
@media (max-width: 1023px) {
  .c-ecosystem__hub {
    order: 1;
  }
}

.c-ecosystem__hub span {
  font-family: var(--font-body);
  color: #9a9a9a;
  font-size: 15px;
}

.c-ecosystem__statement {
  margin-top: 48px;
  max-width: 900px;
  margin-inline: auto;
}

.c-ecosystem__statement p {
  margin-top: 24px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  color: var(--color-heading);
}

@media (min-width: 600px) {
  .c-ecosystem__statement {
    margin-top: 64px;
  }
  ul.c-ecosystem__diagram {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .c-ecosystem__statement {
    margin-top: 136px;
  }
  ul.c-ecosystem__diagram {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
  .c-ecosystem__card {
    padding: 32px;
    border-radius: var(--radius-lg);
  }
  .c-ecosystem__card-icon {
    height: 56px;
  }
  .c-ecosystem__card-title {
    font-size: 22px;
  }
  .c-ecosystem__card-desc {
    font-size: 17px;
  }
  .c-ecosystem__hub {
    grid-column: span 2;
    padding: 60px;
  }
  .c-ecosystem__hub img {
    height: 54px;
  }
  .c-ecosystem__hub span {
    font-size: 24px;
  }
  .c-ecosystem__statement p {
    font-size: 24px;
  }
}

/* ---- Team --------------------------------------------------------------------*/
.c-team {
  background: var(--color-cream);
  text-align: center;
}

.c-team__intro {
  margin: 24px auto 0;
}

/* ul.c-team__grid: see the note above ul.c-features. */
ul.c-team__grid {
  margin-top: 40px;
  display: grid;
  gap: 24px;
  max-width: 1176px;
  margin-inline: auto;
}

.c-team__card {
  background: var(--color-ink);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  text-align: left;
  color: var(--color-white);
  min-width: 0;
}

.c-team__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
}

.c-team__role {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--color-accent);
  margin-top: 2px;
}

.c-team__bio {
  margin-top: 12px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
}

@media (min-width: 700px) {
  ul.c-team__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- Contact / lead form --------------------------------------------------------*/
.c-contact {
  background: var(--gradient-brand);
  color: var(--color-white);
  text-align: center;
}

.c-contact__title {
  color: var(--color-white);
  margin-top: 16px;
}

.c-form {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: left;
  margin-inline: auto;
}

.c-form__row {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.c-form__grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.c-form__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.c-form__label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
}

.c-form__input,
.c-form__textarea {
  width: 100%;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-input-bg);
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-ink);
}

.c-form__textarea {
  min-height: 160px;
  resize: vertical;
}

/* Only highlight invalid fields after a submit attempt (main.js adds this class),
   never on first render — an empty required field is technically :invalid before
   the visitor has typed anything, and there's no placeholder to key off instead. */
.c-form.was-validated .c-form__input:invalid,
.c-form.was-validated .c-form__textarea:invalid {
  outline: 2px solid #ffd7c9;
}

.c-form__consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.5;
}

.c-form__consent input {
  /* Native checkbox chrome (incl. its default black border) can't be
     restyled directly — appearance:none hands us a blank box to draw
     the border-radius/background/checkmark ourselves instead. */
  appearance: none;
  -webkit-appearance: none;
  /* Optically centers the 20px box against the label's first line
     (14px text, 1.5 line-height → ~21px line box) rather than its
     top edge. */
  margin-top: 0.5px;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 6px;
  background: var(--color-white);
  flex-shrink: 0;
  cursor: pointer;
  /* Centers the checkmark below via flexbox instead of guessed left/top
     offsets, so it stays centered regardless of the box's own size. */
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-form__consent input:checked::after {
  content: "";
  width: 5px;
  height: 9px;
  border: solid var(--color-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.c-form__consent a {
  text-decoration: underline;
}

.c-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.c-form__submit {
  align-self: flex-start;
}

@media (max-width: 599px) {
  .c-form__submit {
    margin-top: 40px;
    align-self: stretch;
  }
}

.c-form__status {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  display: none;
}

.c-form__status[data-state="success"] {
  display: block;
  background: rgba(255, 255, 255, 0.92);
  color: #1b6b2d;
}

.c-form__status[data-state="error"] {
  display: block;
  background: rgba(255, 255, 255, 0.92);
  color: #a5330f;
}

@media (min-width: 800px) {
  .c-form__row--split {
    flex-direction: row;
  }
  .c-form__row--split .c-form__group {
    flex: 1;
  }

  /* Name/E-Mail/Company/Phone stack in column 1; Message is placed explicitly
     in column 2 spanning all 4 rows, so it matches that stack's full height
     (grid items stretch to fill their area by default) — the other four
     fields are left to auto-place into column 1's now-only-available cells. */
  .c-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 24px;
  }
  .c-form__group--full {
    grid-column: 2;
    grid-row: 1 / span 4;
    display: flex;
    flex-direction: column;
  }
  .c-form__group--full .c-form__textarea {
    flex: 1;
    min-height: 0;
  }
}

/* ---- Footer ---------------------------------------------------------------------*/
.c-footer {
  background: var(--color-ink);
  color: rgba(255, 255, 255, 0.72);
  /* Horizontal inset comes from the inner .c-container (same as every other
     section) — padding here is vertical only, or it'd be applied twice. */
  padding-block: 32px;
}

@media (min-width: 600px) {
  .c-footer {
    padding-block: 48px;
  }
}

.c-footer__grid {
  display: grid;
  gap: 32px;
}

.c-footer__logo img {
  height: 24px;
  width: auto;
}

.c-footer__heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.09em;
  color: var(--color-accent);
  text-transform: uppercase;
  margin-bottom: 14px;
}

.c-footer__col p,
.c-footer__col a {
  font-size: 15px;
  line-height: 1.45;
  display: block;
}

.c-footer__col address {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.c-footer__col a {
  text-decoration: none;
}

.c-footer__col a:hover {
  text-decoration: underline;
}

/* Only the Legal Notice column has two links directly one after another;
   this leaves the single-link Contact column untouched. */
.c-footer__col a + a {
  margin-top: 8px;
}

.c-footer__link-button {
  display: block;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  line-height: 1.45;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.c-footer__link-button:hover {
  text-decoration: underline;
}

.c-footer__bottom {
  margin-top: 32px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  text-align: left;
}

@media (min-width: 700px) {
  .c-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .c-footer {
    padding-block: 72px;
  }
  .c-footer__grid {
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
  }
  .c-footer__bottom {
    text-align: right;
  }
}

/* ---- Cookie consent banner ---------------------------------------------------------*/
html.has-consent-open {
  overflow: hidden;
}

/* overflow:hidden alone doesn't stop touch-drag scrolling on iOS Safari;
   pinning the body with position:fixed (top offset set in JS to the saved
   scroll position) is what actually locks it there. */
html.has-consent-open body {
  position: fixed;
  left: 0;
  right: 0;
  overflow: hidden;
}

.c-consent-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.5);
}

.c-consent-backdrop[hidden] {
  display: none;
}

.c-consent {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 1000;
  background: var(--color-white);
  color: var(--color-ink);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 460px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* iOS Safari can fail to paint descendants (e.g. the close icon) inside an
     element that combines position:fixed + border-radius + overflow-y:auto
     until the next repaint; forcing its own compositing layer avoids it. */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

@media (min-width: 1024px) {
  .c-consent {
    max-width: 675px;
  }
}

.c-consent[hidden] {
  display: none;
}

.c-consent p {
  font-size: 14px;
  line-height: 1.5;
}

.c-consent__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.c-consent__title {
  font-size: 20px;
  letter-spacing: -0.01em;
  margin: 0;
}

.c-consent__close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--color-cream);
  color: var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.c-consent__close svg {
  width: 14px;
  height: 14px;
}

.c-consent__close:hover {
  background: var(--color-cream-alt);
}

.c-consent__categories {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 0;
  padding: 0;
  margin: 0;
}

.c-consent__categories[hidden] {
  display: none;
}

.c-consent__category {
  background: var(--color-cream-alt);
  border-radius: 10px;
  padding: 14px 16px;
}

.c-consent__category-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.c-consent__category-label {
  font-size: 14px;
  font-weight: 700;
}

.c-consent__category-control {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.c-consent__always-on {
  font-size: 12px;
  font-weight: 700;
  color: #379729;
}

/* ---- Toggle switch --------------------------------------------------------*/
.c-consent__switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 34px;
  height: 16px;
  cursor: pointer;
}

.c-consent__switch input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.c-consent__switch-track {
  position: absolute;
  inset: 0;
  background: #9a9797;
  border-radius: 8px;
  transition: background var(--transition-fast);
}

.c-consent__switch-track::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-white);
  transition: transform var(--transition-fast);
}

.c-consent__switch input:checked + .c-consent__switch-track {
  background: #36b124;
}

.c-consent__switch input:checked + .c-consent__switch-track::before {
  transform: translateX(18px);
}

.c-consent__switch input:focus-visible + .c-consent__switch-track {
  outline: 3px solid var(--color-accent-strong);
  outline-offset: 2px;
}

/* ---- Per-category "more information" dropdown -----------------------------*/
.c-consent__chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  color: var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.c-consent__chevron[aria-expanded="true"] {
  transform: rotate(180deg);
}

.c-consent__category-desc {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--color-muted);
}

.c-consent__category-desc[hidden] {
  display: none;
}

.c-consent__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.c-consent__actions .c-btn {
  flex: 1 1 auto;
  font-size: 14px;
  padding: 12px 20px;
}

.c-consent__actions .c-btn[hidden] {
  display: none;
}

.c-consent__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 16px;
  font-size: 13px;
  text-align: center;
}

.c-consent__links a {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.c-btn--dark {
  background: var(--color-ink);
  color: var(--color-white);
}

/* ---- Cookie settings re-open icon (floating, shown once a decision is made) --------*/
.c-consent-fab {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 999;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.c-consent-fab[hidden] {
  display: none;
}

.c-consent-fab:hover {
  transform: translateY(-2px);
}

.c-consent-fab img {
  width: 20px;
  height: 24px;
  display: block;
}

/* ---- Legal pages (Impressum / Datenschutz) --------------------------------------*/
.c-legal {
  padding: 64px var(--side-padding) 96px;
  max-width: calc(var(--container-width) + 2 * var(--side-padding));
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .c-legal {
    padding-top: 120px;
  }
}

.c-legal h1 {
  font-size: 32px;
  margin-bottom: 24px;
}

.c-legal h2 {
  font-size: 28px;
  margin-top: 48px;
  margin-bottom: 16px;
}

.c-legal p,
.c-legal li {
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-body);
}

.c-legal ul {
  margin-top: 8px;
}
.c-legal li {
  margin-bottom: 6px;
}

.c-legal__back {
  display: inline-flex;
  margin-bottom: 32px;
  font-weight: 600;
  text-decoration: underline;
}

.c-legal mark {
  background: rgba(221, 83, 39, 0.15);
  /* var(--color-accent-strong) on this background reads at ~3.2:1 — too low
     for WCAG AA. Darker, off-token shade fixes contrast while keeping the
     same warm hue. */
  color: #8a3212;
  padding: 0 4px;
  border-radius: 4px;
  font-weight: 600;
}

@media (min-width: 1024px) {
  .c-legal h1 {
    font-size: 40px;
  }

  .c-legal h2 {
    font-size: 48px;
  }

  .c-legal h3 {
    font-size: 24px;
  }
}

.c-legal h3 {
  font-size: 18px;
  margin-top: 28px;
  margin-bottom: 8px;
}

.c-legal__back + .c-legal__back {
  margin-left: 16px;
}

.c-legal__lang-btn {
  display: inline-flex;
  margin-top: 32px;
}

.c-legal__lang-btn:first-child {
  margin-top: 0;
}

@media (min-width: 1024px) {
  .c-legal__lang-btn {
    margin-top: 62px;
  }

  .c-legal__lang-btn:first-child {
    margin-top: 0;
  }
}

/* Legal pages (Imprint / Privacy Policy) reuse .c-hero but are far shorter
   than the homepage hero — no min-height/large top offset needed since
   there's no media image behind the title. */
.c-hero--compact {
  min-height: auto;
}

/* Unlike the homepage hero, .c-hero--compact has no media image to sit
   between the fixed header and the title, so on mobile the header
   overlaps the h1 unless the content gets its own top clearance here. */
@media (max-width: 729px) {
  .c-hero--compact .c-hero__content {
    padding-top: 112px;
  }
}

@media (min-width: 1024px) {
  .c-hero--compact {
    padding-top: 160px;
    padding-bottom: 64px;
    min-height: auto;
  }
}

.c-btn--black {
  background: var(--color-ink);
  color: var(--color-white);
}