/* ------------------------------------------------------------------
   Llamafone — landing page
   Playful, light, Sims-themed (no dark mode)
   ------------------------------------------------------------------ */

:root {
  /* Sims plumbob green + warm peach accent palette */
  --plumbob:        #6FCF40;
  --plumbob-deep:   #4f9c25;
  --plumbob-dark:   #3a7012;
  --plumbob-soft:   #d6f896;
  --accent:         #E08B59;
  --accent-deep:    #C66F3F;
  --accent-soft:    #fbe3d3;
  --sky:            #B3E0F2;
  --sky-deep:       #6dc6e7;
  --pink:           #FF6B9D;
  --pink-deep:      #e54a82;
  --cream:          #FFFDF6;
  --paper:          #FFFFFF;
  --ink:            #1f3a2b;
  --ink-soft:       #4a5c52;
  --muted:          #76867d;
  --line:           #e6ecdf;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;

  --shadow-sm: 0 2px 6px rgba(58, 112, 18, 0.08);
  --shadow-md: 0 8px 20px rgba(58, 112, 18, 0.10);
  --shadow-lg: 0 16px 40px rgba(58, 112, 18, 0.14);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Nunito', system-ui, -apple-system, Segoe UI, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a {
  color: var(--plumbob-deep);
  text-decoration: none;
  border-bottom: 2px solid rgba(111, 207, 64, 0.35);
  transition: color 0.15s, border-color 0.15s;
}
a:hover { color: var(--plumbob-dark); border-bottom-color: var(--plumbob); }

h1, h2, h3, h4 {
  font-family: 'Fredoka', 'Nunito', system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.25rem, 5vw, 3.6rem); letter-spacing: -0.01em; }

.brand-llamafone {
  background: linear-gradient(135deg, #E89870 0%, #C8693B 50%, #9A4D21 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  padding: 0 0.05em;
  position: relative;
  /* Stacked drop-shadows give a subtle outline + warm glow without
     distorting letterforms the way -webkit-text-stroke does. */
  filter:
    drop-shadow(0 1px 0 rgba(122, 60, 22, 0.35))
    drop-shadow(0 0 2px rgba(122, 60, 22, 0.45))
    drop-shadow(0 4px 14px rgba(240, 168, 120, 0.30));
}

/* Sparkles dancing around the brand gradient text */
.text-sparkle {
  position: absolute;
  background: var(--accent);
  clip-path: polygon(
    50% 0%, 58% 42%, 100% 50%, 58% 58%,
    50% 100%, 42% 58%, 0% 50%, 42% 42%
  );
  opacity: 0;
  pointer-events: none;
  animation: twinkle 2.4s ease-in-out infinite;
  z-index: 2;
}
.ts1 { top: -16px;  left:  -10px; width: 12px; height: 12px; animation-delay: 0.1s; }
.ts2 { top: -10px;  left:   35%;  width:  8px; height:  8px; animation-delay: 0.6s; }
.ts3 { top:  -6px;  right:  -8px; width: 10px; height: 10px; animation-delay: 1.1s; }
.ts4 { bottom: -12px; left:  15%; width:  9px; height:  9px; animation-delay: 1.5s; }
.ts5 { bottom: -8px;  right: 25%; width:  7px; height:  7px; animation-delay: 1.9s; }
.ts6 { top:    40%; right: -14px; width:  6px; height:  6px; animation-delay: 2.2s; }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.4rem); margin-bottom: 0.75em; }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1em; }

code {
  font-family: 'SF Mono', 'Consolas', 'Menlo', monospace;
  background: rgba(111, 207, 64, 0.12);
  color: var(--plumbob-dark);
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 0.92em;
  overflow-wrap: anywhere; /* let long inline strings (paths, keys) wrap on narrow screens */
}
pre code {
  overflow-wrap: normal; /* inside pre, let it overflow horizontally instead */
  word-break: normal;
}

pre {
  background: #1f3a2b;
  color: #e8f5d6;
  padding: 14px 18px;
  border-radius: var(--r-sm);
  overflow-x: auto;
  font-size: 0.92em;
  margin: 0.75em 0;
}
pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  font-size: inherit;
}

