/* Sarah Jenkins sample: own brand, every rule scoped under .sj (see tests/samples.test.js). */
:root {
  --sj-forest: #1B3B2B;
  --sj-terracotta: #E07A5F;
  --sj-terracotta-dark: #C9654A;
  --sj-cream: #FAF7F2;
  --sj-sage: #E2ECE9;
  --sj-text: #2C3E35;
  --sj-line: rgba(27, 59, 43, 0.14);
  --sj-serif: 'Lora', Georgia, serif;
  --sj-sans: 'DM Sans', system-ui, sans-serif;
}

.sj, .sj *, .sj *::before, .sj *::after { box-sizing: border-box; }
.sj { background: var(--sj-cream); color: var(--sj-text); font: 400 16px/1.65 var(--sj-sans); overflow-x: clip; }
.sj h1, .sj h2, .sj h3, .sj p, .sj ul, .sj ol, .sj figure { margin: 0; }
.sj h1, .sj h2, .sj h3 { font-family: var(--sj-serif); color: var(--sj-forest); line-height: 1.2; }
.sj h1 { font-size: clamp(30px, 8vw, 54px); font-weight: 700; }
.sj h2 { font-size: clamp(26px, 6vw, 38px); font-weight: 600; margin-bottom: 20px; }
.sj h3 { font-size: 19px; font-weight: 600; margin-bottom: 8px; }
.sj img { display: block; width: 100%; height: auto; border-radius: 12px; object-fit: cover; }
.sj ul, .sj ol { padding: 0; list-style: none; }

.sj .sj-wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.sj .sj-narrow { max-width: 680px; }
.sj .sj-center { text-align: center; }
.sj .sj-band { padding: 72px 0; }
.sj .sj-band-white { background: #fff; }
.sj .sj-band-sage { background: var(--sj-sage); }
.sj .sj-lead { font-size: 18px; margin-bottom: 24px; max-width: 34em; }
.sj .sj-fine { font-size: 14px; opacity: 0.75; }
.sj .sj-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sj-terracotta-dark); margin-bottom: 14px; }

/* Header + footer */
.sj .sj-header { background: var(--sj-cream); border-bottom: 1px solid var(--sj-line); }
.sj .sj-header-in { padding-top: 16px; padding-bottom: 16px; }
.sj .sj-logo { font-family: var(--sj-serif); font-weight: 700; font-size: 21px; color: var(--sj-forest); letter-spacing: 0.02em; text-transform: uppercase; }
.sj .sj-logo small { display: block; font-family: var(--sj-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--sj-terracotta-dark); }
.sj .sj-footer { background: var(--sj-forest); color: var(--sj-sage); padding: 24px 0; font-size: 14px; text-align: center; }

