/* Additive styles for sovereign.html only. Layered after styles.css rather than
   edited into it, so the shipped index.html and its shared stylesheet stay
   untouched while this draft is iterated on. */

/* Brand book corrections (brand-book/index_1.html):
   - Type page: the "Display" sample is this exact hero sentence at weight 400
     (Regular). styles.css currently sets .hero__promise to fw-medium — that's
     the "Heading" role's weight, not Display's.
   - Type page: the "Heading" sample ("Choose where AI runs") is weight 500.
     styles.css's h1/h2/h3 base rule is fw-normal, so every section h2 on this
     page inherits 400 with no override — one step light of spec.
   - Colour page: Brand Purple is scoped to "commerce · upgrades · paid
     capacity · order flows only." The shared .final-section background is a
     blue-purple gradient, which puts purple on a non-commerce closing CTA.
     The brand book's own closing page (.blue) is solid Brand Blue — used
     here instead. */
.hero__promise {
  font-weight: var(--fw-normal);
}

.section-heading h2 {
  font-weight: var(--fw-medium);
  font-size: clamp(36px, 5vw, 68px);
}

.final-section h2 {
  font-weight: var(--fw-medium);
  font-size: clamp(32px, 5.6vw, 68px);
}

.final-section {
  background: var(--brand-blue);
}

/* Hero, centered variant: text block stacked and centred (langdock.com's
   pattern), with the video panel in normal flow below rather than beside it
   — so the section grows to fit both instead of squeezing a diagram into
   whatever height was left over. Overrides the shared .hero (fixed height,
   grid, left-aligned copy column), scoped to this page only. */
.hero--centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: auto;
  min-height: auto;
  max-height: none;
  padding: 96px clamp(16px, 2.5vw, 40px) 0;
  overflow: visible;
}

/* The shared dot texture fades in from the left, weighted toward the diagram
   that used to sit on the right. Nothing sits off-centre here anymore, so it
   reads evenly across the whole section instead. */
.hero--centered::after {
  mask-image: none;
}

.hero--centered .hero__copy {
  width: 100%;
  max-width: 920px;
  margin: 0;
  padding-bottom: 0;
  text-align: center;
}

/* Wider column than the shared 720px cap, with a bigger ceiling on the
   fluid clamp so the headline actually uses the extra width instead of
   floating in the middle of it. */
.hero--centered .hero__promise {
  max-width: 900px;
  font-size: clamp(32px, 5.4vw, 72px);
}

.hero--centered .hero__lede {
  max-width: 640px;
  margin: 0 auto 32px;
}

.hero--centered .hero__actions {
  justify-content: center;
}

.hero__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 14px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}

/* Chips, not inline text — these are trust signals doing real work, so they
   get their own weight (border, fill, brighter type) instead of blending
   into the muted copy around them. */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-pill);
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.07);
  font-size: 14px;
  font-weight: var(--fw-medium);
}

.hero-badge svg {
  width: 18px;
  height: 18px;
  color: var(--brand-cyan);
}

/* The video panel: full width up to a cap, centred below the copy, in
   normal flow (not the shared .hero__visual, which is absolutely positioned
   for the old side-by-side layout and would fight this one). Widescreen
   rather than the old near-square ratio — this is the main event now, not a
   side illustration, and 16:9 reads as "video" at a glance. */
.hero__video-wrap {
  width: 100%;
  max-width: 1320px;
  margin: 64px auto 0;
}

.hero-video {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-card-lg);
  background:
    radial-gradient(circle at 30% 20%, rgba(18, 200, 255, 0.24), transparent 55%),
    radial-gradient(circle at 75% 85%, rgba(20, 71, 220, 0.32), transparent 60%),
    var(--brand-black);
}

.hero-video::before {
  position: absolute;
  inset: 0;
  content: "";
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.14) 1px, transparent 1.4px);
  background-size: 24px 24px;
  opacity: 0.5;
}

.hero-video--preview::before {
  display: none;
}

/* No frame here — the screenshot bleeds straight into the section edge
   instead of sitting in a bordered, rounded card. */
.hero-video--preview {
  border: 0;
  border-radius: 0;
  background: none;
}

.hero-video__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.hero-video__play {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  color: var(--brand-black);
  background: white;
  cursor: pointer;
  transition: transform 220ms ease, background-color 220ms ease;
}

