/* ===== tokens.css ===== */
/* ==========================================================================
   Headx Monitor — Design Tokens
   Extracted from Figma: fmBCgcbqaPy53WQFUS5WWa / node 2030:76 ("white")
   Source frame: 1920 x 12471
   ========================================================================== */

:root {
  /* ---- Type families ------------------------------------------------- */
  /* SF Pro Display is not web-licensed; this stack resolves to it on Apple
     platforms and falls back to close grotesques elsewhere. */
  --ff-display: "SF Pro Display", -apple-system, BlinkMacSystemFont,
    "Segoe UI Variable Display", "Segoe UI", Inter, system-ui, sans-serif;
  --ff-poppins: Poppins, var(--ff-display);

  /* ---- Type scale (design px @ 1920) --------------------------------- */
  --fs-h1: 70px;   --lh-h1: 82px;
  --fs-h2: 55px;   --lh-h2: 68px;
  --fs-h3: 50px;   --lh-h3: 60px;
  --fs-h4: 35px;   --lh-h4: 44px;
  --fs-h5: 32px;   --lh-h5: 40px;
  --fs-lead: 28px; --lh-lead: 40px;
  --fs-xl: 24px;
  --fs-lg: 22px;
  --fs-md: 20px;
  --fs-base: 18px;
  --fs-sm: 16px;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- Ink ----------------------------------------------------------- */
  --c-ink: #0a0c12;
  --c-ink-2: #001233;
  --c-ink-3: #0f172a;
  --c-body: #54575a;
  --c-body-2: #535355;
  --c-slate: #55586a;
  --c-muted: #5a5a5a;
  --c-muted-2: #737373;
  --c-on-dark: #ffffff;
  --c-on-dark-dim: #ccc8c8;
  --c-line: #e3e7e6;
  --c-line-dark: rgba(37, 42, 44, 0.2);

  /* ---- Brand --------------------------------------------------------- */
  --c-green: #098b2d;
  --c-green-600: #239b44;
  --c-green-500: #269c43;
  --c-green-bright: #09ce3f;
  --c-lime: #428b0a;
  --c-lime-bright: #5fd01e;
  --c-teal: #0092ba;
  --c-teal-bright: #1bbce4;
  --c-blue: #0c89ea;
  --c-blue-600: #1673bb;
  --c-blue-700: #06548f;

  /* ---- Surfaces ------------------------------------------------------ */
  --s-white: #ffffff;
  --s-hero: #001923;
  --s-monitor: #000b2a;
  --s-monitor-2: #001129;
  --s-monitor-3: #00091c;
  --s-remote: #001414;
  --s-remote-2: #001d1c;
  --s-trust: #e9f0ed;
  --s-security: #f4faff;
  --s-faq: #f3f7f5;
  --s-soft: #f7f7f7;
  --s-cta: #044254;
  --s-pill: #eaf1eb;
  --s-card-dark: #1d3f44;

  /* ---- Gradients ----------------------------------------------------- */
  --g-brand: linear-gradient(90deg, #0092ba 0%, #428b0a 100%);
  --g-brand-rev: linear-gradient(90deg, #428b0a 0%, #0092ba 100%);
  --g-accent: linear-gradient(90deg, #09ce3f 0%, #0c89ea 100%);
  --g-accent-2: linear-gradient(90deg, #5fd01e 0%, #1bbce4 100%);
  --g-green-blue: linear-gradient(90deg, #239b44 0%, #1673bb 100%);
  --g-green-blue-2: linear-gradient(90deg, #098b2d 0%, #1972b7 100%);
  --g-deep: linear-gradient(90deg, #098b2d 0%, #06548f 100%);
  --g-premium: linear-gradient(180deg, #0b7929 0%, #083e68 100%);
  --g-cta-band: linear-gradient(90deg, #05515e 0%, #214c04 100%);

  /* ---- Layout -------------------------------------------------------- */
  --design-w: 1920px;
  --container: 1440px;      /* cards, pricing, security, remote            */
  --container-wide: 1690px; /* footer                                      */
  --container-nav: 1790px;  /* header                                      */
  --gutter: 40px;

  /* ---- Radii --------------------------------------------------------- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 25px;
  --r-xl: 31px;
  --r-2xl: 41px;
  --r-pill: 100px;

  /* ---- Elevation ----------------------------------------------------- */
  --sh-card: 0 4px 24px rgba(10, 12, 18, 0.06);
  --sh-card-lg: 0 18px 50px rgba(10, 12, 18, 0.10);
  --sh-pop: 0 24px 60px rgba(10, 12, 18, 0.14);

  /* ---- Motion -------------------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 220ms;
}

/* Fluid down-scale of the display scale below the 1920 design width.
   Keeps the desktop composition intact while staying readable on laptops. */
@media (max-width: 1500px) {
  :root {
    --fs-h1: 56px; --lh-h1: 66px;
    --fs-h2: 44px; --lh-h2: 54px;
    --fs-h3: 40px; --lh-h3: 50px;
    --fs-lead: 22px; --lh-lead: 34px;
    --fs-lg: 20px;
    --gutter: 32px;
  }
}

@media (max-width: 1024px) {
  :root {
    --fs-h1: 44px; --lh-h1: 54px;
    --fs-h2: 36px; --lh-h2: 46px;
    --fs-h3: 32px; --lh-h3: 42px;
    --fs-h4: 28px; --lh-h4: 36px;
    --fs-h5: 24px; --lh-h5: 32px;
    --fs-lead: 19px; --lh-lead: 30px;
    --fs-xl: 20px;
    --fs-lg: 18px;
    --fs-md: 17px;
    --fs-base: 16px;
    --gutter: 24px;
  }
}

@media (max-width: 640px) {
  :root {
    --fs-h1: 34px; --lh-h1: 42px;
    --fs-h2: 28px; --lh-h2: 36px;
    --fs-h3: 26px; --lh-h3: 34px;
    --fs-h4: 22px; --lh-h4: 30px;
    --fs-h5: 20px; --lh-h5: 28px;
    --fs-lead: 17px; --lh-lead: 27px;
    --gutter: 20px;
  }
}

/* ===== base.css ===== */
/* ==========================================================================
   Headx Monitor — Reset, typography primitives and shared building blocks
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--s-white);
  color: var(--c-ink);
  font-family: var(--ff-display);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; }

:focus-visible {
  outline: 2px solid var(--c-teal);
  outline-offset: 3px;
  border-radius: 4px;
}

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

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: var(--container-wide); }
.container--nav  { max-width: var(--container-nav); }

.section { position: relative; overflow: hidden; }
.section__inner { position: relative; z-index: 1; }

/* Decorative artwork that sits behind a section's content */
.section__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.section__bg img,
.section__bg svg { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

.h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-bold); letter-spacing: -0.01em; }
.h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-bold); letter-spacing: -0.01em; }
.h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-bold); letter-spacing: -0.01em; }
.h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-bold); }
.h5 { font-size: var(--fs-h5); line-height: var(--lh-h5); font-weight: var(--fw-bold); }

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-weight: var(--fw-light);
}

/* Section heading block: centred title + supporting line */
.section-head { text-align: center; }
.section-head__title { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-bold); }
.section-head__sub {
  margin-top: 14px;
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  color: var(--c-body);
}
.section--dark .section-head__sub { color: rgba(255, 255, 255, 0.82); }

/* Gradient-filled words inside headings */
.grad,
.grad-accent { -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad-accent { background-image: var(--g-accent); }
.grad-brand  { background-image: var(--g-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad-deep   { background-image: var(--g-deep);  -webkit-background-clip: text; background-clip: text; color: transparent; }

.t-green { color: var(--c-green); }
.t-teal  { color: var(--c-teal); }
.t-blue  { color: var(--c-blue-600); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 17px 30px;
  border-radius: var(--r-sm);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: 1;
  white-space: nowrap;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--brand { background-image: var(--g-brand); color: #fff; }
.btn--brand:hover { box-shadow: 0 10px 26px rgba(0, 146, 186, 0.35); }

.btn--light { background: #fff; color: var(--c-green); font-weight: var(--fw-bold); }
.btn--light:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16); }

.btn--dark { background: var(--c-ink); color: #fff; font-weight: var(--fw-bold); }

.btn--outline {
  border: 1px solid var(--c-ink);
  color: var(--c-ink);
  font-weight: var(--fw-bold);
}
.btn--outline:hover { background: var(--c-ink); color: #fff; }

.btn--pill { border-radius: var(--r-pill); padding: 17px 26px; }

.btn__icon { width: 20px; height: 20px; flex: none; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
  background: #fff;
  border-radius: var(--r-md);
  box-shadow: var(--sh-card);
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.icon { flex: none; object-fit: contain; }
.stack-center { display: flex; flex-direction: column; align-items: center; }

/* ===== sections/00-nav.css ===== */
/* ==========================================================================
   00 — Site header / primary navigation
   Figma: y 0–93 of the 1920 frame. White bar, logo left, links + auth pills
   right. The bar itself is fixed; the section root stands in as its spacer so
   the following sections are never covered.
   ========================================================================== */

.s-nav {
  height: 93px; /* stands in for the fixed bar so nothing sits under it */
}

/* Compound selector so it beats .section's own overflow regardless of load order. */
.section.s-nav {
  overflow: visible;
}

.s-nav__bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: var(--s-white);
}

.s-nav__row {
  /* --container-nav (1790) is the *content* width in Figma: the logo sits at
     x=65 and the CTA ends at x=1855 in the 1920 frame. .container adds a
     --gutter of padding inside its max-width, so the box has to grow by two
     gutters for the content edges to land where the reference has them. */
  max-width: calc(var(--container-nav) + var(--gutter) * 2);
  position: relative; /* containing block for the mobile drawer */
  display: flex;
  align-items: center;
  gap: 40px;
  height: 93px;
}

/* ---- Logo ---------------------------------------------------------------- */

.s-nav__logo {
  flex: none;
  display: block;
}
.s-nav__logo img {
  width: 120px;
  height: 50px; /* 717x299 source -> 120x50.04; contain absorbs the rounding */
  object-fit: contain;
}

/* ---- Link + action group -------------------------------------------------- */

.s-nav__panel {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-left: auto;
}

.s-nav__links {
  display: flex;
  align-items: center;
  gap: 60px;
}
/* Figma places "Features Pricing FAQs" as one text run with "Blog" dropped in
   between, so the row reads 60 / 60 / 45 rather than an even rhythm. Pulling
   the last item back reproduces the reference spacing. */
.s-nav__links li:last-child {
  margin-left: -15px;
}

.s-nav__link {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--c-ink);
  transition: color var(--dur) var(--ease);
}
.s-nav__link:hover {
  color: var(--c-teal);
}

.s-nav__actions {
  display: flex;
  align-items: center;
  gap: 18px; /* reference: Login ends x=1674, CTA starts x=1692 */
}

/* ---- Auth pills ----------------------------------------------------------- */

/* Reference pill boxes: Login 112x58 (x 1562-1674), Get Started 163x58
   (x 1692-1855). 18px side padding + 24px icon + 10px gap reproduces both;
   the min-widths below are the floor if the fallback font runs narrow. */
.s-nav__login,
.s-nav__cta {
  height: 58px;
  padding: 0 18px;
  gap: 10px;
}

.s-nav__login {
  min-width: 112px;
  background: var(--s-pill);
  color: var(--c-ink);
  font-weight: var(--fw-regular);
}
.s-nav__login:hover {
  box-shadow: 0 10px 22px rgba(10, 12, 18, 0.12);
}

.s-nav__cta {
  min-width: 163px;
}

.s-nav__ico {
  width: 24px;
  height: 24px;
  flex: none;
}
.s-nav__ico img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---- Hamburger (geometric chrome, drawn in CSS) --------------------------- */

.s-nav__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-left: auto;
  border-radius: var(--r-sm);
  background: var(--s-pill);
}

.s-nav__burger-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 22px;
  height: 16px;
}

.s-nav__burger-bar {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--c-ink);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.s-nav__burger[aria-expanded="true"] .s-nav__burger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.s-nav__burger[aria-expanded="true"] .s-nav__burger-bar:nth-child(2) {
  opacity: 0;
}
.s-nav__burger[aria-expanded="true"] .s-nav__burger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1500px) {
  .s-nav__links { gap: 34px; }
  .s-nav__links li:last-child { margin-left: 0; } /* even rhythm once tightened */
  .s-nav__panel { gap: 30px; }
  .s-nav__actions { gap: 14px; }
}

/* Below this width the links + pills collapse into a drawer. */
@media (max-width: 1024px) {
  .s-nav,
  .s-nav__row { height: 74px; }

  .s-nav__burger { display: inline-flex; }

  .s-nav__panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
    margin-left: 0;
    padding: 22px var(--gutter) 28px;
    background: var(--s-white);
    box-shadow: var(--sh-card-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
                visibility var(--dur) var(--ease);
  }
  .s-nav__panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .s-nav__links {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .s-nav__link {
    display: block;
    padding: 12px 2px;
    font-size: var(--fs-md);
  }

  .s-nav__actions { gap: 12px; }
  .s-nav__login,
  .s-nav__cta { flex: 1 1 0; height: 54px; }
}

@media (max-width: 640px) {
  .s-nav,
  .s-nav__row { height: 68px; }

  .s-nav__logo img { width: 104px; height: 43px; }

  .s-nav__actions { flex-direction: column; align-items: stretch; }
  /* The column flips the main axis, so the `flex: 1 1 0` set at 1024 would
     become a vertical basis and squash the pills to their text height.
     flex: none hands the main size back to `height`. */
  .s-nav__login,
  .s-nav__cta { flex: none; width: 100%; height: 54px; }
}

/* ===== sections/01-hero.css ===== */
/* ==========================================================================
   01 — Hero
   Dark stage: wave artwork, trust badge, headline, lead, CTAs, floating
   customer portraits, and the top slice of the product dashboard.

   Vertical rhythm is tuned so the design's y-positions land exactly:
   badge 160 · h1 236 · lead 432 · buttons 564 · dashboard plate 813.
   ========================================================================== */

.s-hero {
  background: var(--s-hero);
  color: var(--c-on-dark);
  padding-top: 160px;
  padding-bottom: 0;
}

/* --------------------------------------------------------------------------
   Background artwork
   The artwork keeps its aspect ratio, is scaled to the full section width and
   anchored to the top (so the plate crops the bottom off), and is mirrored —
   green lobe right, magenta bottom-left. It is composited additively: in the
   render the waves only ever lift the flat surface, never darken it, and only
   by ~20/255, so the plate is screen-blended rather than laid over as paint.
   -------------------------------------------------------------------------- */

.s-hero .s-hero__bg {
  bottom: auto;
  height: 80%;
  max-height: 933px;
  opacity: 0.17;
  mix-blend-mode: screen;
}

.s-hero .s-hero__bg img {
  object-position: 50% 0;
  filter: saturate(0.9) contrast(1.2);
  transform: scaleX(-1);
  -webkit-mask-image: linear-gradient(180deg, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 84%, transparent 100%);
}

/* Particle burst that sparks off the first headline word. Same additive
   treatment; the contrast step crushes the export's near-black ground so the
   image's box does not read as a lighter rectangle. */
.s-hero__spark {
  position: absolute;
  z-index: 0;
  top: 292px;
  left: 33.1%;
  width: 340px;
  height: 226px;
  opacity: 0.62;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  filter: hue-rotate(105deg) saturate(1.5) contrast(3.2);
  pointer-events: none;
  user-select: none;
}

/* --------------------------------------------------------------------------
   Floating portraits
   Purely decorative chrome pinned to the outer edges of the stage, so they are
   positioned against the section box rather than participating in the flow.
   -------------------------------------------------------------------------- */

.s-hero__decor {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

.s-hero__avatar,
.s-hero__cursor { position: absolute; display: block; }

.s-hero__avatar {
  width: 124px;
  height: 124px;
  padding: 3px;
  border-radius: 50%;
  background: var(--s-white);
}

.s-hero__avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.s-hero__cursor { width: 38px; height: 39px; }
.s-hero__cursor img { width: 100%; height: 100%; }

.s-hero__avatar--tl { top: 134px; left: 11.77%; }
.s-hero__avatar--tr { top: 134px; right: 12.76%; }
.s-hero__avatar--bl { top: 531px; left: 6.15%; }
.s-hero__avatar--br { top: 531px; right: 6.15%; }

.s-hero__cursor--tl { top: 229px; left: 18.18%; transform: rotate(32deg); }
.s-hero__cursor--tr { top: 210px; right: 20.31%; transform: rotate(160deg); }
.s-hero__cursor--bl { top: 565px; left: 13.80%; transform: rotate(-18deg); }
.s-hero__cursor--br { top: 575px; right: 13.85%; transform: rotate(170deg); }

/* --------------------------------------------------------------------------
   Content column
   -------------------------------------------------------------------------- */

.s-hero .s-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 2;
}

/* ---- Trust badge ---- */

.s-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 4px 16px 4px 4px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.12);
  transition: background-color var(--dur) var(--ease);
}
.s-hero__badge:hover { background: rgba(255, 255, 255, 0.2); }

.s-hero__badge-disc {
  position: relative;
  display: block;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(9, 206, 63, 0.45);
}

.s-hero__badge-disc-bg {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.s-hero__badge-disc-glyph {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 10px;
  transform: translate(-50%, -50%);
}

.s-hero__badge-text {
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  color: var(--c-on-dark);
}

.s-hero__badge-arrow {
  display: block;
  width: 16px;
  height: 14px;
  flex: none;
}
.s-hero__badge-arrow img { width: 100%; height: 100%; }

/* ---- Headline + lead ---- */

.s-hero__title { margin-top: 32px; }
.s-hero__title-line { display: block; }

.s-hero__lead {
  margin-top: 32px;
  max-width: 1120px;
  color: rgba(255, 255, 255, 0.9);
}

/* ---- Calls to action ---- */

.s-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  margin-top: 52px;
}

.s-hero .s-hero__btn {
  min-width: 228px;
  padding: 21px 30px;
  gap: 14px;
  font-weight: var(--fw-bold);
}

.s-hero .s-hero__btn--demo { color: var(--c-green-500); }

.s-hero__btn-icon {
  display: block;
  width: 19px;
  height: 16px;
  flex: none;
}
.s-hero__btn-icon img { width: 100%; height: 100%; }

/* --------------------------------------------------------------------------
   Dashboard mockup
   A 1502-wide sage plate with a 31px lip holds a 1440-wide screen. Only the
   top 360px band sits in this section; the screen continues in section 02.
   The export carries its own photographic margin around the screen, so the
   image is scaled up and shifted to make that screen fill the plate exactly.
   -------------------------------------------------------------------------- */

.s-hero__mockup {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: calc(1502px + var(--gutter) * 2);
  margin: 189px auto 0;
  padding-inline: var(--gutter);
}

.s-hero__mockup-frame {
  position: relative;
  display: flex;
  aspect-ratio: 1502 / 360;
  padding: 2.06% 2.06% 0;
  border-radius: 34px 34px 0 0;
  background: #8ba991;
}

.s-hero__mockup-screen {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  border-radius: 30px 30px 0 0;
  background: var(--s-white);
}

.s-hero__mockup-img {
  display: block;
  width: 111.18%;
  max-width: none;
  margin: -4.89% 0 0 -5.59%;
}

/* Brand mark. The box also masks the stock screenshot's own sidebar wordmark,
   which is wider than the Headx lockup that replaces it. */
.s-hero__mockup-logo {
  position: absolute;
  top: 20.6%;
  left: 4.66%;
  width: 9.99%;
  height: 13.9%;
  background: #f7f7f7;
}

.s-hero__mockup-logo img {
  position: absolute;
  top: 14.8%;
  left: 3.6%;
  width: 64.3%;
  height: auto;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1500px) {
  .s-hero { padding-top: 124px; }

  .s-hero__spark { top: 236px; width: 260px; height: 173px; }

  .s-hero__avatar { width: 104px; height: 104px; }
  .s-hero__cursor { width: 32px; height: 33px; }

  .s-hero__avatar--tl { top: 108px; }
  .s-hero__avatar--tr { top: 108px; }
  .s-hero__avatar--bl { top: 444px; }
  .s-hero__avatar--br { top: 444px; }

  .s-hero__cursor--tl { top: 186px; left: 19.4%; }
  .s-hero__cursor--tr { top: 172px; right: 21.6%; }
  .s-hero__cursor--bl { top: 470px; left: 15.2%; }
  .s-hero__cursor--br { top: 480px; right: 15%; }

  .s-hero__title { margin-top: 26px; }
  .s-hero__lead { margin-top: 26px; max-width: 900px; }
  .s-hero__actions { margin-top: 44px; }
  .s-hero .s-hero__btn { min-width: 200px; padding: 18px 26px; }

  .s-hero__mockup { margin-top: 140px; }
  .s-hero__mockup-frame { border-radius: 28px 28px 0 0; }
  .s-hero__mockup-screen { border-radius: 24px 24px 0 0; }
}

@media (max-width: 1024px) {
  .s-hero { padding-top: 88px; }

  /* The portraits sit where the text now needs the room */
  .s-hero__decor { display: none; }

  .s-hero__spark { top: 200px; width: 200px; height: 133px; }

  .s-hero__badge { gap: 10px; padding: 4px 14px 4px 4px; }
  .s-hero__badge-disc { width: 30px; height: 30px; }
  .s-hero__badge-text { font-size: var(--fs-sm); }

  .s-hero__title { margin-top: 20px; }
  .s-hero__lead { margin-top: 20px; max-width: 720px; }
  .s-hero__actions { margin-top: 34px; gap: 20px; }
  .s-hero .s-hero__btn { min-width: 180px; padding: 16px 24px; }

  .s-hero__mockup { margin-top: 90px; }
  .s-hero__mockup-frame { border-radius: 20px 20px 0 0; }
  .s-hero__mockup-screen { border-radius: 16px 16px 0 0; }
}

@media (max-width: 640px) {
  .s-hero { padding-top: 64px; }

  .s-hero__spark { display: none; }

  .s-hero__badge { padding: 3px 12px 3px 3px; }
  .s-hero__badge-disc { width: 26px; height: 26px; }
  .s-hero__badge-text { font-size: 13px; }
  .s-hero__badge-arrow { width: 14px; height: 12px; }

  /* Let the two headline halves reflow as one paragraph */
  .s-hero__title-line { display: inline; }

  .s-hero__actions {
    gap: 14px;
    width: 100%;
    max-width: 320px;
    flex-direction: column;
  }
  .s-hero .s-hero__btn { width: 100%; min-width: 0; padding: 15px 20px; }

  .s-hero__mockup { margin-top: 56px; }
  .s-hero__mockup-frame { border-radius: 14px 14px 0 0; }
  .s-hero__mockup-screen { border-radius: 11px 11px 0 0; }
}

/* ===== sections/02-dashboard.css ===== */
/* ==========================================================================
   02 — Dashboard preview + client logo strip
   --------------------------------------------------------------------------
   The product shot is the exported screenshot assets/images/image6344837.jpg
   (2048 x 1536). The export carries a grey stage and a baked drop shadow
   around the app card; the design crops to the card itself and re-frames it
   in a mint plate.

   Geometry, measured off the Figma render (1920 frame, design px):

     mint plate        x 209 → 1710   (1501 wide), padding 31.5
     white app card    x 241 → 1679   (1438 wide), 1058.8 tall
     card in the export  x 102 → 1945 (1843), y 89 → 1446 (1357)
     plate height      1121.8; its top 360 is drawn by the hero section

   Everything below is expressed as a percentage of the mock's own width, so
   the whole screenshot scales proportionally at every viewport instead of
   re-flowing. Only the two corner radii need a length; they use cqw against
   the container established on .s-dashboard__mock.
   ========================================================================== */

.s-dashboard {
  background: var(--s-white);
  /* No top padding: the frame butts the hero, continuing its screenshot.
     No bottom padding either — the strip's tallest box (the square
     Searchology export) already carries the design's trailing whitespace. */
  padding-block: 0;
}

.s-dashboard__inner {
  width: 100%;
  max-width: calc(1609px + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --------------------------------------------------------------------------
   Product screenshot
   -------------------------------------------------------------------------- */

.s-dashboard__mock {
  max-width: 1501px;
  margin-inline: auto;
  overflow: hidden; /* clips the band the hero already draws */
  container-type: inline-size;
}

.s-dashboard__frame {
  margin-top: -24.077%;    /* -361.4 / 1501 — the band drawn by the hero */
  padding: 2.0986%;        /*   31.5 / 1501 */
  border-radius: 2.665cqw; /*     40 / 1501 */
  background: linear-gradient(180deg, #e6ffe0 0%, #dfedf0 100%);
}

/* The window is the export's own white app card. Its rounded corners are
   baked into the bitmap, so the clip radius matches them. */
.s-dashboard__window {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1843 / 1357;
  border-radius: 2.398cqw; /* 36 / 1501 */
  background: var(--s-white);
}

/* Crops the export down to the card: scale 2048/1843, origin (102, 89). */
.s-dashboard__shot {
  position: absolute;
  top: -6.559%;      /*  -89 / 1357 of the window height */
  left: -5.534%;     /* -102 / 1843 of the window width  */
  width: 111.123%;   /* 2048 / 1843 */
  max-width: none;
  height: auto;
}

/* --------------------------------------------------------------------------
   Client logo strip
   -------------------------------------------------------------------------- */

/* Widths are percentages of the 1609px design strip, so the six logos keep
   their Figma proportions and spacing at any width without wrapping. */
.s-dashboard__logos {
  --lk: 0.62; /* logo scale factor, tablet and below */
  display: flex;
  align-items: center;
  gap: 5.408%; /* 87 / 1609 */
  margin-top: 14px;
}

.s-dashboard__logo {
  flex: 0 0 auto;
  width: var(--w);
  display: flex;
  align-items: center;
  justify-content: center;
}

.s-dashboard__logo img {
  width: 100%;
  height: auto;
}

.s-dashboard__logo--connectionmodel { --w: 14.605%; }
.s-dashboard__logo--searchology     { --w: 11.125%; }
.s-dashboard__logo--grapefruit      { --w: 9.696%; }
.s-dashboard__logo--flyrise         { --w: 10.503%; }
.s-dashboard__logo--constellation   { --w: 15.289%; }

/* Source artwork stacks a light lock-up over a dark one (the dark panel
   starts 57.7% down); show only the light half, as the Figma fill is cropped. */
.s-dashboard__logo--alchemy {
  --w: 11.622%;
  aspect-ratio: 187 / 100;
  align-items: flex-start;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1500px) {
  .s-dashboard__logos { margin-top: 8px; }
}

@media (max-width: 1024px) {
  .s-dashboard { padding-bottom: 40px; }

  /* Percentage widths get too small here; lay the logos out on a grid. */
  .s-dashboard__logos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px 24px;
    margin-top: 28px;
  }
  .s-dashboard__logo { width: auto; }
  .s-dashboard__logo img { width: calc(var(--px) * var(--lk)); max-width: 100%; }

  .s-dashboard__logo--connectionmodel { --px: 235px; }
  .s-dashboard__logo--searchology     { --px: 179px; }
  .s-dashboard__logo--grapefruit      { --px: 156px; }
  .s-dashboard__logo--flyrise         { --px: 169px; }
  .s-dashboard__logo--constellation   { --px: 246px; }
  .s-dashboard__logo--alchemy {
    --px: 187px;
    aspect-ratio: auto;
    height: calc(100px * var(--lk));
  }
}

@media (max-width: 640px) {
  .s-dashboard__logos {
    --lk: 0.5;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 20px;
  }
}

/* ===== sections/03-trust.css ===== */
/* ==========================================================================
   03 — Trust
   Left: heading + lede, with a row of four stat cards below that runs past the
   text column and overlaps the artwork sitting on the right.

   Reference geometry (measured off the 1920x900 export):
     content band   198 .. 1722  -> 1524px wide, centred (not --container)
     artwork frame  1192..1722 x 117..787  -> 531 x 671, rx 78
     card row       198 .. 1307 x 455..728 -> 4 x 261 cards, 22px gutters
   ========================================================================== */

.s-trust {
  /* Flat green Figma uses at the foot of the stat-number fill; not a token. */
  --trust-stat-green: #2f8d3c;

  background: var(--s-trust);
  padding-block: 112px 117px;
}

.s-trust__inner {
  /* This section's Figma band is 1524px, wider than the shared --container
     (which tokens.css scopes to cards/pricing/security/remote). Same idiom as
     00-nav, 01-hero and 02-dashboard: widen the box by two gutters so the
     *content* lands on the Figma width. */
  max-width: calc(1524px + var(--gutter) * 2);

  display: grid;
  /* 531 / 1524 */
  grid-template-columns: minmax(0, 1fr) 34.85%;
  /* Row 2 is flexible so the artwork — which spans both rows and is taller
     than the text column — absorbs its surplus height *below* the card row
     instead of pushing the card row down. */
  grid-template-rows: auto 1fr;
  align-items: start;
}

/* --------------------------------------------------------------------------
   Intro
   -------------------------------------------------------------------------- */

.s-trust__intro {
  grid-column: 1;
  grid-row: 1;
  max-width: 645px; /* widest lede line in the reference measures 636px */
}

.s-trust__title { color: var(--c-ink); }

.s-trust__title-accent {
  background-image: var(--g-green-blue);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.s-trust__lede {
  margin-top: 26px;
  font-size: var(--fs-lg);
  line-height: 1.32;
  font-weight: var(--fw-regular);
  color: var(--c-body);
}

/* --------------------------------------------------------------------------
   Artwork
   -------------------------------------------------------------------------- */

.s-trust__media {
  grid-column: 2;
  grid-row: 1 / -1;
  position: relative;
  overflow: hidden;
  aspect-ratio: 531 / 671;
  /* 78px at the 1920 design width (== the rx of the Figma clipping mask,
     assets/icons/image6344843.svg), scaled down with the frame below that. */
  border-radius: clamp(28px, 4.9vw, 78px);
}

/* The source photograph is landscape but the frame shows it turned a quarter
   turn anticlockwise, so the element is sized in the frame's transposed axes:
   126.37% of the frame width == the frame height, 79.14% of the frame height
   == the frame width. Both hold at any size because the ratio is fixed above.

   object-position is measured in the *unrotated* image's axes. A centred cover
   crop sits 26px too low once rotated; 59.5% slides the window along the source
   so the lime band, the triangle and both cuffs land where the export has them
   (checked against the export at 531x671: edges within 1-2px). */
.s-trust__media-img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 126.37%;
  height: 79.14%;
  max-width: none;
  object-fit: cover;
  object-position: 59.5% 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
}

/* --------------------------------------------------------------------------
   Stat cards
   -------------------------------------------------------------------------- */

.s-trust__stats {
  grid-column: 1 / -1;
  grid-row: 2;
  position: relative; /* lifts the row above the artwork it overlaps */
  z-index: 1;
  width: 72.85%; /* 1110 / 1524 — runs 115px past the artwork's left edge */
  margin-top: 65px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.s-trust__stat {
  display: flex;
  flex-direction: column;
  padding: 22px 26px 38px;
  background: var(--s-white);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-card);
}

/* Figma fills the numerals with a vertical brand gradient whose stops land
   inside the cap height: teal at the cap line, green from the baseline down. */
.s-trust__stat-value {
  font-size: var(--fs-h3);
  line-height: 1.2;
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  background-image: linear-gradient(
    180deg,
    var(--c-teal) 20%,
    var(--trust-stat-green) 64%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.s-trust__stat-label {
  margin-top: 9px;
  font-size: var(--fs-md);
  line-height: 1.2;
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
}

.s-trust__stat-copy {
  margin-top: 44px;
  font-size: var(--fs-base);
  line-height: 1.4;
  font-weight: var(--fw-regular);
  color: var(--c-body-2);
}

/* Gradient text collapses to nothing when the UA overrides colours. */
@media (forced-colors: active) {
  .s-trust__title-accent,
  .s-trust__stat-value {
    background-image: none;
    color: CanvasText;
  }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1500px) {
  .s-trust { padding-block: 80px; }

  .s-trust__intro { max-width: 600px; }
  .s-trust__lede { margin-top: 20px; }

  .s-trust__stats {
    margin-top: 48px;
    gap: 18px;
  }
  .s-trust__stat { padding: 20px 22px 30px; }
  .s-trust__stat-copy { margin-top: 34px; }
}

/* Four cards across get cramped once the band drops below ~1200px of content,
   so let the row run the full width and give the overlap up. */
@media (max-width: 1280px) {
  .s-trust__stats {
    width: 84%;
    gap: 16px;
  }
  .s-trust__stat { padding: 18px 18px 24px; }
  .s-trust__stat-copy { margin-top: 24px; }
}

/* Below the laptop range the two columns stack: intro, artwork (shown in its
   native landscape orientation), then the cards as a 2-up grid. */
@media (max-width: 1024px) {
  .s-trust { padding-block: 64px; }

  .s-trust__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    row-gap: 40px;
  }

  .s-trust__intro,
  .s-trust__media,
  .s-trust__stats {
    grid-column: 1;
    grid-row: auto;
  }

  .s-trust__intro { max-width: 640px; }

  .s-trust__media {
    aspect-ratio: 16 / 9;
    border-radius: clamp(24px, 5vw, 48px);
  }
  .s-trust__media-img {
    position: static;
    width: 100%;
    height: 100%;
    object-position: 50% 50%;
    transform: none;
  }

  .s-trust__stats {
    width: 100%;
    margin-top: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  .s-trust__stat {
    padding: 20px 22px 26px;
    border-radius: var(--r-lg);
  }
  .s-trust__stat-copy { margin-top: 20px; }
}

@media (max-width: 640px) {
  .s-trust { padding-block: 48px; }

  .s-trust__inner { row-gap: 32px; }

  .s-trust__stats {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .s-trust__stat { padding: 18px 18px 20px; }
  .s-trust__stat-copy { margin-top: 14px; }
}

/* ===== sections/04-monitoring.css ===== */
/* ==========================================================================
   04 · Monitoring & Capture
   Dark band, centred head, 12 feature cells on a 4 x 3 grid separated by
   hairline rules. The rules are cell pseudo-elements rather than borders so
   they can be inset from the cell edges the way the Figma frame draws them.
   ========================================================================== */

.s-monitoring {
  /* --icon-k scales every icon at once on smaller viewports */
  --icon-k: 1;
  --rule: rgba(255, 255, 255, 0.14);

  padding-block: 116px 90px;
  color: var(--c-on-dark);
  background: linear-gradient(
    180deg,
    var(--s-monitor) 0%,
    var(--s-monitor-2) 48%,
    var(--s-monitor-3) 100%
  );
}

/* The wave plate is exported at 2:1 while the band is ~1.45:1 — stretching it
   keeps the full sweep in frame, where `cover` would crop both ends off. */
.s-monitoring .section__bg img { object-fit: fill; }

/* --------------------------------------------------------------------------
   Head
   -------------------------------------------------------------------------- */

/* Sampled off the reference: the word is filled from the --g-accent ramp
   (#09CE3F -> #0C89EA; the red channel holds at 9-12 across every letter, which
   rules out --g-accent-2). Figma's gradient handle is ~1.85x the width of the
   word and starts before it, so only the middle of the ramp is visible —
   #0AC25D at the C, #0B9CBA at the final e. Pushing the stops outside the text
   box reproduces that without hard-coding off-ramp colours. */
.s-monitoring__grad {
  background-image: linear-gradient(
    90deg,
    var(--c-green-bright) -33%,
    var(--c-blue) 152%
  );
}

.s-monitoring .section-head__sub {
  max-width: 900px;
  margin-inline: auto;
  color: rgba(255, 255, 255, 0.82);
}

/* --------------------------------------------------------------------------
   Grid
   -------------------------------------------------------------------------- */

.s-monitoring__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 72px;
}

.s-monitoring__cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 60px block padding puts the row pitch at 311px, matching the 311/313px
     spacing measured between the hairline rules in the reference. */
  padding: 60px 24px;
  text-align: center;
}

/* ::before = the vertical rule on the cell's right edge
   ::after  = the horizontal rule along its bottom edge
   Both fade out at the ends and are switched off per breakpoint by the
   --rule-right / --rule-bottom flags below. */
.s-monitoring__cell::before,
.s-monitoring__cell::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.s-monitoring__cell::before {
  top: 32px;
  right: 0;
  bottom: 32px;
  width: 1px;
  opacity: var(--rule-right, 1);
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--rule) 14%,
    var(--rule) 86%,
    transparent 100%
  );
}

.s-monitoring__cell::after {
  right: 30px;
  bottom: 0;
  left: 30px;
  height: 1px;
  opacity: var(--rule-bottom, 1);
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--rule) 12%,
    var(--rule) 88%,
    transparent 100%
  );
}

/* Outer edges of the 4-column grid carry no rule. */
.s-monitoring__cell:nth-child(4n) { --rule-right: 0; }
.s-monitoring__cell:nth-child(n + 9) { --rule-bottom: 0; }

/* --------------------------------------------------------------------------
   Cell content
   -------------------------------------------------------------------------- */

/* Fixed-height band so titles line up despite the icons' differing heights. */
.s-monitoring__media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(64px * var(--icon-k));
}

