/* ==========================================================================
   React Native Debugging Service — single stylesheet, no build step.
   Values copied from the compiled Tailwind 4 CSS of the Next.js version.
   Breakpoints (min-width, mobile-first): sm 40rem, md 48rem, lg 64rem.
   ========================================================================== */

/* ---------- Fonts (latin + latin-ext, variable weight) ---------- */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/inter-latin-ext-var.woff2) format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/inter-latin-var.woff2) format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Size-adjusted fallback (same as next/font), keeps layout shift unchanged. */
@font-face {
  font-family: Inter Fallback;
  src: local(Arial);
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
  size-adjust: 107.12%;
}
@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(fonts/jetbrains-mono-latin-ext-var.woff2) format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(fonts/jetbrains-mono-latin-var.woff2) format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: JetBrains Mono Fallback;
  src: local(Arial);
  ascent-override: 75.79%;
  descent-override: 22.29%;
  line-gap-override: 0%;
  size-adjust: 134.59%;
}

/* ---------- Tokens ---------- */
:root {
  --color-canvas: #151c22;
  --color-surface: #0c0d0f;
  --color-surface-raised: #101214;
  --color-line: #1e2024;
  --color-line-strong: #2a2d33;

  --color-ink: #f4f5f6;
  --color-ink-muted: #a1a5ad;
  --color-ink-subtle: #858a91;

  --color-accent: #6ee7b7;
  --color-accent-dim: #2a4f43;

  --color-red-300: #ffa3a3;
  --color-red-400: #ff6568;
  --color-red-500: #fb2c36;

  --font-inter: "Inter", "Inter Fallback";
  --font-mono-code: "JetBrains Mono", "JetBrains Mono Fallback";
  --font-sans: var(--font-inter), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: var(--font-mono-code), ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;

  --radius-card: 0.75rem;
  --radius-lg: 0.5rem;

  --lh-xs: calc(1 / 0.75);
  --lh-sm: calc(1.25 / 0.875);
  --lh-lg: calc(1.75 / 1.125);
  --lh-xl: calc(1.75 / 1.25);
  --relaxed: 1.625;
  --tight: -0.025em;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-colors: color, background-color, border-color, outline-color,
    text-decoration-color, fill, stroke;
}
@supports (color: lab(0% 0 0)) {
  :root {
    --color-red-300: lab(76.5514% 36.422 15.5335);
    --color-red-400: lab(63.7053% 60.745 31.3109);
    --color-red-500: lab(55.4814% 75.0732 48.8528);
  }
}

/* ---------- Preflight subset (Tailwind 4) ---------- */
*,
::before,
::after,
::backdrop {
  box-sizing: border-box;
  border: 0 solid;
  margin: 0;
  padding: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  line-height: 1.5;
  font-family: var(--font-sans);
  -webkit-tap-highlight-color: transparent;
}
h1,
h2,
h3,
h4 {
  font-size: inherit;
  font-weight: inherit;
}
a {
  color: inherit;
  text-decoration: inherit;
}
code,
pre {
  font-family: var(--font-mono);
  font-size: 1em;
}
summary {
  display: list-item;
}
ol,
ul {
  list-style: none;
}
img,
svg,
picture {
  display: block;
  vertical-align: middle;
}
img {
  max-width: 100%;
  height: auto;
}
button,
input,
textarea {
  font: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  letter-spacing: inherit;
  color: inherit;
  opacity: 1;
  background-color: #0000;
  border-radius: 0;
}
::placeholder {
  opacity: 1;
  color: color-mix(in oklab, currentcolor 50%, transparent);
}
textarea {
  resize: vertical;
}
button {
  appearance: button;
}
[hidden]:where(:not([hidden="until-found"])) {
  display: none !important;
}

