/*  Raykast — premium dark theme.
    Restyles the shared Swazm component markup; the palette comes from the
    theme tokens in content/site.yml (generated into theme.css as :root vars).

    Fonts: Manrope (variable, SIL OFL 1.1) self-hosted from /assets/fonts — no
    request to Google, so no third-party data transfer (GDPR-friendly). One
    variable file per subset covers every weight the theme uses (300–800). */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/assets/fonts/manrope-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/assets/fonts/manrope-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

:root {
  /* Fallbacks — theme.css (generated from site.yml) overrides these. */
  --color-bg: #080808;
  --color-surface: #111111;
  --color-surface-soft: #181818;
  --color-ink: #F5F2EC;
  --color-muted: #A8A29A;
  --color-accent: #C8A77A;
  --color-accent-soft: #E4C89A;
  --color-border: rgba(255, 255, 255, 0.12);
  --font-sans: 'Manrope', system-ui, sans-serif;
  --radius: 14px;
  --container: 74rem;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { line-height: 1.05; margin: 0 0 0.5em; font-weight: 300; letter-spacing: -0.03em; }
/* Upper clamp tuned for 1920px+ screens — the old 6.5rem cap was oversized. */
h1 { font-size: clamp(2.9rem, 6vw, 5.2rem); letter-spacing: -0.05em; line-height: 0.95; }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.7rem); }
h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; }

a { color: var(--color-accent); text-decoration: none; }
p { margin: 0 0 1rem; }

.container {
  width: min(100% - 3rem, var(--container));
  margin-inline: auto;
}
.container--narrow { width: min(100% - 3rem, 46rem); }

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

/* Eyebrow — uppercase kicker with a short leading rule */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-muted);
  margin: 0 0 1.25rem;
}
.eyebrow::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: var(--color-accent);
}

/* Buttons — outlined, uppercase, premium */
.button {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.6rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: transparent;
  color: var(--color-ink);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}
.button::after { content: "↗"; font-size: 0.9em; opacity: 0.7; }
.button--ghost::after, .button--light::after { content: none; }
.button--primary { border-color: var(--color-accent); color: var(--color-accent); }
.button--primary:hover { background: var(--color-accent); color: #0b0b0b; }
.button--ghost:hover, .button:hover { border-color: var(--color-ink); }
.button--light { background: var(--color-accent); color: #0b0b0b; border-color: var(--color-accent); }
.button--light:hover { background: var(--color-accent-soft); }

/* Site banner — slim transparency notice above the header (side-venture
   disclosure); renders on every page via SiteHeader. */
.site-banner {
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: 0.8rem;
  border-bottom: 1px solid var(--color-border);
}
.site-banner__inner {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding-block: 0.45rem;
  text-align: left;
}
.site-banner__img {
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  flex: none;
}
.site-banner__link {
  color: var(--color-accent);
  font-weight: 600;
  white-space: nowrap;
  text-decoration-color: color-mix(in srgb, var(--color-accent) 50%, transparent);
}
.site-banner__link:hover { color: var(--color-accent-soft); }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--color-bg) 80%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.1rem;
}
.brand { display: inline-flex; align-items: center; gap: 0.6rem; }
/* Header wordmark (brand__wordmark, new in SWAZM) + footer logo (brand__logo)
   share one height cap — a SWAZM update renamed the header class and the old
   rule stopped constraining it, so the logo rendered oversized. */
.brand__logo, .brand__wordmark { max-height: 1.7rem; width: auto; }
.brand__name { font-weight: 700; letter-spacing: 0.02em; }
.brand__tagline { display: none; }

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap; /* labels like "For Who" must never wrap mid-item */
  transition: color .2s;
}
.site-nav a:hover, .site-nav a.is-current { color: var(--color-ink); }
.site-nav a.button { color: var(--color-accent); }
.site-nav a.button:hover { color: #0b0b0b; }
/* Active section (scroll-spy / current page): accent underline. */
.site-nav__list > li > a:not(.button) { position: relative; }
.site-nav__list > li > a.is-current::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -0.4rem;
  height: 2px; border-radius: 2px;
  background: var(--color-accent);
}

/* Header controls — one shared height so the CTA button, language links
   and the currency select line up as one row of equal chips. */
.site-nav__list .button,
.lang-switch,
.lang-switch__fallback a,
.currency-switch {
  height: 2.35rem;
  display: inline-flex;
  align-items: center;
}
.site-nav__list .button { padding-block: 0; padding-inline: 1.15rem; font-size: 0.7rem; }

/* No-JS fallback for the language switch: plain links styled as chips. */
.lang-switch__fallback { display: inline-flex; gap: 0.3rem; }
.lang-switch__fallback a {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding-inline: 0.65rem;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
}
.lang-switch__fallback a:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* Language + currency switches: identical compact select chips. */
.currency-switch,
.lang-switch {
  font: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--color-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding-block: 0;
  padding-inline: 0.55rem;
  cursor: pointer;
}
.currency-switch:hover,
.lang-switch:hover { border-color: var(--color-accent); color: var(--color-ink); }

.nav-toggle { display: none; background: none; border: none; padding: 0.5rem; cursor: pointer; }
.nav-toggle__bar { display: block; width: 1.5rem; height: 1.5px; background: var(--color-ink); box-shadow: 0 -6px 0 var(--color-ink), 0 6px 0 var(--color-ink); }

/* Mid sizes: tighten gaps before falling back to the burger menu. */
@media (max-width: 1360px) {
  .site-nav__list { gap: 1.4rem; }
}
@media (max-width: 1180px) {
  .site-nav__list { gap: 1.1rem; }
  .site-nav a { letter-spacing: 0.1em; }
}
@media (max-width: 1080px) {
  .nav-toggle { display: block; }
  .site-nav { display: none; width: 100%; }
  .site-nav.is-open { display: block; }
  .site-header__inner { flex-wrap: wrap; }
  .site-nav__list { flex-direction: column; align-items: flex-start; gap: 1rem; padding-block: 1rem; }
}

/* Sections rhythm */
main > section { padding-block: clamp(3.5rem, 8vw, 7rem); }

