/*
  servermod.app — the promotional pages: Home, Features, Communities, Contact.

  THIS IS THE THIRD STYLESHEET, AND IT TOUCHES NOTHING ELSE.
  The portal and the appeals flow are dressed by assets/leaderboard.css; the
  privacy policy and the terms by static/style.css. This file is loaded only by
  siteLayout() in sitePages.js, and every selector in it is either scoped under
  `html.site` or is a class the other two sheets never write — so a change here
  cannot move a community's board by a pixel. Keeping the marketing look apart
  is the point: the portal is a community's own space in that community's
  colour and should stay quiet enough to be theirs; these pages are ServerMod
  speaking for itself, and are allowed to be loud.

  THE LOOK, IN ONE PARAGRAPH.
  Deep teal-black bands (#0b1417) alternating with pale sage ones (#f2f5f4 and
  white cards), built out from the logo's own blue #04d1e8 (2026-09-24; it
  replaced the dashboard's steel-teal) — the fill of every primary button, and
  the links and highlights on the dark ground. On the light bands the text
  accent is a darker cut of it (#007a88) so it reads. One gold (#c9a24a) used only
  as a detail: the dot on a tag. Bricolage Grotesque at 800 with tight
  tracking for headlines, Figtree for reading, JetBrains Mono for eyebrow labels
  and command chips. Square corners on everything, circles included — the
  portal's Modern look (2026-09-24). No gradients that
  stand for a brand, no purple, no serif.

  TWO KINDS OF BAND, AND THE MODE ONLY TURNS ONE OVER.
  `.dark` bands — the header, the heroes, the ticker, the footer — are
  dark in both modes; they are the design's rhythm, not a colour scheme. The
  light bands follow the visitor: prefers-color-scheme by default, or the
  `sm_theme` cookie the portal's toggle sets, stamped as data-theme by
  siteLayout(). Every component reads the same handful of tokens (--paper,
  --card, --ink, --body, --line …), and a `.dark` ancestor re-points them, so a
  card does not need to know which band it is in.

  NO SCRIPT, SO NO SCRIPTED MOTION. What moves is CSS: cards lift on hover and
  arrows nudge. prefers-reduced-motion stops all of it.
*/

/* ================================ tokens ================================ */

html.site {
  --teal: #04d1e8;
  --teal-hover: #3edcf0;
  --on-teal: #04161a;
  --gold: #c9a24a;
  --ground: #0b1417;
  --chip-bg: #0b1417;
  --chip-ink: #04d1e8;
  --chip-line: #22393e;

  /* The light bands, light mode. */
  --paper: #f2f5f4;
  --paper-alt: #e8eeec;
  --feat: #e2ecea;
  --feat-card: #ffffff;
  --card: #ffffff;
  --ink: #0b1417;
  --body: #45585b;
  --muted: #5b6f72;
  --line: #d6e0de;
  --line-soft: #e3eae8;
  --acc-text: #007a88;
  --acc-text-hi: #005e69;
  --focus: #005e69;
  --shadow: 0 1px 2px rgba(11, 20, 23, 0.05), 0 12px 32px -12px rgba(11, 20, 23, 0.16);

  --font-display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  /* Square, everywhere: the portal's Modern default, and no exceptions — icons,
     avatars and the initials tile included (2026-09-24). */
  --radius-card: 0;
  --radius-small: 0;
  --wrap: 1180px;
  --gutter: clamp(1rem, 4vw, 2rem);
  color-scheme: light dark;
}

/* The light bands, dark mode — by system preference unless the visitor chose light. */
@media (prefers-color-scheme: dark) {
  html.site:not([data-theme="light"]) {
    --paper: #0f1c20;
    --paper-alt: #0d181b;
    --feat: #142a30;
    --feat-card: #0e1b1f;
    --card: #122126;
    --ink: #f3f8f7;
    --body: #a9bcbb;
    --muted: #7f9c9f;
    --line: #22393e;
    --line-soft: #1c2b2f;
    --acc-text: #04d1e8;
    --acc-text-hi: #7fe8f4;
    --focus: #04d1e8;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 40px -16px rgba(0, 0, 0, 0.6);
  }
}
/* …and the same when they chose dark on the portal's toggle. */
html.site[data-theme="dark"] {
  --paper: #0f1c20;
  --paper-alt: #0d181b;
  --feat: #142a30;
  --feat-card: #0e1b1f;
  --card: #122126;
  --ink: #f3f8f7;
  --body: #a9bcbb;
  --muted: #7f9c9f;
  --line: #22393e;
  --line-soft: #1c2b2f;
  --acc-text: #04d1e8;
  --acc-text-hi: #7fe8f4;
  --focus: #04d1e8;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 40px -16px rgba(0, 0, 0, 0.6);
}
html.site[data-theme="light"] { color-scheme: light; }
html.site[data-theme="dark"] { color-scheme: dark; }

