/* ═══════════════════════════════════════════════════════════════════════════
   SECTION LIBRARY
   Reusable page sections built entirely on the tokens defined in style.css:
   the forest ramp, the spacing scale, the radius ramp, the type scale and the
   motion easings. Nothing here hardcodes a colour or a magic number.

   Everything is namespaced .sx-* so it cannot collide with existing page
   styles. Sections are dark-ground by default; add a ground modifier to vary
   the rhythm down a page:

     .sx--deep     drop to the deepest forest
     .sx--raised   lift one step
     .sx--light    invert to warm cream with dark ink

   Every child carrying data-reveal is picked up by initScrollReveal() in
   main.js and staggered automatically; data-reveal="none" opts out.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shell ───────────────────────────────────────────────────────────────── */
.sx {
  position: relative;
  z-index: 2;
  padding-block: var(--section-y);
  padding-inline: var(--gutter);
  background: var(--forest-deep);
  color: var(--text);
}
/* A near-black band on a light-green page: its type stays bone (15.97:1),
   otherwise it inherits the page's near-black and disappears. */
.sx--deep   { background: var(--forest-deepest); color: var(--ink); --green-text: var(--deep);
              --sys-accent-soft: var(--deep); }
.sx--deep .sx__lede,
.sx--deep .sx-feature__body,
.sx--deep .sx-faq__answer { color: rgba(38, 80, 60, 0.82); }
.sx--raised { background: var(--forest); }
.sx--light  { background: var(--cream); color: var(--ink); }
.sx--light .sx__lede { color: rgba(71, 156, 115, 0.66);
 color: color-mix(in srgb, var(--ink) 66%, transparent); }
.sx--light .sx__eyebrow { color: var(--orange-deep); }
.sx--light .sx__eyebrow::before { background: var(--burnt-orange); }
/* The warm bands are light: their eyebrow takes the deep green (12.36:1). */
.sx--deep .sx__eyebrow, .sx--deep .hx__eyebrow { color: var(--ink); }

.sx__inner { width: 100%; max-width: 1440px; margin-inline: auto; }

/* Section header: eyebrow / title / lede */
.sx__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 860px;
  margin-bottom: var(--space-9);
}
.sx__head--center { margin-inline: auto; text-align: center; align-items: center; }
.sx__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--white);
  text-transform: uppercase;
}
.sx__eyebrow::before {
  content: '';
  width: 5px; height: 5px;
  background: currentColor;
  flex: none;
}
.sx__lede { color: var(--text-muted); max-width: var(--measure); }
.sx__head--center .sx__lede { margin-inline: auto; }

/* Shared card surface */
/* Open column beneath a dotted rule — the site's editorial idiom. No box, no
   fill, no radius, no hover lift: content containers here are square and
   separated by rules, matching .dotted-line and the capability sections. */
.sx-card {
  position: relative;
  padding: var(--space-6) 0 var(--space-7);
}

/* ── 1. Stats strip ──────────────────────────────────────────────────────── */
.sx-stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-9) var(--space-8);
}
.sx-stat { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-5); }
.sx-stat__value { color: var(--green-strong); font-variant-numeric: tabular-nums; font-weight: 700; }
.sx-stat__value em { font-style: normal; color: var(--white); }
.sx-stat__label { color: var(--text-muted); text-transform: uppercase; }

/* ── 2. Feature grid ─────────────────────────────────────────────────────── */
.sx-features__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-8) var(--space-7);
}
.sx-feature__icon {
  width: 46px; height: 46px;
  display: grid; place-content: center;
  border-radius: 0;
  background: rgba(71, 156, 115, 0.16);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--green-strong);
  margin-bottom: var(--space-5);
}
.sx-feature__icon svg { width: 21px; height: 21px; display: block; }
.sx-feature__title { margin-bottom: var(--space-3); }
.sx-feature__body { color: var(--text-muted); }
.sx--light .sx-feature__body { color: rgba(71, 156, 115, 0.7);
 color: color-mix(in srgb, var(--ink) 70%, transparent); }

/* ── 3. Process steps ────────────────────────────────────────────────────── */
.sx-steps__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-7); list-style: none; padding: 0; margin: 0; counter-reset: sx-step; }
.sx-step { position: relative; counter-increment: sx-step; padding-top: var(--space-7); }
.sx-step::before {
  content: counter(sx-step, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  color: var(--white);
  font-family: "Suisse Int'l Mono", monospace;
  font-size: var(--type-mono-md);
  letter-spacing: var(--track-mono);
}
/* Connecting hairline between steps, desktop only */
.sx-step::after {
  content: ''; position: absolute; top: 8px; left: 46px; right: calc(var(--space-7) * -1);
  height: 1px; background: var(--line-2);
}
.sx-step:last-child::after { display: none; }
@media (max-width: 900px) { .sx-step::after { display: none; } }
.sx-step__title { margin-bottom: var(--space-3); }
.sx-step__body { color: var(--text-muted); }

/* ── 4. Pricing ──────────────────────────────────────────────────────────── */
.sx-pricing__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: var(--space-9) var(--space-8); align-items: start; }
.sx-plan { display: flex; flex-direction: column; gap: var(--space-5); }
.sx-plan__flag { color: var(--deep); text-transform: uppercase; }
.sx-plan__name { color: rgba(246, 245, 243, 0.7);
 color: color-mix(in srgb, var(--text) 70%, transparent); text-transform: uppercase; }
