/* ============================================================
Sitemate Design System — base.css  v0.1.0
------------------------------------------------------------
Standalone stylesheet for microsites and V3 pages. Adapted
from web-dev/globals.css (live sitemate.com) for raw HTML/CSS,
with all WordPress/Beaver Builder assumptions removed:
- typography applies to elements directly (the WordPress
.custom-font scope is dropped entirely)
- no .bb-custom-[slug] scoping, no !important
- sections + page layout defined here — WP/BB no longer
supplies the outer containers (see SECTIONS below)
- list-marker icons re-hosted locally (assets/icons/)
Colours are the full Sitemate palette (Figma › Colours page).
Tokens: see tokens.json. Conventions: see standards.md.
============================================================ */

/* == FONTS == */
/* Self-hosted in assets/fonts/ — no Google Fonts dependency (works offline, faster first
   paint, resilient to CDN blocks). Relative URLs so they resolve wherever the stylesheet
   is loaded from, incl. the CF-host footer-embed on WordPress. Roboto is one variable file
   (weights 100-900); Sunflower is a latin subset per weight. To refresh: pull the css2 API
   (family=Sunflower:wght@300;500;700&family=Roboto:wght@400;500;700) and re-save the woff2. */
@font-face {
  font-family: "Roboto";
  src: url("assets/fonts/roboto.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Sunflower";
  src: url("assets/fonts/sunflower-300.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Sunflower";
  src: url("assets/fonts/sunflower-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Sunflower";
  src: url("assets/fonts/sunflower-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* == CSS VARIABLES == */
:root {
  /* — Brand blue ramp (Figma › Icons & Buttons) — */
  --sm-blue: #0085e8; /* primary brand: links, accents, eyebrows */
  --sm-blue-light: #d8e6f6; /* light-blue fills, gradient-dark edge */
  --sm-blue-dark: #0b62af; /* blue-button hover */
  --sm-blue-accent: #003166; /* deepest accent blue */

  /* — Text (Figma › Text Colours) — */
  --sm-text: #2e3940; /* default text */
  --sm-text-body: #747474; /* lighter body / muted text */
  --sm-white: #fff; /* inverse text / card + tooltip background */

  /* slug/eyebrow text = var(--sm-blue) */

  /* — Greys, light → dark (Figma › Greys 1–5) — */
  --sm-grey-1: #f5f6f7; /* section + grey-button background */
  --sm-grey-2: #ebedef; /* grey-button hover */
  --sm-grey-3: #e0e2e4; /* borders (bento card) */
  --sm-grey-4: #d0d2d4;
  --sm-grey-5: #b0b2b4;

  /* — Semantic role aliases (point at the ramp above) — */
  --sm-blue-hover: var(--sm-blue-dark);
  --sm-bg-grey: var(--sm-grey-1);
  --sm-bg-grey-hover: var(--sm-grey-2);
  --sm-border: var(--sm-grey-3);
  --sm-blue-pale: #f5f9fd; /* lightest blue — table row hover + highlighted column */
  --sm-red: #e3514d; /* not-available / error (e.g. comparison-table ✕) */

  /* — Layout — */
  --nav-h: 72px; /* shared header height, for sticky offsets — keep in sync with site-header.js --nav-h */
  --content-max: 1328px; /* site content width — cap + centre inner containers */

  /* — Effects — */
  --soft-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
  --soft-inset: inset 0 0 6px rgba(0, 0, 0, 0.1);

  /* — 8px spacing grid — every padding / margin / gap is a multiple of 8.
  Author microsites with these; never hand-roll off-grid spacing. — */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-12: 96px;

  /* — Fluid type scale (clamp: min → fluid(vw) → max). Max = the desktop size,
  so desktop is unchanged; smaller screens scale down smoothly with no
  breakpoints. Font size is NOT on the 8px grid (that governs spacing). — */
  --font-h1: clamp(1.875rem, 1.6rem + 1.05vw, 2.5rem); /* 30 → 40 */
  --font-h2: clamp(1.5rem, 1.35rem + 0.63vw, 1.875rem); /* 24 → 30 */
  --font-h3: clamp(1.125rem, 1.07rem + 0.2vw, 1.25rem); /* 18 → 20 */
  --font-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem); /* 16 → 18 */
}

/* == BASE == */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Always reserve the scrollbar gutter so page width doesn't shift between
short and long views (e.g. toggling microsite tabs). */
html {
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  font-family: "Roboto", sans-serif;
  font-size: var(--font-body);
  color: var(--sm-text);
  background: #fff;
}

/* == TYPOGRAPHY ==
Applied directly to elements. Base body/link size is 18px. */
a {
  font-size: var(--font-body);
  text-decoration: none;
  color: var(--sm-blue);
}

h1 {
  font-family: "Sunflower", sans-serif;
  font-weight: 500;
  font-size: var(--font-h1);
  line-height: 1.4;
  margin: 0 0 var(--space-2); /* explicit — no UA top-margin leak */
  text-transform: capitalize;
}

h2 {
  font-family: "Sunflower", sans-serif;
  font-weight: 500;
  font-size: var(--font-h2);
  line-height: 1.5;
  margin: 0 0 var(--space-2); /* explicit — no UA top-margin leak */
  text-transform: capitalize;
}

h3 {
  font-size: var(--font-h3);
  line-height: 1.5;
  margin: 0 0 var(--space-1); /* explicit */
}

h4 {
  font-size: var(--font-body);
  line-height: 1.5;
  margin: 0;
  font-weight: 400;
}

h5,
.eyebrow-sm {
  font-size: 16px;
  color: var(--sm-blue);
  text-transform: uppercase;
  font-family: "Sunflower", sans-serif;
  font-weight: 500;
  letter-spacing: 1px;
  margin: 0 0 var(--space-1); /* explicit; small gap to heading */
}

p {
  font-size: var(--font-body);
  line-height: 1.5;
  margin: 0 0 var(--space-2); /* explicit — no UA top-margin leak */
  color: var(--sm-text-body); /* lighter body text; headings keep --sm-text */
  text-wrap: pretty;
}

li {
  line-height: 1.7;
  margin: 0 0 var(--space-1) -16px; /* explicit; -16 left offset */
  color: var(--sm-text-body);
  list-style-position: outside;
}

li a {
  font-weight: 500;
}

ul {
  margin: 0 0 0 -16px;
}

/* Switch headings to Sunflower where the default doesn't apply it. */
.sunflower,
.sunflower h1,
.sunflower h2 {
  font-family: "Sunflower", sans-serif;
  font-weight: 500;
  text-wrap: pretty;
}

.sunflower h3 {
  font-family: "Sunflower", sans-serif;
  font-weight: 500;
  text-transform: capitalize;
}

.blue-highlight {
  color: var(--sm-blue);
}

/* == SECTIONS / LAYOUT ==
Raw-HTML page scaffold — replaces the WordPress/BB row + column
containers that used to supply the outer page layout. A page is a
vertical stack of full-width <section>s: each paints its background
edge-to-edge and owns the vertical rhythm + side gutter, while the
inner .custom-grid centres content at max 1328px. <body> stays
full-width (no max-width) so section backgrounds run to the
viewport edges; horizontal containment lives on .custom-grid. */
/* Vertical rhythm is a flat 64px top + bottom on EVERY section (side gutter always
   24px, 16 on mobile). The colour/transition classes below are kept as explicit hooks
   but currently resolve to the same 64px — the 96px "breathe more" on colour sections
   was dialled back to 64 in the Jul-2026 design review (site read as too empty). To
   reintroduce differential spacing later, bump these back to --space-12. */
section {
  padding: var(--space-8) var(--space-3); /* 64 / 24 */
}

section.section-colour {
  padding-block: var(--space-8); /* 64 — flat rhythm (was 96) */
}

section.section-after-colour {
  padding-top: var(--space-8); /* 64 — flat rhythm (was 96) */
}

section.section-before-colour {
  padding-bottom: var(--space-8); /* 64 — flat rhythm (was 96) */
}

/* The page's first section always gets 64px top — sits consistently under the
   sticky nav no matter its colour/transition class. (Higher specificity wins.) */
main > section:first-of-type {
  padding-top: var(--space-8); /* 64 */
}

@media (max-width: 768px) {
  section {
    padding: var(--space-6) var(--space-2); /* 48 / 16 — normal */
  }

  section.section-colour {
    padding-block: var(--space-8); /* 64 */
  }

  section.section-after-colour {
    padding-top: var(--space-8); /* 64 */
  }

  section.section-before-colour {
    padding-bottom: var(--space-8); /* 64 */
  }
}

/* == LAYOUT UTILITIES == */

/* Vertical rhythm for a text group — even spacing via gap, no per-element margins.
Wrap eyebrow/heading/body/CTA in .stack instead of relying on element margins. */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.stack > * {
  margin: 0;
}

/* Section header content group (eyebrow → title → intro → cta) — even space-2 spacing,
kept separate from the cards/media below it. */
.stack-headings {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.stack-headings > * {
  margin: 0;
}

.product-logo {
  height: 32px;
  width: auto;
  margin-bottom: var(--space-2);
}

/* Caption/lockup logos (Sitemate Mobile App, *-logo-caption) pack a descriptor
alongside the wordmark, so they need extra height to stay legible vs standard logos. */
.product-logo--caption {
  height: 48px;
}

/* Images in a stack must not stretch to full width — keep them left-aligned at natural size. */
.stack > img,
.stack-headings > img {
  align-self: flex-start;
}

/* Two-column feature split: text + media with a generous 40px gap, wraps on small screens.
Use instead of .custom-grid when you want >16px between columns (the grid's column
math is tuned to the 16px gap, so widening its gap overflows). */
.split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  max-width: 1328px;
  margin: 0 auto;
}

.split > * {
  flex: 1 1 360px;
  min-width: 0;
}

.closing-slogan  {
  padding-top: var(--space-3);
}

/* == GRID ==
12-col flexbox grid, identical class names + breakpoints to the
live site so bb-module markup ports over unchanged. */
.custom-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  max-width: 1328px;
  margin: 0 auto;
}

.custom-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  width: 100%;
}

.custom-col-1,
.custom-col-2,
.custom-col-3,
.custom-col-4,
.custom-col-5,
.custom-col-6,
.custom-col-7,
.custom-col-8,
.custom-col-9,
.custom-col-10,
.custom-col-11,
.custom-col-12 {
  min-width: 0;
}

.custom-col-1 {
  flex: 0 0 calc(8.33% - 14.67px);
}

.custom-col-2 {
  flex: 0 0 calc(16.66% - 13.33px);
}

.custom-col-3 {
  flex: 0 0 calc(25% - 12px);
}

.custom-col-4 {
  flex: 0 0 calc(33.33% - 10.67px);
}

.custom-col-5 {
  flex: 0 0 calc(41.66% - 9.33px);
}

.custom-col-6 {
  flex: 0 0 calc(50% - 8px);
}

.custom-col-7 {
  flex: 0 0 calc(58.33% - 6.67px);
}

.custom-col-8 {
  flex: 0 0 calc(66.66% - 5.33px);
}

.custom-col-9 {
  flex: 0 0 calc(75% - 4px);
}

.custom-col-10 {
  flex: 0 0 calc(83.33% - 2.67px);
}

.custom-col-11 {
  flex: 0 0 calc(91.66% - 1.33px);
}

.custom-col-12 {
  flex: 0 0 100%;
}

.lg-row-mod {
  row-gap: var(--space-4);
}

/* 32 */
.bento-col {
  border: 1px solid var(--sm-border);
  padding: var(--space-3); /* 24 */
  border-radius: 16px; /* radius — off the spacing grid by design */
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.3s ease;
}

.bento-col:hover {
  box-shadow: var(--soft-shadow);
}

/* No trailing margin on a card's last element, at ANY nesting depth — so the last
   line of text sits an even 24px from the border, keeping card padding consistent. */
.bento-col :last-child {
  margin-bottom: 0;
}

/* Opt-in gap modifier for a bento-col with an image + text container — 24px gap
between the card's children. Don't use on icon+text cards or cards with no media. */
.bento-gap {
  gap: var(--space-3);
}

/* Image + text bento: the copy is wrapped in .bento-col-text and pushed to the bottom
(margin-top:auto) so it aligns across cards of unequal image/copy length. The gap
between image and text comes from .bento-gap above — not element margins. */
.bento-col-text {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.bento-col-text > * {
  margin: 0;
}

/* Use-case thumbnail card — a form/screen preview bleeding off the bottom of a
dark panel, copy below. Compose:
.bento-col.thumb-card > .thumb-preview.gradient-dark > img
+ .bento-col-text.thumb-card-text > h3 + p */
.thumb-card {
  padding: 0;
}

.thumb-preview {
  padding: var(--space-2) var(--space-2) 0;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  height: 240px;
}

/* gap to text comes from .bento-gap */
.thumb-preview img {
  width: 100%;
  display: block;
  box-shadow: var(--soft-shadow);
}

.thumb-card-text {
  padding: 0 var(--space-3) var(--space-3);
}

@media (max-width: 1324px) {
  .custom-col-4,
  .custom-col-5,
  .custom-col-6,
  .custom-col-7,
  .custom-col-8 {
    flex: 0 0 calc(50% - 8px);
  }
}

@media (max-width: 992px) {
  .custom-col-1,
  .custom-col-2,
  .custom-col-3,
  .custom-col-4,
  .custom-col-5,
  .custom-col-6,
  .custom-col-7,
  .custom-col-8,
  .custom-col-9,
  .custom-col-10,
  .custom-col-11 {
    flex: 0 0 calc(50% - 8px);
  }

  .stack-medium .custom-col-1,
  .stack-medium .custom-col-2,
  .stack-medium .custom-col-3,
  .stack-medium .custom-col-4,
  .stack-medium .custom-col-5,
  .stack-medium .custom-col-6,
  .stack-medium .custom-col-7,
  .stack-medium .custom-col-8,
  .stack-medium .custom-col-9,
  .stack-medium .custom-col-10,
  .stack-medium .custom-col-11,
  .stack-medium .custom-col-12 {
    flex: 0 0 100%;
  }
}

@media (max-width: 768px) {
  .custom-grid {
    max-width: 720px;
  }

  .custom-col-1,
  .custom-col-2,
  .custom-col-3,
  .custom-col-4,
  .custom-col-5,
  .custom-col-6,
  .custom-col-7,
  .custom-col-8,
  .custom-col-9,
  .custom-col-10,
  .custom-col-11,
  .custom-col-12 {
    flex: 0 0 100%;
  }
}

@media (max-width: 474px) {
  .custom-grid {
    max-width: 100%;
  }
}

/* Sticky-nav layout — holds declared widths ≥993px (for sidebar
layouts), stacks below. */
@media (min-width: 993px) {
  .sticky-nav .custom-col-1 {
    flex: 0 0 calc(8.33% - 14.67px);
  }

  .sticky-nav .custom-col-2 {
    flex: 0 0 calc(16.66% - 13.33px);
  }

  .sticky-nav .custom-col-3 {
    flex: 0 0 calc(25% - 12px);
  }

  .sticky-nav .custom-col-4 {
    flex: 0 0 calc(33.33% - 10.67px);
  }

  .sticky-nav .custom-col-5 {
    flex: 0 0 calc(41.66% - 9.33px);
  }

  .sticky-nav .custom-col-6 {
    flex: 0 0 calc(50% - 8px);
  }

  .sticky-nav .custom-col-7 {
    flex: 0 0 calc(58.33% - 6.67px);
  }

  .sticky-nav .custom-col-8 {
    flex: 0 0 calc(66.66% - 5.33px);
  }

  .sticky-nav .custom-col-9 {
    flex: 0 0 calc(75% - 4px);
  }

  .sticky-nav .custom-col-10 {
    flex: 0 0 calc(83.33% - 2.67px);
  }

  .sticky-nav .custom-col-11 {
    flex: 0 0 calc(91.66% - 1.33px);
  }

  .sticky-nav .custom-col-12 {
    flex: 0 0 100%;
  }
}

@media (max-width: 992px) {
  .sticky-nav .custom-col-1,
  .sticky-nav .custom-col-2,
  .sticky-nav .custom-col-3,
  .sticky-nav .custom-col-4,
  .sticky-nav .custom-col-5,
  .sticky-nav .custom-col-6,
  .sticky-nav .custom-col-7,
  .sticky-nav .custom-col-8,
  .sticky-nav .custom-col-9,
  .sticky-nav .custom-col-10,
  .sticky-nav .custom-col-11,
  .sticky-nav .custom-col-12 {
    flex: 0 0 100%;
  }
}

/* == LIST STYLES == (icons re-hosted locally) */
.checklist-tick li {
  list-style: none;
  background-image: url("assets/icons/tick.svg");
  background-repeat: no-repeat;
  background-position: 0 0.55em;
  padding-left: 1.5em;
  margin-left: -24px;
  line-height: 2;
}

.checklist-dot li {
  list-style: none;
  background-image: url("assets/icons/dot-for-li.svg");
  background-repeat: no-repeat;
  background-position: 0 0.55em;
  padding-left: 1.5em;
  margin-left: -24px;
  line-height: 2;
}

.checklist-number ul {
  counter-reset: list-counter;
}

.checklist-number li {
  list-style: none;
  counter-increment: list-counter;
  position: relative;
  padding-left: 1.5em;
  margin-left: -24px;
  line-height: 2;
}

.checklist-number li::before {
  content: counter(list-counter) ".";
  position: absolute;
  left: 0;
  color: var(--sm-blue);
  font-weight: 400;
}

/* == BACKGROUNDS == */

/* Do NOT use as a section background — flat grey reads dull; use
.gradient-light for a lifted section instead. Kept for small fills only. */
.sm-bg-grey {
  background: var(--sm-bg-grey);
}

/* Light radial gradient fill. The default classes carry a soft inset shadow that
   lifts the section off the page; the *-flat variants are the identical fill but
   flush (no inset). Swap a *-flat class in per section on a case-by-case basis;
   rules for when flat becomes the automatic default are still TBD. */
.gradient-light,
.animated-gradient-light,
.gradient-light-flat,
.animated-gradient-light-flat {
  background: radial-gradient(circle at center, #f2f8ff, #fdfdfd 75%);
}

/* lifted (inset shadow) — default variants only, never the *-flat ones */
.gradient-light,
.animated-gradient-light {
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* animated motion — shared by the lifted and flat animated variants */
.animated-gradient-light,
.animated-gradient-light-flat {
  background-size: 300% 300%;
  background-position: 0% 0%;
  animation: gradientMove 14s ease-in-out infinite;
}

@keyframes gradientMove {
  0% {
    background-position: 0% 0%;
  }

  25% {
    background-position: 100% 0%;
  }

  50% {
    background-position: 100% 100%;
  }

  75% {
    background-position: 0% 100%;
  }

  100% {
    background-position: 0% 0%;
  }
}

/* gradient-dark: a decorative backdrop for IMAGES / panels only —
never put body text on it (contrast is too low to read reliably;
use gradient-light / animated-gradient-light with default text for
text sections). NOT yet live on sitemate.com — push live before
using in website modules. */
.gradient-dark,
.animated-gradient-dark {
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.08);
}

.gradient-dark,
.gradient-dark-flat {
  background:
    radial-gradient(
      circle at top right,
      var(--sm-blue),
      rgba(0, 133, 232, 0) 60%
    ),
    radial-gradient(
      circle at bottom left,
      var(--sm-blue),
      rgba(0, 133, 232, 0) 60%
    ),
    var(--sm-blue-light);
}

.animated-gradient-dark,
.animated-gradient-dark-flat {
  background: radial-gradient(
    circle at center,
    var(--sm-blue),
    var(--sm-blue-light) 75%
  );
  background-size: 300% 300%;
  background-position: 0% 0%;
  animation: gradientMove 14s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .animated-gradient-light,
  .animated-gradient-dark,
  .animated-gradient-light-flat,
  .animated-gradient-dark-flat {
    animation: none;
    background-size: auto;
    background-position: center;
  }
}

.no-inner-shadow {
  box-shadow: none;
}

/* == BUTTONS == */
.button-group {
  display: flex;
  gap: var(--space-2); /* 16 */
  max-width: fit-content;
  margin-top: var(--space-3); /* 24 */
}

.blue-buttons {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--sm-blue);
  color: #fff;
  text-decoration: none;
  border-radius: 10px;
  transition: gap 0.25s ease;
  justify-content: center;
}

.text-buttons {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  transition: gap 0.25s ease;
  justify-content: center;
}

.grey-buttons {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--sm-bg-grey);
  color: var(--sm-text);
  text-decoration: none;
  border-radius: 10px;
  transition: all 0.25s ease;
  justify-content: center;
}

.blue-buttons:hover {
  gap: var(--space-3);
  background: var(--sm-blue-hover);
  color: #fff;
}

.grey-buttons:hover {
  background: var(--sm-bg-grey-hover);
  color: var(--sm-text);
}

.text-buttons:hover {
  gap: var(--space-3);
  color: var(--sm-text);
}

.grey-buttons a,
.blue-buttons a,
.grey-buttons a:hover,
.blue-buttons a:hover {
  text-decoration: none;
  color: inherit;
}

.learn-more-btn,
.learn-more-btn:hover,
.learn-more-btn a,
.learn-more-btn a:hover {
  color: var(--sm-text);
  text-decoration: none;
  display: flex;
  font-size: 16px;
  gap: var(--space-1);
  transition: 0.3s ease all;
}

.learn-more-btn img {
  max-width: 16px;
}

.learn-more-btn:hover {
  gap: var(--space-2);
}

@media (max-width: 768px) {
  .button-group {
    flex-direction: column;
    text-align: center;
    max-width: 100%;
  }
}

/* == MEDIA == */

/* Feature / hero video — a lifted treatment, distinct from inline content images.
Wrap a Vimeo/YouTube iframe; 16:9, slight scale to crop the player's letterboxing. */
.vimeo-container {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #fff;
  box-shadow: var(--soft-shadow);
}

.vimeo-container iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  transform: scale(1.01); /* crop the player's letterbox edges */
  transform-origin: center;
}

/* == PAGE LAYOUT HELPER ==
Centred block container for single-column section content (use .custom-grid
for column layouts, .split for two-column). Section padding supplies the side
gutter, so this only caps + centres — exact 1328px at full width. */
.section-inner {
  max-width: 1328px;
  margin-inline: auto;
}

/* == LONG-FORM / BLOG CONTENT ==
Primitives for blog + article body copy (ported from the live sitemate.com blog
template, re-expressed in tokens). Pair with a capped reading measure on the
article wrapper (~820px) — section padding still supplies the side gutter. */

/* Pull-quote — blue left rule, darker --sm-text (headings colour) to lift it off
   the muted body copy. Replaces the live theme's ad-hoc .block-quote-blog. */
blockquote {
  margin: var(--space-4) 0;
  padding: var(--space-1) 0 var(--space-1) var(--space-3);
  border-left: 3px solid var(--sm-blue);
  color: var(--sm-text);
}

blockquote p {
  color: var(--sm-text); /* override the muted body colour inside quotes */
  font-size: calc(var(--font-body) + 1px);
  margin: 0 0 var(--space-2);
}

blockquote p:last-child {
  margin-bottom: 0;
}

/* Content image — a photo/diagram in a light-blue matted frame, optional caption.
   Frame colour + inset mirror the live blog's img-container, on base.css tokens
   (radius 16, --space-3 padding). Nested radius: frame 16 → image 8. */
figure {
  margin: var(--space-4) 0;
}

.img-frame {
  background: var(--sm-blue-light);
  padding: var(--space-3);
  border-radius: 16px;
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.03);
  text-align: center;
}