.hero-video__play:hover,
.hero-video__play:focus-visible {
  background: var(--brand-cyan);
  transform: scale(1.08);
}

.hero-video__play svg {
  width: 26px;
  height: 26px;
  margin-left: 2px;
}

.hero-video__caption {
  position: absolute;
  z-index: 1;
  left: 28px;
  bottom: 24px;
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  font-weight: var(--fw-medium);
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  background: rgba(38, 30, 61, 0.78);
  backdrop-filter: blur(8px);
}

.hero-video__stamp {
  position: absolute;
  z-index: 1;
  right: 24px;
  bottom: 28px;
  margin: 0;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  color: rgba(255, 255, 255, 0.68);
  background: rgba(255, 255, 255, 0.1);
  font-size: 10px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-footer__meta {
  display: flex;
  align-items: center;
  gap: 18px;
}

.site-footer__meta p {
  margin: 0;
}

.site-footer__meta a {
  color: var(--text-body);
  font-size: 13px;
}

@media (max-width: 640px) {
  .site-footer__meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
}

@media (max-width: 640px) {
  .hero--centered {
    padding: 72px 24px 0;
  }

  .hero__video-wrap {
    margin-top: 48px;
  }
}

/* Platform nav dropdown. Distinct class names from .nav-group / .nav-menu so
   frontpage.js's singular querySelector(".nav-group__trigger") keeps finding
   only the built-for trigger — sovereign.js drives this one instead. Kept as
   a click-toggle for the same reason the built-for menu is: hover menus are
   unreachable on touch. */
.platform-group {
  position: relative;
}

.platform-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  color: var(--text-body);
  background: transparent;
  font-size: 14px;
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: color 180ms ease;
}

.platform-trigger:hover,
.platform-trigger[aria-expanded="true"] {
  color: var(--brand-blue);
}

.platform-trigger[aria-expanded="true"] .nav-group__chevron {
  transform: translateY(1px) rotate(225deg);
}

.platform-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 18px);
  left: 0;
  width: 400px;
  padding: 10px;
  border: 1px solid var(--border-base);
  border-radius: 18px;
  background: white;
  box-shadow: 0 26px 60px rgba(38, 30, 61, 0.16);
}

.platform-menu[hidden] {
  display: none;
}

.platform-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 11px 12px;
  border-radius: 14px;
  text-decoration: none;
  transition: background-color 200ms ease, padding-left 200ms ease;
}

.platform-item:hover,
.platform-item:focus-visible {
  padding-left: 16px;
  background: var(--bg-soft-blue);
}

.platform-item__icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-top: 1px;
  border-radius: 10px;
  color: var(--brand-blue);
  background: var(--bg-soft-blue);
  transition: transform 220ms ease, color 220ms ease, background-color 220ms ease;
}

.platform-item__icon svg {
  width: 18px;
  height: 18px;
}

.platform-item:hover .platform-item__icon,
.platform-item:focus-visible .platform-item__icon {
  color: white;
  background: var(--brand-blue);
  transform: scale(1.08);
}

.platform-item__body {
  flex: 1;
  min-width: 0;
}

.platform-item__title {
  display: block;
  color: var(--text-heading);
  font-size: 15px;
  font-weight: var(--fw-medium);
}

.platform-item__desc {
  display: block;
  margin-top: 3px;
  color: var(--text-body);
  font-size: 13px;
  font-weight: var(--fw-normal);
  line-height: 1.45;
}

.platform-item__arrow {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 11px;
  color: var(--brand-blue);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 200ms ease, transform 200ms ease;
}

.platform-item:hover .platform-item__arrow,
.platform-item:focus-visible .platform-item__arrow {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 840px) {
  .platform-menu {
    position: static;
    width: auto;
    margin-top: 8px;
    box-shadow: none;
  }
}

/* Header layout: nav pulled left, next to the brand, instead of sharing
   .site-header's justify-content: space-between with it (which pushed the
   whole nav flush to the right edge). The nav row now grows to fill the
   remaining header width itself, so a right-aligned action can be pinned to
   the far right independently via margin-left: auto, while everything before
   it packs left. */
.site-header {
  position: relative;
  justify-content: flex-start;
  gap: 48px;
}

.site-navigation {
  flex: 1;
}

