/* The storyboard answer is the page's single primary heading. */
.m-storyboard-document .h-answer-head h1 {
  margin: 0;
  max-width: 760px;
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -.045em;
}
.h-look-pair { position: relative; padding-bottom: 24px; }
.h-look-phone {
  position: absolute; right: 18px; bottom: 0; width: clamp(90px, 16%, 150px);
  overflow: hidden; border: 5px solid #38282b; border-radius: 22px;
  background: #fff; box-shadow: 0 12px 30px #38282b26;
}
.h-look-phone img { display: block; width: 100%; height: auto; }
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/instrument-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}

:root {
  color-scheme: light;
  --m-ink: #38282b;
  --m-ivory: #ffffff;
  --m-paper: #ffffff;
  --m-dark: #292124;
  --m-dark-ink: #f3ebe2;
  --m-muted: #796c6c;
  --m-dark-muted: #c1b1ae;
  --m-rose: #ce928b;
  --m-accent: #874353;
  --m-line: rgba(56, 40, 43, .19);
  --m-dark-line: rgba(243, 235, 226, .2);
  --m-wrap: min(1240px, calc(100% - 112px));
  --m-sans: "Instrument Sans", "Avenir Next", sans-serif;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --m-ink: #f0e6dc;
  --m-ivory: #2b2224;
  --m-paper: #34292b;
  --m-dark: #1e181a;
  --m-dark-ink: #f0e6dc;
  --m-muted: #c0aeab;
  --m-dark-muted: #b9a9a7;
  --m-rose: #d7a29a;
  --m-accent: #e0aaa0;
  --m-line: rgba(240, 230, 220, .2);
  --m-dark-line: rgba(240, 230, 220, .19);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 86px; overflow-x: clip; }
body {
  margin: 0; width: 100%; max-width: 100%; overflow-x: clip;
  background: var(--m-ivory); color: var(--m-ink);
  font: 15px/1.65 var(--m-sans); -webkit-font-smoothing: antialiased;
}
body, button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
img, video { display: block; max-width: 100%; }
button { font: inherit; }
.m-wrap { width: var(--m-wrap); margin-inline: auto; }
.m-responsive-media { display: block; width: 100%; height: 100%; }
.m-skip {
  position: fixed; top: 12px; left: 12px; z-index: 100; padding: 10px 14px;
  background: var(--m-ivory); color: var(--m-ink); transform: translateY(-150%);
}
.m-skip:focus { transform: translateY(0); }

/* A warm editorial storefront: quiet type, deliberate image framing, alternating paper and ink. */
.m-nav {
  position: fixed; inset: 0 0 auto; z-index: 20; color: var(--m-ink);
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
.m-nav.is-solid {
  background: color-mix(in srgb, var(--m-ivory) 94%, transparent);
  border-bottom: 1px solid var(--m-line); backdrop-filter: blur(14px);
}
.m-nav-inner {
  width: var(--m-wrap); height: 82px; margin: auto; display: flex;
  align-items: center; justify-content: space-between; gap: 26px;
}
.m-wordmark { flex: none; display: inline-flex; align-items: center; width: clamp(126px, 14vw, 174px); height: 62px; }
.m-wordmark img { width: 100%; height: 100%; object-fit: contain; }
.m-logo-dark { display: none; }
:root[data-theme="dark"] .m-logo-light { display: none; }
:root[data-theme="dark"] .m-logo-dark { display: block; }
.m-nav-links { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); }
.m-nav-links a { color: inherit; text-decoration: none; font-size: 12px; transition: opacity .2s ease; }
.m-nav-links a:hover { opacity: .62; }
.m-nav-links .m-nav-login { margin-left: 4px; }
.m-nav-links .m-nav-cta {
  padding: 10px 15px; background: var(--m-rose); color: #352528;
  transition: transform .2s ease, background-color .2s ease;
}
.m-nav-links .m-nav-cta:hover { opacity: 1; background: #d9a59d; transform: translateY(-2px); }
.m-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px;
  padding: 0 10px; border: 1px solid currentColor; color: inherit; background: transparent;
  cursor: pointer; font-size: 11px; line-height: 1; transition: transform .2s ease, background-color .2s ease;
}
.m-theme-toggle:hover { transform: translateY(-1px); background: color-mix(in srgb, currentColor 9%, transparent); }
.m-theme-icon { position: relative; width: 13px; height: 13px; border: 1px solid currentColor; border-radius: 50%; overflow: hidden; }
.m-theme-icon::after { content: ""; position: absolute; inset: -1px -1px -1px 50%; background: currentColor; }
.m-menu-toggle { display: none; }

#top > section { position: relative; overflow: hidden; }
#top > section:nth-of-type(odd) {
  --band-bg: var(--m-ivory); --band-fg: var(--m-ink); --band-muted: var(--m-muted); --band-line: var(--m-line);
  background: var(--band-bg); color: var(--band-fg);
}
#top > section:nth-of-type(even) {
  --band-bg: var(--m-dark); --band-fg: var(--m-dark-ink); --band-muted: var(--m-dark-muted); --band-line: var(--m-dark-line);
  --m-accent: #e0aaa0;
  background: var(--band-bg); color: var(--band-fg);
}
:root[data-theme="dark"] #top > section:nth-of-type(odd) {
  --band-bg: #32282a; --band-fg: var(--m-ink); --band-muted: var(--m-muted); --band-line: var(--m-line);
}
:root[data-theme="dark"] #top > section:nth-of-type(even) {
  color-scheme: light;
  --band-bg: #ffffff; --band-fg: #38282b; --band-muted: #796c6c; --band-line: rgba(56, 40, 43, .19);
  --m-accent: #874353; --m-paper: #ffffff;
}
.m-kicker {
  display: inline-block; margin: 0 0 19px; color: var(--m-accent); font-size: 10px;
  font-weight: 600; line-height: 1.4; letter-spacing: .15em; text-transform: uppercase;
}
.m-section-title { max-width: 700px; margin: 0; font-size: clamp(36px, 4.1vw, 48px); font-weight: 400; line-height: 1; letter-spacing: -.06em; text-wrap: balance; }
.m-section-intro { max-width: 470px; margin: 20px 0 0; color: var(--band-muted, var(--m-muted)); font-size: 15px; }
.m-clarification { margin: 16px 0 0; color: var(--band-muted, var(--m-muted)); font-size: 11px; line-height: 1.65; }

