.hero {
  padding: calc(var(--space-5) * 2.4) 0 0; overflow: hidden; color: var(--color-text);
  background:
    radial-gradient(34% 55% at 74% 58%, var(--hero-glow), transparent 72%),
    radial-gradient(45% 70% at 100% 0%, var(--hero-shade), transparent 70%),
    linear-gradient(100deg, var(--hero-cream) 0%, var(--hero-cream) 38%, var(--hero-mist) 100%);
}
.hero__wrap { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-5); align-items: end; min-height: 560px; }
.hero__text { align-self: center; padding-bottom: calc(var(--space-5) * 2.4); display: flex; flex-direction: column; gap: var(--space-3); }
.hero__eyebrow { color: var(--color-primary); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.85rem; display: flex; align-items: center; gap: var(--space-2); }
.hero__eyebrow::before { content: ""; width: 28px; height: 3px; border-radius: var(--radius-full); background: var(--color-accent); }
.hero__title { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.08; color: var(--color-primary); }
.hero__sub { font-size: 1.1rem; line-height: 1.6; max-width: 46ch; color: var(--color-text-2); }
.hero__photo { width: 100%; max-width: 480px; height: auto; display: block; justify-self: center; filter: drop-shadow(0 18px 30px var(--hero-shade)); }
@media (max-width: 800px) {
  .hero { background:
    radial-gradient(70% 40% at 50% 85%, var(--hero-glow), transparent 70%),
    linear-gradient(180deg, var(--hero-cream) 0%, var(--hero-mist) 100%); }
  .hero { padding-top: var(--space-6); }
  .hero__wrap { grid-template-columns: 1fr; min-height: 0; gap: var(--space-4); }
  .hero__text { padding-bottom: 0; align-items: center; text-align: center; }
  .hero__eyebrow { justify-content: center; }
  .hero .cta { align-items: center; }
  .hero__photo { max-width: 280px; }
}

.how__steps { list-style: none; padding: 0; margin: calc(var(--space-5) + var(--space-3)) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.how__step { position: relative; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: calc(var(--space-5) + var(--space-1)) var(--space-4) var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.how__num { position: absolute; top: -22px; left: var(--space-4); min-width: 56px; height: 44px; padding: 0 var(--space-3); border-radius: var(--radius); background: var(--color-primary); color: var(--color-on-dark); font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; display: grid; place-items: center; }
.how__icon { position: absolute; top: var(--space-4); right: var(--space-4); color: var(--color-accent); }
.how__step h3 { color: var(--color-primary); padding-right: var(--space-5); }
/* Dashed line joining the cards (desktop) */
.how__step:not(:last-child)::after { content: ""; position: absolute; top: 50%; left: 100%; width: var(--space-5); border-top: 2px dashed var(--color-faint); opacity: 0.6; }
@media (max-width: 800px) { .how__steps { grid-template-columns: 1fr; gap: calc(var(--space-5) + var(--space-2)); } .how__step:not(:last-child)::after { display: none; } }

/* Cards wrap as centered rows (3 + 2), so a short last row sits in the middle. */
.samples__grid { list-style: none; padding: 0; margin: var(--space-4) 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.samples__grid > li { flex: 0 1 calc((100% - 2 * var(--space-3)) / 3); }
@media (max-width: 900px) { .samples__grid > li { flex-basis: calc((100% - var(--space-3)) / 2); } }
@media (max-width: 600px) { .samples__grid > li { flex-basis: 100%; } }
.sample-card { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.sample-card h3 { color: var(--color-primary); font-size: 1.1rem; }
.sample-card__who { color: var(--color-muted); font-size: 0.9rem; }
.sample-card__flow { font-weight: 600; }
.sample-card__soon { margin-top: auto; font-size: 0.85rem; color: var(--color-muted); }
.sample-card__shot { display: block; width: 100%; }
.sample-card__shot img { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--color-border); }
.sample-card__link { margin-top: auto; display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 600; color: var(--color-link); }

.about__wrap { display: grid; grid-template-columns: 280px 1fr; gap: var(--space-5); align-items: center; }
.about__photo { width: 100%; height: auto; border: 6px solid var(--color-accent); border-radius: var(--radius-lg); }
.about__text { display: flex; flex-direction: column; gap: var(--space-3); }
.about__text h2 { margin-bottom: 0; }
.about__eyebrow { color: var(--color-accent-ink); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.85rem; }
.about__role { font-style: italic; color: var(--color-muted); margin-top: calc(-1 * var(--space-2)); }
.about__link { font-weight: 600; min-height: var(--tap); display: inline-flex; align-items: center; align-self: flex-start; }
@media (max-width: 720px) {
  .about__wrap { grid-template-columns: 1fr; justify-items: center; }
  .about__photo { max-width: 240px; }
  .about__text { align-items: center; text-align: center; }
  .about__link { align-self: center; }
}

.fun__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); margin-top: var(--space-4); }
.fun__grid > .fun-card { flex: 0 1 440px; }
.fun-card { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.fun-card img { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--color-border); }
.fun-card h3 { color: var(--color-primary); }
.fun-card a { margin-top: auto; font-weight: 600; min-height: var(--tap); display: inline-flex; align-items: center; }

.faq details { border-bottom: 1px solid var(--color-border); padding: var(--space-3) 0; max-width: 760px; }
.faq summary { font-family: var(--font-display); font-weight: 700; color: var(--color-primary); cursor: pointer; min-height: var(--tap); display: flex; align-items: center; }
.faq details p { margin-top: var(--space-2); }

.final__wrap { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-4); }
@media (max-width: 720px) { .site-nav__cta { display: none; } }

