:root {
  color-scheme: light dark;

  /* Faster teal, deep petrol and paper. A small independent business — a spa, a studio, a
     kitchen — reads as expensive through material, not through brightness, so
     the palette stays in the platform's own teal: the brand hue for anything
     that acts, a deep petrol of the same family for surfaces that carry, and
     an uncoated paper so the teal reads rich rather than clinical. */
  --color-primary: #0e7c74;
  --color-primary-dark: #06312e;
  --color-primary-light: #e4f5f3;
  --color-accent: #00b2a8;
  --color-text: #0f1f1d;
  --color-muted: #667471;
  --color-soft: #f4f4f1;
  --color-line: #dbdcd7;
  --color-footer: #06312e;
  --color-white: #fcfcfa;

  /* Fraunces carries the voice; its optical axis lets one family behave like
     a display cut at 60px and a text cut at 18px. Inter stays for anything a
     customer has to read quickly — a price, an address, an opening hour. */
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: "Fraunces", "Playfair Display", Georgia, serif;

  /* Shadows sit in the ink, never in neutral grey, so cards look like paper
     lifted off paper. */
  --shadow-sm: 0 1px 2px rgba(15, 31, 29, 0.06), 0 2px 8px rgba(15, 31, 29, 0.04);
  --shadow-md: 0 2px 4px rgba(15, 31, 29, 0.04), 0 18px 40px -12px rgba(15, 31, 29, 0.18);
  --radius: 4px;
  --container: 1140px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --grain-opacity: 0.035;

  /* Ink for surfaces that are dark in BOTH modes -- the hero art, the page-hero
     band, the footer. --color-soft cannot do this job: it is a *surface* token,
     so dark mode re-points it to #101817 and any text wearing it turns near
     black on near black. This one never flips. */
  --color-on-dark: #f4f4f1;
  /* The companion to --color-on-dark. --color-primary-dark cannot back these
     surfaces: dark mode re-points it to a pale mint (#7fe0d8), so the hero and
     page-hero bands inverted to bright panels with light text on them. */
  --surface-deep: #06312e;

  /* Form controls need a visible boundary, which WCAG 1.4.11 puts at 3:1 for
     non-text UI. --color-line is a hairline for dividers and measures 1.34:1
     against the field fill in light and 1.40:1 in dark -- effectively no border
     at all. These are the measured values that clear 3:1 on both surfaces. */
  --color-field-border: #878d86;
  --color-on-dark-muted: rgba(244, 244, 241, 0.92);
}

/* The same names, re-pointed. Every rule already written against these tokens
   inherits dark mode without being touched.

   Three states, in priority order:
     1. [data-theme="dark"|"light"] — an explicit choice the visitor made
     2. prefers-color-scheme        — the operating system's preference
     3. :root                       — light, the default
   The explicit choice is listed last so it wins over the media query without
   needing !important. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-primary: #5fd6cd;
    --color-primary-dark: #7fe0d8;
    --color-primary-light: #10312e;
    --color-accent: #24c9be;
    --color-text: #e8efed;
    --color-muted: #91a5a1;
    --color-soft: #101817;
    --color-line: #24322f;
    --color-footer: #08110f;
    --color-white: #0c1413;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 18px 40px -12px rgba(0, 0, 0, 0.6);
    --grain-opacity: 0.05;
    --color-field-border: #566e67;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-primary: #5fd6cd;
  --color-primary-dark: #7fe0d8;
  --color-primary-light: #10312e;
  --color-accent: #24c9be;
  --color-text: #e8efed;
  --color-muted: #91a5a1;
  --color-soft: #101817;
  --color-line: #24322f;
  --color-footer: #08110f;
  --color-white: #0c1413;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 18px 40px -12px rgba(0, 0, 0, 0.6);
  --grain-opacity: 0.05;
  --color-field-border: #566e67;
}

:root[data-theme="light"] {
  color-scheme: light;
}


* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--color-text);
  background: var(--color-white);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.has-open-menu {
  overflow: hidden;
}

body.has-auth-modal {
  overflow: hidden;
}

img,
svg {
  display: block;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.container {
  width: min(100% - 32px, var(--container));
  margin-inline: auto;
}

.container--narrow {
  max-width: 760px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hidden {
  display: none !important;
}

.site-shell {
  min-height: 100vh;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  background: color-mix(in srgb, var(--color-white) 96%, transparent);
  border-bottom: 1px solid var(--color-line);
  backdrop-filter: blur(14px);
}

.site-header__inner {
  width: min(100% - 32px, var(--container));
  min-height: 72px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}

.site-logo {
  font-family: var(--font-heading);
  font-size: 28px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--color-text);
}

.site-logo--footer {
  /* Sits on --color-footer, which is dark in both modes. */
  color: var(--color-on-dark);
}

.site-nav {
  display: flex;
  justify-content: center;
  gap: 4px;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  color: var(--color-muted);
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius);
  transition: color 160ms ease, background-color 160ms ease;
}

.site-nav__link:hover,
.site-nav__link.is-active {
  color: var(--color-text);
  background: var(--color-soft);
}

.site-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.ecommerce-header-cart {
  position: relative;
  width: 40px;
  height: 40px;
  display: inline-flex;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.ecommerce-header-cart:hover {
  color: var(--color-text);
  background: var(--color-soft);
}

.ecommerce-header-cart:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.ecommerce-header-cart__icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ecommerce-header-cart__label {
  display: none;
}

.ecommerce-header-cart__count {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  color: var(--color-white);
  background: var(--color-primary);
  border: 2px solid var(--color-white);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.ecommerce-header-cart__count[hidden] {
  display: none;
}

[dir="rtl"] .ecommerce-header-cart__count {
  right: auto;
  left: -3px;
}

.language-switcher {
  display: inline-flex;
  align-items: center;
  position: relative;
}

.language-switcher::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  color: var(--color-muted);
  pointer-events: none;
  transform: translateY(-65%) rotate(45deg);
}

[dir="rtl"] .language-switcher::after {
  right: auto;
  left: 12px;
}

.language-switcher__select {
  min-height: 40px;
  padding: 0 34px 0 12px;
  color: var(--color-text);
  background: var(--color-soft);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 700;
  appearance: none;
}

[dir="rtl"] .language-switcher__select {
  padding: 0 12px 0 34px;
}

.language-switcher__select:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.language-switcher--mobile {
  padding: 0 24px 24px;
}

.language-switcher--mobile,
.language-switcher--mobile .language-switcher__select {
  width: 100%;
}

.site-header__menu-button,
.icon-button {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius);
  color: var(--color-muted);
  background: transparent;
}

.site-header__menu-button {
  display: none;
  flex-direction: column;
  gap: 5px;
}

.site-header__menu-button span {
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.icon-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-button:hover,
.site-header__menu-button:hover {
  color: var(--color-text);
  background: var(--color-soft);
}

.button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 700;
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button--primary {
  color: var(--color-white);
  background: var(--color-primary);
}

.button--primary:hover {
  background: var(--color-primary-dark);
  box-shadow: var(--shadow-sm);
}

.button--secondary {
  color: var(--color-muted);
  background: transparent;
}

.button--secondary:hover {
  color: var(--color-text);
  border-color: var(--color-line);
}

.button--light {
  /* The pale button on a dark ground. Both tokens inverted in dark mode, giving
     a dark fill with darker text -- the control vanished into the footer. */
  color: var(--surface-deep);
  background: var(--color-on-dark);
}

.mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(17, 24, 39, 0.48);
}

.mobile-menu {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 70;
  width: min(360px, 88vw);
  background: var(--color-white);
  box-shadow: var(--shadow-md);
}

.mobile-menu__head,
.mobile-menu__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--color-line);
}

.mobile-menu__actions {
  border-top: 1px solid var(--color-line);
  border-bottom: 0;
  align-items: stretch;
  flex-direction: column;
}

.mobile-menu__actions .ecommerce-header-cart {
  width: 100%;
  min-height: 44px;
  flex-basis: auto;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 14px;
  border-color: var(--color-line);
}

.mobile-menu__actions .ecommerce-header-cart__label {
  display: inline;
  font-size: 14px;
  font-weight: 700;
}

.mobile-menu__actions .ecommerce-header-cart__count {
  position: static;
  margin-inline-start: auto;
  border: 0;
}

.mobile-menu__nav {
  display: grid;
  gap: 4px;
  padding: 20px;
}

.mobile-menu__nav a {
  padding: 10px 0;
  color: var(--color-muted);
  font-weight: 700;
}

.mobile-menu__nav a:hover {
  color: var(--color-text);
}

.auth-modal[hidden] {
  display: none;
}

.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
}

.auth-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.62);
  backdrop-filter: blur(8px);
}

.auth-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 440px);
  padding: 38px;
  border-radius: 8px;
  background: var(--color-white);
  box-shadow: var(--shadow-md);
  text-align: center;
}

