/* reset.css */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
}

img,
picture,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
  border: 0;
  background: none;
}

a {
  color: inherit;
}

ul,
ol {
  padding-inline-start: 1.25rem;
}

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

/* tokens.css */

:root {
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Neutral, near-monochrome surface palette */
  --color-background: #ffffff;
  --color-surface: #ffffff;
  --color-surface-soft: #f6f6f4;
  --color-surface-muted: #eef0eb;
  --color-ink: #14161a;
  --color-ink-soft: #40444d;
  --color-muted: #565b64;
  --color-border: #e4e5e0;
  --color-border-strong: #c7c9c0;
  --color-primary: #536a08;
  --color-primary-bright: #c3ff33;
  --color-primary-soft: #f2ffd6;
  --color-dark: #0c0d0a;
  --color-dark-soft: #17190f;
  --color-dark-border: rgb(255 255 255 / 0.14);
  --color-white: #ffffff;
  --color-error: #ba1a1a;
  --blog-page-background: #f4f4f0;
  --blog-content-background: #ffffff;
  --blog-text-color: #161616;
  --blog-border-color: rgba(22, 22, 22, 0.08);

  /* Layout */
  --container-max: 1240px;
  --container-wide: 1440px;
  --reading-width: 700px;
  /* Widest stage on the site — hero video column and the mobile nav
     dropdown panel, both wider than --container-wide. Shared so the
     two never drift into two different "wide" values. */
  --container-hero-wide: 88rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  /* Content top offset — clears the floating pill nav (its top offset +
     height) plus a small breathing margin, 82px at mobile up to 92px at
     desktop, one continuous value so nothing jumps at a breakpoint. */
  --header-height: clamp(5.125rem, 4.9rem + 1.1vw, 5.75rem);
  --header-border: rgb(255 255 255 / 0.07);

  /* Nav-to-content gap — breathing room after the pill nav clears,
     before a page's first content element. Fluid 24px (mobile) to 36px
     (desktop), same taper style as --header-height. */
  --nav-content-gap: var(--space-md);
  /* Canonical distance from viewport top to a page's first content
     element. Single source of truth for nav-to-content spacing —
     every template's opening element should offset by this and only
     this, whether via padding-top on .site-main or padding-block on a
     full-bleed hero. This is the About-page benchmark value. */
  --nav-content-offset: calc(var(--header-height) + var(--nav-content-gap));

  /* Floating pill nav */
  --nav-pill-max-width: 1180px;
  --nav-pill-height: 4rem; /* 64px desktop/tablet */
  --nav-pill-height-mobile: 3.5rem; /* 56px */
  --nav-pill-top: 18px;
  --nav-pill-top-scrolled: 14px;
  --nav-pill-top-mobile: 12px;
  --nav-pill-radius-mobile: 28px;
  --nav-pill-dropdown-radius: 22px;
  --nav-pill-bg: rgb(12 13 10 / 0.92);
  --nav-pill-bg-scrolled: rgb(12 13 10 / 0.97);
  --nav-pill-border: rgb(255 255 255 / 0.1);
  --nav-pill-shadow: 0 10px 35px rgb(0 0 0 / 0.22);
  --nav-pill-shadow-scrolled: 0 14px 40px rgb(0 0 0 / 0.28);
  --wp-admin-bar-height: 32px;
  --wp-admin-bar-height-mobile: 46px;

  /* Spacing system */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1.25rem;
  --space-md: 2rem;
  --space-lg: 3rem;
  --space-xl: 4.5rem;
  --space-2xl: 6.5rem;
  --space-3xl: 9rem;

  /* Section rhythm — the single source every top-level <section>'s
     vertical padding derives from, via .section/.section-sm in
     layout.css. Three deliberate steps (not fluid) so the rhythm reads
     as intentional rather than incidental clamp() interpolation. */
  --section-padding-desktop: 6rem;   /* 96px, >=1024px */
  --section-padding-tablet: 4.5rem;  /* 72px, 768-1023px */
  --section-padding-mobile: 3.5rem;  /* 56px, <768px */

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(12 13 10 / 0.04), 0 6px 16px rgb(12 13 10 / 0.05);
  --shadow-md: 0 2px 6px rgb(12 13 10 / 0.05), 0 16px 32px rgb(12 13 10 / 0.07);
  --shadow-lg: 0 4px 12px rgb(12 13 10 / 0.06), 0 28px 56px -12px rgb(12 13 10 / 0.16);
  --shadow-dark-sm: 0 2px 8px rgb(0 0 0 / 0.2), 0 16px 32px -8px rgb(0 0 0 / 0.28);
  --shadow-dark-lg: 0 1px 1px rgb(0 0 0 / 0.16), 0 18px 40px -12px rgb(0 0 0 / 0.36), 0 48px 96px -24px rgb(0 0 0 / 0.46);

  /* Buttons — single source of geometry, motion and shadow for the
     one shared .button component used across the whole site */
  --btn-radius: 999px;
  --btn-ease: cubic-bezier(0.28, 0.11, 0.32, 1);
  --btn-duration: 220ms;
  --btn-duration-hover: 160ms;
  --btn-height: 3.625rem; /* 58px desktop */
  --btn-height-compact: 2.25rem; /* 36px — nav */
  --btn-height-mobile: 3.375rem; /* 54px min touch target */
  --btn-padding-x: 2.25rem; /* 36px */
  --btn-padding-x-compact: 1.25rem; /* 20px — nav */
  --btn-min-width: 11.25rem; /* 180px — full-size buttons only */
  --btn-font-size: 1rem; /* 16px */
  --btn-font-size-compact: 0.875rem; /* 14px — nav */
  --btn-shadow-resting: 0 1px 2px rgb(12 13 10 / 0.08);
  --btn-shadow-hover: 0 3px 8px rgb(12 13 10 / 0.1), 0 10px 24px -6px rgb(12 13 10 / 0.16);

  --z-header: 1000;
  --z-overlay: 1100;

  /* Type scale — Inter, generous headline range */
  --step--1: clamp(0.86rem, 0.83rem + 0.16vw, 1rem);
  --step-0: clamp(1rem, 0.97rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.55vw, 1.5rem);
  --step-2: clamp(1.4rem, 1.2rem + 1vw, 1.9375rem);
  --step-3: clamp(1.85rem, 1.45rem + 2vw, 2.9rem);
  --step-4: clamp(2.5rem, 1.8rem + 3.6vw, 4.15rem);
  --step-5: clamp(2.75rem, 1.95rem + 3.6vw, 4.75rem);

  --line-flush: 0.98;
  --line-tight: 1.06;
  --line-heading: 1.18;
  --line-body: 1.65;

  --tracking-tight: -0.03em;
  --tracking-snug: -0.015em;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.14em;

  --duration-instant: 100ms;
  --duration-fast: 200ms;
  --duration-normal: 360ms;
  --duration-slow: 640ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
}

/* base.css */

html {
  font-feature-settings: "cv11", "ss01", "cv02", "cv03";
  font-variant-numeric: tabular-nums;
  scrollbar-gutter: stable;
}

body {
  color: var(--color-ink);
  background: var(--color-background);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  color: var(--color-dark);
  background: var(--color-primary-bright);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-heading);
  letter-spacing: var(--tracking-snug);
  text-wrap: balance;
}

h1 {
  font-size: var(--step-5);
  font-weight: var(--font-weight-medium);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
}

h2 {
  font-size: var(--step-3);
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-tight);
}

h3 {
  font-size: var(--step-1);
  font-weight: var(--font-weight-semibold);
}

h4 {
  font-size: var(--step-0);
  font-weight: var(--font-weight-semibold);
}

p {
  max-width: 62ch;
}

p.lede {
  font-size: var(--step-1);
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  color: var(--color-ink-soft);
  max-width: 46ch;
}

a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

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

strong {
  font-weight: var(--font-weight-semibold);
}

small {
  font-size: var(--step--1);
}

:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

.dark-panel :focus-visible,
.site-header :focus-visible,
.mobile-nav :focus-visible {
  outline-color: var(--color-primary-bright);
}

main {
  display: block;
}

label {
  display: block;
  color: var(--color-muted);
  font-size: var(--step--1);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-2xs);
}

input,
textarea,
select {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--color-border-strong);
  border-radius: 0;
  padding: 0.75rem 0.1rem;
  color: var(--color-ink);
  background: transparent;
  font-size: var(--step-0);
  transition: border-color var(--duration-fast) var(--ease-standard);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-muted);
}

input:hover,
textarea:hover {
  border-color: var(--color-ink);
}

input:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--color-ink);
  box-shadow: 0 1px 0 0 var(--color-ink);
}

/* layout.css */

.container {
  width: min(100% - (var(--gutter) * 2), var(--container-max));
  margin-inline: auto;
}

.container--wide {
  width: min(100% - (var(--gutter) * 2), var(--container-wide));
  margin-inline: auto;
}

.reading {
  width: min(100% - (var(--gutter) * 2), var(--reading-width));
  margin-inline: auto;
}

.ratiom-single-post .reading {
  width: min(calc(100% - 48px), var(--nav-pill-max-width));
}

.ratiom-single-post .wp-content > * {
  max-width: none;
}

[data-page="seo-resource"] .reading,
[data-page="seo-resource"] .legal-layout {
  width: min(calc(100% - 48px), var(--nav-pill-max-width));
}

[data-page="seo-resource"] .reading > *,
[data-page="seo-resource"] .legal-article,
[data-page="seo-resource"] .legal-article p,
[data-page="seo-resource"] .legal-article ul {
  max-width: none;
}

@media (max-width: 767px) {
  .ratiom-single-post .reading,
  [data-page="seo-resource"] .reading,
  [data-page="seo-resource"] .legal-layout {
    width: calc(100% - 24px);
  }
}

/* Every top-level page section uses one of these two, in three explicit
   tiers (768/1024, matching the nav breakpoint used elsewhere in this
   theme) rather than a per-component fluid clamp() — see tokens.css. */
.section {
  padding-block: var(--section-padding-mobile);
}

.section-sm {
  padding-block: var(--space-lg);
}

.section--divided {
  border-top: 1px solid var(--color-border);
}

@media (min-width: 768px) {
  .section {
    padding-block: var(--section-padding-tablet);
  }

  .section-sm {
    padding-block: var(--space-xl);
  }
}

@media (min-width: 1024px) {
  .section {
    padding-block: var(--section-padding-desktop);
  }
}

/* Default: every page gets the full canonical nav-clearing offset.
   Pages whose first element is a full-bleed .hero opt out (below) since
   the hero owns its own offset internally so its dark background can
   still extend up behind the floating pill. Structural (:has), not a
   data-page allowlist, so any current or future template is covered
   automatically regardless of what first-child markup it uses. */
.site-main {
  padding-top: var(--nav-content-offset);
}

.site-main:has(> .hero) {
  padding-top: 0;
}

/* A generic .section used as the very first element inside .site-main
   (blog archive/search/single) would otherwise stack its own rhythm
   padding on top of .site-main's offset. Its top half is redundant —
   .site-main already supplies the correct gap — so only that first
   instance drops it; normal mid-page .section spacing is untouched. */
.site-main > .section:first-child {
  padding-top: 0;
}

/* Canonical eyebrow-to-H1 spacer for every non-hero page opener (legal
   pages, 404, single article, plain WordPress pages) — keeps the gap
   equal to the hero's own eyebrow-to-H1 gap (--space-md) instead of
   inheriting .stack's smaller generic 1rem default, so the H1 sits the
   same visual distance below the nav on every template. */
.page-intro {
  --stack-gap: var(--space-md);
}

/* Plain WordPress pages have no eyebrow above the H1, so there is no
   preceding sibling for --stack-gap to create space against. Add the
   equivalent breathing room directly so the heading isn't flush against
   the nav offset. */
.page-intro > h1:first-child {
  margin-top: var(--space-lg);
}

.legal-layout {
  display: grid;
  gap: var(--space-lg);
  padding-block: var(--space-lg) var(--space-2xl);
}

.legal-sidebar {
  display: none;
}

.legal-article {
  display: grid;
  gap: var(--space-xl);
  max-width: var(--reading-width);
}

.legal-section {
  scroll-margin-top: var(--nav-content-offset);
}

@media (min-width: 980px) {
  .legal-layout {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: var(--space-2xl);
  }

  .legal-sidebar {
    display: block;
  }
}

/* components.css */

/* ---------- Skip link ---------- */
.skip-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: var(--z-overlay);
  transform: translateY(-150%);
  padding: 0.75rem 1.1rem;
  color: var(--color-white);
  background: var(--color-dark);
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  transform: translateY(0);
}

/* ---------- Header ---------- */
/*
  Floating pill nav, detached from the viewport edge on every page —
  dark glass surface regardless of the page background underneath.
  .site-header is the pill itself (fixed, centred, capped width) so
  there is no separate full-bleed bar behind it. Scroll state (toggled
  in assets/js/navigation.js at scrollY > 24) nudges the top offset in
  a few px and deepens the surface — subtle, and since the pill is
  fixed, it never shifts page layout.
*/
.site-header {
  position: fixed;
  top: var(--nav-pill-top);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-header);
  width: calc(100% - 48px);
  max-width: var(--nav-pill-max-width);
  height: var(--nav-pill-height);
  background: var(--nav-pill-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--nav-pill-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--nav-pill-shadow);
  transition:
    top var(--duration-normal) var(--ease-standard),
    background-color var(--duration-normal) var(--ease-standard),
    box-shadow var(--duration-normal) var(--ease-standard);
}

.site-header.is-scrolled {
  top: var(--nav-pill-top-scrolled);
  background: var(--nav-pill-bg-scrolled);
  box-shadow: var(--nav-pill-shadow-scrolled);
}

/* WordPress admin toolbar: 32px desktop / 46px at its own 782px
   breakpoint. Fixed elements sit under it unless pushed down to match. */
body.admin-bar .site-header {
  top: calc(var(--nav-pill-top) + var(--wp-admin-bar-height));
}

@media (max-width: 782px) {
  body.admin-bar .site-header {
    top: calc(var(--nav-pill-top) + var(--wp-admin-bar-height-mobile));
  }
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.4rem + 1.8vw, 1.75rem);
  width: 100%;
  height: 100%;
  padding: 12px 14px 12px 22px;
}

