/*
Theme Name: Human Syntax
Description: Modern WordPress theme based on Human Syntax design system
Author: Anders Larsson
Version: 1.0.2
Text Domain: humansyntax
*/

/* tokens.css and layout.css are loaded ahead of this file via hs_enqueue().
   This file maps APstract block classes onto the Human Syntax design system. */

/* ==========================================================================
   THEME PRESETS — sections override design tokens via scoped CSS vars
   ========================================================================== */
.theme-preset--light {
  --bg: #FFFFFF;
  --bg-raise: #F2F4F7;
  --bg-card: #FFFFFF;
  --line: #C2C9D4;
  --line-soft: #DCE0E8;
  --fg: #0B0D10;
  --fg-mute: #2A303A;
  --fg-soft: #444B58;
  --fg-faint: #5A6271;
  --comment: #5A6271;
  --dot: #B8C0CC;
  background: var(--bg);
  color: var(--fg);
}

.theme-preset--gray-light {
  --bg: #F2F4F7;
  --bg-raise: #E5E8EE;
  --bg-card: #FFFFFF;
  --line: #C2C9D4;
  --line-soft: #DCE0E8;
  --fg: #0B0D10;
  --fg-mute: #2A303A;
  --fg-soft: #444B58;
  --fg-faint: #5A6271;
  --comment: #5A6271;
  --dot: #B8C0CC;
  background: var(--bg);
  color: var(--fg);
}

.theme-preset--contentor-dark {
  --bg: #0B0D10;
  --bg-raise: #0F1217;
  --bg-card: #171B22;
  --line: #2A2F3A;
  --line-soft: #1B2028;
  --fg: #F2F4F7;
  --fg-mute: #C7CEDB;
  --fg-soft: #98A0AF;
  --fg-faint: #7E8693;
  --comment: #8A92A0;
  --dot: #232833;
  background: var(--bg);
  color: var(--fg);
}

.theme-preset--contentor-blue {
  --bg: #0A1530;
  --bg-raise: #0D1B3D;
  --bg-card: #122047;
  --line: #1F2F5A;
  --line-soft: #16234A;
  --fg: #F2F4F7;
  --fg-mute: #C7CEDB;
  --fg-soft: #98A0AF;
  --fg-faint: #7E8693;
  --comment: #8A92A0;
  --dot: #1A2A50;
  background: var(--bg);
  color: var(--fg);
}

[class*="theme-preset--"] h1,
[class*="theme-preset--"] h2,
[class*="theme-preset--"] h3,
[class*="theme-preset--"] h4,
[class*="theme-preset--"] .wp-block-heading {
  color: var(--fg);
}

/* ==========================================================================
   TOPBAR — based on .lp-nav from layout.css
   ========================================================================== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 14px 48px;
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: var(--keyline);
}

.topbar-logo a {
  font-family: var(--display);
  color: var(--fg);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.03em;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.topbar-logo img {
  max-height: 32px;
  width: auto;
}

.topbar-nav {
  display: flex;
  justify-content: center;
}

.nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 18px;
  font-family: var(--mono);
  font-size: 12px;
}

.nav-menu li {
  position: relative;
}

.nav-menu a {
  color: var(--fg-mute);
  text-decoration: none;
  display: inline-block;
  padding: 4px 0;
  transition: color 0.12s;
}

.nav-menu a:hover,
.nav-menu .current-menu-item > a,
.nav-menu .current-menu-parent > a {
  color: var(--fg);
}

.nav-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;
  margin: 8px 0 0;
  padding: 8px 0;
  background: var(--bg-card);
  border: var(--keyline);
  min-width: 220px;
  display: none;
  flex-direction: column;
  z-index: 200;
}

.nav-menu li:hover > .sub-menu,
.nav-menu li:focus-within > .sub-menu {
  display: flex;
}

.nav-menu .sub-menu a {
  padding: 8px 14px;
  white-space: nowrap;
  display: block;
}

.nav-menu .sub-menu a:hover {
  background: var(--bg-raise);
  color: var(--fg);
}

.theme-toggle {
  background: transparent;
  border: var(--keyline);
  color: var(--fg);
  cursor: pointer;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 12px;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}

.theme-toggle:hover {
  background: var(--bg-raise);
  border-color: var(--fg);
}

/* Ikonbyte styrs av data-theme på <html> (satt före paint), inte av JS —
   så rätt ikon syns direkt utan flimmer. */
.theme-toggle .icon-dark  { display: block; }
.theme-toggle .icon-light { display: none; }
[data-theme="light"] .theme-toggle .icon-dark  { display: none; }
[data-theme="light"] .theme-toggle .icon-light { display: block; }

/* ==========================================================================
   MAIN
   ========================================================================== */
.main {
  min-height: calc(100vh - 60px);
  min-width: 0;
}

/* Layout (contentSize/wideSize, alignwide/alignfull, root padding) is
   driven by theme.json. WP injects the matching CSS automatically when
   the .main element is tagged with wp-site-blocks + has-global-padding
   + is-layout-constrained (see header.php). */

/* Spec — single 4-column key/value table block (humansyntax/spec) */
.hs-spec {
  max-width: 1280px !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
  width: 100%;
}
.hs-spec__table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 13px;
  table-layout: fixed;
}
.hs-spec__table tr + tr td { border-top: 1px solid var(--line); }
.hs-spec__table td {
  padding: 18px 32px;
  vertical-align: middle;
  background: transparent;
}
.hs-spec__table td:nth-child(2) { border-right: 1px solid var(--line); }
.hs-spec__label { color: var(--fg-soft); width: 12%; white-space: nowrap; }
.hs-spec__value { color: var(--fg); width: 38%; }

@media (max-width: 768px) {
  .hs-spec__table,
  .hs-spec__table tbody,
  .hs-spec__table tr,
  .hs-spec__table td { display: block; width: 100% !important; }
  .hs-spec__table {
    border-collapse: separate;
    border-spacing: 0;
  }
  .hs-spec__table td {
    border: none !important;
    padding: 0 24px;
  }
  .hs-spec__table .hs-spec__label {
    padding-top: 18px;
    padding-bottom: 8px;
  }
  .hs-spec__table .hs-spec__value {
    padding-top: 0;
    padding-bottom: 18px;
  }
  .hs-spec__table td:nth-child(3) {
    border-top: 1px solid var(--line) !important;
  }
  .hs-spec__table tr + tr td:first-child {
    border-top: 1px solid var(--line) !important;
  }
}

.hs-spec--editor .hs-spec__editor-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.hs-spec--editor .hs-spec__editor-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; padding: 12px; border: 1px dashed var(--line); }
.hs-spec--editor .hs-spec__editor-actions { display: flex; gap: 4px; }

/* Eyebrow — small monospace label above a heading or section */
.is-style-eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-soft);
  letter-spacing: 0.04em;
  margin: 0 0 8px;
  text-transform: none;
}

/* ==========================================================================
   SECTION WRAPPER — APstract block, respects theme presets
   ========================================================================== */
.wp-block-aps-section-wrapper {
  position: relative;
  padding: 96px 48px;
}

.wp-block-aps-section-wrapper .section-wrapper__container {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
}

.wp-block-aps-section-wrapper.no-padding-top { padding-top: 0; }
.wp-block-aps-section-wrapper.no-padding-bottom { padding-bottom: 0; }

/* Section separators — keyline at bottom */
.section-wrapper__effect-stroke {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
  pointer-events: none;
}

.section-wrapper__effect-stroke--bottom { bottom: 0; }
.section-wrapper__effect-stroke--top { top: 0; }

/* Diagonal separator — handled as a thin tilted line */
.section-wrapper__effect-stroke--separator-diagonal {
  height: 2px;
  background: var(--pembon-500);
  transform: skewY(-1.2deg);
  transform-origin: left center;
}

.section-wrapper__effect-stroke--separator {
  height: 2px;
  background: var(--pembon-500);
}

/* ==========================================================================
   HS HERO BLOCK (hs/hero)
   ========================================================================== */
.hs-brand-hero {
  position: relative;
  padding: 96px 0 120px;
  overflow: hidden;
}

