/* ==========================================================================
 * marketing.css — the public marketing website (Home, Features, Pricing).
 *
 * Entirely separate from the app's style.css: the app is AdminLTE-based and
 * utilitarian; the marketing site is an editorial, brand-forward experience
 * and shares none of that chrome. Served on the public pages only.
 *
 * WHITE-LABEL: the two brand colours arrive as CSS custom properties set
 * inline in _marketing_header.php from current_agency_branding(), so a
 * reseller pointing their own domain here gets their own palette with no CSS
 * change. Everything below references var(--brand)/var(--ink); nothing
 * hardcodes the default green.
 *
 * Bump ASSET_VERSION in constants.php when editing (cache-busting).
 * ======================================================================== */

:root {
  /* Overridden inline per agency; these are only the ultimate fallback. */
  --brand:        #33A457;
  --ink:          #16342A;

  --brand-tint:   color-mix(in srgb, var(--brand) 12%, #ffffff);
  --brand-soft:   color-mix(in srgb, var(--brand) 8%, #ffffff);
  --ink-2:        #2c3b34;
  --paper:        #ffffff;
  --wash:         #f6f7f5;   /* warm off-white section background */
  --line:         #e7e9e5;
  --muted:        #6b736c;
  --faint:        #9aa29a;

  /* ---- accent palette --------------------------------------------------
   * Deliberately separate from --brand: brand green stays the recognizable
   * anchor (buttons, links, active states) while these five cycle across
   * feature icons, category pills and stat tiles so the site reads as a
   * designed, multi-color product rather than one hue repeated everywhere.
   * Assigned deterministically in PHP (cms_accent_for()/cms_accent_by_index()
   * in inc/blocks.php) — never randomly, so a given category or grid
   * position always gets the same color across renders.
   * ---------------------------------------------------------------------- */
  --acc-1:        #2F6FED; /* blue    */
  --acc-2:        #8B5CF6; /* violet  */
  --acc-3:        #EA9C1D; /* amber   */
  --acc-4:        #EC5E82; /* coral   */
  --acc-5:        #16B0A0; /* teal    */
  --acc-1-tint:   color-mix(in srgb, var(--acc-1) 12%, #ffffff);
  --acc-2-tint:   color-mix(in srgb, var(--acc-2) 12%, #ffffff);
  --acc-3-tint:   color-mix(in srgb, var(--acc-3) 14%, #ffffff);
  --acc-4-tint:   color-mix(in srgb, var(--acc-4) 12%, #ffffff);
  --acc-5-tint:   color-mix(in srgb, var(--acc-5) 12%, #ffffff);

  --maxw:         1160px;
  --radius:       16px;
  --radius-sm:    10px;
  --shadow-sm:    0 1px 2px rgba(20,34,26,.05), 0 1px 1px rgba(20,34,26,.04);
  --shadow-md:    0 12px 30px rgba(20,34,26,.10);
  --shadow-lg:    0 30px 60px rgba(20,34,26,.16);

  --font-body:    'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink-2);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

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

/* ---- type ---------------------------------------------------------- */

h1, h2, h3 { font-family: var(--font-display); color: var(--ink); font-weight: 600; letter-spacing: -.01em; line-height: 1.08; margin: 0; }
h1 { font-size: clamp(38px, 5.4vw, 66px); }
h2 { font-size: clamp(29px, 3.6vw, 44px); }
h3 { font-size: 21px; letter-spacing: -.005em; }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand); margin: 0 0 14px;
}
.eyebrow.on-dark { color: color-mix(in srgb, var(--brand) 70%, #ffffff); }

.lead { font-size: clamp(17px, 1.5vw, 20px); color: var(--muted); }
.section-intro { max-width: 620px; }
.section-intro .lead { margin-top: 14px; }

/* ---- buttons ------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-body); font-weight: 600; font-size: 15.5px;
  padding: 13px 22px; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 6px 18px color-mix(in srgb, var(--brand) 30%, transparent); }
.btn-primary:hover { box-shadow: 0 10px 26px color-mix(in srgb, var(--brand) 40%, transparent); transform: translateY(-1px); color:#fff; }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-ghost.on-dark { color: #fff; border-color: rgba(255,255,255,.28); }
.btn-ghost.on-dark:hover { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.06); }
.btn-lg { padding: 16px 30px; font-size: 16.5px; }
.btn-white { background:#fff; color: var(--ink); }
.btn-white:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* ---- nav ----------------------------------------------------------- */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.nav.scrolled { border-bottom-color: var(--line); box-shadow: 0 4px 20px rgba(20,34,26,.05); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.nav-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 21px; color: var(--ink); }
.nav-brand img { max-height: 34px; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a.link { font-weight: 500; font-size: 15px; color: var(--ink-2); transition: color .15s ease; }
.nav-links a.link:hover { color: var(--brand); }
.nav-links a.link.active { color: var(--brand); }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; margin: 0 -6px 0 4px;
  background: none; border: 0; border-radius: 10px;
  font-size: 20px; color: var(--ink); cursor: pointer;
  transition: background .15s ease;
}
.nav-toggle:hover { background: var(--wash); }
.nav-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* The mobile-menu CTA is a duplicate of .nav-cta's "Start free trial" button,
   shown only inside the collapsed dropdown below 860px — kept out of normal
   flow (and off the tab order) above that width so desktop never sees or
   tabs through a second copy. */
.nav-links-cta { display: none; }

@media (max-width: 860px) {
  /* Below this width the full inline nav-links row *and* the nav-cta button
     pair together no longer fit next to the toggle without overflowing the
     header horizontally (the original bug) — both collapse into the
     dropdown menu instead, leaving only the logo + toggle in the bar. */
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .nav.open .nav-links {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; top: 72px; left: 0; right: 0; z-index: 60;
    background: var(--paper); box-shadow: var(--shadow-md);
    border-bottom: 1px solid var(--line);
    padding: 10px 24px 20px;
    max-height: calc(100vh - 72px); overflow-y: auto;
  }
  .nav.open .nav-links a.link {
    display: flex; align-items: center;
    padding: 12px 2px; min-height: 44px; width: 100%;
    border-bottom: 1px solid var(--line);
  }
  .nav.open .nav-links a.link:last-of-type { border-bottom: 0; }
  .nav.open .nav-links-cta {
    display: flex; justify-content: center;
    width: 100%; margin-top: 12px; padding: 14px 22px; font-size: 16px;
  }
}

/* ---- hero ---------------------------------------------------------- */

.hero { padding: 74px 0 40px; position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 55% at 88% -8%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 70%),
    radial-gradient(50% 50% at -6% 8%, color-mix(in srgb, var(--ink) 6%, transparent), transparent 70%);
}
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 54px; align-items: center; }
.hero h1 { margin-bottom: 20px; }
.hero .lead { max-width: 500px; }
.hero-cta { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.hero-note { margin-top: 16px; font-size: 13.5px; color: var(--faint); display: flex; align-items: center; gap: 8px; }
.hero-note i { color: var(--brand); }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero { padding-top: 50px; }
  .hero-visual { order: 2; }
}

/* ---- CSS "product screenshot" (browser-framed app vignette) --------
 * Doubles as the hero block's no-image fallback (inc/blocks.php's
 * cms_hero_fallback_mock(), rendered inside .cms-hero-media whenever a hero
 * has no CMS-supplied `image`) — a static calendar-UI mockup in place of the
 * old flat conic-gradient orb, which had no relationship to the product.
 * Event-dot colors below cycle through the redesign's 5-color accent
 * palette (--acc-1..5) rather than the old single-green/hardcoded-hex pair,
 * so the mockup reads as part of the same "not just green" system as the
 * feature cards and category pills.
 */

.mock {
  border-radius: 14px; background: #fff; border: 1px solid var(--line);
  box-shadow: var(--shadow-lg); overflow: hidden; transform: rotate(.6deg);
}
.mock:hover { transform: rotate(0); transition: transform .4s ease; }
.mock-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: #fbfbfa; border-bottom: 1px solid var(--line); }
.mock-bar .dot { width: 10px; height: 10px; border-radius: 50%; background: #e2e4e0; }
.mock-bar .addr { margin-left: 10px; font-size: 11px; color: var(--faint); background:#fff; border:1px solid var(--line); border-radius: 6px; padding: 3px 10px; }
.mock-body { display: grid; grid-template-columns: 54px 1fr; min-height: 320px; }
.mock-side { background: var(--ink); padding: 14px 8px; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.mock-side .s { width: 24px; height: 24px; border-radius: 7px; background: rgba(255,255,255,.1); }
.mock-side .s.on { background: var(--brand); }
.mock-main { padding: 16px; }
.mock-h { display:flex; justify-content: space-between; align-items:center; margin-bottom: 14px; }
.mock-h .t { font-family: var(--font-display); font-weight:600; font-size:15px; color: var(--ink); }
.mock-h .pill { font-size: 10px; font-weight:600; color:#fff; background: var(--brand); border-radius: 999px; padding: 4px 10px; }
.mock-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.mock-cal .d { aspect-ratio: 1 / .82; border-radius: 6px; background: var(--wash); border: 1px solid var(--line); position: relative; }
.mock-cal .d .ev { position:absolute; left:4px; right:4px; bottom:4px; height:6px; border-radius: 3px; }
.mock-cal .d .ev.a { background: var(--acc-1); }
.mock-cal .d .ev.b { background: var(--acc-3); }
.mock-cal .d .ev.c { background: var(--acc-5); }
.mock-cal .d .ev.d { background: var(--acc-2); }
.mock-cal .d .ev.e { background: var(--acc-4); }
.mock-cal .d .ev2 { position:absolute; left:4px; right:4px; bottom:13px; height:6px; border-radius:3px; background: color-mix(in srgb, var(--acc-2) 30%, #fff); }

@media (max-width: 480px) { .mock-body { grid-template-columns: 40px 1fr; } }

/* ---- trust / platform strip --------------------------------------- */

.strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--wash); }
.strip-inner { display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap; padding: 22px 0; }
.strip .label { font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.strip .plat { display: flex; align-items: center; gap: 9px; color: var(--ink-2); font-weight: 600; font-size: 15px; opacity: .82; }
.strip .plat i { font-size: 21px; }
.strip .plat.soon { opacity: .45; }
.strip .plat.soon .badge-soon { font-size: 9px; font-weight:700; letter-spacing:.06em; background: var(--line); color: var(--muted); padding: 2px 6px; border-radius: 5px; text-transform: uppercase; }

/* ---- generic section ---------------------------------------------- */

.section { padding: 84px 0; }
.section.wash { background: var(--wash); }
.section.ink { background: var(--ink); color: #d9e2dc; }
.section.ink h2, .section.ink h3 { color: #fff; }
.section-head { text-align: center; max-width: 660px; margin: 0 auto 52px; }
.section-head.left { text-align: left; margin-left: 0; }
.section-head .lead { margin-top: 14px; }

/* ---- feature vignettes (alternating) ------------------------------ */

.feat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-bottom: 96px; }
.feat-row:last-child { margin-bottom: 0; }
.feat-row.flip .feat-text { order: 2; }
.feat-text h2 { margin-bottom: 16px; }
.feat-list { list-style: none; padding: 0; margin: 22px 0 0; }
.feat-list li { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; font-size: 15.5px; }
.feat-list li i { color: var(--brand); margin-top: 3px; font-size: 15px; }
.feat-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-weight: 600; color: var(--brand); }
.feat-link:hover { gap: 12px; transition: gap .15s ease; }

.vig {
  border-radius: var(--radius); border: 1px solid var(--line); background: #fff;
  box-shadow: var(--shadow-md); padding: 22px; position: relative; overflow: hidden;
}
.vig::after { content:""; position:absolute; inset:0; pointer-events:none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); border-radius: var(--radius); }
.vig-title { display:flex; align-items:center; justify-content: space-between; margin-bottom: 16px; }
.vig-title .t { font-weight: 700; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }

@media (max-width: 860px) {
  .feat-row { grid-template-columns: 1fr; gap: 28px; margin-bottom: 60px; }
  .feat-row.flip .feat-text { order: 0; }
}

/* small UI atoms used inside vignettes */
.ui-card { border:1px solid var(--line); border-radius: 10px; padding: 12px 14px; background:#fff; margin-bottom: 10px; }
.ui-row { display:flex; align-items:center; justify-content: space-between; gap: 10px; }
.ui-pill { font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px; }
.ui-pill.g { background: color-mix(in srgb, var(--brand) 15%, #fff); color: color-mix(in srgb, var(--brand) 75%, #000); }
.ui-pill.y { background:#fef3c7; color:#b45309; }
.ui-pill.grey { background:#eef1ee; color: var(--muted); }
.ui-bar { height:8px; border-radius:999px; background: var(--wash); overflow:hidden; }
.ui-bar > span { display:block; height:100%; background: var(--brand); }
.ui-muted { color: var(--muted); font-size: 12.5px; }
.ui-strong { font-weight: 700; color: var(--ink); }
.ui-chat { border-radius:10px; padding:9px 12px; font-size:12.5px; margin-bottom:8px; max-width: 84%; }
.ui-chat.them { background: var(--wash); }
.ui-chat.us { background: color-mix(in srgb, var(--brand) 14%, #fff); margin-left:auto; }

/* ---- stat band ---------------------------------------------------- */

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat .n { font-family: var(--font-display); font-weight: 600; font-size: 44px; color: #fff; line-height: 1; }
.stat .k { margin-top: 8px; font-size: 14px; color: color-mix(in srgb, #fff 65%, transparent); }
@media (max-width: 700px) { .stats { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; } }

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

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: step; }
.step { padding-top: 20px; border-top: 2px solid var(--line); position: relative; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--brand);
  position: absolute; top: -12px; background: var(--paper); padding-right: 10px;
}
.section.wash .step::before { background: var(--wash); }
.step h3 { font-size: 18px; margin-bottom: 8px; }
.step p { font-size: 14.5px; color: var(--muted); margin: 0; }
@media (max-width: 780px) { .steps { grid-template-columns: 1fr 1fr; gap: 30px 24px; } }

/* ---- small feature grid (secondary features) ---------------------- */

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.mini { padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.mini:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.mini .ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand); font-size: 20px; margin-bottom: 16px; }
.mini h3 { font-size: 18px; margin-bottom: 8px; }
.mini p { font-size: 14.5px; color: var(--muted); margin: 0; }
@media (max-width: 820px) { .grid-3 { grid-template-columns: 1fr; } }

/* ---- pricing ------------------------------------------------------ */

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.plan { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 30px; display: flex; flex-direction: column; }
.plan.pop { border: 2px solid var(--brand); box-shadow: var(--shadow-md); position: relative; }
.plan .tag { position:absolute; top:-13px; left: 30px; background: var(--brand); color:#fff; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:5px 12px; border-radius:999px; }
.plan .pname { font-family: var(--font-display); font-weight:600; font-size: 23px; color: var(--ink); }
.plan .pprice { margin: 14px 0 4px; font-size: 40px; font-weight: 800; letter-spacing:-.02em; color: var(--ink); font-family: var(--font-body); }
.plan .pprice small { font-size: 15px; font-weight: 500; color: var(--faint); }
.plan .pyear { font-size: 13px; color: var(--muted); }
.plan ul { list-style: none; padding: 0; margin: 22px 0; flex: 1; }
.plan li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; font-size: 14.5px; border-bottom: 1px dashed var(--line); }
.plan li:last-child { border-bottom: 0; }
.plan li i { color: var(--brand); margin-top: 3px; }
.plan li.off { color: var(--faint); }
.plan li.off i { color: var(--faint); }
.plan li strong { color: var(--ink); }
.btn-block { display: flex; justify-content: center; width: 100%; }
.plans-note { text-align: center; margin-top: 22px; font-size: 13.5px; color: var(--faint); }
.plans-note i { color: var(--brand); }
@media (max-width: 860px) { .plans { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } }

/* ---- full comparison table ---------------------------------------- */

.cmp-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.cmp { width: 100%; border-collapse: collapse; min-width: 620px; font-size: 14.5px; }
.cmp thead th { position: sticky; top: 0; background: #fff; }
.cmp th, .cmp td { padding: 14px 18px; text-align: center; border-bottom: 1px solid var(--line); }
.cmp th.cmp-feat, .cmp td:first-child { text-align: left; }
.cmp thead th { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--ink); border-bottom: 2px solid var(--line); }
.cmp thead th.is-pop { color: var(--brand); }
.cmp td:first-child { color: var(--ink-2); font-weight: 500; }
.cmp tr.grp td { background: var(--wash); font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 10px 18px; }
.cmp .yes { color: var(--brand); font-size: 15px; }
.cmp .no { color: var(--line); font-size: 14px; }
.cmp tbody tr:hover td:not([colspan]) { background: color-mix(in srgb, var(--brand) 4%, #fff); }

/* ---- FAQ (native accordion) --------------------------------------- */

.faq { max-width: 760px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); padding: 6px 0; }
.faq summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; font-weight: 600; font-size: 17px; color: var(--ink); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "\f067"; font-family: FontAwesome; position: absolute; right: 4px; top: 18px; color: var(--brand); font-size: 14px; transition: transform .2s ease; }
.faq details[open] summary::after { content: "\f068"; }
.faq p { margin: 0 0 20px; color: var(--muted); font-size: 15px; }

/* ---- CTA band ----------------------------------------------------- */

.cta {
  border-radius: 26px; padding: 64px 40px; text-align: center; position: relative; overflow: hidden;
  background: var(--ink); color: #fff;
}
.cta::before { content:""; position:absolute; inset:0; z-index:0; background: radial-gradient(50% 120% at 50% -20%, color-mix(in srgb, var(--brand) 40%, transparent), transparent 60%); }
.cta > * { position: relative; z-index: 1; }
.cta h2 { color:#fff; margin-bottom: 14px; }
.cta .lead { color: color-mix(in srgb,#fff 78%, transparent); max-width: 560px; margin: 0 auto 28px; }

/* ---- footer ------------------------------------------------------- */

.footer { background: var(--ink); color: color-mix(in srgb,#fff 60%, transparent); padding: 60px 0 34px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.footer h4 { font-family: var(--font-body); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb,#fff 45%, transparent); margin: 0 0 16px; }
.footer a { display: block; color: color-mix(in srgb,#fff 72%, transparent); padding: 6px 0; font-size: 14.5px; }
.footer a:hover { color: #fff; }
.footer .fbrand { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: #fff; margin-bottom: 12px; }
.footer .fabout { font-size: 14px; max-width: 300px; color: color-mix(in srgb,#fff 60%, transparent); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 46px; padding-top: 22px; display:flex; justify-content: space-between; gap:14px; flex-wrap: wrap; font-size: 13px; color: color-mix(in srgb,#fff 45%, transparent); }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; } }

/* ---- legal / long-form pages -------------------------------------- */

.legal-hero { padding: 66px 0 26px; border-bottom: 1px solid var(--line); background: var(--wash); }
.legal-hero .wrap { max-width: 820px; }
.legal-hero h1 { font-size: clamp(30px, 4vw, 46px); }
.legal-updated { color: var(--muted); font-size: 14px; margin-top: 12px; }
.legal-wrap { max-width: 820px; margin: 0 auto; padding: 44px 24px 88px; }
.legal-wrap h2 { font-size: 23px; margin: 42px 0 12px; }
.legal-wrap h2:first-of-type { margin-top: 0; }
.legal-wrap h3 { font-size: 17px; margin: 26px 0 8px; }
.legal-wrap p, .legal-wrap li { color: var(--ink-2); font-size: 15.5px; line-height: 1.75; }
.legal-wrap p { margin: 12px 0; }
.legal-wrap ul { padding-left: 22px; margin: 12px 0; }
.legal-wrap li { margin: 7px 0; }
.legal-wrap a { color: var(--brand); text-decoration: underline; }
.legal-wrap strong { color: var(--ink); }
.legal-toc { background: var(--wash); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px 22px; margin: 8px 0 30px; }
.legal-toc h4 { font-family: var(--font-body); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.legal-toc a { display: block; padding: 4px 0; color: var(--ink-2); text-decoration: none; font-size: 14.5px; }
.legal-toc a:hover { color: var(--brand); }
.legal-note { background: color-mix(in srgb, var(--brand) 6%, #fff); border: 1px solid color-mix(in srgb, var(--brand) 25%, var(--line)); border-radius: var(--radius-sm); padding: 14px 18px; font-size: 14px; margin: 18px 0; }
.legal-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14.5px; }
.legal-table th, .legal-table td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.legal-table th { background: var(--wash); font-weight: 600; color: var(--ink); }
.footer-legal-links a { color: color-mix(in srgb,#fff 60%, transparent); margin-left: 14px; }
.footer-legal-links a:hover { color: #fff; }

/* ---- utilities ---------------------------------------------------- */
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.pad-tight { padding: 60px 0; }

/* ==========================================================================
 * CMS BLOCK ENGINE — component library for inc/blocks.php's cms_block_*()
 * renderers (home, features, pricing hero/FAQ, blog, case studies). Reuses
 * the type scale, spacing and shadow tokens above; introduces the 5-color
 * accent cycle (--acc-1..5) for feature icons, category pills and metric
 * tiles specifically, per the "not just green" redesign brief — brand green
 * stays the CTA/link anchor, everything else gets real color variety.
 * ======================================================================== */

.cms-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.cms-wrap-narrow { max-width: 760px; }
.cms-section { padding: 84px 0; }
.cms-section-head { max-width: 660px; margin: 0 auto 44px; text-align: center; }
.cms-section-head .cms-section-sub { margin-top: 12px; }
.cms-h2 { font-family: var(--font-display); color: var(--ink); font-weight: 600; letter-spacing: -.01em; font-size: clamp(28px, 3.4vw, 40px); margin: 0; }
.cms-h2.center { text-align: center; }
.cms-section-sub { font-size: clamp(16px, 1.4vw, 18px); color: var(--muted); margin: 12px 0 0; }
.cms-section-sub.center { text-align: center; }
.cms-eyebrow { font-family: var(--font-body); font-weight: 600; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); margin: 0 0 14px; }

.cms-btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-body); font-weight: 600; font-size: 15.5px; padding: 13px 22px; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease; white-space: nowrap; }
.cms-btn:active { transform: translateY(1px); }
.cms-btn-primary { background: var(--brand); color: #fff; box-shadow: 0 6px 18px color-mix(in srgb, var(--brand) 30%, transparent); }
.cms-btn-primary:hover { box-shadow: 0 10px 26px color-mix(in srgb, var(--brand) 40%, transparent); transform: translateY(-1px); color: #fff; }
.cms-btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.cms-btn-ghost:hover { border-color: var(--ink); }
.cms-btn-white { background: #fff; color: var(--ink); }
.cms-btn-white:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.cms-btn-lg { padding: 16px 30px; font-size: 16.5px; }
.cms-btn-block { display: flex; justify-content: center; width: 100%; }

/* ---- hero (used by every generic CMS page, and pricing's own hero) --- */
.cms-hero { padding: 74px 0 46px; position: relative; overflow: hidden; }
.cms-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(55% 60% at 90% -10%, color-mix(in srgb, var(--acc-1) 16%, transparent), transparent 70%),
    radial-gradient(45% 50% at 8% 0%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 70%),
    radial-gradient(40% 45% at 60% 110%, color-mix(in srgb, var(--acc-2) 10%, transparent), transparent 70%);
}
.cms-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 54px; align-items: center; }
.cms-hero h1 { font-family: var(--font-display); color: var(--ink); font-weight: 600; letter-spacing: -.01em; line-height: 1.08; font-size: clamp(34px, 4.6vw, 58px); margin: 0 0 18px; }
.cms-hero-sub { font-size: clamp(16px, 1.4vw, 19px); color: var(--muted); max-width: 520px; margin: 0; }
.cms-hero-ctas { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.cms-hero-media img { border-radius: var(--radius); box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
/* No-image fallback (a static calendar-UI mockup, not a real screenshot) is
 * the .mock component below — it supplies its own border/shadow/tilt, so no
 * extra sizing rule is needed here. See cms_hero_fallback_mock() in
 * inc/blocks.php. */
@media (max-width: 900px) { .cms-hero-grid { grid-template-columns: 1fr; gap: 32px; } .cms-hero-media { order: 2; } }

/* ---- feature grid — the accent cycle lives here ----------------------- */
.cms-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cms-feature-card { padding: 28px 26px; border: 1px solid var(--line); border-top: 3px solid var(--line); border-radius: var(--radius); background: #fff; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.cms-feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.cms-feature-icon { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; font-size: 22px; margin-bottom: 16px; background: var(--brand-tint); }
.cms-feature-card h3 { font-family: var(--font-display); font-size: 18.5px; color: var(--ink); margin: 0 0 8px; font-weight: 600; }
.cms-feature-card p { font-size: 14.5px; color: var(--muted); margin: 0; line-height: 1.65; }
.cms-feature-card.acc-1 { border-top-color: var(--acc-1); } .cms-feature-card.acc-1 .cms-feature-icon { background: var(--acc-1-tint); }
.cms-feature-card.acc-2 { border-top-color: var(--acc-2); } .cms-feature-card.acc-2 .cms-feature-icon { background: var(--acc-2-tint); }
.cms-feature-card.acc-3 { border-top-color: var(--acc-3); } .cms-feature-card.acc-3 .cms-feature-icon { background: var(--acc-3-tint); }
.cms-feature-card.acc-4 { border-top-color: var(--acc-4); } .cms-feature-card.acc-4 .cms-feature-icon { background: var(--acc-4-tint); }
.cms-feature-card.acc-5 { border-top-color: var(--acc-5); } .cms-feature-card.acc-5 .cms-feature-icon { background: var(--acc-5-tint); }
@media (max-width: 900px) { .cms-feature-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .cms-feature-grid { grid-template-columns: 1fr; } }

/* ---- testimonial -------------------------------------------------------*/
.cms-testimonial-section { background: var(--wash); }
.cms-testimonial { margin: 0; text-align: center; position: relative; }
.cms-quote-mark { font-family: var(--font-display); font-size: 90px; color: var(--brand); opacity: .18; line-height: .5; display: block; margin-bottom: -6px; }
.cms-quote { font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 28px); color: var(--ink); font-weight: 500; line-height: 1.45; margin: 0 auto 24px; max-width: 720px; }
.cms-testimonial-footer { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 14.5px; color: var(--muted); }
.cms-testimonial-footer img, .cms-avatar-fallback { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.cms-avatar-fallback { display: grid; place-items: center; background: var(--brand); color: #fff; font-family: var(--font-display); font-weight: 600; }
.cms-testimonial-footer strong { color: var(--ink); }

/* ---- pricing (generic block; pricing.php's bespoke table reuses .plans/.cmp above) */
.cms-pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; }
.cms-pricing-card { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 28px; }
.cms-pricing-card h3 { font-family: var(--font-display); font-size: 21px; color: var(--ink); margin: 0; }
.cms-price { margin: 12px 0 2px; }
.cms-price-amount { font-size: 34px; font-weight: 800; color: var(--ink); }
.cms-price-period { font-size: 14px; color: var(--faint); margin-left: 4px; }
.cms-price-yearly { font-size: 13px; color: var(--muted); margin: 0 0 18px; }
.cms-pricing-features { list-style: none; padding: 0; margin: 0 0 20px; }
.cms-pricing-features li { padding: 6px 0; font-size: 14px; border-bottom: 1px dashed var(--line); color: var(--ink-2); }
.cms-pricing-features li:last-child { border-bottom: 0; }

/* ---- FAQ ---------------------------------------------------------------*/
.cms-faq-list { max-width: 760px; margin: 28px auto 0; }
.cms-faq-item { border-bottom: 1px solid var(--line); padding: 6px 0; }
.cms-faq-item summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; font-weight: 600; font-size: 16.5px; color: var(--ink); position: relative; }
.cms-faq-item summary::-webkit-details-marker { display: none; }
.cms-faq-item summary::after { content: "\f067"; font-family: FontAwesome; position: absolute; right: 4px; top: 18px; color: var(--brand); font-size: 14px; }
.cms-faq-item[open] summary::after { content: "\f068"; }
.cms-faq-answer { margin: 0 0 20px; color: var(--muted); font-size: 15px; line-height: 1.7; }

/* ---- CTA band ------------------------------------------------------- */
.cms-cta { border-radius: 26px; padding: 64px 40px; text-align: center; position: relative; overflow: hidden; background: var(--ink); color: #fff; }
.cms-cta::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(55% 130% at 15% -20%, color-mix(in srgb, var(--acc-1) 35%, transparent), transparent 60%), radial-gradient(50% 120% at 85% 120%, color-mix(in srgb, var(--brand) 45%, transparent), transparent 60%); }
.cms-cta > * { position: relative; z-index: 1; }
.cms-cta h2 { font-family: var(--font-display); color: #fff; font-size: clamp(26px, 3vw, 36px); margin: 0 0 14px; font-weight: 600; }
.cms-cta p { color: color-mix(in srgb, #fff 78%, transparent); max-width: 560px; margin: 0 auto 28px; font-size: 16px; }

/* ---- richtext / prose (legal pages, blog posts, case studies) --------- */
.cms-richtext { padding-top: 44px; }
.cms-prose h2 { font-size: 23px; margin: 42px 0 12px; color: var(--ink); font-family: var(--font-display); }
.cms-prose h2:first-child { margin-top: 0; }
.cms-prose h3 { font-size: 17px; margin: 26px 0 8px; color: var(--ink); }
.cms-prose p, .cms-prose li { color: var(--ink-2); font-size: 15.5px; line-height: 1.75; }
.cms-prose p { margin: 12px 0; }
.cms-prose ul, .cms-prose ol { padding-left: 22px; margin: 12px 0; }
.cms-prose li { margin: 7px 0; }
.cms-prose a { color: var(--brand); text-decoration: underline; }
.cms-prose strong { color: var(--ink); }
.cms-prose table.legal-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14.5px; }
.cms-prose table.legal-table th, .cms-prose table.legal-table td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.cms-prose table.legal-table th { background: var(--wash); font-weight: 600; color: var(--ink); }

/* ---- lead_form -> informational CTA card (see inc/blocks.php docblock) */
.cms-lead-card { text-align: center; padding: 48px 40px; border-radius: 26px; background: linear-gradient(155deg, var(--wash), color-mix(in srgb, var(--brand) 6%, var(--wash))); border: 1px solid var(--line); }
.cms-lead-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.cms-alert { padding: 14px 18px; border-radius: var(--radius-sm); font-size: 14.5px; margin: 0 0 18px; }
.cms-alert-success { background: color-mix(in srgb, var(--brand) 12%, #fff); color: color-mix(in srgb, var(--brand) 70%, #000); }
.cms-alert-error { background: #fdecec; color: #b3261e; }

/* ---- blog / case-study cards -------------------------------------------
 * Each card takes an accent class (cms_accent_for()) for its media panel
 * and category pill — this is the site's substitute for photography until
 * real featured images are uploaded through the CMS: a colorful icon panel
 * per category rather than a flat gray placeholder. */
.cms-cat-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.cms-cat-pill { font-size: 13.5px; font-weight: 600; padding: 8px 16px; border-radius: 999px; background: var(--wash); color: var(--muted); border: 1px solid var(--line); transition: transform .15s ease; }
.cms-cat-pill:hover { transform: translateY(-1px); }
.cms-cat-pill.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.cms-cat-pill-inline { font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }

.cms-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.cms-blog-card { display: block; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; transition: transform .2s ease, box-shadow .2s ease; }
.cms-blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.cms-blog-card-media { height: 150px; display: grid; place-items: center; font-size: 40px; color: #fff; background: linear-gradient(135deg, var(--brand), var(--acc-2)); }
.cms-blog-card-media img { width: 100%; height: 100%; object-fit: cover; }
.cms-blog-card-body { padding: 22px 22px 24px; }
.cms-blog-card-body h3 { font-family: var(--font-display); font-size: 18px; color: var(--ink); margin: 8px 0 8px; line-height: 1.35; }
.cms-blog-card-body p { font-size: 14px; color: var(--muted); margin: 0 0 14px; line-height: 1.6; }
.cms-blog-cat { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--brand); }
.cms-blog-date { font-size: 12.5px; color: var(--faint); }

.cms-blog-card.acc-1 .cms-blog-card-media, .cms-case-card.acc-1 .cms-blog-card-media { background: linear-gradient(135deg, var(--acc-1), var(--brand)); } .cms-blog-card.acc-1 .cms-blog-cat { color: var(--acc-1); }
.cms-blog-card.acc-2 .cms-blog-card-media, .cms-case-card.acc-2 .cms-blog-card-media { background: linear-gradient(135deg, var(--acc-2), var(--acc-4)); } .cms-blog-card.acc-2 .cms-blog-cat { color: var(--acc-2); }
.cms-blog-card.acc-3 .cms-blog-card-media, .cms-case-card.acc-3 .cms-blog-card-media { background: linear-gradient(135deg, var(--acc-3), var(--acc-4)); } .cms-blog-card.acc-3 .cms-blog-cat { color: var(--acc-3); }
.cms-blog-card.acc-4 .cms-blog-card-media, .cms-case-card.acc-4 .cms-blog-card-media { background: linear-gradient(135deg, var(--acc-4), var(--acc-2)); } .cms-blog-card.acc-4 .cms-blog-cat { color: var(--acc-4); }
.cms-blog-card.acc-5 .cms-blog-card-media, .cms-case-card.acc-5 .cms-blog-card-media { background: linear-gradient(135deg, var(--acc-5), var(--brand)); } .cms-blog-card.acc-5 .cms-blog-cat { color: var(--acc-5); }
.cms-cat-pill.acc-1 { background: var(--acc-1-tint); color: color-mix(in srgb, var(--acc-1) 80%, #000); border-color: transparent; } .cms-cat-pill.acc-1.is-active { background: var(--acc-1); color: #fff; }
.cms-cat-pill.acc-2 { background: var(--acc-2-tint); color: color-mix(in srgb, var(--acc-2) 80%, #000); border-color: transparent; } .cms-cat-pill.acc-2.is-active { background: var(--acc-2); color: #fff; }
.cms-cat-pill.acc-3 { background: var(--acc-3-tint); color: color-mix(in srgb, var(--acc-3) 80%, #000); border-color: transparent; } .cms-cat-pill.acc-3.is-active { background: var(--acc-3); color: #fff; }
.cms-cat-pill.acc-4 { background: var(--acc-4-tint); color: color-mix(in srgb, var(--acc-4) 80%, #000); border-color: transparent; } .cms-cat-pill.acc-4.is-active { background: var(--acc-4); color: #fff; }
.cms-cat-pill.acc-5 { background: var(--acc-5-tint); color: color-mix(in srgb, var(--acc-5) 80%, #000); border-color: transparent; } .cms-cat-pill.acc-5.is-active { background: var(--acc-5); color: #fff; }
.cms-cat-pill-inline.acc-1 { background: var(--acc-1-tint); color: var(--acc-1); } .cms-cat-pill-inline.acc-2 { background: var(--acc-2-tint); color: var(--acc-2); }
.cms-cat-pill-inline.acc-3 { background: var(--acc-3-tint); color: color-mix(in srgb, var(--acc-3) 70%, #000); } .cms-cat-pill-inline.acc-4 { background: var(--acc-4-tint); color: var(--acc-4); }
.cms-cat-pill-inline.acc-5 { background: var(--acc-5-tint); color: var(--acc-5); }

@media (max-width: 900px) { .cms-blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .cms-blog-grid { grid-template-columns: 1fr; } }

.cms-pagination { display: flex; gap: 8px; justify-content: center; margin-top: 48px; }
.cms-page-link { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); font-weight: 600; font-size: 14px; color: var(--ink-2); }
.cms-page-link:hover { border-color: var(--brand); }
.cms-page-active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---- blog detail --------------------------------------------------- */
.cms-blog-post { padding: 56px 0 20px; }
.cms-blog-post h1 { font-family: var(--font-display); color: var(--ink); font-size: clamp(28px, 4vw, 44px); margin: 10px 0 16px; line-height: 1.15; }
.cms-blog-post-image { margin: 28px 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); }
.cms-blog-post-image img { width: 100%; display: block; }
.cms-blog-post-image-blank { height: 260px; display: grid; place-items: center; font-size: 56px; color: #fff; background: linear-gradient(135deg, var(--brand), var(--acc-2)); }
.cms-blog-post-image-blank.acc-1 { background: linear-gradient(135deg, var(--acc-1), var(--brand)); }
.cms-blog-post-image-blank.acc-2 { background: linear-gradient(135deg, var(--acc-2), var(--acc-4)); }
.cms-blog-post-image-blank.acc-3 { background: linear-gradient(135deg, var(--acc-3), var(--acc-4)); }
.cms-blog-post-image-blank.acc-4 { background: linear-gradient(135deg, var(--acc-4), var(--acc-2)); }
.cms-blog-post-image-blank.acc-5 { background: linear-gradient(135deg, var(--acc-5), var(--brand)); }
.cms-blog-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); }
.cms-tag { font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px; background: var(--wash); color: var(--muted); }

/* ---- case study ------------------------------------------------------ */
.cms-case-study { padding: 56px 0 20px; }
.cms-case-study h1 { font-family: var(--font-display); color: var(--ink); font-size: clamp(28px, 4vw, 44px); margin: 10px 0 16px; }
.cms-case-logo { max-height: 56px; margin: 8px 0 28px; }
.cms-metrics-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; margin: 32px 0; }
.cms-metric-tile { border-radius: var(--radius-sm); padding: 20px 16px; text-align: center; background: var(--wash); border-top: 3px solid var(--brand); }
.cms-metric-value { font-family: var(--font-display); font-size: 28px; font-weight: 600; color: var(--ink); }
.cms-metric-label { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.cms-metric-tile.acc-1 { border-top-color: var(--acc-1); } .cms-metric-tile.acc-2 { border-top-color: var(--acc-2); }
.cms-metric-tile.acc-3 { border-top-color: var(--acc-3); } .cms-metric-tile.acc-4 { border-top-color: var(--acc-4); }
.cms-metric-tile.acc-5 { border-top-color: var(--acc-5); }
.cms-callout { display: flex; align-items: flex-start; gap: 10px; background: #fff8e6; border: 1px solid #f0d99a; color: #7a5a00; border-radius: var(--radius-sm); padding: 14px 18px; font-size: 14px; margin: 0 0 28px; }
.cms-callout i { margin-top: 2px; }