/* ---------- Base ---------- */
html {
  scroll-behavior: smooth;
  /* Keep anchored sections clear of the sticky header. */
  scroll-padding-top: 6rem;
}
body {
  min-height: 100dvh;
  background-color: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
}
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}
::selection {
  background-color: var(--color-accent);
  color: #06120d;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  ::before,
  ::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Hairline grid used behind the hero and the final CTA. Purely decorative. */
.grid-bg {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, #ffffff09 1px, #0000 1px),
    linear-gradient(#ffffff09 1px, #0000 1px);
  background-size: 64px 64px;
}
.grid-bg--top {
  -webkit-mask-image: radial-gradient(75% 60% at 50% 0, #000, #0000);
  mask-image: radial-gradient(75% 60% at 50% 0, #000, #0000);
}
.grid-bg--bottom {
  -webkit-mask-image: radial-gradient(60% 70% at 50% 100%, #000, #0000);
  mask-image: radial-gradient(60% 70% at 50% 100%, #000, #0000);
}

.sr-only {
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}
.skip-link {
  clip-path: inset(50%);
  white-space: nowrap;
  width: 1px;
  height: 1px;
  margin: -1px;
  position: absolute;
  overflow: hidden;
}
.skip-link:focus {
  clip-path: none;
  white-space: normal;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  top: 1rem;
  left: 1rem;
  z-index: 100;
  border-radius: var(--radius-lg);
  background-color: var(--color-ink);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  line-height: var(--lh-sm);
  font-weight: 500;
  color: var(--color-canvas);
}

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

/* ---------- Layout ---------- */
.container {
  margin-inline: auto;
  width: 100%;
  max-width: 72rem;
  padding-inline: 1.25rem;
}
.over-grid {
  position: relative;
}
.section {
  border-top: 1px solid var(--color-line);
  padding-block: 5rem;
}
.section--cta {
  position: relative;
  overflow: hidden;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: var(--lh-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-ink-subtle);
}
.section-heading {
  text-wrap: balance;
  font-size: 1.875rem;
  line-height: calc(2.25 / 1.875);
  font-weight: 600;
  letter-spacing: var(--tight);
}
.eyebrow + .section-heading {
  margin-top: 1rem;
}
.section-heading--narrow {
  max-width: 48rem;
}
.section-lead {
  margin-top: 1rem;
  max-width: 42rem;
  text-wrap: pretty;
  font-size: 1rem;
  line-height: var(--relaxed);
  color: var(--color-ink-muted);
}
.item-title {
  font-size: 0.875rem;
  line-height: var(--lh-sm);
  font-weight: 500;
  color: var(--color-ink);
}
.item-text {
  margin-top: 0.5rem;
  text-wrap: pretty;
  font-size: 0.875rem;
  line-height: var(--relaxed);
  color: var(--color-ink-muted);
}
.footnote {
  margin-top: 1rem;
  font-size: 0.875rem;
  line-height: var(--lh-sm);
  color: var(--color-ink-subtle);
}
.rule {
  display: block;
  height: 1px;
  width: 1.5rem;
  background-color: var(--color-accent-dim);
}
.dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background-color: var(--color-accent);
}
.bullet {
  margin-top: 0.45rem;
  width: 0.375rem;
  height: 0.375rem;
  flex-shrink: 0;
  border-radius: 9999px;
  background-color: var(--color-accent);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--radius-lg);
  font-weight: 500;
  transition-property: var(--transition-colors);
  transition-timing-function: var(--ease);
  transition-duration: 0.15s;
}
.btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.btn--primary {
  background-color: var(--color-ink);
  color: var(--color-canvas);
}
.btn--secondary {
  border: 1px solid var(--color-line-strong);
  background-color: var(--color-surface-raised);
  color: var(--color-ink);
}
.btn--md {
  height: 2.5rem;
  padding-inline: 1rem;
  font-size: 0.875rem;
  line-height: var(--lh-sm);
}
.btn--lg {
  height: 3rem;
  padding-inline: 1.5rem;
  font-size: 0.95rem;
}
.btn--fluid {
  width: 100%;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--color-line);
  background-color: #151c22cc;
  background-color: color-mix(in oklab, var(--color-canvas) 80%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.site-header__bar {
  display: flex;
  height: 4rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.site-header__cta {
  flex-shrink: 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.875rem;
  line-height: var(--lh-sm);
  font-weight: 600;
  letter-spacing: var(--tight);
}
.brand__mark {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
}
.site-nav {
  display: none;
}
.site-nav__list {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}
.site-nav__link {
  font-size: 0.875rem;
  line-height: var(--lh-sm);
  color: var(--color-ink-muted);
  transition-property: var(--transition-colors);
  transition-timing-function: var(--ease);
  transition-duration: 0.15s;
}
.show-sm {
  display: none;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
}
.hero__grid {
  display: grid;
  align-items: center;
  gap: 3.5rem;
  padding-block: 5rem;
}
.hero__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.5rem;
  row-gap: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: var(--lh-xs);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-ink-subtle);
}
.hero__title {
  margin-top: 1.5rem;
  text-wrap: balance;
  font-size: 2.25rem;
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: var(--tight);
}
.hero__lead {
  margin-top: 1.5rem;
  max-width: 36rem;
  text-wrap: pretty;
  font-size: 1.125rem;
  line-height: var(--relaxed);
  color: var(--color-ink-muted);
}
.hero__actions {
  margin-top: 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.hero__note {
  margin-top: 1.25rem;
  font-size: 0.875rem;
  line-height: var(--lh-sm);
  color: var(--color-ink-subtle);
}

/* Decorative build-log panel. */
.terminal {
  border-radius: var(--radius-card);
  border: 1px solid var(--color-line);
  background-color: var(--color-surface);
}
.terminal__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid var(--color-line);
  padding: 0.625rem 1rem;
}
.terminal__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background-color: var(--color-line-strong);
}
.terminal__cmd {
  margin-left: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: var(--lh-xs);
  color: var(--color-ink-subtle);
}
.terminal__log {
  overflow-x: auto;
  padding: 1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: var(--relaxed);
  color: var(--color-ink-subtle);
}
.terminal__foot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-top: 1px solid var(--color-line);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  line-height: var(--lh-sm);
}

/* ---------- Problem ---------- */
.problem-list {
  margin-top: 3.5rem;
  display: grid;
  column-gap: 3rem;
  row-gap: 2.5rem;
}
.problem-item {
  border-left: 1px solid var(--color-line);
  padding-left: 1.25rem;
}
.problem-item__title {
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 500;
  color: var(--color-ink);
}
.problem-close {
  margin-top: 3.5rem;
  max-width: 42rem;
  text-wrap: pretty;
  font-size: 1rem;
  line-height: var(--relaxed);
  color: var(--color-ink-muted);
}

/* ---------- Cards ---------- */
.card-grid {
  margin-top: 3rem;
  display: grid;
  gap: 1rem;
}
.card-grid--tight {
  margin-top: 1.5rem;
}
.card {
  height: 100%;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-line);
  background-color: var(--color-surface);
  padding: 1.25rem;
  transition-property: var(--transition-colors);
  transition-timing-function: var(--ease);
  transition-duration: 0.15s;
}

/* ---------- How it works ---------- */
.steps {
  margin-top: 3.5rem;
  display: grid;
  gap: 2.5rem;
}
.step {
  border-top: 1px solid var(--color-line);
  padding-top: 1.5rem;
}
.step__num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: var(--lh-xs);
  letter-spacing: 0.16em;
  color: var(--color-accent);
}
.step__title {
  margin-top: 1rem;
  font-size: 1.125rem;
  line-height: var(--lh-lg);
  font-weight: 500;
  letter-spacing: var(--tight);
  color: var(--color-ink);
}

