/* ---------- Easy Evite — sky blue brand ---------- */
* { box-sizing: border-box; }
:root {
  --sky-50:  #F0F9FF;
  --sky-100: #E0F2FE;
  --sky-200: #BAE6FD;
  --sky-300: #7DD3FC;
  --sky-400: #38BDF8;
  --sky-500: #0EA5E9;   /* primary — brand accent, backgrounds, artwork */
  /* White text on --sky-500 is 2.77:1, well under the 4.5:1 WCAG AA minimum,
     so anything that puts white ON the blue uses this instead (5.70:1). The
     brand blue itself is unchanged everywhere it isn't carrying text. */
  --btn-primary: #0369A1;
  --btn-primary-hover: #075985;
  --sky-600: #0284C7;
  --sky-700: #0369A1;
  --sky-900: #0C4A6E;
  --ink: #0B2A45;
  --muted: #4A6F8C;
  --line: #D6ECFB;
  --paper: #ffffff;
  --shadow: 0 18px 40px -22px rgba(2, 132, 199, 0.45);
}

html, body { margin: 0; padding: 0; }
body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 80% -10%, var(--sky-200), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, var(--sky-100), transparent 55%),
    var(--sky-50);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}
.bg-clouds {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(60px 24px at 10% 20%, rgba(255,255,255,.7), transparent 65%),
    radial-gradient(80px 28px at 30% 18%, rgba(255,255,255,.55), transparent 65%),
    radial-gradient(70px 26px at 75% 30%, rgba(255,255,255,.6), transparent 65%),
    radial-gradient(90px 30px at 88% 12%, rgba(255,255,255,.5), transparent 65%);
}

a { color: var(--sky-700); text-decoration: none; }
a:hover { color: var(--sky-900); }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  backdrop-filter: blur(10px);
  background: rgba(240, 249, 255, 0.85);
  border-bottom: 1px solid var(--line);
  gap: 8px;
}
@media (min-width: 720px) { .nav { padding: 14px 24px; } }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; font-size: 18px; text-decoration: none; }
.logo svg { display: block; }
.logo-text { letter-spacing: -.5px; }
.logo-dot { color: var(--sky-500); }
.logo-tag {
  display: inline-block;
  background: var(--sky-100);
  color: var(--sky-700);
  font: 800 10px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  margin-left: 4px;
  border: 1px solid var(--sky-200);
}
@media (max-width: 380px) { .logo-tag { display: none; } }
.nav-links { display: flex; gap: 14px; font-weight: 500; font-size: 14px; align-items: center; }

/* The header is sticky, so an in-page jump to a section lands with its first
   rows hidden underneath it. Every anchor target keeps clear of it. */
#templates, #how, #free, #faq { scroll-margin-top: 72px; }
.nav-links a { color: var(--sky-700); }
.nav-links .nav-login {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 10px;
  color: white;
  box-shadow: 0 2px 6px rgba(2,132,199,.35);
}
.nav-links .nav-login:hover { color: white; }
@media (max-width: 540px) {
  /* keep auth state actions visible on mobile but hide marketing anchors */
  .nav-links a[href^="#"] { display: none; }
  .nav-links .muted { display: none; }
}

/* ---------- hero ---------- */
.hero {
  display: grid; gap: 36px;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  max-width: 1120px; margin: 0 auto;
  padding: 64px 24px 24px;
}
@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; padding-top: 32px; }
  .hero-art { order: -1; }
}

.badge {
  display: inline-block;
  background: var(--sky-100);
  color: var(--sky-700);
  font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--sky-200);
}
.hero h1 {
  font-size: clamp(34px, 5.4vw, 58px);
  line-height: 1.05; letter-spacing: -1px;
  margin: 18px 0 14px;
  color: var(--ink);
}
.lede { font-size: clamp(16px, 2.2vw, 19px); color: var(--muted); max-width: 540px; line-height: 1.55; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 20px 0 8px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 22px; border-radius: 12px;
  font-weight: 700; font-size: 15px; letter-spacing: .2px;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .15s, background .2s, border-color .2s, color .2s;
}
.btn.primary { background: var(--btn-primary); color: white; box-shadow: var(--shadow); }
.btn.primary:hover { background: var(--btn-primary-hover); color: white; }
.btn.primary:active { transform: translateY(1px); }
.btn.ghost { color: var(--sky-700); background: white; border-color: var(--sky-200); }
.btn.ghost:hover { border-color: var(--sky-400); color: var(--sky-900); }
.muted { color: var(--muted); }
.small { font-size: 13px; }

