/* Optimize: public site styles. Tokens follow the Optimize design system (dark primary theme). */

@font-face { font-family: 'Space Grotesk'; src: url('/fonts/space-grotesk-var.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/inter-var.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
/* Metric-matched fallbacks: local Arial/Liberation (or DejaVu on bare Linux) resized to the brand fonts, so text
   wraps the same before and after the web fonts swap in. Without them the hero headline drops a line on swap and
   the centred hero visual jumps (CLS 0.17 on PageSpeed, v1.5.3). size-adjust was tuned by sweeping the home hero
   at 320-1920px until its line breaks matched the real fonts (397/401 widths); ascent/descent = font metric / size-adjust. */
@font-face { font-family: 'Inter Fallback'; src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans'), local('Arimo'), local('Helvetica'); font-weight: 100 500; size-adjust: 107.5%; ascent-override: 90.12%; descent-override: 22.44%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('LiberationSans-Bold'), local('Arimo Bold'), local('Helvetica Bold'); font-weight: 600 900; size-adjust: 101.1%; ascent-override: 95.82%; descent-override: 23.86%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Fallback DV'; src: local('DejaVu Sans'), local('DejaVuSans'); font-weight: 100 500; size-adjust: 94.97%; ascent-override: 102.01%; descent-override: 25.40%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Fallback DV'; src: local('DejaVu Sans Bold'), local('DejaVuSans-Bold'); font-weight: 600 900; size-adjust: 84.86%; ascent-override: 114.15%; descent-override: 28.42%; line-gap-override: 0%; }
@font-face { font-family: 'Space Grotesk Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('LiberationSans-Bold'), local('Arimo Bold'), local('Helvetica Bold'); font-weight: 300 700; size-adjust: 102.6%; ascent-override: 95.91%; descent-override: 28.46%; line-gap-override: 0%; }
@font-face { font-family: 'Space Grotesk Fallback DV'; src: local('DejaVu Sans Bold'), local('DejaVuSans-Bold'); font-weight: 300 700; size-adjust: 85.47%; ascent-override: 115.13%; descent-override: 34.16%; line-gap-override: 0%; }

:root {
  /* Color: dark theme */
  --brand: #B5E61D;
  --brand-deep: #5A7A0A;
  --brand-tint: #83B30C;
  --blue: #4D7CFF;
  --blue-deep: #1F4FC9;
  --blue-tint: #0F1C3D;
  --accent: #FFFFFF;
  --surface: #000000;
  --surface-raised: #0D0D0D;
  --ink: #FFFFFF;
  --muted: #BDBDBD;
  --line: #262626;
  --on-brand: #0A0A0A;
  --danger: #FF6B5E;

  /* Type */
  --font-display: 'Space Grotesk', 'Space Grotesk Fallback', 'Space Grotesk Fallback DV', 'Helvetica Neue', Arial, sans-serif;
  --font-sans: 'Inter', 'Inter Fallback', 'Inter Fallback DV', system-ui, sans-serif;
  --display-xl: clamp(2.5rem, 6vw, 4rem);       /* 64px */
  --h1: clamp(2rem, 4.4vw, 2.75rem);            /* 44px */
  --h2: clamp(1.625rem, 3vw, 2rem);             /* 32px */
  --h3: 1.375rem;                               /* 22px */
  --lead: 1.1875rem;                            /* 19px / 30px */
  --body: 1rem;                                 /* 16px / 26px */
  --small: .875rem;                             /* 14px / 20px */
  --eyebrow: .75rem;                            /* 12px / 16px */

  /* Spacing */
  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
  --space-12: 48px;
  --space-24: 96px;
  --section: clamp(var(--space-12), 9vw, var(--space-24));
  --card-pad: var(--space-6);

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-full: 999px;

  --wrap: 1200px;
  --gutter: var(--space-6);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --stripe: linear-gradient(90deg, var(--brand-deep) 0 33.33%, var(--brand-tint) 33.33% 66.66%, var(--brand) 66.66% 100%);
}
@media (max-width: 600px) { :root { --gutter: var(--space-4); --card-pad: var(--space-4); } }

/* Light theme, used for .section-light bands */
.section-light {
  --brand: #5A7A0A;
  --brand-deep: #3F5606;
  --brand-tint: #EAF6C4;
  --blue: #1F4FC9;
  --blue-deep: #163A96;
  --blue-tint: #E6EDFC;
  --accent: #0A0A0A;
  --surface: #F7F7F2;
  --surface-raised: #FFFFFF;
  --ink: #0A0A0A;
  --muted: #555555;
  --line: #DADAD2;
  --on-brand: #FFFFFF;
  --danger: #B3261E;
  background: var(--surface);
  color: var(--ink);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: var(--surface); color: var(--ink); font: 400 var(--body)/1.625 var(--font-sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--blue); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: var(--radius-sm); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--brand); color: var(--on-brand); padding: 10px 16px; border-radius: var(--radius-md); font-weight: 600; }
.skip:focus { top: 16px; color: var(--on-brand); }
.accent { color: var(--brand); }
.muted { color: var(--muted); }
.small { font-size: var(--small); line-height: 1.43; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { width: 100%; max-width: calc(800px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* ───────── Type scale ───────── */
.h-display { font-size: var(--display-xl); line-height: 1; }
.h-xl { font-size: var(--h1); line-height: 1.08; }
.h-lg { font-size: var(--h2); line-height: 1.15; }
.h-md { font-size: var(--h3); line-height: 1.25; letter-spacing: -0.01em; }
.h-sm { font-family: var(--font-sans); font-size: var(--eyebrow); line-height: 1.33; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.eyebrow { font-size: var(--eyebrow); line-height: 1.33; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); margin: 0 0 var(--space-4); }
.eyebrow .muted { color: var(--muted); }
.lead { font-size: var(--lead); line-height: 1.58; color: var(--muted); }

/* ───────── Buttons ───────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: 12px 24px; border-radius: var(--radius-md); font-family: var(--font-sans); font-weight: 600; font-size: var(--body); line-height: 1.2; border: 1px solid transparent; cursor: pointer; transition: background .2s, color .2s, border-color .2s; white-space: nowrap; text-align: center; }
.btn-lg { min-height: 56px; padding: 16px 28px; }
.btn-primary { background: var(--brand); color: var(--on-brand); }
.btn-primary:hover { background: var(--brand-tint); color: var(--on-brand); }
.section-light .btn-primary:hover { background: var(--brand-deep); color: var(--on-brand); }
.btn-light { background: var(--accent); color: var(--surface); border-radius: var(--radius-full); }
.btn-light:hover { background: var(--muted); color: var(--surface); }
.btn-dark { background: var(--ink); color: var(--surface); }
.btn-dark:hover { background: var(--muted); color: var(--surface); }
.btn-blue { background: var(--blue-deep); color: #fff; }
.btn-blue:hover { background: var(--blue); color: #fff; }
.btn-outline { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-outline:hover { border-color: var(--muted); color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-12); }
.link-arrow { display: inline-flex; gap: .4em; align-items: center; font-weight: 600; color: var(--blue); border-bottom: 1px solid transparent; }
.link-arrow:hover { color: var(--blue); border-bottom-color: currentColor; }
.link-btn { background: none; border: 0; color: var(--blue); cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--brand-deep); }
.pill { display: inline-block; background: var(--accent); color: var(--surface); font-weight: 600; font-size: var(--small); line-height: 1.43; padding: 6px 16px; border-radius: var(--radius-full); margin: 0 0 var(--space-6); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chips span { font-size: var(--small); line-height: 1.43; font-weight: 500; padding: 2px 10px; border-radius: var(--radius-sm); border: 1px solid var(--line); color: var(--muted); }

/* ───────── Header ───────── */
.site-header { position: sticky; top: 0; z-index: 50; padding: var(--space-4) 0; transition: padding .3s var(--ease); }
.header-inner { position: relative; z-index: 0; display: flex; align-items: center; gap: var(--space-6); padding-top: 12px; padding-bottom: 12px; padding-left: calc(var(--gutter) + var(--space-4)); padding-right: calc(var(--gutter) + 12px); }
/* Glass effect on a pseudo-element: backdrop-filter on the bar itself would trap the fixed mobile menu inside it. */
.header-inner::before { content: ''; position: absolute; inset: 0 var(--gutter); z-index: -1; background: rgba(13, 13, 13, .8); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: var(--radius-md); }
.brand, .menu-toggle, .header-cta { position: relative; z-index: 2; }
.site-header.is-scrolled { padding: var(--space-2) 0; }
.brand { flex: none; display: block; }
.brand img { height: 36px; width: auto; }
.nav { margin-left: auto; }
.nav ul { list-style: none; display: flex; gap: 4px; }
.nav a { display: block; padding: var(--space-2) 14px; border-radius: var(--radius-sm); font-family: var(--font-sans); font-weight: 500; font-size: var(--small); color: var(--muted); }
.nav a:hover { color: var(--ink); background: var(--line); }
.nav a[aria-current="page"] { color: var(--brand); }
.nav .nav-cta-mobile { display: none; }
.header-cta { min-height: 44px; padding: 10px 20px; font-size: var(--small); }
.menu-toggle { display: none; width: 48px; height: 48px; border-radius: var(--radius-md); border: 1px solid var(--line); background: transparent; cursor: pointer; position: relative; margin-left: auto; }
.menu-toggle span:not(.sr-only) { position: absolute; left: 14px; right: 14px; height: 2px; background: var(--ink); transition: transform .25s var(--ease), top .25s; }
.menu-toggle span:nth-child(1) { top: 19px; }
.menu-toggle span:nth-child(2) { top: 27px; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { top: 23px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { top: 23px; transform: rotate(-45deg); }

@media (max-width: 1080px) {
  .header-cta { display: none; }
  .menu-toggle { display: block; }
  .nav { position: fixed; inset: 0; top: 0; background: rgba(0, 0, 0, .97); padding: 110px var(--gutter) 40px; display: flex; flex-direction: column; gap: var(--space-6); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; z-index: 1; overflow-y: auto; }
  .nav.is-open { opacity: 1; visibility: visible; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav a { font-family: var(--font-display); font-weight: 600; font-size: var(--h2); line-height: 1.15; letter-spacing: -0.02em; padding: 10px 0; color: var(--ink); }
  .nav a:hover { background: none; }
  .nav .nav-cta-mobile { display: inline-flex; align-self: flex-start; }
  body.menu-open { overflow: hidden; }
}

/* ───────── Hero ───────── */
.hero { padding: var(--space-12) 0 var(--section); }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-12); align-items: center; }
.hero-title { font-size: var(--display-xl); line-height: 1; margin-bottom: var(--space-6); }
.hero-lead { font-size: var(--lead); line-height: 1.58; color: var(--muted); max-width: 36em; }
.hero-proof { list-style: none; display: flex; gap: var(--space-12); margin-top: var(--space-12); color: var(--muted); font-size: var(--small); line-height: 1.43; }
.hero-proof strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--h2); line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); }
/* Hero visual: photo on the lime stripe panel, with an animated growth projection, a lead ping and Alvin's note.
   Everything below is HTML/SVG + CSS (transform, opacity, stroke-dashoffset only), so it costs no extra requests. */
@font-face { font-family: 'Caveat Note'; src: url('/fonts/caveat-note-v2.woff2') format('woff2'); font-weight: 600; font-display: swap; }
.hero-media { position: relative; max-width: 500px; justify-self: end; width: 100%; isolation: isolate; padding: 0 0 24px; }
.hero-media::before { content: ''; position: absolute; z-index: -1; left: 34%; right: -14px; top: 40px; bottom: 0; background: var(--stripe); border-radius: var(--radius-md); }
.hero-photo { display: block; width: 88%; margin-left: auto; }
.hero-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-md); background: #2a2622; }

.hg-card { position: absolute; left: 0; bottom: 0; z-index: 2; width: 272px; margin: 0; padding: 14px 16px 12px; background: rgba(10, 10, 10, .92); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); color: var(--ink); }
.hg-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: var(--eyebrow); line-height: 1.33; color: var(--muted); }
.hg-tag { font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); border: 1px dashed rgba(181, 230, 29, .5); border-radius: var(--radius-full); padding: 1px 8px; }
.hg-value { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 2px; font-family: var(--font-display); font-weight: 600; font-size: 2rem; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.hg-delta { font-family: var(--font-sans); font-size: var(--small); font-weight: 600; color: var(--brand); letter-spacing: 0; }
.hg-chart { display: block; width: 100%; height: auto; overflow: visible; }
.hg-grid path { stroke: #262626; stroke-width: 1; }
.hg-band { fill: rgba(181, 230, 29, .1); }
.hg-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.hg-draw-1 { stroke: #8C8C8C; }
.hg-proj { stroke: var(--brand); stroke-dasharray: 5 5; }
.hg-now { stroke: #3a3a3a; stroke-width: 1; stroke-dasharray: 2 3; }
.hg-dot { fill: var(--brand); stroke: #0A0A0A; stroke-width: 2; }
.hg-ring { fill: none; stroke: var(--brand); stroke-width: 1.5; opacity: 0; }
.hg-axis { display: flex; justify-content: space-between; margin: 4px 0 0; font-size: 11px; line-height: 1.3; color: #8C8C8C; }
.hg-axis span:nth-child(2) { margin-left: -32px; }
.hg-by { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: var(--eyebrow); line-height: 1.33; color: var(--muted); }
.hg-by img, .hg-team { width: 28px; height: 28px; border-radius: var(--radius-full); border: 1px solid var(--brand); flex: none; }
.hg-by a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--brand); text-underline-offset: 2px; }

.hg-ping { position: absolute; z-index: 2; top: 22px; right: -18px; display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px 8px 10px; background: #fff; color: #0A0A0A; border-radius: var(--radius-full); font-size: var(--eyebrow); line-height: 1.33; box-shadow: 0 10px 28px rgba(0, 0, 0, .35); white-space: nowrap; }
.hg-ping-dot { width: 10px; height: 10px; border-radius: var(--radius-full); background: #2ACB42; box-shadow: 0 0 0 3px rgba(42, 203, 66, .22); flex: none; }
.hg-ping-time { color: #6B6B6B; }

.hg-note { position: absolute; z-index: 3; left: 4px; top: 30%; width: 128px; margin: 0; padding: 10px 12px 12px; background: #FFF6C9; color: #1B1B1B; font-family: 'Caveat Note', 'Segoe Print', 'Bradley Hand', cursive; font-weight: 600; font-size: 1.3rem; line-height: 1.05; transform: rotate(-5deg); box-shadow: 0 10px 22px rgba(0, 0, 0, .35); border-radius: 2px; }
.hg-note::before { content: ''; position: absolute; left: 50%; top: -9px; width: 46px; height: 18px; margin-left: -23px; background: rgba(255, 255, 255, .55); transform: rotate(3deg); }
.hg-note span { display: block; }
.hg-sign { margin-top: 4px; font-size: 1.05rem; color: #5A7A0A; text-align: right; }
.hg-arrow { position: absolute; left: 34px; top: 100%; width: 58px; height: 76px; overflow: visible; }
.hg-arrow path { fill: none; stroke: var(--brand); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }

/* Motion: a short build-in on load, then only the end-point pulse keeps going. */
@media (prefers-reduced-motion: no-preference) {
  .hg-card { animation: hg-rise .7s var(--ease) .15s both; }
  .hg-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: hg-draw .7s ease-out forwards; }
  .hg-draw-1 { animation-delay: .5s; }
  .hg-draw-2 { animation-duration: 1.4s; animation-delay: 1.1s; animation-timing-function: cubic-bezier(.45, 0, .3, 1); }
  .hg-band, .hg-area { opacity: 0; animation: hg-fade .9s ease-out 1.5s forwards; }
  .hg-dot { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: hg-pop .45s cubic-bezier(.3, 1.6, .5, 1) 2.4s forwards; }
  .hg-ring { transform-box: fill-box; transform-origin: center; animation: hg-pulse 2.4s ease-out 2.8s infinite; }
  .hg-ping { animation: hg-slide .6s var(--ease) 2.7s both; }
  .hg-ping-dot { animation: hg-blink 2.4s ease-in-out 3.3s infinite; }
  .hg-note { animation: hg-stick .6s var(--ease) 1.8s both; }
  .hg-draw-3 { animation-delay: 2.3s; }
}
.hg-wait, .hg-wait * { animation-play-state: paused !important; }
@keyframes hg-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes hg-draw { to { stroke-dashoffset: 0; } }
@keyframes hg-fade { to { opacity: 1; } }
@keyframes hg-pop { to { transform: scale(1); } }
@keyframes hg-pulse { 0% { opacity: .9; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(3.2); } }
@keyframes hg-slide { from { opacity: 0; transform: translate(12px, -6px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes hg-blink { 0%, 100% { box-shadow: 0 0 0 3px rgba(42, 203, 66, .22); } 50% { box-shadow: 0 0 0 6px rgba(42, 203, 66, .08); } }
@keyframes hg-stick { from { opacity: 0; transform: rotate(-12deg) scale(.9); } to { opacity: 1; transform: rotate(-5deg); } }
@keyframes hg-stick-m { from { opacity: 0; transform: rotate(10deg) scale(.9); } to { opacity: 1; transform: rotate(4deg); } }

@media (max-width: 1240px) { .hg-ping { right: 0; } }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { justify-self: center; max-width: 420px; }
  .hide-sm { display: none; }
}
/* Phones: get the headline, the primary CTA and its risk-reducer into the first screen, proof right under them. */
@media (max-width: 600px) {
  .site-header { padding: var(--space-2) 0; }
  .hero { padding: var(--space-4) 0 var(--space-6); }
  .hero-grid { gap: var(--space-6); }
  .hero-copy { display: flex; flex-direction: column; align-items: flex-start; }
  .hero .pill { font-size: var(--eyebrow); line-height: 1.33; padding: 5px 12px; margin-bottom: var(--space-4); max-width: 100%; }
  .hero-title { font-size: clamp(1.75rem, 9.4vw, 2.25rem); line-height: 1.05; overflow-wrap: break-word; margin-bottom: var(--space-4); }
  .hero-lead { font-size: var(--body); line-height: 1.55; margin: 0; }
  .hero-geo { display: none; }
  /* Flatten the button row so the note sits under the primary button, not under "See our work". */
  .hero .btn-row { display: contents; }
  .hero .btn { width: 100%; }
  .hero .btn-primary { order: 1; margin-top: var(--space-6); }
  .hero .cta-note { order: 2; align-self: stretch; text-align: center; margin-top: var(--space-2); font-size: .8125rem; }
  .hero .btn-outline { order: 3; min-height: 48px; padding: 12px 24px; margin-top: var(--space-4); }
  .hero-proof { order: 4; align-self: stretch; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--line); font-size: var(--eyebrow); line-height: 1.33; }
  .hero-proof strong { font-size: 1.5rem; }
  /* A squarer crop so the photo doesn't add a full screen of scroll; overlays sit inside the photo. */
  .hero-media { max-width: none; padding: 0; }
  .hero-media::before { display: none; }
  .hero-photo { width: 100%; }
  .hero-photo img { aspect-ratio: 4 / 3; object-position: 50% 36%; }
  .hg-card { position: relative; left: auto; bottom: auto; width: auto; margin: -44px 12px 0; padding: 12px 14px 10px; }
  .hg-value { font-size: 1.625rem; }
  .hg-by { margin-top: 8px; padding-top: 8px; }
  .hg-ping { top: 10px; right: 10px; padding: 6px 12px 6px 8px; }
  .hg-ping-time { display: none; }
  .hg-note { left: 12px; top: 16px; width: 98px; font-size: 1.05rem; padding: 8px 10px 10px; transform: rotate(4deg); }
  .hg-note::before { width: 34px; margin-left: -17px; }
  .hg-arrow { display: none; }
  @media (prefers-reduced-motion: no-preference) { .hg-note { animation-name: hg-stick-m; } }
}

/* ───────── Marquee ───────── */
.marquee { overflow: hidden; padding: var(--space-6) 0; }
.marquee-row { background: var(--surface-raised); color: var(--ink); transform: rotate(-2deg); margin: 0 -2%; overflow: hidden; border-block: 1px solid var(--line); }
.marquee-row.is-alt { background: var(--accent); color: var(--surface); transform: rotate(1.5deg); margin-top: -10px; border-color: var(--accent); }
.marquee-track { display: flex; gap: var(--space-6); width: max-content; padding: var(--space-4) 0; animation: marquee 40s linear infinite; align-items: center; }
.marquee-row.is-alt .marquee-track { animation-direction: reverse; animation-duration: 34s; }
.marquee-track span { font-family: var(--font-display); font-weight: 600; font-size: var(--h2); line-height: 1.15; letter-spacing: -0.02em; white-space: nowrap; }
.marquee-track i { font-style: normal; font-size: var(--h3); color: var(--brand); }
.marquee-row.is-alt .marquee-track i { color: var(--brand-deep); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ───────── Sections ───────── */
.section { padding: var(--section) 0; }
.section-tight { padding: var(--space-12) 0; }
.section-flush { padding-top: 0; }
.section-head { margin-bottom: var(--space-12); max-width: 800px; }
.section-head.split { max-width: none; display: grid; grid-template-columns: 1fr minmax(0, 420px); gap: var(--space-6); align-items: end; }
.section-head.split > div:last-child { justify-self: end; text-align: left; }
.section-head.split p { color: var(--muted); }
.section-head .h-xl, .section-head .h-lg { margin: 0; }
@media (max-width: 760px) { .section-head.split { grid-template-columns: 1fr; } .section-head.split > div:last-child { justify-self: start; } }

/* Cards: surface-raised, radius-md, 1px line border (borders, not shadows) */
.stat, .service-card, .testi-card, .post-card, .contact-form-wrap, .values-grid li, .outcome { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); }

/* About strip + stats */
.about-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-12); align-items: end; margin-bottom: var(--space-12); }
.about-grid .h-lg { margin: 0; }
.about-copy p { color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); margin: 0; }
.stat { padding: var(--card-pad); display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.stat dd { margin: 0 0 var(--space-2); font-family: var(--font-display); font-weight: 600; font-size: var(--display-xl); line-height: 1; letter-spacing: -0.02em; color: var(--ink); }
.stat:first-child dd { color: var(--brand); }
.stat dt { color: var(--muted); font-size: var(--small); line-height: 1.43; }
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; gap: var(--space-6); } .stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } }

/* Service list (home) */
.service-list { list-style: none; border-top: 1px solid var(--line); }
.service-row { border-bottom: 1px solid var(--line); }
.service-row a { display: grid; grid-template-columns: 48px 1fr 200px 56px; gap: var(--space-6); align-items: center; padding: var(--space-6) 0; color: var(--ink); transition: padding .3s var(--ease); }
.service-row a:hover { padding-left: 12px; color: var(--ink); }
.service-num { font-family: var(--font-display); font-weight: 600; color: var(--muted); font-size: var(--body); }
.service-main { display: grid; gap: var(--space-2); }
.service-title { font-family: var(--font-display); font-weight: 600; font-size: var(--h2); line-height: 1.15; letter-spacing: -0.02em; }
.service-summary { color: var(--muted); max-width: 48em; }
.service-thumb img { border-radius: var(--radius-md); aspect-ratio: 3 / 2; object-fit: cover; transition: transform .4s var(--ease); }
.service-row a:hover .service-thumb img { transform: scale(1.04); }
.service-go { width: 56px; height: 56px; border-radius: var(--radius-full); border: 1px solid var(--ink); display: grid; place-items: center; font-size: var(--h3); transition: background .2s, color .2s; }
.service-row a:hover .service-go { background: var(--ink); color: var(--surface); }
@media (max-width: 900px) {
  .service-row a { grid-template-columns: 1fr 48px; }
  .service-num, .service-thumb { display: none; }
  .service-go { width: 48px; height: 48px; }
}

/* Service cards (services page) */
.service-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.service-card { overflow: hidden; display: flex; flex-direction: column; }
.service-card-media img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; transition: transform .5s var(--ease); }
.service-card:hover .service-card-media img { transform: scale(1.04); }
.service-card-media { overflow: hidden; }
.service-card-body { padding: var(--card-pad); display: grid; gap: var(--space-4); align-content: start; }
.service-card-body h2, .service-card-body h3 { font-size: var(--h3); line-height: 1.25; letter-spacing: -0.01em; margin: 0; }
.service-card-body p { color: var(--muted); margin: 0; }
.service-card .service-num { color: var(--brand); font-family: var(--font-sans); font-size: var(--eyebrow); letter-spacing: .08em; }
.service-card:nth-child(5):last-child { grid-column: 1 / -1; flex-direction: row; }
.service-card:nth-child(5):last-child .service-card-media { flex: 1; }
.service-card:nth-child(5):last-child .service-card-body { flex: 1; align-content: center; }
@media (max-width: 760px) { .service-cards { grid-template-columns: 1fr; } .service-card:nth-child(5):last-child { flex-direction: column; } }

/* Service detail */
.service-detail { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: start; }
.service-detail-media { position: sticky; top: 110px; display: grid; gap: var(--space-4); }
.service-detail-media img { border-radius: var(--radius-md); aspect-ratio: 3 / 2; object-fit: cover; }
.check-list { list-style: none; display: grid; gap: var(--space-4); margin-bottom: var(--space-12); }
.check-list li { position: relative; padding-left: 36px; color: var(--ink); }
.check-list li::before { content: '✓'; position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: var(--radius-full); background: var(--blue-tint); color: var(--blue); font-size: .8rem; font-weight: 700; display: grid; place-items: center; }
.outcome { padding: var(--card-pad); }
.outcome p:last-child { font-family: var(--font-display); font-weight: 600; font-size: var(--h3); line-height: 1.25; letter-spacing: -0.01em; margin: 0; }
.other-services { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); }
.other-services a { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--card-pad); border: 1px solid var(--line); border-radius: var(--radius-md); font-family: var(--font-display); font-weight: 600; font-size: var(--h3); line-height: 1.25; letter-spacing: -0.01em; transition: border-color .2s, background .2s; }
.other-services a:hover { border-color: var(--muted); background: var(--surface-raised); color: var(--ink); }
@media (max-width: 900px) { .service-detail { grid-template-columns: 1fr; } .service-detail-media { position: static; } }

/* Work */
.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-12) var(--space-6); }
.work-card { display: grid; gap: var(--space-6); }
.work-media { display: block; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-raised); border: 1px solid var(--line); }
.work-media picture { display: block; }
.work-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .6s var(--ease); }
.work-card:hover .work-media img { transform: scale(1.04); }
.work-body h3 { font-size: var(--h3); line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 var(--space-2); }
.work-body p { color: var(--muted); margin-bottom: var(--space-4); }
.work-meta { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); }
.work-meta span { font-size: var(--eyebrow); line-height: 1.33; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px 10px; }
@media (max-width: 760px) { .work-grid { grid-template-columns: 1fr; } }