/* ---------- About ---------- */
.about__grid {
  display: grid;
  gap: 3rem;
}
.about__intro {
  margin-top: 1.5rem;
  max-width: 48rem;
}
.about__intro > :not(:last-child) {
  margin-bottom: 1rem;
}
.about__para {
  text-wrap: pretty;
  font-size: 1rem;
  line-height: var(--relaxed);
  color: var(--color-ink-muted);
}
.portrait {
  width: 100%;
  max-width: 24rem;
}
.portrait__frame {
  overflow: hidden;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-line);
  background-color: var(--color-surface);
}
/* 4:5 crop of a 2:3 photo, anchored high so the face stays in frame.
   The background is a tiny blurred copy shown until the photo loads. */
.portrait__img {
  aspect-ratio: 4 / 5;
  height: auto;
  width: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  color: transparent;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 320'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1' result='s'/%3E%3CfeFlood x='0' y='0' width='100%25' height='100%25'/%3E%3CfeComposite operator='out' in='s'/%3E%3CfeComposite in2='SourceGraphic'/%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage width='100%25' height='100%25' x='0' y='0' preserveAspectRatio='none' style='filter: url(%23b);' href='data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD/wAARCAAIAAUDAREAAhEBAxEB/9sAQwAKBwcIBwYKCAgICwoKCw4YEA4NDQ4dFRYRGCMfJSQiHyIhJis3LyYpNCkhIjBBMTQ5Oz4+PiUuRElDPEg3PT47/9sAQwEKCwsODQ4cEBAcOygiKDs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDgrG5tbWLNvcxqzqPM3gdRnpkGs+W+6LTtsf/Z'/%3E%3C/svg%3E");
}
.portrait__caption {
  margin-top: 1rem;
}
.portrait__name-row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}
.portrait__link {
  /* Lines up with the name, past the 1.5rem rule and 0.75rem gap. */
  margin-left: 2.25rem;
  margin-top: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: var(--lh-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-accent);
}
/* Hairline dividers: a 1px grid gap over a line-coloured background. */
.facts {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-line);
  background-color: var(--color-line);
}
.fact {
  background-color: var(--color-surface);
  padding: 1.5rem 1.25rem;
}
.fact__text {
  margin-top: 0.75rem;
  display: block;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: var(--lh-sm);
  color: var(--color-ink);
}
.about__work-title {
  margin-top: 4rem;
  font-size: 1.125rem;
  line-height: var(--lh-lg);
  font-weight: 500;
  letter-spacing: var(--tight);
  color: var(--color-ink);
}
.companies {
  margin-top: 3rem;
  max-width: 42rem;
  border-left: 2px solid var(--color-accent-dim);
  padding-left: 1.25rem;
}
.companies__label {
  font-size: 0.875rem;
  line-height: var(--lh-sm);
  color: var(--color-ink-muted);
}
.companies__list {
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: var(--lh-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-ink-subtle);
}
.cta-row {
  margin-top: 3.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  border-top: 1px solid var(--color-line);
  padding-top: 2.5rem;
}
.cta-row .btn {
  flex-shrink: 0;
}
.cta-row__text {
  text-wrap: balance;
  font-size: 1.125rem;
  line-height: var(--lh-lg);
  font-weight: 500;
  letter-spacing: var(--tight);
  color: var(--color-ink);
}