.hs-brand-hero__bg {
  position: absolute;
  inset: 0;
  opacity: 0.4;
  pointer-events: none;
}

.hs-brand-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  min-width: 0;
}

.hs-brand-hero[data-layout="full"] .hs-brand-hero__inner {
  display: flex;
  flex-direction: column;
}

.hs-brand-hero[data-layout="split"] .hs-brand-hero__inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 56px;
  align-items: center;
}

.hs-brand-hero__content {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.hs-brand-hero[data-layout="full"] .hs-brand-hero__content {
  max-width: min(75%, 960px);
}

.hs-brand-hero__media {
  min-width: 0;
  min-height: 320px;
  border: var(--keyline);
  background: var(--bg-raise);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-faint);
}

.hs-brand-hero__media-placeholder {
  opacity: 0.5;
}

.hs-brand-hero__media--graphic {
  min-height: 620px;
  border: 0;
  background: transparent;
  align-items: center;
  justify-content: center;
  color: var(--fg);
}

.vp-hg {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 1.05 / 1;
  min-height: 620px;
  color: var(--fg);
  font-family: var(--display);
  -webkit-font-smoothing: antialiased;
}

.vp-hg * {
  box-sizing: border-box;
}

.vp-hg__browser {
  position: absolute;
  top: 4%;
  left: 0;
  width: 74%;
  background: var(--bg);
  border-radius: 10px;
  border: 1px solid color-mix(in oklab, var(--fg) 16%, transparent);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.vp-hg__tabbar {
  height: 26px;
  background: var(--bg-raise);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
}

.vp-hg__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--fg-faint) 42%, transparent);
}

.vp-hg__url {
  flex: 1;
  margin-left: 16px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--fg-faint);
}

.vp-hg__cover {
  height: 220px;
  position: relative;
  background: linear-gradient(155deg, #ffb27a 0%, var(--vepino-400) 58%, #c44912 100%);
}

.vp-hg__blob {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

.vp-hg__blob--1 {
  right: 16px;
  top: 16px;
  width: 90px;
  height: 90px;
}

.vp-hg__blob--2 {
  right: 60px;
  top: 70px;
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.12);
}

.vp-hg__meta {
  padding: 18px 20px 22px;
}

.vp-hg__title {
  font-size: 20px;
  font-weight: 600;
}

.vp-hg__when {
  margin-top: 6px;
  font-size: 12px;
  color: var(--fg-soft);
}

.vp-hg__cta-row {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.vp-hg__cta {
  padding: 8px 14px;
  border-radius: 5px;
  font-size: 12px;
}

.vp-hg__cta--primary {
  background: var(--vepino-400);
  color: #1a0a00;
  font-weight: 600;
}

.vp-hg__cta--ghost {
  border: 1px solid color-mix(in oklab, var(--fg) 16%, transparent);
  color: var(--fg);
}

.vp-hg__phone {
  position: absolute;
  right: 7%;
  bottom: 0;
  width: 200px;
  height: 410px;
  background: var(--bg);
  border-radius: 28px;
  border: 1px solid color-mix(in oklab, var(--fg) 16%, transparent);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  padding: 8px;
}

.vp-hg__screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--bg-card);
  border-radius: 22px;
  overflow: hidden;
}

.vp-hg__status {
  display: flex;
  justify-content: space-between;
  padding: 24px 16px 0;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--fg-soft);
}

.vp-hg__status .live {
  color: #7dd3a0;
}

.vp-hg__hd {
  margin-top: 20px;
  padding: 0 16px;
  font-size: 16px;
  font-weight: 600;
}

.vp-hg__qr {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 20px auto;
  background-color: var(--bg);
  border-radius: 8px;
  border: 1px solid color-mix(in oklab, var(--fg) 16%, transparent);
  overflow: hidden;
}

.vp-hg__qr::before {
  content: "";
  position: absolute;
  inset: 12px;
  opacity: 0.2;
  background-image: url("data:image/svg+xml,%3Csvg width='116' height='116' viewBox='0 0 116 116' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ededed'%3E%3Cpath d='M0 0h32v32H0zM6 6v20h20V6zM84 0h32v32H84zM90 6v20h20V6zM0 84h32v32H0zM6 90v20h20V90z' fill-rule='evenodd'/%3E%3Cpath d='M44 0h8v8h-8zM60 0h8v8h-8zM44 16h24v8H44zM76 16h8v8h-8zM40 36h8v8h-8zM56 36h8v8h-8zM72 36h24v8H72zM104 36h8v8h-8zM36 48h16v8H36zM60 48h8v8h-8zM84 48h8v8h-8zM100 48h16v8h-16zM40 60h8v8h-8zM56 60h32v8H56zM96 60h8v8h-8zM36 72h24v8H36zM68 72h8v8h-8zM84 72h32v8H84zM40 88h8v8h-8zM56 88h16v8H56zM80 88h8v8h-8zM96 88h8v8h-8zM48 104h16v8H48zM72 104h8v8h-8zM88 104h28v8H88z'/%3E%3C/g%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.vp-hg__scanline {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--vepino-400);
  box-shadow: 0 0 12px var(--vepino-400);
  animation: vp-hg-scan 2s ease-in-out infinite;
}

.vp-hg__toast {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 14px;
  padding: 10px;
  background: rgba(125, 211, 160, 0.12);
  border: 1px solid rgba(125, 211, 160, 0.35);
  border-radius: 8px;
}

.vp-hg__toast-tag {
  font-family: var(--mono);
  font-size: 11px;
  color: #7dd3a0;
}

.vp-hg__toast-name {
  margin-top: 2px;
  font-size: 12px;
  color: var(--fg);
}

.vp-hg__notif {
  position: absolute;
  left: -2%;
  bottom: 70px;
  width: 230px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg-raise);
  border: 1px solid color-mix(in oklab, var(--fg) 16%, transparent);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.vp-hg__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vepino-400);
  color: #1a0a00;
  font-weight: 700;
  font-size: 13px;
}

.vp-hg__notif-body {
  flex: 1;
}

.vp-hg__notif-name {
  font-size: 13px;
  font-weight: 600;
}

.vp-hg__notif-action {
  font-size: 11px;
  color: var(--fg-soft);
}

.vp-hg__notif-time {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--fg-faint);
}

.vp-hg__notif.is-fresh,
.vp-hg__toast.is-fresh {
  animation: vp-hg-pop 0.4s ease;
}

@keyframes vp-hg-scan {
  0% { top: 4%; }
  50% { top: 92%; }
  100% { top: 4%; }
}

@keyframes vp-hg-pop {
  0% { transform: scale(0.94); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .vp-hg__scanline,
  .vp-hg__notif.is-fresh,
  .vp-hg__toast.is-fresh {
    animation: none;
  }
}

.hs-brand-hero__eyebrow {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--fg-soft);
  margin: 0;
}

