/* ==========================================================================
   Evolution Haus. Sections and components (everything below the hero).
   Rhythm: calm and moving sections alternate. Surfaces are cream plus soft
   tints of lilac and apricot. Black is for text and lines only.
   ========================================================================== */

/* ---------- Surfaces and sections ---------- */
.section { padding-block: clamp(64px, 8vw, 128px); }
.section--tight { padding-block: clamp(40px, 5vw, 72px); }



.bg-lilac-25 { background: #f2eaf0; --surface: #fff; --surface-2: #f2eaf0; --lilac-25: #fff; --lilac-50: #fff; --apricot-25: #fff; --wash: var(--apricot); --accent-ink: var(--black); }
/* The accent word is apricot on cream and on the pale lilac-50 sections. On the light-on-light surfaces (full lilac, lilac-25, peach) the letters are black so they stay readable on the highlight. */


/* ---------- Type roles ---------- */
.h2, .h3, .h4 { isolation: isolate; font-family: var(--font-display); color: var(--black); text-wrap: balance; letter-spacing: -0.005em; }
.h2 { font-weight: 300; font-size: clamp(2.25rem, 1.3rem + 3vw, 4rem); line-height: 1.05; }
.h3 { font-weight: 400; font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.25rem); line-height: 1.18; }
.h4 { font-weight: 400; font-size: clamp(1.5rem, 1.3rem + 0.7vw, 1.75rem); line-height: 1.22; }
.h2 em, .h3 em, .h4 em { font-style: italic; font-weight: 300; }

.display-line { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); line-height: 1.2; color: var(--black); }

.quote { font-family: var(--font-display); font-style: normal; font-weight: 300; color: var(--black); font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); line-height: 1.35; }

.stack > * + * { margin-top: var(--gap, 20px); }
.prose > * + * { margin-top: 1.1em; }
.measure { max-width: 38rem; }
/* A .wrap that is also .measure keeps the page's left edge and narrows what's inside it */
.wrap.measure { max-width: var(--max); }
.wrap.measure > * { max-width: 38rem; }
.center { text-align: center; margin-inline: auto; }
.signoff { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 1.75rem; line-height: 1.2; color: var(--black); }

/* Placeholders the client still owes us, shown plainly so nothing looks finished when it isn't */
.ph { background: var(--apricot-25); padding: 1px 8px; font-style: normal; color: var(--black); border-radius: var(--r); }


.text-link {
  display: inline-block; font-weight: 500; color: var(--black);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
  transition: text-decoration-thickness 160ms var(--ease-std);
}
.text-link:hover { text-decoration-thickness: 2px; }

.heart { display: inline-block; width: 0.9em; height: 0.9em; color: var(--black); vertical-align: -0.1em; }

.split { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); }
/* Headlines set on their own lines, the way the hero is */
.h2 .line { display: block; }

@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: clamp(48px, 6vw, 96px); align-items: start; }
  /* The headline stays pinned while the text beside it scrolls, so the left column never sits empty */
  .split > :first-child { position: sticky; top: calc(var(--header-h) + 40px); }
  .split--even { grid-template-columns: 1fr 1fr; }
}

/* ---------- Photos (placeholders until Melissa's real photos arrive) ---------- */
.photo {
  position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--apricot-25); border-radius: var(--r); }
.photo img, .photo video { width: 100%; height: 100%; object-fit: cover; }
.photo--portrait { aspect-ratio: 4 / 5; }
.photo--wide { aspect-ratio: 3 / 2; }
.photo--square { aspect-ratio: 1 / 1; }


.bleed { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); padding-inline: var(--gutter); }
.bleed__text { max-width: 38rem; }
@media (min-width: 900px) {
  .bleed {
    --edge: max(var(--gutter), calc((100% - var(--max)) / 2));
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
    column-gap: clamp(40px, 6vw, 96px); padding-inline: var(--edge);
  }
  /* Meet Melissa, after Jessica Pinili: a rounded portrait frame inside the container, not bleeding off the edge */
  .bleed { grid-template-columns: 5fr 6fr; }
}

/* ---------- Scroll reveals (only on the sections marked as moving) ---------- */
/* Content is always visible at rest: the reveal is a small rise, never a fade in from nothing */
.js [data-reveal] {
  transform: translateY(14px);
  transition: transform 450ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js [data-reveal].is-in, .reveal-all [data-reveal] { transform: none; }

/* ==========================================================================
   Header extras
   ========================================================================== */
.site-nav__list a[aria-current="page"] { background-size: 100% 1px; }
.back-link { font-weight: 500; font-size: 0.9375rem; color: var(--black); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

/* ==========================================================================
   Home: proof bar, banner
   ========================================================================== */
.proof { border-block: 1px solid var(--hairline); padding-block: 20px; }
.proof__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 32px; font-size: 0.875rem; line-height: 1.4; }
.proof__quote { font-family: var(--font-display); font-style: normal; font-weight: 300; font-size: 1.125rem; color: var(--black); }
.proof__by { display: inline-block; margin-left: 0.75em; font-family: var(--font-body); font-style: normal; font-weight: 400; font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--ink); }
.proof-quotes { display: grid; align-items: center; min-width: 0; flex: 1 1 100%; }
.proof-quotes .proof__quote { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 450ms ease, visibility 450ms; }
.proof-quotes .proof__quote.is-active { opacity: 1; visibility: visible; }
.proof-quotes:focus-visible { outline: 2px solid var(--black); outline-offset: 6px; }
.tech-job > p { margin-top: 14px; }
@media (prefers-reduced-motion: reduce) { .proof-quotes .proof__quote { transition: none; } }
.proof__facts { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.proof__facts li { display: flex; align-items: center; gap: 8px; }
.proof__facts li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--apricot); }
@media (min-width: 900px) {
  .proof-strip .wrap { flex-wrap: nowrap; align-items: center; }
  .proof-quotes { flex: 1 1 0; }
  .proof-strip .proof__facts { flex: 0 0 auto; }
}

.banner { background: var(--lilac); overflow: hidden; padding-block: 14px; }
.banner__track { display: flex; width: max-content; animation: marquee 90s linear infinite; will-change: transform; }
.banner:hover .banner__track { animation-play-state: paused; }
.banner__group { display: flex; flex: none; align-items: center; gap: 28px; padding-right: 28px; }
.banner__item {
  font-family: var(--font-display); font-style: normal; font-weight: 400; white-space: nowrap; color: var(--black);
  font-size: clamp(1.125rem, 1rem + 0.45vw, 1.375rem); line-height: 1.2;
}
/* The separator between phrases: the brand four-point sparkle, in white */
.banner__star { flex: none; width: 18px; height: 18px; color: #fff; fill: currentColor; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Change more lives ---------- */
.lead-line { font-family: var(--font-display); font-weight: 300; color: var(--black); font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); line-height: 1.2; }
.swap { margin-top: clamp(32px, 5vw, 56px); padding-top: clamp(24px, 4vw, 40px); border-top: 1px solid var(--hairline); font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem); }
.swap .line { display: block; }

/* ---------- Picture this ---------- */
.days { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); margin-top: clamp(32px, 5vw, 56px); }
@media (min-width: 600px) { .days { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .days { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
/* Days are soft cream cards on the peach block: a lilac number, the day with its first word in italic, then the moment */
.day {
  position: relative; display: flex; flex-direction: column;
  padding: 28px 24px 32px;
  background: var(--surface);
  box-shadow: 0 24px 48px -32px rgba(17, 18, 13, 0.28);
  transition: translate 200ms var(--ease-std), box-shadow 200ms var(--ease-std); border-radius: var(--r); }
/* The hover lift uses `translate`, so it never fights the scroll reveal's `transform` (or its stagger delay) */
.js .day[data-reveal] { transition: transform 450ms var(--ease-out) calc(var(--i, 0) * 70ms), translate 200ms var(--ease-std), box-shadow 200ms var(--ease-std); }
.day:hover { translate: 0 -4px; box-shadow: 0 30px 56px -30px rgba(17, 18, 13, 0.34); }
.day__num {
  display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 28px; background: var(--surface-2);
  font-weight: 600; font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--black); border-radius: var(--r); }
.day__name { font-family: var(--font-display); font-style: normal; font-weight: 300; font-size: clamp(1.875rem, 1.6rem + 0.8vw, 2.25rem); line-height: 1.15; color: var(--black); margin-bottom: 12px; }
.day__name em { font-style: italic; }
.day__spark { position: absolute; top: 37px; right: 24px; width: 18px; height: 18px; color: var(--apricot); }
.days__close { margin-top: clamp(32px, 5vw, 48px); text-align: center; }
.days__close em { font-style: italic; }

/* ---------- The stones (framework) ---------- */
.stones { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); margin-top: clamp(32px, 5vw, 56px); }
/* The Woman and The Magic sit side by side; The Machine spans the row below and holds the four Cs */
@media (min-width: 760px) { .stones { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stone--machine { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .stones { gap: 20px; } .stone--machine .cs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.stone { padding: clamp(24px, 3vw, 36px); border-radius: var(--r); }
.stone__title { font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); line-height: 1.1; color: var(--black); margin-bottom: 14px; }
/* The italic W carries its own space; the italic M swashes left into "The". Even them out per word. */
.stone__title em { font-style: italic; margin-left: 0.1em; color: var(--apricot); }

.stone--woman { background: var(--surface); border: 1px solid var(--hairline); }
.stone--magic { background: var(--surface); }
.stone--machine { background: var(--surface); }
.stone__inside { margin-top: 24px; font-weight: 500; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--black); }

.cs { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); margin-top: 14px; }
@media (min-width: 560px) { .cs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.c { background: var(--surface); border: 1px solid var(--hairline); padding: 18px 20px; font-size: 0.9375rem; line-height: 1.5; border-radius: var(--r); }
.pill { display: inline-block; margin-bottom: 8px; padding: 3px 14px; background: var(--lilac); color: var(--black); font-weight: 600; font-size: 0.875rem; line-height: 1.4; border-radius: var(--r); }
/* The closing line sits centred with the peach button below it */
.stones__after { margin-top: clamp(28px, 4vw, 44px); display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }

/* ---------- Built for you. Then we stay. ---------- */
.contrast { display: grid; gap: 6px; margin-top: 28px; }
.contrast__line { font-family: var(--font-body); font-style: normal; font-weight: 400; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.6; color: var(--ink); }
.contrast__answer { margin-top: clamp(24px, 4vw, 40px); }
.tree-line { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--hairline); font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 1.375rem; line-height: 1.35; color: var(--black); }

/* ---------- Testimonials ---------- */
.proofgrid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); margin-top: clamp(32px, 5vw, 56px); }
@media (min-width: 900px) { .proofgrid { grid-template-columns: 1.3fr 1fr; align-items: stretch; } .proofgrid--two { grid-template-columns: 1fr 1fr; } }

.video { position: relative; aspect-ratio: 16 / 10; background: var(--surface); display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--r); }



.video--tall { aspect-ratio: 4 / 5; }
.video__caption { position: absolute; left: 20px; bottom: 16px; right: 20px; font-size: 0.875rem; color: var(--ink); }
.play {
  display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%;
  background: #fff; color: var(--black); border: 1px solid var(--black); cursor: pointer;
  transition: transform 200ms var(--ease-out);
}
.play:hover { transform: scale(1.06); }
.play svg { width: 30px; height: 30px; }

.quote-card { background: var(--surface); padding: clamp(24px, 4vw, 44px); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; border-radius: var(--r); }

.quote-card__by { display: flex; align-items: center; gap: 14px; font-size: 0.875rem; line-height: 1.4; color: var(--ink); }
.quote-card__mark { flex: none; display: grid; place-items: center; width: 44px; height: 44px; background: var(--surface-2); color: var(--apricot); border-radius: var(--r); }
.quote-card__mark svg { width: 18px; height: 18px; }
.quote-card:not(.quote-card--feature) .quote-card__mark { background: var(--surface-2); }

/* The featured quote: one large lilac card leads the proof (Jessica Pinili's results block) */
.quote-card--feature { margin-top: clamp(32px, 5vw, 56px); background: var(--lilac); padding: clamp(32px, 5vw, 64px); gap: clamp(32px, 4vw, 48px); }
.quote-card--feature .quote { font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.125rem); line-height: 1.3; max-width: 44ch; }
.quote-card--feature .quote-card__by { color: var(--black); }
.video--wide { margin-top: 20px; aspect-ratio: 16 / 10; }
@media (min-width: 700px) { .video--wide { aspect-ratio: 16 / 7; } }

/* Full-width section headlines are centred (no eyebrow above them); headlines in side-by-side layouts stay left */
.wrap > h2.h2 { text-align: center; margin-inline: auto; }

/* The stones on the full-lilac block: cream and pale-lilac stones with black type */






/* ---------- Hi, I'm Melissa ---------- */
.nums { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); margin-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--black); }
@media (min-width: 560px) { .nums { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.num { padding: 20px 16px 8px 0; }
.num__figure { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.75rem, 2rem + 3vw, 4rem); line-height: 1; color: var(--black); }
.num__label { margin-top: 6px; font-size: 0.875rem; line-height: 1.4; color: var(--ink); }

/* ---------- Closing panel ---------- */
.closing .wrap { max-width: 46rem; text-align: center; }
.closing .lead { margin-inline: auto; }
.closing .btn { width: 100%; }
@media (min-width: 600px) { .closing .btn { width: auto; } }
.closing__alt { margin-top: 28px; font-size: 1rem; }
.closing__alt p + a { margin-top: 6px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { position: relative; overflow: hidden; background: var(--cream); border-top: 1px solid var(--hairline); padding-top: clamp(48px, 6vw, 80px); }
.footer__grid { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1180px) { .footer__grid { grid-template-columns: 1.2fr 1.2fr 0.01fr; } .lunch--footer { display: none; } }
.footer__brand img { display: block; width: 112px; height: auto; }
.footer__supporter { max-width: 36ch; margin-top: 20px; font-size: 0.875rem; line-height: 1.6; }
.footer__tagline { margin-top: 16px; font-family: var(--font-display); font-style: normal; font-weight: 400; font-size: 1.5rem; line-height: 1.3; color: var(--black); max-width: 22rem; }
.footer__nav { display: flex; gap: 48px; flex-wrap: wrap; }
.footer__nav ul { display: grid; gap: 10px; align-content: start; }
.footer__nav a { color: var(--black); text-decoration: none; font-weight: 500; font-size: 0.9375rem; }
.footer__nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer__head { margin-bottom: 6px; font-weight: 500; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); }
.footer__legal { margin-top: 40px; font-size: 0.8125rem; color: var(--ink); }
/* A slim lilac strip closes the page */
.footer__strip { position: relative; z-index: 1; margin-top: clamp(40px, 5vw, 64px); background: var(--lilac); padding-block: 16px; font-size: 0.8125rem; color: var(--black); }
body.page-community .lunch--footer { display: none; }

/* ---------- The Long Lunch card ---------- */
.lunch { position: relative; background: var(--lilac); padding: 24px; border-radius: var(--r); }
.lunch__label { font-family: var(--font-display); font-style: normal; font-weight: 300; font-size: 1.5rem; line-height: 1.2; color: var(--black); }
.lunch__when { margin-top: 8px; font-weight: 600; font-size: 0.9375rem; color: var(--black); }
.lunch__topic { margin: 6px 0 14px; font-size: 0.9375rem; line-height: 1.5; color: var(--black); }
.lunch__spark { position: absolute; top: 18px; right: 52px; width: 18px; height: 18px; color: #fff; }
.lunch .ph { background: #fff; }

.lunch--float { display: none; }
@media (min-width: 1180px) {
  .lunch--float { display: block; position: fixed; right: 12px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40; width: 300px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.75), 0 24px 48px -26px rgba(17, 18, 13, 0.35); transform: translateY(0); transition: opacity 250ms var(--ease-std), transform 250ms var(--ease-std); }
  /* Hidden on the first screen (so it never sits on the hero photo) and when dismissed */
  .lunch--float.is-away { opacity: 0; pointer-events: none; transform: translateY(12px); }
  /* Tucked: the card slides off to the right and the side tab slides in */
  .lunch--float.is-tucked { opacity: 0; pointer-events: none; transform: translateX(calc(100% + 40px)); }
  /* Collapse handle: a small tab joined to the card's left edge, a shade deeper than the card */
  .lunch__close { position: absolute; top: 50%; left: -26px; display: grid; place-items: center; width: 26px; height: 44px; margin-top: -22px; padding: 0; border: 0; background: #C8ADE2; color: var(--black); cursor: pointer; box-shadow: -1px 0 0 rgba(255, 255, 255, 0.75), 0 -1px 0 rgba(255, 255, 255, 0.75), 0 1px 0 rgba(255, 255, 255, 0.75); transition: background 200ms var(--ease-std); border-radius: var(--r); }
  .lunch__close svg { width: 16px; height: 16px; }
  .lunch__close:hover { background: #BFA2DC; }
  .lunch--float .lunch__spark { right: 20px; }
  .lunch__close svg { transition: transform 200ms var(--ease-std); }
  .lunch__close:hover svg { transform: translateX(3px); }
  /* Tucked handle: the same small tab, now on the screen edge, chevron pointing back in */
  .lunch-tab { position: fixed; right: 0; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: grid; place-items: center; width: 28px; height: 48px; padding: 0; border: 0; background: #C8ADE2; color: var(--black); cursor: pointer; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.75), -8px 12px 28px -14px rgba(17, 18, 13, 0.35); transform: translateX(110%); opacity: 0; pointer-events: none; transition: transform 300ms var(--ease-out), opacity 250ms var(--ease-std), width 200ms var(--ease-std); border-radius: var(--r); }
  .lunch-tab svg { width: 16px; height: 16px; transition: transform 200ms var(--ease-std); }
  .lunch-tab.is-out { transform: translateX(0); opacity: 1; pointer-events: auto; transition-delay: 120ms; }
  .lunch-tab.is-out:hover { width: 34px; background: #BFA2DC; }
  .lunch-tab.is-out:hover svg { transform: translateX(-3px); }
  .lunch-tab.is-away { opacity: 0; pointer-events: none; }
  .lunch-tab:focus-visible, .lunch__close:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }
}
.lunch__close, .lunch-tab { display: none; }
@media (min-width: 1180px) { .lunch__close { display: grid; border-radius: var(--r); } .lunch-tab { display: grid; border-radius: var(--r); } }

/* ---------- Sticky Audit bar (phones and tablets) ---------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--cream); border-top: 1px solid var(--hairline);
  transform: translateY(110%); transition: transform 280ms var(--ease-out);
}
.sticky-cta.is-visible { transform: none; }
.sticky-cta .btn { width: 100%; }
@media (min-width: 900px) { .sticky-cta { display: none; } }
@media (max-width: 899px) { body.has-sticky { padding-bottom: 84px; } }

/* ==========================================================================
   Inner pages: The Build
   ========================================================================== */
.pain { margin-top: clamp(28px, 4vw, 48px); max-width: 46rem; }
.pain li { padding-block: 18px; border-top: 1px solid var(--hairline); font-size: 1.125rem; line-height: 1.55; color: var(--black); }
.pain li:last-child { border-bottom: 1px solid var(--hairline); }
@media (min-width: 768px) { .pain li { font-size: 1.25rem; } }

.shift { transition: background-color 600ms var(--ease-std); }
.js .shift:not(.is-in) { background-color: #fff; }
.reveal-all .shift { background-color: var(--lilac-25); }

.choose { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); margin-top: clamp(28px, 4vw, 48px); }
@media (min-width: 900px) { .choose { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.choose__card { background: var(--surface); border: 1px solid var(--hairline); padding: clamp(24px, 3vw, 36px); transition: transform 200ms var(--ease-out); border-radius: var(--r); }
.choose__card:hover { transform: translateY(-2px); }
.choose__title { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.25; color: var(--black); margin-bottom: 12px; }
.choose__after { margin-top: clamp(28px, 4vw, 44px); display: grid; gap: 20px; justify-items: start; }

.weeklist { display: grid; gap: 12px; margin-top: clamp(28px, 4vw, 44px); max-width: 44rem; }
.weeklist li { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); line-height: 1.3; color: var(--black); }
.weeklist li + li { padding-top: 12px; border-top: 1px solid var(--hairline); }


.cs--big { margin-top: clamp(24px, 4vw, 40px); }
.cs--big .c { font-size: 1rem; padding: 24px; background: var(--surface); border-color: transparent; }
.cs--big .pill { background: var(--lilac); }
.after-cs { margin-top: clamp(24px, 4vw, 36px); max-width: 38rem; }

/* How it works: a true sequence, so it gets numbers and a line that draws down */
/* Seven steps on hairline-ruled columns with italic numerals; the last step spans two so no row is left half empty */
.steps { display: grid; gap: 40px 28px; grid-template-columns: minmax(0, 1fr); margin-top: clamp(32px, 5vw, 56px); }
@media (min-width: 700px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .step:last-child { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } .step:last-child { grid-column: span 2; } }
.step { padding-top: 20px; border-top: 1px solid var(--black); }
.step__num {
  display: block; margin-bottom: 18px;
  font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 3rem; line-height: 1; color: var(--black);
}
.step__title { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.3; color: var(--black); }
.step__title small { font-family: var(--font-body); font-size: 0.875rem; font-weight: 400; color: var(--ink); }
.step__body { margin-top: 6px; max-width: 38rem; }
.callout { margin-top: clamp(32px, 5vw, 56px); padding: clamp(24px, 3vw, 36px); background: var(--surface); max-width: 52rem; border-radius: var(--r); }

/* Pricing */
.plans { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); margin-top: clamp(32px, 5vw, 56px); }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; } }
.plan { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--hairline); padding: clamp(24px, 3vw, 36px); border-radius: var(--r); }
.plan--featured { background: var(--lilac); border-color: var(--lilac); }
@media (min-width: 900px) { .plan--featured { transform: translateY(-8px); } }
.plan__label { font-weight: 500; font-size: 0.75rem; line-height: 1.33; letter-spacing: 0.18em; text-transform: uppercase; color: var(--black); }
.plan__for {
  margin-top: 10px; padding-bottom: 22px; border-bottom: 1px solid var(--hairline);
  font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 1.625rem; line-height: 1.25; color: var(--black);
}
.plan--featured .plan__for { border-bottom-color: rgba(17, 18, 13, 0.25); }
@media (min-width: 900px) { .plan__for { min-height: 4.6em; } }
.plan__name { margin-top: 22px; font-family: var(--font-body); font-weight: 600; font-size: 1.125rem; line-height: 1.3; color: var(--black); }
.plan__flag { position: absolute; top: 24px; right: 24px; padding: 3px 12px; background: var(--surface-2); font-weight: 600; font-size: 0.75rem; line-height: 1.4; color: var(--black); border-radius: var(--r); }
.plan__price { margin-top: 18px; font-family: var(--font-display); font-weight: 400; font-size: clamp(3rem, 2.4rem + 2vw, 4rem); line-height: 1; color: var(--black); }
.plan__price small { display: block; margin-top: 6px; font-family: var(--font-body); font-size: 0.875rem; font-weight: 500; color: var(--black); }
.plan__rows { margin-top: 24px; display: grid; gap: 0; }
.plan__rows div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--hairline); font-size: 0.9375rem; line-height: 1.4; }
.plan--featured .plan__rows div { border-top-color: rgba(17, 18, 13, 0.25); }
.plan__rows dt { flex: none; white-space: nowrap; color: var(--ink); }
.plan__from { font-family: var(--font-body); font-size: 1rem; font-weight: 500; letter-spacing: 0.01em; }
.plan__rows dd { margin: 0; text-align: right; font-weight: 600; color: var(--black); }

