.hearth-home {
  --paper: #f6f5f0;
  --paper-deep: #eee9df;
  --ink: #292a2c;
  --muted: #6f6e66;
  --rule: #b7b6af;
  --accent: #a74f3b;
  --accent-dark: #823a2c;
  --cream: #f8f4ec;
  --sand: #eee4d5;
  --brown: #2c2824;
  --warm-rule: #b9aa96;
  --serif: "Tell Mel Newsreader", "Iowan Old Style", "Baskerville", "Times New Roman", serif;
  --sans: "Tell Mel Geist", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --mono: "Tell Mel Geist Mono", "SFMono-Regular", "Roboto Mono", "Courier New", monospace;
  --page-width: 1400px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body.hearth-home {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.hearth-home.is-menu-open {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

.page-shell {
  overflow: clip;
}

.home-notice {
  position: relative;
  z-index: 30;
  padding: 0.8rem 32px;
  border-bottom: 1px solid var(--ink);
  background: var(--paper-deep);
  color: var(--ink);
  font: 600 0.9rem/1.4 var(--sans);
  text-align: center;
}

.home-notice--error {
  background: var(--accent);
  color: var(--cream);
}

.container {
  width: min(calc(100% - 64px), var(--page-width));
  margin-inline: auto;
}

.eyebrow {
  margin: 0 0 22px;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  line-height: 1.4;
  text-transform: uppercase;
}

.display {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3.2rem, 5.5vw, 6rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.96;
}

.display__clause {
  display: block;
  text-wrap: balance;
}

.display__clause + .display__clause {
  margin-top: 0.14em;
}

.section-title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.65rem, 4.3vw, 5rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.02;
}

.section-copy {
  max-width: 58ch;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.3vw, 1.22rem);
  line-height: 1.65;
}

.button {
  position: relative;
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  padding: 0 27px;
  background: var(--accent);
  color: #fffaf5;
  cursor: pointer;
  font-size: 0.98rem;
  font-weight: 600;
  transition:
    background 280ms var(--ease),
    border-color 280ms var(--ease),
    color 280ms var(--ease),
    transform 280ms var(--ease);
}

.button:hover {
  background: var(--accent-dark);
  transform: translateY(-2px);
}

.button:active {
  transform: translateY(1px) scale(0.99);
}

.button--quiet {
  border-color: currentColor;
  background: transparent;
  color: var(--ink);
}

.button--quiet:hover {
  border-color: var(--accent);
  background: transparent;
  color: var(--accent);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
  color: var(--accent);
  font-weight: 600;
}

.text-link span {
  transition: transform 260ms var(--ease);
}

.text-link:hover span {
  transform: translateX(4px);
}

.site-header {
  position: sticky;
  z-index: 20;
  top: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 72%, transparent);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(18px);
}

.album .site-header {
  border-color: color-mix(in srgb, var(--warm-rule) 72%, transparent);
  background: color-mix(in srgb, var(--cream) 94%, transparent);
}

.site-header__inner {
  display: grid;
  min-height: 78px;
  align-items: center;
  grid-template-columns: auto 1fr auto;
  gap: 34px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.brand__word {
  font-size: 1.18rem;
  font-weight: 450;
  letter-spacing: 0.34em;
  line-height: 1;
}

.brand__mark {
  width: 22px;
  height: 25px;
  flex: 0 0 auto;
  overflow: visible;
  transform: translateY(-1px);
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(22px, 3vw, 44px);
}

.site-nav a:not(.button) {
  position: relative;
  padding: 9px 0;
  font-size: 0.94rem;
  font-weight: 520;
}

.site-nav a:not(.button)::after {
  position: absolute;
  right: 0;
  bottom: 4px;
  left: 0;
  height: 1px;
  background: var(--accent);
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 250ms var(--ease);
}

.site-nav a:not(.button):hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
  background: transparent;
}

.nav-toggle svg {
  width: 22px;
  height: 22px;
}

.hero {
  min-height: 700px;
}

.hero__grid {
  display: grid;
  min-height: 700px;
  grid-template-columns: minmax(430px, 0.84fr) minmax(0, 1.16fr);
}

.hero__copy {
  display: flex;
  align-items: center;
  padding: 96px clamp(44px, 7vw, 116px);
}

.hero__copy-inner {
  width: min(100%, 650px);
}

.hero__dek {
  max-width: 530px;
  margin: 30px 0 0;
  color: color-mix(in srgb, var(--ink) 86%, var(--paper));
  font-size: clamp(1.05rem, 1.4vw, 1.27rem);
  line-height: 1.58;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 34px;
}

.hero__image {
  min-height: 700px;
  overflow: hidden;
}