.hs-brand-hero__brand {
  display: flex;
  align-items: baseline;
  gap: 0.05em;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.hs-brand-hero__brand .bracket {
  color: var(--fg-soft);
  font-family: var(--mono);
  font-weight: 500;
}

.hs-brand-hero__brand-name {
  color: var(--fg);
}

.hs-brand-hero[data-tone="vepino"] .hs-brand-hero__brand-name { color: var(--vepino-400); }
.hs-brand-hero[data-tone="pembon"] .hs-brand-hero__brand-name { color: var(--pembon-400); }
.hs-brand-hero[data-tone="loost"] .hs-brand-hero__brand-name { color: var(--loost-400); }

[data-theme="light"] .hs-brand-hero[data-tone="vepino"] .hs-brand-hero__brand-name,
.theme-preset--light .hs-brand-hero[data-tone="vepino"] .hs-brand-hero__brand-name,
.theme-preset--gray-light .hs-brand-hero[data-tone="vepino"] .hs-brand-hero__brand-name {
  color: var(--vepino-700);
}
[data-theme="light"] .hs-brand-hero[data-tone="pembon"] .hs-brand-hero__brand-name,
.theme-preset--light .hs-brand-hero[data-tone="pembon"] .hs-brand-hero__brand-name,
.theme-preset--gray-light .hs-brand-hero[data-tone="pembon"] .hs-brand-hero__brand-name {
  color: var(--pembon-800);
}
[data-theme="light"] .hs-brand-hero[data-tone="loost"] .hs-brand-hero__brand-name,
.theme-preset--light .hs-brand-hero[data-tone="loost"] .hs-brand-hero__brand-name,
.theme-preset--gray-light .hs-brand-hero[data-tone="loost"] .hs-brand-hero__brand-name {
  color: var(--loost-800);
}

.hs-brand-hero__heading {
  font-family: var(--display);
  font-weight: 600;
  line-height: 0.96;
  letter-spacing: -0.045em;
  margin: 0;
  color: var(--fg);
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

/* Auto: full = lg, split = md */
.hs-brand-hero[data-layout="full"] .hs-brand-hero__heading { font-size: clamp(48px, 7vw, 104px); }
.hs-brand-hero[data-layout="split"] .hs-brand-hero__heading { font-size: clamp(40px, 5vw, 64px); }

/* Explicit scale overrides */
.hs-brand-hero[data-heading-scale="sm"] .hs-brand-hero__heading {
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.hs-brand-hero[data-heading-scale="md"] .hs-brand-hero__heading {
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.035em;
}
.hs-brand-hero[data-heading-scale="lg"] .hs-brand-hero__heading {
  font-size: clamp(48px, 7vw, 104px);
  line-height: 0.96;
  letter-spacing: -0.045em;
}

.hs-brand-hero__lead {
  font-size: 19px;
  line-height: 1.5;
  color: var(--fg-mute);
  max-width: 540px;
  margin: 8px 0 16px;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

.hs-brand-hero .hs-buttons,
.hs-brand-hero .wp-block-buttons {
  margin-top: 8px !important;
}

@media (max-width: 900px) {
  .hs-brand-hero[data-layout="split"] .hs-brand-hero__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .hs-brand-hero__media {
    min-height: 220px;
  }
  .hs-brand-hero__media--graphic {
    min-height: 560px;
  }
  .vp-hg {
    max-width: 560px;
    min-height: 560px;
    margin: 0 auto;
  }
}

@media (max-width: 600px) {
  .hs-brand-hero {
    padding: 56px 0 72px;
  }
  .hs-brand-hero__inner,
  .hs-brand-hero__content,
  .hs-brand-hero__media {
    width: 100%;
    max-width: 100%;
  }
  .hs-brand-hero[data-layout="full"] .hs-brand-hero__content {
    max-width: 100%;
  }
  .hs-brand-hero[data-layout="full"] .hs-brand-hero__heading,
  .hs-brand-hero[data-layout="split"] .hs-brand-hero__heading,
  .hs-brand-hero[data-heading-scale="lg"] .hs-brand-hero__heading {
    font-size: clamp(34px, 11vw, 44px);
    line-height: 1.02;
    letter-spacing: -0.03em;
  }
  .hs-brand-hero[data-heading-scale="md"] .hs-brand-hero__heading {
    font-size: clamp(30px, 9vw, 40px);
    line-height: 1.04;
  }
  .hs-brand-hero[data-heading-scale="sm"] .hs-brand-hero__heading {
    font-size: clamp(24px, 5vw, 36px);
  }
  .hs-brand-hero__lead {
    font-size: 16px;
    max-width: 100%;
  }
  .hs-brand-hero__brand {
    font-size: clamp(34px, 12vw, 48px);
    flex-wrap: wrap;
  }
  .hs-brand-hero .hs-buttons {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  .hs-brand-hero__media--graphic {
    min-height: 440px;
  }
  .vp-hg {
    min-height: 440px;
  }
  .vp-hg__browser {
    width: 78%;
  }
  .vp-hg__cover {
    height: 150px;
  }
  .vp-hg__phone {
    right: 0;
    width: 150px;
    height: 310px;
  }
  .vp-hg__status {
    padding-top: 18px;
  }
  .vp-hg__hd {
    margin-top: 16px;
  }
  .vp-hg__qr {
    width: 104px;
    height: 104px;
    margin: 16px auto;
  }
  .vp-hg__notif {
    left: 0;
    bottom: 44px;
    width: 200px;
  }
}

/* ==========================================================================
   HERO BLOCK — based on .lp-hero (legacy apstract hero)
   ========================================================================== */
.wp-block-apstract-hero,
.hero-block {
  position: relative;
  margin: 0;
}

.hero-block__container {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 56px;
  align-items: center;
}

.hero-block--img-right .hero-block__container {
  grid-template-columns: 1.3fr 1fr;
}

.hero-block__inner {
  position: relative;
  z-index: 1;
}

.hero-block__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(40px, 6vw, 88px) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.045em !important;
  margin: 0 0 24px !important;
  color: var(--fg) !important;
  text-wrap: pretty;
}

.hero-block__text {
  font-size: 18px !important;
  line-height: 1.55 !important;
  color: var(--fg-mute) !important;
  max-width: 540px;
  margin: 0 0 32px !important;
}

.hero-block__media:empty {
  display: none;
}

.hero-block__media img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================================
   BUTTONS — based on .lp-btn
   ========================================================================== */
.hs-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 16px 0 !important;
}

.hs-buttons.is-aligned-center { justify-content: center; }
.hs-buttons.is-aligned-right { justify-content: flex-end; }

.hs-buttons a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  text-decoration: none !important;
  font-family: var(--text);
  font-weight: 500;
  font-size: 14px;
  border: var(--keyline);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  margin: 0;
}

/* primary — solid fg, contrast bg, vepino on hover */
.hs-buttons a.primary,
.hs-buttons a:not(.secondary):not(.text) {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

.hs-buttons a.primary:hover,
.hs-buttons a:not(.secondary):not(.text):hover {
  background: var(--vepino-500);
  border-color: var(--vepino-500);
  color: var(--hs-950);
}

.hs-buttons a.secondary {
  background: transparent;
  color: var(--fg-mute);
  border-color: var(--line);
  font-family: var(--mono);
}

.hs-buttons a.secondary:hover {
  color: var(--fg);
  border-color: var(--fg);
}

.hs-buttons a.text {
  background: transparent;
  color: var(--fg);
  border: none;
  border-bottom: 1px solid var(--fg-faint);
  border-radius: 0;
  padding: 4px 0 2px;
  font-size: 12px;
  font-family: var(--mono);
  align-self: flex-start;
}

.hs-buttons a.text:hover {
  border-bottom-color: var(--vepino-500);
  color: var(--vepino-500);
  background: transparent;
}

/* Move primary/secondary trailing icon to the right of the label
   (.text variant uses .hs-buttons__chevron and stays on the left) */
.hs-buttons a .hs-buttons__icon {
  order: 2;
  margin: 0 !important;
}

/* Primary background follows enclosing brand tone */
[data-tone="vepino"] .hs-buttons a.primary,
[data-tone="vepino"] .hs-buttons a:not(.secondary):not(.text) {
  background: var(--vepino-400);
  border-color: var(--vepino-400);
  color: var(--hs-950);
}
[data-tone="vepino"] .hs-buttons a.primary:hover,
[data-tone="vepino"] .hs-buttons a:not(.secondary):not(.text):hover {
  background: var(--vepino-500);
  border-color: var(--vepino-500);
}
[data-tone="pembon"] .hs-buttons a.primary,
[data-tone="pembon"] .hs-buttons a:not(.secondary):not(.text) {
  background: var(--pembon-400);
  border-color: var(--pembon-400);
  color: var(--hs-950);
}
[data-tone="pembon"] .hs-buttons a.primary:hover,
[data-tone="pembon"] .hs-buttons a:not(.secondary):not(.text):hover {
  background: var(--pembon-500);
  border-color: var(--pembon-500);
}
[data-tone="loost"] .hs-buttons a.primary,
[data-tone="loost"] .hs-buttons a:not(.secondary):not(.text) {
  background: var(--loost-400);
  border-color: var(--loost-400);
  color: var(--hs-950);
}
[data-tone="loost"] .hs-buttons a.primary:hover,
[data-tone="loost"] .hs-buttons a:not(.secondary):not(.text):hover {
  background: var(--loost-500);
  border-color: var(--loost-500);
}

/* ==========================================================================
   HS-CTA FORM BUTTONS (plugin: hs-cta)
   The plugin exposes themeable tokens but ships green defaults
   (:root { --aps-color-primary: #00ea6e } — Contentor green) and paints
   .aps-button--primary with them via !important, so the CTA form ignored
   the theme. Re-point the tokens at the Human Syntax design system so the
   submit button matches .hs-buttons a.primary (fg → vepino on hover) and the
   input focus ring picks up the brand colour too.
   html[data-theme] (0,1,1) beats the plugin's :root (0,1,0) regardless of
   stylesheet load order.
   ========================================================================== */
html[data-theme] {
  --aps-color-primary:           var(--fg);
  --aps-color-primary-hover:     var(--vepino-500);
  --aps-color-text-on-primary:   var(--bg);
  --aps-color-secondary:         var(--bg-card);
  --aps-color-secondary-hover:   var(--bg-raise);
  --aps-color-text-on-secondary: var(--fg);
}

/* Two green leftovers the token swap can't reach: the plugin hard-codes a
   green hover glow and keeps light text on the orange hover. Match the
   theme's flat primary — dark text on vepino, no glow. */
.aps-button--primary:hover {
  color: var(--hs-950) !important;
  box-shadow: none !important;
}

/* --- CTA form fields ------------------------------------------------------
   Same root cause as the button: the plugin hard-codes light-mode colours
   (#ffffff inputs, #cbd5e1 borders, #334155 labels, #111827 title, green
   focus glow) that don't adapt to dark mode. Re-skin the whole form from the
   design system so it follows --bg/--fg/--line and flips light↔dark. Every
   selector is prefixed with .aps-cta so it out-specifies the plugin's rules
   regardless of stylesheet load order. */

/* Heading + body copy */
.aps-cta .aps-cta__title   { color: var(--fg); }
.aps-cta .aps-cta__text    { color: var(--fg-mute); }
.aps-cta .aps-cta__content { color: var(--fg-mute); }

/* Field labels */
.aps-cta .aps-form-group label           { color: var(--fg-mute); }
.aps-cta .aps-form-group label .required { color: var(--chord-error); }
.aps-cta .aps-form-group label .optional { color: var(--fg-faint); }

/* Inputs + textarea (contact/whitepaper grid + newsletter field) */
.aps-cta .aps-form-group input,
.aps-cta .aps-form-group textarea,
.aps-cta.aps-cta--newsletter .contentor-footer__newsletter-input {
  background: var(--bg-card) !important;
  color: var(--fg) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}

.aps-cta .aps-form-group input::placeholder,
.aps-cta .aps-form-group textarea::placeholder,
.aps-cta.aps-cta--newsletter .contentor-footer__newsletter-input::placeholder {
  color: var(--fg-faint) !important;
}

/* Branded vepino focus ring — replaces the plugin's green glow */
.aps-cta .aps-form-group input:focus,
.aps-cta .aps-form-group textarea:focus,
.aps-cta.aps-cta--newsletter .contentor-footer__newsletter-input:focus {
  border-color: var(--vepino-500) !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--vepino-500) 25%, transparent) !important;
}

/* Privacy note + consent / opt-in rows */
.aps-cta .aps-form-privacy         { color: var(--fg-faint); }
.aps-cta .aps-form-privacy a       { color: var(--fg-mute); }
.aps-cta .aps-form-privacy a:hover { color: var(--vepino-500); }
.aps-cta .aps-newsletter-consent,
.aps-cta .aps-newsletter-optin     { color: var(--fg-soft); }

.aps_buttons__chevron {
  display: inline-flex;
  align-items: center;
}

.aps_buttons__chevron svg {
  width: 14px;
  height: 14px;
}

.aps_buttons__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.aps_buttons__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.aps_buttons__icon--left { margin-right: 4px; }
.aps_buttons__icon--right { margin-left: 4px; }

.aps_buttons__label {
  display: inline-block;
}

/* ==========================================================================
   GRID CARDS — site-default look (numbered).
   On humansyntax all hs/grid-cards render as a numbered feature grid:
   ordinal top-left (CSS counter, overridable per box via data-eyebrow),
   icon top-right, title, body. Width is governed by WP alignment
   (none/wide/full); no max-width here.
   ========================================================================== */
.hs-grid-cards,
.wp-block-hs-grid-cards {
  counter-reset: feature;
  position: relative;
  isolation: isolate;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 0 !important;
  background: transparent !important;
  border: none !important;
  padding-inline: 0 !important;
  flex-wrap: nowrap !important;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  /* No margin-block — vertical rhythm comes from theme.json blockGap or
     section wrappers. Old margin-block:32px caused dark gaps between
     adjacent tinted blocks because the gap fell outside the wash. */
}

.hs-grid-cards::after,
.wp-block-hs-grid-cards::after {
  content: "";
  position: absolute;
  inset-block: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  background: var(--bg-raise);
  z-index: -1;
  pointer-events: none;
}

.hs-grid-cards .hs-grid-cards__box,
.wp-block-hs-grid-cards .hs-grid-cards__box,
.hs-grid-cards .wp-block-hs-grid-box,
.wp-block-hs-grid-cards .wp-block-hs-grid-box {
  counter-increment: feature;
  position: relative;
  padding: 60px 28px 28px !important;
  min-height: 0 !important;
  background: var(--bg);
  border: none;
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: 0;
  overflow: visible;
  flex: none;
  min-width: 0;
  transition: background 0.18s ease, box-shadow 0.18s ease;
}

.hs-grid-cards__box:hover,
.wp-block-hs-grid-box:hover,
.hs-grid-cards__box:focus-within,
.wp-block-hs-grid-box:focus-within {
  background: var(--bg-raise);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fg-faint) 58%, var(--line) 42%);
}