/* Breadcrumbs — slim single-line trail, always the first section on a page
   (before the hero), so it overrides the generic section padding above. */
.breadcrumbs { padding-block: 1.1rem; border-bottom: 1px solid var(--color-border); }
.breadcrumbs__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  font-size: 0.82rem;
}
.breadcrumbs__item { display: flex; align-items: center; gap: 0.5rem; }
.breadcrumbs__item:not(:last-child)::after { content: "/"; color: var(--color-border); }
.breadcrumbs__item a { color: var(--color-muted); text-decoration: none; }
.breadcrumbs__item a:hover { color: var(--color-accent); }
.breadcrumbs__item span { color: var(--color-ink); font-weight: 600; }
/* The next section owns its own top border (see .hero + section above them);
   avoid doubling it directly under the breadcrumb bar's own border-bottom. */
.breadcrumbs + section { border-top: none; }

/* Hero — dark scene with an accent glow. Subpage heroes are text-only;
   the home hero (#hero-home) additionally carries the laptop mockup as a
   non-tiling background pinned bottom-right (mockup is 1586×826). */
.hero {
  position: relative;
  padding-block: clamp(3rem, 7vw, 6rem) clamp(2rem, 5vw, 4rem);
  background:
    radial-gradient(60% 80% at 88% 12%, color-mix(in srgb, var(--color-accent) 16%, transparent), transparent 60%),
    var(--color-bg);
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
}
/* The hero owns the divider; drop the top border of whatever follows so the
   line under the hero never doubles (e.g. logos / stats strip already have one). */
.hero + section { border-top: none; }
/* Home hero: the golden shine moves IN FRONT of the scene — the same radial
   as the base hero background, but as a top-most overlay it washes over the
   laptop and its live screen like light falling onto the glass instead of a
   backdrop hidden behind it. pointer-events: none keeps the visit CTA and
   the wheel hit-test working; the flat base background stays underneath. */
#hero-home { background: var(--color-bg); }
#hero-home::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2; /* over media (0) and copy (1); transparent where the copy is */
  background: radial-gradient(60% 80% at 88% 12%, color-mix(in srgb, var(--color-accent) 16%, transparent), transparent 60%);
  pointer-events: none;
}
/* Consulting hero: dark-and-gold tech scene as a cover background. A left
   scrim keeps the copy legible; the imagery sits on the right (empty column). */
#hero-consulting {
  background-color: var(--color-bg);
  background-image:
    linear-gradient(to right,
      var(--color-bg) 0%,
      color-mix(in srgb, var(--color-bg) 55%, transparent) 42%,
      transparent 78%),
    url("/assets/img/hero_consulting.jpg");
  background-repeat: no-repeat;
  background-position: center, center right;
  background-size: cover, cover;
}
#hero-consulting .hero__copy { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6); }
@media (max-width: 939px) {
  /* Copy goes full-width, so darken the whole image into a subtle backdrop. */
  #hero-consulting {
    background-image:
      linear-gradient(color-mix(in srgb, var(--color-bg) 72%, transparent), color-mix(in srgb, var(--color-bg) 72%, transparent)),
      url("/assets/img/hero_consulting.jpg");
    background-position: center, center;
  }
}
.hero__inner {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  align-items: center;
}
/* Two columns on desktop: copy left, media (the live-screen laptop on the
   home page) right; on pages without media the right column stays empty. */
@media (min-width: 940px) {
  .hero__inner { grid-template-columns: 1.02fr 1.1fr; gap: 1rem; }
}
.hero__copy { max-width: 34rem; }
.hero__headline { margin-bottom: 1.5rem; }
.hero__headline .accent { color: var(--color-accent); font-weight: 300; }
.hero__lead { font-size: 1.15rem; color: var(--color-muted); max-width: 32rem; }
.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }
/* About hero: cut-out portrait as a CSS background pinned to the bottom-right. */
#hero-about {
  background-color: var(--color-bg);
  background-image:
    url("/assets/img/hero_about.png"),
    radial-gradient(60% 80% at 88% 12%, color-mix(in srgb, var(--color-accent) 16%, transparent), transparent 60%);
  background-repeat: no-repeat;
  background-position: right bottom, top right;
  background-size: auto min(100%, 30rem), auto;
}
#hero-about .hero__copy { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55); }
@media (max-width: 939px) {
  /* Below the two-column breakpoint, centre the portrait beneath the copy and
     reserve its height (portrait ≈ 1:1.04) so text never overlaps it. */
  #hero-about {
    background-position: center bottom, top right;
    background-size: min(72vw, 19rem) auto, auto;
    padding-bottom: calc(min(72vw, 19rem) * 1.04 + 1.5rem);
  }
}
/* Hero media (home): the laptop mockup as a real <img> — the live-screen
   layer needs an element box to anchor to, which the old CSS-background
   approach couldn't provide. On desktop it reproduces that background's
   geometry exactly: pinned to the section's right-bottom, up to 1250px wide
   (the cap keeps ultra-wide screens from blowing the laptop past the section
   height), sitting BEHIND the copy — hence the legibility shadows below. */
.hero__media { position: relative; }
/* Direct children only: the mockup <img> lives either directly in the media
   box or in .hero-screen — a descendant selector would also hit the boot
   overlay's logo inside the screen and out-specificity its width. */
.hero__media > img,
.hero-screen > img { display: block; width: 100%; height: auto; }
@media (min-width: 940px) {
  .hero__media {
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(100%, 1250px);
    z-index: 0;
  }
  .hero__copy { position: relative; z-index: 1; }
}
@media (max-width: 939px) {
  /* Single column: recreate the old background treatment — oversize the
     image so the laptop reads large, shift left to visually center it, and
     hug the section's bottom edge by cancelling the hero's bottom padding
     (same clamp). The section's overflow:hidden clips the side overhang. */
  .hero__media {
    width: 140%;
    max-width: none;
    margin-left: -28%;
    margin-bottom: calc(-1 * clamp(2rem, 5vw, 4rem));
  }
}
/* The soft dark halo that kept copy and buttons legible over the laptop
   background — same need now that the media sits behind the copy again.
   text-shadow is inherited, so it also covers the button labels. */
