/* ===========================================================================
   features.css — shared skeleton for /features/* explainer pages (2026-09-23).
   Loaded via ExtraCSS after landing.css, whose :root tokens and lw-section /
   lw-eyebrow / lw-faq / lw-hero primitives it builds on. The editorial measure
   is narrower than the landing's 1080px: these pages are meant to be read.
   Page templates wrap their sections in .lw-fx; everything here scopes to it.
   =========================================================================== */

.lw-fx .lw-wrap { max-width: 880px; }

/* --- Hero (tighter than the landing's) ------------------------------------ */

.lw-fx .lw-hero { padding: 76px 0 56px; }
.lw-fx .lw-hero h1 {
  font-size: clamp(32px, 4.4vw, 46px);
  line-height: 1.08;
  max-width: 20ch;
  margin: 0 0 18px;
}
.lw-fx .lw-hero h1 .accent { color: var(--lw-accent); }
.lw-fx .lw-hero .lw-subhead { font-size: 17px; margin: 0 0 28px; }

.fx-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 48px;
  align-items: center;
}
.fx-cta {
  display: inline-block;
  background: var(--lw-accent);
  color: var(--lw-bg);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 26px;
  border-radius: 4px;
  border: none;
}
.fx-illo {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  display: block;
  transform-origin: 50% 50%;
  animation: lw-rise 560ms ease 240ms both,
             lw-floaty 7s ease-in-out 900ms infinite alternate;
}
@media (max-width: 860px) {
  .fx-hero-grid { grid-template-columns: 1fr; }
  .fx-illo { max-width: 300px; }
}

/* --- Sections (smaller titles than the landing's) -------------------------- */

.lw-fx .lw-section { padding: 64px 0; }
.lw-fx .lw-section-title { font-size: 27px; letter-spacing: -0.025em; margin-bottom: 24px; }

/* --- Prose ----------------------------------------------------------------- */

.fx-prose p { font-size: 16.5px; color: var(--lw-muted); margin: 0 0 20px; }
.fx-prose p strong { color: var(--lw-fg); font-weight: 600; }
.fx-prose p.lede { font-size: 19px; color: var(--lw-fg); }
.fx-prose .mono {
  font-family: var(--lw-mono);
  font-size: 14px;
  color: var(--lw-fg);
  background: var(--lw-card);
  border: 1px solid var(--lw-border);
  border-radius: 5px;
  padding: 2px 7px;
  white-space: nowrap;
}

/* --- What it solves: pain -> fix rows -------------------------------------- */

.fx-solve-row {
  display: grid;
  grid-template-columns: 1fr 28px 1fr;
  gap: 14px;
  align-items: start;
  padding: 18px 0;
  border-bottom: 1px solid var(--lw-border);
}
.fx-solve-row:last-child { border-bottom: none; }
.fx-pain { font-size: 15px; color: var(--lw-faint); }
.fx-scene {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lw-muted);
  margin-bottom: 4px;
}
.fx-arrow { color: var(--lw-accent); font-size: 17px; padding-top: 2px; text-align: center; }
.fx-fix { font-size: 15px; color: var(--lw-fg); }
.fx-fix .mono { font-family: var(--lw-mono); font-size: 13px; color: var(--lw-accent); }
@media (max-width: 700px) {
  .fx-solve-row { grid-template-columns: 1fr; gap: 6px; }
  .fx-arrow { display: none; }
}

/* --- How it works: numbered steps ------------------------------------------ */

.fx-how {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--lw-border);
}
.fx-how:last-of-type { border-bottom: none; }
.fx-how .num {
  font-family: var(--lw-mono);
  font-size: 14px;
  color: var(--lw-accent);
  letter-spacing: 0.04em;
  padding-top: 3px;
}
.fx-how h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 8px; }
.fx-how p { font-size: 15px; color: var(--lw-muted); margin: 0; }

/* --- The fine print: spec list ---------------------------------------------- */

.fx-spec {
  margin-top: 28px;
  background: var(--lw-card);
  border: 1px solid var(--lw-border);
  border-radius: 10px;
  padding: 20px 24px;
}
.fx-spec-title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lw-faint);
  margin: 0 0 12px;
}
.fx-spec dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 22px; margin: 0; }
.fx-spec dt { font-family: var(--lw-mono); font-size: 13px; color: var(--lw-accent); }
.fx-spec dd { font-size: 14px; color: var(--lw-muted); margin: 0; }
@media (max-width: 560px) {
  .fx-spec dl { grid-template-columns: 1fr; gap: 2px; }
  .fx-spec dt { margin-top: 8px; }
  .fx-spec dd { margin-bottom: 4px; }
}

/* --- Where it shines: use cases --------------------------------------------- */

.fx-cases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.fx-case {
  background: var(--lw-card);
  border: 1px solid var(--lw-border);
  border-radius: 10px;
  padding: 20px 22px;
}
.fx-case h3 { font-size: 15px; font-weight: 700; margin: 0 0 6px; }
.fx-case .glyph {
  color: var(--lw-accent);
  font-family: var(--lw-mono);
  font-weight: 400;
  margin-right: 8px;
}
.fx-case p { font-size: 13.5px; color: var(--lw-muted); margin: 0; }
@media (max-width: 700px) { .fx-cases { grid-template-columns: 1fr; } }

/* --- Availability strip ------------------------------------------------------ */