/* Inside a tinted section the box bg matches the section wash so the
   keyline grid floats over a continuous bg-raise field. */
.is-style-tinted .hs-grid-cards__box,
.is-style-tinted .wp-block-hs-grid-box {
  background: transparent;
}
.is-style-tinted .hs-grid-cards__box:hover,
.is-style-tinted .wp-block-hs-grid-box:hover,
.is-style-tinted .hs-grid-cards__box:focus-within,
.is-style-tinted .wp-block-hs-grid-box:focus-within {
  background: var(--bg-card);
}

img.hs-grid-cards__img {
  width: 100%;
  height: auto;
  display: block;
  align-self: center;
  max-width: 200px;
}

.hs-grid-cards__content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.hs-grid-cards__title {
  font-family: var(--display) !important;
  font-weight: 600 !important;
  font-size: 28px !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  color: var(--fg) !important;
  overflow-wrap: anywhere;
}

.hs-grid-cards__inner-content,
.hs-grid-cards__inner-content p {
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: var(--fg-mute) !important;
  margin: 0 0 12px !important;
  text-wrap: pretty;
}

.hs-grid-cards__inner-content .hs-buttons {
  margin-top: auto !important;
}

/* Ordinal top-left */
.hs-grid-cards .hs-grid-cards__box::before,
.wp-block-hs-grid-cards .hs-grid-cards__box::before {
  content: counter(feature, decimal-leading-zero);
  position: absolute;
  top: 28px;
  left: 28px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-faint);
  letter-spacing: 0.04em;
}

/* Eyebrow text on a grid-box overrides the auto-counter */
.hs-grid-cards .hs-grid-cards__box[data-eyebrow]::before,
.wp-block-hs-grid-cards .hs-grid-cards__box[data-eyebrow]::before {
  content: attr(data-eyebrow);
}