.img-frame img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 8px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.12));
}

figcaption {
  margin-top: var(--space-2);
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
  color: var(--sm-text-body);
  text-align: center;
  text-wrap: pretty;
}

/* == BLOG (.sm-blog editorial module) ==
Blog body used by headless posts (/blog/<slug>/; template website/site/_example-blog/),
scoped under .sm-blog. TYPE is inherited from the global element styles above (h1/h2/h3/p/
li/a/blockquote) — the blog does NOT define its own type scale, so it stays in step with the
rest of the site. This section is layout + components only: the hero lockup, the rising white
card, alternating bands, the custom audiobook player, and the author bio. blockquote / figure /
.img-frame / figcaption are the global LONG-FORM primitives above. Posts carry no inline
<style>; styling lives here, and the audiobook JS in /shared/blog-audio.js. */
.sm-blog {
  width: 100%;
  background: #fff;
  font-family: "Roboto", sans-serif;
  color: var(--sm-text); /* headings inherit this; the global `p` rule sets the muted body colour */
  -webkit-font-smoothing: antialiased;
}

.sm-blog * {
  box-sizing: border-box;
}

.sm-blog h3 {
  font-family: "Sunflower", sans-serif;
  font-weight: 500;
  text-transform: capitalize;
  margin-bottom: var(--space-1);
}

