/* HolyCRM.app — public website
   Raw, dependency-free CSS. Theme tokens mirror the app's own
   assets/css/styles.css so the marketing site and the product feel related. */

/* =========================================================
   BRAND FONT — Fraunces (self-hosted; used only by the wordmark)
   Files from Google Fonts (OFL), subset to latin + latin-ext.
   ========================================================= */
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/fraunces-italic-900-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: "Fraunces";
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/fraunces-italic-900-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: "Fraunces";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/fraunces-normal-700-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: "Fraunces";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/fraunces-normal-700-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;
}

/* =========================================================
   TEXT FONT — Inter (variable, self-hosted), the same face the app uses.
   Headings use Fraunces (above): 700 roman, and the 900 italic for an
   emphasised phrase (<em> inside an h1/h2).
   ========================================================= */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-var-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: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-var-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;
}

/* =========================================================
   TOKENS
   ========================================================= */
:root {
  color-scheme: light;

  --bg: #f6f7fb;
  --bg-grad-1: #eef2ff;
  --bg-grad-2: #f1f5f9;
  --surface: #ffffff;
  --surface-2: #f4f6fb;
  --card: #ffffff;
  --text: #0f172a;
  --heading: #0b1120;
  --muted: #5a6b85;
  --border: rgba(15, 23, 42, 0.10);
  --border-strong: rgba(15, 23, 42, 0.16);
  --hover: rgba(15, 23, 42, 0.04);

  --primary: #2563eb;
  --primary-2: #1d4ed8;
  --primary-soft: rgba(37, 99, 235, 0.10);
  --primary-text: #1d4ed8;
  --em: #1d4ed8; /* emphasised phrase in headings */
  --on-accent: #ffffff;
  --success: #166534;
  --warn: #b45309;

  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 2px 8px rgba(15, 23, 42, 0.05);
  --shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.14);

  --maxw: 1120px;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b1120;
    --bg-grad-1: #131c31;
    --bg-grad-2: #0e1626;
    --surface: #131a2a;
    --surface-2: #1a2337;
    --card: #161e2e;
    --text: #dde3ef;
    --heading: #f2f5fb;
    --muted: #9aa7bd;
    --border: rgba(148, 163, 184, 0.18);
    --border-strong: rgba(148, 163, 184, 0.30);
    --hover: rgba(255, 255, 255, 0.05);
    --primary: #3b82f6;
    --primary-2: #2563eb;
    --primary-soft: rgba(59, 130, 246, 0.16);
  --primary-text: #3b82f6;
    --primary-text: #3b82f6;
    --em: #93c5fd;
    --success: #4ade80;
    --warn: #fbbf24;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 10px rgba(0, 0, 0, 0.4);
    --shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1120;
  --bg-grad-1: #131c31;
  --bg-grad-2: #0e1626;
  --surface: #131a2a;
  --surface-2: #1a2337;
  --card: #161e2e;
  --text: #dde3ef;
  --heading: #f2f5fb;
  --muted: #9aa7bd;
  --border: rgba(148, 163, 184, 0.18);
  --border-strong: rgba(148, 163, 184, 0.30);
  --hover: rgba(255, 255, 255, 0.05);
  --primary: #3b82f6;
  --primary-2: #2563eb;
  --primary-soft: rgba(59, 130, 246, 0.16);
  --em: #93c5fd;
  --success: #4ade80;
  --warn: #fbbf24;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 10px rgba(0, 0, 0, 0.4);
  --shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.6);
}

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

.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;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  background:
    radial-gradient(1200px 600px at 100% -10%, var(--bg-grad-1), transparent 60%),
    radial-gradient(1000px 500px at -10% 0%, var(--bg-grad-2), transparent 55%),
    var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { color: var(--heading); line-height: 1.2; letter-spacing: -0.02em; }
/* Headings in Fraunces (only 700 roman and 900 italic are loaded), set large
   and tight; an <em> inside one switches to the heavy italic in the accent colour. */
h1, h2, h3 { font-family: var(--serif); font-weight: 700; }
h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 0.98; letter-spacing: -0.045em; }
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.04; letter-spacing: -0.035em; }
h3 { font-size: 1.2rem; letter-spacing: -0.01em; }
h1 em, h2 em, blockquote em { font-style: italic; font-weight: 900; color: var(--em); }

