/* wavomaps.com. Samuel's pick on 4 Nov 2026: the Loud layout (Partiful's big type and tilted photo cards, Monzo's pastel
   tiles) set in Figtree, the Night drive version's face, at its heaviest for headlines.
   Colours are the App Store screenshots' own: navy ink, Wavo coral and the pastel grounds. */
:root {
  --navy: #141A33;
  --ink-2: #3A4060;
  --muted: #6B7090;
  --line: #E3E6F0;
  --coral: #FF5E3F;
  --coral-deep: #E9472A;
  --black: #000000;
  --on-black: #CFCFD8;
  --peach: #FFE3D8;
  --mint: #DDF3E6;
  --lav: #DCE5FF;
  --butter: #FFF0C8;
  --lilac: #EEDDF4;
  --sky: #DDF1FF;
  --paper: #FFFFFF;
  --off: #F4F5FA;
  --body: "Figtree", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --wrap: 1200px;
  --gutter: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--navy); font: 400 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p, figure { margin: 0; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 8px; }
section { position: relative; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 40px); margin-inline: auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }
.center { text-align: center; }

/* ---------- top bar */
.nav { position: absolute; inset: 0 0 auto; z-index: 20; color: #fff; padding-top: env(safe-area-inset-top, 0px); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 76px; }
/* The logo (6 November 2026): "wav" with the app icon's limit roundel as the o. */
.brand { display: inline-flex; align-items: baseline; font: 900 30px/1 var(--body); letter-spacing: -0.05em; text-decoration: none; white-space: nowrap; }
.brand svg { width: 0.64em; height: 0.64em; margin-left: 0.035em; flex: none; align-self: baseline; transform: translateY(0.035em); }
.nav-links { display: none; gap: 28px; font-weight: 600; font-size: 15.5px; }
.nav-links a { text-decoration: none; opacity: 0.8; transition: opacity 0.15s; }
.nav-links a:hover { opacity: 1; }
@media (min-width: 900px) { .nav-links { display: flex; } }
.nav .btn { height: 42px; padding: 0 18px; font-size: 15px; }
@media (max-width: 520px) { .nav .btn .long { display: none; } }
@media (max-width: 380px) {
  .nav .wrap { gap: 12px; }
  .nav .btn { padding: 0 14px; font-size: 14px; }
  .nav .btn svg { display: none; }
  .brand { font-size: 27px; }
}

/* ---------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 26px; border-radius: 999px; font: 700 17px/1 var(--body); text-decoration: none; white-space: nowrap; border: 0; transition: transform 0.15s ease, background-color 0.15s ease; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-coral { background: var(--coral); color: #fff; box-shadow: 0 12px 32px -12px rgba(255, 94, 63, 0.75); }
a.btn-coral:hover { background: var(--coral-deep); transform: translateY(-1px); }
.btn-ghost { color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
a.btn-ghost:hover { transform: translateY(-1px); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.fine { font-size: 14.5px; opacity: 0.75; }

/* ---------- headings */
.kicker { font: 500 13px/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--coral); }
.h2 { font: 900 clamp(40px, 6vw, 80px)/1 var(--body); letter-spacing: -0.045em; text-wrap: balance; }
.lede { font-size: clamp(18px, 1.5vw, 20px); color: var(--ink-2); max-width: 54ch; text-wrap: pretty; }
.center .lede { margin-inline: auto; }
.section-head { display: grid; gap: 18px; margin-bottom: clamp(36px, 5vw, 64px); }