.sm-blog h3:not(:first-child) {
  margin-top: var(--space-4);
}

/* hero band — light gradient supplied by the .gradient-light utility on the element */
.sm-blog-hero {
  padding: var(--space-8) var(--space-6) 120px;
}
.sm-blog-hero-inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin: 32px auto;
  max-width: 976px;
}
.sm-blog-badge {
  width: 120px;
  height: 120px;
  flex: 0 0 auto;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
}
.sm-blog-hero-text {
  min-width: 0;
}
/* cap the hero title's line length so long titles wrap instead of stretching wide
   (global default; override per-post only if a title genuinely needs it) */
.sm-blog-hero-text h1 {
  max-width: 644px;
}

/* first white card — 64px top corners, rises into the hero */
.sm-blog-card {
  background: #fff;
  max-width: 1104px;
  margin: -120px auto 0;
  padding: 64px;
  border-radius: 64px 64px 24px 24px;
  position: relative;
  z-index: 2;
}

/* Soft (regular) drop shadow shown ONLY where the card overlaps the hero
   (its top 120px) — same values as the .gradient-light shadow but a normal
   outer shadow, not inset. Lives on a pseudo-element so clip-path can trim it
   to the overlap without clipping the card's content; cut off at the hero's
   bottom edge so the card sits flush against the white body/bands below. */