.logo {
  display: inline-flex;
  flex: none;
  align-items: center;
  color: var(--color-white);
  text-decoration: none;
}

.logo__mark {
  display: inline-flex;
  align-items: baseline;
  color: var(--color-white);
  font-size: clamp(2rem, 1.85rem + 0.45vw, 2.35rem);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

.logo__mark span {
  color: var(--color-primary-bright);
}

.logo__image {
  display: block;
  width: auto;
  max-width: 100%;
  height: clamp(1.75rem, 1.65rem + 0.35vw, 2rem);
  aspect-ratio: 142 / 31;
  flex: none;
}

.site-nav {
  display: none;
  align-items: center;
  gap: 0.2rem;
  min-width: 0;
  margin-inline-start: auto;
}

.site-nav a {
  position: relative;
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  padding-inline: 0.85rem;
  border-radius: var(--radius-pill);
  color: rgb(255 255 255 / 0.76);
  font-size: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  letter-spacing: -0.006em;
  text-decoration: none;
  transition:
    color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard);
}

.site-nav a:hover {
  color: var(--color-white);
  background: rgb(255 255 255 / 0.08);
}

.site-nav a[aria-current="page"] {
  color: var(--color-white);
  font-weight: var(--font-weight-semibold);
  background: rgb(255 255 255 / 0.1);
}

/* Element-qualified so this reliably beats .button's own
   `display: inline-flex` (equal class specificity, but .button is
   declared later in the cascade and would otherwise win). */
a.site-header__cta {
  display: none;
  flex: none;
}

.legal-nav a {
  color: var(--color-muted);
  font-size: var(--step--1);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.legal-links a[aria-current="page"] {
  color: var(--color-ink);
  box-shadow: inset 0 -2px 0 var(--color-primary-bright);
}

.nav-toggle {
  display: inline-grid;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  place-items: center;
  margin-inline-start: auto;
  padding: 0;
  color: var(--color-white);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.nav-toggle:hover {
  background: rgb(255 255 255 / 0.08);
}

.nav-toggle__icon {
  position: relative;
  width: 1.15rem;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.nav-toggle__icon::before,
.nav-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition:
    top var(--duration-normal) var(--ease-emphasized),
    transform var(--duration-normal) var(--ease-emphasized);
}

.nav-toggle__icon::before {
  top: -0.4rem;
}

.nav-toggle__icon::after {
  top: 0.4rem;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before {
  top: 0;
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after {
  top: 0;
  transform: rotate(-45deg);
}

.mobile-nav {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 100%;
  max-height: calc(100vh - var(--header-height) - var(--space-md));
  overflow-y: auto;
  background: var(--nav-pill-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--nav-pill-border);
  border-radius: var(--nav-pill-dropdown-radius);
  box-shadow: var(--nav-pill-shadow);
}

.mobile-nav.is-open {
  display: block;
  animation: nav-panel-in 220ms var(--ease-emphasized) both;
}

.mobile-nav__inner {
  display: grid;
  width: min(100% - (var(--gutter) * 2), var(--container-hero-wide));
  margin-inline: auto;
  padding-block: 0.5rem 1.25rem;
}

.mobile-nav a:not(.mobile-nav__cta) {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--header-border);
  color: rgb(255 255 255 / 0.72);
  font-size: var(--step-1);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

.mobile-nav a:not(.mobile-nav__cta):hover,
.mobile-nav a:not(.mobile-nav__cta)[aria-current="page"] {
  color: var(--color-white);
}

.mobile-nav a:not(.mobile-nav__cta):last-of-type {
  border-bottom: 0;
}

.mobile-nav__cta {
  width: 100%;
  margin-top: 0.85rem;
}

@keyframes nav-panel-in {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Buttons ---------- */
/*
  One button component for the whole site — nav, hero, pricing,
  contact form and legal pages all inherit this. Colour comes from a
  variant class (primary / secondary / ghost); .button--compact resizes
  it for dense contexts like the nav bar. Geometry, easing and shadow
  are tokenised in tokens.css so every instance stays identical.
*/
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  height: var(--btn-height);
  min-height: 44px;
  min-width: var(--btn-min-width);
  border: 1px solid transparent;
  border-radius: var(--btn-radius);
  padding-inline: var(--btn-padding-x);
  font-family: var(--font-body);
  font-size: var(--btn-font-size);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--btn-duration) var(--btn-ease),
    border-color var(--btn-duration) var(--btn-ease),
    color var(--btn-duration) var(--btn-ease),
    filter var(--btn-duration) var(--btn-ease),
    transform var(--btn-duration) var(--btn-ease);
}

.button--compact {
  height: var(--btn-height-compact);
  min-height: 0;
  min-width: 0;
  padding-inline: var(--btn-padding-x-compact);
  font-size: var(--btn-font-size-compact);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0;
}

@media (max-width: 599px) {
  .button,
  .button--compact {
    height: var(--btn-height-mobile);
  }
}

.button:hover {
  transform: translateY(-2px);
  transition-duration: var(--btn-duration-hover);
}

.button:active {
  transform: translateY(0) scale(0.985);
  transition-duration: var(--btn-duration-hover);
}

.button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary-bright);
}

.button:disabled,
.button[aria-disabled="true"] {
  opacity: 0.45;
  transform: none;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary — solid lime fill, the one dominant action per section */
.button--primary {
  color: var(--color-dark);
  background: var(--color-primary-bright);
  box-shadow: var(--btn-shadow-resting);
}

.button--primary:hover {
  filter: brightness(1.06);
  box-shadow: var(--btn-shadow-hover);
}

.button--primary:active {
  filter: brightness(0.97);
}

/* Secondary — transparent with a hairline border, text matches the
   surrounding copy. Automatically lightens on dark surfaces (header,
   mobile nav, hero, pricing) so a single class works everywhere. */
.button--secondary {
  color: var(--color-ink);
  background: transparent;
  border-color: var(--color-border-strong);
}

.button--secondary:hover {
  border-color: var(--color-ink-soft);
  background: var(--color-surface-soft);
}

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

.hero .button--secondary,
.pricing .button--secondary,
.dark-panel .button--secondary {
  color: rgb(255 255 255 / 0.92);
  border-color: rgb(255 255 255 / 0.28);
}

.hero .button--secondary:hover,
.pricing .button--secondary:hover,
.dark-panel .button--secondary:hover {
  color: var(--color-white);
  background: rgb(255 255 255 / 0.06);
  border-color: rgb(255 255 255 / 0.5);
}

.hero .button--secondary:active,
.pricing .button--secondary:active,
.dark-panel .button--secondary:active {
  background: rgb(255 255 255 / 0.1);
}

.hero .button:focus-visible,
.pricing .button:focus-visible,
.dark-panel .button:focus-visible,
.site-header .button:focus-visible,
.mobile-nav .button:focus-visible {
  box-shadow: 0 0 0 2px var(--color-dark), 0 0 0 4px var(--color-primary-bright);
}

/* Ghost — typography only, reserved for low-emphasis actions */
.button--ghost {
  color: var(--color-ink);
  background: transparent;
  border-color: transparent;
}

.button--ghost:hover {
  background: var(--color-surface-soft);
  transform: none;
}

.button--ghost:active {
  background: var(--color-surface-muted);
  transform: scale(0.985);
}

.hero .button--ghost,
.pricing .button--ghost,
.dark-panel .button--ghost {
  color: rgb(255 255 255 / 0.85);
}

.hero .button--ghost:hover,
.pricing .button--ghost:hover,
.dark-panel .button--ghost:hover {
  color: var(--color-white);
  background: rgb(255 255 255 / 0.08);
}

/* White — solid light fill for a secondary CTA on dark surfaces where
   the ghost treatment doesn't read with enough contrast. */
.button--white {
  color: var(--color-dark);
  background: var(--color-white);
  border-color: var(--color-white);
  box-shadow: var(--btn-shadow-resting);
}

.button--white:hover {
  background: var(--color-surface-soft);
  border-color: var(--color-surface-soft);
  box-shadow: var(--btn-shadow-hover);
}

.button--white:active {
  background: var(--color-surface-muted);
  border-color: var(--color-surface-muted);
}

/* Nav CTA — sitewide lime fill (.button--primary), resized to fit the
   pill header and mobile menu. Colour/hover/active/focus states are
   inherited from .button--primary so it stays identical to every
   other primary action on the site. */
.site-header .button--primary,
.mobile-nav .button--primary {
  height: 42px;
  min-height: 0;
  min-width: 0;
  padding-inline: 22px;
  font-size: 0.9375rem;
  font-weight: 700;
}

@media (max-width: 599px) {
  .button--block-mobile {
    width: 100%;
  }
}

/* ---------- Text link (arrow) ----------
   Lightweight secondary CTA for pointing between pages — e.g. the
   homepage process preview linking through to the full Process page. */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: var(--space-lg);
  color: var(--color-ink);
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
  text-decoration-color: var(--color-border-strong);
  text-underline-offset: 0.2em;
  transition: gap var(--duration-fast) var(--ease-standard), text-decoration-color var(--duration-fast) var(--ease-standard);
}

.text-link span {
  color: var(--color-primary);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.text-link:hover {
  gap: 0.65rem;
  text-decoration-color: var(--color-primary);
}

.text-link:hover span {
  transform: translateX(2px);
}

/* Inline usage alongside a button (e.g. hero actions row) rather than
   the standalone "see more" placement below a grid — same link, no
   top margin, sized to sit on the button's baseline. */
.hero__actions .text-link {
  margin-top: 0;
  font-size: var(--btn-font-size);
}

/* Dark-surface variant — same link, lightened for the hero/dark-panel
   backgrounds, matching the .button--ghost / .eyebrow overrides above. */
.hero .text-link {
  color: rgb(255 255 255 / 0.82);
  text-decoration-color: rgb(255 255 255 / 0.32);
}

.hero .text-link span {
  color: var(--color-primary-bright);
}

.hero .text-link:hover {
  color: var(--color-white);
  text-decoration-color: var(--color-primary-bright);
}

.hero .text-link:focus-visible {
  outline-color: var(--color-primary-bright);
}

/* ---------- Eyebrow ---------- */
.eyebrow {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 0.55rem;
  color: var(--color-muted);
  font-size: var(--step--1);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.eyebrow__dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--color-primary-bright);
  flex: none;
}

.dark-panel .eyebrow,
.hero .eyebrow {
  color: rgb(255 255 255 / 0.62);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  color: var(--color-white);
  background: var(--color-dark);
  overflow: hidden;
  isolation: isolate;
  padding-block: var(--nav-content-offset) var(--space-xl);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(60% 55% at 20% 25%, rgb(195 255 51 / 0.09), transparent 70%);
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.hero__visual {
  position: relative;
  z-index: 1;
  order: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: auto;
}

.hero__layout {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
  gap: var(--space-xl);
}

/* Hero gets a wider stage than the rest of the site so the video can
   carry more visual weight — scoped here, not a change to --container-max. */
.hero .container {
  width: min(100% - (var(--gutter) * 2), var(--container-hero-wide));
}

/* ---------- Video embed: shared cover + play control ----------
   Used by the hero demo video (16:9) and the founder review cards
   (9:16). Orientation is set by a modifier; everything else —
   frame, cover treatment, play button, label and duration — is
   shared so both contexts stay visually identical. */
.video-embed {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.08);
  border-radius: var(--radius-lg);
  background: var(--color-dark-soft);
  box-shadow: var(--shadow-dark-lg);
}

/* Hero video only — shows a real annotated-review mockup behind the
   scrim instead of a plain gradient, so the cover reads as the actual
   product rather than a generic placeholder screenshot. */
.video-embed--annotated .video-embed__cover {
  background:
    linear-gradient(180deg, rgb(12 13 10 / 0.55), rgb(12 13 10 / 0.72) 60%, rgb(12 13 10 / 0.85)),
    url("../images/mockups/annotated-landing-page.svg");
  background-size: cover, cover;
  background-position: center, center;
}

.video-embed--16-9 {
  aspect-ratio: 16 / 9;
}

/* Fills whichever aspect ratio the parent .video-embed modifier sets
   (--16-9 or --9-16) — aspect-ratio support is universal now, so this
   no longer needs its own padding-top hack. */
.video-embed__frame {
  position: absolute;
  inset: 0;
}

.video-embed__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.video-embed--9-16 {
  aspect-ratio: 9 / 16;
}

.video-embed__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  background: var(--color-dark);
}

.video-embed__cover {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: var(--space-md);
  border: 0;
  color: var(--color-white);
  cursor: pointer;
  background:
    radial-gradient(120% 90% at 18% 12%, rgb(195 255 51 / 0.1), transparent 62%),
    linear-gradient(165deg, var(--color-dark-soft), var(--color-dark));
}

/* Sits over a real preview <img> rather than a solid fill — a light
   scrim keeps the play button legible without hiding the photo. */
.video-embed__cover--image {
  background: linear-gradient(180deg, rgb(12 13 10 / 0.05), rgb(12 13 10 / 0.4) 75%, rgb(12 13 10 / 0.55));
}

.video-embed__cover:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-dark), inset 0 0 0 4px var(--color-primary-bright);
}