/* justify-content: flex-start above would otherwise leave the mobile toggle
   sitting against the brand; how-it-works.css does the same for .how-page. */
@media (max-width: 840px) {
  .menu-toggle {
    margin-left: auto;
  }
}

/* Learn dropdown: a plain link list, no icon/description pairing like the
   Platform menu — three destinations with self-explanatory names don't need
   the extra scaffolding. */
.learn-group {
  position: relative;
}

.learn-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  color: var(--text-body);
  background: transparent;
  font-size: 14px;
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: color 180ms ease;
}

.learn-trigger:hover,
.learn-trigger[aria-expanded="true"] {
  color: var(--brand-blue);
}

.learn-trigger[aria-expanded="true"] .nav-group__chevron {
  transform: translateY(1px) rotate(225deg);
}

.learn-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 18px);
  left: 0;
  width: 220px;
  padding: 8px;
  border: 1px solid var(--border-base);
  border-radius: 16px;
  background: white;
  box-shadow: 0 26px 60px rgba(38, 30, 61, 0.16);
}

.learn-menu[hidden] {
  display: none;
}

.learn-menu a {
  display: block;
  padding: 11px 14px;
  border-radius: 10px;
  color: var(--text-heading);
  font-size: 15px;
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: background-color 160ms ease;
}

.learn-menu a:hover,
.learn-menu a:focus-visible {
  background: var(--bg-soft-blue);
}

@media (max-width: 840px) {
  .learn-menu {
    position: static;
    width: auto;
    margin-top: 8px;
    box-shadow: none;
  }
}

/* Solutions: a full-width panel under the entire header, per the
   channable.com reference — not a floating box under the button like the
   other two menus. Anchored to .site-header (the nearest positioned
   ancestor spanning the full viewport width) rather than .solutions-group,
   so left/right: 0 reaches the true page edges regardless of where the
   trigger sits in the nav. */
/* Deliberately not position: relative — .solutions-panel needs to escape up
   to .site-header (position: relative, full viewport width) to anchor
   left/right: 0 against the true page edges. A positioned .solutions-group
   here would become the nearer containing block instead and trap the panel
   to the trigger's own narrow column. */
.solutions-group {
  display: inline-flex;
}

.solutions-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  color: var(--text-body);
  background: transparent;
  font-size: 14px;
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: color 180ms ease;
}

.solutions-trigger:hover,
.solutions-trigger[aria-expanded="true"] {
  color: var(--brand-blue);
}

.solutions-trigger[aria-expanded="true"] .nav-group__chevron {
  transform: translateY(1px) rotate(225deg);
}

.solutions-panel {
  position: absolute;
  z-index: 40;
  top: 100%;
  left: 0;
  right: 0;
  border-top: 1px solid var(--border-base);
  background: white;
  box-shadow: 0 26px 60px rgba(38, 30, 61, 0.12);
}

.solutions-panel[hidden] {
  display: none;
}

.solutions-panel__inner {
  padding: 32px clamp(24px, 5vw, 72px) 40px;
}

.solutions-panel__label {
  margin: 0 0 20px;
  padding-bottom: 16px;
  color: var(--text-body);
  font-size: 12px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-base);
}

.solutions-panel__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}

.solutions-panel__grid a {
  display: block;
  padding: 14px 16px;
  margin: -14px -16px;
  border-radius: 14px;
  text-decoration: none;
  transition: background-color 160ms ease;
}

.solutions-panel__grid a:hover,
.solutions-panel__grid a:focus-visible {
  background: var(--bg-soft-blue);
}

.solutions-panel__grid strong {
  display: block;
  margin-bottom: 6px;
  color: var(--text-heading);
  font-size: 16px;
  font-weight: var(--fw-medium);
}

.solutions-panel__grid span {
  display: block;
  color: var(--text-body);
  font-size: 13px;
  line-height: 1.4;
}

@media (max-width: 900px) {
  .solutions-panel__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 840px) {
  .solutions-panel {
    position: static;
    box-shadow: none;
  }

  .solutions-panel__grid {
    grid-template-columns: 1fr;
  }
}

.stack-section,
.toolkit-section {
  padding: clamp(96px, 11vw, 160px) 0;
}

.stack-section {
  background: white;
}

.toolkit-section {
  background: var(--bg-page);
}