#hero-home .hero__copy { text-shadow: 0 0 16px rgba(0, 0, 0, 0.9), 0 0 42px rgba(0, 0, 0, 0.7), 0 3px 10px rgba(0, 0, 0, 0.6); }
#hero-home .hero__actions .button { box-shadow: 0 8px 36px rgba(0, 0, 0, 0.75); }

/* Live screen — a real, browsing iframe projected onto the laptop panel.
   The layer recreates the image's intrinsic pixel grid and scales with the
   rendered width (site.js sets --screen-scale = rendered / intrinsic width);
   the surface carries the build-time matrix3d from Hero.razor. The layer is
   [hidden] until site.js enhances — no JS means just the plain mockup. */
.hero-screen { position: relative; }
.hero-screen__layer {
  position: absolute;
  inset: 0 auto auto 0;
  transform-origin: 0 0;
  /* 0 until the ResizeObserver measures — never an unscaled flash */
  transform: scale(var(--screen-scale, 0));
  pointer-events: none; /* display-only; only the CTA takes clicks */
}
.hero-screen__surface {
  position: absolute;
  inset: 0 auto auto 0;
  transform-origin: 0 0; /* the matrix3d is solved for this origin */
  border-radius: var(--screen-radius, 0);
  overflow: hidden;
  background: var(--color-bg);
  /* width, height, --screen-radius and the matrix arrive inline (the
     transform also carries translateZ(0) — see Hero.razor) */
  /* Edge anti-aliasing: pin the surface on its own composited layer and
     blend the rasterized edge into the backdrop. The font smoothing
     applies to the boot overlay and CTA — iframe content is a separate
     document and can't be reached from here. */
  backface-visibility: hidden;
  outline: 1px solid transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Logical-coordinate wrapper (see Hero.razor): children lay out at the full
   viewport size and the wrapper's inline CSS zoom pre-shrinks the raster. */
.hero-screen__zoom { position: absolute; left: 0; top: 0; }
/* Two stacked frames: rotation preloads the next site in the hidden one and
   crossfades — no boot overlay after the first load. */
.hero-screen__surface iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--color-bg);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.hero-screen__surface iframe.is-front { opacity: 1; }
/* Boot overlay: covers the panel while a site loads — subtle wordmark,
   quiet caption, thin accent bar. Sized in viewport px; the projection
   scales it with the panel. */
.hero-screen__boot {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.6rem;
  background: var(--color-bg);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s;
}
.is-booting .hero-screen__boot { opacity: 1; visibility: visible; }
.hero-screen__boot-logo { width: 105px; opacity: 0.88; }
.hero-screen__boot-text {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hero-screen__bar {
  width: 250px;
  height: 3px;
  border-radius: 999px;
  background: var(--color-surface-soft);
  overflow: hidden;
}
.hero-screen__bar i {
  display: block;
  height: 100%;
  width: 30%;
  border-radius: inherit;
  background: var(--color-accent);
  animation: hero-screen-load 1.15s ease-in-out infinite;
}
@keyframes hero-screen-load {
  from { margin-left: -30%; }
  to { margin-left: 100%; }
}
/* The visit CTA — the screen's one interactive spot. It sits in the
   scale-only layer, NOT in the matrix3d surface, so it renders flat with
   no perspective distortion; Hero.razor anchors it (inline left/top) on
   the projected bottom-center of the panel and the translate centers it
   there. Sizes are in intrinsic-image px, scaled by --screen-scale (~0.79
   at full hero width) — hence slightly generous. The dark backdrop keeps
   it readable over any embedded site. */
.hero-screen__cta {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  /* Counter-scaled by the layer's --screen-scale so the button renders at
     a CONSTANT on-screen size at every hero width — without this it would
     be ~17px on desktop but microscopic on a phone-scale panel. */
  font-size: calc(1.05rem / var(--screen-scale, 1));
  padding: calc(0.66rem / var(--screen-scale, 1)) calc(1.3rem / var(--screen-scale, 1));
  border-radius: calc(8px / var(--screen-scale, 1));
  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
  backdrop-filter: blur(6px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
  transition: opacity 0.45s ease, visibility 0.45s;
}
/* Hidden while the (sibling) surface is booting. */
.hero-screen__surface.is-booting + .hero-screen__cta { opacity: 0; visibility: hidden; }

/* Cards — shared component, three variants via CSS */
.cards__grid {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}
.cards__intro { color: var(--color-muted); max-width: 42rem; }
.cards__cta { margin-top: 2.5rem; }
/* Stat strip (e.g. consulting credibility): large accent numbers. */
#stats .card__title { font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 300; letter-spacing: -0.02em; color: var(--color-accent); margin: 0 0 0.25rem; }
.card__title { margin: 0.9rem 0 0.4rem; }
.card__link { color: inherit; }
/* Brand wordmark in place of a title (showcase/project cards). Height-locked
   so different logo aspect ratios read as one consistent row. */
.card__logo { display: block; height: 1.6rem; width: auto; max-width: 100%; }
.card__text { color: var(--color-muted); font-size: 0.95rem; }
.card__icon { width: 1.9rem; height: 1.9rem; }
.card__badge {
  display: inline-block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
}

/* strip — borderless benefit row with dividers */
.cards--strip { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.cards--strip .cards__grid { margin-top: 0; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 0; }
.cards--strip .card { padding: 0.5rem 2.5rem; }
.cards--strip .card + .card { border-left: 1px solid var(--color-border); }
.cards--strip .card__title { font-size: 1rem; }

/* grid — bordered audience cards with a trailing arrow */
.cards--grid .cards__grid { grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); }
.cards--grid .card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  transition: border-color .2s, transform .2s;
}
.cards--grid .card:hover { border-color: color-mix(in srgb, var(--color-accent) 55%, transparent); transform: translateY(-2px); }
/* Arrow only on cards that actually link somewhere. */
.cards--grid .card:has(.card__link)::after { content: "→"; color: var(--color-accent); margin-top: 1.25rem; font-size: 1.1rem; }
.cards--grid .card:not(:has(.card__link)):hover { transform: none; border-color: var(--color-border); }

/* showcase — projects */
.cards--showcase .cards__grid {
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  /* Equal card heights even when the cards wrap into multiple rows — each
     implicit row would otherwise size to its own tallest card. */
  grid-auto-rows: 1fr;
}
.cards--showcase .card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  min-height: 11rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Packages */
/* Tier detail pages (business/custom/growth/launch): the hero's right column
   is intentionally empty there (text-only hero, no mockup/photo). The card
   is taken out of document flow and placed on top of it — not just nudged
   up with a margin — so nothing below is pushed down by leftover space.
   The vertical offset (top) has to match the hero's real rendered height,
   which varies per page, so HeroOverlap in site.js sets it; without JS the
   card falls back to sitting right after the hero like a normal section. */
@media (min-width: 940px) {
  main:has(> .hero + .packages:has(.plan:only-child)) { position: relative; }
  .hero + .packages:has(.plan:only-child) {
    position: absolute;
    inset-inline: 0;
    margin: 0;
    padding: 0;
  }
  .hero + .packages:has(.plan:only-child) .plan:only-child { justify-self: end; }
  /* Absolute positioning gives .packages its own block formatting context,
     so .packages__grid's top margin no longer collapses into it like it
     would in normal flow — zero it here or the card sits 2.5rem too low. */
  .hero + .packages:has(.plan:only-child) .packages__grid { margin-top: 0; }
  /* The footnote otherwise spans and centers across the full container —
     match it to the card's own width/position instead, so it reads as
     belonging to the card rather than a separate, disconnected line. */
  .hero + .packages:has(.plan:only-child) .packages__footnote {
    max-width: 30rem;
    margin-left: auto;
    margin-right: 0;
    text-align: left;
  }
}
.packages__intro { color: var(--color-muted); max-width: 42rem; }
.packages__grid {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
}
.plan--featured {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent), 0 30px 60px rgba(0, 0, 0, 0.4);
}
.plan__badge {
  position: absolute; top: -0.75rem; left: 50%; transform: translateX(-50%);
  background: var(--color-accent); color: #0b0b0b;
  font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
  padding: 0.28rem 0.85rem; border-radius: 999px;
}
.plan__name { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; color: var(--color-muted); margin: 0; }
.plan__tagline { font-size: 1.3rem; font-weight: 600; margin: 0; letter-spacing: -0.02em; }
.plan__description { color: var(--color-muted); font-size: 0.92rem; }
.plan__description p { margin: 0; }
.plan__features { list-style: none; margin: 0.5rem 0 1.25rem; padding: 0; display: grid; gap: 0.65rem; }
.plan__features li { padding-left: 1.6rem; position: relative; color: var(--color-muted); font-size: 0.95rem; }
.plan__features li::before { content: "✓"; position: absolute; left: 0; color: var(--color-accent); font-weight: 700; }
.plan__price { margin: auto 0 1.25rem; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; }
.plan__price-note { font-size: 0.9rem; font-weight: 400; color: var(--color-muted); margin-left: 0.4rem; }
/* Multi-part prices (setup fee + monthly): headline first line, smaller rest. */
.plan__price-line { display: block; }
.plan__price-line + .plan__price-line { font-size: 1.1rem; margin-top: 0.15rem; }
/* A single plan (tier detail pages) shouldn't stretch across the container —
   and since its grid cell still spans the full row, it must be centered
   within that cell too, or the capped card just sits stranded at the left. */
