/* ---------------------------------------------------------------------------
   Figtree, self-hosted. Same typeface as before -- only the delivery changed.
   Previously: HTML -> fonts.googleapis.com (CSS) -> fonts.gstatic.com (woff2),
   two extra DNS+TLS handshakes before a single glyph could paint.

   'Figtree Fallback' is NOT a different typeface. It is Arial rendered with
   Figtree's metrics (x-height 0.500 vs Arial's 0.5186 -> size-adjust 96.42%),
   so the text occupies exactly the same space before Figtree arrives and the
   swap moves nothing. Figtree is still what everybody reads.
   --------------------------------------------------------------------------- */

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/fonts/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url('/fonts/figtree-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metrics-matched stand-in: Arial wearing Figtree's proportions. */
@font-face {
  font-family: 'Figtree Fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  /* Figtree's own metrics, verbatim (upm 1000, asc 950, desc -250, gap 0).
     Deliberately NO size-adjust: the usual x-height-matching formula (96.42%)
     was measured at 5x WORSE layout drift than plain Arial here, because
     rescaling the glyphs moves every line-wrap point. Matching only the
     vertical metrics fixes line-box height and cannot change where text wraps.
     Measured CLS-style impact: 0.0208 (plain Arial) -> 0.0034 (this). */
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
}

:root {
  --primary: #00B0FF;        /* brand blue / active CTA fill */
  --primary-dark: #0091e0;
  --primary-soft: rgba(0, 176, 255, 0.12);
  --primary-light: #ffffff;
  --secondary: #3B3A65;
  --ai: #f095fd;             /* AI / Gemini accent */
  --ai-soft: rgba(240, 149, 253, 0.14);
  --sun: #FFC83D;
  --background: #F0EBE3;     /* active background (cream) */
  --surface: #fbf9f8;
  --surface-variant: #f6eee8;
  --border: #C6C6C8;         /* iOS separator */
  --text-primary: #000000;
  --text-secondary: #3C3C4399;
  --text-tertiary: #3C3C434D;
  --text-body: #4a4a52;
  --white: #FFFFFF;          /* active surface on cream */
  --ai-suggestions: #F4EAE0;
  --display: 'Figtree', 'Figtree Fallback', -apple-system, BlinkMacSystemFont, sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Figtree', 'Figtree Fallback', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--background);
  color: var(--text-primary);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.container {
  /* The gutter grows with the viewport instead of dropping to a flat 24px the
     moment the 1200px cap stops biting — that cliff is what left the content
     hugging the edge at tablet widths. At >=1312px this resolves to exactly the
     old geometry: 1152px of content, 144px in from the edge at 1440. */
  width: min(100% - 2 * clamp(24px, 6.4vw, 84px), 1152px);
  margin-inline: auto;
  padding: 0;
}
/* A container inside a container already has its gutter; don't charge twice. */
.container .container { width: 100%; }

/* Navbar */
nav {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(240, 235, 227, 0.8);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 100;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 700;
  font-size: 1.2rem;
}

.logo img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.nav-cta {
  background: var(--primary);
  color: white;
  padding: 10px 20px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 176, 255, 0.3);
}

/* Hero Section */
.hero {
  padding-block: 80px;
  display: flex;
  align-items: center;
  gap: 60px;
  min-height: calc(100vh - 80px);
}

.hero-content {
  flex: 1;
}

.hero-content h1 {
  font-size: 4rem;
  line-height: 1.1;
  margin-bottom: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

@media (max-width: 480px) {
  .hero-content h1 {
    font-size: 2.5rem;
  }
}

.hero-content p {
  font-size: 1.25rem;
  color: var(--text-secondary);
  margin-bottom: 40px;
  max-width: 500px;
}

.hero-image {
  flex: 1;
  position: relative;
  display: flex;
  justify-content: center;
}

.hero-image img {
  width: 320px;
  border-radius: 40px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  transform: rotate(-2deg);
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hero-image:hover img {
  transform: rotate(0deg) scale(1.02);
}

.hero-image::before {
  content: '';
  position: absolute;
  width: 120%;
  height: 120%;
  background: radial-gradient(circle, rgba(0, 176, 255, 0.1) 0%, transparent 70%);
  top: -10%;
  left: -10%;
  z-index: -1;
}

/* Buttons */
.store-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  .store-buttons {
    flex-direction: column;
    align-items: center;
  }
}

.store-button {
  transition: transform 0.2s ease;
}

.store-button:hover {
  transform: scale(1.05);
}

.store-button img {
  height: 48px;
  /* The width/height attributes on the badge are presentational hints, so
     without this the attribute width (646px) would win and stretch it. The
     footer and trust logos already carry width:auto for the same reason. */
  width: auto;
}

/* Features */
.features {
  padding: 100px 0;
  background: var(--surface);
  border-radius: 60px 60px 0 0;
}

.section-title {
  text-align: center;
  margin-bottom: 60px;
}

.section-title h2 {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 16px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
}

.feature-card {
  background: var(--white);
  padding: 40px;
  border-radius: 30px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-10px);
}

.feature-icon {
  font-size: 3rem;
  margin-bottom: 24px;
  display: block;
}

.feature-card h3 {
  font-size: 1.5rem;
  margin-bottom: 16px;
}

.feature-card p {
  color: var(--text-secondary);
}

/* Secondary Screenshot Section */
.screenshot-section {
  padding: 100px 0;
  display: flex;
  align-items: center;
  gap: 60px;
}

.screenshot-section.reverse {
  flex-direction: row-reverse;
}

.screenshot-section .content {
  flex: 1;
}

.screenshot-section .image {
  flex: 1;
  display: flex;
  justify-content: center;
}

.screenshot-section .image img {
  width: 280px;
  border-radius: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Footer */
footer {
  padding: 60px 0;
  text-align: center;
  border-top: 1px solid var(--surface-variant);
  background: var(--white);
}

.footer-logo {
  font-weight: 700;
  font-size: 1.5rem;
  margin-bottom: 24px;
  display: block;
  text-decoration: none;
  color: var(--text-primary);
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-bottom: 32px;
}

.footer-links a {
  text-decoration: none;
  color: var(--text-secondary);
  font-weight: 500;
}

.copyright {
  color: var(--text-tertiary);
  font-size: 0.9rem;
}

/* Mobile Responsive */
@media (max-width: 968px) {
  .hero {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    padding-block: 40px;
  }

  .hero-content {
    max-width: 100%;
  }

  .hero-content h1 {
    font-size: clamp(2rem, 7vw, 3rem);
  }

  .hero-content p {
    max-width: 100%;
    margin: 0 auto 40px;
  }

  .store-buttons {
    justify-content: center;
  }

  .screenshot-section {
    flex-direction: column !important;
    align-items: stretch;
    text-align: center;
  }

  .screenshot-section .content {
    max-width: 100%;
  }
}

/* Legal Pages Styling */
.legal-page {
  background-color: var(--background);
}

.legal-container {
  max-width: 800px;
  margin: 40px auto 100px;
  padding: 0 24px;
}

.legal-card {
  background: var(--white);
  padding: 60px;
  border-radius: 40px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}

.legal-content h1 {
  font-size: 2.5rem;
  margin-bottom: 8px;
  font-weight: 800;
}

.legal-content .last-updated {
  color: var(--text-secondary);
  margin-bottom: 40px;
  display: block;
}

.legal-content h2 {
  font-size: 1.5rem;
  margin: 40px 0 16px;
  font-weight: 700;
}

.legal-content h3 {
  font-size: 1.2rem;
  margin: 24px 0 12px;
  font-weight: 600;
}

.legal-content p, .legal-content li {
  color: var(--text-secondary);
  margin-bottom: 16px;
  font-size: 1.05rem;
}

.legal-content ul {
  margin-left: 24px;
  margin-bottom: 24px;
}

.legal-content a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}

.legal-content a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .legal-card {
    padding: 32px;
    border-radius: 24px;
  }

  .legal-content h1 {
    font-size: 2rem;
  }
}

/* ==========================================================================
   PLAYFUL BRAND SYSTEM  (soft + cool, rounded display type, cyan on cream)
   ========================================================================== */

/* Display font for headings & logo */
h1, h2, h3,
.logo span, .footer-logo, .display {
  font-family: var(--display);
  letter-spacing: -0.01em;
}

/* Safety: never let media or long words force horizontal overflow.
   NOTE: do not put max-width on <picture> — as a flex item it breaks the
   sizing of the <img> it wraps (hero/screenshot phone mockups). */
img, svg, video {
  max-width: 100%;
}

.hero-image picture,
.screenshot-section .image picture {
  display: block;
}

.hero-image img,
.screenshot-section .image img {
  height: auto;
}

h1, h2, h3 {
  overflow-wrap: break-word;
}

/* ---- Navbar (responsive, with menu + language switch) ---- */
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* No width here: this element is also a .container, and an explicit 100%
     would override the container's gutter and jam the logo against the edge. */
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-link {
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.95rem;
  opacity: 0.8;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.nav-link:hover { opacity: 1; color: var(--primary-dark); }
.nav-link.active { color: var(--primary-dark); opacity: 1; }

/* ---- Nav dropdown: the three event formats, grouped ----
   No JS: hover opens it for pointers, :focus-within opens it for keyboards
   (focusing the trigger itself is what reveals the panel, so Tab can reach
   the links inside). The trigger is a real link to the /events overview, so
   clicking it still goes somewhere on touch devices. */
.nav-drop { position: relative; }
.nav-drop-trigger { display: inline-flex; align-items: center; gap: 6px; }
.nav-caret { width: 13px; height: 13px; transition: transform 0.22s ease; }
.nav-drop:hover .nav-caret,
.nav-drop:focus-within .nav-caret { transform: rotate(180deg); }

.nav-drop-panel {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  min-width: 330px;
  padding: 10px;
  display: grid;
  gap: 2px;
  background: var(--surface);
  border: 1px solid rgba(59, 58, 101, 0.07);
  border-radius: 22px;
  box-shadow: 0 26px 52px rgba(59, 58, 101, 0.16), 0 2px 8px rgba(59, 58, 101, 0.07);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-8px);
  transition: opacity 0.2s ease, transform 0.22s ease, visibility 0.22s;
}
/* Invisible bridge over the gap, so the pointer can travel to the panel
   without passing through dead space and closing it. */
.nav-drop-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }

.nav-drop:hover .nav-drop-panel,
.nav-drop:focus-within .nav-drop-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-drop-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 12px;
  border-radius: 15px;
  text-decoration: none;
  color: var(--text-primary);
  transition: background 0.18s ease;
}
.nav-drop-item:hover { background: var(--primary-soft); }

.nd-ico {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-soft);
  color: var(--primary-dark);
}
.nd-ico svg { width: 20px; height: 20px; }
/* Same three accents the format cards use further down the homepage. */
.nav-drop-item:nth-child(2) .nd-ico { background: var(--ai-soft); color: #b13fc4; }
.nav-drop-item:nth-child(3) .nd-ico { background: rgba(255, 200, 61, 0.22); color: #9a6b00; }

.nd-text { display: grid; gap: 2px; }
.nd-text b { font-family: var(--display); font-weight: 700; font-size: 0.97rem; line-height: 1.2; }
.nd-text small { color: var(--text-body); font-size: 0.81rem; line-height: 1.35; }

.nav-lang {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  font-size: 0.85rem;
}

.nav-lang a {
  text-decoration: none;
  color: var(--text-tertiary);
  padding: 2px 6px;
  border-radius: 8px;
  transition: color 0.2s ease, background 0.2s ease;
}

.nav-lang a.active { color: var(--primary-dark); background: var(--primary-soft); }
.nav-lang a:hover { color: var(--primary-dark); }
.nav-lang span { color: var(--text-tertiary); }

/* CSS-only mobile menu toggle */
.nav-toggle { display: none; }

.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  cursor: pointer;
  border-radius: 12px;
}

.nav-burger span {
  display: block;
  width: 22px;
  height: 2.5px;
  margin: 0 auto;
  background: var(--text-primary);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

@media (max-width: 968px) {
  .nav-burger { display: flex; }

  .nav-menu {
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 16px 24px 24px;
    background: var(--surface);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid var(--surface-variant);
    max-height: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
  }

  .nav-toggle:checked ~ .nav-menu {
    /* Taller than before: the format panel now lives open inside the menu. */
    max-height: 640px;
    padding-top: 16px;
    padding-bottom: 24px;
    opacity: 1;
    pointer-events: auto;
  }

  .nav-link { padding: 12px 4px; font-size: 1.05rem; border-bottom: 1px solid var(--surface-variant); }

  /* In the burger menu there is nothing to hover, so the panel is simply
     open and inline, and the trigger hands its divider to the group. */
  .nav-drop { border-bottom: 1px solid var(--surface-variant); }
  .nav-drop-trigger { width: 100%; border-bottom: 0; }
  /* The panel is already open here, so a "expand me" caret would be a lie. */
  .nav-drop-trigger .nav-caret { display: none; }
  .nav-drop-panel {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    min-width: 0;
    padding: 0 0 10px;
    background: none;
    border: 0;
    box-shadow: none;
    border-radius: 0;
  }
  .nav-drop-panel::before { display: none; }
  .nav-drop-item { padding: 9px 4px; }
  .nav-menu .nav-cta { margin-top: 12px; text-align: center; }
  .nav-lang { padding: 12px 4px; justify-content: flex-start; }

  .nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
}

/* With only two link groups left, the bar reads as lopsided when everything
   hugs the right edge. Links sit beside the logo; language + CTA stay right.
   Desktop only — under 968px the menu is the burger dropdown, a column. */
@media (min-width: 969px) {
  .nav-menu { flex: 1; justify-content: flex-start; }
  .nav-lang { margin-left: auto; }
}

/* On wide screens the bar and its type step up a size — the same nav, with
   more presence and more air around it. */
@media (min-width: 1200px) {
  nav { height: 92px; }
  .nav-menu { gap: 34px; }
  .nav-link { font-size: 1.05rem; }
  .nav-lang { font-size: 0.92rem; }
  .nav-cta { font-size: 0.98rem; padding: 12px 24px; }
  .logo { font-size: 1.35rem; gap: 14px; }
  .logo img { width: 46px; height: 46px; border-radius: 12px; }
  .nav-caret { width: 14px; height: 14px; }
}

/* ---- Buttons ---- */
.btn {
  display: inline-block;
  padding: 16px 32px;
  border-radius: 50px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn-primary {
  background: var(--primary);
  color: var(--white);
  box-shadow: 0 8px 24px rgba(0, 176, 255, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 176, 255, 0.4);
  background: var(--primary-dark);
}

.btn-outline {
  background: var(--white);
  color: var(--primary-dark);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.btn-outline:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1); }

/* ---- Pills / badges ---- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 50px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-weight: 700;
  font-size: 0.85rem;
  font-family: var(--display);
}

.pill.sun { background: rgba(255, 200, 61, 0.22); color: #9a6b00; }
.pill.ai { background: var(--ai-soft); color: #b13fc4; }

/* ---- Generic sub-page hero ---- */
.page-hero {
  text-align: center;
  padding: 80px 0 40px;
  max-width: 760px;
  margin: 0 auto;
}

.page-hero h1 {
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1.08;
  margin: 20px 0 20px;
  /* Even out the lines instead of leaving a single word stranded. */
  text-wrap: balance;
}

.page-hero p {
  font-size: 1.2rem;
  color: var(--text-body);
  max-width: 560px;
  margin: 0 auto;
}

@media (max-width: 600px) {
  .page-hero { padding: 48px 0 24px; }
  .page-hero h1 { font-size: 2.4rem; }
}

/* ---- Use-case hero: left-aligned headline, media alongside ----
   The three format pages lead with a big left-set headline and their imagery
   to the right; below 900px the media drops underneath. The homepage keeps
   its centered hero — this variant is opt-in via .hero-split. */
.page-hero.hero-split {
  max-width: none;
  margin: 0;
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(30px, 4vw, 68px);
  align-items: center;
  padding: clamp(44px, 5.5vw, 82px) 0 clamp(28px, 3.5vw, 50px);
}
.hero-split .ph-copy,
.hero-split .ph-media { min-width: 0; }

/* A format page with no imagery of its own runs the copy as one wide column
   rather than leaving half the row empty. Drop .hero-solo once it has media. */
.page-hero.hero-solo { grid-template-columns: minmax(0, 1fr); max-width: 940px; }

.hero-split h1 {
  font-size: clamp(2.7rem, 6vw, 4.7rem);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.035em;
  margin: 0 0 22px;
  /* Left-set display type wraps on its own terms; balancing would pull the
     first line short for no gain. */
  text-wrap: pretty;
}
.hero-split .ph-copy > p { max-width: 46ch; margin: 0; }
.hero-split .assurance { justify-content: flex-start; margin-top: 34px; }
/* A single hero button carries enough weight without full-size padding. */
.hero-split .hero-ctas .btn { padding: 13px 27px; font-size: 0.98rem; }
.hero-split .hero-ctas { justify-content: flex-start; }

/* Media column: the pile fills its column rather than the viewport. */
.hero-split .photo-pile { max-width: 100%; margin: 0; padding-bottom: 0; }

@media (max-width: 900px) {
  .page-hero.hero-split { grid-template-columns: 1fr; gap: 34px; }
  .hero-split .ph-copy > p { max-width: none; }
  .hero-split .photo-pile { max-width: 520px; margin: 0 auto; }

  /* Single column now, so the headline has the full width to work with and
     tracks the viewport instead of bottoming out at the two-column floor. */
  .hero-split h1 { font-size: clamp(2.35rem, 7.4vw, 4.6rem); }
  /* Full width would otherwise pull the headline onto one very long line;
     the halves break where the sentence does. */
  .hero-split h1 .hl { display: block; }
}
@media (max-width: 600px) {
  .page-hero.hero-split { padding: 34px 0 24px; }
}

.section { padding: 80px 0; }
.section-tight { padding: 48px 0; }
.center { text-align: center; }
.lead { color: var(--text-body); font-size: 1.1rem; }

/* ---- Steps (numbered cyan circles, à la flyer) ---- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
  margin-top: 56px;
}

.step {
  text-align: center;
  padding: 8px;
}

.step-num {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: var(--white);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.8rem;
  border-radius: 50%;
  box-shadow: 0 10px 24px rgba(0, 176, 255, 0.3);
}

.step h3 { font-size: 1.3rem; margin-bottom: 10px; }
.step p { color: var(--text-body); font-size: 1rem; }

/* ---- Icon cards (use-cases, benefits) ---- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}

.icon-card {
  background: var(--white);
  padding: 36px 32px;
  border-radius: 28px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.icon-card:hover { transform: translateY(-8px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08); }
.icon-card .emoji { font-size: 2.6rem; display: block; margin-bottom: 18px; }
.icon-card h3 { font-size: 1.3rem; margin-bottom: 10px; }
.icon-card p { color: var(--text-body); }

/* ---- Pricing ---- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 56px;
  align-items: stretch;
}

/* Five tiers fit one clean row on wide screens (tighter padding to keep them readable). */
@media (min-width: 1160px) {
  .pricing-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pricing-grid .price-card { padding: 34px 22px; }
}

.price-card {
  position: relative;
  background: var(--white);
  border: 2px solid transparent;
  border-radius: 28px;
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.price-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.09); }

.price-card.featured {
  border-color: var(--primary);
  box-shadow: 0 20px 50px rgba(0, 176, 255, 0.18);
}

.price-card .tier-tag {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: var(--white);
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.8rem;
  padding: 6px 16px;
  border-radius: 50px;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(0, 176, 255, 0.3);
}

.price-card h3 {
  font-size: 1.25rem;
  margin-bottom: 6px;
}

.price-card .players {
  color: var(--text-body);
  font-size: 0.95rem;
  margin-bottom: 20px;
}

.price-card .price {
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--text-primary);
}

.price-card .price small {
  display: block;
  font-family: 'Figtree', 'Figtree Fallback', sans-serif;
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 8px;
}

.price-card .price.free { color: var(--primary-dark); }

.price-card ul {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

.price-card li {
  padding: 8px 0 8px 28px;
  position: relative;
  color: var(--text-body);
  font-size: 0.95rem;
}

.price-card li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 800;
}

.pricing-note {
  text-align: center;
  color: var(--text-secondary);
  margin-top: 32px;
  font-size: 0.95rem;
}