kbd {
  display: inline-block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 2px 8px;
  font-family: 'SF Mono', 'Consolas', monospace;
  font-size: 0.85em;
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(58, 112, 18, 0.08);
}

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.muted { color: var(--muted); }
.small { font-size: 0.88em; }

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

.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  font-family: 'Fredoka', 'Nunito', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, background 0.15s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: linear-gradient(180deg, #86d33b 0%, #6FCF40 60%, #5BAA32 100%);
  color: white;
  box-shadow: 0 4px 0 var(--plumbob-dark), var(--shadow-md);
}
.btn-primary:hover { box-shadow: 0 6px 0 var(--plumbob-dark), var(--shadow-lg); color: white; }

.btn-ghost {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 4px 0 var(--line), var(--shadow-sm);
  border-bottom: none;
}
.btn-ghost:hover { box-shadow: 0 6px 0 var(--line), var(--shadow-md); color: var(--ink); }

.btn-pink {
  background: linear-gradient(180deg, #ff89b3 0%, #FF6B9D 60%, #e54a82 100%);
  color: white;
  box-shadow: 0 4px 0 var(--pink-deep), var(--shadow-md);
}
.btn-pink:hover { box-shadow: 0 6px 0 var(--pink-deep), var(--shadow-lg); color: white; }

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

.hero {
  position: relative;
  background:
    radial-gradient(circle at 15% 20%, rgba(179, 224, 242, 0.45) 0%, transparent 40%),
    radial-gradient(circle at 85% 30%, rgba(255, 107, 157, 0.18) 0%, transparent 35%),
    radial-gradient(circle at 50% 90%, rgba(111, 207, 64, 0.22) 0%, transparent 45%),
    linear-gradient(180deg, #fff 0%, var(--cream) 100%);
  padding: 5rem 0 6rem;
  overflow: hidden;
}

.hero::before, .hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  opacity: 0.5;
  pointer-events: none;
}
.hero::before {
  width: 220px; height: 220px;
  background: var(--accent-soft);
  top: 12%; right: -60px;
}
.hero::after {
  width: 160px; height: 160px;
  background: #dff2fa;
  bottom: 10%; left: -40px;
}

/* Top nav -- sticky, semi-transparent over the hero. Lets visitors
   jump to install / features / GitHub / Patreon without scrolling
   the whole page first. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 253, 246, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0;
  gap: 1rem;
}
.topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  font-family: 'Fredoka', system-ui, sans-serif;
  color: var(--ink);
  text-decoration: none;
  border-bottom: none;   /* defeat the global a-link underline */
  font-size: 1.05rem;
}
.topbar-brand:hover { color: var(--accent-deep); border-bottom: none; }
.topbar-logo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: block;
}
.topbar-links {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.topbar-links a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: none;     /* defeat the global a-link underline */
  font-weight: 600;
  padding: 0.45rem 0.7rem;
  border-radius: var(--r-sm);
  transition: background-color 0.15s ease, color 0.15s ease;
  font-size: 0.95rem;
}
.topbar-links a:hover {
  background: var(--accent-soft);
  color: var(--accent-deep);
  border-bottom: none;
}
.topbar-patreon {
  display: inline-flex !important;
  align-items: center;
  gap: 0.35rem;
  background: var(--pink);
  color: #fff !important;
  margin-left: 0.35rem;
}
.topbar-patreon:hover {
  background: var(--pink-deep) !important;
  color: #fff !important;
}
@media (max-width: 540px) {
  .topbar-inner { padding: 0.4rem 0; }
  .topbar-brand span { display: none; }      /* logo only on phones */
  .topbar-links a { padding: 0.35rem 0.55rem; font-size: 0.88rem; }
  .topbar-links a[href*="github.com"] { display: none; }  /* drop GitHub on small screens */
}

.hero-inner {
  position: relative;
  text-align: center;
  z-index: 1;
}

/* Hero H1 is now a descriptive subtitle rather than the brand name
   (the logo image carries the wordmark). Dial the size down so the
   longer line fits on one row on desktop and wraps cleanly on phones,
   sitting visually below the logo without competing with it. */
.hero h1 {
  font-size: clamp(1.2rem, 2.8vw, 1.95rem);
  margin-top: 0.2rem;
  margin-bottom: 0.75rem;
  /* When the line wraps on narrow viewports, distribute words across
     lines instead of orphaning the last word ("4") on its own row. */
  text-wrap: balance;
}