/* Icon top-right (override plugin's 48x48 colored badge) */
.hs-grid-cards .hs-grid-cards__icon,
.wp-block-hs-grid-cards .hs-grid-cards__icon {
  position: absolute !important;
  top: 28px !important;
  right: 28px !important;
  width: 24px !important;
  height: 24px !important;
  color: var(--fg) !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

.hs-grid-cards .hs-grid-cards__icon svg,
.wp-block-hs-grid-cards .hs-grid-cards__icon svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* Hide images entirely in this variant */
.hs-grid-cards img.hs-grid-cards__img,
.wp-block-hs-grid-cards img.hs-grid-cards__img,
.hs-grid-cards .hs-grid-cards__video-wrapper {
  display: none !important;
}

/* Content fills the box (ordinal + icon are absolutely positioned) */
.hs-grid-cards .hs-grid-cards__content,
.wp-block-hs-grid-cards .hs-grid-cards__content {
  padding: 0 !important;
  gap: 14px !important;
  flex: 1 1 auto !important;
  height: 100% !important;
}

.hs-grid-cards .hs-grid-cards__title,
.wp-block-hs-grid-cards .hs-grid-cards__title {
  font-family: var(--display) !important;
  font-weight: 500 !important;
  font-size: 24px !important;
  line-height: 1.18 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
  color: var(--fg) !important;
}

.hs-grid-cards .hs-grid-cards__inner-content,
.wp-block-hs-grid-cards .hs-grid-cards__inner-content,
.hs-grid-cards .hs-grid-cards__inner-content p,
.wp-block-hs-grid-cards .hs-grid-cards__inner-content p {
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: var(--fg-mute) !important;
  margin: 0 !important;
  overflow-wrap: anywhere;
}

.hs-grid-cards .hs-grid-cards__inner-content,
.wp-block-hs-grid-cards .hs-grid-cards__inner-content {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
}

.hs-grid-cards .hs-grid-cards__inner-content .hs-buttons,
.wp-block-hs-grid-cards .hs-grid-cards__inner-content .hs-buttons,
.hs-grid-cards .hs-grid-cards__content > .hs-buttons,
.wp-block-hs-grid-cards .hs-grid-cards__content > .hs-buttons {
  margin-top: auto !important;
  padding-top: 18px !important;
}

@media (max-width: 900px) {
  .hs-grid-cards,
  .wp-block-hs-grid-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  .hs-grid-cards,
  .wp-block-hs-grid-cards {
    grid-template-columns: 1fr !important;
  }

  .hs-grid-cards .hs-grid-cards__box,
  .wp-block-hs-grid-cards .hs-grid-cards__box,
  .hs-grid-cards .wp-block-hs-grid-box,
  .wp-block-hs-grid-cards .wp-block-hs-grid-box {
    padding: 56px 22px 24px !important;
  }

  .hs-grid-cards .hs-grid-cards__box::before,
  .wp-block-hs-grid-cards .hs-grid-cards__box::before {
    top: 22px;
    left: 22px;
  }

  .hs-grid-cards .hs-grid-cards__icon,
  .wp-block-hs-grid-cards .hs-grid-cards__icon {
    top: 22px !important;
    right: 22px !important;
    width: 22px !important;
    height: 22px !important;
  }

  .hs-grid-cards .hs-grid-cards__title,
  .wp-block-hs-grid-cards .hs-grid-cards__title {
    font-size: 22px !important;
    line-height: 1.15 !important;
  }

  .hs-grid-cards .hs-buttons,
  .wp-block-hs-grid-cards .hs-buttons {
    width: 100%;
  }
}

/* Panel variant for hs/grid-cards.
   Block style: Panels. Keeps the shared plugin block, but switches the
   presentation from numbered keyline grid to soft editorial cards. */
.hs-grid-cards.is-style-panels,
.wp-block-hs-grid-cards.is-style-panels {
  gap: 24px !important;
  background: transparent !important;
}

.hs-grid-cards.is-style-panels::after,
.wp-block-hs-grid-cards.is-style-panels::after {
  content: none;
}

.hs-grid-cards.is-style-panels .hs-grid-cards__box,
.wp-block-hs-grid-cards.is-style-panels .hs-grid-cards__box,
.hs-grid-cards.is-style-panels .wp-block-hs-grid-box,
.wp-block-hs-grid-cards.is-style-panels .wp-block-hs-grid-box {
  padding: 34px 32px 32px !important;
  min-height: 430px !important;
  background: color-mix(in oklab, var(--bg-card) 88%, var(--bg) 12%);
  border-radius: 0;
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.hs-grid-cards.is-style-panels .hs-grid-cards__box:hover,
.wp-block-hs-grid-cards.is-style-panels .hs-grid-cards__box:hover,
.hs-grid-cards.is-style-panels .wp-block-hs-grid-box:hover,
.wp-block-hs-grid-cards.is-style-panels .wp-block-hs-grid-box:hover {
  background: var(--bg-card);
}

.hs-grid-cards.is-style-panels .hs-grid-cards__box::before,
.wp-block-hs-grid-cards.is-style-panels .hs-grid-cards__box::before {
  content: "";
  position: static;
  display: block;
  order: 1;
  width: 24px;
  height: 1px;
  margin: 2px 0 12px;
  background: currentColor;
  color: var(--fg-faint);
  opacity: 0.72;
}

.hs-grid-cards.is-style-panels .hs-grid-cards__box[data-eyebrow]::before,
.wp-block-hs-grid-cards.is-style-panels .hs-grid-cards__box[data-eyebrow]::before {
  content: "// " attr(data-eyebrow);
  width: auto;
  height: auto;
  margin: 0 0 18px;
  background: none;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.hs-grid-cards.is-style-panels .hs-grid-cards__icon,
.wp-block-hs-grid-cards.is-style-panels .hs-grid-cards__icon {
  display: none !important;
}

.hs-grid-cards.is-style-panels .hs-grid-cards__content,
.wp-block-hs-grid-cards.is-style-panels .hs-grid-cards__content {
  order: 2;
  gap: 18px !important;
  padding-bottom: 28px !important;
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  height: 100% !important;
}

.hs-grid-cards.is-style-panels .hs-grid-cards__title,
.wp-block-hs-grid-cards.is-style-panels .hs-grid-cards__title {
  max-width: 15ch;
  font-size: clamp(26px, 2.4vw, 34px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.035em !important;
}

.hs-grid-cards.is-style-panels .hs-grid-cards__inner-content,
.wp-block-hs-grid-cards.is-style-panels .hs-grid-cards__inner-content,
.hs-grid-cards.is-style-panels .hs-grid-cards__inner-content p,
.wp-block-hs-grid-cards.is-style-panels .hs-grid-cards__inner-content p {
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: var(--fg-mute) !important;
}

.hs-grid-cards.is-style-panels .hs-grid-cards__inner-content,
.wp-block-hs-grid-cards.is-style-panels .hs-grid-cards__inner-content {
  flex: 1 1 auto !important;
}

.hs-grid-cards.is-style-panels img.hs-grid-cards__img,
.wp-block-hs-grid-cards.is-style-panels img.hs-grid-cards__img {
  order: 3;
  display: block !important;
  margin-top: auto !important;
  width: 100% !important;
  max-width: none;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 0;
  background: color-mix(in oklab, var(--bg) 70%, var(--bg-card) 30%);
  object-fit: cover;
}

.hs-grid-cards.is-style-panels .hs-grid-cards__video-wrapper,
.wp-block-hs-grid-cards.is-style-panels .hs-grid-cards__video-wrapper {
  display: block !important;
  margin-top: auto !important;
  border: 1px solid var(--line);
  border-radius: 0;
  overflow: hidden;
}

/* ==========================================================================
   CUSTOMER LOGOS
   ========================================================================== */
.wp-block-aps-customer-logos {
  margin: 32px 0;
}

.customer-logos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 32px;
  align-items: center;
  justify-items: center;
}

.customer-logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.customer-logo-item img {
  max-width: 100%;
  max-height: 36px;
  height: auto;
  width: auto;
  opacity: 0.65;
  transition: opacity 0.12s;
}

.theme-preset--contentor-blue .customer-logo-item img,
.theme-preset--contentor-dark .customer-logo-item img {
  filter: brightness(1.4);
}

.customer-logo-item:hover img {
  opacity: 1;
}

/* ==========================================================================
   FAQ BLOCK
   ========================================================================== */
.wp-block-apstract-faq,
.faq-block {
  margin: 0 !important;
}

.faq-block__container {
  display: flex;
  flex-direction: column;
  border: var(--keyline);
}

.faq-item {
  border-bottom: var(--keyline-soft);
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-item__question {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 18px 22px !important;
  cursor: pointer;
  background: transparent;
  transition: background 0.12s;
}

.faq-item__question:hover {
  background: var(--bg-raise);
}

.faq-item__question-text {
  font-family: var(--display) !important;
  font-weight: 500 !important;
  font-size: 18px !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  color: var(--fg) !important;
}

.faq-item__toggle {
  flex-shrink: 0;
  color: var(--fg-soft);
  transition: transform 0.2s;
  display: inline-flex;
}

.faq-item__toggle svg {
  width: 20px;
  height: 20px;
}

.faq-item.is-expanded .faq-item__toggle {
  transform: rotate(180deg);
}

.faq-item__answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease;
}

.faq-item.is-expanded .faq-item__answer {
  max-height: 1000px;
}

.faq-item__answer-content {
  padding: 0 22px 22px !important;
  color: var(--fg-mute) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

/* ==========================================================================
   PRICING — based on keyline-grid pattern
   ========================================================================== */
.apstract-pricing {
  margin: 32px 0;
}

.apstract-pricing__intro {
  text-align: center;
  margin-bottom: 32px;
}

.apstract-pricing__heading {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(32px, 4.5vw, 48px);
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 14px;
  color: var(--fg);
}

.apstract-pricing__tagline {
  font-size: 16px;
  color: var(--fg-mute);
  margin: 0 0 8px;
}

.apstract-pricing__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--line);
  border: var(--keyline);
  margin: 32px 0 0;
}

.apstract-pricing__card {
  background: var(--bg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  transition: background 0.15s;
}

.apstract-pricing__card:hover {
  background: var(--bg-raise);
}

.apstract-pricing__card.is-highlight {
  background: var(--bg-raise);
}

.apstract-pricing__badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--vepino-500);
  color: var(--hs-950);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.apstract-pricing__plan-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 16px;
  border-bottom: var(--keyline-soft);
}

.apstract-pricing__plan-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--fg);
}