/* ---- Team grid ---- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
  margin-top: 48px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.team-card {
  background: var(--white);
  border-radius: 28px;
  padding: 32px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.team-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin: 0 auto 20px;
  object-fit: cover;
  background: var(--primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
}

.team-card h3 { font-size: 1.3rem; margin-bottom: 4px; }
.team-card .role { color: var(--primary-dark); font-weight: 600; font-size: 0.9rem; margin-bottom: 12px; }
.team-card .bio { color: var(--text-body); font-size: 0.95rem; }

/* ---- Big call-to-action band ---- */
.cta-band {
  text-align: center;
  background: linear-gradient(135deg, var(--primary) 0%, #4ec8ff 100%);
  border-radius: 48px;
  padding: 72px 40px;
  margin: 40px 0 100px;
  color: var(--white);
}

.cta-band h2 { font-size: 2.6rem; margin-bottom: 16px; color: var(--white); }
.cta-band p { font-size: 1.15rem; opacity: 0.95; margin-bottom: 36px; max-width: 520px; margin-left: auto; margin-right: auto; }
.cta-band .btn-outline { color: var(--primary-dark); }

@media (max-width: 600px) {
  .cta-band { padding: 48px 24px; border-radius: 32px; }
  .cta-band h2 { font-size: 2rem; }
}

/* Non-profit callout under the pricing cards */
.nonprofit-band {
  text-align: center;
  background: var(--surface-variant);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 40px 40px;
  margin-top: 28px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.nonprofit-badge {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .02em;
  color: var(--primary-dark);
  background: var(--primary-soft);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.nonprofit-band h3 { font-size: 1.6rem; margin-bottom: 12px; color: var(--secondary); }
.nonprofit-band p {
  font-size: 1.05rem; color: var(--text-secondary); line-height: 1.55;
  max-width: 540px; margin: 0 auto 24px;
}

@media (max-width: 600px) {
  .nonprofit-band { padding: 32px 22px; border-radius: 24px; }
}

/* ---- Contact card (sponsors) ---- */
.contact-card {
  background: var(--surface-variant);
  border-radius: 36px;
  padding: 56px 40px;
  text-align: center;
  margin-top: 48px;
}

.contact-card .email {
  font-family: var(--display);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--primary-dark);
  text-decoration: none;
  display: inline-block;
  margin-top: 8px;
}

.contact-card .email:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .contact-card .email { font-size: 1.3rem; word-break: break-word; }
}

/* ---- Rich footer ---- */
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  text-align: left;
  padding-bottom: 40px;
}

.footer-brand .footer-logo { margin-bottom: 12px; }
.footer-brand p { color: var(--text-secondary); max-width: 280px; }

.footer-col h4 {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 16px;
}

.footer-col a {
  display: block;
  text-decoration: none;
  color: var(--text-secondary);
  font-weight: 500;
  margin-bottom: 12px;
  transition: color 0.2s ease;
}

.footer-col a:hover { color: var(--primary-dark); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 32px;
  border-top: 1px solid var(--surface-variant);
}

.footer-bottom .made-in { color: var(--text-secondary); font-weight: 500; font-size: 0.9rem; }
.footer-bottom .copyright { margin: 0; }

/* Credibility strip (accelerator + press) above the copyright line */
.footer-creds {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px 46px;
  padding-top: 8px;
}
.footer-cred {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-decoration: none;
  transition: opacity .2s ease, transform .2s ease;
}
.footer-cred:hover { transform: translateY(-1px); }
.footer-cred-label {
  font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-tertiary);
}
.footer-cred img { height: 30px; width: auto; max-width: 150px; object-fit: contain; opacity: .82; }
.footer-cred:hover img { opacity: 1; }

@media (max-width: 768px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { justify-content: center; text-align: center; }
}

/* ---- Pricing calculator (player-count slider) ---- */
.calculator { text-align: center; }
.calculator .lead { margin: 8px auto 0; max-width: 480px; }

.calc-card {
  background: var(--white);
  border-radius: 32px;
  padding: 40px;
  max-width: 680px;
  margin: 32px auto 0;
  text-align: left;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.07);
}

.calc-label {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--text-primary);
  margin-bottom: 24px;
}

/* Slider: cyan fill + subtle tier dividers, snapped to 7 stops */
.calc-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 14px;
  border-radius: 50px;
  background:
    repeating-linear-gradient(90deg, transparent 0, transparent calc(16.6667% - 2px), rgba(0, 0, 0, 0.14) calc(16.6667% - 2px), rgba(0, 0, 0, 0.14) 16.6667%),
    linear-gradient(to right, var(--primary) var(--pct, 0%), rgba(0, 0, 0, 0.08) var(--pct, 0%));
  outline: none;
  cursor: pointer;
}

.calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--white);
  border: 5px solid var(--primary);
  box-shadow: 0 4px 14px rgba(0, 176, 255, 0.45);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.calc-slider::-webkit-slider-thumb:active { transform: scale(1.15); }

.calc-slider::-moz-range-track { background: transparent; height: 14px; border-radius: 50px; }
.calc-slider::-moz-range-thumb {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--white);
  border: 5px solid var(--primary);
  box-shadow: 0 4px 14px rgba(0, 176, 255, 0.45);
  cursor: pointer;
}

.calc-scale {
  display: flex;
  justify-content: space-between;
  color: var(--text-tertiary);
  font-size: 0.8rem;
  font-weight: 700;
  margin-top: 14px;
}
.calc-scale span { width: 0; white-space: nowrap; text-align: center; }
.calc-scale span:first-child { text-align: left; }
.calc-scale span:last-child { text-align: right; }

/* Result row — pulls name / players / price / features from the cards */
.calc-result {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

.calc-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--text-primary);
}

.calc-players {
  color: var(--text-body);
  font-size: 0.98rem;
  margin-top: 4px;
}

.calc-price-wrap { text-align: right; flex-shrink: 0; }

.calc-price {
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.7rem;
  line-height: 1;
  color: var(--primary-dark);
  white-space: nowrap;
}
.calc-price.is-talk { font-size: 1.9rem; }

.calc-sub {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin-top: 8px;
}

.calc-features {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}

.calc-features li {
  padding: 7px 0 7px 28px;
  position: relative;
  color: var(--text-body);
  font-size: 0.97rem;
}

.calc-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 800;
}

.calc-cta { display: block; width: 100%; text-align: center; margin-top: 28px; }

@media (max-width: 560px) {
  .calc-card { padding: 28px 22px; }
  .calc-result { flex-direction: column; gap: 4px; }
  .calc-price-wrap { text-align: left; }
  .calc-price { font-size: 2.3rem; }
  .calc-scale { font-size: 0.7rem; }
}

/* ===================== Blog / Articles ===================== */
/* Post category pill (shared by index cards + article head) */
.post-cat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--primary-dark);
  background: var(--primary-soft);
  padding: 5px 14px;
  border-radius: 50px;
}

/* ---- Blog index grid ---- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
  margin-top: 8px;
}

.post-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: 24px;
  padding: 30px 28px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border: 2px solid transparent;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.post-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.09);
  border-color: var(--primary);
}

.post-card .post-cat { align-self: flex-start; }
.post-card h2 { font-size: 1.3rem; line-height: 1.25; margin: 16px 0 10px; }
.post-card p { color: var(--text-body); font-size: 0.96rem; flex-grow: 1; }
.post-card .post-meta {
  color: var(--text-tertiary);
  font-size: 0.82rem;
  font-weight: 600;
  margin-top: 18px;
}
.post-card .post-more {
  color: var(--primary-dark);
  font-weight: 700;
  font-family: var(--display);
  margin-top: 12px;
}

/* ---- Single article ---- */
.breadcrumb {
  /* The global nav rule makes every <nav> a space-between flexbox, which was
     spreading these three crumbs across the full 760px. Breadcrumbs are inline
     text, not a layout row. */
  display: block;
  max-width: 760px;
  margin: 0 auto 8px;
  font-size: 0.88rem;
  color: var(--text-secondary);
  /* The same global rule also makes it a sticky, blurred 80px bar that slid
     over the real header on scroll. */
  position: static;
  height: auto;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: auto;
}
.breadcrumb a { color: var(--primary-dark); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

.article { max-width: 760px; margin: 0 auto; }

.article-head { text-align: center; margin-bottom: 36px; }
.article-head h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.1;
  margin: 18px 0 14px;
}
.article-meta { color: var(--text-secondary); font-size: 0.9rem; font-weight: 600; }

.article-body { font-size: 1.08rem; line-height: 1.75; color: var(--text-body); }
.article-body > p:first-of-type { font-size: 1.18rem; color: var(--text-primary); }
.article-body h2 {
  font-size: 1.7rem;
  color: var(--text-primary);
  line-height: 1.2;
  margin: 44px 0 14px;
}
.article-body h3 { font-size: 1.25rem; color: var(--text-primary); margin: 30px 0 10px; }
.article-body p { margin-bottom: 18px; }
.article-body ul, .article-body ol { margin: 0 0 20px 1.3em; }
.article-body li { margin-bottom: 9px; }
.article-body a { color: var(--primary-dark); font-weight: 600; }
.article-body strong { color: var(--text-primary); }
.article-body blockquote {
  border-left: 4px solid var(--primary);
  background: var(--surface-variant);
  margin: 26px 0;
  padding: 16px 24px;
  border-radius: 0 16px 16px 0;
  font-style: italic;
}

/* In-article product callout */
.article-cta {
  background: var(--white);
  border: 2px solid var(--primary-soft);
  border-radius: 24px;
  padding: 30px;
  margin: 40px 0;
  text-align: center;
}
.article-cta h3 { font-size: 1.35rem; margin-bottom: 8px; }
.article-cta p { margin-bottom: 20px; color: var(--text-body); }

/* Related articles */
.related { max-width: 760px; margin: 60px auto 0; }
.related h2 { font-size: 1.4rem; margin-bottom: 18px; }
.related-list { display: grid; gap: 14px; }
.related-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: var(--white);
  border-radius: 16px;
  padding: 16px 22px;
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease;
}
.related-list a:hover { transform: translateX(4px); }
.related-list a .arrow { color: var(--primary-dark); flex-shrink: 0; }

@media (max-width: 560px) {
  .article-body { font-size: 1.02rem; }
  .article-body h2 { font-size: 1.45rem; }
}

/* ===================== Social links ===================== */
/* About-page pills (icon + label) */
.social-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: 50px;
  background: var(--white);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.social-pill:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1); }
.social-pill svg { width: 20px; height: 20px; fill: currentColor; }

