/* Zaivit site styles.
   Page bodies keep the canvas's inline styles (ported verbatim), so this file
   owns tokens, shared chrome (header, mega menu, mobile drawer, footer, cookie
   dialog) and the responsive overrides that inline styles can't express. */

:root {
  --accent: #2047C8;
  --accent-hover: #16348F;
  --ink: #121417;
  --ink-2: #3A404C;
  --muted: #4B5160;
  --border: #D9DCE1;
  --border-strong: #8C93A0;
  --surface: #F3F4F6;
  --placeholder: #E7E9ED;
  --success: #166534;
  --danger: #B91C1C;
  --warning: #92400E;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --container: 1280px;
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --header-h: 69px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; font-family: var(--font-sans); color: var(--ink); background: #FFFFFF; }
img, svg { max-width: 100%; }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
summary { cursor: pointer; }
button, input, select, textarea { font: inherit; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* Native checkboxes/radios render at ~13px, too small to hit reliably on touch. */
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; margin: 0; flex-shrink: 0; accent-color: var(--accent); }

/* Breadcrumb and table links are short single-line text (~18px tall). Padding
   with an equal negative margin grows the tap area to ~42px without moving
   anything visually. */
nav[aria-label="Breadcrumb"] a, td > a { display: inline-block; padding-block: 12px; margin-block: -12px; }

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

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--ink); color: #FFFFFF; padding: 12px 16px; border-radius: var(--radius-sm);
  text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: 12px; color: #FFFFFF; }

/* ---------- Buttons (used by chrome and ported JS UIs) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: var(--radius-sm);
  font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
}
.btn--primary { background: var(--accent); color: #FFFFFF; border-color: var(--accent); }
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #FFFFFF; }
.btn--secondary { background: #FFFFFF; color: var(--ink); border-color: var(--ink); }
.btn--secondary:hover { background: var(--surface); color: var(--ink); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: #FFFFFF; border-bottom: 1px solid var(--border);
}
.site-header__inner {
  max-width: var(--container); margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; gap: 10px 28px;
}
/* Logo copied from the live zaivit.com: blue "Z" tile + blue wordmark. The
   tile is drawn from favicon.svg in CSS (as on the live site), so every page's
   logo markup stays plain text and screen readers still hear "Zaivit".
   Three places carry it: the header (.site-logo), the footer brand line, and
   the account sidebar on the dashboard/marketplace previews. */