/* Process */
.process-grid { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); counter-reset: step; }
.process-grid li { border-top: 2px solid var(--line); padding-top: var(--space-6); }
.process-grid li:first-child { border-top-color: var(--brand); }
.process-grid h3 { font-size: var(--h3); line-height: 1.25; letter-spacing: -0.01em; margin: var(--space-4) 0 var(--space-2); }
.process-grid p { color: var(--muted); margin: 0; }
.process-num { font-size: var(--eyebrow); line-height: 1.33; font-weight: 600; letter-spacing: .08em; color: var(--brand); }
@media (max-width: 900px) { .process-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-12) var(--space-6); } }
@media (max-width: 520px) { .process-grid { grid-template-columns: 1fr; } }

/* Testimonials */
.testi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.testi-card { margin: 0; padding: var(--card-pad); display: flex; flex-direction: column; gap: var(--space-6); }
@media (min-width: 900px) { .testi-card { padding: var(--space-12); } }
.testi-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.testi-num { font-family: var(--font-display); font-weight: 600; color: var(--muted); }
.testi-highlight { background: var(--accent); color: var(--surface); font-weight: 600; font-size: var(--small); line-height: 1.43; padding: 4px 14px; border-radius: var(--radius-full); }
.testi-card blockquote { margin: 0; flex: 1; }
.testi-card blockquote p { color: var(--ink); }
.testi-card blockquote p:first-child::before { content: '“'; font-family: var(--font-display); color: var(--muted); font-size: 2.6rem; line-height: 0; vertical-align: -0.35em; margin-right: 4px; }
.testi-card figcaption { display: flex; gap: var(--space-4); align-items: center; border-top: 1px solid var(--line); padding-top: var(--space-6); }
.testi-card figcaption strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--body); }
.testi-card figcaption small { color: var(--muted); font-size: var(--small); }
.testi-avatar { width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--accent); color: var(--surface); display: inline-grid; place-items: center; font-family: var(--font-display); font-weight: 600; flex: none; }
@media (max-width: 760px) { .testi-grid { grid-template-columns: 1fr; } }

