/*
  FRENZI WEBSITE — THE ONE STYLESHEET
  ===================================

  Every style for every page of the landing site. Plain CSS: no Tailwind, no build step.
  It is served as written, so a change here is live on the next request (SiteAsset puts the
  file's modification time in its URL). See the landing README, "The stylesheet".

  File map (in order)
     1. tokens         colour table below, spacing
     2. base           reset, body, links, focus ring, skip link, .wrap
     3. type           .display .h2 .h3 .lead .small .eyebrow
     4. buttons        .btn .btn-brand .btn-light .btn-quiet .link, store badges, status chips, .shimmer
     5. header + menu  sticky glass header; the menu is a <details> that opens full-screen
     6. phone          the iPhone frame every app screen sits in
     7. sections       .section .section-head, surface/dark variants
     8. homepage       hero, tiles (Rides is the lead tile), steps, compact panels, uk band, final
     9. core pages     page hero, partner photo hero, features, the 77p fee panel, notes, journeys,
                       download, statement, facts, company table, roadmap cards
    10. forms          .form .field .field-input .chips .honeypot .form-status .form-errors
    11. faq            .faq-group .faq-item (a <details> per question)
    12. legal          .legal: the one renderer's blocks (paragraph, bullets, callout, links, key-value table)
    13. footer
    14. cookie banner  compact, one line on a desktop
    15. reveal         the one script-only effect; nothing depends on it

  Colour tokens (every colour on every page is one of these)
    | Token            | Value                          | Used for                                          |
    | --white          | #ffffff                        | page, cards, text on dark                         |
    | --ink            | #0b0b0f                        | headlines, body text, badge foot                  |
    | --ink-2          | #28282b                        | badge top: the lit half of the two-tone black     |
    | --text           | #1d1d1f                        | body copy                                         |
    | --muted          | #6e6e73                        | supporting lines, footer text                     |
    | --surface        | #f5f4f1                        | warm neutral section grounds, tiles               |
    | --surface-2      | #ebe9e4                        | deeper warm neutral, pressed states               |
    | --line           | #e4e2dd                        | hairlines                                         |
    | --line-soft      | rgba(11,11,15,.07)             | the mobile menu's row dividers: fainter than --line |
    | --dark           | #0c0b1f                        | dark sections (black with the navy cast)          |
    | --dark-2         | #161436                        | cards on dark                                     |
    | --silk-light     | #120f45                        | the light tone of the silk pattern on a dark section; its folds darken to about #0c0a2d |
    | (the iPhone)     | /brand/iphone-17-pro.svg       | the device frame: its own colours are in the drawing (§6) |
    | --pink           | #ec1e79                        | Frenzi pink, the logo's own: one END of the two-tone, never a fill on its own |
    | --orange         | #f26b36                        | Frenzi orange, the logo's own: the other end      |
    | --orange-light   | #f9a557                        | the logo gradient's warm highlight; reserved      |
    | --pink-text      | #c4115f                        | pink deepened for small text on light (links)     |
    | --pink-deep      | #d4156b                        | the button gradient's pink end: white text on it is 5.1:1 |
    | --orange-deep    | #c64916                        | the button gradient's orange end: white text on it is 4.8:1 |
    | --brand-logo     | pink → orange at 100deg        | the logo's own two-tone, for things with NO text on them: the live dot, list bullets |
    | --brand-button   | pink-deep → orange-deep, 100deg| EVERY solid button, step numbers, checked chips, the 77p figure |
    | --brand-final    | pink → orange at 100deg        | the final conversion block, the logo's bright two-tone |
    | --badge          | ink-2 → #0a0a0e → black, 140deg| the store badges: two-tone black                  |
    | --muted-strong   | #5c5c61                        | the "Planned" chip text: 5.5:1 on its ground      |
    | --field-line     | #8a8a8e                        | form field borders: 3.4:1 on white, so a field's edge is visible |
    | --sheen          | rgba(255,255,255,.12)          | the shimmer band on a brand button                |
    | --sheen-dark     | rgba(255,255,255,.13)          | the shimmer band on a black badge (slight)        |
    | --green-text     | #1c7a43                        | "Live now" chip text, form success                |
    | --green-tint     | #e6f6ec                        | "Live now" chip ground, form success              |
    | --red-text       | #b3261e                        | a field error                                     |
    | --red-tint       | #fdecec                        | form failure banner                               |
    | --focus          | #ec1e79                        | keyboard focus ring                               |
    | --shadow-card    | 0 2px 12px rgba(11,11,15,.06)  | lift under a tile                                 |
    | --header-glass   | rgba(255,255,255,.82)          | header ground over content                        |

  The two-tone rule: Frenzi pink is a contrast with orange, never a block colour. No element
  on these pages is filled with flat pink. The store badges are the same idea in black: two
  blacks, lit at the top left.

  Why buttons use a deeper cut of the logo gradient: white text on the logo's own pink is
  4.2:1 and on its orange 3.0:1, both under the 4.5:1 that small text needs. The same
  pink-to-orange, one step deeper, clears it at both ends (5.1:1 and 4.8:1). The logo files,
  the wordmark and anything without text on it keep the logo's exact colours (--brand-logo).

  Motion: the only constant motion is the shimmer, on the header's Get the app button, the
  store badges and the step cards, and the Partners hero's slow crossfade. Every other brand
  button shimmers on hover only. All of it stops under prefers-reduced-motion.

  Type: one family, Inter. Display 44/56/80, h2 32/40/56, lead 19/21, body 17, small 14, chip 12.
  Sizes are in rem, so a reader who raises their default font size gets larger text.
*/