.auth-modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius);
  color: var(--color-muted);
  background: transparent;
}

.auth-modal__close svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.auth-modal__brand {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border-radius: 50%;
  color: var(--color-white);
  background: var(--color-primary);
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
}

.auth-modal h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 42px;
  line-height: 1.1;
}

.auth-modal__intro {
  margin: 12px 0 24px;
  color: var(--color-muted);
}

.auth-modal__form {
  display: grid;
  gap: 14px;
  text-align: left;
}

.auth-modal__form .button {
  width: 100%;
  margin-top: 4px;
}

.auth-modal__switch {
  margin: 20px 0 0;
  color: var(--color-muted);
  font-weight: 700;
}

.auth-modal__switch button {
  border: 0;
  padding: 0;
  color: var(--color-primary);
  background: transparent;
  font-weight: 800;
}

.auth-notices {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 120;
  display: grid;
  gap: 10px;
  width: min(360px, calc(100vw - 36px));
  pointer-events: none;
}

.auth-notice {
  padding: 14px 16px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  color: var(--color-text);
  background: var(--color-white);
  box-shadow: var(--shadow-md);
  font-size: 14px;
  font-weight: 800;
  transition: opacity 180ms ease, transform 180ms ease;
}

.auth-notice--success {
  border-color: rgba(13, 148, 136, 0.28);
  color: var(--color-primary-dark);
  background: var(--color-primary-light);
}

.auth-notice--error {
  border-color: rgba(220, 38, 38, 0.22);
  color: #991b1b;
  background: #fef2f2;
}

.auth-notice.is-hiding {
  opacity: 0;
  transform: translateY(8px);
}

.hero {
  min-height: 70vh;
  padding: 148px 0 80px;
  display: grid;
  align-items: center;
  border-bottom: 1px solid var(--color-line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--color-primary-light) 60%, transparent), transparent 42%),
    var(--color-white);
}

.hero__inner {
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
}

.eyebrow,
.section-heading p {
  margin: 0 0 12px;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero h1,
.page-hero h1,
.section-heading h2,
.content-header h1 {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0;
}

.hero h1 {
  font-size: 56px;
  line-height: 1.05;
}

.hero__copy {
  max-width: 600px;
  margin: 22px auto 0;
  color: var(--color-muted);
  font-size: 18px;
}

.hero__actions {
  margin-top: 34px;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.hero__stats {
  margin-top: 48px;
  display: flex;
  justify-content: center;
  gap: 32px;
}

.hero__stats div {
  min-width: 92px;
}

.hero__stats strong {
  display: block;
  color: var(--color-text);
  font-size: 26px;
  line-height: 1.1;
}

.hero__stats span {
  color: var(--color-muted);
  font-size: 13px;
}

.section {
  padding: 80px 0;
}

.section--muted {
  background: var(--color-soft);
}

.section-heading {
  max-width: 580px;
  margin: 0 auto 48px;
  text-align: center;
}

.section-heading h2 {
  font-size: 34px;
  line-height: 1.15;
}

.section-heading span {
  display: block;
  margin-top: 12px;
  color: var(--color-muted);
}

.post-grid,
.feature-grid,
.testimonial-grid,
.service-grid,
.value-grid,
.career-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.post-card,
.feature-card,
.testimonial-card,
.service-card,
.value-card,
.career-card,
.contact-card {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-white);
  overflow: hidden;
}

.post-card,
.feature-card,
.testimonial-card,
.service-card,
.value-card,
.career-card {
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.post-card:hover,
.feature-card:hover,
.testimonial-card:hover,
.service-card:hover,
.value-card:hover,
.career-card:hover {
  transform: translateY(-3px);
  border-color: #d1d5db;
  box-shadow: var(--shadow-md);
}

.post-card {
  display: flex;
  flex-direction: column;
}

.post-card__media {
  aspect-ratio: 16 / 9;
  background: var(--color-soft);
  overflow: hidden;
}

.post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-card__placeholder {
  width: 100%;
  height: 100%;
  display: block;
  background: linear-gradient(135deg, var(--color-soft), var(--color-line));
}

.post-card__body,
.feature-card,
.testimonial-card,
.service-card,
.value-card,
.career-card,
.contact-card {
  padding: 24px;
}

.post-card__tag {
  display: inline-flex;
  margin-bottom: 10px;
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.post-card h3,
.feature-card h3,
.service-card h3,
.value-card h3,
.career-card h3,
.contact-card h3 {
  margin: 0 0 10px;
  color: var(--color-text);
  font-size: 18px;
  line-height: 1.3;
}

.post-card p,
.feature-card p,
.testimonial-card p,
.service-card p,
.value-card p,
.career-card p,
.contact-card p {
  margin: 0;
  color: var(--color-muted);
  font-size: 15px;
}

.post-card__meta {
  margin-top: 20px;
  padding-top: 16px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--color-muted);
  border-top: 1px solid var(--color-line);
  font-size: 13px;
}

.feature-card__icon {
  width: 40px;
  height: 40px;
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  background: var(--color-primary-light);
  border-radius: var(--radius);
  font-weight: 800;
}

.testimonial-card__rating {
  display: flex;
  gap: 2px;
  margin-bottom: 18px;
  /* Amber was the only warm colour on the page and read as a stray from another
     system. The accent already means "this matters" everywhere else. */
  color: var(--color-accent);
}

.testimonial-card footer {
  margin-top: 22px;
  padding-top: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--color-line);
}

.testimonial-card__avatar {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  background: var(--color-primary-light);
  border-radius: 999px;
  font-weight: 800;
}

.testimonial-card strong,
.testimonial-card small {
  display: block;
}

.testimonial-card small {
  color: var(--color-muted);
}

.faq-list {
  display: grid;
  gap: 12px;
}

.faq-item {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  overflow: hidden;
}

.faq-item.is-open {
  border-color: var(--color-primary);
  box-shadow: 0 2px 12px rgba(13, 148, 136, 0.08);
}

.faq-item__button {
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 20px;
  color: var(--color-text);
  background: var(--color-white);
  border: 0;
  font-weight: 800;
  text-align: left;
}

.faq-item__button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 180ms ease;
}

.faq-item.is-open .faq-item__button svg {
  transform: rotate(180deg);
}

.faq-item__body {
  display: none;
  padding: 0 20px 20px;
  color: var(--color-muted);
}

.faq-item.is-open .faq-item__body {
  display: block;
}

.page-hero {
  padding: 140px 0 64px;
  text-align: center;
  border-bottom: 1px solid var(--color-line);
  background: var(--color-white);
}

.page-hero__inner {
  max-width: 760px;
  margin-inline: auto;
}

.page-hero h1 {
  font-size: 46px;
  line-height: 1.1;
}

.page-hero p:not(.eyebrow) {
  margin: 20px auto 0;
  max-width: 620px;
  color: var(--color-muted);
  font-size: 18px;
}

.split-section {
  padding: 80px 0;
}

.split-section__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 64px;
  align-items: center;
}

.rich-text {
  color: var(--color-muted);
}

.rich-text h2,
.rich-text h3 {
  margin: 0 0 16px;
  color: var(--color-text);
  font-family: var(--font-heading);
  letter-spacing: 0;
}

.rich-text h2 {
  font-size: 34px;
  line-height: 1.15;
}

.rich-text h3 {
  margin-top: 32px;
  font-size: 24px;
}

.rich-text p,
.rich-text li {
  font-size: 16px;
}

.rich-text a {
  color: var(--color-primary);
  font-weight: 700;
}

.stats-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 28px;
  background: var(--color-soft);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}

.stats-panel div {
  padding: 14px;
  text-align: center;
}

.stats-panel strong {
  display: block;
  font-size: 28px;
  line-height: 1.1;
}

.stats-panel span {
  color: var(--color-muted);
  font-size: 13px;
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 32px;
}

.contact-form {
  display: grid;
  gap: 16px;
  padding: 28px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}

.form-field {
  display: grid;
  gap: 8px;
}

.form-field label {
  color: var(--color-text);
  font-weight: 800;
  font-size: 14px;
}

.form-field input,
.form-field textarea {
  width: 100%;
  border: 1px solid var(--color-field-border);
  border-radius: var(--radius);
  padding: 12px 14px;
  color: var(--color-text);
  background: var(--color-white);
}

.form-field textarea {
  min-height: 140px;
  resize: vertical;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: 3px solid rgba(13, 148, 136, 0.14);
  border-color: var(--color-primary);
}

.form-field input[aria-invalid="true"] {
  border-color: #dc2626;
}

.field-error {
  margin: 0;
  color: #b91c1c;
  font-size: 13px;
  font-weight: 700;
}

.auth-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 32px;
  align-items: start;
}

.auth-form,
.auth-card {
  box-shadow: var(--shadow-sm);
}