.hero__image picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}

.hero__image:hover img {
  transform: scale(1.018);
}

.hearth .hero__image img {
  object-position: center center;
}

.trust-strip {
  border-block: 1px solid var(--rule);
}

.trust-strip__grid {
  display: grid;
  min-height: 86px;
  align-items: center;
  grid-template-columns: repeat(3, 1fr);
}

.trust-item {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding-inline: 24px;
}

.trust-item + .trust-item {
  border-left: 1px solid var(--rule);
}

.trust-item svg {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  stroke: var(--accent);
}

.trust-item span {
  font-family: var(--serif);
  font-size: 1.05rem;
}

.languages {
  border-bottom: 1px solid var(--rule);
  padding: 90px 0;
}

.languages__grid {
  display: grid;
  align-items: center;
  gap: 60px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
}

.languages__copy .section-copy {
  max-width: 48ch;
}

.languages__list {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
}

.languages__list li {
  display: flex;
  position: relative;
  align-items: baseline;
  border-left: 2px solid var(--rule);
  background: var(--paper);
  gap: 12px;
  padding: 14px 18px;
  transition:
    border-color 260ms var(--ease),
    transform 260ms var(--ease);
}

.languages__list li:hover {
  border-left-color: var(--accent);
  transform: translateX(3px);
}

.language__greeting {
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1.2;
}

.language__name {
  margin-left: auto;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.how {
  padding: 72px 0 145px;
}

/* The steps lead the section and the header closes it. The hidden arm of
   home_definition_compare_v1 restores the original header-then-steps order so
   it stays a clean control for the two sections being tested, and nothing
   else. Ordering is done in CSS rather than by rendering the header twice;
   the section holds a single focusable element, so visual and focus order
   cannot disagree in a way a reader would notice. */
.how > .container {
  display: flex;
  flex-direction: column;
}

/* Negative, not 0: .steps declares no order and so defaults to 0, and equal
   order values fall back to DOM order, which would leave the header last. */
.how--header-first .how__header {
  order: -1;
  margin-top: 0;
  margin-bottom: 72px;
}

.how--header-first .steps {
  border-top: 1px solid var(--rule);
  border-bottom: 0;
}

.how__header {
  display: flex;
  order: 2;
  align-items: flex-end;
  justify-content: space-between;
  gap: 42px;
  margin-top: 72px;
}

.how__header .section-copy {
  max-width: 45ch;
  margin: 0 0 26px;
}

.how__header > :first-child {
  order: 2;
  margin-left: auto;
  text-align: right;
}

.how__header > :nth-child(2) {
  order: 1;
}

.steps {
  display: grid;
  border-bottom: 1px solid var(--rule);
  grid-template-columns: repeat(3, 1fr);
}

.step {
  min-height: 330px;
  padding: 40px clamp(30px, 4vw, 64px) 32px 0;
}

.step + .step {
  border-left: 1px solid var(--rule);
  padding-left: clamp(30px, 4vw, 64px);
}

.step__number {
  display: block;
  margin-bottom: 45px;
  color: var(--accent);
  font-family: var(--serif);
  font-size: 3.5rem;
  line-height: 1;
}

.step h3 {
  max-width: 10ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2rem, 2.5vw, 3.1rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.03;
}

.step p {
  max-width: 30ch;
  margin: 24px 0 0;
  color: var(--muted);
}

.product-reveal {
  border-block: 1px solid color-mix(in srgb, var(--rule) 80%, transparent);
  padding: 150px 0;
  background: var(--paper-deep);
}

.product-reveal__grid {
  display: grid;
  align-items: center;
  grid-template-columns: 0.7fr 1.3fr;
  gap: clamp(60px, 8vw, 132px);
}

.product-reveal__copy {
  align-self: center;
}

.product-reveal__copy .section-copy {
  margin-bottom: 34px;
}

.browser {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--rule) 72%, transparent);
  border-radius: 13px;
  background: var(--paper);
  box-shadow: 0 28px 65px -30px rgb(72 51 36 / 0.32);
}

.browser__bar {
  display: grid;
  min-height: 52px;
  align-items: center;
  border-bottom: 1px solid var(--rule);
  padding: 0 17px;
  grid-template-columns: 1fr auto 1fr;
}

.browser__dots {
  display: flex;
  gap: 7px;
}

.browser__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #bd5841;
}

.browser__dot:nth-child(2) {
  background: #ce9e4b;
}

.browser__dot:nth-child(3) {
  background: #6f9264;
}

.browser__address {
  min-width: 184px;
  border-radius: 5px;
  padding: 7px 20px;
  background: #e9e5dd;
  color: var(--muted);
  font-size: 0.7rem;
  text-align: center;
}