.video-embed__play {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  flex: none;
  border: 1px solid rgb(255 255 255 / 0.32);
  border-radius: 50%;
  background: rgb(255 255 255 / 0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.video-embed__play svg {
  margin-left: 2px;
}

.video-embed__cover:hover .video-embed__play {
  background: rgb(255 255 255 / 0.16);
  border-color: rgb(255 255 255 / 0.55);
  transform: scale(1.05);
}

.video-embed__tag {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  max-width: calc(100% - var(--space-md) * 2);
  padding: 0.35rem 0.75rem;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: var(--radius-pill);
  background: rgb(12 13 10 / 0.45);
  color: rgb(255 255 255 / 0.88);
  font-size: var(--step--1);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.005em;
  text-align: left;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.video-embed__duration {
  position: absolute;
  right: var(--space-sm);
  bottom: var(--space-sm);
  color: rgb(255 255 255 / 0.5);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}

.video-embed.is-playing .video-embed__cover {
  display: none;
}

/* Placeholder embeds awaiting a real video source — same cover chrome,
   rendered as a plain non-interactive <div> (no play button, no duration)
   so nothing invites a tap that would do nothing. */
.video-embed__cover--static {
  cursor: default;
}

/* ---------- Hero demo video ---------- */
.demo-video {
  width: 100%;
  max-width: min(100%, 36rem);
  margin-inline: auto;
  transition: transform 320ms var(--ease-standard);
}

.demo-video:hover {
  transform: translateY(-3px);
}

.demo-video .video-embed {
  transition: box-shadow 320ms var(--ease-standard);
}

.demo-video:hover .video-embed {
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.18), 0 24px 48px -12px rgb(0 0 0 / 0.42), 0 56px 108px -24px rgb(0 0 0 / 0.5);
}

@media (max-width: 599px) {
  .demo-video {
    max-width: 100%;
  }
}

.hero__panel {
  position: relative;
  z-index: 1;
  order: 1;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 40rem;
  margin-inline: 0;
}

.hero__inner .eyebrow {
  align-items: flex-start;
  max-width: 27rem;
  margin: 0;
  color: rgb(255 255 255 / 0.72);
  font-size: var(--step-0);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  letter-spacing: -0.005em;
  text-transform: none;
}

.hero__inner .eyebrow .eyebrow__dot {
  margin-top: 0.5em;
}

.hero__inner h1 {
  display: grid;
  margin-block: var(--space-md) 0;
  font-size: clamp(2.9rem, 2.05rem + 3.8vw, 5.05rem);
  line-height: 1.02;
  max-width: none;
}

.hero__line {
  display: block;
}

/* Homepage headline is one flowing sentence rather than a set of
   deliberately short, pre-broken lines (see process/about/blog hero,
   which keep .hero__line + nowrap for that pattern) — so it needs its
   own sizing that wraps naturally and stays clear of the media column. */
.hero__inner h1.hero__heading--flow {
  max-width: 17ch;
  font-size: clamp(2.85rem, 2.05rem + 2.85vw, 4.5rem);
  line-height: 1.06;
  text-wrap: balance;
}

.hero__line--space {
  margin-top: 0.22em;
}

.hero__line--accent {
  margin-top: 0.3em;
  font-size: 0.88em;
  font-weight: var(--font-weight-regular);
  color: var(--color-primary-bright);
}

.hero__line--tight {
  margin-top: 0.22em;
}

.hero__line--strong {
  margin-top: 0.22em;
  font-weight: var(--font-weight-bold);
}

.hero__lede {
  margin-top: 1.5rem;
  font-size: var(--step-1);
  line-height: 1.65;
  color: rgb(255 255 255 / 0.72);
  max-width: 27.5rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2.25rem;
}

.hero__proof {
  display: grid;
  gap: var(--space-sm);
  order: 3;
  max-width: 40rem;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-dark-border);
}

.hero__trust-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero__trust-strip li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.35rem 0;
  color: var(--color-white);
  opacity: 0.86;
  font-size: 0.8125rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0;
  line-height: 1.25;
}

.hero__trust-strip li::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--color-primary-bright);
}

@media (min-width: 600px) {
  .hero__trust-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.65rem;
  }
}

.hero__note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  color: rgb(255 255 255 / 0.6);
  font-size: 0.8125rem;
}

.hero__note-dot {
  width: 0.3rem;
  height: 0.3rem;
  margin-top: 0.4em;
  border-radius: 50%;
  background: var(--color-primary-bright);
  flex: none;
}

.hero__note-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.hero__note-name {
  color: var(--color-white);
  font-weight: var(--font-weight-medium);
}

.hero__note-role {
  color: rgb(255 255 255 / 0.55);
}

/* ---------- Homepage hero — enlarged video treatment ----------
   The homepage hero widens the video into the primary visual element.
   Scoped to [data-page="home"] because process/about/blog reuse the
   same .hero/.demo-video/.video-embed markup and must stay untouched. */
[data-page="home"] .hero {
  padding-block: var(--nav-content-offset) clamp(6rem, 5.2rem + 2vw, 7.5rem);
}

[data-page="home"] .hero .container {
  max-width: 85rem;
}

[data-page="home"] .hero__layout {
  gap: clamp(2.75rem, 2.2rem + 1.6vw, 3.5rem);
}

[data-page="home"] .hero__actions {
  gap: 1rem;
  margin-top: 2.5rem;
}

[data-page="home"] .hero__proof {
  padding-top: var(--space-sm);
}

[data-page="home"] .demo-video {
  position: relative;
  max-width: 100%;
}

/* Restrained lime ambient glow — low opacity, heavy blur, clipped by
   .hero's own overflow:hidden so it can never cause horizontal scroll. */
[data-page="home"] .demo-video::before {
  content: "";
  position: absolute;
  inset: -14%;
  z-index: -1;
  background: radial-gradient(60% 60% at 50% 45%, rgb(195 255 51 / 0.16), transparent 72%);
  filter: blur(48px);
  pointer-events: none;
}

[data-page="home"] .hero .video-embed {
  border-color: rgb(255 255 255 / 0.12);
}

@media (max-width: 899px) {
  [data-page="home"] .hero .video-embed {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-dark-sm);
  }
}

@media (min-width: 900px) {
  .hero {
    min-height: min(96svh, 50rem);
  }

  .hero__line {
    white-space: nowrap;
  }

  .hero__layout {
    grid-template-columns: minmax(0, 1.48fr) minmax(12rem, 0.52fr);
    gap: var(--space-lg) clamp(2.75rem, 5.5vw, 5rem);
  }

  .hero__visual {
    grid-column: 2;
    grid-row: 1;
    min-height: auto;
    padding: 0;
  }

  .demo-video {
    max-width: 22rem;
  }

  /* Homepage hero is a true 40/60 copy-to-video split, top-aligned so
     the heading and video frame share a start line (Stripe/Linear-style
     opening) instead of both being vertically centred against the taller
     video column. Floors on both tracks stop either side collapsing to
     narrow, card-like proportions before the ratio has room to apply. */
  [data-page="home"] .hero__layout {
    grid-template-columns: minmax(22rem, 0.4fr) minmax(22rem, 0.6fr);
    column-gap: clamp(4rem, 5vw, 5rem);
    align-items: start;
  }

  [data-page="home"] .demo-video {
    max-width: 100%;
  }

  /* Nudges the video down to start level with the H1 rather than the
     eyebrow above it — sized from the eyebrow's own line-height plus its
     gap to the H1 so it stays correct if either value changes. */
  [data-page="home"] .hero__visual {
    margin-top: calc(1.4 * var(--step-0) + var(--space-md));
  }

  .hero__panel {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    padding: 0;
  }

  .hero__panel .hero__inner {
    width: auto;
    margin-inline: 0;
  }

  .hero__inner {
    max-width: 50rem;
  }

  .hero__proof {
    grid-column: 1;
    grid-row: 2;
  }
}

/* Tablet band only: keep the CTA pair on one line without letting the
   video column shrink to make room (video should stay dominant here).
   Extends to 1279px because the true 40% copy column (vs. the old ~43%)
   is a touch tighter, so the pinch point sits a little higher now. */
@media (min-width: 900px) and (max-width: 1279px) {
  [data-page="home"] .hero__actions {
    flex-wrap: nowrap;
    gap: 0.75rem;
  }

  [data-page="home"] .hero__actions .button {
    min-width: 0;
    padding-inline: 1.5rem;
  }
}

@media (min-width: 1180px) {
  .hero__layout {
    grid-template-columns: minmax(0, 1.28fr) minmax(16rem, 0.72fr);
    column-gap: clamp(3.5rem, 6vw, 6rem);
  }

  .demo-video {
    max-width: 30rem;
  }

  /* Homepage's 40/60 split, gap and video width (set at 900px) already
     scale fluidly via fr/clamp() — no separate override needed here. */
}

/* ---------- Process hero — enlarged video treatment ----------
   Reuses the homepage hero's own container width, column split, gap
   and vertical nudge (see the matching [data-page="home"] rules above)
   so the video box renders at the exact same size as the homepage's,
   without reusing homepage-only copy or accents. Scoped to
   [data-page="process"] so the default .hero/.demo-video markup used
   elsewhere (about, blog) stays untouched. */
[data-page="process"] .demo-video {
  max-width: 100%;
}

/* main.min.css strips the alpha from .video-embed's base border color
   (see build note), and the homepage only fixes that inside its own
   [data-page="home"] scope — restate it here so process doesn't fall
   back to a solid white border. */
[data-page="process"] .hero .video-embed {
  border-color: rgb(255 255 255 / 0.12);
}

@media (max-width: 899px) {
  [data-page="process"] .hero .video-embed {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-dark-sm);
  }
}

@media (min-width: 900px) {
  [data-page="process"] .hero .container {
    max-width: 85rem;
  }

  /* Same 40/60 split, gap and top alignment as the homepage hero so the
     video box matches it exactly at every breakpoint. */
  [data-page="process"] .hero__layout {
    grid-template-columns: minmax(22rem, 0.4fr) minmax(22rem, 0.6fr);
    column-gap: clamp(4rem, 5vw, 5rem);
    align-items: start;
  }

  /* Nudges the video down to start level with the H1 rather than the
     eyebrow above it — identical formula to the homepage hero. */
  [data-page="process"] .hero__visual {
    margin-top: calc(1.4 * var(--step-0) + var(--space-md));
  }

  /* The narrower ~40% copy column no longer fits the pre-broken
     .hero__line pairs (e.g. "Choose, submit," / "receive.") at the
     default size on one line at every width between 900-1279px — rather
     than tuning a font-size clamp to the exact fit of a fluid column
     (fragile across the tablet band), let each line wrap naturally
     within the column so it never overflows into the video. */
  [data-page="process"] .hero__line {
    white-space: normal;
  }

  [data-page="process"] .hero__inner h1 {
    font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.4rem);
  }
}

/* ---------- Timeline (process) ---------- */
.timeline {
  position: relative;
  display: grid;
  gap: 0;
  list-style: none;
  padding: 0;
  margin-top: var(--space-xl);
}

.timeline__item {
  position: relative;
  display: grid;
  gap: var(--space-xs) var(--space-md);
  grid-template-columns: auto 1fr;
  align-items: baseline;
  padding-block: var(--space-lg);
}

.timeline__item:first-child {
  padding-top: 0;
}

.timeline__item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-border);
}

.timeline__marker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.timeline__icon {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.timeline__icon svg {
  width: 1.1rem;
  height: 1.1rem;
}

.timeline__index {
  font-size: var(--step-3);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--color-border-strong);
}

.timeline__marker,
.timeline__body {
  transition: transform var(--duration-fast) var(--ease-standard);
}

.timeline__item:hover .timeline__marker,
.timeline__item:hover .timeline__body {
  transform: translateY(-2px);
}

.timeline__body h3 {
  margin-bottom: var(--space-2xs);
}

.timeline__body p {
  max-width: 46ch;
}

@media (min-width: 760px) {
  .timeline::before {
    content: "";
    position: absolute;
    top: 1.25rem;
    bottom: 1.25rem;
    left: 1.25rem;
    width: 1px;
    background: var(--color-border);
  }

  .timeline__item {
    grid-template-columns: 6rem minmax(0, 1fr) minmax(0, 22rem);
    align-items: start;
  }

  .timeline__item:not(:last-child)::after {
    left: 7.25rem;
  }

  .timeline__marker {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .timeline__index {
    font-size: var(--step-4);
  }

  /* The third 22rem track exists for an optional .timeline__preview image.
     Only step 1 on the Process page has one — every other item (and the
     whole About experience timeline) was reserving 22rem of empty space,
     squeezing body copy to ~195px at 768px. Reserve the track only when
     a preview is actually present. Browsers without :has() keep the old
     reserved-column behaviour. */
  .timeline__item:not(:has(.timeline__preview)) {
    grid-template-columns: 6rem minmax(0, 1fr);
  }
}

/* ---------- Pricing ---------- */
.pricing {
  color: var(--color-white);
  background: var(--color-dark);
}

.pricing__panel {
  display: grid;
  justify-content: center;
  gap: 1.75rem;
  margin-top: var(--space-xl);
}

.pricing__plan {
  position: relative;
  display: grid;
  grid-template-rows:
    minmax(4.5rem, auto)  /* package header */
    minmax(4rem, auto)    /* description */
    auto                  /* price */
    auto                  /* feature list */
    1fr                   /* flexible spacer */
    auto;                 /* CTA */
  row-gap: var(--space-md);
  padding: clamp(1.85rem, 1.35rem + 2vw, 2.75rem);
  border: 1px solid var(--color-dark-border);
  border-radius: var(--radius-lg);
  background: rgb(255 255 255 / 0.025);
  transition:
    transform var(--duration-normal) var(--ease-standard),
    border-color var(--duration-normal) var(--ease-standard),
    background-color var(--duration-normal) var(--ease-standard),
    box-shadow var(--duration-normal) var(--ease-standard);
}

.pricing__plan:hover {
  transform: translateY(-3px);
  border-color: rgb(255 255 255 / 0.24);
  background: rgb(255 255 255 / 0.045);
  box-shadow: var(--shadow-dark-sm);
}

.pricing__plan--featured {
  width: min(100%, 28rem);
  margin-inline: auto;
  border-color: rgb(195 255 51 / 0.32);
  background: rgb(195 255 51 / 0.04);
  box-shadow: 0 0 0 1px rgb(195 255 51 / 0.06), 0 32px 64px -24px rgb(195 255 51 / 0.16);
}

.pricing__plan--featured:hover {
  border-color: rgb(195 255 51 / 0.5);
  background: rgb(195 255 51 / 0.055);
  box-shadow: 0 0 0 1px rgb(195 255 51 / 0.1), 0 32px 64px -20px rgb(195 255 51 / 0.22);
}

.pricing__plan > .button {
  grid-row: 6;
  width: 100%;
}

.pricing__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.price {
  font-size: var(--step-5);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}

.check-list {
  display: grid;
  gap: 1.05rem;
  padding: 0;
  list-style: none;
}

.check-list li {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
  color: rgb(255 255 255 / 0.78);
}

.check-list li::before {
  content: "";
  width: 0.9rem;
  height: 1px;
  margin-top: -0.05rem;
  flex: 0 0 auto;
  background: var(--color-primary-bright);
}

/* Light-surface variant — used outside the dark pricing panel */
.check-list--light li {
  color: var(--color-ink-soft);
}

.check-list--light li::before {
  background: var(--color-primary);
}


/* ---------- Footer ---------- */
.site-footer {
  color: var(--color-white);
  border-top: 1px solid var(--color-dark-border);
  background: var(--color-dark);
}

.site-footer__row {
  border-top: 1px solid var(--color-dark-border);
}

/* Section 1 — brand & contact */
.site-footer__brand {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: var(--space-lg);
  column-gap: clamp(5rem, 3rem + 6vw, 7.5rem);
  align-items: start;
  border-top: none;
  padding-block: 2rem var(--space-lg);
}

.site-footer__about {
  max-width: 30rem;
}

.site-footer__logo {
  display: inline-flex;
  color: var(--color-white);
  text-decoration: none;
}

.site-footer__logo-mark {
  font-size: clamp(2.7rem, 2.45rem + 0.8vw, 3.25rem);
}

.site-footer__logo-image {
  height: clamp(2.7rem, 2.45rem + 0.8vw, 3.25rem);
}

.site-footer__lede {
  margin-top: var(--space-sm);
  max-width: 28rem;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  color: rgb(255 255 255 / 0.82);
}

.site-footer__note {
  margin-top: var(--space-2xs);
  max-width: 30rem;
  font-size: 0.9375rem;
  color: rgb(255 255 255 / 0.6);
  line-height: 1.65;
}

.site-footer__note a {
  color: rgb(255 255 255 / 0.85);
}

.site-footer__connect {
  justify-self: start;
  align-self: start;
}

.site-footer__label {
  margin: 0;
  color: rgb(255 255 255 / 0.56);
  font-size: 0.8125rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.site-footer__social {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.site-footer__social a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-sm);
  color: rgb(255 255 255 / 0.82);
  text-decoration: none;
  transition:
    color 180ms var(--ease-standard),
    background-color 180ms var(--ease-standard),
    transform 180ms var(--ease-standard);
}

.site-footer__social svg {
  display: block;
  width: 1.375rem;
  height: 1.375rem;
}

.site-footer__social a:hover {
  color: var(--color-primary-bright);
  background: rgb(183 255 37 / 0.08);
  transform: translateY(-1px);
}

.site-footer__social a:focus-visible,
.footer-nav a:focus-visible,
.site-footer__legal-nav a:focus-visible,
.site-footer__signature a:focus-visible {
  outline: 2px solid var(--color-primary-bright);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

/* Section 2 — payments */
.site-footer__payments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-md);
}