/* Every icon carries its own intrinsic ratio via --iw / --ih: the exported
   SVGs use preserveAspectRatio="none", so a square box would distort them. */
.s-monitoring__icon {
  display: block;
  width: calc(var(--iw) * var(--icon-k) * 1px);
  height: calc(var(--ih) * var(--icon-k) * 1px);
}

.s-monitoring__icon img { width: 100%; height: 100%; }

/* Ratios verified against the reference render: each icon's measured bounding
   box there matches exactly one exported SVG's intrinsic size. */
.s-monitoring__icon--screenshot { --iw: 39; --ih: 57; } /* vector8  */
.s-monitoring__icon--webcam     { --iw: 65; --ih: 64; } /* vector10 */
.s-monitoring__icon--audio      { --iw: 57; --ih: 56; } /* vector11 */
.s-monitoring__icon--keystroke  { --iw: 63; --ih: 48; } /* vector15 */
.s-monitoring__icon--replay     { --iw: 73; --ih: 59; } /* vector9  */
.s-monitoring__icon--ocr        { --iw: 72; --ih: 64; } /* vector14 */
.s-monitoring__icon--usage      { --iw: 47; --ih: 53; } /* vector13 */
.s-monitoring__icon--chip       { --iw: 54; --ih: 50; } /* vector12 */

