/* The Happy Bubble: coming-soon page (editorial branch)
   Everything out of the box, after cresvita-landing.vercel.app: a big headline at the top left, the lede and email signup at the
   bottom left, the book at the right, the fine print along the bottom, all straight on the sky with no panels or bands. */

@font-face {
  font-family: "Sofia Sans Condensed"; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url("../assets/fonts/sofia-sans-condensed-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Brand palette (exact): sky #3C92A6, pale sky #A0CED9, sun coral #F26457, pink #F26B76, peach #F2A099; plus the page
     additions: deep sky blue #1F5A73 for all text, steel blue #327997 for the field, white, deep orange #E85030, brick red #A6231C,
     forest green #2E7D5B. Beyond the list: a dawn blue (#7DB9C7, sky mixed into pale sky) at the top and a light horizon blue at the bottom. */
  --text:        #1F5A73;   /* deep sky blue: all text, focus outlines and the field's focus ring */
  --field-edge:  #327997;   /* steel blue: the email field's outline and placeholder */
  --cta:         #F26457;   /* sun coral: the arrow button; its white arrow is 3.12:1 (non-text AA is 3:1) */
  --cta-hover:   #E85030;   /* deep orange: the arrow button on hover; white arrow 3.74:1 */
  --error:       #A6231C;   /* brick red: error message and outline */
  --success:     #2E7D5B;   /* forest green: the thank-you check; white check 5.0:1 */
  --sky-top:     #7DB9C7;   /* dawn blue, behind the headline (feedback: no beige); 3.48:1 with the text, so only large text sits on it */
  --sky-pale:    #A0CED9;   /* pale sky */
  --sky-horizon: #CFE6EC;   /* AA: a light horizon glow behind the bottom text; small text needs the sky this light behind it */
  --field-glass: rgba(255, 255, 255, 0.85);
  --glass-filter: blur(14px) brightness(1.3) saturate(0.5);
  --white:       #FFFFFF;

  --font: "Sofia Sans Condensed", "Arial Narrow", system-ui, sans-serif;   /* the only typeface */
  --lux: cubic-bezier(0.22, 1, 0.36, 1);   /* a long, unhurried ease-out for every entrance: things arrive and settle, never snap */
  --gutter: clamp(20px, 3.4vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--sky-horizon); overflow-x: hidden; }   /* overscroll shows the sky's bottom color, never white */
body {
  position: relative; margin: 0; min-height: 100vh; min-height: 100dvh; overflow: hidden; overflow: clip;   /* clip, not just hide: the book starts off the right edge, and on phones anything past it would widen the page and zoom it out; the 3D book's tall canvas never lengthens the page */
  display: flex; flex-direction: column;
  font-family: var(--font); font-weight: 500; color: var(--text); -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Sky: a deeper dawn blue at the top into pale sky, then lightening toward a pale horizon at the bottom, where the small text sits with no
   panel behind it. Kept light all the way down: small text needs at least the pale sky's lightness behind it, so the brand's deeper
   teal lives in the book. The layer spans the whole page and scrolls with it. */
.sky {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-pale) 42%, var(--sky-pale) 52%, var(--sky-horizon) 100%);
}
.cloud { position: absolute; left: 0; animation: drift linear infinite; }
.cloud--1 { top: 8vh;  width: 420px; opacity: 0.55; filter: blur(1px); animation-duration: 95s;  animation-delay: -30s; }
.cloud--2 { top: 64vh; width: 640px; opacity: 0.9;                     animation-duration: 70s;  animation-delay: -55s; }
.cloud--3 { top: 80vh; width: 900px; opacity: 0.95;                    animation-duration: 55s;  animation-delay: -12s; }
.cloud--4 { top: 38vh; width: 300px; opacity: 0.5;  filter: blur(2px); animation-duration: 120s; animation-delay: -80s; }
.cloud--5 { top: -9vh; width: 880px; opacity: 0.9;                    animation-duration: 62s;  animation-delay: -18s; }
.cloud--6 { top: 22vh; width: 540px; opacity: 0.7;  filter: blur(1px); animation-duration: 84s;  animation-delay: -62s; }
.cloud--7 { top: 50vh; width: 420px; opacity: 0.6;  filter: blur(1px); animation-duration: 104s; animation-delay: -36s; }