/* A dark band in either mode. Re-points the tokens for everything inside it. */
html.site .dark {
  --paper: #0b1417;
  --paper-alt: #0b1417;
  --card: #122126;
  --ink: #f3f8f7;
  --body: #a9bcbb;
  --muted: #6f8f92;
  --line: #22393e;
  --line-soft: #1c2b2f;
  --acc-text: #04d1e8;
  --acc-text-hi: #7fe8f4;
  --focus: #04d1e8;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 18px 44px -18px rgba(0, 0, 0, 0.7);
  background-color: var(--paper);
  color: var(--body);
}

/* ================================= base ================================= */

html.site *, html.site *::before, html.site *::after { box-sizing: border-box; }
html.site { scroll-behavior: smooth; scroll-padding-top: 5.5rem; -webkit-text-size-adjust: 100%; }
html.site, html.site body { overflow-x: clip; }
html.site body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}
html.site main { flex: 1 0 auto; }
html.site img { max-width: 100%; height: auto; }
/* Zero-specificity resets, so a component class can set its own margins. */
:where(html.site) :where(h1, h2, h3) { color: var(--ink); margin: 0; }
:where(html.site) :where(p) { margin: 0 0 1rem; }
html.site a { color: var(--acc-text); text-decoration: none; }
html.site a:hover { color: var(--acc-text-hi); }
@media (hover: hover) { html.site p a:hover, html.site li a:hover { text-decoration: underline; text-underline-offset: 3px; } }

/* A focus ring you can see on either ground. */
html.site :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 0; }
html.site .btn:focus-visible { border-radius: 0; }

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 50;
  background: var(--teal); color: var(--on-teal); padding: 0.6rem 1rem; border-radius: 0; font-weight: 600;
}
.skip:focus { top: 0.75rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: 820px; }
.center { text-align: center; }
.muted { color: var(--muted); }

.eyebrow {
  margin: 0 0 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acc-text);
}

.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.875rem, 1.9rem + 4.2vw, 5.25rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0 0 1.4rem;
  text-wrap: balance;
}
.display .hl { color: var(--acc-text); }
.display-2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 1.45rem + 2.2vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 0 0 1rem;
  text-wrap: balance;
}
.lede { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); line-height: 1.6; max-width: 40rem; }
.center .lede { margin-left: auto; margin-right: auto; }