/* ---------- Offer ---------- */
.offer {
  margin-top: 3rem;
  overflow: hidden;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-line);
  background-color: var(--color-surface);
}
.offer__grid {
  display: grid;
}
.offer__main {
  border-bottom: 1px solid var(--color-line);
  padding: 2rem;
}
.offer__main .btn {
  margin-top: 2rem;
}
.price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.price__amount {
  font-size: 3rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: var(--tight);
  color: var(--color-ink);
}
.price__unit {
  font-size: 1.125rem;
  line-height: var(--lh-lg);
  color: var(--color-ink-subtle);
}
.offer__body {
  margin-top: 1.25rem;
  max-width: 28rem;
  text-wrap: pretty;
  font-size: 1rem;
  line-height: var(--relaxed);
  color: var(--color-ink-muted);
}
.offer__includes {
  background-color: var(--color-surface-raised);
  padding: 2rem;
}
.include-list {
  margin-top: 1.5rem;
}
.include-list > :not(:last-child) {
  margin-bottom: 1.25rem;
}
.include {
  display: flex;
  gap: 0.75rem;
}
.include__text {
  margin-top: 0.25rem;
  text-wrap: pretty;
  font-size: 0.875rem;
  line-height: var(--relaxed);
  color: var(--color-ink-muted);
}

/* ---------- More services ---------- */
.services {
  margin-top: 3rem;
  display: grid;
  gap: 1rem;
}
.service {
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-line);
  background-color: var(--color-surface);
  transition-property: var(--transition-colors);
  transition-timing-function: var(--ease);
  transition-duration: 0.15s;
}
.service__body {
  flex: 1;
  padding: 1.5rem;
}
.service__num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: var(--lh-xs);
  letter-spacing: 0.18em;
  color: var(--color-accent);
}
.service__title {
  margin-top: 0.75rem;
  font-size: 1.25rem;
  line-height: var(--lh-xl);
  font-weight: 600;
  letter-spacing: var(--tight);
  color: var(--color-ink);
}
.service__text {
  margin-top: 0.75rem;
  text-wrap: pretty;
  font-size: 0.875rem;
  line-height: var(--relaxed);
  color: var(--color-ink-muted);
}
.service__points {
  margin-top: 1.5rem;
}
.service__points > :not(:last-child) {
  margin-bottom: 0.625rem;
}
.service__point {
  display: flex;
  gap: 0.75rem;
  font-size: 0.875rem;
  line-height: var(--lh-sm);
  color: var(--color-ink-muted);
}
.service__foot {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-top: 1px solid var(--color-line);
  padding: 1.25rem 1.5rem;
}
.service__price {
  font-size: 0.875rem;
  line-height: var(--lh-sm);
  color: var(--color-ink-subtle);
}

