/* ==========================================================================
   Vatulo — vatulo.com
   ==========================================================================
   One stylesheet, no build step, no framework. The palette is the app's own
   design tokens restated as custom properties; the app is dark-only by design,
   so there is a single palette rather than a light/dark pair.

   The one rule worth repeating from the app's token file, because a marketing
   page is exactly where it gets broken: the three-stop gradient is a brand
   moment, not a decoration. It paints the wordmark and the single call to
   action that matters. Everything else is solid violet or a surface. Four
   gradient buttons on a page means none of them is the important one.
   ========================================================================== */

@import url('../fonts/fonts.css');

:root {
  /* Ground and surfaces */
  --bg: #0a0a0f;
  --surface-sunken: #101017;
  --surface: #16161f;
  --surface-elevated: #1e1e29;
  --surface-overlay: #252533;
  --border: #26262f;
  --border-strong: #3a3a48;

  /* Type */
  --text: #ffffff;
  --text-secondary: #9ca3af;
  --text-tertiary: #858e9c;

  /* Accent. One violet, used for the things you can act on. */
  --primary: #8b5cf6;
  --primary-deep: #7c3aed;
  --primary-soft: rgba(139, 92, 246, 0.14);
  --primary-soft-border: rgba(139, 92, 246, 0.32);

  /* Gradient stops */
  --brand-violet: #a855f7;
  --brand-pink: #ec4899;
  --brand-orange: #f97316;
  --gradient-warm: linear-gradient(100deg, var(--brand-violet), var(--brand-pink) 55%, var(--brand-orange));
  --gradient-cool: linear-gradient(100deg, var(--brand-violet), var(--brand-pink));

  /* Trust is blue, never violet, so safety never reads as brand decoration. */
  --trust: #3b82f6;
  --trust-soft: rgba(59, 130, 246, 0.12);
  --trust-soft-border: rgba(59, 130, 246, 0.3);
  --success: #22c55e;

  /* 4pt scale */
  --s-xs: 4px;
  --s-sm: 8px;
  --s-md: 12px;
  --s-lg: 16px;
  --s-xl: 24px;
  --s-2xl: 32px;
  --s-3xl: 48px;
  --s-4xl: 72px;

  --r-control: 12px;
  --r-card: 22px;
  --r-sheet: 28px;
  --r-pill: 999px;

  --measure: 62ch;
  --page: 1140px;

  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The sticky header is 64px; anchored sections should not land under it. */
  scroll-padding-top: 88px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 800;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--brand-pink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip link — the header nav is otherwise the first tab stop on every page. */
.skip {
  position: absolute;
  left: -9999px;
  top: var(--s-sm);
  padding: var(--s-md) var(--s-lg);
  background: var(--surface-elevated);
  border-radius: var(--r-control);
  z-index: 200;
}

.skip:focus { left: var(--s-sm); }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--s-xl);
}

.section { padding-block: clamp(56px, 9vw, 112px); }
.section--tight { padding-block: clamp(40px, 6vw, 72px); }

/* A hairline rather than a block edge: sections differ by rhythm, not colour,
   and painting alternate bands would flatten the whole page. */
.section--ruled { border-top: 1px solid var(--border); }

.stack { display: flex; flex-direction: column; gap: var(--s-lg); }
.stack--tight { gap: var(--s-sm); }

/* --------------------------------------------------------------------------
   Type scale
   -------------------------------------------------------------------------- */

.display {
  font-size: clamp(2.5rem, 6.6vw, 4.25rem);
  letter-spacing: -0.045em;
}

.h2 {
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  letter-spacing: -0.035em;
}

.h3 {
  font-size: clamp(1.125rem, 2vw, 1.3125rem);
  letter-spacing: -0.02em;
  font-weight: 700;
}

.lede {
  font-size: clamp(1.0625rem, 2vw, 1.3125rem);
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: var(--measure);
}

.muted { color: var(--text-secondary); }
.quiet { color: var(--text-tertiary); font-size: 0.875rem; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-sm);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 6px 14px;
}

/* A pill sizes to its text. As a child of a column flex container it would
   otherwise stretch the full width of the block and stop reading as a pill. */
.eyebrow { align-self: flex-start; }

.section__head--center .eyebrow,
.cta .eyebrow { align-self: center; }

.eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16);
}