/* ===================== 1. tokens ===================== */
:root {
  --white: #ffffff;
  --ink: #0b0b0f;
  --ink-2: #28282b;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --muted-strong: #5c5c61;
  --field-line: #8a8a8e;
  --surface: #f5f4f1;
  --surface-2: #ebe9e4;
  --line: #e4e2dd;
  --line-soft: rgba(11, 11, 15, .07);
  --dark: #0c0b1f;
  --dark-2: #161436;
  --silk-light: #120f45;
  --pink: #ec1e79;
  --orange: #f26b36;
  --orange-light: #f9a557;
  --pink-text: #c4115f;
  --pink-deep: #d4156b;
  --orange-deep: #c64916;
  --green-text: #1c7a43;
  --green-tint: #e6f6ec;
  --red-text: #b3261e;
  --red-tint: #fdecec;
  --focus: #ec1e79;
  --sheen: rgba(255, 255, 255, .12);
  --sheen-dark: rgba(255, 255, 255, .13);
  --shadow-card: 0 2px 12px rgba(11, 11, 15, .06);
  --header-glass: rgba(255, 255, 255, .82);
  --brand-logo: linear-gradient(100deg, var(--pink) 0%, var(--orange) 100%);
  --brand-button: linear-gradient(100deg, var(--pink-deep) 0%, var(--orange-deep) 100%);
  /* the final conversion block, in the logo's own bright two-tone, left to right as the logo
     runs, so the centred text sits on the middle of the blend */
  --brand-final: linear-gradient(100deg, var(--pink) 0%, var(--orange) 100%);
  /* the badge's middle stop is its own value, not --ink, so the badges can be darker than the
     page's text */
  --badge: linear-gradient(140deg, var(--ink-2) 0%, #0a0a0e 55%, #000000 100%);
  --gutter: 20px;
  --max: 1200px;
}

/* ===================== 2. base ===================== */
*, *::before, *::after { box-sizing: border-box; }
/* scroll-padding keeps an anchor target (and anything focused) clear of the sticky header,
   and of the cookie banner while it is showing */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
html:has(form.cookies) { scroll-padding-bottom: 170px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Type sizes are in rem against the browser's 16px default, so a reader who raises their
   default font size gets larger text. overflow-wrap: break-word breaks only a word wider than
   its whole line (an email address in a sentence); at ordinary sizes there is none. */
body {
  margin: 0;
  overflow-wrap: break-word;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
/* browsers give buttons and fields their own system font, so every control takes Inter from
   the page. Family only: each control keeps the size its own rule sets. */
button, input, select, textarea { font-family: inherit; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: 760px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* the skip link: the first thing a keyboard reaches on every page; hidden until focused */
.skip-link { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 12px 18px; border-radius: 12px; background: var(--ink); color: var(--white); font-weight: 600; }
.skip-link:focus { top: 12px; }

/* ===================== 3. type ===================== */
/* overflow-wrap: a word too long for the line ("Conditions" at double text size on a phone)
   breaks instead of pushing the page sideways */
.display { font-size: 2.75rem; line-height: 1.05; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); overflow-wrap: anywhere; }
.h2 { font-size: 2rem; line-height: 1.1; font-weight: 700; letter-spacing: -0.025em; color: var(--ink); }
.h3 { font-size: 1.375rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
.lead { font-size: 1.1875rem; line-height: 1.45; color: var(--muted); }
.small { font-size: .875rem; color: var(--muted); }
.eyebrow { font-size: .875rem; font-weight: 600; color: var(--muted); }
.on-dark .display, .on-dark .h2, .on-dark .h3 { color: var(--white); }
.on-dark .lead, .on-dark .small { color: rgba(255, 255, 255, .72); }
@media (min-width: 768px) {
  .display { font-size: 3.5rem; }
  .h2 { font-size: 2.5rem; }
  .lead { font-size: 1.3125rem; }
}
@media (min-width: 1100px) {
  .display { font-size: 80px; }
  .h2 { font-size: 56px; }
}

/* ===================== 4. buttons, links, badges, chips, shimmer ===================== */
/* A label may wrap onto a second line rather than run off a phone screen when the reader has
   enlarged their text; at ordinary sizes every label fits on one line. The 8px top and bottom
   padding only shows on a wrapped label: one line sits inside the 52px minimum. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; max-width: 100%; flex-shrink: 0; padding: 8px 26px; border-radius: 999px; border: 0; cursor: pointer;
  font: inherit; font-size: 1.0625rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; text-align: center;
  transition: transform .15s ease, opacity .15s ease;
}
/* on the narrowest phones (320px) the homepage's panel buttons were 4px too wide for one line */
@media (max-width: 359px) { .btn { padding-left: 22px; padding-right: 22px; } }
.btn:active { transform: scale(.98); }
.btn-brand { color: var(--white); background: var(--brand-button); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 14px rgba(236, 30, 121, .22); }
.btn-light { color: var(--ink); background: var(--white); border: 1px solid var(--line); }
.btn-quiet { color: var(--ink); background: var(--surface); }
.link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--pink-text); min-height: 44px; }
.on-dark .link { color: var(--white); }
.link svg { width: 16px; height: 16px; }
/* email addresses and web addresses have no spaces: let them break rather than push a phone
   screen sideways when the reader has enlarged their text */
.link, p a, li a, dd a { overflow-wrap: anywhere; }

/* store badges: Apple's and Google's proportions, two-tone black */
.badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.badges-left { justify-content: flex-start; }
.badge { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 18px 6px 14px; border-radius: 12px; background: var(--badge); color: var(--white); text-align: left; line-height: 1.05; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 4px 12px rgba(11, 11, 15, .16); }
.badge svg { width: 24px; height: 24px; flex: none; }
.badge small { display: block; font-size: .625rem; font-weight: 500; letter-spacing: .02em; opacity: .85; }
.badge strong { display: block; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }

/* the shimmer: a soft band of light that crosses the button once every seven seconds.
   z-index -1 inside the isolated button puts the band BEHIND the label and above the
   button's own background, so the white text itself is never washed over. */
.shimmer { position: relative; overflow: hidden; isolation: isolate; }
.shimmer::after { content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 50%; background: linear-gradient(100deg, transparent 0%, var(--sheen) 50%, transparent 100%); transform: skewX(-20deg); animation: shimmer 7s ease-in-out infinite; pointer-events: none; z-index: -1; }
.badge.shimmer::after { background: linear-gradient(100deg, transparent 0%, var(--sheen-dark) 50%, transparent 100%); }
.badge.shimmer + .badge.shimmer::after { animation-delay: .35s; }
.btn-brand:not(.shimmer) { position: relative; overflow: hidden; isolation: isolate; }
.btn-brand:not(.shimmer)::after { content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 50%; background: linear-gradient(100deg, transparent 0%, var(--sheen) 50%, transparent 100%); transform: skewX(-20deg); pointer-events: none; z-index: -1; transition: left .9s ease; }
.btn-brand:not(.shimmer):hover::after { left: 130%; }
@keyframes shimmer { 0%, 78% { left: -70%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) {
  .shimmer::after, .btn-brand:not(.shimmer)::after { display: none; animation: none; }
}

/* One label system: "Live now" for rides, "Planned" for everything else. "Planned" never
   carries a date, and there is no "Coming soon": a service with no date is planned, not
   coming. min-height, not height, and allowed to wrap, so enlarged text never clips a label. */
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 4px 10px; border-radius: 999px; font-size: .75rem; line-height: 1.25; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; text-align: center; }
.chip-live { color: var(--green-text); background: var(--green-tint); }
.chip-planned { color: var(--muted-strong); background: var(--surface-2); }
.chip-interest { color: var(--pink-text); background: var(--surface); }
.chip-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green-text); }

/* ===================== 5. header + menu ===================== */
/* The blur lives on a pseudo-element, not on the header: a backdrop-filter on the header
   would make it the containing block for the fixed menu, and the menu would draw inside the
   header instead of over the page. */
