/* ---------------------------------------------------------------------------
   Page skeleton: header, shell, section rhythm, the two grids, footer.

   Structure on this site comes from HAIRLINE RULES and white space, not from
   containers. Follow theme/v2's flat-first rule: canvas to paper is only about
   1.077:1 by design, so a surface separates by its EDGE. On the web that means
   a section boundary is a 1px rule. There are no box shadows on this site.
   --------------------------------------------------------------------------- */

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

/* --- header --------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: var(--canvas);
  border-bottom: var(--stroke-hairline) solid var(--hairline);
}

.site-header__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-group);
  min-height: 4rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-related);
  margin-right: auto;
  min-height: var(--tap-min);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--fs-card-title);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.brand:hover {
  color: var(--ink);
}

.brand__mark {
  width: 26px;
  height: 26px;
  flex: none;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
  background: none;
  border: var(--stroke-hairline) solid var(--hairline);
  border-radius: var(--radius-tile);
  color: var(--ink);
  cursor: pointer;
}

html[data-js] .nav-toggle {
  display: inline-flex;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 16px;
  height: 1.5px;
  background-color: currentColor;
  content: "";
  transition:
    top var(--dur-quick) var(--ease-standard),
    transform var(--dur-quick) var(--ease-standard),
    background-color var(--dur-quick) var(--ease-standard);
}

.nav-toggle__bars {
  position: relative;
}

.nav-toggle__bars::before {
  position: absolute;
  top: -5px;
}

.nav-toggle__bars::after {
  position: absolute;
  top: 5px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
  background-color: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  top: 0;
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  top: 0;
  transform: rotate(-45deg);
}

/* Without JavaScript the navigation is simply always visible and stacked. JS
   only adds the ability to collapse it, so nothing is ever hidden with no
   replacement. */
.site-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-tight);
  flex-basis: 100%;
  padding-block: var(--space-related) 0;
  border-top: var(--stroke-hairline) solid var(--hairline);
}

html[data-js] .site-nav {
  display: none;
}

html[data-js] .site-nav[data-open] {
  display: flex;
}

.site-nav__link {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: 500;
  text-decoration: none;
}

.site-nav__link:hover {
  color: var(--link);
}

.site-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-label);
  flex-basis: 100%;
  padding-bottom: var(--space-group);
}

html[data-js] .site-header__actions {
  display: none;
}

html[data-js] .site-nav[data-open] ~ .site-header__actions {
  display: flex;
}

/* The panel cannot transition from `display: none`, but an animation starts
   the moment it is shown, so opening eases and closing is instant. The
   durations are the shared tokens, which already collapse under
   prefers-reduced-motion. Scoped below the desktop breakpoint, where the
   panel exists. */
@keyframes nav-panel-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@media (max-width: 61.99rem) {
  html[data-js] .site-nav[data-open],
  html[data-js] .site-nav[data-open] ~ .site-header__actions {
    animation: nav-panel-in var(--dur-standard) var(--ease-standard) both;
  }
}

/* Legal pages carry no in-page navigation, so their header actions are never
   part of a collapsible panel. */
.site-header__actions--legal,
html[data-js] .site-header__actions--legal {
  display: flex;
  flex-basis: auto;
  padding-bottom: 0;
}

@media (min-width: 62rem) {
  .site-header__bar {
    flex-wrap: nowrap;
  }

  .nav-toggle,
  html[data-js] .nav-toggle {
    display: none;
  }

  .site-nav,
  html[data-js] .site-nav,
  html[data-js] .site-nav[data-open] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-section);
    flex-basis: auto;
    padding-block: 0;
    border-top: 0;
  }

  .site-header__actions,
  html[data-js] .site-header__actions {
    display: flex;
    flex-wrap: nowrap;
    flex-basis: auto;
    padding-bottom: 0;
    margin-left: var(--space-section);
  }
}

/* --- section rhythm -------------------------------------------------------- */

.section {
  padding-block: var(--space-block);
  border-top: var(--stroke-hairline) solid var(--hairline);
}

.section--flush {
  border-top: 0;
}

/* The proof row belongs to the hero, so it does not need a second full block of
   space on top of the one the hero already ends with. */
.hero + .section--flush {
  padding-top: 0;
}

.section__head {
  max-width: var(--measure);
  margin-bottom: var(--space-block-sm);
}

.section__head > * + * {
  margin-top: var(--space-label);
}

/* A single trailing link under a section body. Replaces the inline margin the
   markup used to carry. */
.section__more {
  margin-top: var(--space-section);
}

/* A row of actions under a section body. Same shape as the hero's row and the
   closing block's, named for the section rather than borrowing either. */
.section__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-label);
  margin-top: var(--space-section);
}

/* --- hero ------------------------------------------------------------------ */

.hero {
  padding-block: clamp(40px, 5vw, 72px) var(--space-block);
}

.hero__grid {
  display: grid;
  gap: var(--space-block);
  align-items: start;
}

.hero__copy > * + * {
  margin-top: var(--space-section);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-label);
}

.hero__trust {
  display: block;
  padding-top: var(--space-section);
  border-top: var(--stroke-hairline) solid var(--hairline);
  color: var(--text-secondary);
  font-size: var(--fs-sub);
}

@media (min-width: 62rem) {
  .hero__grid {
    /* The copy leads; the figure is a slightly narrower supporting column. */
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(40px, 5vw, 80px);
    align-items: start;
  }
}

/* --- product evidence ------------------------------------------------------ */

.evidence {
  display: grid;
  gap: var(--space-block);
  align-items: center;
}

.evidence + .evidence {
  margin-top: var(--space-block);
  padding-top: var(--space-block);
  border-top: var(--stroke-hairline) solid var(--hairline);
}

.evidence__copy > * + * {
  margin-top: var(--space-section);
}

@media (min-width: 62rem) {
  .evidence {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 5vw, 72px);
  }

  /* Alternate the reading direction so two consecutive sections do not read as
     a repeated card layout. */
  .evidence--reverse .evidence__figure {
    order: -1;
  }
}

/* --- final call ------------------------------------------------------------ */

.final__inner {
  display: grid;
  gap: var(--space-section);
  max-width: var(--measure);
}

.final__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-label);
}

/* --- footer ---------------------------------------------------------------- */

.site-footer {
  padding-block: var(--space-block);
  border-top: var(--stroke-hairline) solid var(--hairline);
  color: var(--text-secondary);
  font-size: var(--fs-sub);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-block-sm);
}

.site-footer__brandline {
  max-width: 34ch;
}

.site-footer__group > * + * {
  margin-top: var(--space-related);
}

.site-footer__title {
  color: var(--ink);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
}

.site-footer__list {
  list-style: none;
}

.site-footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--text-secondary);
}

.site-footer__list a:hover {
  color: var(--link);
}

.site-footer__legal {
  margin-top: var(--space-block-sm);
  padding-top: var(--space-section);
  border-top: var(--stroke-hairline) solid var(--hairline);
  font-size: var(--fs-caption);
}

.site-footer__legal > * + * {
  margin-top: var(--space-label);
}

.site-footer__trademark {
  max-width: 78ch;
}

/* The footer is four short lists. One column each is a lot of scrolling for
   very little content, so it pairs up as soon as there is room for two. */
@media (min-width: 22rem) {
  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .site-footer__grid {
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 62rem) {
  .site-footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-section);
  }
}