.s-monitoring__title {
  margin-top: 24px;
  font-family: var(--ff-poppins);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: 1.5;
}

.s-monitoring__text {
  margin-top: 10px;
  /* holds the copy to the two-line break the design shows */
  max-width: 210px;
  font-family: var(--ff-poppins);
  font-size: var(--fs-base);
  font-weight: var(--fw-light);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.85);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1500px) {
  .s-monitoring { padding-block: 88px 68px; }
  .s-monitoring__grid { margin-top: 56px; }
  .s-monitoring__cell { padding: 50px 16px; }
  .s-monitoring__cell::before { top: 26px; bottom: 26px; }
  .s-monitoring__cell::after { right: 20px; left: 20px; }
}

@media (max-width: 1024px) {
  .s-monitoring { --icon-k: 0.9; }

  .s-monitoring__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* :nth-child(n+1) matches every cell — it only exists to re-arm the flags at
     the same specificity as the 4-column rules above before re-applying them
     for a 2-column layout. */
  .s-monitoring__cell:nth-child(n + 1) { --rule-right: 1; --rule-bottom: 1; }
  .s-monitoring__cell:nth-child(2n) { --rule-right: 0; }
  .s-monitoring__cell:nth-child(n + 11) { --rule-bottom: 0; }
}

@media (max-width: 640px) {
  .s-monitoring {
    --icon-k: 0.8;
    padding-block: 56px 72px;
  }

  .s-monitoring__grid {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 36px;
  }

  .s-monitoring__cell { padding: 30px 8px; }
  .s-monitoring__cell::after { right: 12px; left: 12px; }

  .s-monitoring__cell:nth-child(n + 1) { --rule-right: 0; --rule-bottom: 1; }
  .s-monitoring__cell:last-child { --rule-bottom: 0; }

  .s-monitoring__title { margin-top: 18px; }
  .s-monitoring__text { max-width: 260px; }
}