.hearth-demo {
  display: grid;
  min-height: 650px;
  grid-template-columns: 190px 1fr;
}

.hearth-demo__rail {
  border-right: 1px solid var(--rule);
  padding: 34px 20px;
}

.hearth-demo__rail-label {
  display: block;
  margin-bottom: 25px;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.chapter-button {
  display: grid;
  width: 100%;
  border: 0;
  border-top: 1px solid var(--rule);
  padding: 21px 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  gap: 4px;
  text-align: left;
  transition:
    color 240ms var(--ease),
    transform 240ms var(--ease);
}

.chapter-button:hover {
  color: var(--ink);
  transform: translateX(3px);
}

.chapter-button.is-active {
  color: var(--ink);
}

.chapter-button.is-active::before {
  width: 3px;
  height: 58px;
  margin: -12px 0 -54px -21px;
  background: var(--accent);
  content: "";
}

.chapter-button__number {
  color: var(--accent);
  font-family: var(--serif);
  font-size: 1.65rem;
  line-height: 1;
}

.chapter-button__title {
  font-family: var(--serif);
  font-size: 1rem;
}

.chapter-button__blurb {
  font-size: 0.68rem;
  line-height: 1.35;
}

.hearth-demo__story {
  padding: 42px clamp(28px, 4vw, 54px);
}

.demo-meta {
  margin: 0 0 14px;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.demo-title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.6rem, 4vw, 4.9rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1;
}

.demo-image {
  position: relative;
  height: 290px;
  margin-top: 28px;
  overflow: hidden;
  background: #d8c7b2;
}

.demo-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    opacity 250ms ease,
    transform 750ms var(--ease);
}

.demo-image:hover img {
  transform: scale(1.025);
}

.demo-caption {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.68rem;
  font-style: italic;
}

.demo-excerpt {
  margin: 24px 0 0;
  font-family: var(--serif);
  font-size: 1.03rem;
  line-height: 1.65;
}

.audio-player {
  display: block;
  min-height: 72px;
  border: 1px solid var(--rule);
  margin-top: 26px;
  padding: 12px 18px;
}

.audio-player audio {
  display: block;
  width: 100%;
  min-height: 44px;
  accent-color: var(--accent);
}

.audio-status {
  margin: 8px 0 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}

.audio-button {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  transition: transform 220ms var(--ease);
}

.audio-button:hover {
  transform: scale(1.06);
}

.audio-button svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.audio-track {
  position: relative;
  height: 3px;
  overflow: hidden;
  background: color-mix(in srgb, var(--rule) 60%, transparent);
}

.audio-progress {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--accent);
  transition: width 200ms linear;
}

.audio-time {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.65rem;
}

.buyer {
  padding: 150px 0;
}

.buyer__grid {
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  gap: clamp(55px, 8vw, 130px);
}

.buyer__media {
  position: relative;
}

.buyer__media picture {
  display: block;
}

.buyer__media::before {
  position: absolute;
  z-index: -1;
  width: 48%;
  height: 45%;
  right: -24px;
  bottom: -24px;
  background: var(--paper-deep);
  content: "";
}

.buyer__media img {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
}

.buyer__copy .section-copy {
  margin-bottom: 34px;
}

.buyer__points {
  display: grid;
  border-top: 1px solid var(--rule);
  margin: 38px 0 0;
}

.buyer-point {
  display: grid;
  align-items: start;
  border-bottom: 1px solid var(--rule);
  padding: 20px 0;
  grid-template-columns: 36px 1fr;
  gap: 15px;
}

.buyer-point svg {
  width: 25px;
  height: 25px;
  stroke: var(--accent);
}

.buyer-point strong {
  display: block;
  margin-bottom: 3px;
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 400;
}

.buyer-point span {
  color: var(--muted);
  font-size: 0.9rem;
}

.included {
  border-block: 1px solid var(--rule);
  padding: 135px 0;
  background: color-mix(in srgb, var(--paper-deep) 68%, var(--paper));
}

.included__header {
  display: grid;
  align-items: end;
  margin-bottom: 70px;
  grid-template-columns: 1fr 0.8fr;
  gap: 60px;
}

.included__header .section-copy {
  margin: 0;
}

.included__grid {
  display: grid;
  border-top: 1px solid var(--rule);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.included-item {
  display: grid;
  min-height: 180px;
  align-content: center;
  border-bottom: 1px solid var(--rule);
  padding: 34px 38px 34px 0;
  grid-template-columns: auto 1fr;
  gap: 26px;
}

.included-item:nth-child(even) {
  border-left: 1px solid var(--rule);
  padding-left: 38px;
}

.included-item__number {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.72rem;
}

.included-item h3 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 400;
}