.sx-plan__price { display: flex; align-items: baseline; gap: var(--space-2); }
.sx-plan__price span { color: var(--text-muted); }
.sx-plan__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.sx-plan__list li { display: flex; gap: var(--space-3); align-items: flex-start; color: rgba(246, 245, 243, 0.74);
 color: color-mix(in srgb, var(--text) 74%, transparent); }
.sx-plan__list li::before { content: ''; flex: none; width: 5px; height: 5px; margin-top: 8px; background: var(--accent); }

/* Buttons */
.sx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border: 1px solid var(--accent);
  background: var(--accent); color: var(--deep);  /* 5.68:1 on --green */
  text-transform: uppercase; cursor: pointer;
  transition: background var(--dur-base) var(--ease-out-quart),
              border-color var(--dur-base) var(--ease-out-quart),
              color var(--dur-base) var(--ease-out-quart),
              transform var(--dur-fast) var(--ease-spring);
}
.sx-btn:hover { background: rgb(71, 156, 115);
 background: color-mix(in srgb, var(--accent) 84%, white); }
.sx-btn--ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.sx-btn--ghost:hover { background: transparent; border-color: var(--accent); color: var(--white); }
.sx-btn--accent2 { background: var(--green); color: var(--white); }
.sx-btn--accent2:hover { background: rgb(71, 156, 115); }
.sx-plan .sx-btn { margin-top: auto; }

/* ── 5. Testimonials ─────────────────────────────────────────────────────── */
.sx-quotes__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-8); }
.sx-quote { display: flex; flex-direction: column; gap: var(--space-6); }
.sx-quote__mark { color: var(--white); opacity: 0.4; line-height: 0.6; }
.sx-quote__body { color: rgba(246, 245, 243, 0.86);
 color: color-mix(in srgb, var(--text) 86%, transparent); }
.sx-quote__who { display: flex; align-items: center; gap: var(--space-4); margin-top: auto; padding-top: var(--space-5); }
.sx-quote__avatar { width: 40px; height: 40px; border: 1px solid var(--line-2); color: var(--white); display: grid; place-content: center; flex: none; }
.sx-quote__name { display: block; }
.sx-quote__role { display: block; color: var(--text-muted); margin-top: 3px; }

/* ── 6. Logo wall ────────────────────────────────────────────────────────── */
.sx-logos__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-7) var(--space-9); }
.sx-logo { display: grid; place-content: center; color: var(--text-subtle); transition: color var(--dur-base) var(--ease-out-quart), transform var(--dur-base) var(--ease-out-expo); }
.sx-logo:hover { color: var(--text); transform: scale(1.06); }
.sx-logo svg { display: block; height: 26px; width: auto; }

/* ── 7. FAQ — native <details>, no JS, fully keyboard accessible ─────────── */
.sx-faq__list { display: flex; flex-direction: column; gap: var(--space-3); max-width: 900px; }
.sx-faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  padding: var(--space-6) 0; cursor: pointer; list-style: none;
  transition: color var(--dur-fast) var(--ease-out-quart);
}
.sx-faq__item summary::-webkit-details-marker { display: none; }
.sx-faq__item summary:hover { color: var(--white); }
.sx-faq__item summary:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
.sx-faq__chev { flex: none; width: 15px; height: 15px; color: var(--white); transition: transform var(--dur-base) var(--ease-out-expo); }
.sx-faq__item[open] .sx-faq__chev { transform: rotate(45deg); }
.sx-faq__answer { padding: 0 0 var(--space-6); color: var(--text-muted); max-width: var(--measure); }
.sx--light .sx-faq__answer { color: rgba(71, 156, 115, 0.72);
 color: color-mix(in srgb, var(--ink) 72%, transparent); }

/* ── 8. Comparison table ─────────────────────────────────────────────────── */
.sx-compare__scroll { overflow-x: auto; }
.sx-compare__scroll:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.sx-compare table { width: 100%; border-collapse: collapse; min-width: 640px; }
.sx-compare th, .sx-compare td { padding: var(--space-4) var(--space-5); text-align: left; }
.sx-compare thead th { border-bottom-color: var(--line-2); text-transform: uppercase; color: var(--text-muted); }
.sx-compare tbody th { font-weight: 400; color: rgba(246, 245, 243, 0.86);
 color: color-mix(in srgb, var(--text) 86%, transparent); }