.sm-blog-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  clip-path: inset(-16px -16px calc(100% - 120px) -16px);
  pointer-events: none;
}

/* section bands — alternate is-grad / is-white */
.sm-blog-band {
  padding: var(--space-8) var(--space-3);
}
.sm-blog-band.is-grad {
  background: radial-gradient(circle at center, #f2f8ff, #fdfdfd 75%);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.01);
}
.sm-blog-band.is-white {
  background: #fff;
}
/* the About-the-Author band is ALWAYS white, never the gradient — enforced here so it
   can't be authored wrong (overrides is-grad regardless of the class on the band). */
.sm-blog-band:has(.sm-blog-author) {
  background: #fff;
  box-shadow: none;
}
.sm-blog-inner {
  max-width: 1104px;
  margin: 0 auto;
  padding: 0 64px;
}
/* first heading in a band/card sits flush (the band/card padding is the top gap) */
.sm-blog-inner > :is(h1, h2, h3):first-child, .sm-blog-card > :is(h1, h2, h3):first-child {
  margin-top: 0;
}

/* audiobook — custom on-brand player. Native <audio> controls live in shadow DOM and can't
   be themed, so the markup hides <audio> and drives our own elements (JS: /shared/blog-audio.js). */
.sm-blog .audiobook {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: 0;
  background: #fff;
}
.sm-blog .audiobook p {
  margin: 0;
  font-size: 13px;
  color: var(--sm-text-body);
}
.sm-blog .sm-audio {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.sm-blog .sm-audio audio {
  display: none;
}
.sm-blog .sm-audio-play {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: var(--sm-blue);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.2s ease;
}
.sm-blog .sm-audio-play:hover {
  background: var(--sm-blue-dark);
}
.sm-blog .sm-audio-play::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent #fff;
  margin-left: 3px;
}
.sm-blog .sm-audio.is-playing .sm-audio-play::before {
  width: 10px;
  height: 13px;
  border: 0;
  border-left: 3px solid #fff;
  border-right: 3px solid #fff;
  margin-left: 0;
}
.sm-blog .sm-audio-bar {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--sm-blue-light);
  position: relative;
  cursor: pointer;
}
.sm-blog .sm-audio-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  background: var(--sm-blue);
  border-radius: 999px;
}
.sm-blog .sm-audio-time {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--sm-text-body);
  font-variant-numeric: tabular-nums;
  min-width: 40px;
  text-align: right;
}

/* author bio + optional past-projects disclosure */
.sm-blog-author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.sm-blog-author > img {
  width: 96px;
  height: 96px;
  border-radius: 16px;
  object-fit: cover;
  flex: 0 0 auto;
}
.sm-blog-author-meta h3 {
  margin: 0;
}
.sm-blog-author-meta p {
  margin: var(--space-1) 0 0;
  font-size: 15px;
  color: var(--sm-text-body);
}
.sm-blog-project {
  margin: 0 0 var(--space-2);
}
.sm-blog-project strong {
  display: block;
  color: var(--sm-text);
}
.sm-blog details.sm-blog-projects > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-family: "Sunflower", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  color: var(--sm-text);
  text-transform: capitalize;
}
.sm-blog details.sm-blog-projects > summary::-webkit-details-marker {
  display: none;
}
.sm-blog details.sm-blog-projects > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--sm-text);
  border-bottom: 2px solid var(--sm-text);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.sm-blog details.sm-blog-projects[open] > summary::after {
  transform: rotate(-135deg);
}
.sm-blog details.sm-blog-projects .sm-blog-project:first-of-type {
  margin-top: var(--space-3);
}
.sm-blog-bento {
  margin: var(--space-4) 0;
  border-top: 1px solid var(--sm-border);
  border-bottom: 1px solid var(--sm-border);
  padding: var(--space-3) 0;
  background: #fff;
}
.sm-blog-bento > details.sm-blog-projects {
  margin-top: 0;
}
.sm-blog-bento .sm-blog-project:last-child {
  margin-bottom: 0;
}
.sm-blog-version {
  font-size: 13px;
  color: var(--sm-text-body);
  margin-top: 0;
}