.header { position: sticky; top: 0; z-index: 50; }
.header::before { content: ""; position: absolute; inset: 0; background: var(--header-glass); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid rgba(11, 11, 15, .06); }
.header-bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; height: 56px; gap: 12px; }
.brand { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
/* 7.2px rather than 9px: the FZ sits nearer its centre */
.brand img { width: 36px; height: 36px; border-radius: 7.2px; }
.nav { display: none; }
.nav a { padding: 8px 12px; font-size: 15px; font-weight: 500; color: var(--text); border-radius: 999px; }
/* "true" marks the section a page sits inside (Partners on /partner/fleets), drawn like the page itself */
.nav a:hover, .nav a[aria-current="page"], .nav a[aria-current="true"] { background: var(--surface); }
.header-actions { display: flex; align-items: center; gap: 8px; }
/* ink focus ring in the header: over the glass above a navy section the pink ring fell to 2.8:1 */
.header :focus-visible { outline-color: var(--ink); }
.header-actions .btn { min-height: 44px; padding: 0 16px; font-size: .875rem; white-space: nowrap; }
@media (min-width: 900px) {
  .header-bar { height: 64px; }
  .nav { display: flex; gap: 2px; }
  .nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .menu { display: none; }
}

/* the mobile menu: a <details> whose panel fills the screen under the header bar */
.menu > summary { list-style: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; cursor: pointer; color: var(--ink); }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary svg { width: 22px; height: 22px; }
.menu > summary .ico-close { display: none; }
.menu[open] > summary .ico-burger { display: none; }
.menu[open] > summary .ico-close { display: block; }
/* The panel opens UNDER the 56px bar, so the logo, Get the app and the close cross stay on
   screen. The three journeys (Rides, Drive, Partner) are large rows with a small grey arrow;
   About and Help sit apart below them (.menu-more) in smaller type; the current page carries a
   short pink-to-orange bar in the margin, so every label stays aligned; dividers are a faint
   hairline; a very faint warm glow sits at the foot of the panel. */
.menu-panel {
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  position: fixed; left: 0; right: 0; top: 56px; bottom: 0; z-index: 1; display: flex; flex-direction: column; padding: 8px 24px 32px;
  background: radial-gradient(90% 34% at 100% 100%, rgba(242, 107, 54, .07) 0%, rgba(242, 107, 54, 0) 100%), radial-gradient(80% 30% at 0% 100%, rgba(236, 30, 121, .045) 0%, rgba(236, 30, 121, 0) 100%), var(--white);
  border-top: 1px solid var(--line-soft); overflow-y: auto;
}
/* each row: the label, then the arrow at the far right; 68px tall, so every row is easy to tap */
.menu-panel a { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; padding: 14px 0; font-size: 1.5rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); border-bottom: 1px solid var(--line-soft); }
/* the arrow is the site's own arrow, drawn small in grey; a mask, so it is one colour and
   needs no extra markup */
.menu-panel a::after { content: ""; flex: none; width: 18px; height: 18px; background: var(--field-line); -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; }
.menu-panel a:hover::after { background: var(--ink); }
/* the current page: a short two-tone bar in the panel's margin (the logo's own colours, top to bottom) */
.menu-panel a[aria-current="page"]::before { content: ""; position: absolute; left: -14px; top: 50%; width: 3px; height: 26px; margin-top: -13px; border-radius: 2px; background: linear-gradient(180deg, var(--pink) 0%, var(--orange) 100%); }
/* About and Help: apart from the three journeys, and quieter */
.menu-more { display: flex; flex-direction: column; margin-top: 20px; }
.menu-more a { min-height: 56px; padding: 12px 0; font-size: 1.1875rem; font-weight: 500; letter-spacing: -0.01em; }
.menu-more a::after { width: 16px; height: 16px; }
/* scroll lock only where the menu exists: a menu left open while a tablet rotates past 900px
   would otherwise lock the page with no visible way to close it */
@media (max-width: 899px) { html:has(.menu[open]) { overflow: hidden; } }

/* ===================== 6. the iPhone frame ===================== */
/* The .phone box IS the screen: the screenshot fills it, with the iPhone 17 Pro's own 55pt
   corners. The device around it (metal edge, black glass border, buttons, Dynamic Island) is
   one drawing, /brand/iphone-17-pro.svg, laid over the screenshot with a transparent hole
   where the screen is. It is drawn to the real device's proportions, so it is the same phone
   at every size: nothing about it is a percentage of the page.
     Screen 402 × 874 pt · frame 740 × 1500 units, screen hole at 37,26 sized 666 × 1448
     → the frame is 111.11% of the screen's width, starts 5.556% left of it, and sits
       26/1500 = 1.733% of its own height above it. */
.phone { position: relative; filter: drop-shadow(0 28px 34px rgba(11, 11, 15, .22)) drop-shadow(0 6px 10px rgba(11, 11, 15, .12)); }
.phone img { width: 100%; aspect-ratio: 800 / 1739; object-fit: cover; object-position: 50% 0; border-radius: 13.68% / 6.29%; background: var(--white); }
.phone::after { content: ""; position: absolute; left: -5.556%; top: 0; width: 111.11%; aspect-ratio: 740 / 1500; transform: translateY(-1.733%); background: url("/brand/iphone-17-pro.svg") center / 100% 100% no-repeat; pointer-events: none; }
/* a phone that runs off the bottom of its card: the same frame, cut by the card */
.phone-crop img { aspect-ratio: 800 / 1180; border-radius: 13.68% 13.68% 0 0 / 9.27% 9.27% 0 0; }

/* ===================== 7. sections ===================== */
.section { padding: 72px 0; }
.section-head { display: flex; flex-direction: column; gap: 12px; max-width: 640px; margin-bottom: 36px; }
.section-head .lead { max-width: 40ch; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; align-items: center; }
.on-surface { background: var(--surface); }
/* A dark section is the soft silk pattern (/brand/silk.jpg) in two navies: the section is the
   lighter navy, and the silk, multiplied over it, darkens its folds to the deeper navy. The
   photograph is almost white (brightness 234–254 of 255), so the filter stretches that range
   to roughly 65–100% (brightness × contrast = 6.36), and a light blur keeps the stretched
   gradients smooth instead of banded. The ::before is 40px larger than the section on every
   side so the blur never shows a soft edge. */
.on-dark { position: relative; isolation: isolate; overflow: hidden; background: var(--silk-light); color: var(--white); }
.on-dark::before { content: ""; position: absolute; inset: -40px; z-index: -1; pointer-events: none; background: url("/brand/silk.jpg") center / cover no-repeat; filter: grayscale(1) brightness(.552) contrast(11.5) blur(5px); mix-blend-mode: multiply; }
.on-dark .feature { background: var(--dark); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 24px 48px rgba(4, 3, 20, .45); }
/* the step cards on a dark section are white at the top settling to light grey at the foot,
   with a hairline of light along the top and the site's slow shimmer band crossing them,
   staggered card to card. Words are black; the numbered circle keeps the pink two-tone. */