/* ===== sections/05-productivity.css ===== */
/* ==========================================================================
   05 — Productivity & Analytics
   White section: centred head, accordion + rail on the left, image
   composition (gradient stage, X mark, floating cards) on the right.
   Composition metrics are % of an 851 x 760 stage box taken from the frame.
   ========================================================================== */

.s-productivity {
  background: var(--s-white);
  padding-block: 126px 132px;
}

/* --- Head ---------------------------------------------------------------- */

/* The Figma sub-line is ink, not the muted default, and sits a touch lower. */
.s-productivity .section-head__sub {
  margin-top: 20px;
  color: var(--c-ink);
}

/* --- Two-column body ----------------------------------------------------- */

/* The Figma composition spans x 199-1775 (1576px): a 449px accordion, a 276px
   trough and the 851px image block. Squeezing that into the 1360px content box
   of `.container` collapses the trough to ~60px, which drags the X mark on top
   of the accordion rows. The body therefore rides the wider container and caps
   itself at the design width; `space-between` re-opens the trough. */
.s-productivity__grid {
  display: grid;
  grid-template-columns: minmax(0, 449px) minmax(0, 851px);
  justify-content: space-between;
  column-gap: 60px;
  align-items: start;
  max-width: 1576px;
  margin: 73px auto 0;
}

/* --- Accordion ----------------------------------------------------------- */

.s-productivity__accordion {
  display: grid;
  grid-template-columns: 3px minmax(0, 1fr);
  column-gap: 66px;
  margin-top: 26px;
}

.s-productivity__rail {
  border-radius: 2px;
  background: var(--c-line);
}

/* Sits over the track and is moved/sized by the accordion script. In the frame
   this is a short stub (99px) parked 119px into the open row, not a bar that
   spans it; the script keeps those proportions as it follows the open row.
   One-off artwork gradient with padded stops, sampled from the frame. */
.s-productivity__rail-marker {
  display: block;
  width: 5px;
  height: var(--pm-h, 99px);
  margin-left: -1px;
  border-radius: 3px;
  background: linear-gradient(180deg, #0b93a4 20%, #076a08 87%);
  transform: translateY(var(--pm-y, 119px));
  transition: height var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.s-productivity__item { border-bottom: 1px solid #d9d9d9; }

.s-productivity__heading { font: inherit; }

.s-productivity__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  /* Right padding lands the rotated chevron 8px clear of the hairline. */
  padding: 22px 10px 22px 0;
  text-align: left;
}

.s-productivity__label {
  font-size: var(--fs-lg);
  line-height: 1.2;
  font-weight: var(--fw-medium);
  color: var(--c-ink);
}

.s-productivity__chev {
  flex: none;
  width: 8px;
  height: 13.4px;
  transform: rotate(-90deg);
  transition: transform var(--dur) var(--ease);
}
.s-productivity__chev img { width: 100%; height: 100%; }

.s-productivity__trigger[aria-expanded="true"] .s-productivity__chev {
  transform: rotate(90deg);
}

.s-productivity__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
}
.s-productivity__item.is-open .s-productivity__panel { grid-template-rows: 1fr; }

.s-productivity__panel-inner {
  min-height: 0;
  overflow: hidden;
}

.s-productivity__copy {
  max-width: 350px;
  padding-bottom: 22px;
  font-size: var(--fs-base);
  line-height: 1.4;
  color: var(--c-body-2);
}

/* --- Image composition --------------------------------------------------- */

.s-productivity__media {
  display: grid;
  width: 100%;
  max-width: 851px;
  margin-left: auto;
}
.s-productivity__media > * { grid-area: 1 / 1; }

.s-productivity__stage {
  justify-self: start;
  align-self: start;
  width: 70.741%;
  aspect-ratio: 602 / 760;
  overflow: hidden;
  /* One-off artwork gradient — not part of the brand ramps in tokens.css. */
  background: linear-gradient(180deg, #cdf8d9 0%, #7b99af 100%);
}

/* Oversized on purpose: the stage crops the figure on all four sides. */
.s-productivity__person {
  width: 129.6%;
  max-width: none;
  margin: -8% 0 0 -14.1%;
}

.s-productivity__mark {
  justify-self: start;
  align-self: start;
  width: 21.93%;
  margin: 19.154% 0 0 -9.518%;
}

.s-productivity__cards {
  justify-self: end;
  align-self: start;
  width: 54.759%;
  margin-top: 23.502%;
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1500px) {
  .s-productivity { padding-block: 96px 100px; }

  /* The image block is free to shrink here, but the X mark still hangs 9.5% of
     it past its left edge — the trough has to stay wider than that overhang or
     the mark lands on the accordion hairlines. 100px clears it down to 1024. */
  .s-productivity__grid {
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    column-gap: 100px;
    margin-top: 56px;
  }

  .s-productivity__accordion { column-gap: 44px; }
}

@media (max-width: 1024px) {
  .s-productivity { padding-block: 72px 76px; }

  .s-productivity__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 56px;
    margin-top: 44px;
  }

  .s-productivity__accordion {
    column-gap: 32px;
    margin-top: 0;
  }

  /* Centred, with room reserved either side for the mark's overhang. */
  .s-productivity__media {
    max-width: min(760px, 100% - 160px);
    margin-inline: auto;
  }

  .s-productivity__copy { max-width: 46ch; }
}

@media (max-width: 640px) {
  .s-productivity { padding-block: 52px 56px; }

  .s-productivity__grid {
    row-gap: 40px;
    margin-top: 32px;
  }

  .s-productivity__accordion {
    grid-template-columns: 2px minmax(0, 1fr);
    column-gap: 18px;
  }

  .s-productivity__rail-marker { width: 4px; }

  /* Phones keep the full width and trade the overhang for stage size. */
  .s-productivity__media { max-width: 100%; }
  .s-productivity__mark { margin-left: -3%; }

  .s-productivity__trigger { padding-block: 17px; }

  .s-productivity__copy { padding-bottom: 18px; }
}

/* ===== sections/06-remote.css ===== */
/* ==========================================================================
   06 — Remote Control & Live Ops
   Dark teal band: centred head + a badge-rail / hub-tile / cards diagram.

   The diagram keeps its Figma proportions by measuring every piece of chrome
   in container-query width units (1cqw = 1% of .s-remote__diagram). Because
   the connector SVG is stretched over the same box, its endpoints stay glued
   to the badges and to the cards panel at every desktop width. Below 1024px
   the wires are dropped and the three parts simply stack.
   Diagram design box: 1433 x 663 (the SVG viewBox is in those units).
   ========================================================================== */

.s-remote {
  padding: 110px 0 116px;
  /* Near-flat base: in the design almost all of the lift comes from the big
     blurred ellipse below, not from the band itself. */
  background:
    linear-gradient(180deg, var(--s-remote) 0%, #001112 48%, #001617 100%);
  color: var(--c-on-dark);
}

/* --------------------------------------------------------------------------
   Head
   -------------------------------------------------------------------------- */

/* The design's run reads #09ce3f -> #0c89ea (both endpoints match --g-accent
   exactly on the red channel); --g-accent-2 starts far too limey. */
.s-remote__accent { background-image: var(--g-accent); }

.s-remote .section-head__sub {
  margin-top: 22px;
  color: rgba(255, 255, 255, 0.86);
}

/* --------------------------------------------------------------------------
   Decorative backdrop
   -------------------------------------------------------------------------- */

.s-remote__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.s-remote__glow {
  position: absolute;
  left: 52%;
  top: 50%;
  width: min(1904px, 155%);
  max-width: none;
  transform: translate(-50%, -50%);
  opacity: 0.9;
}

/* Soft filled disc, upper left */
.s-remote__orb {
  position: absolute;
  left: 15%;
  top: 1%;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(35, 100, 92, 0.34) 0%, rgba(35, 100, 92, 0) 72%);
}

/* Speckle fields — plain CSS dot grids, faded out with a radial mask */
.s-remote__dots {
  position: absolute;
  background-image: radial-gradient(circle, rgba(150, 202, 194, 0.32) 1.4px, transparent 1.6px);
  background-size: 27px 27px;
  -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 20%, transparent 100%);
}
.s-remote__dots--tl {
  left: -60px;
  top: 10px;
  width: 470px;
  height: 470px;
  transform: rotate(-10deg);
}
.s-remote__dots--br {
  right: -70px;
  bottom: -60px;
  width: 500px;
  height: 430px;
  transform: rotate(-10deg);
}