p { color: var(--text); }
.muted { color: var(--muted); }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

section { padding: 72px 0; }
.section-tight { padding: 48px 0; }

.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-text);
  background: var(--primary-soft);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.lead { font-size: 1.15rem; color: var(--muted); max-width: 60ch; }

.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-weight: 650;
  font-size: 0.98rem;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease,
    border-color 0.15s ease;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--primary); color: var(--on-accent); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--primary-2); box-shadow: var(--shadow); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--hover); }
.btn-lg { padding: 15px 28px; font-size: 1.02rem; }

.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }
.center .btn-row,
.btn-row.center { justify-content: center; }

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 66px;
}
/* Brand wordmark — Fraunces. "holycrm.app" heavy italic + a bold roman tagline.
   Inline (with a hairline divider) in the header; stacked in the footer. */
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  color: var(--heading);
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  line-height: 1;
  white-space: nowrap;
}
.brand:hover { text-decoration: none; }
.brand__name {
  font-style: italic;
  font-weight: 900;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}
.brand__tag {
  font-style: normal;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--muted);
}
.brand__tag::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1em;
  margin-right: 0.6rem;
  background: currentColor;
  opacity: 0.4;
  vertical-align: -0.1em;
}
/* Stacked variant (footer) */
.brand--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
}
.brand--stack .brand__name { font-size: 1.6rem; }
.brand--stack .brand__tag { font-size: 0.86rem; }
.brand--stack .brand__tag::before { display: none; }
/* Tight header room on phones: keep the name, drop the tagline */
@media (max-width: 620px) {
  .site-header .brand__tag { display: none; }
  .site-header .brand__name { font-size: 1.3rem; }
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.nav-links a {
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 550;
  white-space: nowrap; /* "Por que o HolyCRM" wrapped onto three lines */
  padding: 8px 12px;
  border-radius: 8px;
}
.nav-links a:hover { background: var(--hover); text-decoration: none; }
.nav-cta { margin-left: 8px; }

.nav-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 14px;
}

.lang-select {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 9px;
  border-radius: 9px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  max-width: 9.5rem;
}
.lang-select:hover { background: var(--hover); }

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  width: 40px; height: 40px;
  cursor: pointer;
  color: var(--text);
  font-size: 18px;
}

/* The menu collapses earlier than the content (1100px): with Inter and the
   links on one line, es/pt labels need the room. The header tagline steps
   aside below 1460px (it's still in the footer). */
@media (max-width: 1460px) {
  .site-header .brand__tag { display: none; }
}
@media (max-width: 1100px) {
  .nav { gap: 12px; }
  .nav-tools { margin-left: auto; }
  .nav-toggle { display: grid; place-items: center; }
  .nav-links {
    position: absolute;
    top: 66px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 12px;
    box-shadow: var(--shadow);
    display: none;
    margin-left: 0;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 14px; }
  .nav-cta { margin: 6px 0 0; }
}

/* anchor targets clear the sticky header */
section[id] { scroll-margin-top: 84px; }

/* =========================================================
   HERO
   ========================================================= */
.hero { padding: 84px 0 40px; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.hero h1 { margin-bottom: 20px; }
.hero .lead { margin-bottom: 28px; font-size: 1.22rem; }
.hero-note { margin-top: 18px; font-size: 0.9rem; color: var(--muted); }

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 34px;
  font-size: 0.9rem;
  color: var(--muted);
}
.trust-row span { display: inline-flex; align-items: center; gap: 7px; }
.trust-row span::before { content: "✓"; color: var(--primary); font-weight: 800; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero { padding: 52px 0 24px; }
}

/* =========================================================
   APP MOCK (inline, CSS only)
   ========================================================= */