.on-dark .step { position: relative; isolation: isolate; background: linear-gradient(170deg, var(--white) 0%, var(--white) 40%, var(--surface-2) 100%); color: var(--ink); box-shadow: inset 0 1px 0 var(--white), 0 24px 48px rgba(4, 3, 20, .45); }
.on-dark .step::after { content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 50%; background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .75) 50%, transparent 100%); transform: skewX(-20deg); animation: shimmer 8s ease-in-out infinite; pointer-events: none; z-index: -1; }
.on-dark .step:nth-child(2)::after { animation-delay: .5s; }
.on-dark .step:nth-child(3)::after { animation-delay: 1s; }
.on-dark .step .h3 { color: var(--ink); }
.on-dark .step p { color: var(--text); }
.on-dark .step p strong { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .on-dark .step::after { display: none; animation: none; } }
@media (min-width: 768px) { .section { padding: 112px 0; } .section-head { margin-bottom: 56px; } }
.section.section-flush { padding-top: 0; }

/* ===================== 8. homepage ===================== */
.hero { padding: 56px 0 0; text-align: center; background: linear-gradient(180deg, var(--white) 0%, var(--white) 60%, var(--surface) 100%); overflow: hidden; }
.hero .wrap { display: flex; flex-direction: column; align-items: center; gap: 18px; }
/* The slogan sits on two lines: "One app." large on one line, then "More possibilities."
   smaller underneath, at 60% of the first. Each line is its own block, which forces the break
   after "One app.". The lines may wrap only if they truly cannot fit (a 320px phone with
   enlarged text), rather than being cut off. The phone size shrinks with the screen below
   390px so both lines still fit at 320px. */
.display .line { display: block; text-wrap: balance; }
.hero .display { max-width: none; font-size: clamp(2.5rem, 13.6vw, 3.3rem); }
@media (min-width: 768px) { .hero .display { font-size: 4.2rem; } }
@media (min-width: 1100px) { .hero .display { font-size: 6rem; } }
.hero .display .line-2 { margin-top: .14em; font-size: .6em; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
.hero .lead { max-width: 34ch; }
/* the FRENZI wordmark in the logo's pink-to-orange, at the very top of the hero:
   200px phone, 256px tablet, 304px desktop */
.hero-wordmark { width: min(53%, 200px); height: auto; margin-bottom: 6px; }
@media (min-width: 768px) { .hero-wordmark { width: 256px; margin-bottom: 10px; } }
@media (min-width: 1100px) { .hero-wordmark { width: 304px; } }
.hero-status { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--muted); }
.hero-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-logo); box-shadow: 0 0 0 4px rgba(236, 30, 121, .16); }
.hero .badges { margin-top: 6px; }
/* the drivers' way in, under the riders' store buttons: a quiet link, never a second pair of badges */
.hero-secondary { margin-top: -4px; }
/* the whole phone shows, with room below it: a phone cut flat by the section edge looks broken */
.hero-phone { width: min(70%, 300px); margin: 36px 0 64px; }
/* the 3D phone picture: its own body and angle are in the image, so no frame is drawn; it is a
   little wider than the framed screenshot because the tilt shows the phone's side, and a soft
   shadow under it lifts it off the page */
.hero-phone-3d { width: min(74%, 320px); }
.hero-phone-3d img { display: block; width: 100%; height: auto; filter: drop-shadow(0 28px 34px rgba(11, 11, 15, .2)) drop-shadow(0 6px 10px rgba(11, 11, 15, .1)); }
@media (min-width: 768px) {
  .hero { padding-top: 88px; }
  .hero-phone { width: 330px; margin: 48px 0 96px; }
  .hero-phone-3d { width: 360px; }
}

/* Rides is the lead tile: the only live service, so it is the full width on a phone and two
   columns of five on a desktop, its picture beside the words. The three planned services sit
   beside or under it as small tiles, each with a "Planned" chip and no promise line.
   Phone: Rides, then a row of three. Desktop: one row of five columns. */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tile { display: flex; flex-direction: column; align-items: center; padding: 12px 8px 14px; border-radius: 20px; background: var(--white); box-shadow: var(--shadow-card); overflow: hidden; text-align: center; }
.tile img { height: 64px; width: auto; max-width: 86%; margin: 10px auto 8px; object-fit: contain; }
.tile .h3 { font-size: 15px; }
.tile .chip { min-height: 22px; padding: 3px 8px; font-size: .6875rem; margin-top: 6px; }
.tile-planned .h3 { color: var(--muted); margin-bottom: 6px; }
.tile-planned img { opacity: .82; }
/* the "Planned" chips line up along the foot of the row, however many lines the name takes */
.tile-planned .chip { margin-top: auto !important; }
.tile-lead { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; padding: 20px 20px 22px; border-radius: 24px; text-align: left; }
.tile-lead .tile-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.tile-lead .chip { min-height: 26px; padding: 4px 10px; font-size: .75rem; margin: 0; }
.tile-lead img { grid-column: 2; grid-row: 1; width: 108px; height: auto; max-width: none; margin: 0; }
.tile-lead .h3 { font-size: 26px; }
.tile-lead .small { font-size: 15px; }
.tile-lead .link { min-height: 0; margin-top: 4px; font-size: 15px; }
.tiles-foot { margin-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
/* tablet: the phone's arrangement, larger (Rides full width, three planned tiles under it);
   desktop from 1100px: one row of five, Rides two columns wide */
@media (min-width: 768px) {
  .tiles { gap: 16px; }
  .tile { padding: 22px 18px 24px; border-radius: 28px; }
  .tile img { height: 120px; max-width: 80%; margin: 18px auto 14px; }
  .tile .h3 { font-size: 20px; }
  .tile .chip { min-height: 26px; padding: 4px 10px; font-size: .75rem; margin-top: 10px; }
  .tile-lead { padding: 28px 32px 30px; border-radius: 28px; }
  .tile-lead img { width: 160px; margin: 0; }
  .tile-lead .h3 { font-size: 30px; }
  .tile-lead .chip { margin: 0; }
}
@media (min-width: 1100px) {
  .tiles { grid-template-columns: repeat(5, 1fr); }
  .tile-lead { grid-column: span 2; padding: 28px 28px 30px; }
  .tile-lead img { width: 150px; }
}

.reasons { display: flex; flex-direction: column; gap: 56px; }
.reason { display: grid; gap: 24px; align-items: center; }
.reason-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.reason-copy .lead { max-width: 36ch; }
.reason-visual { width: min(74%, 300px); margin: 0 auto; }
@media (min-width: 768px) {
  .reasons { gap: 96px; }
  .reason { grid-template-columns: 1fr 1fr; gap: 56px; }
  .reason:nth-child(even) .reason-visual { order: -1; }
  .reason-visual { width: 340px; }
}

/* a photograph with no copy over it. The band keeps close to the photograph's own 3:1 shape,
   so the picture is shown, not zoomed. On a phone it is 2.2:1, shifted left so the QR code on
   the cab's rear panel stays whole. */
.moment { overflow: hidden; background: var(--dark); }
.moment img { width: 100%; aspect-ratio: 2.2 / 1; object-fit: cover; object-position: 25% 50%; }
@media (min-width: 768px) { .moment img { aspect-ratio: 3 / 1; object-position: 50% 50%; } }

/* The three ride steps: words only. Stacked on a phone (no sideways scroller to miss), three
   across from 768px. .phone-crop stays for any future step picture. */
.steps { display: grid; gap: 12px; }
.step { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 24px; background: var(--dark-2); overflow: hidden; }
.step-number { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--brand-button); color: var(--white); font-weight: 700; font-size: .9375rem; }
.step .h3 { font-size: 1.25rem; }
.step p { color: rgba(255, 255, 255, .78); }
.step p strong { color: var(--white); font-weight: 600; }
.step .phone-crop { width: 82%; margin: 6px auto 0; }
.steps-foot { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 28px; text-align: center; }
.steps-foot .small { max-width: 56ch; }
@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .step { padding: 32px; border-radius: 28px; }
  .steps-foot { margin-top: 40px; }
}

