/* Rove Home The Greens, teaser page.
   Desktop = the 1920 x 1080 artboard scaled to the screen: 1 design px = var(--u).
   Phone, tablet portrait and landscape phones = their vertical artboard (1080 x 1920), 1 design px = var(--q). */

/* Stand-ins for their fonts until licensed web files exist: Anybody 150/900 (OFL) for Druk Wide Super,
   D-DIN (OFL, Datto) for DIN Arabic; their DIN Medium = D-DIN with a hairline of extra weight (.sub, .launch) */
@font-face { font-family: "Display"; src: url("/assets/fonts/anybody-150-900.woff2") format("woff2"); font-weight: 900; font-stretch: 150%; font-display: swap; }
@font-face { font-family: "Din"; src: url("/assets/fonts/d-din-400.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Din"; src: url("/assets/fonts/d-din-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --green: #9fd6c0;
  --cream: #fbf7ec;
  --coral: #f4846e;
  --petal: #ef9780;
  --blue: #2750d2;
  --ink: #000;
  --muted: #606060;
  --white: #fff;
  --error: #b3261e;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --u: min(calc(100vw / 1920), calc(100svh / 1080));
  --sx: max(0px, calc((100vw - 1920 * var(--u)) / 4));
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: "Din", "Helvetica Neue", Arial, sans-serif; font-weight: 500; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }

/* ---------- Desktop: the artboard ---------- */
.page { min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; }

.hero { position: relative; z-index: 2; flex: 725 0 calc(725 * var(--u)); background: var(--green); display: flex; align-items: center; clip-path: inset(0 0 -100vh 0); }
.hero-copy { position: relative; width: calc(1200 * var(--u)); height: calc(725 * var(--u)); margin-left: var(--sx); flex: none; z-index: 2; }

.hero-art { position: absolute; right: calc(-46 * var(--u)); top: 50%; width: calc(802 * var(--u)); height: calc(725 * var(--u)); transform: translateY(-50%); z-index: 1; }
.petals { position: absolute; left: 0; top: calc(-132 * var(--u)); width: calc(802 * var(--u)); height: auto; }
/* the dancing guy (their 22/10 loop, mirrored as in their film): 0.25 of the loop, top-left 1509,112 on the artboard (fitted on their v2 film, every frame) */
.guy { position: absolute; left: calc(345 * var(--u) - var(--sx)); top: calc(112 * var(--u)); width: calc(333.5 * var(--u)); height: auto; aspect-ratio: 560 / 904; object-fit: contain; pointer-events: none; }
.petals-v { display: none; }

.logo { position: absolute; left: calc(110 * var(--u)); top: calc(95 * var(--u)); width: calc(330 * var(--u)); }
.logo img { width: 100%; height: auto; }

.frame { position: absolute; left: calc(112 * var(--u)); top: calc(211 * var(--u)); width: calc(996 * var(--u)); height: calc(244 * var(--u)); border: max(1.5px, calc(2 * var(--u))) solid var(--ink); }
.frame .h { position: absolute; width: calc(17 * var(--u)); height: calc(17 * var(--u)); background: var(--ink); transform: translate(-50%, -50%); }
.frame .h1 { left: 0; top: 0; } .frame .h2 { left: 53.77%; top: 0; } .frame .h3 { left: 100%; top: 0; }
.frame .h4 { left: 0; top: 100%; } .frame .h5 { left: 53.77%; top: 100%; } .frame .h6 { left: 100%; top: 100%; }

.headline { position: absolute; left: calc(28 * var(--u)); top: calc(51 * var(--u)); margin: 0; font-family: "Display", "Arial Black", sans-serif; font-weight: 900; font-stretch: 150%; text-transform: uppercase; font-size: calc(76 * var(--u)); line-height: calc(81.5 * var(--u)); letter-spacing: -0.045em; word-spacing: -0.14em; white-space: nowrap; }
.headline .line { display: block; }
/* Animated headline (their film): "Select all" in the frame, selected, cleared, the line typed, SCRIPT. flips */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.type { display: block; }
.select-all { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(calc(-50% + 6 * var(--u))); text-align: center; font-family: "Display", "Arial Black", sans-serif; font-weight: 900; font-stretch: 150%; text-transform: uppercase; font-size: calc(110 * var(--u)); line-height: 1; letter-spacing: -0.045em; word-spacing: -0.1em; padding-left: calc(18 * var(--u)); white-space: nowrap; visibility: hidden; pointer-events: none; }
.flip { display: inline-block; transform-origin: 50% 50%; }
.anim .select-all { visibility: visible; }
.anim .select-all.off { visibility: hidden; }
.anim .select-all.dim { opacity: 0.5; }
.anim .type .ch { visibility: hidden; }
.anim .type .ch.on { visibility: visible; }
/* SCRIPT. flip read on their film, one keyframe per film frame (24 fps, 16 frames): flips upside
   down in one frame, stays mirrored about 0.45 s, squashes flat and comes back in 3 frames */
.anim .flip.go { animation: flip 667ms linear both; }
@keyframes flip {
  0% { transform: scaleY(1); } 6.25% { transform: scaleY(-0.35); } 12.5% { transform: scaleY(-0.92); }
  18.75% { transform: scaleY(-1); } 68.75% { transform: scaleY(-1); } 75% { transform: scaleY(-0.95); }
  81.25% { transform: scaleY(-0.45); } 87.5% { transform: scaleY(-0.12); } 93.75% { transform: scaleY(0.85); } 100% { transform: scaleY(1); }
}

/* 3D icons loop at the frame's bottom-right corner: absolute position and scale (0.4975) read on their film, which shares the .ai coordinates (petals identical) */
.icons { position: absolute; left: calc(960 * var(--u)); top: calc(141 * var(--u)); width: calc(427 * var(--u)); height: auto; aspect-ratio: 720 / 692; object-fit: contain; pointer-events: none; z-index: -1; }   /* behind the frame's line and corner squares, as in their film */

/* Brush E placed as in the .ai: slot width + image box per line, in em so the phone keeps the same placement */
.be { position: relative; display: inline-block; width: 0.726em; color: transparent; text-align: left; }
.be-2 { width: 1.056em; }
.be::before { content: ""; position: absolute; left: -0.004em; top: -0.092em; width: 1.040em; height: 0.922em; background: url("/assets/brush-e.webp") center / 100% 100% no-repeat; }
.be-2::before { left: -0.020em; top: -0.098em; }
/* line 1 set tighter, with the brush E clear of CAN, as in the .ai (Anybody stand-in, 21/10) */
.headline .line:first-child { letter-spacing: -0.068em; word-spacing: -0.04em; }
.headline .line:first-child .be { width: 0.915em; }

.sub { position: absolute; left: calc(114 * var(--u)); top: calc(506 * var(--u)); width: calc(508 * var(--u)); margin: 0; }
.launch { position: absolute; left: calc(116 * var(--u)); top: calc(637 * var(--u)); width: calc(220 * var(--u)); margin: 0; }
/* their outlined DIN Arabic (vector, fill = text colour); the real words stay in the page for search and screen readers */
.sub svg, .launch svg { display: block; width: 100%; height: auto; fill: currentColor; }
/* field labels and button text: their DIN Arabic from the .ai outlines (cap height as in the file) */
.lbl { display: block; height: 0.72em; width: auto; fill: currentColor; }
.cta { display: flex; align-items: center; justify-content: center; }
.cta-txt { display: block; height: 0.736em; width: auto; fill: currentColor; }
.txt-m { display: none !important; }

.register { position: relative; z-index: 1; flex: 355 0 calc(355 * var(--u)); background: var(--cream); display: flex; align-items: center; }
.form { position: relative; width: 100%; height: calc(355 * var(--u)); padding: 0 calc(var(--sx) + 118 * var(--u)); }
.fields { position: absolute; left: 50%; width: calc(1250 * var(--u)); top: calc(56 * var(--u)); transform: translateX(calc(-50% - 4 * var(--u))); display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(40 * var(--u)); }

.field { position: relative; height: max(44px, calc(77 * var(--u))); }
.field input { width: 100%; height: 100%; margin: 0; padding: max(12px, calc(26 * var(--u))) max(16px, calc(37 * var(--u))) 0; background: var(--white); border: max(1.5px, calc(2 * var(--u))) solid var(--ink); border-radius: max(10px, calc(20 * var(--u))); box-shadow: calc(6 * var(--u)) calc(9 * var(--u)) 0 0 var(--coral); font-size: max(15px, calc(19 * var(--u))); outline: none; appearance: none; -webkit-appearance: none; transition: box-shadow 150ms var(--ease); }
.field input:focus { outline: none; box-shadow: calc(6 * var(--u)) calc(9 * var(--u)) 0 0 var(--blue); }
.field label { position: absolute; left: max(16px, calc(37 * var(--u))); top: 50%; transform: translateY(-50%); color: var(--muted); font-size: max(13px, calc(16 * var(--u))); letter-spacing: 0.06em; text-transform: uppercase; pointer-events: none; transform-origin: left center; transition: transform 200ms var(--ease), top 200ms var(--ease); }
.field input:focus + label, .field input:not(:placeholder-shown) + label { top: max(11px, calc(22 * var(--u))); transform: translateY(-50%) scale(0.72); }
.field.invalid input { box-shadow: calc(6 * var(--u)) calc(9 * var(--u)) 0 0 var(--error); }
.err { position: absolute; left: max(16px, calc(37 * var(--u))); top: calc(100% + max(8px, calc(14 * var(--u)))); margin: 0; color: var(--error); font-size: max(12px, calc(15 * var(--u))); line-height: 1.2; }


.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cta { position: absolute; left: 50%; top: calc(201 * var(--u)); width: calc(861 * var(--u)); height: max(48px, calc(77 * var(--u))); transform: translateX(-50%); margin: 0; padding: 0; background: var(--blue); color: var(--white); border: max(1.5px, calc(2 * var(--u))) solid var(--ink); border-radius: 999px; box-shadow: calc(3 * var(--u)) calc(9 * var(--u)) 0 0 var(--ink); font-weight: 700; font-size: max(18px, calc(38 * var(--u))); letter-spacing: 0.02em; text-transform: uppercase; cursor: pointer; transition: transform 150ms var(--ease), box-shadow 150ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .cta:hover { transform: translate(-50%, calc(4 * var(--u))); box-shadow: calc(2 * var(--u)) calc(5 * var(--u)) 0 0 var(--ink); } }
.cta:active { transform: translate(-50%, calc(8 * var(--u))); box-shadow: 0 calc(1 * var(--u)) 0 0 var(--ink); }
.cta:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.cta[aria-busy="true"] { cursor: progress; opacity: 0.85; }

.consent { position: absolute; left: 0; right: 0; top: calc(300 * var(--u)); margin: 0; text-align: center; color: var(--muted); font-size: max(12px, calc(15 * var(--u))); }
.consent a:focus-visible, .cookies a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.form-error { position: absolute; left: 0; right: 0; top: calc(165 * var(--u)); margin: 0; text-align: center; color: var(--error); font-size: max(13px, calc(17 * var(--u))); }
.form-error:empty { display: none; }

.thanks { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 24px; outline: none; animation: rise 500ms var(--ease) both; }
.thanks-title { margin: 0; font-family: "Display", "Arial Black", sans-serif; font-weight: 900; font-stretch: 150%; text-transform: uppercase; font-size: max(26px, calc(56 * var(--u))); }
.thanks-text { margin: calc(18 * var(--u)) 0 0; max-width: 34em; font-size: max(16px, calc(26 * var(--u))); line-height: 1.35; }

/* Arrival: one staged entrance, fast (paid traffic) */
.js:not(.ready) .logo, .js:not(.ready) .frame, .js:not(.ready) .sub, .js:not(.ready) .launch, .js:not(.ready) .guy { opacity: 0; }
/* Landing straight from the film: the page is already the film's last frame, no entrance */
.from-film .logo, .from-film .frame, .from-film .sub, .from-film .launch, .from-film .guy { animation: none !important; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.ready .logo { animation: fade 450ms var(--ease) both; }
.ready .frame { animation: rise 450ms var(--ease) 60ms both; }
.ready .sub, .ready .launch { animation: rise 450ms var(--ease) 120ms both; }
.ready .guy { animation: rise 600ms var(--ease) 120ms both; }

/* Intro film */
.turning, .turning body { overflow: hidden; }
/* Page turn (script): strips of the page in 3D over the film's last frame without the book */
.intro-plate { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; visibility: hidden; }
.intro.plate .intro-plate { visibility: visible; }
.turn { position: fixed; inset: 0; z-index: 60; perspective-origin: 50% 50%; pointer-events: none; overflow: hidden; }
.turn-strip { position: absolute; left: 0; top: 0; overflow: hidden; transform-origin: 0 0; backface-visibility: hidden; will-change: transform; }
.turn-copy { position: absolute; top: 0; }
.turn-shade { position: absolute; inset: 0; background: #000; opacity: 0; }
.turn[data-hl^="0"] .select-all { visibility: hidden; }
.turn[data-hl$="0"] .frame { border-color: transparent; }
.turn[data-hl$="0"] .frame .h { visibility: hidden; }
.turn-shadow { position: absolute; left: 0; top: 0; width: 100%; transform-origin: 0 0; background: rgba(70, 50, 30, 0.2); filter: blur(36px); will-change: transform, opacity; }
.intro { position: fixed; inset: 0; z-index: 50; background: #fdf4e7; display: flex; align-items: center; justify-content: center; transition: opacity 220ms linear; }
.intro.out { opacity: 0; pointer-events: none; }
html.intro-pending body::before { content: ""; position: fixed; inset: 0; z-index: 49; background: #fdf4e7; }
@media (max-aspect-ratio: 5/4) { html.intro-pending body::before { background: #f6eee2; } }
.intro video { width: 100%; height: 100%; object-fit: cover; }
/* Portrait screens: the vertical cut of their film (9:16, cream extended), shown whole on the same cream */
@media (max-aspect-ratio: 5/4) {
  .intro { background: #f6eee2; }   /* their vertical film's cream as decoded: no visible edge around the video */
  .intro video, .intro-plate { position: absolute; left: 50%; top: 50%; width: min(100vw, calc(100vh * 1080 / 1920)); height: auto; aspect-ratio: 1080 / 1920; object-fit: fill; transform: translate(-50%, -50%);
    /* edges fade into the page cream: the video's own cream (compressed) never shows as a box */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent); mask-composite: intersect; }
}
/* Intro buttons in their style: white pill, black outline, coral offset shadow, DIN Bold capitals (their fields) */
.intro-btn { position: absolute; bottom: calc(max(20px, 40 * var(--u)) + env(safe-area-inset-bottom)); z-index: 2; padding: 0 max(18px, 30 * var(--u)); height: max(40px, 58 * var(--u)); background: var(--white); color: var(--ink); border: max(1.5px, 2 * var(--u)) solid var(--ink); border-radius: 999px; box-shadow: max(4px, 6 * var(--u)) max(6px, 9 * var(--u)) 0 0 var(--coral); font-family: "Din", "Helvetica Neue", Arial, sans-serif; font-weight: 700; font-size: max(13px, 19 * var(--u)); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: transform 150ms var(--ease), box-shadow 150ms var(--ease); }
.intro-skip { right: max(20px, 48 * var(--u)); }
.intro-sound { left: max(20px, 48 * var(--u)); }
.intro-sound[aria-pressed="true"] { background: var(--blue); color: var(--white); }
@media (hover: hover) and (pointer: fine) { .intro-btn:hover { transform: translate(2px, 3px); box-shadow: 2px 3px 0 0 var(--coral); } }
.intro-btn:active { transform: translate(4px, 6px); box-shadow: 0 0 0 0 var(--coral); }
.intro-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.turning .intro-btn, .intro.plate .intro-btn { visibility: hidden; }

/* Cookie choice */
.cookies { position: fixed; right: max(16px, calc(var(--sx) + 118 * var(--u))); bottom: max(16px, 24 * var(--u)); z-index: 40; width: min(max(340px, 390 * var(--u)), calc(100vw - 32px)); padding: max(14px, 22 * var(--u)) max(16px, 24 * var(--u)); background: var(--white); border: max(1.5px, 2 * var(--u)) solid var(--ink); border-radius: max(14px, 20 * var(--u)); box-shadow: max(4px, 6 * var(--u)) max(6px, 9 * var(--u)) 0 0 var(--coral); font-size: max(14px, 17 * var(--u)); line-height: 1.4; animation: rise 300ms var(--ease) both; }   /* same border, rounding and shadow as the fields */
.cookies p { margin: 0 0 max(12px, 16 * var(--u)); }
/* laptops: no room at the bottom right, so the card covers the button (as on phones), button width, one line */
.cookies.over { display: flex; align-items: center; gap: max(16px, 24 * var(--u)); right: auto; bottom: auto; }
.cookies.over p { flex: 1; margin: 0; }
.cookies.over .cookies-actions { flex: none; width: 46%; }
.cookies-actions { display: flex; gap: max(10px, 14 * var(--u)); }
.cookies button { flex: 1; height: max(38px, 52 * var(--u)); padding: 0 12px; background: var(--white); border: max(1.5px, 2 * var(--u)) solid var(--ink); border-radius: 999px; font-weight: 700; font-size: max(13px, 16 * var(--u)); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
.cookies .accept { background: var(--ink); color: var(--white); }
@media (hover: hover) and (pointer: fine) { .cookies button:not(.accept):hover { background: var(--green); } .cookies .accept:hover { background: var(--blue); border-color: var(--blue); } }
.cookies button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- Phone + tablet portrait + landscape phones ---------- */
/* THEIR vertical design (`Holding Page Updated - Vertical.ai` + `Landing_Page_Final_Vertical_v2.mp4`):
   the 1080 x 1920 artboard scaled to the screen, 1 design px = var(--q), canvas centred (side bands on tablets).
   Logo, petals, frame + headline (their film's frame, our desktop frame x 0.7), sub-line, launch date, 3D icon,
   green ends at 1214; cream band: the guy on the left, fields + button in the right column (589 to 983).
   Taller screens than 9:16: the frame-to-date block stays centred in the green band, the logo stays on top.
   Touch sizes win over the artboard where it is smaller (fields 44 px, button 46 px, column 150 px): the cream band grows. */
@media (max-aspect-ratio: 5/4), (max-height: 500px) {
  :root { --q: min(calc(100vw / 1080), calc(100svh / 1920)); --sx: calc((100vw - 1080 * var(--q)) / 2);
    --cw: max(calc(394 * var(--q)), min(150px, calc(520 * var(--q)))); }   /* form column: theirs, at least 150 px, never over the guy */
  /* the green band takes what the cream band leaves of the screen, never under 1070 design px
     (touch sizes make the cream band taller than drawn; date and icon keep their margin) */
  .page { min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: minmax(calc(1070 * var(--q)), 1fr) auto; overflow: visible; overflow-x: clip; }
  .hero { position: relative; display: block; min-height: 0; clip-path: inset(0 0 -100vh 0); }
  .hero-copy { position: absolute; inset: 0; width: auto; height: auto; margin: 0; }
  /* logo pinned to the top (design 132 to 606, 129 to 208) */
  .logo { left: calc(var(--sx) + 122.9 * var(--q)); top: calc(120.5 * var(--q)); width: calc(497 * var(--q)); }
  /* the rest is placed from the band's middle (design 607) so extra height splits above and below */
  .frame { left: calc(var(--sx) + 131.15 * var(--q)); top: calc(50% + (405.85 - 607) * var(--q)); width: calc(697.2 * var(--q)); height: calc(170.8 * var(--q)); border-width: max(1px, calc(1.4 * var(--q))); }
  .frame .h { width: max(5px, calc(11.9 * var(--q))); height: max(5px, calc(11.9 * var(--q))); }
  .frame .h2, .frame .h5 { left: 50%; }   /* their vertical film draws the middle handles at the centre */
  .headline { left: calc(19.6 * var(--q)); top: calc(35.7 * var(--q)); font-size: calc(53.2 * var(--q)); line-height: calc(57.05 * var(--q)); }
  .select-all { font-size: calc(77 * var(--q)); padding-left: calc(12.6 * var(--q)); transform: translateY(calc(-50% + 4.2 * var(--q))); }
  /* 3D icon: same size as on the 1920 artboard (arch 200 px wide in both films), at its place in the vertical film */
  .icons { left: calc(478.85 * var(--q)); top: calc(253.15 * var(--q)); width: calc(427 * var(--q)); }
  .sub { left: calc(var(--sx) + 131.7 * var(--q)); top: calc(50% + (700.3 - 607) * var(--q)); width: calc(404.6 * var(--q)); }
  .launch { left: calc(var(--sx) + 134.5 * var(--q)); top: calc(50% + (1003.5 - 607) * var(--q)); width: calc(239.8 * var(--q)); }
  .txt-d { display: none !important; }
  .txt-m { display: block !important; }

  .hero-art { position: absolute; inset: 0; right: 0; top: 0; width: auto; height: auto; transform: none; overflow: visible; }
  .petals { display: none; }
  .petals-v { display: block; position: absolute; right: calc(-48 * var(--q)); top: calc(-105.8 * var(--q)); width: calc(624.4 * var(--q)); height: auto; }
  /* the guy stands in the cream band, left (their vertical film: 0.25 of the loop, mirrored, top 92 under the green) */
  .guy { left: calc(var(--sx) + 121 * var(--q)); top: calc(100% + 92 * var(--q)); width: calc(333.5 * var(--q)); }

  .register { position: relative; flex: none; display: block; min-height: calc(706 * var(--q)); padding: calc(128 * var(--q)) 0 calc(max(24px, 60 * var(--q)) + env(safe-area-inset-bottom)); }
  .form, .thanks { position: relative; width: var(--cw); height: auto; margin-left: calc(var(--sx) + 983 * var(--q) - var(--cw)); padding: 0; }
  .fields { position: static; width: auto; transform: none; display: flex; flex-direction: column; gap: max(12px, calc(34 * var(--q))); }
  .field { height: max(44px, calc(77 * var(--q))); }
  .field.invalid { margin-bottom: 30px; }   /* room for a two-line message in the narrow column */
  .field input { padding: max(13px, calc(26 * var(--q))) max(12px, calc(37 * var(--q))) 0; border-width: max(1px, calc(2 * var(--q))); border-radius: max(10px, calc(18.6 * var(--q))); box-shadow: max(3px, calc(6.4 * var(--q))) max(4px, calc(8.4 * var(--q))) 0 0 var(--coral); font-size: 16px; }
  .field input:focus { box-shadow: max(3px, calc(6.4 * var(--q))) max(4px, calc(8.4 * var(--q))) 0 0 var(--blue); }
  .field.invalid input { box-shadow: max(3px, calc(6.4 * var(--q))) max(4px, calc(8.4 * var(--q))) 0 0 var(--error); }
  .field label { left: max(12px, calc(37 * var(--q))); font-size: 13px; }
  .field input:focus + label, .field input:not(:placeholder-shown) + label { top: 11px; }
  .err { left: max(12px, calc(37 * var(--q))); top: calc(100% + 6px); font-size: 12px; }

  /* button: their 589 to 987 x 58, text 87% of its width (their outlines) */
  .cta { position: relative; left: auto; top: auto; display: flex; width: calc(100% + 3.6 * var(--q)); height: max(46px, calc(58 * var(--q))); margin-top: max(18px, calc(79 * var(--q))); transform: none; border-width: max(1px, calc(2 * var(--q))); box-shadow: max(2px, calc(3 * var(--q))) max(4px, calc(7 * var(--q))) 0 0 var(--ink); }
  .cta-txt { width: 86.7%; height: auto; }
  .cta:active { transform: translateY(4px); box-shadow: 0 1px 0 0 var(--ink); }
  /* consent + send error: under the whole row, on the text margins (135 to 988) */
  .consent, .form-error { position: relative; top: auto; width: calc(853 * var(--q)); max-width: calc(100vw - 2 * var(--sx) - 24px); margin: max(16px, calc(44 * var(--q)), calc(640 * var(--q) - 128 * var(--q) - 3 * max(44px, 77 * var(--q)) - 2 * max(12px, 34 * var(--q)) - max(18px, 79 * var(--q)) - max(46px, 58 * var(--q)))) 0 0 calc(var(--cw) - 848 * var(--q));   /* never above the guy's feet (his bottom = 630 under the green) */ text-align: left; font-size: 12px; line-height: 1.4; }
  .form-error { margin-top: 10px; font-size: 13px; }

  .thanks { inset: auto; display: block; text-align: left; padding: max(8px, calc(20 * var(--q))) 0 0; }
  .thanks-title { font-size: max(20px, calc(44 * var(--q))); }
  .thanks-text { margin-top: 10px; font-size: 15px; }

  /* the cookie card covers the button until answered (script places it, page coordinates), on the text margins */
  .cookies { position: absolute; left: calc(var(--sx) + 113 * var(--q)); right: calc(var(--sx) + 92 * var(--q)); top: auto; bottom: auto; z-index: 6; width: auto; padding: 12px 14px; font-size: 13.5px; line-height: 1.35; border-width: 1.5px; border-radius: 14px; box-shadow: 4px 6px 0 0 var(--coral); animation: fade 300ms var(--ease) 250ms both; }
  .cookies p { margin-bottom: 10px; }
  .cookies button { height: 40px; border-width: 1.5px; font-size: 13px; }
}
/* landscape phones: the vertical design at the screen's height x 1.78 (centred, the page scrolls) */
@media (max-height: 500px) and (min-aspect-ratio: 5/4) {
  :root { --q: min(calc(100vw / 1080), calc(100svh / 1080)); }
}

@media (max-aspect-ratio: 5/4) and (hover: hover) and (pointer: fine), (max-height: 500px) and (hover: hover) and (pointer: fine) {
  .cta:hover { transform: translateY(3px); box-shadow: 2px 3px 0 0 var(--ink); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Privacy page ---------- */
.legal-page { background: var(--cream); }
.legal-head { background: var(--green); padding: 28px clamp(20px, 6vw, 96px); }
.legal-logo { display: inline-block; width: 220px; }
.legal-logo img { width: 100%; height: auto; }
.legal { max-width: 720px; margin: 0 auto; padding: 48px clamp(20px, 6vw, 48px) clamp(40px, 6vw, 80px); font-size: 17px; line-height: 1.6; }
.legal h1 { margin: 0 0 6px; font-family: "Display", "Arial Black", sans-serif; font-weight: 900; font-stretch: 150%; text-transform: uppercase; font-size: clamp(28px, 5vw, 44px); line-height: 1.1; }
.legal-date { margin: 0 0 32px; color: var(--muted); font-size: 15px; }
.legal h2 { margin: 36px 0 8px; font-weight: 700; font-size: 20px; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 6px; }
.legal-back { margin-top: 44px; }
.legal a:focus-visible, .legal-logo:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }