/* ==========================================================================
   Landing page (Claude): the hero and the sections below it. The site
   header and footer are in site-chrome.scss, which loads before this file.
   Tokens follow the POAST brand kit.
   ========================================================================== */
/* ---- Fonts (self-hosted): the display weights only this page uses; Outfit
   and JetBrains Mono come from the site chrome's stylesheet. ---- */
@font-face {
  font-family: Grift;
  src: url("../../fonts/grift/Grift-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: Grift;
  src: url("../../fonts/grift/Grift-Black.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}
/* ---- Page resets: the concept pages carry no chrome ----
   Ground is #090A0C (two steps darker than the #131416 Umair asked for); card
   and surface tones are the kit's own and were left as they were. ---- */
:root:has(body.sahc-page) {
  background: #090A0C;
}

body.sahc-page {
  margin: 0;
  padding: 0;
  background: #090A0C;
  color: #E8E4DD;
  font-family: Outfit, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Primary CTAs keep their dark label over the page-level link reset. */
}
body.sahc-page .wp-site-blocks,
body.sahc-page .sahc-main {
  padding: 0;
  margin: 0;
  max-width: none;
}
body.sahc-page .wp-site-blocks > * + * {
  margin-block-start: 0;
}
body.sahc-page :where(h1, p) {
  margin: 0;
}
body.sahc-page a {
  text-decoration: none;
  color: inherit;
}
body.sahc-page :is(a, button):focus-visible {
  outline: 2px solid rgba(247, 176, 65, 0.72);
  outline-offset: 3px;
}
body.sahc-page .sahc-btn--primary,
body.sahc-page .sahc-btn2--primary {
  color: #060608;
}

.sahc {
  position: relative;
  overflow: hidden;
  background: #090A0C;
  color: #E8E4DD;
}

/* ==========================================================================
   Shared: announcement chip with a slowly rotating gradient border
   ========================================================================== */
@property --sahc-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.sahc-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  margin-bottom: 32px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: #E8E4DD;
  background: linear-gradient(var(--sahc-angle), rgba(247, 176, 65, 0.55) 0%, rgba(38, 201, 216, 0.55) 100%);
  animation: sahc-rotate 30s linear infinite;
}
.sahc-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 9999px;
  background: linear-gradient(var(--sahc-angle), #F7B041 0%, #26C9D8 100%);
  filter: blur(20px);
  opacity: 0;
  transform: scale(0.95, 0.6);
  transition: 0.3s ease-out;
  animation: sahc-rotate 30s linear infinite;
}
.sahc-badge span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  height: 30px;
  margin: 1px;
  padding: 4px 12px;
  border-radius: 9999px;
  white-space: nowrap;
  color: #F7B041;
  background: #0D0D12;
  transition: 0.2s ease-out;
}
.sahc-badge:hover span {
  background: rgba(13, 13, 18, 0.82);
}
.sahc-badge:hover::after {
  opacity: 0.9;
  transform: scaleX(1.1);
}

@keyframes sahc-rotate {
  to {
    --sahc-angle: 360deg;
  }
}
/* ==========================================================================
   V1: split hero
   ========================================================================== */
.sahc--v1 {
  padding-top: 48px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.sahc-v1__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
}

/* Top-right amber light lobe with film grain. */
.sahc-v1__glow {
  position: absolute;
  inset: -80px 0 0;
  background: radial-gradient(ellipse 46% 58% at 76% 14%, rgba(247, 176, 65, 0.16) 0%, rgba(247, 176, 65, 0.06) 38%, rgba(247, 176, 65, 0) 72%);
}

.sahc-v1__grain {
  position: absolute;
  inset: -80px 0 0;
  background-image: url("../../img/hero-claude/noise.png");
  background-size: 128px 128px;
  opacity: 0.075;
  mix-blend-mode: screen;
  mask-image: radial-gradient(ellipse 52% 66% at 76% 14%, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 78%);
}

/* Soft warm diagonal light beams crossing the lower half. */
.sahc-v1__beam {
  position: absolute;
  left: -15%;
  width: 130%;
  height: 110px;
  opacity: 0.8;
  filter: blur(26px);
  background: linear-gradient(180deg, rgba(247, 176, 65, 0) 0%, rgba(247, 176, 65, 0.06) 42%, rgba(247, 200, 120, 0.14) 50%, rgba(247, 176, 65, 0.06) 58%, rgba(247, 176, 65, 0) 100%);
}

.sahc-v1__beam--a {
  top: 58%;
  transform: rotate(-8deg);
}

.sahc-v1__beam--b {
  top: 77%;
  height: 70px;
  opacity: 0.55;
  transform: rotate(-8deg);
}

.sahc-v1__inner {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px 32px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.sahc-v1__text {
  order: 2;
  max-width: 768px;
  text-align: center;
  animation: sahc-slide-up-fade 1s ease-in-out both;
}

.sahc-v1__title {
  font-family: Grift, Outfit, sans-serif;
  font-weight: 800;
  font-size: 52px;
  line-height: 1;
  letter-spacing: -0.01em;
  padding-bottom: 12px;
  background: linear-gradient(to bottom right, #E8E4DD 30%, rgba(232, 228, 221, 0.5));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.sahc-v1__lede {
  max-width: 480px;
  margin: 8px auto 0;
  font-size: 18px;
  line-height: 27px;
  color: rgba(232, 228, 221, 0.62);
}

.sahc-v1__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  margin-top: 32px;
}

/* Kit buttons: amber primary, bordered secondary, radius 8, weight 700. */
.sahc-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 22px;
  border-radius: 8px;
  font-family: Outfit, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0.2px;
  -webkit-user-select: none;
          user-select: none;
  transition: all 0.2s ease;
}
.sahc-btn:active {
  transform: scale(0.97);
}

.sahc-btn--primary {
  background: #F7B041;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.sahc-btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background-image: url("../../img/hero-claude/noise.png");
  background-size: 96px 96px;
  opacity: 0.1;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.sahc-btn--primary:hover {
  box-shadow: 0 0 20px rgba(247, 176, 65, 0.35), 0 8px 24px rgba(0, 0, 0, 0.35);
  transform: translateY(-1px);
}

.sahc-btn--ghost {
  color: #E8E4DD;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
}
.sahc-btn--ghost:hover {
  border-color: rgba(247, 176, 65, 0.5);
  color: #F7B041;
  background: rgba(247, 176, 65, 0.04);
}

.sahc-v1__scene {
  order: 1;
  flex: 0 0 auto;
  width: 225px;
  height: 225px;
  margin: 0 0 24px;
  filter: contrast(1.12) saturate(1.05);
}

.sahc-v1__webgl {
  position: relative;
  width: 100%;
  height: 100%;
  animation: sahc-scale-in-fade 1s ease-in-out both;
}

.sahc-v1__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Static fallback when WebGL is unavailable. */
.sahc-v1__webgl.is-fallback .sahc-v1__canvas {
  display: none;
}

.sahc-v1__webgl.is-fallback::before {
  content: "";
  position: absolute;
  inset: 15%;
  border-radius: 18px;
  background: linear-gradient(135deg, #17171c, #090A0C 70%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  transform: rotateX(55deg) rotateZ(45deg);
}

@keyframes sahc-slide-up-fade {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes sahc-scale-in-fade {
  from {
    opacity: 0;
    transform: scale(0.7);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@media (min-width: 768px) {
  .sahc--v1 {
    height: 100vh;
    max-height: 950px;
    min-height: 0;
    padding-top: 0;
  }
  .sahc-v1__bg {
    display: block;
  }
  .sahc-v1__inner {
    flex-direction: row;
    justify-content: space-between;
    gap: 0;
    padding-bottom: 48px;
  }
  .sahc-v1__text {
    order: 1;
    flex-shrink: 0;
    max-width: 560px;
    text-align: left;
  }
  .sahc-v1__title {
    font-size: 84px;
  }
  .sahc-v1__lede {
    margin-left: 0;
  }
  .sahc-v1__actions {
    flex-direction: row;
    align-items: center;
  }
  .sahc-v1__scene {
    order: 2;
    flex: 0 1 700px;
    width: 700px;
    max-width: 700px;
    height: 550px;
    margin: 0 0 0 40px;
    display: flex;
    align-items: center;
  }
}
/* ==========================================================================
   V2: gradient hero
   ========================================================================== */
.sahc--v2 {
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  background: #090A0C;
}

/* Base layer: the theme's circuit-line pattern, masked in off-white, sits
   under the gradient and shows through its darker regions. */
.sahc-v2__lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Part of the gradient background only (see HERO_BG in hero-claude-v2.js);*/
  /* never shown over the cell lattice.*/
  pointer-events: none;
  overflow: hidden;
}
.sahc-v2__lines::before, .sahc-v2__lines::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: min(58vw, 960px);
  background: rgba(232, 228, 221, 0.2);
  mask-repeat: no-repeat;
  mask-size: 100% auto;
}
.sahc-v2__lines::before {
  left: 0;
  mask-image: url("../../img/left-pattern-full.svg");
  mask-position: top right;
}
.sahc-v2__lines::after {
  right: 0;
  mask-image: url("../../img/right-pattern-full.svg");
  mask-position: top left;
}

/* On the two canvas pages the lines are the first beat of the entrance:
   they flash up as the hero starts and fade before the background is
   uncovered (the script times the hand-off so the two never share the
   screen). They sit above the canvas here, so the curtains never hide them.
   The floorplan page takes each beat a little slower. */
.sahc--v2.is-bg-cells,
.sahc--v2.is-bg-circuit {
  --sahc-lines-in: 0.36s;
  --sahc-lines-out: 0.38s;
}

.sahc--v2.is-bg-circuit {
  --sahc-lines-in: 0.42s;
  --sahc-lines-out: 0.44s;
}

.sahc--v2.is-bg-cells .sahc-v2__lines,
.sahc--v2.is-bg-circuit .sahc-v2__lines {
  z-index: 2;
  opacity: 0;
  transition: opacity var(--sahc-lines-in) ease;
}
.sahc--v2.is-bg-cells .sahc-v2__lines::before, .sahc--v2.is-bg-cells .sahc-v2__lines::after,
.sahc--v2.is-bg-circuit .sahc-v2__lines::before,
.sahc--v2.is-bg-circuit .sahc-v2__lines::after {
  background: rgba(232, 228, 221, 0.11);
}

.sahc--v2.is-bg-cells.is-lines-in .sahc-v2__lines,
.sahc--v2.is-bg-circuit.is-lines-in .sahc-v2__lines {
  opacity: 1;
}

.sahc--v2.is-bg-cells.is-lines-out .sahc-v2__lines,
.sahc--v2.is-bg-circuit.is-lines-out .sahc-v2__lines {
  opacity: 0;
  transition: opacity var(--sahc-lines-out) ease;
}

/* These pages run their own entrance: the canvas layer is not faded in by
   the hero's transition. Two curtains in the page's ink cover it and slide
   apart on the compositor once the background is ready underneath. */
.sahc--v2.is-bg-cells .sahc-v2__shader,
.sahc--v2.is-bg-cells.is-in .sahc-v2__shader,
.sahc--v2.is-bg-circuit .sahc-v2__shader,
.sahc--v2.is-bg-circuit.is-in .sahc-v2__shader {
  opacity: 1;
  transition: none;
}

/* The floorplan's light: a wide, soft band of the amber crossing the board
   slowly, as on the folder section, seen only through the drawing itself
   (the board is the mask). Fades up once the curtains have parted. */
.sahc-v2__sweep {
  position: absolute;
  inset: -8px;
  overflow: hidden;
  opacity: 0;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  transition: opacity 1.6s ease;
  pointer-events: none;
}
.sahc-v2__sweep.is-on {
  opacity: 1;
}
.sahc-v2__sweep::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 320%;
  background: linear-gradient(100deg, transparent 43%, rgba(247, 176, 65, 0.5) 50%, transparent 57%);
  transform: translate3d(-68.75%, 0, 0);
  will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
  .sahc-v2__sweep::before {
    animation: sahc-wave 18s linear infinite;
  }
}
.sahc-v2__curtain {
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(50% + 180px);
  pointer-events: none;
  will-change: transform;
  transition: transform 1s cubic-bezier(0.32, 0.72, 0, 1);
}

.sahc-v2__curtain--l {
  left: 0;
  background: linear-gradient(90deg, #090A0C calc(100% - 180px), rgba(9, 10, 12, 0));
}

.sahc-v2__curtain--r {
  right: 0;
  background: linear-gradient(270deg, #090A0C calc(100% - 180px), rgba(9, 10, 12, 0));
}

.sahc-v2__curtain--l.is-open {
  transform: translateX(-100%);
}

.sahc-v2__curtain--r.is-open {
  transform: translateX(100%);
}

.sahc-v2__shader {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
}

.sahc-v2__canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Without WebGL2 the page falls back to a still brand gradient. */
.sahc--v2.no-webgl .sahc-v2__shader {
  opacity: 1;
  background: radial-gradient(ellipse 60% 70% at 30% 30%, rgba(247, 176, 65, 0.55), transparent 70%), radial-gradient(ellipse 60% 60% at 75% 70%, rgba(224, 99, 71, 0.45), #090A0C 75%);
}

/* A quiet fade to ink across the top of the hero, so the moving background
   settles before it meets the header instead of being cut by it. */
.sahc-v2__fade-top {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 5;
  height: 220px;
  pointer-events: none;
  background: linear-gradient(to bottom, #090A0C 0%, rgba(9, 10, 12, 0.86) 22%, rgba(9, 10, 12, 0.6) 44%, rgba(9, 10, 12, 0.32) 64%, rgba(9, 10, 12, 0.12) 82%, transparent 100%);
}

.sahc-v2__fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
  height: 256px;
  pointer-events: none;
  background: linear-gradient(to top, #090A0C 0%, rgba(9, 10, 12, 0.738) 19%, rgba(9, 10, 12, 0.541) 34%, rgba(9, 10, 12, 0.382) 47%, rgba(9, 10, 12, 0.278) 56.5%, rgba(9, 10, 12, 0.194) 65%, rgba(9, 10, 12, 0.126) 73%, rgba(9, 10, 12, 0.075) 80.2%, rgba(9, 10, 12, 0.042) 86.1%, rgba(9, 10, 12, 0.021) 91%, rgba(9, 10, 12, 0.008) 95.2%, rgba(9, 10, 12, 0.002) 98.2%, transparent 100%);
}

/* The copy sits in the middle column of a three-column grid; the press
   quotes take the side columns, so they can never cover the chip, headline,
   lines or buttons at any width. */
.sahc-v2__stack {
  position: absolute;
  inset: 0;
  z-index: 10;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
  column-gap: clamp(28px, 3vw, 56px);
  width: 100%;
  height: 100%;
  /* The header (68px) lies over the hero's background; the content keeps*/
  /* clear of it with room to spare.*/
  padding: 100px clamp(24px, 5vw, 88px) 96px;
  /* Only the copy takes the pointer; the empty grid must not sit over the*/
  /* docked tab bar below it.*/
  pointer-events: none;
}

.sahc-v2__core {
  grid-column: 2;
  grid-row: 2;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-width: 0;
  max-width: 1300px;
}

.sahc-v2__top,
.sahc-v2__bottom,
.sahc-v2__title-wrap,
.sahc-v2__mono-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.sahc-v2__mono {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: #E8E4DD;
}

.sahc-v2__top .sahc-v2__mono {
  color: #F7B041;
  transition: color 1.4s ease;
}

.sahc--v2.is-settled .sahc-v2__top .sahc-v2__mono {
  color: #E8E4DD;
}

/* Under the buttons: the newsletter's standing, in the top line's type one
   step smaller and the brand blue, shown only while the Newsletter button is
   hovered. */
.sahc--v2 .sahc-v2__hint {
  margin-top: 22px;
  font-size: 12px;
  color: #0B86D1;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.sahc-v2__bottom:has(.sahc-btn2--newsletter:hover) .sahc-v2__hint,
.sahc-v2__bottom:has(.sahc-btn2--newsletter:focus-visible) .sahc-v2__hint {
  opacity: 1;
  transform: none;
}

.sahc-v2__title {
  font-family: Grift, Outfit, sans-serif;
  font-weight: 900;
  font-size: 132px;
  line-height: 0.8;
  letter-spacing: -0.2rem;
  text-transform: uppercase;
  text-align: center;
  color: #E8E4DD;
  text-wrap: balance;
}

.sahc-v2__actions {
  opacity: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
}

.sahc-btn2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  border-radius: 8px;
  font-family: Outfit, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0.2px;
  transition: all 0.2s ease;
}
.sahc-btn2:active {
  transform: scale(0.97);
}

/* Primary: flat amber with a light lift on hover. */
.sahc-btn2--primary {
  background: #F7B041;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 4px 14px rgba(247, 176, 65, 0.14);
}
.sahc-btn2--primary:hover {
  background: #F9B95A;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 6px 18px rgba(247, 176, 65, 0.22);
}

/* Secondary: quiet glass with a hairline border. */
.sahc-btn2--ghost {
  color: #E8E4DD;
  border: 1px solid rgba(232, 228, 221, 0.2);
  background: rgba(232, 228, 221, 0.06);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.sahc-btn2--ghost:hover {
  border-color: rgba(232, 228, 221, 0.55);
  color: #FFF;
  background: rgba(232, 228, 221, 0.14);
  transform: translateY(-1px);
}

/* The wordmark stands where the headline was; the h1 keeps its text for
   readers. Sized by width, so the SVG can take the PNG's place as is. */
.sahc--v2 .sahc-v2__title--wordmark {
  display: block;
  margin: 0 auto;
  font-size: 0;
  line-height: 0;
  letter-spacing: 0;
}

.sahc-v2__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.sahc-v2__wordmark {
  display: block;
  width: clamp(280px, 44vw, 640px);
  height: auto;
  margin: 0 auto;
  pointer-events: none;
  animation: none !important;
  background: none !important;
}

/* Set like the mono lines that stood here before it. */
.sahc--v2 .sahc-v2__subtitle {
  max-width: 40ch;
  margin: 0 auto 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-wrap: balance;
  text-transform: uppercase;
  text-align: center;
  color: #E8E4DD;
}

/* Background quotes, as on the MVP hero: faint amber italics that fade in
   and out in the four corners, placed by the script and never overlapping
   the copy. */
.sahc-v2__quotes {
  position: absolute;
  inset: 92px 16px 16px;
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
}

.sahc-v2__quote {
  position: absolute;
  max-width: 240px;
  margin: 0;
  font-family: Outfit, sans-serif;
  font-size: clamp(0.66rem, 1vw, 0.8rem);
  font-style: italic;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0.012em;
  color: transparent;
  opacity: 0;
  transform: translateY(10px);
  filter: blur(5px) drop-shadow(0 1px 10px rgba(9, 10, 12, 0.6));
  transition: opacity 1.1s ease, transform 1.5s cubic-bezier(0.22, 1, 0.36, 1), filter 1.1s ease;
  pointer-events: none;
  /* Etched metal, still: the letters are cut from a top-lit gradient of the*/
  /* off-white, with a hairline of light along their upper edge and a dark*/
  /* edge below, drawn from two copies of the text behind the fill.*/
  /* Right-hand corners hang from the right edge so long lines grow inward.*/
  /* Warm brushed metal: a wide ramp of the off-white with a warm highlight*/
  /* and one brighter band in the middle. The window that shows at rest is*/
  /* the same at both ends of the ramp, so the single glint on arrival*/
  /* (background-position 100% to 0%) passes the band across the letters*/
  /* once and comes to rest looking exactly as it started.*/
  /* The source under the line: name, then title, in plain small type that*/
  /* arrives once the quote has.*/
  /* Arrive: rise, sharpen, and settle. Leave: lift away and soften.*/
}
.sahc-v2__quote::before, .sahc-v2__quote::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.sahc-v2__quote::before {
  color: rgba(255, 246, 230, 0.26);
  transform: translateY(-1px);
}
.sahc-v2__quote::after {
  color: rgba(0, 0, 0, 0.62);
  transform: translateY(1px);
}
.sahc-v2__quote.is-right {
  text-align: right;
}
.sahc-v2__quote .sahc-v2__quote-text {
  position: relative;
  z-index: 1;
  background-image: linear-gradient(105deg, #C4BFB7 0%, #E8E4DD 14%, #F7EEDC 26%, #CDC8C0 38%, #DAD6CE 44%, #FFF6E6 50%, #DAD6CE 56%, #C4BFB7 62%, #E8E4DD 76%, #F7EEDC 88%, #CDC8C0 100%);
  background-size: 260% 100%;
  background-position: 0 0;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sahc-v2__quote.is-shown .sahc-v2__quote-text {
  animation: sahc-glint 1.8s cubic-bezier(0.45, 0, 0.2, 1) 0.35s both;
}
.sahc-v2__quote .sahc-v2__quote-by {
  display: block;
  margin-top: 7px;
  font-size: 0.66rem;
  font-style: normal;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: rgba(232, 228, 221, 0.62);
  opacity: 0;
  transition: opacity 0.7s ease 0.25s;
}
.sahc-v2__quote .sahc-v2__quote-name {
  display: block;
  font-weight: 600;
  color: rgba(232, 228, 221, 0.8);
}
.sahc-v2__quote .sahc-v2__quote-role {
  display: block;
}
.sahc-v2__quote.is-shown:not(.is-typing) .sahc-v2__quote-by, .sahc-v2__quote.is-typed .sahc-v2__quote-by {
  opacity: 1;
}
.sahc-v2__quote.is-shown {
  opacity: 0.86;
  transform: none;
  filter: blur(0) drop-shadow(0 1px 10px rgba(9, 10, 12, 0.6));
}
.sahc-v2__quote.is-leaving {
  opacity: 0;
  transform: translateY(-8px);
  filter: blur(4px) drop-shadow(0 1px 10px rgba(9, 10, 12, 0.6));
  transition: opacity 0.9s ease, transform 1.3s ease, filter 0.9s ease;
}

/* Typewriter entrance for quotes of one or two lines: the box is locked to
   its final size by the script, the text types in left-aligned, and the
   metal glint runs once when the last character lands. Longer quotes keep
   the rise-and-unblur entrance above. */
.sahc-v2__quote.is-typing {
  text-align: left;
  transform: none;
  filter: drop-shadow(0 1px 10px rgba(9, 10, 12, 0.6));
  transition: opacity 0.3s ease;
}
.sahc-v2__quote.is-typing.is-shown .sahc-v2__quote-text {
  animation: none;
}
.sahc-v2__quote.is-typing.is-typed .sahc-v2__quote-text {
  animation: sahc-glint 1.8s cubic-bezier(0.45, 0, 0.2, 1) 0.2s both;
}
.sahc-v2__quote.is-typing.is-leaving {
  transform: translateY(-8px);
  filter: blur(4px) drop-shadow(0 1px 10px rgba(9, 10, 12, 0.6));
  transition: opacity 0.9s ease, transform 1.3s ease, filter 0.9s ease;
}

@keyframes sahc-glint {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}
@media (max-width: 720px) {
  .sahc-v2__quote {
    display: none;
  }
}
@media (max-width: 1100px) {
  .sahc-v2__stack {
    grid-template-columns: minmax(0, 1fr);
  }
  .sahc-v2__core {
    grid-column: 1;
  }
}
/* Announcement chip above the top line: white label, pops in after the
   entrance sequence has settled. */
.sahc-v2__badge {
  margin-bottom: 14px;
  opacity: 0;
  transform: translateY(10px) scale(0.86);
}

.sahc--v2 .sahc-badge span {
  color: #FFF;
}

/* Entrance: the small lines start stacked at the center and slide apart as
   the headline unblurs; the gradient fades up last. --sahc-shift is set by
   the script from the measured headline height. */
.sahc-v2__top {
  transform: translateY(var(--sahc-shift, 120px));
}

.sahc-v2__bottom {
  transform: translateY(calc(-1 * var(--sahc-shift, 120px)));
}

.sahc-v2__title-wrap {
  opacity: 0;
  transform: scale(0.94);
}

.sahc--v2.is-in {
  /* The chip pops in just after the headline and buttons have landed. */
}
.sahc--v2.is-in .sahc-v2__top,
.sahc--v2.is-in .sahc-v2__bottom {
  transform: none;
  transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.55s;
}
.sahc--v2.is-in .sahc-v2__title-wrap {
  opacity: 1;
  transform: none;
  transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.75s, transform 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.75s;
}
.sahc--v2.is-in .sahc-v2__actions {
  opacity: 1;
  transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.9s;
}
.sahc--v2.is-in .sahc-v2__shader {
  opacity: 1;
  transition: opacity 1.3s ease-in-out 0.8s;
}
.sahc--v2.is-in .sahc-v2__badge {
  opacity: 1;
  transform: none;
  transition: opacity 0.45s ease-out 1.85s, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.85s;
}

@media (max-width: 1280px) {
  .sahc-v2__title {
    font-size: 104px;
  }
}
@media (max-width: 1024px) {
  .sahc-v2__title {
    font-size: 78px;
    letter-spacing: -0.1rem;
  }
}
@media (max-width: 768px) {
  .sahc-v2__title {
    font-size: clamp(3.2rem, 12vw + 0.3rem, 4.6rem);
    letter-spacing: -0.08rem;
  }
  .sahc-v2__stack {
    padding: 0 20px;
  }
}
/* ==========================================================================
   Models folder: statement, pinned five-tab folder, compact cards
   ========================================================================== */
.sahc-models {
  position: relative;
  overflow: clip;
  padding-top: 40px;
  padding-bottom: 112px;
  background: #090A0C;
  color: #E8E4DD;
  font-family: Outfit, sans-serif;
}
.sahc-models *,
.sahc-models *::before,
.sahc-models *::after {
  box-sizing: border-box;
}
.sahc-models :where(h2, h3, h4, p) {
  margin: 0;
}

.sahc-models__container {
  width: min(1280px, 100% - 48px);
  margin-inline: auto;
}

/* ---- Story: full-width circuit lines behind a container-width stage ---- */
.sahc-models__story {
  position: relative;
}

/* A zero-height sticky holder at the top of the section keeps the lines
   pinned for as long as the section is on screen, spanning the full page
   width and the full viewport height, outside the stage's clip. */
.sahc-models__bg {
  position: sticky;
  top: var(--sahc-pin-top, 24px);
  z-index: 0;
  height: 0;
  pointer-events: none;
}

.sahc-models__bg-in {
  position: absolute;
  top: calc(-1 * var(--sahc-pin-top, 24px));
  left: 0;
  right: 0;
  height: 100vh;
  overflow: hidden;
}

.sahc-models__lines,
.sahc-models__wave {
  position: absolute;
  top: 0;
  bottom: 0;
  width: min(46%, 760px);
  mask-repeat: no-repeat;
  mask-size: 100% auto;
  mask-position: top left;
}

.sahc-models__lines--l,
.sahc-models__wave--l {
  left: 0;
  mask-image: url("../../img/left-pattern-full.svg");
  mask-position: top right;
}

.sahc-models__lines--r,
.sahc-models__wave--r {
  right: 0;
  mask-image: url("../../img/right-pattern-full.svg");
}

.sahc-models__lines {
  background: rgba(232, 228, 221, 0.04);
}

.sahc-models__wave {
  opacity: 0.45;
  overflow: hidden;
}

/* The beam is a 320%-wide gradient moved with transform, so the wave costs
   the compositor only and never repaints the page while it scrolls. */
.sahc-models__wave::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 320%;
  background: linear-gradient(100deg, transparent 40%, rgba(247, 176, 65, 0.3) 50%, transparent 60%);
  transform: translate3d(-68.75%, 0, 0);
  will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
  .sahc-models__wave::before {
    animation: sahc-wave 9s linear infinite;
  }
  .sahc-models__wave--r::before {
    animation-delay: -4.5s;
  }
}
@keyframes sahc-wave {
  from {
    transform: translate3d(-68.75%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.sahc-models:not(.is-pinned) .sahc-models__bg {
  display: none;
}

/* ---- Stage: the folder, in flow (the pinned layout overrides below) ---- */
.sahc-models__stage {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* ---- Folder: five tabs cut into the top edge of one panel ---- */
.sahc-folder {
  --sahc-paper: #0A0A0F;
  --sahc-line: rgba(255, 255, 255, 0.1);
  --sahc-r: 14px;
  position: relative;
  width: min(1440px, 100% - 48px);
  min-width: 0;
  margin-inline: auto;
}

/* Folder tab band: the footer's folder silhouette at the band's own 69px.
   A chamfered corner at the left, the tabs with hairline dividers, a flat run
   of the same strip, and the two-step cap at the right end; the caps are the
   footer's own SVGs at the footer's widths, drawn to the band's height. */
.sahc-folder__tabs {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: stretch;
  height: 69px;
  scrollbar-width: none;
  transition: transform 0.6s cubic-bezier(0.32, 0.72, 0, 1), padding 0.6s cubic-bezier(0.32, 0.72, 0, 1), border-radius 0.6s ease, background-color 0.6s ease, box-shadow 0.6s ease, border-color 0.6s ease;
}
.sahc-folder__tabs::-webkit-scrollbar {
  display: none;
}

/* A tab: name and kicker, centred in the band's height. Inactive tabs sit a
   shade lighter than the paper, the active one takes the paper and opens
   into the panel. The tabs share the band evenly (a zero basis, equal
   growth), so a short name like Consulting gets as much room as the rest,
   and no tab shrinks below its one-line name: the breakpoints below trade
   kicker, size and padding for room instead of letting a name wrap.
   Resets the theme's button styles. */
.sahc-models .sahc-folder__tab {
  position: relative;
  display: grid;
  flex: 1 1 0;
  gap: 5px;
  align-content: center;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-top: 1px solid var(--sahc-line);
  background: rgba(255, 255, 255, 0.018);
  color: #8A8690;
  font: inherit;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  transition: color 0.2s ease, background-color 0.35s ease, border-radius 0.6s ease, margin 0.6s ease;
  /* Amber label along the top edge, and the scroll indicator: while the
     folder is pinned it fills across the active tab as that tab's share
     of the scroll goes by. */
}
.sahc-models .sahc-folder__tab:hover {
  color: #E8E4DD;
  background: rgba(255, 255, 255, 0.04);
}
.sahc-models .sahc-folder__tab:focus-visible {
  outline: 2px solid #F7B041;
  outline-offset: -4px;
}
.sahc-models .sahc-folder__tab::before {
  content: "";
  position: absolute;
  top: 0;
  right: 18px;
  left: 18px;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: #F7B041;
  opacity: 0;
  transform: scaleX(var(--sahc-seg, 1));
  transform-origin: left;
  transition: opacity 0.25s ease;
}

.sahc-models .sahc-folder__tab + .sahc-folder__tab {
  border-left: 1px solid var(--sahc-line);
}

.sahc-folder__tab-title {
  font-family: Outfit, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  white-space: nowrap;
}

.sahc-folder__tab-sub {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: #6F6B78;
  white-space: nowrap;
  transition: color 0.2s ease;
}

/* The active tab: the folder's paper with no line beneath, bright kicker,
   amber name, the label lit. */
.sahc-models .sahc-folder__tab.is-active {
  z-index: 2;
  background: var(--sahc-paper);
  color: #E8E4DD;
  /* Covers the panel's top edge under this tab so the two read as one. */
}
.sahc-models .sahc-folder__tab.is-active:hover {
  background: var(--sahc-paper);
}
.sahc-models .sahc-folder__tab.is-active .sahc-folder__tab-sub {
  color: #F7B041;
}
.sahc-models .sahc-folder__tab.is-active::before {
  opacity: 1;
}
.sahc-models .sahc-folder__tab.is-active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: var(--sahc-paper);
}

/* Between the last tab and the right cap. The tabs now take the band's
   spare width, so this holds no width of its own; it stays in the row for
   the paper rules below, which reach the cap through it. */
.sahc-folder__strip {
  position: relative;
  flex: 0 0 0;
  min-width: 0;
  border-top: 1px solid var(--sahc-line);
  background: rgba(255, 255, 255, 0.018);
  pointer-events: none;
  transition: flex-basis 0.6s cubic-bezier(0.32, 0.72, 0, 1), min-width 0.6s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.4s ease;
}

/* The caps are the footer's: the rounded chamfer at the left end and the
   two-step run-down at the right, at the footer's widths and drawn to the
   band's height. One pixel taller than the row, so a paper fill covers the
   panel's edge beneath it. */
.sahc-folder__cap {
  flex: 0 0 236px;
  width: 236px;
  pointer-events: none;
  transition: flex-basis 0.6s cubic-bezier(0.32, 0.72, 0, 1), width 0.6s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.4s ease;
}
.sahc-folder__cap svg {
  display: block;
  width: 100%;
  height: calc(100% + 1px);
  overflow: visible;
}

.sahc-folder__cap--l {
  flex-basis: 29px;
  width: 29px;
  /* Only the chamfer: the flat run after it is the first tab's own box, so
     the two never stack and the tab's corner never shows above the curve.
     The clip keeps the extra pixel at the bottom. */
  clip-path: inset(0 0 -1px 0);
}
.sahc-folder__cap--l svg {
  width: 52px;
}

/* On phones the band ends in a second chamfer: the left cap, mirrored. */
.sahc-folder__cap--r {
  display: none;
  flex-basis: 52px;
  width: 52px;
}
.sahc-folder__cap--r svg {
  transform: scaleX(-1);
}

/* The tabs sit in a rail: no box of its own on wide screens, a horizontal
   scroller inside the cutout on smaller ones (below). */
.sahc-folder__rail {
  display: contents;
}

/* Both caps carry the strip's shade over the page, so the band reads as one. */
.sahc-folder__cap-fill {
  fill: transparent;
}

.sahc-folder__cap-shade {
  fill: rgba(255, 255, 255, 0.018);
  transition: fill 0.35s ease;
}

/* The left cap is the first tab's corner: it lights with the tab's hover
   and, while that tab is open, takes the paper and covers the panel's edge,
   so the two read as one. */
.sahc-folder__cap--l:has(+ .sahc-folder__rail > .sahc-folder__tab:first-of-type:hover) .sahc-folder__cap-shade {
  fill: rgba(255, 255, 255, 0.04);
}

.sahc-folder__cap--l:has(+ .sahc-folder__rail > .sahc-folder__tab.is-active:first-of-type) .sahc-folder__cap-fill {
  fill: var(--sahc-paper);
}
.sahc-folder__cap--l:has(+ .sahc-folder__rail > .sahc-folder__tab.is-active:first-of-type) .sahc-folder__cap-shade {
  fill: transparent;
}

.sahc-folder__cap-line {
  fill: none;
  stroke: var(--sahc-line);
  stroke-width: 1;
}

/* With the last tab open, the tail of the band is that tab's: the strip and
   the end cap take the paper and cover the panel's edge beneath them. */
.sahc-models .sahc-folder__rail:has(> .sahc-folder__tab.is-active:last-of-type) + .sahc-folder__strip {
  background: var(--sahc-paper);
}
.sahc-models .sahc-folder__rail:has(> .sahc-folder__tab.is-active:last-of-type) + .sahc-folder__strip::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: var(--sahc-paper);
}

.sahc-models .sahc-folder__rail:has(> .sahc-folder__tab.is-active:last-of-type) + .sahc-folder__strip + .sahc-folder__cap .sahc-folder__cap-fill {
  fill: var(--sahc-paper);
}
.sahc-models .sahc-folder__rail:has(> .sahc-folder__tab.is-active:last-of-type) + .sahc-folder__strip + .sahc-folder__cap .sahc-folder__cap-shade {
  fill: transparent;
}

/* The folder's body: one rounded sheet under the tabs, with a sparse
   circuit trace pattern that lives to the right of the copy. */
.sahc-folder__body {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 560px;
  background: var(--sahc-paper);
  border: 1px solid var(--sahc-line);
  /* The edge under the tabs sits quieter than the outline. */
  border-top-color: rgba(255, 255, 255, 0.05);
  border-radius: 0 0 22px 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
  /* The section's circuit lines, repeated inside the sheet at the same*/
  /* faint level: one pattern in from each end, still, off-white.*/
}
.sahc-folder__body::before, .sahc-folder__body::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 0;
  width: min(46%, 760px);
  background: rgba(232, 228, 221, 0.04);
  mask-repeat: no-repeat;
  mask-size: 100% auto;
  pointer-events: none;
}
.sahc-folder__body::before {
  left: 0;
  mask-image: url("../../img/left-pattern-full.svg");
  mask-position: top right;
}
.sahc-folder__body::after {
  right: 0;
  mask-image: url("../../img/right-pattern-full.svg");
  mask-position: top left;
}

/* Panels stack in one grid cell once the script runs, so the folder keeps
   the height of its tallest tab; without the script they simply flow. */
.sahc-folder__panels {
  position: relative;
  z-index: 1;
}

.sahc-folder__panel {
  min-width: 0;
}

.sahc-models.is-ready .sahc-folder__panels {
  display: grid;
}

.sahc-models.is-ready .sahc-folder__panel {
  grid-area: 1/1;
  /* Every panel fills the tallest one's cell and centers its content in it.*/
  display: grid;
  align-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, var(--sahc-out, 18px), 0);
  transition: opacity 0.32s ease, transform 0.42s ease, visibility 0s linear 0.42s;
}

.sahc-models.is-ready .sahc-folder__panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.5s ease 0.06s, transform 0.62s cubic-bezier(0.22, 1, 0.36, 1) 0.06s, visibility 0s;
}

/* ---- Feature card: the model suite page's feature panel ---- */
/* Frameless now: the folder body is the frame. */
.sahc-mf {
  position: relative;
  min-width: 0;
  scroll-margin-top: 32px;
}

.sahc-mf__inner {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 430px);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  min-height: 0;
  padding: clamp(2.5rem, 4vw, 3.75rem) clamp(2.25rem, 4vw, 3.75rem);
}

.sahc-mf__main {
  min-width: 0;
}

/* .sahc-models prefix: the page-level p reset (body.sahc-page p) outranks a lone class. */
.sahc-models .sahc-mf__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: #E8E4DD;
}

.sahc-mf__meta-sep {
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  color: #8A8690;
}

.sahc-models .sahc-mf__title {
  font-family: Grift, Outfit, sans-serif;
  font-size: clamp(1.65rem, 2.6vw, 2.15rem);
  font-weight: 800;
  letter-spacing: -0.6px;
  line-height: 1.12;
  color: #E8E4DD;
}

.sahc-models .sahc-mf__desc {
  max-width: 58ch;
  margin-top: 18px;
  font-size: 1rem;
  line-height: 1.7;
  color: #B8B4AD;
}

.sahc-models .sahc-mf__desc--more {
  margin-top: 14px;
}

.sahc-models .sahc-mf__audience {
  margin: 24px 0 26px;
  font-size: 0.88rem;
  color: #6F6B78;
}

/* Ghost "View model" button from the model suite kit. */
.sahc-models .sahc-mbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: transparent;
  color: #E8E4DD;
  font-family: Outfit, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.sahc-models .sahc-mbtn svg {
  transition: transform 0.2s ease;
}
.sahc-models .sahc-mbtn:hover {
  border-color: rgba(247, 176, 65, 0.5);
  background: rgba(247, 176, 65, 0.04);
  color: #F7B041;
}
.sahc-models .sahc-mbtn:hover svg {
  transform: translateX(2px);
}
.sahc-models .sahc-mbtn:active {
  transform: scale(0.97);
}

/* Action row: the ghost button plus, on some tabs, a quiet text link. */
.sahc-models .sahc-mf__actions {
  display: flex;
  margin-top: 30px;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
}

.sahc-models .sahc-mbtn--quiet {
  padding-inline: 8px;
  border-color: transparent;
  color: #8A8690;
}
.sahc-models .sahc-mbtn--quiet:hover {
  border-color: transparent;
  background: transparent;
  color: #F7B041;
}

/* Inside the folder the first action is the amber kit button. */
.sahc-models .sahc-folder .sahc-mbtn {
  border-color: #F7B041;
  background: #F7B041;
  color: #060608;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 4px 14px rgba(247, 176, 65, 0.14);
}
.sahc-models .sahc-folder .sahc-mbtn:hover {
  border-color: #F9B95A;
  background: #F9B95A;
  color: #060608;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 6px 18px rgba(247, 176, 65, 0.22);
}

.sahc-models .sahc-folder .sahc-mbtn--quiet {
  border-color: transparent;
  background: transparent;
  color: #B8B4AD;
  box-shadow: none;
}
.sahc-models .sahc-folder .sahc-mbtn--quiet:hover {
  border-color: transparent;
  background: transparent;
  color: #F7B041;
  transform: none;
  box-shadow: none;
}

.sahc-mf__panel {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 24px;
  background: rgba(10, 10, 15, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
}

/* Four faint curves in the model's accent, masked from an inline SVG, with
   the same slow amber-style light wave that rolls through the section
   background: a 320%-wide band moved with transform, compositor only. */
.sahc-mf__waves {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 340' preserveAspectRatio='none' fill='none' stroke='%23fff' stroke-width='1'><path d='M-10 60C90 20 170 110 260 80S420 10 500 50'/><path d='M-10 140C80 100 190 190 290 155S430 90 500 130'/><path d='M-10 220C100 180 180 260 280 230S430 170 500 210'/><path d='M-10 300C100 260 180 340 280 310S430 250 500 290'/></svg>");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}
.sahc-mf__waves::before, .sahc-mf__waves::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}
.sahc-mf__waves::before {
  right: 0;
  background: var(--sahc-accent, #F7B041);
  opacity: 0.07;
}
.sahc-mf__waves::after {
  width: 320%;
  background: linear-gradient(100deg, transparent 40%, var(--sahc-accent, #F7B041) 50%, transparent 60%);
  opacity: 0.32;
  transform: translate3d(-68.75%, 0, 0);
  will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
  .sahc-mf__waves::after {
    animation: sahc-wave 9s linear infinite;
  }
}
.sahc-mf__row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 16px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  transition: border-color 180ms ease;
  /* stylelint-disable-next-line no-descending-specificity -- Intentional cascade order for this section. */
}
.sahc-mf__row + .sahc-mf__row {
  margin-top: 10px;
}
.sahc-mf__row strong {
  font-size: 0.9rem;
  font-weight: 700;
  color: #E8E4DD;
  white-space: nowrap;
}
.sahc-mf__row span {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  line-height: 1.45;
  text-align: right;
  color: #8A8690;
}

.sahc-mf:hover .sahc-mf__row {
  border-color: rgba(255, 255, 255, 0.09);
}

/* ---- The open tools tab: four tiles in place of the rows ---- */
/* The tab is the tiles alone: a row of four portrait cards across the
   panel. Resting on one widens it and narrows its neighbours. */
.sahc-mf--tiles .sahc-mf__inner {
  display: block;
  padding: clamp(1.5rem, 2.5vw, 2rem);
}

.sahc-tiles {
  position: relative;
  display: flex;
  gap: 12px;
  height: 440px;
}

/* A tile links to its tool: a near-black portrait card, the figure above
   the name and a one-line description. On hover it takes a wider share of
   the row (the others give way), its border lights and its figure plays
   (the figure rules are shared with the parked tools section). */
.sahc-models .sahc-tile {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-width: 0;
  padding: 16px 16px 15px;
  background: #08090C;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  color: #E8E4DD;
  text-decoration: none;
  transition: flex-grow 0.55s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s ease;
}
.sahc-models .sahc-tile:hover, .sahc-models .sahc-tile:focus-visible {
  flex-grow: 1.7;
  border-color: rgba(255, 255, 255, 0.14);
  color: #E8E4DD;
  text-decoration: none;
}
.sahc-models .sahc-tile:focus-visible {
  outline: 2px solid #F7B041;
  outline-offset: 2px;
}

.sahc-tile__art {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: 0;
  margin: 0 0 14px;
}
.sahc-tile__art .sahc-fig {
  width: auto;
  max-width: 100%;
  height: 100%;
}

/* InferenceX: the star count as a dot matrix, bleeding to the tile's edges. */
.sahc-tile--matrix .sahc-tile__art {
  margin: -16px -16px 14px;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 9px 9px 0 0;
}
.sahc-tile--matrix .sahc-tile__art canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.sahc-tile__cap {
  position: absolute;
  right: 10px;
  bottom: 7px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #6F6B78;
  font-family: "JetBrains Mono", monospace;
  font-size: 8.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* stylelint-disable-next-line no-descending-specificity -- Intentional cascade order for this section. */
}
.sahc-tile__cap svg {
  flex-shrink: 0;
}

.sahc-tile__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sahc-models .sahc-tile__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: Outfit, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #E8E4DD;
  /* stylelint-disable-next-line no-descending-specificity -- Intentional cascade order for this section. */
}
.sahc-models .sahc-tile__title svg {
  flex-shrink: 0;
  color: #8A8690;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease, color 0.25s ease;
}

.sahc-models .sahc-tile:is(:hover, :focus-visible) .sahc-tile__title svg {
  opacity: 1;
  transform: none;
  color: #F7B041;
}

.sahc-models .sahc-tile__desc {
  margin-top: 5px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  line-height: 1.45;
  color: #8A8690;
}

/* Before the folder arrives, its tab row rides the bottom of the screen as a
   floating bar: opaque, centered, rounded, so nothing scrolls through it.
   The folder keeps the row's height as padding so nothing shifts when the
   row lands, and the script animates the hand-off between the two shapes. */
.sahc-folder.is-docked {
  padding-top: var(--sahc-band-h, 69px);
}

.sahc-folder__tabs.is-docked {
  position: fixed;
  bottom: 0;
  left: 50%;
  z-index: 35;
  width: max-content;
  height: auto;
  max-width: calc(100vw - 32px);
  padding: 6px 6px 8px;
  border: 1px solid rgba(232, 228, 221, 0.1);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  background: #0C0C0D;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  translate: -50% 0;
}
.sahc-folder__tabs.is-docked.is-arriving {
  animation: sahc-dock-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.sahc-folder__tabs.is-docked .sahc-folder__cap,
.sahc-folder__tabs.is-docked .sahc-folder__strip {
  flex-basis: 0;
  width: 0;
  min-width: 0;
  opacity: 0;
}
.sahc-folder__tabs.is-docked .sahc-folder__tab {
  margin: 0;
  padding: 10px 16px 11px;
  border-top: 0;
  border-left: 0;
  border-radius: 11px;
  background: transparent;
}
.sahc-folder__tabs.is-docked .sahc-folder__tab::before {
  display: none;
}
.sahc-folder__tabs.is-docked .sahc-folder__tab:hover {
  background: rgba(255, 255, 255, 0.05);
}
.sahc-folder__tabs.is-docked .sahc-folder__tab + .sahc-folder__tab {
  margin-left: 2px;
  border-left: 0;
}
.sahc-folder__tabs.is-docked .sahc-folder__tab.is-active {
  background: #1E1814;
  color: #E8E4DD;
}
.sahc-folder__tabs.is-docked .sahc-folder__tab-title {
  white-space: nowrap;
}

@keyframes sahc-dock-in {
  from {
    opacity: 0;
    translate: -50% 110%;
  }
  to {
    opacity: 1;
    translate: -50% 0;
  }
}
/* ---- Pinned layout (wide viewports, motion allowed) ---- */
.sahc-models.is-pinned .sahc-models__story {
  height: calc(var(--sahc-stage-h) + var(--sahc-travel));
}

/* The stage is its own stacking layer (sticky); above the hero's overlays*/
/* so the docked bar is never dimmed by the hero's bottom fade.*/
.sahc-models.is-pinned .sahc-models__stage {
  position: sticky;
  z-index: 30;
  top: var(--sahc-pin-top);
  display: flex;
  align-items: center;
  height: var(--sahc-stage-h);
}

.sahc-models.is-pinned .sahc-folder {
  width: min(1440px, 100% - 48px);
}

/* ---- Responsive ---- */
@media (min-width: 1600px) {
  .sahc-mf__inner {
    gap: 38px;
    padding: 38px;
  }
}
/* The band's room, measured: names and kickers at 14px need a 1381px band
   (a 1429px viewport); at 13px with 14px padding 1334px (1382px), with 11px
   padding 1298px (1346px); names alone at 13px need 1116px (1164px) and at
   12px with 12px padding 1041px (1089px). The steps below sit just above
   each of those lines, so a name never wraps and the kickers stay as long
   as they fit. */
@media (max-width: 1450px) {
  .sahc-models .sahc-folder__tab {
    padding: 0 14px;
  }
  .sahc-folder__tab-title {
    font-size: 13px;
  }
}
/* Down to 1350px the kickers stay; the tabs give up a little padding so the
   long names keep their one line beside them. */
@media (max-width: 1400px) {
  .sahc-models .sahc-folder__tab {
    padding: 0 11px;
  }
}
/* Below 1350px the kickers, which set the width of the short-named tabs, go. */
@media (max-width: 1350px) {
  .sahc-models .sahc-folder__tab {
    padding: 0 14px;
  }
  .sahc-folder__tab-sub {
    display: none;
  }
}
/* The last stretch before the rail takes over at 1099px. */
@media (min-width: 1100px) and (max-width: 1200px) {
  .sahc-models .sahc-folder__tab {
    padding: 0 12px;
  }
  .sahc-folder__tab-title {
    font-size: 12px;
  }
}
@media (max-width: 1200px) {
  .sahc-mf__inner {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    gap: 22px;
    padding: 26px;
  }
  .sahc-models .sahc-mf__title {
    font-size: 1.8rem;
  }
  .sahc-models .sahc-mf__desc {
    font-size: 0.95rem;
  }
  .sahc-mf__panel {
    padding: 16px;
  }
  .sahc-mf__row {
    gap: 10px;
    padding: 10px 12px;
  }
}
@media (max-width: 1099px), (max-height: 679px) {
  /* The band keeps the footer's cutout at 52px, the caps drawn to it, and
     the tabs ride a horizontal rail between the caps: natural widths, snap
     points, no scrollbar, a fade at whichever end has more. The script
     centres the open tab and sets the fades. */
  .sahc-folder__tabs {
    height: 52px;
  }
  .sahc-folder__rail {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    mask-image: linear-gradient(90deg, transparent, #000 var(--sahc-fade-l, 0), #000 calc(100% - var(--sahc-fade-r, 28px)), transparent);
  }
  .sahc-folder__rail::-webkit-scrollbar {
    display: none;
  }
  .sahc-folder__strip {
    display: none;
  }
  .sahc-models .sahc-folder__tab {
    flex: 0 0 auto;
    padding: 0 12px;
    scroll-snap-align: start;
  }
  .sahc-models .sahc-folder__tab:first-of-type {
    margin-left: 0;
  }
  .sahc-folder__tab-title {
    font-size: 13px;
    white-space: nowrap;
  }
  .sahc-folder__tab-sub {
    display: none;
  }
  /* Narrow chamfers at both ends, so the rail gets the width: the two-step
     cap would take a third of a tablet's band. */
  .sahc-folder__cap {
    display: none;
  }
  .sahc-folder__cap--l,
  .sahc-folder__cap--r {
    display: block;
    flex-basis: 36px;
    width: 36px;
    clip-path: none;
  }
  .sahc-folder__cap--l svg,
  .sahc-folder__cap--r svg {
    width: 100%;
  }
  .sahc-folder__body {
    border-radius: 0 0 18px 18px;
  }
  .sahc-mf__inner {
    grid-template-columns: minmax(0, 1fr) minmax(270px, 0.95fr);
    gap: 30px;
    padding: 28px;
  }
  /* Narrower folders stack the tiles two by two at a fixed figure height. */
  .sahc-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    height: auto;
  }
  .sahc-models .sahc-tile {
    padding: 14px 14px 13px;
  }
  .sahc-tile__art {
    flex: none;
    height: 128px;
  }
  .sahc-tile--matrix .sahc-tile__art {
    height: 150px;
    margin: -14px -14px 12px;
  }
}
@media (max-width: 760px) {
  .sahc-models {
    padding-bottom: 72px;
  }
  .sahc-models__container {
    width: calc(100% - 40px);
  }
  .sahc-models .sahc-folder__tab {
    padding: 0 12px;
  }
  .sahc-folder__tab-title {
    font-size: 12.5px;
  }
  .sahc-folder__tab-sub {
    display: none;
  }
  .sahc-mf__inner {
    grid-template-columns: 1fr;
    gap: 25px;
    padding: 24px 20px;
  }
  .sahc-mf--tiles .sahc-mf__inner {
    padding: 20px;
  }
  /* Phones: the folder hugs the open panel instead of holding the tallest
     one's height (the tiles tab is far shorter than the model tabs). A
     closing panel leaves from a layer above the opening one. */
  .sahc-models.is-ready .sahc-folder__panels {
    overflow: hidden;
  }
  .sahc-models.is-ready .sahc-folder__panel:not(.is-active) {
    position: absolute;
    inset: 0 0 auto;
  }
  .sahc-models .sahc-mf__title {
    font-size: 1.75rem;
  }
  .sahc-models .sahc-mf__audience {
    margin: 16px 0 14px;
  }
  .sahc-mf__panel {
    padding: 16px;
  }
  .sahc-mf__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .sahc-mf__row span {
    text-align: left;
  }
}
/* Phones: the InferenceX tile keeps its card; the other three become rows,
   figure at the left, name and line beside it. */
@media (max-width: 480px) {
  .sahc-tiles {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .sahc-tile--matrix .sahc-tile__art {
    height: 104px;
  }
  .sahc-models .sahc-tile:not(.sahc-tile--matrix) {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 10px 14px 10px 10px;
  }
  .sahc-models .sahc-tile:not(.sahc-tile--matrix) .sahc-tile__art {
    flex: 0 0 76px;
    height: 58px;
    margin: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sahc-models *,
  .sahc-models *::before,
  .sahc-models *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
  .sahc-models [data-sahc-word] {
    opacity: 1 !important;
  }
}
/* ==========================================================================
   Tools: InferenceX panel with a dot-matrix star count, then three figures
   ========================================================================== */
.sahc-tools {
  position: relative;
  z-index: 1;
  padding: 0 0 96px;
  background: #090A0C;
  color: #E8E4DD;
  font-family: Outfit, sans-serif;
}
.sahc-tools *,
.sahc-tools *::before,
.sahc-tools *::after {
  box-sizing: border-box;
}
.sahc-tools :where(h2, h3, p) {
  margin: 0;
}

.sahc-tools__container {
  width: min(1280px, 100% - 48px);
  margin-inline: auto;
}

/* ---- Section heading ---- */
.sahc-tools__head {
  max-width: 62ch;
  margin: 0 auto 56px;
  text-align: center;
}

.sahc-tools .sahc-tools__heading {
  font-family: Grift, Outfit, sans-serif;
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #E8E4DD;
  text-wrap: balance;
}

.sahc-tools .sahc-tools__sub {
  max-width: 52ch;
  margin: 12px auto 0;
  font-size: 17px;
  line-height: 1.5;
  color: #8A8690;
  text-wrap: pretty;
}

/* ---- InferenceX feature panel ---- */
.sahc-tools__feature {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
  min-height: 400px;
  overflow: hidden;
  border: 1px solid rgba(232, 228, 221, 0.08);
  border-radius: 20px;
  background: linear-gradient(180deg, #0B0B10, #08080C);
}

.sahc-tools__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(36px, 4.2vw, 60px);
}

.sahc-tools .sahc-tools__eyebrow {
  margin-bottom: 16px;
  color: #F7B041;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sahc-tools .sahc-tools__title {
  max-width: 20ch;
  font-family: Grift, Outfit, sans-serif;
  font-size: clamp(26px, 2.5vw, 34px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #E8E4DD;
  text-wrap: balance;
}

.sahc-tools .sahc-tools__desc {
  max-width: 46ch;
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.6;
  color: #8A8690;
  text-wrap: pretty;
}

.sahc-tools__actions {
  display: flex;
  gap: 12px;
  margin-top: 28px;
}

.sahc-tools__matrix {
  position: relative;
  min-height: 320px;
  /* stylelint-disable-next-line no-descending-specificity -- Intentional cascade order for this section. */
}
.sahc-tools__matrix canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* Caption doubles as the link to the repository. */
.sahc-tools .sahc-tools__caption {
  position: absolute;
  right: 20px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  color: #6F6B78;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease;
  /* stylelint-disable-next-line no-descending-specificity -- Intentional cascade order for this section. */
}
.sahc-tools .sahc-tools__caption svg {
  flex-shrink: 0;
}
.sahc-tools .sahc-tools__caption:hover, .sahc-tools .sahc-tools__caption:focus-visible {
  color: #E8E4DD;
  background: rgba(232, 228, 221, 0.06);
}

/* ---- Three figures ---- */
.sahc-tools__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 64px;
}

.sahc-tools .sahc-tool {
  display: block;
  padding: 0 40px 4px 0;
  color: #E8E4DD;
  text-decoration: none;
}
.sahc-tools .sahc-tool + .sahc-tool {
  padding-left: 40px;
  border-left: 1px solid rgba(232, 228, 221, 0.08);
}

.sahc-tool__art {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 260px;
  margin: 0 0 28px;
}

.sahc-tools .sahc-tool__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  color: #E8E4DD;
  /* stylelint-disable-next-line no-descending-specificity -- Intentional cascade order for this section. */
}
.sahc-tools .sahc-tool__title svg {
  color: #8A8690;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease, color 0.25s ease;
}

.sahc-tools .sahc-tool:hover .sahc-tool__title svg,
.sahc-tools .sahc-tool:focus-visible .sahc-tool__title svg {
  opacity: 1;
  transform: none;
  color: #F7B041;
}

.sahc-tools .sahc-tool__desc {
  max-width: 36ch;
  margin-top: 10px;
  font-size: 15.5px;
  line-height: 1.6;
  color: #8A8690;
  text-wrap: pretty;
}

/* Entrance: once the script arms the section, blocks start low and soft and
   settle when they scroll into view, each card a beat after the last. */
[data-sahc-reveal-root].is-armed [data-sahc-reveal] {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(6px);
  transition: opacity 0.9s ease, transform 1s cubic-bezier(0.22, 1, 0.36, 1), filter 0.9s ease;
  transition-delay: var(--sahc-reveal-delay, 0s);
}

[data-sahc-reveal-root].is-armed [data-sahc-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

.sahc-tools.is-armed .sahc-tool .sahc-fig {
  transform: translateY(14px) scale(0.96);
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1), stroke 0.4s ease;
  transition-delay: calc(var(--sahc-reveal-delay, 0s) + 0.15s);
}

.sahc-tools.is-armed .sahc-tool.is-in .sahc-fig {
  transform: none;
}

/* Line figures: thin off-white strokes, amber accents on hover. */
/* stylelint-disable-next-line no-descending-specificity -- Intentional cascade order for this section. */
.sahc-fig {
  width: 100%;
  max-width: 320px;
  height: auto;
  overflow: visible;
  fill: none;
  stroke: rgba(232, 228, 221, 0.3);
  stroke-width: 1;
  stroke-linejoin: round;
  stroke-linecap: round;
  transition: stroke 0.4s ease;
}

/* stylelint-disable-next-line no-descending-specificity -- Intentional cascade order for this section. */
:is(.sahc-tool, .sahc-tile):is(:hover, :focus-visible) .sahc-fig {
  stroke: rgba(232, 228, 221, 0.46);
}

.sahc-fig__thin {
  stroke: rgba(232, 228, 221, 0.14);
}

.sahc-fig__top {
  fill: #090A0C;
}

.sahc-fig__lift {
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--d, 0s);
}

:is(.sahc-tool, .sahc-tile):is(:hover, :focus-visible) .sahc-fig__lift {
  transform: translateY(calc(var(--lift, 0) * -1px));
}

/* Inside a tile the trays and pins lift less, so they stay within it. */
.sahc-models .sahc-tile:is(:hover, :focus-visible) .sahc-fig__lift {
  transform: translateY(calc(var(--lift, 0) * -0.6px));
}

.sahc-fig__led,
.sahc-fig__die {
  fill: transparent;
  stroke: rgba(232, 228, 221, 0.3);
  transition: fill 0.35s ease, stroke 0.35s ease;
  transition-delay: var(--d, 0s);
}

.sahc-fig__die {
  stroke: transparent;
}

:is(.sahc-tool, .sahc-tile):is(:hover, :focus-visible) .sahc-fig__led {
  fill: #F7B041;
  stroke: #F7B041;
}

:is(.sahc-tool, .sahc-tile):is(:hover, :focus-visible) .sahc-fig__die {
  fill: rgba(247, 176, 65, 0.85);
  stroke: #F7B041;
}

.sahc-fig__scan {
  fill: #F7B041;
  stroke: none;
  opacity: 0;
  transform: translateY(-125px);
}

:is(.sahc-tool, .sahc-tile):is(:hover, :focus-visible) .sahc-fig__scan {
  animation: sahc-scan 1.6s cubic-bezier(0.45, 0, 0.55, 1) forwards;
}

@keyframes sahc-scan {
  0% {
    opacity: 0;
    transform: translateY(-125px);
  }
  12% {
    opacity: 0.9;
  }
  88% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translateY(125px);
  }
}
.sahc-fig__route {
  stroke: rgba(247, 176, 65, 0.7);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--d, 0s);
}

:is(.sahc-tool, .sahc-tile):is(:hover, :focus-visible) .sahc-fig__route {
  stroke-dashoffset: 0;
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .sahc-tools .sahc-tool {
    padding-right: 24px;
  }
  .sahc-tools .sahc-tool + .sahc-tool {
    padding-left: 24px;
  }
  .sahc-tool__art {
    height: 240px;
  }
}
@media (max-width: 900px) {
  .sahc-tools {
    padding-bottom: 80px;
  }
  .sahc-tools__container {
    width: calc(100% - 40px);
  }
  .sahc-tools__feature {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .sahc-tools__copy {
    padding: 36px 24px;
  }
  .sahc-tools__matrix {
    min-height: 280px;
  }
  .sahc-tools__row {
    grid-template-columns: 1fr;
    margin-top: 56px;
  }
  .sahc-tools .sahc-tool {
    padding: 32px 0;
    border-top: 1px solid rgba(232, 228, 221, 0.08);
  }
  .sahc-tools .sahc-tool + .sahc-tool {
    padding-left: 0;
    border-left: 0;
  }
  .sahc-tool__art {
    height: 220px;
    margin: 0 0 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-sahc-reveal-root].is-armed [data-sahc-reveal],
  .sahc-tools.is-armed .sahc-tool .sahc-fig {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
  .sahc-fig__lift,
  .sahc-fig__led,
  .sahc-fig__die,
  .sahc-fig__route {
    transition: none;
  }
  .sahc-fig__scan {
    animation: none !important;
  }
}
/* ==========================================================================
   Research: the free newsletter, six latest posts as Linear "Now" cards
   ========================================================================== */
.sahc-research {
  position: relative;
  z-index: 1;
  padding: 24px 0 128px;
  background: #090A0C;
  color: #E8E4DD;
  font-family: Outfit, sans-serif;
}
.sahc-research *,
.sahc-research *::before,
.sahc-research *::after {
  box-sizing: border-box;
}
.sahc-research :where(h2, p) {
  margin: 0;
}

.sahc-research__container {
  position: relative;
  z-index: 1;
  width: min(1280px, 100% - 48px);
  margin-inline: auto;
}

.sahc-research__head {
  max-width: 64ch;
  margin: 0 auto 64px;
  text-align: center;
}

.sahc-research .sahc-research__heading {
  font-family: Grift, Outfit, sans-serif;
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #E8E4DD;
  text-wrap: balance;
}

.sahc-research__accent {
  color: #F7B041;
}

.sahc-research .sahc-research__sub {
  max-width: 62ch;
  margin: 14px auto 0;
  font-size: 17px;
  line-height: 1.5;
  color: #8A8690;
  text-wrap: pretty;
}

/* Three columns; the gutter is padding so a hairline can sit between them,
   matching the dividers in the tools row above. */
.sahc-research__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

/* A quiet card: one hairline, the picture inset, the copy below. On hover
   the hairline takes Substack's orange. */
/* A card whose picture is its top: the frame runs down the sides and along
   the bottom only, and the picture reaches over the frame's ends to the
   card's own edges and rounded corners. */
.sahc-research .sahc-post {
  --sahc-post-pad: 12px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0 var(--sahc-post-pad) 22px;
  border: 1px solid rgba(232, 228, 221, 0.09);
  border-top: 0;
  border-radius: 12px;
  background: rgba(232, 228, 221, 0.02);
  color: #E8E4DD;
  text-decoration: none;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.sahc-research .sahc-post:hover, .sahc-research .sahc-post:focus-visible {
  border-color: rgba(232, 228, 221, 0.2);
  background: rgba(232, 228, 221, 0.03);
}

.sahc-post__media {
  position: relative;
  display: block;
  margin: 0 calc(-1 * (var(--sahc-post-pad) + 1px));
  aspect-ratio: 7/4;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  background: #0D0D12;
}

/* Pinned to the tile so the theme's global img { height: auto } cannot
   letterbox the picture. */
.sahc-research .sahc-post__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), filter 0.4s ease;
}

/* No image in the feed item: a quiet tile with the circuit lines. */
.sahc-post__media--empty::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(232, 228, 221, 0.08);
  mask-image: url("../../img/right-pattern-full.svg");
  mask-size: 140% auto;
  mask-position: right top;
  mask-repeat: no-repeat;
}

.sahc-research .sahc-post:hover .sahc-post__media img,
.sahc-research .sahc-post:focus-visible .sahc-post__media img {
  transform: scale(1.03);
  filter: saturate(1);
}

.sahc-post__title {
  display: block;
  margin-top: 20px;
  padding: 0 6px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.33;
  letter-spacing: -0.01em;
  color: #E8E4DD;
  text-wrap: pretty;
}

/* The MVP card's light under the picture: a hairline of the amber along the
   seam and a soft glow falling into the text, both on hover. */
.sahc-post__media::after {
  content: "";
  position: absolute;
  right: 12%;
  bottom: 0;
  left: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(247, 176, 65, 0.45), transparent);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.sahc-research .sahc-post__title {
  position: relative;
  /* Starts at the seam: the title's top margin above it. */
}
.sahc-research .sahc-post__title::before {
  content: "";
  position: absolute;
  top: -20px;
  right: 5%;
  left: 5%;
  height: 50px;
  background: radial-gradient(ellipse at 50% 0%, rgba(247, 176, 65, 0.07), transparent 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.sahc-research .sahc-post:hover .sahc-post__media::after,
.sahc-research .sahc-post:focus-visible .sahc-post__media::after,
.sahc-research .sahc-post:hover .sahc-post__title::before,
.sahc-research .sahc-post:focus-visible .sahc-post__title::before {
  opacity: 1;
}

.sahc-post__excerpt {
  display: -webkit-box;
  margin-top: 10px;
  padding: 0 6px;
  overflow: hidden;
  font-size: 16px;
  line-height: 1.55;
  color: #8A8690;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Pushed to the bottom so author and date line up across a row whatever the
   title and excerpt lengths. */
.sahc-post__meta {
  display: flex;
  align-items: center;
  margin-top: auto;
  padding: 22px 6px 0;
  font-size: 13px;
  line-height: 1.5;
  color: #6F6B78;
  /* stylelint-disable-next-line no-descending-specificity -- Intentional cascade order for this section. */
}
.sahc-post__meta svg {
  margin-left: 8px;
  color: #F7B041;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.sahc-research .sahc-post:hover .sahc-post__meta svg,
.sahc-research .sahc-post:focus-visible .sahc-post__meta svg {
  opacity: 1;
  transform: none;
}

.sahc-post__dot {
  margin: 0 6px;
}

/* stylelint-disable-next-line no-descending-specificity -- Intentional cascade order for this section. */
.sahc-research img {
  animation: none !important;
  background: none !important;
}

/* Two kit buttons under the grid: subscribe (amber) and the archive (ghost). */
.sahc-research .sahc-research__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 56px;
}

@media (max-width: 1100px) {
  .sahc-research__grid {
    gap: 20px;
  }
  .sahc-research .sahc-post {
    --sahc-post-pad: 10px;
    padding: 0 var(--sahc-post-pad) 18px;
  }
  .sahc-post__title {
    font-size: 18px;
  }
}
@media (max-width: 900px) {
  .sahc-research {
    padding: 16px 0 88px;
  }
  .sahc-research__container {
    width: calc(100% - 40px);
  }
  .sahc-research__head {
    margin-bottom: 44px;
  }
  .sahc-research__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
}
@media (max-width: 600px) {
  .sahc-research__grid {
    grid-template-columns: 1fr;
  }
}
/* ==========================================================================
   Voices: two slow rows of attributed quotes
   ========================================================================== */
.sahc-voices {
  position: relative;
  z-index: 1;
  padding: 48px 0 128px;
  background: #090A0C;
  color: #E8E4DD;
  font-family: Outfit, sans-serif;
}
.sahc-voices *,
.sahc-voices *::before,
.sahc-voices *::after {
  box-sizing: border-box;
}
.sahc-voices :where(h2, p, figure, blockquote) {
  margin: 0;
}

/* ---- Wall ---- */
.sahc-voices__wall {
  margin-top: 0;
}

.sahc-voices .sahc-voices__title {
  margin: 0 auto 72px;
  padding: 0 24px;
  font-family: Grift, Outfit, sans-serif;
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #E8E4DD;
  text-align: center;
}

.sahc-voices__rows {
  position: relative;
  display: grid;
  gap: 20px;
  /* Bottom fade, like the MVP wall: the lower row sinks into the page. */
}
.sahc-voices__rows::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  height: 30%;
  background: linear-gradient(180deg, rgba(9, 10, 12, 0), rgba(9, 10, 12, 0.5) 58%, #090A0C);
  pointer-events: none;
}

/* Each row scrolls its full first copy, then repeats seamlessly. The mask
   fades the ends; hovering a row holds it still. */
.sahc-marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.sahc-marquee__track {
  display: flex;
  width: max-content;
  animation: sahc-marquee 120s linear infinite;
}

.sahc-marquee--reverse .sahc-marquee__track {
  animation-direction: reverse;
  animation-duration: 140s;
}

.sahc-marquee:hover .sahc-marquee__track {
  animation-play-state: paused;
}

.sahc-marquee__set {
  display: flex;
  gap: 20px;
  padding-right: 20px;
}

@keyframes sahc-marquee {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}
/* Post card */
.sahc-voice {
  position: relative;
  flex: 0 0 auto;
  width: 380px;
  padding: 22px 24px 24px;
  border: 1px solid rgba(232, 228, 221, 0.08);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 45%), #09090D;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.sahc-voice::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 80% at 50% 0%, rgba(247, 176, 65, 0.08), transparent 60%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.sahc-voice:hover {
  border-color: rgba(247, 176, 65, 0.35);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.sahc-voice:hover::after {
  opacity: 1;
}

.sahc-voice__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sahc-voice__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: "JetBrains Mono", monospace;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #E8E4DD;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.12), transparent 55%), hsl(var(--sahc-hue, 36), 18%, 22%);
  border: 1px solid rgba(232, 228, 221, 0.14);
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  font-size: 12px;
}

.sahc-voice__who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sahc-voice__name {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  color: #E8E4DD;
}

.sahc-voice__handle {
  font-size: 13px;
  line-height: 1.3;
  color: #6F6B78;
}

.sahc-voice__mark {
  flex-shrink: 0;
  margin-left: auto;
  color: #4E4B56;
  transition: color 0.3s ease;
}

.sahc-voice:hover .sahc-voice__mark {
  color: #E8E4DD;
}

.sahc-voices .sahc-voice__text {
  margin-top: 16px;
  font-size: 15.5px;
  line-height: 1.6;
  color: #C9C5BE;
  text-wrap: pretty;
}

@media (max-width: 900px) {
  .sahc-voices {
    padding: 24px 0 88px;
  }
  .sahc-voices .sahc-voices__title {
    margin-bottom: 36px;
  }
  .sahc-voice {
    width: 300px;
    padding: 18px 20px 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sahc-marquee {
    mask-image: none;
  }
  .sahc-marquee__track {
    width: auto;
    animation: none;
    overflow-x: auto;
  }
  .sahc-marquee__set[aria-hidden=true] {
    display: none;
  }
  .sahc-voice {
    transition: none;
  }
}
/* ==========================================================================
   Contact: big closing title, then the copy slides left for the sales form
   ========================================================================== */
.sahc-cta {
  position: relative;
  z-index: 1;
  padding: 48px 0 60px;
  background: #090A0C;
  color: #E8E4DD;
  font-family: Outfit, sans-serif;
  overflow: clip;
}
.sahc-cta *,
.sahc-cta *::before,
.sahc-cta *::after {
  box-sizing: border-box;
}
.sahc-cta :where(h2, p, form) {
  margin: 0;
}

/* The models section's circuit lines and amber wave (the same spans, masks
   and keyframes). The script lights it once most of the section is on
   screen; the lines rise and settle as they fade in. */
.sahc-cta__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 28px, 0) scale(1.03);
  transition: opacity 1.5s ease, transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.sahc-cta__bg.is-lit {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .sahc-cta__bg {
    transition: opacity 0.6s ease;
  }
}
/* Two equal columns. Closed: the intro (column one) is shifted right by half
   its width, which centres it in the container; the panel waits off to the
   right. Open: the intro slides home and the panel fades in. */
.sahc-cta__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 48px;
  width: min(1280px, 100% - 48px);
  min-height: min(88vh, 820px);
  margin-inline: auto;
}

.sahc-cta__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: translate3d(calc(50% + 24px), 0, 0);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.sahc-cta.is-open .sahc-cta__intro {
  transform: none;
}

.sahc-cta .sahc-cta__title {
  font-family: Grift, Outfit, sans-serif;
  font-size: clamp(36px, 4.4vw, 66px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #F2EFEA;
}

/* Exactly two lines: one span each, unbroken on desktop. */
.sahc-cta__line {
  display: block;
}

@media (min-width: 901px) {
  .sahc-cta__line {
    white-space: nowrap;
  }
}
.sahc-cta .sahc-cta__desc {
  max-width: 54ch;
  margin-top: 26px;
  font-size: 18px;
  line-height: 1.6;
  color: #8A8690;
  text-wrap: pretty;
}

.sahc-cta__actions {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}

.sahc-cta .sahc-cta__open {
  gap: 10px;
  /* stylelint-disable-next-line no-descending-specificity -- Intentional cascade order for this section. */
  /* stylelint-disable-next-line no-descending-specificity -- Intentional cascade order for this section. */
}
.sahc-cta .sahc-cta__open svg {
  transition: transform 0.25s ease;
}
.sahc-cta .sahc-cta__open:hover svg {
  transform: translateX(3px);
}

.sahc-cta.is-open .sahc-cta__open {
  opacity: 0.55;
  pointer-events: none;
}

.sahc-cta__panel {
  width: min(100%, 540px);
  margin-left: auto;
  opacity: 0;
  transform: translate3d(56px, 0, 0);
  visibility: hidden;
  transition: opacity 0.7s ease 0.25s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.25s, visibility 0s linear 1s;
}

.sahc-cta.is-open .sahc-cta__panel {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: opacity 0.7s ease 0.25s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.25s, visibility 0s;
}

.sahc-cta__card {
  padding: clamp(28px, 2.8vw, 40px);
  border: 1px solid rgba(232, 228, 221, 0.09);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 40%), #09090D;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.sahc-cta .sahc-cta__note {
  margin: 0 0 26px;
  font-size: 15px;
  line-height: 1.55;
  color: #8A8690;
}

/* ---- Form (Jetpack markup, and the same markup in the preview) ---- */
.sahc-cta .sahc-jetpack-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 16px;
  /* Name and work email share the first row; everything after runs full width. */
}
.sahc-cta .sahc-jetpack-form .grunion-field-wrap {
  min-width: 0;
}
.sahc-cta .sahc-jetpack-form .grunion-field-wrap:nth-child(n+3),
.sahc-cta .sahc-jetpack-form .grunion-field-textarea-wrap,
.sahc-cta .sahc-jetpack-form .wp-block-jetpack-button,
.sahc-cta .sahc-jetpack-form .contact-form-submission,
.sahc-cta .sahc-jetpack-form .sahc-cta__privacy,
.sahc-cta .sahc-jetpack-form .sahc-cta__preview {
  grid-column: 1/-1;
}
.sahc-cta .sahc-jetpack-form .grunion-field-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #B8B4AD;
}
.sahc-cta .sahc-jetpack-form .grunion-label-required {
  margin-left: 3px;
  color: #F7B041;
}
.sahc-cta .sahc-jetpack-form .grunion-field {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  border: 1px solid rgba(232, 228, 221, 0.12);
  border-radius: 10px;
  background: #0D0D12;
  color: #E8E4DD;
  font-family: Outfit, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.sahc-cta .sahc-jetpack-form .grunion-field::placeholder {
  color: #6F6B78;
}
.sahc-cta .sahc-jetpack-form .grunion-field:hover {
  border-color: rgba(232, 228, 221, 0.22);
}
.sahc-cta .sahc-jetpack-form .grunion-field:focus {
  border-color: rgba(247, 176, 65, 0.7);
  background: #0F0F15;
  box-shadow: 0 0 0 3px rgba(247, 176, 65, 0.16);
}
.sahc-cta .sahc-jetpack-form textarea.grunion-field {
  min-height: 168px;
  resize: vertical;
}
.sahc-cta .sahc-jetpack-form .contact-form__input-error {
  display: none;
  margin-top: 6px;
  font-size: 12px;
  color: #E06347;
}
.sahc-cta .sahc-jetpack-form .contact-form__input-error.has-errors {
  display: flex;
}
.sahc-cta .sahc-jetpack-form .wp-block-jetpack-button {
  margin-top: 10px;
}
.sahc-cta .sahc-jetpack-form .wp-block-jetpack-button .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 12px 20px;
  border: 0;
  border-radius: 8px;
  background: #F7B041;
  color: #060608;
  font-family: Outfit, sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.sahc-cta .sahc-jetpack-form .wp-block-jetpack-button .wp-block-button__link:hover {
  background: #FFC55F;
}
.sahc-cta .sahc-jetpack-form .wp-block-jetpack-button .wp-block-button__link:active {
  transform: scale(0.985);
}

.sahc-cta .sahc-cta__privacy {
  margin: 4px 0 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: #6F6B78;
}

.sahc-cta .sahc-cta__preview {
  display: none;
  margin: 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  line-height: 1.5;
  color: #6F6B78;
}
.sahc-cta .sahc-cta__preview.is-shown {
  display: block;
}

@media (max-width: 1100px) {
  .sahc-cta .sahc-cta__title {
    font-size: clamp(36px, 5vw, 60px);
  }
}
@media (max-width: 900px) {
  .sahc-cta {
    padding: 24px 0 44px;
  }
  .sahc-cta__inner {
    grid-template-columns: 1fr;
    gap: 32px;
    width: calc(100% - 40px);
    min-height: 0;
    padding: 40px 0 0;
  }
  .sahc-cta__intro {
    transform: none;
    transition: none;
  }
  /* Stacked: the panel unfolds beneath the intro instead of sliding in. */
  .sahc-cta__panel {
    display: none;
    width: 100%;
    transform: none;
  }
  .sahc-cta.is-open .sahc-cta__panel {
    display: block;
  }
  .sahc-cta .sahc-jetpack-form {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sahc-cta__intro,
  .sahc-cta__panel {
    transition: none;
  }
}
/* ==========================================================================
   FAQ: sticky heading beside five dark question cards
   ========================================================================== */
.sahc-faq {
  position: relative;
  z-index: 1;
  padding: 24px 0 120px;
  background: #090A0C;
  color: #E8E4DD;
  font-family: Outfit, sans-serif;
}
.sahc-faq *,
.sahc-faq *::before,
.sahc-faq *::after {
  box-sizing: border-box;
}
.sahc-faq :where(h2, h3, p) {
  margin: 0;
}

.sahc-faq__container {
  display: grid;
  grid-template-columns: minmax(0, 0.38fr) minmax(0, 0.62fr);
  gap: 64px;
  align-items: start;
  width: min(1280px, 100% - 48px);
  margin-inline: auto;
}

.sahc-faq .sahc-faq__title {
  font-family: Grift, Outfit, sans-serif;
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: #E8E4DD;
  text-wrap: balance;
}

.sahc-faq__accent {
  color: #F7B041;
}

.sahc-faq .sahc-faq__sub {
  max-width: 34ch;
  margin-top: 18px;
  font-size: 17px;
  line-height: 1.55;
  color: #8A8690;
  text-wrap: pretty;
}

.sahc-faq .sahc-faq__cta {
  margin-top: 28px;
}

.sahc-faq__list {
  display: grid;
  gap: 10px;
}

/* One dark card per question; the open card lifts and takes an amber edge. */
.sahc-faq__item {
  position: relative;
  background: #09090D;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}
.sahc-faq__item:hover {
  border-color: rgba(255, 255, 255, 0.12);
}
.sahc-faq__item.is-open {
  background: #0B0B10;
  border-color: rgba(247, 176, 65, 0.34);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}

.sahc-faq .sahc-faq__q {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 21px 22px 21px 24px;
  border: 0;
  background: transparent;
  color: #E8E4DD;
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  appearance: none;
  transition: color 0.2s ease;
}
.sahc-faq .sahc-faq__q:focus-visible {
  outline: 2px solid rgba(247, 176, 65, 0.7);
  outline-offset: -6px;
  border-radius: 8px;
}

.sahc-faq__item.is-open .sahc-faq__q {
  color: #E8E4DD;
}

/* Chevron in a ring; it points up while the card is open. */
.sahc-faq__icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  color: #8A8690;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
  /* stylelint-disable-next-line no-descending-specificity -- Intentional cascade order for this section. */
}
.sahc-faq__icon svg {
  width: 12px;
  height: 12px;
}

.sahc-faq__q:hover .sahc-faq__icon {
  border-color: rgba(255, 255, 255, 0.22);
  color: #E8E4DD;
}

.sahc-faq__item.is-open .sahc-faq__icon {
  border-color: rgba(247, 176, 65, 0.45);
  background: rgba(247, 176, 65, 0.1);
  color: #F7B041;
  transform: rotate(180deg);
}

/* The answer opens by animating its grid row from 0fr to 1fr, so no height
   is measured; the text fades in a beat later and runs the full width. */
.sahc-faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.sahc-faq__a-in {
  min-height: 0;
  overflow: hidden;
}

.sahc-faq .sahc-faq__a p {
  padding: 0 24px 24px;
  font-size: 16px;
  line-height: 1.65;
  color: #9B97A1;
  text-wrap: pretty;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.sahc-faq__item.is-open .sahc-faq__a {
  grid-template-rows: 1fr;
}

.sahc-faq__item.is-open .sahc-faq__a p {
  opacity: 1;
  transform: none;
  transition-delay: 0.12s;
}

/* Without the script, every answer stays open. */
.sahc-faq:not(.is-ready) .sahc-faq__a {
  grid-template-rows: 1fr;
}

.sahc-faq:not(.is-ready) .sahc-faq__a p {
  opacity: 1;
  transform: none;
}

@media (max-width: 1099px) {
  .sahc-faq__container {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .sahc-faq .sahc-faq__sub {
    max-width: 52ch;
  }
}
@media (max-width: 760px) {
  .sahc-faq {
    padding: 8px 0 80px;
  }
  .sahc-faq__container {
    width: calc(100% - 40px);
  }
  .sahc-faq__item {
    border-radius: 8px;
  }
  .sahc-faq .sahc-faq__q {
    gap: 14px;
    padding: 17px 16px 17px 18px;
    font-size: 15.5px;
  }
  .sahc-faq .sahc-faq__a p {
    padding: 0 18px 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sahc-v2__quote.is-shown .sahc-v2__quote-text {
    animation: none;
  }
}
/* ==========================================================================
   Drafts gallery: labeled wrappers around concept heroes
   ========================================================================== */
.sahc-drafts {
  background: #090A0C;
}

.sahc-drafts__bar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 44px;
  padding: 0 20px;
  background: rgba(9, 10, 12, 0.85);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8A8690;
}

.sahc-drafts__eyebrow {
  color: #F7B041;
  font-weight: 700;
}

.sahc-drafts__title {
  color: #E8E4DD;
}

.sahc-drafts__link {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #8A8690;
  transition: color 0.2s ease;
}
.sahc-drafts__link:hover {
  color: #E8E4DD;
}

.sahc-draft {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sahc-draft__label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sahc-draft__num {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #F7B041;
  background: rgba(247, 176, 65, 0.12);
  border: 1px solid rgba(247, 176, 65, 0.5);
  border-radius: 4px;
  padding: 3px 7px;
}

.sahc-draft__name {
  margin: 0;
  font-family: Grift, Outfit, sans-serif;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.2px;
  color: #E8E4DD;
}

.sahc-draft__meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8A8690;
}

/* Inside the gallery the hero keeps its own height; no top padding needed. */
.sahc-draft .sahc--v1 {
  padding-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .sahc-v1__text,
  .sahc-v1__webgl,
  .sahc-badge,
  .sahc-badge::after {
    animation: none;
  }
  .sahc-v2__top,
  .sahc-v2__bottom,
  .sahc-v2__title-wrap,
  .sahc-v2__actions,
  .sahc-v2__badge,
  .sahc-v2__shader {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}
/* ==========================================================================
   Phone pass (Claude): the folder tabs, tighter sections
   ========================================================================== */
@media (max-width: 760px) {
  .sahc-v2__wordmark {
    width: min(78vw, 320px);
  }
  /* One rhythm between sections: 32px above, 36px below, plus the theme's
     block gap. */
  .sahc-models {
    padding: 32px 0 36px;
  }
  /* The rail again, at 48px, between two chamfers: the two-step cap would
     take most of a phone's width, so the band ends the way it begins. */
  .sahc-folder__tabs {
    height: 48px;
  }
  .sahc-models .sahc-folder__tab {
    padding: 0 10px;
  }
  .sahc-folder__tab-title {
    font-size: 12.5px;
  }
  .sahc-folder__cap--l,
  .sahc-folder__cap--r {
    flex-basis: 28px;
    width: 28px;
  }
  .sahc-folder__body {
    border-radius: 0 0 18px 18px;
  }
  .sahc-mf__inner {
    padding: 22px 18px;
  }
  .sahc-models .sahc-mf__title {
    font-size: 1.5rem;
  }
  .sahc-tools {
    padding: 32px 0 36px;
  }
  .sahc-tools__head {
    margin-bottom: 36px;
  }
  .sahc-tools .sahc-tools__heading {
    font-size: 26px;
  }
  .sahc-tools .sahc-tools__sub {
    font-size: 16px;
  }
  .sahc-tools__copy {
    padding: 28px 20px;
  }
  .sahc-tools .sahc-tools__title {
    font-size: 23px;
  }
  .sahc-tools .sahc-tools__desc {
    font-size: 15px;
  }
  .sahc-tools .sahc-tool {
    padding: 24px 0;
  }
  .sahc-tool__art {
    height: 190px;
    margin-bottom: 18px;
  }
  .sahc-tools .sahc-tool__desc {
    font-size: 15px;
  }
  .sahc-research {
    padding: 32px 0 36px;
  }
  .sahc-research__head {
    margin-bottom: 32px;
  }
  .sahc-research__grid {
    gap: 16px;
  }
  .sahc-research .sahc-research__heading {
    font-size: 26px;
  }
  .sahc-research .sahc-research__sub {
    font-size: 16px;
  }
  .sahc-post__title {
    font-size: 17px;
  }
  .sahc-research .sahc-post__excerpt {
    font-size: 15px;
  }
  .sahc-voices {
    padding: 32px 0 36px;
  }
  .sahc-voices .sahc-voices__title {
    margin-bottom: 24px;
    font-size: 26px;
  }
  .sahc-voice {
    width: 280px;
    padding: 16px 18px 18px;
  }
  .sahc-voice .sahc-voice__text {
    font-size: 15px;
  }
  .sahc-faq {
    padding: 32px 0 36px;
  }
  .sahc-faq__container {
    gap: 28px;
  }
  .sahc-faq__head {
    text-align: center;
  }
  .sahc-faq .sahc-faq__title {
    font-size: 26px;
  }
  .sahc-faq .sahc-faq__sub {
    margin-inline: auto;
    font-size: 16px;
  }
  .sahc-faq .sahc-faq__q {
    font-size: 15px;
  }
  .sahc-faq .sahc-faq__a p {
    font-size: 15px;
  }
  /* Room under "Talk to Sales" while the form is closed. */
  .sahc-cta {
    padding: 32px 0 72px;
  }
  .sahc-cta__inner {
    padding: 0;
  }
  .sahc-cta .sahc-cta__title {
    font-size: 32px;
  }
  .sahc-cta .sahc-cta__desc {
    font-size: 17px;
  }
}
/*# sourceMappingURL=hero-claude.css.map */