/* Footer icon buttons (monochrome, b&w on light footer) */
.footer-social { display: flex; gap: 12px; margin-top: 20px; }
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface-variant);
  color: var(--text-primary);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.footer-social a:hover { background: var(--primary); color: #fff; transform: translateY(-2px); }
.footer-social svg { width: 19px; height: 19px; fill: currentColor; }

/* ============================================================
   B2B EVENTS REFRESH — trust strip, benefit cards, microanimations
   (2026-07, marketing update for the business suite)
   ============================================================ */

/* ---- Scroll reveal. Elements are only hidden when JS is on (html.js), so
   crawlers and no-JS visitors always see content. The inline observer adds .in */
.reveal { transition: opacity .6s ease, transform .6s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.js .reveal { opacity: 0; transform: translateY(20px); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .07s; }
.reveal.d2 { transition-delay: .14s; }
.reveal.d3 { transition-delay: .21s; }
.reveal.d4 { transition-delay: .28s; }
.reveal.d5 { transition-delay: .35s; }

/* ---- Clean business hero (gradients removed for a flat, modern look) ---- */
.biz-hero { position: relative; }
.biz-hero > * { position: relative; z-index: 1; }
.biz-hero .blob { display: none; }

/* ---- Trust / customer strip (honest: real customers only) ---- */
.trust { text-align: center; padding: clamp(28px, 4vw, 52px) 0 6px; }
.trust-label {
  font-family: var(--display); font-weight: 600; font-size: .8rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 28px;
}
.trust-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px 56px; }
.trust-logo {
  font-family: var(--display); font-weight: 700; font-size: 1.5rem; color: var(--secondary);
  letter-spacing: -.01em; line-height: 1.05; opacity: .92;
}
.trust-logo small {
  display: block; font-size: .58rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-tertiary);
}
/* Real logo files (drop into /public/logos/) render at a consistent height. */
/* Muted by default so the strip reads as quiet proof, not as a logo salad;
   colour returns on hover. */
.trust-logo-img {
  height: 34px; width: auto; max-width: 170px; object-fit: contain;
  filter: grayscale(1); opacity: .55; transition: filter .25s ease, opacity .25s ease;
}
.trust-logo-link { display: inline-flex; align-items: center; transition: opacity .2s ease, transform .2s ease; }
.trust-logo-link:hover { opacity: 1; transform: translateY(-1px); }
.trust-logo-link:hover .trust-logo-img { filter: grayscale(0); opacity: 1; }

/* Social-proof numbers above the customer logos. Ratings are store figures
   (App Store global, 4.8 from 498 ratings / Google Play 4.5 from 57) – update when they drift. */
.stats-row {
  list-style: none; margin: 0 auto 44px; padding: 0; max-width: 880px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.stat > b, .stat > a > b {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--display); font-weight: 700; font-size: clamp(1.7rem, 3.2vw, 2.3rem);
  line-height: 1.1; letter-spacing: -.02em; color: var(--secondary);
}
.stat svg { width: .72em; height: .72em; color: var(--sun); }
.stat span { display: block; margin-top: 4px; font-size: .92rem; color: var(--text-body); }
.stat a { display: block; text-decoration: none; color: inherit; transition: transform .2s ease; }
.stat a:hover { transform: translateY(-1px); }
.stat a:hover span { color: var(--primary-dark); }
@media (max-width: 640px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); gap: 22px 12px; margin-bottom: 36px; }
}

.app-rating {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 12px 0 0;
  font-family: var(--display); font-weight: 600; font-size: .9rem; color: var(--secondary);
}
.app-rating svg { width: 15px; height: 15px; color: var(--sun); }

/* ---- Customer testimonial ---- */
.quote-card {
  position: relative; background: var(--white); border-radius: 32px; padding: 46px 44px;
  max-width: 800px; margin: 0 auto; text-align: left;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .06); border: 1px solid rgba(0, 0, 0, .04);
}
.quote-card .qmark { font-family: var(--display); font-weight: 700; font-size: 3rem; line-height: .5; color: var(--primary); }
.quote-card blockquote {
  margin: 8px 0 26px; font-family: var(--display); font-weight: 500; font-size: 1.35rem;
  line-height: 1.5; color: var(--secondary);
}
.quote-card blockquote b { color: var(--primary-dark); font-weight: 700; }
.quote-by { display: flex; align-items: center; gap: 14px; }
.quote-by .mono {
  width: 48px; height: 48px; border-radius: 13px; flex: none; background: var(--secondary); color: #fff;
  display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: 1.05rem;
}
.quote-by .who strong { display: block; font-family: var(--display); font-size: 1rem; color: var(--secondary); }
.quote-by .who span { font-size: .9rem; color: var(--text-body); }