/* ---------- mini envelope ----------
   Layering when closed: back(1) < invite(2) < front cover(3) < flap(6) < seal(7).
   The front cover is a FULL rectangle (seam lines only drawn on), so the
   invite is completely hidden at rest — the envelope reads as sealed.
   On .open: seal pops, flap swings up (and drops behind), then the invite
   rises out of the top slot, and once clear of the cover it jumps to z(8)
   and scales up front-and-center. Confetti fires as it clears. */
.hero-art { display: grid; place-items: center; gap: 14px; }
.env-scene {
  /* Headroom for the invite to rise into without clipping the header. */
  padding-top: min(58vw, 240px);
}
.envelope.mini {
  position: relative;
  width: min(88vw, 430px);
  aspect-ratio: 1.45 / 1;
  perspective: 1200px;
}
.envelope.mini .back {
  position: absolute; inset: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--sky-400), var(--sky-600));
  box-shadow: 0 25px 40px -22px rgba(3, 105, 161, 0.55);
  z-index: 1;
}
.envelope.mini .letter {
  position: absolute;
  left: 50%; top: 7%;
  width: 46%; aspect-ratio: 5 / 7;
  transform: translateX(-50%);
  border-radius: 6px;
  overflow: hidden;
  background: white;
  z-index: 2;
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
  transition:
    transform .95s cubic-bezier(.2,.7,.2,1),
    box-shadow .95s ease,
    z-index 0s linear .55s; /* jump forward only once clear of the cover */
}
.envelope.mini .letter img { display: block; width: 100%; height: 100%; object-fit: cover; }
.envelope.mini .front {
  position: absolute; inset: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--sky-500), var(--sky-300) 55%, var(--sky-500));
  z-index: 3;
  /* Seam lines suggest the pocket without exposing what's inside. */
  background-image:
    linear-gradient(115deg, rgba(255,255,255,.22) 0 1.5px, transparent 1.5px 100%),
    linear-gradient(245deg, rgba(255,255,255,.22) 0 1.5px, transparent 1.5px 100%),
    linear-gradient(180deg, var(--sky-500), var(--sky-300) 55%, var(--sky-500));
  box-shadow: inset 0 2px 4px rgba(255,255,255,.25), inset 0 -2px 6px rgba(0,0,0,.15);
}
.envelope.mini .flap {
  position: absolute; left: 0; right: 0; top: 0;
  height: 52%;
  background: linear-gradient(180deg, var(--sky-400), var(--sky-500));
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  border-radius: 8px 8px 0 0;
  transform-origin: 50% 0%;
  transform: rotateX(0deg);
  /* Base = closing direction: wait for the invite to tuck back in (.55s)
     before the flap swings shut. Opening overrides these delays below. */
  transition:
    transform .7s cubic-bezier(.45,.05,.2,1) .5s,
    z-index 0s linear .85s;
  z-index: 6;
  backface-visibility: visible;
}
.envelope.mini .seal {
  position: absolute; left: 50%; top: 44%;
  width: 17%; aspect-ratio: 1/1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 30%, #c33144 0%, #8b1c2b 55%, #5c1019 100%);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: clamp(9px, 1.6vw, 12px);
  color: #f6d9dd;
  font-weight: 700; letter-spacing: 1.5px;
  z-index: 7;
  box-shadow: 0 4px 8px rgba(0,0,0,.28), inset 0 -2px 3px rgba(0,0,0,.25);
  /* Base = closing: reappear only after the flap has shut (~1.2s). */
  transition: transform .3s ease 1.2s, opacity .3s ease 1.2s;
}
.envelope.mini .seal::before {
  content: "";
  position: absolute; inset: 12%;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.28);
}

/* open sequence */
.envelope.mini.open .seal {
  transform: translate(-50%, -50%) scale(0) rotate(45deg);
  opacity: 0;
  transition-delay: 0s, 0s; /* pops immediately on open */
}
.envelope.mini.open .flap {
  transform: rotateX(180deg);
  transition-delay: .15s, .5s;
  z-index: 1; /* once flipped up, it sits behind the rising invite */
}
.envelope.mini.open .letter {
  /* Rises less but scales more: the big card hovers over the envelope's
     upper half rather than floating far above it, so it reads large
     without demanding a skyscraper of headroom. */
  transform: translateX(-50%) translateY(-65%) scale(1.55) rotate(-2deg);
  box-shadow: 0 34px 60px -18px rgba(0,0,0,.5);
  z-index: 8;
  transition-delay: .5s, .5s, 1.05s;
}