.split { display: grid; gap: 16px; }
.panel { display: flex; flex-direction: column; gap: 10px; padding: 28px 24px 0; border-radius: 28px; background: var(--surface); overflow: hidden; }
.panel .lead { font-size: 17px; max-width: 30ch; }
.panel .btn { align-self: flex-start; margin-top: 8px; }
.panel .phone { width: 64%; margin: 28px auto -16%; }
.split-foot { display: flex; justify-content: center; margin-top: 24px; }
/* a compact panel: no phone, words and one action (homepage Drive / Partner) */
.panel-compact { padding-bottom: 28px; }
.panel-figure { font-size: 56px; line-height: 1; font-weight: 700; letter-spacing: -0.04em; margin-bottom: 4px; }
.panel-figure small { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--muted); }
.panel-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 2px; }
.panel-list li { padding: 6px 12px; border-radius: 999px; background: var(--white); font-size: 14px; font-weight: 500; color: var(--text); }
@media (min-width: 768px) {
  .split { grid-template-columns: 1fr 1fr; gap: 24px; }
  .panel { padding: 40px 40px 0; }
  .panel-compact { padding-bottom: 40px; }
  .panel .phone { width: 58%; }
  .panel-figure { font-size: 72px; }
}
/* gradient lettering for the fee figure: the button gradient, so it clears 4.5:1 on white */
.brand-text { background: var(--brand-button); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
@media (forced-colors: active) { .brand-text { color: CanvasText; -webkit-text-fill-color: CanvasText; background: none; } }

/* the UK band: the whole photograph, then the words on navy beneath it. The cab wrap carries
   its own lettering, so no headline is laid over the picture. */
.uk { color: var(--white); background: var(--dark); }
/* 25% keeps "Rides. Food. Everyday services.", both QR codes, the phone and FRENZI whole on a
   phone, where the band is cropped at the sides */
.uk img { width: 100%; aspect-ratio: 2.2 / 1; object-fit: cover; object-position: 25% 50%; }
.uk .wrap { padding-top: 40px; padding-bottom: 56px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.uk .display { color: var(--white); font-size: 40px; }
.uk .lead { color: rgba(255, 255, 255, .82); max-width: 34ch; }
@media (min-width: 768px) {
  .uk img { aspect-ratio: 3 / 1; }
  .uk .display { font-size: 64px; }
  .uk .wrap { padding-top: 64px; padding-bottom: 88px; }
}

.final { padding: 24px var(--gutter); }
.final-block { max-width: var(--max); margin: 0 auto; padding: 64px 24px; border-radius: 32px; background: var(--brand-final); color: var(--white); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.final-block .display { color: var(--white); font-size: 36px; max-width: 14ch; }
/* plain white on the bright two-tone: the headline is large text (3:1 is the bar); the lead is
   set semibold so at 19px and up it counts as large text too; a soft shadow keeps the small
   status line crisp */
.final-block .lead { color: var(--white); max-width: 30ch; font-weight: 600; text-shadow: 0 1px 1px rgba(110, 18, 52, .18); }
/* the pink focus ring vanishes on the pink-to-orange block, so it turns white there */
.final-block :focus-visible { outline-color: var(--white); }
.final-block .link { color: var(--white); margin-top: 8px; font-weight: 500; }
@media (min-width: 768px) {
  .final-block { padding: 112px 40px; }
  .final-block .display { font-size: 64px; }
}

/* ===================== 9. core pages ===================== */
/* page hero: copy first, then the phone; side by side from 900px */
.page-hero { padding: 56px 0 0; background: linear-gradient(180deg, var(--white) 0%, var(--white) 55%, var(--surface) 100%); overflow: hidden; }
.page-hero .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.page-hero .chip { margin-bottom: -6px; }
.page-hero .display { max-width: 12ch; }
.page-hero .lead { max-width: 34ch; }
.page-hero .actions { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; margin-top: 6px; }
.page-hero .phone { width: min(70%, 300px); margin: 36px auto 64px; align-self: center; }
.page-hero.no-phone { padding-bottom: 56px; background: var(--white); }
@media (min-width: 900px) {
  .page-hero { padding-top: 96px; }
  .page-hero .wrap { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; column-gap: 48px; row-gap: 18px; }
  .page-hero .wrap > :not(.phone) { grid-column: 1; justify-self: start; }
  .page-hero .phone { grid-column: 2; grid-row: 1 / span 5; width: 320px; margin: 24px 24px 96px auto; }
  .page-hero.no-phone { padding-bottom: 96px; }
  /* a hero with no phone is one column, so its left edge matches the content under it */
  .page-hero.no-phone .wrap { display: flex; align-items: flex-start; }
  .page-hero.no-phone .lead { max-width: 46ch; }
}

/* Partners: photographs fill the hero behind the words: the barber, then the taxi fleet
   handover, then the takeaway counter, crossfading slowly in turn (CSS only, so it needs no
   script, and with reduced motion only the barber shows). Each keeps its pale wall on the left
   for the copy and its people on the right, clear and in their own colours.
   Below 1024px (phones and tablets) the copy sits on a stronger light wash at the top and the
   hero grows by a band at the foot, --photo-band tall, where the photograph shows clear of the
   words; from 1024px the photo is behind everything and the copy keeps to the left 45%.
   .page-hero.partner-photo-hero, two classes, so it outranks .page-hero.no-phone's white and padding */
.page-hero.partner-photo-hero { --photo-band: clamp(300px, 42vw, 440px); position: relative; isolation: isolate; background: #f2eee8; padding-bottom: calc(var(--photo-band) + 16px); }
.partner-photo-hero-img { position: absolute; left: 0; right: 0; bottom: 0; z-index: -2; width: 100%; height: var(--photo-band); object-fit: cover; object-position: 80% 50%; }
.page-hero.partner-photo-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .88) calc(100% - var(--photo-band) - 48px), rgba(255, 255, 255, 0) calc(100% - var(--photo-band) + 12px)); }
@media (min-width: 1024px) {
  .page-hero.partner-photo-hero { padding: 88px 0; min-height: clamp(560px, 41.7vw, 760px); display: flex; align-items: center; }
  .partner-photo-hero-img { top: 0; height: 100%; object-position: center center; }
  /* held firmer from 30% to 42% where the lead's line ends meet the hanging plant: on wide
     screens the copy follows the centred page margin while the photo scales with the screen */
  .page-hero.partner-photo-hero::before { background: linear-gradient(90deg, rgba(255, 255, 255, .74) 0%, rgba(255, 255, 255, .55) 30%, rgba(255, 255, 255, .45) 42%, rgba(255, 255, 255, 0) 62%); }
  /* the copy keeps inside the left 45%, clear of the plant: the heading keeps its 12ch, the rest at most 440px */
  .page-hero.partner-photo-hero .wrap > :not(.display) { max-width: min(440px, 31vw); }
}
/* 1024–1199px: the hero is taller than the photo's own shape, so the sides crop more; 60% keeps
   the client's whole head in on the right and the dark mirror clear of the words on the left */
@media (min-width: 1024px) and (max-width: 1199px) {
  .partner-photo-hero-img { object-position: 60% 50%; }
}
/* The rotation, one 24-second cycle: the barber shows first (0–6.5s), the fleet fades in over
   it in 1.5s and holds (8–16s), the takeaway fades in over the fleet and holds (16–22.5s),
   then fades out to the barber. Each photo fades in over the one before and the one under it
   only leaves once it is covered, so a crossfade never shows two half-faded pictures. Later
   images stack above earlier ones (DOM order). */
.partner-photo-hero-img.is-rotating { opacity: 0; animation: 24s ease-in-out infinite both; }
.partner-photo-hero-img.is-fleet { animation-name: partner-hero-fleet; animation-delay: 6.5s; }
.partner-photo-hero-img.is-takeaway { animation-name: partner-hero-takeaway; animation-delay: 14.5s; }
@keyframes partner-hero-fleet { 0% { opacity: 0; } 6.25% { opacity: 1; } 39.58% { opacity: 1; } 45.83% { opacity: 0; } 100% { opacity: 0; } }
@keyframes partner-hero-takeaway { 0% { opacity: 0; } 6.25% { opacity: 1; } 33.33% { opacity: 1; } 39.58% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .partner-photo-hero-img.is-rotating { display: none; animation: none; }
}
/* a full-bleed photograph hero (About) */
.photo-hero { position: relative; min-height: 78vh; display: flex; align-items: flex-end; overflow: hidden; background: var(--dark); color: var(--white); }
.photo-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* deeper from 40% down, so the words over the pale arcade roof keep a dark ground on a phone */
.photo-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 11, 31, .15) 0%, rgba(12, 11, 31, .6) 40%, rgba(12, 11, 31, .85) 100%); }
.photo-hero .wrap { position: relative; z-index: 1; padding-top: 96px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 14px; }
.photo-hero .display { color: var(--white); max-width: 12ch; }
.photo-hero .eyebrow { color: var(--white); }
.photo-hero .lead { color: rgba(255, 255, 255, .84); max-width: 34ch; }
@media (min-width: 768px) { .photo-hero .wrap { padding-bottom: 88px; } }