.apstract-pricing__price {
  font-family: var(--display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.apstract-pricing__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.apstract-pricing__features li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-mute);
}

.apstract-pricing__feature-icon {
  color: var(--pembon-500);
  font-weight: 600;
  font-family: var(--mono);
}

.apstract-pricing__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: var(--fg);
  color: var(--bg);
  border: 1px solid var(--fg);
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  align-self: flex-start;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.apstract-pricing__cta:hover {
  background: var(--vepino-500);
  border-color: var(--vepino-500);
  color: var(--hs-950);
}

.apstract-pricing__enterprise-row-wrapper {
  margin-top: 1px;
  background: var(--line);
  padding: 1px;
  border: var(--keyline);
  border-top: none;
}

.apstract-pricing__enterprise-row-wrapper .apstract-pricing__card.is-enterprise-row {
  background: var(--bg);
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2fr auto;
  gap: 32px;
  align-items: center;
}

.apstract-pricing__enterprise-row-wrapper .apstract-pricing__features {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px 24px;
}

.apstract-pricing__enterprise-row-wrapper .apstract-pricing__features li {
  flex: 0 1 auto;
  min-width: 200px;
}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.apstract-testimonials {
  position: relative;
  padding: 32px 0;
}

.apstract-testimonials__viewport {
  overflow: hidden;
}

.apstract-testimonials__slides {
  display: flex;
  transition: transform 0.4s ease;
}

.apstract-testimonials__slide {
  flex: 0 0 100%;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 48px;
  gap: 20px;
}

.apstract-testimonials__photo-ring {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 1px solid var(--vepino-500);
  padding: 4px;
  flex-shrink: 0;
}

.apstract-testimonials__photo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.apstract-testimonials__quote {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 32px);
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--fg);
  max-width: 760px;
  margin: 0;
  text-wrap: pretty;
}

.apstract-testimonials__quote::before { content: "\201C"; }
.apstract-testimonials__quote::after { content: "\201D"; }

.apstract-testimonials__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--mono);
  font-size: 12px;
}

.apstract-testimonials__name {
  color: var(--fg);
  font-weight: 600;
}

.apstract-testimonials__position,
.apstract-testimonials__company,
.apstract-testimonials__meta-text {
  color: var(--fg-faint);
}

.apstract-testimonials__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.apstract-testimonials__dot {
  width: 8px;
  height: 8px;
  border: none;
  background: var(--fg-faint);
  cursor: pointer;
  transition: background 0.12s;
  padding: 0;
}

.apstract-testimonials__dot.is-active {
  background: var(--vepino-500);
}

.apstract-testimonials__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: var(--keyline);
  width: 36px;
  height: 36px;
  cursor: pointer;
  color: var(--fg-mute);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.12s, border-color 0.12s;
}

.apstract-testimonials__nav:hover {
  color: var(--fg);
  border-color: var(--fg);
}

.apstract-testimonials__nav.is-prev { left: 0; }
.apstract-testimonials__nav.is-next { right: 0; }

/* ==========================================================================
   IMAGE / FIGURES
   ========================================================================== */
.wp-block-image {
  margin: 32px 0;
}

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

.wp-block-image.is-style-contentor-green-frame {
  background: var(--pembon-300);
  padding: 14px;
  border-radius: 12px;
}

.wp-block-image.is-style-contentor-green-frame img {
  border-radius: 6px;
  width: 100%;
}

/* ==========================================================================
   TYPOGRAPHY (block headings, paragraphs, columns)
   ========================================================================== */
.wp-block-heading {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0 0 20px;
  text-wrap: pretty;
}

h2.wp-block-heading {
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
}

h3.wp-block-heading {
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.15;
  margin-bottom: 16px;
}

.wp-block-heading.has-large-font-size {
  font-size: clamp(28px, 3.6vw, 40px) !important;
}

.wp-block-heading.has-x-large-font-size {
  font-size: clamp(36px, 5vw, 56px) !important;
  letter-spacing: -0.03em !important;
}

.wp-block-heading.has-medium-font-size {
  font-size: clamp(20px, 2.2vw, 24px) !important;
  font-weight: 500 !important;
  color: var(--fg-mute) !important;
}

.wp-block-heading.has-text-align-center { text-align: center; }
.wp-block-heading.has-text-align-right { text-align: right; }

.wp-block-paragraph,
p {
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 16px;
  color: var(--fg-mute);
}

/* WordPress nollar margin på direkta barn i layout-containers
   (:root :where(.is-layout-*) > * { margin-block: 0 }, väger 0,1,0) och
   blockGap är 0 i theme.json — så staplade paragrafer kollapsar ihop.
   Den här regeln väger 0,1,1 och återinför paragrafrytmen utan att röra
   gapet för övriga block. */
:root :where(.is-layout-flow, .is-layout-constrained) > p {
  margin-block-end: 16px;
}

.wp-block-columns {
  display: flex;
  gap: 56px !important;
  margin: 32px 0;
}

.wp-block-column {
  flex: 1;
  min-width: 0;
}

a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--fg-faint);
  text-underline-offset: 3px;
  transition: color 0.12s, text-decoration-color 0.12s;
}

a:hover {
  color: var(--vepino-500);
  text-decoration-color: var(--vepino-500);
}

/* ==========================================================================
   SECTION INTRO (pattern: humansyntax/section-intro)
   ========================================================================== */
.hs-section-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
  column-gap: clamp(40px, 7vw, 96px);
  row-gap: 16px;
  align-items: end;
  padding: 80px 0 48px;
}

.hs-section-intro__eyebrow {
  grid-column: 1;
  margin: 0 !important;
}

.hs-section-intro__title {
  grid-column: 1;
  margin: 0 !important;
  max-width: 12ch;
  font-size: clamp(44px, 6vw, 76px) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.045em !important;
}