.mock {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.mock-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.mock-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.mock-bar span {
  margin-left: 10px;
  font-size: 0.78rem;
  color: var(--muted);
  font-style: normal;
}
.mock-body { padding: 18px; display: grid; gap: 14px; }
.mock-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kpi {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
}
.kpi b { display: block; font-size: 1.35rem; color: var(--heading); letter-spacing: -0.02em; }
.kpi small { color: var(--muted); font-size: 0.72rem; }
.mock-chart {
  height: 128px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 14px;
}
.mock-chart i {
  flex: 1;
  background: linear-gradient(var(--primary), color-mix(in srgb, var(--primary) 45%, transparent));
  border-radius: 4px 4px 0 0;
  opacity: 0.9;
}
.mock-rows { display: grid; gap: 8px; }
.mock-rows i {
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  display: block;
  position: relative;
}
.mock-rows i::after {
  content: "";
  position: absolute;
  left: 12px; top: 12px;
  width: 42%; height: 10px;
  border-radius: 4px;
  background: var(--border-strong);
}

/* Hero mock with tabs (Dashboard / Visitors / Rotas). Without JS only the
   first panel shows; site.js wires the tabs. */
.mk-tabs { display: flex; gap: 4px; padding: 10px 14px 0; border-bottom: 1px solid var(--border); }
.mk-tab {
  appearance: none; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--muted);
  padding: 8px 12px 10px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.mk-tab[aria-selected="true"] { color: var(--primary-text); border-bottom-color: var(--primary); }
.mk-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }
.mk-panel { padding: 18px; display: grid; gap: 14px; min-height: 300px; align-content: start; }
.mk-panel[hidden] { display: none; }
.mk-hello { font-weight: 700; color: var(--heading); }
.mk-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.mk-kpi {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px;
}
.mk-kpi b { display: block; font-size: 1.3rem; color: var(--heading); letter-spacing: -0.02em; }
.mk-kpi small { display: block; color: var(--muted); font-size: 0.74rem; }
.mk-kpi em { display: inline-block; margin-top: 4px; font-style: normal; font-size: 0.7rem; color: var(--success);
             background: color-mix(in srgb, var(--success) 12%, transparent); border-radius: 999px; padding: 1px 7px; }
.mk-kpi.is-warn { border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.mk-kpi.is-warn b { color: var(--warn); }
.mk-chart small { display: block; color: var(--muted); font-size: 0.74rem; margin-bottom: 6px; }
.mk-chart .mock-chart { height: 92px; }
.mk-funnel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mk-funnel div { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; }
.mk-funnel b { display: block; font-size: 1.15rem; color: var(--heading); }
.mk-funnel small { color: var(--muted); font-size: 0.7rem; }
.mk-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mk-rows li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px;
  font-size: 0.86rem; color: var(--text); background: var(--card);
}
.mk-rota li > span:first-child { display: grid; }
.mk-rota b { font-size: 0.86rem; color: var(--heading); }
.mk-rota small { font-size: 0.74rem; color: var(--muted); }
.mk-service { font-weight: 700; color: var(--heading); }
.mk-pill { flex: none; font-size: 0.72rem; font-weight: 600; border-radius: 999px; padding: 2px 9px; border: 1px solid; }
.mk-pill.is-new { color: var(--primary-text); border-color: color-mix(in srgb, var(--primary) 40%, transparent); }
.mk-pill.is-mid { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.mk-pill.is-done { color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, transparent); }

/* Floating chips around the hero mock (decorative, aria-hidden). */
.mk-wrap { position: relative; }
.mk-chip {
  position: absolute; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px 10px 10px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow);
}
.mk-chip b { display: block; font-size: 0.95rem; color: var(--heading); line-height: 1.15; }
.mk-chip small { display: block; font-size: 0.72rem; color: var(--muted); }
.mk-chip-a { top: -52px; left: -24px; } /* above the window bar, not over its title */
.mk-chip-b { bottom: -26px; right: -22px; }
.mk-chip-ic {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  color: #db2777; background: color-mix(in srgb, #db2777 12%, transparent); font-size: 1rem;
}
.mk-ring {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  font-size: 0.68rem; font-weight: 700; color: var(--heading);
  background:
    radial-gradient(closest-side, var(--card) 76%, transparent 78%),
    conic-gradient(var(--primary) calc(var(--p) * 1%), var(--border) 0);
}
@media (max-width: 1100px) { .mk-chip-a { left: -8px; } .mk-chip-b { right: -8px; } }
@media (max-width: 560px) { .mk-chip { display: none; } }

