.hero {
  display: grid;
  background: var(--color-paper);
}

.hero__photo {
  min-height: 14rem;
}

.placeholder-photo {
  position: relative;
  background:
    linear-gradient(135deg, transparent 49.7%, var(--color-rule) 49.8%, var(--color-rule) 50.2%, transparent 50.3%),
    linear-gradient(45deg, transparent 49.7%, var(--color-rule) 49.8%, var(--color-rule) 50.2%, transparent 50.3%),
    var(--color-paper-2);
  background-size: 4rem 4rem;
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.placeholder-photo::before {
  content: "";
  position: absolute;
  inset: var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule);
}

.hero__content {
  display: grid;
  padding: var(--space-xl) var(--page-gutter) var(--space-2xl);
  align-content: center;
  gap: var(--space-lg);
}

.hero__content h1 {
  max-width: 18ch;
  font-size: var(--text-display-s);
}

.hero__lead {
  max-width: 58ch;
  color: var(--color-ink-2);
}

.principles {
  display: grid;
  margin-block-start: var(--space-md);
  gap: var(--space-lg);
}

.principle {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: var(--space-xs);
  font-size: var(--text-xs);
}

.principle > svg {
  color: var(--color-sage);
}

.principle strong {
  line-height: 1.4;
}

.principle span {
  color: var(--color-muted);
  font-family: var(--font-display);
  line-height: 1.35;
  transform: rotate(-2deg);
}

.audit-card {
  display: grid;
  padding: var(--space-xl) var(--page-gutter) var(--space-2xl);
  align-content: center;
  color: var(--color-tech-ink);
  background: var(--color-ink);
}

.audit-card h2 {
  color: var(--color-paper);
  font-size: clamp(2.25rem, 5vw, var(--text-3xl));
}

.audit-card > p:not(.hand-note) {
  max-width: 50ch;
  margin-block-start: var(--space-md);
  color: var(--color-tech-muted);
  font-size: var(--text-sm);
}

.audit-start {
  display: grid;
  margin-block-start: var(--space-lg);
  gap: var(--space-xs);
}

.audit-card label {
  color: var(--color-tech-ink);
}

.audit-card input {
  color: var(--color-ink);
  background: var(--color-paper);
  border-color: var(--color-paper);
}

.audit-card .field-helper {
  color: var(--color-tech-muted);
}

.hand-note--audit {
  width: fit-content;
  margin-block-start: var(--space-lg);
  margin-inline-start: auto;
  color: var(--color-tech-muted);
}

.promise-band {
  display: grid;
  padding: var(--space-xl) var(--page-gutter);
  align-items: center;
  gap: var(--space-xl);
  border-block: var(--rule-hair) solid var(--color-rule);
}

.promise-band__trust {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.promise-band__trust > svg {
  flex: 0 0 auto;
  color: var(--color-sage);
}

.promise-band__trust p {
  font-size: var(--text-sm);
  line-height: 1.45;
}

.promise-band blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, var(--text-xl));
  line-height: 1.28;
  text-align: center;
}

.promise-band blockquote::after {
  content: "";
  display: block;
  width: 6rem;
  margin: var(--space-md) auto 0;
  border-bottom: 2px solid var(--color-accent);
  transform: rotate(-4deg);
}

.stamp {
  width: fit-content;
  justify-self: center;
  padding: var(--space-sm);
  border: var(--rule-hair) solid var(--color-sage);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  transform: rotate(-3deg);
}

.pricing,
.stories,
.services {
  display: grid;
  gap: var(--space-xl);
}

.section-intro--pricing {
  position: relative;
}

.drawn-loop {
  width: 3.5rem;
  height: 2.25rem;
  margin-inline-start: 38%;
  border-inline-end: var(--rule-hair) solid var(--color-sage);
  border-bottom: var(--rule-hair) solid var(--color-sage);
  border-radius: 0 0 100% 0;
  transform: rotate(12deg);
}

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

.price-plan {
  display: grid;
  padding-block-start: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
  gap: var(--space-sm);
}

.price-plan__icon {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  color: var(--color-paper);
  background: var(--color-sage);
  border-radius: 50%;
}

.price-plan__icon--coral {
  color: var(--color-accent-ink);
  background: var(--color-accent);
}

.price-plan__icon--green {
  color: var(--color-paper);
  background: var(--color-ink);
}

.price-plan > p:not(.price) {
  color: var(--color-ink-2);
  font-size: var(--text-sm);
}