/* ---- Business benefit cards (clean stroke icons, tinted accents) ---- */
.benefit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; margin-top: 48px; }
.benefit {
  background: var(--white); border-radius: 24px; padding: 32px 28px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .05); border: 1px solid rgba(0, 0, 0, .04);
  transition: transform .3s ease, box-shadow .3s ease;
}
.benefit:hover { transform: translateY(-6px); box-shadow: 0 20px 46px rgba(0, 0, 0, .09); }
.benefit .b-ico {
  width: 54px; height: 54px; border-radius: 15px; display: flex; align-items: center;
  justify-content: center; margin-bottom: 20px; background: var(--primary-soft); color: var(--primary-dark);
}
.benefit .b-ico svg { width: 27px; height: 27px; }
.benefit h3 { font-size: 1.18rem; margin-bottom: 8px; }
.benefit p { color: var(--text-body); font-size: .98rem; line-height: 1.55; }
.benefit.a-pink .b-ico { background: var(--ai-soft); color: #b13fc4; }
.benefit.a-sun .b-ico { background: rgba(255, 200, 61, .22); color: #9a6b00; }

/* ---- Assurance chips (honest risk-reversal, not fake metrics) ---- */
.assurance { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.assurance .chip {
  display: inline-flex; align-items: center; gap: 9px; background: var(--white); border-radius: 50px;
  padding: 11px 20px; font-family: var(--display); font-weight: 600; font-size: .92rem;
  color: var(--secondary); box-shadow: 0 6px 18px rgba(0, 0, 0, .05);
}
.assurance .chip .dot { color: var(--primary); font-weight: 800; }

/* ---- Homepage business teaser (flat colour band, no gradient) ---- */
.biz-teaser {
  position: relative; border-radius: 40px; margin: 40px 0;
  background: var(--primary-soft); padding: 60px 48px; text-align: center;
}
.biz-teaser .blob { display: none; }
.biz-teaser-inner { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; }
.biz-teaser h2 { font-size: 2.4rem; margin: 18px 0 12px; }
.biz-teaser p { color: var(--text-body); font-size: 1.12rem; max-width: 540px; margin: 0 auto; }
.biz-teaser-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 28px; }

/* ---- Occasion icon cards share the clean stroke-icon chip ---- */
.icon-card .ic-ico {
  width: 54px; height: 54px; border-radius: 15px; display: inline-flex; align-items: center;
  justify-content: center; margin-bottom: 18px; background: var(--primary-soft); color: var(--primary-dark);
}
.icon-card .ic-ico svg { width: 27px; height: 27px; }
.icon-card.a-pink .ic-ico { background: var(--ai-soft); color: #b13fc4; }
.icon-card.a-sun .ic-ico { background: rgba(255, 200, 61, .22); color: #9a6b00; }

/* checkmark icon inside assurance chips */
.assurance .chip svg { width: 16px; height: 16px; color: var(--primary); flex: none; }

/* ---- Product showcase: business suite (studio) + real screenshots ---- */
.showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
/* Copy-only showcase (phone screenshot removed) — single, centered column. */
.showcase.single { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; }
.showcase .sc-copy h2 { font-size: 2.2rem; margin-bottom: 14px; }
.showcase .sc-copy > p { color: var(--text-body); font-size: 1.08rem; line-height: 1.6; }
.sc-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 15px; }
.sc-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--secondary); font-weight: 500; line-height: 1.45; }
.sc-list li svg { flex: none; width: 22px; height: 22px; color: var(--primary); margin-top: 1px; }
.sc-list li b { font-weight: 700; }

.sc-stage { position: relative; min-height: 360px; display: flex; align-items: center; justify-content: center; }

/* stylised browser window = the FotoBingo Studio (business suite) */
.studio-mock {
  width: 100%; max-width: 460px; background: var(--white); border-radius: 16px; overflow: hidden;
  box-shadow: 0 30px 64px rgba(0, 0, 0, .16); border: 1px solid rgba(0, 0, 0, .06);
}
.studio-bar { display: flex; align-items: center; padding: 11px 14px; background: #f4f0ea; border-bottom: 1px solid rgba(0, 0, 0, .05); }
.studio-bar i { width: 11px; height: 11px; border-radius: 50%; background: #ded7cc; margin-right: 7px; }
.studio-bar .url { margin-left: 8px; font-family: var(--display); font-size: .72rem; color: var(--text-body); background: #fff; padding: 5px 14px; border-radius: 8px; }
.studio-body { display: grid; grid-template-columns: 122px 1fr; }
.studio-nav { background: #faf7f3; border-right: 1px solid rgba(0, 0, 0, .05); padding: 14px 10px; display: flex; flex-direction: column; gap: 3px; }
.studio-nav span { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 600; font-size: .76rem; color: var(--text-body); padding: 8px 10px; border-radius: 9px; }
.studio-nav span .dt { width: 7px; height: 7px; border-radius: 2px; background: currentColor; opacity: .6; }
.studio-nav span.on { background: var(--primary-soft); color: var(--primary-dark); }
.studio-main { padding: 16px 16px 18px; }
.studio-main .sm-title { font-family: var(--display); font-weight: 700; font-size: 1rem; color: var(--secondary); }
.studio-main .sm-sub { font-size: .72rem; color: var(--text-body); margin-bottom: 12px; }
.sm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sm-grid i { aspect-ratio: 1; border-radius: 6px; background: var(--primary-soft); display: block; }
.sm-grid i.p { background: var(--ai-soft); }
.sm-grid i.s { background: rgba(255, 200, 61, .3); }
.sm-brand { display: flex; align-items: center; gap: 7px; margin: 13px 0; }
.sm-brand b { font-size: .72rem; color: var(--text-body); font-family: var(--display); font-weight: 600; }
.sm-brand i { width: 18px; height: 18px; border-radius: 50%; display: block; }
.sm-export { display: flex; align-items: center; justify-content: center; gap: 7px; background: var(--primary); color: #fff; font-family: var(--display); font-weight: 600; font-size: .78rem; padding: 9px; border-radius: 10px; }
.sm-export svg { width: 15px; height: 15px; }

/* real phone screenshot peeking over the studio window */
.sc-phone {
  position: absolute; right: -4px; bottom: -16px; width: 150px; border-radius: 26px; background: #0d0d10;
  padding: 6px; box-shadow: 0 24px 50px rgba(0, 0, 0, .22); transform: rotate(4deg);
}
.sc-phone img { display: block; width: 100%; border-radius: 20px; }

/* ---- Real-boards gallery (authentic screenshots, not stock) ---- */
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 660px; margin: 44px auto 0; }
.shots .shot { position: relative; overflow: hidden; border-radius: 26px; background: #0d0d10; box-shadow: 0 18px 42px rgba(0, 0, 0, .15); transition: transform .3s ease; }
.shots .shot::before { content: ""; display: block; padding-top: 177.78%; } /* guaranteed 9:16 portrait frame */
.shots .shot:hover { transform: translateY(-6px); }
.shots .shot picture { display: contents; }
.shots .shot img { position: absolute; top: 6px; left: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: cover; object-position: top; border-radius: 20px; }
@media (max-width: 560px) { .shots { grid-template-columns: repeat(2, 1fr); max-width: 340px; gap: 14px; } }

@media (max-width: 860px) {
  .showcase { grid-template-columns: 1fr; gap: 36px; }
  .sc-stage { min-height: 0; }
}
@media (max-width: 600px) {
  .biz-teaser { padding: 40px 22px; }
  .biz-teaser h2 { font-size: 1.8rem; }
  .studio-mock { max-width: 100%; }
  .sc-phone { width: 118px; right: 0; }
}

/* ---- "Read more" link inside clickable market cards ---- */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--primary-dark);
}
.link-more svg { width: 18px; height: 18px; transition: transform 0.2s ease; }
.icon-card:hover .link-more svg { transform: translateX(4px); }

/* ---- Demoted "also available as an app" strip ---- */
.app-strip {
  margin: 20px 0 12px;
  padding: 30px 34px;
  background: var(--surface-variant);
  border-radius: 28px;
}
.app-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.app-strip h3 { font-size: 1.25rem; }
.app-strip .store-buttons { display: flex; gap: 14px; align-items: center; }
@media (max-width: 640px) {
  .app-strip { padding: 26px 22px; }
  .app-strip-inner { flex-direction: column; align-items: flex-start; }
}

/* ---- Comparison table (blog comparison articles) ---- */
.compare-wrap { overflow-x: auto; margin: 28px 0; -webkit-overflow-scrolling: touch; }
.compare-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 640px;
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.05);
  font-size: 0.95rem;
}
.compare-table th,
.compare-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid #ece6dd; vertical-align: top; }
.compare-table thead th { background: var(--surface-variant); font-weight: 700; color: var(--text-primary); }
.compare-table tbody th { font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.compare-table .col-us { background: var(--primary-soft); }
.compare-table thead .col-us { background: var(--primary); color: #fff; }
.compare-table tbody tr:last-child td,
.compare-table tbody tr:last-child th { border-bottom: none; }
.compare-table .yes { color: #1a8f4c; font-weight: 700; }
.compare-table .no { color: #c25b5b; font-weight: 700; }

/* ============================================================
   Homepage hero — a single centred column of copy
   ============================================================ */
.hero-stage {
  position: relative;
  isolation: isolate;
  /* Deliberate air above and below the message -- the hero carries one idea,
     so it gets room instead of neighbours. */
  padding: clamp(64px, 10vw, 118px) 0 clamp(44px, 6vw, 76px);
  overflow: visible;
}

.hero-grid { max-width: 840px; margin: 0 auto; text-align: center; }
.hero-copy { text-align: center; }
.hero-copy h1 {
  font-size: clamp(2.8rem, 7vw, 5rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0 0 26px;
}
.hero-copy h1 .grad { color: var(--primary); }
.hero-copy > p { font-size: clamp(1.08rem, 1.5vw, 1.28rem); line-height: 1.6; color: var(--text-body); max-width: 620px; margin: 0 auto; }
.hero-copy .assurance { justify-content: center; }

/* Hero CTAs (was an inline style on the markup). */
.hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 40px; }
/* Quieter than the site-wide buttons: less glow reads more considered. */
.hero-ctas .btn-primary { box-shadow: 0 6px 16px rgba(0, 145, 224, 0.18); }
.hero-ctas .btn-primary:hover { box-shadow: 0 10px 22px rgba(0, 145, 224, 0.24); }
.hero-ctas .btn-outline { box-shadow: none; border: 1px solid rgba(59, 58, 101, 0.12); }
.hero-ctas .btn-outline:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07); }

/* Hero chips: outlined and quiet, so they support the headline instead of
   competing with it. The floating white chips stay on the sub-pages. */
.hero-copy .assurance { gap: 10px 12px; margin-top: 48px; }
.hero-copy .assurance .chip {
  background: transparent;
  box-shadow: none;
  border: 1px solid rgba(59, 58, 101, 0.14);
  color: var(--text-body);
  font-weight: 600;
  font-size: 0.88rem;
  padding: 9px 17px;
}
.hero-copy .assurance .chip svg { width: 15px; height: 15px; opacity: 0.85; }

/* ============================================================
   Homepage polish — cursor-tilt cards, scroll-fill timeline,
   sticky showcase + parallaxing phone shots
   ============================================================ */

/* --- Cursor-follow 3D tilt + sheen on feature cards --- */
.icon-card, .benefit { position: relative; transform-style: preserve-3d; }
.icon-card > *, .benefit > * { position: relative; z-index: 1; }
.icon-card::after, .benefit::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 176, 255, 0.16), rgba(0, 176, 255, 0) 62%);
  opacity: 0; transition: opacity 0.35s ease;
}
.icon-card.a-pink::after, .benefit.a-pink::after { background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(240, 149, 253, 0.2), rgba(240, 149, 253, 0) 62%); }
.icon-card.a-sun::after, .benefit.a-sun::after { background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 200, 61, 0.22), rgba(255, 200, 61, 0) 62%); }
.icon-card.tilting::after, .benefit.tilting::after { opacity: 1; }
.icon-card.tilting, .benefit.tilting { transition: transform 0.09s linear, box-shadow 0.3s ease; box-shadow: 0 26px 52px rgba(59, 58, 101, 0.16); }