.site-footer__payments-label {
  margin: 0;
  color: rgb(255 255 255 / 0.56);
  font-size: var(--step--1);
}

.site-footer__payments-label span {
  color: var(--color-white);
  font-weight: var(--font-weight-semibold);
}

.card-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.card-logo {
  display: inline-flex;
  min-width: 3.25rem;
  height: 2.1rem;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 0.35rem;
  padding-inline: 0.55rem;
  color: rgb(255 255 255 / 0.68);
  background: rgb(255 255 255 / 0.04);
  font-size: 0.75rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.01em;
  line-height: 1;
  opacity: 0.9;
}

.card-logo--visa {
  color: #ffffff;
  font-style: italic;
  letter-spacing: 0.02em;
}

.card-logo--mastercard {
  position: relative;
  min-width: 4.2rem;
  color: transparent;
}

.card-logo--mastercard::before,
.card-logo--mastercard::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  transform: translateY(-50%);
}

.card-logo--mastercard::before {
  left: 1.1rem;
  background: #eb001b;
}

.card-logo--mastercard::after {
  left: 1.75rem;
  background: rgb(247 158 27 / 0.9);
}

.card-logo--amex {
  background: #2e77bb;
  border-color: #2e77bb;
  color: var(--color-white);
}

.card-logo--apple,
.card-logo--google {
  min-width: 4.75rem;
  font-weight: var(--font-weight-medium);
}

.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
}

/* Section 3 — legal */
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md) var(--space-lg);
  padding-block: var(--space-md);
}

.site-footer__legal-copy p {
  margin: 0;
  color: rgb(255 255 255 / 0.56);
  font-size: clamp(0.875rem, 0.86rem + 0.1vw, 0.9375rem);
}

.site-footer__legal-copy p + p {
  margin-top: 0.625rem;
}

.site-footer__signature a {
  color: rgb(255 255 255 / 0.6);
  font-weight: var(--font-weight-regular);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--duration-fast) var(--ease-standard);
}

.site-footer__signature a:hover {
  text-decoration-color: rgb(255 255 255 / 0.4);
}

.site-footer__legal-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.75rem;
}

.site-footer__legal-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: rgb(255 255 255 / 0.6);
  font-size: var(--step--1);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  opacity: 0.9;
  transition: opacity var(--duration-fast) var(--ease-standard);
}

.site-footer__legal-nav a:hover {
  opacity: 1;
  color: var(--color-white);
}

.site-footer__legal-nav a[aria-current="page"] {
  color: var(--color-white);
  opacity: 1;
}

/* ---------- Legal misc ---------- */
.legal-hero {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

/* .legal-hero also carries the generic .section-sm rhythm class for its
   bottom padding; its top half is redundant now that .site-main already
   supplies the full --nav-content-offset above it. */
.legal-hero.section-sm {
  padding-top: 0;
}

.legal-hero .reading,
.error-page .reading {
  width: min(100% - (var(--gutter) * 2), var(--container-max));
}

.legal-hero .reading > *,
.error-page .reading > * {
  max-width: var(--reading-width);
}

[data-page="seo-resource"] .legal-hero .reading {
  width: min(calc(100% - 48px), var(--nav-pill-max-width));
}

[data-page="seo-resource"] .legal-hero .reading > * {
  max-width: none;
}

@media (max-width: 767px) {
  [data-page="seo-resource"] .legal-hero .reading {
    width: calc(100% - 24px);
  }
}

.legal-nav {
  position: sticky;
  top: var(--nav-content-offset);
  display: grid;
  gap: var(--space-2xs);
}

.legal-nav a {
  padding-block: 0.2rem;
}

.legal-article h2 {
  margin-bottom: var(--space-sm);
}

.legal-article p + p,
.legal-article ul + p,
.legal-article p + ul {
  margin-top: var(--space-sm);
}

.notice {
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border-strong);
}

.notice p {
  color: var(--color-ink-soft);
}

/* Pre-launch flag for legal copy awaiting real confirmation (tax/VAT
   treatment, refund policy, governing law, analytics status, etc.) —
   kept visually distinct from the brand accent so it can't be mistaken
   for emphasis and can't accidentally ship unnoticed. Remove the .tbc
   wrapper once each bracketed placeholder is replaced with real copy. */
.tbc {
  background: rgb(180 130 0 / 0.14);
  color: #7a5900;
  border-radius: var(--radius-xs);
  padding: 0.05em 0.4em;
  font-weight: var(--font-weight-medium);
}

.cookie-panel {
  display: grid;
  gap: var(--space-md);
  padding-block: var(--space-sm);
}

.cookie-panel .cluster {
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
  justify-content: space-between;
}

.form-status {
  max-width: 46ch;
  color: var(--color-primary);
  font-size: var(--step--1);
  font-weight: var(--font-weight-medium);
}

.form-status:empty {
  display: none;
}

.toggle {
  display: inline-flex;
  width: 2.75rem;
  height: 1.5rem;
  align-items: center;
  padding: 0.2rem;
  border-radius: var(--radius-pill);
  background: var(--color-border-strong);
  flex: none;
}

.toggle[aria-pressed="true"] {
  background: var(--color-ink);
}

.toggle::before {
  content: "";
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--color-white);
  transition: transform var(--duration-normal) var(--ease-standard);
}

.toggle[aria-pressed="true"]::before {
  transform: translateX(1.25rem);
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav.is-open {
    animation: none;
  }

  .site-header,
  .nav-toggle__icon,
  .nav-toggle__icon::before,
  .nav-toggle__icon::after,
  .button {
    transition: none;
  }

  .button:hover,
  .button:active {
    transform: none;
  }

  .video-embed__play,
  .demo-video,
  .timeline__marker,
  .timeline__body,
  .deliverable-card,
  .faq__item summary svg {
    transition: none;
  }

  .video-embed__cover:hover .video-embed__play,
  .demo-video:hover,
  .timeline__item:hover .timeline__marker,
  .timeline__item:hover .timeline__body,
  .deliverable-card:hover {
    transform: none;
  }
}

/* Pill nav breakpoints: <768px mobile (hamburger), 768–1023px tablet
   (full nav, tighter spacing), ≥1024px desktop (full comfortable spacing). */
@media (max-width: 767px) {
  .site-header {
    top: var(--nav-pill-top-mobile);
    width: calc(100% - 24px);
    height: auto;
    min-height: var(--nav-pill-height-mobile);
    border-radius: var(--nav-pill-radius-mobile);
  }

  .site-header.is-scrolled {
    top: var(--nav-pill-top-mobile);
  }

  body.admin-bar .site-header {
    top: calc(var(--nav-pill-top-mobile) + var(--wp-admin-bar-height-mobile));
  }

  .site-header__inner {
    padding: 10px 10px 10px 20px;
  }
}

@media (min-width: 768px) {
  .site-nav {
    display: flex;
  }

  a.site-header__cta {
    display: inline-flex;
  }

  .nav-toggle {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .site-header__inner {
    gap: 0.75rem;
    padding-inline: 10px 18px;
  }

  .site-nav {
    gap: 0.1rem;
  }

  .site-nav a {
    padding-inline: 0.6rem;
  }

  .site-header .button--primary {
    padding-inline: 18px;
  }
}

@media (min-width: 760px) {
  .site-footer__brand {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    padding-block: 3rem var(--space-xl);
  }

  .site-footer__connect {
    justify-self: end;
  }
}

/* ==========================================================================
   SEO page system — service / package / resource / hub templates.
   Additive components only; everything below reuses existing tokens and
   the same border/radius/shadow language as the rest of the theme.
   ========================================================================== */

/* ---------- Breadcrumbs ---------- */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 var(--space-sm);
  padding: 0;
  list-style: none;
  color: var(--color-muted);
  font-size: var(--step--1);
}

.breadcrumbs li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.breadcrumbs a {
  color: var(--color-muted);
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: var(--color-border-strong);
  text-underline-offset: 0.2em;
}

.breadcrumbs__current {
  color: var(--color-ink-soft);
}

.breadcrumbs__sep {
  color: var(--color-border-strong);
}

/* ---------- SEO hero (reuses .legal-hero chrome — light, bordered, same
   section-sm rhythm as the legal pages) and package/service hero actions ---------- */
.seo-hero .lede {
  color: var(--color-ink-soft);
}

.seo-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: var(--space-sm);
}

/* ---------- Linked card variant — same chrome as .deliverable-card /
   .deliverables__grid, applied to an <a> for hub, related-content and
   review-area cards that link through to another page. ---------- */
a.deliverable-card {
  color: inherit;
  text-decoration: none;
}

a.deliverable-card:focus-visible {
  outline: none;
  box-shadow: var(--shadow-lg), 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary-bright);
}

