/* Findd site styles. Change the tokens in :root first. Brand rules: website-playbook/brand/. */

/* Roboto, self-hosted (findd.info cannot load Google Fonts). 400 body, 500 labels, 700 headlines. */
@font-face { font-family: "Roboto"; src: url("fonts/roboto-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("fonts/roboto-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("fonts/roboto-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("fonts/roboto-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --bg: #ffffff;
  --bg-soft: #f5f7f9;
  --fg: #14171a;
  --muted: #5b6570;
  --line: #e3e7eb;
  --brand: #2F7CF6;   /* Findd blue: logo, large headings, icons, big numbers */
  --accent: #176DF5;  /* accessible Findd blue (4.6:1 with white): links, buttons, blue bands. Pending approval */
  --accent-fg: #ffffff;
  --radius: 10px;
  --font: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --container: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
}
img { max-width: 100%; height: auto; }
a { color: var(--accent); }
h1, h2, h3 { line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 0.5em; font-weight: 700; }
h1 { font-size: clamp(32px, 5vw, 52px); letter-spacing: -0.02em; }
h2 { font-size: clamp(20px, 2.4vw, 26px); }
p { margin: 0 0 1em; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 16px; }
.prose { max-width: 760px; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 8px; z-index: 100; background: var(--bg); padding: 8px 12px; }

.button {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.button-primary { background: var(--accent); color: var(--accent-fg); }
.button:hover { filter: brightness(0.95); }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 24px;
  min-height: 64px;
}
.logo { display: inline-flex; align-items: center; line-height: 0; }
.logo img { display: block; height: 28px; width: auto; }

.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-toggle-label {
  margin-left: auto;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
}
.nav-toggle:focus-visible + .nav-toggle-label { outline: 2px solid var(--accent); outline-offset: 2px; }

.site-nav { display: none; width: 100%; padding: 8px 0 16px; }
.nav-toggle:checked ~ .site-nav { display: block; max-height: calc(100vh - 64px); overflow-y: auto; }

.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-group > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 0;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: 0.6;
}
.nav-group[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.nav-group > summary.is-current { color: var(--accent); }

.dropdown ul { list-style: none; margin: 0; padding: 0; }
.dropdown a {
  display: block;
  padding: 6px 0;
  color: var(--fg);
  text-decoration: none;
}
.dropdown a:hover, .dropdown a[aria-current="page"] { color: var(--accent); }
.dropdown { padding: 0 0 12px 12px; }
.dropdown-heading {
  margin: 8px 0 4px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.nav-actions { display: flex; align-items: center; gap: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.nav-link { color: var(--fg); font-weight: 600; text-decoration: none; }
.nav-link:hover { color: var(--accent); }

@media (min-width: 1000px) {
  .header-inner { flex-wrap: nowrap; }
  .nav-toggle-label { display: none; }
  .site-nav, .nav-toggle:checked ~ .site-nav {
    display: flex;
    align-items: center;
    width: auto;
    flex: 1;
    padding: 0;
  }
  .nav-list { display: flex; gap: 22px; }
  .nav-item { position: relative; }
  .nav-item-wide { position: static; }
  .nav-group > summary { padding: 20px 0; justify-content: flex-start; }
  .dropdown {
    position: absolute;
    top: calc(100% - 8px);
    left: -16px;
    min-width: 240px;
    padding: 12px 16px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(20, 23, 26, 0.08);
  }
  .dropdown-wide {
    left: 16px;
    right: 16px;
    top: calc(100% - 4px);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 20px 24px;
  }
  .nav-actions { margin-left: auto; padding-top: 0; border-top: 0; }
}

/* ---------- Page sections ---------- */

.hero { padding: 64px 0 40px; background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.hero h1 { max-width: 880px; }
.hero-inner { display: grid; gap: 32px; align-items: center; }
.hero-visual { display: grid; gap: 16px; }
@media (min-width: 900px) {
  /* Visual to the right of the headline, about 30% of the width */
  .hero-right .hero-inner { grid-template-columns: 7fr 3fr; }
  /* Images surrounding the headline: main image left, the others stacked right */
  .hero-surround { padding: 72px 0; }
  .hero-surround .hero-inner { grid-template-columns: 1fr 2fr 1fr; }
  .hero-surround .hero-visual-main { order: -1; }
  .hero-surround .hero-visual-main .ph { min-height: 360px; }
  .hero-surround .hero-text { text-align: center; }
  .hero-surround .hero-text .lede { margin-left: auto; margin-right: auto; }
}
.lede { font-size: clamp(18px, 2vw, 21px); color: var(--muted); max-width: 760px; }
.hero-actions { margin-top: 24px; }

.section { padding: 48px 0; }
.section + .section { padding-top: 0; }
.section ul:not(.cards) { padding-left: 1.2em; }

.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.cards-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.card {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}
.card h2 { font-size: 18px; margin: 0; }
.cards-3 .card { padding: 28px; }
.cards-3 .card h2 { font-size: 22px; margin-bottom: 12px; }
.cards-3 .card p { color: var(--muted); }
.eyebrow {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.card-link { font-weight: 600; }
/* "Learn more ›" (Design Guidelines): always its own line, a paragraph's space above it, the whole
   line one blue link in the regular weight. */
p.learn-more { margin: 1em 0 0 !important; font-weight: 400; }  /* !important: card and column styles set p margins to 0 */
p.learn-more a { color: var(--accent); font-weight: 400; }
/* A button after text or a Learn more link: one and a half paragraph gaps above it. */
* + .actions, * + .hero-actions { margin-top: 1.5em !important; }

/* ---------- Footer ---------- */

.site-footer {
  margin-top: 64px;
  padding: 48px 0 32px;
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  font-size: 15px;
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 32px 24px;
}
.footer-heading { font-weight: 700; margin-bottom: 8px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: 0 0 6px; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--accent); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}
.footer-bottom p { margin: 0; }
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-bottom li { margin: 0; white-space: nowrap; }

/* ---------- Placeholders, icons, logos ---------- */

.ph {
  margin: 0;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 20px;
  border: 2px dashed #c4ccd4;
  border-radius: var(--radius);
  background: repeating-linear-gradient(135deg, #eef1f4 0 12px, #e8ecf0 12px 24px);
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}
.ph-label { font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; }
.section .ph { margin: 8px 0 16px; }
.hero-right .ph { min-height: 260px; }

.icon { display: block; width: 40px; height: 40px; margin-bottom: 14px; }

.section-logos { padding: 40px 0; border-bottom: 1px solid var(--line); }
.logos {
  list-style: none;
  margin: 0;
  padding: 0 !important;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.logo-ph {
  padding: 12px 18px;
  border: 1px dashed #c4ccd4;
  border-radius: 8px;
  color: var(--muted);
  font-weight: 600;
  font-size: 14px;
}

.actions { margin-top: 8px; }

/* Longer text pages (legal) */
.prose h3 { font-size: 19px; margin-top: 1.6em; }
.prose h4 { font-size: 17px; margin-top: 1.4em; }

/* ---------- Tables and pricing ---------- */

.table-wrap { overflow-x: auto; margin: 16px 0; }
.table-wrap table { border-collapse: collapse; min-width: 560px; width: 100%; font-size: 15px; }
.table-wrap th, .table-wrap td { padding: 10px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.table-wrap thead th { background: var(--bg-soft); }

/* Pricing: "Everything in Basic plus:" and other lead-ins above a feature list */
.lead-in { margin: 0 0 4px; font-weight: 700; }

/* Icon grid: "[ICON: x] text" lines under a heading */
.icon-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0 !important;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px 28px;
}
.icon-list li { display: flex; gap: 14px; align-items: flex-start; }
.icon-list .icon { width: 32px; height: 32px; flex: none; margin: 2px 0 0; }
.icon-list p { margin: 0; }
.prose h3 + p { margin-top: 0; }

/* Feature cards: short heading + paragraph sections shown as a grid */
.feature-cards .card h2 { font-size: 19px; margin-bottom: 8px; }
.feature-cards .card p { margin: 0; color: var(--muted); }
/* Customer and partner logos: one colour, grey on light backgrounds and white on blue ones. Each logo's
   height (--h) is set by the build so every logo covers about the same area. */
.brand-logo { display: flex; align-items: center; }
.brand-logo img { display: block; width: auto; height: var(--h, 36px); max-width: 100%; filter: brightness(0); opacity: 0.55; }
.logos:has(.brand-logo) { gap: 28px 48px; align-items: center; }
.prose .logos:has(.brand-logo) { margin: 24px 0; }
.hero .brand-logo img, .site-footer .brand-logo img { filter: brightness(0) invert(1); opacity: 0.9; }
.story-logos .brand-logo img { opacity: 0.7; }
@media (max-width: 600px) {
  .logos:has(.brand-logo) { gap: 20px 28px; }
  .brand-logo img { height: calc(var(--h, 36px) * 0.8); }
}
.feature-cards .logos { justify-content: flex-start; margin-top: 14px; gap: 8px; }
.feature-cards .logo-ph { padding: 6px 10px; font-size: 12px; }

/* [LAYOUT: alternating]: text and visual side by side, switching sides each row */
.alt-row-inner { display: grid; gap: 24px; align-items: center; }
.alt-row-text p:last-child { margin-bottom: 0; }
.alt-row .ph { margin: 0; min-height: 240px; }
@media (min-width: 900px) {
  .alt-row { padding: 40px 0; }
  .alt-row-inner { grid-template-columns: 1fr 1fr; gap: 56px; }
  .alt-row-flip .alt-row-text { order: 2; }
  .alt-row .ph { min-height: 300px; }
}
.ph-gif { border-style: dotted; }

/* [MESSAGES]: example messages as text bubbles. Stacked by default; site.js plays them one at a
   time by adding .is-playing (pop up from below, hold, float out the top). */
.messages {
  padding: 24px;
  border-radius: var(--radius);
  background: var(--bg-soft);
  border: 1px solid var(--line);
}
.messages-list { list-style: none; margin: 0; padding: 0 !important; display: grid; gap: 12px; }
.message {
  max-width: 88%;
  padding: 10px 14px 12px;
  border-radius: 18px 18px 18px 4px;
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(20, 23, 26, 0.06);
}
.message p { margin: 0; font-size: 15px; line-height: 1.45; }
.message-from { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 700; color: var(--accent); }
.message-out { margin-left: auto; border-radius: 18px 18px 4px 18px; background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.message-out .message-from { color: inherit; opacity: 0.85; text-align: right; }
.messages.is-playing .message-out { left: auto; right: 0; transform-origin: right bottom; }

/* Dots under the messages: one per message, the current one highlighted (added by site.js) */
.message-dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.message-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #c4ccd4;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.message-dots button[aria-current="true"] { background: var(--accent); transform: scale(1.25); }
.message-dots button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.messages.is-playing .messages-list { position: relative; display: block; height: var(--stage-h, 160px); }
.messages.is-playing .message {
  position: absolute;
  left: 0;
  top: 50%;
  opacity: 0;
  transform: translateY(calc(-50% + 56px)) scale(0.92);
  transform-origin: left bottom;
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease-out;
}
.messages.is-playing .message.is-in { opacity: 1; transform: translateY(-50%) scale(1); }
.messages.is-playing .message.is-out {
  opacity: 0;
  transform: translateY(calc(-50% - 64px)) scale(0.8);
  transition: transform 0.4s cubic-bezier(0.55, 0, 1, 0.45), opacity 0.3s ease-in;
}

/* Grid columns may shrink below their content's width, so long content can't widen a row */
.alt-row-text, .alt-row-visual, .hero-text, .hero-visual { min-width: 0; }

/* [LAYOUT: band]: a full-width blue band that sets a section apart. Items sit 3 across on
   desktop with extra space between rows, and become a sideways-swipe list on phones. */
.band {
  margin: 48px 0;
  padding: 64px 0;
  background: var(--accent);
  color: var(--accent-fg);
}
.band h2 { color: inherit; margin-bottom: 32px; }
.band a { color: inherit; }
.band-list { list-style: none; margin: 0; padding: 0; }
.band-list li { display: flex; gap: 14px; align-items: flex-start; }
.band-list p { margin: 0; }
.band-list .icon { width: 32px; height: 32px; flex: none; margin: 2px 0 0; filter: brightness(0) invert(1); }
@media (min-width: 900px) {
  .band { padding: 80px 0; }
  .band-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 36px; }
}
@media (max-width: 899px) {
  /* Swipe sideways; the next card peeks in so it's clear there's more */
  .band-list {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 12px;
    margin-right: -16px;
    padding-right: 16px;
    scrollbar-width: none;
  }
  .band-list::-webkit-scrollbar { display: none; }
  .band-list li {
    flex: 0 0 80%;
    scroll-snap-align: start;
    flex-direction: column;
    padding: 20px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
  }
}

/* ---------- Blog ---------- */

.blog-hero { padding: 48px 0 40px; }
.blog-hero .lede { margin-bottom: 20px; }
.post-kicker { margin: 0 0 8px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.post-kicker a { text-decoration: none; }
.post-meta { margin: 0 0 8px; font-size: 14px; color: var(--muted); }

.blog-search { max-width: 520px; margin-bottom: 20px; }
.blog-search label { display: block; font-weight: 600; margin-bottom: 6px; }
.blog-search input {
  width: 100%;
  padding: 10px 14px;
  font: inherit;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
}
.blog-search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.blog-search-status { margin: 6px 0 0; font-size: 14px; color: var(--muted); min-height: 1.4em; }

.tag-list { list-style: none; margin: 0; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 8px; }
.tag-nav { display: flex; align-items: flex-start; gap: 8px; position: relative; }
.tag-nav > .tag-list { flex: 1; min-width: 0; }
.tag-more { position: relative; flex: none; }
.tag-more > summary { list-style: none; cursor: pointer; white-space: nowrap; }
.tag-more > summary::-webkit-details-marker { display: none; }
.tag-more > summary::after { content: " ▾"; font-size: 11px; }
.tag-more-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; list-style: none; margin: 0; padding: 8px !important;
  display: flex; flex-direction: column; gap: 6px; min-width: 200px; background: var(--bg); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(20, 30, 50, .12); }
.tag-more-list .tag { display: block; color: var(--fg); }
.tag {
  display: inline-block;
  padding: 3px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  text-decoration: none;
}
.tag:hover { border-color: var(--accent); color: var(--accent); }
.tag.is-current { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.tag-count { font-weight: 400; opacity: 0.7; }

.post-grid {
  list-style: none;
  margin: 0;
  padding: 0 !important;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 28px;
}
.post-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg); }
.post-card[hidden] { display: none; }
.post-card-image { display: block; aspect-ratio: 800 / 420; background: var(--bg-soft); }
.post-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.post-card-text { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.post-card-text > p:not(.post-meta) { color: var(--muted); font-size: 16px; }
.post-card-text .tag-list { margin-top: auto; }
.post-card-title { font-size: 20px; margin: 0 0 8px; }
.post-card-title a { color: var(--fg); text-decoration: none; }
.post-card-title a:hover { color: var(--accent); }
.post-card .tag { font-size: 13px; padding: 2px 10px; }

.post-header { padding-top: 48px; padding-bottom: 24px; max-width: 792px; } /* the body column (760px) plus the container padding */
.post-header h1 { font-size: clamp(30px, 4.4vw, 46px); text-wrap: pretty; } /* fill the column; balance left every line short */
.post-header .tag-list { margin-top: 12px; }
.post-hero { margin: 0 auto 32px; max-width: 1040px; padding: 0 16px; }
.post-hero img { display: block; width: 100%; max-height: 520px; object-fit: cover; border-radius: var(--radius); }
.post-body { margin: 0 auto; font-size: 18px; line-height: 1.7; }
.post-body h2 { margin-top: 1.6em; }
.post-body h3, .post-body h4 { margin: 1.4em 0 0.5em; line-height: 1.3; }
.post-body h3 { font-size: 21px; }
.post-body h4 { font-size: 18px; }
.post-body ul, .post-body ol { padding-left: 1.3em; margin: 0 0 1em; }
.post-body li { margin-bottom: 0.35em; }
.post-body blockquote { margin: 1.2em 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--accent); color: var(--muted); }
.post-body hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.post-body a { overflow-wrap: anywhere; }
.post-figure, .post-video { margin: 1.6em 0; }
.post-stats { list-style: none; margin: 1.6em 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.post-stats li { margin: 0; padding: 16px; border-radius: 8px; background: var(--bg-soft); display: flex; flex-direction: column; gap: 6px; }
.post-stats strong { font-size: 20px; line-height: 1.15; color: var(--accent); font-variant-numeric: tabular-nums; }
.post-stats span { font-size: 15px; line-height: 1.4; color: var(--muted); }
.post-figure img { display: block; margin: 0 auto; max-height: 640px; width: auto; border-radius: 6px; }
.post-figure figcaption, .post-video figcaption { margin-top: 8px; font-size: 14px; color: var(--muted); text-align: center; }
.video-frame { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 6px; overflow: hidden; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.post-footer { padding-top: 16px; padding-bottom: 48px; }
.post-footer .prose { margin: 0 auto; border-top: 1px solid var(--line); padding-top: 24px; }
.post-footer .tag-list { margin-bottom: 16px; }
.post-related { padding: 48px 0; background: var(--bg-soft); border-top: 1px solid var(--line); }

/* [LAYOUT: columns]: heading + text as columns, 3 across on desktop */
.columns { display: grid; gap: 32px; }
.column h2 { font-size: 21px; margin-bottom: 8px; }
.column p { color: var(--muted); margin: 0; }
@media (min-width: 900px) { .columns { grid-template-columns: repeat(3, 1fr); gap: 40px; } }

/* Product tags under a band item ("TLM · DiDi") */
.band-tags { margin-top: 8px !important; font-size: 13px; opacity: 0.8; }
.band-list li > div { min-width: 0; }

/* [TIME-BASED] sections: shown as an announcement until their date */
.announcement .container { padding: 24px 28px; border-radius: var(--radius); background: var(--bg-soft); border-left: 4px solid var(--accent); }

/* [FORM] placeholder */
.ph-form { min-height: 220px; }

/* ---------- Products menu: featured page, then columns with icons and subtitles ---------- */
.nav-rich { display: flex !important; gap: 12px; align-items: flex-start; padding: 8px 0 !important; }
.nav-icon { width: 28px; height: 28px; flex: none; margin-top: 1px; }
.nav-text { display: flex; flex-direction: column; }
.nav-title { font-weight: 500; }
.nav-sub { font-size: 13px; color: var(--muted); line-height: 1.35; }
.nav-feature {
  display: flex !important;
  flex-direction: column;
  gap: 6px;
  padding: 0 0 14px !important;
  color: var(--fg) !important;
  text-decoration: none;
}
.nav-feature-visual {
  display: grid;
  place-items: center;
  height: 120px;
  margin-bottom: 8px;
  border-radius: var(--radius);
  background: var(--brand);
}
.nav-feature-visual img { height: 50px; width: auto; }
.nav-feature-title { font-size: 17px; font-weight: 700; }
.nav-feature-blurb { font-size: 14px; color: var(--muted); line-height: 1.45; }
.nav-feature-more { font-size: 14px; font-weight: 500; color: var(--accent); }
.nav-feature:hover .nav-feature-title, .nav-feature[aria-current="page"] .nav-feature-title { color: var(--accent); }
@media (min-width: 1000px) {
  .dropdown-featured { grid-template-columns: 1.15fr 1fr 1fr; }
  .dropdown-featured .nav-feature { padding: 0 24px 0 0 !important; border-right: 1px solid var(--line); }
}
.columns-title { margin-bottom: 8px; }
.column h3 { font-size: 20px; margin-bottom: 8px; }
.columns-title + .columns, .columns-title + p + .columns { margin-top: 24px; }

/* ===================== Design edits, 2026-10-27 (Marko) ===================== */

/* 1. Page headers (the big headline block) on Findd blue, white text */
.hero { background: var(--accent); color: #fff; border-bottom: 0; }
.hero h1, .hero p, .hero .lede, .hero h2 { color: #fff; }
.hero a:not(.button) { color: #fff; }
.hero .button-primary { background: #fff; color: var(--accent); border-color: #fff; }
.hero .button:not(.button-primary) { color: #fff; border-color: #fff; }
.hero .ph { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.6); color: #fff; }

/* 2. Footer on Findd blue, white text */
.site-footer { background: var(--accent); color: #fff; border-top: 0; }
.site-footer a, .site-footer .footer-heading, .footer-bottom { color: #fff; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-bottom { border-top-color: rgba(255, 255, 255, 0.35); }

/* 4 + 5. Footer: logo one column wide on top; Solutions across two columns */
.footer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
.footer-brand { margin-bottom: 36px; }
.footer-logo { display: block; }
.footer-logo img { display: block; width: 100%; max-width: 180px; height: auto; }
.footer-split { grid-column: span 2; }
.footer-split-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.footer-col ul + .footer-heading { margin-top: 28px; }
@media (min-width: 900px) {
  .footer-grid { grid-template-columns: repeat(5, 1fr); gap: 32px 28px; }
  .footer-logo img { max-width: none; }
}

/* 3. Homepage: space between the line under the logos and the product cards */
.section-logos + .section { padding-top: 48px; }

/* 6 + 7. Products menu: pale blue rounded hover on each block; icons centred on their text */
.dropdown-featured .nav-feature,
.dropdown-featured .dropdown-col a {
  margin: 0 -10px;
  padding: 8px 10px !important;
  border-radius: 10px;
  transition: background 0.15s;
}
.dropdown-featured .nav-feature:hover,
.dropdown-featured .dropdown-col a:hover { background: #EAF2FE; }  /* pale tint of Findd blue */
.nav-rich { align-items: center; }
.nav-icon { margin-top: 0; }
@media (min-width: 1000px) {
  .dropdown-featured .nav-feature { padding: 10px !important; margin: 0; border-right: 0; }
}

/* 8. Alternating rows: white and pale grey, with more space */
.section.alt-row { padding: 56px 0; }
.alt-row-shade { background: var(--bg-soft); }
@media (min-width: 900px) { .section.alt-row { padding: 88px 0; } }
/* Blog topic buttons on the blue page header: outlined in white; the current topic solid white */
.hero .tag { background: transparent; border-color: rgba(255, 255, 255, 0.7); color: #fff; }
.hero .tag:hover { background: rgba(255, 255, 255, 0.15); border-color: #fff; color: #fff; }
.hero .tag.is-current { background: #fff; border-color: #fff; color: var(--accent); }
.hero .tag-count { opacity: 0.85; }
.hero .blog-search-status { color: #fff; }

/* [LAYOUT: two-then-three]: two featured items side by side, the rest 3 across underneath.
   An uneven count leaves a blank cell. On phones the 3-across row scrolls sideways. */
.system-grid { list-style: none; margin: 0; padding: 0 !important; display: grid; gap: 20px; }
.system-grid + .system-grid { margin-top: 20px; }
.system-card h3 { font-size: 20px; margin: 10px 0 8px; }
.system-card p { font-size: 15px; color: var(--muted); }
.system-card p:last-child { margin-bottom: 0; }
.system-card .logos { justify-content: flex-start; gap: 8px; }
.system-card .logo-ph { padding: 6px 10px; font-size: 12px; }
/* Partner logos in integration cards: smaller, left-aligned */
.system-card .logos:has(.brand-logo), .feature-cards .logos:has(.brand-logo) { justify-content: flex-start; gap: 14px 24px; margin: 4px 0 14px; }
.system-card .brand-logo img, .feature-cards .brand-logo img { height: calc(var(--h, 36px) * 0.6); }
.system-card .brand-logo:only-child img, .feature-cards .brand-logo:only-child img { height: calc(var(--h, 36px) * 0.85); }
@media (min-width: 900px) {
  .system-grid-two { grid-template-columns: repeat(2, 1fr); }
  .system-grid-three { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 899px) {
  .system-grid-three {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-right: -16px;
    padding-right: 16px !important;
    padding-bottom: 8px !important;
    scrollbar-width: none;
  }
  .system-grid-three::-webkit-scrollbar { display: none; }
  .system-grid-three > li { flex: 0 0 80%; scroll-snap-align: start; }
}

/* Section types from the doc's Design Guidelines tab, 2026-10-28 */

/* [LAYOUT: before-after]: "Without Findd" and "With Findd" side by side; two tabs on phones.
   The tabs are radio buttons, so they work without JavaScript and both texts stay in the HTML. */
.ba { position: relative; }
.ba-radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ba-col { padding: 28px; border-radius: var(--radius); }
.ba-col h3 { font-size: 15px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 12px; }
.ba-col p:last-child { margin-bottom: 0; }
.ba-before { background: var(--bg-soft); }
.ba-before h3 { color: var(--muted); }
.ba-after { background: #EAF2FE; }
.ba-after h3 { color: var(--accent); }
/* A Learn more line under the before/after cards keeps clear of them */
.before-after .ba ~ p { margin-top: 32px; margin-bottom: 0; }
.ba-tabs { display: none; }
@media (min-width: 900px) {
  .ba { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 8px; }
  .ba-col { padding: 36px; }
}
@media (max-width: 899px) {
  .ba-tabs { display: flex; gap: 6px; margin-bottom: 12px; padding: 4px; background: var(--bg-soft); border-radius: 999px; }
  .ba-tabs label { flex: 1; text-align: center; padding: 10px 12px; border-radius: 999px; font-weight: 500; font-size: 15px; cursor: pointer; color: var(--muted); }
  .ba-r-before:checked ~ .ba-tabs .ba-t-before,
  .ba-r-after:checked ~ .ba-tabs .ba-t-after { background: var(--accent); color: #fff; }
  .ba-r-before:focus-visible ~ .ba-tabs .ba-t-before,
  .ba-r-after:focus-visible ~ .ba-tabs .ba-t-after { outline: 2px solid var(--accent); outline-offset: 2px; }
  .ba-r-before:checked ~ .ba-after, .ba-r-after:checked ~ .ba-before { display: none; }
  .ba-col h3 { display: none; }
}

/* [LAYOUT: story]: a customer story in a pale blue pop-out with soft, organic corners */
.story-box {
  position: relative;
  overflow: hidden;
  max-width: 880px;
  margin: 0 auto;
  padding: 40px 28px;
  background: #EAF2FE;
  border-radius: 48px 120px 56px 96px / 64px 80px 96px 72px;
}
.story-box::before {
  content: "";
  position: absolute;
  right: -80px;
  top: -90px;
  width: 260px;
  height: 220px;
  background: #D6E6FD;
  border-radius: 58% 42% 55% 45% / 48% 60% 40% 52%;
  z-index: 0;
}
.story-box > * { position: relative; z-index: 1; }
.story-box h2 { color: var(--brand); }
.story-box p { font-size: 20px; line-height: 1.55; }
.story-box p:last-child { margin-bottom: 0; }
.story-logos { justify-content: flex-start; margin: 0 0 20px; gap: 10px; }
.story-logos .logo-ph { background: #fff; }
@media (min-width: 900px) {
  .story-box { padding: 64px 72px; }
  .story-box p { font-size: 23px; }
}

/* [LAYOUT: columns]: horizontal cards you can swipe on phones */
@media (max-width: 899px) {
  .columns {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-right: -16px;
    padding-right: 16px;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .columns::-webkit-scrollbar { display: none; }
  .column { flex: 0 0 80%; scroll-snap-align: start; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
}

/* Design Guidelines tab, 2026-10-28 (second pass) */

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Before/after right under the header: the cards overlap the header's bottom edge */
.hero:has(+ .ba-overlap) { padding-bottom: 104px; }
.section.ba-overlap { margin-top: -72px; padding-top: 0; position: relative; }
.ba-overlap .ba-col { box-shadow: 0 10px 30px rgba(20, 23, 26, 0.08); }
.ba-overlap .ba-tabs { box-shadow: 0 6px 18px rgba(20, 23, 26, 0.08); }
@media (min-width: 900px) { .ba-overlap .ba { margin-top: 0; } }

/* Section backgrounds that follow on from the section above */
.section-shade { background: var(--bg-soft); }
.section.os-section { padding: 72px 0; }
.alt-row + .os-section, .alt-row-shade + .os-section { margin-top: 0; }

/* Where two sections meet with different backgrounds, both keep their padding, so text never
   sits on the edge. (.section + .section drops the top padding only between white sections.) */
:is(.hero, .alt-row-shade, .section-shade, .band, .post-related) + .section:not(.alt-row-shade, .section-shade, .ba-overlap) { padding-top: 48px; }
/* And the other way: a grey section after a white one keeps its own top padding (ISSA 2026,
   Marko, 2026-11-09: the text sat on the grey's top edge). */
.section:not(.section-shade, .alt-row-shade) + .section.section-shade { padding-top: 48px; }
/* The feature comparison is grey: it keeps its own top padding after a white section. */
.section.fc-section { padding: 64px 0 72px; }

/* A page that ends on a shaded or blue section runs straight into the footer, with no white
   strip between them. Browsers without :has() keep the gap. */
main:has(> :last-child:is(.hero, .alt-row-shade, .section-shade, .band, .post-related, .announcement-photo)) + .site-footer { margin-top: 0; }
/* A blue band right after (or before) a shaded section joins it, with no white strip between. */
:is(.alt-row-shade, .section-shade) + .band { margin-top: 0; }
.band:has(+ :is(.alt-row-shade, .section-shade)) { margin-bottom: 0; }
main > .band:last-child { margin-bottom: 0; }

/* Forms: a white card. HubSpot draws the form into .hs-form-frame; the placeholder underneath
   shows until it does (on findd.info it never loads). */
.form-card { background: #fff; color: var(--fg); border-radius: var(--radius); padding: 28px; box-shadow: 0 10px 30px rgba(20, 23, 26, 0.12); }
.form-card .form-title { color: var(--fg) !important; font-size: 22px; margin: 0 0 16px; }
.form-card .ph { margin: 0; background: var(--bg-soft) !important; border-color: var(--line) !important; color: var(--muted) !important; min-height: 220px; }
.form-card:has(.hs-form-frame > *) .form-fallback { display: none; }
.hero-form .hero-inner { align-items: start; }
.hero-details { min-width: 0; }
.hero-details ul { padding-left: 1.2em; }
.hero-details p:last-child { margin-bottom: 0; }
@media (min-width: 900px) {
  .hero-form .hero-inner { grid-template-columns: 1fr 1fr; grid-template-areas: "text form" "details form"; column-gap: 56px; row-gap: 16px; }
  .hero-form .hero-text { grid-area: text; }
  .hero-form .hero-form-card { grid-area: form; }
  .hero-form .hero-details { grid-area: details; }
}
.form-split { display: grid; gap: 32px; }
.form-alone .form-card { max-width: 640px; margin: 0 auto; }
@media (min-width: 900px) {
  .form-split { grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
  .form-split-form { order: 2; }
}

/* Legal documents: one narrow column, no blue header; copies and prints cleanly */
.legal { padding: 56px 0 72px; }
.legal-inner { max-width: 720px; }
.legal h1 { font-size: 36px; margin-bottom: 32px; }
.legal h2 { font-size: 22px; margin-top: 32px; }
.legal h3 { font-size: 18px; margin-top: 24px; }
.legal p, .legal li { font-size: 16px; line-height: 1.65; }
.legal .table-wrap { margin: 16px 0; }
@media print {
  header, footer, .site-header, .site-footer, nav { display: none !important; }
  body { background: #fff; color: #000; }
  .legal { padding: 0; }
  .legal-inner { max-width: none; }
  .legal a { color: #000; }
}

/* [LAYOUT: cards]: value cards in one row on desktop, stacked on phones */
.value-cards { list-style: none; margin: 24px 0 0; padding: 0 !important; display: grid; gap: 16px; }
.value-cards .card h3 { font-size: 18px; margin: 0 0 8px; }
.value-cards .card p { margin: 0; color: var(--muted); font-size: 15px; }
@media (min-width: 900px) { .value-cards { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 20px; } }

/* [LAYOUT: people]: photo, name and title cards */
.people { list-style: none; margin: 24px 0 0; padding: 0 !important; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
.person { text-align: center; }
.person-photo {
  width: 120px; height: 120px; margin: 0 auto 12px; border-radius: 50%;
  display: grid; place-items: center; background: #EAF2FE; color: var(--brand);
  font-size: 30px; font-weight: 700; border: 2px dashed #B9D3FB;
}
.person-photo-img { display: block; object-fit: cover; border: 0; background: var(--bg-soft); }
.person h3 { font-size: 17px; margin: 0 0 2px; }
.person p { margin: 0; color: var(--muted); font-size: 14px; }
@media (min-width: 700px) { .people { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .people { grid-template-columns: repeat(5, 1fr); } }

/* Columns with several titled groups */
.columns + .columns-title, .columns + p + .columns-title { margin-top: 48px; }

/* [LAYOUT: pricing-grid]: the table as a grid of boxes; one plan per tab on phones */
.pg-radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pg-tabs { display: none; }
.pg-cell, .pg-head { min-width: 0; }
.pg-cell { padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); font-size: 15px; }
.pg-cell ul:not(.pg-list) { margin: 0; padding-left: 1.1em !important; }
.pg-cell li { margin-bottom: 4px; }
.pg-cell p:last-child { margin-bottom: 0; }
.pg-head .plan-name { font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand); margin: 0; }
.pg-head .plan-price { font-size: 28px; font-weight: 700; margin: 4px 0 0; color: var(--fg); }
.pg-product h3 { font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin: 0; }
.pg-note { font-size: 13px; line-height: 1.4; color: var(--muted); margin: 6px 0 0; }
.pg-cell .cell-price { font-size: 17px; font-weight: 700; color: var(--fg); margin: 0 0 10px; }
.pg-addon .addon-name { font-size: 18px; font-weight: 700; color: var(--brand); margin: 0 0 6px; }
.pg-addon { background: var(--bg-soft); }
@media (min-width: 900px) {
  .pg { display: grid; grid-template-columns: 120px repeat(var(--plans), 1fr); gap: 12px; }
  .pg-head { align-self: end; padding: 0 4px 4px; }
  .pg-product { align-self: center; }
  .pg-cell-product, .pg-cell-note { display: none; }
}
@media (max-width: 899px) {
  .pg-tabs { display: flex; gap: 6px; margin-bottom: 16px; padding: 4px; background: var(--bg-soft); border-radius: 999px; }
  .pg-tabs label { flex: 1; text-align: center; padding: 10px 8px; border-radius: 999px; font-weight: 500; font-size: 15px; cursor: pointer; color: var(--muted); }
  .pg-product { display: none; }
  .pg-head, .pg-cell:not(.pg-addon) { display: none; }
  .pg-head { margin-bottom: 12px; }
  .pg-cell { margin-bottom: 12px; }
  .pg-cell-product { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 8px; color: var(--muted); }
  .pg-cell-note { margin: -4px 0 10px; }
  .pg-r-1:checked ~ .pg .pg-plan-1, .pg-r-2:checked ~ .pg .pg-plan-2,
  .pg-r-3:checked ~ .pg .pg-plan-3, .pg-r-4:checked ~ .pg .pg-plan-4 { display: block; }
  .pg-r-1:checked ~ .pg-tabs .pg-t-1, .pg-r-2:checked ~ .pg-tabs .pg-t-2,
  .pg-r-3:checked ~ .pg-tabs .pg-t-3, .pg-r-4:checked ~ .pg-tabs .pg-t-4 { background: var(--accent); color: #fff; }
  .pg-r-1:focus-visible ~ .pg-tabs .pg-t-1, .pg-r-2:focus-visible ~ .pg-tabs .pg-t-2,
  .pg-r-3:focus-visible ~ .pg-tabs .pg-t-3, .pg-r-4:focus-visible ~ .pg-tabs .pg-t-4 { outline: 2px solid var(--accent); outline-offset: 2px; }
}

/* [LAYOUT: columns-2]: the same as columns, 2 across on desktop */
@media (min-width: 900px) { .columns.columns-2 { grid-template-columns: repeat(2, 1fr); gap: 56px; } }

/* Value cards: an icon on top; on phones a sideways swipe like the other card rows */
.value-cards .card .icon { width: 32px; height: 32px; margin: 0 0 12px; }
@media (max-width: 899px) {
  .value-cards {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-right: -16px; padding-right: 16px !important; padding-bottom: 8px !important; scrollbar-width: none;
  }
  .value-cards::-webkit-scrollbar { display: none; }
  .value-cards > li { flex: 0 0 80%; scroll-snap-align: start; }
}

/* A quote in a story: the attribution underneath, smaller */
.story-box p.story-attribution { font-size: 16px; font-weight: 500; color: var(--muted); }

/* Next to a form, each heading after the first starts with a dividing line */
.form-split-text > h2 ~ h2, .form-split-text > h3 ~ h3 { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--line); }

/* Photos (site/images/photos/, placed by the playbook's pages/_photos.json) */
.photo { margin: 0; }
.photo img { display: block; width: 100%; height: auto; border-radius: var(--radius); object-fit: cover; }
.alt-row-visual .photo img { aspect-ratio: 3 / 2; }
.hero .photo img { aspect-ratio: 4 / 5; box-shadow: 0 10px 30px rgba(20, 23, 26, 0.18); }
.hero-surround .hero-visual-side { display: grid; gap: 16px; }
.hero-surround .hero-visual-side .photo img { aspect-ratio: 4 / 3; }
@media (max-width: 899px) {
  .hero .photo img { aspect-ratio: 3 / 2; }
  .hero-surround .hero-visual-side { grid-template-columns: 1fr 1fr; }
}

/* Photo header (hero_layout "cover" in pages/_photos.json): the photo fills the header, a dark
   overlay covers all of it (heavier behind the text), and the text is vertically centered. */
.hero-cover { position: relative; overflow: hidden; display: flex; align-items: center;
  min-height: clamp(420px, 62vh, 620px); padding: 72px 0; background: #0E1726; }
.hero-cover-photo { position: absolute; inset: 0; margin: 0; }
.hero-cover-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; aspect-ratio: auto !important; box-shadow: none !important; }
.hero-cover::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10, 16, 28, 0.72) 0%, rgba(10, 16, 28, 0.36) 45%, rgba(10, 16, 28, 0) 75%, rgba(10, 16, 28, 0) 100%); }
.hero-cover .hero-inner { position: relative; z-index: 1; width: 100%; }
.hero-cover .hero-text { max-width: 640px; }
@media (max-width: 899px) {
  .hero-cover { min-height: 520px; padding: 56px 0; }
  .hero-cover::after { background: rgba(10, 16, 28, 0.68); }
}

/* Homepage photo mosaic (hero_layout "mosaic"): rows of portrait tiles run full width behind the
   header, cut off at the sides; the outer rows are offset by half a tile and cropped top and
   bottom. A Findd blue gradient sits behind the left-aligned text and fades out to the right. */
.hero-mosaic { --tile: clamp(150px, 19vw, 280px); --gap: 14px;
  position: relative; overflow: hidden; display: flex; align-items: center;
  min-height: calc(var(--tile) * 1.25 * 1.75 + var(--gap) * 2); padding: 56px 0; }
.hero-mosaic-grid { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--gap); }
/* Each row scrolls slowly sideways and loops: the track holds the tiles twice and moves by half
   its width. The middle row moves left, the outer rows right, each at a slightly different slow
   speed (about 11 to 15 px a second on a laptop). */
.mosaic-row { overflow: visible; }
.mosaic-row-offset { margin-left: calc((var(--tile) + var(--gap)) / -2); }
.mosaic-track { display: flex; width: max-content; animation: mosaic-left 160s linear infinite; }
.mosaic-row:first-child .mosaic-track { animation: mosaic-right 185s linear infinite; }
.mosaic-row:last-child .mosaic-track { animation: mosaic-right 210s linear infinite; }
.mosaic-row img { margin-right: var(--gap); }
@keyframes mosaic-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes mosaic-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .mosaic-track { animation: none !important; } }
.mosaic-row img { flex: 0 0 var(--tile); width: var(--tile); height: calc(var(--tile) * 1.25); object-fit: cover; border-radius: var(--radius); }
.hero-mosaic::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 28%, rgba(23, 109, 245, 0.82) 42%, rgba(23, 109, 245, 0.25) 60%, rgba(23, 109, 245, 0) 72%); }
.hero-mosaic .hero-inner { position: relative; z-index: 1; width: 100%; }
.hero-mosaic .hero-text { max-width: 560px; text-align: left; }
.hero-mosaic h1 { max-width: none; }
@media (max-width: 899px) {
  .hero-mosaic::after { background: rgba(23, 109, 245, 0.84); }
}

/* A headline written on several lines in the doc: one sentence per line, never broken. The
   build sets --chars to the longest line's length; the type shrinks below its usual size only
   as far as that line needs to fit the text column (about 0.47em per character). */
.hero-text:has(.h1-lines) { container-type: inline-size; }
.h1-lines { font-size: min(clamp(32px, 5vw, 52px), calc(100cqi / var(--chars, 24) / 0.47)); }
.h1-lines span { display: block; white-space: nowrap; }

/* [LAYOUT: logo-bar]: customer logos scrolling slowly sideways, bleeding off both edges.
   About 9 logos show across a desktop screen and 2-3 on a phone. The track holds the strip
   twice and moves by one strip, so the loop has no seam. Hovering pauses it; with reduced
   motion it is one still, centered row. */
.logo-bar { overflow: hidden; }
.logo-track { display: flex; width: max-content; animation: logo-scroll calc(var(--n, 14) * 3.2s) linear infinite; }
.logo-bar:hover .logo-track { animation-play-state: paused; }
.logo-bar .logo-strip { flex-wrap: nowrap; gap: 0; }
.logo-bar .logo-strip > li { flex: none; margin-right: 56px; }
.logo-bar .brand-logo img { height: calc(var(--h, 36px) * 0.7); }
.logo-bar .logo-ph { white-space: nowrap; }
@keyframes logo-scroll { to { transform: translateX(-50%); } }
@media (max-width: 600px) {
  .logo-bar .logo-strip > li { margin-right: 36px; }
  .logo-bar .brand-logo img { height: calc(var(--h, 36px) * 0.75); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-track { animation: none; width: auto; justify-content: center; padding: 0 16px; }
  .logo-bar .logo-strip { flex-wrap: wrap; justify-content: center; row-gap: 24px; }
  .logo-bar .logo-strip[aria-hidden], .logo-bar [data-copy] { display: none; }
}

/* A photo at the top of a column ([LAYOUT: columns]) */
.column .photo { margin: 0 0 18px; }
.column .photo img { aspect-ratio: 3 / 2; }
@media (max-width: 899px) {
  .column .photo { margin: -20px -20px 16px; }
  .column .photo img { border-radius: var(--radius) var(--radius) 0 0; }
}

/* [LAYOUT: acronym]: values that spell a word, one column each, the letter large on top.
   Five across on desktop; swiped sideways on phones. */
.acronym { list-style: none; margin: 24px 0 0; padding: 0 !important; display: grid; gap: 28px; }
.acronym-letter { display: block; text-align: center; font-size: 72px; font-weight: 800; line-height: 1; color: var(--accent); margin-bottom: 14px; }
.acronym-item h3 { font-size: 19px; margin: 0 0 8px; }
.acronym-item p { margin: 0; color: var(--muted); font-size: 15px; }
@media (min-width: 900px) { .acronym { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 899px) {
  .acronym {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-right: -16px; padding-right: 16px !important; padding-bottom: 8px !important; scrollbar-width: none;
  }
  .acronym::-webkit-scrollbar { display: none; }
  .acronym-item { flex: 0 0 75%; scroll-snap-align: start; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
  .acronym-letter { font-size: 56px; }
}

/* A [TIME-BASED] announcement with a photo: an event card. The photo fills the card's left half
   on desktop (its top on phones); the text has the date and location as icon rows, the booth as
   a tag, and the button last. No accent bar: the photo carries the card. */
.announcement-photo .container { padding: 0 16px; background: none; border: 0; border-radius: 0; }
.event-card { display: grid; overflow: hidden; border-radius: var(--radius); background: var(--bg-soft); border: 1px solid var(--line); }
.announcement-photo .photo img { aspect-ratio: 2 / 1; border-radius: 0; height: 100%; }
.announcement-text { padding: 24px 22px 26px; }
.announcement-text h2 { margin: 0 0 14px; font-size: clamp(24px, 3vw, 30px); }
.announcement-text > :last-child { margin-bottom: 0; }
.announcement-text p { color: var(--muted); }
.event-meta { list-style: none; margin: 0 0 16px; padding: 0 !important; display: grid; gap: 10px; }
.event-meta li { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; font-weight: 600; }
.event-icon { width: 20px; height: 20px; flex: none; }
.event-tag { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #EAF2FE; color: var(--accent); font-size: 13px; font-weight: 700; letter-spacing: 0.02em; }
.announcement-text .actions { margin-top: 20px; }
@media (min-width: 900px) {
  .event-card { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .announcement-photo .photo img { aspect-ratio: auto; min-height: 100%; }
  .announcement-text { padding: 36px 40px; align-self: center; }
}

/* [LAYOUT: logo-row] (LOGO BAR STATIC): the logos standing still in one row, edge to edge, at the
   moving bar's size (8-10 across a desktop screen, 2-3 on a phone). Centered when they fit; on
   narrower screens the row runs past the edge and can be swiped sideways. */
.logo-row .logo-strip {
  flex-wrap: nowrap; justify-content: flex-start; gap: 0; width: max-content; max-width: 100%; margin: 0 auto;
  overflow-x: auto; scrollbar-width: none; padding: 0 16px !important; scroll-snap-type: x proximity; scroll-padding: 0 16px;
}
.logo-row .logo-strip::-webkit-scrollbar { display: none; }
.logo-row .logo-strip > li { flex: none; margin-right: 56px; scroll-snap-align: start; }
.logo-row .logo-strip > li:last-child { margin-right: 0; }
.logo-row .brand-logo img { height: calc(var(--h, 36px) * 0.7); }
.logo-row .logo-ph { white-space: nowrap; }
/* Every logo row that stands on its own (a section of logos, or a logo row in a section's text)
   stays one line, like LOGO BAR STATIC: centered when it fits, swiped sideways when it doesn't. */
.section-logos .logos, .prose > .logos, .container > .logos {
  flex-wrap: nowrap; justify-content: flex-start; gap: 0 !important; width: max-content; max-width: 100%; margin-left: auto; margin-right: auto;
  overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
}
.section-logos .logos::-webkit-scrollbar, .prose > .logos::-webkit-scrollbar, .container > .logos::-webkit-scrollbar { display: none; }
:is(.section-logos, .prose, .container) > .logos > li { flex: none; margin-right: 56px; scroll-snap-align: start; }
:is(.section-logos, .prose, .container) > .logos > li:last-child { margin-right: 0; }
:is(.section-logos, .prose, .container) > .logos .brand-logo img { height: calc(var(--h, 36px) * 0.7); }
@media (max-width: 600px) {
  :is(.section-logos, .prose, .container) > .logos > li { margin-right: 36px; }
}
@media (max-width: 600px) {
  .logo-row .logo-strip > li { margin-right: 36px; }
  .logo-row .brand-logo img { height: calc(var(--h, 36px) * 0.75); }
}

/* Product screenshots (site/images/product/, placed by screens.json). Never cropped: desktop
   screens fill their column; phone screens keep their shape, capped in height and centered. */
.screenshot { margin: 0; }
.screenshot img { display: block; width: 100%; height: auto; }
.screenshot-phone img { width: auto; max-width: 100%; max-height: 560px; margin: 0 auto; }
.hero .screenshot-phone img { max-height: 520px; }
@media (max-width: 600px) { .screenshot-phone img { max-height: 460px; } }

/* Zoomed desktop screenshots (screens.json "zoom"): a browser bar with the app's address, then
   just the part of the screen that matters (its "box"), enlarged to fill the card. */
.screenshot-zoom { overflow: hidden; border-radius: 12px; background: #fff; border: 1px solid #dfe3e8; box-shadow: 0 1px 2px rgba(20, 23, 26, 0.06), 0 12px 32px rgba(20, 23, 26, 0.12); }
.zoom-chrome { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; background: #eef0f3; border-bottom: 1px solid #dfe3e8; }
.zoom-chrome i { width: 9px; height: 9px; border-radius: 50%; background: #cfd4db; flex: none; }
.zoom-chrome span { margin-left: 10px; flex: 0 1 260px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; height: 20px; line-height: 20px; padding: 0 10px; border-radius: 6px; background: #fff; color: #5b6570; font-size: 12px; }
.zoom-view { position: relative; overflow: hidden; }
.zoom-view img { position: absolute; top: 0; left: 0; width: calc(100% / var(--w)); max-width: none; height: auto; transform: translate(calc(var(--x) * -100%), calc(var(--y) * -100%)); }

/* A phone shown large and running off the bottom of its section (screens.json "bleed"): the top
   of the screen, where the message or the key moment is, gets the attention. */
.screenshot-bleed { height: 520px; overflow: hidden; display: flex; justify-content: center; align-items: flex-start; }
.screenshot-bleed img { flex: none; width: 420px; max-width: none; max-height: none; height: auto; margin: 0; transform: translateY(calc(var(--top, 0) * -100%)); }
.alt-row:has(.screenshot-bleed) { padding-bottom: 0; }
.alt-row:has(.screenshot-bleed) .alt-row-inner { align-items: end; }
.alt-row:has(.screenshot-bleed) .alt-row-text { align-self: center; padding-bottom: 48px; }
@media (max-width: 899px) {
  .screenshot-bleed { height: 400px; }
  .screenshot-bleed img { width: 320px; }
  .alt-row:has(.screenshot-bleed) .alt-row-text { padding-bottom: 0; }
}

/* The Findd Operating System section's screenshot: as wide as the page content (the footer's
   width), 48px below the text, and cut off at the section's bottom edge so it runs into the next
   section or the footer without overlapping it. */
.os-section:has(.screenshot-zoom) { padding-bottom: 0; }
.os-section .screenshot-zoom {
  width: min(calc(var(--container) - 32px), calc(100vw - 32px));
  margin: 48px 0 0 50%;
  transform: translateX(-50%);
  max-height: 560px;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 1px 2px rgba(20, 23, 26, 0.06), 0 -4px 32px rgba(20, 23, 26, 0.10);
}
.os-section .screenshot-zoom img { width: 100%; height: auto; }
main:has(> .os-section:last-child .screenshot-zoom) + .site-footer { margin-top: 0; }
@media (max-width: 600px) { .os-section .screenshot-zoom { margin-top: 32px; max-height: 360px; } }

/* Slideshows (screens.json "slides"): one card per screen, its words as page text. A row of cards
   to swipe; site.js adds previous/next buttons and dots underneath. */
.slides { container-type: inline-size; }
.slides-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.slides-track::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; scroll-snap-align: start; margin: 0; display: grid; grid-template-columns: minmax(0, 170px) 1fr; gap: 24px; align-items: center; padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.slide-device { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 18px rgba(20, 23, 26, 0.16)); }
.slide figcaption > p { margin: 0; color: var(--muted); font-size: 15px; }
.slide .slide-kicker { margin-bottom: 8px; font-size: 13px; }
.slide-tag { display: inline-block; margin-right: 6px; padding: 2px 8px; border-radius: 999px; background: #EAF2FE; color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: 1px; }
.slide h3 { margin: 0 0 6px; font-size: 22px; }
.slide-points { list-style: none; margin: 16px 0 0; padding: 14px 0 0 !important; border-top: 1px solid var(--line); display: grid; gap: 6px; font-size: 14px; }
.slide-points li { position: relative; padding-left: 16px; }
.slide-points li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
@container (max-width: 420px) {
  .slide { grid-template-columns: 1fr; gap: 18px; padding: 20px; }
  .slide-device { width: 170px; margin: 0 auto; }
}
.slides-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
.slides-arrow { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink, #14171a); font-size: 18px; line-height: 1; cursor: pointer; }
.slides-arrow:disabled { opacity: 0.35; cursor: default; }
.slides-dots { display: flex; gap: 8px; }
.slides-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: #c9d0d8; cursor: pointer; }
.slides-dots button[aria-current="true"] { background: var(--accent); }

/* Headings break into even lines, so a last word never sits alone ("The World Runs on / Frontline
   Work", not "The World Runs on Frontline / Work"). Body text avoids a one-word last line too. */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* The section after an Operating System section whose screenshot is cut off at its bottom edge
   turns light grey, so the cut reads as the edge between two sections (Marko, Homepage tab). An
   event card on that grey turns white so it still stands out. */
.os-section:has(.screenshot-zoom) + .section:not(.alt-row-shade, .section-shade, .band) { background: var(--bg-soft); padding-top: 48px; }
.os-section:has(.screenshot-zoom) + .section .event-card { background: #fff; }

/* [DIAGRAM: RULES EXPLAINER]: an event, the rules each person is checked against, and what
   happened to each of them (Design Guidelines tab). The headline and text come first, as one
   centered, left-aligned block, with the diagram centered below; on phones the diagram scrolls
   sideways instead of stacking, so the left-to-right reading stays the same. */
.section + .diagram-section { padding-top: 48px; }
.diagram-text { max-width: 720px; margin: 0 auto 32px; text-align: left; }
.diagram-section .rx, .alt-row-diagram .rx { max-width: 1040px; margin: 0 auto; }
.rx { margin: 0; }
.rx-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 16px; }
.rx-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rx-card { background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 32px 32px 28px;
  box-shadow: 0 12px 32px rgba(20, 23, 26, 0.08); min-width: 960px; box-sizing: border-box; }
.rx-title { font-size: 24px; font-weight: 700; margin: 0; color: var(--fg); }
.rx-intro { color: var(--muted); margin: 4px 0 0; font-size: 15px; }
.rx-flow { display: grid; grid-template-columns: 0.75fr 1.35fr 1.05fr; gap: 32px; align-items: center; margin: 28px 0 24px; position: relative; }
.rx-flow > * { position: relative; }
.rx-flow > .rx-rules::before, .rx-flow > .rx-results::before { content: ""; position: absolute; left: -32px; width: 32px; top: 50%;
  border-top: 2px solid #c9dafc; }
.rx-event { background: linear-gradient(160deg, #3a86f7, #1f5fd1); color: #fff; border-radius: 14px; padding: 22px 20px;
  box-shadow: 0 10px 24px rgba(31, 95, 209, 0.25); }
.rx-kicker { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; margin: 0; }
.rx-event-name { font-size: 22px; font-weight: 700; margin: 6px 0 0; }
.rx-event-date { font-size: 14px; opacity: 0.9; margin: 2px 0 0; }
.rx-event ul { list-style: none; padding: 12px 0 0 !important; margin: 14px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.3); font-size: 14px; }
.rx-event li { margin: 6px 0 0; }
.rx-rules { border: 2px solid var(--fg); border-radius: 14px; padding: 18px 18px 8px; background: var(--bg); }
.rx-rules-title { font-weight: 700; font-size: 16px; margin: 0; }
.rx-rules-sub { color: var(--muted); font-size: 13px; margin: 2px 0 10px; }
.rx-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rx-table th, .rx-table td { padding: 9px 4px; border-top: 1px solid var(--line); text-align: left; vertical-align: middle; }
.rx-table thead th { border-top: 0; font-size: 12px; font-weight: 700; text-align: center; padding-bottom: 6px; }
.rx-table tbody th { font-weight: 400; }
.rx-table small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.rx-table td { text-align: center; width: 56px; }
.rx-yes, .rx-no { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 13px; font-weight: 700; }
.rx-yes { background: #e3f4ea; color: #157040; }
.rx-no { background: #fdeee4; color: #b4410f; }
.rx-results { display: grid; gap: 14px; }
.rx-result { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: var(--bg); }
.rx-who { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 6px; }
.rx-badge { margin-left: auto; white-space: nowrap; flex: none; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
.rx-badge-ok { background: #e3f4ea; color: #157040; }
.rx-badge-no { background: #fdeee4; color: #b4410f; }
.rx-record { margin-top: 10px; border: 1px dashed #9dbdf8; background: #eef4fe; border-radius: 10px; padding: 10px 12px; }
.rx-record-title { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.rx-record-line { margin: 6px 0 0; display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.rx-record-line b { white-space: nowrap; }
.rx-record-note { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.rx-why { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.rx-note { display: flex; gap: 14px; align-items: center; background: var(--bg-soft); border-radius: 12px; padding: 14px 16px; margin: 0; font-size: 14px; }
.rx-tag { flex: none; font-size: 11px; font-weight: 700; color: var(--accent); background: #e3edfd; border-radius: 6px; padding: 6px 8px; }
@media (max-width: 899px) {
  .rx-card { padding: 24px 20px 20px; }
  .diagram-text { margin-bottom: 24px; }
}

/* Full-bleed half panel (screens.json "panel"): a desktop screenshot fills its half of the row,
   from the screen edge to the page grid's column line and from the row's top to its bottom, zoomed in with no
   browser bar. The app window's top-left is always the panel's top-left, so the image is cropped
   on the right and bottom. Below desktop width it comes after the heading and text, inside the page
   margins and framed like the other screenshots (#website-feedback, Vannessa, 2026-11-05: images sat
   above their titles and ran wider than the band and the text). */
.alt-row-panel { padding: 0 !important; }
.alt-row-panel-visual { height: 300px; overflow: hidden; background: var(--bg-soft); }
.alt-row-panel-visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.alt-row-panel .alt-row-inner { padding-top: 40px; padding-bottom: 48px; }
@media (max-width: 899px) {
  .alt-row-panel { display: flex; flex-direction: column; }
  .alt-row-panel .alt-row-inner { order: 1; width: 100%; padding-bottom: 24px; }
  .alt-row-panel-visual { order: 2; box-sizing: border-box; width: calc(100% - 32px); max-width: calc(var(--container) - 32px);
    margin: 0 auto 48px; border-radius: 12px; border: 1px solid #dfe3e8; background: #fff;
    box-shadow: 0 1px 2px rgba(20, 23, 26, 0.06), 0 12px 32px rgba(20, 23, 26, 0.12); }
}
@media (min-width: 900px) {
  .alt-row-panel { position: relative; min-height: 560px; display: flex; align-items: center; }
  /* The visual takes the side the row's screenshot would be on: right in a normal row, left in a flipped one. */
  /* Its inner edge sits on the page grid, where the screenshot column would start (half the 56px
     column gap past the center), so the text keeps its full gap and the grid isn't broken. */
  /* At most 900px wide (the size of a 1x capture) (#website-feedback, 2026-11-04): on a wide monitor half the screen made the
     panel huge and cut most of the screenshot off. It stays anchored at the grid edge, so on very
     wide screens it stops short of the window edge instead of growing. */
  .alt-row-panel-visual { position: absolute; top: 0; bottom: 0; left: calc(50% + 28px); width: min(calc(50% - 28px), 900px); height: auto; }
  .alt-row-panel.alt-row-flip .alt-row-panel-visual { left: auto; right: calc(50% + 28px); }
  .alt-row-panel .alt-row-inner { width: 100%; padding-top: 88px; padding-bottom: 88px; }
  .alt-row-panel .alt-row-text { grid-column: 1; }
  .alt-row-panel.alt-row-flip .alt-row-text { grid-column: 2; order: 0; }
}

/* [SECTION: SOLUTIONS CLOUD]: the challenges Findd helps with, as pill buttons in three sizes (how
   much each matters to buyers), in rows clustered from the center out: large in the middle rows,
   medium around them, small at the edges and on the top and bottom rows. */
.cloud-head { max-width: 720px; margin: 0 auto 28px; text-align: center; }
.cloud, .cloud ul { list-style: none; margin: 0; padding: 0 !important; }
.cloud { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 1120px; margin: 0 auto; }
.cloud-row > ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }
.cloud li { margin: 0; }
/* A slight stagger between rows, so it reads as a cluster rather than a grid (desktop only). */
@media (min-width: 900px) {
  .cloud-row:nth-child(4n+2) { transform: translateX(-28px); }
  .cloud-row:nth-child(4n) { transform: translateX(28px); }
}
.cloud-pill { display: inline-block; border-radius: 999px; text-decoration: none; line-height: 1.2; white-space: nowrap;
  border: 1px solid var(--line); color: var(--fg); background: var(--bg); transition: border-color .15s, color .15s, background .15s; }
.cloud-pill:hover, .cloud-pill:focus-visible { border-color: var(--accent); color: var(--accent); }
.cloud-large { font-size: 20px; font-weight: 700; padding: 12px 22px; background: #EAF2FE; border-color: #CFE0FC; color: var(--accent); }
.cloud-medium { font-size: 16px; font-weight: 500; padding: 10px 18px; }
.cloud-small { font-size: 14px; font-weight: 400; padding: 8px 14px; color: var(--muted); }
@media (max-width: 600px) {
  .cloud, .cloud-row > ul { gap: 8px; }
  .cloud-pill { white-space: normal; }
  .cloud-large { font-size: 18px; padding: 11px 20px; }
  .cloud-medium { font-size: 15px; padding: 9px 16px; }
  .cloud-small { font-size: 14px; padding: 7px 14px; }
}
.nav-top-link { display: block; padding: 12px 0; font-weight: 600; color: inherit; text-decoration: none; }
.nav-top-link.is-current, .nav-top-link:hover { color: var(--accent); }
.footer-heading a { color: inherit; text-decoration: none; }
.footer-heading a:hover { text-decoration: underline; }
@media (min-width: 900px) { .nav-top-link { padding: 20px 0; } }
.hero .tag-more-list .tag { background: var(--bg); border-color: var(--line); color: var(--fg); }
.hero .tag-more-list .tag:hover { background: var(--bg-soft); border-color: var(--accent); color: var(--accent); }
.hero .tag-more-list .tag.is-current { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Blog cards are all the same height (Design Guidelines, BLOG INDEX): title and summary take a
   fixed number of lines, cut with an ellipsis or padded; tags stay on one line. */
.post-card-title { line-height: 1.3; min-height: calc(3 * 1.3em); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-card-summary { margin: 0 0 12px; line-height: 1.5; min-height: calc(3 * 1.5em); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-card-more { margin: auto 0 12px; }
.post-card-more a { font-weight: 600; color: var(--accent); text-decoration: none; }
.post-card-more a:hover { text-decoration: underline; }
.post-card-tags { flex-wrap: nowrap; overflow: hidden; margin-top: 0 !important; }
.post-card-tags li { flex: none; }
.tag-more-count { color: var(--muted); background: transparent; }
.post-card-image-empty { background: var(--bg-soft); }
.blog-years { margin-top: 48px; }
.blog-years h2 { font-size: 22px; margin: 0 0 12px; }
.blog-month { font-size: 24px; margin: 40px 0 16px; }
.blog-month:first-child { margin-top: 0; }

/* [DIAGRAM: SHARED RULES]: three agreements as overlapping circles, with a key beside them.
   Scrolls sideways on phones rather than shrinking the words (Design Guidelines tab). */
.sr-card { min-width: 880px; }
.sr-flow { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; align-items: center; margin: 20px 0 22px; }
.sr-venn { width: 100%; height: auto; display: block; overflow: visible; }
.sr-c { stroke-width: 2; }
.sr-c0 { fill: #e3edfd; stroke: #7aa7ee; fill-opacity: .9; }
.sr-c1 { fill: #e2f4e8; stroke: #6cbf8b; fill-opacity: .75; }
.sr-c2 { fill: #fcece2; stroke: #e6a37a; fill-opacity: .7; }
.sr-mid { fill: #fff; }
.sr-mid-edge { fill: none; stroke: var(--fg); stroke-width: 2.5; }
.sr-venn text { font-family: inherit; fill: var(--fg); }
.sr-kicker { font-size: 12px; font-weight: 700; letter-spacing: .08em; fill: var(--accent) !important; }
.sr-all { font-size: 15px; }
.sr-one { font-size: 15px; }
.sr-two { font-size: 14px; fill: var(--muted) !important; }
.sr-name { font-size: 18px; font-weight: 700; }
.sr-n0 { fill: #1c5fd1 !important; } .sr-n1 { fill: #1d7a45 !important; } .sr-n2 { fill: #b8531c !important; }
.sr-sub { font-size: 14px; fill: var(--muted) !important; }
.sr-keys { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sr-key { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 0; }
.sr-key-main { border: 2px solid var(--fg); }
.sr-key-head { margin: 0; display: flex; gap: 10px; align-items: center; justify-content: space-between; font-size: 16px; }
.sr-key-text { margin: 4px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.sr-badge { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1d7a45; background: #e2f4e8; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.sr-icon { flex: none; width: 22px; height: 22px; margin-top: 1px; position: relative; }
.sr-i-all { border: 2px solid var(--fg); border-radius: 5px; width: 18px; height: 18px; }
.sr-i-two::before, .sr-i-two::after { content: ""; position: absolute; top: 4px; width: 13px; height: 13px; border-radius: 50%; border: 2px solid #7aa7ee; background: #e3edfd; }
.sr-i-two::before { left: 0; } .sr-i-two::after { left: 7px; border-color: #6cbf8b; background: rgba(226, 244, 232, .8); }
.sr-i-one::before, .sr-i-one::after { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; border: 2px solid #7aa7ee; top: 0; left: 0; }
.sr-i-one::after { border-color: #6cbf8b; left: 12px; box-shadow: -6px 12px 0 -1px #fff, -6px 12px 0 1px #e6a37a; }
/* "slides_style": "image": the phone is the slide, cropped to its top so the messages are big enough
   to read; the words sit underneath as a caption. */
.slides-image .slide { grid-template-columns: 1fr; gap: 14px; padding: 20px 20px 18px; }
.slides-image .slide-device { width: 100%; max-width: 460px; margin: 0 auto; filter: none; border-radius: 12px 12px 0 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent); mask-image: linear-gradient(to bottom, #000 82%, transparent); }
.slides-image .slide h3 { font-size: 18px; }
.slides-image .slide figcaption { text-align: center; }
.slides-image .slide-kicker { display: none; }

/* [LAYOUT: event-form] (EVENT PROMO WITH FORM): the event's text on the left, the booking calendar
   or form on the right; stacked on phones, text first. */
.event-form-section { padding: 56px 0 72px; }
.event-form-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: start;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 16px; padding: 32px; }
.event-form-text .photo { margin: 0 0 24px; }
.event-form-text .photo img { border-radius: 12px; width: 100%; height: auto; display: block; }
.event-form-text h1, .event-form-text h2 { margin: 0 0 16px; }
.event-form-action { min-width: 0; }
.booking-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px; min-height: 120px; overflow: hidden; }
.booking-frame { display: block; width: 100%; height: 720px; border: 0; }
.booking-staging { margin: 0; padding: 16px; color: var(--muted); }
@media (max-width: 600px) { .booking-frame { height: 780px; } }
@media (max-width: 899px) {
  .event-form-card { grid-template-columns: 1fr; gap: 24px; padding: 16px; }
  .event-form-card .booking-card { padding: 0; margin: 0 -8px; }
}

/* Two headings set apart by rules in the doc, side by side; stacked on phones, not swiped */
@media (max-width: 899px) {
  .columns.columns-plain { display: grid; gap: 32px; overflow: visible; margin-right: 0; padding: 0; }
  .columns-plain .column { padding: 0; border: 0; background: none; }
}
.columns-plain .column h2 { margin-top: 0; }
.columns-plain .column p + p { margin-top: 12px; }

/* [LAYOUT: carousel] (PHOTO CAROUSEL): large photo cards in a row that runs off the right edge */
.carousel-title { margin-bottom: 32px; }
.carousel { --gutter: max(16px, calc((100vw - var(--container)) / 2 + 16px)); }
.carousel ul.carousel-track {
  list-style: none; margin: 0; padding: 0 var(--gutter);
  display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter);
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.carousel-card { flex: 0 0 min(820px, 72vw); scroll-snap-align: start; }
.carousel-media { aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; background: var(--bg-soft); }
.carousel-media :is(figure, .photo) { margin: 0; height: 100%; }
.carousel-media img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.carousel-caption { padding: 22px 22px 0; max-width: 620px; }
.carousel-caption p { margin: 0 0 10px; font-size: 18px; line-height: 1.55; color: var(--muted); }
.carousel-caption strong { color: var(--fg); font-weight: 500; }
.carousel-controls { display: flex; justify-content: flex-end; gap: 14px; margin-top: 24px; }
.carousel-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: #e8ebef; color: var(--fg); cursor: pointer; transition: background .2s, opacity .2s;
}
.carousel-btn:hover:not(:disabled) { background: #dde1e6; }
.carousel-btn:disabled { opacity: .4; cursor: default; }
.carousel-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 899px) {
  .carousel ul.carousel-track { gap: 14px; }
  .carousel-card { flex-basis: 86vw; }
  .carousel-media { aspect-ratio: 4 / 3; border-radius: 16px; }
  .carousel-caption { padding: 16px 4px 0; }
  .carousel-caption p { font-size: 16px; }
  .carousel-controls { margin-top: 16px; }
}

/* [LAYOUT: explorer] (FEATURE EXPLORER): the feature grid as pills on blue, on a wheel that loops,
   with the open item's product screen on the right */
.explorer-band { overflow: hidden; --bleed: max(16px, calc(50vw - var(--container) / 2 + 16px)); }
.explorer-band > .container > h2 { font-size: clamp(36px, 5vw, 60px); line-height: 1.08; margin-bottom: 40px; }
.explorer { display: grid; grid-template-columns: 44px minmax(0, 440px) minmax(0, 1fr); gap: 0 32px; align-items: center; }
.explorer-steps { display: flex; flex-direction: column; gap: 14px; }
.explorer-step {
  width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, .16); color: #fff; transition: background .2s;
}
.explorer-step:hover { background: rgba(255, 255, 255, .28); }
.explorer-step svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.explorer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.explorer-item { max-width: 100%; }
/* The wheel (site.js adds is-wheel and places each item; without JavaScript the list just stacks) */
.explorer-list.is-wheel { display: block; position: relative; height: var(--wheel-h, 640px); transition: height .45s ease; }
.is-wheel .explorer-item { position: absolute; left: 0; top: 0; width: 100%; transform-origin: 0 0;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), opacity .45s ease; will-change: transform, opacity; }
.is-wheel .explorer-item.is-far { pointer-events: none; }
.is-wheel.no-anim .explorer-item, .is-wheel .explorer-item.no-anim { transition: none; }
.explorer-pill {
  display: inline-flex; align-items: center; gap: 12px; padding: 10px 22px 10px 10px; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .14); color: #fff; font: inherit; font-size: 17px; font-weight: 500; text-align: left;
  cursor: pointer; transition: background .2s, color .2s;
}
.explorer-pill:hover { background: rgba(255, 255, 255, .24); }
.explorer-pill:focus-visible, .explorer-step:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.explorer-icon { width: 34px; height: 34px; flex: none; border-radius: 50%; background: #fff; display: grid; place-items: center; transition: background .2s; }
.explorer-icon img { width: 20px; height: 20px; }
.explorer-item.is-open .explorer-pill { background: #fff; color: var(--fg); }
.explorer-item.is-open .explorer-icon { background: var(--accent); }
.explorer-item.is-open .explorer-icon img { filter: brightness(0) invert(1); }
.explorer-detail { margin-top: 10px; padding: 22px 26px; border-radius: 24px; background: #fff; color: var(--fg); animation: explorer-in .4s ease both; }
@keyframes explorer-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.explorer-detail p { margin: 0; font-size: 17px; line-height: 1.55; }
.explorer-tags { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.explorer-tags a, .explorer-tags li:not(:has(a)) {
  display: inline-block; font-size: 13px; font-weight: 500; padding: 4px 10px; border-radius: 999px;
  background: #e9f1fe; color: var(--accent); text-decoration: none; transition: background .2s, color .2s;
}
.explorer-tags a:hover { background: var(--accent); color: #fff; }
.explorer-tags a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.explorer-shot-inline { display: none; }
/* The screen panel runs to the right edge of the window */
.explorer-visual { display: grid; grid-template-columns: minmax(0, 1fr); height: 640px; align-items: center; overflow: hidden; margin-right: calc(-1 * var(--bleed)); }
.explorer-shot { grid-area: 1 / 1; min-width: 0; margin: 0; height: 100%; display: flex; align-items: center; opacity: 0; transition: opacity .35s ease; }
.explorer-shot[hidden] { display: none; }
.explorer-shot.is-on { opacity: 1; }
.explorer-shot .screenshot { margin: 0; }
/* Desktop screens: large, cut off by the right edge */
/* Every screen gets the same height whatever its shape, so the panel never changes size:
   desktop screens run off the right edge, phones are centered */
.explorer-shot-desktop .screenshot { flex: none; height: 580px; width: auto; max-width: none; }
.explorer-shot-desktop .screenshot img { display: block; height: 100%; width: auto; max-width: none; }
.explorer-shot-desktop .screenshot-zoom img { height: calc(100% - 33px); }  /* under its 32px browser bar */
@media (max-width: 899px) { .explorer-shot-inline .screenshot-zoom img { height: calc(100% - 33px); } }
/* Phones: centered in the panel (the part of it on screen) */
.explorer-shot-phone { display: flex; justify-content: center; padding-right: var(--bleed); }
.explorer-shot-phone .screenshot-phone { height: 600px; }
.explorer-shot-phone .screenshot-phone img { height: 100%; width: auto; max-width: none; max-height: none; margin: 0; }
@media (max-width: 899px) {
  .explorer-band > .container > h2 { margin-bottom: 28px; }
  .explorer { grid-template-columns: minmax(0, 1fr); }
  .explorer-steps, .explorer-visual { display: none; }
  .explorer-pill { font-size: 16px; }
  .explorer-detail { padding: 18px 18px 20px; border-radius: 18px; }
  .explorer-detail p { font-size: 16px; }
  .explorer-shot-inline { display: block; margin-top: 16px; }
  .explorer-shot-inline .screenshot { margin: 0; }
  /* the same height for every screen inside the cards too */
  .explorer-shot-inline { height: 300px; overflow: hidden; border-radius: 10px; }
  .explorer-shot-inline .screenshot { height: 100%; }
  .explorer-shot-inline .screenshot img { display: block; height: 100%; width: auto; max-width: none; }
  .explorer-shot-inline .screenshot-phone { display: flex; justify-content: center; }
  .explorer-shot-inline .screenshot-phone img { max-height: none; margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .explorer-shot, .is-wheel .explorer-item, .explorer-list.is-wheel { transition: none; } .explorer-detail { animation: none; } }

/* Press kit screenshots (screens.json "gallery"): a grid of screens with download links */
.gallery { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.gallery-media { aspect-ratio: 4 / 3; border-radius: var(--radius); background: var(--bg-soft); display: grid; place-items: center; padding: 18px; overflow: hidden; }
.gallery-media img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; }
.gallery-title { margin: 14px 0 4px; font-weight: 500; }
.gallery-download { margin: 0; font-size: 15px; }
.gallery-download span { color: var(--muted); }
@media (max-width: 899px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (max-width: 560px) { .gallery { grid-template-columns: minmax(0, 1fr); } }
/* In a text column the gallery still uses the page's full width */
.prose .gallery { width: min(calc(var(--container) - 32px), calc(100vw - 32px)); position: relative; left: 50%; transform: translateX(-50%); }
/* A "Learn more ›" link in an open explorer card */
.explorer-more { margin-top: 12px; }
.explorer-more p { margin: 0; font-size: 16px; }
.explorer-more a { color: var(--accent); font-weight: 500; }
/* A white section right after a blue band already has 48px above its content: no margin on top of
   that, so the space above it matches the space below */
.band:has(+ .section:not(.alt-row-shade, .section-shade)) { margin-bottom: 0; }
/* An alternating row right after a band keeps its own padding top and bottom (56px, 88px on desktop) */
.band + .section.alt-row:not(.alt-row-shade) { padding-top: 56px; }
@media (min-width: 900px) { .band + .section.alt-row:not(.alt-row-shade) { padding-top: 88px; } }
/* Design Guidelines (FEATURE EXPLORER): the section title large and centered; the line under it a centered subhead */
.explorer-band > .container > h2 { text-align: center; margin-left: auto; margin-right: auto; }
.explorer-band > .container > h2:has(+ p) { margin-bottom: 16px; }
.explorer-band > .container > p { text-align: center; font-size: clamp(19px, 2vw, 24px); line-height: 1.4; max-width: 720px; margin: 0 auto 44px; }

/* Pricing as an open table (Marko, 2026-11-05): horizontal lines only, no boxes; very large product
   names; the plan names in a header row pinned under the site header while the table scrolls */
@media (min-width: 900px) {
  .pg { --pg-cols: minmax(240px, 1.15fr) repeat(var(--plans), minmax(0, 1fr)); grid-template-columns: var(--pg-cols); gap: 0 48px; }
  .pg-headrow { display: grid; grid-template-columns: var(--pg-cols); column-gap: 48px; position: sticky; top: 68px; z-index: 5;
    background: var(--bg); padding: 22px 0 18px; border-bottom: 2px solid var(--fg); }
  .pg-headrow .pg-head { align-self: end; padding: 0; }
  .pg-head .plan-name { font-size: 26px; letter-spacing: 0; text-transform: none; color: var(--fg); line-height: 1.15; }
  .pg-cell, .pg-product { border: 0; border-radius: 0; background: none; padding: 36px 0; border-top: 1px solid var(--line); }
  .pg-first { border-top: 0; }  /* the first product row, under the header row or the "includes" strip */
  .pg-product { align-self: stretch; }
  /* each product name sticks below the plan header row inside its own row, so the next one takes over */
  .pg-product-in { position: sticky; top: calc(68px + var(--pg-head-h, 100px) + 28px); }
  .pg-product h3 { font-size: clamp(44px, 4.6vw, 64px); line-height: 1; letter-spacing: -0.01em; text-transform: none; color: var(--fg); }
  .pg-note { font-size: 15px; margin-top: 12px; max-width: 260px; }
  .pg-cell { font-size: 16px; }
  .pg-cell .cell-price { font-size: 20px; margin-bottom: 14px; }
  .pg-addon { background: none; }
}
@media (max-width: 899px) {
  .pg-headrow { display: contents; }
  .pg-corner { display: none; }
  .pg-cell { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; padding: 24px 0; margin: 0; }
  .pg-cell-product { font-size: 34px !important; letter-spacing: -0.01em !important; text-transform: none !important; color: var(--fg) !important; line-height: 1.05; }
}
/* Pricing: the product names in Findd blue */
.pg-product h3, .pg-cell-product { color: var(--brand) !important; }
@media (max-width: 899px) { .pg-head .plan-name { text-transform: none; letter-spacing: 0; font-size: 20px; color: var(--fg); } }

/* Product graphics (the product-graphic skill in the playbook, Marko 2026-11-06): one real Findd
   screen rebuilt in HTML from a capture in images/product/, with its own wording, values and
   colours, cropped and with parts removed but nothing added. The app panel sits on the section and
   is cut off by the column's right edge; a popover (one real card from the same screen) overlaps
   the panel's last row by 25-50% of its own height. Text stays 11px or larger at 375px.
   Built by the skill's scripts/build_graphic.py; never edit a graphic's HTML by hand. */
.ax { margin: 0; --ax-text: #1b1b1b; --ax-muted: #43484e; --ax-faint: #747b82; --ax-line: #e7eaee; --ax-row: #eff1f4;
  --ax-red: #c13b2d; --ax-green: #069e2f; --ax-spark: #1a73e8; }
.ax-app { background: #f5f7fa; border: 1px solid #dfe3e8; border-right: 0; border-radius: 10px 0 0 10px; padding: 14px 0 14px 14px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(20, 23, 26, 0.06), 0 12px 32px rgba(20, 23, 26, 0.12); color: var(--ax-text); }
.ax-kpis { display: flex; gap: 10px; margin-right: -140px; }
.ax-kpi { flex: 1 1 0; min-width: 0; background: #fff; border: 1px solid var(--ax-line); border-radius: 8px; padding: 10px 12px; }
.ax-kpi-alert { border-left: 3px solid var(--ax-red); }
.ax-kpi p { margin: 0; }
.ax-kpi .ax-kpi-num { font-size: 22px; line-height: 1.2; color: var(--ax-text); }
.ax-kpi .ax-kpi-label { font-size: 12px; color: var(--ax-muted); margin-top: 2px; }
.ax-kpi .ax-kpi-delta { font-size: 12px; color: var(--ax-green); margin-top: 4px; }
.ax-kpi .ax-kpi-sub { font-size: 12px; color: var(--ax-faint); margin-top: 4px; white-space: nowrap; }
.ax-card { background: #fff; border: 1px solid var(--ax-line); border-right: 0; border-radius: 8px 0 0 8px; padding: 12px 0 8px 14px; margin-top: 10px; }
.ax-kpis + .ax-card { margin-top: 10px; }
.ax-app > .ax-card:first-child { margin-top: 0; }
.ax-card-title { margin: 0 0 8px; font-size: 14px; font-weight: 500; color: #070707; }
.ax-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ax-table th, .ax-table td { text-align: left; font-weight: 400; padding: 7px 8px; border-bottom: 1px solid var(--ax-row); }
.ax-table td { text-align: right; padding-right: 16px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ax-table thead th { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ax-faint); font-weight: 500; }
.ax-table thead th[data-num] { text-align: right; white-space: nowrap; }
.ax-table thead th:last-child[data-num] { padding-right: 16px; }
.ax-crew th, .ax-crew td { background: var(--ax-row); font-weight: 500; color: #121211; }
.ax-sub th { padding-left: 22px; color: #4c5055; font-size: 12px; }
.ax-sub td { color: #4c5055; font-size: 12px; }
/* The popover sits after the panel, pulled up over its last row (-64px is about 40% of its height). */
.ax-pop { position: relative; z-index: 1; width: 230px; box-sizing: border-box; margin: -64px 24px 0 auto;
  background: #fff; border: 1px solid var(--ax-line); border-radius: 10px; padding: 12px 14px 10px;
  box-shadow: 0 1px 2px rgba(20, 23, 26, 0.08), 0 16px 40px rgba(20, 23, 26, 0.2); }
.ax-pop-alert { border-left: 3px solid var(--ax-red); }
.ax-pop p { margin: 0; }
.ax-pop .ax-pop-label { font-size: 12px; color: var(--ax-muted); }
.ax-pop .ax-pop-num { font-size: 28px; line-height: 1.2; color: var(--ax-text); }
.ax-pop .ax-pop-note { font-size: 12px; color: var(--ax-faint); }
.ax-spark { display: block; width: 100%; height: auto; margin-top: 8px; overflow: visible; }
.ax-spark polyline { fill: none; stroke: var(--ax-spark); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ax-spark circle { fill: var(--ax-spark); }
/* Drill path, plain and selected rows, status tags and a copied bar chart (drilldown screens). */
.ax-crumbs { list-style: none; margin: 0 0 10px; padding: 10px 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--ax-line); border-right: 0; border-radius: 8px 0 0 8px; }
.ax-crumb { font-size: 12px; font-weight: 500; line-height: 1.3; border-radius: 999px; padding: 4px 10px; }
.ax-crumb-sep { font-size: 12px; color: var(--ax-faint); }
.ax-tone-grey { background: #eff1f4; color: #454a4f; }
.ax-tone-red { background: #fdecea; color: #b21000; }
.ax-tone-blue { background: #e8f1fd; color: #005ce5; }
.ax-tone-green { background: #e6f6ea; color: #009c2a; }
.ax-tone-orange { background: #fff3e0; color: #aa5400; }
.ax-card-title { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; padding-right: 14px; }
.ax-card-note { font-size: 12px; font-weight: 400; color: var(--ax-faint); }
.ax-row th, .ax-row td { color: var(--ax-text); }
.ax-row th b { font-weight: 500; }
.ax-selected th, .ax-selected td { background: var(--ax-row); }
.ax-table td[data-tag], .ax-table td[data-text] { text-align: left; }
.ax-tag { display: inline-block; font-size: 11px; font-weight: 500; line-height: 1.4; border-radius: 999px; padding: 2px 8px; }
.ax-pop-wide { width: 340px; max-width: calc(100% - 24px); }
.ax-bars { display: block; width: 100%; height: auto; margin-top: 8px; overflow: visible; }
.ax-bar-ref { stroke: #9aa0a6; stroke-width: 1; stroke-dasharray: 4 3; }
.ax-bar-val, .ax-bar-reflabel, .ax-bar-x { font-size: 12px; fill: var(--ax-text); }
.ax-bar-x, .ax-bar-reflabel { fill: var(--ax-muted); }
/* Values in the screen's own colours (budget over, under, on), blue job names, a value's lighter
   second line ("/ 2,751.00", "Percentage points"), and the table's own last line ("1–7 of 7"). */
.ax-c-red { color: #c5221f; }
.ax-c-green { color: #188038; }
.ax-c-grey { color: #80868b; }
.ax-c-link { color: #1a73e8; }
.ax-table td .ax-cell-sub { color: #9aa0a6; }
.ax-file-badge { display: inline-block; vertical-align: 1px; margin-right: 8px; background: #1e8e3e; color: #fff; border-radius: 4px;
  font-size: 11px; font-weight: 600; line-height: 1; padding: 4px 5px; text-transform: lowercase; }
/* A file popover (Marko's request on Exportable Data): a large document icon with the file type
   on a band, and the file name under it, so it reads as a file at a glance. */
.ax-pop.ax-pop-file { margin-top: -60px; width: 190px; padding: 16px 14px 14px; text-align: center; }
.ax-doc { position: relative; display: block; width: 58px; height: 72px; margin: 0 auto 10px; background: #fff;
  border: 2px solid #c5ccd3; border-radius: 4px 16px 4px 4px;
  background-image: repeating-linear-gradient(#fff 0 9px, #e3e7eb 9px 10px); background-position: 0 14px; background-size: 100% 46px; background-repeat: no-repeat; }
.ax-doc::before { content: ""; position: absolute; top: -2px; right: -2px; width: 16px; height: 16px;
  background: linear-gradient(225deg, #fff 50%, #c5ccd3 50%); border-bottom-left-radius: 3px; }
.ax-doc-band { position: absolute; left: -10px; bottom: 10px; background: #1d6f42; color: #fff; border-radius: 3px;
  font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 7px; }
.ax-pop-file .ax-file-name { margin: 0; font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--ax-text); }
.ax-card-summary { margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--ax-muted); }
.ax-card-summary b { color: #1a5fd6; font-weight: 600; margin-right: 2px; }
.ax-more td { text-align: left; font-style: italic; font-size: 12px; color: var(--ax-faint); background: #f8fafc; }
.ax-settings-title { margin: 0 0 10px; font-size: 14px; font-weight: 500; color: #070707; }
/* figure.ax ul beats the site's .section ul:not(.cards) padding. */
figure.ax ul.ax-set-list, figure.ax ul.ax-set-children { list-style: none; padding-left: 0; }
.ax-set-list { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ax-set-item { background: #fff; border-radius: 4px 0 0 4px; box-shadow: 0 1px 3px rgba(20, 23, 26, 0.12); }
.ax-set-head { margin: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 11px 16px 11px 14px; font-size: 14px; font-weight: 500; color: #5e5e5e; }
.ax-chev { flex: none; width: 7px; height: 7px; border-right: 2px solid #5f6368; border-bottom: 2px solid #5f6368; transform: rotate(45deg); margin: -4px 4px 0 0; }
.ax-open .ax-chev { transform: rotate(-135deg); margin-top: 4px; }
.ax-set-children { list-style: none; margin: 0 16px 0 14px; padding: 0 0 10px; }
.ax-set-children li { border-top: 1px solid var(--ax-line); border-bottom: 1px solid var(--ax-line); padding: 10px 0; font-size: 13px; color: #454545; }
.ax-card-foot { margin: 0; padding: 10px 16px 6px 8px; text-align: right; font-size: 12px; color: var(--ax-muted); }
/* Cells with a grey second line ("Top-level group", "Percentage points"), short popovers and
   other card edges, and a DiDi conversation panel. */
.ax-cell-sub { display: block; font-size: 12px; font-weight: 400; color: var(--ax-muted); margin-top: 2px; }
.ax-row th .ax-cell-main { font-weight: 500; }
.ax-pop.ax-pop-short { margin-top: -44px; }
.ax-pop-alert.ax-edge-orange { border-left-color: #e08b21; }
.ax-pop .ax-pop-delta { font-size: 12px; color: var(--ax-green); }
.ax-chat { background: #f8fafc; border: 1px solid var(--ax-line); border-right: 0; border-radius: 8px 0 0 8px; overflow: hidden; }
.ax-chat-head { display: flex; gap: 10px; align-items: center; background: #fff; padding: 12px 14px; border-bottom: 1px solid var(--ax-line); }
.ax-chat-head p { margin: 0; font-size: 15px; line-height: 1.25; }
.ax-chat-head b { display: block; font-weight: 600; color: #070707; }
.ax-chat-head span { font-size: 12px; color: #5e6675; }
.ax-avatar { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #2f7cf6; display: inline-flex; align-items: center; justify-content: center; }
.ax-avatar img { width: 14px; height: auto; }
.ax-chat-head .ax-avatar { width: 34px; height: 34px; }
.ax-chat-head .ax-avatar img { width: 19px; }
.ax-chat-body { padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; line-height: 1.45; color: var(--ax-text); }
.ax-msg p { margin: 0; }
.ax-msg p + p { margin-top: 10px; }
.ax-msg ul { margin: 4px 0 2px; padding-left: 18px; }
.ax-msg li { margin: 2px 0; }
.ax-msg li b { font-weight: 600; }
.ax-msg-row { display: flex; gap: 8px; align-items: flex-start; }
.ax-msg-user { align-self: flex-end; max-width: 82%; background: #2f7cf6; color: #fff; border-radius: 12px; padding: 8px 12px; }
.ax-msg-didi { background: #fff; border: 1px solid #e3e6ea; border-radius: 12px; padding: 9px 12px; max-width: 88%; }
.ax-msg .ax-msg-title { font-weight: 600; margin-bottom: 2px; }
.ax-chat-buttons { margin: 0 0 0 32px; display: flex; gap: 6px; flex-wrap: wrap; }
.ax-btn { font-size: 12px; font-weight: 500; line-height: 1.4; border: 1px solid #2f7cf6; color: #2f7cf6; background: #fff; border-radius: 999px; padding: 4px 12px; }
.ax-btn-primary { background: #2f7cf6; color: #fff; }
.ax-msg-success { margin-left: 32px; background: #e7f6ec; color: #1e7a3c; border-radius: 10px; padding: 8px 12px; }
.ax-chat-body .ax-chat-input { margin-top: 14px; border: 1px solid #dfe3e8; background: #fff; border-radius: 999px; padding: 9px 14px; font-size: 13px; color: var(--ax-faint); }
/* Play-in (assets/product-graphics.js, kept by Marko 2026-11-06): only once the script adds .ax-anim, so
   without it every graphic shows complete. Steps fade and rise into place; the popover also
   grows slightly; a clicked button goes from off (outlined) to on (filled). */
.ax-anim .ax-step { opacity: 0; transform: translateY(8px); transition: opacity 0.35s ease, transform 0.35s ease; }
.ax-anim .ax-pop.ax-step { transform: translateY(10px) scale(0.96); }
.ax-anim .ax-step.ax-in, .ax-anim .ax-pop.ax-step.ax-in { opacity: 1; transform: none; }
.ax-btn { transition: background-color 0.2s ease, color 0.2s ease; }
.ax-btn-primary.ax-btn-off { background: #fff; color: #2f7cf6; }
@media (max-width: 600px) {
  .ax-chat-body { padding: 12px 10px 14px; }
  .ax-chat-buttons, .ax-msg-success { margin-left: 0; }
  .ax-wide { display: none; }
  .ax-pop.ax-pop-wide { width: calc(100% - 24px); }
  .ax-app { padding: 10px 0 10px 10px; }
  .ax-kpis { margin-right: -110px; }
  .ax-card { padding-left: 8px; }
  .ax-table th, .ax-table td { padding: 6px; }
  .ax-table td, .ax-table thead th:last-child[data-num] { padding-right: 10px; }
  .ax-sub th { padding-left: 16px; }
  .ax-pop { margin-right: 12px; width: 210px; }
}
/* End of product graphics */

/* [LAYOUT: feature-compare] (FEATURE COMPARISON, Marko 2026-11-06): every feature, product by
   product, inspired by Figma's "Compare all features", in the pricing table's open style:
   horizontal lines only, product names in Findd blue. Two layers stay pinned while the table
   scrolls: the plan names, and under them the product's row (its name, the group being read,
   which site.js fills in, and the product's price in each plan's column). Their heights are fixed
   so the product row knows where the plan row ends. On desktop the plan columns line up with the
   pricing table's above. Widths use the comparison's own width (cqw), since tables ignore widths
   that mix % and px. */
/* On the grey section each product is a white panel with a black line along its top; the plan row
   sits on the grey with the panels' inner padding, so its columns line up with theirs. */
.fc { container-type: inline-size; --fc-top: 68px; --fc-head-h: 64px; --fc-sum-h: 64px; --fc-gap: 48px; --fc-pad: 28px;
  --fc-fr: calc((100cqw - 2 * var(--fc-pad) - var(--plans) * var(--fc-gap)) / (1.15 + var(--plans)));
  --fc-feat: calc(var(--fc-fr) * 1.15 + var(--fc-gap)); --fc-plan: calc(var(--fc-fr) + var(--fc-gap)); margin-top: 28px; }
.fc-head { position: sticky; top: var(--fc-top); z-index: 5; display: flex; align-items: flex-end; background: var(--bg-soft);
  height: var(--fc-head-h); padding: 0 var(--fc-pad) 14px; }
.fc-head-feat { flex: 0 0 var(--fc-feat); font-weight: 700; font-size: 17px; line-height: 1.15; }
.fc-head-plan { flex: 0 0 var(--fc-plan); min-width: 0; }
.fc-head-plan:last-child { flex: 1 1 auto; }
.fc-plan-name { display: block; font-size: 22px; font-weight: 700; line-height: 1.15; }

.fc-product { background: #fff; padding: 0 var(--fc-pad) var(--fc-pad); margin-top: 20px; border-radius: 0 0 var(--radius) var(--radius); }
.fc-product:first-of-type { margin-top: 4px; }
.fc-product:not([open]) { padding-bottom: 0; }
/* The product's row runs the panel's full width, with the black line along its top, so the line
   stays between the plan row and the product while the row is pinned. */
.fc-product > summary { position: sticky; top: calc(var(--fc-top) + var(--fc-head-h)); z-index: 4; background: #fff;
  display: flex; align-items: center; height: var(--fc-sum-h); margin: 0 calc(-1 * var(--fc-pad)); padding: 0 var(--fc-pad);
  cursor: pointer; list-style: none; box-shadow: inset 0 3px 0 var(--fg), inset 0 -1px 0 var(--line); }
.fc-product:not([open]) > summary { box-shadow: inset 0 3px 0 var(--fg); }
.fc-product > summary::-webkit-details-marker { display: none; }
.fc-sum-name { flex: 0 0 var(--fc-feat); min-width: 0; display: flex; align-items: center; gap: 14px; padding-right: 16px; }
.fc-product-name { margin: 0; flex: none; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.1; color: var(--brand); }
.fc-current { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.fc-sum-price { flex: 0 0 var(--fc-plan); min-width: 0; font-size: 17px; font-weight: 700; line-height: 1.3; padding-right: 16px; }
.fc-sum-price:last-child { flex: 1 1 auto; padding-right: 40px; }
.fc-price-short { display: none; }
.fc-toggle { position: absolute; right: calc(var(--fc-pad) + 4px); top: calc(50% - 9px); width: 12px; height: 12px;
  border-right: 2px solid var(--fg); border-bottom: 2px solid var(--fg); transform: rotate(-135deg); transition: transform 0.15s; }
.fc-product:not([open]) .fc-toggle { transform: rotate(45deg); top: calc(50% - 12px); }
.fc-product > summary:focus-visible, .fc-feat > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.fc-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.fc-cols th { height: 0; padding: 0 !important; border: 0 !important; line-height: 0; }
.fc-c-feat { width: var(--fc-feat); }
.fc-c-plan { width: var(--fc-plan); }
.fc-c-plan:last-child { width: auto; }
.fc-table th, .fc-table td { padding: 14px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; font-weight: 400; font-size: 16px; line-height: 1.5; }
.fc-table td { padding-top: 13px; }
.fc-group th { border-top: 0; padding: 22px 0 6px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.fc-table tbody tr:first-child.fc-group th { padding-top: 10px; }
.fc-table tbody tr:first-child:not(.fc-group) > * { border-top: 0; }
.fc-feat > summary { display: flex; gap: 10px; align-items: baseline; cursor: pointer; list-style: none; }
.fc-feat > summary::-webkit-details-marker { display: none; }
.fc-chev { flex: none; width: 7px; height: 7px; border-right: 1.5px solid var(--fg); border-bottom: 1.5px solid var(--fg);
  transform: rotate(-45deg); position: relative; top: -2px; transition: transform 0.15s; }
.fc-feat[open] .fc-chev { transform: rotate(45deg); top: -4px; }
.fc-feat-name { display: block; padding-left: 17px; }
.fc-desc { margin: 6px 0 2px 17px; font-size: 15px; color: var(--muted); }
.fc-check { display: block; width: 24px; height: 24px; }
.fc-check circle { fill: var(--brand); }
.fc-dash { display: block; width: 14px; height: 2px; margin-top: 11px; margin-left: 5px; background: #b9c0c7; border-radius: 1px; }
.fc-text { font-size: 15px !important; color: var(--muted); }
.fc-learn { margin: 14px 0 0; }

@media (max-width: 899px) {
  .fc { --fc-plan: 64px; --fc-top: 64px; --fc-head-h: 44px; --fc-sum-h: 60px; --fc-pad: 12px; margin-top: 20px; }
  .fc-head { padding-bottom: 8px; }
  .fc-product { margin-top: 14px; }
  .fc-head-feat { flex: 1 1 auto; font-size: 15px; }
  .fc-head-plan, .fc-head-plan:last-child { flex: 0 0 var(--fc-plan); text-align: center; }
  .fc-plan-name { font-size: 15px; }
  /* the product's name with the open/close arrow beside it, and the group being read under them */
  .fc-sum-name { flex: 1 1 auto; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 0; padding-right: 8px; }
  .fc-product-name { font-size: 22px; max-width: calc(100% - 24px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .fc-toggle { position: static; order: 2; flex: none; width: 10px; height: 10px; margin-top: 4px; }
  .fc-product:not([open]) .fc-toggle { margin-top: -4px; }
  .fc-current { order: 3; flex-basis: 100%; font-size: 12px; line-height: 1.4; }
  .fc-sum-price, .fc-sum-price:last-child { flex: 0 0 var(--fc-plan); padding: 0; text-align: center; font-size: 15px; }
  .fc-price-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .fc-price-short { display: inline; }
  .fc-c-feat { width: auto; }
  .fc-c-plan, .fc-c-plan:last-child { width: var(--fc-plan); }
  .fc-table th, .fc-table td { font-size: 15px; padding: 12px 0; }
  .fc-table th[scope="row"] { padding-right: 8px; }
  .fc-table td { text-align: center; padding-top: 11px; }
  .fc-check { margin: 0 auto; width: 22px; height: 22px; }
  .fc-dash { margin: 10px auto 0; }
  .fc-group th { font-size: 12px; padding: 18px 0 6px; }
  .fc-desc { font-size: 14px; }
}

/* Pricing grid, Dan's redesign (2026-11-08): the price in the plan header, one "every product
   includes" strip, check lists that match the comparison table, a tagline and description under
   each product, and a link from each product to its rows in the comparison. */
.pg-head .plan-price span { font-size: 15px; font-weight: 500; color: var(--muted); }
.pricing .pg-list { list-style: none; margin: 0; padding: 0; }
.pg-list li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; margin-bottom: 10px; }
.pg-check { display: block; width: 20px; height: 20px; margin-top: 2px; }
.pg-check circle { fill: var(--brand); }
.pg-cell .lead-in { font-weight: 700; margin: 0 0 12px; }
.pg-more { margin: 16px 0 0; font-size: 15px; font-weight: 600; }
.pg-more a { color: var(--brand); text-decoration: none; }
.pg-more a:hover { text-decoration: underline; }
.pg-cell-more { display: none; }
.pg-every { background: var(--bg-soft); border-radius: var(--radius); padding: 18px 22px; margin-bottom: 12px; }
.pg-every-title { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.pricing .pg-every ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.pg-every li { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.pg-every .pg-check { margin-top: 0; }
.pg-tagline { font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--fg); margin: 8px 0 0; }
.pg-desc + .pg-note { margin-top: 8px; }
.pg-lead-spacer { visibility: hidden; }
.fc-product { scroll-margin-top: 140px; }
@media (min-width: 900px) {
  .pg-head .plan-price { font-size: 34px; }
  .pg-every { margin: 8px 0 0; }
  .pg-cell .pg-tagline, .pg-cell .pg-desc { display: none; }
}
@media (max-width: 899px) {
  .pg-cell-more { display: block; }
  .pg-head .plan-price { font-size: 24px; }
  .pg-cell .pg-tagline { margin: -2px 0 6px; }
  .pg-lead-spacer { display: none; }
}