.tools { padding: var(--space-6) 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.tools__wrap { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.tools__label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; }
.tools__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-4) var(--space-5); }
.tools__list img { height: 26px; width: auto; display: block; opacity: 0.8; }
@media (max-width: 720px) { .tools { padding: var(--space-5) 0; } .tools__list { gap: var(--space-3) var(--space-4); } .tools__list img { height: 20px; } }

.pains__grid { list-style: none; padding: 0; margin: var(--space-4) 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); }
.pains__grid > li { flex: 0 1 calc((100% - 2 * var(--space-4)) / 3); }
.pain-card { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-sm); border-top: 4px solid var(--color-accent); display: flex; flex-direction: column; gap: var(--space-2); }
.pain-card h3 { color: var(--color-primary); font-size: 1.1rem; }
@media (max-width: 800px) { .pains__grid > li { flex-basis: 100%; } }

.package__wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--space-5); align-items: center; }
.package__intro { display: flex; flex-direction: column; gap: var(--space-2); }
.package__mockup { width: 100%; max-width: 420px; height: auto; margin-top: var(--space-3); align-self: center; }
.package-card { position: relative; background: var(--color-surface); border: 1px solid var(--color-border); border-top: 4px solid var(--color-accent); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-4); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: var(--space-3); }
.package-card h3 { color: var(--color-primary); font-size: 1.3rem; }
.package-card__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.package-card__list li { position: relative; padding-left: 36px; line-height: 1.55; color: var(--color-text-2); }
.package-card__list li strong { color: var(--color-primary); font-weight: 600; }
.package-card__list li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: var(--radius-full); background: var(--color-accent); color: var(--color-accent-ink); font-size: 0.8rem; font-weight: 700; display: grid; place-items: center; }
.package-card__time { font-size: 0.9rem; color: var(--color-muted); }
.package-card__cta { position: relative; align-self: flex-start; }
.package-card__starter { font-size: 0.9rem; color: var(--color-muted); border-top: 1px solid var(--color-border); padding-top: var(--space-3); }
@media (max-width: 860px) { .package__wrap { grid-template-columns: 1fr; } .package__intro { align-items: center; text-align: center; } .package__mockup { max-width: 320px; } }

/* Hand-drawn arrows (from the old site): decorative, guide the eye to the
   next step or the button. Desktop only; phones stack everything anyway. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.doodle { position: absolute; width: 96px; height: 48px; color: var(--color-accent); pointer-events: none; display: none; }
@media (min-width: 1000px) {
  .doodle { display: block; }
  .hero__text { position: relative; }
  .doodle--package { left: -118px; top: -6px; transform: rotate(8deg); }
}

/* Centered section titles (and the intro line under them). The side-by-side
   sections (package, about) keep their titles left, next to the image. */
.section:not(.package):not(.about) .wrap > h2 { text-align: center; }
.section:not(.package):not(.about) .wrap > h2 + p { text-align: center; margin-inline: auto; }
.faq details { margin-inline: auto; }

/* Simple transitions. site/home.js adds .reveal (only with JS and when the
   visitor hasn't asked for reduced motion), then .is-visible as each part
   scrolls into view: a short fade-up, staggered across cards. */
/* An animation on `translate` (not `transform`) so it never fights the card hover lift. */
.reveal { opacity: 0; }
.reveal.is-visible { animation: reveal-up 0.6s ease var(--reveal-delay, 0ms) both; }
@keyframes reveal-up { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: none; } }
.cta__btn { transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; }
.cta__btn:hover { transform: translateY(-2px); }
.sample-card, .fun-card, .how__step { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.sample-card:hover, .fun-card:hover, .how__step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.site-nav__toggle svg { transition: transform 0.2s ease; }
.site-nav__toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
@media (max-width: 720px) {
  .site-header.has-menu.is-open .site-nav { animation: menu-in 0.2s ease; }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }