:root {
  --background: #f7f9f6;
  --foreground: #16222c;
  --muted: #5e6c76;
  --line: #dce5df;
  --green: #164c3b;
  --green-2: #2e866e;
  --teal: #158c93;
  --coral: #df6957;
  --gold: #dd9335;
  --paper: #ffffff;
  --soft: #edf4f0;
}


* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

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

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

main {
  min-height: 100vh;
  overflow: hidden;
  container-type: inline-size;
}

.hero {
  position: relative;
  min-height: 92svh;
  display: grid;
  align-items: center;
  padding: 118px clamp(20px, 6vw, 86px) 70px;
  isolation: isolate;
  color: #10221d;
  container-type: inline-size;
  background: #eef1eb;
}

.heroScenicBackdrop {
  position: absolute;
  inset: -12px;
  overflow: hidden;
  background-image: url("/assets/leadtru-hero-river-office.png");
  background-position: center;
  background-size: cover;
  opacity: 1;
  filter: saturate(0.88) contrast(0.94) brightness(1.04);
  pointer-events: none;
  z-index: -3;
}

.heroScenicBackdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(247, 249, 246, 0.36), rgba(247, 249, 246, 0.04) 72%),
    linear-gradient(180deg, rgba(247, 249, 246, 0.18), rgba(247, 249, 246, 0.08));
}

.heroShade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(247, 249, 246, 0.97) 0%, rgba(247, 249, 246, 0.92) 39%, rgba(247, 249, 246, 0.54) 64%, rgba(247, 249, 246, 0.2) 100%),
    linear-gradient(180deg, rgba(247, 249, 246, 0.72), rgba(247, 249, 246, 0.28));
  z-index: -2;
}

.nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px clamp(20px, 5vw, 72px);
  container-type: inline-size;
}

.brand,
.navLinks,
.heroActions,
.metricRow,
.introBand {
  display: flex;
  align-items: center;
}

.brand {
  gap: 12px;
  font-size: 1.02rem;
  font-size: clamp(0.94rem, 1.35cqi, 1.08rem);
  font-weight: 800;
}

.brandMark {
  width: clamp(38px, 3.8cqi, 44px);
  height: clamp(38px, 3.8cqi, 44px);
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--green);
  color: #fff;
  font-size: 0.82rem;
  font-size: clamp(0.78rem, 1cqi, 0.9rem);
  letter-spacing: 0;
}