.hs-section-intro__lead {
  grid-column: 2;
  margin: 0 0 6px !important;
  max-width: 42ch;
  font-size: clamp(18px, 2vw, 22px) !important;
  line-height: 1.35 !important;
  color: var(--fg-mute);
}

@media (max-width: 1100px) {
  .hs-section-intro {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 0.75fr);
    column-gap: clamp(32px, 5vw, 56px);
  }

  .hs-section-intro__title {
    max-width: 13ch;
    font-size: clamp(42px, 5.2vw, 64px) !important;
  }

  .hs-section-intro__lead {
    font-size: clamp(17px, 1.8vw, 20px) !important;
  }
}

@media (max-width: 720px) {
  .hs-section-intro {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 64px 0 40px;
  }

  .hs-section-intro__eyebrow,
  .hs-section-intro__title,
  .hs-section-intro__lead {
    grid-column: 1;
  }

  .hs-section-intro__title {
    max-width: 18ch;
    font-size: clamp(38px, 9vw, 56px) !important;
  }

  .hs-section-intro__lead {
    max-width: 52ch;
    margin-bottom: 0 !important;
  }
}

/* ==========================================================================
   FEATURE SECTION (pattern: humansyntax/feature-section)
   Width is governed by WP alignment — pattern uses align="wide" → 1280px.
   ========================================================================== */
.hs-feature {
  padding: 80px 0;
  border-bottom: var(--keyline);
}

.hs-feature:has(+ .is-style-tinted),
.hs-feature.is-style-tinted:has(+ :not(.is-style-tinted)) {
  border-bottom-color: transparent;
}

/* Container only — no per-element typography overrides. h2/p/ul use
   their global rules so the same block looks the same regardless of
   which wrapper it sits in. */
.hs-feature__text {
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Media slot — no placeholder frame. Whatever block sits inside renders
   itself; the wrapper has no styling of its own. */
.hs-feature__media {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Tinted — named block-style. ::before paints the bg-raise wash from
   the block's vertical bounds out to the viewport horizontally.
   Works at any alignment (none/wide/full) because 50% is relative
   to the block itself (not its parent), so calc(50% - 50vw) always
   resolves to "extend to the viewport edge".
   isolation:isolate gives the block its own stacking context so the
   pseudo's z-index:-1 stays behind block content without leaking
   above/below to other elements on the page. */
.is-style-tinted {
  position: relative;
  isolation: isolate;
  padding-block: var(--wp--preset--spacing--section-y);
  margin-block: 0 !important;
}

.is-style-tinted::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  background-color: var(--wp--preset--color--bg-raise);
  z-index: -1;
  pointer-events: none;
}

.is-style-tinted + .is-style-tinted {
  margin-top: 0 !important;
}

.is-style-tinted:has(+ .is-style-tinted)::before {
  bottom: -1px;
}

.is-style-tinted + .is-style-tinted::before {
  top: -1px;
}


@media (max-width: 900px) {
  .hs-feature { padding: 48px 0; }
  .hs-feature__text { max-width: none; }
}

/* ==========================================================================
   LIST BLOCK STYLES — check / dot / arrow (registered on core/list)
   Uses ::before instead of ::marker so editor iframe + frontend behave the same.
   ========================================================================== */
.wp-block-list.is-style-check,
.wp-block-list.is-style-dot,
.wp-block-list.is-style-arrow {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0;
}

.wp-block-list.is-style-check li,
.wp-block-list.is-style-dot li,
.wp-block-list.is-style-arrow li {
  position: relative;
  padding-left: 1.8em;
  font-family: var(--text);
  font-size: 14px;
  line-height: 1.6;
  margin: 6px 0;
  list-style: none;
}

.wp-block-list.is-style-check li::before,
.wp-block-list.is-style-dot li::before,
.wp-block-list.is-style-arrow li::before {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
  width: 1.4em;
}

.wp-block-list.is-style-check li::before {
  content: "✓";
  color: var(--pembon-400);
  font-weight: 600;
}
.wp-block-list.is-style-dot li::before {
  content: "●";
  color: var(--fg-faint);
  font-size: 0.7em;
  top: 0.35em;
}
.wp-block-list.is-style-arrow li::before {
  content: "→";
  color: var(--fg-mute);
  font-family: var(--mono);
}

/* ==========================================================================
   CTA BANNER (pattern: humansyntax/cta-banner)
   ========================================================================== */
.hs-cta-banner {
  background: var(--bg-raise);
  border: var(--keyline);
  border-radius: 0;
  padding: 32px 40px;
  width: 100%;
  display: flex !important;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  margin-block: 120px 160px !important;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.hs-cta-banner:hover,
.hs-cta-banner:focus-within {
  background: color-mix(in oklab, var(--bg-raise) 78%, var(--bg-card) 22%);
  border-color: color-mix(in oklab, var(--fg-faint) 45%, var(--line) 55%);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fg-faint) 20%, transparent);
}

.hs-cta-banner + * {
  margin-top: 0 !important;
}

.hs-cta-banner.alignwide {
  max-width: var(--wp--style--global--wide-size);
}

.hs-cta-banner.alignfull {
  max-width: none;
  width: auto;
  border-right: none;
  border-left: none;
  border-radius: 0;
}

.hs-cta-banner__text {
  flex: 1 1 auto;
  min-width: 0;
}

.hs-cta-banner__eyebrow {
  margin: 0 0 12px !important;
}

.hs-cta-banner__title {
  font-family: var(--display);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: 1.05;
  margin: 0 !important;
  color: var(--fg);
}

.hs-cta-banner .hs-buttons {
  flex: 0 0 auto;
}

@media (max-width: 768px) {
  .hs-cta-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px;
    gap: 24px;
    margin-block: 80px 112px !important;
  }
  .hs-cta-banner .hs-buttons {
    width: 100%;
  }
}

/* ==========================================================================
   BRAND TONES — block style "tone-<slug>" on core/group.
   To add a new tone:
     1. Add color scale --<slug>-400 / --<slug>-500 to tokens.css
     2. Add one --tone-bg / --tone-bg-hover line below
     3. Add slug to hs_brand_tones() in functions.php
   ========================================================================== */
.is-style-tone-vepino { --tone-bg: var(--vepino-400); --tone-bg-hover: var(--vepino-500); }
.is-style-tone-pembon { --tone-bg: var(--pembon-400); --tone-bg-hover: var(--pembon-500); }
.is-style-tone-loost  { --tone-bg: var(--loost-400);  --tone-bg-hover: var(--loost-500);  }

[class*="is-style-tone-"] .hs-buttons a.primary,
[class*="is-style-tone-"] .hs-buttons a:not(.secondary):not(.text) {
  background: var(--tone-bg);
  border-color: var(--tone-bg);
  color: var(--hs-950);
}

[class*="is-style-tone-"] .hs-buttons a.primary:hover,
[class*="is-style-tone-"] .hs-buttons a:not(.secondary):not(.text):hover {
  background: var(--tone-bg-hover);
  border-color: var(--tone-bg-hover);
  color: var(--hs-950);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  --bg: #0B0D10;
  --bg-raise: #171B22;
  --bg-card: #20242E;
  --line: #242A34;
  --line-soft: #1A1F27;
  --fg: #F2F4F7;
  --fg-mute: #C7CEDB;
  --fg-soft: #B1B8C6;
  --fg-faint: #9FA8B7;
  --comment: #A0A8B6;
  background: var(--bg);
  color: var(--fg);
  padding: 0 48px 24px;
  margin-top: 128px;
  border-top: 1px solid var(--line);
}

.site-footer__contact {
  max-width: 1280px;
  margin: 0 auto 48px;
  padding-top: 88px;
}

.site-footer__contact-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
}

.site-footer__card {
  padding: 8px 0;
}

.site-footer__eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-soft);
  margin: 0 0 16px;
  letter-spacing: 0.04em;
}

.site-footer__eyebrow span:first-child {
  color: var(--fg-faint);
  opacity: 0.72;
}

.site-footer__title {
  font-family: var(--display);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  margin: 0 0 16px;
  color: var(--fg);
  line-height: 1.0;
}