@media (max-width: 768px) {
  .sm-blog-hero {
    padding: var(--space-6) var(--space-3);
  }
  .sm-blog-hero-inner {
    flex-direction: column;
    text-align: center;
    gap: var(--space-3);
  }
  .sm-blog-card {
    padding: var(--space-3) var(--space-3) var(--space-6);
    border-radius: 32px 32px 16px 16px;
    margin-top: -32px;
  }
  /* overlap is 32px on mobile — clip the shadow to match */
  .sm-blog-card::before {
    clip-path: inset(-16px -16px calc(100% - 32px) -16px);
  }
  .sm-blog-band {
    padding: var(--space-6) var(--space-2);
  }
  .sm-blog-inner {
    padding: 0;
  }
  .sm-blog-author {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* == BLOG LIBRARY (Inside Sitemate hub) ==
Built ON the design-system grid + cards: .custom-grid / .custom-col-4 / .bento-col supply
the layout, sizing, borders, radius and hover. These rules only add the blog-specific bits —
the hero lottie, the card badge/excerpt/meta, the featured-card layout, and the search bar.
Cards are baked by website/build-index.js from content-index.json (badge = the post's hero
icon, an <img> or an animated <lottie-player>). */

/* hero lottie — replaces the eyebrow above the library title */
.blog-hero-lottie {
  width: 200px;
  height: auto;
  display: block;
}

/* featured card — a full-width .bento-col with badge + text side by side */
.blog-featured {
  flex-direction: row;
  align-items: center;
  gap: var(--space-4);
  text-decoration: none;
  border: none;
  padding: var(--space-3);
  position: relative;
}

.blog-featured-badge {
  flex: 0 0 auto;
  width: 240px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blog-featured-badge > * {
  width: 240px;
  height: 240px;
  display: block;
}
.blog-featured-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.blog-featured-text > * {
  margin: 0;
}

.blog-featured-text h2 {
  color: var(--sm-text);
}

.dynamic-blog-section .custom-grid {
  max-width: 1104px;
}

.dynamic-blog-section {
  box-shadow: none;
}

/* grid card — 2-wide bento, badge left + text right (mirrors the featured layout) */
.blog-card {
  flex-direction: column;
  align-items: stretch; /* text column fills card height so CTAs can bottom-align across the row */
  gap: var(--space-4);
  height: 380px;
  text-decoration: none;
  border: 1px solid #fff; /* fake white border reserves the 1px so the hover border doesn't shift layout */
  justify-content: space-between;
}
.blog-card:hover {
  text-decoration: none;
  box-shadow: none; /* no shadow on hover — just the light-blue border + the button-gap animation */
  border-color: var(--sm-blue-light);
}
.blog-featured:hover {
  box-shadow: none; /* drop the default bento hover shadow on the featured too */
}
.blog-card-badge {
  flex: 0 0 auto;
  align-self: left;
  width: 140px;
  height: 140px;
  display: block;
}
.blog-card-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.blog-card-text > * {
  margin: 0;
}
.blog-card-title {
  font-family: "Sunflower", sans-serif;
  font-weight: 500;
  font-size: var(--font-h3);
  line-height: 1.4;
  color: var(--sm-text);
}
.blog-card-excerpt {
  font-size: 15px;
  line-height: 1.6;
  color: var(--sm-text-body);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card-meta {
  font-size: 13px;
  color: var(--sm-text-body);
}
/* "Read blog" CTA — the DS .text-buttons handles the arrow + gap animation;
   this only sets the resting look + widens the gap on card (not just button) hover. */
.blog-card-cta {
  margin-top: 16px;
  align-self: flex-start; /* left-aligned, not centred */
  color: var(--sm-text);
  font-size: 16px;
}
.blog-card-cta .btn-arrow {
  width: 16px;
  height: 16px;
}
.blog-card:hover .text-buttons,
.blog-featured:hover .text-buttons {
  gap: var(--space-3);
}

/* search + sort bar */
.blog-lib-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-4);
}
.blog-lib-search {
  flex: 1 1 260px;
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  color: var(--sm-text);
  border: 1px solid var(--sm-border);
  border-radius: 8px;
  padding: 10px 14px;
}
.blog-lib-empty {
  color: var(--sm-text-body);
  margin: var(--space-4) 0;
}

@media (max-width: 768px) {
  .blog-featured,
  .blog-card {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* == FORM CONTROLS == */
.form-select {
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  color: var(--sm-text);
  appearance: none;
  -webkit-appearance: none;
  background: #fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23747474' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 14px center;
  border: 1px solid var(--sm-border);
  border-radius: 8px;
  padding: 10px 40px 10px 14px;
  cursor: pointer;
}

/* == IMAGE CARD ==
A photo in a blue-bordered, light-blue-matted frame, with centred copy below.
Compose on a .bento-col. Nested radius: card 16 → frame 8 → image 4. */
.image-card {
  gap: var(--space-3);
}

.image-card-frame {
  border: 1px solid var(--sm-blue);
  background: var(--sm-blue-light);
  border-radius: 8px;
  padding: var(--space-1);
}

.image-card-frame img {
  display: block;
  width: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.image-card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  text-align: center;
}.compare-controls

/* Let ONLY the body's flex gap govern spacing — zero child margins so all three
   cards space identically and their titles line up (no per-card inline overrides). */
.image-card-body > * {
  margin: 0;
}

/* Description line (the plain <p>, not the eyebrow) — 16px so the longest copy
   still fits on one line at the card width. */
.image-card-body p:not(.eyebrow-sm) {
  font-size: 16px;
}

.image-card-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.image-card-title {
  font-family: "Sunflower", sans-serif;
  font-weight: 500;
  font-size: var(--font-h3);
  color: var(--sm-text);
  margin: 0;
}

/* == LOGO MARQUEE ==
   Infinite, seamless logo strip. The track holds two identical .logo-marquee-set
   groups (the 2nd is a JS clone) and slides left by exactly one set (translateX -50%).
   Spacing is a per-item margin-right, NOT flex `gap`: a gap only sits BETWEEN items,
   so the two halves wouldn't tile and the loop jumps half-a-gap. A trailing margin on
   every logo makes -50% line up exactly — a perfect loop regardless of logo widths. */
.logo-marquee {
  overflow-x: clip; /* clip the scrolling strip horizontally... */
  overflow-y: visible; /* ...but let a hover-scaled logo grow vertically without being cropped */
}

.logo-marquee-title {
  text-align: center;
  margin-bottom: var(--space-6);
}

.logo-marquee-track {
  display: flex;
  width: max-content; /* size to content (2 sets) so -50% == exactly one set */
  animation: logo-marquee 45s linear infinite;
  will-change: transform;
}

.logo-marquee-set {
  display: flex;
  align-items: center;
}

.logo-marquee-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  margin-right: var(--space-8); /* 64 — trailing space per logo; this is what makes -50% tile */
}

.logo-marquee-item img {
  max-height: 40px;
  max-width: 160px;
  width: auto;
  object-fit: contain;
  display: block;
  filter: grayscale(100%);
  opacity: 0.7;
  transition:
    filter 0.3s ease,
    opacity 0.3s ease,
    transform 0.3s ease;
}

/* darken near-white logos so they read on the light background */
.logo-marquee-item.is-light img {
  filter: grayscale(100%) brightness(0.45);
}

/* wordmarks that read too small at 40px (e.g. Phoenix) */
.logo-marquee-item--lg img {
  max-height: 56px;
}

.logo-marquee-item:hover img {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.1);
}

@keyframes logo-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-marquee-track {
    animation: none;
  }
}

@media (max-width: 768px) {
  .logo-marquee-item {
    margin-right: var(--space-5); /* 40 */
  }

  .logo-marquee-track {
    animation-duration: 30s;
  }
}

/* == PRICING MODEL (toggle + volume slider + plan cards) ==
Reusable across pricing pages (Dashpivot / Gearbelt / Flowsite). */
.model-toggle {
  display: inline-flex;
  border: 1px solid var(--sm-blue);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: var(--space-3);
}

.model-btn {
  font-family: "Sunflower", sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: var(--space-2) var(--space-4);
  border: 0;
  background: #fff;
  color: var(--sm-text);
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.model-btn:not(.is-active):hover {
  background: var(--sm-grey-1);
}

.model-btn.is-active {
  background: var(--sm-blue);
  color: #fff;
}

.model-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.slider-box {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 328px;
  min-height: 44px; /* matches .ent-note so toggling models doesn't shift the row */
}

.slider-label {
  font-size: 16px;
  color: var(--sm-text);
  margin-bottom: var(--space-1);
}

.slider-label b,
.ent-note b {
  color: var(--sm-blue);
}

/* Enterprise-mode swap for the slider — mirrors .slider-box position so the
   controls row doesn't shift when toggling models. */
.ent-note {
  font-size: 16px;
  color: var(--sm-text);
  min-width: 328px;
  min-height: 44px; /* matches .slider-box height so the swap doesn't shift the row */
}

/* When JS toggles model mode it sets [hidden]; these must beat the display
   rules above (.slider-box is display:flex, which would otherwise win). */
.slider-box[hidden],
.ent-note[hidden] {
  display: none;
}

.model-selects {
  display: flex;
  gap: var(--space-2);
}


/* Range slider — thin rounded track (blue fill painted inline by JS), compact blue
   thumb with a soft blue halo that grows on hover/focus. */
.volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 340px;
  max-width: 100%;
  height: 5px;
  border-radius: 999px;
  background: var(--sm-grey-1);
  border: 1px solid var(--sm-blue);
  outline: none;
  cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--sm-blue);
  border: 2px solid #fff;
  box-shadow: var(--soft-shadow);
  cursor: pointer;
  transition: box-shadow 0.15s ease;
}