.plan:only-child { max-width: 30rem; justify-self: center; }
/* On mobile there's no hero to overlap into (see the .hero + .packages rule
   above), so give the single-plan card a "spotlight" look instead: its own
   text centered. The checklist stays left-aligned — a centered checkmark
   list reads worse than a ragged-left one — so it's excluded below. */
@media (max-width: 939px) {
  .plan:only-child { align-items: center; text-align: center; }
  .plan:only-child .plan__features { text-align: left; }
}
.plan .button { justify-content: center; }
.packages__cta { margin-top: 2.5rem; text-align: center; }
.packages__footnote { color: var(--color-muted); font-size: 0.85rem; margin-top: 1.75rem; text-align: center; }
.packages__footnote p { margin: 0; }

/* Price list — add-on services as clean rows */
.price-list__intro { color: var(--color-muted); max-width: 42rem; }
.price-list__items { list-style: none; margin: 2.5rem 0 0; padding: 0; max-width: 50rem; }
.price-list__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--color-border);
}
.price-list__name { font-weight: 600; }
.price-list__text { display: block; color: var(--color-muted); font-size: 0.9rem; }
.price-list__price { color: var(--color-accent); font-weight: 600; white-space: nowrap; }
.price-list__footnote { color: var(--color-muted); font-size: 0.85rem; margin-top: 1.5rem; }