/* ================================ buttons =============================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 52px; padding: 0 1.6rem;
  border-radius: 0; border: 1.5px solid transparent;
  font: 600 1rem/1.1 var(--font-body);
  text-decoration: none; white-space: nowrap;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.btn-sm { min-height: 42px; padding: 0 1.1rem; font-size: 0.925rem; }
html.site .btn-primary { background: var(--teal); color: var(--on-teal); }
html.site .btn-outline { border-color: var(--line); color: var(--ink); background: transparent; }
html.site .dark .btn-outline { border-color: #3a5a60; }
html.site .btn-dark { background: var(--ground); color: #f3f8f7; }
html.site .btn-outline-dark { border-color: rgba(7, 17, 20, 0.55); color: var(--on-teal); }
@media (hover: hover) {
  html.site .btn-primary:hover { background: var(--teal-hover); color: var(--on-teal); }
  html.site .btn-outline:hover { border-color: var(--teal); color: var(--ink); }
  html.site .btn-dark:hover { background: #16282d; color: #fff; }
  html.site .btn-outline-dark:hover { border-color: var(--on-teal); color: var(--on-teal); }
  html.site .btn:hover { transform: translateY(-1px); }
}
.btn .i-arrow { transition: transform 0.18s ease; }
@media (hover: hover) { .btn:hover .i-arrow, .text-link:hover .i-arrow { transform: translateX(3px); } }
/*
  DISCORD'S OWN BLURPLE, for the two controls that hand somebody to Discord:
  the header's sign-in and the front page's Find your community. The colour is
  the promise — press this and Discord asks who you are. White on #5865f2 is
  4.6:1.
*/
html.site .btn-discord { background: #5865f2; color: #fff; }
/* White in every state (2026-09-24): on a phone a tap leaves a link in :hover,
   and the site's link colour then turned the words blue. */
html.site .btn-discord:is(:hover, :focus, :focus-visible, :active, :visited) { color: #fff; }
@media (hover: hover) { html.site .btn-discord:hover { background: #4752c4; color: #fff; } }
.btn-lg { min-height: 60px; padding: 0 2rem; font-size: 1.125rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }
.cta-row.center { justify-content: center; }
.text-link { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; }
.text-link .i-arrow { transition: transform 0.18s ease; }

/* ================================ header ================================ */

.site-header {
  position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid var(--line-soft);
}
html.site .site-header.dark { background-color: rgba(11, 20, 23, 0.97); }
@supports (backdrop-filter: blur(8px)) {
  html.site .site-header.dark { background-color: rgba(11, 20, 23, 0.9); backdrop-filter: blur(12px) saturate(1.2); }
}
.site-header-inner { display: flex; align-items: center; gap: 1.25rem; min-height: 72px; position: relative; }
.site-brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em;
}
html.site .site-brand, html.site .site-brand:hover { color: var(--ink); text-decoration: none; }
.site-brand img { display: block; }
.site-nav { margin-left: auto; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.25rem; }
.site-nav a {
  display: inline-flex; align-items: center; gap: 0.3rem;
  min-height: 40px; padding: 0 0.8rem; border-radius: 0;
  font-weight: 500; color: var(--body); white-space: nowrap;
}
html.site .site-nav a:hover { color: var(--ink); background: rgba(4, 209, 232, 0.08); text-decoration: none; }
html.site .site-nav a[aria-current="page"] { color: var(--acc-text); background: rgba(4, 209, 232, 0.1); }
/*
  THE RIGHT-HAND END. Signed out it is the one Discord button; signed in it is
  who you are and a sign-out glyph, and nothing else (2026-09-25). A thin rule
  separates it from the nav so the two read as two groups, not one row of links.
*/
.site-find { gap: 0.5rem; margin-left: 0.5rem; }
.site-account {
  display: flex; align-items: center; gap: 0.6rem; margin-left: 0.5rem;
  padding-left: 1rem; border-left: 1px solid var(--line-soft);
  font-size: 0.925rem; color: var(--ink); min-width: 0;
}
.site-account img { border-radius: 0; flex: none; }
.site-account form { margin: 0; }
.site-account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14rem; }
.site-signout {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; flex: none;
  color: var(--body); background: none; border: 1px solid var(--line); border-radius: 0; cursor: pointer;
}
html.site .site-signout:hover { color: var(--ink); border-color: var(--teal); }

/* Narrow: the same row, tightened. No menu — two links and the account fit. */
@media (max-width: 720px) {
  .site-header-inner { gap: 0.6rem; min-height: 64px; }
  .site-brand span { display: none; }
  .site-nav a { padding: 0 0.55rem; font-size: 0.925rem; }
  .site-account { padding-left: 0.7rem; gap: 0.45rem; }
  .site-account img { display: none; }
  .site-account-name { max-width: 8rem; }
}
/*
  PHONES: the Find button keeps its blurple and the Discord mark and loses the
  words to a screen-reader-only span, so the row still fits.
*/
@media (max-width: 560px) {
  .site-find { width: 44px; min-height: 44px; padding: 0; margin-left: 0.25rem; }
  .site-find span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .site-account-name { max-width: 6.5rem; font-size: 0.875rem; }
  .site-signout { width: 44px; height: 44px; }
}

/* ================================ bands ================================= */

.hero { position: relative; padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2.25rem, 4vw, 3rem); overflow: hidden; }
/*
  THE APPEALS HERO'S GLOW, and nothing else (2026-09-24): one soft wash of the
  accent from above the top centre, fading out — the same radial the portal
  and appeals heroes use in leaderboard.css. The grid of squares it replaces is
  gone.
*/
html.site .hero.dark {
  background-image: radial-gradient(80rem 26rem at 50% -12rem, rgba(4, 209, 232, 0.13), transparent 70%);
}
.hero-page { padding-bottom: clamp(2.25rem, 4vw, 3rem); }
.hero-page .display { max-width: 16ch; }

.band { padding: clamp(2.5rem, 5vw, 3.75rem) 0; }
.band-flush { padding-top: 0; }
.band-light { background: var(--paper); }
.band-alt { background: var(--paper-alt); }
/* The front page's feature cards sit on a ground of their own, unlike the
   hero, the ticker and the management band around them (2026-10-10). */
html.site .band-features { --card: var(--feat-card); background: var(--feat); }
.section-head { margin-bottom: clamp(1.5rem, 3vw, 2rem); max-width: 44rem; }

/* ======================= the communities panel ========================= */

.hero-centre { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2.5rem, 5vw, 3.5rem); }
.hero-centre .display { margin-left: auto; margin-right: auto; max-width: none; font-size: clamp(2.875rem, 1.5rem + 5vw, 6rem); letter-spacing: -0.04em; }
.hero-centre .wrap-narrow { max-width: 1120px; }
/*
  THE TICKER'S OWN BAND, between the hero and the feature cards: a shade
  lighter than the ground, ruled top and bottom, so the moving strip reads as a
  block of its own rather than the hero's tail.
*/
.band-ticker .display-3 { font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.85rem); }
html.site .band-ticker {
  background-color: #0f1c20;
  border-top: 1px solid #1c2b2f; border-bottom: 1px solid #1c2b2f;
  padding: 44px 0 48px;
}
@media (max-width: 560px) { html.site .band-ticker { padding: 32px 0 36px; } }
.band-panel { padding-top: clamp(1rem, 3vw, 2rem); }
.hero-centre .display .hl { display: inline-block; }
.hl { color: var(--acc-text); }
.section-head-row { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.section-head-row h2 { max-width: 46rem; margin: 0; }
.display-3 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.75rem, 1.4rem + 1.3vw, 2.5rem); line-height: 1.08; letter-spacing: -0.02em; }

