html, body { margin: 0; }
body { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

.page { display: grid; min-height: 100svh; grid-template-rows: minmax(0, 1fr) auto; }

.banner { position: relative; display: flex; min-height: clamp(21.25rem, 56vh, 40rem); flex-direction: column; justify-content: space-between; overflow: hidden; }

@media (min-width: 47.5625rem) and (max-width: 65rem) {
  .banner { min-height: clamp(17rem, 44.8vh, 32rem); }
}

.bannerPixels { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; }
.bannerVeil { position: absolute; z-index: 1; inset: auto 0 0 0; height: 42%; }
.nav,
.banner-foot { position: relative; z-index: 2; }

.nav { display: flex; position: relative; align-items: center; justify-content: space-between; gap: 1rem; }

.logo { display: flex; align-items: center; gap: .5625rem; }
.logoMark { font-size: .95rem; font-weight: 600; }

@media (min-width: 47.5625rem) {
  .logoMark { font-size: 1.425rem; }
}

@media (min-width: 90.0625rem) {
  .logoMark { font-size: 1.2825rem; }
}

.nav-toggle { display: grid; place-items: center; }
.nav-toggle > span { display: grid; gap: 4px; }
.nav-toggle > span > span { display: block; width: 18px; height: 1.5px; }

.navLinks { display: none; position: absolute; z-index: 3; top: calc(100% + .75rem); right: 0; min-width: 11rem; margin: 0; }
.navLinks[data-open] { display: block; }
.navLinks a { display: block; font-size: 1rem; }

@media (min-width: 47.5625rem) {
  .nav-toggle { display: none; }

  .navLinks,
  .navLinks[data-open] { display: flex; position: static; align-items: center; gap: clamp(1.25rem, 2.6vw, 2.25rem); min-width: 0; }
  .navLinks a { font-size: 1.0625rem; }
}

.banner-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; }

.tagline { max-width: 14ch; margin: 0; font-size: clamp(1.25rem, 2.2vw, 1.8125rem); font-weight: 300; line-height: 1.24; }

.socials { display: flex; gap: .5rem; justify-content: flex-end; }
.social { display: grid; position: relative; width: 4rem; height: 4rem; place-items: center; }
.social svg { width: 1.875rem; height: 1.875rem; }

[data-tip] { position: relative; }
[data-tip]::after { content: attr(data-tip); position: absolute; z-index: 3; bottom: calc(100% + .5rem); font-size: .8125rem; line-height: 1.3; white-space: nowrap; pointer-events: none; }
.social[data-tip]::after { right: 0; }
.cta[data-tip]::after { left: 50%; translate: -50% 0; }

@media (min-width: 65.0625rem) {
  .tagline { max-width: 500px; }
}

.intro { display: grid; align-items: end; gap: clamp(1.25rem, 3vw, 3rem); grid-template-columns: 1fr auto; }

.tags { display: inline-block; font-size: .6875rem; }
.headline { max-width: 34ch; margin: 0 0 .875rem; font-size: clamp(1.625rem, 3.3vw, 2.625rem); font-weight: 400; line-height: 1.16; }
@media (min-width: 47.5625rem) {
  .headline { font-size: clamp(2.25rem, calc(3.3vw + 10px), 3.25rem); }
}

.cta { display: inline-flex; align-items: center; gap: .625rem; font-size: .875rem; white-space: nowrap; }
.cta svg { width: .9375rem; height: .9375rem; }

@media (min-width: 65.0625rem) {
  a.cta { gap: .78125rem; font-size: 1.09375rem; }
  a.cta svg { width: 1.171875rem; height: 1.171875rem; }
}

@media (max-width: 47.5rem) {
  .banner { min-height: clamp(19.125rem, 50.4vh, 36rem); }
  .banner-foot { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 1.375rem; }
  .tagline { max-width: 18ch; }
  .socials { flex: none; justify-content: flex-end; }
  .intro { align-items: start; grid-template-columns: 1fr; }
  .headline { max-width: none; }
  .cta { width: 100%; justify-content: center; }
}