/* Posts */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.post-card { display: flex; flex-direction: column; overflow: hidden; transition: border-color .2s; }
.post-card:hover { border-color: var(--muted); }
.post-media { display: block; overflow: hidden; aspect-ratio: 16 / 9; background: var(--surface); }
.post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.post-card:hover .post-media img { transform: scale(1.04); }
.post-media-fallback { display: grid; place-items: center; height: 100%; font-family: var(--font-display); font-size: var(--display-xl); font-weight: 600; color: var(--on-brand); background: var(--stripe); }
.post-body { padding: var(--card-pad); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.post-body h3 { font-size: var(--h3); line-height: 1.25; letter-spacing: -0.01em; margin: 0; }
.post-body p { color: var(--muted); margin: 0; }
.post-meta { display: flex; gap: var(--space-4); font-size: var(--small); line-height: 1.43; color: var(--muted); }
.post-meta > * + *::before { content: '·'; margin-right: var(--space-4); }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: var(--space-2); }
.tags li, .tags a { font-size: var(--small); line-height: 1.43; padding: 2px 10px; border-radius: var(--radius-sm); border: 1px solid var(--line); color: var(--muted); }
.tags a:hover { border-color: var(--blue); color: var(--blue); }
.post-featured { margin-bottom: var(--space-6); }
.post-card-lg { display: grid; grid-template-columns: 1.3fr 1fr; }
.post-card-lg .post-media { aspect-ratio: auto; min-height: 320px; }
.post-card-lg .post-body { padding: var(--space-12); justify-content: center; }
.post-card-lg h3 { font-size: var(--h2); line-height: 1.15; letter-spacing: -0.02em; }
.tag-filter { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-12); }
.tag-filter a { padding: 6px 16px; border: 1px solid var(--line); border-radius: var(--radius-full); font-size: var(--small); line-height: 1.43; }
.tag-filter a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.pager { display: flex; gap: var(--space-2); justify-content: center; margin-top: var(--space-12); }
.pager a { min-width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-md); }
.pager a[aria-current="page"] { background: var(--accent); color: var(--surface); border-color: var(--accent); }
.empty-state { text-align: center; padding: var(--space-12) var(--space-6); border: 1px dashed var(--line); border-radius: var(--radius-md); }
.empty-state p { color: var(--muted); }
@media (max-width: 1000px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .post-grid { grid-template-columns: 1fr; } .post-card-lg { grid-template-columns: 1fr; } .post-card-lg .post-media { min-height: 0; aspect-ratio: 16 / 9; } .post-card-lg .post-body { padding: var(--card-pad); } }