/*
  THE TICKER. One row that drifts left forever, made of the list twice: the
  track is translated by exactly half its own width, which is one copy, so the
  frame after the last is the first again. Each copy carries its own trailing
  gap (padding-right) so the halves are identical and the seam cannot be seen.
  It stops for a pointer resting on it and for keyboard focus inside it — a
  moving target is not a link anybody can press. Edges fade through a mask.
*/
.ticker {
  position: relative;
  /* SCROLLABLE BY HAND (2026-09-24): a swipe, a trackpad or the keyboard
     (the region takes focus) moves the strip, and the drift stops while
     somebody is doing it. The bar itself is hidden — the fade says there is
     more. */
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.ticker::-webkit-scrollbar { display: none; }
.ticker:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
/* Unhurried, and the same pace however many there are: about 11s per tile
   (it was 16, then 13 — quicker each time, 2026-09-24 and 2026-10-10). */
.ticker-track { display: flex; width: max-content; animation: ticker 44s linear infinite; }
.ticker-m { animation-duration: 88s; }
.ticker-l { animation-duration: 176s; }
.ticker-xl { animation-duration: 264s; }
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track, .ticker:active .ticker-track { animation-play-state: paused; }
.ticker-list { list-style: none; margin: 0; padding: 0.25rem 1.1rem 0.25rem 0; display: flex; gap: 1.1rem; }
.ticker-list > li { flex: 0 0 auto; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.cm-tile {
  /* ONE HEIGHT FOR EVERY TILE, whatever it carries: a name with two badges, a
     member count or neither. Fixed rather than min-, and the name line never
     wraps, so nothing can make one taller than its neighbours. */
  box-sizing: border-box; display: flex; align-items: center; gap: 1.1rem; width: 27rem; max-width: 86vw; height: 112px;
  padding: 1.35rem 1.5rem;
  background: var(--card); border: 1px solid var(--line); color: var(--ink);
  transition: border-color 0.2s ease;
}
html.site .cm-tile, html.site .cm-tile:hover { text-decoration: none; color: var(--ink); }
@media (hover: hover) { .cm-tile:hover { border-color: var(--teal); } }
.cm-tile .cm-mark { width: 64px; height: 64px; }
.cm-tile-text { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.cm-tile-top { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.4rem 0.55rem; min-width: 0; }
/* Every tile one width, wide enough for "Against The Current" (2026-09-24); the ellipsis is only a safety net for a much longer name. */
.cm-tile-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; line-height: 1.15; letter-spacing: -0.015em; }
.cm-tile-meta { font-size: 0.95rem; color: var(--muted); }
.cm-badge { width: 20px; height: 20px; flex: none; display: block; }
/* The hero's one button is as wide as its words, on a phone too — not a bar
   across the screen (2026-09-24). */
html.site .cta-row .hero-cta { flex: 0 0 auto; width: auto; padding: 0 1.75rem; }

/* The front page has no header: the mark and the name open the hero. */
.hero-brand {
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.75rem;
  margin: 0 0 1.25rem; font-family: var(--font-display); font-weight: 800;
  font-size: 1.6rem; letter-spacing: -0.02em; color: var(--ink);
}
.hero-brand img { width: 88px; height: 88px; display: block; }
@media (max-width: 560px) { .hero-brand { font-size: 1.35rem; margin-bottom: 1.5rem; } .hero-brand img { width: 72px; height: 72px; } }
.fine { margin: 1.25rem 0 0; font-size: 0.875rem; color: var(--muted); }

.pill {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.18rem 0.55rem; border-radius: 0;
  font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; line-height: 1.3; white-space: nowrap;
}
.pill-verified { background: #173a2b; color: #7fe0a8; }
.pill-partner { background: #1d2550; color: #a9b8ff; }
.cm-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.35rem 0 0; }

/* The initials disc, in one of six quiet tones picked from the slug. */
.tone-0 { background: #2a1a2e; color: #f0c6ea; }
.tone-1 { background: #1e2440; color: #c6d0f5; }
.tone-2 { background: #2e2616; color: #f2d9a1; }
.tone-3 { background: #0c2a30; color: #04d1e8; }
.tone-4 { background: #221c33; color: #d8cdf7; }
.tone-5 { background: #1a2e22; color: #bfe8c9; }



/* ================================ pillars =============================== */

/*
  FIVE CARDS ON SIX COLUMNS: three across the top taking two columns each,
  two across the bottom taking three — so the second row is wider, not a row
  with a hole in it. Each card is a <button> that opens its explainer.
*/
.pillars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.25rem; }
.pillars > li { grid-column: span 2; display: flex; }
.pillars > li:nth-child(n + 4) { grid-column: span 3; }
.pillar-btn {
  appearance: none; -webkit-appearance: none; margin: 0; width: 100%; text-align: left; cursor: pointer;
  font: inherit; color: var(--body); line-height: inherit;
  display: flex; flex-direction: column; padding: 1.75rem;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
@media (hover: hover) { .pillar-btn:hover { transform: translateY(-3px); border-color: var(--teal); } }
.pillar-title { font-family: var(--font-display); font-weight: 800; font-size: 1.85rem; line-height: 1.12; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 0.7rem; }
.pillar-sum { flex: 1; margin-bottom: 1.2rem; }
.pillar-more { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; color: var(--acc-text); }

/*
  THE EXPLAINER, a native popover: centred by the UA's own [popover] rules
  (fixed, inset 0, margin auto), light-dismissed and closed on Escape by the
  browser, and opened and closed by popovertarget buttons — no script.
*/
.fcard {
  margin: auto; padding: 0; width: min(40rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto;
  border: 1px solid var(--line); background: var(--card); color: var(--body);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
}
.fcard::backdrop { background: rgba(5, 10, 12, 0.72); }
.fcard-body { padding: 2.2rem 2.2rem 1.8rem; display: grid; gap: 1rem; }
.fcard-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.fcard-top h3 { margin: 0; }
.fcard-close {
  appearance: none; display: inline-grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; margin: 0 -0.6rem 0 0;
  background: transparent; color: var(--body); border: 1px solid #2d4c52; cursor: pointer;
}
.fcard-close:hover { color: var(--ink); border-color: var(--teal); }
.fcard h3 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 1.5rem + 1.5vw, 2.6rem); line-height: 1.06; letter-spacing: -0.02em; }
.fcard-intro { margin: 0; font-size: 1.05rem; }
.fcard .ticks { margin: 0.3rem 0 0; }

/* ========================= community management ========================= */

/*
  A NOTE, NOT A SECOND HERO. Text on the left, the one button on the right,
  a heading at display-3 size — an offer beside the product, not a rival to it.
*/
html.site .band-cm-wrap { background: var(--paper); padding: 48px 0; }
html.site .cm-promo {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 3rem; align-items: center;
  padding: 36px 48px;
  background: var(--teal); color: #0f3a40;
}
html.site .cm-promo h2 { color: var(--on-teal); }
html.site .cm-promo .eyebrow { color: #0f3a40; }
.cm-promo .lede { color: #0f3a40; margin: 0; font-size: 1.0625rem; max-width: 40rem; }
.cm-promo .display-3 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.25rem); margin: 0 0 0.6rem; }
.cm-promo .eyebrow { margin-bottom: 0.6rem; }
.cm-promo-go { display: flex; justify-content: flex-start; }

/* ================================= split ================================ */

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split-top { align-items: start; }

/* ================================ contact =============================== */

.contact-channels { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.contact-none { display: block; max-width: 36rem; margin-left: auto; margin-right: auto; padding: 1.1rem 1.4rem; border: 1.5px dashed var(--line); border-radius: 0; color: var(--body); }
.contact-none p { margin: 0; }
.contact-none strong { color: var(--ink); }
.contact-card { padding: 2rem; border-radius: 0; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.contact-card h2, .split-top h2 { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; letter-spacing: -0.02em; margin-bottom: 1.2rem; }
.contact-card .contact-channels { flex-direction: column; align-items: flex-start; }
.contact-card .contact-card .contact-none { margin: 0; }

.ticks { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.55rem; }
.ticks li { position: relative; padding-left: 1.7rem; }
/* The tick is centred on the FIRST LINE of its item (2026-10-10): its box sits
   half a line down, less half its own height, and turns about its centre — it
   used to turn about its left edge, which lifted it above the words. `lh` is
   one line of the item; the em value before it is for browsers without it. */
.ticks li::before {
  content: ""; position: absolute; left: 0.1rem; width: 0.85rem; height: 0.45rem;
  top: 0.55em; top: calc(0.5lh - 0.3rem);
  border-left: 2.5px solid var(--acc-text); border-bottom: 2.5px solid var(--acc-text);
  transform: rotate(-45deg); transform-origin: center;
}
/* Info bullets: the capability's name, and under it what it does. */
.ticks-info { gap: 0.85rem; }
.ticks-info strong { display: block; color: var(--ink); font-weight: 700; }
.ticks-info span { display: block; color: var(--body); font-size: 0.95rem; }

/* ============================== communities ============================= */

.cm-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 1.25rem; }
.cm-card { display: flex; flex-direction: column; gap: 1rem; padding: 1.6rem; border-radius: 0; background: var(--card); border: 1px solid var(--line); min-width: 0; }
.cm-card-head { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.cm-card-id { min-width: 0; }
.cm-mark { display: block; width: 56px; height: 56px; flex: none; border-radius: 0; object-fit: cover; }
.cm-mark-fallback {
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em;
}
.cm-card-name { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; line-height: 1.15; letter-spacing: -0.02em; overflow-wrap: anywhere; }
html.site .cm-card-name a { color: var(--ink); }
.cm-card-meta { margin: 0.2rem 0 0; font-size: 0.9rem; color: var(--muted); }
.cm-card-blurb { margin: 0; }
.chip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip-list a {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 0.75rem; border-radius: 0;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  background: rgba(4, 209, 232, 0.08); border: 1px solid var(--line); color: var(--acc-text);
}
html.site .chip-list a:hover { border-color: var(--teal); text-decoration: none; }
.cm-card-go { margin-top: auto; display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; }
html.site .cm-card-go:hover { text-decoration: none; }
@media (hover: hover) { .cm-card-go:hover .i-arrow { transform: translateX(3px); } .cm-card-go .i-arrow { transition: transform 0.18s ease; } }
html.site .cm-card-next { background: transparent; border: 2px dashed var(--line); justify-content: center; align-items: flex-start; }
.empty { margin: 0 0 1.5rem; color: var(--muted); }

/* ================================ search ================================ */

/* The pill: a search field and its button in one rounded bar. */
.search-pill {
  display: flex; align-items: center; gap: 0.6rem;
  max-width: 56rem; margin: 2rem 0 0; padding: 0.45rem 0.45rem 0.45rem 1.4rem;
  border-radius: 0; background: var(--card); border: 1.5px solid var(--teal);
}
.center .search-pill { margin-left: auto; margin-right: auto; }
.search-pill .i-search { flex: none; color: var(--acc-text); }
.search-pill input {
  flex: 1; min-width: 0; min-height: 52px; border: 0; background: transparent; color: var(--ink);
  font: 500 1.15rem/1.2 var(--font-body);
}
.search-pill input::placeholder { color: var(--muted); opacity: 1; }
.search-pill input:focus { outline: none; }
.search-pill:focus-within { box-shadow: 0 0 0 3px rgba(4, 209, 232, 0.35); }
.search-pill-big { padding-left: 1.6rem; }
.search-pill-big input { min-height: 60px; font-size: 1.25rem; }
.search-pill-big .btn { min-height: 56px; }
.browse { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 0.6rem; margin: 1.4rem 0 0; }
.browse-chip {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 1rem; border-radius: 0;
  border: 1px solid var(--line); font-weight: 500; font-size: 0.95rem;
}
html.site .browse-chip { color: var(--body); }
html.site .browse-chip:hover { color: var(--ink); border-color: var(--teal); text-decoration: none; }
.browse .text-link { margin-left: 0.4rem; }
.res-empty .browse { justify-content: flex-start; }

.hero-search { padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(1.5rem, 4vw, 2.5rem); }
.hero-search .search-pill { margin-top: 1.25rem; }
.search-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.filters { display: flex; flex-direction: column; gap: 1.1rem; }
.filters fieldset { margin: 0; padding: 0 0 1.1rem; border: 0; border-bottom: 1px solid var(--line-soft); display: grid; gap: 0.1rem; min-width: 0; }
.filters legend { padding: 0 0 0.6rem; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.opt { display: flex; align-items: center; gap: 0.65rem; min-height: 36px; color: var(--body); cursor: pointer; }
.opt input { width: 18px; height: 18px; margin: 0; accent-color: var(--teal); }
.filters-clear { text-align: center; font-size: 0.95rem; }
.res-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; margin-bottom: 1.1rem; }
.res-count { margin: 0; overflow-wrap: anywhere; }
.res-count strong { color: var(--ink); }
.res-sort { display: flex; align-items: center; gap: 0.6rem; margin: 0; color: var(--muted); font-size: 0.95rem; }
.res-sort select {
  min-height: 42px; padding: 0 0.8rem; border-radius: 0; background: var(--card); color: var(--ink);
  border: 1px solid var(--line); font: 500 0.95rem var(--font-body);
}
.res-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.res {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 1.3rem; align-items: center;
  padding: 1.4rem 1.5rem; border-radius: 0; background: var(--card); border: 1px solid var(--line);
}
.res .cm-mark { width: 72px; height: 72px; font-size: 1.4rem; }
.res-body { min-width: 0; display: grid; gap: 0.45rem; }
.res-body p { margin: 0; }
.res-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; }
html.site .res-name { font-family: var(--font-display); font-weight: 800; font-size: 1.45rem; line-height: 1.15; letter-spacing: -0.015em; color: var(--ink); overflow-wrap: anywhere; }
html.site .res-name:hover { color: var(--acc-text); text-decoration: none; }
.res-name mark { background: #1f4a50; color: #f3f8f7; border-radius: 0; padding: 0 0.15em; }
.res-meta { font-size: 0.95rem; color: var(--muted); overflow-wrap: anywhere; }
.res-type { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--acc-text); }
.res-blurb { color: var(--body); }
.res-chips { list-style: none; margin: 0.2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.res-chips li { font-size: 0.82rem; padding: 0.25rem 0.7rem; border-radius: 0; background: #1b3a3f; color: #c6eef0; }
.res-go { display: flex; flex-direction: column; gap: 0.6rem; }
.res-more { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; letter-spacing: -0.01em; margin: 2.2rem 0 1rem; }
.res-empty {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 3rem; align-items: center;
  padding: clamp(1.5rem, 4vw, 3rem); border-radius: 0; border: 1.5px dashed #2d4c52;
}
.res-empty h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); line-height: 1.1; margin-bottom: 0.8rem; overflow-wrap: anywhere; }
.res-empty .eyebrow { margin-bottom: 0.3rem; }

/* ============================ after sign-in ============================= */

.find-note { margin: 1.1rem auto 0; max-width: 34rem; color: var(--body); }
.find-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.6rem; margin: 1rem 0 0; }
.hero-welcome .search-pill { margin-top: 1.8rem; }

.choose .section-head { margin-bottom: 2rem; }
.pick-form { display: grid; gap: 1rem; }
.pick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.pick {
  appearance: none; -webkit-appearance: none; margin: 0; width: 100%; cursor: pointer; text-align: left;
  font: inherit; color: var(--ink);
  display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 1.3rem; align-items: center;
  padding: 1.4rem 1.6rem; background: var(--card); border: 1px solid var(--line);
  transition: border-color 0.2s ease;
}
@media (hover: hover) { .pick:hover { border-color: var(--teal); } }
.pick .cm-mark { width: 72px; height: 72px; font-size: 1.4rem; }
.pick-body { display: grid; gap: 0.45rem; min-width: 0; }
.pick-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; }
.pick-name { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.pick-meta { font-size: 0.95rem; color: var(--muted); }
.pick-go {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 48px; padding: 0 1.4rem;
  background: var(--teal); color: var(--on-teal); font-weight: 600; white-space: nowrap;
}
.pick-remember { margin: 0 0 1rem; }
.choose-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.6rem 1.5rem;
  margin: 2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 0.95rem;
}
.choose .find-links { justify-content: flex-start; }
html.site .site-account-name { color: var(--ink); font-weight: 600; }

/* ================================ footer ================================ */

.site-footer { border-top: 1px solid var(--line-soft); padding: 3rem 0 3.5rem; font-size: 0.95rem; }
.site-footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem 3rem; }
/* The brand and the credit are one line: [mark] ServerMod by JammyJK. */
.site-footer-brand { margin: 0; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; }
.site-credit { color: var(--body); }
.site-footer-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; }
/* Centred on a phone: the brand line over the links, both on the axis. */
@media (max-width: 560px) {
  .site-footer-inner { flex-direction: column; justify-content: center; text-align: center; }
  .site-footer-brand, .site-footer-links ul { justify-content: center; }
}
.site-footer-links a { color: var(--body); }
html.site .site-footer-links a:hover { color: var(--ink); }

/* ============================== narrow screens ========================== */

@media (max-width: 960px) {
  .hero-grid, .split { grid-template-columns: minmax(0, 1fr); }
  .pillars > li, .pillars > li:nth-child(n + 4) { grid-column: 1 / -1; }
  html.site .cm-promo { grid-template-columns: minmax(0, 1fr); padding: 28px 24px; }
  html.site .band-cm-wrap { padding: 32px 0; }
  .cm-promo .lede { font-size: 1rem; }
  .search-grid, .res-empty { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  html.site body { font-size: 1rem; }
  .cta-row .btn { flex: 1 1 100%; }
  /* The pill comes apart on a phone: the field on top, a full-width button under it. */
  .search-pill { flex-wrap: wrap; border-radius: 0; padding: 0.45rem; gap: 0.4rem; }
  .search-pill .i-search { margin-left: 0.8rem; }
  .search-pill input { flex: 1 1 60%; }
  .search-pill .btn { flex: 1 1 100%; }
  .res { grid-template-columns: 56px minmax(0, 1fr); padding: 1.1rem; gap: 1rem; }
  .res .cm-mark { width: 56px; height: 56px; }
  .res-go { grid-column: 1 / -1; flex-direction: row; }
  .res-go .btn { flex: 1; }
  .pick { grid-template-columns: 56px minmax(0, 1fr); padding: 1.1rem; gap: 1rem; }
  .pick .cm-mark { width: 56px; height: 56px; }
  .pick-go { grid-column: 1 / -1; justify-content: center; }
  .btn-lg { width: 100%; }
  .cm-tile { width: 21.5rem; max-width: 88vw; height: 88px; padding: 1rem; gap: 0.9rem; }
  .cm-tile .cm-mark { width: 52px; height: 52px; }
  .cm-tile-name { font-size: 1.2rem; }
  .fcard-body { padding: 1.5rem 1.4rem 1.3rem; }
  .mini-board li { grid-template-columns: 26px 28px minmax(0, 1fr) 30%; gap: 0.5rem; }
  .contact-card { padding: 1.4rem; }
}
@media (pointer: coarse) {
  .chip-list a { min-height: 44px; }
  .site-signout { width: 44px; height: 44px; }
  .site-nav a { min-height: 44px; }
}

/* ================================ motion ================================ */

@media (prefers-reduced-motion: reduce) {
  html.site { scroll-behavior: auto; }
  .ticker { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .ticker-track { animation: none; }
  .ticker-copy { display: none; }
  html.site *, html.site *::before, html.site *::after { animation: none !important; transition: none !important; }
}

@media print {
  .site-header, .skip { display: none; }
  html.site .dark, }