/*  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; }
.brand__logo { 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; }

/* 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);
}