/* Layout (desktop): the headline at the top left, the lede and signup at the bottom left, the book filling the right side from top
   to bottom, and the fine print in a thin row along the very bottom. */
.page {
  position: relative; z-index: 1; flex: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) var(--cover-w); grid-template-rows: auto 1fr auto;
  grid-template-areas: "top book" ". book" "bottom book";
  column-gap: clamp(32px, 6vw, 120px); row-gap: 32px;
  padding: var(--gutter) clamp(72px, 12vw, 260px) 24px var(--gutter);   /* feedback: plenty of sky to the right of the book */
  --cover-w: min(560px, 36vw, max(240px, calc((100vh - 120px) * 0.6)));
}
@supports (height: 100svh) { .page { --cover-w: min(560px, 36vw, max(240px, calc((100svh - 120px) * 0.6))); } }
/* Small desktops and landscape tablets (821-1121px): the book stays bigger (feedback). Its width share grows as the window narrows,
   meeting the regular 36vw at 1122px so there's no jump, and the right margin eases down to give it the room. */
@media (min-width: 821px) and (max-width: 1121px) {
  .page {
    --cover-w: min(560px, calc(36vw + (1122px - 100vw) * 0.3), max(240px, calc((100vh - 110px) * 0.62)));
    padding-right: max(48px, calc(12vw - (1122px - 100vw) * 0.2));
  }
  @supports (height: 100svh) { .page { --cover-w: min(560px, calc(36vw + (1122px - 100vw) * 0.3), max(240px, calc((100svh - 110px) * 0.62))); } }
}

.top { grid-area: top; }
.eyebrow { margin-bottom: 18px; font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase; }
.headline {
  margin: 0; max-width: 19ch; font-weight: 800; line-height: 0.86; text-transform: uppercase; text-wrap: balance;
  font-size: clamp(48px, min(7.4vw, 12.5vh), 136px);   /* big, Cresvita-style: three lines at the top left */
}

/* Short laptop screens (up to 800px tall): a slightly smaller headline so the left column still fits on one screen */
@media (min-width: 821px) and (max-height: 800px) {
  .headline { font-size: clamp(48px, min(7.4vw, 10.5vh), 136px); }
  @supports (height: 100svh) { .headline { font-size: clamp(48px, min(7.4vw, 10.5svh), 136px); } }
}

.bottom { grid-area: bottom; align-self: end; display: flex; flex-direction: column; gap: 24px; }
.lede { max-width: 460px; font-size: 24px; line-height: 1.28; text-wrap: pretty; }   /* feedback: as wide as the field, lines running its full width; 24px is large text: 3:1 */
.lede__lead, .lede__line { display: block; text-wrap: balance; }   /* each sentence on its own line while it fits, split evenly when it doesn't */   /* the first sentence gets its own line, and the rest is balanced, so no word is stranded */
.lede__lead { margin-bottom: 0.8em; }   /* feedback: space after the first sentence so the two read separately (about 3x the gap between lines) */