/* =========================================================
   GENERIC GRID / CARDS
   ========================================================= */
.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, 1fr);
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .grid, .grid-2, .grid-4 { grid-template-columns: 1fr; }
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.card .ic {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  font-size: 22px;
  background: var(--primary-soft);
  border-radius: 11px;
  margin-bottom: 14px;
}
.card h3 { margin-bottom: 6px; }
.card p { color: var(--muted); font-size: 0.96rem; }

.section-head { max-width: 62ch; margin-bottom: 40px; }
.center .section-head,
.section-head.center { margin-left: auto; margin-right: auto; }

/* Features: hero row + labeled groups */
.feat-hero-eyebrow { display: block; margin-bottom: 16px; }
.feat-hero { margin-bottom: 56px; }
.card-hero {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary-soft), var(--shadow-sm);
}
.card-hero .ic {
  background: var(--primary);
  color: #fff;
}
.feat-group { margin-top: 40px; }
.feat-group:first-of-type { margin-top: 0; }
.feat-group-label { display: block; margin-bottom: 16px; }

/* Mobile: an interactive tab/pill switcher (tried, then reverted — see git
   history if it matters) turned out to be solving the wrong problem. The
   four hero cards alone stack to 1000px+ on a narrow screen because each
   is a full icon+heading+multi-line-paragraph block; no amount of hiding
   *other* groups fixes that, and a horizontally-scrollable pill strip is a
   worse, less-discoverable interaction than the page's own natural
   vertical scroll. The real fix is density: below 900px (the existing
   grid-collapse breakpoint), every card goes from a padded vertical block
   to a compact icon-left row (its paragraph used to clamp to two lines
   too, but that cut real sentences off, so the text now shows in full). This cuts total page height dramatically with zero JS and no
   new interaction to discover; the four hero/group sections are just
   stacked, scrollable, and short again like the rest of the page. */
@media (max-width: 900px) {
  /* Only cards laid out in a .grid: the contact form and contact cards (not in a
     grid) keep their normal layout, or the form fields end up in the icon column. */
  /* Grid, not flex: icon and heading/paragraph need to sit in two separate
     COLUMNS (icon | text), with heading and paragraph stacked inside that
     one text column — not three items competing side by side in a single
     row, which squeezed the heading into a narrow strip that wrapped to
     five lines. The icon spans both text rows so it stays top-aligned. */
  .grid > .card {
    display: grid;
    grid-template-columns: 34px 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 2px;
    padding: 14px;
  }
  .grid > .card .ic {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: start;
    width: 34px; height: 34px;
    font-size: 17px;
    margin-bottom: 0;
  }
  .grid > .card h3 { grid-column: 2; grid-row: 1; font-size: 0.98rem; margin-bottom: 0; }
  /* full text: clamping to two lines cut the "Sound familiar?" cards mid-sentence */
  .grid > .card p {
    grid-column: 2; grid-row: 2;
    font-size: 0.86rem;
  }
  .grid, .grid-2, .grid-4 { gap: 10px; }
  .feat-hero { margin-bottom: 32px; }
  .feat-group { margin-top: 28px; }
}

/* Alternating feature blocks */
.feature-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 40px 0;
  border-top: 1px solid var(--border);
}
.feature-block:first-of-type { border-top: 0; }
.feature-block.rev .fb-media { order: -1; }
.feature-block h3 { font-size: 1.5rem; margin-bottom: 12px; }
.feature-block ul { margin: 16px 0 0; padding-left: 0; list-style: none; }
.feature-block li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 9px;
  color: var(--muted);
  font-size: 0.97rem;
}
.feature-block li::before {
  content: "";
  position: absolute; left: 0; top: 9px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--primary);
}
.fb-media {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  min-height: 200px;
  display: grid;
  gap: 10px;
  align-content: center;
}
.fb-media .chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 13px;
  color: var(--text);
  width: fit-content;
}
.fb-media .chip b { color: var(--primary); }
.fb-media .bar {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--primary), transparent);
}

@media (max-width: 900px) {
  .feature-block { grid-template-columns: 1fr; gap: 24px; }
  .feature-block.rev .fb-media { order: 0; }
}

/* =========================================================
   STEPS
   ========================================================= */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}