.included-item p {
  max-width: 42ch;
  margin: 0;
  color: var(--muted);
}

.listen {
  border-top: 1px solid var(--rule);
  padding: 120px 0;
}

.listen__grid {
  display: grid;
  align-items: center;
  gap: 60px;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

.listen__copy .section-copy {
  max-width: 46ch;
}

.listen__facade {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--rule);
}

.samples {
  border-top: 1px solid var(--rule);
  padding: 120px 0 0;
}

.samples__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 42px;
  margin-bottom: 56px;
}

.samples__header .section-copy {
  max-width: 42ch;
  margin: 0;
}

.samples__grid {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}

.sample {
  min-width: 0;
}

.sample__link {
  display: grid;
  gap: 14px;
  color: inherit;
  text-decoration: none;
}

.sample__media {
  overflow: hidden;
  border: 1px solid var(--rule);
}

.sample__media img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
  transition: transform 420ms var(--ease);
}

.sample__link:hover .sample__media img {
  transform: scale(1.04);
}

.sample__meta {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.66rem;
  gap: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sample__title {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.25;
}

.sample__link:hover .sample__title {
  color: var(--accent);
}

.sample__excerpt {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.6;
}

.voices {
  border-top: 1px solid var(--rule);
  padding: 120px 0 0;
}

.voices__header {
  max-width: 780px;
  margin-bottom: 60px;
}

.voices__grid {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}

.voice {
  display: flex;
  min-width: 0;
  flex-direction: column;
  border: 1px solid var(--rule);
  margin: 0;
  padding: 0 0 34px;
  gap: 26px;
}

.voice__media {
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
}

.voice__media img {
  display: block;
  width: 100%;
  height: 230px;
  object-fit: cover;
}

.voice blockquote,
.voice figcaption {
  padding-inline: 34px;
}

.voice blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.22rem;
  line-height: 1.5;
}

.voice figcaption {
  display: grid;
  margin-top: auto;
  gap: 2px;
}

.voice figcaption strong {
  font-weight: 600;
}

.voice figcaption span {
  color: var(--muted);
  font-size: 0.9rem;
}

.pricing {
  padding: 150px 0;
}

.pricing__header {
  max-width: 850px;
  margin-bottom: 70px;
}

.pricing__plans {
  display: grid;
  border: 1px solid var(--rule);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.plan {
  display: grid;
  min-width: 0;
  min-height: 550px;
  align-content: start;
  padding: clamp(32px, 3.6vw, 56px);
}

.plan + .plan {
  border-left: 1px solid var(--rule);
}

.plan--featured {
  background: var(--ink);
  color: var(--paper);
}

.plan__label {
  margin: 0 0 36px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.plan__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 9px;
  margin: 0;
}

.plan__price strong {
  font-family: var(--serif);
  font-size: clamp(2.9rem, 4.2vw, 5rem);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 0.88;
}

.plan__price span {
  color: var(--muted);
}

.plan--featured .plan__price span,
.plan--featured .plan__description,
.plan--featured .plan__list {
  color: color-mix(in srgb, var(--paper) 72%, transparent);
}

.plan__description {
  max-width: 43ch;
  margin: 24px 0 0;
  color: var(--muted);
}

.plan__list {
  display: grid;
  margin: 36px 0;
  padding: 0;
  color: var(--muted);
  gap: 13px;
  list-style: none;
}

.plan__list li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
}

.plan__list svg {
  width: 18px;
  height: 18px;
  stroke: var(--accent);
}

.plan .button {
  justify-self: start;
  margin-top: auto;
}

.plan--featured .button {
  background: var(--paper);
  color: var(--ink);
}

.plan--featured .button:hover {
  background: #fff;
}