.brandLogoMark {
  width: clamp(92px, 9.6cqi, 126px);
  height: clamp(92px, 9.6cqi, 126px);
  display: block;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.navLinks {
  gap: clamp(14px, 2.5vw, 28px);
  color: #25353f;
  font-size: 0.94rem;
  font-size: clamp(0.88rem, 1.25cqi, 0.98rem);
  font-weight: 700;
}

.navLinks a {
  padding: 10px 0;
}

.mobileNavButton {
  display: none;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  border: 1px solid rgba(22, 76, 59, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: #173329;
  padding: 10px 14px;
  font: inherit;
  font-weight: 850;
  line-height: 1;
  box-shadow: 0 12px 24px rgba(22, 34, 44, 0.08);
  cursor: pointer;
}

.mobileNavButton:focus-visible,
.mobileNavMenu a:focus-visible {
  outline: 3px solid rgba(21, 140, 147, 0.28);
  outline-offset: 3px;
}

.mobileNavIcon,
.mobileNavIcon::before,
.mobileNavIcon::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.mobileNavIcon {
  position: relative;
}

.mobileNavIcon::before,
.mobileNavIcon::after {
  content: "";
  position: absolute;
  left: 0;
}

.mobileNavIcon::before {
  top: -6px;
}

.mobileNavIcon::after {
  top: 6px;
}

.mobileNavMenu {
  display: none;
  width: min(300px, calc(100vw - 32px));
  max-height: calc(100dvh - 112px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(22, 76, 59, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  margin: 0;
  padding: 6px;
  color: #1f3039;
  box-shadow: 0 24px 60px rgba(14, 30, 38, 0.18);
  -webkit-overflow-scrolling: touch;
}

.mobileNavMenu::backdrop {
  background: rgba(16, 34, 29, 0.08);
}

.mobileNavMenu,
.mobileNavMenu a,
html.mobileNavSuppressSelection,
html.mobileNavSuppressSelection * {
  -webkit-user-select: none;
  user-select: none;
}

.mobileNavMenu a {
  display: flex;
  align-items: center;
  min-height: 42px;
  border-radius: 6px;
  padding: 9px 12px;
  font-weight: 850;
  touch-action: manipulation;
  -webkit-touch-callout: none;
}

.mobileNavMenu a:hover {
  background: var(--soft);
}

.mobileNavMenu .mobileNavPrimary {
  background: var(--green);
  color: #fff;
}

.heroLayout {
  width: min(1320px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(400px, 0.9fr);
  gap: clamp(34px, 5vw, 70px);
  align-items: center;
  margin-inline: auto;
}

.heroContent {
  width: min(620px, 100%);
  container-type: inline-size;
}

.heroConsultingPanel {
  position: relative;
  width: min(620px, 100%);
  justify-self: end;
  padding: clamp(18px, 4cqi, 28px) 0 clamp(18px, 4cqi, 28px) clamp(20px, 4cqi, 28px);
  border-left: 4px solid var(--coral);
  color: #10221d;
  container-type: inline-size;
}

.heroConsultingPanel h2 {
  max-width: 24ch;
  margin-bottom: 14px;
  font-size: clamp(1.72rem, 6.4cqi, 2.65rem);
  line-height: 1.03;
}

.heroConsultingTagline,
.heroConsultingText {
  text-wrap: pretty;
}

.heroConsultingTagline {
  margin-bottom: 12px;
  color: #164c3b;
  font-size: clamp(0.98rem, 3.4cqi, 1.2rem);
  font-weight: 900;
  line-height: 1.34;
}

.heroConsultingText {
  max-width: 52ch;
  margin-bottom: 0;
  color: #374951;
  font-size: clamp(0.92rem, 2.6cqi, 1.02rem);
  line-height: 1.55;
}

.kicker {
  margin: 0 0 14px;
  color: var(--teal);
  font-size: 0.76rem;
  font-size: clamp(0.7rem, 1.7cqi, 0.82rem);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 18px;
  max-width: 100%;
  font-size: 5.6rem;
  font-size: clamp(2.6rem, 13.15cqi, 5.8rem);
  line-height: 0.94;
  letter-spacing: 0;
  white-space: nowrap;
}

h2 {
  margin-bottom: 18px;
  font-size: 3.3rem;
  font-size: clamp(2rem, 8.7cqi, 4.55rem);
  line-height: 0.96;
  letter-spacing: 0;
  text-wrap: balance;
}

h3 {
  margin-bottom: 10px;
  font-size: 1.25rem;
  font-size: clamp(1.08rem, 5.3cqi, 1.45rem);
  line-height: 1.1;
  letter-spacing: 0;
  text-wrap: balance;
}

.heroLead {
  width: min(100%, 42ch);
  max-width: 42ch;
  margin-bottom: clamp(22px, 5cqi, 30px);
  color: #374951;
  font-size: 1.08rem;
  font-size: clamp(0.95rem, 2.45cqi, 1.14rem);
  line-height: 1.52;
  text-wrap: pretty;
  overflow-wrap: break-word;
}

.heroActions {
  flex-wrap: wrap;
  gap: 12px;
}

.workWithMeActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
}

.workWithMeButton {
  min-width: 144px;
}

.heroProofStrip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(27, 52, 61, 0.18);
}

.heroProofPoint {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.heroProofPoint + .heroProofPoint {
  border-left: 1px solid rgba(27, 52, 61, 0.16);
  padding-left: 12px;
}

.heroProofPoint strong {
  display: block;
  margin-bottom: 3px;
  color: #173329;
  font-size: clamp(0.78rem, 2.2cqi, 0.92rem);
  line-height: 1.18;
}

.heroProofPoint span:last-child {
  color: #3f5260;
  font-size: clamp(0.72rem, 2cqi, 0.86rem);
  line-height: 1.35;
}

.heroProofIcon {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(22, 76, 59, 0.09);
  color: var(--green);
}

.heroProofIcon::before,
.heroProofIcon::after {
  content: "";
  position: absolute;
  display: block;
}

.heroProofIcon.people::before {
  width: 9px;
  height: 9px;
  border: 2px solid currentColor;
  border-radius: 50%;
  top: 10px;
  left: 14px;
  box-shadow:
    -8px 3px 0 -2px rgba(22, 76, 59, 0.9),
    8px 3px 0 -2px rgba(22, 76, 59, 0.9);
}

.heroProofIcon.people::after {
  width: 23px;
  height: 11px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 13px 13px 0 0;
  bottom: 8px;
  left: 8px;
}

.heroProofIcon.global::before {
  inset: 8px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.heroProofIcon.global::after {
  width: 20px;
  height: 20px;
  border-left: 2px solid currentColor;
  border-right: 2px solid currentColor;
  border-radius: 50%;
}

.heroProofIcon.rocket::before {
  width: 15px;
  height: 22px;
  border: 2px solid currentColor;
  border-radius: 12px 12px 7px 7px;
  transform: rotate(45deg);
}

.heroProofIcon.rocket::after {
  width: 5px;
  height: 5px;
  border: 2px solid currentColor;
  border-radius: 50%;
  transform: translate(1px, -2px);
}

.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 13px 18px;
  border: 1px solid rgba(22, 76, 59, 0.24);
  font-size: 0.96rem;
  font-size: clamp(0.9rem, 2cqi, 1rem);
  font-weight: 850;
}

.button.primary {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}

.button.secondary {
  background: rgba(255, 255, 255, 0.78);
  color: var(--green);
}

.button.staticAction {
  cursor: text;
  user-select: text;
}

.introBand {
  width: min(1120px, calc(100% - clamp(28px, 6vw, 72px)));
  margin: clamp(-18px, -2svh, -10px) auto 0;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--line);
  box-shadow: 0 18px 60px rgba(16, 49, 39, 0.12);
}

.introBand div {
  display: grid;
  align-content: start;
  min-height: 0;
  padding: clamp(14px, 2.5cqi, 22px) clamp(18px, 3cqi, 26px);
  background: var(--paper);
  container-type: inline-size;
}

.introBand strong,
.introBand span {
  display: block;
}

.introBand strong {
  margin-bottom: 6px;
  font-size: 1rem;
  font-size: clamp(0.95rem, 3.6cqi, 1.08rem);
  line-height: 1.16;
  text-wrap: balance;
}

.introBand span {
  width: min(100%, 33ch);
  min-height: calc(2em * 1.42);
  color: var(--muted);
  font-size: 0.95rem;
  font-size: clamp(0.86rem, 3.2cqi, 0.98rem);
  line-height: 1.42;
  text-wrap: pretty;
}

.section,
.seoFocusSection,
.showcase,
.platformFamilySection,
.splitSection,
.localOnlySection,
.guideSection,
.contactSection {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(72px, 10vw, 124px) 0;
  container-type: inline-size;
}

.sectionHeader {
  max-width: 790px;
  margin-bottom: 34px;
  container-type: inline-size;
}

.sectionHeader p:not(.kicker),
.showcaseCopy p,
.guideCopy p,
.contactSection p {
  color: var(--muted);
  font-size: 1.04rem;
  font-size: clamp(0.98rem, 2.2cqi, 1.18rem);
  line-height: 1.65;
  text-wrap: pretty;
}

#products {
  padding-bottom: clamp(32px, 4vw, 50px);
}

.seoFocusSection {
  padding-bottom: clamp(42px, 6vw, 72px);
  border-bottom: 1px solid var(--line);
}

.seoOutcomeBand {
  grid-template-columns: 1fr;
  margin-top: 18px;
}

.seoOutcomeBand .button {
  justify-self: start;
}

.seoOutcomeBand ul {
  display: grid;
  gap: 9px;
  margin: 16px 0 0;
  padding-left: 1.1rem;
  color: #2f444b;
  font-size: clamp(0.92rem, 2cqi, 1rem);
  line-height: 1.48;
}

.showcase[aria-labelledby="real-estate-heading"] {
  padding-top: clamp(34px, 4vw, 56px);
}

.productGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 18px;
  align-items: start;
}

.productCard,
.screenCard,
.consultingList article,
.guidePanel,
.factCard,
.topicCard,
.linkCard,
.policySection,
.helpSection {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.productCard {
  display: flex;
  flex-direction: column;
  min-height: 396px;
  padding: clamp(18px, 7cqi, 28px);
  container-type: inline-size;
}

.productCard img,
.productGlyph {
  width: clamp(54px, 19cqi, 78px);
  height: clamp(54px, 19cqi, 78px);
  margin-bottom: clamp(18px, 7cqi, 26px);
  border-radius: 8px;
}

.productCard img {
  display: block;
  object-fit: contain;
}

.productGlyph {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(21, 140, 147, 0.94), rgba(22, 76, 59, 0.96)),
    var(--green);
}

.productGlyph::before,
.productGlyph::after,
.advisoryGlyph > span {
  content: "";
  position: absolute;
  display: block;
  border-radius: 4px;
  background: #fff;
}

.productGlyph::before {
  width: 52%;
  height: 8%;
  left: 24%;
  top: 27%;
  box-shadow:
    0 14px 0 rgba(255, 255, 255, 0.84),
    0 28px 0 rgba(255, 255, 255, 0.68);
}

.productGlyph::after {
  width: 11%;
  height: 58%;
  right: 24%;
  bottom: 21%;
  background: var(--gold);
}

.advisoryGlyph > span {
  width: 16%;
  height: 30%;
  left: 24%;
  bottom: 21%;
  background: var(--coral);
  box-shadow: 16px -8px 0 rgba(255, 255, 255, 0.88);
}

.productCard > p {
  margin-bottom: 8px;
  color: var(--teal);
  font-size: 0.73rem;
  font-size: clamp(0.7rem, 3.3cqi, 0.8rem);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.productCard > span {
  display: block;
  color: var(--muted);
  font-size: 1rem;
  font-size: clamp(0.95rem, 4.4cqi, 1.08rem);
  line-height: 1.55;
  text-wrap: pretty;
}

.productCard ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.productCard li {
  border-radius: 8px;
  background: var(--soft);
  color: #1d5f50;
  padding: 8px 10px;
  font-size: 0.8rem;
  font-size: clamp(0.76rem, 3.5cqi, 0.88rem);
  font-weight: 800;
}

.textLink {
  display: inline-flex;
  width: fit-content;
  margin-top: auto;
  padding-top: 22px;
  color: var(--green);
  font-size: 0.94rem;
  font-weight: 900;
}

.textLink.light {
  color: #d4f7ef;
}

.appStoreDownload {
  width: min(520px, 100%);
  display: grid;
  grid-column: 1;
  grid-row: 2;
  grid-template-columns: clamp(58px, 12cqi, 72px) minmax(0, 1fr);
  align-items: start;
  gap: 14px 18px;
  justify-self: center;
  align-self: start;
  margin-top: clamp(34px, 7cqi, 48px);
  padding-inline: 0;
  container-type: inline-size;
}

.appStoreDownloadInfo {
  display: contents;
}

.appStoreDownloadIcon {
  width: clamp(58px, 10cqi, 74px);
  height: clamp(58px, 10cqi, 74px);
  grid-column: 1;
  grid-row: 1;
  flex: 0 0 auto;
  border-radius: 16px;
  box-shadow: 0 16px 30px rgba(10, 47, 41, 0.14);
}

.appStoreDownloadCopy {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  max-width: 34ch;
}

.appStoreDownloadCopy .kicker {
  margin-bottom: 6px;
  font-size: clamp(0.62rem, 1.8cqi, 0.72rem);
  letter-spacing: 0;
  white-space: nowrap;
}

.appStoreDownloadCopy h3 {
  margin-bottom: 8px;
  font-size: clamp(1.18rem, 4.6cqi, 1.48rem);
  line-height: 1.1;
}

.appStoreDownloadCopy > p:not(.kicker) {
  margin-bottom: 0;
  color: var(--muted);
  font-size: clamp(0.82rem, 2.4cqi, 0.98rem);
  font-weight: 750;
  line-height: 1.28;
  text-wrap: pretty;
}

.appStoreDownloadBadges {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin-top: 12px;
}

.appStoreDownloadBadges span {
  border-radius: 8px;
  background: var(--soft);
  color: #1d5f50;
  padding: 6px 9px;
  font-size: clamp(0.68rem, 2cqi, 0.78rem);
  font-weight: 850;
  line-height: 1.1;
  white-space: nowrap;
}

.appStoreBadge {
  min-height: 54px;
  min-width: 174px;
  grid-column: 2;
  grid-row: 2;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  justify-self: start;
  border-radius: 8px;
  background: #090d0f;
  color: #fff;
  padding: 9px 15px 9px 13px;
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.18);
}

.appStoreBadge svg {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  fill: currentColor;
}

.appStoreBadge span {
  display: grid;
  gap: 2px;
}

.appStoreBadge small,
.appStoreBadge strong {
  display: block;
  color: inherit;
  line-height: 1;
}

.appStoreBadge small {
  font-size: 0.66rem;
  font-weight: 700;
}

.appStoreBadge strong {
  font-size: 1.32rem;
  font-weight: 900;
  letter-spacing: 0;
}

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

.factCard {
  padding: clamp(18px, 4cqi, 24px);
  container-type: inline-size;
}

.factCard h3 {
  margin-bottom: 8px;
  font-size: 1.08rem;
  font-size: clamp(1rem, 4cqi, 1.22rem);
}

.factCard p {
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
  font-size: clamp(0.9rem, 3.3cqi, 1.02rem);
  line-height: 1.55;
}

.showcase {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 5vw, 44px);
  align-items: start;
}

