:root {
  --bg: oklch(1 0 0);
  --bg-raised: oklch(1 0 0);
  --bg-alt: oklch(0.97 0 0);
  --bg-invert: oklch(0.28 0.05 250);
  --accent: oklch(0.75 0.17 55);
  --accent-hover: oklch(0.70 0.19 55);
  --accent-text: oklch(0.28 0.05 250);
  --link: oklch(0.80 0.15 210);
  --text: oklch(0.35 0.04 250);
  --text-heading: oklch(0.28 0.05 250);
  --text-muted: oklch(0.45 0.02 250);
  --text-inv: oklch(0.95 0 0);
  --text-inv-muted: oklch(0.80 0 0);
  --border: oklch(0.90 0 0);
  --border-inv: oklch(0.65 0 0);
  --highlight: oklch(0.75 0.17 55);
  --negative: oklch(0.55 0.10 25);
  --shadow: oklch(0 0 0 / 0.06);

  --font-heading: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-sm: clamp(0.875rem, 0.85rem + 0.125vw, 0.9375rem);
  --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  --text-h1: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  --text-h2: clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem);
  --text-h3: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);

  --space-2xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.375rem);
  --space-xs: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
  --space-sm: clamp(0.75rem, 0.6rem + 0.75vw, 1.25rem);
  --space-md: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  --space-lg: clamp(3rem, 2rem + 5vw, 6rem);
  --space-xl: clamp(4rem, 3rem + 5vw, 8rem);

  --max-width: min(70rem, 100% - 2rem);
  --max-width-narrow: min(50rem, 100% - 2rem);
  --radius: 0.5rem;
  --radius-sm: 0.25rem;
}

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

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

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--text);
  background-color: var(--bg);
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: 1.2;
  color: var(--text-heading);
  text-wrap: balance;
}

h1 { font-size: var(--text-h1); font-weight: 700; }
h2 { font-size: var(--text-h2); font-weight: 700; }
h3 { font-size: var(--text-h3); font-weight: 500; }

p { max-inline-size: 65ch; }

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition: color 0.15s;

  &:hover {
    color: var(--accent);
  }
}

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

:is(ul, ol):not([class]) {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.flow > * + * {
  margin-block-start: var(--flow-space, 1.25em);
}

.flow :is(h2, h3, h4) {
  --flow-space: 1.75em;
}

.flow :is(h2 + *, h3 + *, h4 + *) {
  --flow-space: var(--space-sm);
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-alt);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
}

mark {
  background: oklch(from var(--highlight) l c h / 0.25);
  color: inherit;
  padding: 0.05em 0.2em;
  border-radius: var(--radius-sm);
  box-decoration-break: clone;
}

img {
  max-inline-size: 100%;
  block-size: auto;
  display: block;
}

.wrapper {
  inline-size: var(--max-width);
  margin-inline: auto;
}

.wrapper--narrow {
  inline-size: var(--max-width-narrow);
  margin-inline: auto;
}

.site-header {
  background: var(--bg-invert);
  padding-block: var(--space-sm);

  & .wrapper {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: var(--space-xs) var(--space-md);

    @media (max-width: 30em) {
      grid-template-columns: 1fr;
    }
  }
}

.site-header nav {
  container-type: inline-size;
}

.site-header__logo {
  display: inline-flex;
  flex-direction: column;
  gap: 0.05rem;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-inv);
  text-decoration: none;

  &:hover {
    color: var(--accent);
  }
}

.site-header__brand-main {
  line-height: 1.05;
}

.site-header__brand-sub {
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-inv-muted);
}

.site-header__nav {
  display: flex;
  list-style: none;
  padding: 0;
  margin-top: 0.32rem;

  @container (max-width: 28rem) {
    flex-direction: column;
    margin-top: 0;
  }
}

.site-header__link {
  display: block;
  padding: var(--space-2xs) var(--space-xs);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-inv-muted);
  text-decoration: none;

  &:hover {
    color: var(--accent);
  }

  &[aria-current="page"] {
    color: var(--accent);
  }
}

.hero {
  background: var(--bg-invert);
  color: var(--text-inv);
  padding-block: var(--space-xl) var(--space-lg);
}

.hero__inner {
  inline-size: var(--max-width);
  margin-inline: auto;
}