.site-logo,
.site-footer__brand > strong:first-child,
.account-layout nav > strong:first-child {
  --logo-blue: #2563EB;
  display: inline-flex; align-items: center; gap: 9px;
  /* Same system stack as the live wordmark: no extra font download. */
  font-family: "Avenir Next", Futura, "Century Gothic", "Segoe UI", system-ui, sans-serif;
  font-weight: 800; font-size: 23px; letter-spacing: -0.04em; line-height: 1;
  color: var(--logo-blue); text-decoration: none;
}
.site-logo::before,
.site-footer__brand > strong:first-child::before,
.account-layout nav > strong:first-child::before {
  content: ""; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 7px;
  background: var(--logo-blue) url("../favicon.svg") center / 100% 100% no-repeat;
}
.site-logo:hover { color: var(--logo-blue); }
.site-footer__brand > strong:first-child { align-self: flex-start; }
/* Reversed logo on the dark account sidebar: blue on #121417 is too dim. */
.account-layout nav > strong:first-child { color: #FFFFFF; margin-bottom: 4px; }
.site-nav { display: flex; flex-wrap: wrap; gap: 2px 22px; flex: 1 1 auto; align-items: center; }
.site-nav__link {
  color: var(--ink); text-decoration: none; padding: 12px 0; font-size: 15px;
  background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
  border-bottom: 2px solid transparent;
}
.site-nav__link:hover { color: var(--accent); }
.site-nav__link[aria-current="page"], .site-nav__link.is-active { font-weight: 600; border-bottom-color: var(--ink); }
.site-nav__trigger svg { width: 12px; height: 12px; transition: transform .15s ease; }
.site-nav__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

.header-icon {
  color: var(--ink); display: inline-flex; width: 44px; height: 44px;
  align-items: center; justify-content: center; border-radius: var(--radius-sm);
}
.header-icon:hover { background: var(--surface); color: var(--ink); }
.header-region {
  color: var(--muted); display: inline-flex; gap: 6px; align-items: center; min-height: 44px;
  padding: 0 10px; border-radius: var(--radius-sm); text-decoration: none; font-size: 14px;
}
.header-region:hover { background: var(--surface); color: var(--ink); }
/* Quiet door to the partner site (tools/nav.mjs): a link, not a menu, so the
   business header sells to businesses. */
.header-audience {
  font-size: 14px; color: var(--muted); text-decoration: none; white-space: nowrap;
  padding: 10px 4px; border-bottom: 2px solid transparent;
}
.header-audience:hover { color: var(--accent); }
/* Partner pages: "Zaivit for IT providers" lockup. */
.site-logo__tag { font-family: var(--font-sans); margin-left: 2px; font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.header-cta { white-space: nowrap; }
.nav-toggle {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: var(--radius-sm); color: var(--ink); cursor: pointer;
}

/* ---------- Mega menu (desktop) ---------- */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: rgba(18,20,23,0.04);
}
.mega__inner { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.mega__panel {
  background: #FFFFFF; border: 1px solid var(--border); border-top: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: 0 16px 40px rgba(18,20,23,0.10);
  display: flex; flex-wrap: wrap;
}
.mega__fams {
  flex: 0 1 280px; border-right: 1px solid var(--border); padding: 16px;
  display: flex; flex-direction: column; gap: 2px;
}
.mega__fam {
  min-height: 44px; padding: 0 12px; border-radius: var(--radius-sm); border: 0;
  display: flex; justify-content: space-between; align-items: center; font-size: 15px;
  cursor: pointer; text-align: left; background: transparent; color: var(--ink);
}
.mega__fam[aria-pressed="true"] { background: var(--surface); font-weight: 600; }
.mega__fam:hover { background: var(--surface); }
.mega__all { font-weight: 600; padding: 14px 12px; }
.mega__body { flex: 1 1 520px; padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.mega__top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
.mega__top a {
  font-weight: 600; font-size: 16px; color: var(--ink); text-decoration: none;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.mega__top a:hover { color: var(--accent); }
.mega__more { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.mega__more a { color: var(--muted); font-size: 15px; padding: 6px 0; }
.mega__label { font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.08em; }
.mega__aside {
  flex: 0 1 300px; background: var(--surface); border-radius: 0 0 var(--radius-lg) 0;
  padding: 28px; display: flex; flex-direction: column; gap: 12px;
}
.mega__aside a.mega__link { font-weight: 600; padding: 8px 0; }
/* Family status in the Services menu (tools/nav.mjs): available or on request. */
.mega__status { color: var(--success); white-space: nowrap; }
.mega__status.is-request { color: var(--muted); }
/* Dropdowns other than Services (tools/nav.mjs): intro, link grid, aside. */
.mega__intro { display: flex; flex-direction: column; gap: 6px; }
.mega__intro strong { font-size: 22px; }
.mega__intro span { color: var(--muted); }
.mega__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.mega__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mega__grid a {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 0;
  border-bottom: 1px solid var(--border); color: var(--ink); text-decoration: none;
}
.mega__grid a strong { font-size: 16px; }
.mega__grid a span { color: var(--muted); font-size: 14px; line-height: 1.45; }
.mega__grid a:hover strong { color: var(--accent); }
.mega__all-link { font-weight: 600; padding: 8px 0; align-self: flex-start; }
.mega__aside-title { font-size: 18px; }
.mega__email { font-size: 18px; font-weight: 600; }

/* ---------- Mobile drawer ---------- */
.mobile-nav {
  position: fixed; inset: 0; z-index: 60; background: #FFFFFF; overflow-y: auto;
}
.mobile-nav__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px 8px 16px; border-bottom: 1px solid var(--border);
}
.mobile-nav__close {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--ink); font-size: 26px; cursor: pointer; border-radius: var(--radius-sm);
}
.mobile-nav__body { padding: 16px 20px 32px; display: flex; flex-direction: column; gap: 14px; }
.mobile-nav__search {
  min-height: 52px; border: 1px solid var(--border-strong); border-radius: 10px;
  display: flex; align-items: center; gap: 10px; padding: 0 14px; color: var(--muted); text-decoration: none;
}
.mobile-nav__cta {
  background: var(--accent); color: #FFFFFF; min-height: 52px; display: flex; align-items: center;
  justify-content: center; border-radius: 10px; text-decoration: none; font-weight: 600;
}
.mobile-nav__cta:hover { color: #FFFFFF; background: var(--accent-hover); }
.mobile-nav nav { display: flex; flex-direction: column; }
.mobile-nav details { border-bottom: 1px solid var(--border); }
.mobile-nav summary {
  min-height: 52px; display: flex; align-items: center; justify-content: space-between;
  font-size: 18px; font-weight: 600; list-style: none;
}
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav summary span { color: var(--muted); }
.mobile-nav details[open] summary span { transform: rotate(45deg); }
.mobile-nav details > div { display: flex; flex-direction: column; padding: 0 0 10px 8px; }
.mobile-nav details a, .mobile-nav__plain {
  padding: 10px 0; color: var(--ink); text-decoration: none;
}
.mobile-nav__plain {
  min-height: 52px; display: flex; align-items: center; font-size: 18px; font-weight: 600;
  border-bottom: 1px solid var(--border);
}
.mobile-nav__region {
  display: inline-flex; gap: 8px; align-items: center; min-height: 48px; color: var(--muted);
  text-decoration: none; border-top: 1px solid var(--border); padding-top: 8px;
}
.mobile-nav__contact { display: flex; flex-direction: column; gap: 2px; padding-top: 6px; }
.mobile-nav__contact a { padding: 10px 0; }
body.is-locked { overflow: hidden; }
/* Scrim behind the drawer; tapping it closes the menu (wired in site.js). */
.mobile-nav-scrim { position: fixed; inset: 0; z-index: 59; background: rgb(18 20 23 / 0.4); }
/* Above phone width a full-screen menu feels heavy; use a side sheet. */
@media (min-width: 641px) {
  .mobile-nav { left: auto; width: 440px; border-left: 1px solid var(--border); box-shadow: -12px 0 40px rgb(18 20 23 / 0.16); }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--surface); border-top: 1px solid var(--border); }
.site-footer__cols {
  max-width: var(--container); margin: 0 auto; padding: 56px 24px 24px;
  display: flex; flex-wrap: wrap; gap: 32px; font-size: 14px;
}
.site-footer__brand { flex: 1 1 260px; display: flex; flex-direction: column; gap: 10px; }
.site-footer__brand strong { font-size: 20px; color: var(--ink); }
.site-footer__brand span { color: var(--muted); line-height: 1.6; }
.site-footer nav { flex: 1 1 160px; display: flex; flex-direction: column; gap: 2px; }
.site-footer nav strong { color: var(--ink); padding-bottom: 8px; }
.site-footer nav a, .site-footer nav button {
  color: var(--muted); text-decoration: none; padding: 7px 0; font-size: 14px;
  background: none; border: 0; text-align: left; cursor: pointer;
}
.site-footer nav a:hover, .site-footer nav button:hover { color: var(--accent); text-decoration: underline; }
.site-footer__bar {
  max-width: var(--container); margin: 0 auto; padding: 16px 24px 32px;
  border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 8px 16px;
  align-items: center; justify-content: space-between; font-size: 14px; color: var(--muted);
}
.site-footer__links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.site-footer__links a { color: var(--ink); padding: 10px 0; display: inline-flex; gap: 8px; align-items: center; }
/* WhatsApp logo (assets/icons/whatsapp.svg). Decorative: the link text
   already says "WhatsApp", so the span stays aria-hidden. */
.wa-badge {
  display: inline-block; flex: none; width: 24px; height: 24px;
  background: url("../icons/whatsapp.svg") center / contain no-repeat;
}
.site-footer__audience { font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.site-footer__region {
  color: var(--ink); display: inline-flex; gap: 6px; align-items: center; min-height: 44px;
  text-decoration: none; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 12px;
}

/* ---------- Cookie consent ---------- */
.cookie-banner {
  position: fixed; left: 24px; right: 24px; bottom: 24px; z-index: 70;
  max-width: 1100px; margin: 0 auto; background: #FFFFFF; border: 1px solid #C3C8CE;
  border-radius: 14px; padding: 24px; display: flex; flex-wrap: wrap; gap: 20px; align-items: center;
  box-shadow: 0 8px 30px rgba(21,23,26,0.15);
}
.cookie-banner__text { flex: 1 1 460px; display: flex; flex-direction: column; gap: 6px; }
.cookie-banner__text strong { font-size: 18px; }
.cookie-banner__text span { color: #3D434B; line-height: 1.55; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-actions .btn { min-height: 48px; }
.cookie-dialog {
  border: 1px solid #C3C8CE; border-radius: 14px; padding: 28px; width: min(560px, calc(100% - 32px));
  box-shadow: 0 8px 30px rgba(21,23,26,0.2); color: var(--ink);
}
.cookie-dialog::backdrop { background: rgba(18,20,23,0.45); }
.cookie-dialog form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.cookie-dialog h2 { margin: 0; font-size: 22px; }
.cookie-row {
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
  border-bottom: 1px solid #D5D9DE; padding-bottom: 14px;
}
.cookie-row > span { display: flex; flex-direction: column; gap: 4px; }
.cookie-row small { color: #4A5058; font-size: 14px; }
.cookie-row input { width: 24px; height: 24px; flex: none; }
label.cookie-row { cursor: pointer; }
.toast {
  position: fixed; left: 24px; bottom: 24px; z-index: 70; background: #15171A; color: #FFFFFF;
  border-radius: 10px; padding: 14px 18px;
}

/* Ported scroll wrappers sit in flex columns, where min-width:auto would let
   them grow to the table's width instead of scrolling. */
.sx-mH6yp4Y { min-width: 0; max-width: 100%; }

/* ---------- Forms (ported flows) ---------- */
.field-error { color: var(--danger); font-size: 14px; }

/* Spam honeypot: off-screen rather than display:none, because some bots skip
   fields they can tell are hidden. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { color: var(--danger); font-size: 15px; line-height: 1.5; }
.form-status__retry {
  background: none; border: 0; padding: 10px 0; margin: -10px 0; font: inherit; font-weight: 600;
  color: var(--accent); text-decoration: underline; cursor: pointer;
}
.form-note { margin: 4px 0 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.form-privacy { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }

/* Blocks that are still pure placeholder. Delete this rule to preview them;
   remove data-draft from a block once its real content is in. */
[data-draft] { display: none !important; }
[aria-invalid="true"] { border-color: var(--danger) !important; }

/* ---------- Contact widget (initContactWidget in site.js) ---------- */
.contact-widget {
  position: fixed; right: 20px; bottom: 20px; z-index: 45;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
  /* On phones the box spans the screen width; only its children take taps. */
  pointer-events: none;
}
.contact-widget > * { pointer-events: auto; }
.contact-widget__fab {
  display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 20px;
  border: 0; border-radius: 999px; background: var(--accent); color: #FFFFFF;
  font: inherit; font-weight: 600; font-size: 16px; cursor: pointer;
  box-shadow: 0 6px 20px rgb(18 20 23 / 0.25);
}
.contact-widget__fab:hover { background: var(--accent-hover); }
.contact-widget__teaser, .contact-widget__panel {
  position: relative; background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgb(18 20 23 / 0.18); animation: cw-in 0.25s ease-out;
}
.contact-widget__teaser { width: min(300px, calc(100vw - 40px)); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.contact-widget__teaser p { margin: 0; padding-right: 28px; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.contact-widget__panel {
  width: min(360px, calc(100vw - 40px)); max-height: calc(100vh - 120px); overflow-y: auto;
  padding: 20px; display: flex; flex-direction: column; gap: 12px;
}
.contact-widget__teaser[hidden], .contact-widget__panel[hidden], .contact-widget [hidden] { display: none; }
.contact-widget__head { display: flex; justify-content: space-between; align-items: center; }
.contact-widget__head h2 { margin: 0; font-size: 20px; }
.contact-widget__teaser .contact-widget__close { position: absolute; top: 4px; right: 4px; }
.contact-widget__close {
  width: 40px; height: 40px; border: 0; background: none; border-radius: 999px;
  font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer;
}
.contact-widget form { display: flex; flex-direction: column; gap: 6px; }
.contact-widget label { font-weight: 600; font-size: 14px; margin-top: 4px; }
.contact-widget input, .contact-widget textarea {
  min-height: 44px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font: inherit; font-size: 16px; resize: vertical;
}
.contact-widget form .btn { margin-top: 8px; justify-content: center; min-height: 48px; }
.contact-widget__sent { display: flex; flex-direction: column; gap: 4px; color: var(--ink-2); line-height: 1.5; }
.contact-widget__sent strong { font-size: 18px; color: var(--ink); }
.contact-widget__alt { margin: 0; padding-top: 10px; border-top: 1px solid var(--border); font-size: 14px; color: var(--muted); }
.contact-widget__alt a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; vertical-align: middle; }
.contact-widget__alt .wa-badge { width: 20px; height: 20px; }
@keyframes cw-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* On phones the homepages also have the sticky CTA bar; sit above it. */
@media (max-width: 640px) {
  .contact-widget { right: 16px; bottom: 16px; left: 16px; }
  body[data-sticky-cta] .contact-widget { bottom: 84px; }
  .contact-widget__panel { width: 100%; max-height: calc(100vh - 180px); }
  /* Icon-only on phones: the labelled pill covered form fields and cards.
     The label stays in the accessibility tree as the button's name. */
  .contact-widget__fab { width: 52px; min-height: 52px; padding: 0; justify-content: center; }
  .contact-widget__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* Homepage solution chips: two per row instead of one long column. */
  [aria-label="Common needs"] > button { flex: 1 1 calc(50% - 4px); padding: 0 10px; }
}

/* Mobile-only repeat of the header CTA (see initStickyCta in site.js). */
.sticky-cta { display: none; }
@media (max-width: 640px) {
  .sticky-cta:not([hidden]) {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96); border-top: 1px solid var(--border);
  }
  .sticky-cta .btn { width: 100%; justify-content: center; min-height: 48px; }
}

/* ---------- App shell (dashboard / marketplace) ---------- */
@media (max-width: 860px) {
  .account-layout { flex-direction: column; }
  nav[aria-label="Account"] { flex: none !important; flex-direction: row !important; flex-wrap: wrap; }
}

/* ---------- Responsive ---------- */
/* The full header row (logo, 8 links, search, region, CTA) needs ~1340px.
   Shed width in steps so it never wraps to a second line; the hamburger
   takes over where even the compact row no longer fits. Keep the drawer
   breakpoint in site.js (initMobileNav) in sync with the last one. */
/* Seven dropdown labels need the room, so the header region switcher is
   icon-only at every width (aria-label names it; the footer and mobile menu
   still spell out region, language and currency). */
.header-region span { display: none; }
@media (max-width: 1360px) {
  .site-header__inner { column-gap: 20px; }
  .site-nav { column-gap: 18px; }
}
@media (max-width: 1280px) {
  .site-nav { column-gap: 12px; }
}

@media (max-width: 1180px) {
  :root { --header-h: 61px; }
  .site-nav, .header-region, .header-cta, .header-audience, .mega { display: none !important; }
  .nav-toggle { display: inline-flex; }
  .header-icon { margin-left: auto; }
  .site-header__inner { padding: 8px 12px 8px 16px; gap: 4px; }
  .site-logo { font-size: 20px; gap: 8px; }
  .site-logo::before { width: 28px; height: 28px; }
}

@media (max-width: 640px) {
  /* Fixed multi-column grids from the 1440px artboards: fold to two columns,
     or scroll for the design-system state matrix where columns must align. */
  .sx-16lnFs4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sx-pGeXGkA { grid-template-columns: 96px repeat(4, 150px) !important; overflow-x: auto; }
  .cookie-banner { left: 12px; right: 12px; bottom: 12px; padding: 18px; }
  .cookie-actions { width: 100%; }
  .cookie-actions .btn { flex: 1 1 100%; }
  .site-footer__cols { padding-top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Homepage hero: recent work under the CTAs. */
.hero-recent { margin: 0; font-size: 15px; color: #3A404C; }

/* Services page family cards (tools/nav.mjs): every service with its status. */
.svc-family { flex: 1 1 520px; min-width: 0; border: 1px solid var(--border); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.svc-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); column-gap: 24px; }
.svc-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 15px; min-width: 0; }
.svc-list li > a, .svc-list li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.svc-list a { font-weight: 600; }
.svc-status { font-size: 12px; color: var(--success); white-space: nowrap; }
.svc-status.is-request { color: var(--muted); }

/* Transformation page: program cards with their service lists. */
.programs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.program { background: var(--surface-card, #FFFFFF); border: 1px solid var(--border); border-radius: 14px; padding: 22px; display: flex; flex-direction: column; gap: 10px; min-width: 0; scroll-margin-top: calc(var(--header-h) + 16px); }
.program__list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.program__list li { border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; font-size: 13px; color: var(--ink-2); }

/* Homepage hero: entry offers (revenue ladder "Entry" tier). */
.hero-start { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hero-start__label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.hero-start a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: 999px; background: #FFFFFF; color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500; }
.hero-start a:hover { border-color: var(--accent); color: var(--accent); }

/* Homepage region router: each region's front door (see docs/superpowers/specs/2026-10-13-brand-positioning-design.md). */
.region-cards { display: flex; flex-wrap: wrap; gap: 16px; }
.region-card { flex: 1 1 300px; min-width: 0; background: #FFFFFF; border: 1px solid var(--border); border-radius: 12px; padding: 22px; display: flex; flex-direction: column; gap: 6px; color: var(--ink); text-decoration: none; }
a.region-card:hover { border-color: var(--accent); }
.region-card strong { font-size: 20px; line-height: 1.3; }
.region-card small { color: var(--muted); font-size: 14px; line-height: 1.5; }
.region-card__tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--muted); }
.region-card__more { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-weight: 600; text-decoration: none; }
a.region-card__more:hover, a.region-card:hover .region-card__more { text-decoration: underline; }


/* Page-specific rules moved out of <style> blocks so the CSP needs no 'unsafe-inline'. */
/* Button look from the Marketplace artboard; aria-pressed carries the selected state. */
.mk-compare { min-height: 44px; margin-top: 6px; border-radius: 8px; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; background: #FFFFFF; color: #121417; border: 1px solid #121417; }
.mk-compare[aria-pressed="true"] { background: #121417; color: #FFFFFF; border: 1px solid #121417; }
/* Tab look from the Legal artboard; aria-pressed drives the selected state so JS only flips one attribute. */
.legal-tab { min-height: 44px; padding: 0 18px; border-radius: 999px; font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer; background: #FFFFFF; color: #15171A; border: 1px solid #C3C8CE; }
.legal-tab[aria-pressed="true"] { background: #15171A; color: #FFFFFF; border: 1px solid #15171A; }
.legal-doc { display: flex; flex-direction: column; gap: 20px; scroll-margin-top: 96px; }
.legal-doc:focus { outline: none; }
.legal-cookie-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* Region switcher: links between the three regional pages; aria-current marks this one. */
.region-tab { min-height: 44px; padding: 0 18px; border-radius: 999px; font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; text-decoration: none; background: #FFFFFF; color: #15171A; border: 1px solid #C3C8CE; }
.region-tab[aria-current="page"] { background: #15171A; color: #FFFFFF; border: 1px solid #15171A; }
#sample-sent:focus { outline: none; }
#subscribe-sent:focus { outline: none; }
#pack-sent:focus { outline: none; }
.cookie-row__fixed { font-weight: 600; color: #4A5058; }
.cookie-row--last { border: 0; }
.cookie-actions--end { justify-content: flex-end; }

/* Founder portrait (replaces the "DS" monogram): always a circle, cropped to
   fill, so one 440px / 160px file serves every size on the site. */
.founder-photo { display: block; border-radius: 999px; object-fit: cover; background: #E3E6EA; }
/* Large portraits share a wrapping row with the founder text. Side by side,
   the text column grows into all free space, so these auto margins are zero;
   once the row wraps (phones, narrow tablets) the portrait sits alone on its
   line and the margins centre it. */
.founder-photo--portrait { margin-inline: auto; }