.gradient-text {
  background: var(--gradient-warm);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --------------------------------------------------------------------------
   The brand marks

   Two pieces, and the rule for which to use is about the room available rather
   than taste. The symbol is the mark on its own — a V with a dot over it, which
   is also somebody with their arms up. The wordmark is the name. The lockup is
   both, and is the exception rather than the default.

   The app header carries the symbol alone. This site's nav carries the lockup,
   because a visitor who has just arrived does not yet know the name.
   -------------------------------------------------------------------------- */

/* Lowercase "vatulo", set in Quicksand — a display face with rounded terminals
   and a single-storey a. Inter sets everything else here; a wordmark in the
   same neutral grotesque as the body copy is not a wordmark, it is a heading. */
.wordmark {
  font-family: 'Quicksand', 'Trebuchet MS', -apple-system, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 1.5rem;
  line-height: 1;
  text-decoration: none;
  background: var(--gradient-cool);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.wordmark--lg { font-size: 2rem; }

/* The symbol. Sized by font-size so it can sit in a line of text and inherit,
   the way an icon should. */
.symbol {
  width: 1em;
  height: 1em;
  flex: none;
  display: block;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.42em;
  text-decoration: none;
  font-size: 1.5rem;
}

/* Optically, not literally: a round mark set to the same height as the letters
   beside it always looks the smaller of the two. */
.brand .symbol { width: 1.16em; height: 1.16em; }
.brand .wordmark { font-size: 1em; }

.brand--lg { font-size: 2rem; }

/* The lockup is wider than the wordmark was, and on a 320px header it and the
   button no longer both fit. The mark stays — it is the half that survives
   shrinking — and the whole lockup steps down instead of wrapping. */
@media (max-width: 400px) {
  .brand { font-size: 1.25rem; gap: 0.34em; }
  .brand--lg { font-size: 1.6rem; }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-sm);
  padding: 15px 26px;
  border-radius: var(--r-pill);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
  white-space: nowrap;
}

.btn:active { transform: translateY(1px); }

/* The brand moment. One per viewport. */
.btn--brand {
  background: var(--gradient-warm);
  color: #fff;
  box-shadow: 0 10px 30px -12px rgba(236, 72, 153, 0.55);
}

.btn--brand:hover {
  box-shadow: 0 14px 38px -12px rgba(236, 72, 153, 0.7);
  transform: translateY(-1px);
}

.btn--solid { background: var(--primary); color: #fff; }
.btn--solid:hover { background: var(--primary-deep); }

.btn--ghost {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text);
}

.btn--ghost:hover { background: var(--surface-elevated); border-color: var(--text-tertiary); }

.btn--sm { padding: 10px 18px; font-size: 0.9375rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-md); align-items: center; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 10, 15, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.header[data-scrolled='true'] {
  border-bottom-color: var(--border);
  background: rgba(10, 10, 15, 0.92);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-lg);
  height: 64px;
}

.nav { display: flex; align-items: center; gap: var(--s-xl); }

.nav a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  transition: color 0.15s ease;
}

.nav a:hover { color: var(--text); }

/* No hamburger. The nav is three anchors to sections of one page — on a phone
   the page itself is the menu, and a drawer would be a moving part that exists
   only to hide three words. */
@media (max-width: 780px) {
  .nav { display: none; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(48px, 8vw, 96px) clamp(56px, 9vw, 104px);
  overflow: hidden;
}

/* The aurora. Soft radial washes rather than an image, so it costs nothing and
   scales to any viewport. No `filter: blur` — on a huge element that is one of
   the few reliable ways to make a landing page stutter on a mid-range phone. */
.aurora {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 720px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(52% 46% at 22% 24%, rgba(168, 85, 247, 0.30), transparent 68%),
    radial-gradient(46% 42% at 74% 16%, rgba(236, 72, 153, 0.24), transparent 66%),
    radial-gradient(38% 40% at 58% 52%, rgba(249, 115, 22, 0.14), transparent 70%);
}

/* Fades the wash into the page instead of stopping at a hard edge. */
.aurora::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 45%, var(--bg));
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-xl);
}

@media (max-width: 940px) {
  .hero__grid { grid-template-columns: 1fr; text-align: center; }
  .hero__copy { align-items: center; }
  .hero .lede, .hero .trust-row { margin-inline: auto; }
  .hero .btn-row, .hero .trust-row { justify-content: center; }
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-md) 16px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.trust-row span { display: inline-flex; align-items: center; gap: 7px; }
.trust-row svg { flex: none; }

/* --------------------------------------------------------------------------
   Phone mockups
   -------------------------------------------------------------------------- */

.phones {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-block: var(--s-xl);
}