/* --- Animated "how it runs" timeline --- */
.features .steps { position: relative; }
@media (min-width: 900px) {
  .features .steps::before,
  .features .steps::after {
    content: ""; position: absolute; top: 32px; height: 4px; border-radius: 4px; left: 12.5%; z-index: 0;
  }
  .features .steps::before { right: 12.5%; background: #e7ddce; }
  .features .steps::after {
    width: 0; max-width: 75%;
    background: linear-gradient(90deg, #00B0FF, #f095fd, #FFC83D);
    transition: width 1.15s cubic-bezier(0.4, 0.1, 0.2, 1);
  }
  .features .steps.drawn::after { width: 75%; }
}
.features .step { position: relative; z-index: 1; }
.features .step-num { position: relative; transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.features .steps.drawn .step:nth-child(1) .step-num { animation: num-pop 0.55s 0.05s both; }
.features .steps.drawn .step:nth-child(2) .step-num { animation: num-pop 0.55s 0.20s both; }
.features .steps.drawn .step:nth-child(3) .step-num { animation: num-pop 0.55s 0.35s both; }
.features .steps.drawn .step:nth-child(4) .step-num { animation: num-pop 0.55s 0.50s both; }
@keyframes num-pop {
  0% { transform: scale(0.6); box-shadow: 0 0 0 rgba(0, 176, 255, 0); }
  55% { transform: scale(1.16); box-shadow: 0 14px 30px rgba(0, 176, 255, 0.45); }
  100% { transform: scale(1); box-shadow: 0 10px 24px rgba(0, 176, 255, 0.3); }
}

/* --- Sticky storytelling showcase (Echte Boards) --- */
.showcase-sticky {
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.showcase-sticky > * { min-width: 0; }
.ss-copy { position: sticky; top: 108px; text-align: left; }
.ss-copy h2 { font-size: 2.5rem; font-weight: 800; margin: 16px 0 14px; }
.ss-copy .lead { max-width: 40ch; }
/* Desktop: shots stack vertically and scroll past the pinned copy. On narrow
   screens we fall back to the base .shots grid (the flex column collapses the
   shots, whose content is absolutely positioned). */
@media (min-width: 821px) {
  .ss-shots { display: flex; flex-direction: column; align-items: center; gap: 30px; max-width: none; margin: 0; }
  .ss-shots .shot { width: min(300px, 80%); }
}
@media (max-width: 820px) {
  .showcase-sticky { display: block; }
  .ss-copy { position: static; text-align: center; margin-bottom: 30px; }
  .ss-copy .lead { margin-left: auto; margin-right: auto; }
  .ss-shots { width: 100%; margin: 0 auto; }
}

/* Parallax drift for the phone shots (JS sets --py; keeps hover lift). */
.shots .shot { transform: translateY(var(--py, 0px)); }
.shots .shot:hover { transform: translateY(calc(var(--py, 0px) - 6px)); }

/* ---- Respect users who prefer reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .reveal, .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .icon-card.tilting, .benefit.tilting { transform: none !important; }
  .features .steps::after { transition: none; }
  .features .steps.drawn .step-num { animation: none; }
  .shots .shot { transform: none !important; }
}

/* =========================================================================
   Consumer app landing (/app, /en/app)
   Shared site navigation, with store buttons repeated top and bottom.
   ========================================================================= */

.app-page .app-hero { padding: 40px 0 20px; }

/* The "how it works" section reuses .features only for its connector timeline,
   not for the cream slab the marketing pages put behind it. */
.app-page .features { background: transparent; border-radius: 0; padding: 56px 0; }

/* Keep the app menu toggle reachable by keyboard on mobile. */
@media (max-width: 968px) {
  .app-page .nav-toggle {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .app-page .nav-toggle:focus-visible + .nav-burger {
    outline: 3px solid var(--primary);
    outline-offset: 5px;
  }
}

.app-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

.app-hero h1 {
  font-family: var(--display);
  font-size: clamp(2.4rem, 5.4vw, 3.9rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 18px 0 18px;
}

.app-hero h1 .grad { color: var(--primary); }
.app-hero .lead { font-size: 1.2rem; line-height: 1.6; max-width: 46ch; }

/* Store buttons, hero size — bigger than the badges on the B2B pages. */
.store-buttons.big .store-button img { height: 58px; }
.store-buttons.big { gap: 14px; margin-top: 30px; }

/* Reassurance chips under the badges (free, no account, age). */
.app-facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.app-facts span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 50px;
  padding: 8px 15px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--text-body);
}
.app-facts span svg { width: 16px; height: 16px; color: var(--primary); }

/* Single hero phone, tilted in its own soft glow. */
.app-phone { position: relative; display: flex; justify-content: center; }
.app-phone::before {
  content: "";
  position: absolute;
  inset: -12% -6%;
  background: radial-gradient(circle at 50% 45%, rgba(0, 176, 255, .18) 0%, transparent 68%);
  z-index: 0;
}
/* The hero phone is a real device frame now; this only sets its size and tilt. */
.app-phone .phone-mock {
  --s: 0.62;
  position: relative;
  z-index: 1;
  transform: rotate(-2.5deg);
  transition: transform .35s ease;
  filter: drop-shadow(0 26px 46px rgba(0, 0, 0, .2));
}
.app-phone .phone-mock:hover { transform: rotate(0deg) translateY(-6px); }
@media (max-width: 900px) { .app-phone .phone-mock { --s: 0.5; } }
@media (max-width: 480px) { .app-phone .phone-mock { --s: 0.42; } }
/* Wedding page: the showcase phone is the product demo, so it fills its column. */
.app-phone.big .phone-mock { --s: 0.82; }
@media (max-width: 900px) { .app-phone.big .phone-mock { --s: 0.68; } }
@media (max-width: 480px) { .app-phone.big .phone-mock { --s: 0.58; } }

/* QR panel — the fast path when someone is reading this on a laptop. */
.app-qr {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--white);
  border-radius: 22px;
  padding: 16px 22px 16px 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
  margin-top: 30px;
  max-width: 380px;
}
.app-qr img { width: 92px; height: 92px; border-radius: 12px; display: block; }
.app-qr p { font-size: .95rem; color: var(--text-body); margin: 0; }
.app-qr strong { display: block; color: var(--text-primary); font-size: 1.02rem; margin-bottom: 3px; }
/* On phones the store buttons are one tap away — the QR code is dead weight. */
@media (max-width: 700px) { .app-qr { display: none; } }

/* Closing band: store badges on the blue CTA need a light backdrop. */
.cta-band .store-buttons { justify-content: center; margin-top: 8px; }

/* "Planning something bigger?" — the one, quiet door back to the B2B site. */
.app-b2b-note {
  text-align: center;
  padding: 26px 0 8px;
  color: var(--text-secondary);
  font-size: .98rem;
}
.app-b2b-note a { color: var(--primary-dark); font-weight: 700; text-decoration: none; }
.app-b2b-note a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .app-hero-grid { grid-template-columns: 1fr; gap: 34px; text-align: center; }
  .app-hero .lead { margin-left: auto; margin-right: auto; }
  .app-hero .store-buttons, .app-facts { justify-content: center; }
  .app-qr { margin-left: auto; margin-right: auto; }
}

@media (max-width: 480px) {
  .store-buttons.big { flex-direction: column; align-items: center; }
  .store-buttons.big .store-button img { height: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  .app-phone .shot, .app-phone .shot:hover { transform: none; transition: none; }
}

/* =========================================================================
   Event inquiry form (/anfrage, /en/inquiry)
   One question per screen. Narrow centred column, no sidebar — the only thing
   on screen should be the question being asked.
   ========================================================================= */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.wizard-wrap {
  max-width: 620px;
  margin: 0 auto;
  padding: 56px 0 96px;
}

.wizard-head { text-align: center; margin-bottom: 32px; }
.wizard-head h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); margin: 16px 0 0; }

.wizard-card {
  background: var(--white);
  border-radius: 24px;
  padding: 36px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
}

/* ---- Progress ---- */
.wizard-progress { margin-bottom: 30px; }

.progress-track {
  height: 4px;
  border-radius: 4px;
  background: var(--surface-variant);
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  width: 0;
  border-radius: 4px;
  background: var(--primary);
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-label {
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 10px 0 0;
}

/* ---- A step. Namespaced: the site already uses .step for the numbered
   "so funktioniert's" circles, and an unprefixed .step here silently
   overrode their padding and centring on four other pages. ---- */
.wz-step { border: 0; padding: 0; margin: 0; min-width: 0; }

/* The question is the loudest thing on the screen — there is only one. */
.wz-q {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--text-primary);
  margin: 0 0 8px;
  padding: 0;
  text-wrap: balance;
}

.wz-hint {
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 0 20px;
}
.wz-q + input, .wz-q + textarea, .wz-q + .choices { margin-top: 20px; }

.wz-step input[type="text"],
.wz-step input[type="email"],
.wz-step input[type="date"],
.wz-step textarea {
  width: 100%;
  min-height: 56px;
  padding: 14px 18px;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  background: var(--white);
  font-family: var(--display);
  font-size: 1.08rem;
  color: var(--text-primary);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.wz-step textarea { min-height: 130px; resize: vertical; line-height: 1.6; font-size: 1rem; }

.wz-step input:focus-visible,
.wz-step textarea:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft);
}

.wz-step.has-error input,
.wz-step.has-error textarea { border-color: #d64545; }

/* ---- Choice options ---- */
.choices { display: flex; flex-direction: column; gap: 10px; }
.choices-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

/* The whole tile is the target, so the radio itself can be hidden. */
.choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 14px 18px;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  background: var(--white);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}
.choice:hover { border-color: var(--primary); transform: translateY(-1px); }

.choice input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.choice-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.choice-body strong {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.03rem;
  color: var(--text-primary);
}
.choice-body small { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.4; }

.choice input:checked ~ .choice-body strong { color: var(--primary-dark); }
.choice:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
/* Keyboard focus lands on the hidden radio, so the tile has to show it. */
.choice:has(input:focus-visible) { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }

.choice-compact { justify-content: center; text-align: center; }
.choice-compact .choice-body { align-items: center; }

/* ---- Date checkbox ---- */
.form-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-top: 14px;
  cursor: pointer;
  font-size: 0.98rem;
  color: var(--text-body);
}
.form-check input { width: 20px; height: 20px; accent-color: var(--primary); cursor: pointer; }

.char-count {
  display: block;
  text-align: right;
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.char-count.near-limit { color: #b8860b; font-weight: 600; }

.form-status {
  border-radius: 14px;
  padding: 13px 18px;
  margin-bottom: 20px;
  font-size: 0.92rem;
  font-weight: 600;
  background: rgba(214, 69, 69, 0.1);
  color: #b52b2b;
}

/* ---- Review ---- */
.review-list { margin: 22px 0 0; padding: 0; }

.review-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 4px 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
}
.review-row dt {
  grid-column: 1;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.review-row dd {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.review-edit {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 50px;
  background: var(--white);
  font-family: var(--display);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary-dark);
  cursor: pointer;
}
.review-edit:hover { border-color: var(--primary); }

.review-note { margin: 22px 0 0; }

/* ---- Nav ---- */
.wizard-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
}
.wizard-nav .btn { flex: 1; }

.btn-back {
  min-height: 48px;
  padding: 0 20px;
  border: none;
  background: none;
  font-family: var(--display);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 50px;
}
.btn-back:hover { color: var(--text-primary); }

/* ---- Success ---- */
.inquiry-success {
  background: var(--white);
  border-radius: 24px;
  padding: 48px 36px;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
}
.inquiry-success h2 { font-family: var(--display); font-size: 1.9rem; margin-bottom: 14px; }
.inquiry-success p { color: var(--text-body); line-height: 1.7; max-width: 44ch; margin: 0 auto 10px; }
.inquiry-success .pill { margin-bottom: 22px; }

.success-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 26px 0 20px;
}
.success-actions .btn { padding: 13px 26px; font-size: 0.98rem; }

/* The mailto handoff is silent when no client is registered, so the address
   and the copy fallback stay visible rather than hide behind a link. */
.success-fallback {
  font-size: 0.88rem;
  color: var(--text-secondary);
  border-top: 1px solid var(--border);
  padding-top: 18px;
  margin-top: 4px;
}
.success-fallback a { color: var(--primary-dark); font-weight: 600; }

/* No JS → no step flow, so show the mail route instead of a dead button. */
.js-only { display: none; }
/* :not([hidden]) matters — a bare `display: block` would outrank the [hidden]
   attribute the script sets to swap the form for the success panel. */
.js .js-only:not([hidden]) { display: block; }

@media (max-width: 640px) {
  .wizard-wrap { padding: 36px 0 72px; }
  .wizard-card { padding: 24px 20px; border-radius: 20px; }
  .wz-q { font-size: 1.3rem; }
  .choices-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================================
   Tap targets — WCAG 2.5.5 (44x44) and Google's mobile-usability signal
   Measured on the live site at 390px: every interactive control in the site
   chrome came in under 44px. Footer column links were 155x24 (twelve per
   page), the DE/EN switcher 30x24, the nav CTA 342x42, social icons 40x40.
   These are all shared chrome, so this one block covers all 45 pages.
   ========================================================================= */

/* Twelve links per page at 24px tall. Padding rather than min-height so the
   targets meet each other with no dead strip between them to mis-tap into. */
.footer-col a {
  padding: 10px 0;
  margin-bottom: 0;
}

/* The smallest control on the site, and the one the whole DE/EN hreflang pair
   depends on being usable. */
.nav-lang a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 4px 10px;
}

.nav-cta { padding: 13px 22px; }

.footer-social a { width: 44px; height: 44px; }

nav .logo { min-height: 44px; }

.footer-logo { padding: 4px 0; }

@media (max-width: 968px) {
  /* Only widen the switcher where the nav is a full-width dropdown — doing it
     on desktop would crowd the horizontal bar for no benefit, since a mouse
     doesn't need the target. */
  .nav-lang a { min-width: 44px; }
}