.deliverable-card__eyebrow {
  color: var(--color-muted);
  font-size: var(--step--1);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.deliverable-card__link {
  margin-top: auto;
  padding-top: 0.5rem;
  color: var(--color-primary);
  font-size: var(--step--1);
  font-weight: var(--font-weight-medium);
}

/* ---------- FAQ groups (grouped FAQ page only — .faq__item/.faq__answer
   chrome is unchanged and still supplies the actual Q&A styling) ---------- */
.faq__group + .faq__group {
  margin-top: var(--space-lg);
}

.faq__group-title {
  margin: 0 0 var(--space-2xs);
  color: var(--color-muted);
  font-size: var(--step--1);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* ---------- Comparison table (package hub, pricing-model resource) ---------- */
.compare-table-wrap {
  margin-top: var(--space-xl);
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.compare-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}

.compare-table th,
.compare-table td {
  padding: 1rem 1.25rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.compare-table thead th {
  background: var(--color-surface-soft);
  color: var(--color-ink);
  font-size: var(--step--1);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
}

.compare-table tbody th {
  color: var(--color-ink);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.compare-table tbody td {
  color: var(--color-ink-soft);
}

.compare-table tr:last-child th,
.compare-table tr:last-child td {
  border-bottom: 0;
}

.compare-table td[data-highlight="true"],
.compare-table th[data-highlight="true"] {
  background: var(--color-primary-soft);
}

/* ---------- Footer nav columns ---------- */
.site-footer__nav-row {
  padding-block: var(--space-xl) var(--space-xl);
}

.footer-nav-grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}

.footer-nav-col__title {
  margin: 0 0 var(--space-sm);
  color: rgb(255 255 255 / 0.56);
  font-size: 0.8125rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.footer-nav {
  display: grid;
  gap: 0.72rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-nav a {
  display: inline-flex;
  align-items: flex-start;
  color: rgb(255 255 255 / 0.72);
  font-size: 0.9375rem;
  line-height: 1.45;
  text-decoration: none;
  opacity: 0.9;
  text-wrap: pretty;
  transition:
    color 180ms var(--ease-standard),
    opacity 180ms var(--ease-standard);
}

.footer-nav a:hover {
  opacity: 1;
  color: var(--color-primary-bright);
  text-decoration: none;
}

.footer-nav a[aria-current="page"] {
  color: var(--color-white);
  opacity: 1;
}

@media (min-width: 620px) {
  .footer-nav-grid {
    grid-template-columns: repeat(2, minmax(12rem, 1fr));
    gap: var(--space-xl) clamp(3rem, 7vw, 5.5rem);
  }
}

@media (min-width: 980px) {
  .footer-nav-grid {
    grid-template-columns:
      minmax(9rem, 0.9fr)
      minmax(10rem, 1fr)
      minmax(15rem, 1.45fr)
      minmax(9rem, 0.9fr);
    gap: clamp(3rem, 5vw, 5.25rem);
  }
}

@media (max-width: 767.98px) {
  .compare-table th,
  .compare-table td {
    padding: 0.85rem 1rem;
  }

  /* Footer nav columns: bring each link up to a ~44px touch target on
     mobile, mirroring the legal-nav treatment. Desktop density is kept
     by scoping to the mobile breakpoint only. */
  .footer-nav {
    gap: 0.25rem;
  }

  .footer-nav a {
    min-height: 2.75rem;
    align-items: center;
  }

  /* Scrolling-shadow affordance for the comparison table: covers scroll
     with the content (attachment: local) and reveal an edge shadow only
     while more columns exist in that direction — pure CSS, disappears at
     each end of the scroll automatically. Longhands only, so the base
     rule's solid surface background stays in effect. */
  .compare-table-wrap {
    background-image:
      linear-gradient(to right, var(--color-surface) 30%, rgb(255 255 255 / 0)),
      linear-gradient(to left, var(--color-surface) 30%, rgb(255 255 255 / 0)),
      radial-gradient(farthest-side at 0 50%, rgb(12 13 10 / 0.16), rgb(12 13 10 / 0)),
      radial-gradient(farthest-side at 100% 50%, rgb(12 13 10 / 0.16), rgb(12 13 10 / 0));
    background-position: 0 0, 100% 0, 0 0, 100% 0;
    background-repeat: no-repeat;
    background-size: 44px 100%, 44px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
  }
}

/* ---------- Editorial split (SEO pages) ----------
   Text/text two-column split for explanatory copy — same grid mechanics
   as .founder-note__grid, generalised for reuse. Replaces card grids for
   "explain the problem", "why it matters" and "scope" style sections. */
.editorial-split {
  display: grid;
  gap: var(--space-lg);
}

.editorial-split + .editorial-split {
  margin-top: var(--space-2xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--color-border);
}

.editorial-split__label {
  display: grid;
  gap: var(--space-sm);
  align-content: start;
}

.editorial-split__label .eyebrow {
  margin: 0;
}

.editorial-split__label h2 {
  font-size: var(--step-2);
}

.editorial-split__body {
  display: grid;
  gap: var(--space-sm);
  align-content: start;
}

.editorial-split__body p {
  max-width: 62ch;
}

.editorial-split__fact {
  margin-top: var(--space-xs);
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary-bright);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
}

.editorial-split__fact p {
  margin: 0;
  max-width: none;
  color: var(--color-ink-soft);
  font-size: var(--step--1);
}

.editorial-split__fact p + p {
  margin-top: 0.5rem;
}

@media (min-width: 860px) {
  .editorial-split {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    gap: clamp(3rem, 5vw, 5rem);
    align-items: start;
  }

  .editorial-split--reverse .editorial-split__label {
    order: 2;
  }

  .editorial-split--reverse .editorial-split__body {
    order: 1;
  }
}

/* ---------- Detailed checklist (SEO pages) ----------
   Row-based checklist with a checkmark badge, a title and a short
   explanation per row, grouped under an optional heading — distinct
   from .deliverable-card so "what's reviewed" doesn't reuse the same
   bordered-box grid as every other section. */
.checklist-detailed {
  margin-top: var(--space-xl);
  display: grid;
  gap: var(--space-xl);
}

.checklist-detailed__group-heading {
  margin: 0 0 var(--space-2xs);
  font-size: var(--step-0);
}

.checklist-detailed__group-intro {
  margin: 0 0 var(--space-sm);
  color: var(--color-muted);
  max-width: 56ch;
}

.checklist-detailed__rows {
  display: grid;
  border-top: 1px solid var(--color-border);
}

.checklist-detailed__row {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  column-gap: 1rem;
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--color-border);
}

.checklist-detailed__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  flex: none;
}

.checklist-detailed__mark svg {
  width: 0.75rem;
  height: 0.75rem;
}

/* Neutral tone — used for "common mistakes" style lists, where a green
   checkmark would read as endorsing the item rather than flagging it. */
.checklist-detailed__mark--neutral {
  background: var(--color-surface-muted);
  color: var(--color-ink-soft);
}

.checklist-detailed__title {
  margin: 0;
  color: var(--color-ink);
  font-weight: var(--font-weight-medium);
}

.checklist-detailed__desc {
  grid-column: 2;
  margin: 0.25rem 0 0;
  color: var(--color-ink-soft);
  font-size: var(--step--1);
  max-width: 52ch;
}

@media (min-width: 860px) {
  .checklist-detailed--columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-2xl);
  }
}

/* ---------- Feature rows (SEO pages) ----------
   Numbered, full-width editorial rows for deliverables/service
   components — same ghost-numeral language as .timeline__index, but a
   horizontal divided-row composition instead of a connected vertical
   line, so it reads as a distinct pattern from the process timeline. */
.feature-rows {
  margin-top: var(--space-xl);
  display: grid;
}

.feature-row {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--space-xs) var(--space-md);
  padding-block: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.feature-row:last-child {
  border-bottom: 1px solid var(--color-border);
}

.feature-row__number {
  font-size: var(--step-2);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--color-border-strong);
}

.feature-row__body h3 {
  margin-bottom: 0.4rem;
  font-size: var(--step-1);
}

.feature-row__body p {
  color: var(--color-ink-soft);
  max-width: 56ch;
}

.feature-row__detail {
  margin-top: 0.6rem;
  color: var(--color-muted);
  font-size: var(--step--1);
}

@media (min-width: 760px) {
  .feature-row {
    grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 18rem);
    align-items: start;
  }

  .feature-row__detail {
    grid-column: 3;
    margin-top: 0;
    padding-left: var(--space-md);
    border-left: 1px solid var(--color-border);
  }
}

/* ---------- Example panels (SEO pages) ----------
   Annotated, clearly-labelled hypothetical example findings. Reuses the
   left-accent-border card language from .about__quote--panel rather
   than the .deliverable-card box, so examples read as annotations, not
   another card grid. */
.example-panel-list {
  margin-top: var(--space-xl);
  display: grid;
  gap: 1.5rem;
}

.example-panel {
  padding: 1.75rem 2rem;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary-bright);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.example-panel__tag {
  display: inline-block;
  margin-bottom: 0.85rem;
  color: var(--color-muted);
  font-size: var(--step--1);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.example-panel__scenario {
  margin: 0 0 var(--space-sm);
  max-width: none;
  color: var(--color-ink);
  font-size: var(--step-0);
}

.example-panel dl {
  display: grid;
  gap: 0.2rem 0;
  margin: 0;
}

.example-panel dt {
  margin-top: 0.6rem;
  color: var(--color-primary);
  font-size: var(--step--1);
  font-weight: var(--font-weight-semibold);
}

.example-panel dd {
  margin: 0.15rem 0 0;
  color: var(--color-ink-soft);
  font-size: var(--step--1);
  max-width: 52ch;
}

@media (min-width: 760px) {
  .example-panel-list--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Comparison panel (SEO pages) ----------
   Generalised version of the homepage #fit yes/no comparison — reused
   as-is (.fit__grid/.fit__column/.fit-list) for any two-column
   comparison (human vs. automated, included vs. not included, package
   vs. package), with a neutral mark colour for non-judgemental pairs. */
.fit-list--neutral .fit-list__mark {
  color: var(--color-ink-soft);
}

.comparison-panel .fit__column--no {
  background: var(--color-surface-muted);
}

/* ---------- Timeline: SEO page variant ----------
   The shared .timeline component's desktop layout reserves a third
   22rem column for an optional preview image (see process.html). The
   condensed process recap on service/package pages only ever populates
   marker + body, so it is constrained back to two columns here — reusing
   every other .timeline/.timeline__item/.timeline__index rule as-is. */
@media (min-width: 760px) {
  .timeline--seo .timeline__item {
    grid-template-columns: 6rem minmax(0, 1fr);
  }
}

/* motion.css */

.logo,
.footer-nav a,
.legal-links a,
.legal-nav a {
  transition:
    color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.timeline__item::after {
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.timeline__item:hover::after {
  background-color: var(--color-border-strong);
}

.js [data-animate] {
  will-change: auto;
}

.is-animating {
  will-change: transform, opacity;
}

/* pages.css */

#services,
#deliverables,
#about,
#process,
#fit,
#showcase,
#pricing,
#reviews,
#faq,
#timeline,
#included,
#delivery,
#cta,
#why,
#experience,
#colleague-perspective,
#look-for,
#principles,
#personal-note,
#featured,
#categories,
#latest,
#newsletter {
  scroll-margin-top: var(--nav-content-offset);
}

/* ---------- Section index/head pattern ---------- */
.section-head {
  display: grid;
  gap: var(--space-sm) var(--space-md);
}

.section-head__index {
  color: var(--color-border-strong);
  font-size: var(--step-2);
  font-weight: var(--font-weight-medium);
  line-height: 1;
}

.section-head__body {
  display: grid;
  gap: var(--space-sm);
  max-width: 40rem;
}

@media (min-width: 760px) {
  .section-head {
    grid-template-columns: 6rem minmax(0, 1fr);
    align-items: start;
  }
}

/* ---------- Services statement ---------- */
.statement .section-head__body h2 {
  font-size: var(--step-3);
  max-width: 36.25rem;
}

/* ---------- What you receive ---------- */
.deliverables__grid {
  display: grid;
  gap: 2rem;
  margin-top: var(--space-xl);
}

.deliverable-card {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  padding: 2.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--duration-normal) var(--ease-standard),
    border-color var(--duration-normal) var(--ease-standard),
    box-shadow var(--duration-normal) var(--ease-standard);
}

.deliverable-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-lg);
}

.deliverable-card__preview {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
  overflow: hidden;
}

.deliverable-card__preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.deliverable-card h3 {
  font-size: var(--step-1);
}

@media (min-width: 860px) {
  .deliverables__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- About (editorial profile) ---------- */
.about {
  background: var(--color-surface-soft);
}

/* #about (the founder-bio instance, not .founder-note) sits directly
   above the dark .pricing section — the divider has to be owned by
   this, the light side, so the hairline stays var(--color-border)
   instead of rendering pale-on-dark if pricing owned its own top
   border instead. */
#about {
  border-bottom: 1px solid var(--color-border);
}

/* Founder section (#about) — balanced editorial two-column layout:
   a substantial portrait on the left, heading/bio/pull-quote/link on
   the right, both starting from the same top edge. */
.about__columns {
  display: grid;
  gap: var(--space-xl);
}

.about__visual {
  display: block;
  max-width: 22rem;
  margin-inline: auto;
}

.about__portrait {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 22%;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
}

.about__content {
  display: grid;
  gap: var(--space-md);
  align-content: start;
}

.about__content .lede {
  max-width: 34rem;
  color: var(--color-ink-soft);
}

.about__content h2 {
  margin-bottom: -0.4rem;
  font-size: clamp(2.3rem, 1.75rem + 2.3vw, 3.1rem);
  line-height: 1.14;
}

.about__bio {
  display: grid;
  gap: var(--space-sm);
}

.about__bio p {
  max-width: 38rem;
  line-height: 1.75;
}

.about__content > .text-link {
  margin-top: 0;
}

@media (min-width: 860px) {
  .about__columns {
    grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr);
    align-items: start;
    gap: clamp(4rem, 6vw, 5rem);
  }

  .about__visual {
    max-width: none;
    margin-inline: 0;
  }

  .about__portrait {
    max-width: none;
  }
}

.about__quote {
  position: relative;
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

/* Pull-quote variant — the founder quote as a distinct panel inside
   the content column, rather than a full-width border-top rule. */
.about__quote--panel {
  padding: 1.75rem 2rem;
  border-top: 0;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary-bright);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.about__quote--panel p {
  max-width: none;
  font-size: var(--step-1);
}

.about__quote p {
  max-width: 40rem;
  font-size: var(--step-2);
  font-weight: var(--font-weight-medium);
  line-height: 1.48;
  letter-spacing: var(--tracking-snug);
  color: var(--color-ink);
}

.about__quote p::before {
  content: "\201C";
  color: var(--color-primary-bright);
  -webkit-text-stroke: 1px var(--color-ink);
}

.about__quote footer {
  margin-top: var(--space-sm);
  color: var(--color-muted);
  font-size: var(--step--1);
}

.about__quote footer strong {
  color: var(--color-ink);
  font-weight: var(--font-weight-medium);
}

/* ---------- About: typography-led founder note ----------
   Replaces the second founder portrait — same eyebrow/heading rhythm
   as the rest of the page, just without an adjacent image. */
.founder-note h2,
.founder-note .lede {
  max-width: 34rem;
}

.founder-note .about__quote {
  max-width: 40rem;
}

/* Homepage-only variant — the intro and the supporting statement sit
   side by side as one editorial composition instead of a single
   narrow column with a stacked, divided quote (which left the right
   half of the section empty). Scoped to these classes only, so the
   plain single-column .founder-note on about.html is untouched. */
.founder-note__grid {
  display: grid;
  gap: var(--space-xl);
  align-items: start;
}

.founder-note__statement {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

@media (min-width: 760px) {
  .founder-note__grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  }

  .founder-note__statement {
    padding-top: 0.35rem;
  }
}

.founder-note__mark {
  display: inline-block;
  width: 1.5rem;
  height: 2px;
  margin-right: 0.6rem;
  background: var(--color-primary-bright);
  vertical-align: middle;
}

/* ---------- Process ---------- */
/* Homepage process preview — three evenly distributed horizontal steps
   with large step numbers and a restrained connecting line, so the
   section fills the same grid as every other section instead of
   sitting as a narrow vertical strip. Reuses .timeline/.timeline__item
   — process.html keeps the plain vertical .timeline unaffected. */
.timeline--compact {
  gap: var(--space-lg);
}

.timeline--compact .timeline__item {
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: var(--space-xs) var(--space-md);
  padding-block: 0;
}

.timeline--compact .timeline__item:not(:last-child)::after {
  content: none;
}

.timeline--compact .timeline__index {
  font-size: var(--step-3);
}

@media (min-width: 760px) {
  .timeline--compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(2.5rem, 4.5vw, 4rem);
    position: relative;
  }

  .timeline--compact::before {
    content: none;
  }

  .timeline--compact::after {
    content: "";
    position: absolute;
    top: 1.55rem;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--color-border);
    z-index: 0;
  }

  .timeline--compact .timeline__item {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    padding-right: clamp(1rem, 2vw, 2rem);
  }

  .timeline--compact .timeline__marker {
    position: relative;
    z-index: 1;
  }

  .timeline--compact .timeline__index {
    display: inline-block;
    padding-right: 0.9rem;
    background: var(--color-surface);
    font-size: var(--step-4);
  }

  .timeline--compact .timeline__body p {
    max-width: 32ch;
  }
}