.phone {
  position: relative;
  flex: none;
  width: clamp(150px, 21vw, 224px);
  border-radius: 34px;
  padding: 7px;
  background: linear-gradient(160deg, #35354a, #16161f 42%, #0d0d13);
  box-shadow:
    0 2px 1px rgba(255, 255, 255, 0.10) inset,
    0 40px 80px -32px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(255, 255, 255, 0.04);
}

.phone img {
  border-radius: 27px;
  width: 100%;
  display: block;
  background: var(--bg);
}

/* The pill cut-out. Cosmetic — the screenshots were taken without one. */
.phone::after {
  content: '';
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  width: 27%;
  height: 8px;
  border-radius: var(--r-pill);
  background: #08080c;
}

/* The middle phone leads; the outer two sit back, lower and turned, which is
   what stops three equal rectangles from reading as a filmstrip. */
.phone--lead { z-index: 3; transform: translateY(-24px); }

.phone--left {
  z-index: 2;
  margin-right: -8%;
  transform: translateY(16px) rotate(-6deg);
  transform-origin: bottom right;
}

.phone--right {
  z-index: 2;
  margin-left: -8%;
  transform: translateY(16px) rotate(6deg);
  transform-origin: bottom left;
}

/* One phone on a narrow screen. Three at 320px wide are three thumbnails. */
@media (max-width: 620px) {
  .phone--left, .phone--right { display: none; }
  .phone--lead { transform: none; width: min(258px, 68vw); }
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: var(--s-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--s-xl);
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.card:hover { border-color: var(--border-strong); background: var(--surface-elevated); }

.card p { color: var(--text-secondary); font-size: 0.9375rem; }

.card__icon {
  width: 42px;
  height: 42px;
  border-radius: var(--r-control);
  display: grid;
  place-items: center;
  background: var(--primary-soft);
  border: 1px solid var(--primary-soft-border);
  color: var(--brand-violet);
  margin-bottom: var(--s-xs);
}

/* Safety wears blue, matching the app, where the verified tick is deliberately
   not brand violet — so trust never reads as decoration. */
.card--trust .card__icon {
  background: var(--trust-soft);
  border-color: var(--trust-soft-border);
  color: var(--trust);
}

.step__n {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--brand-pink);
}

/* --------------------------------------------------------------------------
   Section headers
   -------------------------------------------------------------------------- */

.section__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-lg);
  margin-bottom: clamp(32px, 5vw, 56px);
  max-width: 720px;
}

.section__head--center { margin-inline: auto; text-align: center; align-items: center; }

/* --------------------------------------------------------------------------
   Split feature block
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split__media { order: -1; }
}

.checklist {
  display: flex;
  flex-direction: column;
  gap: var(--s-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.checklist li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--s-md);
  align-items: start;
  color: var(--text-secondary);
}

.checklist strong { color: var(--text); display: block; font-weight: 650; }

.checklist svg { margin-top: 4px; color: var(--success); }

/* --------------------------------------------------------------------------
   Call to action
   -------------------------------------------------------------------------- */

.cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-sheet);
  border: 1px solid var(--border);
  background: var(--surface-sunken);
  padding: clamp(32px, 6vw, 64px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-xl);
}

.cta::before {
  content: '';
  position: absolute;
  inset: -60% -10% auto -10%;
  height: 340px;
  background:
    radial-gradient(50% 60% at 30% 60%, rgba(168, 85, 247, 0.26), transparent 70%),
    radial-gradient(46% 56% at 72% 44%, rgba(249, 115, 22, 0.18), transparent 70%);
  pointer-events: none;
}

.cta > * { position: relative; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--border);
  padding-block: var(--s-3xl) var(--s-2xl);
  background: var(--surface-sunken);
}

.footer__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2xl);
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--s-2xl);
}

.footer__links { display: flex; flex-wrap: wrap; gap: var(--s-lg) var(--s-2xl); }

.footer__links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
}

.footer__links a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

.footer__bottom {
  border-top: 1px solid var(--border);
  padding-top: var(--s-xl);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-md) var(--s-xl);
  justify-content: space-between;
  color: var(--text-tertiary);
  font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   Prose — the legal documents and the support page
   -------------------------------------------------------------------------- */

.prose {
  max-width: 74ch;
  color: var(--text-secondary);
  font-size: 1.0625rem;
  line-height: 1.72;
}

.prose > * + * { margin-top: var(--s-lg); }

.prose h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--text);
  letter-spacing: -0.04em;
}