.hero__headline {
  color: var(--text-inv);
  margin-block-end: var(--space-sm);
}

.hero__subline {
  font-size: var(--text-lg);
  color: var(--text-inv-muted);
  max-inline-size: 55ch;
  margin-block-end: var(--space-md);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 600;
  text-decoration: none;
  padding: 0.75em 1.5em;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.btn--primary {
  background: var(--accent);
  color: var(--accent-text);

  &:hover {
    background: var(--accent-hover);
    color: var(--accent-text);
  }
}

.btn--secondary {
  background: transparent;
  color: var(--text-inv);
  border-color: var(--border-inv);

  &:hover {
    border-color: var(--accent);
    color: var(--accent);
  }
}

.btn--secondary-dark {
  background: transparent;
  color: var(--text-heading);
  border-color: var(--text-heading);

  &:hover {
    background: var(--bg-invert);
    color: var(--text-inv);
  }
}

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

.section--ash {
  background: var(--bg-alt);
}

.section__title {
  margin-block-end: var(--space-md);
}

.offer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: var(--space-sm);
}

.offer-card {
  position: relative;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;

  &:hover {
    border-color: var(--accent);
    box-shadow: 0 2px 12px var(--shadow);
  }
}

.offer-card__tag {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--highlight);
  margin-block-end: var(--space-xs);
}

.offer-card__title {
  margin-block-end: var(--space-xs);
}

.offer-card__body {
  flex: 1;
  margin-block-end: var(--space-sm);
  color: var(--text-muted);
}

.offer-card__price {
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--text-heading);
  margin-block-end: var(--space-sm);
}

.offer-card__cta {
  margin-block-start: auto;

  &::before {
    content: "";
    position: absolute;
    inset: 0;
  }
}

.section__subtitle {
  margin-block-start: var(--space-lg);
  margin-block-end: var(--space-sm);
}

.offer-grid--secondary {
  grid-template-columns: 1fr;
}

.offer-card--secondary {
  display: grid;
  grid-template:
    "title price" auto
    "body  cta"   auto / 1fr auto;
  column-gap: var(--space-md);
  row-gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-md);
}

.offer-card--secondary .offer-card__title {
  grid-area: title;
}

.offer-card--secondary .offer-card__body {
  grid-area: body;
  flex: unset;
  margin-block-end: 0;
}

.offer-card--secondary .offer-card__price {
  grid-area: price;
  margin-block-end: 0;
  text-align: end;
  white-space: nowrap;
}

.offer-card--secondary .offer-card__cta {
  grid-area: cta;
  margin-block-start: 0;
  justify-self: end;
  align-self: end;
}

@media (max-width: 40em) {
  .offer-card--secondary {
    grid-template:
      "title" auto
      "body"  auto
      "price" auto
      "cta"   auto / 1fr;
  }

  .offer-card--secondary .offer-card__price {
    text-align: start;
  }

  .offer-card--secondary .offer-card__cta {
    justify-self: start;
  }
}

.fit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: var(--space-sm);
}

.fit-block {
  padding: var(--space-sm);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-raised);
}

.fit-block h3 {
  margin-block-end: var(--space-xs);
}

.use-case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: var(--space-sm);
  margin-block-end: var(--space-sm);
}

.use-case {
  padding: var(--space-sm);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-raised);
}

.use-case strong {
  font-family: var(--font-heading);
  display: block;
  margin-block-end: var(--space-2xs);
  color: var(--text-heading);
}

.proof-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}

.proof-block h3 {
  margin-block-end: var(--space-xs);
}

.proof-block__sample {
  font-size: var(--text-sm);
  padding: var(--space-sm);
  background: var(--bg-alt);
  border-radius: var(--radius);
  border-inline-start: 3px solid var(--highlight);
}