.showcaseCopy {
  max-width: 980px;
  container-type: inline-size;
}

.metricRow {
  gap: 10px;
  margin-top: 30px;
}

.metricRow span {
  flex: 1;
  min-width: 0;
  border-left: 4px solid var(--gold);
  background: #fff;
  padding: clamp(12px, 3cqi, 16px);
  color: var(--muted);
  font-size: 0.82rem;
  font-size: clamp(0.78rem, 1.7cqi, 0.92rem);
}

.metricRow strong {
  display: block;
  color: var(--green);
  font-size: 1.8rem;
  font-size: clamp(1.55rem, 4.8cqi, 2.15rem);
  line-height: 1;
}

.mediaControlRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 14px;
  margin-top: -4px;
}

.mediaControlRow .deviceFilters {
  margin-top: 0;
}

.videoJumpButton {
  margin-left: clamp(34px, 5vw, 78px);
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}

.videoJumpButton:hover {
  border-color: var(--teal);
  background: var(--teal);
}

.videoJumpButton:focus-visible {
  outline: 3px solid rgba(21, 140, 147, 0.28);
  outline-offset: 3px;
}

.deviceFilters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: -4px;
}

.deviceFilterInput {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.deviceFilterLabel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #1f3039;
  padding: 10px 16px;
  font-size: 0.98rem;
  font-weight: 850;
  line-height: 1;
  cursor: pointer;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

.deviceFilterInput:checked + .deviceFilterLabel {
  border-color: var(--teal);
  background: var(--teal);
  color: #fff;
}

.deviceFilterInput:focus-visible + .deviceFilterLabel {
  outline: 3px solid rgba(21, 140, 147, 0.28);
  outline-offset: 3px;
}

.phoneGallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 28px);
  align-items: stretch;
}