/* Comparison — them vs us; the "us" column is tinted and check-marked */
.comparison__intro { color: var(--color-muted); max-width: 44rem; }
.comparison__table { width: 100%; max-width: 52rem; border-collapse: collapse; margin-top: 2.5rem; }
.comparison__table th,
.comparison__table td { text-align: left; padding: 0.9rem 1.25rem; border-bottom: 1px solid var(--color-border); }
.comparison__table thead th {
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; font-weight: 600;
  color: var(--color-muted);
}
.comparison__table th.comparison__ours { color: var(--color-accent); }
.comparison__them { color: var(--color-muted); }
.comparison__them::before { content: "✕"; margin-right: 0.7rem; opacity: 0.6; }
.comparison__us { color: var(--color-ink); font-weight: 600; }
.comparison__us::before { content: "✓"; color: var(--color-accent); font-weight: 700; margin-right: 0.7rem; }
/* Tint + rounded ends on the Raykast column */
.comparison__ours, .comparison__us { background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.comparison__table thead th.comparison__ours { border-radius: var(--radius) var(--radius) 0 0; }
.comparison__table tbody tr:last-child .comparison__us { border-radius: 0 0 var(--radius) var(--radius); }
.comparison__footnote { color: var(--color-muted); font-size: 0.85rem; margin-top: 1.5rem; max-width: 44rem; }

/* FAQ — <details> accordion, hairline rows, gold "+" that turns into "–" */
.faq__intro { color: var(--color-muted); max-width: 44rem; }
.faq__items { margin-top: 2rem; max-width: 50rem; border-top: 1px solid var(--color-border); }
.faq__item { border-bottom: 1px solid var(--color-border); }
.faq__question {
  cursor: pointer;
  list-style: none;                       /* no default disclosure triangle */
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding-block: 1.1rem;
  font-weight: 600;
  transition: color .2s;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::after {
  content: "+";
  color: var(--color-accent);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  flex-shrink: 0;
}
.faq__item[open] .faq__question::after { content: "–"; }
.faq__question:hover { color: var(--color-accent); }
.faq__answer { color: var(--color-muted); padding-bottom: 1.25rem; max-width: 44rem; }
.faq__answer p { margin: 0 0 0.75rem; }
.faq__answer p:last-child { margin-bottom: 0; }

/* Rich text — long-form bodies (subscription explainer, tier details) */
.richtext__body { color: var(--color-muted); }
.richtext__body strong { color: var(--color-ink); }
.richtext__body ul { padding-left: 1.25rem; display: grid; gap: 0.4rem; margin: 0 0 1rem; }
.richtext__body li::marker { color: var(--color-accent); }

/* Legal pages (Impressum / Datenschutz) */
.legal-contact__address { font-style: normal; display: grid; gap: 0.15rem; margin: 1.75rem 0; color: var(--color-muted); }
.legal-contact__address span { display: block; }
.legal-contact__rows { margin: 0 0 1.75rem; display: grid; gap: 0.5rem; }
.legal-contact__rows div { display: flex; gap: 0.75rem; }
.legal-contact__rows dt { color: var(--color-muted); min-width: 4.5rem; }
.legal-contact__rows dd { margin: 0; }
.legal-contact__body { color: var(--color-muted); font-size: 0.95rem; line-height: 1.65; }
/* Modest page title + compact section headings for long-form legal text */
.legal-contact h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); }
.richtext__body h2, .legal-contact__body h2 { font-size: 1.3rem; margin: 2.25rem 0 0.5rem; letter-spacing: -0.01em; color: var(--color-ink); }
.richtext__body h3, .legal-contact__body h3 { font-size: 1.05rem; margin: 1.5rem 0 0.35rem; color: var(--color-ink); }
.legal-contact__body a { color: var(--color-accent); }
.legal-contact__body strong { color: var(--color-ink); }
.legal-contact__body ul { padding-left: 1.25rem; margin: 0 0 1rem; }
.legal-contact__body li::marker { color: var(--color-accent); }

/* Process */
.process {
  /* The step connector (below) deliberately extends past its own box to
     bridge into the next column; on a right-hand column that isn't also
     the last step overall (auto-fit's column count is fluid, so "last in
     its row" can't be targeted in pure CSS), that bridge pokes past the
     container. It already fades to transparent, so clipping it here is
     visually seamless and guarantees no horizontal scrollbar at any width. */
  overflow-x: clip;
}
.process__steps {
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  counter-reset: step;
}
.step { position: relative; padding-top: 3.25rem; }
.step__num {
  position: absolute; top: 0; left: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--color-border); border-radius: 999px;
  color: var(--color-accent); font-size: 0.8rem; font-weight: 700;
}
/* Connects a step to the next one in a row — only meaningful once the grid
   above actually shows 2+ columns (~464px, by its own minmax/gap math); below
   that, steps stack in a single column and this line has no "next" to bridge
   into, so it just juts out past the container and forces a horizontal
   scrollbar. Gated to a safe margin above that threshold. */
@media (min-width: 540px) {
  .step::before {
    content: ""; position: absolute; top: 1.25rem; left: 2.5rem; right: -2rem; height: 1px;
    background: linear-gradient(to right, var(--color-border), transparent);
  }
}
.step:last-child::before { display: none; }
.step__title { margin: 0 0 0.35rem; }
.step__text { color: var(--color-muted); font-size: 0.95rem; }

/* About */
.about__inner {
  display: grid;
  gap: 3rem;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 860px) { .about__inner { grid-template-columns: 5fr 6fr; } }
.about__media { margin: 0; position: relative; }
.about__media img { border-radius: var(--radius); width: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.about__sig { margin-top: 1rem; display: flex; flex-direction: column; }
.about__name { font-weight: 700; }
.about__role { color: var(--color-muted); font-size: 0.9rem; }
.about__body { color: var(--color-muted); font-size: 1.05rem; }
.about__cta { margin: 1.75rem 0 0; }

/* Logos / trust strip */
.logos { padding-block: clamp(2.5rem, 5vw, 4rem) !important; border-top: 1px solid var(--color-border); }
.logos__title { text-align: center; text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.7rem; color: var(--color-muted); margin: 0; }
.logos__row {
  list-style: none; margin: 1.75rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2.5rem;
}
.logos__item { color: var(--color-muted); font-weight: 600; font-size: 1.05rem; opacity: 0.6; transition: opacity .2s; }
.logos__item:hover { opacity: 1; }
/* engine marks are white SVGs with a viewBox but no intrinsic size — give
   them a height or they collapse to nothing inside the flex row */
.logos__item img { display: block; height: 40px; width: auto; }

/* CTA band */
.cta-band { background: var(--color-surface-soft); border-block: 1px solid var(--color-border); text-align: center; }
.cta-band__inner { display: flex; flex-direction: column; align-items: center; gap: 1.75rem; }
.cta-band h2 { max-width: 24ch; margin: 0; }
.cta-band__text { color: var(--color-muted); }

/* Contact */
.contact__intro { color: var(--color-muted); }
.contact__form { display: grid; gap: 1.1rem; margin-top: 2rem; }
.contact__form label { display: grid; gap: 0.4rem; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-muted); }
.contact__form input,
.contact__form textarea {
  font: inherit; text-transform: none; letter-spacing: normal; color: var(--color-ink);
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
}
.contact__form input:focus, .contact__form textarea:focus { outline: none; border-color: var(--color-accent); }
.contact__form button { justify-self: start; margin-top: 0.5rem; }
.contact__status:empty { display: none; }
.contact__status { font-weight: 600; color: var(--color-accent); }
.contact__fallback { color: var(--color-muted); margin-top: 1.5rem; }
/* Privacy consent line above the submit button. */
.contact__privacy { color: var(--color-muted); font-size: 0.82rem; margin: 0.25rem 0 0.25rem; }
.contact__privacy p { margin: 0; }
.contact__privacy a { color: var(--color-accent); }