/* ───────── Inner pages ───────── */
.page-hero { padding: var(--space-12) 0; }
@media (min-width: 900px) { .page-hero { padding: var(--space-24) 0 var(--space-12); } }
.page-hero .h-display { max-width: 18ch; }
.page-lead { font-size: var(--lead); line-height: 1.58; color: var(--muted); max-width: 40em; margin-top: var(--space-6); }
.crumbs { display: flex; flex-wrap: wrap; gap: 10px; font-size: var(--small); line-height: 1.43; color: var(--muted); margin-bottom: var(--space-6); }
.crumbs a:hover { color: var(--ink); }
.error-hero { min-height: 60vh; }
.error-code { font-family: var(--font-display); font-size: calc(var(--display-xl) * 2); font-weight: 600; color: var(--brand); line-height: 1; margin: 0; letter-spacing: -0.03em; }

.about-story { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-12); align-items: start; }
.about-story-copy p { color: var(--muted); }
.about-story-copy p:first-child { font-size: var(--lead); line-height: 1.58; color: var(--ink); }
.stats-stack { grid-template-columns: repeat(2, 1fr); }
.values-grid { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.values-grid li { padding: var(--card-pad); }
.values-grid h3 { font-size: var(--h3); line-height: 1.25; letter-spacing: -0.01em; margin: var(--space-4) 0 var(--space-2); }
.values-grid p { color: var(--muted); margin: 0; }
@media (max-width: 1000px) { .values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .about-story { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .values-grid { grid-template-columns: 1fr; } }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--space-12); align-items: start; }
.contact-info { display: grid; gap: var(--space-12); }
.contact-block .h-sm { margin-bottom: var(--space-2); }
.contact-big { font-family: var(--font-display); font-size: var(--h3); line-height: 1.25; letter-spacing: -0.01em; font-weight: 600; word-break: break-word; }
.contact-block p { margin: 0 0 var(--space-2); }
.contact-form-wrap { padding: var(--card-pad); }
@media (min-width: 900px) { .contact-form-wrap { padding: var(--space-12); } }
.contact-form { display: grid; gap: var(--space-6); }
.contact-form .h-md { margin-bottom: 0; }
.contact-form .btn { justify-self: start; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.field { display: grid; gap: var(--space-2); font-size: var(--small); line-height: 1.43; font-weight: 500; }
.field small { color: var(--muted); font-weight: 400; }
.field input, .field select, .field textarea { width: 100%; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px var(--space-4); font: 400 var(--body)/1.4 var(--font-sans); transition: border-color .2s, box-shadow .2s; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.field textarea { resize: vertical; min-height: 150px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-errors { background: rgba(255, 107, 94, .08); border: 1px solid var(--danger); color: var(--danger); border-radius: var(--radius-md); padding: var(--space-4) var(--space-6); }
.form-errors ul { padding-left: 1.1em; }
.form-success { text-align: center; padding: var(--space-6) 0; }
.form-success p { color: var(--muted); }
.success-icon { width: 72px; height: 72px; border-radius: var(--radius-full); background: var(--brand); color: var(--on-brand); font-size: 2rem; font-weight: 700; display: inline-grid; place-items: center; margin-bottom: var(--space-6); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } .contact-form .btn { justify-self: stretch; } }

/* ───────── Article / prose ───────── */
.preview-bar { background: var(--blue-tint); color: var(--ink); border-bottom: 1px solid var(--blue); text-align: center; padding: 10px var(--space-4); font-size: var(--small); font-weight: 500; }
.preview-bar a { color: var(--blue); text-decoration: underline; }
.article-head { padding-top: var(--space-12); padding-bottom: var(--space-6); }
@media (min-width: 900px) { .article-head { padding-top: var(--space-24); } }
.article-head .tags { margin: 0 0 var(--space-4); padding: 0; }
.article-title { font-size: var(--h1); line-height: 1.08; }
.article-lead { font-size: var(--lead); line-height: 1.58; color: var(--muted); }
.article-meta { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; color: var(--muted); font-size: var(--small); line-height: 1.43; margin-top: var(--space-6); }
.byline { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 500; }
.byline .testi-avatar { width: 36px; height: 36px; font-size: .85rem; }
.article-cover { margin: 0 auto var(--space-12); max-width: calc(1140px + 2 * var(--gutter)); }
.article-cover img { width: 100%; border-radius: var(--radius-md); aspect-ratio: 16 / 9; object-fit: cover; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: center; max-width: calc(1140px + 2 * var(--gutter)); }
.article-layout:has(.toc) { grid-template-columns: 220px minmax(0, 760px); gap: var(--space-12); }
.article-layout:not(:has(.toc)) .article-body { max-width: 760px; margin: 0 auto; width: 100%; }
.toc { position: sticky; top: 110px; align-self: start; font-size: var(--small); line-height: 1.43; }
.toc ol { list-style: none; display: grid; gap: 10px; border-left: 1px solid var(--line); padding-left: var(--space-4); }
.toc a { color: var(--muted); }
.toc a:hover { color: var(--ink); }
@media (max-width: 1000px) { .article-layout:has(.toc) { grid-template-columns: minmax(0, 1fr); } .toc { display: none; } }

.prose { font-size: 1.0625rem; line-height: 1.7; color: var(--ink); max-width: 760px; }
.prose > * + * { margin-top: 1.1em; }
.prose p { margin-bottom: 0; }
.prose h2 { font-size: var(--h2); line-height: 1.15; color: var(--ink); margin-top: 1.8em; margin-bottom: 0; }
.prose h3 { font-size: var(--h3); line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); margin-top: 1.6em; margin-bottom: 0; }
.prose h4 { font-size: var(--lead); line-height: 1.4; letter-spacing: -0.01em; color: var(--ink); margin-top: 1.4em; margin-bottom: 0; }
.prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: .4em; }
.prose li > ul, .prose li > ol { margin-top: .4em; }
.prose ul.checklist { list-style: none; padding-left: 0; }
.prose .check { display: inline-block; width: 18px; height: 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-right: 10px; vertical-align: -3px; }
.prose .check.is-on { background: var(--blue); border-color: var(--blue); }
.prose blockquote { margin: 1.6em 0; padding: var(--space-6) 0; border-block: 1px solid var(--line); }
.prose blockquote p { font-family: var(--font-display); font-weight: 600; font-size: var(--h3); line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); }
.prose blockquote cite { display: block; margin-top: var(--space-2); color: var(--muted); font-style: normal; font-size: var(--small); }
.prose pre { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4) var(--space-6); overflow-x: auto; font-size: var(--small); line-height: 1.6; }
.prose code { font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size: .92em; }
.prose :not(pre) > code { background: var(--surface-raised); border: 1px solid var(--line); padding: .1em .4em; border-radius: var(--radius-sm); }
.prose mark { background: rgba(181, 230, 29, .25); color: inherit; padding: 0 .15em; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
.prose figure { margin: 2em 0; }
.prose figure img { border-radius: var(--radius-md); width: 100%; }
.prose figure.has-border img { border: 1px solid var(--line); }
.prose figure.has-bg { background: var(--surface-raised); border: 1px solid var(--line); padding: var(--space-6); border-radius: var(--radius-md); }
.prose figure.has-bg img { max-width: 70%; margin: 0 auto; }
@media (min-width: 1000px) { .prose figure.is-wide { margin-left: -120px; margin-right: -120px; } }
.prose figcaption { margin-top: .7em; text-align: center; color: var(--muted); font-size: var(--small); }
.embed-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-raised); }
.embed-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.table-wrap { overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--small); }
.prose th, .prose td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; vertical-align: top; }
.prose th { background: var(--surface-raised); color: var(--ink); }
.prose .block-btn .btn { text-decoration: none; color: var(--on-brand); }
.prose .block-btn .btn-outline { color: var(--ink); }
.big-figure { font-family: var(--font-display); font-weight: 600; font-size: var(--h2); line-height: 1.15; color: var(--ink); }