.sx-compare td { text-align: center; }
.sx-compare thead th:not(:first-child) { text-align: center; }
.sx-compare__yes { color: var(--white); }
.sx-compare__no  { color: var(--text-subtle); }
.sx-compare tbody tr { transition: background var(--dur-fast) var(--ease-out-quart); }
/* Alternating tint separates the rows without a visible rule. */
.sx-compare tbody tr:nth-child(even) { background: rgba(71, 156, 115, 0.16); }
.sx-compare tbody tr:hover { background: rgba(38, 80, 60, 0.34);
 background: color-mix(in srgb, var(--forest-lift) 34%, transparent); }

/* ── 9. Team grid ────────────────────────────────────────────────────────── */
.sx-team__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-6); }
.sx-member__photo { aspect-ratio: 4 / 5; border-radius: 0; overflow: hidden; background: rgba(38, 80, 60, 0.9);
 background: color-mix(in srgb, var(--forest-lift) 90%, transparent); display: grid; place-content: center; color: var(--text-subtle); margin-bottom: var(--space-4); }
.sx-member__photo img { width: 100%; height: 100%; object-fit: cover; }
.sx-member__name { display: block; }
.sx-member__role { display: block; color: var(--text-muted); margin-top: var(--space-2); text-transform: uppercase; }

/* ── 10. CTA band ────────────────────────────────────────────────────────── */
.sx-cta { text-align: center; }
.sx-cta__inner { max-width: 820px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-6); }
.sx-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; }
.sx-cta--accent { background: var(--forest); }
.sx-cta--accent .sx__title em { font-style: normal; color: var(--orange); }

/* ── 11. Split feature (media + copy) ────────────────────────────────────── */
.sx-split__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-9); align-items: center; }
.sx-split__media { aspect-ratio: 5 / 4; border-radius: 0; overflow: hidden; background: rgba(38, 80, 60, 0.86);
 background: color-mix(in srgb, var(--forest-lift) 86%, transparent); display: grid; place-content: center; color: var(--text-subtle); }
.sx-split__media img { width: 100%; height: 100%; object-fit: cover; }
.sx-split--flip .sx-split__media { order: 2; }
@media (max-width: 760px) { .sx-split--flip .sx-split__media { order: 0; } }
.sx-split__body { display: flex; flex-direction: column; gap: var(--space-5); align-items: flex-start; }
.sx-split__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.sx-split__list li { display: flex; gap: var(--space-3); color: rgba(246, 245, 243, 0.74);
 color: color-mix(in srgb, var(--text) 74%, transparent); }
.sx-split__list li::before { content: ''; flex: none; width: 5px; height: 5px; margin-top: 8px; background: var(--accent); }

/* ── Reduced motion: strip every transform-based flourish ───────────────── */
@media (prefers-reduced-motion: reduce) {
  .sx-card, .sx-card:hover,
  .sx-btn, .sx-btn:hover,
  .sx-logo, .sx-logo:hover,
  .sx-faq__chev { transition: none; transform: none; }
  .sx-plan--featured { transform: none; }
}


/* ── Pricing cards ─────────────────────────────────────────────────────────
   Solid warm-white panels, built to match the floating scroll menu (the white
   banner): --panel ground, a 1px --surface hairline and the --r-sm corner.
   Text flips to ink; the CTA is the site's own bracketed frame button. */
.sx-plan {
  background: var(--panel);
  color: var(--ink);
  border-radius: 0;
  padding: var(--space-7) var(--space-6) var(--space-6);
  gap: var(--space-5);
}
.sx-plan .sx-plan__name        { color: rgba(71, 156, 115, 0.62); }
.sx-plan .sx-plan__price       { color: var(--ink); }
.sx-plan .sx-plan__price span  { color: rgba(71, 156, 115, 0.55); }
.sx-plan .sx-feature__body     { color: rgba(71, 156, 115, 0.72); }
.sx-plan .sx-plan__list li     { color: rgba(38, 80, 60, 0.82); }
.sx-plan .sx-plan__list li::before { background: var(--accent); }

/* Featured tier: same panel, marked by a green edge and a green label. */
.sx-plan--featured { border-color: var(--accent); border-width: 2px; }
.sx-plan--featured .sx-plan__flag {
  display: inline-block;
  align-self: flex-start;
  background: var(--accent);
  color: var(--white);
  padding: var(--space-2) var(--space-4);
}

/* The frame button is authored at a 303px minimum for full-width use; inside
   a card it has to fit the column instead. The SVG keeps its viewBox, so a
   percentage width scales it proportionally. */
.sx-plan .button-frame { width: 100%; margin-top: auto; }
.sx-plan .button-frame svg.plaisio { width: 100%; min-width: 0; }
.sx-plan .button-frame .label-wrap span { color: var(--ink); }
.sx-plan .button-frame .label-wrap svg.icon-arrow path { fill: var(--ink); }

/* Reviews collapse when there is nothing approved to show. renderReviews emits
   an empty region rather than placeholder quotes, which would otherwise leave a
   tall band of padding with a heading and no content. */
#reviews:not(:has(.sx-quotes__grid)) { display: none; }