.prose h2 {
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  color: var(--text);
  margin-top: var(--s-3xl);
  padding-top: var(--s-xl);
  border-top: 1px solid var(--border);
  letter-spacing: -0.03em;
}

.prose h3 { font-size: 1.125rem; color: var(--text); margin-top: var(--s-xl); }

.prose h1 + p { margin-top: var(--s-lg); }

.prose strong { color: var(--text); font-weight: 650; }

.prose a { color: var(--brand-violet); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--brand-pink); }

.prose ul, .prose ol {
  padding-left: var(--s-xl);
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
}

.prose li { padding-left: var(--s-xs); }
.prose li::marker { color: var(--text-tertiary); }

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  text-align: left;
}

.prose th, .prose td {
  padding: var(--s-md) var(--s-lg);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.prose th { color: var(--text); font-weight: 650; background: var(--surface); }

/* Wide tables scroll inside themselves rather than pushing the page sideways. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* The draft banner on the legal pages — a blockquote is what the markdown
   emits, and it is the most important thing on the page while it is true. */
.prose blockquote {
  margin: 0;
  padding: var(--s-lg) var(--s-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand-orange);
  border-radius: var(--r-control);
  font-size: 0.9375rem;
}

.prose blockquote > * + * { margin-top: var(--s-md); }

.prose hr { border: 0; border-top: 1px solid var(--border); margin-block: var(--s-2xl); }

.page-head { padding-block: clamp(40px, 7vw, 72px) var(--s-xl); }

/* --------------------------------------------------------------------------
   Support page
   -------------------------------------------------------------------------- */

.contact-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--s-xl);
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.contact-card:hover {
  border-color: var(--primary-soft-border);
  background: var(--surface-elevated);
  transform: translateY(-2px);
}

.contact-card h3 { color: var(--text); }
.contact-card p { color: var(--text-secondary); font-size: 0.9375rem; margin: 0; }

.contact-card .go {
  color: var(--brand-violet);
  font-weight: 650;
  font-size: 0.9375rem;
  margin-top: auto;
  padding-top: var(--s-sm);
}

.mail {
  display: inline-flex;
  align-items: center;
  gap: var(--s-md);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  padding: 12px 22px;
  font-weight: 700;
  font-size: clamp(0.9375rem, 2.4vw, 1.125rem);
  text-decoration: none;
  color: var(--text);
  overflow-wrap: anywhere;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.mail:hover { border-color: var(--brand-pink); background: var(--surface-elevated); }

/* --------------------------------------------------------------------------
   Entrance animation
   -------------------------------------------------------------------------- */

/* Applied by JS only. Without JS the class is never added, so nothing is ever
   hidden — a landing page that renders blank when a script fails is worse than
   one that never animates. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Language switcher

   Quiet by design. It is not a call to action and it must not compete with the
   button beside it — but on a Quebec consumer site it also cannot be buried,
   because the French version is the one the law says is presented first. A
   bordered pill in the header, and again in the footer for anyone who reached
   the bottom before wondering.
   -------------------------------------------------------------------------- */

.header__end { display: flex; align-items: center; gap: var(--s-md); }

.lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.lang:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--surface);
}

.lang svg { flex: none; opacity: 0.75; }

/* Below the nav breakpoint the header is wordmark + switcher + button, which
   is the most a 360px header holds. The globe carries the meaning on its own
   at that width, and the label would push the button off the edge. */
@media (max-width: 480px) {
  .lang { padding: 8px 10px; }
  .lang span { display: none; }
}

/* --------------------------------------------------------------------------
   The closing line of a centred block

   "Go to parties. Host your own. Build your Crowd. Do it again next weekend."
   is a four-beat rhythm line, not prose. Three paragraphs of centred body copy
   in a row is the classic wall-of-text failure, so the third one stops being
   body copy: white instead of grey, a step up in weight, and its own breathing
   room above. It reads as the point the paragraphs were making.
   -------------------------------------------------------------------------- */

.closer {
  margin-top: var(--s-sm);
  max-width: 46ch;
  text-align: center;
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 650;
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--text);
}

/* Two lines on a desktop, three on a phone, and every one of them ends on a
   full stop. 'Build your Crowd. Do it again next weekend.' is five pixels too
   wide for a 390px screen, and the choice there is between shrinking the type
   below the paragraphs it is meant to land after, or breaking it a sentence
   earlier. The second break is the cheaper one. */
.closer .br-sm { display: none; }

@media (max-width: 560px) {
  .closer .br-sm { display: inline; }
}