.price {
  margin-block: var(--space-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.price strong {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
}

.price small {
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.price-plan ul {
  display: grid;
  gap: var(--space-xs);
  list-style: none;
}

.price-plan li {
  display: flex;
  gap: var(--space-xs);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
}

.price-plan li svg {
  flex: 0 0 auto;
  color: var(--color-ink);
}

.pricing-help {
  display: flex;
  padding-block-start: var(--space-xl);
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
}

.pricing-help > svg {
  color: var(--color-sage);
}

.pricing-help p {
  flex: 1 1 18rem;
}

.stories__grid {
  display: grid;
  gap: var(--space-lg);
}

.story-card {
  position: relative;
  min-height: 20rem;
  padding: var(--space-lg);
  color: var(--color-ink);
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  overflow: hidden;
}

.story-card h3 {
  position: relative;
  z-index: var(--z-raised);
  font-size: var(--text-xl);
}

.story-card > p {
  position: relative;
  z-index: var(--z-raised);
  max-width: 26ch;
  margin-block-start: var(--space-lg);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
}

.story-card__photo {
  display: grid;
  position: absolute;
  inset: auto 0 0 auto;
  width: 44%;
  height: 48%;
  place-items: end center;
  color: var(--color-muted);
  background:
    linear-gradient(135deg, transparent 49.5%, var(--color-rule) 49.6%, var(--color-rule) 50.4%, transparent 50.5%),
    var(--color-paper-3);
  background-size: 2.5rem 2.5rem;
  border-block-start: var(--rule-hair) solid var(--color-rule);
  border-inline-start: var(--rule-hair) solid var(--color-rule);
}

.story-card__tape {
  position: absolute;
  inset-block-start: -0.35rem;
  inset-inline-end: var(--space-lg);
  width: 3.5rem;
  height: 1.35rem;
  background: color-mix(in oklch, var(--color-paper-3) 80%, var(--color-accent));
  transform: rotate(12deg);
}

.story-card__tape--right {
  inset-inline-end: var(--space-xl);
  transform: rotate(-5deg);
}

.story-card__scribble {
  position: absolute;
  inset: auto var(--space-xl) var(--space-lg) auto;
  color: var(--color-ink-2);
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  transform: rotate(15deg);
}

.services__grid {
  display: grid;
  border-top: var(--rule-hair) solid var(--color-rule);
}

.service-item {
  display: grid;
  min-width: 0;
  padding: var(--space-lg) var(--space-md);
  align-content: start;
  gap: var(--space-xs);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.service-item:nth-child(odd) {
  border-inline-end: var(--rule-hair) solid var(--color-rule);
}

.service-item > svg {
  margin-block-end: var(--space-xs);
  color: var(--color-sage);
}

.service-item h3 {
  font-size: var(--text-md);
}

.service-item p {
  color: var(--color-ink-2);
  font-size: var(--text-xs);
}

.service-item__price {
  color: var(--color-ink) !important;
  font-size: var(--text-sm) !important;
  font-variant-numeric: tabular-nums;
}

.services__link {
  justify-self: center;
}

.tech {
  padding-block: var(--space-2xl) var(--space-xl);
  color: var(--color-tech-ink);
  background: var(--color-tech);
}

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

.tech__intro h2 {
  color: var(--color-paper);
}

.tech__intro > p:not(.hand-note) {
  max-width: 50ch;
  margin-block-start: var(--space-md);
  color: var(--color-tech-muted);
  font-size: var(--text-sm);
}

.hand-note--tech {
  width: fit-content;
  margin-block-start: var(--space-lg);
  color: var(--color-cyan);
}

.tech-service {
  display: grid;
  padding-block-start: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-tech-2);
  gap: var(--space-sm);
}

.tech-service > svg,
.tech-service h3,
.tech-service strong,
.tech__footer a {
  color: var(--color-cyan);
}

.tech-service p,
.tech__footer p {
  color: var(--color-tech-muted);
  font-size: var(--text-sm);
}

.tech-service strong {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-variant-numeric: tabular-nums;
}

.tech__footer {
  display: flex;
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-lg);
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-tech-2);
}

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

.process__intro p {
  max-width: 45ch;
  margin-block-start: var(--space-md);
  color: var(--color-ink-2);
}

.process__steps {
  display: grid;
  list-style: none;
}

.process__steps li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  padding-block: var(--space-lg);
  column-gap: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
}

.process__steps li > span {
  grid-row: span 2;
  color: var(--color-accent-dark);
  font-variant-numeric: tabular-nums;
}

.process__steps p {
  color: var(--color-ink-2);
  font-size: var(--text-sm);
}

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

.faq__intro p {
  margin-block-start: var(--space-md);
  color: var(--color-ink-2);
}

.faq__list {
  border-top: var(--rule-hair) solid var(--color-rule);
}

.faq details {
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.faq summary {
  display: flex;
  min-height: 4.5rem;
  padding-block: var(--space-md);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  white-space: normal;
}

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

.faq summary svg {
  flex: 0 0 auto;
  transition: transform var(--dur-short) var(--ease-out);
}

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

.faq__answer {
  max-width: 66ch;
  padding: 0 var(--space-xl) var(--space-lg) 0;
  color: var(--color-ink-2);
}

.final-audit {
  padding-block: var(--space-2xl) var(--space-xl);
  background: var(--color-paper-2);
  border-top: var(--rule-hair) solid var(--color-rule);
}

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

.final-audit__form {
  margin: 0;
}

.hand-note--final {
  max-width: 18ch;
  align-self: end;
}

.final-audit__reassurance {
  display: flex;
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-md);
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-xl);
  border-top: var(--rule-hair) solid var(--color-rule);
  color: var(--color-ink-2);
  font-size: var(--text-xs);
}

.final-audit__reassurance span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  white-space: nowrap;
}