/* ---------- AI angle ---------- */
.ai {
  max-width: 48rem;
}
.ai__body {
  margin-top: 1.5rem;
  text-wrap: pretty;
  font-size: 1.125rem;
  line-height: var(--relaxed);
  color: var(--color-ink-muted);
}
.ai__detail {
  margin-top: 1rem;
  text-wrap: pretty;
  font-size: 1rem;
  line-height: var(--relaxed);
  color: var(--color-ink-subtle);
}

/* ---------- FAQ (native <details>, works without JS) ---------- */
.faq__grid {
  display: grid;
  gap: 2.5rem;
}
.faq__list {
  border-top: 1px solid var(--color-line);
}
.faq__item {
  border-bottom: 1px solid var(--color-line);
}
.faq__q {
  display: flex;
  cursor: pointer;
  list-style-type: none;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.25rem;
  text-align: left;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 500;
  color: var(--color-ink);
  transition-property: var(--transition-colors);
  transition-timing-function: var(--ease);
  transition-duration: 0.15s;
}
.faq__q::-webkit-details-marker {
  display: none;
}
.faq__icon {
  position: relative;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--color-ink-subtle);
}
.faq__icon-h {
  position: absolute;
  left: 0;
  top: 50%;
  height: 1px;
  width: 1rem;
  translate: 0 -50%;
  background-color: currentColor;
}
.faq__icon-v {
  position: absolute;
  left: 50%;
  top: 0;
  height: 1rem;
  width: 1px;
  translate: -50% 0;
  background-color: currentColor;
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--ease);
  transition-duration: 0.2s;
}
.faq__item[open] .faq__icon-v {
  rotate: 90deg;
  opacity: 0;
}
.faq__a {
  max-width: 42rem;
  text-wrap: pretty;
  padding-bottom: 1.5rem;
  padding-right: 2.5rem;
  font-size: 0.875rem;
  line-height: var(--relaxed);
  color: var(--color-ink-muted);
}

/* ---------- Contact ---------- */
.contact__grid {
  display: grid;
  gap: 3rem;
}
.contact__lead {
  margin-top: 1.25rem;
  text-wrap: pretty;
  font-size: 1rem;
  line-height: var(--relaxed);
  color: var(--color-ink-muted);
}
.contact__alt {
  margin-top: 1rem;
  text-wrap: pretty;
  font-size: 0.875rem;
  line-height: var(--relaxed);
  color: var(--color-ink-subtle);
}
.text-link {
  color: var(--color-ink-muted);
  text-decoration-line: underline;
  text-decoration-color: var(--color-line-strong);
  text-underline-offset: 4px;
  transition-property: var(--transition-colors);
  transition-timing-function: var(--ease);
  transition-duration: 0.15s;
}
.contact__panel {
  border-radius: var(--radius-card);
  border: 1px solid var(--color-line);
  background-color: var(--color-surface);
  padding: 1.5rem;
}
.form > :not(:last-child) {
  margin-bottom: 1.25rem;
}
.form__row {
  display: grid;
  gap: 1.25rem;
}
.label {
  display: block;
  font-size: 0.875rem;
  line-height: var(--lh-sm);
  font-weight: 500;
  color: var(--color-ink);
}
.label__optional {
  font-weight: 400;
  color: var(--color-ink-subtle);
}
.field {
  margin-top: 0.5rem;
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-line);
  background-color: var(--color-surface);
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  line-height: var(--lh-sm);
  color: var(--color-ink);
  transition-property: var(--transition-colors);
  transition-timing-function: var(--ease);
  transition-duration: 0.15s;
}
.field::placeholder {
  color: var(--color-ink-subtle);
}
.field--area {
  resize: vertical;
}
.field--mono {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: var(--lh-xs);
}
.hint {
  margin-top: 0.375rem;
  font-size: 0.75rem;
  line-height: var(--lh-xs);
  color: var(--color-ink-subtle);
}
.field-error {
  margin-top: 0.375rem;
  font-size: 0.75rem;
  line-height: var(--lh-xs);
  color: var(--color-red-400);
}
.form-alert {
  border-radius: var(--radius-lg);
  border: 1px solid #fb2c364d;
  border-color: color-mix(in oklab, var(--color-red-500) 30%, transparent);
  background-color: #fb2c360d;
  background-color: color-mix(in oklab, var(--color-red-500) 5%, transparent);
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  line-height: var(--lh-sm);
  color: var(--color-red-300);
}
/* Honeypot. Hidden from users and from assistive technology. */
.honeypot {
  position: absolute;
  left: -9999px;
  height: 0;
  width: 0;
  overflow: hidden;
}
.form__submit {
  padding-top: 0.25rem;
}
.form__privacy {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  line-height: var(--relaxed);
  color: var(--color-ink-subtle);
}
.form-success {
  padding-block: 2rem;
  text-align: center;
}
.form-success__icon {
  margin-inline: auto;
  display: flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid var(--color-accent-dim);
  color: var(--color-accent);
}
.form-success__title {
  margin-top: 1.25rem;
  font-size: 1.125rem;
  line-height: var(--lh-lg);
  font-weight: 500;
  color: var(--color-ink);
}
.form-success__text {
  margin-inline: auto;
  margin-top: 0.5rem;
  max-width: 24rem;
  text-wrap: pretty;
  font-size: 0.875rem;
  line-height: var(--relaxed);
  color: var(--color-ink-muted);
}