/* feature cards: a chip or a number, a title and one line */
.features { display: grid; gap: 12px; }
.feature { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 22px 22px 24px; border-radius: 24px; background: var(--white); box-shadow: var(--shadow-card); }
.feature .h3 { font-size: 20px; }
.feature p { color: var(--muted); }
.features-after { margin-top: 40px; }
@media (min-width: 768px) {
  .features { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .features-3 { grid-template-columns: repeat(3, 1fr); }
  .feature { padding: 28px; border-radius: 28px; }
}

/* the journeys: one card per way in */
.journeys { display: grid; gap: 16px; }
.journey { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 28px 24px; border-radius: 28px; background: var(--surface); overflow: hidden; scroll-margin-top: 80px; }
.journey .lead { font-size: 17px; max-width: 32ch; }
.journey .actions { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 10px; }
.on-surface .journey { background: var(--white); box-shadow: var(--shadow-card); }
.on-dark .feature p { color: rgba(255, 255, 255, .72); }
@media (min-width: 900px) {
  .journeys { grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
  .journey { padding: 36px 32px; }
}

/* the Download page: the badges, a QR code for a desktop reader, the phone */
.download-hero .badges { justify-content: flex-start; }
.qr { display: none; }
@media (min-width: 900px) {
  .qr { display: flex; align-items: center; gap: 16px; margin-top: 18px; padding: 14px 18px 14px 14px; border-radius: 20px; background: var(--surface); }
  .qr img { width: 96px; height: 96px; border-radius: 12px; background: var(--white); }
  .qr p { font-size: 15px; color: var(--muted); max-width: 22ch; }
  .qr strong { display: block; color: var(--ink); font-weight: 600; }
}

/* a quiet statement band (Fleets) */
.statement { padding: 72px 0; }
.statement .wrap { display: flex; flex-direction: column; gap: 20px; max-width: 860px; }
.statement p { font-size: 22px; line-height: 1.45; color: var(--text); letter-spacing: -0.01em; }
.statement p.muted { color: var(--muted); }
@media (min-width: 768px) { .statement { padding: 120px 0; } .statement p { font-size: 30px; line-height: 1.35; } }

/* quiet cards side by side (About: investors / contact; Contact: support / investors) */
.facts { display: grid; gap: 16px; }
.fact { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 28px 24px; border-radius: 28px; background: var(--surface); scroll-margin-top: 80px; }
.fact p { color: var(--muted); max-width: 36ch; }
.fact .actions { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 8px; }
.fact address { font-style: normal; color: var(--muted); line-height: 1.6; }
@media (min-width: 768px) { .facts { grid-template-columns: 1fr 1fr; gap: 20px; } .facts-3 { grid-template-columns: repeat(3, 1fr); } .fact { padding: 36px 32px; } }

/* roadmap cards (Help shape Frenzi): a name, one line or a short list, the form behind a disclosure */
.roadmap { display: grid; gap: 20px; }
.road { display: flex; flex-direction: column; border-radius: 28px; background: var(--white); box-shadow: var(--shadow-card); overflow: hidden; scroll-margin-top: 80px; }
.road-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px; }
.road-body > p { color: var(--muted); max-width: 52ch; }
.road details { width: 100%; margin-top: 6px; }
/* The summary stays visible when the form opens (hiding it dropped keyboard focus to the
   page) and swaps its label to "Hide form", so the form can be closed again. */
.road summary { list-style: none; display: inline-flex; }
.road summary::-webkit-details-marker { display: none; }
.road details:not([open]) .when-open, .road details[open] .when-closed { display: none; }
.road details[open] > summary { margin-bottom: 20px; background: var(--surface); color: var(--ink); box-shadow: none; }
@media (min-width: 900px) {
  .road { flex-direction: row; }
  .road-body { padding: 36px 40px; flex: 1; }
}

/* The driver fee panel (Drive). 77p + VAT is the headline, in the button gradient at display
   size; £1.27 + VAT is the second row in ink. Under them, the facts every driver asks: where
   the fee comes from, and when they see it. No vehicle list: which vehicles count as "larger
   and luxury" is not decided, so the page does not say. */
.fee-panel { display: grid; border-radius: 32px; background: var(--surface); padding: 4px 24px 24px; }
.fee-row { display: flex; flex-direction: column; gap: 10px; padding: 28px 0; border-bottom: 1px solid var(--line); }
/* line-height 1.15 keeps the descender of the "p" in 77p clear of the line under it;
   min(96px, 23vw) keeps "77p + VAT" inside a 320px phone; only the number refuses to wrap,
   so "+ VAT" can drop under it if text is enlarged */
.fee-figure { font-size: min(96px, 23vw); line-height: 1.15; font-weight: 700; letter-spacing: -0.05em; color: var(--ink); }
.fee-figure .brand-text { white-space: nowrap; }
.fee-figure small { font-size: 26px; font-weight: 600; letter-spacing: -0.01em; color: var(--muted); }
.fee-figure-2 { font-size: 52px; letter-spacing: -0.04em; }
.fee-figure-2 small { font-size: 20px; }
.fee-label { font-size: 19px; line-height: 1.4; color: var(--text); max-width: 30ch; }
.fee-points { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; }
.fee-points li { position: relative; padding-left: 30px; color: var(--text); }
.fee-points li::before { content: ""; position: absolute; left: 0; top: .2em; width: 20px; height: 20px; border-radius: 50%; background: var(--brand-logo); }
.fee-points li::after { content: ""; position: absolute; left: 7px; top: calc(.2em + 5px); width: 5px; height: 9px; border-right: 2px solid var(--white); border-bottom: 2px solid var(--white); transform: rotate(45deg); }
@media (min-width: 900px) {
  .fee-panel { grid-template-columns: 1.25fr 1fr; column-gap: 56px; padding: 24px 56px 48px; }
  .fee-row { border-bottom: 0; padding: 40px 0 24px; }
  .fee-row + .fee-row { padding-left: 56px; border-left: 1px solid var(--line); }
  .fee-figure { font-size: 168px; }
  .fee-figure small { font-size: 40px; }
  .fee-figure-2 { font-size: 88px; padding-top: 34px; }
  .fee-figure-2 small { font-size: 28px; }
  .fee-points { grid-column: 1 / -1; flex-direction: row; gap: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
}

/* a short note under a section: the fare small print, a caveat */
.note { padding: 16px 18px; border-radius: 16px; background: var(--surface); font-size: 15px; line-height: 1.5; color: var(--text); max-width: 68ch; }
.on-surface .note { background: var(--white); }
.on-dark .note { background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .82); }
.note a { color: var(--pink-text); font-weight: 500; }
.on-dark .note a { color: var(--white); text-decoration: underline; }

/* a plain bulleted list in body copy (roadmap plans) */
.bullets { display: flex; flex-direction: column; gap: 10px; max-width: 62ch; }
.bullets li { position: relative; padding-left: 22px; color: var(--text); }
.bullets li::before { content: ""; position: absolute; left: 4px; top: .68em; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-logo); }
.on-dark .bullets li { color: rgba(255, 255, 255, .86); }