.stack-heading,
.toolkit-heading {
  max-width: 720px;
  margin-bottom: 56px;
}

.stack-heading__lede,
.toolkit-heading__lede {
  max-width: 560px;
  margin: 20px 0 0;
  color: var(--text-body);
  font-size: 19px;
  line-height: 1.6;
}

/* Stack carousel. Deliberately not a bento grid — the toolkit section below
   already owns that pattern, so the stack items (which are peers: API,
   Inference, Agents, RAG, Models and Integrations all sit at the same level,
   none nested under another) get a horizontally-scrolling filmstrip instead.
   Native scroll-snap does the work; the prev/next buttons are a convenience
   layered on top, not a replacement for it — trackpad/touch scroll and
   keyboard-focus-into-view both work with no JS at all. */
.stack-heading--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.carousel-nav {
  display: flex;
  flex-shrink: 0;
  gap: 10px;
  padding-bottom: 4px;
}

.carousel-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--text-heading);
  background: white;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

.carousel-btn svg {
  width: 16px;
  height: 16px;
}

.carousel-btn:hover,
.carousel-btn:focus-visible {
  color: white;
  border-color: var(--brand-blue);
  background: var(--brand-blue);
}

.carousel-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.carousel-btn:disabled:hover {
  color: var(--text-heading);
  border-color: var(--border-strong);
  background: white;
}

/* No breakout-to-viewport trick: the track stays inside .section-shell
   (max-width 1240px, min 24px gutter — see styles.css), and the card size
   below is picked deliberately against that fixed ceiling. At the 1240px
   cap, 3 cards + gaps leave an ~88px slice of the 4th visible; below the
   cap the shell shrinks 1:1 with the viewport so the same ratio roughly
   holds. A slice that size reads as "there's more," not as a rendering
   glitch — the point of doing the math instead of eyeballing it. */
.stack-carousel {
  position: relative;
}

.stack-carousel::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 20px;
  width: 64px;
  content: "";
  background: linear-gradient(90deg, transparent, white);
  pointer-events: none;
}

.stack-track {
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 4px 0 20px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.stack-track::-webkit-scrollbar {
  display: none;
}

.stack-slide {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  width: min(360px, 84vw);
  padding: 40px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card-lg);
  background: var(--bg-card);
  scroll-snap-align: start;
}

.stack-slide__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 28px;
  border-radius: 14px;
  color: var(--brand-blue);
  background: var(--bg-soft-blue);
}

.stack-slide__icon svg {
  width: 24px;
  height: 24px;
}

.stack-slide h3 {
  margin-bottom: 12px;
  font-size: 24px;
  font-weight: var(--fw-medium);
  letter-spacing: -0.025em;
}

.stack-slide p {
  flex-grow: 1;
  max-width: 280px;
  margin-bottom: 24px;
  color: var(--text-body);
  font-size: 16px;
  line-height: 1.55;
}

.bento-arrow--sm {
  align-self: flex-start;
  width: 38px;
  height: 38px;
}

.bento-arrow--sm svg {
  width: 15px;
  height: 15px;
}

@media (max-width: 640px) {
  .stack-slide {
    width: min(300px, 82vw);
    padding: 32px;
  }
}

/* Bento grid, langdock.com-style: uneven-width tonal panels, each with a
   heading, a one-line support statement, a circular arrow link, and a preview
   area. Tones stay inside the team.blue palette (soft blue / brand black /
   card) rather than langdock's earth-tone set, so the rhythm carries over
   without importing a second brand. */
.toolkit-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
}

.bento-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
  overflow: hidden;
  border-radius: var(--radius-card-lg);
  transition: transform 220ms ease;
}

.bento-card:hover {
  transform: translateY(-3px);
}

.bento-card--soft {
  background: var(--bg-soft-blue);
}

.bento-card--card {
  border: 1px solid var(--border-card);
  background: var(--bg-card);
}

.bento-card--dark {
  color: white;
  background: var(--brand-black);
}

/* Odd item counts leave a straggler in a 2-column bento — spanning it full
   width reads as a deliberate closing card instead of a layout gap. */
.bento-card--full {
  grid-column: 1 / -1;
}

.bento-card--dark h3 {
  color: white;
}

.bento-card--dark .bento-card__head p {
  color: rgba(255, 255, 255, 0.66);
}