/* Blurred diagonal light streaks */
.s-remote__streak {
  position: absolute;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg,
    rgba(28, 92, 90, 0) 0%,
    rgba(41, 124, 118, 0.55) 50%,
    rgba(28, 92, 90, 0) 100%);
  filter: blur(7px);
}
.s-remote__streak--a { top: 4%;    right: 2%;  width: 440px; height: 28px; transform: rotate(-38deg); }
.s-remote__streak--b { top: 20%;   right: 13%; width: 300px; height: 20px; transform: rotate(-38deg); }
.s-remote__streak--c { bottom: 6%; left: 4%;   width: 400px; height: 24px; transform: rotate(-38deg); }

/* Outlined ring + loose white pips */
.s-remote__ring {
  position: absolute;
  left: 61%;
  top: 9px;
  width: 54px;
  height: 54px;
  border: 3px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
}
.s-remote__spark {
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.92;
}
.s-remote__spark--a { left: 45.8%; top: 3.3%; }
.s-remote__spark--b { left: 95.6%; top: 44%; width: 13px; height: 13px; }
.s-remote__spark--c { left: 18.8%; top: 93.5%; width: 13px; height: 13px; }

/* --------------------------------------------------------------------------
   Diagram shell
   -------------------------------------------------------------------------- */

/* max-width = 1433 design box + the 20px gutters, so the container-query box
   (which is the content box) is exactly 1433 and 1cqw == 14.33 design px. */
.s-remote__diagram {
  container-type: inline-size;
  width: 100%;
  max-width: 1473px;
  margin: 90px auto 0;
  padding-inline: 20px;
}

.s-remote__stage {
  /* All values below are design px / 1433 * 100, expressed in cqw.
     --badge is the badge sheet's 124px cell; the visible ring is 111/124 of
     it, i.e. the 109px disc the design shows. */
  --badge: 8.514cqw;
  --indent: 6.490cqw;
  --rail-h: 46.267cqw;
  --gap-rail: 17.446cqw;
  --gap-hub: 7.886cqw;
  --hub: 14.515cqw;

  position: relative;
  display: flex;
  align-items: center;
}

/* --------------------------------------------------------------------------
   Connector wires
   -------------------------------------------------------------------------- */

.s-remote__wires {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 0;
  width: 100%;
  height: var(--rail-h);
  transform: translateY(-50%);
  pointer-events: none;
}

.s-remote__wire-base path,
.s-remote__wire-lit path {
  fill: none;
  stroke-width: 3;
}
.s-remote__wire-base path { stroke: #727272; }
.s-remote__wire-lit path { stroke-linecap: round; }

/* --------------------------------------------------------------------------
   Badge rail
   -------------------------------------------------------------------------- */

.s-remote__rail {
  position: relative;
  z-index: 1;
  flex: none;
  display: flex;
  flex-direction: column;
  width: calc(var(--badge) + var(--indent));
  height: var(--rail-h);
}

/* The four badges are not evenly spaced in the design — the middle gap is the
   widest — so the offsets are set per node rather than by space-between. */
.s-remote__node { display: flex; }
.s-remote__node--out { justify-content: flex-end; }
.s-remote__node:nth-child(2) { margin-top: 3.140cqw; }
.s-remote__node:nth-child(3) { margin-top: 6.769cqw; }
.s-remote__node:nth-child(4) { margin-top: 2.303cqw; }

/* Each exported sheet bundles the badge disc (top-left 124x124 of the file)
   with its original connector art, so the disc is isolated by clipping the
   sheet to a circle and scaling it by sheet-width / 124. */
.s-remote__badge {
  position: relative;
  flex: none;
  width: var(--badge);
  height: var(--badge);
  border-radius: 50%;
  overflow: hidden;
}
.s-remote__badge img {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--sheet);
  max-width: none;
}
.s-remote__badge--sync   { --sheet: 570.9%; }
.s-remote__badge--ai     { --sheet: 645.9%; }
.s-remote__badge--report { --sheet: 647.5%; }
.s-remote__badge--reach  { --sheet: 557.3%; }

/* Two of the sheets were exported mirrored; flip them about the disc's own
   centre line so the disc stays inside the clip. */
.s-remote__badge--flip img {
  transform: scaleY(-1);
  transform-origin: 0 calc(var(--badge) / 2);
}

/* --------------------------------------------------------------------------
   Hub tile
   -------------------------------------------------------------------------- */

.s-remote__hub {
  position: relative;
  z-index: 1;
  flex: none;
  width: var(--hub);
  margin-left: var(--gap-rail);
}

.s-remote__tile {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  border: 3px solid rgba(210, 203, 203, 0.72);
  border-radius: 21.6%; /* 45 / 208 */
  /* Opaque so the wires disappear underneath the tile rather than showing through */
  background-color: var(--s-card-dark);
  background-image: linear-gradient(180deg, rgba(245, 250, 255, 0.05) 0%, rgba(0, 0, 0, 0.06) 100%);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}

.s-remote__mark {
  display: block;
  width: 7.54cqw;  /* 108 / 1433 */
  height: 7.90cqw; /* 113 / 1433 */
}
.s-remote__mark img { width: 100%; height: 100%; }

.s-remote__tip {
  position: absolute;
  left: 50%;
  top: calc(100% + 1.33cqw);
  width: 21.91cqw;
  padding: 0.91cqw 1.53cqw;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.05);
  color: var(--c-on-dark-dim);
  font-size: clamp(12px, 1.326cqw, 19px);
  font-weight: var(--fw-bold);
  line-height: 1.2;
}

/* --------------------------------------------------------------------------
   Cards panel
   -------------------------------------------------------------------------- */

.s-remote__cards {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 23px 26px;
  margin-left: var(--gap-hub);
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.018);
}

.s-remote__card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 18.3cqw;
  padding: clamp(20px, 2.79cqw, 40px);
  border-radius: var(--r-md);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.018) 100%);
}

/* Hairline ring whose top edge carries the card's accent colour evenly across
   the full width, fading out down the sides — the design shows no border on
   the lower half of the card. */
.s-remote__card::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg,
    var(--edge) 0%,
    var(--edge) 7%,
    rgba(255, 255, 255, 0.09) 26%,
    rgba(255, 255, 255, 0.04) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.s-remote__card--a { --edge: rgba(9, 206, 63, 0.55); }
.s-remote__card--b { --edge: rgba(27, 188, 228, 0.50); }
.s-remote__card--c { --edge: rgba(27, 188, 228, 0.36); }
.s-remote__card--d { --edge: rgba(9, 206, 63, 0.52); }