.volume-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: var(--sm-blue);
  border: 2px solid #fff;
  box-shadow: var(--soft-shadow);
  cursor: pointer;
  transition: box-shadow 0.15s ease;
}

.volume-slider:hover::-webkit-slider-thumb,
.volume-slider:focus-visible::-webkit-slider-thumb {
  box-shadow: var(--soft-shadow);
}

.volume-slider:hover::-moz-range-thumb,
.volume-slider:focus-visible::-moz-range-thumb {
  box-shadow: var(--soft-shadow);
}

/* Four plan columns, divided by vertical lines, one highlighted */
.plan-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.plan-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-3);
  border-left: 1px solid var(--sm-border);
  min-height: 624px;
  transition: all 0.3s ease;
}

.plan-card:first-child {
  border-left: 1px solid var(--sm-white);
  transition: all 0.3s ease;
}

.plan-card.is-popular {
  background: var(--sm-blue-pale);
  transition: all 0.3s ease;
}

.plan-popular-tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Sunflower", sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--sm-blue);
  background: #fff;
  border: 1px solid var(--sm-border);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: var(--space-2);
  text-transform: uppercase;
}

.plan-popular-tag .star {
  color: #f6bb2d;
}

.plan-popular-spacer {
  height: 28px;
  margin-bottom: var(--space-2);
}

/* aligns cards without the tag */
.plan-slug {
  font-family: "Sunflower", sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--sm-blue);
  margin: 0 0 var(--space-1);
}

.plan-price {
  font-weight: 500;
  font-size: 22px;
  color: var(--sm-text);
  margin: 0 0 var(--space-2);
}

.plan-price .per {
  font-weight: 400;
  font-size: 13px;
  color: var(--sm-text-body);
  margin-left: 4px;
}

.plan-blurb {
  font-size: 16px;
  margin: 0 0 var(--space-2);
}

.plan-includes {
  font-size: 15px;
  font-weight: 500;
  color: var(--sm-text);
  margin: 0 0 var(--space-1);
}

.plan-feature-list {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.plan-feature-list li {
  position: relative;
  padding-left: 16px;
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--sm-text-body);
}

/* blue tick — inline SVG so there's no asset dependency (hex can't be a var inside a data URI) */
.plan-feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 9px;
  height: 9px;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='7' fill='none' viewBox='0 0 9 7'%3E%3Cpath stroke='%230085e8' stroke-linecap='round' stroke-width='2' d='M1 3.495 2.975 5.47a.25.25 0 0 0 .353 0L7.798 1'/%3E%3C/svg%3E");
}

/* Add-on item below the feature list (e.g. Shared data management in Enterprise
   mode) — separated from the list by a soft grey-3 divider. */
.plan-addon {
  margin: 0 0 var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--sm-grey-3);
  font-size: 14px;
  line-height: 1.5;
  color: var(--sm-text-body);
}

/* "Shared data management" label pops via the darker heading colour (no bold). */
.plan-addon .has-tip {
  color: var(--sm-text);
}

/* Card footer — groups the add-on note + CTA and pins them to the card bottom,
   so they line up across all four cards; the auto margin fills the space above. */
.plan-foot {
  margin-top: auto;
}

/* Reusable text tooltip — hover the text itself (dotted underline signals it).
   Bubble opens upward so it's not clipped when the trigger sits low in a card. */
.has-tip {
  position: relative;
  cursor: help;
  text-decoration: underline dotted;
  text-decoration-color: var(--sm-grey-5);
  text-underline-offset: 3px;
}

.has-tip::after {
  content: attr(data-tip);
  /* display:none (not just visibility:hidden) so the 240px bubble is OUT of layout
     when hidden — otherwise it sits off to the right and drags the page wider than
     the viewport (phantom horizontal scroll). Shown via display:block on hover. */
  display: none;
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  width: 240px;
  padding: 10px 12px;
  background: var(--sm-white);
  color: var(--sm-text);
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  border: 1px solid var(--sm-grey-3);
  border-radius: 16px;
  box-shadow: var(--soft-shadow);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
  z-index: 20;
}

.has-tip:hover::after {
  display: block;
  opacity: 1;
  visibility: visible;
}

/* Plan-card CTAs — scoped overrides of the global buttons: auto width (not full),
   own padding + 14px text, and the gap-grow hover applied to grey too. */
.plan-cta .blue-buttons,
.plan-cta .grey-buttons {
  width: auto;
  padding: 18px 24px;
  font-size: 14px;
}

.plan-cta .grey-buttons {
  gap: var(--space-2); /* base gap so hover can grow it (global grey sits at 24 = no grow) */
}

.plan-cta .grey-buttons:hover {
  gap: var(--space-3);
}

/* == COMPARISON TABLE ==
   Reusable feature/plan matrix. Column dividers on FEATURE rows only; blue ✓ /
   red ✕; row hover uses --sm-blue-pale; sticky header + CTA. Everything left-aligned. */
.compare-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* match the search box below it: first column (320px) minus its right gutter */
  width: calc(320px - var(--space-3));
  max-width: 100%;
}

/* Desktop only: clearance so the currency/term row doesn't clip the table's
   header row below it. On mobile (≤768) the table's own margin-top handles this. */
@media (min-width: 769px) {
  .compare-controls {
    margin-bottom: var(--space-3);
  }
}

/* the two selects split the row evenly, so together they equal the search width */
.compare-controls .form-select {
  flex: 1;
  min-width: 0;
}

/* Plan picker is mobile-only — revealed in the ≤768px block (single-tier view). */
.compare-plan-select {
  display: none;
}

.compare-search {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  border: 1px solid var(--sm-border);
  border-radius: 10px;
  padding: 9px 14px;
  min-width: 260px;
  margin-left: -24px;
}