.step::before {
  counter-increment: step;
  content: counter(step);
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  font-weight: 800;
  margin-bottom: 14px;
}
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }

/* =========================================================
   JOURNEY — one person's first months, step by step, with real
   screenshots (assets/img/app/<lang>/, swapped per language via
   data-i18n-attr). Steps reuse .feature-block for the two-column layout.
   ========================================================= */
.journey { list-style: none; margin: 0; padding: 0; }
/* the screenshot gets the larger column so the app stays readable; phones need less */
.journey-step { padding: 48px 0; grid-template-columns: 5fr 7fr; }
.journey-step.rev { grid-template-columns: 7fr 5fr; }
.journey-step:has(.is-phone) { grid-template-columns: 1fr 1fr; }
.journey-step.rev .journey-media { order: -1; }
.journey-step ul { margin-top: 18px; }
.journey-when {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary-text);
}
.journey-when b {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--primary);
  color: var(--on-accent);
  font-size: 0.9rem;
}
.journey-text p { color: var(--muted); font-size: 1.02rem; }
.journey-media { position: relative; }
.journey-media .shot { display: block; width: 100%; height: auto; }
/* framed mockups carry their own shadow and transparent margin */
.journey-media .shot { margin: -3% 0; }
.journey-media.is-phone { display: flex; justify-content: center; }
.journey-media.is-phone .shot-phone { width: min(320px, 78%); margin: 0; }
.journey-media.is-combo { padding-bottom: 6%; }
.journey-media.is-combo .shot-over {
  position: absolute;
  right: -2%;
  bottom: -4%;
  width: 34%;
  margin: 0;
}
@media (max-width: 900px) {
  .journey-step, .journey-step.rev, .journey-step:has(.is-phone) { grid-template-columns: 1fr; padding: 28px 0; gap: 18px; }
  .journey-step.rev .journey-media { order: 0; }
  .journey-media.is-combo { padding-bottom: 14%; }
  .journey-media.is-combo .shot-over { right: 0; width: 36%; }
}

/* =========================================================
   QUOTE BAND — a deliberate pause between the journey and the index.
   Dark in both themes.
   ========================================================= */
.quote-band {
  position: relative;
  overflow: hidden;
  padding: 96px 0;
  color: #dbe4f5;
  background:
    radial-gradient(700px 420px at 85% 15%, rgba(59, 130, 246, 0.35), transparent 70%),
    radial-gradient(600px 380px at 5% 110%, rgba(99, 102, 241, 0.25), transparent 70%),
    #0b1324;
}
.quote-band .eyebrow { background: rgba(147, 197, 253, 0.14); color: #bfdbfe; }
.quote-band blockquote {
  max-width: 22ch;
  margin: 18px 0 22px;
  font: 700 clamp(2.2rem, 4.8vw, 3.9rem)/1.04 var(--serif);
  letter-spacing: -0.04em;
  color: #fff;
}
.quote-band blockquote em { color: #93c5fd; }
.quote-band p { max-width: 52ch; font-size: 1.08rem; color: #b6c2da; }
@media (max-width: 900px) { .quote-band { padding: 64px 0; } }

/* =========================================================
   FEATURE INDEX — everything else, one line each, linked to its guide
   ========================================================= */
.ix-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 28px;
}
.ix-group h3 {
  font-family: var(--font); /* a small label, not a serif heading */
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 12px;
}
.ix-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ix-group a {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  align-items: start;
  padding: 9px 10px;
  margin: 0 -10px;
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
}
.ix-group a:hover { background: var(--hover); }
.ix-group a:hover b { color: var(--primary-text); }
.ix-ic { font-size: 1.15rem; line-height: 1.4; text-align: center; }
.ix-group b { display: block; font-size: 0.97rem; color: var(--heading); }
.ix-group small { display: block; font-size: 0.86rem; color: var(--muted); line-height: 1.35; }
@media (max-width: 900px) { .ix-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ix-grid { grid-template-columns: 1fr; gap: 24px; } }

/* =========================================================
   BANDS
   ========================================================= */
.band {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.band-primary {
  background:
    radial-gradient(800px 400px at 50% -40%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 70%),
    var(--surface);
}

/* pill list */
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pill {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 999px;
  padding: 8px 15px;
  font-size: 0.9rem;
  color: var(--text);
}
.pill b { color: var(--primary); }

/* =========================================================
   FAQ
   ========================================================= */
.faq { max-width: 760px; margin: 0 auto; }
.faq details {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 18px;
  margin-bottom: 12px;
  background: var(--card);
}
.faq summary {
  cursor: pointer;
  font-weight: 650;
  padding: 14px 0;
  list-style: none;
  color: var(--heading);
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--primary); font-weight: 800; font-size: 1.2rem; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 0 16px; color: var(--muted); font-size: 0.97rem; }

/* =========================================================
   COMPARISON TABLE
   ========================================================= */
.compare-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.compare-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  background: var(--card);
}
.compare-table th, .compare-table td {
  padding: 16px 18px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
}
.compare-table thead th {
  color: var(--muted);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 2px solid var(--border-strong);
  vertical-align: bottom;
}
.compare-table th[scope="row"] {
  text-align: left;
  font-weight: 600;
  color: var(--text);
  font-size: 0.95rem;
  position: sticky;
  left: 0;
  background: var(--card);
}
.compare-table thead th:first-child {
  position: sticky;
  left: 0;
  background: var(--card);
}
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table .compare-us { background: var(--primary-soft); }
.compare-us-badge {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--primary);
  margin-bottom: 4px;
}
.compare-table thead .compare-us {
  color: var(--heading);
  box-shadow: inset 0 2px 0 var(--primary);
}
.cmp { font-weight: 800; font-size: 1.05rem; }
.cmp-yes { color: var(--success); }
.cmp-partial { color: var(--warn); }
.cmp-no { color: var(--muted); }
.compare-hint { display: none; text-align: center; margin-top: 12px; font-size: 0.85rem; color: var(--muted); }
@media (max-width: 720px) {
  .compare-hint { display: block; }
}