/* ---------- Who this is for ---------- */
.fit {
  background: var(--color-surface-soft);
}

.fit__grid {
  display: grid;
  gap: 1.5rem;
  margin-top: var(--space-xl);
}

.fit__column {
  display: grid;
  gap: var(--space-md);
  padding: 2.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.fit__column--yes {
  border-color: rgb(83 106 8 / 0.28);
  background: var(--color-primary-soft);
}

/* Comparison variant (homepage "who this is for") only — the working
   principles grid on the About page reuses .fit__column unmodified. */
#fit .fit__column {
  grid-template-rows: auto 1fr;
}

#fit .fit__column--no {
  background: var(--color-surface-muted);
}

.fit__column h3 {
  font-size: var(--step-1);
}

.fit-list {
  display: grid;
  align-content: start;
  gap: 0.85rem;
  padding: 0;
  list-style: none;
}

.fit-list li {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  color: var(--color-ink-soft);
}

.fit-list__mark {
  flex: none;
  font-weight: var(--font-weight-semibold);
}

.fit-list--yes .fit-list__mark {
  color: var(--color-primary);
}

.fit-list--no .fit-list__mark {
  color: var(--color-error);
}

@media (min-width: 700px) {
  .fit__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }
}

/* ---------- Real review example ---------- */
.showcase__flow {
  display: grid;
  gap: 2rem;
  align-items: start;
  margin-top: var(--space-xl);
}

.showcase__step {
  display: grid;
  gap: var(--space-sm);
}

.showcase__frame {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
}

.showcase__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.showcase__step h3 {
  font-size: var(--step-0);
}

.showcase__step p {
  color: var(--color-muted);
  font-size: var(--step--1);
}

.showcase__arrow {
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--color-border-strong);
}

/* The featured step (the actual deliverable) carries more visual
   weight than the before/after supporting frames on either side. */
.showcase__step--featured .showcase__frame {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

.showcase__step--featured h3 {
  font-size: var(--step-1);
}

@media (min-width: 860px) {
  .showcase__flow {
    grid-template-columns: minmax(0, 0.8fr) auto minmax(0, 1.35fr) auto minmax(0, 0.8fr);
    gap: clamp(1rem, 2vw, 1.75rem);
  }

  .showcase__step--secondary {
    padding-top: 1.5rem;
  }

  .showcase__arrow {
    display: flex;
  }
}

/* ---------- Pricing section head ---------- */
.pricing .section-head__index {
  color: rgb(255 255 255 / 0.22);
}

.pricing .section-head__body p.lede {
  color: rgb(255 255 255 / 0.68);
}

.pricing__personal.muted {
  margin-top: -0.4rem;
  color: rgb(255 255 255 / 0.5);
  font-size: var(--step--1);
}

/* ---------- Reviews from founders ---------- */
.reviews__grid {
  display: grid;
  gap: var(--space-xl);
}

.reviews__written {
  display: grid;
  gap: var(--space-xl);
}

.reviews__intro {
  max-width: 26rem;
}

.reviews__intro h2 {
  font-size: var(--step-3);
}

.testimonial-cards {
  display: grid;
  gap: 1.5rem;
}

.testimonial-card {
  display: grid;
  gap: var(--space-md);
  padding: 2.5rem;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-surface-soft);
}

.testimonial-card p {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--step-1);
  line-height: 1.55;
  letter-spacing: var(--tracking-snug);
}

.testimonial-card footer {
  color: var(--color-muted);
  font-size: var(--step--1);
}

.testimonial-card footer strong {
  color: var(--color-ink);
  font-weight: var(--font-weight-medium);
}

.reviews__featured-label {
  margin: 0 0 var(--space-sm);
  color: var(--color-muted);
  font-size: var(--step--1);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.reviews__stage {
  display: grid;
  justify-items: center;
  gap: var(--space-sm);
}

.review-card {
  display: grid;
  gap: var(--space-md);
  width: 100%;
  max-width: 19rem;
}

.review-card__meta {
  display: grid;
}

.review-card__attribution {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--step-0);
  font-weight: var(--font-weight-medium);
  text-align: center;
}

@media (min-width: 900px) {
  .reviews__grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 1fr);
    align-items: start;
    gap: clamp(3rem, 5vw, 4.5rem);
  }

  .reviews__intro {
    padding-top: 0.15rem;
  }

  .review-card {
    max-width: 22rem;
  }
}

/* ---------- FAQ ---------- */
.faq__layout {
  display: grid;
  gap: var(--space-lg);
}

.faq__intro {
  max-width: 34rem;
}

.faq__list {
  display: grid;
  max-width: 46rem;
  margin-top: var(--space-xl);
}

@media (min-width: 860px) {
  .faq__layout {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--space-2xl);
    align-items: start;
  }

  .faq__intro {
    position: sticky;
    top: var(--nav-content-offset);
    max-width: none;
  }

  .faq__list {
    max-width: none;
    margin-top: 0;
  }
}

.faq__item {
  border-bottom: 1px solid var(--color-border);
}

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: 1.25rem;
  color: var(--color-ink);
  font-size: var(--step-1);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  list-style: none;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary svg {
  flex: none;
  color: var(--color-muted);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.faq__item[open] summary svg {
  transform: rotate(180deg);
}

.faq__answer {
  max-width: 42rem;
  padding-bottom: 1.5rem;
  color: var(--color-ink-soft);
}

/* ---------- Process page: in-step details ---------- */
.timeline__body .check-list,
.timeline__body .timeline__preview {
  margin-top: var(--space-sm);
}

.timeline__preview {
  max-width: 220px;
}

/* ---------- Process page: delivery timeline flow ---------- */
.showcase__flow--delivery {
  grid-template-columns: none;
}

@media (min-width: 860px) {
  .showcase__flow--delivery {
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
  }
}

/* ---------- Process page: closing CTA band ---------- */
.cta-band {
  text-align: center;
}

.cta-band .container {
  display: grid;
  justify-items: center;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
}

.cta-band h2 {
  max-width: 32rem;
  font-size: var(--step-4);
}

.cta-band .lede {
  color: rgb(255 255 255 / 0.72);
}

.cta-band .button {
  margin-top: var(--space-sm);
  min-width: 14rem;
}

/* ---------- About page: hero portrait ----------
   Art-directed rather than simply inserted: a small radius and hairline
   neutral border (not the video-embed's heavier frame/shadow), a
   tighter-than-native aspect ratio so the crop favours the face and
   upper torso instead of running to mid-thigh, and a slight contrast
   lift with the warm cast pulled back so the photo sits naturally in
   the black-and-lime system. */
.hero-portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 4.7;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 5px;
  background: var(--color-dark-soft);
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.16), 0 8px 20px -10px rgb(0 0 0 / 0.4);
}

.hero-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 14%;
  filter: contrast(1.05) saturate(0.92);
}

/* ---------- Blog: editorial hero visual ----------
   Replaces the founder portrait in the Blog hero. A small stack of
   review-mockup cards — the same annotated-review asset used as the
   Home/Process video cover, layered with two supporting deliverable
   cards — so the visual supports the editorial subject without
   another headshot. */
.hero-editorial {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
}

.hero-editorial__main {
  position: absolute;
  inset: 11% 9%;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.hero-editorial__main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hero-editorial__card {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.08);
  border-radius: var(--radius-md);
  background: var(--color-dark-soft);
  box-shadow: var(--shadow-dark-lg);
}

.hero-editorial__card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.85rem;
}

.hero-editorial__card--a {
  top: 2%;
  right: -4%;
  width: 42%;
  aspect-ratio: 4 / 3;
  transform: rotate(7deg);
}

.hero-editorial__card--b {
  bottom: 3%;
  left: -5%;
  width: 38%;
  aspect-ratio: 4 / 3;
  transform: rotate(-8deg);
}

/* ---------- About page: split panel (copy + illustration/portrait) ----------
   Same grid mechanics as .reviews__grid — a wide text
   column beside a narrower visual, collapsing to a single column on
   small screens. */
.split-panel {
  display: grid;
  gap: var(--space-xl);
  margin-top: clamp(2rem, 1.6rem + 1.5vw, 3rem);
  align-items: center;
}

.split-panel__text {
  display: grid;
  gap: 1.05rem;
  max-width: 34rem;
}

.split-panel__visual {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
}

.split-panel__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.5rem;
}

.split-panel--reverse .split-panel__visual {
  order: -1;
}

@media (min-width: 860px) {
  .split-panel {
    /* ~41% of the two-column width goes to the visual — large enough to
       read as a real exhibit rather than a floating thumbnail, while the
       text column keeps the wider share for the argument it's making. */
    grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: start;
  }

  .split-panel--reverse .split-panel__visual {
    order: 0;
  }
}

/* ---------- About page: section rhythm & refinements ----------
   Scoped by id (unique to about.html) or [data-page="about"] where the
   id is shared with process.html/blog.html, so the shared .deliverables/
   .fit/.timeline/.cta-band components used elsewhere stay untouched. */

/* Narrower stage than the sitewide 1240px container — About reads as a
   tighter, more editorial column than the wider marketing pages. */
[data-page="about"] .container {
  width: min(100% - (var(--gutter) * 2), 1200px);
}

/* Alternate background so "Six things I check" and "Working
   principles" don't read as the same tinted section back to back. */
#look-for {
  background: var(--color-surface-soft);
}

#principles {
  background: var(--color-surface);
}

/* One consistent vertical rhythm across every About section — three
   explicit tiers rather than each section inheriting whatever the
   shared component happened to bring, so the page reads as one
   deliberately paced system instead of accumulating uneven gaps. */
#why,
#look-for,
#principles,
#experience,
#colleague-perspective,
#personal-note {
  padding-block: 3.5rem;
}

@media (min-width: 768px) {
  #why,
  #look-for,
  #principles,
  #experience,
  #colleague-perspective,
  #personal-note {
    padding-block: 5.5rem;
  }
}

@media (min-width: 1024px) {
  #why,
  #look-for,
  #principles,
  #experience,
  #colleague-perspective,
  #personal-note {
    padding-block: 7rem;
  }
}

/* ---------- About page: hero ----------
   A deliberate 58/42 copy-to-portrait split (rather than the generic
   homepage 1.48fr/0.52fr) so the founder portrait carries equal visual
   weight to the headline instead of reading as a supporting thumbnail.
   Top-aligned so the portrait's frame starts level with the H1 — see
   the .hero__visual margin-top below, which pushes the portrait down
   past the eyebrow by exactly the eyebrow's own reserved height so the
   two columns share a start line without the portrait ever reaching
   into the eyebrow's row.

   The H1 itself is also sized with container query units (cqw) against
   .hero__panel rather than viewport vw: vw scales with the whole
   window, but the heading only ever has the text column's actual
   width to work with, and that column is a fraction of the viewport
   that changes shape across breakpoints. The unconditional font-size
   below (outside the media query) takes the same value in px-based
   clamp() form and wins the cascade at every width since it's declared
   later — kept in sync with the cqw rule rather than deleted so either
   can be the single source if the other is ever removed. .hero__line
   also drops the sitewide nowrap: the four lines are deliberate, but
   forcing every one onto a single row regardless of column width is
   what let the heading run under the portrait in the first place.

   Below 900px .hero__layout falls back to the generic single implicit
   grid column, which sizes itself to its widest item's max-content
   width rather than the container's actual available width — with a
   fixed max-width on the H1 that silently pushed the whole panel
   wider than the viewport on narrow phones. minmax(0, 1fr) keeps that
   single mobile column honest. */
[data-page="about"] .hero__layout {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  [data-page="about"] .hero__layout {
    grid-template-columns: minmax(0, 1.5fr) minmax(19rem, 1fr);
    align-items: start;
    column-gap: clamp(3rem, 4vw, 4rem);
  }

  [data-page="about"] .hero__panel {
    container-type: inline-size;
  }

  [data-page="about"] .hero__inner h1 {
    max-width: 100%;
    font-size: clamp(2.75rem, 6.2cqw, 4.5rem);
  }

  [data-page="about"] .hero__line {
    white-space: normal;
  }

  /* Widened from 29rem so the portrait carries ~37-40% of the hero
     width (was ~42% at the old 1.38fr split) — larger without
     overpowering the headline column. */
  [data-page="about"] .demo-video {
    max-width: 31rem;
  }

  /* Levels the portrait's top edge with the H1's rather than the
     eyebrow above it — sized from the eyebrow's own font-size/line-
     height (0.8125rem / 1.4, set above) plus its gap to the H1, so it
     stays correct if either value changes. */
  [data-page="about"] .hero__visual {
    margin-top: calc(1.4 * 0.8125rem + 1.375rem);
  }
}

[data-page="about"] .hero__inner {
  max-width: none;
}

/* h1's children are grid items (h1 is display: grid), which are
   subject to the same min-width: auto default as the flex fix above.
   Without this, the grid's single column can still be pushed wide by
   a line's min-content even once the H1 box itself is free to shrink. */
[data-page="about"] .hero__line {
  min-width: 0;
}

[data-page="about"] .hero__inner h1 {
  /* .hero__inner is a flex column with align-items: flex-start, and
     flex items default to min-width: auto — their min-content size —
     rather than 0, which would otherwise floor the H1's width at its
     longest line and overflow narrow phones instead of wrapping.
     overflow-wrap is the emergency valve for any single word that
     still doesn't fit at the narrowest supported width. */
  min-width: 0;
  max-width: 43.125rem;
  overflow-wrap: break-word;
  margin-block-start: clamp(1.25rem, 1rem + 1vw, 1.5rem);
  font-size: clamp(2.75rem, 2rem + 3.4vw, 4.5rem);
  line-height: 0.96;
  letter-spacing: -0.035em;
}