.compare-search input {
  border: 0;
  outline: 0;
  background: transparent;
  width: 100%;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  color: var(--sm-text);
}

.compare-scroll {
  /* visible on desktop so row tooltips are not clipped; scrolls on small screens (see media below) */
  overflow: visible;
}

.compare-table {
  width: 100%;
  /* SEPARATE (not collapse) so position:sticky works reliably on the mobile frozen
     column + header — collapsed-border tables drop/detach sticky cells in mobile
     Safari/Chrome. border-spacing:0 keeps it visually identical to collapse; our
     dividers are single-sided border-lefts (no doubling) + box-shadows. */
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

/* base cell rhythm — 18px, left-aligned; dividers added to feature rows only.
   White opaque base (keeps sticky header + mobile frozen column solid); the
   pale-blue steady-state fill is applied ONLY to the plan-header boxes and the
   category title rows below — design review Jul 2026. */
.compare-table th,
.compare-table td {
  padding: var(--space-3);
  vertical-align: middle;
  text-align: left;
  font-size: 18px;
  background: var(--sm-white);
}

.compare-table th:first-child,
.compare-table td:first-child {
  width: 320px;
  padding-left: var(--space-3); /* 24px — text needs breathing room inside the pale-blue fill */
  padding-right: var(--space-2); /* 16px — trimmed so the widest slider price-note (e.g. "5001-10000") fits one line */
}

.compare-table th:not(:first-child),
.compare-table td:not(:first-child) {
  /* auto so table-layout:fixed divides the remaining width equally among however
     many plan columns exist (4 for Dashpivot/Gearbelt, 5 for Flowsite). The table
     always fills exactly 100% of the content box, so it never overflows the page
     regardless of column count or viewport — no fixed px min to push it wide. */
  width: auto;
}

/* Sticky header row, just under the shared nav — no divider line. The row cells
   default white (opaque for sticky); the individual plan boxes (Pro, Premium…)
   are tinted below so the titles read as bounded, not naked, while they float. */
.compare-table thead th {
  position: sticky;
  /* sits below the sticky toolbar when one exists (Flowsite); --ct-toolbar-h is 0 on
     pages without a toolbar, so their header still pins directly under the nav. */
  top: calc(var(--nav-h) + var(--ct-toolbar-h, 0px));
  background: var(--sm-white);
  z-index: 5;
  /* Top border so the header row reads as a bounded bar rather than colliding
     with the nav when it pins directly beneath it. */
  border-top: 1px solid var(--sm-border);
}

/* Sticky model-toggle bar (Flowsite): a div ABOVE the table (not a table cell, so it
   can't distort column widths). Pins under the nav and stays visible for the whole
   table scroll so the toggle is always reachable. */
.model-stickybar {
  position: sticky;
  top: var(--nav-h);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) 0;
  background: var(--sm-white);
}
.model-stickybar-desc {
  margin: 0;
  max-width: 42ch;
  font: 400 14px/1.4 "Roboto", sans-serif;
  color: var(--sm-text-body);
}
.model-stickybar .model-toggle {
  margin-bottom: 0;
  flex: 0 0 auto;
}

/* Plan-header boxes (Std / Pro / Premium / Platinum) — white, divided by a left
   border. Only the CTA inside is a link; the name/info is a tooltip trigger. */
.compare-table thead th.ct-plan-col {
  border-left: 1px solid var(--sm-border);
}

.ct-plan-head {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.ct-plan-name {
  font-family: "Sunflower", sans-serif;
  font-weight: 500;
  font-size: 24px;
  color: var(--sm-text);
  width: 100%;
}
.ct-cta a {
  display: none;
  background: var(--sm-white);
}
/* Category (title) rows — pale-blue fill to anchor each feature group.
   Stacked-sticky: each group title pins just under the (stuck) plan header and
   stays until the next group title scrolls up and replaces it. --ct-head-h is set
   by initCompareSticky to the pinned header's height; z-index 4 sits under the
   plan header (5) so titles slide beneath it. */
.ct-category td {
  font-family: "Sunflower", sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: var(--sm-text);
  padding-top: var(--space-4);
  background: var(--sm-blue-pale);
  /* Fixed height so EVERY title row is identical — the icon categories render ~4px
     taller than the icon-less ones, and a shorter pinned title can't fully cover a
     taller one during the stacked-sticky hand-off. 84px clears the tallest (81px). */
  height: 84px;
  position: sticky;
  top: calc(var(--nav-h) + var(--ct-toolbar-h, 0px) + var(--ct-head-h, 64px));
  z-index: 4;
  /* Top + bottom dividers via inset box-shadow, NOT border: on a border-collapse
     table the collapsed borders are painted into the table grid and drop out the
     moment a cell pins (sticky) in Chromium. box-shadow is painted on the cell, so
     it stays put when the row sticks. */
  box-shadow:
    inset 0 1px 0 var(--sm-border),
    inset 0 -1px 0 var(--sm-border);
}

/* Plan-header CTA — a persistent simple text link under each plan name (replaces
   the old footer CTA row). Brand-blue inline/tertiary link with a small arrow. */
.ct-head-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--space-1);
  font: 400 14px/1 "Roboto", sans-serif;
  color: var(--sm-text);
  text-decoration: none;
  white-space: nowrap;
}
.ct-head-cta img {
  transition: transform 0.2s ease;
}
.ct-head-cta:hover {
  text-decoration: none;
}
.ct-head-cta:hover img {
  transform: translateX(2px);
}

/* Optional category icon (e.g. Dashpivot / Sitemate square logos) */
.ct-category-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.ct-category-icon {
  display: block;
  width: 20px;
  height: 20px;
}

/* Feature rows — the ONLY rows with vertical column dividers */
.ct-feature td:not(:first-child) {
  border-left: 1px solid var(--sm-border);
}

/* Row hover — feature AND category rows: just the pale-blue fill, no dividers. */
.ct-feature:hover td,
.ct-category:hover td {
  background: var(--sm-blue-pale);
}

.ct-feature-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sm-text);
  font-size: 16px; /* smaller than the 18px values so long feature names fit one line */
}

/* Nested integration sub-row (e.g. Xero → Invoices and Bills): indent + lighten */
.ct-feature-name.ct-indent {
  padding-left: var(--space-2);
  color: var(--sm-text-body);
}