.m-hero {
  min-height: max(730px, 100svh); display: flex; align-items: center; padding: 100px 0 74px;
}
.m-hero-inner {
  position: relative; z-index: 1; width: var(--m-wrap); margin: auto; display: grid;
  grid-template-columns: .82fr 1.18fr; align-items: center; gap: clamp(42px, 7vw, 100px);
}
.m-hero-copy { position: relative; z-index: 3; }
.m-hero h1 {
  max-width: 590px; margin: 0 0 23px; font-size: clamp(56px, 7vw, 88px);
  font-weight: 400; line-height: .95; letter-spacing: -.075em; text-wrap: balance;
}
.m-hero-lede { max-width: 390px; margin: 0; color: var(--band-muted); font-size: clamp(16px, 1.45vw, 19px); line-height: 1.6; }
.m-hero-actions { display: flex; align-items: center; gap: 22px; margin-top: 31px; }
.m-cta {
  min-height: 50px; display: inline-flex; align-items: center; justify-content: center; padding: 0 19px;
  background: var(--m-rose); color: #352528; text-decoration: none; font-size: 13px; font-weight: 600;
  transition: transform .2s ease, background-color .2s ease;
}
.m-cta:hover { transform: translateY(-2px); background: #d9a59d; }
.m-text-link { display: inline-flex; align-items: center; gap: 9px; border-bottom: 1px solid var(--band-line); padding: 4px 0; text-decoration: none; font-size: 12px; }
.m-text-link:hover { color: var(--m-accent); }
.m-hero-note { max-width: 370px; margin: 21px 0 0; color: var(--band-muted); font-size: 11px; }
.m-hero-visual { position: relative; min-width: 0; padding: 35px 5% 38px 0; }
.m-device-laptop {
  position: relative; width: 100%; overflow: hidden; aspect-ratio: 1.48; border: 1px solid var(--band-line);
  background: var(--m-paper); box-shadow: 0 30px 75px rgba(39, 24, 29, .15);
}
.m-device-laptop::before {
  content: ""; position: absolute; z-index: 2; inset: 0 0 auto; height: 13px;
  background: color-mix(in srgb, var(--m-dark) 88%, transparent); border-bottom: 1px solid rgba(255,255,255,.16);
}
.m-device-laptop::after {
  content: ""; position: absolute; z-index: 2; left: 50%; bottom: -9px; width: 110%; height: 9px;
  transform: translateX(-50%); background: linear-gradient(90deg, transparent 2%, #847c78 14%, #d1c9c0 50%, #847c78 86%, transparent 98%);
}
.m-device-laptop > picture { position: absolute; inset: 0; }
.m-device-laptop img { width: 100%; height: 100%; object-fit: contain; object-position: top; }
.m-device-phone {
  position: absolute; z-index: 4; right: 0; bottom: 12px; width: clamp(120px, 15vw, 186px);
  overflow: hidden; aspect-ratio: .49; padding: 6px; border: 1px solid rgba(63,45,47,.5);
  border-radius: 23px; background: #21191b; box-shadow: 0 21px 48px rgba(39,24,29,.24);
}
.m-device-phone > picture, .m-showcase-mobile > picture { display: block; width: 100%; height: 100%; }
.m-device-phone::before {
  content: ""; position: absolute; z-index: 2; top: 6px; left: 50%; width: 29%; height: 9px;
  transform: translateX(-50%); background: #21191b; border-radius: 0 0 8px 8px;
}
.m-device-phone img { width: 100%; height: 100%; border-radius: 17px; object-fit: cover; }
.m-hero-index { position: absolute; top: 1px; left: 0; color: var(--band-muted); font-size: 10px; letter-spacing: .13em; font-variant-numeric: tabular-nums; }
.m-orbit-note { position: absolute; top: 2%; right: 0; color: var(--m-accent); font-size: 10px; line-height: 1.55; text-align: right; }
.m-device-caption {
  position: absolute; z-index: 5; left: 14px; bottom: 13px; padding: 6px 9px;
  background: rgba(52,37,40,.84); color: #f6f0e9; font-size: 9px; line-height: 1.2; letter-spacing: .09em; text-transform: uppercase;
}
.m-scroll-cue {
  position: absolute; left: max(56px, calc((100vw - 1240px)/2)); bottom: 26px;
  display: flex; align-items: center; gap: 12px; color: var(--band-muted); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
}
.m-scroll-cue span { width: 42px; height: 1px; background: var(--m-accent); transform-origin: left; }
.m-asset-placeholder {
  width: 100%; height: 100%; display: grid; place-items: center; padding: 24px; text-align: center;
  color: var(--m-muted); background: var(--m-paper); border: 1px solid var(--m-line); font-size: 11px; line-height: 1.55;
}
.m-asset-placeholder strong { display: block; color: var(--m-ink); font-weight: 500; }

.m-statement { padding: clamp(104px, 13vw, 170px) 0; }
.m-statement-inner { max-width: 1060px; }
.m-statement .m-kicker { display: block; text-align: center; }
.m-statement p {
  max-width: 980px; margin: auto; text-align: center; font-size: clamp(34px, 4.2vw, 48px);
  font-weight: 400; line-height: 1.08; letter-spacing: -.065em; text-wrap: balance;
}
.m-how { padding: 92px 0 120px; }
.m-how-heading { display: grid; grid-template-columns: 1fr .55fr; align-items: end; gap: 8vw; margin-bottom: 43px; }
.m-how-heading p { max-width: 360px; margin: 0 0 5px; color: var(--band-muted); }
.m-how-grid { display: grid; grid-template-columns: 1fr; gap: 39px; align-items: center; }
.m-wizard-media { position: relative; display: flex; flex-direction: column; height: clamp(280px, 42vw, 530px); overflow: hidden; background: var(--m-paper); border: 1px solid var(--band-line); }
.m-wizard-media video { position: relative; z-index: 1; flex: 1; min-height: 0; width: 100%; object-fit: contain; opacity: 0; transition: opacity .3s ease; }
.m-wizard-media video.is-playing { z-index: 3; opacity: 1; }
.m-wizard-poster { position: absolute; z-index: 2; inset: 0; overflow: hidden; opacity: 1; transition: opacity .3s ease; pointer-events: none; }
.m-wizard-poster.is-hidden { opacity: 0; }
.m-wizard-poster picture, .m-wizard-poster img { display: block; width: 100%; height: 100%; }
.m-wizard-poster img { object-fit: contain; }
.m-wizard-media > .m-media-caption { position: relative; z-index: 4; }
.m-wizard-media .m-asset-placeholder { background: var(--m-paper); }
.m-wizard-media .m-ann-builder-image { display: block; width: 100%; height: 100%; min-height: 0; flex: 1; object-fit: contain; object-position: top; }
.m-media-caption { flex: none; display: block; padding: 8px 11px; background: var(--m-paper); color: var(--m-muted); font-size: 10px; line-height: 1.3; letter-spacing: .025em; }
.m-steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px; }
.m-step { display: grid; grid-template-columns: 30px 1fr; gap: 12px; padding: 20px 0; border-top: 1px solid var(--band-line); }
.m-step-no { padding-top: 3px; color: var(--m-accent); font-size: 11px; font-variant-numeric: tabular-nums; }
.m-step h3 { margin: 0 0 7px; font-size: 18px; line-height: 1.25; font-weight: 400; letter-spacing: -.025em; }
.m-step p { max-width: 340px; margin: 0; color: var(--band-muted); font-size: 12px; }

.m-details { padding: 100px 0 115px; }
.m-details-head { display: flex; justify-content: space-between; align-items: end; gap: 36px; margin-bottom: 38px; }
.m-details-head .m-kicker { margin-bottom: 15px; }
.m-details-head p { max-width: 310px; margin: 0 0 5px; color: var(--band-muted); }
.m-craft-carousel { position: relative; }
.m-craft-stage { position: relative; }
.m-craft-slide { display: grid; grid-template-columns: 1.12fr .88fr; align-items: center; gap: clamp(36px, 7vw, 100px); min-height: 460px; }
.m-craft-slide[hidden] { display: none; }
.m-craft-media { height: clamp(310px, 42vw, 540px); min-width: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--band-line); background: var(--m-paper); }
.m-craft-media > img, .m-craft-media > picture { width: 100%; height: 100%; min-height: 0; flex: 1; }
.m-craft-media img { width: 100%; height: 100%; object-fit: contain; }
.m-craft-media .m-media-caption { border-top: 1px solid var(--band-line); }
.m-craft-copy { max-width: 460px; padding: 18px 0 30px; }
.m-craft-count { color: var(--m-accent); font-size: 10px; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.m-craft-count i { color: var(--band-muted); font-style: normal; }
.m-craft-copy h3 { margin: 20px 0 15px; font-size: clamp(36px, 4.2vw, 48px); line-height: 1; font-weight: 400; letter-spacing: -.065em; }
.m-craft-copy > p:not(.m-clarification) { max-width: 400px; margin: 0; color: var(--band-muted); font-size: 15px; line-height: 1.7; }
.m-craft-copy .m-clarification { max-width: 390px; margin-top: 13px; font-size: 11px; }
.m-craft-controls { display: flex; align-items: center; gap: clamp(12px, 3vw, 42px); padding-top: 15px; border-top: 1px solid var(--band-line); }
.m-craft-arrows, .m-craft-selectors { display: flex; gap: 6px; }
.m-craft-arrows button, .m-craft-selectors button, .m-craft-play {
  height: 38px; min-width: 39px; display: inline-grid; place-items: center; padding: 0 9px;
  border: 1px solid var(--band-line); background: transparent; color: var(--band-fg); font-size: 11px; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.m-craft-arrows button { font-size: 17px; }
.m-craft-arrows button:hover, .m-craft-selectors button:hover, .m-craft-selectors button[aria-current="true"] { color: var(--band-bg); background: var(--band-fg); border-color: var(--band-fg); }
.m-craft-selectors button { color: var(--band-muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.m-craft-play { min-width: 68px; margin-left: auto; }
.m-craft-play:hover { color: var(--m-accent); border-color: var(--m-accent); }
.m-craft-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.m-craft-carousel:not(.is-enhanced) .m-craft-controls { display: none; }

.m-principles { padding: 58px 0 94px; }
.m-principles-list { max-width: 1020px; margin: auto; }
.m-principle { padding: 20px 0 23px; margin: 0; border-bottom: 1px solid var(--band-line); font-size: clamp(28px, 4vw, 48px); line-height: 1.12; letter-spacing: -.055em; }
.m-principle:first-child { border-top: 1px solid var(--band-line); }
.m-principle:nth-child(2) { padding-left: 9%; }
.m-principle:nth-child(3) { padding-left: 18%; }
.m-coming { padding: 75px 0 100px; }
.m-coming-inner { display: grid; grid-template-columns: .55fr 1.45fr; gap: 7vw; }
.m-coming h2 { max-width: 240px; margin: 0; font-size: 18px; font-weight: 400; letter-spacing: -.025em; }
.m-coming-list { max-width: 750px; border-top: 1px solid var(--band-line); }
.m-coming-list p { margin: 0; padding: 13px 0; border-bottom: 1px solid var(--band-line); color: var(--band-muted); font-size: 13px; }
.m-coming-list span { color: var(--band-muted); font-size: 10px; margin-left: 6px; white-space: nowrap; }
.m-coming-list .m-integration-note { max-width: 640px; margin: 22px 0 0; padding: 0; border: 0; color: var(--band-muted); font-size: 13px; line-height: 1.7; }
.m-integration-note a { color: var(--m-accent); text-underline-offset: 3px; }

.m-showcase { padding: 96px 0 108px; }
.m-showcase-head { display: flex; justify-content: space-between; align-items: end; gap: 28px; margin-bottom: 35px; }
.m-showcase-head h2 { margin: 0; font-size: clamp(36px, 4.2vw, 48px); font-weight: 400; letter-spacing: -.065em; line-height: 1; }
.m-showcase-head p { margin: 0 0 4px; color: var(--band-muted); font-size: 13px; }
.m-showcase-frame { position: relative; width: min(100%, 1020px); margin-inline: auto; padding-bottom: 14px; }
.m-showcase-desktop { position: relative; aspect-ratio: 1.62; overflow: hidden; background: var(--m-paper); border: 1px solid var(--band-line); box-shadow: 0 24px 55px rgba(20,14,15,.14); }
.m-showcase-desktop img { width: 100%; height: 100%; object-fit: contain; object-position: top; }
.m-showcase-mobile { position: absolute; right: 4%; bottom: -36px; width: clamp(120px, 17vw, 196px); aspect-ratio: .49; overflow: hidden; padding: 5px; border: 1px solid var(--band-line); border-radius: 20px; background: #21191b; box-shadow: 0 16px 42px rgba(20,14,15,.23); }
.m-showcase-mobile img { width: 100%; height: 100%; border-radius: 15px; object-fit: cover; }
.m-showcase-cta { display: inline-flex; align-items: center; gap: 9px; margin-top: 24px; padding-bottom: 4px; border-bottom: 1px solid currentColor; text-decoration: none; font-size: 12px; }
.m-showcase-cta:hover { color: var(--m-accent); }
.m-pricing-tease { padding: 82px 0 98px; }
.m-pricing-inner { display: flex; justify-content: space-between; align-items: center; gap: 36px; padding: 34px 0; border-top: 1px solid var(--band-line); border-bottom: 1px solid var(--band-line); }
.m-pricing-inner h2 { max-width: 680px; margin: 0; font-size: clamp(36px, 4.2vw, 48px); line-height: 1.02; font-weight: 400; letter-spacing: -.065em; }
.m-pricing-inner a { flex: none; display: inline-flex; align-items: center; gap: 10px; padding-bottom: 5px; border-bottom: 1px solid currentColor; text-decoration: none; font-size: 12px; }
.m-pricing-inner a:hover { color: var(--m-accent); }
.m-faq { padding: 94px 0 116px; }
.m-faq-inner { display: grid; grid-template-columns: .65fr 1.35fr; gap: 7vw; }
.m-faq h2 { max-width: 320px; margin: 0; font-size: clamp(36px, 4.2vw, 48px); font-weight: 400; line-height: 1; letter-spacing: -.065em; }
.m-faq-list { border-top: 1px solid var(--band-line); }
.m-faq-item { border-bottom: 1px solid var(--band-line); }
.m-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; list-style: none; cursor: pointer; font-size: 14px; line-height: 1.45; }
.m-faq-item summary::-webkit-details-marker { display: none; }
.m-faq-item summary::after { content: "+"; flex: none; color: var(--m-accent); font-size: 20px; transition: transform .25s ease; }
.m-faq-item[open] summary::after { transform: rotate(45deg); }
.m-faq-item p { max-width: 600px; margin: -1px 38px 18px 0; color: var(--band-muted); font-size: 12px; line-height: 1.7; }
.m-final { padding: 100px 0 108px; }
.m-final-inner { display: flex; align-items: end; justify-content: space-between; gap: 42px; }
.m-final h2 { max-width: 740px; margin: 0; font-size: clamp(38px, 4.2vw, 48px); font-weight: 400; line-height: 1; letter-spacing: -.07em; text-wrap: balance; }
.m-final .m-cta { flex: none; margin-bottom: 5px; }

.m-footer { padding: 30px 0 25px; background: var(--m-dark); color: var(--m-dark-ink); border-top: 1px solid var(--m-dark-line); }
.m-footer-top { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.m-footer-links { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); flex-wrap: wrap; }
.m-footer a { color: var(--m-dark-muted); font-size: 11px; text-decoration: none; }
.m-footer a:hover { color: var(--m-rose); }
.m-footer-bottom { display: flex; justify-content: space-between; gap: 18px; margin-top: 29px; color: var(--m-dark-muted); font-size: 10px; }

.m-pricing-page { min-height: 100svh; background: var(--m-ivory); color: var(--m-ink); }
.m-pricing-page .m-nav { position: relative; border-bottom: 1px solid var(--m-line); }
.m-pricing-page .m-nav .m-nav-cta { color: #352528; }
.m-pricing-content { min-height: calc(100svh - 82px); display: grid; place-items: center; padding: 80px 0; }
.m-pricing-content section { width: var(--m-wrap); }
.m-pricing-content h1 { max-width: 800px; margin: 0 0 24px; font-size: clamp(48px, 7vw, 82px); font-weight: 400; line-height: .98; letter-spacing: -.075em; }
.m-pricing-content p { color: var(--m-muted); font-size: 16px; }
.m-pricing-content a { display: inline-block; margin-top: 18px; padding-bottom: 5px; border-bottom: 1px solid; text-decoration: none; }
.m-pricing-page .m-footer { background: var(--m-dark); color: var(--m-dark-ink); }

/* Entrances are replayable. Continuous motion is limited to decorative product imagery. */
.m-motion .m-reveal { opacity: 0; transform: translate3d(0,16px,0); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.2,1); }
.m-motion .m-reveal.is-visible { opacity: 1; transform: translate3d(0,0,0); }
.m-motion .m-reveal-delay { transition-delay: .11s; }
.m-motion .m-step:nth-child(2) { transition-delay: .08s; }
.m-motion .m-step:nth-child(3) { transition-delay: .16s; }
.m-motion .m-hero-copy { animation: m-copy-arrive .7s cubic-bezier(.2,.7,.2,1) both; }
@keyframes m-copy-arrive { from { opacity: 0; transform: translate3d(-14px,0,0); } to { opacity: 1; transform: translate3d(0,0,0); } }
.m-motion.m-flight-ready .m-hero-visual { animation: m-hero-enter 1.45s cubic-bezier(.16,.82,.18,1) both; }
@keyframes m-hero-enter { 0% { opacity: .35; transform: translate3d(110px,24px,0) scale(.93) rotate(1deg); } 72% { opacity: 1; transform: translate3d(-7px,-2px,0) scale(1.008) rotate(-.12deg); } 100% { opacity: 1; transform: translate3d(0,0,0) scale(1) rotate(0); } }
.m-motion .m-craft-slide.is-active { animation: m-craft-arrive .45s ease both; }
@keyframes m-craft-arrive { from { opacity: .45; transform: translate3d(12px,0,0); } to { opacity: 1; transform: translate3d(0,0,0); } }
.m-section-active .m-device-laptop { animation: m-float-laptop 8.2s ease-in-out infinite; }
.m-section-active .m-device-phone { animation: m-float-phone 6.6s ease-in-out infinite; }
.m-section-active .m-scroll-cue span { animation: m-cue-line 2.7s ease-in-out infinite; }
.m-section-active .m-wizard-media img,
.m-section-active .m-craft-slide.is-active .m-craft-media img,
.m-section-active .m-showcase-desktop img { animation: m-image-breathe 9s ease-in-out infinite alternate; }
.m-section-active .m-showcase-mobile { animation: m-float-phone 7s ease-in-out infinite; }
@keyframes m-float-laptop { 0%,100% { transform: translate3d(var(--hero-shift, 0px),0,0); } 50% { transform: translate3d(var(--hero-shift, 0px),-18px,0); } }
@keyframes m-float-phone { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-20px,0); } }
@keyframes m-cue-line { 0%,100% { transform: scaleX(.55); opacity: .58; } 50% { transform: scaleX(1); opacity: 1; } }
@keyframes m-image-breathe { from { transform: scale(1); } to { transform: scale(1.04); } }
.m-page-hidden .m-section-active *,
.m-page-hidden .m-section-active *::before,
.m-page-hidden .m-section-active *::after { animation-play-state: paused !important; }
.m-page-hidden .m-section-active::after { animation-play-state: paused !important; }
.m-section-active .m-device-laptop:hover { animation-play-state: paused; }

/* Moving editorial rule: quiet decoration for copy-led bands, animated only while that band is onscreen. */
.m-statement::before, .m-principles::before, .m-coming::before,
.m-pricing-tease::before, .m-faq::before, .m-final::before {
  content: ""; position: absolute; top: 28px; left: 10%; width: 80%; height: 1px;
  background: color-mix(in srgb, var(--band-fg) 18%, transparent); pointer-events: none;
}
.m-statement::after, .m-principles::after, .m-coming::after,
.m-pricing-tease::after, .m-faq::after, .m-final::after {
  content: ""; position: absolute; z-index: 1; top: 27px; left: 10%; width: 66px; height: 3px;
  background: var(--m-rose); opacity: .9; pointer-events: none; transform-origin: left center;
}
.m-motion .m-section-active.m-statement::after,
.m-motion .m-section-active.m-principles::after,
.m-motion .m-section-active.m-coming::after,
.m-motion .m-section-active.m-pricing-tease::after,
.m-motion .m-section-active.m-faq::after,
.m-motion .m-section-active.m-final::after { animation: m-editorial-traverse 6.2s cubic-bezier(.45,0,.35,1) infinite alternate; }
@keyframes m-editorial-traverse { from { transform: translate3d(0,0,0) scaleX(.8); } to { transform: translate3d(calc(80vw - 66px),0,0) scaleX(1); } }
.m-nav.is-solid .m-logo-light, .m-nav.is-solid .m-logo-dark { transition: opacity .2s ease; }
:focus-visible { outline: 2px solid var(--m-accent); outline-offset: 4px; }
.m-nav :focus-visible, .m-footer :focus-visible { outline-color: var(--m-rose); }

@media (max-width: 900px) {
  :root { --m-wrap: min(calc(100% - 64px), 720px); }
  .m-nav-inner { height: 74px; }
  .m-hero { min-height: 900px; align-items: flex-start; padding-top: 132px; }
  .m-hero-inner { grid-template-columns: 1fr; gap: 24px; }
  .m-hero h1 { max-width: 630px; font-size: clamp(54px, 8.6vw, 76px); }
  .m-hero-visual { width: min(100%, 690px); margin: 0 auto; padding: 31px 30px 38px 0; }
  .m-device-phone { right: 0; bottom: 2px; }
  .m-how-heading { grid-template-columns: 1fr; gap: 17px; }
  .m-how-grid { grid-template-columns: 1fr; }
  .m-craft-slide { grid-template-columns: 1fr .82fr; gap: 30px; min-height: 390px; }
  .m-craft-media { height: clamp(290px, 48vw, 430px); }
  .m-faq-inner { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  :root { --m-wrap: calc(100% - 40px); }
  html { scroll-padding-top: 70px; }
  .m-nav-inner { height: 68px; gap: 8px; }
  .m-wordmark { width: 110px; height: 46px; }
  .m-nav-links { gap: 8px; }
  .m-nav-links a { font-size: 10px; }
  .m-nav-links a[href="#features"], .m-nav-links a[href="#faq"] { display: none; }
  .m-nav-links .m-nav-login { margin: 0; }
  .m-nav-links .m-nav-cta { padding: 9px 8px; font-size: 10px; }
  .m-nav-links .m-theme-toggle { min-height: 33px; padding: 0 6px; gap: 5px; }
  .m-theme-toggle [data-theme-label] { display: none; }
  .m-theme-icon { width: 12px; height: 12px; }
  .m-hero { min-height: max(790px, 100svh); padding: 116px 0 56px; }
  .m-hero-inner { gap: 22px; }
  .m-kicker { margin-bottom: 13px; font-size: 9px; }
  .m-hero h1 { max-width: 440px; font-size: clamp(46px, 12vw, 62px); line-height: .98; margin-bottom: 17px; }
  .m-hero-lede { max-width: 340px; font-size: 15px; }
  .m-hero-actions { margin-top: 22px; gap: 14px; flex-wrap: wrap; }
  .m-cta { min-height: 46px; padding: 0 14px; }
  .m-text-link { font-size: 11px; }
  .m-hero-note { margin-top: 16px; font-size: 10px; }
  .m-hero-visual { width: 100%; margin: 0; padding: 27px 17px 32px 0; }
  .m-device-laptop { aspect-ratio: 1.48; }
  .m-device-phone { width: 94px; right: 0; bottom: 0; border-radius: 17px; }
  .m-device-phone img { border-radius: 12px; }
  .m-orbit-note { top: 1px; font-size: 8px; }
  .m-scroll-cue { display: none; }
  .m-section-title, .m-details-head h2 { font-size: clamp(29px, 8vw, 34px); line-height: 1.05; }
  .m-statement { padding: 78px 0 84px; }
  .m-statement .m-kicker { text-align: left; }
  .m-statement p { text-align: left; font-size: clamp(28px, 7.8vw, 34px); line-height: 1.1; }
  .m-how, .m-details, .m-faq { padding: 72px 0 80px; }
  .m-how-heading { display: block; margin-bottom: 27px; }
  .m-how-heading p { margin-top: 15px; font-size: 14px; }
  .m-wizard-media { height: auto; aspect-ratio: 1.08; }
  .m-how-grid { gap: 25px; }
  .m-steps { grid-template-columns: 1fr; gap: 0; }
  .m-step { grid-template-columns: 28px 1fr; gap: 9px; padding: 16px 0; }
  .m-step h3 { font-size: 16px; }
  .m-details-head { display: block; margin-bottom: 25px; }
  .m-details-head p { margin-top: 13px; font-size: 14px; }
  .m-craft-slide { grid-template-columns: 1fr; gap: 18px; min-height: 0; }
  .m-craft-media { height: auto; aspect-ratio: 1.16; }
  .m-craft-copy { padding: 0 0 16px; }
  .m-craft-copy h3 { margin: 10px 0 10px; font-size: 34px; }
  .m-craft-copy > p:not(.m-clarification) { font-size: 14px; }
  .m-craft-copy .m-clarification { margin-top: 8px; }
  .m-craft-controls { gap: 7px; padding-top: 10px; }
  .m-craft-arrows { gap: 4px; }
  .m-craft-arrows button, .m-craft-selectors button, .m-craft-play { height: 34px; min-width: 31px; padding: 0 6px; }
  .m-craft-selectors { gap: 3px; }
  .m-craft-play { min-width: 51px; }
  .m-principles { padding: 40px 0 66px; }
  .m-principle { padding: 16px 0 18px; font-size: clamp(24px, 6.3vw, 31px); }
  .m-principle:nth-child(2) { padding-left: 4%; }
  .m-principle:nth-child(3) { padding-left: 8%; }
  .m-coming { padding: 61px 0 70px; }
  .m-coming-inner { grid-template-columns: 1fr; gap: 17px; }
  .m-coming-list p { font-size: 12px; padding: 11px 0; }
  .m-coming-list span { font-size: 9px; }
  .m-coming-list .m-integration-note { font-size: 12px; }
  .m-showcase { padding: 72px 0 76px; }
  .m-showcase-head { display: block; margin-bottom: 24px; }
  .m-showcase-head h2 { font-size: clamp(30px, 8.5vw, 34px); line-height: 1.04; }
  .m-showcase-head p { margin-top: 10px; font-size: 12px; }
  .m-showcase-mobile { width: 87px; right: -3px; bottom: -23px; }
  .m-pricing-tease { padding: 62px 0 68px; }
  .m-pricing-inner { align-items: flex-start; flex-direction: column; gap: 18px; padding: 25px 0; }
  .m-pricing-inner h2 { font-size: clamp(30px, 8.5vw, 34px); }
  .m-faq-inner { gap: 25px; }
  .m-faq h2 { font-size: clamp(30px, 8.5vw, 34px); }
  .m-faq-item summary { padding: 15px 0; font-size: 13px; }
  .m-faq-item p { margin-right: 20px; }
  .m-final { padding: 72px 0 78px; }
  .m-final-inner { align-items: flex-start; flex-direction: column; gap: 24px; }
  .m-final h2 { font-size: clamp(30px, 8.5vw, 34px); }
  .m-footer { padding: 24px 0 20px; }
  .m-footer-top, .m-footer-bottom { align-items: flex-start; flex-direction: column; gap: 17px; }
  .m-footer-links { gap: 12px 18px; }
  .m-footer-bottom { margin-top: 22px; }
  .m-pricing-content { min-height: calc(100svh - 68px); }
}
@media (max-width: 360px) {
  :root { --m-wrap: calc(100% - 32px); }
  .m-wordmark { width: 91px; }
  .m-nav-links { gap: 5px; }
  .m-nav-links .m-nav-login { display: none; }
  .m-nav-links .m-nav-cta { padding-inline: 7px; font-size: 9px; }
  .m-craft-controls { gap: 5px; }
  .m-craft-arrows button, .m-craft-selectors button { min-width: 29px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .m-reveal { opacity: 1 !important; transform: none !important; }
  .m-motion .m-hero-visual { opacity: 1; transform: none; }
}

/* Hero: always black, an animated product story. Ambient motion runs only while the hero is onscreen (m-section-active). */
:root:root[data-theme] #top > section.m-hero {
  --band-bg: #09090a; --band-fg: #f3ebe2; --band-muted: #b9aeab; --band-line: rgba(243,235,226,.17);
  --m-accent: #e0aaa0; --m-paper: #151517; color-scheme: dark;
  background: #09090a; color: #f3ebe2; min-height: max(760px, 100svh); padding: 104px 0 70px;
}
body:not(.m-pricing-document) .m-nav:not(.is-solid) { color: #f3ebe2; }
body:not(.m-pricing-document) .m-nav:not(.is-solid) .m-logo-light { display: none; }
body:not(.m-pricing-document) .m-nav:not(.is-solid) .m-logo-dark { display: block; }
.m-hero .m-hero-inner { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(32px, 5vw, 76px); align-items: center; }
.m-hero h1 { font-size: clamp(42px, 5.4vw, 74px); max-width: 560px; margin-bottom: 18px; }
.m-hero-lede { max-width: 440px; font-size: clamp(15px, 1.3vw, 18px); color: #f3ebe2; }
.m-hero-summary { max-width: 460px; margin: 14px 0 0; color: var(--band-muted); font-size: 14px; line-height: 1.65; }
.m-hero-points { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; max-width: 480px; }
.m-hero-points li { padding: 6px 11px; border: 1px solid var(--band-line); color: #f3ebe2; font-size: 11px; line-height: 1.3; }
.m-hero-soon { max-width: 440px; margin: 10px 0 0; color: var(--band-muted); font-size: 11px; line-height: 1.6; }
.m-hero-soon b { margin-right: 6px; padding: 2px 6px; border: 1px dashed var(--m-rose); color: var(--m-rose); font-weight: 600; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.m-hero .m-text-link { border-color: rgba(243,235,226,.35); }

.m-hero-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.m-hero-grid { position: absolute; inset: -60px; background-image: linear-gradient(rgba(243,235,226,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(243,235,226,.06) 1px, transparent 1px); background-size: 60px 60px; -webkit-mask-image: radial-gradient(ellipse at 65% 45%, #000 15%, transparent 70%); mask-image: radial-gradient(ellipse at 65% 45%, #000 15%, transparent 70%); }
.m-orb { position: absolute; border-radius: 50%; }
.m-orb-a { width: 520px; height: 520px; right: -80px; top: 5%; background: radial-gradient(circle, rgba(206,146,139,.24), transparent 66%); }
.m-orb-b { width: 420px; height: 420px; left: -120px; bottom: -80px; background: radial-gradient(circle, rgba(135,67,83,.3), transparent 66%); }
.m-hero-flow { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-flow { stroke: rgba(224,170,160,.34); stroke-width: 1.2; stroke-dasharray: 3 11; }
.m-chip { position: absolute; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--m-dark-line); background: rgba(21,21,23,.8); color: var(--m-rose); }
.m-chip svg, .m-hs-tab svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.m-chip-1 { left: 47%; top: 12%; } .m-chip-2 { right: 5%; top: 22%; } .m-chip-3 { left: 44%; bottom: 8%; } .m-chip-4 { right: 8%; bottom: 10%; }

.m-hs { position: relative; z-index: 3; min-width: 0; padding: 16px; border: 1px solid var(--band-line); background: rgba(16,16,18,.88); box-shadow: 0 40px 90px rgba(0,0,0,.6), 18px 18px 0 -1px rgba(206,146,139,.08), 36px 36px 0 -1px rgba(206,146,139,.04); transform: perspective(1400px) rotateY(-5deg) rotateX(2deg); transform-origin: left center; }
.m-hs-tabs { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; }
.m-hs-tab { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; padding: 10px 9px 12px; border: 1px solid var(--band-line); background: transparent; color: var(--band-muted); font-size: 11px; line-height: 1.2; cursor: pointer; text-align: left; transition: color .2s ease, border-color .2s ease; }
.m-hs-tab span { max-width: 100%; overflow-wrap: anywhere; }
.m-hs-tab:hover, .m-hs-tab[aria-current="true"] { color: #f3ebe2; border-color: rgba(224,170,160,.55); }
.m-hs-tab[aria-current="true"] svg { color: var(--m-rose); }
.m-hs-prog { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--m-rose); transform: scaleX(0); transform-origin: left; }
.m-hs-tab[aria-current="true"] .m-hs-prog { transform: scaleX(1); opacity: .45; }
.m-hs-slides { margin-top: 12px; }
.m-hs-slide[hidden] { display: none; }
.m-hs-card { position: relative; min-height: 196px; padding: 38px 16px 14px; border: 1px solid var(--band-line); background: #121214; display: flex; flex-direction: column; justify-content: center; gap: 14px; overflow: hidden; }
.m-hs-tag { position: absolute; top: 10px; left: 12px; color: var(--m-rose); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.m-hs-art { width: 100%; height: auto; max-height: 90px; stroke: var(--m-rose); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.m-hs-track circle { fill: #121214; }
.m-hs-track .m-dot { fill: var(--m-rose); stroke: none; }
.m-hs-rows, .m-hs-steps { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--band-muted); }
.m-hs-rows { justify-content: flex-start; }
.m-pill { padding: 4px 10px; border: 1px solid var(--band-line); color: #f3ebe2; font-size: 11px; }
.m-pill-add { border-style: dashed; color: var(--band-muted); }
.m-hs-order { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.m-hs-order em { color: var(--band-muted); font-size: 10px; font-style: normal; }
.m-hs-cust, .m-hs-inv { display: grid; gap: 8px; font-size: 12px; }
.m-hs-cust span { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--band-line); }
.m-hs-cust b { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: rgba(206,146,139,.2); color: var(--m-rose); font-size: 10px; font-weight: 600; }
.m-hs-cust em { margin-left: auto; color: var(--band-muted); font-style: normal; font-size: 11px; }
.m-hs-inv span { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--band-line); color: var(--band-muted); }
.m-hs-inv b { color: #f3ebe2; font-weight: 500; font-variant-numeric: tabular-nums; }
.m-hs-inv .m-hs-total { color: #f3ebe2; border-bottom: 0; }
.m-hs-stamp { position: absolute; right: 14px; top: 34px; width: 92px; stroke: var(--m-rose); stroke-width: 1.5; transform: rotate(-9deg); opacity: .85; }
.m-hs-stamp text { fill: var(--m-rose); stroke: none; font-size: 15px; font-weight: 600; letter-spacing: .12em; }
.m-hs-copy { padding: 14px 2px 4px; }
.m-hs-copy strong { display: block; font-size: 17px; font-weight: 500; letter-spacing: -.02em; }
.m-hs-copy p { margin: 6px 0 0; max-width: 520px; color: var(--band-muted); font-size: 12px; line-height: 1.65; }
.m-hs-controls { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--band-line); }
.m-hs-controls button { height: 34px; min-width: 38px; padding: 0 10px; border: 1px solid var(--band-line); background: transparent; color: #f3ebe2; font-size: 14px; cursor: pointer; }
.m-hs-controls button:hover { border-color: var(--m-rose); color: var(--m-rose); }
.m-hs-controls .m-hs-toggle { margin-left: auto; font-size: 11px; }
.m-hs-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.m-hs:not(.is-enhanced) .m-hs-tabs, .m-hs:not(.is-enhanced) .m-hs-controls { display: none; }
.m-hs:not(.is-enhanced) .m-hs-slides { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.m-hs:not(.is-enhanced) .m-hs-slide[hidden] { display: block; }
:root:not(.m-motion) [data-hs-toggle] { display: none; }

/* Motion: draws, drifts and story progress. Static and fully drawn when motion is off. */
.m-section-active .m-orb-a { animation: m-hs-drift 14s ease-in-out infinite alternate; }
.m-section-active .m-orb-b { animation: m-hs-drift 17s ease-in-out infinite alternate-reverse; }
.m-section-active .m-hero-grid { animation: m-hs-grid 22s linear infinite; }
.m-section-active .m-flow { animation: m-hs-flow 9s linear infinite; }
.m-section-active .m-chip-1 { animation: m-hs-bob 6s ease-in-out infinite; }
.m-section-active .m-chip-2 { animation: m-hs-bob 7.4s ease-in-out -2s infinite; }
.m-section-active .m-chip-3 { animation: m-hs-bob 6.6s ease-in-out -4s infinite; }
.m-section-active .m-chip-4 { animation: m-hs-bob 8s ease-in-out -1s infinite; }
.m-section-active .m-hs { animation: m-hs-float 9s ease-in-out infinite; }
.m-section-active .m-hs.is-enhanced .m-hs-tab[aria-current="true"] .m-hs-prog { opacity: 1; animation: m-hs-progress 6.5s linear forwards; }
.m-section-active .m-hs-slide.is-active { animation: none; }
.m-section-active .m-hs-slide.is-active .m-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: m-hs-draw 1.6s ease-out .15s forwards; }
.m-section-active .m-hs-slide.is-active .m-t2 .m-draw { animation-delay: .5s; }
.m-section-active .m-hs-slide.is-active .m-t3 .m-draw { animation-delay: .85s; }
.m-section-active .m-hs-slide.is-active .m-dot { animation: m-hs-dot 3.2s ease-in-out 1s infinite; }
.m-section-active .m-hs-slide.is-active .m-hs-stamp { animation: m-hs-stamp .6s ease-out .9s both; }
.m-section-active .m-hero-copy { animation: m-copy-arrive .7s cubic-bezier(.2,.7,.2,1) both; }
.m-hero.is-paused *, .m-page-hidden .m-hero * { animation-play-state: paused !important; }
.m-hero.is-paused *::before, .m-hero.is-paused *::after { animation-play-state: paused !important; }
@keyframes m-hs-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes m-hs-draw { to { stroke-dashoffset: 0; } }
@keyframes m-hs-dot { 0% { transform: translate3d(0,0,0); } 60%,100% { transform: translate3d(240px,0,0); } }
@keyframes m-hs-stamp { from { opacity: 0; transform: rotate(-9deg) scale(1.5); } to { opacity: .85; transform: rotate(-9deg) scale(1); } }
@keyframes m-hs-drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-60px,40px,0); } }
@keyframes m-hs-grid { from { transform: translate3d(0,0,0); } to { transform: translate3d(60px,60px,0); } }
@keyframes m-hs-flow { to { stroke-dashoffset: -112; } }
@keyframes m-hs-bob { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-14px,0); } }
@keyframes m-hs-float { 0%,100% { transform: perspective(1400px) rotateY(-5deg) rotateX(2deg) translate3d(0,0,0); } 50% { transform: perspective(1400px) rotateY(-3deg) rotateX(1deg) translate3d(0,-8px,0); } }
@media (prefers-reduced-motion: reduce) { .m-hero *, .m-hero *::before { animation: none !important; } }

@media (max-width: 900px) {
  :root:root[data-theme] #top > section.m-hero { min-height: 0; padding: 112px 0 56px; }
  .m-hero .m-hero-inner { grid-template-columns: minmax(0,1fr); gap: 34px; }
  .m-hs { transform: none; animation: none !important; }
  .m-chip-1, .m-chip-3 { display: none; }
}
@media (max-width: 600px) {
  :root:root[data-theme] #top > section.m-hero { padding: 100px 0 44px; }
  .m-hero h1 { font-size: clamp(38px, 11vw, 52px); }
  .m-hs { padding: 10px; box-shadow: none; }
  .m-hs-tab { padding: 8px 5px 10px; font-size: 9.5px; }
  .m-hs-tab svg { width: 17px; height: 17px; }
  .m-hs-card { padding: 36px 12px 12px; min-height: 190px; }
  .m-hs:not(.is-enhanced) .m-hs-slides { grid-template-columns: minmax(0,1fr); }
  .m-hs-stamp { width: 74px; right: 10px; }
  .m-chip { display: none; }
}

/* Hero revision: one synchronized sentence, six slides, larger header. */
.m-hero-line { max-width: 440px; min-height: 1.5em; margin: 0; color: #f3ebe2; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.5; letter-spacing: -.01em; }
@keyframes m-line-in { from { opacity: 0; transform: translate3d(0,8px,0); } to { opacity: 1; transform: translate3d(0,0,0); } }
.m-hero-actions { margin-top: 22px; }
.m-hs-tabs { grid-template-columns: repeat(6, minmax(0,1fr)); }
.m-hs-tab.is-soon { border-style: dashed; }
.m-soon { margin-left: 6px; padding: 2px 6px; border: 1px dashed var(--m-rose); color: var(--m-rose); font-size: 9px; font-style: normal; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; vertical-align: middle; }
.m-hs-soon .m-hs-card { border-style: dashed; }

.m-logo-hero { display: none; }
body:not(.m-pricing-document) .m-nav:not(.is-solid) .m-logo-dark { display: none; }
body:not(.m-pricing-document) .m-nav:not(.is-solid) .m-logo-hero { display: block; background: none; }
.m-nav-links { gap: clamp(14px, 2vw, 30px); }
.m-nav-links a { font-size: 15px; }
.m-nav-links .m-nav-cta { padding: 12px 18px; font-size: 15px; }
.m-theme-toggle { min-height: 42px; padding: 0 14px; font-size: 14px; gap: 9px; }
.m-theme-icon { width: 15px; height: 15px; }
@media (max-width: 900px) {
  .m-nav-links a, .m-nav-links .m-nav-cta { font-size: 14px; }
  .m-nav-links .m-nav-cta { padding: 10px 14px; }
  .m-theme-toggle { font-size: 13px; padding: 0 10px; }
}
@media (max-width: 600px) {
  .m-nav-inner { gap: 10px; }
  .m-wordmark { width: 90px; }
  .m-nav-links { gap: 6px; }
  .m-nav-links a { white-space: nowrap; }
  .m-nav-links a, .m-nav-links .m-nav-cta { font-size: 12.5px; }
  .m-nav-links .m-nav-cta { padding: 10px 10px; white-space: nowrap; }
  .m-nav-links .m-theme-toggle { min-height: 38px; padding: 0 9px; }
  .m-hero-line { min-height: 1.5em; font-size: 17px; }
  .m-hs-tabs { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .m-hs-tab { font-size: 10.5px; }
}
@media (max-width: 360px) {
  .m-nav-links a, .m-nav-links .m-nav-cta { font-size: 11.5px; }
  .m-nav-links .m-nav-cta { padding-inline: 8px; }
}

/* Hero dashboard: dimensional, glass and metal materials. Original timings and keyframes above are untouched. */
.m-hs { padding: 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.13);
  background: linear-gradient(158deg, rgba(31,31,35,.97), rgba(11,11,13,.98) 62%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.03), 0 0 0 1px rgba(0,0,0,.7), 0 55px 90px -25px rgba(0,0,0,.9), 30px 40px 70px -30px rgba(135,67,83,.35); }
.m-hs::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 14px; background: linear-gradient(160deg, #1a1315, #050506); border: 1px solid rgba(206,146,139,.22); transform: translate(14px,16px); pointer-events: none; }
.m-hs::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: -54px; height: 46px; background: radial-gradient(ellipse at center, rgba(0,0,0,.75), transparent 70%);  pointer-events: none; }
.m-hs-sheen { position: absolute; inset: 0; z-index: 7; overflow: hidden; border-radius: 14px; pointer-events: none; }
.m-hs-sheen::before { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 34%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.07) 45%, rgba(255,235,230,.12) 50%, transparent 70%); transform: translate3d(-130%,0,0) skewX(-14deg); }
.m-hs-chrome { display: flex; align-items: center; gap: 12px; margin: -2px 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--band-line); }
.m-hs-dots { display: flex; gap: 6px; }
.m-hs-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(243,235,226,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.m-hs-dots i:first-child { background: var(--m-rose); }
.m-hs-url { flex: 1; min-width: 0; max-width: 270px; padding: 4px 12px; overflow: hidden; border-radius: 99px; background: rgba(0,0,0,.45); box-shadow: inset 0 1px 3px rgba(0,0,0,.6); color: var(--band-muted); font-size: 10.5px; white-space: nowrap; text-overflow: ellipsis; }
.m-hs-kpis { display: grid; grid-template-columns: 1.1fr 1.2fr 1fr; gap: 6px; margin-bottom: 10px; position: relative; padding-bottom: 14px; }
.m-hs-kpi { position: relative; min-width: 0; padding: 8px 10px 9px; border-radius: 7px; border: 1px solid rgba(255,255,255,.07); background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 16px -8px rgba(0,0,0,.7); }
.m-hs-kpi small { display: block; color: var(--band-muted); font-size: 9.5px; letter-spacing: .04em; }
.m-hs-kpi b { display: block; margin-top: 2px; font-size: 16px; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.m-hs-bars { position: absolute; right: 9px; bottom: 9px; height: 22px; display: flex; align-items: flex-end; gap: 3px; }
.m-hs-bars s { width: 4px; height: var(--h); background: linear-gradient(180deg, var(--m-rose), rgba(135,67,83,.6)); border-radius: 1px; transform-origin: bottom; text-decoration: none; }
.m-hs-sample { position: absolute; left: 2px; bottom: -1px; color: var(--m-rose); font-size: 8.5px; font-style: normal; letter-spacing: .1em; text-transform: uppercase; }
.m-hs-tab { border-radius: 7px; background: linear-gradient(180deg, rgba(255,255,255,.04), transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.m-hs-tab[aria-current="true"] { background: linear-gradient(180deg, rgba(206,146,139,.16), rgba(206,146,139,.03)); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 18px -8px rgba(206,146,139,.4); }
.m-hs-card { border-radius: 9px; background: radial-gradient(120% 90% at 20% 0%, #1d1b1d, #0f0f11 70%); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -20px 40px -30px rgba(0,0,0,.9), 0 18px 30px -16px rgba(0,0,0,.8); }
.m-hs-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 35%); }
.m-hs-controls button { border-radius: 6px; background: linear-gradient(180deg, rgba(255,255,255,.06), transparent); }
.m-hs-toast { position: absolute; z-index: 8; display: flex; align-items: center; gap: 10px; width: 206px; padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: linear-gradient(160deg, rgba(40,38,42,.96), rgba(18,18,20,.96)); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 24px 36px -10px rgba(0,0,0,.85); font-size: 10.5px; line-height: 1.4; color: var(--band-muted); pointer-events: none; }
.m-hs-toast i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--m-rose); box-shadow: 0 0 0 4px rgba(206,146,139,.18); }
.m-hs-toast b { display: block; color: #f3ebe2; font-weight: 500; font-size: 11.5px; }
.m-hs-toast-a { top: 8px; right: 34px; transform: translate3d(0,0,80px) rotate(-1.2deg); }
.m-hs-toast-b { bottom: -38px; left: 40px; transform: translate3d(0,0,60px) rotate(1deg); }
.m-section-active .m-hs-sheen::before { animation: m-hs-sheen 7.5s ease-in-out infinite; }
.m-section-active .m-hs-bars s { animation: m-hs-bar 2.6s ease-in-out infinite alternate; }
.m-section-active .m-hs-bars s:nth-child(2n) { animation-delay: -.8s; }
.m-section-active .m-hs-bars s:nth-child(3n) { animation-delay: -1.5s; }
.m-section-active .m-hs-toast-a { animation: m-hs-toast-a 6.2s ease-in-out infinite; }
.m-section-active .m-hs-toast-b { animation: m-hs-toast-b 7.1s ease-in-out -2s infinite; }
.m-section-active .m-hs-toast i { animation: m-hs-ping 2.2s ease-out infinite; }
@keyframes m-hs-sheen { 0%,35% { transform: translate3d(-130%,0,0) skewX(-14deg); } 85%,100% { transform: translate3d(400%,0,0) skewX(-14deg); } }
@keyframes m-hs-bar { from { transform: scaleY(.45); } to { transform: scaleY(1); } }
@keyframes m-hs-toast-a { 0%,100% { transform: translate3d(0,0,80px) rotate(-1.2deg); } 50% { transform: translate3d(0,-7px,92px) rotate(-.4deg); } }
@keyframes m-hs-toast-b { 0%,100% { transform: translate3d(0,0,60px) rotate(1deg); } 50% { transform: translate3d(0,6px,70px) rotate(.3deg); } }
@keyframes m-hs-ping { 0% { box-shadow: 0 0 0 0 rgba(206,146,139,.5); } 100% { box-shadow: 0 0 0 9px rgba(206,146,139,0); } }
@keyframes m-hs-float-m { 0%,100% { transform: perspective(1000px) rotateX(3deg) rotateY(-2deg) translate3d(0,0,0); } 50% { transform: perspective(1000px) rotateX(2deg) rotateY(-1deg) translate3d(0,-5px,0); } }

@media (max-width: 900px) {
  .m-hs { transform: perspective(1000px) rotateX(3deg) rotateY(-2deg); transform-origin: center top; }
  .m-section-active .m-hs { animation: m-hs-float-m 9s ease-in-out infinite !important; }
  .m-hs::before { transform: translate(8px,10px); }
}
@media (max-width: 600px) {
  .m-hs { padding: 9px; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 30px 50px -20px rgba(0,0,0,.9); }
  .m-hs::before { transform: translate(5px,7px); }
  .m-hs-url { font-size: 9.5px; }
  .m-hs-kpis { gap: 4px; }
  .m-hs-kpi { padding: 7px 7px 8px; }
  .m-hs-kpi b { font-size: 13px; }
  .m-hs-kpi small { font-size: 8.5px; }
  .m-hs-bars { display: none; }
  .m-hs-toast { width: 168px; padding: 7px 9px; font-size: 9.5px; }
  .m-hs-toast b { font-size: 10.5px; }
  .m-hs-toast-a { right: 14px; top: -24px; }
  .m-hs-toast-b { left: 14px; bottom: -32px; }
}


/* Hero story transitions: JS drives a phase (is-exit, then swap, then is-enter) on .m-hero with data-hs-out/data-hs-in.
   Left headline parts and the whole dashboard plane use independent trajectories on the same phase. Resting state has no animation and no transform.
   Dashboard content is flat: no preserve-3d, no inner depth, no perpetual sway. All rules require .m-section-active. */
.m-hero { --d: 1; --r: 1; }
@media (max-width: 900px) { .m-hero { --d: .6; --r: .7; } }
@media (max-width: 600px) { .m-hero { --d: .36; --r: .55; } }
.m-hs-scene { position: relative; min-width: 0; z-index: 3; }
.m-hs-scene, .m-hs, .m-hs-slides, .m-hs-card { transform-style: flat; }
.m-hs-notifications { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 12px; }
.m-hs-notifications .m-hs-toast { position: relative; inset: auto; width: auto; transform: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 18px rgba(0,0,0,.28); }
.m-section-active .m-hs-notifications .m-hs-toast { animation: none; }
.m-hero-copy .m-kicker { --cd: 0s; } .m-hero-copy h1 { --cd: .06s; } .m-hero-copy .m-hero-line { --cd: .12s; }
.m-hero[data-hs-out="0"] { --so: translate3d(calc(var(--d) * 260px), calc(var(--d) * -90px), calc(var(--d) * -300px)) rotateX(calc(var(--r) * 10deg)) rotateY(calc(var(--r) * -38deg)) rotateZ(calc(var(--r) * 6deg)) scale(0.7); --co: translate3d(calc(var(--d) * -220px), calc(var(--d) * 0px), calc(var(--d) * 0px)) rotateX(calc(var(--r) * 0deg)) rotateY(calc(var(--r) * 40deg)) rotateZ(calc(var(--r) * 0deg)) scale(0.9); }
.m-hero[data-hs-in="0"] { --si: translate3d(calc(var(--d) * -260px), calc(var(--d) * 120px), calc(var(--d) * -360px)) rotateX(calc(var(--r) * -8deg)) rotateY(calc(var(--r) * 34deg)) rotateZ(calc(var(--r) * -6deg)) scale(0.72); --ci: translate3d(calc(var(--d) * 0px), calc(var(--d) * 60px), calc(var(--d) * 0px)) rotateX(calc(var(--r) * -50deg)) rotateY(calc(var(--r) * 0deg)) rotateZ(calc(var(--r) * 0deg)) scale(0.9); }
.m-hero[data-hs-out="1"] { --so: translate3d(calc(var(--d) * -240px), calc(var(--d) * 60px), calc(var(--d) * -280px)) rotateX(calc(var(--r) * 0deg)) rotateY(calc(var(--r) * 40deg)) rotateZ(calc(var(--r) * -8deg)) scale(0.72); --co: translate3d(calc(var(--d) * 0px), calc(var(--d) * -90px), calc(var(--d) * 0px)) rotateX(calc(var(--r) * 50deg)) rotateY(calc(var(--r) * 0deg)) rotateZ(calc(var(--r) * 0deg)) scale(0.9); }
.m-hero[data-hs-in="1"] { --si: translate3d(calc(var(--d) * 240px), calc(var(--d) * -100px), calc(var(--d) * -300px)) rotateX(calc(var(--r) * 6deg)) rotateY(calc(var(--r) * -36deg)) rotateZ(calc(var(--r) * 7deg)) scale(0.75); --ci: translate3d(calc(var(--d) * -240px), calc(var(--d) * 0px), calc(var(--d) * 0px)) rotateX(calc(var(--r) * 0deg)) rotateY(calc(var(--r) * -40deg)) rotateZ(calc(var(--r) * 0deg)) scale(0.9); }
.m-hero[data-hs-out="2"] { --so: translate3d(calc(var(--d) * 0px), calc(var(--d) * 240px), calc(var(--d) * -320px)) rotateX(calc(var(--r) * 34deg)) rotateY(calc(var(--r) * 0deg)) rotateZ(calc(var(--r) * 0deg)) scale(0.72); --co: translate3d(calc(var(--d) * -200px), calc(var(--d) * 40px), calc(var(--d) * 0px)) rotateX(calc(var(--r) * 0deg)) rotateY(calc(var(--r) * 0deg)) rotateZ(calc(var(--r) * -8deg)) scale(0.9); }
.m-hero[data-hs-in="2"] { --si: translate3d(calc(var(--d) * 0px), calc(var(--d) * -240px), calc(var(--d) * -300px)) rotateX(calc(var(--r) * -30deg)) rotateY(calc(var(--r) * 0deg)) rotateZ(calc(var(--r) * -5deg)) scale(0.74); --ci: translate3d(calc(var(--d) * 0px), calc(var(--d) * 90px), calc(var(--d) * 0px)) rotateX(calc(var(--r) * 40deg)) rotateY(calc(var(--r) * 0deg)) rotateZ(calc(var(--r) * 0deg)) scale(0.9); }
.m-hero[data-hs-out="3"] { --so: translate3d(calc(var(--d) * 0px), calc(var(--d) * -230px), calc(var(--d) * -300px)) rotateX(calc(var(--r) * -34deg)) rotateY(calc(var(--r) * 0deg)) rotateZ(calc(var(--r) * 10deg)) scale(0.72); --co: translate3d(calc(var(--d) * 0px), calc(var(--d) * 90px), calc(var(--d) * 0px)) rotateX(calc(var(--r) * -45deg)) rotateY(calc(var(--r) * 0deg)) rotateZ(calc(var(--r) * 0deg)) scale(0.9); }
.m-hero[data-hs-in="3"] { --si: translate3d(calc(var(--d) * 0px), calc(var(--d) * 230px), calc(var(--d) * -320px)) rotateX(calc(var(--r) * 30deg)) rotateY(calc(var(--r) * 0deg)) rotateZ(calc(var(--r) * -10deg)) scale(0.72); --ci: translate3d(calc(var(--d) * -220px), calc(var(--d) * -30px), calc(var(--d) * 0px)) rotateX(calc(var(--r) * 0deg)) rotateY(calc(var(--r) * 0deg)) rotateZ(calc(var(--r) * 8deg)) scale(0.9); }
.m-hero[data-hs-out="4"] { --so: translate3d(calc(var(--d) * 0px), calc(var(--d) * 0px), calc(var(--d) * -520px)) rotateX(calc(var(--r) * 12deg)) rotateY(calc(var(--r) * 0deg)) rotateZ(calc(var(--r) * -14deg)) scale(0.35); --co: translate3d(calc(var(--d) * -140px), calc(var(--d) * -50px), calc(var(--d) * -200px)) rotateX(calc(var(--r) * 0deg)) rotateY(calc(var(--r) * 50deg)) rotateZ(calc(var(--r) * 0deg)) scale(0.7); }
.m-hero[data-hs-in="4"] { --si: translate3d(calc(var(--d) * 0px), calc(var(--d) * 0px), calc(var(--d) * -560px)) rotateX(calc(var(--r) * -10deg)) rotateY(calc(var(--r) * 0deg)) rotateZ(calc(var(--r) * 14deg)) scale(0.35); --ci: translate3d(calc(var(--d) * 0px), calc(var(--d) * 0px), calc(var(--d) * -300px)) rotateX(calc(var(--r) * 0deg)) rotateY(calc(var(--r) * 0deg)) rotateZ(calc(var(--r) * 10deg)) scale(0.6); }
.m-hero[data-hs-out="5"] { --so: translate3d(calc(var(--d) * 280px), calc(var(--d) * -160px), calc(var(--d) * -240px)) rotateX(calc(var(--r) * 20deg)) rotateY(calc(var(--r) * -55deg)) rotateZ(calc(var(--r) * 12deg)) scale(0.7); --co: translate3d(calc(var(--d) * -260px), calc(var(--d) * 60px), calc(var(--d) * 0px)) rotateX(calc(var(--r) * 0deg)) rotateY(calc(var(--r) * 0deg)) rotateZ(calc(var(--r) * 10deg)) scale(0.9); }
.m-hero[data-hs-in="5"] { --si: translate3d(calc(var(--d) * -280px), calc(var(--d) * 160px), calc(var(--d) * -260px)) rotateX(calc(var(--r) * -18deg)) rotateY(calc(var(--r) * 50deg)) rotateZ(calc(var(--r) * -12deg)) scale(0.7); --ci: translate3d(calc(var(--d) * 0px), calc(var(--d) * -80px), calc(var(--d) * 0px)) rotateX(calc(var(--r) * 50deg)) rotateY(calc(var(--r) * 0deg)) rotateZ(calc(var(--r) * 0deg)) scale(0.9); }
.m-hero.m-section-active.is-exit .m-hs-scene { animation: m-hs-out .7s cubic-bezier(.55,0,.85,.35) both; }
.m-hero.m-section-active.is-enter .m-hs-scene { animation: m-hs-in 1.1s cubic-bezier(.12,.85,.2,1) both; }
.m-hero.m-section-active.is-exit .m-hero-copy .m-kicker, .m-hero.m-section-active.is-exit .m-hero-copy h1, .m-hero.m-section-active.is-exit .m-hero-copy .m-hero-line { animation: m-copy-out .58s cubic-bezier(.55,0,.85,.35) var(--cd) both; }
.m-hero.m-section-active.is-enter .m-hero-copy .m-kicker, .m-hero.m-section-active.is-enter .m-hero-copy h1, .m-hero.m-section-active.is-enter .m-hero-copy .m-hero-line { animation: m-copy-in .95s cubic-bezier(.12,.85,.2,1) var(--cd) both; }
@keyframes m-hs-out { from { opacity: 1; transform: perspective(1400px) translate3d(0,0,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); } 35% { opacity: 1; } to { opacity: 0; transform: perspective(1400px) var(--so); } }
@keyframes m-hs-in { from { opacity: 0; transform: perspective(1400px) var(--si); } 35% { opacity: 1; } to { opacity: 1; transform: perspective(1400px) translate3d(0,0,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); } }
@keyframes m-copy-out { from { opacity: 1; transform: perspective(900px) translate3d(0,0,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); } to { opacity: 0; transform: perspective(900px) var(--co); } }
@keyframes m-copy-in { from { opacity: 0; transform: perspective(900px) var(--ci); } to { opacity: 1; transform: perspective(900px) translate3d(0,0,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); } }

.m-wordmark img { background: none; }
.m-wordmark .m-logo-footer { display: block; }

/* Scroll motion across the landing page. JS toggles .is-visible (in view) and .is-past (left through the top) on .m-reveal.
   Each surface moves as one whole plane with its own entry and exit transform. Rest state is identity. Requires :root.m-motion; absent for no-JS, reduced motion and ?motion=off. */
.m-footer { overflow: clip; }
.m-motion .m-reveal { --fx: perspective(900px) translate3d(0px,50px,0) rotateX(20deg) rotateY(0deg) rotateZ(0deg) scale(1); --fo: perspective(900px) translate3d(0px,-40px,0) rotateX(-14deg) rotateY(0deg) rotateZ(0deg) scale(0.96); opacity: 0; transform: var(--fx); will-change: transform, opacity; transition: opacity .6s ease, transform 1s cubic-bezier(.16,.84,.24,1); transition-delay: var(--rd, 0s); }
.m-motion .m-reveal.is-past { transform: var(--fo); }
.m-motion .m-reveal.is-visible { opacity: 1; transform: perspective(900px) translate3d(0px,0px,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); will-change: auto; }
.m-motion .m-reveal-delay { --rd: .12s; }
.m-motion .m-step:nth-child(2), .m-motion .m-faq-item:nth-child(even) { --rd: .1s; }
.m-motion .m-step:nth-child(3) { --rd: .2s; }
.m-motion .m-principle:nth-of-type(2) { --rd: .08s; } .m-motion .m-principle:nth-of-type(3) { --rd: .16s; }
.m-motion .m-statement .m-kicker.m-reveal { --fx: perspective(900px) translate3d(-70px,0px,0) rotateX(0deg) rotateY(30deg) rotateZ(0deg) scale(1); --fo: perspective(900px) translate3d(70px,0px,0) rotateX(0deg) rotateY(-30deg) rotateZ(0deg) scale(1); }
.m-motion .m-statement p.m-reveal { --fx: perspective(900px) translate3d(0px,60px,0) rotateX(40deg) rotateY(0deg) rotateZ(0deg) scale(0.94); --fo: perspective(900px) translate3d(0px,-50px,0) rotateX(-30deg) rotateY(0deg) rotateZ(0deg) scale(0.96); }
.m-motion .m-how-heading.m-reveal { --fx: perspective(900px) translate3d(-90px,0px,0) rotateX(0deg) rotateY(18deg) rotateZ(-1deg) scale(1); --fo: perspective(900px) translate3d(90px,0px,0) rotateX(0deg) rotateY(-18deg) rotateZ(1deg) scale(1); }
.m-motion .m-wizard-media.m-reveal { --fx: perspective(900px) translate3d(80px,20px,0) rotateX(0deg) rotateY(-16deg) rotateZ(1.5deg) scale(0.88); --fo: perspective(900px) translate3d(-80px,-20px,0) rotateX(0deg) rotateY(16deg) rotateZ(-1.5deg) scale(0.92); }
.m-motion .m-step:nth-child(1).m-reveal { --fx: perspective(900px) translate3d(0px,60px,0) rotateX(-30deg) rotateY(0deg) rotateZ(-4deg) scale(1); --fo: perspective(900px) translate3d(0px,-50px,0) rotateX(24deg) rotateY(0deg) rotateZ(3deg) scale(1); }
.m-motion .m-step:nth-child(2).m-reveal { --fx: perspective(900px) translate3d(0px,70px,0) rotateX(-30deg) rotateY(0deg) rotateZ(3deg) scale(1); --fo: perspective(900px) translate3d(0px,-50px,0) rotateX(24deg) rotateY(0deg) rotateZ(-3deg) scale(1); }
.m-motion .m-step:nth-child(3).m-reveal { --fx: perspective(900px) translate3d(0px,60px,0) rotateX(-30deg) rotateY(0deg) rotateZ(-3deg) scale(1); --fo: perspective(900px) translate3d(0px,-50px,0) rotateX(24deg) rotateY(0deg) rotateZ(4deg) scale(1); }
.m-motion .m-details-head.m-reveal { --fx: perspective(900px) translate3d(100px,0px,0) rotateX(0deg) rotateY(-20deg) rotateZ(2deg) scale(1); --fo: perspective(900px) translate3d(-100px,0px,0) rotateX(0deg) rotateY(20deg) rotateZ(-2deg) scale(1); }
.m-motion .m-principle:nth-of-type(1).m-reveal { --fx: perspective(900px) translate3d(-140px,0px,0) rotateX(0deg) rotateY(34deg) rotateZ(0deg) scale(1); --fo: perspective(900px) translate3d(140px,0px,0) rotateX(0deg) rotateY(-34deg) rotateZ(0deg) scale(1); }
.m-motion .m-principle:nth-of-type(2).m-reveal { --fx: perspective(900px) translate3d(140px,0px,0) rotateX(0deg) rotateY(-34deg) rotateZ(0deg) scale(1); --fo: perspective(900px) translate3d(-140px,0px,0) rotateX(0deg) rotateY(34deg) rotateZ(0deg) scale(1); }
.m-motion .m-principle:nth-of-type(3).m-reveal { --fx: perspective(900px) translate3d(-140px,0px,0) rotateX(0deg) rotateY(34deg) rotateZ(0deg) scale(1); --fo: perspective(900px) translate3d(140px,0px,0) rotateX(0deg) rotateY(-34deg) rotateZ(0deg) scale(1); }
.m-motion .m-principles .m-clarification.m-reveal { --fx: perspective(900px) translate3d(0px,40px,0) rotateX(20deg) rotateY(0deg) rotateZ(0deg) scale(1); --fo: perspective(900px) translate3d(0px,-30px,0) rotateX(-14deg) rotateY(0deg) rotateZ(0deg) scale(1); }
.m-motion .m-coming h2.m-reveal { --fx: perspective(900px) translate3d(0px,-44px,0) rotateX(36deg) rotateY(0deg) rotateZ(0deg) scale(0.96); --fo: perspective(900px) translate3d(0px,40px,0) rotateX(-30deg) rotateY(0deg) rotateZ(0deg) scale(0.96); }
.m-motion .m-coming-list.m-reveal { --fx: perspective(900px) translate3d(90px,0px,0) rotateX(0deg) rotateY(-14deg) rotateZ(1.5deg) scale(1); --fo: perspective(900px) translate3d(-90px,0px,0) rotateX(0deg) rotateY(14deg) rotateZ(-1.5deg) scale(1); }
.m-motion .m-coming .m-integration-note.m-reveal { --fx: perspective(900px) translate3d(0px,40px,0) rotateX(20deg) rotateY(0deg) rotateZ(0deg) scale(1); --fo: perspective(900px) translate3d(0px,-30px,0) rotateX(-14deg) rotateY(0deg) rotateZ(0deg) scale(1); }
.m-motion .m-showcase-head.m-reveal { --fx: perspective(900px) translate3d(-90px,0px,0) rotateX(0deg) rotateY(16deg) rotateZ(-1.5deg) scale(1); --fo: perspective(900px) translate3d(90px,0px,0) rotateX(0deg) rotateY(-16deg) rotateZ(1.5deg) scale(1); }
.m-motion .m-showcase-frame.m-reveal { --fx: perspective(900px) translate3d(0px,90px,0) rotateX(18deg) rotateY(0deg) rotateZ(0deg) scale(0.9); --fo: perspective(900px) translate3d(0px,-70px,0) rotateX(-14deg) rotateY(0deg) rotateZ(0deg) scale(0.94); }
.m-motion .m-pricing-inner.m-reveal { --fx: perspective(900px) translate3d(0px,50px,0) rotateX(26deg) rotateY(0deg) rotateZ(0deg) scale(0.9); --fo: perspective(900px) translate3d(0px,-40px,0) rotateX(-20deg) rotateY(0deg) rotateZ(0deg) scale(0.94); }
.m-motion .m-faq h2.m-reveal { --fx: perspective(900px) translate3d(-90px,0px,0) rotateX(0deg) rotateY(26deg) rotateZ(-2deg) scale(1); --fo: perspective(900px) translate3d(90px,0px,0) rotateX(0deg) rotateY(-26deg) rotateZ(2deg) scale(1); }
.m-motion .m-faq-item:nth-child(odd).m-reveal { --fx: perspective(900px) translate3d(-100px,0px,0) rotateX(0deg) rotateY(22deg) rotateZ(-1deg) scale(1); --fo: perspective(900px) translate3d(100px,0px,0) rotateX(0deg) rotateY(-22deg) rotateZ(1deg) scale(1); }
.m-motion .m-faq-item:nth-child(even).m-reveal { --fx: perspective(900px) translate3d(100px,0px,0) rotateX(0deg) rotateY(-22deg) rotateZ(1deg) scale(1); --fo: perspective(900px) translate3d(-100px,0px,0) rotateX(0deg) rotateY(22deg) rotateZ(-1deg) scale(1); }
.m-motion .m-final h2.m-reveal { --fx: perspective(900px) translate3d(0px,80px,0) rotateX(30deg) rotateY(0deg) rotateZ(0deg) scale(0.9); --fo: perspective(900px) translate3d(0px,-60px,0) rotateX(-24deg) rotateY(0deg) rotateZ(0deg) scale(0.94); }
.m-motion .m-final .m-cta.m-reveal { --fx: perspective(900px) translate3d(0px,40px,0) rotateX(0deg) rotateY(0deg) rotateZ(-8deg) scale(0.6); --fo: perspective(900px) translate3d(0px,-30px,0) rotateX(0deg) rotateY(0deg) rotateZ(6deg) scale(0.8); }
.m-motion .m-footer-top.m-reveal { --fx: perspective(900px) translate3d(0px,44px,0) rotateX(18deg) rotateY(0deg) rotateZ(0deg) scale(1); --fo: perspective(900px) translate3d(0px,-30px,0) rotateX(-10deg) rotateY(0deg) rotateZ(0deg) scale(1); }
.m-motion .m-footer-bottom.m-reveal { --fx: perspective(900px) translate3d(0px,30px,0) rotateX(10deg) rotateY(0deg) rotateZ(0deg) scale(1); --fo: perspective(900px) translate3d(0px,-20px,0) rotateX(-8deg) rotateY(0deg) rotateZ(0deg) scale(1); }
.m-motion .m-cta.m-reveal.is-visible:hover { transform: perspective(900px) translate3d(0,-2px,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); }
:root.m-fx-paused .m-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (max-width: 600px) { .m-motion .m-reveal { --fx: perspective(900px) translate3d(0px,34px,0) rotateX(14deg) rotateY(0deg) rotateZ(0deg) scale(1); --fo: perspective(900px) translate3d(0px,-26px,0) rotateX(-10deg) rotateY(0deg) rotateZ(0deg) scale(0.97); } .m-motion .m-reveal[class*="m-"] { transition-duration: .8s; } }
@media (prefers-reduced-motion: reduce) { .m-motion .m-reveal, :root .m-reveal { opacity: 1 !important; transform: none !important; } }

/* Larger header logo */
.m-nav-inner { height: 114px; }
.m-wordmark { width: clamp(260px, 22vw, 310px); height: auto; aspect-ratio: 900 / 320; }
.m-footer .m-wordmark { width: clamp(176px, 18vw, 220px); }
@media (max-width: 900px) { .m-nav-inner { height: 88px; } .m-wordmark { width: 220px; } .m-footer .m-wordmark { width: 180px; } }
@media (max-width: 600px) { .m-nav-inner { height: 76px; } .m-wordmark { width: 140px; } .m-footer .m-wordmark { width: 150px; } }
@media (max-width: 360px) { .m-wordmark { width: 124px; } .m-nav-inner { gap: 8px; } }

/* Gap closure: carousel wrapper, setup clarification and showcase CTA join the scroll system; integration note rides .m-coming-list. */
.m-motion .m-craft-reveal.m-reveal { --fx: perspective(900px) translate3d(0px,80px,0) rotateX(16deg) rotateY(0deg) rotateZ(0deg) scale(0.92); --fo: perspective(900px) translate3d(0px,-60px,0) rotateX(-12deg) rotateY(0deg) rotateZ(0deg) scale(0.95); }
.m-motion .m-how .m-clarification.m-reveal { --fx: perspective(900px) translate3d(-60px,0px,0) rotateX(0deg) rotateY(20deg) rotateZ(0deg) scale(1); --fo: perspective(900px) translate3d(60px,0px,0) rotateX(0deg) rotateY(-20deg) rotateZ(0deg) scale(1); }
.m-motion .m-showcase-cta.m-reveal { --fx: perspective(900px) translate3d(0px,30px,0) rotateX(0deg) rotateY(0deg) rotateZ(-6deg) scale(0.8); --fo: perspective(900px) translate3d(0px,-24px,0) rotateX(0deg) rotateY(0deg) rotateZ(5deg) scale(0.9); }
@media (max-width: 600px) {
  .m-motion .m-craft-reveal.m-reveal { --fx: perspective(900px) translate3d(0px,44px,0) rotateX(10deg) rotateY(0deg) rotateZ(0.0deg) scale(0.952); --fo: perspective(900px) translate3d(0px,-33px,0) rotateX(-7deg) rotateY(0deg) rotateZ(0.0deg) scale(0.97); }
  .m-motion .m-how .m-clarification.m-reveal { --fx: perspective(900px) translate3d(-17px,0px,0) rotateX(0deg) rotateY(10deg) rotateZ(0.0deg) scale(1.0); --fo: perspective(900px) translate3d(17px,0px,0) rotateX(0deg) rotateY(-10deg) rotateZ(0.0deg) scale(1.0); }
  .m-motion .m-showcase-cta.m-reveal { --fx: perspective(900px) translate3d(0px,16px,0) rotateX(0deg) rotateY(0deg) rotateZ(-3.5999999999999996deg) scale(0.88); --fo: perspective(900px) translate3d(0px,-13px,0) rotateX(0deg) rotateY(0deg) rotateZ(3.0deg) scale(0.94); }
  .m-motion .m-statement .m-kicker.m-reveal { --fx: perspective(900px) translate3d(-20px,0px,0) rotateX(0deg) rotateY(15deg) rotateZ(0.0deg) scale(1.0); --fo: perspective(900px) translate3d(20px,0px,0) rotateX(0deg) rotateY(-15deg) rotateZ(0.0deg) scale(1.0); }
  .m-motion .m-statement p.m-reveal { --fx: perspective(900px) translate3d(0px,33px,0) rotateX(24deg) rotateY(0deg) rotateZ(0.0deg) scale(0.964); --fo: perspective(900px) translate3d(0px,-28px,0) rotateX(-18deg) rotateY(0deg) rotateZ(0.0deg) scale(0.976); }
  .m-motion .m-how-heading.m-reveal { --fx: perspective(900px) translate3d(-25px,0px,0) rotateX(0deg) rotateY(9deg) rotateZ(-0.6deg) scale(1.0); --fo: perspective(900px) translate3d(25px,0px,0) rotateX(0deg) rotateY(-9deg) rotateZ(0.6deg) scale(1.0); }
  .m-motion .m-wizard-media.m-reveal { --fx: perspective(900px) translate3d(22px,11px,0) rotateX(0deg) rotateY(-8deg) rotateZ(0.8999999999999999deg) scale(0.928); --fo: perspective(900px) translate3d(-22px,-11px,0) rotateX(0deg) rotateY(8deg) rotateZ(-0.8999999999999999deg) scale(0.952); }
  .m-motion .m-step:nth-child(1).m-reveal { --fx: perspective(900px) translate3d(0px,33px,0) rotateX(-18deg) rotateY(0deg) rotateZ(-2.4deg) scale(1.0); --fo: perspective(900px) translate3d(0px,-28px,0) rotateX(14deg) rotateY(0deg) rotateZ(1.7999999999999998deg) scale(1.0); }
  .m-motion .m-step:nth-child(2).m-reveal { --fx: perspective(900px) translate3d(0px,38px,0) rotateX(-18deg) rotateY(0deg) rotateZ(1.7999999999999998deg) scale(1.0); --fo: perspective(900px) translate3d(0px,-28px,0) rotateX(14deg) rotateY(0deg) rotateZ(-1.7999999999999998deg) scale(1.0); }
  .m-motion .m-step:nth-child(3).m-reveal { --fx: perspective(900px) translate3d(0px,33px,0) rotateX(-18deg) rotateY(0deg) rotateZ(-1.7999999999999998deg) scale(1.0); --fo: perspective(900px) translate3d(0px,-28px,0) rotateX(14deg) rotateY(0deg) rotateZ(2.4deg) scale(1.0); }
  .m-motion .m-details-head.m-reveal { --fx: perspective(900px) translate3d(28px,0px,0) rotateX(0deg) rotateY(-10deg) rotateZ(1.2deg) scale(1.0); --fo: perspective(900px) translate3d(-28px,0px,0) rotateX(0deg) rotateY(10deg) rotateZ(-1.2deg) scale(1.0); }
  .m-motion .m-principle:nth-of-type(1).m-reveal { --fx: perspective(900px) translate3d(-39px,0px,0) rotateX(0deg) rotateY(17deg) rotateZ(0.0deg) scale(1.0); --fo: perspective(900px) translate3d(39px,0px,0) rotateX(0deg) rotateY(-17deg) rotateZ(0.0deg) scale(1.0); }
  .m-motion .m-principle:nth-of-type(2).m-reveal { --fx: perspective(900px) translate3d(39px,0px,0) rotateX(0deg) rotateY(-17deg) rotateZ(0.0deg) scale(1.0); --fo: perspective(900px) translate3d(-39px,0px,0) rotateX(0deg) rotateY(17deg) rotateZ(0.0deg) scale(1.0); }
  .m-motion .m-principle:nth-of-type(3).m-reveal { --fx: perspective(900px) translate3d(-39px,0px,0) rotateX(0deg) rotateY(17deg) rotateZ(0.0deg) scale(1.0); --fo: perspective(900px) translate3d(39px,0px,0) rotateX(0deg) rotateY(-17deg) rotateZ(0.0deg) scale(1.0); }
  .m-motion .m-principles .m-clarification.m-reveal { --fx: perspective(900px) translate3d(0px,22px,0) rotateX(12deg) rotateY(0deg) rotateZ(0.0deg) scale(1.0); --fo: perspective(900px) translate3d(0px,-16px,0) rotateX(-8deg) rotateY(0deg) rotateZ(0.0deg) scale(1.0); }
  .m-motion .m-coming h2.m-reveal { --fx: perspective(900px) translate3d(0px,-24px,0) rotateX(22deg) rotateY(0deg) rotateZ(0.0deg) scale(0.976); --fo: perspective(900px) translate3d(0px,22px,0) rotateX(-18deg) rotateY(0deg) rotateZ(0.0deg) scale(0.976); }
  .m-motion .m-coming-list.m-reveal { --fx: perspective(900px) translate3d(25px,0px,0) rotateX(0deg) rotateY(-7deg) rotateZ(0.8999999999999999deg) scale(1.0); --fo: perspective(900px) translate3d(-25px,0px,0) rotateX(0deg) rotateY(7deg) rotateZ(-0.8999999999999999deg) scale(1.0); }
  .m-motion .m-showcase-head.m-reveal { --fx: perspective(900px) translate3d(-25px,0px,0) rotateX(0deg) rotateY(8deg) rotateZ(-0.8999999999999999deg) scale(1.0); --fo: perspective(900px) translate3d(25px,0px,0) rotateX(0deg) rotateY(-8deg) rotateZ(0.8999999999999999deg) scale(1.0); }
  .m-motion .m-showcase-frame.m-reveal { --fx: perspective(900px) translate3d(0px,50px,0) rotateX(11deg) rotateY(0deg) rotateZ(0.0deg) scale(0.94); --fo: perspective(900px) translate3d(0px,-38px,0) rotateX(-8deg) rotateY(0deg) rotateZ(0.0deg) scale(0.964); }
  .m-motion .m-pricing-inner.m-reveal { --fx: perspective(900px) translate3d(0px,28px,0) rotateX(16deg) rotateY(0deg) rotateZ(0.0deg) scale(0.94); --fo: perspective(900px) translate3d(0px,-22px,0) rotateX(-12deg) rotateY(0deg) rotateZ(0.0deg) scale(0.964); }
  .m-motion .m-faq h2.m-reveal { --fx: perspective(900px) translate3d(-25px,0px,0) rotateX(0deg) rotateY(13deg) rotateZ(-1.2deg) scale(1.0); --fo: perspective(900px) translate3d(25px,0px,0) rotateX(0deg) rotateY(-13deg) rotateZ(1.2deg) scale(1.0); }
  .m-motion .m-faq-item:nth-child(odd).m-reveal { --fx: perspective(900px) translate3d(-28px,0px,0) rotateX(0deg) rotateY(11deg) rotateZ(-0.6deg) scale(1.0); --fo: perspective(900px) translate3d(28px,0px,0) rotateX(0deg) rotateY(-11deg) rotateZ(0.6deg) scale(1.0); }
  .m-motion .m-faq-item:nth-child(even).m-reveal { --fx: perspective(900px) translate3d(28px,0px,0) rotateX(0deg) rotateY(-11deg) rotateZ(0.6deg) scale(1.0); --fo: perspective(900px) translate3d(-28px,0px,0) rotateX(0deg) rotateY(11deg) rotateZ(-0.6deg) scale(1.0); }
  .m-motion .m-final h2.m-reveal { --fx: perspective(900px) translate3d(0px,44px,0) rotateX(18deg) rotateY(0deg) rotateZ(0.0deg) scale(0.94); --fo: perspective(900px) translate3d(0px,-33px,0) rotateX(-14deg) rotateY(0deg) rotateZ(0.0deg) scale(0.964); }
  .m-motion .m-final .m-cta.m-reveal { --fx: perspective(900px) translate3d(0px,22px,0) rotateX(0deg) rotateY(0deg) rotateZ(-4.8deg) scale(0.76); --fo: perspective(900px) translate3d(0px,-16px,0) rotateX(0deg) rotateY(0deg) rotateZ(3.5999999999999996deg) scale(0.88); }
  .m-motion .m-footer-top.m-reveal { --fx: perspective(900px) translate3d(0px,24px,0) rotateX(11deg) rotateY(0deg) rotateZ(0.0deg) scale(1.0); --fo: perspective(900px) translate3d(0px,-16px,0) rotateX(-6deg) rotateY(0deg) rotateZ(0.0deg) scale(1.0); }
  .m-motion .m-footer-bottom.m-reveal { --fx: perspective(900px) translate3d(0px,16px,0) rotateX(6deg) rotateY(0deg) rotateZ(0.0deg) scale(1.0); --fo: perspective(900px) translate3d(0px,-11px,0) rotateX(-5deg) rotateY(0deg) rotateZ(0.0deg) scale(1.0); }
}
/* One-time header arrival: nav stays usable (animation ends at identity, never hides pointer targets for long). */
.m-motion .m-nav .m-wordmark { animation: m-nav-logo 1.1s cubic-bezier(.16,.84,.24,1) .1s both; }
.m-motion .m-nav .m-nav-links { animation: m-nav-menu .9s cubic-bezier(.16,.84,.24,1) .25s both; }
@keyframes m-nav-logo { from { opacity: 0; transform: perspective(900px) translate3d(-40px,-18px,0) rotateY(24deg) scale(.88); } to { opacity: 1; transform: perspective(900px) translate3d(0,0,0) rotateY(0deg) scale(1); } }
@keyframes m-nav-menu { from { opacity: 0; transform: translate3d(0,-22px,0); } to { opacity: 1; transform: translate3d(0,0,0); } }
@media (prefers-reduced-motion: reduce) { .m-motion .m-nav .m-wordmark, .m-motion .m-nav .m-nav-links { animation: none; } }
/* Preserve room for the enlarged mark, sign-in, theme and signup on narrow phones.
   Pricing remains accessible from the pricing section and footer. */
@media (max-width: 430px) { .m-nav-links a[href="/pricing"] { display: none; } }
/* Keep both discovery links available on narrow marketing headers. */
@media (max-width: 600px) {
  .m-nav .m-nav-inner { height: auto; min-height: 110px; padding-block: 8px; flex-direction: column; justify-content: center; gap: 5px; }
  .m-nav .m-nav-links { width: 100%; justify-content: center; flex-wrap: wrap; gap: 8px; }
  .m-nav .m-nav-links a[href="/pricing"], .m-nav .m-nav-links a[href="/compare"] { display: inline-flex; }
}

/* ===== Shared dark band system. One gradient token for every dark area (bands in both themes, footer). Hero keeps its own artwork. ===== */
:root {
  --m-dark-grad: radial-gradient(70% 90% at 88% 0%, rgba(135,67,83,.34), transparent 68%), radial-gradient(55% 75% at 0% 100%, rgba(206,146,139,.13), transparent 70%), linear-gradient(180deg, #0b090a, #130d10);
}
:root #top > section.m-band-light {
  --band-bg: var(--m-ivory); --band-fg: var(--m-ink); --band-muted: var(--m-muted); --band-line: var(--m-line);
  background: var(--band-bg); color: var(--band-fg);
}
:root #top > section.m-band-dark, :root[data-theme="dark"] #top > section.m-band-dark {
  color-scheme: dark; --band-bg: #0c090b; --band-fg: #f3ebe2; --band-muted: #c1b1ae; --band-line: rgba(243,235,226,.2);
  --m-accent: #e0aaa0; --m-paper: #1a1316;
  background-color: #0c090b; background-image: var(--m-dark-grad); color: #f3ebe2;
}
:root[data-theme="dark"] #top > section.m-band-light {
  color-scheme: light; --band-bg: #ffffff; --band-fg: #38282b; --band-muted: #796c6c; --band-line: rgba(56, 40, 43, .19);
  --m-accent: #874353; --m-paper: #ffffff; --m-ink: #38282b;
  background: #ffffff; color: #38282b;
}
.m-footer, .m-pricing-page .m-footer { background-color: #0c090b; background-image: var(--m-dark-grad); }

/* The public homepage stays white between its dark hero and footer, in both modes.
   Scope the palette locally so pricing and merchant storefronts are untouched. */
:root:root #top > section:not(.m-hero) {
  color-scheme: light;
  --band-bg: #ffffff; --band-fg: #38282b; --band-muted: #675c60; --band-line: rgba(56,40,43,.19);
  --m-paper: #ffffff; --m-ivory: #ffffff; --m-ink: #38282b; --m-muted: #675c60;
  --m-accent: #874353; --m-line: rgba(56,40,43,.19);
  --m-dark: #ffffff; --m-dark-ink: #38282b; --m-dark-muted: #675c60; --m-dark-line: rgba(56,40,43,.19);
  background: #ffffff; color: #38282b;
}

/* ===== Promise carousel (highlight, immediately after hero) ===== */
.m-principles { padding: clamp(56px, 7vw, 96px) 0 clamp(60px, 7vw, 100px); }
.m-promise-wrap { max-width: 1120px; }
.m-promise { outline-offset: 6px; }
.m-promise-stage { position: relative; display: grid; overflow: hidden; isolation: isolate; border-radius: 4px; border: 1px solid rgba(224,170,160,.28);
  background-color: #0c090b; background-image: var(--m-dark-grad); color: #f3ebe2; min-height: clamp(280px, 34vw, 400px); box-shadow: 0 30px 60px -34px rgba(20,10,14,.6); }
.m-promise-stage::before { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(243,235,226,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(243,235,226,.05) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 10%, transparent 72%); mask-image: radial-gradient(ellipse at 70% 40%, #000 10%, transparent 72%); }
.m-promise-slide { --dir: 1; position: relative; z-index: 1; grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: clamp(28px, 5vw, 64px); }
.m-promise.is-reverse .m-promise-slide { --dir: -1; }
.m-promise-no { color: #e0aaa0; font-size: 12px; letter-spacing: .16em; font-variant-numeric: tabular-nums; }
.m-promise-no i { color: #c1b1ae; font-style: normal; }
.m-promise .m-principle { margin: 0; padding: 0; border: 0; max-width: 15em; font-size: clamp(36px, 6.2vw, 82px); font-weight: 400; line-height: 1.02; letter-spacing: -.06em; text-wrap: balance; color: #f6efe7; }
.m-promise .m-principle:first-child, .m-promise .m-principle:nth-child(2), .m-promise .m-principle:nth-child(3) { padding-left: 0; border: 0; }
.m-promise-slide::after { content: ""; width: 72px; height: 3px; background: var(--m-rose); }
.m-promise.is-enhanced .m-promise-slide { visibility: hidden; opacity: 0; }
.m-promise.is-enhanced .m-promise-slide.is-active, .m-promise.is-enhanced .m-promise-slide.is-out { visibility: visible; opacity: 1; }
.m-promise:not(.is-enhanced) .m-promise-stage { display: block; }
.m-promise:not(.is-enhanced) .m-promise-slide + .m-promise-slide { border-top: 1px solid rgba(243,235,226,.14); }
.m-promise:not(.is-enhanced) .m-promise-controls { display: none; }
.m-promise-controls { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.m-promise-arrow, .m-promise-play { height: 40px; min-width: 42px; display: inline-grid; place-items: center; padding: 0 10px; border: 1px solid var(--band-line); background: transparent; color: var(--band-fg); font-size: 15px; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.m-promise-play { min-width: 74px; margin-left: auto; font-size: 11px; }
.m-promise-arrow:hover, .m-promise-play:hover:not(:disabled) { color: var(--band-bg); background: var(--band-fg); border-color: var(--band-fg); }
.m-promise-play:disabled { opacity: .6; cursor: default; }
.m-promise-dots { display: flex; gap: 8px; }
.m-promise-dot { position: relative; width: 56px; height: 40px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.m-promise-dot::before, .m-promise-dot::after { content: ""; position: absolute; left: 0; right: 0; top: 18px; height: 3px; }
.m-promise-dot::before { background: var(--band-line); }
.m-promise-dot::after { background: var(--m-accent); transform: scaleX(0); transform-origin: left; }
.m-promise-dot[aria-current="true"]::after { transform: scaleX(1); }
.m-motion.m-motion .m-section-active .m-promise.is-enhanced .m-promise-dot[aria-current="true"]::after { transform: scaleX(0); animation: m-pr-progress 5.6s linear both; }
.m-promise.is-paused .m-promise-dot::after, .m-promise:hover .m-promise-dot::after, .m-promise:focus-within .m-promise-dot::after, :root.m-fx-paused .m-promise-dot::after { animation-play-state: paused !important; }
/* Whole-plane exits and entrances. Per-slide trajectories, mirrored by --dir for previous. */
.m-motion .m-promise.is-flying .m-promise-slide.is-active { animation: m-pr-in .95s cubic-bezier(.12,.85,.2,1) both; }
.m-motion .m-promise.is-flying .m-promise-slide.is-out { animation: m-pr-out .75s cubic-bezier(.55,0,.85,.35) both; }
:root.m-fx-paused .m-promise-slide, :root:not(.m-motion) .m-promise-slide { animation: none !important; }
:root.m-fx-paused .m-promise-slide.is-out, :root:not(.m-motion) .m-promise-slide.is-out { visibility: hidden; opacity: 0; }
.m-promise-slide[data-pv="0"] { --pin: perspective(1100px) translate3d(calc(var(--dir) * 220px),0px,0) rotateX(0deg) rotateY(calc(var(--dir) * -38deg)) rotateZ(0deg) scale(0.9); --pout: perspective(1100px) translate3d(calc(var(--dir) * -220px),0px,0) rotateX(0deg) rotateY(calc(var(--dir) * 38deg)) rotateZ(0deg) scale(0.9); }
.m-promise-slide[data-pv="1"] { --pin: perspective(1100px) translate3d(0px,calc(var(--dir) * 140px),0) rotateX(calc(var(--dir) * -45deg)) rotateY(0deg) rotateZ(0deg) scale(0.92); --pout: perspective(1100px) translate3d(0px,calc(var(--dir) * -140px),0) rotateX(calc(var(--dir) * 45deg)) rotateY(0deg) rotateZ(0deg) scale(0.92); }
.m-promise-slide[data-pv="2"] { --pin: perspective(1100px) translate3d(0px,0px,0) rotateX(0deg) rotateY(0deg) rotateZ(calc(var(--dir) * -12deg)) scale(0.55); --pout: perspective(1100px) translate3d(0px,0px,0) rotateX(0deg) rotateY(0deg) rotateZ(calc(var(--dir) * 12deg)) scale(1.35); }
@media (max-width: 600px) {
  .m-promise-slide[data-pv="0"] { --pin: perspective(1100px) translate3d(calc(var(--dir) * 88.0px),0px,0) rotateX(0deg) rotateY(calc(var(--dir) * -38deg)) rotateZ(0deg) scale(0.9); --pout: perspective(1100px) translate3d(calc(var(--dir) * -88.0px),0px,0) rotateX(0deg) rotateY(calc(var(--dir) * 38deg)) rotateZ(0deg) scale(0.9); }
  .m-promise-slide[data-pv="1"] { --pin: perspective(1100px) translate3d(0px,calc(var(--dir) * 56.0px),0) rotateX(calc(var(--dir) * -45deg)) rotateY(0deg) rotateZ(0deg) scale(0.92); --pout: perspective(1100px) translate3d(0px,calc(var(--dir) * -56.0px),0) rotateX(calc(var(--dir) * 45deg)) rotateY(0deg) rotateZ(0deg) scale(0.92); }
  .m-promise-slide[data-pv="2"] { --pin: perspective(1100px) translate3d(0px,0px,0) rotateX(0deg) rotateY(0deg) rotateZ(calc(var(--dir) * -12deg)) scale(0.55); --pout: perspective(1100px) translate3d(0px,0px,0) rotateX(0deg) rotateY(0deg) rotateZ(calc(var(--dir) * 12deg)) scale(1.35); }
  .m-promise-dot { width: 44px; } .m-promise-controls { gap: 8px; } .m-promise-play { min-width: 62px; }
}
@keyframes m-pr-in { from { opacity: 0; transform: var(--pin); } 40% { opacity: 1; } to { opacity: 1; transform: perspective(1100px) translate3d(0px,0px,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); } }
@keyframes m-pr-out { from { opacity: 1; transform: perspective(1100px) translate3d(0px,0px,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); } to { opacity: 0; transform: var(--pout); } }
@keyframes m-pr-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Hero base uses the same token (artwork, grid, orbs and animation untouched). */
:root:root #top > section.m-hero { background-color: #09090a; background-image: var(--m-dark-grad); }
/* Dark mode solid headers, excluding the always-white pricing page. */
:root[data-theme="dark"] body:not(.m-pricing-document) .m-nav.is-solid { background-color: #0c090b; background-image: var(--m-dark-grad); }

/* ===== Free discovery (LeBrands.Space), directly after hero ===== */
.m-discovery { padding: clamp(60px, 8vw, 112px) 0; }
.m-ds-wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: center; max-width: 1120px; }
.m-ds-copy h2 { font-size: clamp(2rem, 4.4vw, 3.5rem); line-height: 1.04; margin: 0 0 18px; letter-spacing: -.02em; }
.m-ds-copy p { margin: 0; max-width: 30ch; font-size: clamp(1rem, 1.5vw, 1.18rem); line-height: 1.55; color: var(--band-muted); }
.m-ds-panel { margin: 0; min-width: 0; }
.m-ds-map { position: relative; border-radius: 18px; overflow: hidden; color: #f3ebe2; background-color: #0c090b; background-image: var(--m-dark-grad); border: 1px solid rgba(243,235,226,.14); box-shadow: 0 30px 60px -34px rgba(56,40,43,.55); }
.m-ds-map::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; border: 1.5px solid rgba(224,170,160,.9); opacity: 0; -webkit-mask: linear-gradient(110deg, transparent 30%, #000 50%, transparent 70%) 0 0 / 300% 100% no-repeat; mask: linear-gradient(110deg, transparent 30%, #000 50%, transparent 70%) 0 0 / 300% 100% no-repeat; }
.m-ds-bar { display: flex; align-items: center; gap: 6px; padding: 9px 14px; border-bottom: 1px solid rgba(243,235,226,.12); }
.m-ds-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(243,235,226,.28); }
.m-ds-bar span { margin-left: 8px; font-size: 12px; letter-spacing: .06em; color: #c1b1ae; }
.m-ds-shot { display: block; aspect-ratio: 16 / 9; background: #130d10; }
.m-ds-shot img { display: block; width: 100%; height: 100%; object-fit: contain; }
.m-ds-shot:focus-visible, .m-ds-link:focus-visible { outline: 2px solid var(--m-accent, #874353); outline-offset: 3px; }
.m-ds-panel figcaption { margin-top: 12px; font-size: .88rem; line-height: 1.5; color: var(--band-muted); }
.m-ds-link { color: inherit; font-weight: 600; text-underline-offset: 3px; overflow-wrap: anywhere; }
.m-motion .m-section-active.m-ds .m-ds-map::after { animation: m-ds-glow 12s ease-in-out infinite; }
@keyframes m-ds-glow { 0% { opacity: 0; -webkit-mask-position: 100% 0; mask-position: 100% 0; } 10% { opacity: .9; } 40% { opacity: .9; } 50%, 100% { opacity: 0; -webkit-mask-position: 0 0; mask-position: 0 0; } }
:root.m-fx-paused .m-ds *, :root.m-fx-paused .m-ds *::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .m-ds *, .m-ds *::after { animation: none !important; } }
@media (max-width: 800px) { .m-ds-wrap { grid-template-columns: minmax(0, 1fr); } .m-ds-copy p { max-width: 38ch; } }
/* Promises now sit in a dark band, directly under the ivory discovery band. */
.m-principles.m-band-dark .m-promise-stage { border: 1px solid rgba(243,235,226,.14); }
#top .m-principles .m-promise-stage { background: #ffffff; color: #38282b; border-color: var(--band-line); box-shadow: none; }
#top .m-principles .m-promise-stage::before { background-image: linear-gradient(rgba(56,40,43,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(56,40,43,.04) 1px,transparent 1px); }
#top .m-promise .m-principle { color: #38282b; }
#top .m-promise-no { color: #874353; }
#top .m-promise-no i { color: #675c60; }

/* ===== One continuous flowing ribbon layer across the homepage ===== */
#top { position: relative; }
.m-flow { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.m-flow svg { display: block; width: 100%; height: 100%; }
.m-flow path { fill: none; stroke: url(#m-flow-ink); vector-effect: non-scaling-stroke; stroke-linecap: round; }
.m-flow-a { stroke-width: 1.3px; opacity: .36; }
.m-flow-b { stroke-width: 1.1px; opacity: .3; }
/* Content sits above the ribbons, section backgrounds sit below them, so ribbons cross every band boundary. */
#top > section > .m-wrap, #top > section > .m-hero-inner { position: relative; z-index: 2; }
:root[data-theme="dark"] .m-flow-a { opacity: .4; }
:root[data-theme="dark"] .m-flow-b { opacity: .34; }
@media (max-width: 600px) { .m-flow-a { opacity: .3; } .m-flow-b { opacity: .26; } }

/* ===== Platform media frames: rounded, softly lifted, clipped cleanly (wizard video and craft captures) ===== */
.m-wizard-media, .m-craft-media {
  border-radius: clamp(14px, 2.2vw, 26px); isolation: isolate; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--band-fg) 16%, transparent);
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 28px 56px -30px rgba(56,40,43,.5), 0 8px 18px -12px rgba(56,40,43,.28);
}
:root[data-theme="dark"] .m-band-dark .m-wizard-media, :root[data-theme="dark"] .m-band-dark .m-craft-media { box-shadow: 0 0 0 1px rgba(243,235,226,.06) inset, 0 30px 60px -28px rgba(0,0,0,.75); }
.m-wizard-poster, .m-wizard-media video { border-radius: inherit; }
@media (max-width: 600px) { .m-wizard-media, .m-craft-media { border-radius: 14px; } }

/* Hero scene 1: premium storefront (desktop and phone) inside the carousel. */
.m-hs-tabs { grid-template-columns: repeat(7, minmax(0,1fr)); gap: 4px; }
.m-hs-tab { padding-inline: 6px; font-size: 10px; }
.m-hs:has(.m-hs-slide-store.is-active) .m-hs-kpis,
.m-hs:has(.m-hs-slide-store.is-active) .m-hs-chrome { display: none; }
.m-hs-slides { position: relative; }
.m-hs-card.m-hs-store { position: relative; display: block; min-height: 0; padding: 0; aspect-ratio: 1.62; overflow: visible; background: var(--m-paper); border-radius: 9px; }
.m-hs-store-desktop { position: absolute; inset: 0; overflow: hidden; border-radius: 9px; }
.m-hs-store-desktop picture, .m-hs-store-desktop img { display: block; width: 100%; height: 100%; }
.m-hs-store-desktop img { object-fit: cover; object-position: top; }
.m-hs-store-phone { position: absolute; z-index: 2; right: 12px; bottom: -14px; width: 21%; aspect-ratio: .49; padding: 4px; overflow: hidden; border-radius: 16px; background: #21191b; border: 1px solid rgba(255,255,255,.2); box-shadow: 0 16px 34px rgba(0,0,0,.45); }
.m-hs-store-phone picture, .m-hs-store-phone img { display: block; width: 100%; height: 100%; }
.m-hs-store-phone img { border-radius: 12px; object-fit: cover; }
.m-hs-store-cap { position: absolute; z-index: 3; left: 10px; bottom: 10px; padding: 5px 8px; background: rgba(52,37,40,.86); color: #f6f0e9; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.m-hs-slide-store .m-hs-copy { padding-top: 22px; }
.m-section-active .m-hs-slide-store.is-active .m-hs-store-desktop img { animation: none; }
@media (max-width: 600px) {
  .m-hs-tabs { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .m-hs-tab { font-size: 9.5px; padding-inline: 4px; }
  .m-hs-store-phone { width: 26%; right: 8px; border-radius: 12px; padding: 3px; }
  .m-hs-store-phone img { border-radius: 9px; }
  .m-hs-store-cap { font-size: 8px; left: 6px; bottom: 6px; }
}

/* Homepage header logo only, slightly smaller. */
.m-nav-home .m-wordmark { width: clamp(224px, 19vw, 264px); }
@media (max-width: 900px) { .m-nav-home .m-wordmark { width: 190px; } }
@media (max-width: 600px) { .m-nav-home .m-wordmark { width: 122px; } }
@media (max-width: 360px) { .m-nav-home .m-wordmark { width: 110px; } }
.m-hero[data-hs-out="6"] { --so: translate3d(calc(var(--d) * -260px), calc(var(--d) * -120px), calc(var(--d) * 180px)) rotateX(calc(var(--r) * -16deg)) rotateY(calc(var(--r) * -32deg)) rotateZ(calc(var(--r) * -8deg)) scale(.72); --co: translate3d(calc(var(--d) * -120px), calc(var(--d) * 40px), 0) rotateZ(calc(var(--r) * -8deg)); }
.m-hero[data-hs-in="6"] { --si: translate3d(calc(var(--d) * 260px), calc(var(--d) * -120px), calc(var(--d) * -360px)) rotateX(calc(var(--r) * 8deg)) rotateY(calc(var(--r) * -34deg)) rotateZ(calc(var(--r) * 6deg)) scale(.72); --ci: translate3d(calc(var(--d) * 80px), calc(var(--d) * -40px), 0) rotateZ(calc(var(--r) * 8deg)); }

/* Pricing page (scoped) */
body.m-pricing-document {
  --m-ink: #222222; --m-ivory: #ffffff; --m-paper: #ffffff;
  --m-muted: #555555; --m-accent: #874353; --m-line: #dddddd;
  --m-sans: Arial, Helvetica, sans-serif;
  background: #ffffff; color: #222222; color-scheme: light;
  font-family: var(--m-sans); font-size: 15px; line-height: 1.6;
}
:root body.m-pricing-document .m-pricing-page { background: #ffffff; color: #222222; }
:root body.m-pricing-document .m-nav { background: #ffffff; color: #222222; }
:root body.m-pricing-document .m-logo-light { display: block; }
:root body.m-pricing-document .m-logo-dark { display: none; }
body.m-pricing-document .m-footer { background: #ffffff; color: #222222; border-top: 1px solid #dddddd; }
body.m-pricing-document .m-footer-bottom { color: #555555; }
.m-pr-main { padding-top: 8px; }
.m-pr-wrap { width: var(--m-wrap); margin-inline: auto; }
.m-pr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.m-pr-hero { padding: 48px 0 32px; }
.m-pr-hero h1 { max-width: 820px; margin: 0 0 16px; font-size: clamp(28px, 3vw, 36px); font-weight: 600; line-height: 1.25; letter-spacing: normal; }
.m-pr-lede { max-width: 600px; margin: 0; color: var(--m-muted); font-size: 16px; line-height: 1.65; }
.m-pr-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.m-pr-free.m-pr-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, .45fr); gap: 36px; margin-bottom: 24px; }
.m-pr-free h2 { margin: 0; font-size: 22px; line-height: 1.3; font-weight: 600; letter-spacing: normal; }
.m-pr-free p { margin-block: 12px; }
.m-pr-free-features { margin: 16px 0 0; padding-left: 20px; color: var(--m-muted); line-height: 1.8; }
.m-pr-free-features strong { color: var(--m-ink); overflow-wrap: anywhere; }
.m-pr-free-action { align-self: center; }
.m-pr-free-action .m-pr-btn { width: 100%; }
.m-pr-paid-note { margin: 0 0 22px; color: var(--m-muted); font-size: 14px; line-height: 1.7; }
.m-pr-card { position: relative; display: flex; flex-direction: column; gap: 22px; padding: 26px 22px 22px; background: var(--m-paper); border: 1px solid var(--m-line); transition: transform .25s ease, border-color .25s ease; }
.m-pr-card:hover { transform: translateY(-4px); border-color: var(--m-accent); }
.m-pr-card.is-featured { border-color: var(--m-accent); box-shadow: inset 0 3px 0 var(--m-rose); }
.m-pr-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 26px; }
.m-pr-card h3 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: normal; }
.m-pr-tag { padding: 4px 8px; background: var(--m-rose); color: #352528; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.m-pr-blurb { min-height: 66px; margin: 8px 0 0; color: var(--m-muted); font-size: 13px; line-height: 1.55; }
.m-pr-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; margin: 16px 0 0; }
.m-pr-price small { font-size: 13px; color: var(--m-muted); }
.m-pr-price b { font-size: 30px; font-weight: 600; letter-spacing: normal; line-height: 1.2; font-variant-numeric: tabular-nums; }
.m-pr-price span { color: var(--m-muted); font-size: 12px; }
.m-pr-annual { margin: 8px 0 0; padding-top: 10px; border-top: 1px dashed var(--m-line); color: var(--m-accent); font-size: 12px; }
.m-pr-facts { display: grid; gap: 0; margin: 0; flex: 1; }
.m-pr-facts div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--m-line); font-size: 12px; }
.m-pr-facts dt { color: var(--m-muted); }
.m-pr-facts dd { margin: 0; text-align: right; font-weight: 500; }
.m-pr-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 18px; background: transparent; color: var(--m-ink); border: 1px solid var(--m-ink); text-decoration: none; font-size: 13px; font-weight: 600; transition: transform .2s ease, background-color .2s ease, color .2s ease; }
.m-pr-btn:hover { transform: translateY(-2px); background: var(--m-ink); color: var(--m-ivory); }
.m-pr-card.is-featured .m-pr-btn, .m-pr-close .m-pr-btn { background: var(--m-rose); color: #352528; border-color: var(--m-rose); }
.m-pr-card.is-featured .m-pr-btn:hover, .m-pr-close .m-pr-btn:hover { background: #d9a59d; color: #352528; border-color: #d9a59d; }
.m-pr-disclose { margin-top: 22px; margin-bottom: 0; max-width: 760px; margin-left: max(0px, calc((100% - var(--m-wrap)) / 2)); color: var(--m-muted); font-size: 12px; line-height: 1.7; }
.m-pr-compare { padding: clamp(64px, 9vw, 112px) 0 40px; }
.m-pr-head { margin-bottom: 36px; }
.m-pr-head h2 { margin: 0 0 16px; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: normal; }
.m-pr-cat { margin-top: 34px; }
.m-pr-cat h3 { margin: 0 0 12px; font-size: 18px; font-weight: 600; letter-spacing: normal; }
.m-pr-note { max-width: 680px; margin: 10px 0 0; color: var(--m-muted); font-size: 12px; line-height: 1.65; }
.m-pr-scroll { overflow-x: auto; max-width: 100%; overscroll-behavior-x: contain; border: 1px solid var(--m-line); background: var(--m-paper); }
.m-pr-table { width: 100%; min-width: 680px; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.m-pr-table th, .m-pr-table td { padding: 12px 14px; border-bottom: 1px solid var(--m-line); text-align: center; vertical-align: middle; }
.m-pr-table tbody tr:last-child > * { border-bottom: 0; }
.m-pr-table thead th { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--m-muted); background: var(--m-paper); }
.m-pr-table thead th.is-featured { color: var(--m-accent); }
.m-pr-table th[scope="row"], .m-pr-table thead th:first-child { position: sticky; left: 0; z-index: 1; text-align: left; font-weight: 400; background: var(--m-paper); min-width: 220px; max-width: 320px; box-shadow: 1px 0 0 var(--m-line); }
.m-pr-table thead th:first-child { text-transform: none; letter-spacing: 0; }
.m-pr-table td:nth-child(3) { background: color-mix(in srgb, var(--m-rose) 10%, transparent); }
.m-pr-addon-table td, .m-pr-addon-table thead th:last-child { text-align: left; }
.m-pr-addon-table td:nth-child(3) { background: none; }
.m-pr-addon-table { min-width: 520px; }
.m-pr-check { width: 16px; height: 16px; fill: none; stroke: var(--m-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.m-pr-no i { display: inline-block; width: 10px; height: 1px; background: var(--m-muted); opacity: .6; }
.m-pr-val { font-weight: 500; }
.m-pr-addons { padding: 56px 0 clamp(64px, 8vw, 100px); }
.m-pr-close { padding: 64px 0 96px; }
.m-pr-close-in { display: flex; align-items: end; justify-content: space-between; gap: 36px; padding-top: 34px; border-top: 1px solid var(--m-line); }
.m-pr-close h2 { max-width: 640px; margin: 0; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: normal; }
.m-pr-billing { padding: 24px 0 40px; }
.m-pr-terms { margin: 0; }
.m-pr-terms > div { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--m-line); }
.m-pr-terms dt { font-weight: 600; }
.m-pr-terms dd { margin: 0; color: var(--m-muted); }
.m-pr-close .m-pr-btn { flex: none; }
.m-motion .m-pr-card.m-reveal { transition-delay: calc(var(--i, 0) * 70ms); }
@media (max-width: 1080px) { .m-pr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .m-pr-blurb { min-height: 0; } }
@media (max-width: 600px) {
  .m-pr-free.m-pr-card { grid-template-columns: 1fr; gap: 16px; }
  .m-pr-terms > div { grid-template-columns: 1fr; gap: 6px; }
  .m-pr-cards { grid-template-columns: 1fr; }
  .m-pricing-page .m-nav-inner { height: auto; min-height: 100px; padding-block: 10px; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .m-pricing-page .m-nav-links { width: 100%; justify-content: center; flex-wrap: wrap; gap: 10px; }
  .m-pricing-page .m-nav-links .m-nav-cta { padding-inline: 12px; }
  .m-pr-table th[scope="row"], .m-pr-table thead th:first-child { min-width: 168px; }
  .m-pr-table { font-size: 12px; }
  .m-pr-close-in { flex-direction: column; align-items: flex-start; }
  .m-pr-close { padding-bottom: 72px; }
}

/* Hero circular carousel. The front plane (copy and preview together) and an inert rear clone turn on one ring.
   Depth is applied only to the two outer planes; dashboard content inside stays flat. */
.m-hero-stage { position: relative; z-index: 1; width: 100%; perspective: 1800px; perspective-origin: 50% 40%; overflow-x: clip; }
.m-hero-stage > .m-hero-inner { z-index: 2; transform-style: flat; backface-visibility: hidden; }
.m-hero-rear { display: none; }
.m-motion .m-hero-rear {
  display: block; position: absolute; z-index: 1; top: 0; bottom: 0; left: 50%; width: var(--m-wrap); translate: -50% 0;
  transform: var(--rear-rest); opacity: var(--rest-o); pointer-events: none; user-select: none; transform-style: flat;
}
.m-hero-rear .m-hero-inner { width: 100%; margin: 0; height: 100%; }
.m-hero-rear *, .m-hero-rear *::before, .m-hero-rear *::after { animation: none !important; transition: none !important; }
.m-hero-rear .m-draw { stroke-dashoffset: 0 !important; }
/* The waiting scene is above-left, separate from the foreground headline.
   Its copy brightens as the complete plane comes around into view. */
.m-hero-rear .m-hero-copy { opacity: .8; }
.m-hero.is-turning .m-hero-rear .m-hero-copy { animation: m-hc-rear-copy 4.8s linear both !important; }
.m-hero.m-section-active.is-turning .m-hero-front { will-change: transform, opacity; }
.m-hero.m-section-active.is-turning .m-hero-rear { will-change: transform, opacity; }
.m-hero.m-section-active.is-turning[data-hs-dir="next"] .m-hero-front { animation: m-hc-front-next 4.8s linear both; }
.m-hero.m-section-active.is-turning[data-hs-dir="next"] .m-hero-rear { animation: m-hc-rear-next 4.8s linear both; }
.m-hero.m-section-active.is-turning[data-hs-dir="prev"] .m-hero-front { animation: m-hc-front-prev 4.8s linear both; }
.m-hero.m-section-active.is-turning[data-hs-dir="prev"] .m-hero-rear { animation: m-hc-rear-prev 4.8s linear both; }

/* Oval circulation: both planes ride one wide ellipse. Position for angle t: x = ax sin t, y = -by (1 - cos t), z = -(az / 2)(1 - cos t).
   t = 0 is the foreground, t = -135deg the small upper-left back wait slot, +135deg the upper-right back. 4.8s, 17 sampled stops, eased by sample spacing. */
.m-hero { --ax: 75%; --by: 55%; --az: 3600px; --ry: 35deg; --rest-o: .62;
  --rear-rest: translate3d(calc(var(--ax) * -0.7071), calc(var(--by) * -1.7071), calc(var(--az) * -0.8536)) rotateY(calc(var(--ry) * 0.7071));
  --rear-far: translate3d(calc(var(--ax) * 0.7071), calc(var(--by) * -1.7071), calc(var(--az) * -0.8536)) rotateY(calc(var(--ry) * -0.7071)); }
@media (max-width: 900px) { .m-hero { --ax: 55%; --by: 22%; --rest-o: 0; } }
@keyframes m-hc-front-next { 0% { opacity: 1; transform: translate3d(calc(var(--ax) * 0), calc(var(--by) * 0), calc(var(--az) * 0)) rotateY(calc(var(--ry) * 0)); } 6.25% { opacity: 1; transform: translate3d(calc(var(--ax) * 0.0265), calc(var(--by) * -0.0004), calc(var(--az) * -0.0002)) rotateY(calc(var(--ry) * -0.0265)); } 12.5% { opacity: 1; transform: translate3d(calc(var(--ax) * 0.1011), calc(var(--by) * -0.0051), calc(var(--az) * -0.0026)) rotateY(calc(var(--ry) * -0.1011)); } 18.75% { opacity: 1; transform: translate3d(calc(var(--ax) * 0.2157), calc(var(--by) * -0.0235), calc(var(--az) * -0.0118)) rotateY(calc(var(--ry) * -0.2157)); } 25% { opacity: 1; transform: translate3d(calc(var(--ax) * 0.3599), calc(var(--by) * -0.067), calc(var(--az) * -0.0335)) rotateY(calc(var(--ry) * -0.3599)); } 31.25% { opacity: 1; transform: translate3d(calc(var(--ax) * 0.5197), calc(var(--by) * -0.1456), calc(var(--az) * -0.0728)) rotateY(calc(var(--ry) * -0.5197)); } 37.5% { opacity: 1; transform: translate3d(calc(var(--ax) * 0.6784), calc(var(--by) * -0.2653), calc(var(--az) * -0.1326)) rotateY(calc(var(--ry) * -0.6784)); } 43.75% { opacity: 1; transform: translate3d(calc(var(--ax) * 0.8182), calc(var(--by) * -0.4251), calc(var(--az) * -0.2126)) rotateY(calc(var(--ry) * -0.8182)); } 50% { opacity: 0.875; transform: translate3d(calc(var(--ax) * 0.9239), calc(var(--by) * -0.6173), calc(var(--az) * -0.3087)) rotateY(calc(var(--ry) * -0.9239)); } 56.25% { opacity: 0.7188; transform: translate3d(calc(var(--ax) * 0.9851), calc(var(--by) * -0.8279), calc(var(--az) * -0.414)) rotateY(calc(var(--ry) * -0.9851)); } 62.5% { opacity: 0.5625; transform: translate3d(calc(var(--ax) * 0.9992), calc(var(--by) * -1.0399), calc(var(--az) * -0.5199)) rotateY(calc(var(--ry) * -0.9992)); } 68.75% { opacity: 0.4063; transform: translate3d(calc(var(--ax) * 0.9716), calc(var(--by) * -1.2367), calc(var(--az) * -0.6183)) rotateY(calc(var(--ry) * -0.9716)); } 75% { opacity: 0.25; transform: translate3d(calc(var(--ax) * 0.9142), calc(var(--by) * -1.4052), calc(var(--az) * -0.7026)) rotateY(calc(var(--ry) * -0.9142)); } 81.25% { opacity: 0.0938; transform: translate3d(calc(var(--ax) * 0.843), calc(var(--by) * -1.5379), calc(var(--az) * -0.769)) rotateY(calc(var(--ry) * -0.843)); } 87.5% { opacity: 0; transform: translate3d(calc(var(--ax) * 0.775), calc(var(--by) * -1.632), calc(var(--az) * -0.816)) rotateY(calc(var(--ry) * -0.775)); } 93.75% { opacity: 0; transform: translate3d(calc(var(--ax) * 0.7256), calc(var(--by) * -1.6882), calc(var(--az) * -0.8441)) rotateY(calc(var(--ry) * -0.7256)); } 100% { opacity: 0; transform: translate3d(calc(var(--ax) * 0.7071), calc(var(--by) * -1.7071), calc(var(--az) * -0.8536)) rotateY(calc(var(--ry) * -0.7071)); } }
@keyframes m-hc-rear-next { 0% { opacity: calc(var(--rest-o) + (1 - var(--rest-o)) * 0); transform: translate3d(calc(var(--ax) * -0.7071), calc(var(--by) * -1.7071), calc(var(--az) * -0.8536)) rotateY(calc(var(--ry) * 0.7071)); } 6.25% { opacity: calc(var(--rest-o) + (1 - var(--rest-o)) * 0.0112); transform: translate3d(calc(var(--ax) * -0.7256), calc(var(--by) * -1.6882), calc(var(--az) * -0.8441)) rotateY(calc(var(--ry) * 0.7256)); } 12.5% { opacity: calc(var(--rest-o) + (1 - var(--rest-o)) * 0.043); transform: translate3d(calc(var(--ax) * -0.775), calc(var(--by) * -1.632), calc(var(--az) * -0.816)) rotateY(calc(var(--ry) * 0.775)); } 18.75% { opacity: calc(var(--rest-o) + (1 - var(--rest-o)) * 0.0923); transform: translate3d(calc(var(--ax) * -0.843), calc(var(--by) * -1.5379), calc(var(--az) * -0.769)) rotateY(calc(var(--ry) * 0.843)); } 25% { opacity: calc(var(--rest-o) + (1 - var(--rest-o)) * 0.1563); transform: translate3d(calc(var(--ax) * -0.9142), calc(var(--by) * -1.4052), calc(var(--az) * -0.7026)) rotateY(calc(var(--ry) * 0.9142)); } 31.25% { opacity: calc(var(--rest-o) + (1 - var(--rest-o)) * 0.2319); transform: translate3d(calc(var(--ax) * -0.9716), calc(var(--by) * -1.2367), calc(var(--az) * -0.6183)) rotateY(calc(var(--ry) * 0.9716)); } 37.5% { opacity: calc(var(--rest-o) + (1 - var(--rest-o)) * 0.3164); transform: translate3d(calc(var(--ax) * -0.9992), calc(var(--by) * -1.0399), calc(var(--az) * -0.5199)) rotateY(calc(var(--ry) * 0.9992)); } 43.75% { opacity: calc(var(--rest-o) + (1 - var(--rest-o)) * 0.4067); transform: translate3d(calc(var(--ax) * -0.9851), calc(var(--by) * -0.8279), calc(var(--az) * -0.414)) rotateY(calc(var(--ry) * 0.9851)); } 50% { opacity: calc(var(--rest-o) + (1 - var(--rest-o)) * 0.5); transform: translate3d(calc(var(--ax) * -0.9239), calc(var(--by) * -0.6173), calc(var(--az) * -0.3087)) rotateY(calc(var(--ry) * 0.9239)); } 56.25% { opacity: calc(var(--rest-o) + (1 - var(--rest-o)) * 0.5933); transform: translate3d(calc(var(--ax) * -0.8182), calc(var(--by) * -0.4251), calc(var(--az) * -0.2126)) rotateY(calc(var(--ry) * 0.8182)); } 62.5% { opacity: calc(var(--rest-o) + (1 - var(--rest-o)) * 0.6836); transform: translate3d(calc(var(--ax) * -0.6784), calc(var(--by) * -0.2653), calc(var(--az) * -0.1326)) rotateY(calc(var(--ry) * 0.6784)); } 68.75% { opacity: calc(var(--rest-o) + (1 - var(--rest-o)) * 0.7681); transform: translate3d(calc(var(--ax) * -0.5197), calc(var(--by) * -0.1456), calc(var(--az) * -0.0728)) rotateY(calc(var(--ry) * 0.5197)); } 75% { opacity: calc(var(--rest-o) + (1 - var(--rest-o)) * 0.8438); transform: translate3d(calc(var(--ax) * -0.3599), calc(var(--by) * -0.067), calc(var(--az) * -0.0335)) rotateY(calc(var(--ry) * 0.3599)); } 81.25% { opacity: calc(var(--rest-o) + (1 - var(--rest-o)) * 0.9077); transform: translate3d(calc(var(--ax) * -0.2157), calc(var(--by) * -0.0235), calc(var(--az) * -0.0118)) rotateY(calc(var(--ry) * 0.2157)); } 87.5% { opacity: calc(var(--rest-o) + (1 - var(--rest-o)) * 0.957); transform: translate3d(calc(var(--ax) * -0.1011), calc(var(--by) * -0.0051), calc(var(--az) * -0.0026)) rotateY(calc(var(--ry) * 0.1011)); } 93.75% { opacity: calc(var(--rest-o) + (1 - var(--rest-o)) * 0.9888); transform: translate3d(calc(var(--ax) * -0.0265), calc(var(--by) * -0.0004), calc(var(--az) * -0.0002)) rotateY(calc(var(--ry) * 0.0265)); } 100% { opacity: calc(var(--rest-o) + (1 - var(--rest-o)) * 1); transform: translate3d(calc(var(--ax) * 0), calc(var(--by) * 0), calc(var(--az) * 0)) rotateY(calc(var(--ry) * 0)); } }
@keyframes m-hc-front-prev { 0% { opacity: 1; transform: translate3d(calc(var(--ax) * 0), calc(var(--by) * 0), calc(var(--az) * 0)) rotateY(calc(var(--ry) * 0)); } 6.25% { opacity: 1; transform: translate3d(calc(var(--ax) * -0.0265), calc(var(--by) * -0.0004), calc(var(--az) * -0.0002)) rotateY(calc(var(--ry) * 0.0265)); } 12.5% { opacity: 1; transform: translate3d(calc(var(--ax) * -0.1011), calc(var(--by) * -0.0051), calc(var(--az) * -0.0026)) rotateY(calc(var(--ry) * 0.1011)); } 18.75% { opacity: 1; transform: translate3d(calc(var(--ax) * -0.2157), calc(var(--by) * -0.0235), calc(var(--az) * -0.0118)) rotateY(calc(var(--ry) * 0.2157)); } 25% { opacity: 1; transform: translate3d(calc(var(--ax) * -0.3599), calc(var(--by) * -0.067), calc(var(--az) * -0.0335)) rotateY(calc(var(--ry) * 0.3599)); } 31.25% { opacity: 1; transform: translate3d(calc(var(--ax) * -0.5197), calc(var(--by) * -0.1456), calc(var(--az) * -0.0728)) rotateY(calc(var(--ry) * 0.5197)); } 37.5% { opacity: 1; transform: translate3d(calc(var(--ax) * -0.6784), calc(var(--by) * -0.2653), calc(var(--az) * -0.1326)) rotateY(calc(var(--ry) * 0.6784)); } 43.75% { opacity: 1; transform: translate3d(calc(var(--ax) * -0.8182), calc(var(--by) * -0.4251), calc(var(--az) * -0.2126)) rotateY(calc(var(--ry) * 0.8182)); } 50% { opacity: 0.875; transform: translate3d(calc(var(--ax) * -0.9239), calc(var(--by) * -0.6173), calc(var(--az) * -0.3087)) rotateY(calc(var(--ry) * 0.9239)); } 56.25% { opacity: 0.7188; transform: translate3d(calc(var(--ax) * -0.9851), calc(var(--by) * -0.8279), calc(var(--az) * -0.414)) rotateY(calc(var(--ry) * 0.9851)); } 62.5% { opacity: 0.5625; transform: translate3d(calc(var(--ax) * -0.9992), calc(var(--by) * -1.0399), calc(var(--az) * -0.5199)) rotateY(calc(var(--ry) * 0.9992)); } 68.75% { opacity: 0.4063; transform: translate3d(calc(var(--ax) * -0.9716), calc(var(--by) * -1.2367), calc(var(--az) * -0.6183)) rotateY(calc(var(--ry) * 0.9716)); } 75% { opacity: 0.25; transform: translate3d(calc(var(--ax) * -0.9142), calc(var(--by) * -1.4052), calc(var(--az) * -0.7026)) rotateY(calc(var(--ry) * 0.9142)); } 81.25% { opacity: 0.0938; transform: translate3d(calc(var(--ax) * -0.843), calc(var(--by) * -1.5379), calc(var(--az) * -0.769)) rotateY(calc(var(--ry) * 0.843)); } 87.5% { opacity: 0; transform: translate3d(calc(var(--ax) * -0.775), calc(var(--by) * -1.632), calc(var(--az) * -0.816)) rotateY(calc(var(--ry) * 0.775)); } 93.75% { opacity: 0; transform: translate3d(calc(var(--ax) * -0.7256), calc(var(--by) * -1.6882), calc(var(--az) * -0.8441)) rotateY(calc(var(--ry) * 0.7256)); } 100% { opacity: 0; transform: translate3d(calc(var(--ax) * -0.7071), calc(var(--by) * -1.7071), calc(var(--az) * -0.8536)) rotateY(calc(var(--ry) * 0.7071)); } }
@keyframes m-hc-rear-prev { 0% { opacity: 0; transform: translate3d(calc(var(--ax) * 0.7071), calc(var(--by) * -1.7071), calc(var(--az) * -0.8536)) rotateY(calc(var(--ry) * -0.7071)); } 6.25% { opacity: 0.0146; transform: translate3d(calc(var(--ax) * 0.7256), calc(var(--by) * -1.6882), calc(var(--az) * -0.8441)) rotateY(calc(var(--ry) * -0.7256)); } 12.5% { opacity: 0.0559; transform: translate3d(calc(var(--ax) * 0.775), calc(var(--by) * -1.632), calc(var(--az) * -0.816)) rotateY(calc(var(--ry) * -0.775)); } 18.75% { opacity: 0.12; transform: translate3d(calc(var(--ax) * 0.843), calc(var(--by) * -1.5379), calc(var(--az) * -0.769)) rotateY(calc(var(--ry) * -0.843)); } 25% { opacity: 0.2031; transform: translate3d(calc(var(--ax) * 0.9142), calc(var(--by) * -1.4052), calc(var(--az) * -0.7026)) rotateY(calc(var(--ry) * -0.9142)); } 31.25% { opacity: 0.3015; transform: translate3d(calc(var(--ax) * 0.9716), calc(var(--by) * -1.2367), calc(var(--az) * -0.6183)) rotateY(calc(var(--ry) * -0.9716)); } 37.5% { opacity: 0.4113; transform: translate3d(calc(var(--ax) * 0.9992), calc(var(--by) * -1.0399), calc(var(--az) * -0.5199)) rotateY(calc(var(--ry) * -0.9992)); } 43.75% { opacity: 0.5288; transform: translate3d(calc(var(--ax) * 0.9851), calc(var(--by) * -0.8279), calc(var(--az) * -0.414)) rotateY(calc(var(--ry) * -0.9851)); } 50% { opacity: 0.65; transform: translate3d(calc(var(--ax) * 0.9239), calc(var(--by) * -0.6173), calc(var(--az) * -0.3087)) rotateY(calc(var(--ry) * -0.9239)); } 56.25% { opacity: 0.7712; transform: translate3d(calc(var(--ax) * 0.8182), calc(var(--by) * -0.4251), calc(var(--az) * -0.2126)) rotateY(calc(var(--ry) * -0.8182)); } 62.5% { opacity: 0.8887; transform: translate3d(calc(var(--ax) * 0.6784), calc(var(--by) * -0.2653), calc(var(--az) * -0.1326)) rotateY(calc(var(--ry) * -0.6784)); } 68.75% { opacity: 0.9985; transform: translate3d(calc(var(--ax) * 0.5197), calc(var(--by) * -0.1456), calc(var(--az) * -0.0728)) rotateY(calc(var(--ry) * -0.5197)); } 75% { opacity: 1; transform: translate3d(calc(var(--ax) * 0.3599), calc(var(--by) * -0.067), calc(var(--az) * -0.0335)) rotateY(calc(var(--ry) * -0.3599)); } 81.25% { opacity: 1; transform: translate3d(calc(var(--ax) * 0.2157), calc(var(--by) * -0.0235), calc(var(--az) * -0.0118)) rotateY(calc(var(--ry) * -0.2157)); } 87.5% { opacity: 1; transform: translate3d(calc(var(--ax) * 0.1011), calc(var(--by) * -0.0051), calc(var(--az) * -0.0026)) rotateY(calc(var(--ry) * -0.1011)); } 93.75% { opacity: 1; transform: translate3d(calc(var(--ax) * 0.0265), calc(var(--by) * -0.0004), calc(var(--az) * -0.0002)) rotateY(calc(var(--ry) * -0.0265)); } 100% { opacity: 1; transform: translate3d(calc(var(--ax) * 0), calc(var(--by) * 0), calc(var(--az) * 0)) rotateY(calc(var(--ry) * 0)); } }
@keyframes m-hc-rear-copy { from { opacity: .8; } to { opacity: 1; } }

/* Homepage typography (scoped): same clean sans as Pricing and Compare. No font-size overrides, so existing responsive sizes stand. */
body.m-home-document { --m-sans: Arial, Helvetica, sans-serif; font-family: var(--m-sans); }
body.m-home-document :is(.m-nav, .m-hero, .m-statement, .m-section-title, .m-step, .m-craft-copy, .m-principle, .m-coming, .m-showcase-head, .m-pricing-inner, .m-faq, .m-final, .m-footer, .m-kicker, .m-hero-line, .m-hero-lede) { font-family: var(--m-sans); }
body.m-home-document :is(.m-hero h1, .m-section-title, .m-statement p, .m-craft-copy h3, .m-principle, .m-promise .m-principle, .m-showcase-head h2, .m-pricing-inner h2, .m-faq h2, .m-final h2) { font-weight: 600; letter-spacing: -.015em; line-height: 1.12; }
body.m-home-document .m-hero h1 { line-height: 1.06; }
body.m-home-document :is(.m-step h3, .m-coming h2) { font-weight: 600; letter-spacing: normal; }
body.m-home-document :is(.m-hero-line, .m-hs-copy strong, .m-hs-kpi b) { letter-spacing: normal; }

/* White hero trial. Keep this override isolated so the dark treatment can
   be restored without changing the animation or other homepage sections. */
:root:root[data-theme] #top > section.m-hero {
  --band-bg: #ffffff; --band-fg: #251d21; --band-muted: #71666c;
  --band-line: rgba(74,38,52,.15); --m-accent: #842c49;
  color-scheme: light; background: #ffffff; color: var(--band-fg);
}
body.m-home-document .m-nav:not(.is-solid) { color: #251d21; }
body.m-home-document .m-nav:not(.is-solid) .m-logo-light { display: block; }
body.m-home-document .m-nav:not(.is-solid) :is(.m-logo-dark,.m-logo-hero) { display: none; }
.m-hero .m-hero-copy .m-kicker { color: #842c49; }
.m-hero .m-hero-line { color: var(--band-fg); }
.m-hero .m-hero-grid {
  background-image: linear-gradient(rgba(74,38,52,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(74,38,52,.045) 1px,transparent 1px);
}
.m-hero .m-flow { stroke: rgba(132,44,73,.22); }
.m-hero .m-orb-a { background: radial-gradient(circle,rgba(206,146,139,.12),transparent 66%); }
.m-hero .m-orb-b { background: radial-gradient(circle,rgba(135,67,83,.08),transparent 66%); }
/* Preserve the dark operational UI inside the animated dashboard surface. */
.m-hero .m-hs {
  --band-fg: #f3ebe2; --band-muted: #b9aeab; --band-line: rgba(243,235,226,.17);
  --m-accent: #e0aaa0; --m-paper: #151517; color-scheme: dark; color: #f3ebe2;
  box-shadow: 0 30px 65px rgba(55,28,40,.22),18px 18px 0 -1px rgba(132,44,73,.06),36px 36px 0 -1px rgba(132,44,73,.03);
}

/* Ann Builder two-tab screenshot viewer */
.m-ann-viewer { grid-column: 1 / -1; height: auto; aspect-ratio: auto; }
.m-ann-tablist { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--band-line); background: var(--m-paper); }
.m-ann-tab { flex: 1 1 220px; min-height: 48px; padding: 10px 16px; background: transparent; color: var(--m-muted); border: 0; border-bottom: 3px solid transparent; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.m-ann-tab[aria-selected="true"] { color: var(--m-ink); border-bottom-color: var(--m-accent); }
.m-ann-tab:focus-visible { outline: 2px solid var(--m-accent); outline-offset: -4px; }
.m-ann-panel[hidden] { display: none; }
.m-ann-figure { margin: 0; }
.m-ann-viewer .m-ann-figure img, .m-ann-viewer .m-ann-builder-image { display: block; width: 100%; height: auto; aspect-ratio: 1440 / 960; object-fit: contain; }
.m-ann-viewer .m-responsive-media { display: block; }

/* Ticket accents, public pages: one light rail per surface, no nesting. */
.m-pricing-page .m-pr-scroll{border-left:3px solid var(--m-accent);border-radius:4px;box-shadow:0 1px 2px rgba(23,32,28,.05)}
.m-pricing-page .m-pr-table thead th{border-bottom:1px dashed var(--m-line)}
.m-pricing-page .m-pr-card{border-top:3px solid var(--m-accent);border-radius:4px}
.m-pricing-page .m-pr-card.is-featured{box-shadow:none;border-top-color:var(--m-rose)}
.m-pricing-page .m-pr-terms{border-left:3px solid var(--m-accent);padding-left:18px}
.m-pricing-page .m-pr-terms>div{border-bottom-style:dashed}
.m-pricing-page .m-faq-item{border-bottom-style:dashed}

/* ===== Homepage sections after the hero (scoped with h-). White in both modes via the existing :not(.m-hero) rule. ===== */
.h-sec { padding: clamp(64px, 9vw, 120px) 0; }
.h-sec + .h-sec { border-top: 1px solid rgba(56,40,43,.08); }
.h-head { max-width: 640px; margin-bottom: clamp(28px, 4vw, 48px); }
.h-head-wide { max-width: 760px; }
.h-sec h2 { margin: 0; font-size: clamp(32px, 4.4vw, 54px); font-weight: 500; line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; }
.h-head p, .h-sub { margin: 18px 0 0; max-width: 520px; color: #675c60; font-size: 16px; }
.h-fine { margin: 14px 0 0; color: #675c60; font-size: 12px; line-height: 1.6; max-width: 520px; }
.h-qual { max-width: 760px; margin: 28px 0 0; padding: 14px 0 0 16px; border-left: 3px solid #ce928b; color: #54484b; font-size: 13px; line-height: 1.65; }
.h-sample, .h-cap { font-size: 11px; color: #675c60; }
.h-ticklist { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.h-ticklist li { position: relative; padding-left: 26px; font-size: 15px; }
.h-ticklist li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 12px; height: 6px; border-left: 2px solid #874353; border-bottom: 2px solid #874353; transform: rotate(-45deg); }

/* timeline lanes */
.h-lanes { position: relative; margin: 0 0 34px; display: grid; gap: 10px; }
.h-ticks { display: flex; justify-content: space-between; font-size: 11px; color: #675c60; font-variant-numeric: tabular-nums; }
.h-lane { position: relative; height: 46px; border-radius: 999px; background: #f6ece9; overflow: hidden; display: flex; align-items: center; }
.h-lane b { position: relative; z-index: 1; padding: 0 20px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.h-lane i { position: absolute; inset: 0 auto 0 0; background: #ce928b; border-radius: 999px; transform-origin: left; }
.h-lane-a i { width: 50%; }
.h-lane-b { background: transparent; border: 1px dashed #b98a8a; }
.h-lane-b i { left: 50%; width: 50%; background: repeating-linear-gradient(135deg, #f1d6d1 0 8px, #f9ebe8 8px 16px); }
.h-lane-b b { margin-left: 50%; padding-left: 16px; }
.m-motion .h-lanes.is-visible .h-lane i { animation: h-grow 1.2s cubic-bezier(.2,.7,.2,1) both; }
@keyframes h-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* tabs */
.h-tablist { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.h-tab { text-align: left; padding: 12px 16px; border: 1px solid rgba(56,40,43,.2); background: #fff; color: #38282b; border-radius: 12px; cursor: pointer; display: grid; gap: 2px; transition: background-color .2s, border-color .2s, transform .2s; }
.h-tab b { font-size: 14px; font-weight: 600; }
.h-tab small { font-size: 11px; color: #675c60; }
.h-tab:hover { transform: translateY(-2px); border-color: #874353; }
.h-tab[aria-selected="true"] { background: #38282b; border-color: #38282b; color: #fff; }
.h-tab[aria-selected="true"] small { color: #e8d7d2; }
.h-panel[hidden] { display: none; }
.m-motion .h-panel:not([hidden]) { animation: h-in .5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes h-in { from { opacity: 0; transform: translate3d(0,10px,0); } to { opacity: 1; transform: none; } }
.h-split { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
.h-copy h3 { margin: 10px 0 12px; font-size: clamp(24px, 2.8vw, 34px); font-weight: 500; line-height: 1.08; letter-spacing: -.035em; }
.h-copy p { margin: 0; color: #675c60; font-size: 15px; }
.h-step { color: #874353; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }

.h-browser { border: 1px solid rgba(56,40,43,.18); border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -30px rgba(56,40,43,.35); min-width: 0; }
.h-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #f4ebe8; }
.h-bar i { width: 9px; height: 9px; border-radius: 50%; background: #d8c3be; }
.h-bar span { margin-left: 10px; font-size: 11px; color: #675c60; }
.h-shot { display: block; background: #fff; }
.h-shot img, .h-shot picture { width: 100%; height: auto; display: block; }
.h-phone { width: min(220px, 60%); border: 6px solid #21191b; border-radius: 28px; overflow: hidden; background: #21191b; box-shadow: 0 30px 50px -22px rgba(33,25,27,.5); justify-self: center; }
.h-phone img, .h-phone picture { width: 100%; height: auto; display: block; border-radius: 22px; }
.h-phone-big { width: min(300px, 78%); }
.h-store-stage { position: relative; }
.h-store-stage.h-center { display: grid; place-items: center; padding: 10px 0; background: linear-gradient(180deg, #fdf3f0, #f6e4df); border-radius: 16px; }
.h-phone-float { position: absolute; right: 3%; bottom: -24px; width: clamp(96px, 16%, 170px); }
.m-section-active .h-phone-float { animation: m-float-phone 6.6s ease-in-out infinite; }
.h-store { padding-bottom: clamp(80px, 10vw, 130px); }
.h-tabs-store .h-tablist, .h-tabs-ops .h-tablist { justify-content: flex-start; }

.h-status-card { display: grid; gap: 1px; background: rgba(56,40,43,.12); border: 1px solid rgba(56,40,43,.12); border-radius: 14px; overflow: hidden; }
.h-status-card > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; background: #fff; font-size: 14px; }
.h-chip { padding: 4px 10px; border-radius: 999px; background: #f1ece9; color: #54484b; font-size: 11px; font-weight: 600; }
.h-chip.is-wait { background: #fbefd5; color: #7a5410; }
.h-chip.is-ok { background: #dcefe3; color: #1f5a37; }

.h-ann-grid, .h-cat-grid, .h-co-grid, .h-find-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 6vw, 80px); align-items: center; }
.h-ann-grid .h-head { margin-bottom: 0; }
.h-cat-grid { grid-template-columns: 1.1fr .9fr; }
.h-cat-photo { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid rgba(56,40,43,.14); }
.h-cat-photo img, .h-cat-photo picture { width: 100%; height: auto; }
.h-cap { position: absolute; left: 12px; bottom: 12px; padding: 4px 9px; background: rgba(33,25,27,.8); color: #fff; border-radius: 6px; }
.h-vrow, .h-offer, .h-fy { display: flex; gap: 8px; flex-wrap: wrap; }
.h-vrow button, .h-offer button, .h-fy button, .h-btn-line { min-height: 42px; padding: 0 18px; border: 1px solid rgba(56,40,43,.25); background: #fff; color: #38282b; border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 600; transition: background-color .2s, color .2s; }
.h-vrow button.is-on, .h-offer button.is-on, .h-fy button.is-on { background: #874353; border-color: #874353; color: #fff; }
.h-variant, .h-demo { margin-top: 26px; padding: 22px; border: 1px solid rgba(56,40,43,.14); border-radius: 16px; background: #fff; }
.h-vout, .h-bill { margin: 20px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.h-vout div { padding: 12px 14px; background: #fbf5f3; border-radius: 10px; }
.h-vout .is-private { background: #38282b; color: #fff; }
.h-vout .is-private dt { color: #e8d7d2; }
.h-vout dt, .h-bill dt { font-size: 11px; color: #675c60; }
.h-vout dd, .h-bill dd { margin: 2px 0 0; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.h-bill { grid-template-columns: 1fr; gap: 0; }
.h-bill div { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(56,40,43,.1); }
.h-bill dd { font-size: 15px; margin: 0; }
.h-bill .h-bill-total dd { font-size: 20px; color: #874353; }
.h-field { display: grid; gap: 6px; font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.h-field input { height: 46px; padding: 0 14px; border: 1px solid rgba(56,40,43,.3); border-radius: 10px; font-size: 16px; letter-spacing: .1em; background: #fff; color: #38282b; max-width: 240px; }
.h-pin-out { min-height: 24px; margin: 0 0 16px; font-size: 13px; color: #54484b; }
.h-pin-out.is-ok { color: #1f5a37; font-weight: 600; }
.h-offer { margin-bottom: 4px; }

.h-numbers { padding: 24px; border: 1px solid rgba(56,40,43,.14); border-radius: 16px; background: #fff; }
.h-num-top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.h-num-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0; }
.h-num-grid div { padding: 14px; background: #fbf5f3; border-radius: 10px; }
.h-num-grid small { display: block; font-size: 11px; color: #675c60; }
.h-num-grid b { font-size: 18px; font-variant-numeric: tabular-nums; }
.h-bars { display: flex; align-items: end; gap: 14px; height: 120px; }
.h-bars s { flex: 1; height: var(--h); background: linear-gradient(180deg, #ce928b, #874353); border-radius: 6px 6px 0 0; transition: height .5s cubic-bezier(.2,.7,.2,1); }
.h-exports { display: flex; gap: 8px; margin-top: 14px; }
.h-exports span { padding: 5px 12px; border: 1px solid rgba(56,40,43,.25); border-radius: 999px; font-size: 12px; }
.h-invoice { border: 1px solid rgba(56,40,43,.14); border-radius: 12px; overflow: hidden; }
.h-invoice img, .h-invoice picture { width: 100%; height: auto; }
.h-split-inv { grid-template-columns: 1.1fr .9fr; }

.h-conn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.h-conn { padding: 26px; border: 1px solid rgba(56,40,43,.14); border-radius: 18px; background: #fff; }
.h-conn h3 { margin: 0 0 8px; font-size: 22px; font-weight: 500; letter-spacing: -.03em; }
.h-conn p { margin: 0; color: #675c60; font-size: 14px; }
.h-flow { list-style: none; margin: 22px 0 0; padding: 0 0 0 22px; position: relative; display: grid; gap: 14px; counter-reset: s; }
.h-flow::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: #ecdcd8; }
.h-flow li { position: relative; font-size: 13px; font-weight: 600; }
.h-flow li::before { content: ""; position: absolute; left: -22px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid #ce928b; }
.h-flow li.is-done::before { background: #874353; border-color: #874353; }
.h-btn-line { margin-top: 18px; min-height: 38px; }
.h-btn-line:hover { background: #38282b; color: #fff; }

.h-bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.h-tile { grid-column: span 1; padding: 24px; border-radius: 18px; background: #fff; border: 1px solid rgba(56,40,43,.14); display: flex; flex-direction: column; gap: 10px; }
.h-tile-wide { grid-column: span 2; background: #38282b; color: #fff; border-color: #38282b; }
.h-tile-wide p { color: #e8d7d2; }
.h-tile-wide .m-text-link { color: #fff; border-color: rgba(255,255,255,.4); align-self: flex-start; }
.h-tile h3 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.h-tile p { margin: 0; font-size: 13px; color: #675c60; }
.h-ids, .h-seq { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 8px; }
.h-ids span { padding: 7px 12px; border: 1px dashed rgba(255,255,255,.5); border-radius: 8px; font-size: 12px; }
.h-seq span { padding: 5px 11px; border-radius: 999px; background: #f1ece9; font-size: 11px; font-weight: 600; color: #54484b; }
.h-seq span.is-on { background: #874353; color: #fff; }

.h-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.h-links a { padding: 10px 18px; border: 1px solid rgba(56,40,43,.25); border-radius: 999px; text-decoration: none; font-size: 13px; font-weight: 600; transition: background-color .2s, color .2s; }
.h-links a:hover { background: #38282b; color: #fff; }
.h-space { margin: 0; }
.h-final { text-align: center; padding-bottom: clamp(80px, 10vw, 140px); }
.h-final-in { display: grid; justify-items: center; }
.h-final h2 { max-width: 760px; }
.h-final p { margin: 16px 0 0; color: #675c60; }
.h-final-cta { display: flex; gap: 22px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 28px; }

@media (max-width: 900px) {
  .h-split, .h-split-inv, .h-ann-grid, .h-cat-grid, .h-co-grid, .h-find-grid, .h-conn-grid { grid-template-columns: 1fr; }
  .h-bento { grid-template-columns: repeat(2, 1fr); }
  .h-phone-float { bottom: -16px; }
}
@media (max-width: 600px) {
  .h-bento { grid-template-columns: 1fr; }
  .h-tile-wide { grid-column: span 1; }
  .h-tab { flex: 1 1 calc(50% - 8px); }
  .h-num-grid, .h-vout { grid-template-columns: 1fr; }
  .h-lane b { font-size: 11px; padding: 0 12px; }
  .h-lane-b b { padding-left: 8px; }
  .h-phone { width: min(200px, 70%); }
  .h-sec h2 { font-size: clamp(28px, 8vw, 34px); }
}
@media (prefers-reduced-motion: reduce) { .h-panel, .h-lane i, .h-bars s { animation: none !important; transition: none !important; } }

/* ===== Homepage refinement: pure white sections, visual moments, redesigned home footer ===== */
:root:root #top > section.h-sec { background: #fff !important; }
.h-hint { margin: 0 0 14px; color: #874353; font-size: 13px; font-weight: 600; }
.h-hint::before { content: ""; display: inline-block; width: 18px; height: 2px; margin: 0 8px 3px 0; background: #ce928b; }
.h-cap2 { margin: 14px 0 0; font-size: clamp(20px, 2.4vw, 28px); font-weight: 500; letter-spacing: -.03em; }
.h-moment { display: grid; justify-items: start; }
.h-moment > * { max-width: 100%; }
.h-chat-wrap, .h-add-wrap, .h-cod-wrap { position: relative; width: 100%; }
.h-chat-wrap .h-browser { width: 82%; margin-left: auto; }
.h-chat { position: absolute; z-index: 2; left: 0; top: 8%; width: min(280px, 46%); display: grid; gap: 10px; padding: 16px; background: #fff; border: 1px solid rgba(56,40,43,.16); border-radius: 18px; box-shadow: 0 24px 40px -20px rgba(56,40,43,.4); }
.h-b { margin: 0; padding: 10px 13px; border-radius: 14px; font-size: 13px; line-height: 1.4; }
.h-b-me { background: #38282b; color: #fff; justify-self: end; border-bottom-right-radius: 4px; }
.h-b-ann { background: #f6e4df; border-bottom-left-radius: 4px; }
.h-b-ann i { display: block; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #874353; }
.h-typing { display: flex; gap: 4px; padding-left: 6px; }
.h-typing s { width: 6px; height: 6px; border-radius: 50%; background: #ce928b; }
.m-section-active .h-typing s { animation: h-dot 1.2s ease-in-out infinite; }
.h-typing s:nth-child(2) { animation-delay: .15s !important; } .h-typing s:nth-child(3) { animation-delay: .3s !important; }
@keyframes h-dot { 0%,100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-4px); opacity: 1; } }
.h-add-wrap { display: grid; gap: 14px; max-width: 760px; }
.h-add { display: grid; grid-template-columns: 180px 1fr; gap: 20px; padding: 18px; background: #fff; border: 1px solid rgba(56,40,43,.16); border-radius: 18px; box-shadow: 0 24px 40px -24px rgba(56,40,43,.4); align-items: center; }
.h-add-img { aspect-ratio: 1; overflow: hidden; border-radius: 12px; }
.h-add-img img, .h-add-img picture { width: 100%; height: 100%; object-fit: cover; }
.h-add-f { display: grid; gap: 10px; }
.h-add-f span { padding: 12px 14px; border: 1px solid rgba(56,40,43,.2); border-radius: 10px; font-size: 14px; }
.h-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.h-grid3 b { aspect-ratio: 1.4; border-radius: 10px; background: linear-gradient(135deg, #f6e4df, #ecd0cb); }
.h-cod-wrap { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.h-cod-wrap .h-phone { margin: 0; width: 200px; }
.h-cod-card { display: flex; align-items: center; gap: 18px; padding: 18px 22px; background: #fff; border: 1px solid rgba(56,40,43,.16); border-radius: 16px; font-weight: 600; box-shadow: 0 20px 36px -22px rgba(56,40,43,.4); }
.h-toggle { position: relative; display: inline-block; flex: none; width: 46px; height: 26px; border-radius: 999px; background: #d9cfcc; transition: background-color .3s; }
.h-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .3s; }
.h-toggle.is-on { background: #2f8a57; } .h-toggle.is-on::after { transform: translateX(20px); }
.h-store-stage { max-width: 980px; }
.h-invoice-stage { max-width: 720px; }
.h-report { display: grid; gap: 14px; max-width: 980px; }
.h-report-crop { overflow: hidden; aspect-ratio: 2.4; border: 1px solid rgba(56,40,43,.16); border-radius: 12px; background: #fff; }
.h-report-crop img, .h-report-crop picture { display: block; width: 170%; max-width: none; height: auto; margin: -2% 0 0 -66%; }
.h-defs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.h-defs span:not(.h-sample) { padding: 7px 12px; background: #fbf5f3; border-radius: 999px; font-size: 12px; color: #54484b; }
.h-defs b { color: #38282b; }
.h-exports { display: flex; gap: 8px; }
.h-conn { display: flex; flex-direction: column; gap: 14px; }
.h-conn h3 { margin: 0; font-size: 20px; }
.h-mini { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 18px; border-radius: 14px; background: #f7f1ef; min-height: 74px; }
.h-mini-pay { background: #0f2a5f; color: #fff; }
.h-logo { font-size: 18px; letter-spacing: -.02em; }
.h-mini-pay .h-chip { background: rgba(255,255,255,.16); color: #fff; }
.h-mini-dom b { margin-right: auto; font-size: 17px; }
.h-lock { width: 14px; height: 11px; border: 2px solid #9a8d8a; border-radius: 3px; position: relative; margin-top: 5px; }
.h-lock::before { content: ""; position: absolute; left: 1px; top: -9px; width: 6px; height: 7px; border: 2px solid #9a8d8a; border-bottom: 0; border-radius: 6px 6px 0 0; }
.h-lock.is-on { border-color: #2f8a57; } .h-lock.is-on::before { border-color: #2f8a57; }
.h-mini-del { flex-direction: column; align-items: flex-start; font-size: 13px; }
.h-conn .h-flow { margin: 4px 0 0; }
.h-conn .h-btn-line { align-self: flex-start; margin-top: 0; }
.h-conn .h-fine { margin: 0; }
.h-tile p:empty { display: none; }

.m-footer-home { padding: clamp(44px, 6vw, 80px) 0 28px; background: #1c1517; background-image: radial-gradient(60% 120% at 100% 0%, rgba(135,67,83,.4), transparent 70%); }
.hf-top { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.hf-brand { display: grid; gap: 18px; justify-items: start; max-width: 360px; }
.hf-brand p { margin: 0; font-size: clamp(24px, 3vw, 34px); line-height: 1.1; letter-spacing: -.04em; color: #f3ebe2; }
body.m-storyboard-document .m-footer-home .hf-brand > .m-cta {
  color: #2e2025;
  background: #f1b8ad;
  border-color: #f1b8ad;
  font-weight: 600;
}
body.m-storyboard-document .m-footer-home .hf-brand > .m-cta:hover {
  color: #2e2025;
  background: #e6a69c;
  border-color: #e6a69c;
}
body.m-storyboard-document .m-footer-home .hf-brand > .m-cta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}
.hf-cols { display: flex; gap: clamp(32px, 6vw, 88px); flex-wrap: wrap; }
.hf-cols div { display: grid; gap: 10px; align-content: start; }
.hf-cols h2 { margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #ce928b; }
.hf-cols a { font-size: 13px; }
.m-footer-home .m-footer-bottom { margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(243,235,226,.16); flex-wrap: wrap; }
@media (max-width: 700px) {
  .h-chat { position: relative; width: 100%; margin-bottom: 12px; }
  .h-chat-wrap .h-browser { width: 100%; }
  .h-add { grid-template-columns: 110px 1fr; }
  .h-report-crop { aspect-ratio: 1.5; }
  .hf-cols { gap: 28px; }
}

/* Compact product controls and message previews, confined to the homepage. */
.h-studio-tools { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:56px; }
.h-studio-tools > div { display:grid; justify-items:center; gap:16px; padding:24px 12px; border:1px solid #e9dedb; border-radius:16px; background:#fff; text-align:center; }
.h-studio-tools b { font-size:13px; font-weight:500; }
.h-studio-tools > div > span { display:flex; align-items:center; justify-content:center; gap:5px; width:64px; height:44px; position:relative; }
.h-tool-palette i { width:20px; height:20px; border-radius:50%; background:#874353; margin-left:-6px; border:2px solid #fff; }
.h-tool-palette i:nth-child(2) { background:#719183; }
.h-tool-palette i:nth-child(3) { background:#d5b49c; }
.h-studio-tools .h-tool-grid { display:grid; grid-template-columns:repeat(2,20px); gap:4px; }
.h-tool-grid i { height:17px; border:1.5px solid #874353; border-radius:3px; }
.h-studio-tools .h-tool-crop { width:40px; height:40px; border:2px solid #874353; border-radius:4px; background:linear-gradient(145deg,#e5ede6 55%,#779b8d 56%,#a7c0ac); outline:1px dashed #874353; outline-offset:4px; }
.h-studio-tools .h-tool-draft { width:36px; height:44px; flex-direction:column; align-items:flex-start; padding:8px; border:1.5px solid #874353; border-radius:4px; }
.h-tool-draft i { width:100%; height:2px; background:#c99692; }
.h-tool-draft i:last-child { width:60%; }
.h-tile.h-tile-wide p { color:#eadbd6; }
.h-mail-preview { display:grid; gap:7px; }
.h-mail-preview span { display:flex; align-items:center; gap:10px; background:#fff; color:#38282b; border-radius:7px; padding:10px 12px; font-size:12px; }
.h-mail-preview span::before { content:""; width:16px; height:12px; border:1px solid #874353; border-radius:2px; background:linear-gradient(135deg,transparent 45%,#e7d0ca 46%,#e7d0ca 53%,transparent 54%); }
.h-ops-steps { display:flex; gap:8px; flex-wrap:wrap; margin-top:20px; }
.h-ops-steps span { padding:7px 12px; border:1px solid #e9dedb; border-radius:7px; color:#675c60; font-size:12px; }
@media(max-width:700px) { .h-studio-tools { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } }

/* ===== #built-in: plain-language product stories ===== */
.h-stories { display: grid; gap: clamp(40px, 6vw, 72px); }
.h-story { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(24px, 6vw, 80px); align-items: center; }
.h-story-flip .h-story-copy { order: 2; }
.h-story-copy h3 { margin: 0 0 12px; font-size: clamp(24px, 3vw, 36px); font-weight: 500; line-height: 1.1; letter-spacing: -.035em; text-wrap: balance; }
.h-story-copy p { margin: 0; max-width: 440px; color: #54484b; font-size: 16px; line-height: 1.6; }
.h-story-copy .m-text-link { margin-top: 16px; }
.h-ui { display: grid; gap: 12px; padding: clamp(18px, 3vw, 28px); border-radius: 20px; background: #f7f1ef; border: 1px solid rgba(56,40,43,.1); }
.h-ui > div { background: #fff; border: 1px solid rgba(56,40,43,.12); border-radius: 14px; padding: 14px 16px; box-shadow: 0 16px 28px -22px rgba(56,40,43,.5); }
.h-ui-title { font-size: 12px; color: #675c60; letter-spacing: .04em; }
.h-src, .h-member, .h-doc, .h-ticket, .h-plan { display: flex; align-items: center; gap: 12px; }
.h-src span, .h-member b, .h-doc b, .h-ticket b, .h-plan b { font-size: 15px; font-weight: 600; }
.h-src em, .h-member em, .h-doc em { display: block; font-style: normal; font-size: 12px; color: #675c60; }
.h-src em { margin-left: auto; }
.h-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #874353; }
.h-dot-b { background: #ce928b; } .h-dot-c { background: #38282b; }
.h-ticket b { flex: 1; }
.h-pill { flex: none; padding: 4px 11px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.h-pill-wait { background: #fbefd5; color: #7a5410; }
.h-pill-ok { margin-left: auto; background: #dcefe3; color: #1f5a37; }
.h-ui > .h-mail { display: grid; gap: 3px; border-left: 4px solid #ce928b; }
.h-mail i { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #874353; }
.h-mail b { font-size: 15px; }
.h-mail span { font-size: 13px; color: #675c60; }
.h-av { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #874353; color: #fff; font-size: 13px; font-weight: 700; }
.h-av-b { background: #ce928b; color: #38282b; } .h-av-c { background: #38282b; }
.h-member small { margin-left: auto; padding: 4px 10px; border-radius: 999px; background: #f1ece9; font-size: 12px; font-weight: 600; text-align: right; }
.h-lock-ic { flex: none; position: relative; width: 18px; height: 14px; margin-top: 6px; border-radius: 3px; background: #38282b; }
.h-lock-ic::before { content: ""; position: absolute; left: 3px; top: -8px; width: 8px; height: 9px; border: 2px solid #38282b; border-bottom: 0; border-radius: 8px 8px 0 0; }
.h-ui-plan { grid-template-columns: 1fr 1fr; }
.h-plan { flex-direction: column; align-items: flex-start; gap: 6px; padding: 20px 18px !important; }
.h-plan span { font-size: 13px; color: #675c60; }
.h-plan.is-on { border: 2px solid #874353 !important; }
@media (max-width: 800px) {
  .h-story { grid-template-columns: 1fr; gap: 20px; }
  .h-story-flip .h-story-copy { order: 0; }
  .h-story-copy p { font-size: 15px; }
  .h-src { flex-wrap: wrap; } .h-src em { margin-left: 24px; width: 100%; }
}
@media (max-width: 480px) { .h-ui-plan { grid-template-columns: 1fr; } .h-member small { font-size: 11px; max-width: 110px; } }

/* ===== Founder pain to relief ===== */
.h-pain-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(16px, 3vw, 32px); align-items: end; }
.h-pain-card { margin: 0; display: grid; gap: 14px; }
.h-pain-card-b { transform: translateY(28px); }
.h-pain-img { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 20px; background: #f1e6e2; }
.h-pain-img img { width: 100%; height: 100%; object-fit: cover; }
.h-pain-card figcaption { display: grid; gap: 6px; }
.h-pain-card q { quotes: none; font-size: clamp(19px, 2vw, 24px); font-weight: 500; line-height: 1.2; letter-spacing: -.03em; }
.h-pain-card span, .h-relief em { font-size: 11px; font-style: normal; color: #675c60; }
.h-pain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.h-pain-list li { padding: 16px 18px; border-left: 3px solid #ce928b; background: #fbf5f3; border-radius: 0 12px 12px 0; font-size: 16px; font-weight: 500; }
.h-relief { margin: clamp(56px, 8vw, 90px) 0 0; position: relative; }
.h-relief-img { aspect-ratio: 3 / 2; overflow: hidden; border-radius: 24px; background: #f1e6e2; }
.h-relief-img img { width: 100%; height: 100%; object-fit: cover; }
.h-relief figcaption { position: absolute; left: clamp(12px, 3vw, 32px); bottom: clamp(12px, 3vw, 32px); display: grid; gap: 4px; max-width: min(420px, 80%); padding: 16px 20px; background: rgba(255,255,255,.94); border-radius: 16px; }
.h-relief figcaption b { font-size: clamp(20px, 2.6vw, 30px); font-weight: 500; letter-spacing: -.035em; }
.h-relief figcaption span { font-size: 14px; color: #54484b; }

/* Ann workspace: stacked and larger */
.h-ann-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
.h-ann-grid .h-head { max-width: 760px; }
.h-tabs-ann .h-tab { min-width: 150px; }
.h-tabs-ann .h-browser { width: 100%; }

/* Event handoff */
.h-evt { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.h-evt span { padding: 10px 14px; background: #f7f1ef; border-radius: 10px; font-size: 14px; font-weight: 600; }
.h-evt span.is-end { background: #874353; color: #fff; }
.h-evt i { width: 20px; height: 2px; background: #ce928b; }
.h-evt-to { margin-top: 2px; font-size: 13px; color: #675c60; }
.h-ui-src > div.h-evt-to { background: transparent; border: 0; box-shadow: none; padding: 0 4px; }

@media (max-width: 800px) {
  .h-pain-grid { grid-template-columns: 1fr 1fr; }
  .h-pain-list { grid-column: 1 / -1; }
  .h-pain-card-b { transform: none; }
  .h-relief figcaption { position: static; max-width: none; margin-top: 12px; padding: 0; background: none; }
}
@media (max-width: 480px) { .h-pain-grid { grid-template-columns: 1fr; } .h-evt i { width: 2px; height: 14px; } }

/* ===== Storyboard rebuild ===== */
.h-first { padding-top: clamp(120px, 14vw, 170px); }
.h-people { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(16px, 3vw, 36px); align-items: start; }
.h-person { position: relative; margin: 0; }
.h-person-b { margin-top: 36px; }
.h-person .h-pain-img { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 22px; background: #f1e6e2; }
.h-person .h-pain-img img { width: 100%; height: 100%; object-fit: cover; }
.h-thought { position: relative; margin: 14px 0 0; padding: 12px 16px; background: #fff; border: 1px solid rgba(56,40,43,.16); border-radius: 18px 18px 18px 4px; box-shadow: 0 16px 30px -22px rgba(56,40,43,.5); font-size: 15px; font-weight: 500; line-height: 1.3; }
.h-person .h-thought-2 { margin-left: 18px; background: #fbf5f3; }
.h-thoughts { display: grid; gap: 14px; align-content: center; min-height: 100%; }
.h-thoughts .h-thought { font-size: clamp(18px, 2vw, 24px); letter-spacing: -.025em; padding: 18px 20px; margin: 0; }
.h-thoughts .h-thought:nth-child(2) { margin-left: 24px; background: #874353; color: #fff; border-color: #874353; }
.h-answer-head { display: flex; justify-content: space-between; align-items: end; gap: 28px; flex-wrap: wrap; margin-bottom: 32px; }
.h-answer-head h2 { max-width: 760px; font-size: clamp(36px, 5.4vw, 68px) !important; }
.h-answer-head .h-final-cta { margin: 0; }
.h-relief { margin: 0; }
.h-pillrow { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0 0 22px; }
.h-pillrow li { padding: 9px 16px; background: #f7f1ef; border-radius: 999px; font-size: 14px; font-weight: 600; }
.h-pillrow-soft li { background: transparent; border: 1px dashed rgba(56,40,43,.3); color: #54484b; font-weight: 500; }
.h-pillrow-left { margin-top: 18px; }
.h-store .h-pillrow { margin-top: 22px; }
.h-tabs-ann .h-browser, .h-tabs-looks .h-browser { max-width: 1180px; }
.h-editor-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(28px, 6vw, 80px); align-items: center; }
.h-steps3 { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; counter-reset: st; }
.h-steps3 li { display: grid; grid-template-columns: 40px 1fr; align-items: center; column-gap: 14px; padding: 14px 16px; background: #f7f1ef; border-radius: 14px; counter-increment: st; }
.h-steps3 li::before { content: counter(st); grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #874353; color: #fff; font-weight: 700; }
.h-steps3 b { font-size: 16px; } .h-steps3 span { font-size: 13px; color: #675c60; }
.h-co-visual { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; }
.h-co-visual .h-phone { margin: 0; width: min(250px, 100%); }
.h-co-invoice { position: relative; }
.h-co-invoice .h-cap { position: static; display: inline-block; margin-top: 10px; background: none; color: #54484b; padding: 0; }
.h-cost-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
.h-shot-plain { border: 1px solid rgba(56,40,43,.14); border-radius: 14px; overflow: hidden; background: #fff; }
.h-shot-plain img, .h-shot-plain picture { width: 100%; height: auto; display: block; }
.h-cost-grid .h-variant { margin: 0; }
.h-evt-col { flex-direction: column; align-items: flex-start; }
.h-evt-col i { width: 2px; height: 14px; margin-left: 20px; }
.h-conn-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .h-people { grid-template-columns: 1fr 1fr; }
  .h-thoughts { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .h-person-b { margin-top: 0; }
  .h-editor-grid, .h-cost-grid { grid-template-columns: 1fr; }
  .h-co-visual { grid-template-columns: 1fr 1fr; }
  .h-strip { grid-template-columns: 1fr 1fr; }
  .h-conn-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .h-people { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .h-thoughts, .h-strip { grid-template-columns: 1fr; }
  .h-person .h-thought { margin-top: 8px; padding: 10px; font-size: 12px; }
  .h-person .h-thought-2 { margin-left: 0; }
  .h-thoughts .h-thought { padding: 12px 16px; font-size: 16px; }
  .h-co-visual { grid-template-columns: 1fr; justify-items: center; }
  .h-answer-head h2 { font-size: clamp(32px, 9vw, 40px) !important; }
}

/* ===== Homepage heading typography (storyboard homepage only; Instrument Sans, self-hosted) =====
   One consistent system: semibold, open tracking, comfortable leading, balanced wrapping. */
body.m-home-document {
  --h-head-font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
body.m-home-document :is(.h-sec h1, .h-sec h2, .m-faq h2, .h-final h2, .h-answer-head h2) {
  font-family: var(--h-head-font) !important;
  font-weight: 600; letter-spacing: -.022em; line-height: 1.1;
  text-wrap: balance; font-optical-sizing: auto; font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
}
body.m-home-document .h-answer-head :is(h1, h2) { line-height: 1.06; letter-spacing: -.026em; }
body.m-home-document :is(.h-sec h3, .h-copy h3, .h-story-copy h3, .h-conn h3, .h-tile h3, .h-steps3 b, .h-strip b, .h-plan b) {
  font-family: var(--h-head-font) !important;
  font-weight: 600; letter-spacing: -.012em; line-height: 1.2; text-wrap: balance;
}
body.m-home-document :is(.h-cap2, .h-relief figcaption b, .h-pain-card q, .hf-brand p) {
  font-family: var(--h-head-font) !important;
  font-weight: 600; letter-spacing: -.016em; line-height: 1.18; text-wrap: balance;
}
body.m-home-document .hf-cols h2 { font-family: var(--h-head-font) !important; font-weight: 600; letter-spacing: .12em; line-height: 1.3; }
@media (max-width: 600px) {
  body.m-home-document :is(.h-sec h1, .h-sec h2, .m-faq h2, .h-final h2) { letter-spacing: -.016em; line-height: 1.14; }
}

.h-founder-stage {
  display: inline-block;
  margin: 0 0 10px;
  padding: 7px 12px;
  border-radius: 20px;
  background: #f5ede7;
  color: #684347;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
}
.h-person-b .h-founder-stage { background: #e9f0eb; color: #3b5b48; }
.m-footer-home > .m-wrap > .h-fine { color: #d9c9c5; }

/* Storyboard entrances: appear in place, without directional movement. */
body.m-storyboard-document .m-reveal {
  transform: none !important;
  filter: none !important;
  transition: opacity .52s ease var(--rd, 0s) !important;
  will-change: opacity;
}
.m-motion body.m-storyboard-document .h-panel:not([hidden]),
.m-motion body.m-storyboard-document .m-nav :is(.m-wordmark, .m-nav-links) {
  animation: h-appear .45s ease both;
}
@keyframes h-appear {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body.m-storyboard-document .m-reveal { transition: none !important; }
  body.m-storyboard-document :is(.h-panel, .m-wordmark, .m-nav-links) {
    animation: none !important;
  }
}

/* ===== Connections: four cards; Launch: three-step guide ===== */
:root:root #top .h-conn-four { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.h-cc { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid #38282b26; border-radius: 16px; background: #fff; }
.h-cc-art { display: flex; flex-direction: column; justify-content: center; gap: 12px; min-height: 150px; padding: 14px; border-radius: 12px; background: #fbf3f1; }
.h-cc-mkt .h-cc-art { background: #f3f1f8; }
.h-cc-pay .h-cc-art { background: #eef5f3; }
.h-cc-del .h-cc-art { background: #f8f2e8; }
.h-cc-tag { color: #874353; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.h-cc h3 { margin: 0; font-size: 20px; }
.h-cc p { margin: 0; color: #796c6c; font-size: 13px; line-height: 1.6; }
.h-cc .h-btn-line { margin-top: auto; align-self: flex-start; }
.h-pay { display: grid; gap: 6px; justify-items: center; text-align: center; font-size: 12px; }
.h-pay span { width: 100%; padding: 9px 10px; border-radius: 10px; background: #fff; border: 1px solid #38282b26; }
.h-pay span.is-end { background: #38282b; color: #fff; }
.h-pay i { width: 2px; height: 16px; background: #874353; }
.h-guide { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; margin: 28px 0 0; padding: 0; counter-reset: none; }
.h-gstep { position: relative; padding: 26px 22px; border: 1px solid #38282b26; border-radius: 18px; background: #fff; }
.h-gstep:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -17px; width: 16px; height: 16px; border-top: 2px solid #874353; border-right: 2px solid #874353; transform: translateY(-50%) rotate(45deg); }
.h-gstep-opt { border-style: dashed; background: #fbf3f1; }
.h-gnum { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 14px; border-radius: 50%; background: #874353; color: #fff; font-size: 24px; font-weight: 600; }
.h-gstep-opt .h-gnum { background: #fff; color: #874353; border: 2px solid #874353; }
.h-gwho { display: block; margin-bottom: 6px; color: #874353; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.h-gstep h3 { margin: 0 0 8px; font-size: 21px; }
.h-gstep p { margin: 0; color: #796c6c; font-size: 14px; line-height: 1.6; }
@media (max-width: 1100px) { :root:root #top .h-conn-four { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 760px) {
  :root:root #top .h-conn-four, .h-guide { grid-template-columns: 1fr; }
  .h-gstep:not(:last-child)::after { top: auto; bottom: -17px; right: auto; left: 50%; transform: translateX(-50%) rotate(135deg); }
}

/* ===== Opening: two founder cards, portrait beside the six questions ===== */
.h-pain .h-head { max-width: 1180px; }
.h-pain #h-pain-title { max-width: 1120px; font-size: clamp(28px, 3.2vw, 46px) !important; line-height: 1.14; }
.h-pain #h-pain-title > span { display: block; }
.h-pain #h-pain-title > span + span { margin-top: 14px; }
.h-fcards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(14px, 2.4vw, 28px); margin-top: 8px; }
.h-fc { display: grid; grid-template-columns: minmax(120px, 36%) 1fr; gap: clamp(14px, 2vw, 24px); align-items: stretch; padding: clamp(12px, 1.6vw, 18px); border: 1px solid #38282b26; border-radius: 22px; background: #fff; box-shadow: 0 18px 40px -30px #38282b80; }
.h-fc-b { background: #fbf5f3; }
.h-fc-photo { overflow: hidden; border-radius: 16px; background: #f1e6e2; min-height: 220px; }
.h-fc-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.h-fc-body { display: flex; flex-direction: column; justify-content: center; gap: 10px; min-width: 0; }
.h-fc-qs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.h-fc-qs li { padding: 10px 14px; border-left: 3px solid #874353; border-radius: 0 12px 12px 0; background: #fff; box-shadow: 0 1px 0 #38282b14; font-size: clamp(15px, 1.35vw, 18px); font-weight: 600; line-height: 1.3; letter-spacing: -.012em; }
.h-fc-b .h-fc-qs li { background: #fff; }
.h-fc-ans { margin: 2px 0 0; color: #874353; font-size: 13px; font-weight: 600; }
body.m-storyboard-document .h-answer-head { display: block; }
body.m-storyboard-document .h-answer-head .h-ann-intro { margin: 0 0 22px; font-size: clamp(44px, 6vw, 76px) !important; line-height: 1.05; }
body.m-storyboard-document .h-answer-head > .h-sub { margin: 18px 0 24px; font-size: clamp(18px, 1.6vw, 22px); font-weight: 500; color: #684347; }
@media (max-width: 1000px) { .h-fcards { grid-template-columns: 1fr; } .h-fc { grid-template-columns: minmax(130px, 34%) 1fr; } }
@media (max-width: 520px) {
  .h-fc { grid-template-columns: 96px 1fr; gap: 10px; padding: 10px; border-radius: 18px; }
  .h-fc-photo { min-height: 0; border-radius: 12px; }
  .h-fc-qs { gap: 6px; }
  .h-fc-qs li { padding: 8px 10px; font-size: 14px; }
  .h-fc-ans { font-size: 12px; }
}

/* ===== Homepage slideshow ===== */
.h-show-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 clamp(24px, 4vw, 40px); padding-bottom: 14px; border-bottom: 1px solid #38282b26; }
.h-show-nav[hidden] { display: none; }
.h-show { scroll-margin-top: 110px; }
.h-show-tabs { display: grid; grid-template-columns: repeat(4, auto); gap: 8px; }
.h-show-tab { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 16px 0 8px; border: 1px solid #38282b33; border-radius: 999px; background: #fff; color: #38282b; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.h-show-tab i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #f1e6e2; font-style: normal; font-size: 12px; }
.h-show-tab:hover { border-color: #874353; }
.h-show-tab[aria-current="true"] { background: #38282b; border-color: #38282b; color: #fff; }
.h-show-tab[aria-current="true"] i { background: #ce928b; color: #352528; }
.h-show-step { display: inline-flex; align-items: center; gap: 12px; }
.h-show-count { min-width: 52px; text-align: center; color: #675c60; font-size: 13px; font-variant-numeric: tabular-nums; }
.h-show-arrow { width: 44px; height: 44px; border: 1px solid #38282b33; border-radius: 50%; background: #fff; color: #38282b; font-size: 18px; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.h-show-arrow:hover { background: #38282b; color: #fff; }
.h-show-stage { touch-action: pan-y; }
.h-slide[hidden] { display: none; }
.h-show .h-slide { padding: 0; }
.h-show:not(.is-enhanced) .h-slide + .h-slide { margin-top: clamp(64px, 9vw, 110px); padding-top: clamp(40px, 6vw, 70px); border-top: 1px solid #38282b1f; }
.h-slide.is-entering { animation: h-appear .5s ease both; }
.h-slide .h-answer-head, .h-slide .h-head { margin-bottom: clamp(18px, 3vw, 28px); }
/* Meet Ann is the large moment; the flagship sentence is the quieter line. */
:root:root body.m-storyboard-document .h-show .h-answer-head .h-ann-intro { margin: 0 0 12px; font-size: clamp(64px, 12vw, 160px) !important; line-height: .95; letter-spacing: -.035em; font-weight: 600; }
:root:root body.m-storyboard-document .h-show .h-answer-head h1 { max-width: 640px; font-size: clamp(19px, 2.2vw, 28px); font-weight: 500; line-height: 1.25; letter-spacing: -.012em; }
@media (max-width: 760px) {
  .h-show-tabs { grid-template-columns: 1fr 1fr; flex: 1 1 100%; }
  .h-show-tab { padding-right: 10px; font-size: 13px; }
  .h-show-step { width: 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) { .h-slide.is-entering { animation: none; } }

/* ===== Homepage visual refinement (storyboard homepage only) =====
   Scale: display 56-104 (Meet Ann), statement 36-60, section 30-46, card 18-22, body 15-17. */
body.m-storyboard-document { --hx-ink: #2f2023; --hx-body: #5d5054; --hx-wine: #874353; --hx-wine-d: #6e3441; --hx-line: #38282b1f; --hx-tint: #fbf5f3; }
body.m-storyboard-document { color: var(--hx-ink); font-size: 16px; line-height: 1.65; text-rendering: optimizeLegibility; }
body.m-storyboard-document .h-sec { padding-block: clamp(72px, 9vw, 124px); }
body.m-storyboard-document .h-sec + .h-sec:not(.h-show):not(.h-presence) { border-top: 1px solid var(--hx-line); }
body.m-storyboard-document .m-wrap { width: min(1180px, calc(100% - clamp(40px, 7vw, 112px))); }

/* Eyebrows */
body.m-storyboard-document .h-sec .m-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 6px 12px 6px 10px; border-radius: 999px; background: var(--hx-tint); color: var(--hx-wine); font-size: 11px; font-weight: 600; letter-spacing: .14em; }
body.m-storyboard-document .h-sec .m-kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--hx-wine); }

/* Headings */
body.m-storyboard-document .h-sec .h-head h2,
body.m-storyboard-document .h-sec .m-faq-inner h2,
body.m-storyboard-document .h-grow h2,
body.m-storyboard-document .h-find h2,
body.m-storyboard-document .h-slide .h-head h2 { font-size: clamp(30px, 3.8vw, 48px) !important; line-height: 1.1; letter-spacing: -.025em; color: var(--hx-ink); max-width: 18ch; }
body.m-storyboard-document .h-head-wide h2 { max-width: 22ch; }
body.m-storyboard-document .h-sec .h-head p:not(.h-presence-lead), body.m-storyboard-document .h-sub { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; color: var(--hx-body); max-width: 56ch; }
body.m-storyboard-document .h-hint { color: var(--hx-body); font-size: 15px; }
body.m-storyboard-document .h-fine, body.m-storyboard-document .h-qual { color: #6f6266; font-size: 13px; line-height: 1.65; }

/* Opening statement */
body.m-storyboard-document .h-pain .h-head { max-width: 980px; }
body.m-storyboard-document .h-pain .h-head h2 { max-width: 24ch; font-size: clamp(30px, 4.2vw, 54px) !important; line-height: 1.1; }
body.m-storyboard-document .h-pain .h-head h2 span:first-child { color: var(--hx-ink); }
body.m-storyboard-document .h-pain .h-head h2 span + span { color: var(--hx-wine); }
body.m-storyboard-document .h-fc { border-radius: 24px; border-color: var(--hx-line); box-shadow: 0 1px 2px #38282b14, 0 28px 50px -34px #38282b66; }
body.m-storyboard-document .h-fc-qs li { border-left-width: 3px; border-radius: 0 12px 12px 0; background: var(--hx-tint); box-shadow: none; }
body.m-storyboard-document .h-fc-b .h-fc-qs li { background: #fff; border: 1px solid var(--hx-line); border-left: 3px solid var(--hx-wine); }
body.m-storyboard-document .h-founder-stage { letter-spacing: .08em; }

/* Presence statement: big, but a statement, not a slide */

/* Slideshow */
body.m-storyboard-document .h-show { padding-top: clamp(40px, 5vw, 64px); }
body.m-storyboard-document .h-show-nav { position: relative; padding: 8px; margin-bottom: clamp(28px, 4vw, 48px); border: 1px solid var(--hx-line); border-radius: 22px; background: var(--hx-tint); box-shadow: 0 18px 40px -32px #38282b66; }
body.m-storyboard-document .h-show-tabs { gap: 4px; }
body.m-storyboard-document .h-show-tab { border: 0; background: transparent; min-height: 46px; padding: 0 18px 0 8px; color: var(--hx-body); }
body.m-storyboard-document .h-show-tab i { background: #fff; color: var(--hx-wine); box-shadow: inset 0 0 0 1px var(--hx-line); }
body.m-storyboard-document .h-show-tab:hover { background: #fff; color: var(--hx-ink); }
body.m-storyboard-document .h-show-tab[aria-current="true"] { background: #2f2023; color: #fff; box-shadow: 0 8px 18px -10px #2f2023; }
body.m-storyboard-document .h-show-tab[aria-current="true"] i { background: #f1c9c2; color: #2f2023; box-shadow: none; }
body.m-storyboard-document .h-show-arrow { border-color: var(--hx-line); background: #fff; }
body.m-storyboard-document .h-show-arrow:hover { background: #2f2023; color: #fff; }
body.m-storyboard-document .h-show-count { color: var(--hx-ink); font-weight: 600; }
:root:root body.m-storyboard-document .h-show .h-answer-head .h-ann-intro { font-size: clamp(56px, 9vw, 112px) !important; line-height: .96; letter-spacing: -.04em; color: var(--hx-ink); }
:root:root body.m-storyboard-document .h-show .h-answer-head h1 { max-width: 34ch; font-size: clamp(18px, 1.9vw, 24px); color: var(--hx-body); }
body.m-storyboard-document .h-answer-head > .h-sub { color: var(--hx-wine); font-weight: 600; }
body.m-storyboard-document .h-relief-img { border-radius: 26px; box-shadow: 0 40px 70px -44px #38282b8c; }
body.m-storyboard-document .h-relief figcaption { border-radius: 16px; box-shadow: 0 18px 40px -22px #38282b80; }

/* Framing for product screenshots */
body.m-storyboard-document .h-browser { border-radius: 16px; border-color: var(--hx-line); box-shadow: 0 1px 2px #38282b14, 0 44px 80px -46px #38282b8c; }
body.m-storyboard-document .h-bar { padding: 11px 14px; background: #f6efec; border-bottom: 1px solid var(--hx-line); }
body.m-storyboard-document .h-tablist { gap: 8px; }
body.m-storyboard-document .h-tab { border-radius: 14px; border-color: var(--hx-line); }
body.m-storyboard-document .h-tab[aria-selected="true"] { background: #2f2023; border-color: #2f2023; box-shadow: 0 10px 22px -14px #2f2023; }
body.m-storyboard-document .h-pillrow li { border-radius: 999px; }

/* Buttons: strong contrast */
body.m-storyboard-document .m-cta { min-height: 52px; padding: 0 26px; border-radius: 999px; background: #2f2023; color: #fff; font-size: 15px; font-weight: 600; letter-spacing: -.005em; box-shadow: 0 12px 24px -14px #2f2023; transition: transform .2s ease, background-color .2s ease; }
body.m-storyboard-document .m-cta:hover { background: var(--hx-wine-d); color: #fff; transform: translateY(-1px); }
body.m-storyboard-document .m-text-link { font-size: 14px; font-weight: 600; color: var(--hx-ink); border-bottom-color: #2f2023; }
body.m-storyboard-document .h-btn-line, body.m-storyboard-document .h-offer button { border-radius: 999px; }
body.m-storyboard-document .m-nav-links .m-nav-cta { border-radius: 999px; background: #2f2023; color: #fff; padding: 10px 18px; font-weight: 600; }
body.m-storyboard-document .m-nav-links .m-nav-cta:hover { background: var(--hx-wine-d); }

/* Connection cards and trust */
body.m-storyboard-document .h-cc { border-radius: 22px; border-color: var(--hx-line); box-shadow: 0 1px 2px #38282b14, 0 30px 50px -40px #38282b80; }
body.m-storyboard-document .h-cc-art { border-radius: 16px; }
body.m-storyboard-document .h-cc h3 { font-size: 21px; line-height: 1.2; }
body.m-storyboard-document .h-cc p { font-size: 14px; color: var(--hx-body); }

/* FAQ */

/* Footer CTA keeps dark text on light peach */
@media (max-width: 760px) {
  body.m-storyboard-document .h-sec { padding-block: 60px; }
  body.m-storyboard-document .h-show-nav { border-radius: 18px; }
  body.m-storyboard-document .h-show-tab { background: #fff; border: 1px solid var(--hx-line); }
  body.m-storyboard-document .h-show-tab[aria-current="true"] { border-color: #2f2023; }
  body.m-storyboard-document .h-show-tabs { gap: 6px; }
  :root:root body.m-storyboard-document .h-show .h-answer-head .h-ann-intro { font-size: clamp(52px, 17vw, 76px) !important; }
}

/* ===== Opening hero: two-column composition (headline left, compact founder cards right) ===== */
:root:root #top > section.h-pain { background: linear-gradient(180deg, #fdf8f6 0%, #faf0ed 100%) !important; padding-block: clamp(112px, 12vw, 148px) clamp(48px, 6vw, 84px); min-height: min(100svh, 900px); display: flex; align-items: center; }
body.m-storyboard-document .h-pain > .m-wrap { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 76px); align-items: center; width: min(1240px, calc(100% - clamp(40px, 7vw, 112px))); }
body.m-storyboard-document .h-pain .h-head { margin: 0; max-width: none; }
body.m-storyboard-document .h-pain .m-kicker { background: #fff; box-shadow: inset 0 0 0 1px #38282b1f; }
:root:root body.m-storyboard-document .h-pain #h-pain-title { max-width: 15ch; font-size: clamp(34px, 4.5vw, 66px) !important; line-height: 1.05; letter-spacing: -.03em; font-weight: 600; }
body.m-storyboard-document .h-pain #h-pain-title > span + span { margin-top: 18px; font-size: .62em; line-height: 1.2; letter-spacing: -.02em; font-weight: 500; color: #874353; max-width: 24ch; }
body.m-storyboard-document .h-pain .h-fcards { grid-template-columns: 1fr; gap: 14px; margin: 0; }
body.m-storyboard-document .h-pain .h-fc { grid-template-columns: clamp(104px, 11vw, 150px) minmax(0,1fr); gap: 16px; padding: 12px; border-radius: 22px; background: #fff; border: 1px solid #38282b1a; box-shadow: 0 1px 2px #38282b14, 0 30px 50px -32px #874353aa; }
body.m-storyboard-document .h-pain .h-fc-photo { min-height: 0; height: 100%; border-radius: 15px; }
body.m-storyboard-document .h-pain .h-fc-photo img { object-position: center 22%; }
body.m-storyboard-document .h-pain .h-fc-body { gap: 8px; justify-content: center; }
body.m-storyboard-document .h-pain .h-fc-qs { gap: 6px; }
body.m-storyboard-document .h-pain .h-fc-qs li { padding: 7px 12px; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.3; }
@media (max-width: 1000px) {
  :root:root #top > section.h-pain { min-height: 0; display: block; padding-block: 128px 56px; }
  body.m-storyboard-document .h-pain > .m-wrap { grid-template-columns: 1fr; gap: 28px; }
  :root:root body.m-storyboard-document .h-pain #h-pain-title { max-width: 20ch; font-size: clamp(32px, 6.4vw, 52px) !important; }
}
@media (max-width: 520px) {
  :root:root #top > section.h-pain { padding-block: 108px 44px; }
  body.m-storyboard-document .h-pain > .m-wrap { gap: 26px; }
  :root:root body.m-storyboard-document .h-pain #h-pain-title { font-size: clamp(32px, 9vw, 34px) !important; line-height: 1.07; max-width: 14ch; }
  body.m-storyboard-document .h-pain #h-pain-title > span + span { margin-top: 12px; font-size: .62em; max-width: 26ch; }
  /* Editorial conversation cards: avatar + label on top, questions full width below. */
  body.m-storyboard-document .h-pain .h-fcards { gap: 16px; }
  body.m-storyboard-document .h-pain .h-fc { display: grid; grid-template-columns: 68px minmax(0,1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 14px; align-items: center; padding: 18px 18px 8px; border-radius: 20px; }
  body.m-storyboard-document .h-pain .h-fc-photo { grid-row: 1; grid-column: 1; width: 68px; height: 68px; min-height: 0; border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 0 0 4px #874353; }
  body.m-storyboard-document .h-pain .h-fc-body { display: contents; }
  body.m-storyboard-document .h-pain .h-founder-stage { grid-row: 1; grid-column: 2; align-self: center; font-size: 12px; line-height: 1.35; }
  body.m-storyboard-document .h-pain .h-fc-qs { grid-row: 2; grid-column: 1 / -1; display: block; }
  body.m-storyboard-document .h-pain .h-fc-qs li,
  body.m-storyboard-document .h-pain .h-fc-b .h-fc-qs li { padding: 13px 0 13px 14px; margin: 0; border: 0; border-top: 1px solid #38282b1f; border-left: 3px solid #ce928b; border-radius: 0; background: none; box-shadow: none; font-size: 16px; line-height: 1.35; font-weight: 600; letter-spacing: -.01em; }
  body.m-storyboard-document .h-pain .h-fc-qs li:first-child { border-top: 0; }
}
body.m-storyboard-document .h-pain #h-pain-title .h-conv { font-style: normal; background: linear-gradient(transparent 62%, #ce928b66 62%); }

/* ===== Compact two-row mobile header: logo left, CTA right, links beneath ===== */
@media (max-width: 1000px) {
  body.m-storyboard-document .m-nav-inner { position: relative; display: block; height: auto; min-height: 94px; padding: 6px 0 4px; }
  body.m-storyboard-document .m-wordmark { width: 124px; height: 44px; }
  body.m-storyboard-document .m-nav-links { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 14px; margin-top: 0; min-height: 32px; overflow-x: auto; scrollbar-width: none; }
  body.m-storyboard-document .m-nav-links::-webkit-scrollbar { display: none; }
  body.m-storyboard-document .m-nav-links a { flex: none; font-size: 12px; white-space: nowrap; }
  body.m-storyboard-document .m-nav-links .m-nav-login { margin: 0; }
  body.m-storyboard-document .m-nav-links .m-nav-cta { position: absolute; top: 12px; right: 0; padding: 10px 16px; font-size: 12px; }
  body.m-storyboard-document .m-nav-links .m-theme-toggle { flex: none; min-height: 32px; }
}

/* ===== Lower homepage: Help and trust, Discovery, Promises (scoped) ===== */
body.m-storyboard-document .h-grow { padding-block: clamp(72px, 9vw, 120px) clamp(40px, 5vw, 64px); }
body.m-storyboard-document .h-grow .h-head { margin-bottom: clamp(28px, 4vw, 48px); }
body.m-storyboard-document .h-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; border: 0; }
body.m-storyboard-document .h-strip li { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px 22px 28px; overflow: hidden; border: 1px solid var(--hx-line); border-radius: 24px; background: linear-gradient(180deg, #fff 55%, #fdf6f4 100%); box-shadow: 0 1px 2px #38282b12, 0 30px 50px -40px #874353aa; }
body.m-storyboard-document .h-strip li::after { content: ""; position: absolute; right: -34px; top: -34px; width: 110px; height: 110px; border-radius: 50%; background: #f8e6e1; opacity: .7; }
body.m-storyboard-document .h-ico { position: relative; z-index: 1; display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 8px; border-radius: 18px; background: #2f2023; color: #f1c9c2; }
body.m-storyboard-document .h-strip b { position: relative; z-index: 1; font-size: 20px; line-height: 1.2; color: var(--hx-ink); }
body.m-storyboard-document .h-strip span { position: relative; z-index: 1; font-size: 15px; line-height: 1.6; color: var(--hx-body); }
body.m-storyboard-document .h-strip a { color: var(--hx-wine); font-weight: 600; text-underline-offset: 3px; }
/* Discovery stage */
body.m-storyboard-document .h-find { padding-block: clamp(40px, 5vw, 64px) clamp(72px, 9vw, 120px); }
body.m-storyboard-document .h-find-grid { grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); gap: clamp(28px, 5vw, 72px); }
body.m-storyboard-document .h-find .h-sub { font-size: clamp(17px, 1.5vw, 20px); color: var(--hx-ink); font-weight: 500; }
body.m-storyboard-document .h-find .h-links { gap: 10px; margin-top: 30px; }
body.m-storyboard-document .h-find .h-links a { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 20px; border: 1px solid var(--hx-line); border-radius: 999px; background: #fff; color: var(--hx-ink); font-size: 14px; box-shadow: 0 10px 22px -16px #38282b80; }
body.m-storyboard-document .h-find .h-links a::after { content: "\2192"; color: var(--hx-wine); transition: transform .2s ease; }
body.m-storyboard-document .h-find .h-links a:hover { background: #2f2023; color: #fff; }
body.m-storyboard-document .h-find .h-links a:hover::after { color: #f1c9c2; transform: translateX(3px); }
body.m-storyboard-document .h-space { position: relative; padding: clamp(16px, 3vw, 36px); border-radius: 32px; background: radial-gradient(80% 100% at 100% 0%, #f6ddd7 0%, #fbeeea 50%, #fdf8f6 100%); overflow: hidden; }
body.m-storyboard-document .h-space::before { content: ""; position: absolute; left: -60px; bottom: -80px; width: 240px; height: 240px; border-radius: 50%; border: 1px solid #87435333; box-shadow: 0 0 0 38px #8743530d, 0 0 0 76px #87435308; }
body.m-storyboard-document .h-space .h-browser { position: relative; z-index: 1; }
body.m-storyboard-document .h-space .h-shot { display: block; }
/* Promises */
body.m-storyboard-document .h-brand-promises { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: clamp(32px, 5vw, 56px); }
body.m-storyboard-document .h-brand-promises > div { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; min-height: 250px; padding: 28px; overflow: hidden; border-radius: 28px; border: 1px solid var(--hx-line); background: #fdf6f4; }
body.m-storyboard-document .h-brand-promises .h-ico { position: absolute; top: 24px; right: 24px; margin: 0; background: #fff; color: var(--hx-wine); box-shadow: inset 0 0 0 1px var(--hx-line); }
body.m-storyboard-document .h-brand-promises b { font-size: clamp(58px, 7vw, 96px); line-height: .95; font-weight: 600; letter-spacing: -.04em; color: var(--hx-ink); }
body.m-storyboard-document .h-brand-promises span:not(.h-ico) { max-width: 24ch; font-size: 16px; line-height: 1.45; font-weight: 500; color: var(--hx-body); }
body.m-storyboard-document .h-brand-promises .hp-zero { background: #2f2023; border-color: #2f2023; }
body.m-storyboard-document .h-brand-promises .hp-zero b { color: #fff; }
body.m-storyboard-document .h-brand-promises .hp-zero span:not(.h-ico) { color: #e8d7d2; }
body.m-storyboard-document .h-brand-promises .hp-zero .h-ico { background: #3f2f33; color: #f1c9c2; box-shadow: none; }
body.m-storyboard-document .h-brand-promises .hp-yours b { color: var(--hx-wine); }
body.m-storyboard-document .h-brand-promises .hp-always { background: #fff; }
@media (max-width: 1100px) { body.m-storyboard-document .h-strip { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 900px) { body.m-storyboard-document .h-find-grid { grid-template-columns: 1fr; } body.m-storyboard-document .h-brand-promises { grid-template-columns: 1fr; } body.m-storyboard-document .h-brand-promises > div { min-height: 190px; } }
@media (max-width: 560px) {
  body.m-storyboard-document .h-strip { grid-template-columns: 1fr; }
  body.m-storyboard-document .h-strip li { padding: 22px 20px 24px; }
  body.m-storyboard-document .h-space { padding: 12px; border-radius: 22px; }
  body.m-storyboard-document .h-brand-promises > div { padding: 22px; border-radius: 22px; }
  body.m-storyboard-document .h-find .h-links a { min-height: 44px; padding: 0 16px; }
}


/* ===== Homepage FAQ (section.h-faq only): blush-lined question cards, native details ===== */
:root:root body.m-storyboard-document section.h-faq { padding-block: clamp(72px, 9vw, 124px); }
body.m-storyboard-document section.h-faq::before, body.m-storyboard-document section.h-faq::after { display: none; }
body.m-storyboard-document .h-faq .m-faq-inner { grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); gap: clamp(28px, 6vw, 88px); align-items: start; }
body.m-storyboard-document .h-faq .m-faq-inner h2 { position: sticky; top: 112px; max-width: 8ch; font-size: clamp(36px, 4.6vw, 60px) !important; line-height: 1.04; letter-spacing: -.03em; color: var(--hx-ink); }
body.m-storyboard-document .h-faq .m-faq-list { display: grid; gap: 12px; border: 0; counter-reset: faq; }
body.m-storyboard-document .h-faq .m-faq-item { counter-increment: faq; border: 1px solid var(--hx-line); border-radius: 22px; background: #fff; box-shadow: 0 1px 2px #38282b10; transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease; }
body.m-storyboard-document .h-faq .m-faq-item:hover { border-color: #87435359; box-shadow: 0 18px 36px -28px #874353aa; }
body.m-storyboard-document .h-faq .m-faq-item[open] { background: linear-gradient(180deg, #fdf6f4, #fbeeea); border-color: #87435366; box-shadow: 0 24px 44px -32px #874353bb; }
body.m-storyboard-document .h-faq .m-faq-item summary { min-height: 64px; gap: 16px; padding: 14px 16px 14px 20px; border-radius: 22px; font-family: var(--h-head-font) !important; font-size: clamp(16px, 1.4vw, 18px); font-weight: 600; line-height: 1.35; letter-spacing: -.01em; color: var(--hx-ink); }
body.m-storyboard-document .h-faq .m-faq-item summary::before { content: counter(faq, decimal-leading-zero); flex: none; min-width: 26px; color: var(--hx-wine); font-size: 12px; font-weight: 600; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
body.m-storyboard-document .h-faq .m-faq-item summary::after { content: ""; flex: none; order: 3; margin-left: auto; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat, #fbeeea; color: var(--hx-wine); font-size: 0; transition: background-color .25s ease, color .25s ease; transform: none; }
body.m-storyboard-document .h-faq .m-faq-item[open] summary::after { transform: none; background: linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat, #2f2023; color: #fff; }
body.m-storyboard-document .h-faq .m-faq-item summary:focus-visible { outline: 3px solid var(--hx-wine); outline-offset: 2px; }
body.m-storyboard-document .h-faq .m-faq-item p { max-width: 62ch; margin: 0; padding: 2px 20px 22px 62px; color: var(--hx-body); font-size: 16px; line-height: 1.7; }
body.m-storyboard-document .h-faq .m-faq-item p a { color: var(--hx-wine); text-underline-offset: 3px; }
@media (max-width: 900px) {
  body.m-storyboard-document .h-faq .m-faq-inner { grid-template-columns: 1fr; gap: 24px; }
  body.m-storyboard-document .h-faq .m-faq-inner h2 { position: static; max-width: none; font-size: clamp(34px, 9vw, 44px) !important; }
}
@media (max-width: 520px) {
  body.m-storyboard-document .h-faq .m-faq-list { gap: 10px; }
  body.m-storyboard-document .h-faq .m-faq-item, body.m-storyboard-document .h-faq .m-faq-item summary { border-radius: 18px; }
  body.m-storyboard-document .h-faq .m-faq-item summary { gap: 10px; padding: 12px 12px 12px 14px; font-size: 16px; }
  body.m-storyboard-document .h-faq .m-faq-item summary::before { min-width: 20px; font-size: 11px; }
  body.m-storyboard-document .h-faq .m-faq-item p { padding: 0 16px 18px 14px; font-size: 15px; }
}


/* ===== Homepage presence statement (section.h-presence only) ===== */
body.m-storyboard-document .h-presence { padding-block: clamp(72px, 9vw, 128px); background: #fff; }
body.m-storyboard-document .h-presence .h-head { max-width: 920px; margin: 0 auto; text-align: center; }
body.m-storyboard-document .h-presence .h-presence-lead { margin: 0; font-family: var(--h-head-font); font-size: clamp(18px, 1.9vw, 24px); font-weight: 500; line-height: 1.35; letter-spacing: -.01em; color: var(--hx-body); }
body.m-storyboard-document .h-presence .h-presence-lead + .h-presence-lead { margin-top: 4px; color: var(--hx-ink); }
body.m-storyboard-document .h-presence #h-presence-title { max-width: 16ch; margin: clamp(22px, 3vw, 34px) auto 0; font-size: clamp(38px, 5.6vw, 76px) !important; line-height: 1.04; letter-spacing: -.028em; font-weight: 600; text-wrap: balance; }
body.m-storyboard-document .h-presence .h-presence-note { max-width: 38ch; margin: clamp(26px, 3.4vw, 38px) auto 0; padding-top: 22px; position: relative; font-size: clamp(15px, 1.25vw, 17px); font-weight: 500; line-height: 1.6; color: var(--hx-body); text-wrap: balance; }
body.m-storyboard-document .h-presence .h-presence-note::before { content: ""; position: absolute; top: 0; left: 50%; width: 56px; height: 3px; margin-left: -28px; border-radius: 2px; background: linear-gradient(90deg, var(--hx-wine), #ce928b); }