.showcase:has(#device-iphone:checked)
  .phoneGallery
  .screenCard:not(.iphoneScreenCard),
.showcase:has(#device-ipad:checked)
  .phoneGallery
  .screenCard:not(.ipadScreenCard),
.showcase:has(#device-watch:checked)
  .phoneGallery
  .screenCard:not(.watchScreenCard) {
  display: none;
}

.screenCard {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  align-content: start;
  padding: clamp(12px, 4.2cqi, 18px);
  container-type: inline-size;
}

.deviceFrame {
  width: 100%;
  overflow: hidden;
  border: clamp(6px, 1.3cqi, 10px) solid #142028;
  border-radius: clamp(22px, 5cqi, 34px);
  background: #fff;
}

.deviceFrame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.phoneFrame {
  aspect-ratio: 1284 / 2778;
  width: min(100%, 285px);
  margin-inline: auto;
}

.tabletFrame {
  aspect-ratio: 2064 / 2752;
  border-radius: clamp(18px, 3cqi, 28px);
}

.watchFrame {
  aspect-ratio: 422 / 514;
  width: min(100%, 180px);
  margin-inline: auto;
  border-color: #05080a;
  border-radius: clamp(26px, 7cqi, 40px);
  background: #05080a;
}

.ipadScreenCard {
  grid-column: span 2;
}

.screenDevice {
  display: block;
  margin-top: 16px;
  color: var(--teal);
  font-size: 0.72rem;
  font-size: clamp(0.68rem, 3cqi, 0.78rem);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.screenCard h3 {
  margin: 6px 0 8px;
}

.screenCard p {
  color: var(--muted);
  font-size: 0.98rem;
  font-size: clamp(0.9rem, 3.5cqi, 1.04rem);
  line-height: 1.55;
  text-wrap: pretty;
}

.appPreviewSection {
  display: grid;
  gap: clamp(18px, 3vw, 26px);
  padding-top: clamp(4px, 1vw, 12px);
}

.appPreviewHeader {
  max-width: 760px;
  container-type: inline-size;
}

.appPreviewHeader h3 {
  margin-bottom: 8px;
}

.appPreviewHeader p:not(.kicker),
.appPreviewCard p {
  margin: 0;
  line-height: 1.55;
}

.appPreviewHeader p:not(.kicker) {
  color: var(--muted);
}

.appPreviewGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 24px);
  align-items: stretch;
}

.appPreviewVideoStage {
  display: grid;
  place-items: center;
  min-height: 260px;
  border: 1px solid #d7e1dc;
  border-radius: 8px;
  background: #eef6f2;
}

.appPreviewFrame {
  box-shadow: 0 18px 40px rgba(22, 32, 44, 0.16);
}

.appPreviewFrame video {
  display: block;
  width: 100%;
  height: 100%;
  background: #05080a;
  object-fit: cover;
}

.appPreviewPhoneFrame {
  width: min(52%, 128px);
  aspect-ratio: 1284 / 2778;
  border-radius: 24px;
}

.appPreviewTabletFrame {
  width: min(86%, 270px);
  aspect-ratio: 2064 / 2752;
  border-radius: 22px;
}

.appPreviewWatchFrame {
  width: min(46%, 118px);
  aspect-ratio: 422 / 514;
  border-color: #06090d;
  border-radius: 30px;
}

.platformFamilySection {
  padding-top: clamp(54px, 7vw, 88px);
  padding-bottom: clamp(74px, 9vw, 112px);
  border-top: 1px solid var(--line);
}

.showcase > .platformFamilySection {
  width: 100%;
  margin: 0;
  padding-top: clamp(44px, 6vw, 74px);
  padding-bottom: clamp(36px, 5vw, 64px);
  border-top: 0;
}

.platformFamilyIntro {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(460px, 1.08fr);
  align-items: center;
  gap: clamp(34px, 5vw, 58px);
}

.platformFamilyIntro > div:first-child {
  container-type: inline-size;
}

.platformFamilyIntro h2 {
  max-width: 8.6em;
  color: #20324f;
}

.platformFamilyIntro p:not(.kicker) {
  max-width: 580px;
  color: var(--muted);
  font-size: 1.04rem;
  font-size: clamp(0.98rem, 2.2cqi, 1.18rem);
  line-height: 1.65;
  text-wrap: pretty;
}

.platformBadges,
.platformActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.platformBadges {
  margin: 28px 0 30px;
}

.platformBadges span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border: 1px solid rgba(21, 140, 147, 0.24);
  border-radius: 999px;
  background: #fff;
  color: #0f6b6f;
  padding: 9px 13px;
  font-size: 0.84rem;
  font-weight: 850;
  line-height: 1;
}

.platformDeviceStage {
  position: relative;
  min-height: 520px;
}

.platformPhoneShell,
.platformTabletShell,
.platformWatchShell {
  position: absolute;
  overflow: hidden;
  background: #11191a;
  box-shadow: 0 28px 72px rgba(15, 31, 35, 0.22);
}

.platformPhoneShell img,
.platformTabletShell img,
.platformWatchShell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.platformPhoneShell {
  top: 20px;
  left: 38px;
  z-index: 3;
  width: 210px;
  aspect-ratio: 1284 / 2778;
  border: 10px solid #101516;
  border-radius: 36px;
}

.platformPhoneShell img {
  border-radius: 26px;
}

.platformTabletShell {
  top: 112px;
  right: 0;
  z-index: 2;
  width: 390px;
  aspect-ratio: 2064 / 2752;
  border: 12px solid #11191a;
  border-radius: 28px;
}

.platformTabletShell img {
  border-radius: 16px;
}

.platformWatchShell {
  top: 6px;
  left: 252px;
  z-index: 4;
  width: 128px;
  aspect-ratio: 422 / 514;
  border: 8px solid #11191a;
  border-radius: 30px;
  background: #05080a;
}

.platformWatchShell img {
  border-radius: 20px;
}

.platformCardGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-top: clamp(78px, 9vw, 112px);
}