/* company details (About): a two-column list on a desktop, stacked on a phone.
   minmax(0, …) and overflow-wrap let the column shrink to a phone's width at double text size */
.company { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 32px; max-width: 760px; margin: 0; }
.company dt { font-size: 14px; font-weight: 600; color: var(--muted); padding-top: 14px; }
.company dd { margin: 0; color: var(--ink); padding-bottom: 14px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
@media (min-width: 768px) {
  .company { grid-template-columns: 220px minmax(0, 1fr); }
  .company dt, .company dd { padding: 16px 0; border-bottom: 1px solid var(--line); }
}

/* ===================== 10. forms ===================== */
/* The markup each field gets: a <label class="field"> holding the label text, the control,
   and an optional hint or error line. FrenziLandingFieldUi and its select/textarea siblings
   emit exactly this; SiteForm supplies the posted-back value and the error text. */
.form { display: flex; flex-direction: column; gap: 20px; width: 100%; }
/* minmax(0, 1fr), not 1fr: a select is as wide as its longest option, and at double text size
   that pushed the whole form off a phone screen */
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field-label { font-size: 14px; font-weight: 600; color: var(--ink); }
.field-input { width: 100%; min-height: 52px; padding: 14px 16px; border: 1px solid var(--field-line); border-radius: 14px; background: var(--white); font: inherit; font-size: 1.0625rem; color: var(--ink); -webkit-appearance: none; appearance: none; transition: border-color .15s ease, box-shadow .15s ease; }
textarea.field-input { min-height: 140px; resize: vertical; line-height: 1.45; }
select.field-input { padding-right: 44px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 16px center; }
.field-input::placeholder { color: var(--muted); }
/* the same 3px ring as everywhere else, not a faint halo */
.field-input:focus { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--pink-text); box-shadow: none; }
.field-error .field-input { border-color: var(--red-text); border-width: 2px; }
/* the error summary site.js puts at the top of a form the browser refused */
.form-errors { padding: 14px 16px; border-radius: 14px; background: var(--red-tint); color: var(--red-text); font-size: .9375rem; font-weight: 500; }
.form-errors:focus { outline: 3px solid var(--red-text); outline-offset: 2px; }
.form-errors ul { margin-top: 6px; padding-left: 18px; list-style: disc; }
.form-errors li + li { margin-top: 8px; }
.form-errors a { color: var(--red-text); text-decoration: underline; }
/* loading: brand.js and site.js mark a pressed submit button data-busy="true", and its label
   changes to its data-busy-label */
.btn[data-busy="true"] { cursor: progress; }
.field-error-text { font-size: 14px; color: var(--red-text); }
.field-hint { font-size: 14px; color: var(--muted); }
.check { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 14px; background: var(--surface); font-size: 15px; color: var(--text); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--pink); flex: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; }
.chips legend { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 8px; padding: 0; }
.chips .field-error-text { flex-basis: 100%; }
.chip-option { position: relative; }
.chip-option input { position: absolute; opacity: 0; pointer-events: none; }
.chip-option span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--field-line); background: var(--white); font-size: .9375rem; color: var(--text); cursor: pointer; }
.chip-option input:checked + span { border-color: transparent; background: var(--brand-button); color: var(--white); }
.chip-option input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.optional { font-weight: 400; color: var(--muted); }

