/* ------------------------------------------------------------------
   Chrome that is specific to the five category pages: the page title,
   the product selector bar and the blue call-to-action band. The
   product information bands themselves come from product-section.css,
   unchanged -- this file adds nothing to that component.

   Figma, page "Ace Microsite":
     title  46:5148  Manrope 700 52/59.8, tracking -1.56, centred, y=140
     bar    54:2377  "Frame 427321751", tiles 144.6x169.5, r=9.97
     cta    158:841  "with padding", #4594D1, 1512x603
   ------------------------------------------------------------------ */

.page { background: var(--page); }

/* ------------------------------------------------------------- title */
.ptitle {
  margin: 0;
  padding-top: 140px;              /* Figma y=140 from the frame top */
  font-weight: 700;
  font-size: 52px;
  line-height: 59.8px;
  letter-spacing: -1.56px;
  text-align: center;
  color: var(--ink);
}

/* ------------------------------------------------------- product nav
   Figma `Frame 427321795` on Sensors Desktop 204:771 and on the mobile
   template 204:396. Matt Brown, 2026-09-16: "Let's use this style nav for
   the entire page and eliminate the visual nav."

   The row it replaces was 169.5px of picture tiles; this one is 37px, which
   is the whole point of the change -- Figma moves the first content band
   from y=475 up to y=302 on the same frame.

   Measured from 204:1524 / 204:600:
     row      37 tall, 8px between pills, no wrap, starts at x=65 (desktop)
              and x=11 (mobile), and is allowed to run past the right edge
     pill     fully round, 1px inside stroke #686868, no fill
     label    Bold 14/13, letter-spacing -0.14, #353638
     current  fill #4594D1, label #FFFFFF
   The label is set in the site's Manrope rather than the Inter the mock was
   drawn in: every other control on these pages is Manrope, and the pill
   carries the same 14px bold weight either way.                           */