.pricing__note {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.faq {
  border-top: 1px solid var(--rule);
  padding: 140px 0;
}

.faq__grid {
  display: grid;
  grid-template-columns: 0.65fr 1.35fr;
  gap: clamp(60px, 9vw, 150px);
}

/* Twelve questions run far taller than the heading beside them, so the heading
   travels with the list instead of stranding an empty left column.
   Offset clears the sticky site header (min-height 78px). */
.faq__header {
  position: sticky;
  top: 118px;
  align-self: start;
}

.faq__items {
  border-top: 1px solid var(--rule);
}

.faq details {
  border-bottom: 1px solid var(--rule);
}

.faq summary {
  position: relative;
  padding: 25px 48px 25px 0;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 1.25rem;
  list-style: none;
}

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

.faq summary::before,
.faq summary::after {
  position: absolute;
  top: 34px;
  right: 5px;
  width: 17px;
  height: 1px;
  background: var(--accent);
  content: "";
  transition: transform 230ms var(--ease);
}

.faq summary::after {
  transform: rotate(90deg);
}

.faq details[open] summary::after {
  transform: rotate(0);
}

.faq details p {
  max-width: 65ch;
  margin: -4px 0 26px;
  padding-right: 42px;
  color: var(--muted);
}

/* No border-top: this sits directly under the trust strip, whose border-block
   already draws the rule. */
.definition {
  padding: 120px 0 64px;
}

.definition__grid {
  display: grid;
  align-items: start;
  gap: clamp(60px, 9vw, 150px);
  grid-template-columns: minmax(240px, 0.65fr) minmax(0, 1.35fr);
}

.definition__title {
  text-wrap: balance;
}

.definition__heading {
  grid-column: 1;
}

.definition__copy {
  grid-column: 2;
  grid-row: 1;
}

.definition__copy p {
  max-width: 62ch;
  margin: 0;
  font-size: clamp(1.02rem, 1.35vw, 1.25rem);
  line-height: 1.7;
}

@media (max-width: 900px) {
  .definition {
    padding: 80px 0 56px;
  }

  .definition__grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .definition__heading,
  .definition__copy {
    grid-column: auto;
    grid-row: auto;
  }

}

.comparison {
  border-top: 1px solid var(--rule);
  padding: 140px 0;
}

/* Horizontal scroll keeps the five columns readable on narrow screens
   instead of collapsing them into unreadable wrapped text. */
.comparison__scroll {
  margin-top: 56px;
  overflow-x: auto;
}

/* Fixed layout, so five columns of prose wrap inside the container instead of
   sizing to their content and pushing the table into a sideways scroll. */
.comparison__table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
  table-layout: fixed;
  text-align: left;
}

/* The label column stays flush with the container edge; every other cell is
   inset on both sides so no value touches the neighbouring column. */
.comparison__table th:first-child {
  width: 24%;
  padding-left: 0;
}

.comparison__caption {
  caption-side: bottom;
  margin-top: 22px;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: left;
}

/* Symmetric horizontal padding. With no left padding a value sat flush against
   the edge of Tell Mel's tinted column, so the two columns read as one block. */