.proof-block__sample pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.5;
  white-space: pre-wrap;
  padding: var(--space-sm);
  background: var(--bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.proof-block__sample code {
  font-size: inherit;
  background: none;
  padding: 0;
}

.proof-block__sample table {
  inline-size: 100%;
  border-collapse: collapse;
  margin-block: var(--space-xs);
  font-size: var(--text-sm);
}

.proof-block__sample th,
.proof-block__sample td {
  padding: var(--space-2xs) var(--space-xs);
  border-block-end: 1px solid var(--border);
  text-align: start;
}

.proof-block__sample th {
  font-weight: 700;
}

.cta-alt {
  font-size: var(--text-sm);
}

.about {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: var(--space-md);
  align-items: start;
}

.about__photo {
  aspect-ratio: 3 / 4;
  max-inline-size: 18rem;
  background: var(--bg-alt);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  color: var(--text-muted);
  border: 2px dashed var(--border);
}


.trust-signals {
  list-style: none;
  padding: 0;
  margin-block-start: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.trust-signals__item {
  padding-inline-start: 1.5em;
  position: relative;
  font-weight: 500;

  &::before {
    content: "\2713";
    position: absolute;
    inset-inline-start: 0;
    color: var(--highlight);
    font-weight: 700;
  }
}

h2 + .faq__list,
h3 + .faq__list {
  margin-block-start: var(--space-sm);
}

.faq__list {
  inline-size: var(--max-width-narrow);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.faq__item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;

  & summary {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: var(--text-lg);
    padding: var(--space-sm);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--space-xs);

    &::before {
      content: "+";
      font-size: 1.25em;
      color: var(--highlight);
      flex-shrink: 0;
      transition: transform 0.15s;
    }

    &:hover {
      color: var(--text-heading);
    }
  }

  &[open] summary::before {
    transform: rotate(45deg);
  }
}

.faq__answer {
  padding: 0 var(--space-sm) var(--space-sm);
  padding-inline-start: calc(var(--space-sm) + 1.25em + var(--space-xs));

  & p {
    color: var(--text-muted);
  }
}

.product-hero {
  background: var(--bg-invert);
  color: var(--text-inv);
  padding-block: var(--space-lg);
}

.product-hero__inner {
  inline-size: var(--max-width);
  margin-inline: auto;
}

.product-hero__tag {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--highlight);
  margin-block-end: var(--space-xs);
}

.product-hero__headline {
  color: var(--text-inv);
  margin-block-end: var(--space-sm);
  max-inline-size: 40ch;
}

.product-hero__subline {
  font-size: var(--text-lg);
  color: var(--text-inv-muted);
  max-inline-size: 55ch;
  margin-block-end: var(--space-md);
}

.product-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.product-section {
  padding-block: var(--space-md);
  inline-size: var(--max-width-narrow);
  margin-inline: auto;
}

.product-section--highlight {
  background: var(--bg-alt);
  inline-size: 100%;
  margin-inline: 0;

  & .product-section__inner {
    inline-size: var(--max-width-narrow);
    margin-inline: auto;
  }
}

.lead-magnet-block {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-sm);
  margin-inline: calc(-1 * var(--space-sm));
  box-shadow: 0 2px 12px var(--shadow);
}

.lead-magnet-block__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--highlight);
  margin-block-end: var(--space-2xs);
}

.lead-magnet-dialog {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0;
  margin: auto;
  max-inline-size: min(28rem, 100% - 2rem);
  background: var(--bg-raised);
  color: var(--text);
  box-shadow: 0 8px 32px var(--shadow);
}

.lead-magnet-dialog::backdrop {
  background: oklch(0 0 0 / 0.5);
}

.lead-magnet-dialog__inner {
  padding: var(--space-md);
  position: relative;
}

.lead-magnet-dialog__close {
  position: absolute;
  inset-block-start: var(--space-sm);
  inset-inline-end: var(--space-sm);
  background: none;
  border: none;
  font-size: var(--text-h3);
  cursor: pointer;
  color: var(--text-muted);
  line-height: 1;

  &:hover {
    color: var(--text-heading);
  }
}

.lead-magnet-dialog h2 {
  padding-inline-end: var(--space-md);
}

.lead-magnet-dialog p {
  color: var(--text-muted);
}

.lead-magnet-dialog form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.lead-magnet-dialog__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.lead-magnet-dialog__field label {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-heading);
}

.lead-magnet-dialog__field input,
.lead-magnet-dialog__field select {
  font-family: var(--font-body);
  font-size: var(--text-base);
  padding: var(--space-xs);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
}

.lead-magnet-dialog__field input:focus,
.lead-magnet-dialog__field select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.lead-magnet-dialog .btn {
  inline-size: 100%;
  justify-content: center;
}