.auth-message {
  margin: 0;
  color: var(--color-muted);
  font-size: 14px;
  font-weight: 700;
}

.auth-message[data-state="success"] {
  color: var(--color-primary-dark);
}

.auth-message[data-state="error"] {
  color: #b91c1c;
}

.auth-quick-link {
  width: 100%;
}

.auth-actions {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.content-header {
  padding: 136px 0 48px;
  text-align: center;
  border-bottom: 1px solid var(--color-line);
}

.content-header h1 {
  max-width: 800px;
  margin-inline: auto;
  font-size: 46px;
  line-height: 1.1;
}

.content-header p {
  max-width: 640px;
  margin: 18px auto 0;
  color: var(--color-muted);
}

.content-feature-image {
  width: min(100% - 32px, 960px);
  margin: 40px auto 0;
}

.content-feature-image img {
  display: block;
  width: 100%;
  max-height: 540px;
  object-fit: cover;
  border-radius: var(--radius);
}

.content-body {
  width: min(100% - 32px, 760px);
  margin: 0 auto;
  padding: 56px 0 80px;
  color: var(--color-muted);
}

.content-layout {
  width: min(100% - 32px, var(--container));
  margin: 0 auto;
  padding: 56px 0 80px;
}

.content-layout:not(.content-layout--with-sidebar) {
  max-width: 760px;
}

.content-layout--with-sidebar {
  display: grid;
  grid-template-columns: 260px minmax(0, 760px) 1fr;
  gap: 44px;
  align-items: start;
}

.content-main {
  min-width: 0;
}

.content-main .content-feature-image {
  width: 100%;
  margin: 0 0 32px;
}

.content-main .content-body {
  width: auto;
  margin: 0;
  padding: 0;
}

.content-sidebar {
  position: sticky;
  top: 96px;
}

.content-sidebar__label {
  margin: 0 0 12px;
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.content-sidebar__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.content-sidebar__nav a {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--color-muted);
  font-size: 14px;
}

.content-sidebar__nav a:hover,
.content-sidebar__nav a.is-current {
  color: var(--color-primary);
  background: var(--color-primary-light);
}

.content-sidebar__nav a.is-current {
  font-weight: 800;
}

.content-sidebar__section {
  margin-top: 16px;
}

.content-sidebar__section p {
  margin: 0 0 6px;
  padding: 0 10px;
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.content-body h2,
.content-body h3 {
  color: var(--color-text);
  font-family: var(--font-heading);
}

.content-body img {
  border-radius: var(--radius);
}

.site-footer {
  padding: 72px 0 32px;
  color: #d1d5db;
  background: var(--color-footer);
}

.site-footer h2,
.site-footer h3,
.site-footer strong {
  margin: 0;
  color: var(--color-on-dark);
}

.site-footer p {
  color: #9ca3af;
}

.site-footer__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.newsletter-form {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}

.newsletter-form input {
  min-width: 0;
  flex: 1;
  height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  color: var(--color-on-dark);
  background: rgba(255, 255, 255, 0.06);
}

.newsletter-form__status {
  margin: 8px 0 0;
  font-size: 13px;
}

.site-footer__brand-row {
  padding: 32px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.social-links {
  display: flex;
  gap: 14px;
}

.social-links a {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  border-radius: var(--radius);
}

.social-links a:hover {
  color: var(--color-on-dark);
  background: rgba(255, 255, 255, 0.08);
}

.social-links svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
}

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  padding-bottom: 32px;
}

.site-footer__nav section {
  display: grid;
  gap: 10px;
}

.site-footer__nav h3 {
  margin-bottom: 4px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-footer__nav a {
  color: #9ca3af;
  font-size: 14px;
}

.site-footer__nav a:hover {
  color: var(--color-on-dark);
}

.site-footer__copyright {
  margin: 0;
  padding-top: 24px;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 14px;
}

.reveal,
.reveal-group > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 500ms ease, transform 500ms ease;
}

.reveal.is-visible,
.reveal-group.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

.reveal-group.is-visible > *:nth-child(2) {
  transition-delay: 80ms;
}

.reveal-group.is-visible > *:nth-child(3) {
  transition-delay: 160ms;
}

.reveal-group.is-visible > *:nth-child(4) {
  transition-delay: 220ms;
}

.reveal-group.is-visible > *:nth-child(5) {
  transition-delay: 280ms;
}

.reveal-group.is-visible > *:nth-child(6) {
  transition-delay: 340ms;
}

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

  .site-header__menu-button {
    display: inline-flex;
  }

  .site-logo {
    justify-self: center;
  }

  .site-nav,
  .site-header__actions .button,
  .site-header__actions .language-switcher {
    display: none;
  }

  .post-grid,
  .feature-grid,
  .testimonial-grid,
  .service-grid,
  .value-grid,
  .career-grid,
  .site-footer__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .split-section__grid,
  .contact-layout,
  .auth-layout,
  .content-layout--with-sidebar,
  .site-footer__top {
    grid-template-columns: 1fr;
  }

  .content-sidebar {
    position: static;
  }
}

@media (max-width: 640px) {
  .container {
    width: min(100% - 24px, var(--container));
  }

  .site-header__inner {
    width: min(100% - 24px, var(--container));
    min-height: 64px;
    gap: 12px;
  }

  .site-logo {
    font-size: 24px;
  }

  .hero {
    min-height: auto;
    padding: 116px 0 56px;
  }

  .hero h1,
  .page-hero h1,
  .content-header h1 {
    font-size: 36px;
  }

  .hero__copy,
  .page-hero p:not(.eyebrow) {
    font-size: 16px;
  }

  .hero__actions,
  .hero__stats,
  .site-footer__brand-row,
  .newsletter-form {
    flex-direction: column;
  }

  .hero__stats {
    gap: 18px;
  }

  .section,
  .split-section {
    padding: 56px 0;
  }

  .section-heading {
    margin-bottom: 32px;
  }

  .section-heading h2,
  .rich-text h2 {
    font-size: 28px;
  }

  .post-grid,
  .feature-grid,
  .testimonial-grid,
  .service-grid,
  .value-grid,
  .career-grid,
  .stats-panel,
  .site-footer__nav {
    grid-template-columns: 1fr;
  }

  .button {
    width: 100%;
  }

  .auth-modal {
    align-items: end;
    padding: 0;
  }

  .auth-modal__dialog {
    width: 100%;
    padding: 34px 24px 26px;
    border-radius: 8px 8px 0 0;
  }

  .auth-modal h2 {
    font-size: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal,
  .reveal-group > * {
    opacity: 1;
    transform: none;
  }
}
/* --- Help Center (docs) --- */
.docs-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  color: var(--color-muted);
}

.docs-breadcrumbs li + li::before {
  content: "/";
  margin: 0 6px;
  color: var(--color-line);
}

.docs-breadcrumbs a:hover {
  color: var(--color-primary);
}

.docs-breadcrumbs [aria-current="page"] {
  color: var(--color-text);
}

.docs-search {
  position: relative;
  max-width: 480px;
  margin: 24px auto 0;
}

.docs-search input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  font: inherit;
  box-shadow: var(--shadow-sm);
}

.docs-search input:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.docs-search__results {
  position: absolute;
  z-index: 20;
  inset-inline: 0;
  top: calc(100% + 6px);
  margin: 0;
  padding: 8px;
  list-style: none;
  text-align: left;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

.docs-search__results a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: var(--radius);
}

.docs-search__results a:hover {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.docs-search__results a span {
  font-size: 0.75rem;
  color: var(--color-muted);
}

.docs-search__empty {
  padding: 8px 10px;
  color: var(--color-muted);
}

.docs-section-intro {
  max-width: 720px;
  margin-bottom: 32px;
}

.docs-guide-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
}

.docs-guide-list__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-white);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.docs-guide-list__item:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.docs-guide-list__title {
  font-weight: 600;
}

.docs-guide-list__description,
.docs-guide-list__count {
  font-size: 0.875rem;
  color: var(--color-muted);
}

.docs-article-meta {
  display: flex;
  gap: 12px;
  font-size: 0.875rem;
  color: var(--color-muted);
}

.content-sidebar__nav ul ul {
  margin: 4px 0 4px 12px;
  border-left: 1px solid var(--color-line);
  padding-left: 10px;
}

.docs-pagination {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--color-line);
}

.docs-pagination__link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-weight: 600;
}

.docs-pagination__link span {
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}

.docs-pagination__link--next {
  margin-left: auto;
  text-align: right;
}

.docs-pagination__link:hover {
  color: var(--color-primary);
}

/* --- Help Center: dark hero, guide cards, nav groups --- */
.docs-hero {
  background: linear-gradient(180deg, #16222f 0%, #1d2b3a 100%);
  color: var(--color-white);
  text-align: center;
}

.docs-hero h1 {
  color: var(--color-white);
}

.docs-hero p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.78);
}