.plumbob {
  position: relative;
  margin: 0 auto 1.5rem;
  width: 64px;
  height: 84px;
  filter: drop-shadow(0 6px 10px rgba(58, 112, 18, 0.25));
  animation: plumbob-bob 2.4s ease-in-out infinite;
}

/* Hero logo treatment — square mascot image with the same sparkle ring
   and gentle bob animation the SVG plumbob used to have, so the page
   keeps the sparkly motion personality the SVG plumbob used to have. */
.hero-logo-wrap {
  position: relative;
  margin: 0 auto 1.25rem;
  width: 200px;
  height: 200px;
  display: block;
  animation: plumbob-bob 4s ease-in-out infinite;
  filter: drop-shadow(0 10px 22px rgba(58, 112, 18, 0.22));
}
.hero-logo {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  object-fit: cover;
}
@media (min-width: 720px) {
  .hero-logo-wrap { width: 240px; height: 240px; }
}

/* Visually-hidden text for screen readers / SEO. Used for the H1
   that sits behind the logo image so we keep an accessible heading
   without doubling the wordmark visually. */
.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;
}

.sparkle {
  position: absolute;
  background: var(--accent);
  /* 4-pointed star shape */
  clip-path: polygon(
    50% 0%, 58% 42%, 100% 50%, 58% 58%,
    50% 100%, 42% 58%, 0% 50%, 42% 42%
  );
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(240, 168, 120, 0.85));
  animation: twinkle 2.2s ease-in-out infinite;
}
.sparkle.s1 { top:  6%;    right: -22px; width: 12px; height: 12px; animation-delay: 0s;    }
.sparkle.s2 { top: -16px;  left:   18%;  width:  9px; height:  9px; animation-delay: 0.35s; }
.sparkle.s3 { bottom: 18%; left:  -24px; width: 11px; height: 11px; animation-delay: 0.65s; }
.sparkle.s4 { bottom: -12px; right: 22%; width:  7px; height:  7px; animation-delay: 0.95s; }
.sparkle.s5 { top:   50%;  right: -16px; width:  6px; height:  6px; animation-delay: 1.25s; }
.sparkle.s6 { top:  -22px; right:  28%;  width:  8px; height:  8px; animation-delay: 1.55s; }
.sparkle.s7 { top:   30%;  left:  -28px; width:  7px; height:  7px; animation-delay: 1.85s; }
.sparkle.s8 { bottom: -18px; left:  35%; width:  9px; height:  9px; animation-delay: 2.10s; }
.sparkle.s9 { bottom: 35%; right: -28px; width:  5px; height:  5px; animation-delay: 0.20s; }

@keyframes plumbob-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes twinkle {
  0%, 100% { opacity: 0;    transform: scale(0.3) rotate(0deg); }
  40%      { opacity: 1;    transform: scale(1)   rotate(45deg); }
  60%      { opacity: 0.9;  transform: scale(1.1) rotate(90deg); }
}

.tagline {
  font-size: 1.2rem;
  color: var(--ink-soft);
  max-width: 640px;
  margin: 0 auto 2rem;
}

.cta-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}

.cta-download {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.download-count {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
  text-align: center;
}
.download-count #download-count-value,
.download-count #curseforge-count-value {
  font-weight: 700;
  color: var(--plumbob-dark);
}

.badges {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.badge {
  display: inline-block;
  background: var(--paper);
  color: var(--plumbob-dark);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
}
.badge + .badge {
  color: var(--accent-deep);
  border-color: var(--accent-soft);
}

/* -------- Generic section spacing -------- */

main > section {
  padding: 5.5rem 0;
}
main > section + section { padding-top: 5.5rem; }

section h2 { text-align: center; }

/* Extra breathing room above section headers (skips card-internal ones,
   which already sit inside their own padded box). */
section > h2,
section > .container > h2 {
  margin-top: 1.75rem;
}

/* The two sections that follow visually-dense card grids (features + screenshots)
   already feel weighty on their own — trim the section padding-top so the gap
   doesn't look exaggerated. */
main > section.screenshot-strip {
  padding-top: 3rem;
}

/* The screenshot-strip's bottom padding stacks with the commands' top padding,
   producing a huge gap above the Commands header. Trim both. */
main > section.screenshot-strip { padding-bottom: 2.5rem; }
main > section.commands         { padding-top: 1rem; }

.screenshot-strip > .container > h2,
.commands > h2 {
  margin-top: 0.25rem;
}

/* Decorative accent under section headers (but NOT under headers
   that live inside a card — bugreport-card, support-card, etc.) */
section > h2::after,
section > .container > h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  background: linear-gradient(90deg, var(--plumbob), var(--accent));
  border-radius: 4px;
  margin: 0.85rem auto 0;
}

