/* Landing: narrative sections. Bands alternate paper / linen / gold / ink for rhythm and contrast. */
.hm-hero { position: relative; padding: 118px 0 0; overflow: clip; background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 13%, var(--surface)) 0%, var(--surface) 78%); }
.hm-glow { position: absolute; inset: -30% -15% auto auto; width: 80vw; max-width: 1000px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--gold) 34%, transparent), transparent 70%); animation: lp-breathe 14s ease-in-out infinite; pointer-events: none; }
.hm-hero-grid { position: relative; display: grid; grid-template-columns: .92fr 1.08fr; gap: 28px; align-items: center; min-height: 660px; }
.hm-h1 { position: relative; font-family: var(--font-serif, 'Fraunces', serif); font-weight: 400; font-size: clamp(3.2rem, 7.4vw, 6.2rem); line-height: .96; letter-spacing: -.04em; margin: 0 0 26px; }
.hm-h1 em { color: var(--gold-text); font-weight: 300; }
.hm-underline { position: absolute; left: 0; bottom: -14px; width: min(58%, 340px); height: 18px; overflow: visible; }
.hm-underline path { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s var(--ease-out, ease) 1.1s; }
.hm-h1.on .hm-underline path { stroke-dashoffset: 0; }
.hm-lead { font-size: 1.14rem; line-height: 1.7; color: var(--text-2); max-width: 33rem; margin: 0 0 28px; }
.hm-stage { position: relative; height: 640px; }
.hm-layer { position: absolute; height: auto; will-change: transform; filter: drop-shadow(0 0 0 transparent); transition: transform .5s var(--ease-out, ease); }
.hm-layer--browser { width: 108%; left: -6%; top: 30px; }
.hm-layer--card { width: 40%; right: -4%; top: -8px; transform: rotate(5deg); }
.hm-layer--phone { width: 34%; right: 8%; bottom: -70px; }
.hm-ticker { position: relative; margin-top: 54px; overflow: hidden; background: var(--surface-ink); color: var(--text-on-ink-2); border-block: 1px solid rgb(243 238 229 / .1); }
.hm-ticker-track { display: flex; gap: 48px; width: max-content; padding: 16px 24px; animation: hm-scroll 48s linear infinite; font: 500 .8rem var(--font-sans, 'Manrope'); letter-spacing: .14em; text-transform: uppercase; }
.hm-ticker-track span::before { content: '✦'; color: var(--gold-on-ink); margin-right: 48px; }
@keyframes hm-scroll { to { transform: translateX(-50%); } }

.hm-problem { background: var(--surface-ink); color: var(--text-on-ink); padding: 104px 0 96px; position: relative; overflow: clip; }
.hm-problem::before { content: ''; position: absolute; left: -10%; top: -30%; width: 60vw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--gold-on-ink) 14%, transparent), transparent 70%); }
.hm-big { position: relative; max-width: 17ch; font-family: var(--font-serif, 'Fraunces', serif); font-weight: 300; font-size: clamp(2.5rem, 6.4vw, 5.2rem); line-height: 1.02; letter-spacing: -.035em; margin: 0 0 56px; }
.hm-big .w { display: inline-block; margin-right: .24em; opacity: .16; transition: opacity .5s, color .5s; }
.hm-big .w.on { opacity: 1; }
.hm-questions { list-style: none; margin: 0 0 54px; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 56px; }
.hm-questions li { display: flex; align-items: baseline; gap: 22px; padding: 22px 0; border-top: 1px solid rgb(243 238 229 / .16); font-family: var(--font-serif, 'Fraunces', serif); font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1.15; }
.hm-questions b { color: var(--gold-on-ink); font: 600 .8rem var(--font-sans, 'Manrope'); letter-spacing: .1em; }
.hm-resolve { position: relative; margin: 0; font-family: var(--font-serif, 'Fraunces', serif); font-size: clamp(1.7rem, 3.4vw, 2.7rem); color: var(--text-on-ink); }
.hm-resolve em { color: var(--gold-on-ink); font-weight: 300; }

.hm-how { background: var(--surface-sunken); padding: 100px 0 110px; }
.hm-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 52px; align-items: start; }
.hm-step { display: flex; flex-direction: column; gap: 10px; }
.hm-step--lift { margin-top: 56px; }
.hm-num { font-family: var(--font-serif, 'Fraunces', serif); font-style: italic; font-size: 4.6rem; line-height: .8; color: var(--gold); }
.hm-step h3 { font-family: var(--font-serif, 'Fraunces', serif); font-weight: 400; font-size: 1.8rem; letter-spacing: -.02em; margin: 6px 0 0; }
.hm-step p { margin: 0 0 14px; color: var(--text-2); line-height: 1.65; min-height: 5.4em; }
.hm-step img { width: 100%; margin: 0; max-width: 100%; height: auto; display: block; }
.hm-step .hm-step-phone { width: 78%; margin: 0 auto; }