/* Signup: a white pill with the arrow button inside */
.signup { position: relative; width: min(460px, 100%); }
.signup__row {
  display: flex; align-items: center; height: 64px; padding: 6px 6px 6px 24px;
  border-radius: 32px; border: 1px solid var(--field-edge);
  background: var(--field-glass); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
  transition: border-color 0.4s var(--lux);
}
.signup__row:focus-within { border-color: var(--text); outline: 2px solid var(--text); outline-offset: -2px; }   /* one 2px ring; outline survives forced-colors mode */
.signup.is-invalid .signup__row { border-color: var(--error); outline: 2px solid var(--error); outline-offset: -2px; }
.signup__input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; outline: none;
  font: 500 20px/1 var(--font); color: var(--text);
}
.signup__input::placeholder { color: var(--field-edge); opacity: 1; }
.signup__button {
  flex: none; width: 50px; height: 50px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer; color: var(--white); background: var(--cta);
  transition: background-color 0.5s var(--lux);
}
.signup__button svg { width: 22px; height: 22px; transition: transform 0.7s var(--lux); }
.signup__button:hover { background: var(--cta-hover); }
.signup__button:hover svg { animation: arrow-nudge 1.1s cubic-bezier(0.37, 0, 0.25, 1) both; }   /* feedback: glides forward, then springs softly back home */
.signup__button:active svg { transform: translateX(5px); }
.signup__button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.signup__message { margin: 10px 0 0 24px; font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--error); }   /* on the horizon glow */
.signup__message:empty { margin: 0; }   /* no space until there's a message; stays in the page so screen readers announce it */
.signup__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.signup__privacy { margin: 10px 0 0; font-size: 14px; line-height: 1.35; }   /* the privacy notice under the field, on its left edge (placeholder styling) */
.signup__privacy a { color: inherit; text-underline-offset: 2px; }

/* Thank-you state: the form gives way to a check and a line of thanks */
.signup__done {   /* the check beside the two lines, so the thank-you takes about the same height as the form */
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 16px; row-gap: 6px; max-width: 460px; outline: none;
}
.signup__done .signup__check { grid-row: span 2; align-self: start; }
.signup__done[hidden] { display: none; }
.signup__check {
  width: 48px; height: 48px; border-radius: 50%; background: var(--success) no-repeat center / 24px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23FFFFFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  animation: pop 1s var(--lux) both;
}
.signup__thanks { font-size: 34px; font-weight: 800; line-height: 1; text-transform: uppercase; }   /* large text: 3:1 */
.signup__note { max-width: 460px; font-size: 19px; line-height: 1.3; }   /* the line under the thank-you */
.signup__button:disabled { cursor: progress; opacity: 0.75; }   /* while the signup is sending */

/* The book: turned a little in 3D and tilted a touch clockwise, with a paperback edge of pages on the right, centered in the right
   column from top to bottom */
.book { position: relative; grid-area: book; align-self: center; width: var(--cover-w); --depth: calc(var(--cover-w) * 0.15); }
.book__flat { perspective: 1600px; }
.book__3d { position: relative; transform-style: preserve-3d; transform: rotate(2deg) rotateY(-26deg) rotateX(3deg); }
.book__cover {
  width: 100%; aspect-ratio: 5 / 8; object-fit: cover; border-radius: 5px;   /* feedback: the same soft corner on all four */
  transform: translateZ(calc(var(--depth) / 2));
  box-shadow: 0 26px 44px -18px rgba(20, 50, 60, 0.5);   /* AA: kept tight under the book, so it never darkens the sky behind nearby text */
}
.book__pages {   /* the page edges: a face at the cover's right edge, turned to face right */
  position: absolute; top: 3px; bottom: 3px; left: calc(100% - var(--depth) / 2); width: var(--depth);
  transform: rotateY(90deg); border-radius: 0 5px 5px 0;   /* feedback: the back corners round like the cover (this side faces away after the turn) */
  background: #FFFFFF repeating-linear-gradient(to right, transparent 0 1.5px, rgba(20, 48, 58, 0.16) 1.5px 2px);
}

/* The book in 3D (js/book/, as on the full site's home hero): drawn on a canvas the screen's full width (its left and width are
   set from the book's place) and the book's height plus room above and below (--span), centered on it. With JS the flat book is
   never seen; it shows without JS (css/no-js.css) or when WebGL is missing or fails, and stays in the page for its image and alt
   text. Only a press on the drawn book grabs it; the canvas takes no pointer events, so the signup beside it stays clickable. */