.lead-magnet-dialog__request {
  display: grid;
  gap: var(--space-sm);
  grid-template-areas:
    "title  title"
    "thumb  list"
    "form   form";
  grid-template-columns: auto 1fr;
}

.lead-magnet-dialog__request h2 { grid-area: title; }
.lead-magnet-dialog__preview { display: contents; }
.lead-magnet-dialog__thumb { grid-area: thumb; }
.lead-magnet-dialog__contents { grid-area: list; }
.lead-magnet-dialog__request form { grid-area: form; }

.lead-magnet-dialog__thumb {
  inline-size: 5rem;
  block-size: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow:
    0 2px 8px var(--shadow),
    0 0 0 4px var(--bg-raised),
    0 0 0 5px var(--border);
  align-self: start;
  transition: transform 0.25s ease;
}

.lead-magnet-dialog__contents {
  font-size: var(--text-sm);
  color: var(--text-muted);
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  align-self: center;

  & li {
    padding-inline-start: 1em;
    position: relative;

    &::before {
      content: "\2013";
      position: absolute;
      inset-inline-start: 0;
    }
  }
}

@media (min-width: 32rem) {
  .lead-magnet-dialog {
    max-inline-size: min(44rem, 100% - 2rem);
  }

  .lead-magnet-dialog__request {
    grid-template-areas:
      "title  title"
      "thumb  list"
      "thumb  form";
    grid-template-columns: 13rem 1fr;
    gap: var(--space-sm) var(--space-md);
  }

  .lead-magnet-dialog__thumb {
    inline-size: 100%;
    rotate: -2deg;
    box-shadow:
      0 4px 16px var(--shadow),
      0 0 0 4px var(--bg-raised),
      0 0 0 5px var(--border);
  }

  .lead-magnet-dialog__contents {
    align-self: start;
    padding-block-start: var(--space-2xs);
  }
}

.lead-magnet-dialog__success {
  text-align: center;
}

.lead-magnet-dialog__success .btn {
  margin-block-start: var(--space-sm);
}

.product-section--pricing {
  border-top: 1px solid var(--border);
  padding-top: var(--space-md);
  margin-top: var(--space-sm);
}

.product-section--cta {
  background: var(--bg-invert);
  color: var(--text-inv);
  inline-size: 100%;
  margin-inline: 0;
  text-align: center;

  & .product-section__inner {
    inline-size: var(--max-width-narrow);
    margin-inline: auto;
  }

  & h2 {
    color: var(--text-inv);
  }

  & p {
    color: var(--text-inv-muted);
    margin-inline: auto;
  }

  & a:not(.btn) {
    color: var(--text-inv);
  }
}

.check-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);

  & li {
    padding-inline-start: 1.5em;
    position: relative;

    &::before {
      content: "\2713";
      position: absolute;
      inset-inline-start: 0;
      color: var(--highlight);
      font-weight: 700;
    }
  }
}

.structure-list {
  list-style: none;
  padding: 0;

  & > li {
    padding-inline-start: 0;
    padding-block: var(--space-xs);
    border-block-end: 1px solid var(--border);

    &:last-child {
      border: none;
    }
  }

  & strong {
    font-family: var(--font-heading);
    color: var(--text-heading);
  }
}

.structure-list__nested {
  padding-inline-start: 1.25em;
  margin-block-start: var(--space-xs);
}

.not-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);

  & li {
    padding-inline-start: 1.5em;
    position: relative;
    color: var(--text-muted);

    &::before {
      content: "\2717";
      position: absolute;
      inset-inline-start: 0;
      color: var(--negative);
    }
  }
}

.price-badge {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--text-heading);
  background: var(--bg-alt);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius);
  border-inline-start: 4px solid var(--highlight);
  margin-block-end: var(--space-sm);
}

.site-footer {
  background: var(--bg-invert);
  color: var(--text-inv-muted);
  padding-block: var(--space-md);
  font-size: var(--text-sm);

  & .wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-sm);
  }

  & a {
    color: var(--text-inv);

    &:hover {
      color: var(--accent);
    }
  }
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
  list-style: none;
  padding: 0;
}

.divider {
  border: none;
  border-block-start: 1px solid var(--border);
  margin-block: var(--space-sm);
}