.item-fields { display: grid; gap: var(--space-4); border-top: 1px solid var(--line); padding-top: var(--space-6); margin-top: 2.4em; }
.item-fields div { display: grid; grid-template-columns: 180px 1fr; gap: var(--space-4); }
.item-fields dt { color: var(--muted); font-size: var(--small); }
.item-fields dd { margin: 0; }
.swatch { display: inline-block; width: 18px; height: 18px; border-radius: var(--radius-sm); vertical-align: -3px; border: 1px solid var(--line); }

.article-cta { margin-top: 3em !important; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--card-pad); }
@media (min-width: 900px) { .article-cta { padding: var(--space-12); } }
.article-cta h2 { color: var(--ink); margin: 0 0 var(--space-2); font-size: var(--h2); }
.article-cta p { color: var(--muted); margin-bottom: var(--space-6); }
.article-cta .btn { background: var(--brand); color: var(--on-brand); text-decoration: none; }
.article-cta .btn:hover { background: var(--brand-tint); color: var(--on-brand); }
.share { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; font-size: var(--small); color: var(--muted); border-top: 1px solid var(--line); padding-top: var(--space-6); margin-top: 2em !important; }
.share a { color: var(--blue); text-decoration: none; }
.share a:hover { text-decoration: underline; }
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-12); }
.post-nav a { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4) var(--space-6); display: grid; gap: 4px; }
.post-nav a:hover { border-color: var(--muted); color: var(--ink); }
.post-nav small { color: var(--muted); }
.post-nav span { font-family: var(--font-display); font-weight: 600; font-size: var(--body); line-height: 1.3; }
.post-nav-next { text-align: right; grid-column: 2; }
@media (max-width: 600px) { .post-nav { grid-template-columns: 1fr; } .post-nav-next { grid-column: 1; } .item-fields div { grid-template-columns: 1fr; gap: 2px; } }

