:root { --reading-width: 34rem; --cartoon-stage: min(400px, calc(100vw - 2.5rem)); }
.home-flow .hero:not(.page-hero) { position: relative; min-height: calc(100vh - 92px); min-height: calc(100svh - 92px); padding-block: 5rem; }
.hero-content { display: contents; }
.hero-scroll { position: absolute; bottom: 1rem; left: 50%; display: flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; margin: 0; transform: translateX(-50%); font-family: var(--mono); font-size: 1.4rem; line-height: 1; color: var(--accent); opacity: 1; transition: opacity 200ms var(--ease), color 180ms ease; }
.hero-scroll::after { content: none; }
.hero-scroll.is-scrolled { opacity: 0; pointer-events: none; }
.page-hero, .home-flow .page-hero { min-height: 0; padding-block: 3rem; }
.page-hero h1, .content-page .page-hero h1, .not-found .page-hero h1, html[lang='de'] .page-hero h1 { font-size: clamp(2.25rem, 4vw, 3.25rem); line-height: 1.15; margin-bottom: 1.25rem; overflow-wrap: anywhere; }
.page-hero .eyebrow { margin-bottom: 1rem; font-size: .75rem; }
.page-hero .hero-intro { max-width: 31rem; font-size: 1.125rem; line-height: 1.65; overflow-wrap: anywhere; }
.page-hero .hero-picture { max-width: 320px; justify-self: center; }
/* Match visible ink height rather than differently padded image canvases. */
.cartoon-handoff { --cartoon-width: calc(var(--cartoon-stage) * .42906); }
.cartoon-setup { --cartoon-width: calc(var(--cartoon-stage) * .42857); }
.cartoon-portrait { --cartoon-width: calc(var(--cartoon-stage) * .28686); }
.page-hero .hero-picture.cartoon-art { width: var(--cartoon-width); max-width: 100%; }
.page-hero .cartoon-art img { width: 100%; height: auto; aspect-ratio: auto; }
.story-section.quiet-section { display: block; max-width: var(--reading-width); padding-block: 3rem; }
.quiet-section .story-copy { min-width: 0; max-width: none; margin: 0; }
.home-flow .quiet-section h2 { font-size: clamp(1.75rem, 2.7vw, 2.25rem); line-height: 1.2; overflow-wrap: anywhere; }
.quiet-section .eyebrow { font-size: .75rem; }
.home-flow .quiet-section .eyebrow + h2 { margin-top: .75rem; }
.home-flow .quiet-section .story-heading + .story-text { margin-top: 1.25rem; }
.home-flow .quiet-section .story-text { max-width: none; font-size: 1.125rem; line-height: 1.65; overflow-wrap: anywhere; }
.quiet-section .text-link { margin-top: 1rem; }
.page-heading { max-width: var(--reading-width); padding-block: 3rem 1.5rem; }
.content-page h1, .legal-heading h1 { font-size: clamp(2rem, 3.2vw, 2.5rem); line-height: 1.15; overflow-wrap: anywhere; }
.content-page .eyebrow + h1, .legal-heading .eyebrow + h1 { margin-top: .75rem; }
.page-heading .story-text, .legal-heading > p:not(.eyebrow):not(.translation-note):not(.legal-date) { max-width: none; margin-top: 1.25rem; font-size: 1.125rem; line-height: 1.65; }
.roux-flow h1 { margin-bottom: 0; }
.story-highlight { max-width: none; margin-top: 1rem; font-size: 1rem; line-height: 1.65; }
.story-copy .update-channels { margin-top: 1.25rem; }
.marketplace-diagram { --cartoon-width: var(--cartoon-stage); }
.update-diagram { --cartoon-width: calc(var(--cartoon-stage) * .79758); }
.story-diagram { width: min(100%, var(--cartoon-width)); margin-top: 2rem; }
.story-diagram > img { width: 100%; height: auto; }
.explainer-labels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; text-align: center; font-size: .875rem; line-height: 1.5; }
.explainer-labels > span { min-width: 0; overflow-wrap: anywhere; }
.update-labels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
/* Device centres in the 1774px drawing: 454.5px and 1311.5px. */
.update-labels > span:first-child { transform: translateX(1.24%); }
.update-labels > span:last-child { transform: translateX(-2.14%); }
.update-labels strong { display: block; font-weight: 500; }
.update-labels small { display: block; margin-top: .6rem; font-size: .8125rem; color: var(--quiet); }
.growth-proof { margin-top: 1.25rem; }
.growth-proof dl { margin: .65rem 0 0; }
.growth-proof dl > div { display: flex; flex-direction: column; }
.growth-proof dd { order: -1; margin: 0; font-family: var(--mono); font-size: 1.75rem; line-height: 1.1; font-weight: 700; white-space: nowrap; }
.growth-proof dt { margin-top: .6rem; font-size: .875rem; color: var(--quiet); }
.home-flow .pilot-overview { padding: 0; }
.platform-note { margin-top: 1.25rem; font-size: .875rem; color: var(--quiet); }
.pilot-proof { display: flex; flex-wrap: wrap; gap: 1.25rem 1rem; margin: 1.5rem 0 0; }
.pilot-proof > div { display: flex; flex-direction: column; min-width: 0; flex: 1 1 8rem; }
.pilot-proof dd { order: -1; margin: 0; font-family: var(--mono); font-size: 1.75rem; font-weight: 700; line-height: 1.15; }
.pilot-proof dt { max-width: 12rem; margin-top: .6rem; font-size: .875rem; line-height: 1.5; color: var(--quiet); overflow-wrap: anywhere; }
.fee-proof { margin-top: 1.5rem; }
.fee-proof dl { margin: 1rem 0 0; }
.fee-proof dl > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1.5rem; }
.fee-proof dl > div + div { margin-top: .75rem; }
.fee-proof dt { flex: 1 1 12rem; font-size: .9375rem; color: var(--quiet); }
.fee-proof dd { margin: 0; font-family: var(--mono); font-size: 1.75rem; font-weight: 700; line-height: 1.15; white-space: nowrap; }
.fee-proof .note { margin-top: 1rem; }
.overview-fee-inline { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem 1.25rem; margin-top: 1.5rem; }
.overview-fee-inline > div { min-width: 0; flex: 1 1 12rem; }
.overview-fee-inline .fee-inline-value { flex-shrink: 0; font-size: 1.75rem; font-weight: 700; line-height: 1.15; }
.overview-fee-inline .note { margin-top: .2rem; font-size: .875rem; line-height: 1.6; overflow-wrap: anywhere; }
.quiet-section .questions { margin-top: 1.25rem; }
.questions { gap: .375rem; }
.questions details, .questions details:hover, .questions details[open] { border-radius: 0; background: transparent; }
.questions summary { padding: .75rem 0; gap: 1rem; min-height: 44px; }
.questions summary:hover { color: var(--accent); }
.questions summary:focus-visible { outline-offset: -3px; }
.questions .faq-answer { padding: 0 0 1rem; font-size: 1rem; overflow-wrap: anywhere; }
.legal-main { padding: 0; }
.legal-body { max-width: var(--reading-width); padding-bottom: 3rem; }
.legal-body .back { margin-bottom: 1rem; }
.legal-meta { margin-bottom: 1.5rem; }
.legal-meta .translation-note, .legal-meta .legal-date { margin-top: 0; font-size: .875rem; }
.legal-meta p + p { margin-top: .75rem; }
.legal-heading { max-width: none; margin-bottom: 1.5rem; }
.legal-heading .eyebrow { font-size: .75rem; margin-bottom: 0; }
.legal-heading h1 { margin-bottom: 0; }
.legal-heading .translation-note, .legal-heading .legal-date { margin-top: 1rem; font-size: .875rem; }
.legal-contents { margin-bottom: 1.5rem; }
.legal-contents summary { font-size: .9375rem; }
.legal-contents .contents { margin: 0; font-size: .9375rem; }
.legal-contents .contents li:last-child { margin-bottom: 0; }
.legal-copy { font-size: 1.0625rem; line-height: 1.65; }
.legal-copy section { border: 0; padding-block: 2rem; }
.legal-copy h2 { font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.25; margin-bottom: 1.25rem; }
.legal-copy h3 { font-size: 1.125rem; }
.not-found { max-width: none; padding: 0; }
.not-found-body { max-width: var(--reading-width); padding-bottom: 3rem; }
.not-found .eyebrow { font-size: .75rem; }
.not-found .button { background: transparent; color: var(--ink); padding-inline: 0; font-size: .9375rem; }
.not-found .button:hover, .not-found .button:focus-visible { color: var(--accent); }
@media (max-width: 1080px) {
  .home-flow .hero:not(.page-hero) { min-height: calc(100vh - 108px); min-height: calc(100svh - 108px); padding-block: 5rem; }
}
@media (max-width: 740px) {
  .home-flow .hero:not(.page-hero) { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(min-content, 1fr) 44px; gap: 1rem; min-height: calc(100vh - 105px); min-height: calc(100svh - 105px); padding-block: 1rem; }
  .hero-content { display: flex; flex-direction: column; gap: 1rem; width: 100%; max-width: 32rem; justify-self: center; align-self: center; text-align: left; }
  .hero h1 { overflow-wrap: anywhere; }
  .hero-promise { max-width: 100%; }
  .hero-phrase { display: inline-block; max-width: 100%; white-space: normal; }
  .hero-scroll { position: static; justify-self: center; align-self: center; transform: none; }
  .page-hero, .home-flow .page-hero { display: block; min-height: 0; padding-block: 2rem; }
  .page-hero .hero-content { gap: 2rem; }
  .page-hero h1, .content-page .page-hero h1, .not-found .page-hero h1, html[lang='de'] .page-hero h1 { font-size: 1.875rem; }
  .page-hero .hero-picture { width: 45%; max-width: 160px; margin-inline: auto; }
  .page-hero .hero-intro { font-size: 1.0625rem; }
  .story-section.quiet-section { padding-block: 2rem; }
  .home-flow .quiet-section h2 { font-size: 1.625rem; }
  .home-flow .quiet-section .story-text, .page-heading .story-text, .legal-heading > p:not(.eyebrow):not(.translation-note):not(.legal-date) { font-size: 1.0625rem; }
  .page-heading { padding-block: 2rem 1rem; }
  .content-page h1, .legal-heading h1 { font-size: 1.875rem; }
  .story-diagram { margin-top: 1.5rem; }
  .explainer-labels { gap: .5rem; font-size: .8125rem; }
  .update-labels { gap: 0; }
  .legal-main { padding: 0; }
  .legal-body { padding-bottom: 2rem; }
  .legal-copy h2 { font-size: 1.25rem; }
}
@media print {
  .hero-scroll { display: none; }
  .legal-main, .not-found, .page-heading, .story-section.quiet-section { max-width: none; }
  .legal-contents { display: none; }
}