section > .container > p,
section > p { max-width: 780px; margin-left: auto; margin-right: auto; }

.intro h2 + p,
.intro p {
  text-align: center;
  font-size: 1.1rem;
  color: var(--ink-soft);
}

/* -------- Differentiators (Phone-first / No installs / Any AI) -------- */

.differentiators {
  padding-top: 3rem;
  padding-bottom: 2.5rem;
}
.differentiators > h2 {
  text-align: center;
}
.differentiators > p.muted {
  text-align: center;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.diff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}
.diff-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.5rem 1.4rem;
  box-shadow: var(--shadow-sm);
  text-align: left;
}
.diff-card h3 {
  margin: 0.5em 0 0.5em;
  font-size: 1.15rem;
  color: var(--accent-deep);
}
.diff-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.96rem;
  line-height: 1.55;
}
.diff-emoji {
  font-size: 2.2rem;
  line-height: 1;
}

/* -------- Features grid -------- */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
}

/* Hero row (Phone Calls / Text Messages / Auto-Events / Llamadate /
 * Interacts-with-game) -- five cards on a single desktop line. The
 * features section overrides .container's default max-width to give
 * these cards enough room to render 2-3 lines of copy each. */
.feature-grid-hero {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
#features.container {
  max-width: 1360px;
  padding-bottom: 3.5rem;
}

.feature-card {
  background: var(--paper);
  border-radius: var(--r-md);
  padding: 1.6rem 1.5rem;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s, box-shadow 0.15s;
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.feature-card h3 { margin-top: 0.75rem; }
.feature-card p {
  color: var(--ink-soft);
  font-size: 0.97rem;
  margin: 0;
}

.features-lede {
  text-align: center;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.5rem;
}

.features-more-heading {
  text-align: center;
  margin-top: 3rem;
  margin-bottom: 0.25rem;
  font-size: 1.25rem;
  color: var(--ink-soft);
  font-weight: 600;
}

.features-more-lede {
  text-align: center;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  font-size: 0.92rem;
}

.feature-grid-secondary {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: 1.25rem;
  gap: 1rem;
}

.feature-card-secondary {
  padding: 1.1rem 1.1rem;
  background: transparent;
  box-shadow: none;
  border-style: dashed;
}
.feature-card-secondary:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
  background: var(--paper);
  border-style: solid;
}
.feature-card-secondary h4 {
  margin: 0.5rem 0 0.35rem;
  font-size: 1rem;
  color: var(--ink-soft);
}
.feature-card-secondary p {
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.feature-card-secondary .feature-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
}