/* Primary introductory statement — brighter, slightly larger, and
   given clear air below the H1. */
[data-page="about"] .hero__inner .hero__lede {
  max-width: 34rem;
  margin-top: 2rem;
  color: rgb(255 255 255 / 0.92);
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.0625rem);
  line-height: 1.5;
}

/* Supporting paragraph reads as quieter detail, not a second
   equally-weighted statement: smaller, muted, tighter measure. */
[data-page="about"] .hero__inner .hero__lede + .hero__lede {
  max-width: 31.5rem;
  margin-top: 0.875rem;
  color: rgb(255 255 255 / 0.56);
  font-size: clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);
  line-height: 1.55;
}

[data-page="about"] .hero__inner .eyebrow {
  max-width: 30rem;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
}

[data-page="about"] .hero__actions {
  margin-top: 2.25rem;
  gap: 1.375rem;
}

[data-page="about"] .hero__actions .button--primary {
  height: 3.125rem;
  min-height: 0;
  min-width: 0;
  padding-inline: 1.625rem;
  border-radius: 11px;
  font-size: 0.9375rem;
  font-weight: var(--font-weight-semibold);
}

[data-page="about"] .hero__actions .text-link {
  font-size: 0.9375rem;
}

@media (max-width: 599px) {
  [data-page="about"] .hero__actions .button--primary {
    width: 100%;
  }
}

/* Portrait caption — quieter than the surrounding hero copy, but given
   room to breathe below the frame instead of sitting flush against it. */
[data-page="about"] .hero__note {
  margin-top: 0.75rem;
}

/* Slightly more breathing room below the hero before #why, now that
   the stats strip below reads as a heavier, full-width block. */
[data-page="about"] .hero {
  padding-bottom: clamp(3.5rem, 2.9rem + 2.6vw, 4.5rem);
}

/* ---------- About page: hero stats ----------
   Rebuilds the shared .hero__proof/.hero__trust-strip (also used, with
   different content and a flat single-line-per-item list, by the
   homepage hero) into a dedicated four-statistic strip: full hero
   width rather than confined to the text column, a lime top rule
   tying it back to the hero, and a primary/supporting two-line pattern
   per stat instead of a bulleted tag list. Everything here is scoped
   to [data-page="about"] so the homepage strip is untouched. */
[data-page="about"] .hero__proof {
  max-width: none;
  margin-top: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  padding-top: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  border-top: 1px solid rgb(195 255 51 / 0.22);
}

[data-page="about"] .hero__trust-strip {
  grid-template-columns: 1fr;
  gap: 0;
}

[data-page="about"] .hero__trust-strip li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding-block: 0.85rem;
  border-top: 1px solid var(--color-dark-border);
  opacity: 1;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
  line-height: inherit;
}

[data-page="about"] .hero__trust-strip li:first-child {
  padding-top: 0;
  border-top: none;
}

[data-page="about"] .hero__trust-strip li::before {
  content: none;
}

[data-page="about"] .hero__trust-strip strong {
  font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.375rem);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  letter-spacing: -0.01em;
}

[data-page="about"] .hero__trust-strip span {
  color: rgb(255 255 255 / 0.62);
  font-size: clamp(0.75rem, 0.72rem + 0.15vw, 0.875rem);
  font-weight: var(--font-weight-regular);
  line-height: 1.45;
}

@media (min-width: 560px) and (max-width: 899px) {
  [data-page="about"] .hero__trust-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 4vw, 2.5rem);
  }

  [data-page="about"] .hero__trust-strip li:first-child,
  [data-page="about"] .hero__trust-strip li:nth-child(2) {
    padding-top: 0;
    border-top: none;
  }
}

/* Four equal columns spanning both hero grid tracks, so the first stat
   aligns with the headline's left edge and the last aligns with the
   portrait's right edge. */
@media (min-width: 900px) {
  [data-page="about"] .hero__proof {
    grid-column: 1 / -1;
  }

  [data-page="about"] .hero__trust-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: clamp(2rem, 3vw, 3rem);
  }

  [data-page="about"] .hero__trust-strip li {
    padding-block: 0;
    border-top: none;
  }

  [data-page="about"] .hero__trust-strip li:not(:first-child) {
    padding-left: clamp(1.5rem, 2vw, 2rem);
    border-left: 1px solid var(--color-dark-border);
  }
}

/* Six things I check — an intermediate two-column tier for six cards
   (the shared .deliverables__grid only defines one-column/three-column),
   plus slightly tighter card padding and a smaller radius so six short
   cards read as a light grid rather than six oversized panels. */
@media (min-width: 620px) {
  #look-for .deliverables__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  #look-for .deliverables__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

#look-for .deliverable-card {
  padding: clamp(2rem, 1.6rem + 1.7vw, 2.5rem);
  gap: 1.1rem;
  border-radius: var(--radius-md);
}

/* Working principles — four cards in a balanced grid, plus the fifth
   principle presented as a full-width concluding statement instead of
   sitting alone in the two-column grid. Reuses .fit__column's border/
   radius/padding; the thin lime top rule marks it as the section's
   close without a heavy decorative panel. */
#principles .fit__column--conclude {
  margin-top: 1.5rem;
  text-align: center;
  border-top: 1px solid var(--color-primary-bright);
}

#principles .fit__column--conclude h3 {
  font-size: var(--step-2);
}

#principles .fit__column--conclude p {
  margin-inline: auto;
  max-width: 42rem;
}

/* Experience — compact two-column card grid at desktop instead of a
   tall single-column timeline, so seven roles don't dominate the page
   length. Each item keeps its marker/date/heading/body, just without
   the full-bleed connector rail, which only reads cleanly in one
   column; process.html's identical timeline is untouched. */
#experience .timeline {
  margin-top: var(--space-lg);
}

#experience .timeline__index {
  -webkit-text-stroke-color: var(--color-ink-soft);
}

/* Compact rhythm — pattern recognition across a career, not a résumé.
   Tighter padding plus a date pulled inline with the heading keeps
   each entry scannable in two or three sentences instead of reading
   like a full job listing. */
#experience .timeline__item {
  padding-block: clamp(1rem, 0.85rem + 0.6vw, 1.4rem);
  gap: 0.3rem var(--space-md);
}

#experience .timeline__body h3 {
  display: inline;
  margin-bottom: 0;
}

#experience .timeline__body h3 + p.muted:first-of-type {
  display: inline;
  margin-left: 0.55rem;
  color: var(--color-muted);
  font-size: var(--step--1);
  font-weight: var(--font-weight-medium);
}

#experience .timeline__body p.muted:last-child {
  margin-top: 0.5rem;
  max-width: 42ch;
}

@media (min-width: 860px) {
  #experience .timeline {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2.5rem;
    row-gap: 0;
  }

  #experience .timeline::before {
    content: none;
  }

  #experience .timeline__item {
    grid-template-columns: 3rem minmax(0, 1fr);
  }

  #experience .timeline__item:not(:last-child)::after {
    left: 0;
  }

  #experience .timeline__index {
    font-size: var(--step-1);
  }
}

/* Experience — final entry (2026 / Ratiom Launch) reads as the
   culmination of the timeline rather than another past role: a
   stronger lime top rule (echoing #principles' concluding statement)
   plus a filled-in lime index, in place of the outlined text-stroke
   numeral every prior entry uses. Two restrained treatments — no new
   component, no icon (removed sitewide from this timeline), and no
   separate promotional card. */
#experience .timeline__item--current {
  border-top: 1px solid var(--color-primary-bright);
}

#experience .timeline__item--current .timeline__index {
  color: var(--color-primary);
  -webkit-text-stroke-color: transparent;
}

/* Colleague perspective — a bespoke card treatment layered on top of
   the shared .testimonial-card/.testimonial-cards markup, scoped to
   #colleague-perspective so the homepage's reviews section (the same
   base class) is untouched. A fine lime top rule and a restrained
   quotation mark replace the flat filled panel, and the attribution
   gets its own rule to read as evidence rather than decoration. */
@media (min-width: 860px) {
  #colleague-perspective .testimonial-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

#colleague-perspective .testimonial-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 2.25rem 2rem 2rem;
  border: 1px solid var(--color-border);
  border-top: 2px solid var(--color-primary-bright);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: none;
  transition:
    border-color var(--duration-normal) var(--ease-standard),
    box-shadow var(--duration-normal) var(--ease-standard),
    transform var(--duration-normal) var(--ease-standard);
}

#colleague-perspective .testimonial-card:hover,
#colleague-perspective .testimonial-card:focus-within {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

#colleague-perspective .testimonial-card::before {
  content: "\201C";
  position: absolute;
  top: 0.75rem;
  right: 1.25rem;
  color: var(--color-primary-soft);
  font-size: 4rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  pointer-events: none;
}

#colleague-perspective .testimonial-card p {
  position: relative;
  flex: 1 0 auto;
  font-size: var(--step-1);
  line-height: 1.5;
  letter-spacing: var(--tracking-snug);
  color: var(--color-ink);
}

#colleague-perspective .testimonial-card footer {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}

#colleague-perspective .testimonial-card__attribution {
  margin: 0 0 0.6rem;
  color: var(--color-ink);
  font-size: var(--step-0);
}

#colleague-perspective .testimonial-card__attribution strong {
  font-weight: var(--font-weight-medium);
}

/* Personal note — two columns at wide widths (narrative left, wider,
   with the pull-quote right and top-aligned to the narrative's first
   line) instead of a near-even split with unresolved space beside it.
   The homepage's .founder-note__grid variant is a separate, untouched
   pattern. */
#personal-note .personal-note__layout {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 860px) {
  #personal-note .personal-note__layout {
    grid-template-columns: minmax(0, 6.5fr) minmax(0, 5.5fr);
    align-items: start;
    gap: clamp(3rem, 6vw, 5.5rem);
  }
}

/* Slightly larger, more confident quote card — this is the section's
   resolution, so it should read with more weight than a standard
   pull-quote, without tipping into a decorative panel. */
#personal-note .personal-note__quote {
  padding: clamp(2rem, 1.7rem + 1.3vw, 2.5rem) clamp(2rem, 1.7rem + 1vw, 2.25rem);
}

#personal-note .personal-note__quote p {
  font-size: var(--step-2);
  line-height: 1.42;
}

.blog-page-shell {
  color: var(--blog-text-color);
  background: var(--blog-page-background);
}

.blog-main,
.single-post main.blog-main,
.blog-archive-main {
  background: var(--blog-page-background);
  padding-top: calc(var(--nav-content-offset) + clamp(40px, 7vw, 96px));
  padding-bottom: clamp(40px, 7vw, 96px);
}

.blog-page-shell.site-main:has(> .hero) {
  padding-top: 0;
}

.blog-archive-main:has(> .hero) {
  padding-top: 0;
}

.blog-page-shell > .hero,
.blog-page-shell > .section,
.blog-page-shell > .section-sm {
  background: transparent;
}

.blog-page-shell > .hero {
  color: var(--blog-text-color);
}

.blog-page-shell > .hero::before,
.blog-page-shell > .hero::after {
  display: none;
}

.blog-page-shell .hero .eyebrow {
  color: var(--color-muted);
}

.blog-page-shell .hero__lede {
  color: var(--color-ink-soft);
}

.blog-page-shell .hero .text-link {
  color: var(--blog-text-color);
}

.blog-page-shell .hero .text-link:hover {
  color: var(--color-primary);
}

.article-surface {
  width: min(calc(100% - 48px), 820px);
  max-width: 820px;
  margin-inline: auto;
  padding: clamp(32px, 5vw, 72px);
  border: 1px solid var(--blog-border-color);
  border-radius: 4px;
  background: var(--blog-content-background);
  box-shadow: none;
}

.article-surface .reading {
  width: 100%;
}

.article-surface .entry-content {
  max-width: 720px;
  margin-inline: auto;
}

.article-surface .entry-content > * {
  max-width: 100%;
}

.article-surface .entry-content p,
.article-surface .entry-content li {
  font-size: clamp(17px, 1.2vw, 18px);
  line-height: 1.72;
}

.article-surface .entry-content p {
  margin-bottom: 1.4em;
}

.article-surface .entry-content h2 {
  margin-top: 2.4em;
  margin-bottom: 0.7em;
}

.article-surface .entry-content h3 {
  margin-top: 1.9em;
  margin-bottom: 0.6em;
}

.article-surface img,
.article-surface iframe,
.article-surface embed,
.article-surface object,
.article-surface table {
  max-width: 100%;
}

.article-surface table {
  display: block;
  overflow-x: auto;
}

.blog-archive-grid {
  align-items: stretch;
}

.blog-page-shell .featured-post,
.blog-page-shell .blog-card,
.blog-page-shell .blog-post-card {
  border: 1px solid var(--blog-border-color);
  border-radius: 4px;
  background: var(--blog-content-background);
  box-shadow: none;
}

.blog-page-shell .featured-post:hover,
.blog-page-shell .featured-post:focus-within,
.blog-page-shell .blog-card:hover,
.blog-page-shell .blog-card:focus-within {
  box-shadow: none;
}

@media (max-width: 767px) {
  .blog-main,
  .single-post main.blog-main,
  .blog-archive-main {
    padding-top: calc(var(--nav-content-offset) + 24px);
    padding-bottom: 48px;
  }

  .blog-archive-main:has(> .hero) {
    padding-top: 0;
  }

  .article-surface {
    width: 100%;
    padding: 32px 20px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .article-surface .entry-content {
    max-width: none;
  }

  .blog-page-shell {
    overflow-x: clip;
  }
}

/* ---------- Blog: featured article ----------
   Same card language as .deliverable-card (border, radius, shadow,
   hover lift) combined with the .split-panel grid mechanics, so the
   flagship article reads as one large horizontal card rather than a
   new pattern. */
.featured-post {
  position: relative;
  display: grid;
  gap: var(--space-xl);
  margin-top: var(--space-lg);
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: 1.25rem;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  transition:
    transform var(--duration-normal) var(--ease-standard),
    border-color var(--duration-normal) var(--ease-standard),
    box-shadow var(--duration-normal) var(--ease-standard);
}

.featured-post:hover {
  transform: translateY(-3px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

.featured-post:focus-within {
  outline: none;
  transform: translateY(-3px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md), 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary-bright);
}

.featured-post__link {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
}

.featured-post__link:focus-visible {
  outline: none;
}

.featured-post__frame {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
}

.featured-post__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featured-post__body {
  display: grid;
  gap: var(--space-sm);
  align-content: start;
}

.featured-post__meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-muted);
  font-size: var(--step--1);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.featured-post__category {
  color: var(--color-primary);
}

.featured-post__dot {
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 50%;
  background: var(--color-border-strong);
  flex: none;
}

.featured-post__title {
  font-size: var(--step-3);
  max-width: 30ch;
}

.featured-post__excerpt {
  color: var(--color-ink-soft);
  max-width: 52ch;
}

.featured-post__byline {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--step--1);
}