.docs-hero .eyebrow {
  color: var(--color-accent);
}

.docs-hero .docs-breadcrumbs ol {
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
}

.docs-hero .docs-breadcrumbs [aria-current="page"] {
  color: var(--color-white);
}

.docs-hero .docs-breadcrumbs a:hover {
  color: var(--color-accent);
}

.docs-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.docs-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-white);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.docs-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.docs-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.docs-card__title {
  font-weight: 600;
}

.docs-card__meta {
  font-size: 0.875rem;
  color: var(--color-muted);
}

.docs-card__chevron {
  position: absolute;
  right: 20px;
  bottom: 16px;
  color: var(--color-muted);
  font-size: 1.25rem;
  line-height: 1;
}

.docs-card:hover .docs-card__chevron {
  color: var(--color-primary);
}

.docs-group-label {
  margin: 32px 0 12px;
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.content-sidebar__group {
  margin-top: 20px;
}

.content-sidebar__nav a.is-current {
  border-left: 3px solid var(--color-primary);
  border-radius: 0 8px 8px 0;
}

.docs-media-placeholder {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 32px;
  padding: 48px 32px;
  border: 1px dashed var(--color-line);
  border-radius: var(--radius);
  background: linear-gradient(135deg, #f4f8f8 0%, #eef4f6 100%);
}

.docs-media-placeholder__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.docs-media-placeholder p {
  margin: 4px 0 0;
  color: var(--color-muted);
}
/* --- Docs depth pack: code blocks, ⌘K, components --- */
.docs-code { position: relative; margin: 20px 0 28px; border-radius: 12px; background: #0f172a; border: 1px solid #1e293b; overflow: hidden; }
.docs-code__bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; background: #111c2e; border-bottom: 1px solid #1e293b; }
.docs-code__lang { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #64748b; }
.docs-code__copy { padding: 4px 12px; border-radius: 6px; border: 1px solid #334155; background: transparent; color: #94a3b8; font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: color .12s ease, border-color .12s ease; }
.docs-code__copy:hover { color: #2DD4BF; border-color: #2DD4BF; }
.docs-code pre { margin: 0; padding: 16px 18px; overflow-x: auto; background: transparent; }
.docs-code code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.86rem; line-height: 1.65; color: #e2e8f0; background: transparent; padding: 0; }
.docs-code .keyword, .docs-code .storage { color: #c084fc; }
.docs-code .string { color: #86efac; }
.docs-code .constant { color: #fca5a5; }
.docs-code .comment { color: #64748b; font-style: italic; }
.docs-code .entity { color: #7dd3fc; }
.docs-code .support { color: #5eead4; }
.docs-code .variable { color: #e2e8f0; }
.docs-code .punctuation { color: #94a3b8; }

.docs-kbar[hidden] { display: none; }
.docs-kbar { position: fixed; inset: 0; z-index: 90; background: rgba(2, 6, 23, 0.55); backdrop-filter: blur(2px); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 0; }
.docs-kbar__panel { width: 100%; max-width: 560px; background: #fff; border-radius: 14px; box-shadow: 0 30px 80px rgba(2,6,23,.4); overflow: hidden; }
.docs-kbar__input { width: 100%; padding: 16px 18px; border: 0; border-bottom: 1px solid #e2e8f0; font: inherit; font-size: 1rem; outline: none; }
.docs-kbar__results { list-style: none; margin: 0; padding: 6px; max-height: 46vh; overflow: auto; }
.docs-kbar__results a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: #0f172a; }
.docs-kbar__results li.is-active a, .docs-kbar__results a:hover { background: #f0fdfa; color: #0d9488; }
.docs-result-meta { font-size: 0.74rem; color: #94a3b8; }
.docs-kbar__hint { margin: 0; padding: 10px 14px; border-top: 1px solid #e2e8f0; font-size: 0.72rem; color: #94a3b8; }
.docs-kbar__hint kbd { padding: 1px 5px; border: 1px solid #e2e8f0; border-radius: 4px; background: #f8fafc; }

.docs-version-select { display: block; width: 100%; margin: 0 0 14px; padding: 8px 12px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; color: #0f172a; font: inherit; font-size: 0.85rem; }

.docs-callout { display: flex; gap: 12px; margin: 20px 0; padding: 14px 16px; border-radius: 10px; border: 1px solid #e2e8f0; border-left-width: 4px; background: #f8fafc; }
.docs-callout--info { border-left-color: #0d9488; background: #f0fdfa; }
.docs-callout--warn { border-left-color: #f59e0b; background: #fffbeb; }
.docs-callout--error { border-left-color: #ef4444; background: #fef2f2; }
.docs-callout > :first-child { margin-top: 0; }
.docs-callout > :last-child { margin-bottom: 0; }

.docs-steps { counter-reset: docs-step; list-style: none; margin: 20px 0; padding: 0; }
.docs-steps > li { position: relative; padding: 0 0 20px 44px; border-left: 1px solid #e2e8f0; margin-left: 14px; }
.docs-steps > li:last-child { border-left-color: transparent; padding-bottom: 4px; }
.docs-steps > li::before { counter-increment: docs-step; content: counter(docs-step); position: absolute; left: -15px; top: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: #f0fdfa; border: 1px solid #99f6e4; color: #0d9488; font-size: 0.8rem; font-weight: 700; }

.docs-tabs { margin: 20px 0; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; }
.docs-tabs__bar { display: flex; gap: 2px; padding: 6px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.docs-tabs__bar [data-tab] { padding: 6px 14px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 0.85rem; font-weight: 600; color: #64748b; cursor: pointer; }
.docs-tabs__bar [data-tab].is-active { background: #fff; color: #0d9488; box-shadow: 0 1px 3px rgba(15,23,42,.08); }
.docs-tabs [data-tab-panel] { padding: 16px; }

.docs-demo-frame { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px 24px; border: 1.5px dashed #99f6e4; border-radius: 14px; background: linear-gradient(135deg, #f0fdfa 0%, #ecfeff 100%); text-align: center; }
.docs-demo-frame__label { margin: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #0d9488; }
.docs-demo-frame__name { margin: 0; font-weight: 600; color: #0f172a; }
.docs-demo-frame__open { margin-top: 6px; font-size: 0.85rem; font-weight: 600; color: #0d9488; }

/* --- Docs article layout (default theme): sidebar · content · toc --- */
.docs-card__count { font-size: 0.8rem; font-weight: 600; color: var(--color-primary); margin-top: auto; }

.docs-article-header {
  background: linear-gradient(180deg, var(--color-soft) 0%, var(--color-white) 100%);
  border-bottom: 1px solid var(--color-line);
  padding: 40px 0 28px;
}
.docs-article-header .container { max-width: 760px; }
.docs-article-header .content-title { margin: 6px 0 0; }

.docs-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 32px 20px 64px;
  align-items: start;
}
@media (min-width: 1024px) {
  .docs-layout { grid-template-columns: 250px minmax(0, 1fr); }
  .docs-layout--with-toc { grid-template-columns: 250px minmax(0, 1fr) 210px; }
  .docs-sidebar, .docs-toc { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow: auto; }
}
.docs-main { min-width: 0; }
.docs-main .content-body { max-width: 760px; }
.docs-toc { display: none; }
@media (min-width: 1024px) { .docs-layout--with-toc .docs-toc { display: block; } }

.docs-toc__label {
  margin: 0 0 10px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-muted);
}
.docs-toc__list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--color-line); }
.docs-toc__list a {
  display: block; padding: 5px 0 5px 14px; margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: 0.85rem; line-height: 1.4; color: var(--color-muted);
}
.docs-toc__list a:hover { color: var(--color-primary); }
.docs-toc__list a.is-active { color: var(--color-primary); border-left-color: var(--color-primary); font-weight: 600; }
.docs-toc__sub a { padding-left: 28px; font-size: 0.82rem; }

/* Fuma-style quiet sidebar: uniform rows, inline chevrons, indent rails, group labels. */
.docs-nav__list { list-style: none; margin: 0; padding: 0; }
.docs-nav__list .docs-nav__list {
  margin: 2px 0 4px 11px;
  padding-left: 10px;
  border-left: 1px solid var(--color-line);
}
.docs-nav__item { position: relative; }
.docs-nav__item > a {
  display: block;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--color-muted);
  transition: background 0.12s ease, color 0.12s ease;
}
.docs-nav__item--branch > a { padding-right: 30px; }
.docs-nav__item > a:hover { background: var(--color-soft); color: var(--color-text); }
.docs-nav__item > a.is-current {
  color: var(--color-primary-dark);
  font-weight: 600;
  background: var(--color-primary-light);
}
.docs-nav__item > a.is-trail { color: var(--color-text); font-weight: 500; }
.docs-nav__group {
  padding: 14px 10px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.docs-nav-toggle {
  position: absolute;
  top: 5px;
  right: 4px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  font-size: 0.85rem;
}
.docs-nav-toggle:hover { background: var(--color-line); color: var(--color-text); }
.docs-nav-toggle::before { content: "\203A"; display: inline-block; transition: transform 0.15s ease; }
.docs-nav-toggle[aria-expanded="true"]::before { transform: rotate(90deg); }

.docs-feedback {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  margin-top: 36px; padding: 20px 24px;
  border: 1px solid var(--color-line); border-radius: var(--radius);
  background: var(--color-soft);
}
.docs-feedback__q { margin: 0; font-weight: 600; }
.docs-feedback__actions { display: flex; gap: 10px; }
.docs-feedback__btn {
  padding: 8px 22px; border-radius: 999px;
  border: 1px solid var(--color-line); background: var(--color-white);
  font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--color-muted); cursor: pointer;
}
.docs-feedback__btn:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-light); }
.docs-feedback__thanks { margin: 0; font-weight: 600; color: var(--color-primary); }

/* --- Docs shell: one predictable frame for every /help page --- */
.docs-topbar {
  position: sticky;
  top: 72px;
  margin-top: 72px;
  z-index: 40;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-line);
}
.docs-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 10px 20px;
}
.docs-topbar__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-text);
}
.docs-topbar__title svg { color: var(--color-primary); }
.docs-topbar__title:hover { color: var(--color-primary); }

.docs-search--topbar { margin: 0; width: 320px; max-width: 45vw; }
.docs-search--topbar .docs-search__icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--color-muted); pointer-events: none;
}
.docs-search--topbar input {
  padding: 8px 40px 8px 32px;
  font-size: 0.875rem;
  box-shadow: none;
  background: var(--color-soft);
}
.docs-search__kbd {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  padding: 1px 6px;
  border: 1px solid var(--color-line); border-radius: 5px;
  background: var(--color-white);
  font-size: 0.7rem; color: var(--color-muted);
  pointer-events: none;
}

.docs-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 28px 20px 64px;
  align-items: start;
}
@media (min-width: 1024px) {
  .docs-shell { grid-template-columns: 250px minmax(0, 1fr); }
  .docs-shell--with-toc { grid-template-columns: 250px minmax(0, 1fr) 210px; }
  .docs-shell .docs-sidebar, .docs-shell .docs-toc {
    position: sticky; top: 140px; max-height: calc(100vh - 164px); overflow: auto;
  }
}
.docs-shell .docs-main { min-width: 0; }
.docs-shell .content-body { max-width: 760px; }
.docs-shell .docs-toc { display: none; }
@media (min-width: 1024px) { .docs-shell--with-toc .docs-toc { display: block; } }
.docs-shell .docs-breadcrumbs ol { margin-bottom: 8px; }

.docs-page-head { margin: 0 0 24px; }
.docs-page-head h1 {
  margin: 0 0 8px;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.2;
}
.docs-page-head__lede { margin: 0; color: var(--color-muted); max-width: 640px; }
.docs-page-head .docs-article-meta { margin: 6px 0 0; }

.docs-shell .docs-card-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
/* ==========================================================================
   Finish layer
   The starter theme has one job the merchant cannot do for us: look designed
   before a single word or photograph has been replaced. Identity therefore
   lives in material and structure — paper, metal, and the way a heading meets
   a rule — never in a hero image that is the first thing to go.
   ========================================================================== */

/* Paper. An uncoated sheet is never perfectly flat, and a page that is reads
   as a screen. One inline SVG, fixed so it does not swim while scrolling. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.site-shell {
  position: relative;
  z-index: 1;
}

/* Fraunces is variable: let it optically size itself, so one family reads as a
   display cut in the hero and a text cut in a card without a second webfont. */
h1,
h2,
h3,
.hero h1,
.section-heading h2 {
  font-variation-settings: "SOFT" 0, "WONK" 1;
  letter-spacing: -0.021em;
}

h1,
.hero h1 {
  font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 120;
  letter-spacing: -0.03em;
  line-height: 1.02;
}

/* The eyebrow is the brass. Small caps on a rule that starts before the text
   and stops at it — signage, not decoration, and it marks every section the
   same way so the page has one grammar. */
.eyebrow,
.section-heading > p:first-child {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 0.9rem;
  color: var(--color-accent);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eyebrow::before,
.section-heading > p:first-child::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: currentColor;
  opacity: 0.85;
}

/* Buttons: the primary is a solid block of moss with a brass underline that
   only completes on hover — the metal detail rewards the pointer instead of
   shouting for it. */
.button {
  position: relative;
  border-radius: var(--radius);
  font-weight: 600;
  letter-spacing: 0.005em;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
    background-color 0.25s var(--ease), color 0.25s var(--ease);
}

.button:hover {
  transform: translateY(-1px);
}

.button:active {
  transform: translateY(0);
}

/* Cards lift like paper, and the brass edge appears only on the hovered one. */
.card,
.blog-card,
.faster-product-card {
  position: relative;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
    border-color 0.3s var(--ease);
}

.card:hover,
.blog-card:hover,
.faster-product-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-line));
}

/* A focus ring that is actually visible on both paper and ink. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Selection in brass rather than the browser's blue. */
::selection {
  background: color-mix(in srgb, var(--color-accent) 30%, transparent);
  color: var(--color-text);
}

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

/* Motion is a courtesy, not a requirement. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .card:hover,
  .blog-card:hover,
  .faster-product-card:hover,
  .button:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   The creed
   One held breath between the hero's claim and the proof below it. This is the
   page's single loud moment, so everything in it is oversized and nothing else
   on the page competes: no card, no border, no button — just the sentence,
   a brass rule, and air.
   -------------------------------------------------------------------------- */
.creed {
  padding: clamp(4.5rem, 11vw, 9rem) 0;
  background: var(--color-soft);
  border-block: 1px solid var(--color-line);
}

.creed__figure {
  max-width: 46ch;
  margin: 0 auto;
  text-align: center;
}

.creed__quote {
  margin: 0;
  font-family: var(--font-heading);
  /* Fraunces at its most expressive: the display optical size, the soft axis
     opened up, and a weight light enough that the size reads as calm rather
     than shouted. */
  font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 144;
  font-size: clamp(1.65rem, 4.4vw, 3rem);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.022em;
  color: var(--color-text);
  text-wrap: balance;
}

/* The opening quotation mark hangs outside the measure so the first letter of
   the sentence stays on the optical margin — the detail a typesetter would
   fix and a template never does. */
.creed__quote::before {
  content: "\201C";
  margin-inline-start: -0.42em;
  color: var(--color-accent);
}

.creed__quote::after {
  content: "\201D";
  color: var(--color-accent);
}

.creed__attribution {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.creed__attribution::before,
.creed__attribution::after {
  content: "";
  width: clamp(1.5rem, 4vw, 3rem);
  height: 1px;
  background: var(--color-accent);
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   The field
   A starter theme opens with no photograph, because the merchant has not
   uploaded one yet. So the hero has to be made of colour and type or it is a
   text column on an empty page. It becomes a solid field of petrol teal: the brand
   asserts itself before a single asset exists, and the first thing a visitor
   sees is a considered surface rather than white space.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  min-height: min(78vh, 720px);
  padding: clamp(6rem, 13vw, 9.5rem) 0 clamp(4rem, 8vw, 6rem);
  overflow: hidden;
  border-bottom: none;
  background: var(--surface-deep);
  color: var(--color-on-dark);
}

/* Light falling from the upper left, as it would across a painted wall. Two
   soft washes, no hard edge — the surface should look mixed, not gradiented. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 90% at 12% 0%, color-mix(in srgb, var(--color-accent) 24%, transparent), transparent 58%),
    radial-gradient(90% 70% at 92% 100%, color-mix(in srgb, var(--color-primary) 70%, transparent), transparent 62%);
}

.hero h1 {
  color: var(--color-on-dark);
  font-size: clamp(2.6rem, 6.6vw, 5rem);
  margin: 0;
}

.hero__copy {
  color: rgba(244, 244, 241, 0.82);
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  max-width: 46ch;
  margin-inline: auto;
}

.hero .eyebrow {
  color: var(--color-accent);
}

/* The primary action is the one bright thing on the field: brass on moss. */
.hero .button--primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #04211f;
}

.hero .button--primary:hover {
  background: color-mix(in srgb, var(--color-accent) 84%, #fff);
  border-color: color-mix(in srgb, var(--color-accent) 84%, #fff);
}

.hero .button--secondary {
  background: transparent;
  border-color: color-mix(in srgb, var(--color-on-dark) 38%, transparent);
  color: var(--color-on-dark);
}

.hero .button--secondary:hover {
  border-color: var(--color-on-dark);
  background: rgba(244, 244, 241, 0.10);
}

/* The three claims read as a plate on the wall: hairline-separated, the value
   in brass, the label quiet beneath it. */
.hero__stats {
  margin-top: clamp(2.75rem, 5vw, 4rem);
  gap: 0;
  border-top: 1px solid rgba(244, 244, 241, 0.20);
  padding-top: 1.75rem;
  max-width: 40rem;
  margin-inline: auto;
  flex-wrap: wrap;
}

.hero__stats div {
  flex: 1 1 8rem;
  padding-inline: clamp(0.75rem, 2vw, 1.5rem);
  border-inline-start: 1px solid rgba(244, 244, 241, 0.16);
}

.hero__stats div:first-child {
  border-inline-start: none;
}

.hero__stats strong {
  display: block;
  font-family: var(--font-heading);
  font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 60;
  font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.05;
  color: var(--color-accent);
}

.hero__stats span {
  display: block;
  margin-top: 0.4rem;
  color: rgba(244, 244, 241, 0.66);
  font-size: 0.82rem;
  line-height: 1.35;
}

/* The header sits on the field rather than above it, so the page opens on
   colour edge-to-edge instead of a white bar. */
body:not(.is-scrolled).page-home .site-header {
  background: transparent;
  border-bottom-color: rgba(244, 244, 241, 0.14);
}

body:not(.is-scrolled).page-home .site-header a,
body:not(.is-scrolled).page-home .site-header .site-header__brand {
  color: var(--color-on-dark);
}

body:not(.is-scrolled).page-home .site-header .button {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #1a1f1c;
}

/* The header sits on the teal field on the home page, so the shared nav hover —
   which paints the link with the light surface — put bone text on a bone chip
   and the label disappeared. On the field the hover is a translucent wash of
   the same bone instead, and the text stays bone throughout. */
body:not(.is-scrolled).page-home .site-nav__link {
  color: rgba(244, 244, 241, 0.78);
}

body:not(.is-scrolled).page-home .site-nav__link:hover,
body:not(.is-scrolled).page-home .site-nav__link:focus-visible,
body:not(.is-scrolled).page-home .site-nav__link.is-active {
  color: var(--color-on-dark);
  background: rgba(244, 244, 241, 0.14);
}

/* Same trap on the search and any other icon button in the field header. */
body:not(.is-scrolled).page-home .site-header__actions button:not(.button):hover,
body:not(.is-scrolled).page-home .site-header__actions a:not(.button):hover {
  color: var(--color-on-dark);
  background: rgba(244, 244, 241, 0.14);
}

/* The mobile drawer opens over the page, not the field — keep its own contrast. */
.page-home .mobile-menu .site-nav__link {
  color: var(--color-text);
}

.page-home .mobile-menu .site-nav__link:hover {
  color: var(--color-text);
  background: var(--color-soft);
}

/* ==========================================================================
   Structure
   Everything above still centred a 580px column in a 1120px page, section after
   section, which is what makes a theme read as a template no matter what
   colours it wears. The page becomes an editorial grid instead: a label rail
   that holds its position while the reader moves, and content in the wider
   column beside it. Asymmetry is the design; colour was only the surface.
   ========================================================================== */

:root {
  --container: 1240px;
  --rail: minmax(10rem, 19%);
  --gutter: clamp(1.75rem, 4.5vw, 4.5rem);
}

/* Two columns: the rail, then the work. Anything that is not the heading
   falls into the content column, so sections with several blocks still line
   up without each one needing its own rule. */
/* The rail only exists when a section actually has a heading to put in it.
   Pages like Services and Contact carry their title in a page-hero above and
   their .section has no heading at all -- ungated, those pages reserved an
   empty first column and squeezed all their content into the second, using
   about 70% of the width with a blank strip down the left. */
.section > .container:has(> .section-heading) {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  column-gap: var(--gutter);
  row-gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

.section > .container:has(> .section-heading) > .section-heading {
  grid-column: 1;
  position: sticky;
  top: 5.5rem;
  max-width: none;
  margin: 0;
  text-align: start;
}

/* Guarded like the grid itself: unguarded, this forced every child of every
   .section .container into column 2 -- including .contact-layout, which owns
   its own grid, so its form and card both landed in the narrow second column
   and left the first empty. */
.section > .container:has(> .section-heading) > :not(.section-heading) {
  grid-column: 2;
}

/* The rail is quiet: a small-caps label, a hairline, the title beneath. It
   reads as marginalia, not as a competing headline. */
.section-heading h2 {
  font-size: clamp(1.35rem, 1.9vw, 1.75rem);
  /* Fraunces runs WONK 1 here, whose descenders reach well below the baseline.
     At 1.15 the tail of a `y` collided with the hairline of the span below and
     was visibly sliced; 1.28 clears it at every step of the clamp. */
  line-height: 1.28;
  margin: 0.55rem 0 0;
  letter-spacing: -0.018em;
}

.section-heading > span {
  display: block;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--color-line);
  color: var(--color-muted);
  font-size: 0.83rem;
  line-height: 1.5;
}

.section {
  padding: clamp(3.5rem, 8vw, 7rem) 0;
}

/* The hero stops being a centred column too. The headline takes the width it
   deserves and everything hangs off the same left edge as the rail below, so
   the page has one spine from top to bottom. */
.hero > .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
}

/* The measure belongs to the headline, not to the block that contains it —
   constraining the wrapper squeezed the buttons into one word per line. */
.hero__inner {
  max-width: min(100%, 62rem);
  margin: 0;
  text-align: start;
}

.hero h1 {
  max-width: 17ch;
}

.hero__actions {
  flex-wrap: wrap;
}

.hero__actions .button {
  white-space: nowrap;
}

.hero__copy {
  margin-inline: 0;
  max-width: 44ch;
}

.hero__actions {
  justify-content: flex-start;
}

.hero__stats {
  margin-inline: 0;
  max-width: 44rem;
  width: 100%;
}

.hero .eyebrow {
  justify-content: flex-start;
}

/* Cards were boxes with shadows — the most template-shaped object there is.
   They become editorial rows: a hairline above, generous air, and a teal edge
   that only appears under the pointer. */
.blog-card,
.feature-card {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--color-line);
  border-radius: 0;
  box-shadow: none;
  padding: 1.5rem 0 1.75rem;
  transition: border-color 0.25s var(--ease);
}

.blog-card:hover,
.feature-card:hover {
  transform: none;
  box-shadow: none;
  border-top-color: var(--color-accent);
}

.feature-grid,
.post-grid,
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  column-gap: var(--gutter);
  row-gap: 0;
}

.feature-card__icon {
  display: inline-flex;
  margin-bottom: 0.75rem;
  color: var(--color-accent);
}

/* The creed keeps its own full-bleed band — it is the one centred moment left,
   and it earns that by being the only one. */
.creed > .container {
  display: block;
}

/* Below the rail's breakpoint the grid collapses to one column and the heading
   stops sticking, so small screens read as a normal document. */
@media (max-width: 860px) {
  .section > .container:has(> .section-heading) {
    grid-template-columns: minmax(0, 1fr);
  }

  .section > .container:has(> .section-heading) > .section-heading {
    position: static;
    grid-column: 1;
  }

  .section > .container:has(> .section-heading) > :not(.section-heading) {
    grid-column: 1;
  }
}

/* ============================================================
   Imagery — platform-owned assets on cdn.fstr.site
   Content-addressed and immutable: the hash IS the version, so
   these URLs never need cache-busting and never change in place.
   Declared once here; every rule below refers to them by name.
   ============================================================ */
:root {
  --img-hero-field: url("https://cdn.fstr.site/faster-platform/sha256/f9f0ebaedf73d4861f24e757888374ac3d142713d15c3ae34bfa3b98885bcef8.webp");
  --img-paper: url("https://cdn.fstr.site/faster-platform/sha256/4e624b16d04c78c0629bc5fd71cd0b9f5087a963609ccd0e17b1f09af69ca27b.webp");
}

/* The hero art is atmosphere, not information: it carries no text and no
   subject, so it is a background rather than an <img> and is never announced
   to assistive tech. Measured contrast in the text zone is 16.3:1 against
   white, so the copy stays legible without a scrim. */
.hero {
  background-color: var(--surface-deep);
  background-image: var(--img-hero-field);
  background-size: cover;
  /* Bias toward the quiet left of the frame: the headline sits there, and the
     image's activity is bottom-right. On narrow screens this keeps the busy
     corner out of the crop entirely. */
  background-position: 18% 50%;
  background-repeat: no-repeat;
}

/* Paper grain over the light ground. Tiled rather than stretched -- the tile is
   seamless (edge delta 2.1 vs an internal noise floor of 1.7). Kept faint: it
   should register as material, not pattern. */
body {
  background-image: var(--img-paper);
  background-size: 512px 512px;
  background-repeat: repeat;
  background-attachment: fixed;
}

/* The grain is decoration only. Anyone who has asked for reduced data or is
   printing gets the flat ground instead of a network request. */
@media (prefers-reduced-data: reduce), print {
  body { background-image: none; }
}

:root {
  --img-feature-1: url("https://cdn.fstr.site/faster-platform/sha256/869824c8fe3ebc777549f862c57dacff79bd02433758078189f81fbbac878c1a.webp");
  --img-feature-2: url("https://cdn.fstr.site/faster-platform/sha256/f02c1894cfa078bb54451ca3a2b83bef03668da41b730604fcf973bef041ab3c.webp");
  --img-feature-3: url("https://cdn.fstr.site/faster-platform/sha256/508ca0f7fe42eda8626e49037a58c051d9608410f27e9e245ead7a7276b863ad.webp");
  --img-feature-4: url("https://cdn.fstr.site/faster-platform/sha256/3f2cdd4c1567b34e4ff45d8f3a615ec9865705d2f2398333d475ba9857b8bed7.webp");
  --img-feature-5: url("https://cdn.fstr.site/faster-platform/sha256/b53600db52cf91e78561c7ecf1403eb77d2ffe481b17491f97ae4c0135ea82a2.webp");
  --img-feature-6: url("https://cdn.fstr.site/faster-platform/sha256/f9c186905a996a2fe402a7df048ac6f9551785038f70fa833478250fb652a2a6.webp");
}

/* A collage band above each feature. The template passes its slot as
   --card-img; a card without one simply has no band, which is why this is a
   background on a sized element rather than an <img> that could break. */
.feature-card__art {
  display: block;
  aspect-ratio: 4 / 3;
  margin: calc(var(--card-pad, 1.75rem) * -1) calc(var(--card-pad, 1.75rem) * -1) 1.5rem;
  background-color: var(--surface-deep);
  background-image: var(--card-img);
  background-size: cover;
  background-position: center;
  /* The collages are busy at full bleed; a slight desaturation at rest lets the
     heading win, and full colour on hover rewards the pointer. */
  filter: saturate(0.82);
  transition: filter 220ms ease, transform 220ms ease;
}
.feature-card:hover .feature-card__art { filter: saturate(1); }

@media (prefers-reduced-motion: reduce) {
  .feature-card__art { transition: none; }
}

:root {
  --img-post-1: url("https://cdn.fstr.site/faster-platform/sha256/de6330d8327aa436b5cd0be0f884d273a5e45f95b8dd697d104395138b941773.webp");
  --img-post-2: url("https://cdn.fstr.site/faster-platform/sha256/24cf25d4e661752bf1025e528bf3fc103db0f7e9215eabc4ed1f0e577b2a9888.webp");
  --img-post-3: url("https://cdn.fstr.site/faster-platform/sha256/19e0805ac819980614b670fa3e5490fc76dc03df9ddaefcae436abe42a1023af.webp");
  --img-post-4: url("https://cdn.fstr.site/faster-platform/sha256/5b7751e57f2a9f42bd5641f032ad0170f1f478578ac82ebfdc7bfcb54847b30d.webp");
}

/* Covers for posts that have no image of their own. The template already falls
   back to .post-card__placeholder, so this needs no markup change and a post
   with a real image is untouched. Four covers cycle by position, which keeps
   adjacent cards distinct in any list length. */
.post-card__placeholder {
  background-color: var(--surface-deep);
  background-size: cover;
  background-position: center;
}
.post-card:nth-of-type(4n + 1) .post-card__placeholder { background-image: var(--img-post-1); }
.post-card:nth-of-type(4n + 2) .post-card__placeholder { background-image: var(--img-post-2); }
.post-card:nth-of-type(4n + 3) .post-card__placeholder { background-image: var(--img-post-3); }
.post-card:nth-of-type(4n + 4) .post-card__placeholder { background-image: var(--img-post-4); }

/* ============================================================
   Inner-page headers
   The homepage earns a full-height hero; inner pages get a band
   instead — same collage family, short enough that the content
   below stays above the fold. Left-anchored to match the hero's
   spine rather than reverting to the centred original.
   ============================================================ */
:root {
  --img-page-about: url("https://cdn.fstr.site/faster-platform/sha256/0e2c55a026d11b2ea3955f354e7865979414b2345213a0eb086eee5bcc9f722c.webp");
  --img-page-services: url("https://cdn.fstr.site/faster-platform/sha256/e7dc434ef7deeeed7a4c48446420708145d402a9d82ce2ced29253efc070e168.webp");
  --img-page-contact: url("https://cdn.fstr.site/faster-platform/sha256/2bca3a58a983852409d2f8fee4aee1fc629ad86eb1bcced40eb8effacc39cbe4.webp");
  --img-page-careers: url("https://cdn.fstr.site/faster-platform/sha256/078c23e3ab151bae5e5b8e57f4c20e38a96d879576dff1d8069dd7899de31604.webp");
  --img-page-blog: url("https://cdn.fstr.site/faster-platform/sha256/9569b5b7e58f315de4bb4698bd1aaddd87275d71f1b44695ab56c4ed0e8b4645.webp");
  --img-page-404: url("https://cdn.fstr.site/faster-platform/sha256/8bc8221942768130dd7010eac616f8248b72f89fae163a408757928506ee5151.webp");
}

.page-hero {
  position: relative;
  isolation: isolate;
  padding: clamp(7rem, 12vw, 9.5rem) 0 clamp(3rem, 6vw, 4.5rem);
  text-align: start;
  border-bottom: none;
  background-color: var(--surface-deep);
  color: var(--color-on-dark);
  overflow: hidden;
}

/* The art sits on a pseudo-element so the band can be dimmed independently of
   the text above it. Without the veil, bone shapes in the collage collide with
   light type.
   The end stop is measured, not chosen: compositing each banner under this
   gradient and sampling the heading zone, 0.42 left page-about at 4.12:1 --
   fine for the h1, but short of the 4.5:1 the description below it needs.
   0.62 puts the worst banner at 5.95:1 and the rest above 7:1, while still
   letting the collage read. */
.page-hero[data-art]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--page-art);
  background-size: cover;
  background-position: center;
}
.page-hero[data-art]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--surface-deep) 92%, transparent) 0%,
    color-mix(in srgb, var(--surface-deep) 72%, transparent) 55%,
    color-mix(in srgb, var(--surface-deep) 62%, transparent) 100%
  );
}

/* This element carries BOTH .container and .page-hero__inner. Overriding
   max-width/margin here destroyed the container's own `width: min(100% - 32px)`
   and `margin-inline: auto`, so the heading started at x=0 with no gutter and
   ran off the edge. Left-alignment is all that is wanted -- the measure belongs
   on the text, not on the container. */
.page-hero__inner {
  text-align: start;
  /* The original band was a centred 760px column, and text-align alone does not
     undo that: the block itself was still centred (760px inside 1440 starts at
     340px) and the paragraph carried `margin: 20px auto 0`, so heading and body
     landed on two different left edges. Release the width back to the container
     and drop the auto side margins; `margin-inline: auto` stays, because that is
     the .container's own centring and it is what supplies the page gutter. */
  max-width: none;
}
.page-hero p:not(.eyebrow) {
  margin-inline: 0;
}
.page-hero h1 {
  max-width: 18ch;
  color: var(--color-on-dark);
  /* Fraunces at display size will happily overflow a narrow column; wrapping is
     preferable to a clipped word. */
  overflow-wrap: break-word;
}
/* Must carry :not(.eyebrow) to match the earlier rule at that specificity --
   without it the original `.page-hero p:not(.eyebrow) { color: --color-muted }`
   won, painting the description in a light-mode grey (#667471) over the dark
   band: measured 2.74:1 against 4.5 required. */
.page-hero p:not(.eyebrow),
.page-hero__inner > span {
  max-width: 54ch;
  color: var(--color-on-dark-muted);
}
.page-hero .eyebrow,
.page-hero__inner > p:first-child {
  color: var(--color-accent);
}

/* 404 — its own art rather than the homepage's field. The source is square, so
   it is anchored right where there is no text instead of being cropped to a
   wide strip; the copy keeps the quiet left side. */
.page-not-found .hero {
  background-image: var(--img-page-404);
  background-position: right center;
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-color: var(--surface-deep);
}
@media (max-width: 860px) {
  /* At narrow widths the square would sit behind the text; drop to the flat
     ground so the message stays first. */
  .page-not-found .hero { background-image: none; }
}

/* Theme toggle — one icon at a time. The button shows what you will GET, not
   what you have: a moon in light mode, a sun in dark. Both SVGs stay in the
   DOM so the swap costs nothing at click time. */
.theme-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-toggle__sun { display: none; }
.theme-toggle__moon { display: block; }

/* Dark active, by either route: OS preference or explicit choice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle__moon { display: none; }
}
:root[data-theme="dark"] .theme-toggle__sun { display: block; }
:root[data-theme="dark"] .theme-toggle__moon { display: none; }
:root[data-theme="light"] .theme-toggle__sun { display: none; }
:root[data-theme="light"] .theme-toggle__moon { display: block; }

/* Mobile drawer stacking -----------------------------------------------------
   .site-header carries backdrop-filter, which creates a stacking context. That
   traps the drawer (z-index 70) and its backdrop (60) at the header's own level
   of 50, so any page element stacked above 50 paints straight through the open
   menu. Raising the header while the menu is open lifts the whole context above
   the page instead of fighting it element by element. */
body.has-open-menu .site-header {
  z-index: 200;
  /* backdrop-filter makes an element a containing block for position:fixed
     descendants. The drawer lives inside this header, so while the filter is
     active `inset: 0 auto 0 0` resolved against the ~70px header instead of the
     viewport: the panel was header-height, its background stopped there, and
     its own children overflowed onto the page with nothing behind them.
     Dropping the filter while the menu is open restores the viewport as the
     containing block. The blur is decorative and the panel covers the header
     anyway, so nothing is lost. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* The panel must be fully opaque in both modes. --color-white is a surface
   token and resolves to #0c1413 in dark, which is correct here -- what matters
   is that nothing behind it shows through. */
.mobile-menu {
  background-color: var(--color-white);
}

/* Backdrop dims the page rather than relying on the panel alone. */
.mobile-menu-backdrop {
  background: rgba(6, 49, 46, 0.55);
}

/* While the drawer is open the page behind must not scroll or paint over it. */
body.has-open-menu {
  overflow: hidden;
}

/* Paper grain in dark mode ---------------------------------------------------
   The tile is a bone-coloured image, so it does not respond to tokens: in dark
   mode it painted a cream sheet over the dark surface and every section turned
   light again, taking the headings with it. Blend it into the surface instead
   of laying it on top, so it survives as texture rather than as colour. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body {
    background-blend-mode: overlay;
    background-color: var(--color-white);
    opacity: 1;
  }
}
:root[data-theme="dark"] body {
  background-blend-mode: overlay;
  background-color: var(--color-white);
}

/* Once scrolled off the hero the header sits over ordinary page surfaces, so it
   returns to solid ground and normal ink. Without this the light-on-dark hero
   treatment persisted and the nav disappeared against a light section. */
body.is-scrolled .site-header {
  background: color-mix(in srgb, var(--color-white) 92%, transparent);
  border-bottom: 1px solid var(--color-line);
}
body.is-scrolled .site-header a,
body.is-scrolled .site-header .site-header__brand,
body.is-scrolled .site-nav__link {
  color: var(--color-text);
}
body.is-scrolled .site-nav__link:hover,
body.is-scrolled .site-nav__link:focus-visible,
body.is-scrolled .site-nav__link.is-active {
  color: var(--color-primary);
}

/* Mobile drawer layout -------------------------------------------------------
   A column so the nav takes the free space and the actions sit on the bottom
   edge, where a thumb reaches them, instead of floating directly under the last
   link with dead space beneath. */
/* `display: flex` here outranks the UA's `[hidden] { display: none }`, so the
   closed drawer stayed laid out and swallowed clicks across the whole page.
   Restate the hidden case explicitly. */
.mobile-menu {
  display: flex;
  flex-direction: column;
}
.mobile-menu[hidden] {
  display: none;
}
/* Takes the free space so the actions reach the bottom edge -- but it is a
   grid, and a stretched grid distributes its rows over the full height, which
   spread the five links down the whole drawer. Pack them at the top. */
.mobile-menu__nav {
  flex: 1 1 auto;
  overflow-y: auto;
  align-content: start;
}
.mobile-menu__actions {
  margin-top: auto;
}
.mobile-menu__actions .button {
  width: 100%;
  justify-content: center;
}

/* The language control was a 40px pill with the chevron parked outside its
   right edge. In the drawer it is a primary control, so it matches the button
   above it: full width, same height, chevron inside the field. */
.language-switcher--mobile {
  padding: 0 20px 20px;
}
.language-switcher--mobile .language-switcher__select {
  width: 100%;
  min-height: 48px;
  padding-inline: 14px 40px;
  font-size: 15px;
  background-color: transparent;
  border-color: var(--color-line);
  /* chevron drawn into the field rather than relying on a sibling glyph */
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 22px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
/* The theme renders a decorative chevron next to the desktop switcher; inside
   the drawer it duplicated the one now drawn in the field. */
/* The decorative chevron is drawn by .language-switcher::after, positioned
   against the wrapper. Full-width in the drawer, that put it outside the field
   entirely -- a stray mark at the panel edge. The field draws its own. */
.language-switcher--mobile::after,
.language-switcher--mobile > svg,
.language-switcher--mobile .language-switcher__icon {
  display: none;
}

/* Mobile nav rows: icon + label on a shared baseline. The icon is a quiet mark
   at the muted ink, so the label still carries the row; it picks up the accent
   on hover along with the text. */
.mobile-menu__link {
  display: flex;
  align-items: center;
  gap: 14px;
}
.mobile-menu__icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--color-muted);
  transition: color 160ms ease;
}
.mobile-menu__link:hover .mobile-menu__icon,
.mobile-menu__link:focus-visible .mobile-menu__icon {
  color: var(--color-primary);
}
@media (prefers-reduced-motion: reduce) {
  .mobile-menu__icon { transition: none; }
}

/* The drawer is a child of .site-header, so the transparent-header treatment
   (light ink for the dark hero behind it) also hit the drawer's own links and
   wordmark -- light text on the white panel. The panel is its own surface and
   always uses normal ink. Selector length matches the rule it must outrank,
   rather than reaching for !important. */
body:not(.is-scrolled).page-home .site-header .mobile-menu a,
body:not(.is-scrolled).page-home .site-header .mobile-menu .site-logo,
body.is-scrolled .site-header .mobile-menu a,
body.is-scrolled .site-header .mobile-menu .site-logo,
.mobile-menu a,
.mobile-menu .site-logo {
  color: var(--color-text);
}
/* The primary action keeps its own button colours. */
body:not(.is-scrolled).page-home .site-header .mobile-menu .button--primary,
.mobile-menu .button--primary {
  color: var(--color-white);
}

/* The attribution link reads as part of the sentence until you approach it, so
   it carries an underline only on hover/focus rather than shouting in the
   footer's quietest line. */
.site-footer__attribution {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.site-footer__attribution:hover,
.site-footer__attribution:focus-visible {
  color: var(--color-on-dark);
  border-bottom-color: currentColor;
}

/* The transparent-header Subscribe button wears dark ink on the accent (6.31:1).
   The generic .button--primary:hover swapped the fill to --color-primary-dark
   and left the ink dark: 1.18:1, effectively unreadable. Hover lightens the
   accent instead of darkening it, keeping the same ink at 7.44:1. */
body:not(.is-scrolled).page-home .site-header .button:hover,
body:not(.is-scrolled).page-home .site-header .button:focus-visible {
  background: color-mix(in srgb, var(--color-accent) 82%, #fff);
  border-color: color-mix(in srgb, var(--color-accent) 82%, #fff);
  color: #1a1f1c;
}

/* Hero subject --------------------------------------------------------------
   The headline sat on an atmospheric wash with nothing to look at. This is the
   collage that gives the hero a subject: overlapping planes assembling into one
   form, anchored right so it never crowds the type.

   Its own ground is the same deep petrol as the hero, so `lighten` blending
   drops that ground against the field beneath and only the lighter planes
   survive -- no cut-out edge, no rectangle. */
:root {
  --img-hero-object: url("https://cdn.fstr.site/faster-platform/sha256/ea68e45e699eadccc21d260d80a465ecb6740935eed99d4a7c127053dc4d3314.webp");
}

@media (min-width: 900px) {
  /* A positioned element, not a background layer. Percentages in
     background-position resolve against (container - image), so every attempt
     to anchor the collage that way drifted -- off the right edge on wide
     screens, then behind the copy when corrected. As an element the geometry is
     explicit: its right edge is pinned to the content container's right edge at
     any viewport width.

     `lighten` drops its deep-petrol ground against the field beneath, so no
     rectangle or cut-out edge appears. That relies on the artwork's ground
     matching --surface-deep; a regenerated image with a different ground would
     show its box. */
  .page-home .hero::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: min(50vw - 16px, 620px);
    transform: translate(-100%, -50%);
    width: min(26rem, 34vw);
    aspect-ratio: 1400 / 1600;
    background: var(--img-hero-object) center / contain no-repeat;
    mix-blend-mode: lighten;
    pointer-events: none;
    z-index: 0;
  }
  /* Keep the copy above the art. */
  .page-home .hero .container {
    position: relative;
    z-index: 1;
  }
}
/* Below 900px the text needs the full width and the object would sit behind the
   copy, so the hero keeps the field alone. */