.platformCard {
  min-height: 196px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.platformCardImage {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  overflow: hidden;
  background: linear-gradient(135deg, #e9f2ed, #f7f1e4);
}

.platformCardImage img {
  object-fit: cover;
  object-position: top center;
  box-shadow: 0 12px 26px rgba(16, 32, 36, 0.18);
}

.platformPhoneThumb {
  width: 56px;
  border-radius: 12px;
}

.platformTabletThumb {
  width: 126px;
  border-radius: 8px;
}

.platformWatchThumb {
  width: 72px;
  border-radius: 18px;
}

.platformDesktopThumb {
  width: 150px;
  border-radius: 6px;
}

.platformAndroidThumb {
  width: 70px;
  border-radius: 18px;
}

.platformCardCopy {
  padding: 16px 18px 18px;
}

.platformCardCopy h3 {
  margin-bottom: 8px;
  color: #20324f;
  font-size: 1rem;
  font-size: clamp(0.98rem, 4.5cqi, 1.08rem);
}

.platformCardCopy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  font-size: clamp(0.82rem, 3.8cqi, 0.92rem);
  line-height: 1.5;
  text-wrap: pretty;
}

.splitSection {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(28px, 7vw, 82px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.sectionHeader.compact {
  margin-bottom: 0;
}

.consultingList {
  display: grid;
  gap: 12px;
}

.consultingList article {
  display: grid;
  grid-template-columns: clamp(44px, 14cqi, 64px) 1fr;
  gap: clamp(12px, 4cqi, 18px);
  align-items: center;
  padding: clamp(16px, 4.5cqi, 24px);
  container-type: inline-size;
}

.consultingList span {
  color: var(--coral);
  font-size: 1.45rem;
  font-size: clamp(1.15rem, 5cqi, 1.6rem);
  font-weight: 900;
}

.consultingList p {
  margin: 0;
  color: #25353f;
  font-size: 1.05rem;
  font-size: clamp(0.96rem, 3cqi, 1.12rem);
  line-height: 1.55;
  text-wrap: pretty;
}

.guideSection {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 430px);
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
}

.guideCopy {
  container-type: inline-size;
}

.guidePanel {
  padding: clamp(20px, 6cqi, 30px);
  box-shadow: 0 18px 46px rgba(16, 49, 39, 0.08);
  container-type: inline-size;
}

.guidePanel span {
  display: block;
  margin-bottom: 8px;
  color: var(--teal);
  font-size: 0.74rem;
  font-size: clamp(0.7rem, 3.3cqi, 0.82rem);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.guidePanel strong {
  display: block;
  margin-bottom: 14px;
  font-size: 1.55rem;
  font-size: clamp(1.28rem, 6.4cqi, 1.78rem);
}

.guidePanel p {
  color: var(--muted);
  font-size: 1rem;
  font-size: clamp(0.94rem, 3.8cqi, 1.08rem);
  line-height: 1.6;
  text-wrap: pretty;
}

.stackedActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.contactSection {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  margin-bottom: 36px;
  border-radius: 8px;
  background: var(--green);
  color: #fff;
  padding: clamp(34px, 6vw, 62px);
}

.contactSection .kicker,
.contactSection p {
  color: #b9e8dd;
}

.contactSection h2 {
  margin-bottom: 10px;
  font-size: 3rem;
  font-size: clamp(2rem, 6.6cqi, 4rem);
}

.contactEmail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  border-radius: 8px;
  background: #fff;
  color: var(--green);
  padding: 14px 18px;
  font-size: 1rem;
  font-size: clamp(0.9rem, 2.1cqi, 1.08rem);
  font-weight: 900;
  word-break: break-word;
}

.contactNote {
  color: #b9e8dd;
  font-weight: 850;
}

.contactStack {
  display: grid;
  justify-items: end;
  gap: 10px;
}

.pageMain {
  overflow: visible;
  background:
    linear-gradient(180deg, rgba(237, 244, 240, 0.72), rgba(247, 249, 246, 0)),
    var(--background);
}

.pageNav {
  position: static;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px);
}

.pageHero,
.pageSection,
.guideBody,
.policyList,
.contactPanel,
.siteFooter,
.legalNote {
  width: min(1120px, calc(100% - 40px));
  margin-inline: auto;
}

.pageHero {
  padding: clamp(62px, 8vw, 96px) 0 clamp(34px, 6vw, 56px);
  container-type: inline-size;
}

.pageHero h1 {
  max-width: 13ch;
  margin-bottom: 18px;
  font-size: 4.3rem;
  font-size: clamp(2.35rem, 9.5cqi, 4.8rem);
  line-height: 1;
  white-space: normal;
}

.pageHero > p:not(.kicker) {
  max-width: 760px;
  color: var(--muted);
  font-size: 1.12rem;
  font-size: clamp(1rem, 2.3cqi, 1.24rem);
  line-height: 1.62;
  text-wrap: pretty;
}

.pageHeroLead {
  margin-bottom: clamp(22px, 3vw, 34px);
}

.pageSection {
  padding: clamp(44px, 7vw, 78px) 0;
  container-type: inline-size;
}

.pageSection.tightTop {
  padding-top: 18px;
}

.pageSection.compactSection {
  padding-top: 24px;
}

.supportPrivacySection {
  padding-top: 24px;
}

.supportPrivacyFeature {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
  gap: clamp(26px, 5vw, 52px);
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  padding: clamp(22px, 5cqi, 42px);
  box-shadow: 0 18px 60px rgba(16, 49, 39, 0.08);
  container-type: inline-size;
}

.supportPrivacyIntro,
.supportPrivacyCallout {
  container-type: inline-size;
}

.supportPrivacyIntro h2 {
  max-width: 14ch;
  font-size: clamp(2rem, 7.5cqi, 4rem);
  line-height: 0.98;
}

.supportPrivacyIntro p:not(.kicker),
.supportPrivacyCallout p:not(.kicker) {
  color: var(--muted);
  font-size: 1.04rem;
  font-size: clamp(0.98rem, 2.2cqi, 1.18rem);
  line-height: 1.62;
  text-wrap: pretty;
}

.supportPrivacyCallout {
  border-left: 4px solid var(--coral);
  padding-left: clamp(18px, 4cqi, 30px);
}

.supportPrivacyCallout h3 {
  max-width: 14ch;
  margin-bottom: 16px;
  font-size: clamp(1.8rem, 6cqi, 3.2rem);
  line-height: 1.02;
}

.privacyBadgeRow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.privacyBadgeRow span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(22, 76, 59, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  color: #21382f;
  padding: 9px 12px;
  font-size: 0.86rem;
  font-weight: 850;
}

.privacyBadgeRow span::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--teal);
}

.supportProofStrip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--line);
  box-shadow: 0 18px 46px rgba(16, 49, 39, 0.08);
}

.supportProofStrip article {
  display: grid;
  align-content: center;
  min-height: 114px;
  padding: clamp(14px, 3cqi, 20px);
  background: #fff;
}

.supportProofStrip strong {
  display: block;
  margin-bottom: 6px;
  color: var(--green);
  font-size: clamp(1.5rem, 5cqi, 2rem);
  line-height: 1;
}

.supportProofStrip span {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 850;
  line-height: 1.28;
}

.supportPrivacyFacts {
  margin-top: 14px;
}

.productHeroCopy h2 {
  max-width: 12ch;
}

.productDeviceStack {
  min-height: 480px;
}

.consultingList strong {
  display: block;
  margin-bottom: 4px;
  color: #173329;
}

.aboutStory {
  max-width: 900px;
}

.aboutStory p {
  margin: 0;
  color: #25353f;
  font-size: 1.08rem;
  font-size: clamp(1rem, 2.3cqi, 1.18rem);
  line-height: 1.72;
  text-wrap: pretty;
}

.aboutStory p + p {
  margin-top: 20px;
}

.sectionActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.linkGrid,
.topicGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 14px;
}

.linkCard {
  display: grid;
  align-content: start;
  min-height: 154px;
  padding: clamp(18px, 4cqi, 24px);
  transition:
    border-color 160ms ease,
    transform 160ms ease;
}