.book__canvas {
  position: absolute; top: calc((1 - var(--span, 1.9)) * 50%); height: calc(var(--span, 1.9) * 100%); max-width: none;
  opacity: 0; pointer-events: none; transition: opacity 0.3s var(--lux);
}
.book__flat { transition: opacity 0.9s var(--lux); }
.book:not(.is-failed):not(.is-waiting) .book__flat { opacity: 0; }
.book.is-live { touch-action: pan-y; }
.book.is-live .book__canvas { opacity: 1; }
.book.is-live .book__flat { pointer-events: none; user-select: none; }
.book.is-failed .book__canvas { display: none; }
/* Slow machines: the flat book shows after 3 seconds (is-waiting); when the drawn book is ready after all it rises 24px into
   the flat book's place as the flat book fades (is-rising). With reduced motion, a plain cross-fade. */
.book.is-rising .book__canvas { translate: 0 24px; transition: opacity 0.9s var(--lux), translate 1.4s var(--lux); }
.book.is-rising.is-live .book__canvas { translate: 0 0; }
.book.is-over { cursor: grab; }
.book.is-grabbing { cursor: grabbing; user-select: none; }

/* Cookie consent (js/consent.js): a frosted bar fixed to the bottom until answered, and "Cookie settings" in the footer.
   Shown only once a GA4 measurement ID is set, on the production site. Placeholder styling. */
.consent {
  position: fixed; inset: auto 0 0; z-index: 10;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
  padding: 8px 60px calc(8px + env(safe-area-inset-bottom)) var(--gutter);   /* as short as it goes: 8px above and below the buttons */
  background: var(--field-glass); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
  box-shadow: 0 -8px 30px -12px rgba(20, 50, 60, 0.35);
  font-size: 15px; line-height: 1.3;
}
.consent[hidden] { display: none; }
.consent__text { max-width: 46em; }
.consent__text a { color: inherit; text-underline-offset: 2px; }
.consent__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.consent__button {
  height: 36px; padding: 0 16px; border: 1px solid var(--text); border-radius: 18px; cursor: pointer;   /* 36px: past the 24px minimum target */
  font: 700 15px/1 var(--font); color: var(--text); background: transparent;
}
.consent__button--primary { color: var(--white); background: var(--text); }   /* white on deep sky blue, well past 4.5:1 */
.consent__button:focus-visible, .consent__close:focus-visible, .foot__cookies:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.consent__close {
  position: absolute; top: 0; bottom: env(safe-area-inset-bottom); right: 12px; width: 36px; height: 36px; margin-block: auto;   /* centered in the bar's height */
  display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: var(--text); background: none;
}
.consent__close svg { width: 20px; height: 20px; }
.foot__cookies { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; text-align: left; text-decoration: underline; text-underline-offset: 2px; }
.foot__privacy { display: none; color: inherit; text-underline-offset: 2px; }   /* phones only: there the privacy link leaves the signup note for the footer */
.foot__links { display: flex; flex-wrap: wrap; column-gap: 12px; row-gap: 4px; }   /* Privacy policy and Cookie settings, kept together */

/* Privacy policy page (privacy.html, served at /privacy): one readable column, centered on the page, straight on the sky's
   horizon colour, no intro motion. Placeholder styling until the page is designed. */
.legal { position: relative; z-index: 1; flex: 1; width: min(760px, 100%); margin-inline: auto; padding: var(--gutter) var(--gutter) 48px; font-size: 19px; line-height: 1.5; }
.legal p + p { margin-top: 0.8em; }
.legal a { color: inherit; text-underline-offset: 2px; }
.legal__home { text-decoration: none; }
.legal__title { margin: 0 0 12px; font-size: clamp(40px, 7vw, 72px); font-weight: 800; line-height: 0.95; text-transform: uppercase; text-wrap: balance; }
.legal__meta { margin-bottom: 32px; font-weight: 700; }
.legal h2 { margin: 1.8em 0 0.4em; font-size: 24px; font-weight: 800; line-height: 1.2; text-transform: uppercase; }
.legal-page .eyebrow, .legal-page .foot { animation: none; }