/* Blurred colour wash baked into each exported ellipse */
.s-remote__card-glow {
  position: absolute;
  z-index: 0;
  width: 25.2cqw;
  max-width: none;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.s-remote__card--a .s-remote__card-glow { left: 53%; top: 30%; }
.s-remote__card--b .s-remote__card-glow { left: 52%; top: 38%; }
.s-remote__card--c .s-remote__card-glow { left: 47%; top: 30%; }
.s-remote__card--d .s-remote__card-glow { left: 60%; top: 40%; }

/* The exported sheet is a violet pip; the design renders it as a plain light
   grey dot, so the hue is dropped rather than merely desaturated. */
.s-remote__pip {
  position: absolute;
  z-index: 0;
  left: 77.3%;
  top: 86.4%;
  width: 5.28cqw;
  max-width: none;
  filter: grayscale(1) brightness(0.82);
  pointer-events: none;
}

/* The measure is capped so the titles break onto two lines as designed */
.s-remote__card-title {
  position: relative;
  z-index: 1;
  max-width: 88%;
  font-size: clamp(20px, 2.233cqw, 32px);
  line-height: 1.15;
  font-weight: var(--fw-bold);
  font-style: italic;
  letter-spacing: -0.01em;
  color: var(--c-on-dark);
}

.s-remote__card-text {
  position: relative;
  z-index: 1;
  margin-top: 1.75cqw;
  font-size: clamp(14px, 1.29cqw, 18px);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1500px) {
  .s-remote { padding: 88px 0 100px; }
  .s-remote__diagram { margin-top: 70px; }
}

/* Below the diagram's usable width: drop the wires and stack the three parts */
@media (max-width: 1024px) {
  .s-remote { padding: 72px 0 84px; }

  .s-remote__diagram { margin-top: 52px; padding-inline: var(--gutter); }

  .s-remote__stage {
    flex-direction: column;
    align-items: center;
    gap: 44px;
  }

  .s-remote__wires { display: none; }

  .s-remote__rail {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 26px;
    width: auto;
    height: auto;
  }
  .s-remote__node,
  .s-remote__node--out { justify-content: center; }
  .s-remote__node:nth-child(2),
  .s-remote__node:nth-child(3),
  .s-remote__node:nth-child(4) { margin-top: 0; }
  .s-remote__badge { --badge: 86px; }

  .s-remote__hub {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 420px;
    margin-left: 0;
  }
  .s-remote__tile { width: 170px; flex: none; }
  .s-remote__mark { width: 94px; height: 98px; }
  .s-remote__tip {
    position: static;
    width: 100%;
    margin-top: 18px;
    padding: 16px 20px;
    transform: none;
    font-size: var(--fs-sm);
    text-align: center;
  }

  .s-remote__cards {
    width: 100%;
    max-width: 760px;
    margin-left: 0;
    gap: 18px;
    padding: 18px;
  }
  .s-remote__card {
    min-height: 0;
    padding: 28px;
  }
  .s-remote__card-title { font-size: var(--fs-h5); }
  .s-remote__card-text { margin-top: 14px; font-size: var(--fs-sm); }
  .s-remote__card-glow { width: 320px; }
  .s-remote__pip { width: 54px; }
}

@media (max-width: 640px) {
  .s-remote { padding: 56px 0 68px; }
  .s-remote__diagram { margin-top: 40px; }
  .s-remote__stage { gap: 34px; }

  .s-remote__rail { gap: 16px; }
  .s-remote__badge { --badge: 68px; }

  .s-remote__tile { width: 132px; }
  .s-remote__mark { width: 72px; height: 75px; }
  .s-remote__tip { padding: 14px 16px; }

  .s-remote__cards {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px;
  }
  .s-remote__card { padding: 22px; }
  .s-remote__card-title { max-width: none; }
  .s-remote__card-glow { width: 260px; }

  .s-remote__glow { width: 220%; }
  .s-remote__dots--tl { width: 300px; height: 300px; }
  .s-remote__dots--br { width: 300px; height: 280px; }
  .s-remote__streak--a { width: 260px; }
  .s-remote__streak--b { width: 190px; }
  .s-remote__streak--c { width: 240px; }
  .s-remote__ring { width: 38px; height: 38px; border-width: 2px; }
  .s-remote__spark { width: 10px; height: 10px; }
  .s-remote__spark--b,
  .s-remote__spark--c { width: 9px; height: 9px; }
}

/* ===== sections/07-policy.css ===== */
/* ==========================================================================
   07 — Policy and Workflow
   Centred head over a radial composition: one exported
   illustration in normal flow sets the scene height, six labelled nodes are
   pinned around it with percentage offsets so the whole arrangement scales
   with the container. Below 1024px the pinning is dropped for a plain grid.
   ========================================================================== */

/* White section, with the soft cool wash the reference bleeds across its top
   edge (peaks #E9F1F5 on the centre line at y=0 and is gone by ~y=300). The
   #F4FAFF band along the bottom of the reference crop is the next section
   starting at y=1107, not this one's fill. */
.s-policy {
  padding: 100px 0 60px;
  background-color: var(--s-white);
  background-image: radial-gradient(
    42% 260px at 50% 0%,
    rgba(180, 208, 222, 0.30) 0%,
    rgba(180, 208, 222, 0.17) 34%,
    rgba(180, 208, 222, 0.06) 62%,
    rgba(180, 208, 222, 0) 100%
  );
}

/* "Workflow" — sampled off the reference rather than taken from a token: the
   red channel holds at 11–13 across every letter and the last stem reads
   #0C88E3, which is the --c-blue ramp end, not --g-green-blue-2's #1972B7.
   The green end sits a shade below --c-green at #0B7F27. */
.s-policy__grad {
  background-image: linear-gradient(90deg, #0b7f27 0%, var(--c-blue) 100%);
}

/* This section's supporting line is a lighter neutral than the site default
   (#54575A elsewhere; #7B7B7B here). Scoped so base.css is untouched. */
.s-policy .section-head__sub { color: #7b7b7b; }

/* --------------------------------------------------------------------------
   Scene
   -------------------------------------------------------------------------- */

.s-policy__stage {
  margin-top: 46px;
  padding-inline: var(--gutter);
}

/* Positioning context for the pinned nodes. Its height comes from the
   illustration, which stays in normal flow. */
.s-policy__scene {
  position: relative;
  width: 100%;
  max-width: 1455px;
  margin-inline: auto;
}

/* The artwork sits left of centre in the design; the ring of nodes is what
   re-centres the composition. */
.s-policy__art {
  width: 81.83%;
  margin-left: 5.16%;
}
.s-policy__art img { width: 100%; }

/* --------------------------------------------------------------------------
   Nodes
   -------------------------------------------------------------------------- */

.s-policy__nodes {
  position: absolute;
  inset: 0;
}

.s-policy__node {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 24px;
  transform: translateY(-50%); /* pin on the badge's centre line */
  white-space: nowrap;
}

/* Left-hand arc: badge on the inside, copy flush right */
.s-policy__node--left {
  flex-direction: row-reverse;
  text-align: right;
}

/* Badge discs read off the reference at 1920 (centres 561,343 · 464,547 ·
   469,795 · 1294,347 · 1409,577 · 1335,795), converted against the scene box.
   `top` is the badge centre; the horizontal edge is the badge's outer edge. */
.s-policy__node--n1 { top: 11.21%; right: 75.09%; }
.s-policy__node--n2 { top: 37.01%; right: 81.75%; }
.s-policy__node--n3 { top: 68.24%; right: 81.34%; }
.s-policy__node--n4 { top: 11.83%; left: 70.62%; }
.s-policy__node--n5 { top: 40.79%; left: 78.52%; }
.s-policy__node--n6 { top: 68.24%; left: 73.44%; }

/* The badge disc is baked into each exported SVG, which is authored at its
   design size of 69px — that is also what the reference measures. */
.s-policy__badge {
  display: block;
  flex: none;
  width: 69px;
  height: 69px;
}
.s-policy__badge img { width: 100%; height: 100%; }

.s-policy__title {
  font-size: var(--fs-xl);
  line-height: 1.25;
  font-weight: var(--fw-medium);
  letter-spacing: -0.01em;
}

.s-policy__sub {
  margin-top: 6px;
  font-family: var(--ff-poppins);
  font-size: var(--fs-sm);
  line-height: 1.4;
  font-weight: var(--fw-light);
  color: #444; /* one-off label grey, not in tokens.css */
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* Laptop: keep the radial arrangement but shrink the labels and pull the
   outermost nodes inward so nothing rides off the edge of the scene. */
@media (max-width: 1500px) {
  .s-policy { padding: 80px 0 60px; }

  .s-policy__node { gap: 18px; }
  .s-policy__node--n1 { right: 74%; }
  .s-policy__node--n2 { right: 76.5%; }
  .s-policy__node--n3 { right: 76.5%; }
  .s-policy__node--n4 { left: 68%; }
  .s-policy__node--n5 { left: 72%; }
  .s-policy__node--n6 { left: 71%; }

  .s-policy__badge { width: 58px; height: 58px; }
  .s-policy__title { font-size: var(--fs-md); }
  .s-policy__sub { font-size: 14px; }
}

/* Tablet: drop the pinning — illustration on top, nodes as a 2-up grid. */
@media (max-width: 1024px) {
  .s-policy { padding: 64px 0 48px; }

  .s-policy__stage { margin-top: 32px; }
  .s-policy__scene { max-width: 760px; }

  .s-policy__art {
    width: 100%;
    margin-left: 0;
  }

  .s-policy__nodes {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 32px;
    margin-top: 36px;
  }

  .s-policy__node {
    position: static;
    transform: none;
    gap: 16px;
    white-space: normal;
  }
  .s-policy__node--left {
    flex-direction: row;
    text-align: left;
  }

  .s-policy__badge { width: 56px; height: 56px; }
  .s-policy__title { font-size: var(--fs-xl); }
  .s-policy__sub { font-size: var(--fs-sm); }
}

@media (max-width: 640px) {
  .s-policy { padding: 48px 0 40px; }

  .s-policy__stage { margin-top: 24px; }

  .s-policy__nodes {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    margin-top: 28px;
  }

  .s-policy__node { gap: 14px; }
  .s-policy__badge { width: 52px; height: 52px; }
  .s-policy__sub { margin-top: 4px; }
}

/* ===== sections/08-security.css ===== */
/* ==========================================================================
   08 — Security & Data Loss Prevention
   Light-blue band, centred head, 3 x 2 photo card grid (1440 container).
   ========================================================================== */

.s-security {
  /* Same green Figma uses for the 03-trust stat numerals. */
  --security-green: #2f8d3c;
  padding: 48px 0 135px;
  background: var(--s-security);
  font-family: var(--ff-display);
}

/* ---- Head --------------------------------------------------------------- */

.s-security__title { color: var(--c-ink-3); }

/* ---- Grid --------------------------------------------------------------- */

.s-security__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 48px;
  row-gap: 45px;
  margin-top: 54px;
}

.s-security__card {
  display: flex;
  flex-direction: column;
}

/* ---- Card ---------------------------------------------------------------- */

/* Image slot. The exported placeholder (assets/icons/image6344816.svg) is a
   443x273 rect with rx="20", so the slot keeps that ratio and radius; the
   frame clips so a fill can be scaled up inside it. */
.s-security__frame {
  display: block;
  overflow: hidden;
  aspect-ratio: 443 / 273;
  border-radius: 20px;
}

.s-security__shot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--shot-zoom, 1));
}

/* Two fills sit larger than a plain cover inside the frame. image6344821 is
   exported with white letterbox bands baked in (1200x1500, photo only spans
   y 412-1087) which a plain cover would leave visible along the top and
   bottom edges; image6344822 is simply zoomed in — both factors measured off
   the reference render. */
.s-security__shot--zoom-audit { --shot-zoom: 1.06; }
.s-security__shot--zoom-usb   { --shot-zoom: 1.19; }

/* Card title. Figma fills the words with the brand gradient running almost
   straight down — teal at the cap line, green from the baseline down — tilted
   ~3.7 degrees so the ramp slides lower as it travels right, which is what
   makes the first word read green and the last read teal. Pinning the
   gradient box to a fixed 600px keeps that ramp the same distance from the
   first glyph on every title regardless of how long the title is. */
.s-security__card-title {
  margin-top: 22px;
  width: max-content;
  max-width: 100%;
  background-image: linear-gradient(
    183.7deg,
    var(--c-teal) 60.2%,
    var(--security-green) 75.5%
  );
  background-repeat: no-repeat;
  background-size: 600px 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.s-security__card-text {
  margin-top: 10px;
  font-size: var(--fs-lg);
  line-height: 1.36;          /* 30px line pitch at 22px, measured */
  font-weight: var(--fw-regular);
  color: var(--c-slate);
}

/* ---- Responsive ---------------------------------------------------------- */

@media (max-width: 1500px) {
  .s-security { padding: 40px 0 100px; }
  .s-security__grid { column-gap: 40px; row-gap: 38px; margin-top: 44px; }
  .s-security__frame { border-radius: 18px; }
  .s-security__card-title { margin-top: 20px; }
}

@media (max-width: 1024px) {
  .s-security { padding: 36px 0 72px; }
  .s-security__grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 36px;
    row-gap: 32px;
    margin-top: 36px;
  }
  .s-security__frame { border-radius: 16px; }
  .s-security__card-title { margin-top: 16px; }
  .s-security__card-text { margin-top: 8px; }
}

@media (max-width: 640px) {
  .s-security { padding: 28px 0 52px; }
  .s-security__grid {
    grid-template-columns: 1fr;
    column-gap: 34px;
    row-gap: 30px;
    margin-top: 28px;
  }
  .s-security__frame { border-radius: 14px; }
  .s-security__card-title { margin-top: 14px; }
}