/* ---------------------------------------------------------------------------
   Article tables and callouts (introduced with the event-planning guides).
   .table-wrap keeps wide tables scrolling inside themselves so the page body
   never scrolls sideways on mobile.
   --------------------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 26px 0;
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}

.article-body table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 0.97rem;
}

.article-body thead th {
  background: var(--secondary);
  color: #fff;
  font-weight: 600;
  text-align: left;
  padding: 13px 16px;
  line-height: 1.35;
  vertical-align: bottom;
}

.article-body thead th:first-child { border-top-left-radius: 16px; }
.article-body thead th:last-child { border-top-right-radius: 16px; }

.article-body .th-sub {
  display: block;
  font-weight: 400;
  font-size: 0.8rem;
  opacity: 0.75;
  margin-top: 2px;
}

.article-body tbody td {
  padding: 13px 16px;
  border-top: 1px solid var(--border);
  vertical-align: top;
  line-height: 1.55;
}

.article-body tbody tr:nth-child(even) { background: var(--surface-variant); }
.article-body tbody td:first-child { color: var(--text-primary); }

.callout {
  background: var(--surface-variant);
  border-left: 4px solid var(--primary);
  border-radius: 0 14px 14px 0;
  padding: 18px 22px;
  margin: 26px 0;
}

.callout p { margin: 0; }
.callout p + p { margin-top: 10px; }

.article-body ol {
  margin: 16px 0 16px 22px;
  display: grid;
  gap: 10px;
}

@media (max-width: 640px) {
  .article-body table { font-size: 0.9rem; }
  .article-body thead th,
  .article-body tbody td { padding: 11px 13px; }
}

/* ============================================================
   Photo pile — mood photography scattered like prints on a table.
   Source files are 512px squares, so tiles stay small on purpose:
   above ~260 CSS px they go soft on retina screens.
   ============================================================ */
.photo-pile {
  max-width: 1060px;
  margin: clamp(30px, 5vw, 58px) auto 0;
  padding-bottom: 8px;
}

.pp-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
/* Rows bite into each other so the stack reads as a pile, not as a grid. */
.pp-row + .pp-row { margin-top: clamp(-32px, -2.2vw, -14px); }

.pp-item {
  position: relative;
  flex: 0 0 auto;
  /* Negative margin is what makes neighbours overlap. */
  margin: 0 clamp(-15px, -1.1vw, -8px);
  background: var(--white);
  /* Thin print edge: enough to read as a photo print, not as a frame. */
  padding: clamp(3px, 0.3vw, 5px);
  border-radius: 4px;
  box-shadow: 0 12px 28px rgba(59, 58, 101, 0.16), 0 2px 6px rgba(59, 58, 101, 0.09);
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.32s ease;
}
.pp-item img { display: block; width: 100%; height: auto; border-radius: 2px; }

.pp-l { width: 31%; min-width: 96px; max-width: 224px; }
.pp-m { width: 27%; min-width: 84px; max-width: 194px; }
.pp-s { width: 23%; min-width: 74px; max-width: 166px; }

/* A nine-frame pile runs three to a row instead of four, so the tiles take a
   proportionally larger share. The max-widths still hold the line at the point
   where a 512px source would start to soften. */
.photo-pile.pp-3 .pp-l { width: 40%; min-width: 112px; max-width: 224px; }
.photo-pile.pp-3 .pp-m { width: 35%; min-width: 100px; max-width: 200px; }
.photo-pile.pp-3 .pp-s { width: 30%; min-width: 88px; max-width: 176px; }


/* Hand-set angles: an even alternation would read as a pattern, so the
   values are deliberately uneven and differ between the two rows. */
.pp-row-a .pp-item:nth-child(1) { transform: rotate(-5deg) translateY(7px); z-index: 2; }
.pp-row-a .pp-item:nth-child(2) { transform: rotate(3deg) translateY(-9px); z-index: 4; }
.pp-row-a .pp-item:nth-child(3) { transform: rotate(-1.5deg) translateY(3px); z-index: 6; }
.pp-row-a .pp-item:nth-child(4) { transform: rotate(4.5deg) translateY(-5px); z-index: 5; }
.pp-row-a .pp-item:nth-child(5) { transform: rotate(-3.5deg) translateY(8px); z-index: 3; }
.pp-row-a .pp-item:nth-child(6) { transform: rotate(2deg) translateY(-3px); z-index: 1; }

.pp-row-b .pp-item:nth-child(1) { transform: rotate(4deg) translateY(-4px); z-index: 3; }
.pp-row-b .pp-item:nth-child(2) { transform: rotate(-2.5deg) translateY(6px); z-index: 7; }
.pp-row-b .pp-item:nth-child(3) { transform: rotate(5.5deg) translateY(-6px); z-index: 8; }
.pp-row-b .pp-item:nth-child(4) { transform: rotate(-4deg) translateY(5px); z-index: 6; }
.pp-row-b .pp-item:nth-child(5) { transform: rotate(2.5deg) translateY(-7px); z-index: 2; }

.pp-row-c .pp-item:nth-child(1) { transform: rotate(-3deg) translateY(5px); z-index: 4; }
.pp-row-c .pp-item:nth-child(2) { transform: rotate(5deg) translateY(-5px); z-index: 9; }
.pp-row-c .pp-item:nth-child(3) { transform: rotate(-4.5deg) translateY(4px); z-index: 5; }

/* Straighten and lift under the cursor — the pile tidies itself as you look.
   The move itself is gated on no-preference; overriding it afterwards would
   snap the frame straight for reduced-motion users instead of leaving it be. */
.pp-row .pp-item:hover,
.pp-row .pp-item:focus-within {
  box-shadow: 0 24px 46px rgba(59, 58, 101, 0.22), 0 3px 8px rgba(59, 58, 101, 0.1);
  z-index: 20;
}
@media (prefers-reduced-motion: no-preference) {
  .pp-row .pp-item:hover,
  .pp-row .pp-item:focus-within { transform: rotate(0deg) translateY(-10px) scale(1.05); }
}

@media (max-width: 720px) {
  /* Tighter pile, and the two weakest frames step aside so it stays 3 rows. */
  .pp-item { margin: 0 -6px; }
  .pp-row + .pp-row { margin-top: -12px; }
  .pp-hide-sm { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pp-item { transition: none; }
}

/* ============================================================
   iPhone 17 mockup
   Derived from devices.css by Marvel (MIT) — github.com/marvelapp/devices.css
   Only the iPhone frame is vendored (3.5KB of the library's 50KB), retuned from
   its newest model (iPhone 14 Pro) to iPhone 17 geometry: a 402x874pt screen
   inside a ~14px bezel rather than the 14 Pro's 390x830 inside 19px, plus the
   Camera Control button the 14 Pro doesn't have. Self-hosted because the CSP is
   default-src 'self' — a CDN link would simply be blocked.
   ============================================================ */
.device { display: inline-block; position: relative; z-index: 1; }
/* No z-index here: the frame must stay below its later siblings so the island,
   sensors and antenna bands paint on top of the screen. */
.device .device-frame { position: relative; }
.device .device-screen { display: block; object-fit: cover; object-position: top; }
.device .device-frame picture { display: contents; }
.device .device-btns,
.device .device-power,
.device .device-home,
.device .device-header,
.device .device-sensors,
.device .device-stripe { position: absolute; }
/* These three are just anchors for pseudo-elements, so they must span the whole
   device — otherwise the sensor pill lands 62px off to the left of the frame. */
.device .device-stripe,
.device .device-home,
.device .device-sensors { height: 100%; left: 0; top: 0; width: 100%; }

.device-iphone-17 { height: 902px; width: 430px; }

.device-iphone-17 .device-frame {
  background: #010101;
  border: 1px solid #2a2a2e;
  border-radius: 66px;
  box-shadow: inset 0 0 3px 2px #b9bcc2, inset 0 0 0 6px #4a4a4f;
  height: 902px;
  padding: 14px;
  width: 430px;
}
.device-iphone-17 .device-screen { border-radius: 52px; height: 874px; width: 402px; }

/* Dynamic Island — same 125x36pt pill as the 14 Pro, sitting 11pt below the
   top of the screen instead of 10. */
.device-iphone-17 .device-header {
  background: #010101;
  border-radius: 18px;
  height: 36px;
  left: 50%;
  margin-left: -62px;
  top: 25px;
  width: 125px;
}
.device-iphone-17 .device-sensors::after,
.device-iphone-17 .device-sensors::before { content: ""; position: absolute; }
.device-iphone-17 .device-sensors::after {
  background: #010101; border-radius: 17px;
  height: 34px; left: 50%; margin-left: -62px; top: 26px; width: 76px;
}
.device-iphone-17 .device-sensors::before {
  background: radial-gradient(farthest-corner at 20% 20%, #6074bf 0, transparent 40%),
              radial-gradient(farthest-corner at 80% 80%, #513785 0, #24555e 20%, transparent 50%);
  border-radius: 50%;
  box-shadow: 0 0 1px 1px rgba(255, 255, 255, .05);
  height: 9px; left: 50%; margin-left: 38px; top: 38px; width: 9px;
}

/* Left rail: Action button, then the two volume keys. */
.device-iphone-17 .device-btns {
  background: #2a2a2e; border-radius: 2px;
  height: 28px; left: -2px; top: 118px; width: 3px;
}
.device-iphone-17 .device-btns::after,
.device-iphone-17 .device-btns::before {
  background: #2a2a2e; border-radius: 2px; content: "";
  height: 60px; left: 0; position: absolute; width: 3px;
}
.device-iphone-17 .device-btns::before { top: 52px; }
.device-iphone-17 .device-btns::after { top: 128px; }

/* Right rail: side button, and below it Camera Control (new on 16/17). */
.device-iphone-17 .device-power {
  background: #2a2a2e; border-radius: 2px;
  height: 96px; right: -2px; top: 196px; width: 3px;
}
.device-iphone-17 .device-power::after {
  background: #2a2a2e; border-radius: 2px; content: "";
  height: 34px; position: absolute; right: 0; top: 132px; width: 3px;
}

/* Antenna bands. */
.device-iphone-17 .device-stripe::after,
.device-iphone-17 .device-stripe::before {
  border: solid rgba(1, 1, 1, .25); border-width: 0 7px; content: "";
  height: 7px; left: 0; position: absolute; width: 100%; z-index: 9;
}
.device-iphone-17 .device-stripe::before { top: 88px; }
.device-iphone-17 .device-stripe::after { bottom: 88px; }

/* The frame is fixed-pixel, so it gets scaled down and the wrapper reserves
   only the scaled footprint. --py is the parallax offset the homepage JS sets. */
.phone-mock {
  --s: 0.5;
  width: calc(430px * var(--s));
  height: calc(902px * var(--s));
  transform: translateY(var(--py, 0px));
  transition: transform 0.3s ease;
}
.phone-mock .device { transform: scale(var(--s)); transform-origin: top left; }
/* The device's own layout box is the full 430px; the scale is visual only, so
   without this the unscaled width leaks into the page's scrollable overflow.
   clip (not hidden) plus a margin keeps the side buttons, which sit at -2px. */
.phone-mock { overflow: clip; overflow-clip-margin: 6px; }
.ss-phones { display: flex; flex-direction: column; align-items: center; gap: 30px; }

/* Full-width pile under the homepage hero — five to a row, so it reads as a
   band rather than the column-sized piles on the format pages. */
.photo-pile-band { margin: clamp(6px, 2vw, 26px) auto clamp(10px, 3vw, 34px); }
.photo-pile-band .photo-pile { max-width: 980px; margin: 0 auto; }

/* Three phones across, for the app and corporate pages. */
.phone-row {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: clamp(14px, 2.4vw, 26px); margin-top: 44px;
}
.phone-row .phone-mock { --s: 0.42; }
@media (max-width: 900px) { .phone-row .phone-mock { --s: 0.34; } }
@media (max-width: 560px) { .phone-row .phone-mock { --s: 0.3; } }
/* Two phones across (wedding page) — room for a much larger scale. */
.phone-row.two .phone-mock { --s: 0.7; }
@media (max-width: 900px) { .phone-row.two .phone-mock { --s: 0.5; } }
@media (max-width: 560px) { .phone-row.two .phone-mock { --s: 0.55; } }

@media (max-width: 1100px) { .phone-mock { --s: 0.43; } }
@media (max-width: 820px)  { .ss-phones { gap: 24px; } }
@media (prefers-reduced-motion: reduce) { .phone-mock { transform: none; transition: none; } }

/* Second, quieter line inside the homepage H1: says in search words what the
   brand line ("Memorable Events.") only implies. */
.hero-copy h1 .h1-sub {
  display: block;
  margin-top: 18px;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-body);
}

/* FAQ: native <details> so answers stay in the HTML for crawlers and work
   without JS. Each answer is written to stand on its own. */
.faq { max-width: 760px; margin: 0 auto; }
.faq-list { display: grid; gap: 12px; margin-top: 36px; }
.faq details {
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .04);
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 56px 20px 24px;
  position: relative;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-primary);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: 1.2rem;
  line-height: 28px;
  text-align: center;
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq summary:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 20px; }
.faq details p { padding: 0 24px 22px; color: var(--text-body); line-height: 1.65; margin: 0; }
.faq details p a { color: var(--primary-dark); font-weight: 600; }