.bento-card__head h3 {
  margin-bottom: 8px;
  font-size: clamp(21px, 2vw, 27px);
  font-weight: var(--fw-medium);
  letter-spacing: -0.025em;
}

.bento-card__head p {
  max-width: 400px;
  margin-bottom: 20px;
  color: var(--text-body);
  font-size: 15px;
  line-height: 1.55;
}

/* The Langdock "expand" cue: the circle grows and recolours to brand blue on
   hover/focus of the whole card, not just the control itself, so pointing
   anywhere in the card previews the destination. */
.bento-arrow {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--text-heading);
  background: rgba(38, 30, 61, 0.08);
  border-radius: 50%;
  transition: transform 220ms ease, background-color 220ms ease, color 220ms ease;
}

.bento-arrow svg {
  width: 16px;
  height: 16px;
}

.bento-card--dark .bento-arrow {
  color: white;
  background: rgba(255, 255, 255, 0.14);
}

.bento-card:hover .bento-arrow,
.bento-arrow:focus-visible {
  color: white;
  background: var(--brand-blue);
  transform: scale(1.12);
}

.bento-card__preview {
  margin-top: auto;
}

/* Shrinks the shared .shot__frame placeholder (built for the wider features
   accordion) down to bento-card scale rather than duplicating it. */
.bento-card__preview .shot__frame {
  box-shadow: none;
}

.bento-card__preview .shot__canvas {
  grid-template-columns: 64px 1fr;
  min-height: 200px;
  padding: 18px;
  gap: 16px;
}

.bento-card__preview .shot__rail,
.bento-card__preview .shot__body {
  gap: 10px;
}

.bento-card__preview .shot__block {
  min-height: 70px;
}

@media (max-width: 900px) {
  .toolkit-grid {
    grid-template-columns: 1fr;
  }

  .stack-heading--split {
    flex-direction: column;
    align-items: flex-start;
  }

  .carousel-nav {
    padding-bottom: 0;
  }
}

.api-section {
  padding: clamp(96px, 11vw, 160px) 0;
  border-top: 1px solid var(--border-strong);
  background: white;
}

.api-heading {
  max-width: 720px;
  margin-bottom: 56px;
}

.api-showcase {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
}

.api-panel__lede {
  max-width: 480px;
  margin: 0 0 28px;
  color: var(--text-body);
  font-size: 17px;
  line-height: 1.5;
}

.code-block {
  padding: 28px;
  border-radius: var(--radius-card);
  background: var(--brand-black);
  overflow-x: auto;
}

.code-block__lang {
  margin: 0 0 20px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.code-block__code {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-family: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 13.5px;
  line-height: 1.65;
  white-space: pre;
}

.code-block__code .tok-kw {
  color: var(--brand-cyan);
}

.code-block__code .tok-str {
  color: #8fb8ff;
}

.code-block__code .tok-bool {
  color: #ff9a5c;
}

.api-routes {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.api-route {
  padding: 22px 24px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  background: var(--bg-card);
}

.api-route__path {
  margin: 0 0 8px;
  color: var(--text-heading);
  font-family: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 14px;
  font-weight: var(--fw-medium);
}

.api-route__desc {
  margin: 0;
  color: var(--text-body);
  font-size: 14.5px;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .api-showcase {
    grid-template-columns: 1fr;
  }
}

/* Dropdowns and card arrows hidden for now, not deleted — we'll need both
   again later. Elements stay in the DOM because frontpage.js's top-level
   `menuToggle`/`navigation` consts are unguarded; removing the markup would
   throw on load. What is left visible is the shared two-item header nav,
   "Home" and "How it works", identical to how-it-works.html. */
.site-header .platform-group,
.site-header .learn-group,
.site-header .solutions-group,
.site-header .site-navigation > a[href="#toolkit"] {
  display: none;
}

/* The right-aligned action slot used to be "Log in", which carried the
   margin-left: auto that pushed it to the header's right edge. "Log in" is
   gone (it pointed at /admin, which this deployment does not serve), so the
   push lives on "Join the waitlist" — currently hidden with registration
   deactivated, but it lands in the right place when that comes back. */
.site-header .site-navigation .nav-action {
  margin-left: auto;
}

.bento-arrow {
  display: none;
}