
/* One text column, measured from the unchanged setup heading.
   Keep frame, grid and artwork geometry independent of these text insets. */
:root{--landing-text-inset:clamp(32px,4vw,64px);--promise-text-inset:67px;--curiosity-text-inset:43px;--footer-text-inset:calc(clamp(28px,4vw,48px) + 1px)}
.hero-copy{margin-inline:var(--landing-text-inset);container-type:inline-size}
.hero-bottom,.intro-statement,.experience-heading,.home-section>.section-topline,.home-section>.split-heading,.home-section>.home-note,.devices-section>.section-topline,.devices-section>.split-heading{padding-inline:var(--landing-text-inset)}
.home-note p{width:100%;max-width:58ch;margin-inline:auto;text-align:center}
.device-affiliate-disclosure{width:calc(100% - 2 * var(--landing-text-inset));max-width:84ch;margin-inline:auto;padding-inline:0;text-align:center}
/* Shift text, not the promise frame, its columns, or its icons. */
.promise-strip article:first-child>h2,.promise-strip article:first-child>p{position:relative;left:calc(var(--landing-text-inset) - var(--promise-text-inset))}
/* The card's existing border and padding remain untouched. */
.curiosity-copy>h2,.curiosity-copy>p{position:relative;left:calc(var(--landing-text-inset) - var(--curiosity-text-inset))}
.curiosity-list p{position:relative;left:calc(var(--landing-text-inset) - var(--curiosity-text-inset))}
/* Footer typography shares the axis without moving its wordmark or icons. */
.v4-footer .v4-footer-location{position:relative;left:calc(var(--landing-text-inset) - var(--footer-text-inset))}
@media(max-width:1100px){:root{--promise-text-inset:35px;--curiosity-text-inset:29px}}
@media(max-width:800px){:root{--landing-text-inset:30px;--promise-text-inset:28px;--curiosity-text-inset:26px}}
@media(max-width:760px){:root{--footer-text-inset:25px}.v4-footer .v4-footer-nav,.v4-footer .v4-footer-copyright{position:relative;left:calc(var(--landing-text-inset) - var(--footer-text-inset))}}
@media(max-width:600px){:root{--landing-text-inset:22px;--promise-text-inset:23px}.promise-strip article:first-child>h2,.promise-strip article:first-child>p{left:0}.hero-copy h1{font-size:min(clamp(48px,12.5vw,73px),13.7cqi)}.setup-copy{padding-inline-end:var(--landing-text-inset)}}
@media(max-width:370px){:root{--curiosity-text-inset:22px}}
/* Keep long heading words inside the same column on the smallest phones. */
@media(max-width:370px){#intro-title,#setup-title{font-size:clamp(34px,11.5vw,43px)}#home-title{font-size:clamp(34px,11.2vw,42px)}}