/* Fine print: one quiet line at the bottom left, straight on the horizon glow, no band (clear of the book and its shadow) */
.foot {
  position: relative; z-index: 1; display: flex; flex-wrap: wrap; column-gap: 24px; row-gap: 4px;
  padding: 0 var(--gutter) calc(20px + env(safe-area-inset-bottom));
  font-size: 14px; line-height: 1.35;
}
.foot strong { font-weight: 800; }

/* Intro: soft and elegant. The 3D book flies in on its own (js/book/); the flat fallback glides in from the right edge with a slight
   tilt that eases away, then floats. As it comes to rest, the wordmark and headline rise into place at the top, then the lede and field at the bottom, then the fine
   print, one after another. */
.book__flat { animation: book-in-right 2.15s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both, float 9s ease-in-out 2.35s infinite; }   /* the flat fallback; the 3D book flies in on its own */
.book__3d { animation: book-settle 2.15s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both; }
.eyebrow, .headline, .lede, .signup__row, .foot { animation: rise-in 1.4s var(--lux) both; --rise: 0.75s; }
.eyebrow     { animation-delay: var(--rise); }
.headline    { animation-delay: calc(var(--rise) + 0.12s); }
.lede        { animation-delay: calc(var(--rise) + 0.36s); }
.signup__row { animation-delay: calc(var(--rise) + 0.48s); }
.signup__privacy { animation: fade-in 1.4s var(--lux) calc(var(--rise) + 0.6s) both; --rise: 0.75s; }
.foot        { animation-name: fade-in; animation-delay: calc(var(--rise) + 0.7s); }