.hm-features { padding: 100px 0 40px; position: relative; background: radial-gradient(70% 40% at 12% 8%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 70%), var(--surface); }
.hm-feat-head { margin-bottom: 30px; }
.hm-feat-grid { display: grid; grid-template-columns: minmax(0, 460px) 1fr; gap: 76px; align-items: start; }
.hm-feat-stick { position: sticky; top: 70px; height: calc(100vh - 90px); display: grid; place-items: center; }
.hm-feat-stage { position: relative; width: min(100%, 420px); height: min(100%, 720px); margin: 0; }
.hm-feat-stage img { position: absolute; inset: 0; margin: auto; width: auto; max-width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: translateY(18px) scale(.97); transition: opacity .5s, transform .7s var(--ease-out, ease); }
.hm-feat-stage img.is-wide { width: 100%; height: auto; }
.hm-feat-stage img.is-active { opacity: 1; transform: none; }
.hm-chapters { list-style: none; margin: 0; padding: 0; }
.hm-chapter { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; max-width: 32rem; opacity: .3; transform: translateX(10px); transition: opacity .5s, transform .6s var(--ease-out, ease); }
.hm-chapter.is-active { opacity: 1; transform: none; }
.hm-chip { align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: color-mix(in srgb, var(--gold) 20%, transparent); color: var(--gold-text); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 16px; }
.hm-chapter h3, .hm-row h3 { font-family: var(--font-serif, 'Fraunces', serif); font-weight: 400; font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1.06; letter-spacing: -.025em; margin: 0 0 14px; }
.hm-chapter p, .hm-row p { margin: 0; font-size: 1.06rem; line-height: 1.7; color: var(--text-2); }

.hm-web { background: color-mix(in srgb, var(--gold) 15%, var(--surface-sunken)); padding: 100px 0 90px; overflow: clip; }
.hm-row { display: grid; grid-template-columns: .62fr 1.38fr; gap: 56px; align-items: center; margin-top: 70px; }
.hm-row--flip { grid-template-columns: 1.38fr .62fr; } .hm-row--flip .hm-row-copy { order: 2; }
.hm-row img { width: 108%; margin-inline: -4%; max-width: none; height: auto; display: block; transition: transform .8s var(--ease-out, ease); }
.hm-row:hover img { transform: translateY(-6px) scale(1.01); }

.hm-costs { padding: 100px 0 70px; background: var(--surface); }
.hm-costs-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: start; }
.hm-honest { display: flex; gap: 10px; padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--text-2); font-size: .9rem; line-height: 1.55; }
.hm-honest i { color: var(--gold-text); margin-top: 3px; }
.hm-ledger { padding: 34px 38px; border-radius: 28px; background: var(--surface-sunken); border: 1px solid var(--hairline); }
.hm-ledger dl { margin: 0; }
.hm-ledger dl > div { display: flex; align-items: baseline; gap: 12px; padding: 16px 0; border-bottom: 1px dashed var(--hairline-strong); }
.hm-ledger dt { color: var(--text-2); flex: 1; } .hm-ledger dd { margin: 0; font-family: var(--font-serif, 'Fraunces', serif); font-size: 1.35rem; text-align: right; }
.hm-ledger-sum, .hm-ledger-aurelia { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 22px 0 6px; flex-wrap: wrap; }
.hm-ledger-sum strong { font: 400 1.9rem var(--font-serif, 'Fraunces', serif); }
.hm-ledger-aurelia { margin-top: 10px; padding: 22px 24px; border-radius: 20px; background: var(--surface-ink); color: var(--text-on-ink); }
.hm-ledger-aurelia strong { font: 400 2.2rem var(--font-serif, 'Fraunces', serif); color: var(--gold-on-ink); } .hm-ledger-aurelia small { font: 500 .78rem var(--font-sans, 'Manrope'); color: var(--text-on-ink-2); }
.hm-ledger-note { margin: 10px 0 0; font-size: .8rem; line-height: 1.6; color: var(--text-3); }
.hm-sources { margin-top: 34px; border-top: 1px solid var(--hairline); padding-top: 16px; }
.hm-sources summary { cursor: pointer; font-weight: 700; color: var(--gold-text); }
.hm-sources p, .hm-sources li { color: var(--text-2); font-size: .88rem; line-height: 1.65; }

@media (max-width: 980px) {
  .hm-hero-grid, .hm-costs-grid { grid-template-columns: 1fr; }
  .hm-hero { padding-top: 104px; }
  .hm-stage { height: 480px; margin-bottom: 70px; }
  .hm-steps { grid-template-columns: 1fr; } .hm-step--lift { margin-top: 0; } .hm-step p { min-height: 0; }
  .hm-questions { grid-template-columns: 1fr; }
  .hm-feat-grid { grid-template-columns: 1fr; gap: 0; }
  .hm-feat-stick { top: 56px; height: 52vh; z-index: 4; background: linear-gradient(var(--surface) 88%, transparent); }
  .hm-chapter { min-height: 60vh; max-width: none; }
  .hm-row img { width: 100%; margin-inline: 0; max-width: 100%; }
  .hm-row, .hm-row--flip { grid-template-columns: 1fr; gap: 24px; } .hm-row--flip .hm-row-copy { order: 0; }
}
@media (max-width: 640px) {
  .hm-stage { height: 400px; } .hm-layer--card { width: 46%; }
  .hm-ledger { padding: 24px 20px; } .hm-ledger dd { font-size: 1.1rem; }
  .hm-problem, .hm-how, .hm-web, .hm-costs { padding-top: 70px; padding-bottom: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-ticker-track, .hm-glow { animation: none !important; }
  .hm-big .w { opacity: 1 !important; transition: none !important; }
  .hm-underline path { stroke-dashoffset: 0 !important; transition: none !important; }
  .hm-layer, .hm-feat-stage img, .hm-chapter { transition: none !important; }
  .hm-chapter { opacity: 1; transform: none; }
}