.anav {
  margin: 54px 0 0;                /* Figma 254 - (140 + 59.8) title bottom */
  padding: 0 65px 11px;            /* row x=65; bands start 11px below it */
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.anav::-webkit-scrollbar { display: none; }

/* width:max-content with min-width:100% is what lets the row centre while it
   fits and scroll once it does not. Centring a flex row that overflows would
   put its first pills at a negative offset, where no scroll can reach them --
   Sensors has nine pills and overflows 1512 by 33px in Figma's own frame. */
.anav__list {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  width: max-content;
  min-width: 100%;
  gap: 8px;                        /* Figma itemSpacing */
  margin: 0;
  padding: 0;
  list-style: none;
}
.anav__item { display: flex; }
.anav__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 37px;
  padding: 0 9px;                  /* Figma paddingLeft/Right on desktop */
  border: 1px solid var(--pill-line);
  border-radius: 999px;
  background: transparent;
  font-weight: 700;
  font-size: 14px;
  line-height: 13px;
  letter-spacing: -0.14px;
  white-space: nowrap;
  color: var(--body);              /* #353638, Figma 204:601 */
  text-decoration: none;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.anav__pill:hover,
.anav__pill:focus-visible {
  border-color: var(--brand);
  color: var(--brand);
}
/* "When you select a product ... the page scrolls to the correct page
   section" -- Figma note 124:2572. The selected pill is the filled one in
   204:1524 (204:1527) and in 204:613 (204:607). */
.anav__pill[aria-current="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--white);
}

/* ------------------------------------------------- the anchored state
   Figma note 124:2571 asks for the row to stay anchored while scrolling.
   The row goes `fixed` and .anav-slot holds its original height in the flow,
   so nothing below it moves at the moment it sticks -- the same arrangement
   the masthead uses. product-nav.js measures the height and toggles the
   class from an IntersectionObserver.

   The pills are already the compact form, so sticking only fixes the row and
   gives it a backdrop; nothing about a pill changes.                       */
.anav-sentinel { height: 1px; margin-bottom: -1px; }

/* flow-root keeps the row's own top margin inside the slot. Left to collapse
   through, that margin belongs to the slot's outer edge and vanishes the
   moment the row goes fixed, dragging everything below up by 54px. */
.anav-slot { display: flow-root; }

.anav { transition: none; }

/* The stuck row is one 37px pill plus 6px of padding either side; declaring
   it as a variable lets base.css add it to the anchor landing offset without
   the number being written down twice. */
:root {
  --subnav-pill-h: 37px;
  --subnav-stuck-h: calc(var(--subnav-pill-h) + 12px);
}

.anav.is-stuck {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--anav-top, 52px);
  z-index: 48;                     /* just under the masthead */
  margin: 0;
  padding: 6px var(--gutter);
  background: color-mix(in srgb, var(--page) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(10px);
  backdrop-filter: saturate(1.6) blur(10px);
  box-shadow: 0 1px 0 rgba(18, 21, 25, 0.07), 0 6px 18px rgba(18, 21, 25, 0.06);
}
/* No entrance animation: the row now anchors on the frame it arrives at the
   header rather than after having scrolled away, so it is already in place
   and anything that faded or slid it in would be a flicker on the spot. */

/* ---------------------------------------------------------- cta band */
.cta {
  background: var(--brand);
  padding: 60px 0;                 /* Figma inner frame inset */
}
.cta__inner {
  max-width: calc(var(--canvas) - var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 656fr 656fr;
  gap: 80px;                        /* 796 - (60 + 656) */
  align-items: center;
}
.cta__img {
  border-radius: 20px;
  aspect-ratio: 656 / 483;
}
/* min-width:0 stops the fixed-width heading from forcing the grid column
   wider than the viewport once the band stacks on a phone */
.cta__img, .cta__copy { min-width: 0; }
.cta__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.cta__proof {
  margin: 0;
  font-weight: 600;
  font-size: 14px;
  line-height: 17px;
  color: var(--off-white);          /* legible here: the band is #4594D1 */
}
.cta__title {
  margin: 0;
  width: 548px;
  max-width: 100%;
  font-weight: 700;
  font-size: 42px;
  line-height: 50.4px;
  color: var(--off-white);
}
.cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 210px;
  min-height: 50px;
  padding: 14px 24px;
  border-radius: 8px;
  /* Figma gradient: #FFFFFF -> #D0E6F7, left to right */
  background: linear-gradient(90deg, #FFFFFF 0%, #D0E6F7 100%);
  font-weight: 700;
  font-size: 16px;
  line-height: 22.4px;
  color: var(--ink);
  text-decoration: none;
}
/* Figma wires this control to node 5:107, which is not in the file, so
   there is no destination to link to. It is rendered but inert, and
   flagged, rather than pointed at an invented address. */
.cta__btn--nodest { cursor: not-allowed; opacity: .82; }

/* ================================================================
   Responsive
   ================================================================ */
@media (max-width: 1511px) {
  .ptitle { padding-top: 120px; }
  .cta__inner { gap: 48px; }
  .cta__title { font-size: clamp(28px, 3.2vw, 42px); line-height: 1.2; }
}

@media (max-width: 1180px) {
  /* clears the sticky mobile bar rather than the desktop pill */
  .ptitle { padding-top: 104px; font-size: clamp(30px, 5vw, 52px); line-height: 1.15; }
  .anav { margin-top: 40px; padding-inline: var(--gutter); }
}

@media (max-width: 860px) {
  .cta { padding: 44px 0; }
  .cta__inner { grid-template-columns: 1fr; gap: 28px; }
  .cta__copy { gap: 18px; }
}

@media (max-width: 640px) {
  /* Figma's 390px frame 204:396: title Manrope 600 38/41.8 at y=99, the pill
     row at y=167, the first band at y=230. */
  .ptitle {
    padding-top: 99px;
    font-weight: 600;
    font-size: 38px;
    line-height: 41.8px;
    letter-spacing: -0.8px;
  }
  .anav {
    margin-top: 26px;              /* 167 - 140.8 */
    padding: 0 11px 26px;          /* row x=11; first band 26px below it */
    scroll-snap-type: x proximity;
    scroll-padding-inline: 11px;
  }
  /* Figma's own row is 588px wide inside a 390px frame, so on a phone it
     starts at the left and scrolls sideways rather than centring. */
  .anav__list { justify-content: flex-start; }
  .anav__item { scroll-snap-align: start; }
  .anav__pill { padding: 0 14px; }  /* Figma 204:600 paddingLeft/Right */
  /* the anchored row has to keep the pills on the same vertical line as the
     row in flow, or anchoring shifts them sideways by the difference between
     the two paddings -- part of what Matt saw in comment 1929896239 */
  .anav.is-stuck { padding-inline: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .anav__pill { transition: none; }
}