/* Footer — brand block, link columns, legal column and a CTA box */
.site-footer { border-top: 1px solid var(--color-border); background: var(--color-surface); }
.site-footer__inner { padding-block: 3.5rem 2rem; display: grid; gap: 2.5rem; }
@media (min-width: 900px) {
  /* brand | Websites | Company | Legal | CTA */
  .site-footer__inner {
    grid-template-columns: 1.5fr 0.9fr 0.9fr 0.7fr 1.5fr;
    align-items: start;
    column-gap: 2rem;
  }
  .site-footer__copyright { grid-column: 1 / -1; }
}
.site-footer__about { display: grid; gap: 0.75rem; justify-items: start; }
.site-footer__about .brand__name { font-size: 1.1rem; }
.site-footer__logo { max-height: 2rem; }
.site-footer__about > a { font-size: 0.95rem; }
.site-footer__text { color: var(--color-muted); font-size: 0.95rem; max-width: 24rem; }
.site-footer__text p { margin: 0; }
.site-footer__heading {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--color-muted);
  margin: 0 0 1rem;
}
.site-footer__column ul, .site-footer__legal ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.site-footer__column a, .site-footer__legal a { color: var(--color-muted); font-size: 0.92rem; }
.site-footer__column a:hover, .site-footer__legal a:hover { color: var(--color-ink); }
.site-footer__cta {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-soft);
  padding: 1.75rem;
}
.site-footer__cta-title { font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; margin: 0 0 1.25rem; }
.site-footer__cta-text { color: var(--color-muted); font-size: 0.92rem; margin-bottom: 1.25rem; }
.site-footer__cta-text p { margin: 0; }
.site-footer__social { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; gap: 0.9rem; }
.site-footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.35rem; height: 2.35rem;
  border: 1px solid var(--color-border); border-radius: 8px;
  color: var(--color-muted);
  transition: color .2s, border-color .2s;
}
.site-footer__social a:hover { color: var(--color-accent); border-color: var(--color-accent); }
/* fill: currentColor so the sprite glyph takes the link's (light) colour —
   without it Bootstrap-Icons symbols default to black and vanish on the dark footer. */
.social-icon { width: 1.15rem; height: 1.15rem; display: block; fill: currentColor; }
.site-footer__copyright {
  color: var(--color-muted);
  font-size: 0.82rem;
  margin: 0;
  opacity: 0.7;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

/* =====================================================================
   Sheetah studio look — the same design language as the promo and
   tutorial videos (marketing/promo/index.html in the product repo):
   blueprint-grid backdrop with soft brand glows, 800-weight tight
   headings, wide blue kickers, glowing filled CTAs, chip rows.
   ===================================================================== */

/* the video stage's backdrop: brand glows over a faint 64px grid */
body {
  background:
    radial-gradient(1100px 520px at 50% -4%, rgba(63, 142, 242, .13), transparent 62%),
    radial-gradient(900px 620px at 50% 108%, rgba(11, 104, 225, .07), transparent 60%),
    linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px),
    var(--color-bg);
  background-size: auto, auto, 64px 64px, 64px 64px, auto;
  background-attachment: fixed;
}

/* studio type: heavy and tight, accent bold blue instead of thin */
h1, h2, h3, .hero__headline { font-weight: 800; letter-spacing: -.03em; }
.hero__headline .accent { color: var(--color-accent); font-weight: 800; }

/* eyebrows read like the video kickers */
.eyebrow { color: var(--color-accent); letter-spacing: .42em; font-size: .76rem; }

/* CTAs: filled Sheetah blue with the video badge glow */
.button { border-radius: 999px; font-weight: 700; }
.button--primary, .button--light, .site-nav a.button {
  background: #0b68e1; border-color: transparent; color: #fff;
  box-shadow: 0 0 34px rgba(11, 104, 225, .45);
}
.button--primary:hover, .button--light:hover, .site-nav a.button:hover {
  background: var(--color-accent); border-color: transparent; color: #fff;
}

/* cards get the studio panel treatment */
.cards--grid .card, .card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 14px;
}

/* the engine row's text entries become video-style chips */
.logos__item { opacity: .95; }
.logos__item span {
  display: inline-block; padding: .6rem 1.25rem; border-radius: 12px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  color: var(--color-ink); font-weight: 600;
}

/* ---- animated studio backdrop (see StudioBackground in site.js) ------
   The canvas draws the same scene as the videos' background. Sections
   must stay transparent so it shows through; the body gradient above is
   the fallback when JS or WebGL/WebGPU is unavailable. */
#sheetah-bg {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: -1; pointer-events: none; display: block;
}
.hero { background: transparent; border-bottom: none; }
.cta-band { background: color-mix(in srgb, var(--color-surface) 55%, transparent); }
.site-header { background: color-mix(in srgb, var(--color-bg) 72%, transparent); }

/* Header wordmark: the base theme caps it at 1.7rem, far too small for a
   product site whose logo IS the brand. The source art is 180x77, so 4rem
   still renders at or below its native height. */
.brand__logo, .brand__wordmark { max-height: 4rem; }
.site-header__inner { padding-block: 1rem; }
@media (max-width: 640px) { .brand__logo, .brand__wordmark { max-height: 3rem; } }

/* ---- hero -----------------------------------------------------------
   The base theme pins hero media absolutely (its home page uses a
   transparent laptop cut-out). Our hero media is a solid panel, so it
   goes back into the grid flow or it sits on top of the copy. */
@media (min-width: 940px) {
  .hero__media { position: relative; right: auto; bottom: auto; width: 100%; }
  .hero__inner { grid-template-columns: 1fr 1.05fr; gap: 3rem; }
}
.hero__copy { max-width: 38rem; }
.hero__headline { font-size: clamp(2.6rem, 5.4vw, 4.4rem); line-height: 1.02; }

/* ---- hero pack demo (PackDemo in site.js) ---------------------------
   The promo's money shot: 24 frames land in a classic grid, then the
   Smart Packer refits them while the atlas shrinks. */