/* CTA + buttons */
.sj .sj-cta, .sj .sj-submit {
  display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 28px;
  background: var(--sj-terracotta); color: #fff; border: 0; border-radius: 999px; cursor: pointer;
  font: 700 17px/1.2 var(--sj-sans); text-decoration: none; text-align: center;
  box-shadow: 0 6px 16px rgba(224, 122, 95, 0.3); transition: background 0.2s, transform 0.2s;
}
.sj .sj-cta { color: var(--sj-forest); }
.sj .sj-cta:hover, .sj .sj-submit:hover { background: var(--sj-terracotta-dark); transform: translateY(-1px); }
.sj .sj-cta:focus-visible, .sj .sj-submit:focus-visible, .sj .sj-ghost:focus-visible, .sj .sj-link:focus-visible,
.sj .sj-slot input:focus-visible + span, .sj .sj-field input:focus-visible, .sj .sj-field textarea:focus-visible,
.sj .sj-faq summary:focus-visible, .sj .sj-mail summary:focus-visible { outline: 3px solid var(--sj-forest); outline-offset: 2px; }
.sj .sj-cta-box { display: inline-block; margin-top: 4px; }
.sj .sj-cta-box .sj-fine { margin-top: 10px; }
.sj .sj-ghost { min-height: 44px; padding: 0 18px; background: #fff; color: var(--sj-forest); border: 1.5px solid var(--sj-forest); border-radius: 999px; font: 500 15px/1 var(--sj-sans); cursor: pointer; }
.sj .sj-ghost:hover { background: var(--sj-sage); }
.sj .sj-link { background: none; border: 0; padding: 12px; color: var(--sj-forest); font: 700 17px/1.2 var(--sj-sans); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

/* Hero */
/* Soft cream → sage gradient with a terracotta glow behind her cutout photo,
   which sits on the bottom edge of the hero (no frame, no box). */
.sj .sj-hero {
  overflow: hidden;
  padding: 56px 0 0;
  background:
    radial-gradient(70% 40% at 50% 88%, rgba(224, 122, 95, 0.30), transparent 70%),
    linear-gradient(180deg, var(--sj-cream) 0%, var(--sj-sage) 100%);
}
.sj .sj-hero-grid { display: grid; gap: 32px; align-items: end; }
.sj .sj-hero-copy { align-self: center; }
.sj .sj-hero-copy h1 { margin-bottom: 18px; }
.sj .sj-hero-copy .sj-lead { font-size: 19px; }
.sj .sj-hero-media img { max-width: 340px; margin: 0 auto; border-radius: 0; object-fit: contain; filter: drop-shadow(0 18px 30px rgba(27, 59, 43, 0.18)); }

/* Signs: first-person quotes on soft "pebble" shapes (Sarah's own card style). */
.sj .sj-signs { display: grid; gap: 18px; margin-bottom: 32px; }
.sj .sj-signs li { position: relative; padding: 34px 26px 24px; background: var(--sj-sage); border-radius: 44px 14px 44px 14px; }
.sj .sj-signs li:nth-child(even) { background: var(--sj-cream); border-radius: 14px 44px 14px 44px; }
.sj .sj-signs li::before { content: "\201C"; position: absolute; top: -6px; left: 22px; font: italic 700 64px/1 var(--sj-serif); color: var(--sj-terracotta); }
.sj .sj-signs blockquote { margin: 0 0 12px; font: italic 500 20px/1.4 var(--sj-serif); color: var(--sj-forest); }
.sj .sj-sign-tag { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sj-terracotta-dark); }
.sj .sj-closer { font-family: var(--sj-serif); font-style: italic; font-size: 19px; color: var(--sj-forest); }

/* How I help: editorial columns, no boxes. Italic "First / Then / Finally" with a leaf. */
.sj .sj-steps { display: grid; gap: 28px; }
.sj .sj-steps li { padding-left: 20px; border-left: 2px solid var(--sj-terracotta); }
.sj .sj-num { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font: italic 600 26px/1.1 var(--sj-serif); color: var(--sj-terracotta-dark); }
.sj .sj-num::after { content: ""; width: 14px; height: 14px; background: var(--sj-forest); border-radius: 0 100% 0 100%; opacity: 0.8; }

/* Split blocks */
.sj .sj-split { display: grid; gap: 28px; align-items: center; }
.sj .sj-split-media img { aspect-ratio: 4 / 3; }
.sj .sj-split-media .sj-portrait { aspect-ratio: 4 / 5; max-width: 420px; margin: 0 auto; background: var(--sj-sage); border-radius: 999px 999px 18px 18px; }
.sj .sj-checks { display: grid; gap: 14px; }
.sj .sj-checks li { position: relative; padding-left: 34px; }
.sj .sj-checks li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 16px; height: 16px; background: var(--sj-terracotta); border-radius: 0 100% 0 100%; }
.sj .sj-checks b { color: var(--sj-forest); }
.sj #sj-about p + p { margin-top: 14px; }
.sj .sj-kicker { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sj-terracotta-dark); margin-bottom: 8px; }
.sj .sj-pull { margin: 26px 0; padding-left: 18px; border-left: 3px solid var(--sj-terracotta); font: italic 500 22px/1.4 var(--sj-serif); color: var(--sj-forest); }
.sj .sj-facts { display: flex; flex-wrap: wrap; gap: 10px; }
.sj .sj-facts li { padding: 8px 16px; background: var(--sj-sage); border-radius: 999px; font-size: 14px; }
.sj .sj-facts b { color: var(--sj-forest); }
/* Organic image shapes: an arch for her portrait, a soft blob for food. */
.sj .sj-split-media .sj-blob { aspect-ratio: 1 / 1; max-width: 460px; margin: 0 auto; border-radius: 58% 42% 46% 54% / 48% 56% 44% 52%; }