/* ===== sections/09-pricing.css ===== */
/* ==========================================================================
   09 · Pricing
   White band, centred head, three plan cards on a 1440 grid.
   The Premium card is naturally taller (two extra features) and the row is
   centre-aligned, which reproduces the Figma overhang without any offsets.

   Geometry below is measured off the 1920-wide reference render:
   cards 452 x (648 / 730) px, 40px gutters, row spans the full 1440 container,
   20px radius, 33px content inset, divider rules inset 11px from the card edge.
   ========================================================================== */

.s-pricing {
  /* content inset from the card edge, and the inset of the hairline rules */
  --card-pad: 33px;
  --rule-inset: 11px;
  /* the card outline reads as a soft sage line in the reference, several
     steps darker than the neutral --c-line used for the inner rules */
  --card-line: #a4baaa;
  /* low, wide "floor" shadow: nothing above the card, a soft pool below */
  --card-shadow: 0 70px 44px rgba(10, 12, 18, 0.1);

  background: var(--s-white);
  padding-block: 64px 156px;
}

.s-pricing .section-head__sub {
  max-width: 920px;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Grid
   -------------------------------------------------------------------------- */

.s-pricing__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 40px;
  margin-top: 60px;
}

/* At the design width the card row spans the full 1440 container edge to edge
   (452px cards), so it cancels the container gutter. Gated above 1520 so the
   row can never reach the viewport edge. */
@media (min-width: 1520px) {
  .s-pricing__grid { margin-inline: calc(var(--gutter) * -1); }
}

/* --------------------------------------------------------------------------
   Card shell
   -------------------------------------------------------------------------- */

.s-pricing__card {
  display: flex;
  flex-direction: column;
  background: var(--s-white);
  border: 1px solid var(--card-line);
  border-radius: 20px;
  box-shadow: var(--card-shadow);
  /* keeps the gradient and the rules inside the rounded corners */
  overflow: hidden;
}

.s-pricing__card--featured {
  border-color: transparent;
  /* measured off the reference: green at the top-left, brand blue at the
     bottom-right, a few degrees off true vertical */
  background-image: linear-gradient(173deg, #148734 0%, #1673bb 100%);
  color: var(--c-on-dark);
}

/* --------------------------------------------------------------------------
   Card head + price (each closed by a hairline inset from the card edge)
   -------------------------------------------------------------------------- */

.s-pricing__card-head,
.s-pricing__price {
  margin-inline: var(--rule-inset);
  border-bottom: 1px solid var(--c-line);
}

.s-pricing__card-head {
  padding: 38px calc(var(--card-pad) - var(--rule-inset)) 18px;
}

.s-pricing__price {
  padding: 20px calc(var(--card-pad) - var(--rule-inset)) 18px;
}

.s-pricing__card--featured .s-pricing__card-head,
.s-pricing__card--featured .s-pricing__price {
  border-bottom-color: rgba(255, 255, 255, 0.22);
}

.s-pricing__card-title { color: var(--c-ink); }

.s-pricing__card-sub {
  margin-top: 8px;
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  color: var(--c-body);
}

/* The amount is filled with the brand teal→green gradient, running vertically
   across the cap height (same stops as the exported check badge). */
.s-pricing__amount {
  background-image: linear-gradient(180deg, #0192b8 28%, #308d3c 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.s-pricing__per {
  margin-top: 7px;
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  color: var(--c-ink);
}

.s-pricing__card--featured .s-pricing__card-title,
.s-pricing__card--featured .s-pricing__card-sub,
.s-pricing__card--featured .s-pricing__per {
  color: var(--c-on-dark);
}

/* Premium's amount is flat white over the gradient, not gradient-filled */
.s-pricing__card--featured .s-pricing__amount {
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--c-on-dark);
}

/* --------------------------------------------------------------------------
   Feature list
   -------------------------------------------------------------------------- */

.s-pricing__body {
  padding: 31px var(--card-pad) 30px;
}

.s-pricing__features {
  display: flex;
  flex-direction: column;
  gap: 21px;
}

.s-pricing__feature {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: 1.35;
  color: var(--c-body);
}

.s-pricing__card--featured .s-pricing__feature { color: var(--c-on-dark); }

/* Exported check = gradient squircle badge with a stroked tick laid over it */
.s-pricing__check {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
}

.s-pricing__check img { position: absolute; }

.s-pricing__check-badge {
  inset: 0;
  width: 100%;
  height: 100%;
}

/* intrinsic size of the exported tick — do not shrink it */
.s-pricing__check-mark {
  top: 50%;
  left: 50%;
  width: 14px;
  height: 11px;
  transform: translate(-50%, -50%);
}

/* --------------------------------------------------------------------------
   Call to action
   -------------------------------------------------------------------------- */

.s-pricing__cta {
  width: 100%;
  margin-top: 36px;
  /* 60px tall control in the reference */
  padding-block: 20px;
  gap: 18px;
}

.s-pricing__card--featured .s-pricing__cta:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}

.s-pricing__cta-icon {
  flex: none;
  width: 20px;
  height: 17px;
}

.s-pricing__cta-icon img {
  width: 100%;
  height: 100%;
}

/* The exported arrow is a near-black stroke; flip it when the outline
   button fills with ink on hover/focus. */
.s-pricing__cta--outline:hover .s-pricing__cta-icon img,
.s-pricing__cta--outline:focus-visible .s-pricing__cta-icon img {
  filter: invert(1);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1500px) {
  .s-pricing {
    --card-pad: 28px;
    --rule-inset: 10px;
    --card-shadow: 0 50px 36px rgba(10, 12, 18, 0.1);
    padding-block: 56px 120px;
  }

  .s-pricing__grid {
    gap: 28px;
    margin-top: 48px;
  }

  .s-pricing__card-head { padding-block: 32px 15px; }
  .s-pricing__price     { padding-block: 18px 15px; }
  .s-pricing__body      { padding-block: 26px 26px; }
  .s-pricing__cta       { margin-top: 30px; padding-block: 18px; }
}

@media (max-width: 1024px) {
  .s-pricing {
    --card-shadow: 0 30px 30px rgba(10, 12, 18, 0.1);
    padding-block: 48px 88px;
  }

  .s-pricing__grid {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 32px;
    margin-top: 40px;
  }

  .s-pricing__card {
    width: 100%;
    max-width: 560px;
  }
}

@media (max-width: 640px) {
  .s-pricing {
    --card-pad: 20px;
    --rule-inset: 8px;
    padding-block: 40px 64px;
  }

  .s-pricing__card-head { padding-block: 24px 12px; }
  .s-pricing__price     { padding-block: 16px 12px; }
  .s-pricing__body      { padding-block: 24px 24px; }

  .s-pricing__features { gap: 16px; }
  .s-pricing__feature  { gap: 12px; }

  .s-pricing__cta {
    margin-top: 26px;
    padding-block: 16px;
    padding-inline: 16px;
    gap: 12px;
  }
}

/* ===== sections/10-faq.css ===== */
/* ==========================================================================
   10 — FAQ
   Light band (#f3f7f5) with a centred head and a single-column accordion.
   A cropped support-agent portrait peeks over the bottom-right section edge.
   ========================================================================== */

.s-faq {
  /* Width of the decorative portrait. Its vertical offset is derived from it,
     so a single value per breakpoint keeps the crop identical at every size. */
  --faq-fig-w: 520px;
  /* 1px hairline outline measured off the Figma render (#cad8ca) */
  --faq-card-line: #cad8ca;

  background: var(--s-faq);
  padding: 42px 0 152px;
}

.s-faq__inner {
  position: relative;
  z-index: 1;
}

/* --- Head ---------------------------------------------------------------- */

.s-faq__grad { background-image: var(--g-green-blue); }

/* Figma sub is 22px (the .section-head__sub default) on a 27px line. */
.s-faq .section-head__sub {
  margin-top: 17px;
  line-height: 1.23;
}

/* --- Accordion ----------------------------------------------------------- */

.s-faq__list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-width: 1084px;
  margin: 45px auto 0;
}

/* The hairline is an inset shadow rather than a border so it cannot alter the
   card height — the closed/open heights (90 / 163) are measured from Figma. */
.s-faq__item {
  background: #fafbfb;
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--faq-card-line), var(--sh-card);
  transition: box-shadow var(--dur) var(--ease);
}

.s-faq__item:hover {
  box-shadow: inset 0 0 0 1px var(--faq-card-line), var(--sh-card-lg);
}

.s-faq__q {
  font-size: var(--fs-xl);
  line-height: 30px;
  font-weight: var(--fw-regular);
}

.s-faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  /* asymmetric in Figma: 36 to the text, 28 to the glyph */
  padding: 30px 28px 30px 36px;
  text-align: left;
  color: var(--c-ink);
  transition: padding-bottom var(--dur) var(--ease);
}

.s-faq__trigger:focus-visible {
  outline-offset: -5px;
  border-radius: var(--r-md);
}

.s-faq__item.is-open .s-faq__trigger { padding-bottom: 21px; }

/* Plus / minus glyph: two bars, the vertical one rotates flat when open.
   Matches the exported vector27.svg geometry — 20x20 box, 2px rounded bars. */
.s-faq__icon {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
}

.s-faq__icon::before,
.s-faq__icon::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  margin-top: -1px;
  border-radius: 1px;
  background: currentColor;
  transition: transform var(--dur) var(--ease);
}

.s-faq__icon::after { transform: rotate(90deg); }
.s-faq__item.is-open .s-faq__icon::after { transform: rotate(0deg); }

/* --- Answer panel -------------------------------------------------------- */

/* 0fr -> 1fr animates to the panel's natural height without a magic max-height */
.s-faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
}

.s-faq__item.is-open .s-faq__panel { grid-template-rows: 1fr; }

/* Must stay padding-free: in the collapsed 0fr track its own padding would
   still contribute height. All answer spacing lives on .s-faq__a. */
.s-faq__panel-inner {
  overflow: hidden;
  /* keeps the collapsed answer out of the accessibility tree */
  visibility: hidden;
  transition: visibility 0s linear var(--dur);
}

.s-faq__item.is-open .s-faq__panel-inner {
  visibility: visible;
  transition-delay: 0s;
}

/* 30px bottom padding — the open card keeps the same 30px floor as a closed
   one, which is what makes the open card 163px and the Q2 -> Q3 pitch 172px. */
.s-faq__a {
  max-width: 924px; /* 860px of text + the 36/28 side padding */
  padding: 0 28px 30px 36px;
  font-size: var(--fs-md);
  line-height: 1.3;
  color: var(--c-body);
}

/* --- Decorative portrait ------------------------------------------------- */

.s-faq__figure {
  position: absolute;
  right: max(2%, calc(50% - 764px));
  bottom: calc(var(--faq-fig-w) * -1.227); /* leaves only the crown above the edge */
  z-index: 0;
  width: var(--faq-fig-w);
  height: calc(var(--faq-fig-w) * 1.5);
  pointer-events: none;
  user-select: none;
}

/* The Figma render mirrors the portrait: the headset arm reads on the left of
   the crop, the source PNG has it on the right. */
.s-faq__figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scaleX(-1);
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1500px) {
  .s-faq { --faq-fig-w: 425px; }

  .s-faq__list { margin-top: 38px; }
  .s-faq__q { font-size: 22px; line-height: 28px; }
  .s-faq__trigger { padding: 26px 30px; }
  .s-faq__item.is-open .s-faq__trigger { padding-bottom: 18px; }
  .s-faq__a { padding: 0 30px 26px; font-size: 18px; line-height: 1.4; }
}