/* Grid items default to min-width:auto, so a wide child can push the
   track past the viewport — this is the blowout fix, not decoration. */
.hero__inner > * { min-width: 0; }
.hero__media { min-width: 0; max-width: 100%; }
/* Below 940px the base theme bleeds hero media off both edges
   (width:140%; margin-left:-28%) for its laptop mockup. The pack demo is
   a self-contained panel, so it stays inside the column. */
@media (max-width: 939px) {
  .hero__media { width: 100%; margin-left: 0; margin-bottom: 0; }
}
.packdemo { position: relative; width: 100%; max-width: min(34rem, 100%); margin-inline: auto; }
.packdemo__label {
  font-size: .78rem; font-weight: 700; letter-spacing: .3em;
  text-transform: uppercase; color: var(--color-accent); margin-bottom: .9rem;
}
.packdemo__atlas {
  position: relative; border-radius: 16px;
  border: 2px dashed color-mix(in srgb, var(--color-accent) 55%, transparent);
  background: color-mix(in srgb, #0b68e1 5%, transparent);
  transition: height 1.1s cubic-bezier(.16, 1, .3, 1);
}
.packdemo__lattice { position: absolute; inset: 0; opacity: 0; transition: opacity .55s ease; }
.packdemo__lattice.is-on { opacity: 1; }
.packdemo__lattice i {
  position: absolute; border: 1px dashed color-mix(in srgb, var(--color-accent) 30%, transparent);
  border-radius: 4px;
}
.packdemo__sprite {
  position: absolute; border-radius: 7px; opacity: 0;
  background: linear-gradient(160deg, var(--c1), var(--c2));
  box-shadow: 0 6px 22px rgba(0, 0, 0, .45);
  transition: transform 1.05s cubic-bezier(.2, .9, .22, 1), opacity .4s ease;
}
.packdemo__sprite.is-landed {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 70%, transparent), 0 6px 18px rgba(0, 0, 0, .4);
}
.packdemo__stat {
  position: absolute; left: 2px; font-size: 1.05rem; font-weight: 800;
  color: #2ecc71; white-space: nowrap; opacity: 0; transform: translateY(14px);
  transition: opacity .5s ease, transform .6s cubic-bezier(.16, 1, .3, 1),
              top 1.1s cubic-bezier(.16, 1, .3, 1);
}
.packdemo__stat.is-on { opacity: 1; transform: none; }

/* ---- engine tiles ---------------------------------------------------
   Mirrors the engines board from the video: the mark above its name. */
#engines .card { text-align: center; align-items: center; }
#engines .card__icon, #engines .card img {
  width: auto; height: 74px; margin-inline: auto; margin-bottom: 1.1rem;
}

/* ---- video players --------------------------------------------------
   Embedded through richText, so style the raw markup. */
/* richText renders inside container--narrow (a reading measure); the
   players want the full section width, so this one block breaks out. */
#videos .container--narrow { width: min(100% - 3rem, var(--container)); }
#videos .eyebrow, #videos h2 { max-width: 46rem; }
.videoGrid { display: grid; gap: 2rem; margin-top: 1.75rem; }
@media (min-width: 860px) { .videoGrid { grid-template-columns: 1fr 1fr; } }
.videoCard {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 14px; overflow: hidden;
}
.videoCard video { display: block; width: 100%; height: auto; background: #000; }
.videoCard figcaption { padding: 1rem 1.25rem 1.2rem; }
.videoCard b { display: block; font-weight: 700; margin-bottom: .2rem; }
.videoCard span { color: var(--color-muted); font-size: .95rem; }

/* ---- corrections pass ------------------------------------------------ */

/* The base theme ships no rule for the hero support line, so it collided
   with the buttons above it. */
.hero__support {
  margin-top: 1.4rem;
  color: var(--color-muted);
  font-size: 0.95rem;
}

/* Slimmer header band; the wordmark keeps its size and now defines the
   header height on its own. */
.site-header__inner { padding-block: 0.4rem; }

/* The panel screenshot is a tall portrait UI shot (720x1040). Left to the
   prose width it stretched over a full screen high, so cap the height and
   frame it like a device shot instead. */
#panel .richtext__body p:has(img) { margin: 2.25rem 0 0; text-align: center; }
#panel .richtext__body img {
  display: inline-block; width: auto; max-width: 100%; max-height: 34rem;
  border-radius: 14px; border: 1px solid var(--color-border);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}

/* A full pill radius turns into a blob when a button wraps to several
   lines, which is exactly what happens in the narrow footer column. */
.site-footer .button { border-radius: 12px; }

/* ---- real product artifacts ------------------------------------------
   The atlases and panel shots are the actual files the extension wrote
   (marketing/promo/assets/fresh in the product repo), so they get frames
   rather than being dropped into the prose flow. */