/* ───────── Footer ───────── */
.site-footer { border-top: 1px solid var(--line); padding: var(--section) 0 var(--space-6); margin-top: 0; }
.footer-cta { display: flex; justify-content: space-between; align-items: end; gap: var(--space-6); flex-wrap: wrap; padding-bottom: var(--space-12); border-bottom: 1px solid var(--line); margin-bottom: var(--space-12); }
.footer-title { font-size: var(--display-xl); line-height: 1; margin: 0; max-width: 12ch; }
.footer-cta-text { color: var(--muted); max-width: 34em; margin: var(--space-4) 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: var(--space-12) var(--space-6); }
.footer-about .small a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.footer-contact { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-top: var(--space-12); font-size: var(--small); }
.footer-contact a { color: var(--ink); }
@media (max-width: 1080px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } .footer-about { grid-column: 1 / -1; } }
.footer-grid h3 { font-family: var(--font-sans); font-size: var(--eyebrow); line-height: 1.33; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--space-4); }
.footer-grid ul { list-style: none; display: grid; gap: 10px; }
.footer-grid li a { word-break: break-word; }
.footer-about img { height: 36px; width: auto; margin-bottom: var(--space-4); }
.footer-about p { color: var(--muted); max-width: 30em; }
.footer-bottom { display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; border-top: 1px solid var(--line); margin-top: var(--space-12); padding-top: var(--space-6); font-size: var(--small); line-height: 1.43; color: var(--muted); }
.footer-bottom p { margin: 0; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* ───────── Conversion & AEO components ───────── */
.cta-note { color: var(--muted); font-size: var(--small); line-height: 1.43; margin: var(--space-4) 0 0; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-12); }

.pain-grid { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.pain-grid li { padding: var(--card-pad); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); border-top: 2px solid var(--danger); }
.pain-grid h3 { font-size: var(--h3); line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 var(--space-2); }
.pain-grid p { color: var(--muted); margin: 0; }
.pain-answer { font-size: var(--lead); line-height: 1.58; max-width: 48em; margin: var(--space-12) 0 0; color: var(--muted); }
.pain-answer strong { color: var(--ink); font-weight: 600; }
@media (max-width: 1000px) { .pain-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pain-grid { grid-template-columns: 1fr; } }

.group-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.group-card { padding: var(--card-pad); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); display: flex; flex-direction: column; }
@media (min-width: 900px) { .group-card { padding: var(--space-12) var(--space-6) var(--space-6); } }
.group-card h3 { font-size: var(--h3); line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 var(--space-2); }
.group-card ul { list-style: none; margin-top: auto; padding-top: var(--space-6); border-top: 1px solid var(--line); }
.group-card li a { display: flex; justify-content: space-between; gap: var(--space-4); padding: 10px 0; font-weight: 500; }
.group-card li + li { border-top: 1px solid var(--line); }
@media (max-width: 900px) { .group-grid { grid-template-columns: 1fr; } }
.group-jump { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.group-jump a { padding: 8px 16px; border: 1px solid var(--line); border-radius: var(--radius-full); font-size: var(--small); color: var(--muted); }
.group-jump a:hover { color: var(--ink); border-color: var(--muted); }

.answer-box { border-left: 3px solid var(--brand); background: var(--surface-raised); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: var(--space-6); margin-bottom: var(--space-12); }
.answer-box .h-sm { margin: 0 0 var(--space-2); color: var(--brand); }
.answer-box p { font-size: var(--lead); line-height: 1.58; margin: 0; }
.fit-list { list-style: none; display: grid; gap: var(--space-2); margin-bottom: var(--space-12); }
.fit-list li { position: relative; padding-left: 28px; color: var(--muted); }
.fit-list li::before { content: '→'; position: absolute; left: 0; color: var(--brand); font-weight: 700; }

.faq-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--space-12); align-items: start; }
.faq-layout .section-head { margin: 0; position: sticky; top: 110px; }
.faq-group + .faq-group { margin-top: var(--space-12); padding-top: var(--space-12); border-top: 1px solid var(--line); }
.faq-group .h-md { margin-bottom: var(--space-2); }
@media (max-width: 900px) { .faq-layout { grid-template-columns: 1fr; gap: var(--space-6); } .faq-layout .section-head { position: static; } }
.faq-list { border-top: 1px solid var(--line); }
.faq { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); padding: var(--space-6) 0; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-size: var(--lead); line-height: 1.4; letter-spacing: -0.01em; margin: 0; }
.faq summary:hover h3 { color: var(--blue); }
.faq-icon { flex: none; width: 32px; height: 32px; border-radius: var(--radius-full); border: 1px solid var(--line); position: relative; }
.faq-icon::before, .faq-icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--ink); transform: translate(-50%, -50%); transition: transform .2s var(--ease); }
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-a { padding: 0 var(--space-12) var(--space-6) 0; }
.faq-a p { color: var(--muted); margin: 0; }

/* Founder (about) and profile page */
.founder { display: grid; grid-template-columns: 360px 1fr; gap: var(--space-12); align-items: center; }
.founder-photo, .profile-photo { border-radius: var(--radius-md); aspect-ratio: 1; object-fit: cover; width: 100%; }
.founder-role { font-weight: 600; color: var(--muted); margin-top: calc(-1 * var(--space-2)); }
.founder .h-lg { margin-bottom: var(--space-2); }
@media (max-width: 760px) { .founder { grid-template-columns: 1fr; } .founder-photo { max-width: 280px; } }
.profile-hero { display: grid; grid-template-columns: 1fr 380px; gap: var(--space-12); align-items: center; }
.profile-hero .h-display { max-width: 14ch; }
.profile-photo { border: 1px solid var(--line); }
@media (max-width: 900px) { .profile-hero { grid-template-columns: 1fr; } .profile-photo { max-width: 300px; order: -1; } }
.profile-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-12); align-items: start; }
.profile-main .prose { margin-bottom: var(--space-12); }
.profile-main .prose p { color: var(--muted); }
.profile-h { margin-top: var(--space-12); }
.profile-side { display: grid; gap: var(--space-6); position: sticky; top: 110px; }
.side-card { padding: var(--card-pad); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); }
.side-card .h-sm { margin-bottom: var(--space-4); }
.facts { margin: 0; display: grid; gap: var(--space-4); }
.facts dt { color: var(--muted); font-size: var(--small); }
.facts dd { margin: 0; font-weight: 500; }
.side-links { list-style: none; display: grid; gap: var(--space-2); }
.side-links a { color: var(--blue); word-break: break-word; }
@media (max-width: 1000px) { .profile-grid { grid-template-columns: 1fr; } .profile-side { position: static; } }
.timeline { list-style: none; border-left: 2px solid var(--line); margin-left: 6px; }
.timeline li { position: relative; display: grid; grid-template-columns: 150px 1fr; gap: var(--space-6); padding: 0 0 var(--space-12) var(--space-6); }
.timeline li::before { content: ''; position: absolute; left: -8px; top: 6px; width: 14px; height: 14px; border-radius: var(--radius-full); background: var(--surface); border: 2px solid var(--muted); }
.timeline li:first-child::before { background: var(--brand); border-color: var(--brand); }
.timeline-when { color: var(--muted); font-size: var(--small); line-height: 1.43; padding-top: 4px; }
.timeline h3 { font-size: var(--h3); line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 4px; }
.timeline-org { margin: 0 0 var(--space-4); font-weight: 500; }
.timeline-org a { color: var(--blue); }
@media (max-width: 600px) { .timeline li { grid-template-columns: 1fr; gap: 4px; } }

/* Free audit landing page */
.audit-grid { display: grid; grid-template-columns: 1fr minmax(0, 520px); gap: var(--space-12); align-items: start; }
.audit-grid .h-display { max-width: 13ch; }
.audit-checks { list-style: none; display: grid; gap: var(--space-4); margin-top: var(--space-12); }
.audit-checks li { display: grid; gap: 2px; padding-left: 36px; position: relative; }
.audit-checks li::before { content: '✓'; position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: var(--radius-full); background: var(--brand); color: var(--on-brand); font-size: .8rem; font-weight: 700; display: grid; place-items: center; }
.audit-checks span { color: var(--muted); }
@media (max-width: 1000px) { .audit-grid { grid-template-columns: 1fr; } }
.audit-teaser { padding: var(--card-pad); border: 1px solid var(--brand); border-radius: var(--radius-md); }
.audit-teaser p { color: var(--muted); }