.comparison__table th,
.comparison__table td {
  padding: 22px 24px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

.comparison__table thead th {
  border-bottom: 1px solid var(--ink);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* The row head is now the attribute rather than a brand, so it reads as a
   label: quieter than the values it introduces, and free to wrap.

   Sticky because below 720px the table still scrolls sideways, and a value
   like "Yes" or "10" means nothing once its label has scrolled out of view. */
.comparison__table tbody th {
  position: sticky;
  left: 0;
  padding-right: 28px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.45;
}

.comparison__table thead th:first-child {
  position: sticky;
  left: 0;
  background: var(--paper);
}

.comparison__table tbody td {
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.6;
}

/* Tell Mel's column carries the emphasis, so the eye can read straight down it
   without comparing four sentences. */
.comparison__table thead th.comparison__col--own {
  color: var(--accent);
}

.comparison__table tbody td.comparison__col--own {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  color: var(--ink);
  font-weight: 600;
}

@media (max-width: 900px) {
  .comparison {
    padding: 90px 0;
  }
}

/* Below 680px the container is ~347px on a phone, so a 760px table is a 2.2x
   sideways drag. Stack each service into its own block instead and promote the
   column heads to per-cell labels via data-label. */
@media (max-width: 680px) {
  .comparison__scroll {
    overflow-x: visible;
  }

  .comparison__table {
    min-width: 0;
  }

  .comparison__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .comparison__table tr {
    display: block;
    border-bottom: 1px solid var(--rule);
  }

  .comparison__table th,
  .comparison__table td {
    display: block;
    padding: 0 0 15px;
    border-bottom: 0;
  }

  /* Stacked, there is no sideways scroll to stick to. */
  .comparison__table tbody th {
    position: static;
    padding-top: 28px;
    padding-right: 0;
    font-family: var(--serif);
    font-size: 1.25rem;
    font-weight: 400;
  }

  /* Stacked, the tint would band the full width and read as a highlight on the
     label rather than on Tell Mel's answer. The bold value carries it instead. */
  .comparison__table td.comparison__col--own {
    background: none;
  }

  .comparison__table tbody td::before {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    content: attr(data-label);
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
}

.final-cta {
  padding: 150px 0;
  background: var(--ink);
  color: var(--paper);
}

.final-cta__grid {
  display: grid;
  align-items: end;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 70px;
}

.final-cta .section-title {
  max-width: 16ch;
}

.final-cta__aside {
  display: grid;
  justify-items: start;
  gap: 24px;
}

.final-cta__aside p {
  max-width: 46ch;
  margin: 0;
  color: color-mix(in srgb, var(--paper) 68%, transparent);
}

.final-cta .button {
  background: var(--accent);
}

.site-footer {
  padding: 45px 0;
  background: var(--ink);
  color: color-mix(in srgb, var(--paper) 65%, transparent);
}

.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
  padding-top: 34px;
  gap: 30px;
}

.site-footer .brand {
  color: var(--paper);
  transform: scale(0.9);
  transform-origin: left;
}

.site-footer__links {
  display: flex;
  gap: 28px;
  font-size: 0.85rem;
}

.reveal {
  opacity: 1;
  transform: none;
}

.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 760ms var(--ease),
    transform 760ms var(--ease);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 {
  transition-delay: 90ms;
}

.reveal-delay-2 {
  transition-delay: 180ms;
}

/* Family Album direction */
.album {
  --paper: #f8f4ec;
  --paper-deep: #eee4d5;
  --ink: #2c2824;
  --muted: #766a5d;
  --rule: #b9aa96;
  background: var(--paper);
}

.album .hero__grid {
  grid-template-columns: 1.08fr 0.92fr;
}

.album .hero__image {
  order: 1;
}

.album .hero__copy {
  order: 2;
  padding-inline: clamp(48px, 7.4vw, 130px);
}

.album .hero__image img {
  object-position: center 42%;
}

.album .hero .eyebrow {
  color: var(--accent);
}

.album .trust-strip,
.album .trust-item + .trust-item {
  border-color: var(--warm-rule);
}

.album .how__header {
  display: block;
  text-align: center;
}

.album .how__header .section-copy {
  margin: 24px auto 0;
}

.album .steps {
  border-bottom: 0;
}

.album .step {
  min-height: 290px;
  padding-top: 10px;
  text-align: center;
}

.album .step h3,
.album .step p {
  margin-inline: auto;
}

.album .step__number {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-bottom: 32px;
  background: #e9ddcf;
  color: var(--brown);
  font-size: 1.35rem;
}

.album .product-reveal__grid {
  display: block;
}

.album .product-reveal__copy {
  max-width: 920px;
  margin: 0 auto 70px;
  text-align: center;
}

.album .product-reveal__copy .section-copy {
  margin-inline: auto;
}

.album .browser {
  width: min(100%, 1160px);
  margin-inline: auto;
  background: var(--cream);
}

.album-demo {
  padding: 48px 42px 42px;
}

.album-demo__head {
  margin-bottom: 34px;
  text-align: center;
}

.album-demo__head p {
  margin: 0 0 6px;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.album-demo__head h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.8rem, 5vw, 5.5rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
}

.album-demo__audio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: var(--accent);
  font-size: 0.75rem;
}

.album-demo__audio svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
}

.album-stories {
  display: grid;
  grid-template-columns: 1.16fr 0.82fr 0.82fr;
  gap: 20px;
}

.album-story-card {
  cursor: pointer;
}

.album-story-card__image {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #d7c5af;
}

.album-story-card:first-child .album-story-card__image {
  aspect-ratio: 1.46;
}

.album-story-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 650ms var(--ease),
    filter 400ms var(--ease);
}

.album-story-card:hover img {
  filter: saturate(1.05);
  transform: scale(1.025);
}

.album-story-card__meta {
  margin: 14px 0 5px;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.67rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.album-story-card h4 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 400;
}

.album-story-card p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 0.83rem;
}

.album .buyer__grid {
  grid-template-columns: 0.86fr 1.14fr;
}

.album .buyer__media {
  order: 2;
}

.album .buyer__copy {
  order: 1;
}

.album .buyer__media::before {
  right: auto;
  left: -24px;
  background: var(--sand);
}

.album .included__grid {
  grid-template-columns: 0.86fr 1.14fr;
}

.album .final-cta {
  background: var(--brown);
}

/* Prototype picker */
.prototype-index {
  min-height: 100dvh;
  background: #f1ede5;
}

.prototype-index__shell {
  width: min(calc(100% - 48px), 1180px);
  margin-inline: auto;
  padding: clamp(70px, 10vw, 150px) 0;
}

.prototype-index h1 {
  max-width: 980px;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3.3rem, 7vw, 7.6rem);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.93;
}

.prototype-index__intro {
  max-width: 680px;
  margin: 34px 0 70px;
  color: var(--muted);
  font-size: 1.16rem;
}

.prototype-index__grid {
  display: grid;
  border: 1px solid var(--rule);
  grid-template-columns: 1fr 1fr;
}