/* FAQ */
.sj .sj-faq { border-bottom: 1px solid var(--sj-line); }
.sj .sj-faq summary { cursor: pointer; padding: 18px 28px 18px 0; font: 600 18px/1.35 var(--sj-serif); color: var(--sj-forest); list-style: none; position: relative; }
.sj .sj-faq summary::-webkit-details-marker { display: none; }
.sj .sj-faq summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font: 400 26px/1 var(--sj-sans); color: var(--sj-terracotta-dark); }
.sj .sj-faq[open] summary::after { content: "\2212"; }
.sj .sj-faq p { padding: 0 0 18px; }

/* Final CTA */
.sj .sj-final { background: var(--sj-forest); text-align: center; padding: 72px 0; }
.sj .sj-final h2 { color: #fff; }

/* Form */
.sj .sj-form-band { padding-top: 40px; }
.sj .sj-form { display: grid; gap: 22px; }
.sj .sj-fields { display: grid; gap: 16px; }
.sj .sj-field { display: grid; gap: 6px; }
.sj .sj-field span { font-weight: 500; color: var(--sj-forest); }
.sj .sj-field input, .sj .sj-field textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; background: #fff; color: var(--sj-text);
  border: 1.5px solid rgba(27, 59, 43, 0.3); border-radius: 10px; font: 400 16px/1.4 var(--sj-sans);
}
.sj .sj-field textarea { resize: vertical; }
.sj .sj-slots { border: 1px solid var(--sj-line); border-radius: 12px; background: #fff; padding: 18px 16px 8px; margin: 0; min-width: 0; }
.sj .sj-slots legend { padding: 0 8px; font: 600 18px/1.3 var(--sj-serif); color: var(--sj-forest); }
.sj .sj-day { margin-bottom: 14px; }
.sj .sj-day p { font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 8px; color: var(--sj-forest); }
.sj .sj-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sj .sj-slot { position: relative; display: block; }
.sj .sj-slot input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.sj .sj-slot span { display: grid; place-items: center; min-height: 46px; padding: 0 4px; border: 1.5px solid var(--sj-forest); border-radius: 8px; color: var(--sj-forest); font-weight: 500; font-size: 15px; transition: background 0.15s; }
.sj .sj-slot:hover span { background: var(--sj-sage); }
.sj .sj-slot input:checked + span { background: var(--sj-forest); color: #fff; }
.sj .sj-submit { width: 100%; color: var(--sj-forest); }

/* Thank-you */
.sj .sj-thanks-band { padding-top: 40px; }
.sj .sj-booked { text-align: center; background: #fff; border-radius: 16px; padding: 32px 20px; border: 1px solid var(--sj-line); margin-bottom: 16px; }
.sj .sj-tick { display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: 14px; border-radius: 50%; background: var(--sj-forest); color: #fff; font-size: 28px; }
.sj .sj-booked h2 { margin-bottom: 8px; }
.sj .sj-when { font: 600 24px/1.3 var(--sj-serif); color: var(--sj-terracotta-dark); margin-bottom: 10px; }
.sj .sj-cal { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 28px; }
.sj .sj-card { background: var(--sj-sage); border-radius: 12px; padding: 24px 20px; margin-bottom: 20px; }
.sj .sj-card li { position: relative; padding-left: 22px; margin-top: 10px; }
.sj .sj-card li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 8px; height: 8px; border-radius: 50%; background: var(--sj-terracotta); }
.sj .sj-video { margin-bottom: 24px; }
.sj .sj-poster { position: relative; aspect-ratio: 16 / 9; display: grid; place-content: center; justify-items: center; gap: 6px; border-radius: 12px; color: #fff; text-align: center;
  background: linear-gradient(135deg, var(--sj-forest), #2F5A43); }
.sj .sj-poster p { font: 600 18px/1.3 var(--sj-serif); }
.sj .sj-poster small { opacity: 0.8; }
.sj .sj-play { width: 64px; height: 64px; border-radius: 50%; background: var(--sj-terracotta); position: relative; }
.sj .sj-play::after { content: ""; position: absolute; left: 25px; top: 19px; border-left: 20px solid var(--sj-forest); border-top: 13px solid transparent; border-bottom: 13px solid transparent; }

/* Emails */
.sj .sj-mail-band { padding-top: 40px; }
.sj .sj-inbox { display: grid; gap: 12px; margin-bottom: 28px; }
.sj .sj-mail-wrap { border-radius: 12px; }
.sj .sj-mail { background: #fff; border: 1px solid var(--sj-line); border-radius: 12px; overflow: hidden; }
.sj .sj-mail summary { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 16px; cursor: pointer; list-style: none; }
.sj .sj-mail summary::-webkit-details-marker { display: none; }
.sj .sj-mail[open] summary { background: var(--sj-sage); }
.sj .sj-from { font-weight: 700; color: var(--sj-forest); }
.sj .sj-tag { grid-column: 2; grid-row: 1; align-self: start; justify-self: end; padding: 2px 10px; border-radius: 999px; background: var(--sj-sage); color: var(--sj-forest); font-size: 12px; font-weight: 700; white-space: nowrap; }
.sj .sj-mail[open] .sj-tag { background: #fff; }
.sj .sj-tag-alt { background: #FBE3DB; color: #8A3A24; }
.sj .sj-subject { grid-column: 1 / -1; font-weight: 500; }
.sj .sj-preview { grid-column: 1 / -1; font-size: 14px; opacity: 0.7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sj .sj-mail[open] .sj-preview { display: none; }
.sj .sj-body { padding: 18px 16px 20px; }
.sj .sj-body p + p { margin-top: 12px; }
.sj .sj-finish { width: auto; }

@media (min-width: 760px) {
  .sj .sj-band { padding: 176px 0; }
  .sj .sj-final { padding: 112px 0; }
  .sj .sj-wrap { padding: 0 32px; }
  .sj .sj-hero {
    padding: 72px 0 0;
    background:
      radial-gradient(34% 55% at 74% 58%, rgba(224, 122, 95, 0.32), transparent 72%),
      radial-gradient(45% 70% at 100% 0%, rgba(27, 59, 43, 0.10), transparent 70%),
      linear-gradient(100deg, var(--sj-cream) 0%, var(--sj-cream) 38%, var(--sj-sage) 100%);
  }
  .sj .sj-hero-grid { grid-template-columns: 1.2fr 1fr; gap: 56px; }
  .sj .sj-hero-copy { padding-bottom: 96px; }
  .sj .sj-hero-media img { max-width: 520px; }
  .sj .sj-signs { grid-template-columns: repeat(2, 1fr); }
  .sj .sj-steps { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .sj .sj-split { grid-template-columns: 1fr 1fr; gap: 56px; }
  .sj .sj-split-flip .sj-split-media { order: 2; }
  .sj .sj-fields { grid-template-columns: 1fr 1fr; }
  .sj .sj-chips { gap: 10px; }
  .sj .sj-mail summary { grid-template-columns: 150px 1fr auto; align-items: baseline; }
  .sj .sj-subject { grid-column: 2; grid-row: 1; }
  .sj .sj-tag { grid-column: 3; }
  .sj .sj-preview { grid-column: 2 / -1; grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .sj .sj-cta, .sj .sj-submit, .sj .sj-slot span { transition: none; }
}