/* Blog: author */
.byline-photo { width: 36px; height: 36px; border-radius: var(--radius-full); object-fit: cover; }
.byline small { display: block; color: var(--muted); font-weight: 400; font-size: var(--eyebrow); }
a.byline:hover { color: var(--ink); }
.author-box { display: grid; grid-template-columns: 96px 1fr; gap: var(--space-6); align-items: start; margin-top: 2em !important; padding: var(--card-pad); border: 1px solid var(--line); border-radius: var(--radius-md); }
.author-box img { width: 96px; height: 96px; border-radius: var(--radius-full); object-fit: cover; }
.author-box .eyebrow { margin-bottom: var(--space-2); }
.author-box h2 { font-size: var(--h3); margin: 0 0 var(--space-2); }
.author-box h2 a { color: var(--ink); text-decoration: none; }
.author-box p { color: var(--muted); font-size: var(--small); margin: 0 0 var(--space-2); }
@media (max-width: 560px) { .author-box { grid-template-columns: 1fr; } }
.list-cta { margin-top: var(--space-12) !important; }

/* Consent bar */
.consent { position: fixed; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); z-index: 80; max-width: 640px; margin: 0 auto; display: flex; gap: var(--space-4); align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4) var(--space-6); font-size: var(--small); line-height: 1.43; box-shadow: 0 12px 40px rgba(0, 0, 0, .5); }
.consent p { margin: 0; color: var(--muted); flex: 1 1 260px; }
.consent a { color: var(--blue); }
.consent-actions { display: flex; gap: var(--space-2); }
.consent .btn { min-height: 40px; padding: 8px 18px; font-size: var(--small); }

/* Free audit quiz: modal, inline on the audit page, and the early-exit popup */
.aq-lock, .aq-lock body { overflow: hidden; }
.aq-modal, .xp { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: var(--space-4); }
.aq-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .22s; }
.is-open > .aq-backdrop { opacity: 1; }
.aq-panel, .xp-card { position: relative; width: 100%; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); opacity: 0; transform: translateY(24px) scale(.96); transition: opacity .22s, transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.is-open .aq-panel, .is-open .xp-card { opacity: 1; transform: none; }
.aq-panel { max-width: 640px; max-height: calc(100dvh - 32px); overflow: auto; padding: var(--space-12) var(--space-12) var(--space-6); }
.aq-x { position: absolute; top: 10px; right: 10px; z-index: 2; width: 40px; height: 40px; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--muted); font-size: 28px; line-height: 1; cursor: pointer; transition: background .2s, color .2s; }
.aq-x:hover { background: var(--line); color: var(--ink); }
@media (max-width: 600px) {
  .aq-modal { padding: 0; place-items: stretch; }
  .aq-panel { max-width: none; max-height: none; height: 100dvh; border-radius: 0; border: 0; padding: 56px var(--space-4) var(--space-6); }
}

.aq { position: relative; display: grid; }
.aq > .aq-step { grid-area: 2 / 1; }
.aq-progress { height: 6px; border-radius: var(--radius-full); background: var(--line); overflow: hidden; margin-bottom: var(--space-6); }
.aq-progress span { display: block; height: 100%; width: 0; background: var(--stripe); border-radius: inherit; transition: width .6s var(--ease); }
.aq > .aq-progress { grid-area: 1 / 1; }
.aq-step { animation: aq-in .42s var(--ease) both; }
.aq-step.is-back { animation-name: aq-in-back; }
.aq-step.is-leaving { animation: aq-out .26s var(--ease) both; pointer-events: none; }
.aq-step.is-leaving.is-back { animation-name: aq-out-back; }
@keyframes aq-in { from { opacity: 0; transform: translateX(48px); } }
@keyframes aq-in-back { from { opacity: 0; transform: translateX(-48px); } }
@keyframes aq-out { to { opacity: 0; transform: translateX(-48px); } }
@keyframes aq-out-back { to { opacity: 0; transform: translateX(48px); } }
.aq-count { font-size: var(--eyebrow); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); margin: 0 0 var(--space-2); }
.aq-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 3.4vw, 1.875rem); line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 var(--space-2); outline: none; }
.aq-hint { color: var(--muted); margin: 0 0 var(--space-6); }
.aq-form { display: grid; }
.aq-form.is-shake { animation: aq-shake .4s; }
@keyframes aq-shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.aq-input-wrap { position: relative; }
.aq-input-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font-size: 1.25rem; }
.aq-input { width: 100%; min-height: 64px; padding: 14px 18px 14px 54px; background: var(--surface); color: var(--ink); border: 2px solid var(--line); border-radius: var(--radius-md); font: 500 1.1875rem/1.3 var(--font-sans); transition: border-color .2s, box-shadow .2s; }
.aq-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(181, 230, 29, .18); }
.aq-error { margin: var(--space-4) 0 0; color: var(--danger); font-size: var(--small); font-weight: 500; }
.aq-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.aq-fields .aq-wide { grid-column: 1 / -1; }
.aq-fields textarea { min-height: 72px; }
@media (max-width: 600px) { .aq-fields { grid-template-columns: 1fr; } }
.aq-fine { margin: var(--space-4) 0 0; font-size: var(--eyebrow); line-height: 1.5; color: var(--muted); }
.aq-fine a { color: var(--blue); }
.aq-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-6); }
.aq-nav .btn:disabled { opacity: .4; cursor: not-allowed; }
.aq-back { border: 0; background: none; color: var(--muted); font: 500 var(--small) var(--font-sans); padding: 10px 0; cursor: pointer; }
.aq-back:hover { color: var(--ink); }

.aq-opts { display: grid; gap: 10px; }
.aq-opts.is-grid { grid-template-columns: 1fr 1fr; }
@media (max-width: 480px) { .aq-opts.is-grid { grid-template-columns: 1fr; } }
.aq-opt { position: relative; display: flex; align-items: center; gap: 14px; min-height: 60px; width: 100%; padding: 12px 44px 12px 14px; text-align: left; background: var(--surface); color: var(--ink); border: 2px solid var(--line); border-radius: var(--radius-md); font: 500 var(--body)/1.3 var(--font-sans); cursor: pointer;
  transition: border-color .18s, background .18s, transform .18s var(--ease); animation: aq-pop .48s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(var(--i) * 55ms + 80ms); }
.aq-opt:hover { border-color: var(--muted); transform: translateY(-2px); }
.aq-opt:active { transform: scale(.98); }
.aq-opt:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.aq-opt.is-on { border-color: var(--brand); background: rgba(181, 230, 29, .1); }
.is-picked .aq-opt.is-on { animation: aq-bounce .38s cubic-bezier(.34, 1.56, .64, 1); }
.is-picked .aq-opt:not(.is-on) { opacity: .45; }
@keyframes aq-pop { from { opacity: 0; transform: translateY(14px) scale(.94); } }
@keyframes aq-bounce { 40% { transform: scale(1.04); } }
.aq-opt-icon { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--surface-raised); font-size: 1.35rem; }
.aq-opt-check { position: absolute; right: 14px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: var(--radius-full); border: 2px solid var(--line); transition: background .18s, border-color .18s; }
.aq-opt.is-on .aq-opt-check { background: var(--brand); border-color: var(--brand); animation: aq-check .3s cubic-bezier(.34, 1.56, .64, 1); }
.aq-opt.is-on .aq-opt-check::after { content: ''; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid var(--on-brand); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
@keyframes aq-check { from { transform: scale(0); } }
.aq-opt kbd { position: absolute; right: 44px; top: 50%; transform: translateY(-50%); font: 600 11px/1 var(--font-sans); color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 3px 5px; opacity: 0; transition: opacity .2s; }
@media (hover: hover) and (min-width: 700px) { .aq-opt:hover kbd { opacity: 1; } }

.aq-loading, .aq-done { position: relative; text-align: center; padding: var(--space-6) 0; }
.aq-radar { position: relative; width: 96px; height: 96px; margin: 0 auto var(--space-6); }
.aq-radar span { position: absolute; inset: 0; border-radius: var(--radius-full); border: 2px solid var(--brand); animation: aq-ping 1.8s var(--ease) infinite; }
.aq-radar span:nth-child(2) { animation-delay: .6s; }
.aq-radar span:nth-child(3) { animation-delay: 1.2s; }
.aq-radar::after { content: '🔍'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 2rem; animation: aq-wiggle 1.2s ease-in-out infinite; }
@keyframes aq-ping { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.1); opacity: 0; } }
@keyframes aq-wiggle { 50% { transform: rotate(-12deg) scale(1.08); } }
.aq-scan { list-style: none; display: grid; gap: 10px; max-width: 320px; margin: var(--space-6) auto 0; text-align: left; }
.aq-scan li { position: relative; padding-left: 32px; color: var(--muted); animation: aq-scan-row .3s var(--ease) both; animation-delay: calc(var(--i) * 650ms); }
.aq-scan li::before { content: ''; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: var(--radius-full); border: 2px solid var(--line); border-top-color: var(--brand); animation: aq-spin .7s linear infinite; }
.aq-scan li::after { content: '✓'; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: var(--radius-full); background: var(--brand); color: var(--on-brand); font-size: 12px; font-weight: 700; display: grid; place-items: center; animation: aq-check .3s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(var(--i) * 650ms + 600ms); }
@keyframes aq-scan-row { from { opacity: 0; transform: translateY(8px); } }
@keyframes aq-spin { to { transform: rotate(360deg); } }