.prototype-card {
  display: grid;
  min-height: 460px;
  align-content: start;
  padding: clamp(38px, 5vw, 72px);
  transition:
    background 350ms var(--ease),
    color 350ms var(--ease);
}

.prototype-card + .prototype-card {
  border-left: 1px solid var(--rule);
}

.prototype-card--hearth {
  background: var(--paper);
}

.prototype-card--album {
  background: var(--cream);
}

.prototype-card:hover {
  background: var(--ink);
  color: var(--paper);
}

.prototype-card__number {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.74rem;
}

.prototype-card__title {
  margin-top: 65px;
  font-family: var(--serif);
  font-size: clamp(3.5rem, 6vw, 6rem);
  letter-spacing: -0.04em;
  line-height: 1;
}

.prototype-card__description {
  max-width: 44ch;
  margin-top: 24px;
  color: var(--muted);
}

.prototype-card:hover .prototype-card__description {
  color: color-mix(in srgb, var(--paper) 70%, transparent);
}

.prototype-card__link {
  align-self: end;
  margin-top: 55px;
  color: var(--accent);
  font-weight: 600;
}

.prototype-index__note {
  margin: 25px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

@media (max-width: 1100px) {
  .container {
    width: min(calc(100% - 44px), var(--page-width));
  }

  .site-header__inner {
    gap: 22px;
  }

  .js .site-nav {
    gap: 20px;
  }

  .site-nav .button {
    min-height: 48px;
    padding-inline: 19px;
  }

  .hero,
  .hero__grid,
  .hero__image {
    min-height: 620px;
  }

  .hero__copy {
    padding-inline: 48px;
  }

  .product-reveal__grid {
    grid-template-columns: 0.8fr 1.2fr;
    gap: 55px;
  }

  .hearth-demo {
    grid-template-columns: 160px 1fr;
  }

  .buyer__grid,
  .album .buyer__grid {
    gap: 60px;
  }
}

@media (max-width: 900px) {
  .container {
    width: min(calc(100% - 36px), var(--page-width));
  }

  .site-header__inner {
    min-height: 70px;
    grid-template-columns: auto 1fr auto;
  }

  .site-nav {
    position: fixed;
    inset: 70px 0 auto;
    display: grid;
    visibility: hidden;
    align-content: start;
    padding: 34px 24px 40px;
    background: var(--paper);
    box-shadow: 0 28px 60px -35px rgb(0 0 0 / 0.3);
    gap: 12px;
    opacity: 0;
    transform: translateY(-12px);
    transition:
      opacity 240ms var(--ease),
      transform 240ms var(--ease),
      visibility 240ms;
  }

  .album .site-nav {
    background: var(--cream);
  }

  .js .site-nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }

  .site-nav a:not(.button) {
    border-bottom: 1px solid var(--rule);
    padding: 14px 0;
  }

  .site-nav .button {
    margin-top: 12px;
  }

  .js .nav-toggle {
    display: inline-flex;
  }

  html:not(.js) .site-header__inner {
    align-items: start;
    padding-block: 18px;
    grid-template-columns: 1fr;
  }

  html:not(.js) .site-nav {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .hero,
  .hero__grid,
  .hero__image {
    min-height: auto;
  }

  .hero__grid,
  .album .hero__grid {
    grid-template-columns: 1fr;
  }

  .hero__copy,
  .album .hero__copy {
    order: 1;
    padding: 80px 32px 70px;
  }

  .hero__image,
  .album .hero__image {
    min-height: 520px;
    order: 2;
  }

  .hearth .hero__image {
    min-height: 0;
    aspect-ratio: 3 / 2;
  }

  .how {
    padding-block: 95px;
  }

  .how__header,
  .included__header {
    display: block;
  }

  .how__header > :first-child {
    margin-left: 0;
    text-align: left;
  }

  .how__header .section-copy,
  .included__header .section-copy {
    margin-top: 24px;
  }

  .languages {
    padding: 64px 0;
  }

  .languages__grid,
  .listen__grid {
    gap: 34px;
    grid-template-columns: 1fr;
  }

  .listen,
  .samples,
  .voices {
    padding-top: 72px;
  }

  .listen {
    padding-bottom: 72px;
  }

  .samples__header {
    display: block;
  }

  .samples__header .section-copy {
    margin-top: 24px;
  }

  .steps {
    grid-template-columns: 1fr;
  }

  .step,
  .album .step {
    display: grid;
    min-height: 0;
    align-items: start;
    border-top: 1px solid var(--rule);
    padding: 28px 0;
    grid-template-columns: 75px minmax(0, 0.8fr) 1fr;
    gap: 18px;
    text-align: left;
  }

  .step + .step,
  .album .step + .step {
    border-left: 0;
    padding-left: 0;
  }

  .step__number,
  .album .step__number {
    margin: 0;
  }

  .album .step h3,
  .album .step p {
    margin: 0;
  }

  .step h3 {
    font-size: 2rem;
  }

  .step p {
    margin: 0;
  }

  .product-reveal {
    padding-block: 100px;
  }

  .product-reveal__grid {
    grid-template-columns: 1fr;
  }

  .product-reveal__copy {
    max-width: 700px;
  }

  .hearth-demo {
    grid-template-columns: 150px 1fr;
  }

  .buyer {
    padding-block: 100px;
  }

  .buyer__grid,
  .album .buyer__grid {
    grid-template-columns: 1fr;
  }

  .buyer__media,
  .album .buyer__media {
    order: 1;
  }

  .buyer__copy,
  .album .buyer__copy {
    order: 2;
  }

  .included,
  .pricing,
  .faq {
    padding-block: 100px;
  }

  .included__grid {
    grid-template-columns: 1fr;
  }

  .included-item:nth-child(even) {
    border-left: 0;
    padding-left: 0;
  }

  .faq__grid {
    grid-template-columns: 1fr;
  }

  .faq__header {
    position: static;
  }

  .final-cta__grid {
    grid-template-columns: 1fr;
  }

  .prototype-index__grid {
    grid-template-columns: 1fr;
  }

  .prototype-card + .prototype-card {
    border-top: 1px solid var(--rule);
    border-left: 0;
  }
}

@media (max-width: 680px) {
  .container {
    width: min(calc(100% - 28px), var(--page-width));
  }

  .brand {
    gap: 7px;
  }

  .brand__word {
    font-size: 0.92rem;
    letter-spacing: 0.25em;
  }

  .brand__mark {
    width: 16px;
    height: 18px;
  }

  .hero__copy,
  .album .hero__copy {
    padding: 65px 20px 58px;
  }

  .display {
    font-size: clamp(3rem, 12vw, 3.5rem);
  }

  .hero__actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .hero__image,
  .album .hero__image {
    min-height: 390px;
  }

  .trust-strip__grid {
    grid-template-columns: 1fr;
  }

  .trust-item {
    min-height: 70px;
    justify-content: flex-start;
  }

  .trust-item + .trust-item {
    border-top: 1px solid var(--rule);
    border-left: 0;
  }

  .how__header {
    margin-top: 45px;
  }

  .how--header-first .how__header {
    margin-top: 0;
    margin-bottom: 45px;
  }

  .step,
  .album .step {
    grid-template-columns: 54px 1fr;
  }

  .step p {
    grid-column: 2;
  }

  .step__number,
  .album .step__number {
    width: 38px;
    height: 38px;
    font-size: 1.25rem;
  }

  .product-reveal {
    padding-block: 80px;
  }

  .browser__address {
    min-width: 130px;
  }

  .hearth-demo {
    display: block;
  }

  .hearth-demo__rail {
    display: flex;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
    padding: 18px;
  }

  .hearth-demo__rail-label {
    display: none;
  }

  .chapter-button {
    min-width: 142px;
    border-top: 0;
    border-right: 1px solid var(--rule);
    padding: 10px 16px;
  }

  .chapter-button.is-active::before {
    display: none;
  }

  .hearth-demo__story {
    padding: 28px 20px;
  }

  .demo-title {
    font-size: 2.65rem;
  }

  .demo-image {
    height: 225px;
  }

  .album-demo {
    padding: 32px 20px 26px;
  }

  .album-stories {
    display: grid;
    overflow-x: auto;
    padding-bottom: 10px;
    grid-auto-columns: 78%;
    grid-template-columns: none;
    grid-auto-flow: column;
  }

  .album-story-card:first-child .album-story-card__image {
    aspect-ratio: 4 / 5;
  }

  .buyer__media::before {
    display: none;
  }

  .included__header {
    margin-bottom: 45px;
  }

  .included-item {
    padding-right: 0;
  }

  .pricing__plans {
    grid-template-columns: 1fr;
  }

  .plan {
    min-height: 500px;
    padding: 40px 28px;
  }

  .plan + .plan {
    border-top: 1px solid var(--rule);
    border-left: 0;
  }

  .final-cta {
    padding-block: 100px;
  }

  .site-footer__inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .site-footer__links {
    flex-wrap: wrap;
  }

  .prototype-index__shell {
    width: min(calc(100% - 28px), 1180px);
  }

  .prototype-card {
    min-height: 390px;
    padding: 34px 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}