:root {
  /* Accent colour used across both pages. Change it here only. */
  --accent: #E8590C;
}

html { scroll-behavior: smooth; }
body { margin: 0; background: #F4F3EF; }

a { color: #16171A; }
a:hover { color: #55575C; }

/* Anchored sections stop clear of the top edge when jumped to. */
section[id] { scroll-margin-top: 16px; }

:focus-visible {
  outline: 3px solid #1F6FEB;
  outline-offset: 2px;
}

#partner-form [aria-invalid="true"] { border-color: #A8320A !important; }
#partner-form button[disabled] { opacity: 0.6; cursor: progress; }

[hidden] { display: none !important; }

/* ---- Buttons lift slightly under the pointer ---------------------------- */
a[href="#partner"][style*="min-height"],
#partner-form button[type="submit"] {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
a[href="#partner"][style*="min-height"]:hover,
#partner-form button[type="submit"]:hover:not([disabled]) {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -14px rgba(22, 23, 26, 0.6);
}
a[href="#partner"][style*="min-height"]:active,
#partner-form button[type="submit"]:active { transform: translateY(0); box-shadow: none; }

/* ---- Header stays in reach on wide screens ------------------------------ */
@media (min-width: 900px) {
  header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(244, 243, 239, 0.86);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    backdrop-filter: saturate(1.4) blur(12px);
    transition: box-shadow 0.25s ease;
  }
  header.is-stuck { box-shadow: 0 12px 30px -24px rgba(22, 23, 26, 0.55); }
  section[id] { scroll-margin-top: 92px; }
}

/* ---- Ticker of test tasks under the hero -------------------------------- */
.ticker {
  background: #16171A;
  color: #F4F3EF;
  overflow: hidden;
}
.ticker-track {
  display: flex;
  width: max-content;
  padding: 16px 0;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  will-change: transform;
}
.ticker-track span {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  padding-right: 28px;
}
.ticker-track span::after {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  background: var(--accent);
}

/* ---- Robot marker on the site plan -------------------------------------- */
.plan-robot {
  position: absolute;
  left: 0;
  top: 0;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  background: var(--accent);
  box-shadow: 0 0 0 3px #16171A;
  z-index: 2;
  pointer-events: none;
  visibility: hidden;
}
.plan-robot i {
  position: absolute;
  inset: 0;
  border: 2px solid var(--accent);
  opacity: 0;
}
.rec-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-radius: 50%;
  background: #FF5A4E;
}

/* ---- Phones ---------------------------------------------------------------
   The page layout is fluid already; this tightens spacing, trims the header
   to logo + language, and pins the main call-to-action to the bottom edge. */
.mobile-cta { display: none; }

/* Tablets and phones: the header keeps the logo, the language switch and
   the main button on one row; the section links are dropped. */
@media (max-width: 899px) {
  header > div { flex-wrap: nowrap !important; }
  header nav { flex-wrap: nowrap !important; }
  header nav a[href^="#"]:not([href="#partner"]) { display: none !important; }
  header nav a[href="#partner"] { white-space: nowrap; }
}

@media (max-width: 720px) {
  section > div { padding-top: 64px !important; padding-bottom: 64px !important; }
  #top > div { padding-top: 36px !important; padding-bottom: 56px !important; gap: 40px !important; }
  #top p[style*="19px"] { font-size: 17px !important; }
  #partner > div { gap: 36px !important; }

  /* Site plan: two zones per row instead of one tall zone per row. */
  #top figure > div:nth-child(2) > div > div[style*="min-height"] {
    flex: 1 1 140px !important;
    min-height: 148px !important;
    padding: 14px !important;
    gap: 32px !important; /* leaves a clear band for the robot marker */
  }
  #top figure > div:nth-child(2) > div > div[style*="min-height"] > div:first-child > span:first-child {
    font-size: 32px !important;
  }
  #partner-form, #partner-success { padding: 24px 18px !important; }

  header > div { padding-top: 12px !important; padding-bottom: 12px !important; }
  header nav a[href="#partner"] { display: none !important; }
  header nav a[hreflang] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid #CFCCC4;
    border-radius: 2px;
  }

  .mobile-cta {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    background: var(--accent);
    color: #16171A;
    font-family: Inter, 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 2px;
    box-shadow: 0 14px 30px -12px rgba(22, 23, 26, 0.65);
    transform: translateY(calc(100% + 32px));
    visibility: hidden;
    transition: transform 0.3s ease, visibility 0s linear 0.3s;
  }
  .mobile-cta:hover { color: #16171A; }
  .mobile-cta.is-visible {
    transform: none;
    visibility: visible;
    transition: transform 0.3s ease, visibility 0s;
  }
  /* Room for the pinned button so it never covers the footer. */
  footer > div { padding-bottom: 96px !important; }
}

/* ---- Motion --------------------------------------------------------------
   The `anim` class is set by a tiny script in <head> only when motion is
   welcome; it hides the hero for the instant before its entrance plays.
   The script removes the class by itself if the animation code never loads. */
html.anim #top > div > div:first-child > *,
html.anim #top figure { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  a[href="#partner"][style*="min-height"],
  #partner-form button[type="submit"] { transition: none; }
  .mobile-cta, .mobile-cta.is-visible { transition: none; }
}