@media (max-width: 1024px) {
  .s-faq {
    --faq-fig-w: 355px;
    padding: 36px 0 120px;
  }

  .s-faq__list { gap: 10px; margin-top: 30px; }
  .s-faq__q { font-size: 20px; line-height: 26px; }
  .s-faq__trigger { gap: 18px; padding: 22px 24px; }
  .s-faq__item.is-open .s-faq__trigger { padding-bottom: 15px; }
  .s-faq__icon { width: 18px; height: 18px; }
  .s-faq__a {
    max-width: none;
    padding: 0 24px 22px;
    font-size: 16px;
    line-height: 1.45;
  }
}

@media (max-width: 640px) {
  .s-faq {
    --faq-fig-w: 235px;
    padding: 32px 0 92px;
  }

  .s-faq__list { margin-top: 26px; }
  .s-faq__q { font-size: 17px; line-height: 24px; }
  .s-faq__trigger { gap: 14px; padding: 18px; }
  .s-faq__item.is-open .s-faq__trigger { padding-bottom: 12px; }
  .s-faq__icon { width: 16px; height: 16px; }
  .s-faq__a { padding: 0 18px 18px; font-size: 15px; line-height: 1.5; }
}

/* ===== sections/11-cta.css ===== */
/* ==========================================================================
   11 · CTA band
   Full-bleed 536px teal-to-green band. Copy sits on the container's left
   edge; the support-agent cut-out is anchored bottom-right and deliberately
   overflows the band top and bottom (the section already clips it).
   ========================================================================== */

.s-cta {
  background-image: var(--g-cta-band);
  color: var(--c-on-dark);
  /* keep the texture's blend from reaching the sections above/below */
  isolation: isolate;
}

/* --------------------------------------------------------------------------
   Background artwork
   -------------------------------------------------------------------------- */

/* Soft-light keeps the wave lines readable while darkening the band the way
   the Figma comp does; the fade stops the green end going muddy. */
.s-cta__texture {
  opacity: 0.6;
  mix-blend-mode: soft-light;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 40%, rgba(0, 0, 0, 0.45) 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 40%, rgba(0, 0, 0, 0.45) 100%);
}

.s-cta__photo {
  position: absolute;
  z-index: 1;
  bottom: -18.5%;
  /* container right edge (1440) + 17px, clamped to the viewport edge */
  right: max(0px, calc(50% - 737px));
  width: auto;
  height: 143.7%; /* 770 / 536 — head and hem are cropped by the band */
  max-width: none;
  pointer-events: none;
  user-select: none;
}

/* --------------------------------------------------------------------------
   Copy
   -------------------------------------------------------------------------- */

.s-cta__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 536px;
  padding-block: 88px;
}

.s-cta__title {
  max-width: 790px;
  line-height: 1.2; /* 66 / 55 */
}

.s-cta__text {
  max-width: 755px;
  margin-top: 24px;
  font-size: var(--fs-base);
  line-height: 1.44;
  /* comp measures a flat #f1f1f1 across the whole paragraph */
  color: rgba(255, 255, 255, 0.93);
}

/* --------------------------------------------------------------------------
   Actions
   -------------------------------------------------------------------------- */

.s-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 30px;
  margin-top: 32px;
}

.s-cta__btn {
  min-width: 227px;
  padding: 21px 30px; /* 60px tall pills */
  font-weight: var(--fw-bold);
}

.s-cta__btn--sales { color: var(--c-green-500); }

.s-cta__btn-icon {
  flex: none;
  width: 19px;
  height: 16px;
}
.s-cta__btn-icon img { width: 100%; height: 100%; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1500px) {
  .s-cta__inner {
    min-height: 480px;
    padding-block: 72px;
  }
  .s-cta__title { max-width: 600px; }
  .s-cta__text { max-width: 560px; }
  .s-cta__photo {
    bottom: -17%;
    height: 142%;
  }
  .s-cta__btn { min-width: 200px; }
}

/* Narrow laptops: pull the cut-out back so it never reaches the copy */
@media (max-width: 1200px) {
  .s-cta__title,
  .s-cta__text { max-width: 545px; }
  .s-cta__photo {
    bottom: -12%;
    height: 125%;
  }
}

@media (max-width: 1024px) {
  .s-cta__inner {
    align-items: center;
    min-height: 0;
    padding-block: 64px 40px;
    text-align: center;
  }
  .s-cta__title,
  .s-cta__text { max-width: 640px; }
  .s-cta__actions { justify-content: center; }

  /* The photo drops into the flow, flush with the band's bottom edge. It stays
     positioned (inset reset) so it keeps painting above .s-cta__texture — a
     static child would fall below that z-index:0 layer and get soft-lit. */
  .s-cta__photo {
    position: relative;
    inset: auto;
    z-index: 1;
    height: 300px;
    max-width: 100%;
    margin-inline: auto;
  }
}

@media (max-width: 640px) {
  .s-cta__inner { padding-block: 56px; }
  .s-cta__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
  }
  .s-cta__btn {
    min-width: 0;
    padding-inline: 20px;
  }
  .s-cta__photo { display: none; }
}

/* ===== sections/12-footer.css ===== */
/* ==========================================================================
   12 — Footer
   White footer: five columns over a hairline-separated bottom bar.
   Design width 1920, content container 1690 (--container-wide).
   ========================================================================== */

.s-footer {
  /* 30px contact type has no token; kept local so it can step down cleanly. */
  --f-contact: 30px;
  background: var(--s-white);
  padding: 110px 0 20px;
}

/* --------------------------------------------------------------------------
   Column grid
   -------------------------------------------------------------------------- */

.s-footer__cols {
  display: grid;
  grid-template-columns: 1.25fr 0.95fr 1.25fr 0.95fr 1.85fr;
  column-gap: 40px;
  row-gap: 56px;
}

.s-footer__col {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Shared column typography
   -------------------------------------------------------------------------- */

.s-footer__heading {
  font-family: var(--ff-poppins);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.s-footer__heading--gap {
  margin-top: 64px;
}

.s-footer__links {
  margin-top: 41px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.s-footer__links a {
  font-family: var(--ff-poppins);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--c-ink);
  transition: color var(--dur) var(--ease);
}

.s-footer__links a:hover {
  color: var(--c-teal);
}

/* --------------------------------------------------------------------------
   Column 1 — mail, phone, social
   -------------------------------------------------------------------------- */

.s-footer__contact {
  display: inline-block;
  margin-top: 24px;
  font-family: var(--ff-display);
  font-size: var(--f-contact);
  line-height: 1.2;
  color: var(--c-ink-3);
  border-bottom: 1px solid var(--c-ink-3);
  padding-bottom: 8px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.s-footer__contact:hover {
  color: var(--c-teal);
  border-bottom-color: var(--c-teal);
}

/* The phone number carries no rule in the design. */
.s-footer__contact--plain {
  margin-top: 34px;
  border-bottom: 0;
  padding-bottom: 0;
}

.s-footer__contact--plain:hover {
  color: var(--c-teal);
}

.s-footer__social {
  margin-top: 50px;
  display: flex;
  align-items: center;
  gap: 37px;
}

/* Each mark keeps its exported artwork's own dimensions — a uniform square
   box would rescale YouTube and LinkedIn away from the design's weights. */
.s-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.s-footer__social-link--linkedin { width: 29px; height: 28px; }
.s-footer__social-link--facebook { width: 32px; height: 32px; }
.s-footer__social-link--youtube  { width: 34px; height: 24px; }
.s-footer__social-link--twitter  { width: 34px; height: 28px; }

.s-footer__social-link:hover {
  opacity: 0.65;
  transform: translateY(-2px);
}

.s-footer__social-link img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   Column 5 — subscribe
   -------------------------------------------------------------------------- */

.s-footer__form {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

.s-footer__field {
  flex: 1 1 220px;
  min-width: 0;
}

.s-footer__input {
  width: 100%;
  padding: 6px 2px 12px;
  font-family: var(--ff-display);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--c-ink-3);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--c-ink-3);
  border-radius: 0;
}

.s-footer__input::placeholder {
  color: var(--c-muted-2);
}

.s-footer__submit {
  flex: none;
  padding: 13px 28px;
  border: 1px solid var(--c-ink-2);
  font-family: var(--ff-poppins);
  font-weight: var(--fw-regular);
  color: var(--c-ink-2);
}

.s-footer__submit:hover {
  background: var(--c-ink-2);
  color: var(--c-on-dark);
}

.s-footer__form-note {
  flex: 1 0 100%;
  font-family: var(--ff-poppins);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--c-body);
}

.s-footer__form-note:empty {
  display: none;
}

.s-footer__form-note[data-state="error"] {
  color: #b3261e;
}

.s-footer__blurb {
  margin-top: 48px;
  max-width: 480px;
  font-family: var(--ff-poppins);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--c-ink-2);
}

/* Explicit box (717x299 artwork scaled to the design's 200x83) so the row
   below never reflows while the PNG decodes. */
.s-footer__logo {
  margin-top: 56px;
  width: 200px;
  height: 83px;
  object-fit: contain;
  object-position: left center;
}

/* --------------------------------------------------------------------------
   Bottom bar
   -------------------------------------------------------------------------- */

.s-footer__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 24px;
  margin-top: 46px;
  padding-top: 22px;
  border-top: 1px solid var(--c-line);
}

.s-footer__copyright,
.s-footer__totop,
.s-footer__legal a {
  font-family: var(--ff-poppins);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.s-footer__totop,
.s-footer__legal a {
  transition: color var(--dur) var(--ease);
}

.s-footer__totop:hover,
.s-footer__legal a:hover {
  color: var(--c-ink);
}

.s-footer__legal {
  display: flex;
  align-items: center;
  gap: 60px;
  justify-self: end;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1500px) {
  .s-footer {
    --f-contact: 26px;
    padding: 90px 0 30px;
  }

  .s-footer__cols { column-gap: 32px; }
  .s-footer__links { margin-top: 34px; gap: 22px; }
  .s-footer__heading--gap { margin-top: 48px; }
  .s-footer__social { margin-top: 40px; gap: 28px; }
  .s-footer__legal { gap: 40px; }
}

@media (max-width: 1024px) {
  .s-footer {
    --f-contact: 24px;
    padding: 70px 0 28px;
  }

  .s-footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
    row-gap: 48px;
  }

  /* The subscribe block spans the pair; its controls stay text-width. */
  .s-footer__col--subscribe { grid-column: 1 / -1; }
  .s-footer__form { max-width: 560px; }

  .s-footer__blurb { margin-top: 36px; }
  .s-footer__logo { margin-top: 40px; }

  /* Copyright takes its own row so it never wraps against the links. */
  .s-footer__bar {
    grid-template-columns: auto auto;
    justify-content: space-between;
    row-gap: 16px;
    margin-top: 36px;
  }

  .s-footer__copyright { grid-column: 1 / -1; }
  .s-footer__totop { justify-self: start; }
  .s-footer__legal { gap: 28px; }
}

@media (max-width: 640px) {
  .s-footer {
    --f-contact: 22px;
    padding: 56px 0 24px;
  }

  .s-footer__cols {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
  }

  .s-footer__heading--gap { margin-top: 36px; }
  .s-footer__social { margin-top: 32px; }

  .s-footer__submit { flex: 1 1 100%; }

  .s-footer__logo { width: 168px; height: 70px; }

  .s-footer__bar {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 14px;
    justify-items: start;
  }

  .s-footer__legal { justify-self: start; }
}