.includes { margin-top: clamp(32px, 5vw, 56px); }
.includes__title { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; margin-bottom: 20px; color: var(--black); }
.ticks { display: grid; gap: 12px 40px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .ticks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ticks li { display: flex; gap: 12px; align-items: flex-start; }
.ticks svg { flex: none; width: 24px; height: 24px; margin-top: 2px; }
.pricing-notes { margin-top: 28px; display: grid; gap: 10px; max-width: 44rem; }

/* Founding panel */
.founding { background: var(--lilac); padding: clamp(28px, 5vw, 64px); display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); border-radius: var(--r); }
@media (min-width: 900px) { .founding { grid-template-columns: 1.4fr 1fr; align-items: center; gap: 56px; border-radius: var(--r); } }
.spots { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.spot { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--black); background: #fff; display: grid; place-items: center; color: var(--apricot); }
.spot svg { width: 22px; height: 22px; }
.spot.is-taken { background: transparent; color: transparent; border-style: solid; }
.spots__label { font-family: var(--font-display); font-weight: 300; font-size: 1.75rem; line-height: 1.1; color: var(--black); }
.founding .btn { margin-top: 8px; }

/* Haus Members */
.members { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); margin-top: clamp(28px, 4vw, 48px); }
@media (min-width: 900px) { .members { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.member { background: var(--surface); padding: clamp(24px, 3vw, 36px); border-radius: var(--r); }
.member__price { margin: 10px 0 18px; font-family: var(--font-display); font-weight: 400; font-size: 2.5rem; line-height: 1.1; color: var(--black); }
.member__price small { font-family: var(--font-body); font-size: 0.9375rem; font-weight: 500; }
.member__label { font-weight: 500; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--black); margin-bottom: 8px; }
.member + .member { }
.members__note { margin-top: 24px; max-width: 44rem; }

/* This is for you if */
.checklist { display: grid; gap: 14px; margin-top: 28px; max-width: 44rem; }
.checklist li { display: flex; gap: 14px; align-items: flex-start; font-size: 1.125rem; line-height: 1.5; color: var(--black); }
.checklist svg { flex: none; width: 26px; height: 26px; margin-top: 1px; }
.soft-redirect { margin-top: 28px; max-width: 44rem; }

/* FAQ accordion */
.faq { margin-top: clamp(28px, 4vw, 48px); max-width: 50rem; border-bottom: 1px solid var(--hairline); }
.faq details { border-top: 1px solid var(--hairline); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-block: 22px; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 400; font-size: 1.375rem; line-height: 1.3; color: var(--black);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 14px; height: 14px; margin-top: 8px;
  background:
    linear-gradient(var(--black), var(--black)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--black), var(--black)) center / 1.5px 100% no-repeat;
  transition: transform 250ms var(--ease-std);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__a { padding: 0 0 24px; max-width: 42rem; animation: faq-in 250ms var(--ease-out); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } }
.bg-lilac-25 .faq, .bg-lilac-25 .faq details { border-color: rgba(17, 18, 13, 0.18); }

/* A note from me */
.wrap.letter { max-width: var(--max); }
.wrap.letter > * { max-width: 40rem; }

/* ==========================================================================
   About
   ========================================================================== */
.ripple { position: relative; overflow-x: clip; }
.ripple__rings { position: absolute; z-index: 0; right: -6%; top: 50%; width: min(70vw, 560px); aspect-ratio: 1; transform: translateY(-50%); pointer-events: none; }
.ripple__rings span { position: absolute; inset: 0; border: 1px solid var(--lilac); border-radius: 50%; opacity: 0.0; transform: scale(0.3); }
.js .ripple.is-in .ripple__rings span { animation: ripple 2.8s var(--ease-out) forwards; animation-delay: calc(var(--i) * 450ms); }
.reveal-all .ripple__rings span { opacity: 0.7; transform: scale(0.9); }
@keyframes ripple { 0% { opacity: 0.9; transform: scale(0.3); } 100% { opacity: 0.6; transform: scale(calc(0.6 + var(--i) * 0.2)); } }
.ripple > .wrap { position: relative; z-index: 1; }

.together { display: grid; gap: 0; margin-top: 28px; max-width: 46rem; }
.together li { padding-block: 18px; border-top: 1px solid var(--hairline); }
.together li:last-child { border-bottom: 1px solid var(--hairline); }
.together strong { font-family: var(--font-display); font-weight: 400; font-size: 1.375rem; color: var(--black); }


/* ==========================================================================
   Community, forms, Audit page
   ========================================================================== */
.lunch--big { max-width: 40rem; padding: clamp(28px, 4vw, 44px); }
.lunch--big .lunch__label { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); }
.lunch--big .lunch__when { font-size: 1.125rem; margin-top: 12px; }
.lunch--big .lunch__topic { font-size: 1.0625rem; margin-bottom: 20px; }

.inside { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); margin-top: clamp(28px, 4vw, 48px); }
@media (min-width: 900px) { .inside { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.inside__item { background: var(--surface); padding: clamp(24px, 3vw, 32px); border-radius: var(--r); }
.inside__item .h4 { margin-bottom: 10px; }

.talk { display: grid; gap: 24px; margin-top: clamp(28px, 4vw, 44px); max-width: 46rem; }
.talk p strong { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; color: var(--black); }

.form { display: grid; gap: 18px; max-width: 34rem; text-align: left; margin-top: 28px; }
/* Visby CF word spacing and sizing on form fields */
.form--card, .form--audit-card {
  word-spacing: 1px;
  letter-spacing: 0.02em;
}
.field label, .field__label-main {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.45;
  color: var(--black);
  word-spacing: 1px;
  letter-spacing: 0.02em;
}
.field .req {
  display: inline-block;
  color: var(--apricot-deep, #da956d);
  margin-left: 3px;
  font-weight: 600;
  font-size: 0.875em;
  line-height: 1;
  vertical-align: baseline;
  white-space: nowrap;
}
.field input, .field textarea, .field select {
  width: 100%; min-height: 52px; padding: 12px 16px;
  font: inherit; font-size: 0.9375rem; line-height: 1.45; color: var(--black);
  background: var(--surface-2); border: 1px solid rgba(17, 18, 13, 0.22); border-radius: var(--r);
  transition: border-color 160ms var(--ease-std), box-shadow 160ms var(--ease-std), background-color 160ms var(--ease-std);
}
.field input::placeholder, .field textarea::placeholder {
  color: var(--ink); opacity: 0.55;
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--black);
  box-shadow: 0 0 0 2px rgba(17, 18, 13, 0.12);
  background: #fff;
}
.form .btn { width: 100%; }
.form__note { font-size: 0.8125rem; color: var(--ink); line-height: 1.5; }
.form__opt-in { display: flex; align-items: flex-start; gap: 12px; font-size: 0.875rem; line-height: 1.5; cursor: pointer; }
.form__opt-in input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--lilac-deep); }
.form__opt-in input:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2311120d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; padding-right: 44px; }
.check-grid { display: grid; gap: 8px 18px; }
@media (min-width: 420px) { .check-grid { grid-template-columns: 1fr 1fr; } }
.check-grid .form__opt-in { align-items: center; margin: 0; }
.check-grid .form__opt-in span { line-height: 1.3; }

/* Enhanced Audit Form Card & Grouped Sections */
.form--audit-card {
  background: var(--surface);
  border: 0;
  padding: clamp(24px, 4vw, 44px);
  border-radius: var(--r);
  box-shadow: 0 20px 48px -28px rgba(17, 18, 13, 0.22);
  gap: 28px;
}
.form__header {
  padding-bottom: 20px;
  border-bottom: 0;
}
.form-section {
  display: grid;
  gap: 16px;
  padding-bottom: 24px;
  border-bottom: 0;
}
.form-section:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
}
.form-section__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--black);
  margin-bottom: 4px;
}
.form-row--2 {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 620px) {
  .form-row--2 {
    grid-template-columns: 1fr 1fr;
  }
}
.form-footer {
  display: grid;
  gap: 10px;
  padding-top: 12px;
}