.linkCard:hover {
  border-color: rgba(22, 76, 59, 0.42);
  transform: translateY(-2px);
}

.linkCard span {
  margin-bottom: 12px;
  color: var(--teal);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.linkCard strong {
  color: #1f3039;
  font-size: 1.16rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.staticCard:hover {
  border-color: var(--line);
  transform: none;
}

.topicCard {
  padding: clamp(18px, 4cqi, 24px);
}

.topicCard h3 {
  margin-bottom: 14px;
}

.topicCard ul,
.helpSection ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 1.15rem;
  color: var(--muted);
  line-height: 1.55;
}

.guideIndex {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.guideIndex a {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--green);
  padding: 10px 12px;
  font-size: 0.9rem;
  font-weight: 850;
}

.guideBody,
.policyList {
  display: grid;
  gap: 14px;
}

.helpSection,
.policySection {
  padding: clamp(22px, 4vw, 34px);
  scroll-margin-top: 24px;
}

.helpSection h2,
.policySection h2,
.downloadBand h2,
.contactPanel h2 {
  margin-bottom: 12px;
  font-size: 1.8rem;
  font-size: clamp(1.35rem, 4.5cqi, 2.15rem);
  line-height: 1.12;
}

.helpSection > p:not(.kicker),
.policySection p,
.downloadBand p,
.contactPanel p,
.siteFooter span,
.legalNote {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.62;
  text-wrap: pretty;
}

.downloadBand,
.contactPanel {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: clamp(24px, 5vw, 40px);
}

.contactPanel {
  margin-top: clamp(44px, 7vw, 78px);
  background: var(--green);
  color: #fff;
}

.contactPanel .kicker,
.contactPanel p {
  color: #b9e8dd;
}

.siteFooter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  border-top: 1px solid var(--line);
  padding: 26px 0 34px;
}

.footerCredits {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-self: start;
  gap: 10px;
  color: #25353f;
  font-weight: 850;
}

.siteFooter .footerCreditText {
  color: inherit;
  font: inherit;
  line-height: inherit;
}

.lunaPreviewTrigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: zoom-in;
  outline-offset: 4px;
  text-decoration: none;
}

.lunaPreviewTrigger img {
  width: 34px;
  height: 34px;
  border: 2px solid rgba(16, 80, 62, 0.18);
  border-radius: 50%;
  box-shadow: 0 8px 18px rgba(16, 80, 62, 0.14);
  object-fit: cover;
}

.lunaPreviewTrigger:hover img,
.lunaPreviewTrigger:focus-visible img {
  border-color: rgba(25, 139, 128, 0.46);
  box-shadow: 0 10px 24px rgba(16, 80, 62, 0.2);
  transform: translateY(-1px);
}

.lunaLightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 180ms ease,
    visibility 180ms ease;
  visibility: hidden;
}

.lunaLightbox:target {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.lunaLightboxBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 24, 20, 0.66);
  backdrop-filter: blur(5px);
}

.lunaLightboxCard {
  position: relative;
  z-index: 1;
  width: min(88vw, 430px);
  max-height: 88vh;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 28px 80px rgba(6, 22, 18, 0.32);
  overflow: auto;
  padding: 12px;
}

.lunaLightboxCard img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(88vh - 72px);
  border-radius: 6px;
  object-fit: contain;
}

.lunaLightboxCaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 2px 0;
  color: #25353f;
  font-weight: 850;
}

.lunaLightboxClose {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(16, 80, 62, 0.18);
  border-radius: 50%;
  color: var(--green);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
}

.lunaLightboxClose:hover,
.lunaLightboxClose:focus-visible {
  background: #eef6f2;
}

.footerVersion {
  justify-self: center;
  color: var(--green);
  font-size: 0.92rem;
  font-weight: 900;
  white-space: nowrap;
}

.footerLinks {
  display: flex;
  flex-wrap: wrap;
  justify-self: end;
  justify-content: flex-end;
  gap: 14px;
  color: var(--green);
  font-weight: 850;
}

.legalNote {
  padding: 18px 0 40px;
}

.defectIntro {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(237, 244, 240, 0.9)),
    #fff;
}