.compare-mobile { display: none; }
@media (max-width: 720px) {
  .compare-desktop { display: none; }
  .compare-mobile { display: block; }
}
.compare-mobile-block { margin-bottom: 28px; }
.compare-mobile-block:last-child { margin-bottom: 0; }
.compare-mobile-h {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--heading);
  margin-bottom: 10px;
}
.compare-table-compact {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.compare-table-compact th, .compare-table-compact td {
  padding: 12px 10px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
}
.compare-table-compact thead th {
  color: var(--muted);
  font-weight: 700;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 2px solid var(--border-strong);
}
.compare-table-compact th[scope="row"] { text-align: left; font-weight: 600; color: var(--text); }
.compare-table-compact tbody tr:last-child th, .compare-table-compact tbody tr:last-child td { border-bottom: none; }
.compare-table-compact .compare-us { background: var(--primary-soft); }

/* =========================================================
   PRICING
   ========================================================= */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.price-grid-2 { grid-template-columns: repeat(2, 1fr); max-width: 820px; margin: 0 auto; align-items: stretch; }
.price-single { max-width: 420px; margin: 0 auto; }
.price {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}
.price.featured { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.price h3 { font-size: 1.2rem; }
.price .amt { font-size: 2.2rem; font-weight: 800; color: var(--heading); margin: 10px 0 2px; letter-spacing: -0.03em; }
.price .amt [data-price-unit], .price .amt .amt-unit { font-size: 0.95rem; font-weight: 600; color: var(--muted); margin-left: 6px; }
.price ul { list-style: none; margin: 18px 0 22px; }
.price li { padding-left: 24px; position: relative; margin-bottom: 9px; color: var(--muted); font-size: 0.95rem; }
.price li::before { content: "✓"; position: absolute; left: 0; color: var(--primary); font-weight: 800; }
.price .btn { width: 100%; margin-top: auto; }
.price-trial {
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--success);
  margin: 0 0 10px;
}
.price-trial::before { content: "✓ "; }
@media (max-width: 900px) { .price-grid, .price-grid-2 { grid-template-columns: 1fr; } }

.billing-toggle {
  display: flex;
  justify-content: center;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  width: fit-content;
  margin: 0 auto 24px;
}
.billing-opt {
  border: none;
  background: transparent;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.billing-opt.is-active { background: var(--card); color: var(--heading); box-shadow: var(--shadow-sm); }
.billing-badge {
  background: color-mix(in srgb, var(--success) 16%, transparent);
  color: var(--success);
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 7px;
  border-radius: 999px;
}
.amt-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.amt-row .amt { margin: 0; }
.price-was {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: line-through;
}
.price-equiv { color: var(--muted); font-size: 0.85rem; margin: 4px 0 0; }
.price-savings {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: color-mix(in srgb, var(--success) 14%, transparent);
  color: var(--success);
  font-weight: 700;
  font-size: 0.78rem;
  padding: 4px 11px;
  border-radius: 999px;
  margin: 10px 0 2px;
}
.price-savings::before { content: "✓"; }
.price-savings[hidden] { display: none; }

.crypto-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 0.88rem;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
  margin: 16px 0 20px;
  transition: border-color 0.15s, background 0.15s;
}
.crypto-chip:hover { border-color: var(--primary); }
.crypto-chip[aria-pressed="true"] {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--heading);
  font-weight: 600;
}
.crypto-chip-mark {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 6px;
  border: 2px solid var(--border-strong);
  display: grid;
  place-items: center;
  transition: border-color 0.15s, background 0.15s;
}
.crypto-chip[aria-pressed="true"] .crypto-chip-mark { border-color: var(--primary); background: var(--primary); }
.crypto-chip[aria-pressed="true"] .crypto-chip-mark::after {
  content: "✓";
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

/* =========================================================
   CTA
   ========================================================= */
.cta {
  text-align: center;
  background:
    radial-gradient(700px 320px at 50% 0%, color-mix(in srgb, var(--primary) 26%, transparent), transparent 70%),
    var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 56px 32px;
  box-shadow: var(--shadow);
}
.cta h2 { margin-bottom: 12px; }
.cta .lead { margin: 0 auto 26px; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding: 52px 0 28px;
  margin-top: 24px;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
}
.note a { text-decoration: underline; text-underline-offset: 2px; }
.foot-grid h2 { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 14px; }
.foot-grid a { display: block; color: var(--text); font-size: 0.93rem; padding: 5px 0; }
.foot-grid a.brand { display: inline-flex; padding: 6px 0 2px; }
.foot-grid a.brand.brand--stack { display: flex; }
.foot-grid p { color: var(--muted); font-size: 0.92rem; max-width: 34ch; }
.foot-bottom {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.86rem;
  color: var(--muted);
}
.foot-langs { display: flex; gap: 14px; }
.foot-langs a { color: var(--muted); }
.foot-langs a:hover { color: var(--text); }
.foot-langs a[aria-current] { color: var(--text); font-weight: 600; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; } }