/* confetti — fires once the invite clears the envelope */
.envelope.mini .confetti { position: absolute; inset: 0; pointer-events: none; z-index: 9; }
.envelope.mini .confetti i {
  position: absolute; left: 50%; top: 20%;
  width: 10px; height: 14px;
  opacity: 0;
  border-radius: 2px;
}
.envelope.mini.open .confetti i { animation: confetti-pop 1.1s cubic-bezier(.2,.6,.3,1) forwards; }
.envelope.mini .confetti i:nth-child(1) { background: #f59e0b; --cx: -120px; --cr: -200deg; animation-delay: .9s !important; }
.envelope.mini .confetti i:nth-child(2) { background: #ec4899; --cx: -75px;  --cr: 160deg;  animation-delay: 1s   !important; }
.envelope.mini .confetti i:nth-child(3) { background: #22c55e; --cx: -30px;  --cr: -140deg; animation-delay: .95s !important; }
.envelope.mini .confetti i:nth-child(4) { background: #0ea5e9; --cx: 25px;   --cr: 220deg;  animation-delay: 1.05s !important; }
.envelope.mini .confetti i:nth-child(5) { background: #a855f7; --cx: 70px;   --cr: -180deg; animation-delay: .92s !important; }
.envelope.mini .confetti i:nth-child(6) { background: #ef4444; --cx: 115px;  --cr: 150deg;  animation-delay: 1.02s !important; }
.envelope.mini .confetti i:nth-child(7) { background: #eab308; --cx: -55px;  --cr: 190deg;  animation-delay: 1.1s !important; }
.envelope.mini .confetti i:nth-child(8) { background: #14b8a6; --cx: 50px;   --cr: -160deg; animation-delay: 1.08s !important; }
@keyframes confetti-pop {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--cx), -220px) rotate(var(--cr)); }
}

/* gentle idle nudge so the sealed envelope invites a tap */
@keyframes env-nudge {
  0%, 100% { transform: translateY(0) rotate(0); }
  6%  { transform: translateY(-4px) rotate(-1deg); }
  12% { transform: translateY(0) rotate(1deg); }
  18% { transform: translateY(-2px) rotate(0); }
}
.envelope.mini:not(.open) { animation: env-nudge 3.2s ease-in-out 1.5s infinite; }
@media (prefers-reduced-motion: reduce) {
  .envelope.mini:not(.open) { animation: none; }
  .envelope.mini .letter, .envelope.mini .flap { transition-duration: .01s; }
  .envelope.mini.open .confetti i { animation: none; }
}

.mini-cta {
  appearance: none; border: none; cursor: pointer;
  background: white;
  color: var(--sky-700);
  border: 1px solid var(--sky-200);
  padding: 10px 18px; border-radius: 999px;
  font-weight: 700; font-size: 13px; letter-spacing: 1px; text-transform: uppercase;
  box-shadow: 0 4px 10px rgba(2,132,199,.15);
}
.mini-cta:hover { border-color: var(--sky-400); }

/* ---------- callout ---------- */
.callout {
  margin: 48px auto 0; max-width: 1120px; padding: 0 24px;
}
.callout-inner {
  background: linear-gradient(180deg, var(--sky-500), var(--sky-700));
  color: white;
  padding: 38px 32px; border-radius: 22px;
  text-align: center;
  box-shadow: 0 30px 60px -30px rgba(3,105,161,.7);
}
.callout h2 { margin: 0 0 8px; font-size: clamp(24px, 3.6vw, 34px); letter-spacing: -.5px; }
.callout p { max-width: 640px; margin: 6px auto 22px; opacity: .95; line-height: 1.55; }
.checks {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 8px 18px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  text-align: left;
  max-width: 720px; margin: 0 auto;
}
.checks li {
  position: relative;
  padding-left: 28px;
  background: rgba(255,255,255,.07);
  border-radius: 10px;
  padding: 10px 12px 10px 36px;
  font-weight: 600;
}
.checks li::before {
  content: ""; position: absolute;
  left: 12px; top: 50%;
  width: 14px; height: 14px;
  transform: translateY(-50%) rotate(45deg);
  border-right: 2.5px solid white; border-bottom: 2.5px solid white;
  margin-top: -3px;
  /* checkmark */
}
.checks li::after {
  content: "";
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,.18);
  z-index: -1;
}

/* ---------- how ---------- */
.how { max-width: 1120px; margin: 64px auto 24px; padding: 0 24px; }
.how h2 { font-size: clamp(24px, 3.6vw, 34px); letter-spacing: -.5px; margin: 0 0 24px; text-align: center; }
.steps {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.steps li {
  background: white; border-radius: 16px;
  padding: 22px 22px 20px;
  border: 1px solid var(--line);
  box-shadow: 0 12px 30px -22px rgba(2,132,199,.4);
}
.step-num {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--sky-100); color: var(--sky-700);
  font-weight: 800; font-size: 15px;
  margin-bottom: 10px;
}
.steps h3 { margin: 4px 0 6px; font-size: 17px; }
.steps p { color: var(--muted); margin: 0; line-height: 1.55; }

/* ---------- FAQ ---------- */
.faq { max-width: 760px; margin: 56px auto 24px; padding: 0 24px; }
.faq h2 { text-align: center; font-size: clamp(24px, 3.6vw, 34px); letter-spacing: -.5px; margin: 0 0 18px; }
.faq details {
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color .2s;
}
.faq details[open] { border-color: var(--sky-300); }
.faq summary {
  cursor: pointer;
  padding: 14px 18px;
  font-weight: 600;
  list-style: none;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  color: var(--sky-500); font-weight: 700; font-size: 20px;
  transition: transform .2s;
}
.faq details[open] summary::after { content: "−"; }
.faq p { margin: 0 18px 14px; color: var(--muted); line-height: 1.55; }

/* ---------- final ---------- */
.cta-final {
  text-align: center;
  padding: 52px 24px 28px;
}
.big { font-size: clamp(20px, 3vw, 26px); margin: 0 0 4px; font-weight: 700; }

/* ---------- footer ---------- */
.footer { padding: 28px 24px 36px; }
.footer-inner {
  max-width: 1120px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  color: var(--muted); font-size: 14px;
  gap: 12px; flex-wrap: wrap;
}
.footer-inner a { color: var(--sky-700); text-decoration: none; }
.footer-inner a:hover { text-decoration: underline; }
.footer-inner .sep { color: var(--line); margin: 0 6px; }
@media (max-width: 480px) { .footer-inner { flex-direction: column; gap: 4px; } }

/* Narrow phones: the header holds a logo, a language <select> populated with
   98 languages, and an auth button. Below ~430px those don't fit on one line
   and the whole page picks up a horizontal scrollbar. Let the header wrap and
   bound the select, rather than clipping the page. */
@media (max-width: 430px) {
  .nav { flex-wrap: wrap; row-gap: 8px; }
  .nav-links { flex-wrap: wrap; min-width: 0; gap: 8px; }
  .nav-links select { max-width: 104px; min-width: 0; }
  .logo-tag { display: none; }
}
/* Belt and braces: decorative background art must never widen the document.
   `clip` rather than `hidden` so no scroll container is created (that breaks
   vertical scrolling — see rsvp.css). */
body { overflow-x: clip; }

/* ---- dashboard create modal: kind choice + theme swatches (V2 §8.3) ----
   The dashboard loads landing.css + app.css only, so the quick-event-page
   UI is styled here rather than in event-v2.css. */
.kind-choice { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* A class-level `display` beats the UA [hidden] rule, so restate it — same
   trick app.css uses for .modal[hidden]. */
.kind-choice[hidden], .grid-form[hidden] { display: none; }
/* Any class that sets `display` silently defeats the user-agent's
   `[hidden] { display: none }` rule, because a class selector outranks it.
   This codebase has been bitten three times: .kind-choice and .grid-form (fixed
   individually above), .btn (the Android-only Contact Picker button showing on
   iPhone and desktop), and .auth-form (the password form appearing even when
   collapsed). Fixing them one at a time clearly does not hold, so `hidden`
   is made absolute here and the whole class of bug goes away. If something
   genuinely needs to show while carrying the attribute, it should not be
   carrying the attribute. */
[hidden] { display: none !important; }
.kind-option {
  display: grid; gap: 4px; justify-items: start; text-align: left;
  min-width: 0; padding: 16px 14px; cursor: pointer;
  background: white; border: 2px solid var(--line); border-radius: 14px;
  font: inherit; color: var(--ink);
}
.kind-option:hover { border-color: var(--sky-400); background: var(--sky-50); }
.kind-option:focus-visible { outline: 2px solid var(--sky-600); outline-offset: 2px; }
.kind-emoji { font-size: 26px; line-height: 1.1; }
.kind-name { font-size: 15px; font-weight: 700; }
.kind-desc { font-size: 12.5px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 480px) { .kind-choice { grid-template-columns: 1fr; } }

.ee-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.ee-swatch {
  display: grid; gap: 5px; min-width: 0; padding: 6px;
  background: white; border: 2px solid var(--line); border-radius: 10px;
  cursor: pointer; font: inherit; text-align: left;
}
.ee-swatch:hover { border-color: var(--sky-300); }
.ee-swatch:focus-visible { outline: 2px solid var(--sky-600); outline-offset: 2px; }
.ee-swatch[aria-checked="true"] { border-color: var(--sky-600); box-shadow: 0 2px 8px -3px rgba(2,132,199,.6); }
.ee-swatch-chip { display: block; height: 38px; border-radius: 7px; background: var(--sky-100); }
.ee-swatch-label { font-size: 11.5px; font-weight: 600; color: var(--muted); overflow-wrap: anywhere; }
.ee-swatch[data-theme="confetti-blue"]  .ee-swatch-chip { background: linear-gradient(135deg,#0EA5E9,#38BDF8 55%,#BAE6FD); }
.ee-swatch[data-theme="sunset-warm"]    .ee-swatch-chip { background: linear-gradient(135deg,#F97316,#FB7185 60%,#FDE68A); }
.ee-swatch[data-theme="forest-calm"]    .ee-swatch-chip { background: linear-gradient(135deg,#166534,#22C55E 60%,#BBF7D0); }
.ee-swatch[data-theme="mono-ink"]       .ee-swatch-chip { background: linear-gradient(135deg,#0F172A,#475569 60%,#CBD5E1); }
.ee-swatch[data-theme="blush-bloom"]    .ee-swatch-chip { background: linear-gradient(135deg,#DB2777,#F472B6 55%,#FBCFE8); }
.ee-swatch[data-theme="midnight-stars"] .ee-swatch-chip { background: linear-gradient(135deg,#1E1B4B,#4338CA 60%,#A5B4FC); }
.ee-swatch[data-theme="citrus-pop"]     .ee-swatch-chip { background: linear-gradient(135deg,#CA8A04,#FACC15 55%,#FEF08A); }
.ee-swatch[data-theme="ocean-mist"]     .ee-swatch-chip { background: linear-gradient(135deg,#0E7490,#22D3EE 60%,#CFFAFE); }
.ee-swatch[data-theme="lavender-haze"]  .ee-swatch-chip { background: linear-gradient(135deg,#7C3AED,#A78BFA 60%,#EDE9FE); }
.ee-swatch[data-theme="autumn-spice"]   .ee-swatch-chip { background: linear-gradient(135deg,#9A3412,#EA580C 60%,#FED7AA); }
.ee-swatch[data-theme="mint-fresh"]     .ee-swatch-chip { background: linear-gradient(135deg,#0F766E,#2DD4BF 60%,#CCFBF1); }
.ee-swatch[data-theme="birthday-bash"]  .ee-swatch-chip { background: linear-gradient(135deg,#DB2777,#F59E0B 45%,#3B82F6); }
@media (max-width: 420px) {
  .ee-swatches { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
}

/* ---- mobile form and touch ergonomics (site-wide) ---------------------
 * landing.css is loaded by every page except the guest RSVP flow, so these
 * two rules are the one place they can be fixed once.
 *
 * The font-size rule uses !important, which is normally a smell. It is right
 * here: most of the offending fields set their size in an inline style
 * attribute (a search box on the dashboard, the language switcher in several
 * headers, the guest filter in the editor), and an inline style outranks any
 * class selector. The alternative is editing a dozen inline styles and
 * relying on nobody adding a thirteenth.
 *
 * Why 16px specifically: iOS Safari zooms the viewport when a focused input
 * is smaller than 16px, and it does not zoom back out when the field blurs.
 * The user is left magnified, scrolled sideways, mid-form.
 */
@media (max-width: 860px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Header links were 16px tall: the text box and nothing else. That is a
     third of the 44px minimum, on the navigation every page carries. */
  .nav-links a:not(.btn) {
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 0 2px;
  }
  .nav-links .btn { min-height: 44px; display: inline-flex; align-items: center; }
  .nav .logo { min-height: 44px; display: inline-flex; align-items: center; }

  /* Selects rendered at 29px tall: the browser default box with 4px of
     padding. The language switcher is on every page header. */
  select { min-height: 44px; padding-top: 6px; padding-bottom: 6px; }

  /* .btn.small is 36px by design on desktop, which is fine for a mouse and
     8px short of the touch minimum. Sign out and Delete event are both
     .btn.small, and Delete event is exactly the button you do not want
     someone to hit by accident because the target was tight. */
  .btn.small { min-height: 44px; }

  /* Footer legal links measured 15px tall, the text box with no padding. */
  .footer a, .app-footer a { display: inline-block; padding: 10px 2px; min-height: 24px; }

  /* Pill links in lists (occasion chips, related-post pills, comparison
     links) sat between 24px and 32px. */
  .occ-chip, .rel-links a, .occ-list a, .tag-chip { min-height: 44px; display: inline-flex; align-items: center; }
  .mini-cta { min-height: 44px; }
}