.fx-fvp { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fx-fvp-card {
  background: var(--lw-card);
  border: 1px solid var(--lw-border);
  border-radius: 10px;
  padding: 22px 24px;
}
.fx-fvp-card.pro { border-color: rgba(198, 255, 58, 0.45); }
.fx-tier {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lw-faint);
  margin: 0 0 8px;
}
.fx-fvp-card.pro .fx-tier { color: var(--lw-accent); }
.fx-fvp-line { font-size: 14.5px; margin: 0; color: var(--lw-muted); }
.fx-fvp-line .mono { font-family: var(--lw-mono); font-size: 13px; }
.fx-fvp-note { font-size: 12.5px; color: var(--lw-faint); margin: 10px 0 0; }
@media (max-width: 700px) { .fx-fvp { grid-template-columns: 1fr; } }

/* --- Hand-drawn annotation primitives (2026-09-23 variability pass) --------
   Shared kit, deliberately mixed differently per page so the five pages
   share bones but not clothes. No page uses every primitive. */

/* marker highlight (theming, vanity, identities) */
.fx-mark {
  background: linear-gradient(100deg, rgba(198, 255, 58, 0.28), rgba(198, 255, 58, 0.16));
  padding: 0 5px;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* rotated sticker word (shared inbox) */
.fx-sticker {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lw-bg);
  background: var(--lw-accent);
  border-radius: 4px;
  padding: 3px 10px;
  transform: rotate(-2deg);
  vertical-align: 6px;
  white-space: nowrap;
}

/* write-on underline (vanity). The landing's global reduced-motion switch
   collapses the animation to its end state, so the underline still appears. */
@keyframes fx-writeon { from { stroke-dashoffset: 320; } to { stroke-dashoffset: 0; } }
.fx-write path { stroke-dasharray: 320; animation: fx-writeon 2.6s ease-out forwards; }

/* mono section index chip (XMPP page) */
.fx-idx {
  display: inline-block;
  font-family: var(--lw-mono);
  font-size: 12px;
  color: var(--lw-accent);
  letter-spacing: 0.08em;
  margin-right: 10px;
}

/* client pills (XMPP page) */
.fx-pills { display: flex; gap: 9px; flex-wrap: wrap; margin: -6px 0 28px; }
.fx-pill {
  font-family: var(--lw-mono);
  font-size: 12px;
  color: var(--lw-fg);
  border: 1px solid var(--lw-border);
  border-radius: 999px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.015);
}
.fx-pill.any { color: var(--lw-muted); border-style: dashed; }

/* swatch ribbon (theming page) */
.fx-swatches { display: flex; gap: 8px; align-items: center; margin: 18px 0 26px; }
.fx-swatch { width: 38px; height: 24px; border-radius: 6px; }

/* tinted panel: the theming page themes itself */
.fx-tinted {
  background: rgba(198, 255, 58, 0.045);
  border: 1px solid rgba(198, 255, 58, 0.22);
  border-radius: 10px;
  padding: 20px 24px;
}

/* typographic URL stack (vanity hero) */
.fx-url-old {
  font-family: var(--lw-mono);
  font-size: clamp(18px, 2.6vw, 26px);
  color: var(--lw-faint);
  text-decoration: line-through;
  text-decoration-color: #e0a06b;
  text-decoration-thickness: 3px;
}
.fx-url-new {
  font-family: var(--lw-mono);
  font-size: clamp(26px, 4.2vw, 42px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--lw-fg);
  margin-top: 8px;
}
.fx-url-new .accent { color: var(--lw-accent); }

/* before/after message cards (identities hero) */
.fx-msgcards { display: grid; gap: 12px; }
.fx-msgcard {
  background: var(--lw-card);
  border: 1px solid var(--lw-border);
  border-radius: 12px;
  padding: 16px;
}
.fx-msgcard.pro { border-color: rgba(198, 255, 58, 0.4); }
.fx-msgcard-tag {
  font-family: var(--lw-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lw-faint);
  margin: 0 0 10px;
}
.fx-msgcard.pro .fx-msgcard-tag { color: var(--lw-accent); }
.fx-msg {
  background: #0d0d10;
  border: 1px solid var(--lw-border);
  border-radius: 9px;
  padding: 9px 12px;
}
.fx-msg + .fx-msg { margin-top: 8px; }
.fx-msg .who { font-family: var(--lw-mono); font-size: 11px; color: var(--lw-faint); }
.fx-msg p { margin: 3px 0 0; font-size: 13px; color: var(--lw-muted); }

/* mirrored hero (shared inbox: the only art-left page in the set) */
.fx-hero-grid.flip { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }

/* --- Real-screenshot figure (theming page) ----------------------------------
   Captured from the live customize page via web/scripts/capture-theming.mjs
   (seedfig + Playwright, 2x). Keep captions matching the actual pixels. */
.fx-figure {
  margin: 28px 0 0;
  border: 1px solid var(--lw-border);
  border-radius: 10px;
  background: var(--lw-card);
  padding: 10px;
}
.fx-figure img {
  display: block;
  width: 100%;
  /* height:auto is load-bearing: the width/height attributes double as a
     presentational hint, so CSS width alone would pin the box at the
     attribute's literal 1560px and stretch the figure vertically. */
  height: auto;
  border-radius: 6px;
  border: 1px solid var(--lw-border);
}
.fx-figure figcaption {
  font-size: 12.5px;
  color: var(--lw-faint);
  padding: 10px 6px 2px;
}

/* --- Cross-links between feature pages (SEO + wandering readers) --------- */
.fx-related { display: flex; flex-wrap: wrap; gap: 10px; }
.fx-related a {
  font-size: 13px;
  color: var(--lw-muted);
  border: 1px solid var(--lw-border);
  border-radius: 999px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.012);
  transition: color 120ms ease, border-color 120ms ease;
}
.fx-related a:hover { color: var(--lw-accent); border-color: rgba(198, 255, 58, 0.45); }