.site-footer__lead {
  font-size: 15px;
  color: var(--fg-mute);
  margin: 0 0 32px;
  max-width: 42ch;
}

.site-footer__contact-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: var(--keyline);
  border-radius: 0;
  overflow: hidden;
}

.site-footer__contact-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: var(--keyline-soft);
  font-family: var(--mono);
  font-size: 13px;
  transition: background 0.16s ease, border-color 0.16s ease;
}

.site-footer__contact-row:hover,
.site-footer__contact-row:focus-within {
  background: color-mix(in oklab, var(--bg-raise) 36%, transparent);
  border-bottom-color: var(--line);
}

.site-footer__contact-row:last-child {
  border-bottom: none;
}

.site-footer__contact-row dt {
  color: var(--fg-soft);
  margin: 0;
}

.site-footer__contact-row dd {
  color: var(--fg);
  margin: 0;
  font-weight: 500;
}

.site-footer__contact-row dd a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.12s;
}

.site-footer__contact-row dd a:hover {
  border-bottom-color: var(--fg-faint);
}

.site-footer__card--code {
  background: var(--bg-raise);
  border: var(--keyline);
  border-radius: 0;
  padding: 24px;
  display: flex;
  align-items: flex-start;
}

.site-footer__code {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.65;
  color: var(--fg-mute);
  margin: 0;
  white-space: pre;
  overflow-x: auto;
  width: 100%;
}

.site-footer__code .comment     { color: var(--comment); }
.site-footer__code .comment::before { content: ""; }
.site-footer__code .tok-keyword { color: var(--chord-keyword); }
.site-footer__code .tok-string  { color: var(--chord-string); }
.site-footer__code .tok-tag     { color: var(--chord-keyword); }
.site-footer__code .tok-attr    { color: var(--fg-soft); }
.site-footer__code .tok-fn      { color: var(--fg); }

@media (max-width: 900px) {
  .site-footer {
    margin-top: 88px;
  }
  .site-footer__contact { padding-top: 64px; margin-bottom: 32px; }
  .site-footer__contact-inner { grid-template-columns: 1fr; gap: 16px; }
  .site-footer__card { padding: 0; }
  .site-footer__card--code { padding: 20px; }
  .site-footer__code { font-size: 12px; }
  .site-footer__build { display: none; }
}

.site-footer__keyline {
  width: 100%;
  margin: 0 0 24px;
  border-top: var(--keyline);
}

.site-footer__meta {
  width: 100%;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-soft);
  flex-wrap: wrap;
}

.site-footer__identity,
.site-footer__build {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 900px) {
  .site-footer__build {
    display: none;
  }
}

.site-footer__brand-primary {
  color: var(--fg);
  font-weight: 600;
}

.site-footer__brand-suffix {
  font-weight: 400;
  margin-left: 0.4em;
}

.site-footer__sep {
  color: var(--fg-faint);
  opacity: 0.45;
}

.site-footer__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.site-footer__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c2f04a;
  box-shadow: 0 0 8px rgba(194, 240, 74, 0.7);
  display: inline-block;
  animation: hs-status-pulse 3.2s ease-in-out infinite;
}

@keyframes hs-status-pulse {
  0%, 100% {
    box-shadow: 0 0 6px rgba(194, 240, 74, 0.45);
    opacity: 0.82;
  }
  50% {
    box-shadow: 0 0 14px rgba(194, 240, 74, 0.85);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hs-grid-cards .hs-grid-cards__box,
  .wp-block-hs-grid-cards .hs-grid-cards__box,
  .hs-grid-cards .wp-block-hs-grid-box,
  .wp-block-hs-grid-cards .wp-block-hs-grid-box,
  .hs-cta-banner,
  .site-footer__contact-row,
  .site-footer__contact-row dd a {
    transition: none !important;
  }

  .site-footer__dot {
    animation: none;
  }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  .topbar {
    grid-template-columns: 1fr auto;
    padding: 12px 22px;
    gap: 12px;
  }

  .topbar-nav {
    display: none;
  }

  .wp-block-aps-section-wrapper {
    padding: 56px 22px;
  }

  .hero-block__container {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .wp-block-columns {
    flex-direction: column;
    gap: 32px !important;
  }

  .footer-container {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-nav {
    text-align: left;
  }

  .apstract-pricing__enterprise-row-wrapper .apstract-pricing__card.is-enterprise-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .apstract-testimonials__slide {
    padding: 24px 16px;
  }

  .hs-grid-cards,
  .wp-block-hs-grid-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .hs-feature.hs-flex-layout {
    align-items: flex-start;
  }

  .hs-feature__text,
  .hs-feature__media {
    min-width: 0;
  }

  .hs-feature__media figure,
  .hs-feature__media img {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .hs-grid-cards,
  .wp-block-hs-grid-cards {
    grid-template-columns: 1fr !important;
  }

  .hs-grid-cards .hs-grid-cards__box,
  .wp-block-hs-grid-cards .hs-grid-cards__box,
  .hs-grid-cards .wp-block-hs-grid-box,
  .wp-block-hs-grid-cards .wp-block-hs-grid-box {
    padding: 56px 22px 24px !important;
    width: 100%;
  }

  .hs-feature.hs-flex-layout {
    flex-direction: column;
    gap: 32px;
  }

  .hs-feature.hs-flex-layout > .hs-flex-item {
    flex: 1 1 100% !important;
    width: 100%;
  }

  .hs-feature__text {
    max-width: none;
    order: 1;
  }

  .hs-feature__media {
    order: 2;
  }
}

@media (max-width: 600px) {
  .topbar {
    padding: 10px 16px;
  }

  .wp-block-aps-section-wrapper {
    padding: 40px 16px;
  }

  .site-footer {
    padding: 32px 16px;
  }

  .hero-block__title {
    font-size: clamp(32px, 8vw, 48px) !important;
  }

  .hero-block__text {
    font-size: 16px !important;
  }

  .main {
    overflow-x: clip;
  }

  .hs-grid-cards__box,
  .wp-block-hs-grid-box {
    min-height: 0 !important;
  }

  .hs-feature {
    padding: 40px 0;
  }
}

/* Final responsive guard for hs/grid-cards.
   Keep this late in the file so it wins over plugin block styles and
   WordPress alignment styles. The grid should respond to available space
   and never keep four columns when the row cannot actually fit them. */
.main .hs-grid-cards.wp-block-hs-grid-cards {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important;
  gap: 0 !important;
}

.main .hs-grid-cards.wp-block-hs-grid-cards.is-style-panels {
  gap: 24px !important;
}

.main .hs-grid-cards.wp-block-hs-grid-cards > .wp-block-hs-grid-box,
.main .hs-grid-cards.wp-block-hs-grid-cards > .hs-grid-cards__box {
  min-width: 0 !important;
  width: auto !important;
}

@media (max-width: 1200px) {
  .main .hs-grid-cards.wp-block-hs-grid-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .main .hs-grid-cards.wp-block-hs-grid-cards:has(> :first-child:last-child) {
    grid-template-columns: 1fr !important;
  }

  .main .hs-grid-cards.wp-block-hs-grid-cards:has(> :nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .main .hs-grid-cards.wp-block-hs-grid-cards:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  .main .hs-grid-cards.wp-block-hs-grid-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .main .hs-grid-cards.wp-block-hs-grid-cards:has(> :first-child:last-child) {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 680px) {
  .main .hs-grid-cards.wp-block-hs-grid-cards {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   LANGUAGE SWITCHER — minimal "SV | EN" rendering, used in header + footer
   ========================================================================== */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.topbar-utils {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.lang-switcher__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.lang-switcher__item {
  display: inline-flex;
  align-items: center;
}

.lang-switcher__item + .lang-switcher__item::before {
  content: "|";
  color: var(--fg-faint);
  opacity: 0.5;
  padding: 0 8px;
}

.lang-switcher__link {
  color: var(--fg-soft);
  text-decoration: none;
  padding: 2px 0;
  transition: color 0.12s;
}

.lang-switcher__link:hover {
  color: var(--fg);
}

.lang-switcher__item.is-active .lang-switcher__link {
  color: var(--fg);
}