/* =========================================================
   MISC
   ========================================================= */
.hr { height: 1px; background: var(--border); border: 0; margin: 0; }

.note {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  color: var(--muted);
  font-size: 0.92rem;
  background: var(--surface-2);
}

.kv { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 28px; }
.kv div { border-left: 2px solid var(--primary); padding-left: 14px; }
.kv b { display: block; color: var(--heading); }
.kv span { color: var(--muted); font-size: 0.94rem; }
@media (max-width: 700px) { .kv { grid-template-columns: 1fr; } }

.theme-toggle {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text);
  width: 40px; height: 40px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 16px;
  display: grid;
  place-items: center;
}
.theme-toggle:hover { background: var(--hover); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* The hero kicker sits inside the <h1> so the heading carries the search phrase
   ("Software para iglesias"), but keeps the small uppercase pill look. */
.hero h1 .hero-kicker {
  display: table;
  font-family: var(--font);
  line-height: 1.2;
  letter-spacing: 0.08em;
}
.hero h1 .hero-title { display: block; }

/* =========================================================
   FEATURE PAGES (/es/celulas-y-grupos/ …, built by scripts/feature-pages.mjs)
   ========================================================= */
.fp-hero .hero-grid { grid-template-columns: 5fr 7fr; gap: 40px; }
.fp-hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); }
.fp-docs { max-width: 760px; margin: 28px auto 0; text-align: center; }
@media (max-width: 900px) {
  .fp-hero .hero-grid { grid-template-columns: 1fr; }
}
.fp-hero-phone .hero-grid { grid-template-columns: 7fr 5fr; }
.fp-hero .journey-media.is-phone .shot-phone { width: min(300px, 80%); }
.fp-mock .mk-panel { min-height: 0; }
.fp-mock .mk-rota small { overflow-wrap: anywhere; }
.journey + .fp-steps { margin-top: 32px; }
.fp-steps-2 { grid-template-columns: repeat(2, 1fr); }
.fp-steps-1 { grid-template-columns: 1fr; max-width: 760px; margin-left: auto; margin-right: auto; }
.fp-step h3 { font-size: 1.25rem; margin-bottom: 10px; }
.fp-step p { color: var(--muted); }
.fp-step ul { list-style: none; margin: 14px 0 0; padding: 0; }
.fp-step li { position: relative; padding-left: 22px; margin-bottom: 8px; color: var(--muted); font-size: 0.95rem; }
.fp-step li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--primary);
}
.fp-more { justify-content: center; max-width: 920px; margin: 0 auto; }
.fp-more a.pill { text-decoration: none; }
.fp-more a.pill:hover { border-color: var(--primary); color: var(--primary-text); }
@media (max-width: 900px) {
  .fp-hero-phone .hero-grid { grid-template-columns: 1fr; }
  /* The phone .grid > .card rule lays cards out as icon | text; cards without an
     icon (the problem cards and the step cards) would keep an empty icon column. */
  [data-meta^="fp."] .grid > .card:not(:has(.ic)) { display: block; padding: 16px; }
  [data-meta^="fp."] .grid > .card:not(:has(.ic)) h3 { margin-bottom: 6px; }
  .fp-step h3 { font-size: 1.1rem; }
  .fp-steps-2 { grid-template-columns: 1fr; }
}