/* Interactive Pill / Chip Selection for Tools */
.tool-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 4px;
}
.tool-chip {
  display: inline-flex;
  cursor: pointer;
  user-select: none;
  margin: 0;
}
.tool-chip input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.tool-chip__body {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  background: var(--surface-2);
  border: 1px solid rgba(17, 18, 13, 0.22);
  border-radius: var(--r-pill);
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink);
  font-weight: 500;
  word-spacing: 1px;
  letter-spacing: 0.02em;
  transition: all 180ms var(--ease-std);
}
.tool-chip:hover .tool-chip__body {
  border-color: var(--black);
  background: #fff;
  transform: translateY(-1px);
}
.tool-chip__check {
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid rgba(17, 18, 13, 0.35);
  transition: all 160ms var(--ease-std);
  flex-shrink: 0;
}
.tool-chip__check::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
  transition: background 160ms var(--ease-std);
}
/* Active / Checked State */
.tool-chip input:checked + .tool-chip__body {
  background: var(--lilac);
  border-color: var(--black);
  color: var(--black);
  font-weight: 600;
  box-shadow: 0 4px 12px -4px rgba(216, 194, 236, 0.6);
}
.tool-chip input:checked + .tool-chip__body .tool-chip__check {
  border-color: var(--black);
  background: var(--black);
}
.tool-chip input:checked + .tool-chip__body .tool-chip__check::after {
  background: #fff;
}
.tool-chip input:focus-visible + .tool-chip__body {
  outline: 2px solid var(--black);
  outline-offset: 2px;
}
/* Interactive single-select pills (radio) — mirrors the tool chips for one choice */
.radio-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 4px;
}
.radio-chip {
  display: inline-flex;
  cursor: pointer;
  user-select: none;
  margin: 0;
}
.radio-chip input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.radio-chip__body {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  background: var(--surface-2);
  border: 1px solid rgba(17, 18, 13, 0.22);
  border-radius: var(--r-pill);
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink);
  font-weight: 500;
  word-spacing: 1px;
  letter-spacing: 0.02em;
  transition: all 180ms var(--ease-std);
}
.radio-chip:hover .radio-chip__body {
  border-color: var(--black);
  background: #fff;
  transform: translateY(-1px);
}
.radio-chip__dot {
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid rgba(17, 18, 13, 0.35);
  flex-shrink: 0;
  transition: all 160ms var(--ease-std);
}
.radio-chip__dot::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
  transition: background 160ms var(--ease-std);
}
.radio-chip input:checked + .radio-chip__body {
  background: var(--lilac);
  border-color: var(--black);
  color: var(--black);
  font-weight: 600;
  box-shadow: 0 4px 12px -4px rgba(216, 194, 236, 0.6);
}
.radio-chip input:checked + .radio-chip__body .radio-chip__dot {
  border-color: var(--black);
}
.radio-chip input:checked + .radio-chip__body .radio-chip__dot::after {
  background: var(--black);
}
.radio-chip input:focus-visible + .radio-chip__body {
  outline: 2px solid var(--black);
  outline-offset: 2px;
}
.field--revealed {
  animation: field-pop 200ms var(--ease-out);
}
@keyframes field-pop {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.embed-slot { display: grid; place-items: center; min-height: 460px; padding: 32px; background: var(--lilac-25); border: 1px solid var(--hairline); text-align: center; border-radius: var(--r); }
.embed-slot p { max-width: 24rem; font-size: 0.9375rem; }
.audit-grid { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .audit-grid { grid-template-columns: 1fr 1.35fr; gap: clamp(32px, 5vw, 64px); align-items: start; } }

/* ---------- Audit: live booking calendar ---------- */
/* Two clear booking stages; this component does not share the Build timeline classes. */
.booking-steps { display: grid; gap: 22px; }
.booking-progress { padding: 0; }
.booking-progress__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; list-style: none; margin: 0; padding: 0; }
.booking-progress__step { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 0 15px; border-bottom: 2px solid #e5dfe8; font-family: var(--font-body); font-size: .875rem; font-weight: 500; line-height: 1.35; color: #817886; }
.booking-progress__number { display: grid; place-items: center; flex: none; width: 28px; height: 28px; background: transparent; border: 1px solid #d8d0dc; border-radius: 50%; font-size: .8125rem; font-variant-numeric: tabular-nums; }
.booking-progress__step.is-active { border-bottom-color: #C6A8E2; color: var(--black); font-weight: 600; }
.booking-progress__step.is-active .booking-progress__number { background: #D8C2EC; border-color: #D8C2EC; }
.booking-progress__step.is-done { border-bottom-color: #D8C2EC; color: var(--black); }
.booking-progress__step.is-done .booking-progress__number { background: #F2EAF0; border-color: #F2EAF0; }
.audit-selection { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: start; column-gap: 12px; row-gap: 10px; padding: 18px; background: #FAF7F2; border-radius: 4px; }
.audit-selection__icon { display: grid; place-items: center; width: 38px; height: 38px; background: #F2EAF0; border-radius: 50%; }
.audit-selection__icon svg { width: 21px; height: 21px; }
.audit-selection__details { display: grid; gap: 4px; min-width: 0; }
.audit-selection__label { font-size: .75rem; line-height: 1.4; color: var(--ink); }
.audit-selection__details strong { font-size: .9375rem; font-weight: 600; line-height: 1.5; }
.audit-selection__timezone { font-size: .75rem; color: var(--ink); line-height: 1.4; }
.audit-selection__change { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 54px; padding: 12px 18px; border: 1px solid #c9c2cc; border-radius: 4px; background: #fff; color: var(--black); font-family: var(--font-body); font-size: .875rem; font-weight: 600; line-height: 1.4; cursor: pointer; box-shadow: 0 2px 5px rgba(17,18,13,.09); transition: background-color 160ms var(--ease-std), border-color 160ms var(--ease-std); }
.audit-selection__change svg { flex: none; width: 22px; height: 22px; }
.audit-selection__change:hover { background: #FAF7F2; border-color: var(--black); }
.audit-selection__change:focus-visible { outline: 2px solid var(--black); outline-offset: 4px; }
.audit-selection.is-required { outline: 1px solid var(--apricot); }
.page-audit .form--audit-card { background: #fff; padding: clamp(22px, 3.5vw, 36px); border-radius: 4px; gap: 28px; }
.page-audit .form--audit-card .form__header { padding-bottom: 0; }
.page-audit .form--audit-card .form__header .h3 { font-weight: 300; font-size: clamp(1.75rem, 2.6vw, 2.125rem); line-height: 1.2; }
.page-audit .form--audit-card .form-section { gap: 18px; padding-bottom: 0; }
.page-audit .form--audit-card .form-section__title { font-size: 1.5rem; font-weight: 300; margin-bottom: 0; }
.page-audit .form--audit-card .field input,
.page-audit .form--audit-card .field textarea { background: #FAF7F2; border-color: #d9d3dc; }
@media (max-width: 419px) {
  .booking-progress__list { gap: 12px; }
  .booking-progress__step { font-size: .8125rem; gap: 8px; }
  .audit-selection { padding: 14px; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; }
  .audit-selection__icon { width: 32px; height: 32px; }
}

.cal-card {
  background: #ffffff;
  border: 0;
  padding: clamp(20px, 3.5vw, 36px);
  border-radius: 4px;
  box-shadow: 0 14px 40px -18px rgba(138, 92, 179, 0.18), 0 2px 8px -2px rgba(17, 18, 13, 0.04);
}
.cal-card__head {
  padding-bottom: 18px;
  border-bottom: 0;
}
.audit-calendar__tz {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.audit-calendar__tz-label {
  font-size: 0.8125rem;
  color: #635870;
  font-weight: 500;
}
.audit-calendar__tz-select {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.audit-calendar__tz-select select {
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: #2b1f3d;
  background: #fbf9fd;
  border: 1px solid rgba(17, 18, 13, 0.12);
  border-radius: 4px;
  padding: 7px 30px 7px 12px;
  cursor: pointer;
  transition: all 180ms var(--ease-std);
  max-width: 100%;
}
.audit-calendar__tz-select select:hover {
  border-color: #cbb4e8;
  background: #f2eafb;
}
.audit-calendar__tz-select select:focus-visible {
  outline: 2px solid #2b1f3d;
  outline-offset: 2px;
}
.audit-calendar__tz-select svg {
  position: absolute;
  right: 9px;
  width: 13px;
  height: 13px;
  color: #7b7188;
  pointer-events: none;
}
.audit-calendar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 18px;
}
@media (min-width: 640px) {
  .audit-calendar {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 24px;
  }
}
.audit-calendar__main {
  flex: 1 1 58%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.audit-calendar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.audit-calendar__month {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: #2b1f3d;
}
.audit-calendar__nav-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.audit-calendar__nav {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: #fbf9fd;
  border: 1px solid rgba(17, 18, 13, 0.08);
  border-radius: 4px;
  color: #3f2f56;
  cursor: pointer;
  transition: all 180ms var(--ease-std);
}
.audit-calendar__nav svg { width: 14px; height: 14px; }
.audit-calendar__nav:hover:not(:disabled) {
  border-color: #cbb4e8;
  background: #f2eafb;
  color: #2b1f3d;
  transform: translateY(-1px);
}
.audit-calendar__nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.audit-calendar__nav:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 2px;
}
.audit-calendar__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  padding: 4px 0 6px;
  text-align: center;
}
.audit-calendar__weekdays span {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #7b7188;
}
.audit-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  margin-top: 2px;
}
.audit-calendar__day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  min-height: 38px;
  margin: 0;
  padding: 2px;
  background: #f8f6fb;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: #2e2638;
  cursor: default;
  transition: all 160ms var(--ease-std);
}
.audit-calendar__day--out {
  visibility: hidden;
  border: 0;
  background: transparent;
  pointer-events: none;
}
.audit-calendar__day--past {
  color: #b5adc0;
  background: #fbfafc;
  cursor: default;
  opacity: 0.55;
}
.audit-calendar__day--empty {
  color: #8c8299;
  background: #faf8fd;
  cursor: default;
}
.audit-calendar__day--avail {
  color: #3b2856;
  background: #d8c2ec;
  border: 1px solid #c9b1e0;
  cursor: pointer;
  font-weight: 600;
  box-shadow: 0 2px 6px -2px rgba(138, 92, 179, 0.25);
}
.audit-calendar__day--avail:hover {
  background: #cfb3e7;
  border-color: #bfa3dc;
  color: #1e1330;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px -2px rgba(138, 92, 179, 0.35);
}
.audit-calendar__day--avail:focus-visible {
  outline: 2px solid #2b1f3d;
  outline-offset: 2px;
  z-index: 2;
}
.audit-calendar__day--selected {
  background: #f2eafb !important;
  color: #2b1f3d !important;
  border: 2px solid #3d2b56 !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px -2px rgba(61, 43, 86, 0.3) !important;
  z-index: 1;
}
.audit-calendar__day-dot {
  position: absolute;
  bottom: 4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #5a3d7d;
  transition: background-color 160ms var(--ease-std);
}
.audit-calendar__day--selected .audit-calendar__day-dot {
  background: #3d2b56;
}
.audit-calendar__status {
  font-size: 0.85rem;
  color: #635870;
  min-height: 1.3em;
  margin-top: 2px;
}
.audit-calendar__status.is-error {
  color: var(--apricot-deep, #da956d);
}
.audit-calendar__slots {
  flex: 0 0 200px;
  width: 200px;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-content: start;
  padding: 16px;
  background: #fbf9fd;
  border: 1px solid rgba(17, 18, 13, 0.08);
  border-radius: 4px;
}
.audit-calendar__slots[hidden] {
  display: none;
}
@media (max-width: 639px) {
  .audit-calendar__slots {
    flex: 1 1 auto;
    width: 100%;
  }
}
@media (min-width: 640px) {
  .audit-calendar__slots {
    max-height: 420px;
    overflow-y: auto;
  }
}
.audit-calendar__slots-empty {
  font-size: 0.85rem;
  color: #8c8299;
  margin: 0;
}
.audit-calendar__slots-empty[hidden] {
  display: none;
}
.audit-calendar__slots-label {
  font-weight: 600;
  font-size: 0.875rem;
  color: #2b1f3d;
}
.audit-calendar__slot-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.audit-calendar__slot-list:empty {
  display: none;
}
.audit-calendar__slot {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  background: #ffffff;
  border: 1px solid rgba(17, 18, 13, 0.12);
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #2b1f3d;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(17, 18, 13, 0.04);
  transition: all 180ms var(--ease-std);
  font-variant-numeric: tabular-nums;
}
.audit-calendar__slot:hover {
  border-color: #c5a4e2;
  background: #f8f3fd;
  color: #1e1330;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px -2px rgba(138, 92, 179, 0.2);
}
.audit-calendar__slot.is-on {
  background: #d8c2ec;
  border: 1.5px solid #2b1f3d;
  color: #1e1330;
  font-weight: 700;
  box-shadow: 0 4px 12px -2px rgba(138, 92, 179, 0.35);
}
.audit-calendar__slot:focus-visible {
  outline: 2px solid #2b1f3d;
  outline-offset: 2px;
}
.form__slot-confirm {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #e9daf6;
  border: 1px solid #d8c2ec;
  border-radius: 4px;
  font-size: 0.9375rem;
  color: #2b1f3d;
  animation: field-pop 200ms var(--ease-out);
}
.form__slot-confirm svg { flex: none; width: 22px; height: 22px; }
.form__slot-confirm.is-required {
  background: #fff;
  border: 1px solid var(--apricot-deep, #da956d);
  color: var(--apricot-deep, #da956d);
}
.form__slot-confirm svg { flex: none; width: 22px; height: 22px; }
.form__slot-confirm.is-required { background: #fff; border: 1px solid var(--apricot-deep, #da956d); color: var(--apricot-deep, #da956d); }
.audit-steps { display: grid; gap: 14px; margin-top: 24px; }
.audit-steps li { display: flex; gap: 12px; align-items: flex-start; }
.audit-steps svg { flex: none; width: 24px; height: 24px; margin-top: 2px; }

/* Simple centred pages (thank you, 404, legal) */
.simple { min-height: min(70svh, 640px); display: grid; align-content: center; padding-block: clamp(48px, 8vw, 96px); }
.simple .wrap { max-width: 42rem; }
.simple .heart { width: 1.1em; height: 1.1em; }

/* ---------- Reduced motion: everything calm and in place ---------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .banner__track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .banner__group[aria-hidden="true"] { display: none; }
  .banner__group { flex-wrap: wrap; justify-content: center; row-gap: 8px; padding-right: 0; }
  .shift { background-color: var(--lilac-25) !important; }
  .ripple__rings span { opacity: 0.6 !important; transform: scale(0.9) !important; animation: none !important; border-radius: var(--r); }
}

/* ==========================================================================
   Split sections with an illustration card. The card sits beside the text and
   stays in view while the text scrolls. On phones the text comes first.
   ========================================================================== */

@media (min-width: 900px) {
  .split--art > .split__art { position: sticky; top: calc(var(--header-h) + 40px); }
  .split--art > :first-child:not(.split__art) { position: static; }
}
@media (max-width: 899px) { .split--art-first .split__art { order: 2; } }

/* Shared entrance: a card pops up into place */
@keyframes tasks-pop { from { transform: scale(0.92) translateY(16px); } to { transform: none; } }

/* The task list scrolls with the page: it is long on purpose, so it is not pinned beside the text */
.split--art-first > .split__art { position: static; align-self: start; }

/* Change more lives: the card column is only as wide as the card, so the text sits close beside it */
@media (min-width: 900px) {
  .split--art-first { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: clamp(40px, 5vw, 72px); }
  
  .split--art-first .split__text { max-width: 600px; }
}

/* ==========================================================================
   Built for you, then we stay: a calendar month with the four things that
   land in it every month. Visible at rest; on first view each marked day
   pops in, one after another.
   ========================================================================== */



























/* Motion, in order: the card pops up, the days ripple in, the four moments
   bounce onto their days, the key settles, and "On repeat" turns once.
   After that the four moments take a small hop in turn every few seconds. */









/* Outlined pill: a text link given a button shape, border only, no fill */
.text-link--pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 28px;
  border: 1px solid var(--black);
  text-decoration: none; background: transparent;
  transition: background-color 200ms var(--ease-std), transform 200ms var(--ease-std); border-radius: var(--r); }
.text-link--pill:hover { background: rgba(17, 18, 13, 0.06); transform: translateY(-2px); }
.text-link--pill:active { transform: scale(0.98); }
.text-link--pill:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }

/* ==========================================================================
   The Build, redesigned. Each section is either a two-column split (headline
   on the left and in view, content on the right) or one centred block, so no
   section leaves half the screen empty.
   ========================================================================== */
@media (min-width: 900px) {
  .split--b { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 96px); }
}
.b-head { display: grid; gap: 20px; align-content: start; }
.b-head .h2 { text-align: left; }
.b-head .lead { margin: 0; }
.b-center { max-width: 44rem; margin-inline: auto; text-align: center; }
.b-center .prose { margin-inline: auto; }
.b-intro { max-width: 44rem; margin: 20px auto 0; text-align: center; }
.b-after { margin-left: auto; margin-right: auto; text-align: center; justify-items: center; }
.b-card { background: var(--surface); border: 1px solid var(--hairline); padding: clamp(24px, 3vw, 40px); box-shadow: 0 24px 60px -34px rgba(17, 18, 13, 0.2); border-radius: var(--r); }

/* Does this sound like your week? */
.pain--b { margin-top: 0; max-width: none; }
.pain--b li { display: flex; gap: 16px; align-items: flex-start; padding-block: 20px; }
.pain--b li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 0.62em; border-radius: 50%; background: var(--apricot); }

/* Which one's you? */
.choose__mark { display: block; height: 0.6em; margin-bottom: 6px; font-family: var(--font-display); font-size: 4rem; line-height: 1; color: var(--apricot); }
.choose__after.b-after { justify-items: center; }

/* What I build for you */
.cs--b { gap: 16px; margin-top: clamp(32px, 5vw, 56px); }
.cs--b .c { display: grid; gap: 10px; align-content: start; padding: clamp(24px, 3vw, 32px); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r); }
.c__icon { display: grid; place-items: center; width: 48px; height: 48px; background: var(--lilac); color: var(--black); border-radius: var(--r); }
.c__icon svg { width: 24px; height: 24px; }
.c__name { font-family: var(--font-display); font-weight: 400; font-size: 1.625rem; line-height: 1.2; color: var(--black); margin-top: 4px; }
.after-cs.b-after { max-width: 44rem; }

/* Picture your week after: six moments as cards */
.weeklist--b { max-width: none; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .weeklist--b { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .weeklist--b { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.weeklist--b li, .weeklist--b li + li {
  padding: clamp(22px, 2.5vw, 30px); border: 0; background: var(--surface);
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.35;
  box-shadow: 0 18px 40px -30px rgba(17, 18, 13, 0.25); border-radius: var(--r); }
.weeklist--b li::before { content: ""; display: block; width: 22px; height: 22px; margin-bottom: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12.7 7 17 11.3 24 12C17 12.7 12.7 17 12 24C11.3 17 7 12.7 0 12C7 11.3 11.3 7 12 0Z' fill='%23F2A579'/%3E%3C/svg%3E") center / contain no-repeat; }
#after-title ~ .b-after { margin-top: clamp(32px, 5vw, 48px); }

/* How it works: a vertical timeline beside the headline */
.steps--b { grid-template-columns: minmax(0, 1fr) !important; gap: 0; margin-top: 0; position: relative; }
.steps--b .step, .steps--b .step:last-child { grid-column: auto; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 20px; padding: 0 0 32px; border-top: 0; position: relative; }
.steps--b .step:last-child { padding-bottom: 0; }
.steps--b .step::before { content: ""; position: absolute; left: 27px; top: 56px; bottom: 0; width: 1px; background: var(--hairline); }
.steps--b .step:last-child::before { display: none; }
.steps--b .step__num {
  display: grid; place-items: center; width: 56px; height: 56px; margin: 0;
  background: var(--lilac-25); border: 1px solid var(--lilac); font-size: 1.75rem; border-radius: var(--r); }
.steps--b .step:first-child .step__num { background: var(--apricot); border-color: var(--apricot); }
.steps--b .step__title { padding-top: 12px; }
.b-head .callout { margin-top: 12px; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem) !important; }

/* Pick your build */
.includes--b { margin-top: clamp(28px, 4vw, 40px); background: var(--surface); border: 1px solid var(--hairline); padding: clamp(24px, 3vw, 40px); border-radius: var(--r); }
.pricing-notes.b-after { max-width: 44rem; margin-top: clamp(28px, 4vw, 40px); }

/* Haus Members */
.members__note.b-after { margin-top: 28px; }

/* This is for you if */
.b-head .soft-redirect { margin-top: 4px; }
.b-card .checklist { margin-top: 0; }

/* Your questions */
.faq--b { margin-top: 0; max-width: none; }

/* A note from me: a letter on a card */
.letter-card { max-width: 44rem; margin: clamp(28px, 4vw, 44px) auto 0; padding: clamp(28px, 5vw, 56px); background: var(--surface); box-shadow: 0 24px 60px -34px rgba(17, 18, 13, 0.2); border-radius: var(--r); }

@media (min-width: 900px) { .founding { align-items: center; border-radius: var(--r); } }

/* ==========================================================================
   Community and About, redesigned with the same rules as The Build.
   ========================================================================== */
/* A headline that sits directly in a two-column split lines up on the left of its column */
.split > h2.h2 { text-align: left; margin-inline: 0; }

/* Community: the next Long Lunch card centred under its headline */
.lunch--center { margin: clamp(28px, 4vw, 44px) auto 0; max-width: 40rem; }

/* Community: icons on the What's inside cards */
.inside__item .c__icon { margin-bottom: 18px; }
.inside__item:nth-child(2) .c__icon { background: var(--apricot); }

/* About: How we work together, four step cards */
.together--b { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); max-width: none; margin-top: clamp(28px, 4vw, 48px); }
@media (min-width: 700px) { .together--b { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .together--b { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.together--b .together__card, .together--b li + li {
  display: grid; gap: 10px; align-content: start; padding: clamp(22px, 2.5vw, 30px); border: 0;
  background: var(--surface); box-shadow: 0 18px 40px -30px rgba(17, 18, 13, 0.25); border-radius: var(--r); }
.together--b .together__card:nth-child(2n) .c__icon { background: var(--apricot); }
.together__title { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.2; color: var(--black); margin-top: 6px; }
.together--b li:last-child { border-bottom: 0; }

/* ==========================================================================
   The Build: Does this sound like your week? An iPhone on the left, still
   buzzing at 9:47pm; the headline and the seven moments on the right, as quiet rows.
   ========================================================================== */
@media (min-width: 900px) {
  .split--week { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(48px, 6vw, 96px); align-items: center; }
  .split--week > * { position: static; }
}
.week-copy .h2 { text-align: left; margin-bottom: clamp(20px, 3vw, 32px); }

/* The seven moments: quiet rows, a small icon and a hairline between */
.aches { display: grid; margin: 0; }
.ache { display: flex; align-items: flex-start; gap: 16px; padding-block: 12px; font-size: 1.0625rem; line-height: 1.5; color: var(--black); }
.ache__icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; background: var(--surface-2); color: var(--black); border-radius: var(--r); }
.ache__icon svg { width: 17px; height: 17px; }
.ache__text { padding-top: 5px; }
@media (min-width: 768px) { .ache { font-size: 1.125rem; } }

/* The iPhone: a soft white frame (black stays for text), the dynamic island in ink */
.iphone-wrap { display: grid; place-items: center; }
.iphone { position: relative; width: min(100%, 300px); aspect-ratio: 9 / 19.5; padding: 11px; border-radius: 52px; background: #fff; border: 1px solid var(--hairline); box-shadow: 0 40px 80px -40px rgba(17, 18, 13, 0.45), inset 0 0 0 4px #fff; }
.iphone__island { position: absolute; z-index: 2; top: 22px; left: 50%; width: 92px; height: 26px; margin-left: -46px; border-radius: 999px; background: var(--ink); }
.iphone__screen { position: relative; height: 100%; overflow: hidden; padding: 58px 12px 16px; border-radius: 42px; background: linear-gradient(165deg, var(--lilac) 0%, var(--lilac-50) 45%, var(--apricot-50) 100%); text-align: center; }
.iphone__date { font-size: 0.8125rem; font-weight: 500; color: var(--black); }
.iphone__time { font-family: var(--font-display); font-weight: 400; font-size: 4.5rem; line-height: 1; color: var(--black); margin: 2px 0 18px; }
.iphone__notes { display: grid; gap: 7px; margin: 0; text-align: left; }
.iphone__note { display: flex; gap: 9px; align-items: flex-start; padding: 9px 10px; border-radius: 18px; background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(6px); }
.iphone__app { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; font-size: 0.75rem; font-weight: 700; color: var(--black); }
.iphone__app--lilac { background: var(--lilac); }
.iphone__app--apricot { background: var(--apricot); }
.iphone__body { flex: 1; display: grid; min-width: 0; }
.iphone__head { display: flex; justify-content: space-between; gap: 6px; font-size: 0.625rem; color: var(--ink); }
.iphone__head b { font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.iphone__title { font-size: 0.75rem; font-weight: 600; color: var(--black); }
.iphone__line { font-size: 0.75rem; line-height: 1.3; color: var(--black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iphone__note.is-new { animation: buzz-in 560ms cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes buzz-in { from { opacity: 0; transform: translateY(-20px) scale(0.94); } }


/* iPhone lock screen details: the notifications fade out above the torch and camera buttons, and the home bar sits at the bottom */
.iphone__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(180deg, rgba(246, 206, 182, 0) 0%, var(--apricot-50) 62%); pointer-events: none; }
.iphone__btn { position: absolute; bottom: 30px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(6px); color: var(--black); }
.iphone__btn svg { width: 20px; height: 20px; }
.iphone__btn--left { left: 22px; }
.iphone__btn--right { right: 22px; }
.iphone__home { position: absolute; bottom: 9px; left: 50%; width: 112px; height: 5px; margin-left: -56px; border-radius: 999px; background: var(--ink); }

/* ==========================================================================
   The Build, round two: card colours, hover, the calm iPhone, the scroll
   timeline, pricing tweaks, the founding tickets and the confetti.
   ========================================================================== */
/* 2. Which one's you: light cards that lift on hover */
.choose__card { background: var(--surface); border: 0; box-shadow: 0 18px 40px -30px rgba(17, 18, 13, 0.3); transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-std); border-radius: var(--r); }
.choose__card:hover { transform: translateY(-6px); box-shadow: 0 28px 50px -30px rgba(17, 18, 13, 0.35); }

/* 3. What I build for you: peach icons and a quiet, premium hover */
.cs--b .c__icon { background: var(--apricot); transition: transform 300ms var(--ease-out); }
.cs--b .c { transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-std), border-color 300ms var(--ease-std); border-radius: var(--r); }
.cs--b .c:hover { transform: translateY(-6px); border-color: transparent; box-shadow: 0 28px 50px -30px rgba(17, 18, 13, 0.35); }
.cs--b .c:hover .c__icon { transform: rotate(-8deg) scale(1.08); }

/* 4. Picture your week after: the close under the list */
.after-close { margin-top: clamp(20px, 3vw, 32px); }

/* 5. How it works: an apricot line fills down the timeline as you scroll, each number turns apricot as it is reached */
.steps--b { --progress: 0; }
.steps--b::after { content: ""; position: absolute; left: 27px; top: 28px; height: var(--line-len, 0px); width: 2px; background: var(--apricot); transform-origin: top; transform: scaleY(var(--progress)); }
.steps--b .step__num { position: relative; z-index: 1; transition: background-color 300ms var(--ease-std), border-color 300ms var(--ease-std), transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1); border-radius: var(--r); }
.steps--b .step.is-reached .step__num { background: var(--apricot); border-color: var(--apricot); transform: scale(1.08); }
.steps--b .step:not(:first-child):not(.is-reached) .step__num { background: var(--lilac-25); }

/* 6. Pick your build: upright "Perfect if" lines, peach "build" on a white highlight, a centred button */
.plan__for { font-style: normal; }

.pick-cta { margin-top: 8px; }

/* 7. Founding rate: the confetti canvas sits behind the content */
.founding-sec { position: relative; overflow: hidden; }
.confetti-screen { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }

/* 8. Haus Members: an upright "Haus", and cards that lift on hover */
.member { transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-std); border-radius: var(--r); }
.member:hover { transform: translateY(-6px); box-shadow: 0 28px 50px -30px rgba(17, 18, 13, 0.35); }

@media (prefers-reduced-motion: reduce) {
  .choose__card:hover, .cs--b .c:hover, .member:hover { transform: none; }
  .cs--b .c:hover .c__icon { transform: none; }
  .steps--b { --progress: 1 !important; }
}

/* ==========================================================================
   The Build: Founding rate as a showpiece. Copy, the spots as an avatar stack
   and a peach button on the left; three founding tickets, fanned, on the right.
   ========================================================================== */
.founding2 { position: relative; z-index: 1; display: grid; gap: clamp(40px, 6vw, 80px); align-items: center; }
@media (min-width: 900px) { .founding2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.founding2__copy { display: grid; gap: 24px; justify-items: start; }
.founding2__copy .h2 { text-align: left; }
.founding2__copy .lead { margin: 0; }

/* The spots: overlapping faces with a cream ring, a pale "+3", then the label */
.spots--stack { display: flex; align-items: center; gap: 16px; }
.spots__faces { display: flex; align-items: center; }
.spot--av, .spots__more { width: 48px; height: 48px; margin-left: -14px; border: 3px solid #fff; border-radius: 50%; overflow: hidden; background: #fff; }
.spot--av:first-child { margin-left: 0; }
.spot--av svg { display: block; width: 100%; height: 100%; }
.spot--av.is-taken { opacity: 0.35; background: #fff; }
.spots__more { display: grid; place-items: center; font-size: 0.9375rem; font-weight: 600; color: var(--ink); background: var(--surface-2); }
.spots--stack .spots__label { font-family: var(--font-display); font-size: 1.5rem; color: var(--black); }

/* Founding tickets: a cream ticket with a perforated stub; the middle one is featured in peach */
.ftickets { display: grid; gap: 16px; margin: 0; }
.fticket {
  --notch: radial-gradient(circle at 0 50%, transparent 11px, #000 11.5px) left / 51% 100% no-repeat,
           radial-gradient(circle at 100% 50%, transparent 11px, #000 11.5px) right / 51% 100% no-repeat;
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch;
  background: var(--surface);
  filter: drop-shadow(0 18px 24px rgba(17, 18, 13, 0.12));
  transform: rotate(var(--tilt, 0deg));
  transition: transform 350ms var(--ease-out), filter 350ms var(--ease-std); border-radius: var(--r); }
.fticket:nth-child(1) { --tilt: -1.5deg; }
.fticket:nth-child(3) { --tilt: 1.5deg; }
.fticket:hover { transform: rotate(0deg) translateY(-6px) scale(1.02); filter: drop-shadow(0 26px 30px rgba(17, 18, 13, 0.18)); }
.fticket--featured { background: var(--apricot-25); }
@media (min-width: 900px) { .fticket--featured { margin-inline: -16px; } }
.fticket__main { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 16px; align-items: baseline; padding: 22px 26px; }
.fticket__name { font-family: var(--font-display); font-size: 1.625rem; line-height: 1.1; color: var(--black); }
.fticket__was { justify-self: end; font-size: 0.9375rem; color: var(--ink); opacity: 0.7; }
.fticket__now { grid-column: 1 / -1; font-family: var(--font-display); font-size: clamp(2.25rem, 1.6rem + 1.6vw, 3rem); line-height: 1.05; color: var(--black); }
.fticket__stub { display: grid; place-items: center; padding: 0 22px; border-left: 2px dashed var(--lilac); }
.fticket__save { padding: 6px 12px; background: var(--apricot); font-size: 0.8125rem; font-weight: 600; color: var(--black); white-space: nowrap; border-radius: var(--r); }
.fticket--featured .fticket__save { background: #fff; }

/* ==========================================================================
   The Build: This is for you if. Centred headline, five white check cards,
   then a soft panel for "not the right time" with an obvious pill link.
   ========================================================================== */
.fits { display: grid; gap: 14px; margin: clamp(28px, 4vw, 48px) 0 0; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .fits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .fits { grid-template-columns: repeat(6, minmax(0, 1fr)); } .fit { grid-column: span 2; border-radius: var(--r); } .fit:nth-child(4) { grid-column: 2 / span 2; } .fit:nth-child(5) { grid-column: 4 / span 2; } }
.fit { display: flex; align-items: flex-start; gap: 14px; padding: 22px 24px; background: var(--surface); box-shadow: 0 18px 40px -30px rgba(17, 18, 13, 0.3); font-size: 1.0625rem; line-height: 1.5; color: var(--black); transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-std); border-radius: var(--r); }
.fit:hover { transform: translateY(-4px); box-shadow: 0 26px 46px -30px rgba(17, 18, 13, 0.35); }
.fit__tick { flex: none; display: grid; place-items: center; width: 30px; height: 30px; background: var(--apricot); color: var(--black); border-radius: var(--r); }
.fit__tick svg { width: 18px; height: 18px; }
.notyet { max-width: 44rem; margin: clamp(32px, 5vw, 56px) auto 0; padding: clamp(24px, 4vw, 40px); background: var(--surface); text-align: center; display: grid; gap: 20px; justify-items: center; border-radius: var(--r); }
.notyet p { font-size: 1.0625rem; line-height: 1.6; color: var(--ink); }

@media (prefers-reduced-motion: reduce) { .fticket, .fticket:hover, .fit:hover { transform: none; } }

/* How it works: the grey track also stops at the last number */
.steps--b .step:last-child::before { display: none; }

/* Pick your build: the plan cards lift on hover */
.plan { transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-std); border-radius: var(--r); }
.plan:hover { transform: translateY(-6px); box-shadow: 0 28px 50px -30px rgba(17, 18, 13, 0.35); }

/* This is for you if: who it's for, in The Seasons */

/* Reference: textured founder's stationery over a full photographic backdrop. */
.note-sec { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(130px, 14vw, 210px) clamp(100px, 10vw, 150px); }
.note-backdrop { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 48%; }
.note-sec::before { content: ""; position: absolute; z-index: -1; inset: 0; background: rgba(35, 28, 23, 0.48); }
.note-letter { position: relative; max-width: 640px; margin-inline: auto; padding: 54px 62px 44px; background: #FAF7F2 url("/img/note-paper-grain.svg") repeat; border: 1px solid rgba(255,255,255,.75); border-radius: 0; box-shadow: 0 20px 50px -18px rgba(17,18,13,.40); }
.note-letter::before { content: ""; position: absolute; inset: 20px; border: 1px solid rgba(40,33,27,.65); pointer-events: none; }
.note-letter__header { position: relative; display: grid; gap: 8px; min-height: 154px; padding-right: 90px; margin-bottom: 28px; align-content: start; text-align: left; }
.note-letter__header .h2 { font-family: var(--font-display); font-style: normal; font-weight: 400; font-size: clamp(2.5rem,4vw,3rem); line-height: 1.1; letter-spacing: -.02em; text-wrap: initial; }
.note-letter__snapshot { position: absolute; z-index: 2; top: -28px; right: -12px; width: 174px; margin: 0; padding: 9px 9px 30px; background: #fffdf9; transform: rotate(7deg); box-shadow: 0 6px 16px -10px rgba(17,18,13,.3); }
.note-letter__portrait { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 35%; }
.note-letter__clip { position: absolute; top: -18px; left: 55%; width: 30px; height: 78px; background: url("/img/note-paperclip.svg") center / contain no-repeat; transform: rotate(-6deg); }
.note-letter__body { display: grid; gap: 20px; text-align: left; }
.note-letter .prose { max-width: none; gap: 20px; font-family: var(--font-body); font-style: normal; font-weight: 400; font-size: 1rem; line-height: 1.7; }
.note-letter .display-line.voice-line { font-family: var(--font-display); font-style: normal; font-weight: 700; font-size: 1.2rem; line-height: 1.35; }
.note-letter .signoff { margin-top: 8px; text-align: left; font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(2.5rem,5vw,3.5rem); line-height: 1.5; text-transform: lowercase; color: #C6A8E2; }
.community-note { padding-block: clamp(90px, 9vw, 130px); }
.community-note .note-letter { box-shadow: 0 18px 46px -24px rgba(17,18,13,.24); }
.community-note .note-letter::after { content: ""; display: block; clear: both; }
.community-note .note-letter__snapshot { position: relative; float: right; top: auto; right: auto; margin: -82px -74px 22px 24px; }
.community-note .note-letter__header { min-height: 0; padding-right: 0; margin-bottom: 24px; }
.community-note .note-letter__header .h2 { font-weight: 300; font-size: clamp(2.25rem, 1.3rem + 3vw, 4rem); line-height: 1.05; letter-spacing: -0.005em; text-wrap: balance; --accent-ink: #F2A579; --wash: #F2EAF0; }
.community-note .note-letter__body,
.community-note .note-letter .prose { display: block; }
.community-note .note-letter .prose > * + * { margin-top: 20px; }
.note-sec .note-letter::after { content: ""; display: block; clear: both; }
.note-sec .note-letter__snapshot { position: relative; float: right; top: auto; right: auto; margin: -82px -74px 22px 24px; }
.note-sec .note-letter__header { min-height: 0; padding-right: 0; margin-bottom: 24px; }
.note-sec .note-letter__header .h2 { font-weight: 300; font-size: clamp(2.25rem, 1.3rem + 3vw, 4rem); line-height: 1.05; letter-spacing: -0.005em; text-wrap: balance; --accent-ink: #F2A579; --wash: #F2EAF0; }
.note-sec .note-letter__body,
.note-sec .note-letter .prose { display: block; }
.note-sec .note-letter__body > * + *,
.note-sec .note-letter .prose > * + * { margin-top: 20px; }
@media (max-width: 599px) {
  .community-note .note-letter__snapshot { margin: -68px -30px 18px 16px; }
  .note-sec .note-letter__snapshot { margin: -68px -30px 18px 16px; }
}
@media (max-width: 599px) {
  .note-sec { padding-block: 115px 80px; }
  .note-letter { padding: 38px 28px 30px; }
  .note-letter::before { inset: 12px; }
  .note-letter__snapshot { width: 115px; right: -2px; top: -30px; padding: 6px 6px 20px; }
  .note-letter__header { min-height: 145px; padding-right: 75px; margin-bottom: 20px; }
  .note-letter__header .h2 { font-size: clamp(2rem,7.4vw,2.6rem); }
  .note-letter__clip { height: 58px; width: 23px; top: -15px; }
}
.note-bg { position: absolute; inset: 0; z-index: -1; }
.note-bg img, .note-bg__ph { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; filter: blur(2px) saturate(0.9); transform: scale(1.04); }
.note-bg__ph { background: radial-gradient(60% 70% at 20% 30%, var(--apricot-50), transparent 70%), radial-gradient(50% 60% at 85% 75%, var(--apricot), transparent 70%), #fff; }
.note-bg::after { content: ""; position: absolute; inset: 0; background: rgba(216, 194, 236, 0.8); }

/* Footer: the Instagram icon */
.footer__ig { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-top: 20px; background: #D8C2EC; color: var(--black); transition: transform 250ms var(--ease-out), background-color 250ms var(--ease-std); border-radius: 50%; }
.footer__ig svg { width: 20px; height: 20px; }
.footer__ig:hover { text-decoration: none; transform: translateY(-3px); background: var(--lilac-deep); }

@media (prefers-reduced-motion: reduce) { .plan:hover, .footer__ig:hover { transform: none; } }

/* ==========================================================================
   Community, redesigned in the same direction as The Build: a colour per
   section, a visual per idea, white cards that lift, illustrated women.
   ========================================================================== */
/* Overlapping faces (shared) */
.faces { display: inline-flex; align-items: center; }
.face { display: block; width: 44px; height: 44px; margin-left: -12px; border: 3px solid #fff; border-radius: 50%; overflow: hidden; background: #fff; }
.faces .face:first-child { margin-left: 0; }
.face svg { display: block; width: 100%; height: 100%; }
.faces--center { display: flex; justify-content: center; margin-bottom: 20px; }

/* Who it's for: a circle of women, joined by dotted lines, floating gently */
.who { align-items: center; }
.circle { position: relative; width: min(100%, 440px); aspect-ratio: 1; margin-inline: auto; }
.circle__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.circle__lines line { stroke: var(--apricot); stroke-width: 0.5; stroke-dasharray: 1.4 1.8; vector-effect: non-scaling-stroke; }
.circle__face { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); transform: translate(-50%, -50%); animation: float-face 6s ease-in-out infinite; animation-delay: calc(var(--i) * -0.8s); }
.circle__face .face { width: 100%; height: 100%; margin: 0; border-width: 4px; box-shadow: 0 14px 28px -16px rgba(17, 18, 13, 0.35); }
@keyframes float-face { 50% { transform: translate(-50%, calc(-50% - 8px)); } }
.circle__spark { position: absolute; width: 22px; height: 22px; color: var(--apricot); fill: currentColor; }
.circle__spark--a { left: 34%; top: 30%; }
.circle__spark--b { left: 70%; top: 52%; width: 16px; height: 16px; color: #fff; }
.js .circle:not(.is-in) .circle__face { opacity: 0; }
.circle__face { transition: opacity 600ms var(--ease-out); transition-delay: calc(var(--i) * 90ms); }
.reveal-all .circle__face { opacity: 1; }

/* What's inside: white cards with peach icons that lift */
.inside__item { background: var(--surface); box-shadow: 0 18px 40px -30px rgba(17, 18, 13, 0.3); transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-std); border-radius: var(--r); }
.inside__item:hover { transform: translateY(-6px); box-shadow: 0 28px 50px -30px rgba(17, 18, 13, 0.35); }
.inside__item .c__icon, .inside__item:nth-child(2) .c__icon { background: var(--apricot); }

/* What we talk about: three cards side by side */
@media (min-width: 900px) { .stones--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .stones--three .stone--machine { grid-column: auto; } }
.stones--three .stone { transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-std); }
.stones--three .stone--woman { background: var(--surface); border-color: transparent; }
.stones--three .stone:hover { transform: translateY(-6px); box-shadow: 0 28px 50px -30px rgba(17, 18, 13, 0.35); }

/* Already building with me? */
.already { max-width: 44rem; margin-inline: auto; padding: clamp(28px, 5vw, 56px); background: var(--surface); text-align: center; display: grid; gap: 20px; justify-items: center; border-radius: var(--r); }

.already p { font-size: 1.0625rem; line-height: 1.65; color: var(--ink); }

/* Join: the form on a white card */
.form--card { margin: 28px auto 0; padding: clamp(24px, 4vw, 36px); background: var(--surface); box-shadow: 0 30px 60px -36px rgba(17, 18, 13, 0.35); border-radius: var(--r); }

@media (prefers-reduced-motion: reduce) {
  .circle__face, .lcal__face { animation: none; }
  .inside__item:hover, .stones--three .stone:hover { transform: none; }
}

/* The Magic and The Machine sit on lilac and peach: their italic word is black, as on every coloured section */


/* Community: Next Long Lunch as a calendar page, with women on their way */
.lcal { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .lcal { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.lcal__copy { display: grid; gap: 20px; justify-items: start; }
.lcal__copy .h2 { text-align: left; margin-inline: 0; }
.lcal__copy .lunch__topic { font-size: 1.125rem; line-height: 1.6; margin: 0; }
.lcal__copy .ph { background: #fff; }
.lcal__art { position: relative; height: 380px; display: grid; place-items: center; }
.lcal__tile { width: 260px; background: var(--surface); overflow: hidden; text-align: center; transform: rotate(-4deg); box-shadow: 0 34px 60px -30px rgba(17, 18, 13, 0.45); transition: transform 400ms var(--ease-out); border-radius: var(--r); }
.lcal__art:hover .lcal__tile { transform: rotate(0deg) scale(1.03); }
.lcal__band { padding: 14px; background: var(--apricot); font-family: var(--font-display); font-size: 1.375rem; color: var(--black); }
.lcal__day { margin-top: 22px; font-size: 1rem; font-weight: 600; color: var(--ink); }
.lcal__date { margin: 8px 0; font-family: var(--font-display); font-size: 3.25rem; line-height: 1; color: var(--black); }
.lcal__time { margin-bottom: 26px; font-size: 0.9375rem; font-weight: 600; color: var(--black); }
.lcal__tile .ph { background: var(--lilac-25); }
.lcal__face { position: absolute; animation: float-face-y 6s ease-in-out infinite; }
@keyframes float-face-y { 50% { transform: translateY(-8px); } }
.lcal__face .face { width: 64px; height: 64px; margin: 0; border-width: 4px; box-shadow: 0 14px 28px -16px rgba(17, 18, 13, 0.35); }
.lcal__face--1 { left: 12%; top: 14%; }
.lcal__face--2 { right: 12%; top: 8%; animation-delay: -1.5s; }
.lcal__face--3 { left: 16%; bottom: 10%; animation-delay: -3s; }
.lcal__face--4 { right: 10%; bottom: 16%; animation-delay: -4.5s; }
.lcal__spark { position: absolute; width: 24px; height: 24px; fill: currentColor; color: #fff; }
.lcal__spark--1 { left: 30%; top: 4%; }
.lcal__spark--2 { right: 28%; bottom: 4%; color: var(--apricot); }
@media (max-width: 420px) { .lcal__face .face { width: 52px; height: 52px; } .lcal__face--1, .lcal__face--3 { left: 4%; } .lcal__face--2, .lcal__face--4 { right: 4%; } }
@media (prefers-reduced-motion: reduce) { .lcal__art:hover .lcal__tile { transform: rotate(-4deg); } }

/* Community: Who it's for, illustration on the left, copy on the right */
@media (min-width: 900px) { .who { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .who > * { position: static; } }
@media (max-width: 899px) { .who .circle { order: 2; } }

/* Community: What we talk about, a Venn diagram beside an open list */
.venn-wrap { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 900px) { .venn-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.venn { width: min(100%, 480px); margin-inline: auto; }
.venn svg { display: block; width: 100%; height: auto; overflow: visible; }
.venn__c { cursor: pointer; transition: transform 500ms var(--ease-out); transform-box: fill-box; transform-origin: center; }
.venn__c circle { stroke: #fff; stroke-width: 2; transition: opacity 300ms var(--ease-std); }
.venn__c--woman circle { fill: #fff; opacity: 0.85; }
.venn__c--magic circle { fill: var(--lilac); opacity: 0.8; }
.venn__c--machine circle { fill: var(--apricot-50); opacity: 0.85; }
.venn__labels text { font-family: var(--font-display); font-size: 21px; fill: var(--black); text-anchor: middle; pointer-events: none; }
.venn__spark { color: var(--apricot); fill: currentColor; }
.venn__c.is-on { transform: scale(1.05); }
.venn__c.is-on circle { opacity: 1; }
.js .venn:not(.is-in) .venn__c--woman { transform: translate(-30px, -16px); }
.js .venn:not(.is-in) .venn__c--magic { transform: translate(30px, -16px); }
.js .venn:not(.is-in) .venn__c--machine { transform: translateY(30px); }
.reveal-all .venn .venn__c { transform: none; }
.venn-copy { display: grid; gap: 18px; }
.venn-copy .h2 { text-align: left; margin-inline: 0; }
.venn-copy .lead { margin: 0; }
.venn-list { display: grid; gap: 6px; margin: 10px 0 0; }
.venn-row { display: flex; gap: 16px; padding: 14px 16px; cursor: default; transition: background-color 250ms var(--ease-std); outline: none; border-radius: var(--r); }
.venn-row.is-on, .venn-row:focus-visible { background: rgba(255, 255, 255, 0.7); }
.venn-row__dot { flex: none; width: 14px; height: 14px; margin-top: 9px; border-radius: 50%; border: 2px solid #fff; }
.venn-row--woman .venn-row__dot { background: #fff; box-shadow: 0 0 0 1px var(--hairline); }
.venn-row--magic .venn-row__dot { background: var(--lilac); }
.venn-row--machine .venn-row__dot { background: var(--apricot); }
.venn-row__title { font-family: var(--font-display); font-weight: 400; font-size: 1.625rem; line-height: 1.2; color: var(--black); }
.venn-row__title em { font-style: italic; }
.venn-row p { margin-top: 4px; color: var(--ink); }

/* Community: Already building with me, copy beside a Haus Members pass */
.pass-wrap { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 900px) { .pass-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pass-copy { display: grid; gap: 20px; justify-items: start; }
.pass-copy .h2 { text-align: left; margin-inline: 0; }
.pass-copy p { font-size: 1.0625rem; line-height: 1.65; color: var(--ink); }
.pass-art { position: relative; display: grid; place-items: center; min-height: 360px; perspective: 900px; }
.pass { position: relative; width: min(100%, 380px); aspect-ratio: 1.586; padding: 24px 26px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(135deg, var(--lilac) 0%, var(--lilac-50) 45%, var(--apricot-50) 100%);
  box-shadow: 0 40px 70px -36px rgba(17, 18, 13, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  transform: rotateX(var(--rx, 6deg)) rotateY(var(--ry, -10deg)); transition: transform 400ms var(--ease-out); border-radius: var(--r); }
.pass__sheen { position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%); transform: translateX(-60%); pointer-events: none; }
.js .pass-art.is-in .pass__sheen { animation: pass-sheen 1.6s var(--ease-out) 0.3s both; }
@keyframes pass-sheen { to { transform: translateX(60%); } }
.pass__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pass__chip { display: grid; place-items: center; width: 44px; height: 34px; background: rgba(255, 255, 255, 0.75); color: var(--apricot); border-radius: var(--r); }
.pass__chip svg { width: 18px; height: 18px; fill: currentColor; }
.pass__kind { font-family: var(--font-display); font-size: 1.625rem; color: var(--black); }
.pass__bottom { display: flex; align-items: flex-end; justify-content: space-between; }
.pass__holder { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; border: 3px solid #fff; }
.pass__holder svg { display: block; width: 100%; height: 100%; }
.pass__logo { width: 84px; height: auto; }
.pass__perk { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; background: var(--surface-2); color: var(--black); box-shadow: 0 14px 28px -16px rgba(17, 18, 13, 0.35); animation: float-face-y 6s ease-in-out infinite; outline: none; border-radius: var(--r); }
.pass__perk svg { width: 20px; height: 20px; }
.pass__perk--a { left: 4%; top: 10%; }
.pass__perk--b { right: 2%; top: 4%; animation-delay: -1.5s; background: var(--apricot); }
.pass__perk--c { right: 6%; bottom: 8%; animation-delay: -3s; }
.pass__perk--d { left: 8%; bottom: 4%; animation-delay: -4.5s; background: var(--lilac); }
.pass__perk::after { content: attr(data-label); position: absolute; bottom: calc(100% + 8px); left: 50%; padding: 4px 10px; background: #fff; border: 1px solid var(--hairline); font-size: 0.75rem; font-weight: 500; white-space: nowrap; color: var(--black); opacity: 0; transform: translate(-50%, 4px); transition: opacity 160ms, transform 200ms; pointer-events: none; border-radius: var(--r); }
.pass__perk:hover::after, .pass__perk:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .venn__c, .pass { transition: none; }
  .js .venn:not(.is-in) .venn__c--woman, .js .venn:not(.is-in) .venn__c--magic, .js .venn:not(.is-in) .venn__c--machine { transform: none; }
  .pass__perk, .js .pass-art.is-in .pass__sheen { animation: none; }
}
.venn-row__title em { margin-left: 0.24em; }
.venn-row--woman .venn-row__title em { margin-left: 0.08em; }

/* ==========================================================================
   Home, Change more lives: the white task card with a carousel of finished
   tasks. Each slide comes in from the right, its seal pops and its tick draws,
   "Done", and the count and bar climb to 10 of 10. Loops while on screen.
   ========================================================================== */






















/* The task arrives first; "Done" appears with the seal */



/* Each task's day, under its name */



/* Change more lives: a taller task card, centred in its column beside the copy */


@media (min-width: 900px) {
  .split--art-first > .split__art { align-self: center; display: grid; place-items: center; }
  
}

/* What we talk about: a clean Venn. Three equal circles in brand colours that blend where they overlap,
   white rims drawn on top so every edge reads, and each name inside its own circle. */
.venn__c circle { stroke: none; mix-blend-mode: multiply; opacity: 0.85; }
.venn__c--woman circle { fill: var(--apricot-50); opacity: 0.9; }
.venn__c--magic circle { fill: var(--lilac); }
.venn__c--machine circle { fill: var(--apricot); opacity: 0.6; }
.venn__c.is-on circle { opacity: 1; }
.venn__rims circle { fill: none; stroke: #fff; stroke-width: 2; pointer-events: none; }
.venn__labels text { font-size: 20px; dominant-baseline: middle; }
.venn__spark { color: #fff; }
.venn-row--woman .venn-row__dot { background: var(--apricot-50); box-shadow: none; }
.venn-row--machine .venn-row__dot { background: var(--apricot); }
.venn__c--woman circle { fill: var(--apricot-25); opacity: 1; }
.venn__c--magic circle { opacity: 0.75; }
.venn__c--machine circle { opacity: 0.5; }
.venn-row--woman .venn-row__dot { background: var(--apricot-25); box-shadow: 0 0 0 1px var(--apricot-50); }
/* What we talk about: the three names in peach in the list, and a white highlight behind "talk" */
.venn-row__title em { color: var(--apricot); }


/* The HAUS logo on the members pass in white */
.pass__logo { filter: brightness(0) invert(1); }

/* ==========================================================================
   About, redesigned: her story as a timeline, the ripple as rings of women,
   the three things as arches, a counted 20+, and a numbered path to working together.
   ========================================================================== */
/* Why I do this */
.story__head .display-line { margin: 0; }
.story__list { position: relative; display: grid; gap: 26px; margin: 0; }
.story__list::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; background: repeating-linear-gradient(var(--apricot) 0 6px, transparent 6px 12px); }
.story__beat { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; align-items: start; }
.story__icon { display: grid; place-items: center; width: 44px; height: 44px; background: var(--surface-2); color: var(--black); box-shadow: 0 10px 24px -16px rgba(17, 18, 13, 0.35); border-radius: var(--r); }
.story__beat:nth-child(2) .story__icon { background: var(--lilac); }
.story__beat:last-child .story__icon { background: var(--apricot); }
.story__icon svg { width: 20px; height: 20px; }
.story__beat p { padding-top: 9px; font-size: 1.0625rem; line-height: 1.65; color: var(--ink); }
.story__close { margin-top: 32px; padding-left: 62px; }
.js .story__beat[data-reveal] { transition: transform 600ms var(--ease-out) calc(var(--i, 0) * 110ms), opacity 600ms var(--ease-out) calc(var(--i, 0) * 110ms); }
.js .story__beat[data-reveal]:not(.is-in) { transform: translateY(18px); opacity: 0; }

/* The ripple */
@media (min-width: 900px) { .rip-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } .rip-wrap > * { position: static; } }
@media (max-width: 899px) { .rip-wrap .rip { order: 2; } }
.rip { position: relative; width: min(100%, 460px); aspect-ratio: 1; margin-inline: auto; }
.ripple-globe { width: min(100%, 540px); margin: 0 auto; }
.ripple-globe img { display: block; width: 100%; height: auto; border-radius: var(--r); }
@media (max-width: 899px) { .rip-wrap .ripple-globe { order: 2; } }
.rip__ring { position: absolute; left: 50%; top: 50%; width: var(--r); height: var(--r); border: 1.5px dashed rgba(255, 255, 255, 0.85); border-radius: 50%; transform: translate(-50%, -50%); }
.rip__wave { position: absolute; left: 50%; top: 50%; width: 20%; height: 20%; border-radius: 50%; border: 2px solid #fff; transform: translate(-50%, -50%) scale(1); opacity: 0; animation: rip-wave 6s ease-out infinite; animation-delay: calc(var(--w, 0) * 2s); }
@keyframes rip-wave { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.9; } 100% { transform: translate(-50%, -50%) scale(5); opacity: 0; } }
.rip__face { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); transform: translate(-50%, -50%); transition: transform 700ms cubic-bezier(0.34, 1.4, 0.64, 1), opacity 500ms; transition-delay: calc(var(--d) * 350ms + 200ms); }
.rip__face .face { width: 100%; height: 100%; margin: 0; border-width: 3px; box-shadow: 0 12px 26px -16px rgba(17, 18, 13, 0.4); }
.rip__face--me .face { border-width: 5px; }
.js .rip:not(.is-in) .rip__face { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
.reveal-all .rip__face { transform: translate(-50%, -50%); opacity: 1; }

/* Three things: arches */
.arches { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); margin-top: clamp(32px, 5vw, 56px); }
@media (min-width: 900px) { .arches { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }
.arch { display: grid; align-content: start; gap: 14px; min-height: 360px; padding: clamp(56px, 7vw, 84px) clamp(24px, 3vw, 36px) clamp(28px, 3vw, 40px); text-align: center; transition: transform 350ms var(--ease-out), box-shadow 350ms var(--ease-std); border-radius: var(--r); }
.arch:hover { transform: translateY(-8px); box-shadow: 0 30px 56px -32px rgba(17, 18, 13, 0.35); }
.arch--woman { background: var(--surface); box-shadow: 0 18px 40px -30px rgba(17, 18, 13, 0.25); }
.arch--magic { background: var(--surface); }
.arch--machine { background: var(--surface); }
.arch__title { font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); line-height: 1.1; color: var(--black); }
.arch__title em { font-style: italic; margin-left: 0.18em; color: var(--apricot); }
.arch p { color: var(--ink); line-height: 1.65; }
.js .arch[data-reveal]:nth-child(2) { transition-delay: 120ms; } .js .arch[data-reveal]:nth-child(3) { transition-delay: 240ms; }

/* 20 years */
@media (min-width: 900px) { .years { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } .years > * { position: static; } }
.years__num { position: relative; display: grid; place-items: center; width: min(100%, 360px); aspect-ratio: 1; margin-inline: auto; border-radius: 50%; background: var(--surface); box-shadow: 0 30px 60px -36px rgba(17, 18, 13, 0.3); }
.years__big { font-family: var(--font-display); font-weight: 300; font-size: clamp(6rem, 4rem + 6vw, 9.5rem); line-height: 1; color: var(--black); font-variant-numeric: tabular-nums; }
.years__ring { position: absolute; inset: -18px; border: 1.5px dashed var(--apricot); border-radius: 50%; animation: btn-spark-spin 40s linear infinite; }
.years__spark { position: absolute; top: 10%; right: 12%; width: 30px; height: 30px; color: var(--apricot); fill: currentColor; }

/* How we work together: a numbered path */
.together--path { counter-reset: none; position: relative; }
.together--path .together__card { position: relative; }
.together__num { position: absolute; top: 18px; right: 20px; font-family: var(--font-display); font-style: italic; font-size: 2.25rem; line-height: 1; color: var(--apricot); }
@media (min-width: 1100px) {
  .together--path::before { content: ""; position: absolute; left: 6%; right: 6%; top: 50px; height: 2px; background: repeating-linear-gradient(90deg, var(--lilac) 0 8px, transparent 8px 16px); }
}
.together--path .together__card { background: var(--surface); transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-std); }
.together--path .together__card:hover { transform: translateY(-6px); box-shadow: 0 28px 50px -30px rgba(17, 18, 13, 0.35); }

@media (prefers-reduced-motion: reduce) {
  .rip__wave, .years__ring { animation: none; }
  .rip__wave { opacity: 0; border-radius: var(--r); }
  .arch:hover, .together--path .together__card:hover { transform: none; }
}
.arch--woman .arch__title em { margin-left: 0.06em; }
/* Keep the decorative rings inside the screen on phones */
section:has(.years), section:has(.rip) { overflow-x: clip; }
@media (max-width: 899px) { .years__num { width: min(78%, 320px); border-radius: var(--r); } .years__ring { inset: -12px; border-radius: var(--r); } }
/* The dotted line runs from icon to icon and stops at the last one */
.story__list::before { display: none; }
.story__beat:not(:last-child)::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: -48px; width: 2px; background: repeating-linear-gradient(var(--apricot) 0 6px, transparent 6px 12px); }
.story__icon { position: relative; z-index: 1; border-radius: var(--r); }
/* 20 years: copy on the left, the 20+ circle on the right */
@media (min-width: 900px) { .years .years__num { order: 2; } }
/* How we work together: no line between the cards */
.together--path::before { display: none; }
/* The ripple waves: a quiet, thin pulse rather than bold rings */
.rip__wave { border-width: 1px; animation: rip-wave-soft 9s ease-out infinite; animation-delay: calc(var(--w, 0) * 3s); border-radius: var(--r); }
@keyframes rip-wave-soft { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.35; } 100% { transform: translate(-50%, -50%) scale(4.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rip__wave { animation: none; opacity: 0; border-radius: var(--r); } }

/* Closing sections sit on the light background; the footer gets the navbar's soft shadow, at its top */
.footer { border-top: 0; box-shadow: 0 -1px 0 var(--hairline), 0 -10px 30px -18px rgba(17, 18, 13, 0.18); z-index: 1; overflow: visible; }

/* About, 20 years: a career card. The count, then three chapters on a bar that fills on scroll. */
.career { width: min(100%, 460px); margin-inline: auto; padding: clamp(26px, 3.5vw, 40px); background: var(--surface); box-shadow: 0 30px 60px -36px rgba(17, 18, 13, 0.3); border-radius: var(--r); }
.career__top { display: flex; align-items: center; gap: 18px; }
.career__num { flex: none; font-family: var(--font-display); font-weight: 300; font-size: clamp(4rem, 3rem + 3vw, 5.5rem); line-height: 1; color: var(--black); font-variant-numeric: tabular-nums; }
.career__label { font-size: 1rem; line-height: 1.45; color: var(--ink); max-width: 14rem; }
.career__bar { display: flex; gap: 4px; height: 10px; margin: 26px 0 24px; }
.career__seg { display: block; height: 100%; transform-origin: left center; transition: transform 900ms var(--ease-out); border-radius: var(--r); }
.career__seg--a { flex: 5; background: var(--lilac); }
.career__seg--b { flex: 3; background: var(--apricot); transition-delay: 500ms; }
.career__seg--c { flex: 2; background: var(--apricot-50); transition-delay: 900ms; }
.js .career:not(.is-in) .career__seg { transform: scaleX(0); }
.reveal-all .career__seg { transform: none; }
.career__list { display: grid; gap: 14px; margin: 0; }
.career__list li { display: flex; align-items: center; gap: 14px; font-size: 1rem; line-height: 1.45; color: var(--black); }
.career__dot { flex: none; display: grid; place-items: center; width: 40px; height: 40px; color: var(--black); border-radius: var(--r); }
.career__dot svg { width: 19px; height: 19px; }
.career__dot--a { background: var(--lilac); }
.career__dot--b { background: var(--apricot); }
.career__dot--c { background: var(--apricot-50); }
.career__dot--c svg { fill: currentColor; }
@media (min-width: 900px) { .years .career { order: 2; } }
@media (prefers-reduced-motion: reduce) { .career__seg { transition: none; border-radius: var(--r); } .js .career:not(.is-in) .career__seg { transform: none; } }
@media (prefers-reduced-motion: reduce) { .lunch--float, .lunch-tab { transition: opacity 1ms; } }

/* Testimonial wall: Pinterest-style masonry of photo/video and quote cards. */













/* Video card: full-bleed portrait clip, header over a top fade, like a photo pin. */






.vid__play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; transition: opacity 0.2s ease, transform 0.2s ease; }
.vid.is-playing .vid__play, .vid.is-playing .wall__head, .vid.is-playing::before { opacity: 0; pointer-events: none; }


/* Three testimonials: the video on the left, two quote cards stacked and centred beside it. */




.quote-card__avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }

/* Premium pass: square edges, two accents */
.stone .c { background: var(--surface-2); }


.fticket--featured { background: var(--lilac); }
.fticket--featured .fticket__save { background: #fff; }
.career__seg--c, .career__dot--c { background: var(--lilac); }
.note-bg__ph { background: none; }
.note-bg::after { background: none; }
.iphone__fade { background: linear-gradient(180deg, rgba(242, 165, 121, 0) 0%, var(--apricot) 100%); }
.arch { min-height: 0; padding-top: clamp(36px, 4vw, 52px); border-top: 3px solid var(--apricot); box-shadow: none; border-radius: var(--r); }
.arch--magic { border-top-color: var(--lilac); }

/* ==========================================================================
   Home premium pass
   ========================================================================== */

/* Hero, after Spark: one full-width photo, the copy on a soft cream fade */
.hero--photo { row-gap: 28px; padding-top: 0; }
.hero--photo .hero__media { order: -1; margin-inline: calc(var(--gutter) * -1); animation: fade 700ms var(--ease-out) backwards; }
.hero--photo .hero__media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 62% 22%; }
.hero--photo .accent::before { display: none; }
.hero--photo .hero__facts li::before { width: 6px; height: 6px; border-radius: 50%; background: var(--apricot); }
@media (min-width: 960px) {
  .hero--photo {
    position: relative; isolation: isolate; overflow: hidden;
    grid-template-columns: minmax(0, 1fr); align-items: center;
    min-height: min(calc(100vh - var(--header-h)), 800px);
    padding: 48px var(--pad-start) 56px;
  }
  .hero--photo .hero__copy { grid-column: 1; max-width: 640px; }
  .hero--photo .hero__facts { column-gap: 18px; }
  .hero--photo .hero__media { position: absolute; z-index: -1; grid-area: auto; top: 0; right: 0; bottom: 0; width: 68%; margin: 0; }
  .hero--photo .hero__media img { width: 100%; height: 100%; aspect-ratio: auto; object-position: 62% 30%; }
  .hero--photo .hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--cream) 0%, var(--cream) 18%, rgba(250, 247, 242, 0.82) 27%, rgba(250, 247, 242, 0) 44%); }
}

/* Narrower laptops: a slimmer photo so the headline never touches her */
@media (min-width: 960px) and (max-width: 1239px) {
  .hero--photo .hero__media { width: 56%; }
  .hero--photo .hero__media img { object-position: 45% 30%; }
  .hero--photo .hero__media::after { background: linear-gradient(90deg, var(--cream) 0%, var(--cream) 32%, rgba(250, 247, 242, 0.8) 40%, rgba(250, 247, 242, 0) 52%); }
}

/* One display face per section: the header. Everything under it is Visby. */
.split--art-first .lead-line, .split--art .contrast__answer { font-family: var(--font-body); font-weight: 600; font-size: clamp(1.1875rem, 1.05rem + 0.55vw, 1.4375rem); line-height: 1.4; letter-spacing: -0.005em; }

/* Your task list: the carousel. One task slides in and is completed, the count climbs to 10 of 10. */
@media (min-width: 900px) {
  .split--art-first .done-card { width: 100%; }
}
.done-card { width: min(100%, 440px); margin: 0; padding: clamp(22px, 3vw, 32px); background: #fff; border: 1px solid var(--hairline); border-radius: var(--r); box-shadow: 0 24px 60px -30px rgba(17, 18, 13, 0.18); }
.done__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.done__title { font-weight: 600; font-size: 1.125rem; color: var(--black); }
.done__count { font-size: 0.875rem; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.done__bar { display: block; height: 6px; border-radius: var(--r); background: var(--lilac-25); overflow: hidden; }
.done__bar i { display: block; height: 100%; border-radius: var(--r); background: var(--apricot); transform-origin: left center; transform: scaleX(var(--done, 1)); transition: transform 600ms var(--ease-out), background-color 300ms var(--ease-std); }
.done-card.is-all .done__bar i { background: var(--lilac); }
.done__viewport { overflow: hidden; margin-top: 22px; border-radius: var(--r); background: var(--apricot-25); }
.done__track { display: flex; margin: 0; transform: translateX(calc(var(--at, 0) * -100%)); transition: transform 650ms cubic-bezier(0.65, 0, 0.35, 1); }
.done__track.is-jump { transition: none; }
.done__slide { flex: 0 0 100%; display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 250px; padding: 28px 20px; text-align: center; }
.done__badge { display: block; width: 92px; height: 92px; margin-bottom: 10px; }
.done__badge svg { display: block; width: 100%; height: 100%; overflow: visible; }
.done__seal { fill: #fff; stroke: var(--apricot); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; transform: scale(0.3) rotate(-40deg); opacity: 0; transition: transform 600ms cubic-bezier(0.34, 1.7, 0.64, 1), opacity 200ms; }
.done__tick { fill: none; stroke: var(--black); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; }
.done__slide.is-done .done__seal { transform: none; opacity: 1; }
.done__slide.is-done .done__tick { stroke-dashoffset: 0; transition: stroke-dashoffset 420ms var(--ease-out) 340ms; }
.done__word { font-family: var(--font-display); font-size: 2rem; line-height: 1.1; color: var(--black); }
.done__task { font-size: 1rem; font-weight: 500; line-height: 1.4; color: var(--ink); }
.done__dots { display: flex; justify-content: center; gap: 6px; margin-top: 16px; }
.done__dots i { width: 6px; height: 6px; border-radius: var(--r); background: var(--lilac-50); transition: width 300ms var(--ease-out), background-color 300ms; }
.done__dots i.is-on { width: 20px; background: var(--apricot); }
@media (prefers-reduced-motion: reduce) {
  .done__track, .done__seal, .done__tick, .done__bar i, .done__dots i { transition: none !important; }
}
.done__word { opacity: 0; transform: translateY(6px); transition: opacity 300ms var(--ease-std), transform 400ms var(--ease-out); }
.done__slide.is-done .done__word { opacity: 1; transform: none; transition-delay: 260ms; }
.done__task { order: 3; }
@media (prefers-reduced-motion: reduce) {
  .done__word { opacity: 1; transform: none; }
}
.done__due { order: 4; display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 5px 12px; border-radius: var(--r); background: #fff; font-size: 0.8125rem; font-weight: 600; color: var(--black); }
.done__due svg { width: 14px; height: 14px; }
.done__slide { min-height: 340px; }
.done-card { padding: clamp(26px, 3vw, 36px); }
@media (min-width: 900px) {
  .split--art-first .done-card { width: 100%; max-width: 460px; }
}

/* Current palette: pale card, cream inner panel, visible bar and dots */
.done-card { background: var(--surface); border-radius: var(--r); }
.done__viewport { background: var(--surface-2); border-radius: var(--r); }
.done__due { background: var(--surface); border-radius: var(--r); }
.done__bar { background: var(--surface-2); }
.done-card.is-all .done__bar i { background: var(--apricot); }
.done__dots i { background: var(--lilac); }

/* Every month: drawn like a real calendar app */
.cal { width: min(100%, 560px); margin: 0; padding: clamp(18px, 2.4vw, 28px); background: #fff; border: 1px solid var(--hairline); border-radius: var(--r); }
.cal__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.cal__title { font-weight: 600; font-size: 1.0625rem; color: var(--black); }
.cal__repeat { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--ink); }
.cal__repeat svg { flex: none; width: 15px; height: 15px; color: var(--black); }
.cal__week, .cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 0; }
.cal__week li { padding: 0 0 8px 6px; font-size: 0.75rem; font-weight: 500; color: var(--ink); opacity: 0.65; }
.cal__grid { grid-auto-rows: minmax(68px, 1fr); border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline); }
.cal__cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 5px 4px; border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.cal__n { padding-left: 1px; font-size: 0.75rem; line-height: 1.3; color: var(--black); font-variant-numeric: tabular-nums; }
.cal__cell--out .cal__n { opacity: 0.3; }
.cal__ev { display: block; padding: 1px 0 1px 5px; border-left: 2px solid; font-size: 0.65625rem; font-weight: 500; line-height: 1.25; color: var(--black); }
.cal__ev--peach { border-left-color: var(--apricot); }
.cal__ev--lilac { border-left-color: var(--lilac-deep); }
.cal__key { display: none; }
@media (max-width: 599px) {
  .cal__week li { padding-left: 0; text-align: center; }
  .cal__grid { grid-auto-rows: minmax(52px, 1fr); }
  .cal__cell { padding: 4px 3px; align-items: center; }
  .cal__ev { width: 100%; height: 3px; padding: 0; border-left: 0; overflow: hidden; font-size: 0; }
  .cal__ev--peach { background: var(--apricot); }
  .cal__ev--lilac { background: var(--lilac-deep); }
  .cal__key { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; margin: 16px 0 0; }
  .cal__key li { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--black); }
  .cal__swatch { flex: none; width: 12px; height: 3px; }
  .cal__swatch--peach { background: var(--apricot); }
  .cal__swatch--lilac { background: var(--lilac-deep); }
}

/* A real photo needs no mat or inner frame */
.photo--real { background: none; }
.photo--real::after { display: none; }
.photo--real img { object-position: 50% 32%; }

/* Testimonials: a row of equal portrait cards, after the "Hear it from our partners" reference */
.wrap:has(> .testi) > h2.h2 { text-align: left; margin-inline: 0; }
.testi { display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 300px); gap: 16px; margin-top: clamp(32px, 5vw, 48px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
.testi::-webkit-scrollbar { display: none; }
/* Whole cards only: as many as fit across the container, never one cut in half (phones keep a peek so it reads as swipeable) */
@media (min-width: 640px) { .testi { grid-auto-columns: calc((100% - 16px) / 2); } }
@media (min-width: 900px) { .testi { grid-auto-columns: calc((100% - 32px) / 3); } }
@media (min-width: 1200px) { .testi { grid-auto-columns: calc((100% - 48px) / 4); } }
.testi__card { position: relative; display: flex; flex-direction: column; min-height: 400px; margin: 0; padding: 26px 24px 24px; background: var(--surface); border-radius: var(--r); overflow: hidden; scroll-snap-align: start; }
.testi__avatar { position: relative; z-index: 2; flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.testi__avatar--initial { display: grid; place-items: center; background: var(--lilac); font-family: var(--font-display); font-size: 1.25rem; color: var(--black); }
.testi__quote { flex: 1; margin: 22px 0 0; font-size: 0.9375rem; line-height: 1.6; color: var(--black); }
.testi__quote::before { content: "“"; }
.testi__quote::after { content: "”"; }
.testi__by { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 4px; min-height: 3.85rem; margin-top: 28px; }
.testi__name { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 1.75rem; line-height: 1.05; color: var(--black); }
.testi__role { font-size: 0.8125rem; line-height: 1.4; color: var(--ink); opacity: 0.7; }

/* The video card: same size, the clip behind a soft tint, avatar top-left, name bottom-left */
.testi__card--video { background: var(--black); }
.testi__card--video .vid__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.testi__card--video::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(17, 18, 13, 0.18), rgba(17, 18, 13, 0.5)); pointer-events: none; transition: opacity 0.2s ease; }
.testi__card--video .testi__avatar { border: 2px solid #fff; }
.testi__card--video .testi__by { margin-top: auto; }
.testi__card--video .testi__name, .testi__card--video .testi__role { color: #fff; opacity: 1; }
.testi__play { position: absolute; left: 50%; top: 50%; z-index: 2; translate: -50% -50%; width: 56px; height: 36px; border: 0; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; box-shadow: none; transition: opacity 0.2s ease, background-color 0.2s ease; }
.testi__play:hover { background: rgba(255, 255, 255, 0.45); transform: none; }
.testi__play svg { width: 14px; height: 14px; }
.vid.is-playing .testi__play, .vid.is-playing .testi__avatar, .vid.is-playing .testi__by, .vid.is-playing::after { opacity: 0; pointer-events: none; }
.testi__name { text-transform: lowercase; }
.testi__nav { display: none; justify-content: flex-end; gap: 10px; margin-top: 20px; }
@media (min-width: 640px) { .testi__nav { display: flex; } }
.testi__nav.is-static { visibility: hidden; }
.testi__arrow { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(17, 18, 13, 0.25); border-radius: 50%; background: transparent; color: var(--black); cursor: pointer; transition: background-color 200ms var(--ease-std), border-color 200ms var(--ease-std), opacity 200ms var(--ease-std); }
.testi__arrow:hover { background: var(--surface); border-color: var(--black); }
.testi__arrow:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }
.testi__arrow:disabled { opacity: 0.3; cursor: default; background: transparent; }
.testi__arrow svg { width: 18px; height: 18px; }

/* ==========================================================================
   The Build premium pass
   ========================================================================== */

/* Hero: Home's photo hero, mirrored (photo left, copy right) */
@media (min-width: 960px) {
  .hero--flip { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .hero--flip .hero__copy { grid-column: 2; justify-self: end; width: 100%; max-width: 620px; }
  .hero--flip .hero__media { left: 0; right: auto; }
  .hero--flip .hero__media img { object-position: 38% 30%; }
  .hero--flip .hero__media::after { background: linear-gradient(270deg, var(--cream) 0%, var(--cream) 18%, rgba(250, 247, 242, 0.82) 27%, rgba(250, 247, 242, 0) 44%); }
}
@media (min-width: 960px) and (max-width: 1239px) {
  .hero--flip .hero__media img { object-position: 55% 30%; }
  .hero--flip .hero__media::after { background: linear-gradient(270deg, var(--cream) 0%, var(--cream) 32%, rgba(250, 247, 242, 0.8) 40%, rgba(250, 247, 242, 0) 52%); }
}

/* Lists: a small peach dot instead of an icon tile */
.ache { gap: 14px; }
.ache::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 0.62em; border-radius: 50%; background: var(--apricot); }
.ache__text { padding-top: 0; }

/* The iPhone: a real Pro in titanium, the lock screen as iOS draws it */
.iphone-wrap { position: relative; }
.iphone { --sys: -apple-system, "SF Pro Display", "SF Pro Text", "Helvetica Neue", var(--font-body);
  width: min(100%, 300px); aspect-ratio: 9 / 19.5; padding: 9px; border: 0; border-radius: 50px; background: #050506;
  box-shadow: 0 0 0 1px #3a3a3e, 0 0 0 3.5px #a9a9ae, 0 0 0 4px #5f5f64, 0 60px 80px -48px rgba(17, 18, 13, 0.55), 0 24px 40px -28px rgba(17, 18, 13, 0.35); }
.iphone::before, .iphone::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #6d6d72, #b9b9be); }
.iphone::before { left: -7px; top: 104px; height: 26px; box-shadow: 0 46px 0 0 #8e8e93, 0 96px 0 0 #8e8e93; }
.iphone::after { right: -7px; top: 150px; height: 72px; }
.iphone__island { top: 20px; width: 88px; height: 25px; margin-left: -44px; background: #000; z-index: 4; }
.iphone__screen { padding: 54px 10px 16px; border-radius: 41px; background: #111; color: #fff; font-family: var(--sys); }
.iphone__wall { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.iphone__screen::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(17, 18, 13, 0.34), rgba(17, 18, 13, 0.24) 40%, rgba(17, 18, 13, 0.46)); pointer-events: none; }
.iphone__screen::after { content: ""; position: absolute; inset: 0; z-index: 5; background: linear-gradient(118deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 30%, rgba(255, 255, 255, 0) 42%); pointer-events: none; }
.iphone__date, .iphone__time, .iphone__notes { position: relative; z-index: 2; }
.iphone__date { font-family: var(--sys); font-size: 0.8125rem; font-weight: 600; color: rgba(255, 255, 255, 0.92); }
.iphone__time { font-family: var(--sys); font-weight: 600; font-size: 4.25rem; line-height: 1; letter-spacing: -0.03em; color: rgba(255, 255, 255, 0.94); margin: 0 0 16px; }
.iphone__notes { gap: 6px; }
.iphone__note { align-items: center; gap: 10px; padding: 9px 11px; border-radius: 19px; background: rgba(242, 242, 247, 0.74); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.iphone__app { display: block; width: 34px; height: 34px; border-radius: 8px; background: none; }
.iphone__head { align-items: baseline; font-size: 0.625rem; color: rgba(60, 60, 67, 0.62); }
.iphone__head b { text-transform: none; letter-spacing: 0; font-weight: 600; color: rgba(28, 28, 30, 0.75); }
.iphone__title { font-size: 0.75rem; font-weight: 600; color: #000; }
.iphone__line { font-size: 0.75rem; color: #1c1c1e; }
.iphone__btn { z-index: 2; bottom: 28px; width: 44px; height: 44px; background: rgba(28, 28, 30, 0.32); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #fff; }
.iphone__home { z-index: 2; bottom: 8px; width: 108px; height: 4px; margin-left: -54px; background: rgba(255, 255, 255, 0.92); }

/* What I build for you: an italic number on still cards */
.c__num { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 2.5rem; line-height: 1; color: var(--apricot); }
.cs--b .c { transform: none; box-shadow: none; border-color: var(--hairline); transition: transform 350ms var(--ease-out), box-shadow 350ms var(--ease-std), border-color 350ms var(--ease-std); }
.cs--b .c:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -26px rgba(17, 18, 13, 0.28); border-color: rgba(17, 18, 13, 0.16); }
@media (prefers-reduced-motion: reduce) { .cs--b .c:hover { transform: none; } }
.build-voice { font-family: var(--font-body); font-style: italic; font-weight: 500; font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem); line-height: 1.45; color: var(--black); }

/* Pick your build: peach ticks, Visby line */
.includes--b { --lilac: var(--apricot); }
.pick-note { font-family: var(--font-body); font-weight: 600; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.4; color: var(--black); }

/* Founding spots: real faces */
.spot--av img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Founding tickets: printed card stock with a real perforation, foil stamp and barcode */
.fticket { display: block; background: none; border-radius: 0; filter: drop-shadow(0 1px 1px rgba(17, 18, 13, 0.16)) drop-shadow(0 14px 22px rgba(17, 18, 13, 0.10)); }
.fticket:hover { transform: rotate(0deg) translateY(-4px); filter: drop-shadow(0 1px 1px rgba(17, 18, 13, 0.16)) drop-shadow(0 22px 30px rgba(17, 18, 13, 0.14)); }
.fticket--featured { background: none; }
.fticket__card { --stub: 150px; --paper: #fdfcfa; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--stub); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.07 0 0 0 0 0.07 0 0 0 0 0.05 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0)), var(--paper); border-radius: var(--r);
  -webkit-mask: radial-gradient(circle at calc(100% - var(--stub)) 0, transparent 9px, #000 9.5px) top / 100% 51% no-repeat, radial-gradient(circle at calc(100% - var(--stub)) 100%, transparent 9px, #000 9.5px) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle at calc(100% - var(--stub)) 0, transparent 9px, #000 9.5px) top / 100% 51% no-repeat, radial-gradient(circle at calc(100% - var(--stub)) 100%, transparent 9px, #000 9.5px) bottom / 100% 51% no-repeat; }
.fticket--featured .fticket__card { --paper: var(--lilac); }
.fticket__stub { position: relative; display: grid; justify-items: center; align-content: center; gap: 9px; padding: 16px 14px; border: 0; }
.fticket__stub::before { content: ""; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 3px; background: radial-gradient(circle, rgba(17, 18, 13, 0.28) 1.1px, transparent 1.5px) center top / 3px 7px repeat-y; }
.fticket__no { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.06em; color: var(--ink); opacity: 0.75; font-variant-numeric: tabular-nums; }
.fticket__save, .fticket--featured .fticket__save { padding: 6px 11px; border-radius: var(--r); background: linear-gradient(110deg, #e48a58 0%, #f7c6a6 32%, #f2a579 52%, #fbdcc8 68%, #e48f5e 100%); background-size: 220% 100%; background-position: 0 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 1px 1px rgba(17, 18, 13, 0.18); font-size: 0.75rem; font-weight: 600; color: var(--black); transition: background-position 900ms var(--ease-out); }
.fticket:hover .fticket__save { background-position: 100% 0; }
.fticket__code { width: 86px; height: 20px; opacity: 0.78; background: repeating-linear-gradient(90deg, #11120d 0 1px, transparent 1px 3px, #11120d 3px 5px, transparent 5px 6px, #11120d 6px 7px, transparent 7px 10px, #11120d 10px 12px, transparent 12px 13px); }
@media (max-width: 480px) { .fticket__card { --stub: 112px; } .fticket__code { width: 64px; } }
@media (prefers-reduced-motion: reduce) { .fticket__save { transition: none; } }
/* iOS shows the newest few and stacks the rest: three full notifications, the fourth tucked behind, older ones hidden */
.iphone__note { position: relative; z-index: 1; }
.iphone__note:nth-child(4) { z-index: 0; margin-top: -62px; transform: scale(0.92); transform-origin: 50% 100%; opacity: 0.75; }
.iphone__note:nth-child(4) > * { visibility: hidden; }
.iphone__note:nth-child(n+5) { display: none; }
/* Like iOS 16+: notifications sit at the bottom of the lock screen, just above the torch and camera buttons */
.iphone__screen { display: flex; flex-direction: column; }
.iphone__notes { margin-top: auto; margin-bottom: 78px; }

/* iOS lock screen, current look (liquid glass) */
.iphone__screen { padding: 56px 10px 16px; }
.iphone__date { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.95); }
/* The tall glass clock: translucent white numerals with a bright edge */
.iphone__time { margin: 0 0 18px; font-family: var(--sys); font-weight: 700; font-size: 5.25rem; line-height: 0.95; letter-spacing: -0.04em; transform: scaleY(1.12); transform-origin: top center;
  color: transparent; background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.55) 55%, rgba(255, 228, 240, 0.7) 100%); -webkit-background-clip: text; background-clip: text;
  -webkit-text-stroke: 0.6px rgba(255, 255, 255, 0.65); filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.18)); }
.iphone__nc { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; margin: auto 4px 8px; font-family: var(--sys); font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; color: #fff; text-align: left; }
.iphone__x { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.35); }
.iphone__x svg { width: 9px; height: 9px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; }
.iphone__notes { margin-top: 0; margin-bottom: 70px; gap: 6px; }
.iphone__note { align-items: center; gap: 10px; padding: 10px 12px; border-radius: 20px; background: rgba(58, 46, 52, 0.42); -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.14); color: #fff; }
.iphone__body { position: relative; }
.iphone__head { position: absolute; top: 1px; right: 0; }
.iphone__head b { display: none; }
.iphone__head span { font-size: 0.625rem; color: rgba(255, 255, 255, 0.62); }
.iphone__title { padding-right: 46px; font-size: 0.75rem; font-weight: 600; color: #fff; }
.iphone__line { font-size: 0.75rem; color: rgba(255, 255, 255, 0.92); }
/* Older notifications: two slim glass layers tucked behind the third */
.iphone__note:nth-child(4), .iphone__note:nth-child(5) { display: flex; z-index: 0; margin-top: -60px; transform-origin: 50% 100%; }
.iphone__note:nth-child(4) { transform: scale(0.95); opacity: 0.85; }
.iphone__note:nth-child(5) { transform: scale(0.9) translateY(4px); opacity: 0.6; }
.iphone__note:nth-child(4) > *, .iphone__note:nth-child(5) > * { visibility: hidden; }
.iphone__note:nth-child(n+6) { display: none; }
.iphone__btn { background: rgba(255, 255, 255, 0.16); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.iphone__screen::before { background: linear-gradient(180deg, rgba(30, 22, 26, 0.30), rgba(30, 22, 26, 0.36) 45%, rgba(30, 22, 26, 0.5)); }
/* Sit higher, like the real lock screen; older notifications show only as two slim glass edges under the last card */
.iphone__notes { position: relative; margin-bottom: 140px; }
.iphone__note:nth-child(n+4) { display: none; }
.iphone__notes::before, .iphone__notes::after { content: ""; position: absolute; z-index: 0; height: 14px; border-radius: 0 0 16px 16px; background: rgba(58, 46, 52, 0.36); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); box-shadow: inset 0 -0.5px 0 rgba(255, 255, 255, 0.2); }
.iphone__notes::before { left: 8px; right: 8px; bottom: -7px; }
.iphone__notes::after { left: 16px; right: 16px; bottom: -13px; opacity: 0.7; }
/* The stack edges are the real older notifications, so they move with the stack: as a new one lands on top,
   the third glides down and tucks in as the first edge, the old first edge becomes the second, the last one leaves. */
.iphone__notes::before, .iphone__notes::after { content: none; }
.iphone__note:nth-child(4), .iphone__note:nth-child(5) { display: flex; position: absolute; margin: 0; padding-block: 0; height: 14px; transform: none; overflow: hidden; border-radius: 0 0 16px 16px; }
.iphone__note:nth-child(4) { z-index: 0; left: 8px; right: 8px; bottom: -7px; opacity: 0.85; }
.iphone__note:nth-child(5) { z-index: -1; left: 16px; right: 16px; bottom: -13px; opacity: 0.6; }
.iphone__note:nth-child(4) > *, .iphone__note:nth-child(5) > * { visibility: hidden; }
.iphone__note:nth-child(n+6) { display: none; }
.iphone__note { transition: opacity 400ms var(--ease-std); }
/* Realistic stack: the older notifications are whole cards, scaled down behind the front one, only their rounded bottoms peeking.
   Scale and offset use the separate scale/translate properties so the slide animation (transform) composes with them smoothly. */
.iphone__note:nth-child(4), .iphone__note:nth-child(5) { position: absolute; left: 0; right: 0; bottom: 0; height: auto; margin: 0; padding: 10px 12px; border-radius: 20px; overflow: visible; transform: none; transform-origin: 50% 100%; background: rgba(46, 36, 41, 0.5);
  transition: opacity 400ms var(--ease-std), scale 450ms var(--ease-out), translate 450ms var(--ease-out); }
.iphone__note:nth-child(4) { z-index: 0; translate: 0 8px; scale: 0.94; opacity: 0.9; }
.iphone__note:nth-child(5) { z-index: -1; translate: 0 15px; scale: 0.88; opacity: 0.65; }
.iphone__note > * { transition: opacity 300ms var(--ease-std); }
.iphone__note:nth-child(4) > *, .iphone__note:nth-child(5) > * { visibility: visible; opacity: 0; }
.iphone__note:nth-child(-n+3) { background: rgba(58, 46, 52, 0.52); }
/* Calendar events as Apple Calendar draws all-day events: a softly tinted pill, a small ringed dot, the name in a matching deeper tone */
.cal__ev { display: flex; align-items: center; gap: 3px; padding: 2px 3px; border-left: 0; border-radius: 4px; font-size: 0.625rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; overflow: hidden; }
.cal__ev::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid currentColor; background: #fff; }
.cal__ev--peach { color: #a9572a; background: rgba(242, 165, 121, 0.24); }
.cal__ev--lilac { color: #7a559f; background: rgba(216, 194, 236, 0.5); }
@media (max-width: 599px) {
  .cal__ev { display: block; border-radius: 2px; }
  .cal__ev::before { content: none; }
  .cal__ev--peach { background: var(--apricot); }
  .cal__ev--lilac { background: var(--lilac-deep); }
}
/* The Signature ticket: solid lilac card stock, grain only, no white sheen */
.fticket--featured .fticket__card { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.07 0 0 0 0 0.07 0 0 0 0 0.05 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), var(--lilac); box-shadow: inset 0 0 0 0.5px rgba(17, 18, 13, 0.06); }
/* The Starter ticket on a warmer off-white stock */
.fticket:nth-child(1) .fticket__card { --paper: #f6f3ee; }
/* Long Lunch card: centred on the right edge (leaves the bottom-right corner free for a chat widget); square tab corners */
@media (min-width: 1180px) {
  .lunch--float { top: 50%; bottom: auto; translate: 0 -50%; }
  .lunch-tab { top: 50%; bottom: auto; translate: 0 -50%; }
  .lunch__close, .lunch-tab { border-radius: 0; }
}
/* Haus Members: peach ticks, same as Every build includes */
.members { --lilac: var(--apricot); }

/* The woman / magic / machine: the italic word in bold so it reads clearly */
.stone__title em { font-weight: 700; }

/* ---------- Community, premium pass ---------- */
/* Buttons stay pills, including the outlined one */
.text-link--pill { border-radius: var(--r-pill); }

/* Hero: the Home photo hero; her face sits right of the copy */
.hero--comm .hero__media img { object-position: 40% 30%; }
@media (min-width: 960px) { .hero--comm .hero__media img { object-position: 18% 32%; } }
@media (min-width: 960px) and (max-width: 1239px) { .hero--comm .hero__media img { object-position: 30% 32%; } }

/* Next Long Lunch: photo with an Apple Calendar-style event card resting on its lower edge */
.lunch-shot { position: relative; margin: 0 0 40px; }
.lunch-shot__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 40% 50%; border-radius: var(--r); }
.lunch-event { position: absolute; left: clamp(12px, 4%, 28px); bottom: -36px; display: flex; align-items: center; gap: 16px; width: min(86%, 340px); padding: 14px 18px 14px 14px; background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border-radius: var(--r); box-shadow: 0 1px 2px rgba(17, 18, 13, 0.06), 0 22px 44px -22px rgba(17, 18, 13, 0.35); }
.lunch-event__date { flex: none; display: grid; justify-items: center; align-content: center; gap: 2px; width: 72px; min-height: 72px; padding: 6px 4px; border-radius: var(--r); background: var(--surface-2, #f2eaf0); background: #f2eaf0; text-align: center; }
.lunch-event__wd { font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; color: #c4703f; }
.lunch-event__day { font-family: var(--font-display); font-size: 1.375rem; line-height: 1.1; color: var(--black); }
.lunch-event .ph { background: transparent; padding: 0; }
.lunch-event__body { display: grid; gap: 3px; min-width: 0; padding-left: 14px; border-left: 3px solid var(--apricot); }
.lunch-event__title { margin: 0; font-family: var(--font-body); font-weight: 600; font-size: 1rem; line-height: 1.3; color: var(--black); }
.lunch-event__meta { margin: 0; font-size: 0.875rem; line-height: 1.35; color: var(--ink); }
.js .lunch-shot:not(.is-in) .lunch-event { opacity: 0; transform: translateY(12px); }
.lunch-event { transition: opacity 600ms var(--ease-out) 250ms, transform 600ms var(--ease-out) 250ms; }
.reveal-all .lunch-shot .lunch-event { opacity: 1; transform: none; }

/* Who it's for: a portrait, and the Evolver line in Visby like Home */
.who-photo { margin: 0; }
.who-photo img { display: block; width: 100%; max-width: 480px; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%; border-radius: var(--r); }
@media (min-width: 900px) { .who-photo img { margin-inline: auto; } }
@media (max-width: 899px) { .who .who-photo { order: 2; } }
.who-line, .why-line { font-family: var(--font-body); font-weight: 600; font-size: clamp(1.1875rem, 1.05rem + 0.55vw, 1.4375rem); line-height: 1.4; letter-spacing: -0.005em; color: var(--black); }

/* What's inside: quiet white cards, a peach bold italic word like the Home stones */
.inside__item { box-shadow: none; transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-std); }
.inside__item:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -28px rgba(17, 18, 13, 0.3); }
.inside__item .h4 { font-weight: 300; font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); line-height: 1.1; margin-bottom: 14px; }
.inside__item .h4 em { font-style: italic; font-weight: 700; color: var(--apricot); margin-left: 0.06em; }

/* What we talk about: titles like the Home stones */
.venn-row__title { font-weight: 300; }
.venn-row__title em { font-weight: 700; }

/* Why I built it: photo left, letter right */
.why { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 900px) { .why { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.why__photo { margin: 0; }
.why__photo img { display: block; width: 100%; max-width: 460px; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: var(--r); }
@media (max-width: 899px) { .why__photo { order: 2; } }
.why__copy .h2 { text-align: left; margin-inline: 0; }
.why .letter-card { margin: clamp(24px, 3vw, 36px) 0 0; max-width: none; box-shadow: none; }

/* Already building with me: printed member cards on card stock */
.pass-art { min-height: 380px; }
.mcard { position: absolute; width: min(82%, 380px); aspect-ratio: 1.586; padding: 26px 28px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; border-radius: 10px; box-shadow: inset 0 0 0 0.5px rgba(17, 18, 13, 0.08), 0 2px 3px rgba(17, 18, 13, 0.08), 0 30px 50px -30px rgba(17, 18, 13, 0.45); }
.mcard::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 6px; pointer-events: none; }
.mcard__kind { position: relative; font-family: var(--font-display); font-weight: 400; font-size: 1.625rem; line-height: 1; color: var(--black); }
.mcard__logo { position: relative; width: 92px; height: auto; }
.mcard--members { z-index: 2; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.07 0 0 0 0 0.07 0 0 0 0 0.05 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), var(--lilac); transform: translate(-6%, 9%) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 400ms var(--ease-out); }
.mcard--members .mcard__logo { filter: brightness(0) invert(1); opacity: 0.95; }
.mcard--members .mcard__kind { align-self: flex-start; }
.mcard--inner { z-index: 1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.07 0 0 0 0 0.07 0 0 0 0 0.05 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), var(--apricot); transform: translate(10%, -12%) rotate(5deg); flex-direction: row; align-items: flex-start; }
.mcard--inner .mcard__logo { filter: brightness(0) invert(1); opacity: 0.9; width: 72px; }
.mcard--inner .mcard__kind { font-size: 1.375rem; }
.pass__sheen { z-index: 1; }
@media (max-width: 480px) { .pass-art { min-height: 300px; } .mcard { padding: 20px 22px; } .mcard__kind { font-size: 1.375rem; } }

/* Closing: real faces */
.faces--photo .face { width: 52px; height: 52px; }
.face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lunch-shot__img, .who-photo img, .why__photo img { height: auto; }
/* Venn: cleaner overlaps (white woman circle with a hairline, softer lilac and peach) */
.venn__c circle { mix-blend-mode: multiply; }
.venn__c--woman circle { fill: #fff; opacity: 1; stroke: rgba(17, 18, 13, 0.14); stroke-width: 1; }
.venn__c--magic circle { fill: var(--lilac); opacity: 0.6; }
.venn__c--machine circle { fill: var(--apricot); opacity: 0.42; }
.venn__c.is-on circle { opacity: 0.85; }
.venn__c--woman.is-on circle { opacity: 1; }
.venn__rims circle { stroke: rgba(255, 255, 255, 0.9); }
.venn-row--woman .venn-row__dot { background: #fff; box-shadow: 0 0 0 1px rgba(17, 18, 13, 0.2); }
.inside__item .h4 em { font-weight: 300; }

/* Venn, round 2: copy left, diagram right; all white, each circle takes its colour on hover */
@media (min-width: 900px) { .venn-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.venn__c circle, .venn__c--woman circle, .venn__c--magic circle, .venn__c--machine circle { fill: #fff; opacity: 1; mix-blend-mode: normal; stroke: rgba(17, 18, 13, 0.16); stroke-width: 1; transition: fill 300ms var(--ease-std); }
.venn__rims circle { stroke: rgba(17, 18, 13, 0.16); stroke-width: 1; }
.venn__c.is-on circle { opacity: 1; }
.venn__c--woman.is-on circle { fill: #f2eaf0; }
.venn__c--magic.is-on circle { fill: var(--lilac); }
.venn__c--machine.is-on circle { fill: var(--apricot); }
.venn__c.is-on { transform: scale(1.04); }
.venn svg { overflow: visible; filter: drop-shadow(0 18px 30px rgba(17, 18, 13, 0.06)); }
.venn-row--woman .venn-row__dot { background: #f2eaf0; box-shadow: none; }

.venn__c circle, .venn__c--woman circle, .venn__c--magic circle, .venn__c--machine circle { mix-blend-mode: multiply; }
.venn svg { isolation: isolate; }
.venn-row--woman .venn-row__dot { box-shadow: 0 0 0 1px rgba(17, 18, 13, 0.2); }

/* Already building with me: the HAUS dashboard on a MacBook (client mockup, transparent PNG) */
.mac-shot { margin: 0; }
.mac-shot img { display: block; width: 100%; max-width: 640px; height: auto; margin-inline: auto; filter: drop-shadow(0 26px 30px rgba(17, 18, 13, 0.16)); }

/* Haus Platform: the four Cs, shown as a connected client journey. */
.haus-platform { position: relative; background: #f2eaf0; box-shadow: 0 -14px 32px -24px rgba(17, 18, 13, 0.22); }
.platform-intro { max-width: 800px; margin: 0 auto 40px; text-align: center; }
.platform-intro .h2 { margin-bottom: 24px; }
.platform-intro .lead { max-width: 710px; margin-inline: auto; }
.platform-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 680px; margin: 0 auto 24px; }
.platform-tabs[hidden], .platform-panel[hidden] { display: none; }
.platform-tabs button { min-height: 48px; border: 1px solid var(--hairline); border-radius: 100px; padding: 12px 16px; background: transparent; color: var(--black); font: inherit; font-weight: 600; cursor: pointer; transition: background 180ms ease, border-color 180ms ease; }
.platform-tabs button[aria-selected="true"] { background: var(--lilac); border-color: var(--lilac); }
.platform-tabs button:hover { border-color: var(--black); }
.platform-tabs button:focus-visible, .platform-panel:focus-visible { outline: 2px solid var(--black); outline-offset: 4px; }
.platform-panel { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(28px, 5vw, 72px); padding: clamp(24px, 4vw, 56px); border: 1px solid var(--hairline); border-radius: 0; background: #fffdf9; }
.platform-panel + .platform-panel { margin-top: 20px; }
.platform-panel[hidden] + .platform-panel, .platform-tabs:not([hidden]) ~ .platform-panel { margin-top: 0; }
.platform-kicker { font-size: .875rem; margin-bottom: 16px; }
.platform-panel h3, .platform-replaces h2 { font-family: var(--font-display); font-size: clamp(2rem, 2.8vw, 3rem); line-height: 1.12; font-weight: 300; margin-bottom: 20px; }
.platform-panel__copy > p:not(.platform-kicker) { max-width: 48ch; line-height: 1.65; }
.platform-features { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin-top: 28px; font-size: .9375rem; }
.platform-features li { display: flex; align-items: flex-start; gap: 12px; }
.platform-features li > svg { flex: none; width: 24px; height: 24px; margin-top: 2px; }
.platform-demo { background: #f0e7f6; padding: clamp(20px, 3vw, 36px); border-radius: 0; min-width: 0; }
.platform-demo__label { display: block; margin-bottom: 24px; font-size: .875rem; }
.platform-demo__card { border-radius: 0; background: var(--cream); padding: 22px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 8px 24px -18px rgba(17,18,13,.25); }
.platform-demo__tag { align-self: flex-start; border: 1px solid var(--hairline); padding: 4px 10px; border-radius: 0; font-size: .75rem; }
.platform-demo__card strong { display: block; font-size: 1.0625rem; line-height: 1.4; }
.platform-demo__card span:not(.platform-demo__tag) { display: block; font-size: .875rem; line-height: 1.5; }
.platform-demo__connector { display: block; text-align: center; font-size: 1.625rem; padding: 9px; }
.platform-demo__card--accent { background: var(--lilac); flex-direction: row; align-items: center; gap: 12px; }
.platform-demo__card svg { flex: 0 0 22px; width: 22px; height: 22px; }
.platform-demo__card--accent strong { margin-bottom: 5px; }
.platform-demo small { display: block; text-align: right; margin-top: 18px; font-size: .75rem; }
.platform-replaces { margin-top: 64px; }
.platform-replaces__intro { text-align: center; margin: 0 auto 30px; }
.platform-replaces__intro h2 { margin-bottom: 14px; }
.platform-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9375rem; text-align: left; border: 1px solid var(--hairline); border-radius: 0; overflow: hidden; }
.platform-table th, .platform-table td { padding: 18px 22px; vertical-align: middle; border-bottom: 1px solid var(--hairline); line-height: 1.45; }
.platform-table thead th { background: #eee4f5; font-weight: 600; }
.platform-table tbody th { font-weight: 500; }
.platform-table td:last-child { background: #f0e7f6; }
.platform-table tr:last-child > * { border-bottom: 0; }
.platform-footnote { max-width: 760px; margin: 24px auto 0; font-size: .875rem; line-height: 1.6; text-align: center; }
@media (max-width: 760px) {
  .platform-panel { grid-template-columns: 1fr; border-radius: 0; }
  .platform-tabs { gap: 8px; }
  .platform-tabs button { padding-inline: 6px; font-size: .875rem; }
  .platform-table th, .platform-table td { padding: 14px 10px; font-size: .8125rem; overflow-wrap: anywhere; }
  .platform-table { table-layout: fixed; }
  .platform-features { gap: 12px; }
  .platform-replaces { margin-top: 44px; }
}
@media (prefers-reduced-motion: reduce) { .platform-tabs button { transition: none; } }

/* Product scenes: app surfaces with one sequenced workflow per tab. */
.haus-platform h3 { isolation: isolate; }
.haus-platform .accent::before { border-radius: 0; }
.haus-scene { position: relative; min-width: 0; min-height: 390px; padding: 24px 14px 56px; background: #f0e7f6; }
.haus-scene__window { background: #fffdf9; border: 1px solid rgba(17,18,13,.12); box-shadow: 0 18px 34px -24px rgba(17,18,13,.3); }
.haus-scene__bar { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--hairline); }
.haus-scene__bar img { width: 54px; height: 22px; object-fit: contain; }
.haus-scene__bar span { font-size: .6875rem; margin-left: auto; }
.haus-scene__bar i { width: 6px; height: 6px; background: var(--apricot); }
.haus-scene__body { padding: 20px; min-height: 300px; }
.haus-scene__heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 18px; }
.haus-scene__heading strong { font-size: 1rem; font-weight: 600; }
.haus-scene__heading > span { font-size: .6875rem; }
.haus-chat__person { display: flex; align-items: center; gap: 10px; padding-bottom: 18px; }
.haus-avatar { width: 32px; height: 32px; display: grid; place-items: center; background: var(--lilac); font-size: .75rem; }
.haus-chat__person strong, .haus-care-event strong { display: block; font-size: .8125rem; font-weight: 600; }
.haus-chat__person small, .haus-care-event small { display: block; margin-top: 4px; font-size: .6875rem; }
.haus-bubble { max-width: 88%; padding: 12px 14px; font-size: .8125rem; line-height: 1.5; }
.haus-bubble small { display: block; font-size: .625rem; margin-top: 8px; }
.haus-bubble--incoming { background: #f0ece5; margin-right: auto; }
.haus-bubble--reply { background: var(--lilac); margin-left: auto; margin-top: 12px; }
.haus-typing { display: flex; gap: 4px; margin: 12px 8px -4px auto; width: 26px; }
.haus-typing i { display: block; width: 4px; height: 4px; background: #786388; }
.haus-scene__notice { position: absolute; bottom: 24px; left: 30px; right: 0; display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: #f8d8c3; border: 1px solid rgba(17,18,13,.08); box-shadow: 0 12px 24px -20px rgba(17,18,13,.3); }
.haus-scene__notice svg, .haus-booked svg, .haus-email__send svg { width: 20px; height: 20px; flex: 0 0 20px; }
.haus-scene__notice strong { display: block; font-size: .8125rem; font-weight: 600; }
.haus-scene__notice span { display: block; font-size: .6875rem; margin-top: 4px; }
.haus-calendar { border: 1px solid var(--hairline); }
.haus-calendar__month { display: flex; justify-content: space-between; gap: 12px; padding: 12px; font-size: .75rem; border-bottom: 1px solid var(--hairline); }
.haus-calendar__week, .haus-calendar__dates { display: grid; grid-template-columns: repeat(5, 1fr); text-align: center; }
.haus-calendar__week { padding: 12px 8px 0; font-size: .625rem; }
.haus-calendar__dates { padding: 8px; font-size: .875rem; }
.haus-calendar__dates span { padding: 8px 0; }
.haus-calendar__selected { background: var(--lilac); }
.haus-slots__label { font-size: .6875rem; margin: 16px 0 8px; }
.haus-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; font-size: .6875rem; text-align: center; }
.haus-slots span { border: 1px solid var(--hairline); padding: 8px 4px; }
.haus-slots__chosen { background: var(--lilac); }
.haus-booked { display: flex; gap: 10px; align-items: center; margin-top: 16px; }
.haus-booked strong { font-size: .75rem; }
.haus-booked small { display: block; font-size: .6875rem; margin-top: 3px; }
.haus-care-event { display: flex; align-items: center; gap: 12px; padding: 12px; margin-bottom: 18px; border: 1px solid var(--hairline); }
.haus-care-event__date { display: block; text-align: center; padding: 8px 12px; background: #f0e7f6; font-size: .5625rem; }
.haus-care-event__date strong { font-size: 1.25rem; }
.haus-scene--care .haus-bubble--incoming { margin-top: 12px; }
.haus-email__meta { display: flex; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--hairline); padding: 9px 0; font-size: .6875rem; }
.haus-email__meta > span { min-width: 36px; }
.haus-email__meta strong { font-weight: 500; }
.haus-email__letter { margin-top: 18px; padding: 18px; background: var(--cream); }
.haus-email__letter > span { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1; }
.haus-email__letter p { font-size: .75rem; line-height: 1.5; margin-top: 12px; }
.haus-email__letter small { display: block; font-size: .625rem; margin-top: 12px; }
.haus-email__send { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: .6875rem; }
.haus-scene .haus-beat--one { animation: haus-message-first 9s ease infinite; }
.haus-scene .haus-beat--two { animation: haus-message-second 9s ease infinite; }
.haus-scene__notice { animation: haus-notice 9s ease infinite; }
.haus-typing { animation: haus-typing 9s ease infinite; }
.haus-slots__chosen { animation: haus-slot 9s ease infinite; }
.haus-scene *, .haus-scene.is-playing * { animation-play-state: paused; }
.haus-platform .haus-scene.is-playing * { animation-play-state: running; }
@keyframes haus-message-first { 0%, 8% { opacity: 0; transform: translateY(8px); } 16%, 90% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(0); } }
@keyframes haus-message-second { 0%, 30% { opacity: 0; transform: translateY(8px); } 40%, 90% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(0); } }
@keyframes haus-notice { 0%, 49% { opacity: 0; transform: translateY(12px); } 59%, 90% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(0); } }
@keyframes haus-typing { 0%, 15%, 36%, 100% { opacity: 0; } 20%, 24%, 29%, 33% { opacity: 1; } 22%, 27%, 31% { opacity: .35; } }
@keyframes haus-slot { 0%, 20%, 100% { background: transparent; } 30%, 90% { background: var(--lilac); } }
.platform-replaces { max-width: 1000px; margin-inline: auto; }
.platform-table { border: 0; border-spacing: 0 8px; overflow: visible; }
.platform-table thead th { background: transparent; border: 0; padding-bottom: 8px; }
.platform-table th:first-child { width: 35%; }
.platform-table th:last-child { width: 16%; text-align: center; }
.platform-table tbody th, .platform-table tbody td { background: #f0e7f6; border: 0; padding-block: 16px; }
.platform-table tbody th { font-weight: 600; font-size: .875rem; }
.platform-table td:last-child { background: var(--lilac); text-align: center; }
.platform-table__logo { display: block; width: 72px; height: 30px; object-fit: contain; margin-inline: auto; }
.platform-brands { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; }
.platform-brand { display: flex; align-items: center; gap: 7px; font-size: .6875rem; }
.platform-brand img { display: block; width: 25px; height: 25px; object-fit: contain; }
.platform-included { display: inline-flex; width: 28px; height: 28px; justify-content: center; align-items: center; color: var(--apricot); }
.platform-included svg { width: 22px; height: 22px; }
@media (max-width: 1000px) and (min-width: 761px) { .platform-panel { gap: 24px; padding: 28px; } .haus-scene__body { padding: 14px; } .haus-scene__bar span { font-size: .5625rem; } }
@media (max-width: 760px) {
  .haus-scene { max-width: 480px; width: 100%; margin-inline: auto; padding-inline: 12px; }
  .haus-scene__notice { left: 20px; padding: 14px; }
  .platform-table th:first-child { width: 37%; }
  .platform-table th:last-child { width: 18%; }
  .platform-table thead th, .platform-table tbody th { font-size: .75rem; }
  .platform-table th, .platform-table td { padding-inline: 10px; }
  .platform-brands { gap: 12px; }
  .platform-brand { font-size: .625rem; gap: 5px; }
  .platform-brand img { width: 21px; height: 21px; }
  .platform-table__logo { width: 48px; }
}
@media (max-width: 390px) { .platform-panel { padding: 20px; } .haus-scene__body { padding: 12px; } .haus-scene__bar { padding: 12px; } .haus-scene__bar span { font-size: .5625rem; } }
@media (prefers-reduced-motion: reduce) {
  .haus-scene * { animation: none !important; }
  .haus-typing { display: none; }
}

/* Full reference comparison: keep four readable columns on small screens. */
.platform-table-wrap { overflow-x: auto; scrollbar-width: thin; }
.platform-table-wrap:focus-visible { outline: 2px solid var(--black); outline-offset: 4px; }
.platform-table--full { table-layout: fixed; min-width: 620px; }
.platform-table--full th:first-child { width: 32%; }
.platform-table--full th:nth-child(2) { width: 33%; }
.platform-table--full th:nth-child(3) { width: 20%; text-align: center; }
.platform-table--full th:last-child { width: 15%; }
.platform-table--full th, .platform-table--full td { padding: 12px 18px; }
.platform-table--full thead small, .platform-table--full tfoot small, .platform-price-cell small { display: block; font-size: .6875rem; font-weight: 400; margin-top: 4px; }
.platform-tool-strip { display: block; width: 100%; max-width: 270px; height: auto; aspect-ratio: 410 / 88; overflow: hidden; }
.platform-price-cell { text-align: center; }
.platform-cost { font-size: 1rem; font-weight: 600; }
.platform-cost-note, .platform-app-label { font-size: .75rem; line-height: 1.5; }
.platform-table--full tfoot th, .platform-table--full tfoot td { background: #eee4f5; border: 0; padding-block: 22px; }
.platform-table--full tfoot td:last-child { text-align: center; background: var(--lilac); }
.platform-table--full tfoot strong { display: block; font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 600; }
@media (max-width: 760px) {
  .platform-table--full th, .platform-table--full td { padding-inline: 12px; }
  .platform-table--full tbody th { font-size: .8125rem; }
}

/* Haus surfaces have a restrained 4px corner; controls retain their pill shape. */
.haus-platform { --platform-radius: 4px; }
.haus-platform :is(.platform-panel, .haus-scene, .haus-scene__window,
  .haus-scene__notice, .haus-bubble, .haus-calendar,
  .haus-calendar__selected, .haus-slots span, .haus-care-event,
  .haus-care-event__date, .haus-email__letter) { border-radius: var(--platform-radius); }
.haus-scene__window, .haus-calendar { overflow: hidden; }
.haus-platform .accent::before { border-radius: var(--platform-radius); }
.platform-table--full :is(tbody, tfoot) tr > :first-child {
  border-radius: var(--platform-radius) 0 0 var(--platform-radius);
}
.platform-table--full :is(tbody, tfoot) tr > :last-child {
  border-radius: 0 var(--platform-radius) var(--platform-radius) 0;
}

/* Refined live previews: photographic profiles and a separate notification layer. */
.haus-scene { padding: 26px 20px 22px; background: radial-gradient(ellipse at 85% 10%, #f9f4fc, transparent 60%), #eee5f5; }
.haus-scene__window { border-color: rgba(95, 73, 112, .16); box-shadow: 0 2px 4px rgba(52, 36, 65, .025), 0 18px 32px -22px rgba(52, 36, 65, .25); }
.haus-scene__bar { background: #fffdfb; padding: 16px 20px; }
.haus-scene__bar > img { width: 62px; height: 24px; filter: none; opacity: 1; }
.haus-scene__bar .haus-live { display: inline-flex; align-items: center; gap: 7px; font-size: .6875rem; color: #426450; }
.haus-scene__bar .haus-live i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #638b6c; box-shadow: 0 0 0 3px #e9f0e9; }
.haus-scene__body { padding: 22px 20px 28px; }
.haus-scene__heading { padding-bottom: 20px; }
.haus-scene__heading > span { color: #726c76; }
.haus-platform .haus-avatar { display: block; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; object-fit: cover; background: #eee5f5; border: 2px solid #fffdf9; }
.haus-chat__person { gap: 11px; border-bottom: 1px solid var(--hairline); margin-bottom: 18px; padding-bottom: 16px; }
.haus-chat__person small { color: #756e79; }
.haus-bubble { padding: 14px 16px; max-width: 91%; font-size: .8125rem; line-height: 1.6; }
.haus-bubble--incoming { background: #f2efe9; }
.haus-bubble--reply { background: #e8d9f3; border: 1px solid #dbc8e9; }
.haus-bubble .haus-message-by { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 10px; color: #665c6e; font-size: .5625rem; }
.haus-message-avatar { display: block; width: 18px; height: 18px; flex: 0 0 18px; object-fit: cover; border-radius: 50%; }
.haus-typing { margin-bottom: 0; }
.haus-typing i { border-radius: 50%; }
.haus-host { display: flex; align-items: center; gap: 10px; margin: -2px 0 18px; }
.haus-host strong { display: block; font-size: .8125rem; font-weight: 600; }
.haus-host small { display: block; font-size: .625rem; color: #756e79; margin-top: 3px; }
.haus-host > span { margin-left: auto; font-size: .625rem; color: #756e79; }
.haus-calendar__month { align-items: center; background: #f6f1f9; }
.haus-calendar__arrows { display: flex; gap: 10px; }
.haus-calendar__arrows svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.haus-calendar__dates .haus-calendar__selected { box-shadow: inset 0 0 0 1px rgba(95, 73, 112, .12); }
.haus-slots__chosen { border-color: #b499c8 !important; font-weight: 600; }
.haus-booked { border-top: 1px solid var(--hairline); padding-top: 14px; margin-top: 18px; }
.haus-care-event { background: #fcfaf7; }
.haus-care-event > .haus-avatar { margin-left: auto; width: 30px; height: 30px; flex-basis: 30px; }
.haus-email__meta .haus-avatar-stack { display: flex; min-width: 0; margin-left: auto; padding-left: 5px; }
.haus-avatar-stack .haus-avatar { width: 23px; height: 23px; flex-basis: 23px; margin-left: -6px; }
.haus-email__letter { border-top: 3px solid var(--lilac); padding: 20px; }
.haus-scene__notice { position: relative; inset: auto; display: block; margin: 14px -4px 0 20px; padding: 16px 18px; background: #fffdf9; border: 1px solid #dfd4e6; box-shadow: 0 3px 6px -4px rgba(52,36,65,.12), 0 16px 24px -20px rgba(52,36,65,.28); }
.haus-notice__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 13px; }
.haus-scene__notice .haus-notice__top span { margin: 0; font-size: .5625rem; color: #756e79; }
.haus-notice__top > span:first-child { letter-spacing: .06em; }
.haus-notice__main { display: flex; align-items: center; gap: 12px; }
.haus-scene__notice .haus-notice__icon { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; margin: 0; border-radius: 50%; background: #eaf0e6; color: #47654e; }
.haus-notice__main > div { min-width: 0; }
.haus-scene__notice strong { font-size: .875rem; line-height: 1.4; }
.haus-notice__main p { font-size: .6875rem; line-height: 1.5; color: #756e79; margin: 4px 0 0; }
.haus-notice__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid #eee7f2; padding-top: 12px; margin-top: 14px; }
.haus-scene__notice .haus-notice__person { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: .625rem; }
.haus-notice__person .haus-avatar { width: 24px; height: 24px; flex-basis: 24px; border-width: 1px; }
.haus-scene__notice .haus-notice__status { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: .5625rem; color: #665073; }
.haus-notice__status svg { width: 12px; height: 12px; flex-basis: 12px; }
@keyframes haus-notice { 0%, 44% { opacity: 0; transform: translateY(14px) scale(.98); } 56%, 92% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(0) scale(1); } }
@media (max-width: 1000px) and (min-width: 761px) {
  .haus-scene { padding: 18px 12px; }
  .haus-scene__body { padding: 18px 14px 22px; }
  .haus-scene__notice { margin-left: 10px; padding: 14px; }
}
@media (max-width: 480px) {
  .haus-scene { padding: 16px 10px; }
  .haus-scene__body { padding: 18px 12px 22px; }
  .haus-scene__bar { padding: 14px; }
  .haus-scene__notice { margin: 12px 0 0 8px; padding: 14px 12px; }
  .haus-notice__main { gap: 9px; }
  .haus-notice__main strong { font-size: .8125rem; }
  .haus-bubble { padding: 12px; max-width: 94%; }
  .haus-email__meta .haus-avatar-stack { display: none; }
}

/* Toasts float over the app instead of reserving an empty block underneath. */
.haus-scene { min-height: 0; padding-bottom: 42px; }
.haus-scene__body { min-height: 0; }
.haus-scene .haus-scene__notice {
  position: absolute; z-index: 2; inset: auto 10px 12px auto;
  width: calc(100% - 48px); max-width: 340px; margin: 0; padding: 14px 16px;
  background: rgba(255, 253, 249, .97);
  box-shadow: 0 4px 10px -5px rgba(52,36,65,.15), 0 18px 35px -15px rgba(52,36,65,.25);
}
.haus-notice__top { margin-bottom: 10px; }
.haus-notice__main p { display: none; }
.haus-notice__bottom { padding-top: 9px; margin-top: 10px; }
.haus-scene .haus-beat--one,
.haus-scene .haus-beat--two,
.haus-scene .haus-scene__notice,
.haus-scene .haus-typing,
.haus-scene .haus-slots__chosen { animation-duration: 4.8s; animation-iteration-count: 1; animation-fill-mode: both; }
@keyframes haus-message-first { 0% { opacity: 0; transform: translateY(8px); } 10%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes haus-message-second { 0%, 16% { opacity: 0; transform: translateY(8px); } 34%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes haus-notice { 0%, 65% { opacity: 0; transform: translateX(18px) translateY(6px) scale(.98); } 84%, 100% { opacity: 1; transform: translate(0) scale(1); } }
@keyframes haus-typing { 0%, 8%, 30%, 100% { opacity: 0; } 12%, 18%, 24% { opacity: 1; } 15%, 21%, 27% { opacity: .3; } }
@keyframes haus-slot { 0%, 12% { background: transparent; } 28%, 100% { background: var(--lilac); } }
@media (max-width: 480px) {
  .haus-scene .haus-scene__notice { right: 6px; width: calc(100% - 24px); padding: 12px; }
}

/* Frame Melissa's supplied portrait at avatar size without altering the source photo. */
.haus-platform .haus-owner-avatar {
  display: block; border-radius: 50%;
  background-image: url("/img/mockups/melissa.jpg");
  background-repeat: no-repeat; background-size: 260% auto; background-position: 43% 25%;
}
.haus-email__meta.haus-email__sender { gap: 8px; }
.haus-email__sender > .haus-owner-avatar { min-width: 18px; }

/* Profile photos are circular at every size, including message and notification avatars. */
.haus-platform .haus-scene :is(.haus-avatar, .haus-message-avatar, .haus-owner-avatar) {
  border-radius: 50%; overflow: hidden; aspect-ratio: 1; object-fit: cover;
}

/* The comparison is a separate cream section with its own heading and spacing. */
.haus-tools { --platform-radius: 4px; background: var(--cream); }
.haus-tools .platform-replaces { margin-top: 0; }
.haus-tools h2 { isolation: isolate; }
.haus-tools .accent::before { border-radius: var(--platform-radius); }

/* Keep the original photo-and-cream-fade hero; frame Melissa on the right. */
.page-home .hero--photo .hero__media img { object-position: 72% 38%; }

/* Email preview: an ordinary message from Melissa, in the product's body type. */
.haus-scene--connect .haus-email__letter { margin-top: 0; padding: 20px 0 4px; background: transparent; border: 0; }
.haus-scene--connect .haus-email__letter p { margin: 0 0 14px; font-family: var(--font-body); font-size: .8125rem; line-height: 1.65; }
.haus-scene--connect .haus-email__letter .haus-email__link { color: #6c527f; text-decoration: underline; text-underline-offset: 3px; }
.haus-scene--connect .haus-email__send { border-top: 1px solid var(--hairline); padding-top: 12px; }

/* The Build: only headers in The Seasons; the standout lines under them in Visby */
.display-line.voice-line { font-family: var(--font-body); font-weight: 600; font-size: clamp(1.1875rem, 1.05rem + 0.55vw, 1.4375rem); line-height: 1.4; letter-spacing: -0.005em; }

/* Connect scene: the newsletter reads as a real email body, not a tinted card */

/* Comparison table: peach circle ticks in the Haus column; tool names on hover */
.platform-included { width: 28px; height: 28px; }
.platform-included svg { width: 24px; height: 24px; }
.tool-strip { position: relative; display: block; width: 100%; max-width: 270px; }
.tool-strip__logo { position: absolute; top: 7%; height: 86%; width: 17.4%; left: calc(11.6% + var(--i) * 24.3% - 8.7%); border-radius: 50%; cursor: default; transition: box-shadow 180ms var(--ease-std); }
.tool-strip__logo::after { content: attr(data-name); position: absolute; z-index: 6; left: 50%; bottom: calc(100% + 8px); translate: -50% 4px; white-space: nowrap; padding: 6px 10px; border-radius: var(--r); background: #fff; color: var(--black); font-family: var(--font-body); font-size: 0.75rem; font-weight: 500; line-height: 1.2; box-shadow: 0 0 0 1px var(--hairline), 0 10px 20px -10px rgba(17, 18, 13, 0.3); opacity: 0; pointer-events: none; transition: opacity 180ms var(--ease-std), translate 180ms var(--ease-std); }
.tool-strip__logo:hover { box-shadow: none; }
.tool-strip__logo:hover::after { opacity: 1; translate: -50% 0; }
@media (prefers-reduced-motion: reduce) { .tool-strip__logo::after { transition: none; translate: -50% 0; } }
/* Connect scene, compact: portrait beside the note instead of a banner above it; tighter header rows */
.haus-scene--connect .haus-email__meta { padding: 6px 0; }
.haus-scene--connect .haus-email__send { display: none; }
.haus-scene--connect .haus-scene__heading { margin-bottom: 4px; padding-bottom: 6px; }
.platform-panel:has(.haus-scene--connect) { padding-block: clamp(24px, 3vw, 40px); }
/* Connect: a compact "sent" notice that tucks under the email's lower edge instead of covering the note */
.haus-scene--connect { padding-bottom: 64px; }
.haus-scene--connect .haus-notice__bottom { display: none; }
.haus-scene--connect .haus-notice__top { margin-bottom: 6px; }
.haus-scene.haus-scene--connect .haus-scene__notice { bottom: 10px; padding: 10px 14px; max-width: 300px; }

/* ---------- About hero: the name, huge, with Melissa between the lines ---------- */
.about-hero { position: relative; padding: 0; background: var(--cream); }
.about-hero__stage { position: relative; overflow: hidden; height: min(calc(100vh - var(--header-h)), 860px); min-height: 520px;
  background: linear-gradient(180deg, #e9dcef 0%, #dccaea 55%, #cfb6e2 100%); }
.about-hero__name { position: absolute; left: 0; right: 0; top: 13%; margin: 0; display: grid; justify-items: center; pointer-events: none;
  font-family: var(--font-display); font-weight: 400; font-size: clamp(4rem, 15vw, 14rem); line-height: 0.88; letter-spacing: 0.015em; text-transform: uppercase; color: #fff; }
.about-hero__name span { display: block; }
.about-hero__name--back { z-index: 1; text-shadow: 0 2px 30px rgba(94, 64, 120, 0.12); }
.about-hero__name--front { z-index: 3; }
.about-hero__name--front span:first-child { visibility: hidden; }
.about-hero__me { position: absolute; z-index: 2; bottom: 0; left: 50%; translate: -50% 0; height: 92%; width: auto; max-width: none; filter: drop-shadow(0 24px 30px rgba(74, 48, 96, 0.18)); }
.about-hero__down { position: absolute; z-index: 4; left: 50%; bottom: 22px; translate: -50% 0; display: grid; place-items: center; width: 46px; height: 76px; border: 1.5px solid #fff; border-radius: var(--r-pill); color: #fff; transition: background-color 200ms var(--ease-std), translate 200ms var(--ease-std); }
.about-hero__down svg { width: 16px; height: 34px; }
.about-hero__down:hover { background: rgba(255, 255, 255, 0.18); translate: -50% 3px; }
.about-hero__down:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.about-hero__copy { padding-block: clamp(56px, 7vw, 96px) clamp(24px, 3vw, 40px); text-align: center; }
.about-hero__copy .hero__title { margin-inline: auto; max-width: 18ch; }
.about-hero__copy .lead { margin: 20px auto 0; max-width: 36rem; }
@media (max-width: 700px) {
  .about-hero__stage { height: min(calc(100svh - var(--header-h)), 640px); min-height: 480px; }
  .about-hero__name { top: 16%; font-size: 21vw; }
  .about-hero__me { height: 84%; }
}
.about-hero__name { top: 27%; }
.about-hero__me { translate: -57% 0; }
@media (max-width: 700px) { .about-hero__name { top: 33%; } .about-hero__me { translate: -55% 0; } }
@media (max-width: 700px) { .about-hero__name { top: 40%; } }

/* ---------- Logo strip: businesses Melissa has built for ---------- */
.served { padding: clamp(36px, 5vw, 56px) 0; border-block: 1px solid var(--hairline); background: var(--cream); }
.served__label { margin: 0 0 22px; text-align: center; font-family: var(--font-body); font-size: 0.875rem; font-weight: 500; color: var(--ink); }
.served__viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.served__track { display: flex; width: max-content; animation: served-scroll 46s linear infinite; }
.served:hover .served__track { animation-play-state: paused; }
.served__group { display: flex; align-items: center; flex: none; }
.served__mark { flex: none; padding-inline: clamp(28px, 4vw, 52px); color: var(--black); opacity: 0.72; white-space: nowrap; line-height: 1; transition: opacity 200ms var(--ease-std); }
.served__mark:hover { opacity: 1; }
.served__dot { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--apricot); }
/* each name set like its own wordmark */
.served__mark--untapped { font-family: var(--font-body); font-weight: 700; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); letter-spacing: -0.03em; }
.served__mark--kind { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem); }
.served__mark--soul { font-family: var(--font-display); font-weight: 400; font-size: clamp(1rem, 0.85rem + 0.6vw, 1.3125rem); letter-spacing: 0.22em; text-transform: uppercase; }
.served__mark--anna { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem); letter-spacing: 0.01em; }
@keyframes served-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .served__track { animation: none; width: auto; justify-content: center; flex-wrap: wrap; }
  .served__group[aria-hidden="true"] { display: none; }
  .served__viewport { -webkit-mask-image: none; mask-image: none; }
}
/* Logo strip: a full lilac band with soft shadows at its top and bottom edges */
.served { position: relative; border-block: 0; background: var(--lilac); box-shadow: inset 0 10px 16px -12px rgba(74, 48, 96, 0.28), inset 0 -10px 16px -12px rgba(74, 48, 96, 0.28); }
.served__label, .served__mark { color: var(--black); }
.served__mark { opacity: 0.82; }
.served__dot { visibility: hidden; }
/* Real client logos, all in one dark tone so the strip stays calm */
.served__logo { flex: none; display: block; width: auto; height: var(--h, 48px); margin-inline: clamp(28px, 4vw, 52px); filter: brightness(0); opacity: 0.74; transition: opacity 200ms var(--ease-std); }
.served__logo:hover { opacity: 1; }
.served__logo--untapped { --h: 28px; }
.served__logo--kind { --h: 64px; }
.served__logo--soul { --h: 60px; }
.served__logo--anna { --h: 50px; }
@media (max-width: 700px) { .served__logo { height: calc(var(--h) * 0.8); } }
.served__logo--soul { --h: 74px; }
.served__logo--anna { --h: 76px; }
.served__logo--kind { --h: 62px; }
/* Hover a client logo to see it in its own colours */
.served__logo { transition: filter 300ms var(--ease-std), opacity 300ms var(--ease-std); }
.served__logo:hover { filter: none; opacity: 1; }
.served__logo--kind:hover { filter: drop-shadow(0 1px 2px rgba(74, 48, 96, 0.35)); }
/* About hero entrance: the name rises in line by line, then Melissa, then the scroll arrow */
@keyframes ah-rise { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
@keyframes ah-me { from { opacity: 0; transform: translateY(56px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes ah-fade { from { opacity: 0; } to { opacity: 1; } }
.about-hero__name span { animation: ah-rise 1000ms cubic-bezier(0.22, 0.61, 0.36, 1) 100ms backwards; }
.about-hero__name span:nth-child(2) { animation-delay: 260ms; }
.about-hero__me { transform-origin: 50% 100%; animation: ah-me 1300ms cubic-bezier(0.22, 0.61, 0.36, 1) 450ms backwards; }
.about-hero__down { animation: ah-fade 700ms ease 1500ms backwards; }
@media (prefers-reduced-motion: reduce) { .about-hero__name span, .about-hero__me, .about-hero__down { animation: none; } }
@keyframes ah-me { 0% { opacity: 0; transform: translateY(56px) scale(0.985); } 30% { opacity: 1; } 100% { opacity: 1; transform: none; } }
/* Melissa sits exactly on the I of her name, so M-E-L and S-S-A stay readable either side */
.about-hero__name .ah-i { display: inline-block; font-style: normal; margin-inline: 0.36em; }
.about-hero__me { left: var(--i-x, 51.8%); translate: -73.5% 0; }
@media (max-width: 700px) {
  .about-hero__name { font-size: 17.5vw; }
  .about-hero__name .ah-i { margin-inline: 0.42em; }
  .about-hero__me { height: 74%; translate: -73.5% 0; }
}
/* Tighter gap: MEL and SSA sit close to her (left side pulled in more, where her hair leaves more room) */
.about-hero__name .ah-i { margin-inline: 0.12em 0.26em; }
@media (max-width: 700px) { .about-hero__name .ah-i { margin-inline: 0.3em 0.4em; } }

/* ---------- About, premium pass 2 ---------- */
/* Lines under headers in Visby (headers only in The Seasons) */
.voice-line { font-family: var(--font-body); font-weight: 600; font-size: clamp(1.1875rem, 1.05rem + 0.55vw, 1.4375rem); line-height: 1.4; letter-spacing: -0.005em; color: var(--black); }

/* Intro: photo left, copy right */
.about-intro { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; padding-block: clamp(64px, 8vw, 112px); }
@media (min-width: 900px) { .about-intro { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.about-intro__photo { margin: 0; }
.about-intro__photo img, .about-why__photo img, .years__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); }
.about-intro__photo img { max-width: 460px; object-position: 50% 30%; }
.about-intro__copy { text-align: left; }
.about-intro__copy .hero__title { margin: 0; max-width: 16ch; }
.about-intro__copy .lead { margin: 22px 0 0; max-width: 34rem; }

/* Why I do this: copy left, photo right; a soft shadow at the top divides it from the intro */
.about-why { position: relative; z-index: 1; box-shadow: 0 -16px 28px -24px rgba(74, 48, 96, 0.28); }
.about-why__grid { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 900px) { .about-why__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.about-why__photo { margin: 0; }
.about-why__photo img { max-width: 460px; margin-left: auto; object-position: 50% 25%; }
.about-why .story__head { display: grid; gap: 16px; margin-bottom: clamp(24px, 3vw, 36px); }
.about-why .story__head .h2 { margin: 0; text-align: left; }
.about-why .story__list { gap: 18px; }
.about-why .story__beat { grid-template-columns: 8px minmax(0, 1fr); gap: 16px; }
.about-why .story__beat::before { display: none; }
.story__dot { width: 7px; height: 7px; margin-top: 11px; border-radius: 50%; background: var(--apricot); }
.about-why .story__beat p { padding-top: 0; }
.about-why .story__close { margin-top: 28px; padding-left: 0; }

/* Three things: simple cards, like the Home stones */
.arch { min-height: 0; padding: clamp(28px, 3vw, 40px); text-align: left; border-top: 0; box-shadow: none; background: var(--surface); border-radius: var(--r); transition: none; }
.arch:hover { transform: none; box-shadow: none; }
.arch__title { font-weight: 300; font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); line-height: 1.1; }
.arch__title em, .arch--woman .arch__title em { font-style: italic; font-weight: 700; margin-left: 0.1em; color: var(--apricot); }

/* 20 years: a photo on the right */
.years__photo { margin: 0; }
.years__photo img { max-width: 460px; margin-left: auto; object-position: 50% 30%; }
@media (min-width: 900px) { .years .years__photo { order: 2; } }

/* How we work together: numbers only */
.together--path .together__card { padding-top: clamp(28px, 3vw, 36px); }
.together--path .together__num { position: static; display: block; margin-bottom: 14px; font-size: 2.5rem; }

/* Testimonial cards everywhere: a subtle lift on hover */
.testi__card { transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-std); }
.testi__card:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -30px rgba(52, 36, 65, 0.4); }
@media (prefers-reduced-motion: reduce) { .testi__card:hover { transform: none; } }
/* Testimonial cards: the same hover as the "How we work together" cards; the row leaves room so the lift and shadow aren't clipped */
.testi { padding-top: 10px; padding-bottom: 48px; margin-top: calc(clamp(32px, 5vw, 48px) - 10px); margin-bottom: -42px; }
.testi__card { transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-std); }
.testi__card:hover { transform: translateY(-6px); box-shadow: 0 28px 50px -30px rgba(17, 18, 13, 0.35); }
/* Standing photo: centred on the I, with the gap sized to her */
.about-hero__me { translate: -50.7% 0; height: 94%; }
.about-hero__name .ah-i { margin-inline: 0.3em; }
@media (max-width: 700px) {
  .about-hero__name { font-size: 16vw; top: 34%; }
  .about-hero__name .ah-i { margin-inline: 0.62em; }
  .about-hero__me { height: 80%; translate: -50.7% 0; }
}
/* Scroll arrow moves to the bottom-right corner so it never covers her feet */
.about-hero__down { left: auto; right: clamp(16px, 6vw, 96px); translate: none; }
.about-hero__down:hover { translate: 0 3px; }
/* MEL and SSA tuck right in against her */
.about-hero__name .ah-i { margin-inline: 0.1em; }
@media (max-width: 700px) { .about-hero__name .ah-i { margin-inline: 0.4em; } }
/* Scroll button back in the centre, a little smaller */
.about-hero__down { left: 50%; right: auto; translate: -50% 0; width: 36px; height: 58px; bottom: 18px; }
.about-hero__down svg { width: 13px; height: 26px; }
.about-hero__down:hover { translate: -50% 3px; }

/* Soft depth for editorial photographs across the site. */
.photo--real,
.lunch-shot__img,
.who-photo img,
.why__photo img,
.about-intro__photo img,
.about-why__photo img,
.years__photo img {
  box-shadow: 0 4px 10px -4px rgba(17, 18, 13, 0.10),
              0 18px 36px -18px rgba(17, 18, 13, 0.22);
}

/* What we talk about: the peach words in regular weight, not bold */
.venn-row__title em { font-weight: 400; }
/* Haus Platform intro: the same highlight as the other blush sections, and the pill eyebrow */
.platform-intro { --wash: var(--apricot); --accent-ink: var(--black); }
.platform-intro .eyebrow { display: inline-block; margin: 0 0 22px; padding: 8px 16px; border: 1px solid rgba(17, 18, 13, 0.3); border-radius: var(--r-pill); }


/* Haus Platform scenes: loop gently. Messages arrive in turn, the "sent" notice slides in,
   everything holds, then fades out together and the scene starts again (10s cycle). */
.haus-scene .haus-beat--one { animation: hl-first 10s ease infinite; }
.haus-scene .haus-beat--two { animation: hl-second 10s ease infinite; }
.haus-scene .haus-typing { animation: hl-typing 10s ease infinite; }
.haus-scene .haus-scene__notice { animation: hl-notice 10s ease infinite; }
.haus-scene .haus-slots__chosen { animation: hl-slot 10s ease infinite; }
@keyframes hl-first { 0%, 4% { opacity: 0; transform: translateY(8px); } 11%, 86% { opacity: 1; transform: none; } 93%, 100% { opacity: 0; transform: none; } }
@keyframes hl-second { 0%, 22% { opacity: 0; transform: translateY(8px); } 30%, 86% { opacity: 1; transform: none; } 93%, 100% { opacity: 0; transform: none; } }
@keyframes hl-typing { 0%, 10%, 22%, 100% { opacity: 0; } 13%, 17%, 21% { opacity: 1; } 15%, 19% { opacity: 0.3; } }
@keyframes hl-notice { 0%, 40% { opacity: 0; transform: translateX(18px) translateY(6px) scale(0.98); } 50%, 86% { opacity: 1; transform: none; } 93%, 100% { opacity: 0; transform: none; } }
@keyframes hl-slot { 0%, 14% { background: transparent; } 24%, 86% { background: var(--lilac); } 93%, 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) {
  .haus-scene .haus-beat--one, .haus-scene .haus-beat--two, .haus-scene .haus-scene__notice, .haus-scene .haus-slots__chosen { animation: none; opacity: 1; transform: none; }
  .haus-scene .haus-typing { animation: none; opacity: 0; }
}
/* Build hero: the cream fade starts a little further left */
@media (min-width: 960px) { .hero--flip .hero__media::after { background: linear-gradient(270deg, var(--cream) 0%, var(--cream) 24%, rgba(250, 247, 242, 0.82) 34%, rgba(250, 247, 242, 0) 52%); } }
@media (min-width: 960px) and (max-width: 1239px) { .hero--flip .hero__media::after { background: linear-gradient(270deg, var(--cream) 0%, var(--cream) 38%, rgba(250, 247, 242, 0.8) 47%, rgba(250, 247, 242, 0) 59%); } }
/* Home and Community heroes: the cream fade reaches a little further right */
@media (min-width: 960px) { .hero--photo:not(.hero--flip) .hero__media::after { background: linear-gradient(90deg, var(--cream) 0%, var(--cream) 24%, rgba(250, 247, 242, 0.82) 34%, rgba(250, 247, 242, 0) 52%); } }
@media (min-width: 960px) and (max-width: 1239px) { .hero--photo:not(.hero--flip) .hero__media::after { background: linear-gradient(90deg, var(--cream) 0%, var(--cream) 38%, rgba(250, 247, 242, 0.8) 47%, rgba(250, 247, 242, 0) 59%); } }

/* Connect scene (restored): a compact email body, portrait beside the note */
.haus-platform .haus-scene--connect .haus-email__letter { display: grid; grid-template-columns: 30% minmax(0, 1fr); margin-top: 12px; padding: 0; overflow: hidden; background: #fff; border: 1px solid var(--hairline); border-radius: var(--platform-radius, 4px); }
.haus-scene--connect .haus-email__hero { display: block; width: 100%; height: 100%; min-height: 100%; object-fit: cover; object-position: 50% 18%; }
.haus-scene--connect .haus-email__copy { padding: 14px 16px; }
.haus-scene--connect .haus-email__copy > span { display: block; font-family: var(--font-display); font-weight: 300; font-size: 1.1875rem; line-height: 1.15; color: var(--black); }
.haus-platform .haus-scene--connect .haus-email__copy p { margin: 6px 0 0; font-family: var(--font-body); font-size: .75rem; line-height: 1.5; color: var(--ink); }
.haus-scene--connect .haus-email__copy small { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: .6875rem; font-weight: 500; color: var(--black); }
.haus-scene--connect .haus-email__meta { padding: 6px 0; }
.haus-scene--connect .haus-scene__heading { margin-bottom: 4px; padding-bottom: 6px; }
.haus-scene--connect .haus-email__send { display: none; }

/* Connect tab, rebuilt: a one-place dashboard (clients, bookings, invoices and courses together) */
.haus-scene--hub .haus-scene__heading { margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--hairline); }
.haus-hub__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.haus-hub__tile { padding: 10px 10px 11px; background: #fff; border: 1px solid var(--hairline); border-radius: var(--platform-radius, 4px); }
.haus-hub__tile span { display: block; font-size: .5625rem; letter-spacing: .04em; color: #756e79; }
.haus-hub__tile strong { display: block; margin-top: 4px; font-size: .75rem; font-weight: 600; color: var(--black); }
.haus-hub__tile:nth-child(1) { box-shadow: inset 3px 0 0 var(--lilac); }
.haus-hub__tile:nth-child(2) { box-shadow: inset 3px 0 0 var(--apricot); }
.haus-hub__tile:nth-child(3) { box-shadow: inset 3px 0 0 #b8d4bd; }
.haus-hub__label { margin: 14px 0 6px; font-size: .625rem; font-weight: 600; letter-spacing: .04em; color: #756e79; }
.haus-hub__feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.haus-hub__feed li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #eee7f2; font-size: .6875rem; color: var(--ink); }
.haus-hub__feed li:first-child { border-top: 0; }
.haus-hub__feed b { font-weight: 600; color: var(--black); margin-right: 4px; }
.haus-hub__feed i { font-style: normal; font-size: .5625rem; color: #756e79; }
.haus-hub__feed .haus-avatar { width: 22px; height: 22px; flex-basis: 22px; border-width: 1px; }
.haus-hub__dot { justify-self: center; width: 8px; height: 8px; border-radius: 50%; background: #b8d4bd; }
.haus-hub__dot--lilac { background: var(--lilac); }
.haus-hub__dot--peach { background: var(--apricot); }
.haus-scene.haus-scene--hub .haus-scene__notice { bottom: 10px; padding: 10px 14px; max-width: 300px; }
/* The L of MELISSA sits in front of her hair so it reads clearly */
.about-hero__name .ah-l { font-weight: inherit; }
.about-hero__name--front .ah-l { visibility: visible; }
/* All three Home stones match: no leftover outline on the woman card */
.stone--woman { border-color: transparent; }
/* Logo strip headline in The Seasons */
.served__label { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem); line-height: 1.2; color: var(--black); margin-bottom: 26px; }

/* Venn, brand version (after "EH Venn Diagram.png"): grey outlines, a hand-drawn outer ring, a soft lilac ring,
   lilac dots where the circles meet the edge, "The" in lilac and the word in peach italic. Hover still fills each circle. */
.venn--brand { width: min(100%, 540px); }
.venn--brand svg { filter: none; overflow: visible; }
.venn--brand .vd-blob { fill: none; stroke: #8b8b8b; stroke-width: 11; stroke-linejoin: round; }
.venn--brand .vd-ring { fill: none; stroke: #d8c2ec; stroke-width: 11; opacity: 0.55; }
.venn--brand .venn__c circle { fill: #fff; stroke: none; mix-blend-mode: multiply; opacity: 1; transition: fill 300ms var(--ease-std); }
.venn--brand .venn__c--woman.is-on circle { fill: #f2eaf0; }
.venn--brand .venn__c--magic.is-on circle { fill: var(--lilac); }
.venn--brand .venn__c--machine.is-on circle { fill: var(--apricot); }
.venn--brand .vd-rims circle { fill: none; stroke: #8b8b8b; stroke-width: 11; pointer-events: none; }
.venn--brand .vd-dots circle { fill: #d8c2ec; }
.venn--brand .vd-labels { pointer-events: none; }
.venn--brand .vd-the, .venn--brand .vd-word { text-anchor: middle; font-family: var(--font-display); }
.venn--brand .vd-the { font-weight: 300; font-size: 118px; fill: #d8c2ec; }
.venn--brand .vd-word { font-style: italic; font-weight: 400; font-size: 132px; fill: var(--apricot); }
.venn--brand .vd-word { font-weight: 300; }
.venn--brand .venn__c--woman.is-on circle { fill: #f2eaf0; }
.venn--brand .venn__c--magic.is-on circle { fill: #ebdff5; }
.venn--brand .venn__c--machine.is-on circle { fill: #fbe4d5; }
/* Venn labels a little smaller so the circles breathe */
.venn--brand .vd-the { font-size: 96px; }
.venn--brand .vd-word { font-size: 108px; }


/* Mobile photo heroes: immersive image, centred copy and a readable tonal overlay. */
@media (max-width: 767px) {
  .sticky-cta { width: 100vw; max-width: 100%; right: auto; }
  .platform-table-wrap { position: relative; contain: inline-size layout paint; }
  .hero.hero--photo {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    min-height: calc(100svh - var(--header-h));
    padding: clamp(64px, 12svh, 108px) 24px 64px;
    row-gap: 0;
  }
  .hero--photo .hero__media {
    position: absolute;
    z-index: -1;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    animation: none;
  }
  .hero--photo .hero__media img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: 65% center;
  }
  .page-home .hero--photo .hero__media img { object-position: 68% center; }
  .page-build .hero--photo .hero__media img { object-position: 40% center; }
  .page-community .hero--photo .hero__media img { object-position: 53% center; }
  .hero--photo .hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(28, 22, 32, .30) 0%, rgba(28, 22, 32, .54) 32%, rgba(28, 22, 32, .58) 72%, rgba(28, 22, 32, .48) 100%);
  }
  .hero--photo .hero__copy {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-width: 440px;
    margin-inline: auto;
    align-items: center;
    gap: 24px;
    text-align: center;
  }
  .hero--photo .hero__title,
  .hero--photo .hero__title:not(.hero__title--long) {
    max-width: 14ch;
    margin-inline: auto;
    font-size: clamp(2.5rem, 10.5vw, 3.5rem);
    line-height: 1.04;
    color: #FAF7F2;
    text-wrap: balance;
  }
  .hero--photo .hero__title .hero__line { white-space: normal; }
  .hero--photo .hero__title--long { max-width: 15ch; }
  .hero--photo .eyebrow {
    max-width: 100%;
    padding: 7px 13px;
    border: 1px solid rgba(250, 247, 242, .45);
    border-radius: var(--r-pill);
    color: #FAF7F2;
    font-size: .6875rem;
    line-height: 1.5;
    letter-spacing: .1em;
    text-wrap: balance;
  }
  .hero--photo .lead {
    max-width: 34ch;
    color: #FAF7F2;
    font-size: 1.0625rem;
    line-height: 1.6;
    text-wrap: pretty;
  }
  .hero--photo .hero__cta { width: min(100%, 340px); }
  .hero--photo .hero__cta .btn { width: 100%; min-height: 54px; }
  .hero--photo .hero__facts { justify-content: center; gap: 8px 16px; color: #FAF7F2; font-size: .8125rem; }
}


/* Mobile navigation is a right-hand drawer, with no duplicate header or fixed-bottom CTA. */
.mobile-menu-overlay[hidden] { display: none; }
@media (max-width: 899px) {
  .site-header__actions > .btn { display: none; }
  .sticky-cta { display: none !important; }
  body.has-sticky { padding-bottom: 0; }
  .mobile-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(28, 22, 32, .38);
    opacity: 0;
    transition: opacity 240ms var(--ease-out);
  }
  .mobile-menu-overlay.is-open { opacity: 1; }
  .mobile-menu {
    position: fixed;
    z-index: 61;
    top: 0;
    left: auto;
    right: 0;
    bottom: auto;
    width: min(86vw, 360px);
    height: 100dvh;
    padding: calc(16px + env(safe-area-inset-top, 0px)) 26px calc(24px + env(safe-area-inset-bottom, 0px));
    border: 0;
    background: #FAF7F2;
    box-shadow: -14px 0 42px -24px rgba(17, 18, 13, .30);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(105%);
    transition: transform 260ms var(--ease-out);
  }
  .mobile-menu.is-open { transform: translateX(0); }
  .mobile-menu__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 40px; }
  .mobile-menu__title { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.2; }
  .mobile-menu__close { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--black); cursor: pointer; }
  .mobile-menu__close:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }
  .mobile-menu__list { width: 100%; margin: 0; }
  .mobile-menu__list a { min-height: 72px; font-size: 2rem; font-weight: 300; }
  .mobile-menu__list a[aria-current="page"] { color: #8c63af; }
}
.form__submission-error {
  padding: 14px 16px;
  margin: 16px 0;
  border-left: 3px solid #a34729;
  border-radius: 3px;
  background: #FAF7F2;
  color: #702e1b;
  font-size: 1rem;
  line-height: 1.5;
}
.form__submission-error[hidden] { display: none; }
.form[aria-busy="true"] button[type="submit"] { opacity: .7; cursor: wait; }