@keyframes arrow-nudge {
  0% { transform: none; } 32% { transform: translateX(6px); } 58% { transform: translateX(-1.5px); } 78% { transform: translateX(0.75px); } 100% { transform: none; }
}
@keyframes float { 0%, 100% { transform: none; } 50% { transform: translateY(-6px); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes book-in-right { from { transform: translateX(100vw); } to { transform: none; } }
@keyframes book-settle {
  from { transform: rotate(9deg) rotateY(-26deg) rotateX(3deg); }
  to   { transform: rotate(2deg) rotateY(-26deg) rotateX(3deg); }
}
@keyframes pop { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes drift { from { transform: translateX(-100%); } to { transform: translateX(100vw); } }

/* Phones and tablets in portrait: one column. The headline at the top, the book in the middle (in the sky's deepest band), the lede
   and signup below it, and the fine print stacked at the bottom with the crisis line first. */
@media (max-width: 820px) {
  .page {
    grid-template-columns: 1fr; grid-template-rows: auto auto auto;
    grid-template-areas: "top" "book" "bottom";
    row-gap: 32px; padding: 24px 24px 28px;
    --phone-text-room: 566px;   /* the height the headline, lede, field, note, crisis line and gaps need; the book gets the rest (the copyright and links under the crisis line may run below the first screen) */
    --cover-w: clamp(150px, min(62vw, calc((100vh - var(--phone-text-room)) * 0.62)), 360px);
  }
  @supports (height: 100svh) { .page { --cover-w: clamp(150px, min(62vw, calc((100svh - var(--phone-text-room)) * 0.62)), 360px); } }
  .book { justify-self: center; margin-bottom: 20px; }   /* AA: room below the book's shadow before the lede */
  .eyebrow { font-size: 20px; margin-bottom: 12px; }   /* AA: bold at 19px or more counts as large text (3:1), which the dawn blue behind it needs */
  .headline { max-width: none; font-size: clamp(28px, min(12vw, 4.3vh), 72px); }   /* feedback: scales with the screen's height too, so phones fit everything on one screen */
  @supports (height: 100svh) { .headline { font-size: clamp(28px, min(12vw, 4.3svh), 72px); } }
  .lede { font-size: 19px; }   /* small text: on the horizon glow */
  .bottom { gap: 20px; }
  .signup__row { height: 60px; padding: 5px 5px 5px 20px; }
  .signup__input { font-size: 18px; }
  .signup__button { width: 48px; height: 48px; }
  .signup__message { margin-left: 20px; }
  .signup__privacy-link { display: none; }   /* the privacy link moves to the footer, beside Cookie settings */
  .signup__thanks { font-size: 26px; }
  .signup__note { font-size: 17px; }
  .foot { align-items: center; column-gap: 12px; row-gap: 4px; padding: 0 24px calc(20px + env(safe-area-inset-bottom)); }
  .foot__crisis { order: -1; flex-basis: 100%; }   /* the crisis line first, on its own; then the copyright, then Privacy policy and Cookie settings beside it on one line, the two links moving together to the next line where the screen is too narrow for all three */
  .foot__privacy, .foot__cookies { display: inline-flex; align-items: center; min-height: 24px; }   /* 24px tap targets (WCAG 2.5.8) */
  .eyebrow, .headline, .lede, .signup__row, .signup__privacy { --rise: 0.35s; }   /* on phones the text arrives with the book */
  .sky { background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-pale) 32%, var(--sky-pale) 40%, var(--sky-horizon) 100%); }   /* AA: the pale band sits behind the book, so the sky is already lightening behind the lede */
}

/* Short phones (iPhone SE and the like): tighter spacing and a smaller book; the text keeps its size and the page may scroll */
@media (max-width: 820px) and (max-height: 700px) {
  .page { row-gap: 17px; --cover-w: clamp(124px, min(62vw, calc((100vh - var(--phone-text-room)) * 0.62)), 360px); }
  @supports (height: 100svh) { .page { --cover-w: clamp(124px, min(62vw, calc((100svh - var(--phone-text-room)) * 0.62)), 360px); } }
  .bottom { gap: 12px; }
  .sky { background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-pale) 26%, var(--sky-pale) 32%, var(--sky-horizon) 100%); }   /* AA: the lede sits higher here, so the sky starts lightening sooner */
}

/* The smallest phones: the book gives up a little more there */
@media (max-width: 820px) and (max-height: 650px) {
  .page { --cover-w: 98px; }
}

/* Phones: the headline on two lines, DISCOVER THE METHOD / FOR EVERYDAY HAPPINESS., as large as the width allows. Its measure,
   10.05em, sits between the second line's width (9.89em) and the first line with FOR (10.21em), so it always breaks after METHOD;
   the size makes that measure the column's width. The page may scroll, so the size answers to the width alone. */
@media (max-width: 599px) {
  .headline { max-width: 10.05em; text-wrap: wrap; font-size: calc((100vw - 48px) / 10.05); }
}

/* Phones: a line break after 988 (feedback) */
@media (max-width: 599px) { .foot__after { display: block; } }

/* Tablets in portrait: room for a bigger headline */
@media (min-width: 600px) and (max-width: 820px) {
  .headline { font-size: clamp(36px, min(9vw, 6vh), 72px); }
  @supports (height: 100svh) { .headline { font-size: clamp(36px, min(9vw, 6svh), 72px); } }
}

/* Solid field for people who ask for less transparency, or where glass can't blur */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root { --field-glass: rgba(255, 255, 255, 0.95); } }
@media (prefers-reduced-transparency: reduce) { :root { --field-glass: rgb(255, 255, 255); --glass-filter: none; } }

@media (prefers-reduced-motion: reduce) {
  .cloud, .signup__button svg, .signup__check, .eyebrow, .headline, .lede, .signup__row, .signup__privacy, .foot, .book__flat, .book__3d { animation: none; }
  .book.is-rising .book__canvas { translate: none; }
  .signup__button, .signup__button svg, .signup__row { transition: none; }
}