/* two packing modes, shown as their real exports */
#packing .container--narrow { width: min(100% - 3rem, var(--container)); }
#packing .richtext__body > p:first-child { max-width: 46rem; }
.modeGrid { display: grid; gap: 2rem; margin-top: 2.25rem; }
@media (min-width: 860px) { .modeGrid { grid-template-columns: 1fr 1fr; } }
.modeFig {
  margin: 0; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden;
}
/* transparent PNGs read best on the classic checkerboard */
.modeFig__shot {
  display: grid; place-items: center; padding: 1.5rem; height: 21rem;
  background: repeating-conic-gradient(#27272b 0% 25%, #1d1d20 0% 50%) 0 0 / 24px 24px;
}
/* the .modeFig__frame wrapper carries the aspect ratio now */
.modeFig__shot { height: auto; min-height: 0; }
.modeFig figcaption { padding: 1.15rem 1.35rem 1.4rem; }
.modeFig b { display: flex; align-items: center; gap: .6rem; font-weight: 700; color: var(--color-ink); }
.modeFig b i {
  font-style: normal; font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #fff; background: #0b68e1;
  padding: .25rem .6rem; border-radius: 999px;
}
.modeFig em {
  display: block; font-style: normal; font-family: ui-monospace, Consolas, monospace;
  font-size: .82rem; color: var(--color-accent); margin: .35rem 0 .6rem;
}
.modeFig span { color: var(--color-muted); font-size: .95rem; }

/* the four tabs of the panel */
#panel .container--narrow { width: min(100% - 3rem, var(--container)); }
#panel .richtext__body > p:first-child { max-width: 46rem; }
.panelGrid { display: grid; gap: 1.5rem; margin-top: 2.25rem; }
@media (min-width: 720px) { .panelGrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .panelGrid { grid-template-columns: repeat(3, 1fr); } }
.panelTile {
  margin: 0; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column;
}
/* the panel is a tall portrait dock: show its top and let the rest crop */
.panelTile img, .panelTile video {
  display: block; width: 100%; height: 17rem; object-fit: cover; object-position: top center;
  background: #1d1d20; border-bottom: 1px solid var(--color-border);
}
/* the playback video's subject sits mid-canvas, not at the top */
.panelTile video { object-position: center; }
.panelTile figcaption { padding: 1rem 1.25rem 1.25rem; }
.panelTile b { display: block; font-weight: 700; margin-bottom: .2rem; }
.panelTile span { color: var(--color-muted); font-size: .92rem; }

/* ---- readability + frame overlays ------------------------------------ */

/* The animated backdrop runs behind the hero copy, so the copy sits on its
   own frosted panel rather than competing with moving cells. */
.hero__copy::before {
  content: "";
  position: absolute;
  inset: -2rem -2.75rem;
  z-index: -1;
  border-radius: 28px;
  background: color-mix(in srgb, var(--color-bg) 62%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  -webkit-mask-image: radial-gradient(120% 100% at 30% 50%, #000 55%, transparent 100%);
  mask-image: radial-gradient(120% 100% at 30% 50%, #000 55%, transparent 100%);
}

/* The hero frame stays a fixed square; only this dashed sheet resizes, so
   packing never reflows the page around it. */
.packdemo__atlas { border: 0; background: none; transition: none; }
.packdemo__sheet {
  position: absolute; left: 0; top: 0; width: 100%;
  border-radius: 16px;
  border: 2px dashed color-mix(in srgb, var(--color-accent) 55%, transparent);
  background: color-mix(in srgb, #0b68e1 5%, transparent);
  transition: height 1.1s cubic-bezier(.16, 1, .3, 1);
}

/* frame rectangles from the export's data file, drawn over the atlases */
.modeFig__frame {
  position: relative; margin-inline: auto;
  width: min(100%, calc(22rem * var(--ar, 1)));
  aspect-ratio: var(--ar, 1);
}
.modeFig__frame img { display: block; width: 100%; height: 100%; }
.fbox {
  position: absolute; box-sizing: border-box; pointer-events: none;
  border: 1px dashed color-mix(in srgb, var(--color-accent) 75%, transparent);
  border-radius: 2px;
}
.fbox i {
  position: absolute; left: 1px; top: 1px; font-style: normal;
  font-size: 9px; font-weight: 700; line-height: 1; color: #fff;
  background: color-mix(in srgb, #0b68e1 92%, transparent);
  padding: 2px 3px; border-radius: 3px;
}

/* ---- long-form reading ------------------------------------------------
   The base theme sets legal bodies to 0.95rem, which is punishing for a
   full Impressum and privacy policy. Both are read, not skimmed. */
.richtext__body, .legal-contact__body {
  font-size: 1.06rem;
  line-height: 1.75;
}
.richtext__body h2, .legal-contact__body h2 {
  font-size: 1.45rem; margin-top: 2.75rem; color: var(--color-ink);
}
.richtext__body h3, .legal-contact__body h3 { font-size: 1.15rem; margin-top: 2rem; }
.legal-contact__address, .legal-contact__rows { font-size: 1.06rem; }
.legal-contact__intro { font-size: 1.1rem; line-height: 1.7; }
/* the section lead on the home page keeps its own measure */
#packing .richtext__body > p:first-child,
#panel .richtext__body > p:first-child { font-size: 1.1rem; }

/* The closing CTA wraps its heading and text in a plain div, so the h2's
   24ch max-width leaves its BOX at the left edge of that div — only the
   text lines inside it were centred. Auto margins centre the box itself. */
.cta-band h2 { margin-inline: auto; }

/* ---- footer ----------------------------------------------------------
   The base grid (1.5fr .9fr .9fr .7fr 1.5fr) is shaped for the raykast
   footer's five blocks. This site has three, so they crowded into the
   narrow middle tracks: the legal links floated beside the brand with
   nothing above them, and the CTA landed in a 0.9fr column. */
@media (min-width: 900px) {
  .site-footer__inner {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.8fr) minmax(0, 1.5fr);
  }
}
/* the nav is labelled for screen readers; give it a visible heading too,
   so the two links read as a footer column instead of strays */
.site-footer__legal::before {
  content: "Legal";
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--color-muted);
  margin-bottom: 1rem;
}
.site-footer__cta-title { font-size: 1.15rem; line-height: 1.35; }
.site-footer__cta .button { width: 100%; justify-content: center; }

/* Imprint and Privacy belong on one line in the bottom bar, with the
   copyright at the other end — so the heading goes away again and the
   two links sit inline above/beside the rule. */
.site-footer__legal::before { content: none; }
.site-footer__legal ul { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.site-footer__legal { border-top: 1px solid var(--color-border); padding-top: 1.5rem; }
.site-footer__copyright { border-top: 0; }
@media (min-width: 900px) {
  .site-footer__inner { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1.5fr); }
  .site-footer__about { grid-column: 1; grid-row: 1; }
  .site-footer__cta   { grid-column: 2; grid-row: 1; }
  /* both share the bottom row: links flush left, copyright flush right */
  .site-footer__legal { grid-column: 1 / -1; grid-row: 2; }
  .site-footer__copyright {
    grid-column: 1 / -1; grid-row: 2;
    justify-self: end; padding-top: 1.5rem;
  }
}

/* Single column: the legal strip carries a top rule, so it has to sit at
   the bottom rather than in DOM order between the brand and the CTA. */
@media (max-width: 899px) {
  .site-footer__about { order: 1; }
  .site-footer__cta { order: 2; }
  .site-footer__legal { order: 3; }
  .site-footer__copyright { order: 4; }
}