/* Integration brandmark shown before a row name (mirrors the live page's column-logo) */
.ct-row-logo {
  flex: none;
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* Info icon: hidden until its row is hovered; hover the icon for the tooltip */
.ct-info {
  position: relative;
  display: inline-flex;
  cursor: help;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.ct-info img {
  display: block;
  width: 15px;
  height: 15px;
}

/* body: reveal a feature row's info icon on row hover */
.ct-feature:hover .ct-info {
  opacity: 1;
  pointer-events: auto;
}

/* header: hovering a plan column tints it light blue and reveals its info icon
   (tooltip = that plan's Pick-Your-Model blurb) */
.ct-plan-col:hover {
  background: var(--sm-blue-pale);
  z-index: 30; /* above sibling sticky headers (z-index 5) so its tooltip isn't clipped */
}

.ct-plan-col:hover .ct-info {
  opacity: 1;
  pointer-events: auto;
}

/* Dotted underline signals a tooltip is available — shown alongside the hover
   reveal. Feature rows only underline when the row actually has an info icon. */
.ct-feature:hover .ct-feature-name:has(.ct-info) .ct-tip-label,
.ct-plan-col:hover .ct-plan-name {
  text-decoration: underline dotted;
  text-decoration-color: var(--sm-grey-5);
  text-underline-offset: 3px;
}

/* Help cursor over the label too (matching the info icon), wherever a tooltip exists */
.ct-feature-name:has(.ct-info),
.ct-plan-head {
  cursor: help;
}

/* Tooltip bubble — content comes from the data-tip attribute */
.ct-info::after {
  content: attr(data-tip);
  /* display:none when hidden so the 280px bubble is out of layout (else it extends
     past the viewport and creates phantom horizontal page scroll). Shown on hover. */
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  width: 280px;
  padding: 10px 12px;
  background: var(--sm-white);
  color: var(--sm-text);
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  text-transform: none;
  border: 1px solid var(--sm-grey-3);
  border-radius: 16px;
  box-shadow: var(--soft-shadow);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
  z-index: 20;
}

/* Reveal the tooltip on the info icon OR the underlined label (feature name / plan title) */
.ct-info:hover::after,
.ct-feature-name:hover .ct-info::after,
.ct-plan-head:hover .ct-info::after {
  display: block;
  opacity: 1;
  visibility: visible;
}

/* Priced rows (per-user price + embedded slider) */
.ct-price-sub {
  font-size: 14px;
  color: var(--sm-text-body);
  margin-top: var(--space-1);
}

.ct-price-note {
  font-size: 13px;
  color: var(--sm-text-body);
  margin-top: var(--space-1);
}

.ct-mini-slider {
  width: 100%;
  max-width: 260px;
  margin-top: var(--space-1);
}

.ct-cell-price {
  font-weight: 500;
  font-size: 18px;
  color: var(--sm-text);
}

.ct-cell-price .per {
  display: block;
  font-weight: 400;
  font-size: 13px;
  color: var(--sm-text-body);
}

/* Tick / cross / value */
.ct-tick,
.ct-cross {
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: middle;
  /* never shrink when sitting beside wrapping text inside the flex .ct-value
     (e.g. "Multiple workspaces") — keeps every tick the same 18px */
  flex: 0 0 auto;
}

.ct-tick {
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%230085E8'/%3E%3Cpath d='M6 10.5l2.5 2.5L14 7.5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ct-cross {
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M5 5l10 10M15 5L5 15' fill='none' stroke='%23E3514D' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

.ct-value {
  display: inline-flex;
  align-items: center;
  gap: 12px; /* 1.5 × space-1 — off-grid on purpose; 8px too tight, 16px too loose */
  justify-content: flex-start;
  color: var(--sm-text-body);
  font-size: 18px;
}

/* Sticky CTA row — no top line; flush button cells, greyed, with the same
   column dividers as the body so the row reads as part of the table. */
.compare-table tfoot td {
  position: sticky;
  bottom: 0;
  padding: 0;
  background: #fff;
  z-index: 5;
}

.compare-table tfoot td:not(:first-child) {
  border-left: 1px solid var(--sm-border);
}

/* CTA fills its cell — no pill, no rounded corners, sits flush */
.ct-cta {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3);
  color: var(--sm-text);
  font-size: 16px;
  text-decoration: none;
  transition: gap 0.2s ease;
}

.ct-cta:hover {
  gap: var(--space-2);
}

.ct-cta img {
  width: 16px;
  height: auto;
  display: block;
}

/* rows hidden by search */
.ct-feature.is-hidden,
.ct-category.is-hidden {
  display: none;
}

@media (max-width: 992px) {
  .plan-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .plan-card:nth-child(3) {
    border-left: 0;
  }
}

@media (max-width: 768px) {
  .model-controls {
    flex-direction: column;
    align-items: stretch;
  }

  /* Sticky toggle bar: drop the description on phones (keep the pinned bar compact) and
     let the toggle fill the width so both options stay tappable and nothing overflows. */
  .model-stickybar-desc {
    display: none;
  }
  .model-stickybar .model-toggle {
    display: flex;
    width: 100%;
  }
  .model-stickybar .model-btn {
    flex: 1;
    padding: var(--space-2);
  }

  .plan-cards {
    grid-template-columns: 1fr;
  }

  .plan-card {
    border-left: 0;
    border-top: 1px solid var(--sm-border);
    min-height: 0; /* stacked single-column: size to content, no forced floor */
  }

  .plan-card:first-child {
    border-top: 0;
  }

  /* ── Compare table — mobile: ONE tier at a time (no horizontal scroll) ───────
     The frozen-column + horizontal scroll fought mobile sticky (Safari/Chrome), so
     on phones the table shows the feature column + a SINGLE plan column, chosen by
     the plan dropdown (.compare-plan-select). Vertical scroll only, so the header +
     category titles use the same reliable top-sticky as desktop. Pattern à la
     Linear's mobile pricing. */

  /* Full-bleed: break the table out of the section's 16px side padding → 100vw.
     margin-top adds breathing room below the term/currency controls. */
  .compare-scroll {
    margin-inline: calc(-1 * var(--space-2));
    margin-top: var(--space-1);
  }

  /* Top border on the sticky header row (dropdown + CTA) so it reads as a distinct,
     bounded bar when pinned. */
  .compare-table thead th {
    border-top: 1px solid var(--sm-border);
  }

  /* Swap the search box out for the tier dropdown in the (sticky) header's first cell. */
  .compare-search {
    display: none;
  }
  .compare-plan-select {
    display: block;
    width: 100%;
  }

  /* Single tier: hide every plan cell, reveal only the selected one (table-cell so
     table-layout:fixed keeps the columns sized). */
  .compare-table [data-plan] {
    display: none;
  }
  .compare-table[data-mobile-plan="free"] [data-plan="free"],
  .compare-table[data-mobile-plan="standard"] [data-plan="standard"],
  .compare-table[data-mobile-plan="pro"] [data-plan="pro"],
  .compare-table[data-mobile-plan="premium"] [data-plan="premium"],
  .compare-table[data-mobile-plan="platinum"] [data-plan="platinum"] {
    display: table-cell;
  }

  /* Two columns: feature name + the selected tier. */
  .compare-table th:first-child,
  .compare-table td:first-child {
    width: 55%;
  }
  .compare-table th[data-plan],
  .compare-table td[data-plan] {
    width: 45%;
  }

  /* The tier name lives in the dropdown now — hide the in-header name/info so the
     "Try for free" CTA takes over the whole tier-column header cell. */
  .compare-table thead .ct-plan-head {
    display: none;
  }
  .compare-table thead .ct-plan-col br {
    display: none;
  }
  .compare-table thead .ct-head-cta {
    margin-top: 0;
    width: 100%;
    justify-content: center;
  }

  /* Touch has no hover — always surface the tooltip affordance (icon + underline). */
  .ct-info {
    opacity: 1;
    pointer-events: auto;
    position: static; /* don't anchor the bubble to the icon (mid-cell → runs off-screen) */
  }

  .ct-feature-name:has(.ct-info) .ct-tip-label,
  .ct-plan-name {
    text-decoration: underline dotted;
    text-decoration-color: var(--sm-grey-5);
    text-underline-offset: 3px;
  }

  /* Anchor the bubble to the left-aligned feature name so it opens from the left
     edge and stays on-screen; cap it to the viewport (minus gutters). */
  .ct-feature-name {
    position: relative;
  }
  .ct-info::after {
    max-width: calc(100vw - 2 * var(--space-3));
  }
}

/* == FAQ ACCORDION == */
.faq-item {
  border-bottom: 1px solid var(--sm-border);
  padding: var(--space-3) 0;
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  font-weight: 500;
  font-size: 18px;
  color: var(--sm-text);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "";
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--sm-grey-5);
  border-bottom: 2px solid var(--sm-grey-5);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
  transform: rotate(-135deg);
}

.faq-answer {
  padding-top: var(--space-3);
}

.faq-answer :last-child {
  margin-bottom: 0;
}