@media (max-width: 30rem) {
  .headline { font-size: clamp(.9375rem, 5.2vw, 1.5625rem); }
  .tagline { font-size: 1.25rem; }
}

:where(ul) { margin: 0; }
:where(button, input) { font: inherit; }

.tech { display: grid; min-height: 100svh; place-items: center; }
.shell { display: grid; width: 100%; max-width: var(--shell); margin-inline: auto; align-items: center; gap: clamp(1.75rem, 4vw, 4.25rem); grid-template-columns: minmax(17.5rem, .82fr) 1.55fr; }
.techIntro { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: normal; }

.techLede { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.display { align-self: stretch; max-width: 14ch; margin: 0; font-size: clamp(2rem, 3.6vw, 3.25rem); font-weight: 700; line-height: 1.06; text-align: left; }
.displayAccent { font-style: normal; }
.displayRule { display: block; width: 3.25rem; height: 3px; margin: clamp(1rem, 1.8vw, 1.375rem) 0; }
.techSub { max-width: 34ch; margin: 0; font-size: clamp(.9375rem, 1.05vw, 1.0625rem); line-height: 1.6; }

.caps { display: flex; width: 100%; flex-direction: column; gap: .5rem; overflow: hidden; }
.cap { display: grid; width: 100%; align-items: center; gap: .875rem; grid-template-columns: auto 1fr; text-align: left; }
.capIcon { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; }
.capIcon svg { display: block; width: 1.1875rem; height: 1.1875rem; }
.capText { display: flex; min-width: 0; flex-direction: column; gap: .1875rem; }
.capLabel { font-size: .9375rem; font-weight: 600; }
.capSub { font-size: .78125rem; font-weight: 400; line-height: 1.4; }

.ctaAccent { margin-top: 50px; font-weight: 500; }
.ctaBlock { justify-content: center; width: 100%; font-size: 1rem; }

.techNote { display: flex; align-items: center; gap: .5rem; margin: .875rem 0 0; font-size: .78125rem; }
.techNote svg { width: .875rem; height: .875rem; flex: none; }

.panel { display: block; width: 100%; height: 100%; overflow: hidden; }

.mock { position: relative; display: flex; width: 100%; height: 100%; min-height: 18.75rem; align-items: center; justify-content: center; }
.mockArc { position: absolute; z-index: 0; top: 4%; left: 50%; width: 82%; height: auto; transform: translateX(-50%); }
.mockTile { position: absolute; z-index: 2; display: grid; width: 3.25rem; height: 3.25rem; place-items: center; }
.mockTile svg { width: 1.375rem; height: 1.375rem; }
.mockTileA { top: 2%; right: 1%; }
.mockTileB { right: 0; bottom: 16%; }
.mockTileC { bottom: 6%; left: 1%; }

@media (min-width: 87.5rem) {
  .mockTile { width: 4.0625rem; height: 4.0625rem; }
  .mockTile svg { width: 1.71875rem; height: 1.71875rem; }
}
.chat { position: relative; z-index: 1; display: flex; width: 100%; max-width: 22.5rem; flex-direction: column; overflow: hidden; }

.chatHead { display: flex; flex: none; align-items: center; gap: .625rem; }
.chatId { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.chatTools { display: flex; align-items: center; gap: .875rem; }
.chatTools svg { width: 1.0625rem; height: 1.0625rem; }
.chatAvatar { display: grid; width: 1.625rem; height: 1.625rem; place-items: center; }
.chatAvatar svg { width: .875rem; height: .875rem; }
.chatName { display: block; font-size: .8125rem; font-weight: 500; line-height: 1.2; }
.chatStatus { display: flex; align-items: center; gap: .3125rem; font-size: .6875rem; line-height: 1.4; }
.dot-live { width: 5px; height: 5px; }

.chatLog { display: flex; height: 17rem; flex: none; flex-direction: column; justify-content: flex-end; gap: .3125rem; overflow: hidden; }
.msg { max-width: 82%; font-size: .9375rem; line-height: 1.55; }

.msgMeta { display: flex; align-items: center; gap: .3125rem; margin-top: .1875rem; font-size: .6875rem; }
.msgMe .msgMeta { justify-content: flex-end; }
.msgTicks { letter-spacing: -.22em; }
.msgBot { align-self: flex-start; }
.msgMe { align-self: flex-end; }
.typing { display: flex; align-self: flex-start; gap: 4px; }
.typing i { width: 5px; height: 5px; }

.lookup { display: flex; align-items: center; gap: .4rem; font-size: .75rem; }
.lookupIcon { width: .8125rem; height: .8125rem; flex: none; }

.caret { display: inline-block; width: 1.5px; height: .72rem; margin-left: 1px; vertical-align: text-bottom; }

.chatFoot { display: grid; flex: none; grid-template-rows: 1.75rem auto auto; align-items: center; gap: .5rem; }
.chatChip { grid-row: 1; justify-self: start; }
.chatBar { grid-row: 2; }
.chatLegal { grid-row: 3; }
.chatBar { display: flex; align-items: center; gap: .625rem; }
.chatBarText { flex: 1; min-width: 0; font-size: .9375rem; }
.chatBarSend { width: 1.125rem; height: 1.125rem; flex: none; }
.chatLegal { display: flex; align-items: center; justify-content: center; gap: .375rem; font-size: .6875rem; }
.chatLegal svg { width: .8125rem; height: .8125rem; flex: none; }
.chatChip { display: inline-flex; align-items: center; gap: .35rem; font-size: .6875rem; }
.chatChip svg { width: .8125rem; height: .8125rem; }

@media (max-width: 65rem) {
  .tech { place-items: start center; }
  .shell { align-items: start; gap: 2.125rem; grid-template-columns: 1fr; }

  .panel { order: 1; }
  .techIntro { order: 2; }
  .display { max-width: 20ch; }
  .panel { grid-template-columns: 1fr; }
  .mock { min-height: 0; }

  .mockTile,
  .mockArc { display: none; }
  .chat { max-width: 100%; }
}

@media (min-width: 65.0625rem) {
  .shell {
    min-height: 0;
    align-items: center;
    gap: clamp(3rem, 5vw, 6rem);
    grid-template-columns: minmax(22rem, .78fr) minmax(0, 1.65fr);
  }
  .techIntro { justify-content: center; align-items: center; }
  .display { max-width: 20ch; font-size: clamp(1.9rem, 2.4vw, 2.75rem); }
  .capIcon { width: 2.625rem; height: 2.625rem; }
  .capIcon svg { width: 1.3125rem; height: 1.3125rem; }
  .capLabel { font-size: clamp(.9375rem, 1vw, 1.0625rem); }
  .panel { height: 100%; gap: clamp(2.5rem, 4vw, 5rem); grid-template-columns: minmax(18rem, .82fr) minmax(22rem, 1.25fr); }
  .mock { min-height: 28rem; }

  .chat { width: 100%; max-width: 40rem; max-height: 46rem; }

  .chatLog { height: clamp(21rem, 52vh, 36rem); }
  .msg { max-width: 78%; font-size: 1.0625rem; line-height: 1.5; }
  .typing i { width: 6px; height: 6px; }
  .chatName { font-size: .9375rem; }
  .chatStatus { font-size: .78125rem; }
  .chatAvatar { width: 2rem; height: 2rem; }
  .chatAvatar svg { width: 1.0625rem; height: 1.0625rem; }
}

@media (max-width: 35rem) {
  .display { max-width: 16ch; font-size: 1.6875rem; }
  .cap { gap: .6875rem; }
  .capLabel { font-size: .84375rem; }
  .ctaAccent { width: 100%; justify-content: center; }
  .chatLog { height: 13.5rem; }
  .msg { font-size: .8125rem; }
}

.products { display: grid; min-height: 100svh; place-items: center; }
.productsInner { width: 100%; max-width: var(--shell); margin-inline: auto; }

.productsHead { margin-bottom: clamp(1.875rem, 4.5vw, 3.625rem); text-align: center; }
.badge { display: inline-block; font-size: .6875rem; }
.productsTitle { max-width: 20ch; margin: clamp(1rem, 2vw, 1.625rem) auto 0; font-size: clamp(1.6875rem, 3.4vw, 2.75rem); font-weight: 400; line-height: 1.15; }

.productsGrid { display: grid; align-items: stretch; gap: clamp(1.75rem, 4vw, 4.25rem); grid-template-columns: 1fr minmax(15rem, .78fr) 1fr; }
.productsCol { display: flex; flex-direction: column; }

.leadTitle { max-width: 16ch; margin: 0 0 1.125rem; font-size: clamp(1.25rem, 1.9vw, 1.5625rem); font-weight: 400; line-height: 1.24; }
.leadBody { max-width: 38ch; margin: 0; font-size: .84375rem; line-height: 1.72; }
.leadStats { display: grid; gap: 0; margin: 1.25rem 0 1.5rem; padding: 0; list-style: none; }
.leadStats .leadBody { display: grid; grid-template-columns: 7rem minmax(0, 1fr); align-items: center; gap: .875rem; max-width: none; padding: .875rem 0; line-height: 1.45; }
.leadStatValue { display: flex; align-items: baseline; gap: .375rem; white-space: nowrap; }
.leadStatQualifier { font-size: .75rem; }
.leadStatValue strong { font-size: clamp(1.625rem, 2.2vw, 2rem); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }

.showcase { display: flex; flex-direction: column; gap: 1rem; }
.showcaseViz { display: grid; aspect-ratio: 1 / 1.02; place-items: center; overflow: hidden; }

.showcaseVideo { display: block; width: 100%; height: 100%; object-fit: cover; }
.showcaseCopy { margin: 0; font-size: .78125rem; line-height: 1.7; }

.offers { margin: 0; }
.offerName { margin: 0 0 .375rem; font-size: 1.03125rem; font-weight: 400; }
.offerNote { max-width: 30ch; margin: 0; font-size: .78125rem; line-height: 1.6; }

.productsCta { margin-top: auto; }

.productsCta .cta { width: 100%; justify-content: center; }

@media (min-width: 81.25rem) {
  .productsGrid { gap: clamp(2.25rem, 4vw, 5.5rem); }

  .productsHead { margin-bottom: clamp(1.25rem, min(4.5vw, 5vh), 3.625rem); }

  .showcaseViz { aspect-ratio: auto; height: clamp(15rem, min(38vh, 30vw), 34rem); }

  .productsTitle { max-width: 22ch; font-size: clamp(2.75rem, 3.1vw, 3.625rem); }
  .leadTitle { max-width: 18ch; font-size: clamp(1.5625rem, 1.9vw, 2.125rem); }
  .leadBody { max-width: 46ch; font-size: clamp(.84375rem, .92vw, 1.0625rem); }
  .offerName { font-size: clamp(1.03125rem, 1.15vw, 1.3125rem); }
  .offerNote { max-width: 36ch; font-size: clamp(.78125rem, .88vw, .96875rem); }
  .showcaseCopy { font-size: clamp(.78125rem, .85vw, .9375rem); }

  .offers { display: grid; flex: 1; grid-auto-rows: 1fr; }
  .offer { align-content: center; }
}

@media (max-width: 65rem) {
  .products { place-items: start center; }
  .productsGrid { max-width: 32.5rem; margin: 0 auto; gap: 2.375rem; grid-template-columns: 1fr; }
  .leadTitle,
  .leadBody,
  .offerNote { max-width: none; }
  .showcase { width: 100%; max-width: 26.25rem; margin: 0 auto; }
}

@media (max-width: 35rem) {
  .productsTitle { font-size: 1.625rem; }
}

.contact { display: grid; min-height: 100svh; align-items: center; justify-items: stretch; grid-template-rows: 1fr auto; }
.contactShell { display: grid; width: 100%; max-width: var(--shell); margin-inline: auto; align-items: stretch; gap: clamp(1.5rem, 3.4vw, 3.5rem); grid-template-columns: 1.12fr 1fr; }

.contactLeft { display: flex; flex-direction: column; }
.contactHeadline { max-width: 17ch; margin: 0 0 clamp(1.25rem, min(3.4vw, 4vh), 2.75rem); font-size: clamp(1.875rem, 3.5vw, 3.125rem); font-weight: 500; line-height: 1.14; }

.details { margin-bottom: clamp(1.875rem, 4.5vw, 3.625rem); }
.detailLabel { display: block; margin-bottom: .5rem; font-size: .8125rem; font-weight: 400; }

.formTitle { margin: 0 0 clamp(1.125rem, 2.4vw, 1.875rem); font-size: clamp(1.125rem, 1.6vw, 1.3125rem); font-weight: 400; }

.contactForm { display: flex; flex: 1; flex-direction: column; }
.field-row { display: grid; gap: 0 clamp(1.5rem, 3.4vw, 3.25rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }

.field { position: relative; }

.field input,
.field textarea { display: block; width: 100%; font-size: .875rem; }

.field textarea { min-height: var(--msg-min); max-height: var(--msg-max); line-height: 1.6; overflow-y: auto; resize: none; }

.contactForm { --msg-min: calc(2.8rem + .6875rem); --msg-max: calc(2.8rem + .6875rem); }

@media (min-width: 38.8125rem) {
  .contactForm { --msg-min: calc(4.2rem + .6875rem); --msg-max: calc(7rem + .6875rem); }
}

.contactForm > .field { min-height: calc(var(--msg-max) + var(--field-gap)); }

.contactActions { display: flex; margin-top: auto; align-items: center; justify-content: flex-end; gap: 1rem; }
.contactError { margin: 0; margin-right: auto; font-size: .78125rem; line-height: 1.4; }

.fieldError,
.fieldCount { height: 0; margin: 0; font-size: .75rem; line-height: 1.35; }
.fieldCount { text-align: right; }

.detailValue { display: inline-flex; align-items: center; gap: .5rem; font: inherit; font-size: clamp(1.125rem, 1.5vw, 1.4375rem); font-weight: 500; line-height: 1.4; }
.detailValue svg { width: .9375rem; height: .9375rem; flex: none; }

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

.contactVisual { position: relative; display: flex; min-height: clamp(26.25rem, 62vh, 45rem); flex-direction: column; overflow: hidden; }

.wave { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; }

.services { display: grid; flex: 1; grid-template-rows: auto 1fr; gap: clamp(.5rem, 1.4vh, .75rem); }
.servicesLabel { margin: 0; font-size: .75rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }

.servicesList { display: grid; margin: 0; padding: 0; grid-auto-rows: 1fr; list-style: none; }
.service { display: grid; grid-template-columns: auto 1fr; align-content: center; gap: .125rem .625rem; }
.serviceMark { width: .375rem; height: .375rem; margin-top: .4375rem; grid-row: 1; }
.serviceName { font-size: .9375rem; font-weight: 600; line-height: 1.35; }
.serviceNote { grid-column: 2; font-size: .8125rem; line-height: 1.55; }

@media (max-width: 61.25rem) {
  .contact { align-items: start; }
  .contactShell { gap: clamp(1.25rem, 2.8vw, 2.25rem); }
  .contactHeadline { max-width: 20ch; }
}

@media (min-width: 38.8125rem) and (max-width: 61.25rem) {

  .contact { min-height: auto; }

  .contactActions { flex-wrap: wrap; justify-content: stretch; }
  .contactActions .cta { width: 100%; justify-content: center; }
}

@media (max-width: 38.75rem) {
  .contactShell { gap: 1.75rem; grid-template-columns: 1fr; }

  .contactVisual { min-height: 18.75rem; order: -1; }
  .contactHeadline { font-size: 1.8125rem; }
  .field-row { grid-template-columns: 1fr; }
  .contactActions { flex-wrap: wrap; justify-content: stretch; }
  .contactActions .cta { width: 100%; justify-content: center; }
}

@media (min-width: 65.0625rem) {

  .techLede { margin-bottom: clamp(.625rem, 2vh, 1.75rem); }
  .caps { gap: clamp(.25rem, .8vh, .4375rem); }
}

@media (min-width: 65.0625rem) and (max-width: 81.25rem) {

  .ctaAccent { margin-top: clamp(1rem, 3.7vh, 30px); }
  a.ctaBlock { font-size: .9375rem; }
  a.ctaBlock svg { width: 1rem; height: 1rem; }
}

.story { display: grid; min-height: 100svh; place-items: center; }
.storyInner { width: 100%; max-width: var(--shell); margin-inline: auto; }

.storyHead { margin-bottom: clamp(1.875rem, 4.5vw, 3.625rem); text-align: center; }
.storyTitle { max-width: 36ch; margin: clamp(1rem, 2vw, 1.625rem) auto 0; font-size: clamp(1.6875rem, 3.4vw, 2.75rem); font-weight: 400; line-height: 1.15; }

@media (min-width: 47.5625rem) {
  .storyTitle { margin-top: clamp(.5rem, 1vw, .8125rem); }
}

.storyCol { display: flex; flex-direction: column; gap: 1rem; }
.storyCard { display: flex; flex-direction: column; }

.clientHead { display: grid; align-items: center; gap: .875rem; grid-template-columns: auto 1fr; }
.clientMark { display: grid; width: 3.25rem; height: 3.25rem; place-items: center; }
.clientMark svg { display: block; width: 1.625rem; height: 1.625rem; }
.clientId { display: grid; gap: .1875rem; }
.clientName { font-size: clamp(1.0625rem, 1.35vw, 1.3125rem); font-weight: 600; line-height: 1.2; }
.clientField { font-size: .9375rem; line-height: 1.3; }

.clientAgent { display: flex; align-items: center; margin: clamp(1rem, 2vw, 1.5rem) 0 0; gap: .5rem; font-size: .9375rem; font-weight: 500; }
.clientAgent svg { display: block; width: 1.0625rem; height: 1.0625rem; flex: none; }

.clientBlurb { margin: .8125rem 0 0; font-size: .8125rem; line-height: 1.65; }

.quote { display: grid; margin: clamp(1rem, 2.2vw, 1.625rem) 0 0; gap: .75rem; grid-template-columns: auto 1fr; }
.quoteMark svg { display: block; width: 1.5rem; height: 1.5rem; }
.quote p { margin: 0; font-size: clamp(.9375rem, 1.1vw, 1.0625rem); line-height: 1.5; }

.quoteBy { display: grid; align-items: center; margin-top: auto; padding-top: clamp(1rem, 2.2vw, 1.625rem); gap: .875rem; grid-template-columns: auto 1fr; }
.quoteAvatar { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; font-size: .875rem; font-weight: 600; }
.quoteWho { display: grid; gap: .125rem; }
.quoteName { font-size: .9375rem; font-weight: 600; }
.quoteRole { font-size: .875rem; }

.storyCta { flex: none; margin-top: 0; }

.story .mockTile { align-content: center; justify-items: center; gap: .1875rem; font-size: .5625rem; font-weight: 600; letter-spacing: .02em; }
.story .mockTile svg { width: 1.0625rem; height: 1.0625rem; }

@media (max-width: 65rem) {
  .story { place-items: start center; }
  .storyCol { order: 2; }
}

@media (min-width: 65.0625rem) {
  .story { align-items: stretch; }
  .storyInner { display: grid; grid-template-rows: auto minmax(0, 1fr); }

  .story .shell { --story-gap: clamp(.875rem, 1.4vw, 1.25rem); --story-cta: 3.125rem; min-height: 0; align-items: stretch; }

  .storyCol { gap: var(--story-gap); }
  .storyCard { flex: 1; min-height: 0; }
  .storyCta { height: var(--story-cta); }

  .story .panel { position: relative; }
  .story .mock { position: absolute; inset: 0; min-height: 0; }

  .story .mockTileA { top: 6%; right: auto; bottom: auto; left: 1%; }
  .story .mockTileB { top: 46%; right: 0; bottom: auto; left: auto; }
  .story .mockTileC { top: auto; right: auto; bottom: 6%; left: 5%; }
  .story .chat { height: calc(100% - var(--story-gap) - var(--story-cta)); max-height: none; }
  .story .chatLog { flex: 1; min-height: 0; height: auto; }

  .story .mockTile { width: 3.75rem; height: 3.75rem; }
  .story .mockTile svg { width: 1.125rem; height: 1.125rem; }
}

@media (min-width: 87.5rem) {
  .story .mockTile { width: 4.375rem; height: 4.375rem; }
  .story .mockTile svg { width: 1.375rem; height: 1.375rem; }
  .story .mockTile { font-size: .625rem; }
}

@media (min-width: 81.25rem) {
  .storyHead { margin-bottom: clamp(1.25rem, min(4.5vw, 5vh), 3.625rem); }
  .storyTitle { font-size: clamp(2.75rem, 3.1vw, 3.625rem); }
}

@media (max-width: 35rem) {
  .storyTitle { font-size: 1.625rem; }
}

.faq { display: grid; position: relative; min-height: 100svh; place-items: stretch center; overflow: hidden; }

.faqInner { display: flex; position: relative; z-index: 1; width: 100%; max-width: var(--shell); margin-inline: auto; flex-direction: column; justify-content: center; }

.faqHead { text-align: center; }
.faqTitle { max-width: 18ch; margin: 0 auto; font-size: clamp(1.875rem, min(4.4vw, 6.2vh), 3.25rem); font-weight: 600; line-height: 1.08; }
.faqSub { max-width: 52ch; margin: clamp(.5rem, 1.4vh, 1rem) auto 0; font-size: clamp(.9375rem, 1.3vw, 1.0625rem); line-height: 1.6; padding-bottom: 1rem; }

.faqList { display: grid; margin-top: clamp(1rem, 3vh, 2.5rem); gap: clamp(.3125rem, 1vh, .625rem); counter-reset: faq; }

.faqItem { --faq-tile: clamp(2rem, 4.9vh, 2.75rem); --faq-indent: calc(var(--faq-tile) + 1rem); }
.faqQ { display: grid; align-items: center; gap: 1rem; grid-template-columns: auto 1fr auto; cursor: pointer; list-style: none; }
.faqQ::-webkit-details-marker { display: none; }

.faqIcon { display: grid; width: var(--faq-tile); height: var(--faq-tile); place-items: center; font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.faqIcon::before { counter-increment: faq; content: counter(faq, decimal-leading-zero); }
.faqLabel { font-size: clamp(.9375rem, 1.4vw, 1.0625rem); font-weight: 600; line-height: 1.35; }
.faqChev { width: 1.25rem; height: 1.25rem; flex: none; }

.faqA p { margin: 0; font-size: clamp(.875rem, 1.25vw, .96875rem); line-height: 1.65; }

.faqNote { display: flex; margin: clamp(.875rem, 2.4vh, 2.5rem) 0 0; align-items: center; justify-content: center; gap: .5rem; font-size: .8125rem; line-height: 1.5; text-align: center; }
.faqNote svg { width: 1rem; height: 1rem; flex: none; }
.faqNote::before,
.faqNote::after { content: ""; max-width: 12rem; flex: 1; height: 1px; }

@media (min-width: 81.25rem) {

  .faqTitle { max-width: 20ch; font-size: clamp(3.25rem, 3.4vw, 4.25rem); }
  .faqSub { max-width: 56ch; font-size: clamp(1.0625rem, 1.05vw, 1.25rem); }

  .faqItem { --faq-tile: clamp(2.25rem, min(4.9vh, 3.4vw), 3.5rem); --faq-indent: calc(var(--faq-tile) + 1.25rem); }
  .faqQ { gap: 1.25rem; }
  .faqIcon { font-size: clamp(.8125rem, .85vw, .9375rem); }
  .faqLabel { font-size: clamp(1.0625rem, 1.1vw, 1.25rem); }
  .faqChev { width: 1.4375rem; height: 1.4375rem; }

  .faqA p { font-size: clamp(.96875rem, .92vw, 1.0625rem); }

  .faqNote { font-size: clamp(.8125rem, .8vw, .9375rem); }
  .faqNote::before,
  .faqNote::after { max-width: 18rem; }
}

@media (max-width: 38.75rem) {
  .faqItem { --faq-tile: 2.25rem; --faq-indent: calc(var(--faq-tile) + .75rem); }
  .faqQ { gap: .75rem; }
  .faqIcon { font-size: .75rem; }
  .faqNote::before,
  .faqNote::after { display: none; }
}

.demo { display: none; width: min(68.75rem, 94vw); max-width: none; height: min(47.5rem, 88vh); max-height: none; flex-direction: column; }
.demo[open] { display: flex; }

.demoBar { display: flex; flex: none; align-items: center; gap: 1rem; }
.demoTitle { margin: 0; margin-right: auto; font-size: .9375rem; font-weight: 600; }

.demoOut { display: inline-flex; align-items: center; gap: .375rem; font-size: .8125rem; }
.demoOut svg { width: .9375rem; height: .9375rem; }

.demoClose { display: grid; width: 2.25rem; height: 2.25rem; flex: none; place-items: center; }
.demoClose svg { width: 1.125rem; height: 1.125rem; }

.demoFrame { width: 100%; min-height: 0; flex: 1; border: 0; }

.demoDock {
  position: fixed;
  z-index: 60;
  inset: auto clamp(.75rem, 1.6vw, 1.5rem) clamp(.75rem, 1.6vw, 1.5rem) auto;
  width: clamp(19rem, 25vw, 24rem);
  height: clamp(24rem, 62vh, 36rem);
}

.demoDock .demoTitle { overflow: hidden; font-size: .875rem; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; }
.demoDock .demoOut { display: none; }

@media (max-width: 38.75rem) {
  .demo { width: 100vw; height: 100dvh; }
  .demoOut span { display: none; }

  .demoDock { inset: 0; width: 100vw; height: 100dvh; }
}

.foot { display: grid; width: 100%; place-items: center; }
.footInner { display: flex; width: 100%; max-width: var(--shell); margin-inline: auto; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.contact .footInner { max-width: none; }
.footCopy { margin: 0; font-size: .8125rem; line-height: 1.5; }
.footLink { font-size: .8125rem; }

.legal { display: grid; place-items: start center; }
.legalInner { width: 100%; max-width: var(--shell); margin-inline: auto; }
.legalTitle { max-width: 22ch; margin: 0; font-size: clamp(1.875rem, 4vw, 3rem); font-weight: 600; line-height: 1.1; }
.legalMeta { margin: .75rem 0 0; font-size: .8125rem; }

.legalBody { margin-top: clamp(1.75rem, 4vw, 3rem); }
.legalBody h2 { margin: clamp(1.75rem, 3.4vw, 2.5rem) 0 .625rem; font-size: clamp(1.0625rem, 1.5vw, 1.3125rem); font-weight: 600; line-height: 1.3; }
.legalBody h2:first-child { margin-top: 0; }
.legalBody p { margin: 0 0 .875rem; font-size: .9375rem; line-height: 1.7; }
.legalBody ul { display: grid; margin: 0 0 .875rem; padding: 0; gap: .5rem; list-style: none; }
.legalBody li { padding-left: 1.125rem; font-size: .9375rem; line-height: 1.7; }
.legalNote { margin-top: clamp(1.75rem, 3.4vw, 2.5rem); font-size: .875rem; line-height: 1.7; }

.legalBack { display: inline-flex; align-items: center; gap: .4375rem; margin-bottom: clamp(1.25rem, 2.4vw, 2rem); font-size: .8125rem; }
.legalBack svg { width: .9375rem; height: .9375rem; }

@media (min-width: 75rem) {
  .serviceNote { padding-top: 10px; }
}

@media (max-width: 38.75rem) {
  .footInner { flex-wrap: nowrap; gap: .625rem; }
  .footCopy,
  .footLink { font-size: clamp(.5625rem, 2.75vw, .8125rem); white-space: nowrap; }
}