/* ---------- opening: big words beside the themes as tilted photo cards */
.hero { padding-block: 128px 84px; background: var(--black); color: #fff; overflow: clip; }
.hero-grid { display: grid; gap: 56px; align-items: center; }
@media (min-width: 980px) { .hero-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); } }
.hero-title { font: 900 clamp(56px, 8.4vw, 118px)/0.95 var(--body); letter-spacing: -0.05em; text-wrap: balance; }
.hero-sub { margin-top: 28px; max-width: 36ch; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--on-black); text-wrap: pretty; }
.hero .cta-row { margin-top: 30px; }
.hero .fine { margin-top: 14px; }
.collage { position: relative; width: 100%; max-width: 540px; aspect-ratio: 1 / 1.08; justify-self: center; }
.collage figure { position: absolute; left: var(--x); top: var(--y); width: 74%; padding: 6px; border-radius: 24px; background: #fff; transform: rotate(var(--r)); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6); }
.collage img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 18px; }
.sticker { position: absolute; z-index: 2; left: 18px; bottom: -16px; padding: 9px 16px; border-radius: 999px; background: #fff; color: #000; font: 800 15px/1 var(--body); white-space: nowrap; transform: rotate(var(--s, -4deg)); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); }
.sticker.coral { background: var(--coral); color: #fff; }
/* Labels on a card's top corners where the next card in the pile would cover the bottom one. */
.sticker.tl { bottom: auto; top: -16px; }
.sticker.tr { bottom: auto; top: -16px; left: auto; right: 18px; }

/* ---------- marquee */
.marquee { background: var(--coral); color: #0B0B0B; overflow: hidden; padding-block: 16px; }
.marquee-track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.marquee-track span { display: inline-flex; align-items: center; gap: 26px; padding-right: 26px; font: 900 clamp(26px, 3vw, 40px)/1.1 var(--body); letter-spacing: -0.03em; white-space: nowrap; }
.marquee-track span::after { content: ""; width: 11px; height: 11px; border-radius: 50%; background: currentColor; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---------- Monzo-style tiles */
.tiles-section { padding-block: clamp(84px, 10vw, 140px); background: var(--paper); }
.tiles { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tile { display: flex; flex-direction: column; gap: 12px; overflow: hidden; min-height: 430px; padding: 30px 30px 0; border-radius: 30px; background: var(--tint); }
@media (max-width: 699px) { .tile { min-height: 0; } }
.tile h3 { font: 900 clamp(30px, 2.8vw, 36px)/1.02 var(--body); letter-spacing: -0.045em; }
.tile p { color: var(--ink-2); font-size: 16.5px; }
.tile-art { margin-top: auto; padding-top: 26px; display: flex; justify-content: center; align-items: flex-end; }
.tile-art img { width: var(--w, 94%); max-width: none; margin-bottom: var(--mb, -6%); }

/* ---------- photo band */
.photo-band { display: grid; align-items: end; min-height: clamp(560px, 70vw, 780px); color: #fff; background: var(--black) var(--photo) center / cover no-repeat; }
.photo-band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.78)); }
.photo-band .wrap { position: relative; display: grid; gap: 18px; padding-block: clamp(48px, 7vw, 88px); }
.photo-band .lede { color: #E6E6EE; }

/* ---------- themes as tilted photo cards */
.themes { padding-block: clamp(84px, 10vw, 140px); background: var(--black); color: #fff; }
.themes .lede { color: var(--on-black); }
.theme-grid { display: grid; gap: clamp(30px, 3.4vw, 40px) clamp(16px, 2.6vw, 30px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .theme-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.theme-grid figure { position: relative; padding: 5px; border-radius: 20px; background: #fff; transform: rotate(var(--r)); transition: transform 0.25s ease; }
.theme-grid figure:hover { transform: rotate(0deg) scale(1.03); }
.theme-grid img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 15px; }
.theme-grid .sticker { font-size: 14px; padding: 8px 13px; bottom: -14px; left: 12px; }
@media (prefers-reduced-motion: reduce) { .theme-grid figure { transition: none; } }

/* ---------- CarPlay */
.carplay { padding-block: clamp(84px, 10vw, 140px); background: var(--black); color: #fff; border-top: 1px solid #1C1C22; }
.carplay-grid { display: grid; gap: 44px; align-items: center; }
@media (min-width: 900px) { .carplay-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.carplay .lede { color: var(--on-black); }
.carplay-shot { width: min(100%, 470px); aspect-ratio: 4 / 4.6; object-fit: cover; object-position: center 64%; border-radius: 32px; justify-self: center; box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55); }

/* ---------- the rest of what it does */
.extras { padding-block: clamp(84px, 10vw, 130px); background: var(--off); }
.extra-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .extra-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .extra-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.extra { display: grid; gap: 10px; align-content: start; padding: 26px; border-radius: 24px; background: #fff; }
.extra svg { width: 34px; height: 34px; color: var(--coral); }
.extra h3 { font: 800 21px/1.2 var(--body); letter-spacing: -0.01em; }
.extra p { color: var(--ink-2); font-size: 16px; }

/* ---------- pricing */
.pricing { padding-block: clamp(84px, 10vw, 140px); background: var(--paper); }
.plans { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); max-width: 780px; margin: 0 auto; }
@media (min-width: 640px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plan { position: relative; display: grid; gap: 6px; padding: 30px; border-radius: 28px; background: #fff; box-shadow: inset 0 0 0 2px var(--line); }
.plan.best { box-shadow: inset 0 0 0 3px var(--coral); }
.plan .name { font-weight: 800; font-size: 18px; }
.price { font: 900 64px/1 var(--body); letter-spacing: -0.045em; }
.per { color: var(--muted); }
.badge { position: absolute; top: 24px; right: 24px; padding: 7px 11px; border-radius: 999px; background: var(--coral); color: #fff; font: 800 13px/1 var(--body); letter-spacing: 0.02em; }
.pricing .fine { margin-top: 24px; text-align: center; color: var(--muted); opacity: 1; }

/* ---------- footer */
.foot { padding-block: 56px calc(44px + env(safe-area-inset-bottom, 0px)); background: var(--black); color: var(--on-black); }
.foot .wrap { display: grid; gap: 16px; }
.foot .brand { color: #fff; }
.foot p { max-width: 60ch; }
.foot small { display: block; font-size: 13.5px; line-height: 1.6; color: #8A8A96; }

/* ---------- privacy, terms and support: a black band for the top bar to sit on, then the words */
.doc-wrap { max-width: calc(760px + 40px); }
.doc-head { background: var(--black); color: #fff; padding: calc(132px + env(safe-area-inset-top, 0px)) 0 48px; }
.doc-head h1 { font: 900 clamp(44px, 9vw, 76px)/0.95 var(--body); letter-spacing: -0.045em; }
.doc-head p { margin-top: 14px; color: var(--on-black); font-size: 15.5px; }
.doc { padding: 40px 0 88px; }
.doc h2 { font: 800 25px/1.2 var(--body); letter-spacing: -0.02em; margin: 44px 0 12px; }
.doc h3 { font: 700 18.5px/1.3 var(--body); margin: 28px 0 8px; }
.doc p + p { margin-top: 12px; }
.doc ul { margin: 12px 0 0; padding-left: 1.2em; }
.doc li + li { margin-top: 8px; }
.doc li::marker { color: var(--coral); }
.doc a { color: var(--coral-deep); text-underline-offset: 3px; overflow-wrap: anywhere; }
.doc-summary { background: var(--off); border-radius: 22px; padding: 18px 24px 20px; }
.doc-summary ul { margin: 0; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 22px; font-weight: 600; }
.foot-links a { color: #fff; text-decoration: none; opacity: 0.85; }
.foot-links a:hover { opacity: 1; text-decoration: underline; }