.feature-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.icon-call      { background: linear-gradient(135deg, #86d33b, #5BAA32); }
.icon-text      { background: linear-gradient(135deg, #ff89b3, #FF6B9D); }
.icon-story     { background: linear-gradient(135deg, #f5b489, var(--accent-deep)); }
.icon-event     { background: linear-gradient(135deg, #ffd166, #f5a623); }
.icon-storyline { background: linear-gradient(135deg, #c8a8ff, #9b75e8); }
.icon-auto      { background: linear-gradient(135deg, #ffb88c, #ff7e5f); }
.icon-dating    { background: linear-gradient(135deg, #ff9d9d, #e94b4b); }
.icon-interact  { background: linear-gradient(135deg, #b3e0f2, #4a9bc4); }

/* -------- Screenshots -------- */

.screenshot-strip {
  background: linear-gradient(180deg, rgba(179, 224, 242, 0.18), transparent);
}

.screenshot-strip h2 { text-align: center; }
.screenshot-strip > .container > p { text-align: center; max-width: 640px; margin-left: auto; margin-right: auto; }

.screenshot-grid {
  display: grid;
  /* Target 3 columns at desktop widths. At ~1200px container, the
     300px min lets ~3 columns of ~380px fit; can't fit a 4th because
     that would push each below the 300px min. Wraps to 2 then 1 on
     narrower viewports. */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
  /* Cards along a row have varying aspect ratios (tall picker vs. wide
     message dialog). Default grid stretches all cards in a row to the
     tallest one, which pushes the caption up and leaves whitespace
     under it. `start` lets each card be its natural height. */
  align-items: start;
}

/* Modifier: force a 2-up layout regardless of how many cards fit.
   Useful for sections with exactly 4 cards (2x2 looks better than
   3+1). Still collapses to a single column on phones. */
.screenshot-grid-2col {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 700px) {
  .screenshot-grid-2col {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Modifier: 3-up layout that CENTERS the last (partial) row. Grid's
   1fr columns won't do this alone, but flexbox with wrap does. Used
   for sections with 5 cards where "3 on top, 2 centered on bottom"
   looks cleaner than "3 on top, 2 left-aligned with a gap on the right." */
.screenshot-grid-3col-centered {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2.5rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  align-items: flex-start;
}
.screenshot-grid-3col-centered > .screenshot {
  flex: 0 1 320px;
  min-width: 260px;
  max-width: 340px;
}

/* Modifier: masonry-style layout using CSS multi-column. Cards flow
   top-to-bottom into each column, so a tall card in column 1 doesn't
   force awkward whitespace next to shorter cards in column 2 --
   shorter cards just stack and fill the column. Reading order goes
   top-to-bottom LEFT COLUMN first, then top-to-bottom RIGHT COLUMN.
   Best for sections where images have wildly varying aspect ratios
   (tall picker + short dialog cards). */
.screenshot-grid-masonry {
  display: block;
  columns: 2;
  column-gap: 1.5rem;
  margin-top: 2.5rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 820px;
}
.screenshot-grid-masonry > .screenshot {
  /* break-inside prevents a card from being split across columns */
  break-inside: avoid;
  page-break-inside: avoid;   /* legacy prop for older browsers */
  -webkit-column-break-inside: avoid;
  display: block;
  margin-bottom: 1.5rem;
  width: 100%;
}
/* Collapse to a single column on narrow viewports */
@media (max-width: 700px) {
  .screenshot-grid-masonry {
    columns: 1;
    max-width: 380px;
  }
}

.screenshot {
  margin: 0;
  background: var(--paper);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
  display: flex;
  flex-direction: column;
}
.screenshot:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.screenshot img {
  width: 100%;
  height: auto;
  display: block;
  background: #f0f4ec;
}

.screenshot figcaption {
  padding: 0.85rem 1rem 1rem;
  text-align: center;
  font-family: 'Nunito', sans-serif;
  font-size: 0.95rem;
  color: var(--ink);
  line-height: 1.4;
}
.screenshot figcaption strong {
  font-family: 'Fredoka', sans-serif;
  color: var(--plumbob-dark);
  font-size: 1.02rem;
}

/* -------- Commands -------- */

.cmd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
}

.cmd-group {
  background: var(--paper);
  border-radius: var(--r-md);
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.cmd-group h3 {
  margin: 0 0 0.75rem;
  color: var(--plumbob-deep);
  font-family: 'Fredoka', sans-serif;
}

.cmd-group ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cmd-group li {
  padding: 6px 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
  border-bottom: 1px dashed var(--line);
}
.cmd-group li:last-child { border-bottom: none; }

/* -------- Install steps -------- */

.install-steps {
  list-style: none;
  padding: 0;
  margin: 2.5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.install-steps > li {
  background: var(--paper);
  border-radius: var(--r-md);
  padding: 1.6rem 1.75rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  min-width: 0; /* let pre and long inline code scroll/wrap instead of expanding the card */
}

.step-num {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(180deg, #86d33b 0%, #5BAA32 100%);
  color: white;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 0 var(--plumbob-dark);
  flex-shrink: 0;
}

.step-body { min-width: 0; }
.step-body h3 { margin-top: 0; }
.step-body p:last-child { margin-bottom: 0; }
.step-body pre { max-width: 100%; }

.checkbox-list {
  list-style: none;
  padding: 0;
  margin: 0.5em 0 1em;
}
.checkbox-list li {
  padding: 4px 0 4px 28px;
  position: relative;
}
.checkbox-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 18px;
  height: 18px;
  background: var(--plumbob);
  border-radius: 4px;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15);
}
.checkbox-list li::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 11px;
  width: 10px;
  height: 5px;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(-45deg);
}

/* -------- Callout (API key sub-steps) -------- */

.callout {
  background: linear-gradient(180deg, rgba(179, 224, 242, 0.30), rgba(179, 224, 242, 0.10));
  border: 2px solid var(--sky-deep);
  border-radius: var(--r-md);
  padding: 1.25rem 1.5rem;
  margin: 1.25rem 0 0.5rem;
  min-width: 0;
  max-width: 100%;
}
.callout .api-substeps { min-width: 0; }
.callout .api-substeps > li { min-width: 0; word-break: break-word; }
.warning-box { min-width: 0; max-width: 100%; }

.callout h4 {
  margin-top: 0;
  color: #1d5874;
  font-family: 'Fredoka', sans-serif;
}

.api-substeps {
  margin: 0.5em 0 0;
  padding-left: 1.4em;
  counter-reset: substep;
}
.api-substeps > li {
  padding: 8px 0;
  color: var(--ink-soft);
}
.api-substeps > li::marker {
  color: var(--sky-deep);
  font-weight: 700;
}
.api-substeps > li strong { color: var(--ink); }

.callout-note {
  margin: 0.75em 0 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
  font-style: italic;
}

/* Provider grid -- four cards (Claude / OpenAI / Gemini / Ollama)
   the player chooses between in install step 2. */
.provider-grid {
  /* 5 provider cards, all equal-width. 3-col grid at desktop
     naturally lays out 3 in row 1 and 2 in row 2 (same width, same
     visual weight). 2-col at tablet gives 2+2+1 with the trailing
     card centered on its own row. 1-col at mobile. No special-cased
     bottom row -- every provider looks equal, which is the honest
     visual since none is objectively "the recommended one". */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 0.5rem;
}
.provider-card {
  min-width: 0;   /* let grid tracks control width, not intrinsic content */
}

/* Tablet: 2 columns. 5 items -> 2+2+1; center the trailing card. */
@media (max-width: 900px) {
  .provider-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .provider-grid > .provider-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 400px;
  }
}
/* Mobile: single-column stack. */
@media (max-width: 560px) {
  .provider-grid { grid-template-columns: 1fr; }
  .provider-grid > .provider-card:last-child:nth-child(odd) {
    max-width: none;
  }
}
.provider-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow-sm);
}
.provider-card h4 {
  margin: 0 0 0.5em;
  font-size: 1.08rem;
  display: flex;
  align-items: center;
  gap: 0.5em;
  flex-wrap: wrap;
}
.provider-card p {
  margin: 0 0 0.6em;
  font-size: 0.93rem;
  color: var(--ink-soft);
}
.provider-card .api-substeps {
  margin: 0.4em 0 0.6em 1.2em;
  padding: 0;
  font-size: 0.9rem;
}
.provider-card .api-substeps li { margin-bottom: 0.3em; }
.provider-card .muted.small {
  display: block;
  margin-top: 0.4em;
  padding: 0.45em 0.65em;
  background: var(--cream);
  border-radius: var(--r-sm);
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.provider-tag {
  background: var(--accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.18em 0.55em;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.warning-box {
  background: linear-gradient(180deg, #fff4e0, #ffeacc);
  border: 2px solid #f5a623;
  border-left-width: 6px;
  border-radius: var(--r-sm);
  padding: 0.9rem 1.1rem;
  margin: 0.85em 0 0.25em;
  font-size: 0.95rem;
  color: #5a3d10;
}
.warning-box strong { color: #7a4e0a; }
.warning-box ul {
  margin: 0.5em 0 0;
  padding-left: 1.25em;
}
.warning-box li {
  padding: 3px 0;
}
.warning-box a {
  color: #b46812;
  border-bottom-color: rgba(180, 104, 18, 0.4);
}
.warning-box a:hover { color: #7a4e0a; border-bottom-color: #7a4e0a; }

/* -------- Cost table -------- */

.cost-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin: 1.5rem 0 1rem;
}
.cost-table th, .cost-table td {
  text-align: left;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
}
.cost-table th {
  background: rgba(224, 139, 89, 0.14);
  font-family: 'Fredoka', sans-serif;
  color: var(--accent-deep);
  font-weight: 600;
}
.cost-table tr:last-child td { border-bottom: none; }

/* -------- FAQ -------- */

.faq-list {
  max-width: 760px;
  margin: 2.5rem auto 0;
}

.faq-item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: 0.75rem;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.faq-item[open] {
  box-shadow: var(--shadow-md);
  border-color: rgba(224, 139, 89, 0.4);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1rem 1.25rem;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
  position: relative;
  padding-right: 3rem;
  transition: color 0.15s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent-deep); }

/* Custom plus/minus indicator on the right */
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 600;
  transition: transform 0.2s, background 0.15s;
}
.faq-item[open] summary::after {
  content: "−";
  background: var(--accent);
  color: white;
  transform: translateY(-50%) rotate(180deg);
}

.faq-body {
  padding: 0 1.25rem 1.1rem;
  color: var(--ink-soft);
  font-size: 0.97rem;
  border-top: 1px dashed var(--line);
}
.faq-body p:first-child { margin-top: 1rem; }
.faq-body p:last-child  { margin-bottom: 0; }
.faq-body .cost-table { box-shadow: none; border: 1px solid var(--line); }

/* -------- Changelog -------- */

.changelog h2 + p { text-align: center; }

.changelog-list {
  list-style: none;
  padding: 0;
  margin: 2.5rem auto 1.5rem;
  max-width: 760px;
  position: relative;
}

/* Vertical timeline line down the left edge */
.changelog-list::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--accent-soft), var(--plumbob-soft));
  border-radius: 2px;
}

.changelog-entry {
  position: relative;
  padding: 0 0 1.75rem 2.25rem;
  display: block;
}
.changelog-entry:last-child { padding-bottom: 0; }

/* Dot on the timeline */
.changelog-entry::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--cream);
  box-shadow: 0 0 0 2px var(--accent);
}

.changelog-date {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--accent-deep);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.25rem;
}

.changelog-body h3 {
  font-size: 1.15rem;
  margin: 0 0 0.5rem;
  color: var(--ink);
}

.changelog-body ul {
  margin: 0;
  padding-left: 1.1em;
  color: var(--ink-soft);
}
.changelog-body li {
  padding: 4px 0;
  font-size: 0.97rem;
}
.changelog-body li::marker { color: var(--accent); }

.changelog-figure {
  margin: 0.75rem 0 0.25rem;
  max-width: 360px;
}
.changelog-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--border);
}
.changelog-figure figcaption {
  margin-top: 0.35rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-style: italic;
}

.changelog-footer {
  text-align: center;
  margin-top: 1.5rem;
}
.changelog-footer a {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
}

@media (max-width: 600px) {
  .changelog-list::before { left: 7px; }
  .changelog-entry { padding-left: 1.75rem; }
  .changelog-entry::before { left: 0; width: 14px; height: 14px; }
}

/* -------- Roadmap -------- */

.roadmap h2 + p { text-align: center; }

.roadmap-list {
  list-style: none;
  padding: 0;
  margin: 2.5rem 0 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}

.roadmap-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.5rem 1.4rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform 0.15s, box-shadow 0.15s;
}
.roadmap-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.roadmap-card h3 {
  margin: 0.6rem 0 0.4rem;
  font-size: 1.1rem;
}
.roadmap-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.roadmap-status {
  align-self: flex-start;
  display: inline-block;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
.status-planned {
  background: rgba(109, 198, 231, 0.20);
  color: #1d5874;
}
.status-investigating {
  background: rgba(245, 166, 35, 0.18);
  color: #8a5510;
}
.status-progress {
  background: rgba(111, 207, 64, 0.18);
  color: var(--plumbob-dark);
}
.status-open {
  background: rgba(224, 139, 89, 0.28);
  color: var(--accent-deep);
}

/* Second roadmap row -- centered under the top three cards. Width tuned
   so two cards sit side-by-side at roughly the same width as a single
   card in the top row (so they read as a continuation, not stacked
   tall blocks). */
.roadmap-list-second-row {
  margin-top: 1.25rem;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 600px) {
  .roadmap-list-second-row {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
}

/* CTA card -- otherwise identical to a regular roadmap card, just with
   a button at the bottom and slightly tighter inner spacing. */
.roadmap-card-cta .btn {
  margin-top: 1rem;
  align-self: flex-start;
  padding: 9px 20px;
  font-size: 0.95rem;
}

/* -------- Bug report -------- */

.bugreport {
  padding-bottom: 1rem !important;
}

.bugreport-card {
  background: linear-gradient(135deg, #fff3e6 0%, #fbe3d3 100%);
  border-radius: var(--r-lg);
  padding: 2.2rem 2rem;
  text-align: center;
  border: 2px solid #f5cba8;
  box-shadow: var(--shadow-sm);
  max-width: 720px;
  margin: 0 auto;
}
.bugreport-card h2 { color: var(--accent-deep); }
.bugreport-card p { color: var(--ink-soft); }
.bugreport-card .muted a { color: var(--accent-deep); border-bottom-color: rgba(198, 111, 63, 0.4); }
.bugreport-card .muted a:hover { color: #7a3c16; border-bottom-color: #7a3c16; }
.bugreport-card .btn + p { margin-top: 1.5rem; }
.bugreport-card .btn-ghost-orange + p { margin-top: 1.5rem; }

.btn-ghost-orange {
  background: white;
  color: var(--accent-deep);
  box-shadow: 0 4px 0 var(--accent-deep), var(--shadow-sm);
  border: 2px solid var(--accent);
  border-bottom: none;
  border-radius: 999px;
  padding: 14px 28px;
  display: inline-block;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  text-decoration: none;
  transition: transform 0.12s, box-shadow 0.12s;
}
.btn-ghost-orange:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--accent-deep), var(--shadow-md);
  color: var(--accent-deep);
}
.btn-ghost-orange:active { transform: translateY(0); }

/* -------- Support / Patreon -------- */

.support {
  padding-bottom: 6rem !important;
}

.support-card {
  background: linear-gradient(135deg, #ffe7f0 0%, #fff3da 100%);
  border-radius: var(--r-lg);
  padding: 2.5rem 2rem;
  text-align: center;
  border: 2px solid #ffcfdf;
  box-shadow: var(--shadow-md);
  max-width: 720px;
  margin: 0 auto;
}
.support-card h2 { color: var(--pink-deep); }
.support-card p { color: var(--ink-soft); }

.bitcoin-block {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px dashed #ffcfdf;
}
.bitcoin-label {
  font-family: 'Fredoka', sans-serif;
  font-size: 0.95rem;
  color: var(--ink);
  margin: 0 0 0.85rem;
}
.bitcoin-qr {
  width: 160px;
  height: 160px;
  margin: 0 auto;
  border-radius: var(--r-sm);
  background: white;
  padding: 8px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  display: block;
}

.bitcoin-address {
  display: inline-block;
  margin-top: 0.85rem;
  padding: 8px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 0.85rem;
  color: var(--ink);
  word-break: break-all;
  max-width: 100%;
  user-select: all;
  cursor: text;
}

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

.site-footer {
  background: var(--ink);
  color: #c8d6cf;
  padding: 2.5rem 0;
}
.site-footer .muted { color: #95a89e; }
.site-footer strong { color: white; font-family: 'Fredoka', sans-serif; font-size: 1.05rem; }
.site-footer a { color: #b6e36b; border-bottom-color: rgba(182, 227, 107, 0.4); }
.site-footer a:hover { color: white; border-bottom-color: white; }

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
}
.footer-inner p { margin: 0.25em 0 0; }

.footer-links {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* -------- Responsive tweaks -------- */

@media (max-width: 600px) {
  body { font-size: 16px; }
  .hero { padding: 3.5rem 0 4rem; }
  main > section { padding: 3rem 0; }
  .install-steps > li { grid-template-columns: 1fr; gap: 0.5rem; padding: 1.25rem; }
  .step-num { width: 44px; height: 44px; font-size: 1.2rem; }
  .callout { padding: 1rem 1.1rem; }
  .support-card { padding: 1.75rem 1.25rem; }
}