.fieldList {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.fieldList span {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #1d5f50;
  padding: 9px 11px;
  font-size: 0.84rem;
  font-weight: 850;
}

.defectForm {
  display: grid;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: clamp(20px, 5vw, 34px);
  box-shadow: 0 18px 46px rgba(16, 49, 39, 0.08);
}

.defectModeNote {
  display: grid;
  gap: 14px;
  border: 1px solid rgba(21, 140, 147, 0.26);
  border-radius: 8px;
  background: #f5fbf9;
  padding: clamp(16px, 4vw, 22px);
}

.defectModeNote p {
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.55;
}

.defectRecipient {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.defectRecipient span {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
}

.defectRecipient strong {
  color: #1f3039;
  font-size: clamp(1rem, 3cqi, 1.18rem);
  overflow-wrap: anywhere;
}

.defectRecipient .button {
  min-height: 42px;
  padding: 10px 14px;
}

.formGrid {
  display: grid;
  gap: 14px;
}

.formGrid.twoColumn {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.defectForm label {
  display: grid;
  gap: 8px;
}

.defectForm .hiddenField {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.defectForm label span {
  color: #25353f;
  font-size: 0.9rem;
  font-weight: 850;
}

.defectForm input,
.defectForm select,
.defectForm textarea {
  width: 100%;
  border: 1px solid #cddbd3;
  border-radius: 8px;
  background: #fbfdfb;
  color: var(--foreground);
  padding: 12px 13px;
  font: inherit;
  font-size: 0.98rem;
  line-height: 1.4;
}

.defectForm textarea {
  resize: vertical;
}

.defectForm input:focus,
.defectForm select:focus,
.defectForm textarea:focus {
  outline: 3px solid rgba(21, 140, 147, 0.18);
  border-color: var(--teal);
}

.formSubmitRow {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 4px;
}

.formSubmitRow p {
  flex: 1;
  min-width: min(100%, 280px);
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.formNotice {
  margin: 0;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 0.95rem;
  font-weight: 750;
  line-height: 1.45;
}

.formNotice.success {
  background: #edf8f1;
  color: #17643c;
}

.formNotice.error {
  background: #fff0ed;
  color: #9f2d20;
}

.draftPanel {
  display: grid;
  gap: 14px;
  border: 1px solid rgba(22, 76, 59, 0.22);
  border-radius: 8px;
  background: #fbfdfb;
  padding: clamp(16px, 4vw, 22px);
}

.draftMeta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.draftMeta div {
  display: grid;
  gap: 4px;
}

.draftMeta span {
  color: var(--teal);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.draftMeta strong {
  color: #1f3039;
  font-size: 0.95rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.draftPanel textarea {
  min-height: 360px;
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    monospace;
  font-size: 0.9rem;
  white-space: pre-wrap;
}

.draftActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 900px) {
  .hero {
    min-height: auto;
    padding-top: 132px;
  }

  .heroScenicBackdrop {
    background-position: 68% center;
    opacity: 0.64;
  }

  .heroShade {
    background:
      linear-gradient(180deg, rgba(247, 249, 246, 0.98) 0%, rgba(247, 249, 246, 0.95) 54%, rgba(247, 249, 246, 0.82) 100%),
      linear-gradient(90deg, rgba(247, 249, 246, 0.98), rgba(247, 249, 246, 0.84));
  }

  .nav {
    align-items: flex-start;
    padding: 18px 20px;
  }

  .brandLogoMark {
    width: 82px;
    height: 82px;
  }

  .navLinks {
    display: none;
  }

  .mobileNavButton {
    display: inline-flex;
  }

  .mobileNavMenu:popover-open {
    position: fixed;
    inset: calc(env(safe-area-inset-top) + 86px) 16px auto auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

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

  .heroConsultingPanel {
    max-width: 620px;
    justify-self: start;
  }

  .productGrid,
  .appPreviewGrid,
  .showcase,
  .platformFamilyIntro,
  .splitSection,
  .downloadBand,
  .guideSection,
  .contactSection,
  .contactPanel,
  .supportPrivacyFeature {
    grid-template-columns: 1fr;
  }

  .appStoreDownload {
    grid-column: auto;
    grid-row: auto;
    width: min(520px, 100%);
    justify-self: start;
  }

  .introBand {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  }

  .showcaseCopy {
    position: static;
  }

  .platformDeviceStage {
    min-height: 460px;
  }

  .platformCardGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 52px;
  }

  .contactSection {
    padding: 34px 22px;
  }

  .contactStack,
  .siteFooter,
  .footerCredits,
  .footerLinks {
    align-items: stretch;
    justify-items: stretch;
    justify-content: flex-start;
  }

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

  .formGrid.twoColumn {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .hero {
    padding-inline: 20px;
    padding-bottom: 52px;
  }

  .heroScenicBackdrop {
    background-position: 72% center;
    opacity: 0.48;
  }

  .heroConsultingPanel {
    padding-left: 16px;
  }

  .heroProofStrip {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .heroProofPoint + .heroProofPoint {
    border-top: 1px solid rgba(27, 52, 61, 0.16);
    border-left: 0;
    padding-top: 12px;
    padding-left: 0;
  }

  h1 {
    font-size: clamp(2.45rem, 13cqi, 4.35rem);
  }

  h2 {
    font-size: clamp(1.85rem, 9.5cqi, 3rem);
  }

  .introBand,
  .section,
  .seoFocusSection,
  .showcase,
  .platformFamilySection,
  .splitSection,
  .guideSection,
  .contactSection {
    width: min(100% - 28px, 1180px);
  }

  .introBand {
    margin-top: 0;
    grid-template-columns: 1fr;
  }

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

  .platformFamilyIntro h2 {
    max-width: 100%;
    font-size: clamp(2.4rem, 12cqi, 4rem);
  }

  .platformFamilyIntro p:not(.kicker) {
    font-size: 1rem;
  }

  .platformActions .button {
    width: 100%;
  }

  .platformDeviceStage {
    min-height: 430px;
  }

  .platformPhoneShell {
    left: 0;
    width: 154px;
    border-width: 8px;
  }

  .platformWatchShell {
    left: 148px;
    width: 104px;
    border-width: 7px;
  }

  .platformTabletShell {
    top: 142px;
    right: 0;
    width: min(290px, 84vw);
    border-width: 10px;
  }

  .platformCardGrid {
    grid-template-columns: 1fr;
    margin-top: 44px;
  }

  .platformCard {
    min-height: 0;
  }

  .platformCardImage {
    height: 138px;
  }

  .ipadScreenCard {
    grid-column: auto;
  }

  .metricRow {
    align-items: stretch;
    flex-direction: column;
  }

  .videoJumpButton {
    margin-left: 0;
  }

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

  .supportPrivacyCallout {
    padding-left: 16px;
  }

  .heroActions .button,
  .contactEmail {
    width: 100%;
  }

  .appStoreDownload {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 12px 14px;
    padding-inline: 8px;
  }

  .appStoreDownloadIcon {
    justify-self: start;
  }

  .appStoreDownloadInfo {
    display: contents;
  }

  .appStoreDownloadCopy .kicker {
    white-space: normal;
  }

  .appStoreDownloadBadges {
    flex-wrap: wrap;
  }

  .appStoreBadge {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
  }
}

.onePagerPage {
  background:
    linear-gradient(180deg, rgba(237, 244, 240, 0.9), rgba(247, 249, 246, 0) 34%),
    var(--background);
}

.onePagerHero {
  width: min(1180px, calc(100% - 40px));
  min-height: calc(100svh - 118px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
  align-items: center;
  gap: clamp(32px, 6vw, 72px);
  padding: clamp(44px, 7vw, 78px) 0 clamp(34px, 6vw, 64px);
  container-type: inline-size;
}

.onePagerHero h1 {
  max-width: 9.6ch;
  margin-bottom: 16px;
  color: #142028;
  font-size: clamp(3rem, 9cqi, 6.3rem);
  line-height: 0.92;
  white-space: normal;
}

.onePagerHeroSubhead,
.onePagerHeroLead {
  max-width: 620px;
}

.onePagerHeroSubhead {
  margin-bottom: 16px;
  color: #164c3b;
  font-size: clamp(1.2rem, 3.5cqi, 2rem);
  font-weight: 900;
  line-height: 1.12;
  text-wrap: balance;
}

.onePagerHeroSubhead span {
  display: block;
  color: var(--teal);
}

.onePagerHeroLead {
  margin-bottom: 22px;
  color: #344a52;
  font-size: clamp(1rem, 2.1cqi, 1.18rem);
  line-height: 1.58;
  text-wrap: pretty;
}

.onePagerBenefitRow,
.onePagerHeroActions,
.onePagerWorkflow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.onePagerBenefitRow {
  margin-bottom: 26px;
}

.onePagerBenefitRow span {
  border: 1px solid rgba(21, 140, 147, 0.22);
  border-radius: 999px;
  background: #fff;
  color: #0f6b6f;
  padding: 10px 13px;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
}

.onePagerAppStoreButton {
  grid-column: auto;
  grid-row: auto;
  justify-self: start;
}

.onePagerDeviceStage {
  position: relative;
  min-height: clamp(460px, 62cqi, 650px);
}

.onePagerDevice {
  position: absolute;
  overflow: hidden;
  border: 9px solid #11191a;
  background: #11191a;
  box-shadow: 0 30px 76px rgba(18, 35, 44, 0.24);
}

.onePagerDevice img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.onePagerDeviceTablet {
  right: 0;
  bottom: 10px;
  width: min(78%, 440px);
  aspect-ratio: 2064 / 2752;
  border-radius: 28px;
}

.onePagerDevicePhone {
  left: 0;
  top: 4px;
  z-index: 2;
  width: min(42%, 236px);
  aspect-ratio: 1284 / 2778;
  border-radius: 36px;
}

.onePagerDeviceWatch {
  left: min(34%, 194px);
  bottom: 0;
  z-index: 3;
  width: min(24%, 132px);
  aspect-ratio: 422 / 514;
  border-radius: 34px;
}

.onePagerCenteredHeader {
  margin-inline: auto;
  text-align: center;
}

.onePagerCenteredHeader h2 {
  max-width: 11em;
  margin-inline: auto;
}

.onePagerCompareGrid,
.onePagerScreenshotGrid,
.onePagerFeatureGrid {
  display: grid;
  gap: 18px;
}

.onePagerCompareGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.onePagerCompareCard,
.onePagerShotCard,
.onePagerFeatureCard,
.onePagerFinalCta {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(21, 48, 59, 0.08);
}

.onePagerCompareCard {
  padding: clamp(22px, 4cqi, 34px);
}

.onePagerCompareCard h3 {
  margin-bottom: 18px;
  text-transform: uppercase;
}

.onePagerCompareCard ul {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.onePagerCompareCard li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  color: #243a43;
  font-size: clamp(0.96rem, 2cqi, 1.08rem);
  font-weight: 750;
}

.onePagerCompareCard li span,
.onePagerFeatureCard > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-weight: 950;
}

.onePagerCompareCard.problem li span {
  background: #f8eadf;
  color: #9a4e18;
}

.onePagerCompareCard.solution {
  border-color: rgba(21, 140, 147, 0.28);
}

.onePagerCompareCard.solution li span {
  background: #e3f4ee;
  color: var(--green);
}

.onePagerWorkflowSection {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.onePagerWorkflowIntro {
  max-width: 860px;
  margin-bottom: 28px;
}

.onePagerWorkflow {
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.onePagerWorkflow li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.onePagerWorkflow span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border: 1px solid rgba(22, 76, 59, 0.22);
  border-radius: 8px;
  background: #fff;
  color: #142028;
  padding: 13px 15px;
  font-size: clamp(0.78rem, 1.6cqi, 0.98rem);
  font-weight: 950;
  line-height: 1;
}

.onePagerWorkflow b {
  color: var(--gold);
  font-size: 1.2rem;
}

.onePagerScreenshotGrid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: stretch;
}

.onePagerShotCard,
.onePagerFeatureCard {
  display: grid;
  align-content: start;
  padding: clamp(14px, 3cqi, 20px);
  container-type: inline-size;
}

.onePagerShotCard {
  grid-column: span 2;
}

.onePagerShotCardWide {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 720px) minmax(220px, 1fr);
  align-items: center;
  align-content: center;
  gap: 8px clamp(22px, 4cqi, 36px);
}

.onePagerShotCard .phoneFrame {
  aspect-ratio: 1284 / 2778;
  width: min(100%, 172px);
}

.onePagerShotCard .tabletFrame {
  aspect-ratio: 2064 / 2752;
  width: 100%;
}

.onePagerShotCard .deviceFrame img {
  object-fit: contain;
}

.onePagerShotCardWide .tabletFrame {
  grid-row: 1 / span 3;
  width: min(100%, 720px);
  justify-self: center;
}

.onePagerShotCard span {
  margin-top: 14px;
  color: var(--teal);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.onePagerShotCard h3 {
  margin: 6px 0 8px;
}

.onePagerShotCardWide span,
.onePagerShotCardWide h3,
.onePagerShotCardWide p {
  grid-column: 2;
}

.onePagerShotCardWide span {
  margin-top: 0;
}

.onePagerShotCard p,
.onePagerFeatureCard p,
.onePagerFinalCta p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.onePagerFeatureGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.onePagerFeatureCard {
  min-height: 224px;
}

.onePagerFeatureCard > span {
  margin-bottom: 22px;
  background: #e3f4ee;
  color: var(--green);
}

.onePagerFeatureCard h3 {
  text-transform: uppercase;
}

.onePagerFeatureCardPrivate {
  border-color: rgba(22, 76, 59, 0.42);
  background: #102f27;
  color: #fff;
}

.onePagerFeatureCardPrivate > span {
  background: var(--gold);
  color: #142028;
}

.onePagerFeatureCardPrivate h3,
.onePagerFeatureCardPrivate p {
  color: #fff;
}

.onePagerFinalCta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: clamp(24px, 5cqi, 42px);
}

.onePagerFinalCta h2 {
  max-width: 10em;
}

.onePagerCtaLine {
  margin-bottom: 10px;
  color: #164c3b;
  font-size: clamp(1.18rem, 3cqi, 1.7rem);
  font-weight: 900;
}

.onePagerSupportBand {
  margin-top: 0;
}

@media (max-width: 900px) {
  .onePagerHero {
    min-height: auto;
    grid-template-columns: 1fr;
  }

  .onePagerDeviceStage {
    min-height: 480px;
  }

  .onePagerCompareGrid,
  .onePagerFeatureGrid,
  .onePagerFinalCta {
    grid-template-columns: 1fr;
  }

  .onePagerScreenshotGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .onePagerShotCard {
    grid-column: auto;
  }

  .onePagerShotCardWide {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .onePagerHero,
  .onePagerPage .pageSection {
    width: min(100% - 28px, 1180px);
  }

  .onePagerHero {
    padding-top: 34px;
  }

  .onePagerHero h1 {
    font-size: clamp(2.7rem, 14cqi, 4.3rem);
  }

  .onePagerHeroActions .button,
  .onePagerAppStoreButton {
    width: 100%;
  }

  .onePagerAppStoreButton {
    grid-column: auto;
    grid-row: auto;
  }

  .onePagerDeviceStage {
    min-height: 360px;
  }

  .onePagerDeviceTablet {
    width: 78%;
  }

  .onePagerDevicePhone {
    width: 43%;
  }

  .onePagerDeviceWatch {
    left: 39%;
    width: 27%;
  }

  .onePagerWorkflow {
    align-items: stretch;
    flex-direction: column;
  }

  .onePagerWorkflow li {
    justify-content: space-between;
  }

  .onePagerWorkflow b {
    rotate: 90deg;
  }

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

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

  .onePagerShotCardWide .tabletFrame,
  .onePagerShotCardWide span,
  .onePagerShotCardWide h3,
  .onePagerShotCardWide p {
    grid-column: auto;
    grid-row: auto;
  }

  .onePagerShotCardWide span {
    margin-top: 14px;
  }

  .onePagerFeatureCard {
    min-height: 0;
  }
}