/* =========================================================
   BLOG (generated by scripts/blog.mjs)
   ========================================================= */
.foot-grid a[hidden] { display: none; }
.post-wrap { max-width: 760px; }
.blog-hero { padding-bottom: 8px; }
.post { padding: 56px 0 24px; }
.post h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); line-height: 1.05; margin-bottom: 14px; }
.post-back { font-size: 0.92rem; margin-bottom: 18px; }
.post-meta { color: var(--muted); font-size: 0.9rem; }
.post-body { margin-top: 32px; font-size: 1.08rem; line-height: 1.75; }
.post-body > * + * { margin-top: 1.1em; }
.post-body h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); line-height: 1.15; margin-top: 2em; }
.post-body h3 { font-size: 1.25rem; margin-top: 1.6em; }
.post-body ul, .post-body ol { padding-left: 1.4em; }
.post-body li + li { margin-top: 0.45em; }
.post-body ul.checklist { list-style: none; padding-left: 0; }
.post-body ul.checklist li { position: relative; padding-left: 1.9em; }
.post-body ul.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 1.05em;
  height: 1.05em;
  border: 2px solid var(--primary);
  border-radius: 4px;
}
.post-body a { text-decoration: underline; text-underline-offset: 2px; }
.post-body strong { color: var(--heading); }
.post-body blockquote {
  border-left: 3px solid var(--primary);
  background: var(--surface-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 14px 18px;
}
.post-body hr { border: 0; height: 1px; background: var(--border); margin: 2em 0; }
.post-cta { margin-top: 48px; padding: 40px 24px; }
.post-cta h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); }
.post-cta p { color: var(--muted); max-width: 56ch; margin: 0 auto 22px; }
.post-list { display: grid; gap: 16px; }
.post-list-h { font-size: clamp(1.5rem, 3.4vw, 2rem); margin-bottom: 18px; }
.post-card h2 { font-size: 1.4rem; line-height: 1.2; margin: 6px 0 8px; }
.post-card h2 a { color: var(--heading); }
.post-more { display: inline-block; margin-top: 10px; font-weight: 600; font-size: 0.95rem; }
.fp-blog:empty { display: none; }
.fp-blog { max-width: 760px; margin: 20px auto 0; text-align: center; }
.fp-blog h3 { font-family: var(--font); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 8px; }
.fp-blog ul { list-style: none; padding: 0; }
.fp-blog li + li { margin-top: 6px; }