.aq-tick { width: 88px; height: 88px; margin: 0 auto var(--space-6); display: block; }
.aq-tick circle { fill: var(--brand); transform-box: fill-box; transform-origin: center; animation: aq-check .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.aq-tick path { fill: none; stroke: var(--on-brand); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: aq-draw .4s .35s var(--ease) forwards; }
@keyframes aq-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .aq-tick path { stroke-dashoffset: 0; } }
.aq-done .aq-hint { max-width: 460px; margin-left: auto; margin-right: auto; }
.aq-done .aq-hint strong { color: var(--ink); }
.aq-done-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; }
.aq-burst { position: absolute; left: 50%; top: 68px; width: 0; height: 0; pointer-events: none; }
.aq-burst i { position: absolute; width: 8px; height: 12px; border-radius: 2px; background: var(--c); opacity: 0; animation: aq-confetti 1.1s var(--d) cubic-bezier(.2, .8, .3, 1) both; }
@keyframes aq-confetti { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(calc(var(--x) * 220px), calc(var(--y) * 160px + 120px)) rotate(var(--r)); } }

/* Inline on the audit page */
.has-quiz { min-height: 520px; }
@media (max-width: 600px) { .has-quiz { min-height: 0; } }
.aq-inline .aq-title { font-size: var(--h3); }

/* Early-exit popup */
.xp-card { max-width: 520px; padding: var(--space-12) var(--space-12) var(--space-6); text-align: center; overflow: hidden; }
.xp-stripe { position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--stripe); }
.xp-wave { font-size: 2.75rem; line-height: 1; margin: 0 0 var(--space-4); display: inline-block; transform-origin: 70% 80%; }
.is-open .xp-wave { animation: aq-wave 1.4s .3s ease-in-out 2; }
@keyframes aq-wave { 15%, 45% { transform: rotate(16deg); } 30%, 60% { transform: rotate(-10deg); } 75% { transform: none; } }
.xp-card .h-lg { margin: 0 0 var(--space-4); }
.xp-lead { color: var(--muted); margin: 0 0 var(--space-6); }
.xp-form { display: grid; gap: var(--space-4); }
.xp-form input { width: 100%; min-height: 56px; padding: 12px 18px; background: var(--surface); color: var(--ink); border: 2px solid var(--line); border-radius: var(--radius-md); font: 500 1.0625rem/1.3 var(--font-sans); text-align: center; }
.xp-form input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(181, 230, 29, .18); }
.xp-error { margin: var(--space-2) 0 0; color: var(--danger); font-size: var(--small); }
.xp-no { margin-top: var(--space-4); border: 0; background: none; color: var(--muted); font: 400 var(--small) var(--font-sans); text-decoration: underline; cursor: pointer; padding: 8px; }
.xp-no:hover { color: var(--ink); }
@media (max-width: 600px) { .aq-panel, .xp-card { padding-left: var(--space-4); padding-right: var(--space-4); } .xp-card { padding-top: var(--space-12); } }

/* Free SEO checker (/free-seo-checker) */
.ck-intro { max-width: 820px; }
.ck-intro .h-display { max-width: 16ch; }
.ck-form { display: flex; gap: var(--space-2); margin: var(--space-6) 0 var(--space-2); }
.ck-form input[type=text] { flex: 1; min-width: 0; min-height: 56px; padding: 12px 18px; background: var(--surface-raised); color: var(--ink); border: 2px solid var(--line); border-radius: var(--radius-md); font: 500 1.0625rem/1.3 var(--font-sans); }
.ck-form input[type=text]:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(181, 230, 29, .18); }
.ck-form input[aria-invalid=true] { border-color: var(--danger); }
.ck-form .btn { flex: none; }
.ck-error { color: var(--danger); font-size: var(--small); margin: 0 0 var(--space-2); }
.ck-status { color: var(--brand); font-weight: 500; margin: 0 0 var(--space-2); }
@media (max-width: 600px) { .ck-form { flex-direction: column; } .ck-form .btn { width: 100%; justify-content: center; } }

.ck-card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--card-pad); }
@media (min-width: 900px) { .ck-card { padding: var(--space-12); } }
.ck-fail { border-color: var(--danger); }
.ck-summary { display: grid; grid-template-columns: auto 1fr; gap: var(--space-12); align-items: center; }
.ck-summary .btn-row { margin-top: var(--space-6); }
.ck-score { --ring: var(--brand); position: relative; width: 168px; aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; grid-auto-flow: column; align-items: baseline;
  background: radial-gradient(closest-side, var(--surface-raised) 80%, transparent 81% 100%), conic-gradient(var(--ring) calc(var(--score) * 1%), var(--line) 0); }
.ck-ok .ck-score { --ring: #F5C518; }
.ck-poor .ck-score { --ring: var(--danger); }
.ck-score-num { font: 600 3.25rem/1 var(--font-display); }
.ck-score-of { color: var(--muted); font-weight: 500; }
@media (max-width: 700px) { .ck-summary { grid-template-columns: 1fr; gap: var(--space-6); justify-items: start; } .ck-score { width: 136px; } .ck-score-num { font-size: 2.6rem; } }

.ck-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); margin: var(--space-6) 0; }
@media (max-width: 900px) { .ck-groups { grid-template-columns: 1fr; } }
.ck-group-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); }
.ck-tally { font: 600 var(--small) var(--font-display); padding: 4px 12px; border-radius: var(--radius-full); border: 1px solid var(--line); color: var(--muted); }
.ck-tally.is-all { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.ck-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.ck-list li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding-top: var(--space-4); border-top: 1px solid var(--line); }
.ck-list li:first-child { border-top: 0; padding-top: 0; }
.ck-list p { margin: 0; }
.ck-icon { width: 24px; height: 24px; border-radius: var(--radius-full); display: grid; place-items: center; font-size: .8rem; font-weight: 700; margin-top: 1px; }
.is-pass .ck-icon { background: var(--brand); color: var(--on-brand); }
.is-fail .ck-icon { background: rgba(255, 107, 94, .14); color: var(--danger); border: 1px solid var(--danger); }
.ck-label { font-weight: 600; }
.ck-detail { color: var(--muted); font-size: var(--small); }
.ck-fix { font-size: var(--small); margin-top: 6px !important; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface); border-left: 3px solid var(--brand); }
.ck-next { display: grid; grid-template-columns: 1fr auto; gap: var(--space-6); align-items: center; border-color: var(--brand); }
@media (max-width: 800px) { .ck-next { grid-template-columns: 1fr; } }

.ck-catalogue { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
@media (max-width: 1000px) { .ck-catalogue { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ck-catalogue { grid-template-columns: 1fr; } }
.ck-cat { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--card-pad); }
.ck-cat dl { margin: var(--space-4) 0 0; }
.ck-cat dt { font-weight: 600; margin-top: var(--space-4); }
.ck-cat dd { margin: 2px 0 0; color: var(--muted); font-size: var(--small); }
.ck-more { margin-top: var(--space-6); color: var(--muted); }

/* Reveal on scroll (JS adds .reveal-ready; content stays visible without JS). */
.reveal-ready [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-ready [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal-ready [data-reveal] { opacity: 1; transform: none; }
}