/* Birthday challenge examples, laid out like a real bingo board: a 3x3 grid
   of square white tiles with a short, open prompt in each. */
.idea-board {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 480px;
  margin: 36px auto 0;
  padding: 0;
}
.idea-board li {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px;
  border-radius: 18px;
  background: var(--white);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .05);
  color: var(--text-primary);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(0.85rem, 2.4vw, 1.05rem);
  line-height: 1.2;
  hyphens: auto;
  overflow-wrap: anywhere;
}
@media (max-width: 560px) { .idea-board { gap: 8px; } }
.app-hero .lead a { color: var(--primary-dark); font-weight: 700; text-decoration: none; }
.app-hero .lead a:hover { text-decoration: underline; }

/* =========================================================================
   Photo challenge generator (/foto-challenge-generator)
   ========================================================================= */
.cg-hero { text-align: center; padding: 40px 0 8px; }
.cg-hero h1 {
  font-family: var(--display);
  font-size: clamp(2.3rem, 5.4vw, 3.6rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 18px 0 16px;
}
.cg-hero h1 .grad { color: var(--primary); }
.cg-hero .lead { max-width: 56ch; margin: 0 auto; }

.cg-tool { max-width: 640px; margin: 28px auto 0; text-align: center; }
.cg-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.cg-chip {
  font: inherit;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid rgba(59, 58, 101, 0.14);
  background: transparent;
  color: var(--text-body);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.cg-chip:hover { border-color: var(--primary); color: var(--primary-dark); }
.cg-chip[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--white); }
.cg-chip:focus-visible, .cg-tile:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

/* The board reuses .idea-board (3x3 white squares); tiles are buttons. */
.cg-board { margin-top: 28px; }
.cg-board li { padding: 0; }
.cg-tile {
  width: 100%;
  height: 100%;
  padding: 8px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  hyphens: auto;
  overflow-wrap: anywhere;
}
.cg-tile:hover { color: var(--primary-dark); }
.cg-tile.swapped { animation: cg-pop .35s ease; }
@keyframes cg-pop { 0% { transform: scale(.88); opacity: .4; } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cg-tile.swapped { animation: none; } }

.cg-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.cg-actions .btn { font: inherit; font-weight: 700; cursor: pointer; border: 0; }
.cg-hint { margin-top: 12px; color: var(--text-secondary); font-size: 0.9rem; }
.cg-cta {
  margin-top: 28px;
  background: var(--white);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .04);
}
.cg-cta[hidden] { display: none; }
.cg-cta h2 { font-size: 1.3rem; margin-bottom: 6px; }
.cg-cta p { color: var(--text-body); margin: 0 auto 16px; max-width: 48ch; }

.cg-all { max-width: 900px; margin-left: auto; margin-right: auto; }
.cg-occ { margin-top: 40px; }
.cg-occ h3 { font-size: 1.35rem; margin-bottom: 6px; }
.cg-occ h3 small { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); }
.cg-occ p { color: var(--text-body); margin-bottom: 14px; }
.cg-occ p a { color: var(--primary-dark); font-weight: 700; text-decoration: none; white-space: nowrap; }
.cg-occ p a:hover { text-decoration: underline; }
.cg-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.cg-list li {
  background: var(--white);
  border-radius: 999px;
  padding: 7px 14px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text-primary);
}

.cg-tip-list { list-style: none; max-width: 760px; margin: 28px auto 0; padding: 0; display: grid; gap: 12px; }
.cg-tip-list li { background: var(--white); border-radius: 20px; padding: 18px 22px; color: var(--text-body); line-height: 1.6; }
.cg-tip-list strong { color: var(--text-primary); }

/* Blog article: photo under the header and a table of contents. */
.article-figure { max-width: 560px; margin: 0 auto 36px; }
.article-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}
.toc {
  background: var(--white);
  border-radius: 20px;
  padding: 20px 24px 14px;
  margin: 8px 0 28px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .04);
}
.toc-title { font-weight: 800; color: var(--text-primary); margin-bottom: 8px !important; font-size: 1rem; }
.article-body .toc ol { margin: 0 0 6px 1.2em; }
.article-body .toc li { margin-bottom: 6px; font-size: 0.98rem; }
.article-body .toc a { text-decoration: none; }
.article-body .toc a:hover { text-decoration: underline; }
.article-body h2[id] { scroll-margin-top: 96px; }

/* Case study article: key numbers, the event's board, captioned figure. */
.case-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 8px 0 24px; }
.case-stat { background: var(--white); border-radius: 20px; padding: 18px 16px; box-shadow: 0 6px 20px rgba(0, 0, 0, .04); }
.case-stat b { display: block; font-family: var(--display); font-size: 2rem; line-height: 1.1; color: var(--text-primary); }
.case-stat span { display: block; margin-top: 4px; font-size: 0.9rem; line-height: 1.35; color: var(--text-body); }
@media (max-width: 640px) { .case-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.article-body .case-board { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; counter-reset: tile; }
.article-body .case-board li {
  counter-increment: tile;
  background: var(--white);
  border-radius: 16px;
  padding: 14px;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--text-primary);
  font-weight: 600;
}
.article-body .case-board li::before { content: "#" counter(tile); display: block; font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 4px; }
@media (max-width: 560px) { .article-body .case-board { grid-template-columns: 1fr; } }
.case-figure img { aspect-ratio: auto; object-fit: contain; }
.article-figure figcaption { text-align: center; margin-top: 10px; font-size: 0.9rem; color: var(--text-secondary); }
/* Buttons inside articles keep their own colours (the article link colour
   used to win and made the CTA text blue on blue). */
.article-body .btn-primary { color: var(--white); text-decoration: none; }
/* Case study: official board graphic next to the challenge list, and a
   two-photo row. */
.article-dek { font-size: 1.12rem; line-height: 1.5; color: var(--text-body); max-width: 600px; margin: 0 auto 12px; }
.case-board-wrap { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 20px; align-items: center; margin: 4px 0 22px; }
.case-board-img { margin: 0; }
.case-board-img img { display: block; width: 100%; height: auto; border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, .08); }
.article-body .case-board-wrap .case-board { grid-template-columns: 1fr; gap: 8px; margin: 0; }
.article-body .case-board-wrap .case-board li { padding: 10px 14px; }
@media (max-width: 640px) { .case-board-wrap { grid-template-columns: 1fr; } .case-board-img { max-width: 360px; margin: 0 auto; } }
.case-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 8px 0 26px; }
.case-photos figure { margin: 0; }
.case-photos img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 20px; }
.case-photos figcaption { margin-top: 8px; font-size: 0.88rem; line-height: 1.4; color: var(--text-secondary); text-align: center; }
@media (max-width: 480px) { .case-photos { grid-template-columns: 1fr; } }
/* Board graphic on its own (the challenges are in its alt text). */
.article-body > .case-board-img { max-width: 420px; margin: 8px auto 26px; }

/* Case study KPI cards, in the brand look: white rounded cards on cream,
   big number in brand blue, B2B meaning underneath. */
.kpi-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 8px 0 26px; }
.kpi { grid-column: span 2; background: var(--white); border-radius: 22px; padding: 18px 18px 16px; box-shadow: 0 6px 20px rgba(0, 0, 0, .05); display: flex; flex-direction: column; }
.kpi:nth-child(4), .kpi:nth-child(5) { grid-column: span 3; }
.kpi-label { font-size: 0.78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--primary-dark); }
.kpi-value { font-family: var(--display); font-size: 2.6rem; font-weight: 800; line-height: 1.05; color: var(--primary); margin-top: 6px; }
.kpi-unit { line-height: 1.3; font-weight: 700; color: var(--text-primary); font-size: 0.98rem; }
.kpi-meaning { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--surface-variant); font-size: 0.9rem; line-height: 1.45; color: var(--text-body); }
@media (max-width: 640px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi, .kpi:nth-child(4) { grid-column: span 1; }
  .kpi:nth-child(5) { grid-column: span 2; }
  .kpi-value { font-size: 2.2rem; }
}