/* ---------- Final CTA ---------- */
.final-cta {
  margin-inline: auto;
  max-width: 42rem;
  text-align: center;
}
.final-cta__action {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--color-line);
  padding-block: 2.5rem;
}
.site-footer__row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 0.875rem;
  line-height: var(--lh-sm);
  color: var(--color-ink-subtle);
}
.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1.5rem;
  row-gap: 0.5rem;
}
.site-footer__link {
  transition-property: var(--transition-colors);
  transition-timing-function: var(--ease);
  transition-duration: 0.15s;
}

/* ---------- States (aria-invalid after hover/focus, as in the original) ---------- */
@media (hover: hover) {
  .site-nav__link:hover,
  .text-link:hover,
  .site-footer__link:hover {
    color: var(--color-ink);
  }
  .btn--primary:hover {
    background-color: #fff;
  }
  .btn--secondary:hover {
    border-color: var(--color-ink-subtle);
    background-color: var(--color-surface);
  }
  .card:hover,
  .service:hover,
  .field:hover {
    border-color: var(--color-line-strong);
  }
  .faq__q:hover {
    color: #fff;
  }
}
.field:focus {
  border-color: var(--color-line-strong);
}
.field[aria-invalid="true"] {
  border-color: #fb2c36b3;
  border-color: color-mix(in oklab, var(--color-red-500) 70%, transparent);
}

/* ---------- sm: 40rem ---------- */
@media (min-width: 40rem) {
  .container {
    padding-inline: 2rem;
  }
  .section {
    padding-block: 7rem;
  }
  .hide-sm {
    display: none;
  }
  .show-sm {
    display: inline;
  }
  .btn--fluid {
    width: auto;
  }
  .hero__grid {
    padding-block: 6rem;
  }
  .hero__title {
    font-size: 3rem;
  }
  .hero__lead {
    font-size: 1.25rem;
  }
  .hero__actions {
    flex-direction: row;
    align-items: center;
  }
  .section-heading {
    font-size: 2.25rem;
    line-height: calc(2.5 / 2.25);
  }
  .section-lead,
  .about__para {
    font-size: 1.125rem;
  }
  .problem-list,
  .card-grid,
  .form__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }
  .fact__text {
    font-size: 1rem;
    line-height: 1.5;
  }
  .cta-row,
  .service__foot,
  .site-footer__row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .offer__main,
  .offer__includes {
    padding: 2.5rem;
  }
  .price__amount {
    font-size: 3.75rem;
  }
  .service__body {
    padding: 2rem;
  }
  .service__foot {
    padding-inline: 2rem;
  }
  .contact__panel {
    padding: 2rem;
  }
}

/* ---------- md: 48rem ---------- */
@media (min-width: 48rem) {
  .site-nav {
    display: block;
  }
  .services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- lg: 64rem ---------- */
@media (min-width: 64rem) {
  .hero__grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 4rem;
    padding-block: 8rem;
  }
  .hero__title {
    font-size: 3.75rem;
  }
  .card-grid,
  .facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .about__grid {
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: 4rem;
  }
  .portrait {
    max-width: none;
    padding-top: 2.25rem;
  }
  .offer__grid {
    grid-template-columns: 1.1fr 1fr;
  }
  .offer__main {
    border-bottom-width: 0;
    border-right: 1px solid var(--color-line);
  }
  .faq__grid {
    grid-template-columns: minmax(0, 1fr) 2fr;
    gap: 4rem;
  }
  .contact__grid {
    grid-template-columns: minmax(0, 1fr) 1.35fr;
    gap: 4rem;
  }
}