@media (min-width: 860px) {
  .featured-post {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
  }
}

/* ---------- Blog: category tags ----------
   Same pill geometry as .button--compact (radius-pill, hairline border)
   so tags read as part of the existing button and
   badge language rather than a new shape. Rendered as plain <span>s
   (see blog.html) — no hover/focus affordance, cursor left at its
   default, so they don't imply interactivity they can't deliver. */
.category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  padding: 0;
  margin: var(--space-lg) 0 0;
  list-style: none;
}

.category-pill {
  display: inline-flex;
  align-items: center;
  height: 2.5rem;
  padding-inline: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface-soft);
  color: var(--color-ink-soft);
  font-size: var(--step--1);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition:
    color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard);
}

.category-pill:hover,
.category-pill:focus-visible,
.category-pill.is-active {
  border-color: var(--color-border-strong);
  background: var(--color-primary-soft);
  color: var(--color-ink);
}

/* ---------- Blog: article grid ----------
   Same grid mechanics and card chrome as .deliverables__grid /
   .deliverable-card — border, 1.25rem radius, shadow-sm, hover lift —
   plus a subtle image zoom on hover for the one new interaction.
   Three-step responsive composition (1 / 2 / 3 columns) matches the
   breakpoints already used by #look-for's deliverables grid. */
.blog-grid {
  display: grid;
  gap: 1.75rem;
  margin-top: var(--space-lg);
}

@media (min-width: 620px) {
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .blog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }
}

.blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: 1.25rem;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  transition:
    transform var(--duration-normal) var(--ease-standard),
    border-color var(--duration-normal) var(--ease-standard),
    box-shadow var(--duration-normal) var(--ease-standard);
}

.blog-card:hover,
.blog-card:focus-within {
  transform: translateY(-3px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

.blog-card:focus-within {
  outline: none;
  transform: translateY(-3px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md), 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary-bright);
}

.blog-card__link {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
}

.blog-card__link:focus-visible {
  outline: none;
}

/* Seventh card — a wider editorial close so the final row of an
   odd-numbered grid reads as intentional rather than leaving a lone
   narrow card stranded on its own. Full width in the 1- and 2-column
   layouts; spans two of three columns once the grid reaches three, with
   the same horizontal image + copy composition as .featured-post. */
.blog-card--wide {
  grid-column: 1 / -1;
}

@media (min-width: 620px) {
  .blog-card--wide {
    flex-direction: row;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-md);
  }

  .blog-card--wide .blog-card__frame {
    flex: 0 0 42%;
  }

  .blog-card--wide .blog-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    flex: 1;
    min-width: 0;
  }
}

@media (min-width: 900px) {
  .blog-card--wide {
    grid-column: span 2;
  }
}

.blog-card__frame {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
}

.blog-card__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-standard);
}

.blog-card:hover .blog-card__frame img {
  transform: scale(1.04);
}

.blog-card__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-muted);
  font-size: var(--step--1);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.blog-card__meta span:first-child {
  color: var(--color-primary);
}

.blog-card__meta .dot {
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 50%;
  background: var(--color-border-strong);
  flex: none;
}

.blog-card__title {
  font-size: var(--step-1);
}

.blog-card__excerpt {
  color: var(--color-ink-soft);
  font-size: clamp(0.9375rem, 0.9rem + 0.18vw, 1rem);
  line-height: 1.6;
}

.blog-card__byline {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--step--1);
}

/* ---------- Blog: pagination ----------
   WordPress core pagination markup (the_posts_pagination /
   paginate_links) styled on the existing pill language — same geometry
   as .category-pill / mobile .legal-nav, 44px touch targets, wraps
   cleanly at 320px. */
.navigation.pagination {
  margin-top: var(--space-xl);
}

.navigation.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.navigation.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding-inline: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink-soft);
  font-size: var(--step--1);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition:
    color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.navigation.pagination a.page-numbers:hover {
  color: var(--color-ink);
  border-color: var(--color-border-strong);
}

.navigation.pagination .page-numbers.current {
  color: var(--color-ink);
  border-color: var(--color-ink);
}

.navigation.pagination .page-numbers.dots {
  min-width: 0;
  padding-inline: 0.25rem;
  border-color: transparent;
  background: none;
}

.navigation.pagination a.page-numbers:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary-bright);
}

/* ---------- Blog: newsletter ---------- */
.newsletter {
  background: var(--color-surface-soft);
}

.newsletter__panel {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

.newsletter__text {
  display: grid;
  gap: var(--space-sm);
  max-width: 30rem;
}

.newsletter__text h2 {
  font-size: var(--step-3);
}

.newsletter-embed-slot {
  width: 100%;
  max-width: 28rem;
  min-width: 0;
}

.newsletter-embed-widget {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.newsletter-embed-slot .sendfox-embed:has(.sendfox-embed-card form[action*="/m27j75"]),
.newsletter-embed-slot .sendfox-embed-card:has(form[action*="/m27j75"]) {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 420px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.newsletter-embed-slot .sendfox-embed-card form[action*="/m27j75"],
.newsletter-embed-slot .sendfox-embed-card form[action*="/m27j75"] * {
  box-sizing: border-box !important;
}

.newsletter-embed-slot .sendfox-embed-card form[action*="/m27j75"] {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

.newsletter-embed-slot .sendfox-embed-card form[action*="/m27j75"] > div:not([aria-hidden="true"]),
.newsletter-embed-slot .sendfox-embed-card form[action*="/m27j75"] input:not([type="checkbox"]),
.newsletter-embed-slot .sendfox-embed-card form[action*="/m27j75"] button[type="submit"] {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.newsletter-embed-slot .sendfox-embed-card form[action*="/m27j75"] label {
  max-width: 100% !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: normal !important;
}

.newsletter-embed-slot .sendfox-embed-card form[action*="/m27j75"] label:has(input[type="checkbox"][name="gdpr"]) {
  position: static !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 0 22px !important;
  padding: 0 !important;
  color: #2e364c !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  text-transform: none !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  transform: none !important;
}

.newsletter-embed-slot .sendfox-embed-card form[action*="/m27j75"] label:has(input[type="checkbox"][name="gdpr"]) {
  padding-block: 4px !important;
}

.newsletter-embed-slot .sendfox-embed-card form[action*="/m27j75"] label:has(input[type="checkbox"][name="gdpr"]) input[type="checkbox"][name="gdpr"] {
  position: static !important;
  float: none !important;
  display: block !important;
  flex: 0 0 20px !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  margin: 1px 0 0 !important;
  padding: 0 !important;
  transform: none !important;
}

.newsletter-embed-slot .sendfox-embed-card form[action*="/m27j75"] label:has(input[type="checkbox"][name="gdpr"]) input[type="checkbox"][name="gdpr"] + * {
  min-width: 0 !important;
  max-width: 100% !important;
}

@media (min-width: 860px) {
  .newsletter__panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* ---------- 404 ---------- */
.error-page {
  min-height: 70vh;
  display: grid;
  align-items: center;
}

.error-page .eyebrow {
  color: var(--color-muted);
}

.error-page h1 {
  font-size: var(--step-4);
  margin-block: var(--space-sm) var(--space-md);
}

/* ---------- Mobile responsive pass (≤767.98px only) ----------
   Additive fixes found during a full mobile QA sweep. Desktop/tablet
   (≥768px) rules above are untouched; everything below only takes
   effect under the mobile breakpoint. */
@media (max-width: 767.98px) {
  /* Legal pages (terms/privacy/cookies/business-information): the
     in-page section jump-nav lives in .legal-sidebar, which is
     `display: none` until 980px (see layout.css), so every section
     label was unreachable on mobile with no way to jump ahead. Reveal
     it as a horizontal-scroll pill bar above the article instead of
     the desktop sticky sidebar column. */
  .legal-sidebar {
    display: block;
    min-width: 0;
    margin-bottom: var(--space-md);
  }

  .legal-nav {
    position: static;
    display: flex;
    flex-wrap: nowrap;
    min-width: 0;
    gap: 0.5rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    padding-block: 0.25rem;
    padding-inline: 0.05rem;
    scrollbar-width: none;
  }

  .legal-nav::-webkit-scrollbar {
    display: none;
  }

  .legal-nav a {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    white-space: nowrap;
  }

  .legal-nav a[aria-current="page"] {
    border-color: var(--color-ink);
  }

  /* Cookie preference toggle switches: 44px wide but only 24px tall.
     Grow the tappable area vertically without resizing the switch. */
  .toggle {
    position: relative;
  }

  .toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 44px;
    transform: translateY(-50%);
  }

  /* Category pills (blog/home): real <a> links to category archives,
     40px tall on all breakpoints today. Bring them to a 44px minimum
     touch target on mobile. */
  .category-pill {
    min-height: 2.75rem;
  }
}

/* -------------------------------------------------------------------
   Contact page
   Scoped by .contact-* classes (works for both the virtual /contact/
   route and a real WordPress page assigned to page-contact.php).
   Reuses the standard light design system: surface cards, subtle
   borders, --radius-lg, the lime accent for small details only. */

.contact-intro__layout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

.contact-intro__portrait {
  position: relative;
  flex: none;
  width: 5.5rem; /* 88px mobile */
  height: 5.5rem;
}

.contact-intro__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  outline: 2px solid var(--color-primary-bright);
  outline-offset: 3px;
}

.contact-intro__status {
  position: absolute;
  right: 0.1rem;
  bottom: 0.1rem;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  background: var(--color-primary-bright);
  border: 2px solid var(--color-background);
}

.contact-intro__body {
  display: grid;
  gap: var(--space-sm);
}

.contact-intro__body h1 {
  font-size: var(--step-4);
}

.contact-intro__role {
  color: var(--color-ink-soft);
}

.contact-intro__statement {
  color: var(--color-ink-soft);
  font-size: var(--step-1);
  line-height: 1.5;
  max-width: 46ch;
}

.contact-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-social a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-ink-soft);
  transition:
    color 180ms var(--ease-standard),
    border-color 180ms var(--ease-standard),
    transform 180ms var(--ease-standard);
}

.contact-social svg {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
}

.contact-social a:hover {
  color: var(--color-ink);
  border-color: var(--color-border-strong);
  transform: translateY(-1px);
}

.contact-card {
  display: grid;
  gap: var(--space-md);
  padding: clamp(1.75rem, 4vw, 3rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.contact-card__grid {
  display: grid;
  gap: 0 var(--space-lg);
}

.contact-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
  border-top: 1px solid var(--color-border);
}

.contact-item__icon {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.contact-item__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.contact-item__label,
.contact-card__business .contact-item__label {
  color: var(--color-muted);
  font-size: var(--step--1);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.contact-item__value {
  font-size: var(--step-0);
  font-weight: var(--font-weight-medium);
  color: var(--color-ink);
  margin-top: var(--space-3xs);
}

.contact-item__value a {
  color: inherit;
  text-decoration-color: var(--color-border-strong);
}

.contact-item__value a:hover {
  color: var(--color-primary);
}

.contact-card__business {
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  display: grid;
  gap: var(--space-3xs);
}

.contact-card__business-name {
  font-weight: var(--font-weight-medium);
  margin-top: var(--space-2xs);
}

.contact-card__business .muted {
  font-size: var(--step--1);
}

.contact-booking__head {
  margin-bottom: var(--space-lg);
}

.contact-calendar {
  padding: clamp(0.75rem, 2vw, 1.5rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  min-height: 34rem;
}

.contact-calendar__embed {
  width: 100%;
  height: 100%;
  overflow: auto;
}

/* Shown inside the reserved calendar box while the Cal.com embed is
   loading, and left visible if the third-party script is blocked or
   fails — the reserved min-height (CLS protection) stays untouched.
   Hidden as soon as Cal injects its iframe into the embed container. */
.contact-calendar__note {
  margin: 0;
  padding: var(--space-md);
  color: var(--color-muted);
  font-size: var(--step--1);
  text-align: center;
  max-width: none;
}

.contact-calendar__embed:has(*) + .contact-calendar__note {
  display: none;
}

@media (min-width: 768px) {
  .contact-intro__layout {
    flex-direction: row;
    align-items: center;
    gap: var(--space-lg);
  }

  .contact-intro__portrait {
    width: 7rem; /* 112px desktop */
    height: 7rem;
  }

  .contact-intro__status {
    width: 1rem;
    height: 1rem;
    border-width: 3px;
  }

  .contact-card__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* utilities.css */

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

.text-balance {
  text-wrap: balance;
}

.full-width {
  width: 100%;
}

.no-scroll {
  overflow: hidden;
}

.stack {
  display: grid;
  gap: var(--stack-gap, 1rem);
}

.stack--sm {
  --stack-gap: var(--space-sm);
}

.stack--md {
  --stack-gap: var(--space-md);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-gap, 1rem);
  align-items: center;
}

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

.seo-package-price {
  align-self: center;
  font-weight: 600;
}

.dark-panel {
  color: var(--color-white);
  background: var(--color-dark);
}

.blog-page-shell .cta-band.dark-panel {
  color: var(--blog-text-color);
  background: var(--blog-page-background);
}

.blog-page-shell .cta-band.dark-panel .eyebrow,
.blog-page-shell .cta-band.dark-panel h2,
.blog-page-shell .cta-band.dark-panel .lede {
  color: var(--blog-text-color);
}