/* a form's "What happens next" column, and any numbered walkthrough */
.next-steps { display: flex; flex-direction: column; gap: 14px; counter-reset: next; }
.next-steps li { position: relative; padding-left: 40px; color: var(--text); counter-increment: next; }
.next-steps li::before { content: counter(next); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--brand-button); color: var(--white); font-size: 14px; font-weight: 700; }
.form-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.form-foot .small a { color: var(--pink-text); }
/* links inside running text are underlined, so colour is not the only cue */
.form-foot .small a, .faq-answer a, .footer-bottom p a, .store-status a, .lead a { text-decoration: underline; text-underline-offset: 2px; }
.form-status { padding: 14px 16px; border-radius: 14px; font-size: 15px; font-weight: 500; }
.form-status-success { background: var(--green-tint); color: var(--green-text); }
.form-status-fail { background: var(--red-tint); color: var(--red-text); }
.form-status-info { background: var(--surface); color: var(--ink); }
/* a submission's outcome sits just above the form it came from */
.form-card .form-status, .road .form-status { margin-bottom: 20px; }
@media (min-width: 768px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-wide, .form-grid .chips, .form-grid .check { grid-column: 1 / -1; }
  .form-foot { flex-direction: row; align-items: center; gap: 20px; }
}

/* a form beside a quiet column (Contact, Delete account, Partner) */
.form-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.form-card { padding: 28px 24px; border-radius: 28px; background: var(--white); box-shadow: var(--shadow-card); }
.form-aside { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 900px) {
  .form-layout { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; align-items: start; }
  .form-card { padding: 40px; }
}

/* ===================== 11. faq ===================== */
.faq-groups { display: flex; flex-direction: column; gap: 56px; }
.faq-group { display: flex; flex-direction: column; scroll-margin-top: 80px; }
.faq-group .h3 { margin-bottom: 8px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 18px 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translate(-3px, -3px); transition: transform .2s ease; }
.faq-item[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.faq-answer { padding: 0 0 22px; color: var(--muted); max-width: 62ch; }
.faq-answer a { color: var(--pink-text); font-weight: 500; }
.faq-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 48px; }
.faq-jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--surface); font-size: 15px; font-weight: 500; color: var(--ink); }

/* ===================== 12. legal ===================== */
/* The one legal renderer (FrenziLandingLegalDocumentUi) maps each block kind to one class:
   paragraph → .legal p · bullets → .legal ul · callout → .legal-callout ·
   links → .legal-links · keyValues → .legal-table. Terms, Privacy and Delete account all use it. */
.legal { display: flex; flex-direction: column; gap: 40px; }
.legal-section { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 80px; }
.legal-section .h3 { margin-bottom: 2px; }
.legal p { color: var(--text); max-width: 68ch; }
.legal ul { display: flex; flex-direction: column; gap: 10px; max-width: 68ch; }
.legal li { position: relative; padding-left: 22px; color: var(--text); }
.legal li::before { content: ""; position: absolute; left: 4px; top: .68em; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-logo); }
.legal-callout { padding: 18px 20px; border-radius: 16px; background: var(--surface); color: var(--ink); font-weight: 500; max-width: 68ch; }
.legal-links { display: flex; flex-wrap: wrap; gap: 10px; }
.legal-links a { display: inline-flex; flex-direction: column; gap: 2px; max-width: 100%; padding: 14px 18px; border-radius: 16px; background: var(--surface); }
.legal-links a span { font-size: 13px; color: var(--muted); }
/* an email address has no spaces, so it may break anywhere rather than run off a phone screen */
.legal-links a strong { font-weight: 600; color: var(--pink-text); overflow-wrap: anywhere; }
/* keyValues renders as a two-column table (FrenziLandingLegalTableUi) */
.legal-table { width: 100%; max-width: 68ch; border-collapse: collapse; font-size: 15px; }
.legal-table th { padding: 0 0 10px; text-align: left; font-size: 13px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--line); }
.legal-table td { padding: 12px 0; vertical-align: top; color: var(--text); border-bottom: 1px solid var(--line); }
.legal-table td:first-child, .legal-table th:first-child { width: 42%; padding-right: 20px; }
.legal-table td:first-child { font-weight: 600; color: var(--ink); }
.legal-meta { font-size: 14px; color: var(--muted); }

/* ===================== 13. footer ===================== */
/* while the fixed cookie banner shows, extra room at the foot keeps the last footer row clear of it */
html:has(form.cookies) .footer { padding-bottom: 200px; }
.footer { padding: 56px 0 120px; background: var(--white); color: var(--muted); font-size: 14px; border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 20px; }
/* footer links are 44px tall so a thumb finds them */
.footer-col h2, .footer-col h3 { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.footer-col a { display: flex; align-items: center; min-height: 44px; color: var(--muted); }
.footer-col a:hover { color: var(--ink); }
.footer-bottom a { display: inline-block; padding: 12px 0; }
.footer address .small { display: block; margin-bottom: 2px; font-weight: 600; color: var(--ink); }
/* the landscape FRENZI wordmark on its gradient band */
.brand-footer img { width: 160px; height: auto; aspect-ratio: 1992 / 934; border-radius: 12px; margin-bottom: 14px; }
/* its left edge lines up with "Registered office" and the address under it: the footer column
   rule makes every link a full-width flex row and .brand centres its contents, so the logo
   floated to the middle of the column; start it at the column's edge and let the link hug it */
.footer-col a.brand-footer { justify-content: flex-start; width: fit-content; }
.footer-bottom { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.socials { display: flex; gap: 6px; }
.socials a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink); }
.socials a:hover { background: var(--surface); }
.socials svg { width: 18px; height: 18px; }
.footer address { font-style: normal; line-height: 1.6; }
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; }
  .footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ===================== 14. cookie banner ===================== */
/* Compact: one sentence and two equal buttons, so Reject is as easy as Accept. The server
   leaves the banner out once the frenzi_cookie_consent cookie is set. */
.cookies { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 12px 12px 16px; border-radius: 18px; background: var(--white); box-shadow: 0 12px 40px rgba(11, 11, 15, .18); border: 1px solid var(--line); font-size: 14px; line-height: 1.4; color: var(--text); }
.cookies p { flex: 1 1 220px; }
.cookies a { color: var(--pink-text); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.cookies-actions { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 auto; }
.cookies .btn { min-height: 44px; padding: 0 18px; font-size: .875rem; flex: 1 1 auto; }
@media (min-width: 768px) {
  .cookies { left: auto; right: 24px; bottom: 24px; width: 520px; flex-wrap: nowrap; }
  .cookies-actions { flex: none; }
  .cookies .btn { flex: none; }
}

/* ===================== 15. reveal (script-only) ===================== */
html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
html.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; transition: none; } }
@media print { html.js .reveal { opacity: 1; transform: none; } }

/* the line under a store badge pair while the iPhone app is in review (FrenziLandingStoreBadgesUi) */
.store-status { max-width: 40ch; font-size: .875rem; color: var(--muted); }
.actions .store-status { flex-basis: 100%; }
.final-block .store-status { color: var(--white); font-weight: 500; text-shadow: 0 1px 1px rgba(110, 18, 52, .18); }