/* ==========================================================================
   GETCORVIDS by Digital Supportly – landing page (getcorvids.com)
   Design: Claude Design · Spec: DESIGN_SPEC.md v1.3
   One stylesheet, no external requests. Dark theme only.
   v1.3 rules: flat colours only
   (no gradients, no glow) · radius ≤ 8 px (inputs, chips, tags 6 px) ·
   pill buttons · manual sliders.
   Breakpoints: mobile < 768 · tablet 768–1279 · desktop ≥ 1280
   ========================================================================== */

/* ---------- Fonts: Inter (SIL OFL 1.1), self-hosted, Latin subset ----------
   Static WOFF 300/400/500/600. When InterVariable.woff2 is approved, replace
   these four rules with one (font-weight: 300 600) and 330 / 550 render exactly. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/Inter-Light.woff") format("woff"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Inter-Regular.woff") format("woff"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/Inter-Medium.woff") format("woff"); }
@font-face { font-family: "Inter Display Black"; font-style: normal; font-weight: 900; font-display: block; src: url("fonts/Inter-Black-display.woff") format("woff"); } /* glyphs C R M y o u r s only – knockout words */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/Inter-SemiBold.woff") format("woff"); }

/* ---------- Tokens ---------- */
:root {
  --bg: #05080F;
  --bg-navy: #07122A;
  --bg-indigo: #120F2E;
  --bg-deep: #061A22;
  --panel: rgba(255,255,255,.04);
  --panel-line: rgba(255,255,255,.08);
  --line-2: rgba(255,255,255,.14);
  --line-3: rgba(255,255,255,.24);
  --fg: #FFFFFF;
  --fg-2: #C9D1DC;
  --fg-mute: #8A94A6;
  --acc: #38BDF8;
  --acc-2: #818CF8;
  --acc-tint: rgba(56,189,248,.08);
  --err: #FB7185;
  --ok: #34D399;
  --ph: #FBBF24;

  /* v1.5 colour blocks (flat, no gradients) */
  --paper: #F5F5F7;          /* Apple-style cool light grey (2026-10-23) */
  --card-white: #FFFFFF;
  --ink: #1D1D1F;
  --ink-2: #424245;
  --ink-mute: #6E6E73;
  --card-line: #E3E3E8;
  --c-sky: #38BDF8;
  --c-ocean: #0A2A66;
  --c-violet: #5B3FD9;
  --c-emerald: #12B886;
  --c-sun: #FFC94A;
  --c-coral: #FF6B4A;

  --font: "Inter", ui-sans-serif, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* type scale – desktop (≥1280) */
  --h1: 72px;  --h2: 60px;  --h3: 22px;
  --lead: 24px; --body: 18px; --small: 15px;

  --wrap: 1280px;
  --gutter: 40px;
  --sec-y: 160px;
  --spot-pad: 64px;
  --hdr-h: 64px;
  --gap: 24px;

  --r: 8px;      /* cards, media, panels, tiles */
  --r-sm: 6px;   /* inputs, chips, tags, icon boxes */
  --shadow: 0 12px 32px rgba(0,0,0,.35);
  --ease: cubic-bezier(.2,.7,.2,1);
}
@media (max-width: 1279px) {
  :root { --h1: 56px; --h2: 48px; --h3: 20px; --lead: 21px; --body: 17px; --gutter: 32px; --sec-y: 120px; --spot-pad: 48px; }
}
@media (max-width: 767px) {
  :root { --h1: 38px; --h2: 34px; --h3: 19px; --lead: 19px; --body: 16px; --small: 14px; --gutter: 16px; --sec-y: 80px; --spot-pad: 24px; --hdr-h: 56px; --gap: 12px; }
}
@media (max-width: 379px) {
  :root { --h1: 34px; --h2: 31px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr-h) + 16px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg-2);
  font-family: var(--font); font-size: var(--body); line-height: 1.55;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
  overflow-x: hidden;
}
@supports (overflow: clip) { body { overflow-x: clip; } }
body.menu-open { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--acc); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
strong { font-weight: 600; color: var(--fg); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }
::selection { background: rgba(56,189,248,.35); color: #fff; }

/* an element with the hidden attribute is really gone – component display rules (flex, grid …) must not bring it back as an invisible layer that swallows taps */
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

.skip {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: #fff; color: #000; padding: 10px 18px; border-radius: 999px; font-weight: 600;
}
.skip:focus { top: 12px; text-decoration: none; }

/* ---------- Type ---------- */
.h1, .h2 { color: var(--fg); font-weight: 300; text-wrap: balance; }
.h1 { font-size: var(--h1); line-height: 1.06; letter-spacing: -0.02em; }
.h2 { font-size: var(--h2); line-height: 1.08; letter-spacing: -0.015em; }
.h3 { color: var(--fg); font-size: var(--h3); line-height: 1.25; font-weight: 600; letter-spacing: -0.005em; }
.lead { font-size: var(--lead); line-height: 1.3; color: var(--fg); font-weight: 400; }
.body-l { font-size: var(--body); line-height: 1.55; color: var(--fg-2); }
.mute-2 { color: var(--fg-2); }
.duo .mute { color: var(--fg-mute); }
.eyebrow {
  font-size: 14px; line-height: 1.4; text-transform: uppercase; letter-spacing: .12em;
  color: var(--acc); font-weight: 500; margin-bottom: 20px;
}
.eyebrow-indigo { color: var(--acc-2); }

/* ---------- Buttons (pill – the one rounded shape kept from Shopify) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 24px; border-radius: 9999px;
  font: 600 18px/1.2 var(--font); letter-spacing: -0.005em;
  border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .2s, border-color .2s, color .2s;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: #fff; color: #000; }
.btn-primary:hover { background: #E6E6E6; }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.06); }
.btn-sm { min-height: 40px; padding: 8px 18px; font-size: 16px; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 50; height: var(--hdr-h);
  background: transparent; border-bottom: 1px solid transparent;
  transition: background-color .3s, border-color .3s;
}
.hdr.is-scrolled {
  background: rgba(5,8,15,.85);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom-color: var(--panel-line);
}
/* backdrop-filter would make the header the containing block of the fixed
   mobile panel, so the open state uses a flat background instead */
.hdr.is-open { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: var(--panel-line); }
.hdr-in { height: 100%; display: flex; align-items: center; gap: 32px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--fg); min-height: 44px; }
.brand:hover { text-decoration: none; }
.brand img { width: 30px; height: 30px; border-radius: var(--r-sm); }
.brand-txt { display: flex; flex-direction: column; line-height: 1.1; }
.brand-word { font-weight: 600; font-size: 16px; letter-spacing: .14em; color: var(--fg); }
.brand-get { color: var(--c-sky); }   /* GETCORVIDS: 'GET' in the logo blue */
.brand-by { font-size: 12px; letter-spacing: .01em; color: var(--fg-mute); margin-top: 3px; font-weight: 400; }
.hdr-nav { flex: 1; }
.hdr-links { display: flex; gap: 4px; }
.hdr-links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  color: var(--fg-2); font-size: 16px; font-weight: 500; border-radius: 999px;
  transition: color .2s, background-color .2s;
}
.hdr-links a:hover { color: #fff; text-decoration: none; background: rgba(255,255,255,.06); }
.hdr-links a.is-active { color: #fff; }
.hdr-toggle {
  display: none; width: 44px; height: 44px; border-radius: 999px;
  background: transparent; border: 1px solid var(--line-2); color: #fff; cursor: pointer;
  align-items: center; justify-content: center;
}
.hdr-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; }
.hdr-toggle .ico-close { display: none; }
.hdr-toggle[aria-expanded="true"] .ico-open { display: none; }
.hdr-toggle[aria-expanded="true"] .ico-close { display: block; }

.mnav {
  position: fixed; inset: var(--hdr-h) 0 0 0; z-index: 49;
  background: var(--bg); padding: 24px var(--gutter) 32px; overflow-y: auto;
}
.mnav[hidden] { display: none; }
.mnav ul { margin-bottom: 28px; }
.mnav li a {
  display: flex; align-items: center; min-height: 56px; color: var(--fg);
  font-size: 26px; font-weight: 300; letter-spacing: -0.01em;
  border-bottom: 1px solid var(--panel-line);
}
.mnav li a:hover { text-decoration: none; color: var(--acc); }

/* Five menu items + CTA do not fit below 1024 px: hamburger from there;
   the CTA stays in the bar on tablet and moves into the panel on mobile. */
@media (max-width: 1023px) {
  .hdr-nav { display: none; }
  .hdr-in { gap: 12px; }
  .brand { margin-right: auto; }
  .hdr-toggle { display: inline-flex; }
}
@media (max-width: 767px) { .hdr-cta { display: none; } }
@media (min-width: 768px) { .mnav .btn-block { display: none; } }

/* ---------- Sections (flat, alternating backgrounds) ---------- */
.sec { padding-block: var(--sec-y); position: relative; }
.bg-navy { background: var(--bg-navy); }
.bg-indigo { background: var(--bg-indigo); }
.bg-deep { background: var(--bg-deep); }
.sec-title { max-width: 18ch; margin-bottom: 64px; }
.sec-head-split { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: end; margin-bottom: 56px; }
.sec-head-split .h2 { grid-column: 1 / span 6; }
.sec-head-split .body-l { grid-column: 8 / span 5; }

/* Spotlight panel – flat */
.spot { position: relative; border-radius: var(--r); padding: var(--spot-pad); background: var(--panel); border: 1px solid var(--panel-line); overflow: hidden; }
.spot-split { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: center; }
.spot-split .spot-copy { grid-column: 1 / span 5; }
.spot-split .spot-visual { grid-column: 6 / span 7; }
.spot-rev .spot-copy { grid-column: 8 / span 5; grid-row: 1; }
.spot-rev .spot-visual { grid-column: 1 / span 7; grid-row: 1; }
.spot-copy .h2 { margin-bottom: 24px; }
.spot-copy .body-l { max-width: 46ch; }

/* Screenshot frame */
.shot { position: relative; border-radius: var(--r); overflow: hidden; background: #0B1018; border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.shot-bar { height: 28px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: #0E141E; border-bottom: 1px solid var(--panel-line); }
.shot-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.18); }
.shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
.float { position: absolute; border-radius: var(--r-sm); border: 1px solid var(--line-2); box-shadow: var(--shadow); background: #12161F; }

/* ---------- Slider (Shopify-style). Two modes:
   · paged  (.is-js, set by JS): moves only on click / key / swipe, one slow CSS transition on the
     track's transform (compositor thread → smooth), soft start and long gentle landing;
   · native (no JS): horizontal scroll with snap points. ---------- */
.slider { --edge: max(var(--gutter), calc((100% - var(--wrap)) / 2)); }
.slider-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.slider-head-h2 .h2 { max-width: 18ch; }
.slider-head-end { justify-content: flex-end; margin-bottom: 24px; }
.slider-ctrl { display: flex; gap: 8px; flex: none; }
.sbtn {
  width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--fg); border: 1px solid var(--sbtn-line, rgba(255,255,255,.3)); cursor: pointer;
  transition: background-color .2s, border-color .2s, opacity .2s;
}
.sbtn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.sbtn:hover:not(:disabled) { background: var(--sbtn-hover, rgba(255,255,255,.08)); border-color: var(--fg); }
.sbtn:disabled { opacity: .3; cursor: default; }
.slider.no-overflow .slider-ctrl { visibility: hidden; }
.slider-ctrl [data-play] { display: none; }   /* sliders have no autoplay any more */
.slider-vp {
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge);
  padding-inline: var(--edge); padding-bottom: 8px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.slider-vp::-webkit-scrollbar { display: none; }
.slider-vp:focus-visible { outline-offset: -2px; border-radius: 0; }
.slider-track { display: flex; gap: var(--gap); }
.slider-track > li { flex: none; scroll-snap-align: start; }
.slider.is-js .slider-vp { overflow: hidden; scroll-snap-type: none; touch-action: pan-y; cursor: grab; }
.slider.is-js .slider-track {
  backface-visibility: hidden; will-change: transform; transform: translate3d(0,0,0);
  transition-property: transform; transition-duration: 1100ms;
  transition-timing-function: cubic-bezier(.45, 0, .15, 1);   /* soft start, long gentle landing */
}
.slider.is-js .slider-vp.is-grabbing { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.slider.is-js .slider-track img { -webkit-user-drag: none; user-select: none; pointer-events: none; }
/* prefers-reduced-motion: the JS uses a shorter glide (0.5 s) for moves the visitor starts */

/* ---------- S2 Overview ---------- */
.s-overview { padding-top: 72px; }
.s-overview .h1 { max-width: 25ch; }
.ov-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; margin-top: 48px; }
.ov-lead { max-width: 40ch; color: var(--fg-2); }
.ov-row .btn-row { flex: none; }
.shot-dash { margin-top: 40px; }
.shot-dash img { aspect-ratio: 12 / 5; }
.s-overview { padding-bottom: 112px; }
.s-screens { padding-block: 96px; }

.tr-ov > li { width: min(520px, 78vw); }
.mcard-media {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden;
  background: var(--tile, #0C1422); border: 1px solid var(--panel-line);
}
.mcard-media img {
  position: absolute; left: 8%; top: 9%; width: 125%; max-width: none;
  border-radius: var(--r-sm); border: 1px solid var(--line-2); box-shadow: var(--shadow);
}
.mcard-cap { margin-top: 18px; font-size: var(--body); line-height: 1.5; color: var(--fg-2); max-width: 46ch; }
.mcard-cap strong { display: block; font-size: var(--h3); line-height: 1.3; color: var(--fg); margin-bottom: 4px; font-weight: 600; }

/* ---------- S3 Pipeline ---------- */
.comp-pipeline { position: relative; padding: 0 0 56px 0; }
.comp-pipeline .shot { width: 92%; margin-left: auto; }
.float-card { left: 0; bottom: 0; width: 34%; }

/* ---------- S4 Features (slider) ---------- */
.tr-feat > li { width: min(400px, 78vw); }
.fcard-media { aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; margin-bottom: 22px; background: #0B1018; border: 1px solid var(--panel-line); }
.fcard-media img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.fcard .h3 { margin-bottom: 8px; }
.fcard p { color: var(--fg-2); max-width: 36ch; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 56px; }
.chips li { font-size: var(--small); line-height: 1.4; color: var(--fg-2); padding: 9px 14px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--panel); }

/* ---------- S5 Quotes: the client-facing quote and invoice, layered ---------- */
.spot-comp { padding-bottom: calc(var(--spot-pad) * .75); }
.comp-docs { position: relative; aspect-ratio: 16 / 8.4; }
.doc { position: absolute; border-radius: var(--r); box-shadow: 0 12px 32px rgba(0,0,0,.45); background: #fff; }
.doc-quote { left: 3%; top: 0; width: 44%; }
.doc-invoice { right: 3%; top: 16%; width: 45%; }
.doc-totals { right: 0; top: 2%; width: 50%; }
.doc-accepted { left: 0; bottom: 4%; width: 62%; }
.ticks { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
.ticks li {
  display: inline-flex; align-items: center; gap: 10px; font-size: var(--small); color: var(--fg);
  padding: 9px 14px 9px 12px; border-radius: var(--r-sm); background: var(--acc-tint); border: 1px solid rgba(56,189,248,.22);
}
.ticks svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--acc); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ticks-col { flex-direction: column; align-items: flex-start; margin-top: 32px; }
.ticks-col li { background: transparent; border: 0; padding: 0; font-size: var(--body); color: var(--fg-2); }
.ticks-indigo svg { stroke: var(--acc-2); }

/* ---------- S6 Website (flat indigo) ---------- */
.spot-indigo { background: #1A1640; border-color: rgba(129,140,248,.28); }

/* ---------- S7 Modules ---------- */
.mod-lead { margin-top: 20px; max-width: 46ch; }
.s-modules .slider-head-h2 .h2 { max-width: 20ch; }
.tr-mod > li { width: min(300px, 78vw); }
.tr-mod > li.mod-core { width: min(440px, 86vw); }
.mod {
  display: flex; flex-direction: column; gap: 10px; min-height: 340px;
  padding: 28px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--panel-line);
}
.mod p { font-size: var(--small); color: var(--fg-2); }
.mod .h3 { margin-top: 18px; }
.mod-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mod-for { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--panel-line); color: var(--fg-mute) !important; }
.mod-for span { color: var(--fg-2); font-weight: 500; }
.mod-core { background: #0B2233; border-color: rgba(56,189,248,.4); }
.mod-core .h3 { font-size: calc(var(--h3) + 6px); font-weight: 500; }
.mod-core p { font-size: var(--body); }
.mod-soon { background: rgba(255,255,255,.02); }
.mod-soon .ibox { background: rgba(255,255,255,.05); color: var(--fg-mute); }
.mod-soon .h3 { color: var(--fg-2); }
.soon-note { margin-top: 24px; display: flex; justify-content: flex-end; }
.soon-note a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--small); font-weight: 500; }
.soon-note svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.badge {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 500; letter-spacing: .02em; white-space: nowrap;
  color: var(--fg); background: rgba(255,255,255,.07); border: 1px solid var(--line-2);
}
.badge-core { color: #001019; background: var(--acc); border-color: var(--acc); }
.badge-soon { color: var(--fg-2); background: transparent; border-style: dashed; border-color: rgba(255,255,255,.28); }

.ibox { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-sm); color: var(--acc); background: var(--acc-tint); }
.ibox svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ibox-lg { width: 48px; height: 48px; }
.ibox-lg svg { width: 24px; height: 24px; }
.ibox-sm { width: 40px; height: 40px; }
.ibox-sm svg { width: 20px; height: 20px; }
.ibox-solid { background: var(--acc); color: #001019; }

.sub {
  display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 12px 14px;
  border-radius: var(--r); background: rgba(255,255,255,.025); border: 1px solid var(--panel-line);
  font-size: var(--small); line-height: 1.3; color: var(--fg);
}
.sub-custom { margin-top: 32px; padding: 0; border-color: rgba(56,189,248,.45); background: #0B2233; }
.sub-custom a { flex: 1; display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 12px 18px; color: var(--fg-2); border-radius: var(--r); }
.sub-custom a:hover { text-decoration: none; background: #0E2A3F; }
.sub-custom-txt { flex: 1; }
.sub-custom-txt strong { margin-right: 6px; }
.sub-custom-arrow { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--acc); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- S7b Tailored ---------- */
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); align-items: end; }
.step3 { display: flex; flex-direction: column; gap: 12px; padding: 32px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--panel-line); }
.step3:nth-child(1) { min-height: 280px; }
.step3:nth-child(2) { min-height: 320px; }
.step3:nth-child(3) { min-height: 360px; }
.step3 p { color: var(--fg-2); }
.step3-hi { border-color: rgba(56,189,248,.4); background: #0B2233; }
.meter { display: flex; gap: 6px; margin-bottom: auto; padding-bottom: 32px; }
.meter i { width: 32px; height: 6px; border-radius: 2px; background: rgba(255,255,255,.12); }
.meter i.on { background: var(--acc); }
.tail-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--panel-line); }
.tail-line { color: var(--fg); font-size: var(--lead); line-height: 1.3; font-weight: 300; }

/* ---------- S8 Facts ---------- */
.sec-band { padding-block: calc(var(--sec-y) * .75); }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.fact { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.16); }
.fact-n { color: var(--fg); font-size: calc(var(--h2) * 1.2); line-height: 1; font-weight: 300; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.fact-n small { font-size: .4em; letter-spacing: -0.01em; color: var(--fg); font-weight: 400; }
.fact-l { font-size: var(--body); color: var(--fg-2); max-width: 22ch; }

/* ---------- S9 Trust ---------- */
.trust-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: center; }
.trust-copy { grid-column: 1 / span 7; }
.trust-copy .h2 { max-width: 16ch; margin-bottom: 48px; }
.trust-visual { grid-column: 8 / span 5; }
.ws-art { width: 100%; height: auto; }
.tpoints { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 32px; }
.tpoints li { display: flex; flex-direction: column; gap: 16px; }
.tpoints .h3 { margin-bottom: 6px; }
.tpoints p { color: var(--fg-2); font-size: var(--small); line-height: 1.5; }

.behind { display: flex; align-items: center; gap: 32px; margin-top: 96px; padding: 32px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--panel-line); }
.behind-photo { flex: none; width: 120px; height: 120px; border-radius: var(--r); display: flex; align-items: center; justify-content: center; text-align: center; font-size: 11px; padding: 12px; }
.behind-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.behind-lead { color: var(--fg); font-size: var(--body); }

/* Placeholders – deliberately loud so nothing ships by accident */
.ph { color: var(--ph); border: 1px dashed rgba(251,191,36,.6); background: rgba(251,191,36,.06); border-radius: var(--r-sm); font-size: var(--small); font-weight: 500; letter-spacing: .02em; }
.ph-inline { display: inline-block; padding: 4px 10px; }
.ph-block { padding: 12px 16px; }

/* ---------- S10 How (Shopify closing: numbered list + collage) ---------- */
.how-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: center; }
.how-grid > .slider-vp { grid-column: 1 / span 6; overflow: visible; padding: 0; scroll-snap-type: none; }
.how { display: flex; flex-direction: column; gap: 0; }
.how-step { display: grid; grid-template-columns: 140px 1fr; gap: 24px; align-items: start; padding: 32px 0; border-top: 1px solid rgba(255,255,255,.16); }
.how-step:last-child { border-bottom: 1px solid rgba(255,255,255,.16); }
.how-n { font-size: calc(var(--h2) * 1.3); line-height: .9; font-weight: 300; letter-spacing: -0.04em; color: var(--fg); font-variant-numeric: tabular-nums; }
.how-step .h3 { margin-bottom: 8px; }
.how-step p { color: var(--fg-2); max-width: 36ch; }
.collage { grid-column: 8 / span 5; position: relative; aspect-ratio: 1 / 1; }
.collage img { position: absolute; border-radius: var(--r); border: 1px solid var(--line-2); box-shadow: var(--shadow); background: #0B1018; }
.col-a { left: 0; top: 4%; width: 82%; }
.col-b { right: 0; bottom: 10%; width: 72%; }
.col-c { left: 6%; bottom: 0; width: 38%; }
.how-cta { margin-top: 56px; }
.slider-mobile .slider-ctrl { display: none; }

/* ---------- S10b Pricing ---------- */
.pcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.pcard { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 32px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--panel-line); }
.pcard .ibox { margin-bottom: 18px; }
.pcard p { color: var(--fg-2); }
.pcard-n { position: absolute; top: 28px; right: 32px; font-size: 15px; color: var(--fg-mute); font-variant-numeric: tabular-nums; }
.pcard + .pcard::before { content: "+"; position: absolute; left: calc(var(--gap) * -1); top: 50%; width: var(--gap); transform: translateY(-50%); text-align: center; color: var(--fg-mute); font-size: 22px; font-weight: 300; }
.lockline { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 32px; padding: 20px 24px; border-radius: var(--r); background: #0B2233; border: 1px solid rgba(56,189,248,.4); font-size: var(--lead); line-height: 1.3; }
.lockline strong { font-weight: 400; }
.lockline svg { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--acc); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.finenote { margin-top: 20px; text-align: center; color: var(--fg-mute); font-size: var(--small); }

/* ---------- S11 FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: start; }
.faq-title { grid-column: 1 / span 4; position: sticky; top: calc(var(--hdr-h) + 32px); max-width: 10ch; }
.faq-list { grid-column: 6 / span 7; border-top: 1px solid var(--line-2); }
.faq-list details { border-bottom: 1px solid var(--line-2); }
.faq-list summary { position: relative; list-style: none; cursor: pointer; padding: 24px 56px 24px 0; min-height: 44px; color: var(--fg); font-size: calc(var(--h3) - 1px); line-height: 1.35; font-weight: 500; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::before, .faq-list summary::after { content: ""; position: absolute; right: 12px; top: 50%; width: 16px; height: 1.75px; background: var(--fg); border-radius: 1px; transition: transform .25s var(--ease), opacity .25s; }
.faq-list summary::after { transform: rotate(90deg); }
.faq-list details[open] summary::after { transform: rotate(0deg); opacity: 0; }
.faq-list summary:hover { color: var(--acc); }
.faq-list summary:focus-visible { outline-offset: -2px; }
.faq-list details p { padding: 0 56px 28px 0; color: var(--fg-2); max-width: 62ch; }

/* ---------- S12 Contact ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: start; }
.contact-copy { grid-column: 1 / span 5; }
.contact-copy .h2 { margin-bottom: 24px; }
.contact-form-wrap { grid-column: 7 / span 6; padding: 40px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--panel-line); }
.mail-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; min-height: 44px; font-size: var(--body); font-weight: 500; }
.mail-link svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.cform { display: flex; flex-direction: column; gap: 22px; }
.cform[hidden] { display: none; }
.frow-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field > label:not(.check), .field > legend { color: var(--fg); font-size: var(--small); font-weight: 500; padding: 0; }
fieldset.field > legend { margin-bottom: 10px; }
.cform input[type="text"], .cform input[type="email"], .cform textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--bg); color: var(--fg); border: 1px solid rgba(255,255,255,.22);
  font: 400 16px/1.45 var(--font); transition: border-color .2s, box-shadow .2s;
}
.cform textarea { resize: vertical; min-height: 140px; }
.cform input:hover, .cform textarea:hover { border-color: rgba(255,255,255,.36); }
.cform input:focus, .cform textarea:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 2px var(--acc); }
.field.has-error input, .field.has-error textarea { border-color: var(--err); box-shadow: 0 0 0 1px var(--err); }
.ferr { display: flex; align-items: center; gap: 6px; color: var(--err); font-size: 14px; line-height: 1.4; }
.ferr[hidden] { display: none; }
.ferr::before { content: "!"; flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--err); color: #1A0006; font-size: 11px; font-weight: 700; }

.chipset { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-opt { position: relative; display: inline-flex; cursor: pointer; }
.chip-opt input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip-opt span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 14px; border-radius: var(--r-sm); border: 1px solid rgba(255,255,255,.22); color: var(--fg-2); font-size: var(--small); line-height: 1.2; transition: background-color .2s, border-color .2s, color .2s; }
.chip-opt:hover span { border-color: rgba(255,255,255,.4); color: var(--fg); }
.chip-opt input:checked + span { background: rgba(56,189,248,.16); border-color: var(--acc); color: var(--fg); }
.chip-opt input[type="checkbox"]:checked + span::before { content: ""; width: 12px; height: 7px; border-left: 2px solid var(--acc); border-bottom: 2px solid var(--acc); transform: rotate(-45deg) translate(1px, -2px); }
.chip-opt input:focus-visible + span { outline: 2px solid var(--acc); outline-offset: 2px; }

.check { position: relative; display: flex; gap: 12px; align-items: flex-start; cursor: pointer; color: var(--fg-2); font-size: var(--small); line-height: 1.5; }
.check input { position: absolute; left: 0; top: 0; width: 24px; height: 24px; opacity: 0; margin: 0; cursor: pointer; }
.check-box { flex: none; width: 24px; height: 24px; border-radius: var(--r-sm); border: 1px solid rgba(255,255,255,.35); background: var(--bg); display: inline-flex; align-items: center; justify-content: center; transition: background-color .2s, border-color .2s; }
.check-box svg { width: 16px; height: 16px; fill: none; stroke: #001019; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.check input:checked + .check-box { background: var(--acc); border-color: var(--acc); }
.check input:checked + .check-box svg { opacity: 1; }
.check input:focus-visible + .check-box { outline: 2px solid var(--acc); outline-offset: 2px; }
.field-check.has-error .check-box { border-color: var(--err); box-shadow: 0 0 0 1px var(--err); }
.ph-link { white-space: nowrap; }

.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

.fsubmit { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; margin-top: 4px; }
.fnote { color: var(--fg-mute); font-size: var(--small); }
.spinner { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(0,0,0,.2); border-top-color: #000; animation: spin .8s linear infinite; }
.cform.is-sending .spinner { display: inline-block; }
.cform.is-sending #f-submit { background: #CFCFCF; cursor: progress; }
@keyframes spin { to { transform: rotate(360deg); } }

.fbanner { display: flex; gap: 14px; padding: 16px 18px; border-radius: var(--r); font-size: var(--small); line-height: 1.5; }
.fbanner[hidden] { display: none; }
.fbanner svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; }
.fbanner-error { background: #2A0F17; border: 1px solid rgba(251,113,133,.5); color: #FECDD3; }
.fbanner-error strong { color: #fff; display: block; margin-bottom: 2px; }
.fbanner-error a { color: #fff; text-decoration: underline; }

.fsuccess { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 8px 0; }
.fsuccess[hidden] { display: none; }
.fsuccess:focus { outline: none; }
.fsuccess .ibox { color: var(--ok); background: rgba(52,211,153,.12); }
.fsuccess .ibox svg { stroke-width: 2.25; }
.fsuccess .h3 { font-size: calc(var(--h3) + 4px); font-weight: 500; }
.fsuccess p { color: var(--fg-2); }

/* ---------- Footer ---------- */
.ftr { border-top: 1px solid var(--panel-line); padding: 48px 0 40px; font-size: var(--small); color: var(--fg-mute); }
.ftr-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }
.ftr-links { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.ftr-links a, .ftr-meta a { color: var(--fg-2); display: inline-flex; align-items: center; min-height: 44px; }
.ftr-links a:hover, .ftr-meta a:hover { color: #fff; }
.ftr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; }
.ftr-operator { margin-top: 24px; }

/* ---------- Reveal on scroll ---------- */
.js .rv { opacity: 0; transform: translateY(16px); transition: opacity .5s ease-out, transform .5s ease-out; transition-delay: var(--d, 0ms); }
.js .rv.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .slider.is-js .slider-track:not(.x) { transition: transform 500ms cubic-bezier(.45, 0, .15, 1) !important; }   /* visitor-started card move: short glide, never a jump */
  .js .rv { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   Tablet (768–1279)
   ========================================================================== */
@media (max-width: 1279px) {
  .s-overview { padding-top: 88px; }
  .ov-row { flex-direction: column; align-items: flex-start; }
  .shot-dash { margin-top: 32px; }
  .s-overview { padding-bottom: 88px; }
  .s-screens { padding-block: 72px; }
  .spot-split .spot-copy, .spot-rev .spot-copy { grid-column: 1 / -1; grid-row: auto; }
  .spot-split .spot-visual, .spot-rev .spot-visual { grid-column: 1 / -1; grid-row: auto; margin-top: 24px; }
  .spot-copy .body-l { max-width: 60ch; }
  .sec-head-split .h2 { grid-column: 1 / -1; }
  .sec-head-split .body-l { grid-column: 1 / -1; max-width: 60ch; }
  .facts { grid-template-columns: repeat(2, 1fr); gap: 48px 24px; }
  .faq-title { grid-column: 1 / -1; position: static; max-width: none; margin-bottom: 24px; }
  .faq-list { grid-column: 1 / -1; }
  .contact-copy { grid-column: 1 / -1; }
  .contact-form-wrap { grid-column: 1 / -1; }
  .contact-copy .body-l { max-width: 60ch; }
  .how-grid > .slider-vp { grid-column: 1 / span 7; }
  .collage { grid-column: 8 / span 5; }
  .how-step { grid-template-columns: 96px 1fr; }
}

/* Narrow tablet (768–1023) */
@media (max-width: 1023px) {
  .steps3 { grid-template-columns: 1fr; gap: 12px; }
  .step3 { min-height: 0 !important; }
  .meter { padding-bottom: 12px; }
  .pcards { grid-template-columns: 1fr; gap: 28px; }
  .pcard + .pcard::before { left: 50%; top: -28px; width: 28px; transform: translateX(-50%); line-height: 28px; }
  .trust-copy { grid-column: 1 / -1; }
  .trust-visual { grid-column: 1 / -1; max-width: 360px; margin: 24px auto 0; }
  .how-grid > .slider-vp { grid-column: 1 / -1; }
  .collage { display: none; }
}

/* ==========================================================================
   Mobile (< 768)
   ========================================================================== */
@media (max-width: 767px) {
  .s-overview { padding-top: 48px; }
  .s-overview .h1 { letter-spacing: -0.025em; }
  .ov-row { margin-top: 20px; gap: 28px; }
  .ov-row .btn-row { flex-direction: column; width: 100%; }
  .ov-row .btn-row .btn { width: 100%; }
  .eyebrow { font-size: 13px; margin-bottom: 16px; }
  .shot-dash { margin-top: 24px; }
  .shot-dash .shot-bar { display: none; }
  .s-overview { padding-bottom: 56px; }
  .s-screens { padding-block: 48px; }

  .slider-head { margin-bottom: 28px; }
  .slider-head-h2 { flex-direction: column; align-items: stretch; gap: 20px; }
  .slider-head-h2 .slider-ctrl { align-self: flex-end; }
  .shot-dash img { aspect-ratio: 16 / 11; object-position: 0 0; }
  .sbtn { width: 44px; height: 44px; }
  .tr-ov > li, .tr-feat > li { width: 84vw; }
  .tr-mod > li, .tr-mod > li.mod-core { width: 84vw; }
  .mod { min-height: 300px; padding: 22px; }

  .sec-title { margin-bottom: 40px; }
  .sec-head-split { margin-bottom: 32px; }
  .spot-copy .h2 { margin-bottom: 16px; }

  .comp-pipeline { padding-bottom: 40px; }
  .comp-pipeline .shot { width: 100%; }
  .float-card { width: 52%; left: -2px; }

  /* phones: quote → invoice → accepted, stacked */
  .comp-docs { aspect-ratio: 10 / 12.5; }
  .doc-quote { left: 0; top: 0; width: 78%; }
  .doc-invoice { right: 0; top: 40%; width: 78%; }
  .doc-totals { display: none; }
  .doc-accepted { left: 0; bottom: 0; width: 100%; }
  .ticks { margin-top: 28px; gap: 8px; }

  .chips { margin-top: 40px; gap: 8px; }
  .chips li { padding: 8px 12px; }

  .soon-note { justify-content: flex-start; margin-top: 16px; }
  .sub { min-height: 60px; padding: 10px 12px; gap: 10px; }

  .step3 { padding: 24px; }
  .tail-foot { flex-direction: column; align-items: stretch; margin-top: 32px; }
  .tail-foot .btn { width: 100%; }

  .facts { grid-template-columns: 1fr 1fr; gap: 32px 16px; }
  .fact-n { font-size: 44px; }
  .fact-l { font-size: 15px; }

  .trust-copy .h2 { margin-bottom: 32px; }
  .tpoints { grid-template-columns: 1fr; gap: 28px; }
  .tpoints li { flex-direction: row; }
  .trust-visual { max-width: 320px; }
  .behind { flex-direction: column; align-items: flex-start; margin-top: 56px; padding: 24px; gap: 20px; }
  .behind-photo { width: 96px; height: 96px; }

  /* S10 becomes a slider on phones */
  .slider-mobile .slider-ctrl { display: flex; }
  .how-grid { display: block; padding-inline: 0; }
  .how-grid > .slider-vp { overflow-x: auto; padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); padding-bottom: 8px; scroll-snap-type: x mandatory; }
  .slider.is-js .how-grid > .slider-vp { overflow: hidden; scroll-snap-type: none; }
  .how { flex-direction: row; gap: var(--gap); }
  .how-step { flex: none; width: 84vw; display: flex; flex-direction: column; gap: 20px; padding: 24px; border: 1px solid var(--panel-line); border-radius: var(--r); background: var(--panel); scroll-snap-align: start; }
  .how-step:last-child { border-bottom: 1px solid var(--panel-line); }
  .how-n { font-size: 56px; }
  .how-cta { margin-top: 32px; }
  .how-cta .btn { width: 100%; }

  .pcard { padding: 24px; }
  .pcard-n { top: 24px; right: 24px; }
  .lockline { font-size: 18px; padding: 16px 18px; justify-content: flex-start; }

  .faq-list summary { padding: 20px 44px 20px 0; font-size: 17px; }
  .faq-list summary::before, .faq-list summary::after { right: 6px; }
  .faq-list details p { padding-right: 0; }

  .contact-form-wrap { padding: 20px; margin-inline: calc(var(--gutter) * -0.5); }
  .frow-2 { grid-template-columns: 1fr; gap: 22px; }
  .fsubmit .btn { width: 100%; }

  .ftr-in { flex-direction: column; align-items: flex-start; gap: 16px; }
  .ftr-links, .ftr-meta { flex-direction: column; align-items: flex-start; gap: 0; }
}

/* ==========================================================================
   v1.4 additions
   ========================================================================== */

/* Stacked spotlight trio (S3 → S3b → S3c): one band, panels alternate sides */
.sec-stack-start { padding-bottom: 32px; }
.sec-stack-mid { padding-block: 0 32px; }
.sec-stack-end { padding-top: 0; }
.comp-team { position: relative; padding-bottom: 64px; }
.comp-team .shot { width: 92%; }
.float-day { right: 0; bottom: 0; width: 54%; }

/* Play / pause control (WCAG 2.2.2) */
.sbtn-play .i-play { display: none; }
.sbtn-play[data-state="paused"] .i-pause { display: none; }
.sbtn-play[data-state="paused"] .i-play { display: block; }
.sbtn-play .i-play { stroke-linejoin: round; }

/* ---------- S2b CRM tour ---------- */
.tour-head { margin-bottom: 64px; }
.tour-head .lead { grid-column: 8 / span 5; }
.tour { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: start; }
.tour-side { grid-column: 1 / span 3; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.tour-tabs { display: flex; flex-direction: column; width: 100%; }
.tt {
  position: relative; display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 11px 0 13px; background: none; border: 0; border-radius: 0;
  font: 300 24px/1.2 var(--font); letter-spacing: -0.01em; color: var(--fg-mute);
  transition: color .3s ease;
}
.tt:hover { color: var(--fg-2); }
.tt[aria-selected="true"] { color: var(--fg); }
.tt:focus-visible { outline-offset: 2px; border-radius: 4px; }
.tt-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--panel-line); overflow: hidden; }
.tt-bar i { display: block; width: 0; height: 100%; background: var(--acc); }
.tt[aria-selected="true"] .tt-bar { height: 2px; background: rgba(255,255,255,.12); }
.tt[aria-selected="true"] .tt-bar i { width: 100%; }
.tour.is-auto .tt[aria-selected="true"] .tt-bar i { width: 0; animation: tt-progress var(--tour-dur, 6000ms) linear forwards; }
.tour.is-auto.is-paused .tt[aria-selected="true"] .tt-bar i { animation-play-state: paused; }
@keyframes tt-progress { to { width: 100%; } }

.tour-stage { grid-column: 4 / span 9; display: grid; }
.tp { grid-area: 1 / 1; position: relative; opacity: 0; visibility: hidden; transform: translate3d(0, 8px, 0); transition: opacity .9s ease-in-out, transform .9s ease-in-out, visibility 0s linear .9s; }
.tp.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .9s ease-in-out, transform .9s ease-in-out, visibility 0s; }
.tp:focus-visible { outline-offset: 6px; }
.tp-cap { margin-top: 22px; font-size: var(--body); color: var(--fg-2); max-width: 60ch; }
.tp-float { right: 4%; bottom: 72px; width: 32%; border-radius: var(--r-sm); background: #fff; transform: translateY(12px); opacity: 0; transition: transform .9s cubic-bezier(.2,.7,.2,1) .25s, opacity .9s ease .25s; }
.tp.is-active .tp-float { transform: none; opacity: 1; }

/* ---------- S4 art cards (features without a screenshot) ---------- */
.fcard-art { display: grid; place-items: center; background: #0B2233; border-color: rgba(56,189,248,.25); }
.art-icon { width: 96px; height: 96px; display: grid; place-items: center; border-radius: var(--r); border: 1px solid rgba(56,189,248,.4); background: var(--bg-navy); }
.art-icon svg { width: 44px; height: 44px; fill: none; stroke: var(--acc); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- S7 feature wall: two slow rows drifting in opposite directions ---------- */
.wall { margin-top: 40px; }
.wall-head { display: flex; justify-content: flex-end; margin-bottom: 16px; }
.wall:not(.is-moving) .wall-head { display: none; }
.wall-row { overflow: hidden; padding-block: 6px; }
.wall-track { display: flex; gap: 12px; width: max-content; }
.wall .sub { flex: none; width: 236px; }
.wall.is-moving .wall-track { animation: wall-drift 90s linear infinite; }
.wall.is-moving .wall-row-rev .wall-track { animation-duration: 100s; animation-direction: reverse; }
.wall.is-paused .wall-track, .wall-row:hover .wall-track { animation-play-state: paused !important; }
@keyframes wall-drift { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 6px)); } }
/* static fallback (no JS or reduced motion) */
.wall:not(.is-moving) .wall-track { flex-wrap: wrap; width: auto; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.wall:not(.is-moving) .wall-row + .wall-row .wall-track { padding-top: 0; }
.wall:not(.is-moving) .sub { width: calc((100% - 4 * 12px) / 5); min-width: 0; }
.s-modules .sub-custom { display: flex; }

@media (max-width: 1279px) {
  .tour-head .lead { grid-column: 1 / -1; max-width: 50ch; }
}
@media (max-width: 1023px) {
  .tour { display: block; }
  .tour-side { flex-direction: row; align-items: center; gap: 12px; margin-bottom: 20px; }
  .tour-tabs {
    flex-direction: row; gap: 8px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0;
    margin-left: calc(var(--gutter) * -1); padding-left: var(--gutter); padding-block: 2px;
  }
  .tour-tabs::-webkit-scrollbar { display: none; }
  .tt {
    flex: none; width: auto; font: 500 15px/1.2 var(--font); letter-spacing: 0; white-space: nowrap;
    padding: 12px 14px 13px; min-height: 44px; border: 1px solid var(--line-2); border-radius: var(--r-sm); overflow: hidden; color: var(--fg-2);
  }
  .tt[aria-selected="true"] { background: var(--acc-tint); border-color: rgba(56,189,248,.5); }
  .tt-bar { left: 0; right: 0; }
  .tt:not([aria-selected="true"]) .tt-bar { display: none; }
  .tour-play { flex: none; }
  .tp-float { bottom: 64px; width: 40%; }
}
@media (max-width: 767px) {
  .tour-head { margin-bottom: 32px; }
  .tp-cap { margin-top: 16px; }
  .tp-float { bottom: 76px; right: 3%; width: 46%; }
  .tp .shot-bar { display: none; }
  .sec-stack-start { padding-bottom: 16px; }
  .sec-stack-mid { padding-block: 0 16px; }
  .comp-team { padding-bottom: 40px; }
  .comp-team .shot { width: 100%; }
  .float-day { width: 72%; right: -2px; }
  .wall { margin-top: 40px; }
  .wall .sub { width: 200px; }
  .wall:not(.is-moving) .sub { width: calc((100% - 12px) / 2); }
  .art-icon { width: 80px; height: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  /* the tour keeps its fades and progress bars (no movement); only the slide-in offsets are dropped */
  .tour .tp, .tour .tp-float { transform: none !important; }
  .tour .tp { transition: opacity .7s ease-in-out, visibility 0s linear .7s !important; }
  .tour .tp.is-active { transition: opacity .7s ease-in-out, visibility 0s !important; }
  .tour .tp-float { transition: opacity .7s ease .2s !important; }
  .tour.is-auto .tt[aria-selected="true"] .tt-bar i { width: 0; animation: tt-progress var(--tour-dur, 6000ms) linear forwards !important; }
  .tour.is-auto .tour-seg.is-on i { animation: tt-progress var(--tour-dur, 6000ms) linear forwards !important; }
  .tour.is-auto.is-paused .tt[aria-selected="true"] .tt-bar i, .tour.is-auto.is-paused .tour-seg.is-on i { animation-play-state: paused !important; }
}

/* ==========================================================================
   v1.5 – colour: light paper sections with white cards, full colour blocks.
   Each theme re-maps the text / line / panel tokens, so components follow.
   ========================================================================== */
.theme-paper, .theme-sun {
  --fg: var(--ink); --fg-2: var(--ink-2); --fg-mute: var(--ink-mute);
  --panel: var(--card-white); --panel-line: var(--card-line); --line-2: #D2D2D7; --line-3: #C7C7CC;
  --acc: #0066CC; --acc-tint: #E8F1FC; --ph: #8A5A00;
  --sbtn-line: rgba(11,15,25,.28); --sbtn-hover: rgba(11,15,25,.06);
  background: var(--paper); color: var(--fg-2);
}
.theme-paper-alt { background: var(--card-white); --panel: var(--paper); }
.theme-sun {
  --fg: #1A1300; --fg-2: #3A2E00; --fg-mute: #4A3B00; --panel-line: rgba(26,19,0,.18);
  background: var(--c-sun);
}
.theme-violet {
  --fg: #FFFFFF; --fg-2: #EDE9FB; --fg-mute: #DDD6FA; --acc: #FFFFFF; --acc-2: #FFFFFF;
  --panel: rgba(255,255,255,.08); --panel-line: rgba(255,255,255,.22); --line-2: rgba(255,255,255,.3);
  background: var(--c-violet); color: var(--fg-2);
}
.theme-ocean {
  --fg: #FFFFFF; --fg-2: #C9D6EE; --fg-mute: #A9BBDB;
  --panel: rgba(255,255,255,.06); --panel-line: rgba(255,255,255,.16); --line-2: rgba(255,255,255,.24);
  background: var(--c-ocean); color: var(--fg-2);
}

/* Buttons: on light or colour → ink pill with white text; on violet/ocean the white pill stays */
.theme-paper .btn-primary, .theme-sun .btn-primary, .on-light .btn-primary { background: var(--ink); color: #fff; }
.theme-paper .btn-primary:hover, .theme-sun .btn-primary:hover, .on-light .btn-primary:hover { background: #3A3A3C; }
.theme-paper .btn-ghost { color: var(--ink); border-color: rgba(11,15,25,.5); }

/* Cards on paper: white, hairline, no glow */
.theme-paper .fcard { background: var(--card-white); border: 1px solid var(--card-line); border-radius: var(--r); padding: 12px 12px 24px; }
.theme-paper .fcard .fcard-media { margin-bottom: 20px; border-color: var(--card-line); border-radius: var(--r-sm); }
.theme-paper .fcard .h3, .theme-paper .fcard p { padding-inline: 12px; }
.theme-paper .fcard-art { background: var(--c-sky); border-color: var(--c-sky); }
.theme-paper .art-icon { background: var(--card-white); border-color: var(--card-white); }
.theme-paper .art-icon svg { stroke: var(--ink); }
.theme-paper .chips li { background: var(--card-white); border-color: var(--card-line); color: var(--ink-2); }
.theme-paper .ibox { background: var(--acc-tint); color: #0B4F7A; }
.theme-paper h2, .theme-paper .h2 { color: var(--ink); }

/* S2b tour on dark: active tab in sky, screenshot on a solid colour tray */
.tt[aria-selected="true"] .tt-bar i { background: var(--c-sky); }
.tour-stage .shot { border: 0; box-shadow: none; border-radius: var(--r-sm); }
.tp-tray { background: var(--c-sky); border-radius: var(--r); padding: 40px; }
.tp-tray .shot { box-shadow: 0 12px 32px rgba(4,18,28,.35); }
.tp-cap { color: var(--fg-2); }
@media (max-width: 1023px) {
  .tt[aria-selected="true"] { background: var(--c-sky); border-color: var(--c-sky); color: #04121C; }
  .tt[aria-selected="true"] .tt-bar { background: rgba(4,18,28,.18); }
  .tt[aria-selected="true"] .tt-bar i { background: #04121C; }
  .tp-tray { padding: 20px; }
}
@media (max-width: 767px) { .tp-tray { padding: 12px; } }

/* S5: documents are white cards on dark – unchanged */

/* S6 violet block */
.theme-violet .spot-indigo { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22); }
.theme-violet .eyebrow-indigo { color: #FFFFFF; }
.theme-violet .ticks-indigo svg { stroke: #FFFFFF; }
.theme-violet .shot { box-shadow: 0 12px 32px rgba(20,8,70,.45); }

/* S7 modules on paper: white tiles, each module with its own flat colour */
.theme-paper .mod { background: var(--card-white); border: 1px solid var(--card-line); position: relative; overflow: hidden; }
.theme-paper .mod::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--mc, var(--c-sky)); }
.theme-paper .mod .ibox { background: var(--mc, var(--c-sky)); color: var(--mc-ink, #04121C); }
.theme-paper .mod-soon { background: var(--card-white); }
.theme-paper .mod-soon .ibox { background: var(--mc); color: var(--mc-ink); opacity: .55; }
.theme-paper .mod-soon .h3 { color: var(--ink); }
.theme-paper .mod-core { background: var(--card-white); border-color: var(--card-line); }
.mod-c-sky { --mc: var(--c-sky); --mc-ink: #04121C; }
.mod-c-violet { --mc: var(--c-violet); --mc-ink: #FFFFFF; }
.mod-c-emerald { --mc: var(--c-emerald); --mc-ink: #04130E; }
.mod-c-coral { --mc: var(--c-coral); --mc-ink: #1A0A05; }
.mod-c-sun { --mc: var(--c-sun); --mc-ink: #1A1300; }
.mod-c-ocean { --mc: var(--c-ocean); --mc-ink: #FFFFFF; }
.theme-paper .badge { color: var(--ink-2); background: #F0EEE8; border-color: var(--card-line); }
.theme-paper .badge-core { color: #04121C; background: var(--c-sky); border-color: var(--c-sky); }
.theme-paper .badge-soon { color: var(--ink-mute); background: transparent; border-style: dashed; border-color: #BDB8AD; }
.theme-paper .mod-for { border-top-color: var(--card-line); }
.theme-paper .sub { background: var(--card-white); border-color: var(--card-line); color: var(--ink); }
.theme-paper .sub .ibox { background: #F0EEE8; color: var(--ink); }
.theme-paper .sub-custom { background: var(--c-ocean); border-color: var(--c-ocean); }
.theme-paper .sub-custom a { color: #C9D6EE; }
.theme-paper .sub-custom a:hover { background: #0D3378; }
.theme-paper .sub-custom strong { color: #fff; }
.theme-paper .sub-custom .ibox-solid { background: var(--c-sky); color: #04121C; }
.theme-paper .sub-custom-arrow { stroke: #fff; }
.theme-paper .soon-note a { color: var(--acc); }

/* S7b tailored on white: paper cards, the third step as a solid ocean block */
.theme-paper .step3 { background: var(--paper); border-color: var(--card-line); }
.theme-paper .meter i { background: rgba(11,15,25,.12); }
.theme-paper .meter i.on { background: var(--c-sky); }
.theme-paper .step3-hi { background: var(--c-ocean); border-color: var(--c-ocean); }
.theme-paper .step3-hi .h3 { color: #fff; }
.theme-paper .step3-hi p { color: #C9D6EE; }
.theme-paper .step3-hi .meter i { background: rgba(255,255,255,.2); }
.theme-paper .step3-hi .meter i.on { background: var(--c-sky); }
.theme-paper .tail-foot { border-top-color: var(--card-line); }

/* S8 facts on sun */
.theme-sun .fact { border-top-color: rgba(26,19,0,.25); }
.theme-sun .fact-n, .theme-sun .fact-n small { color: #1A1300; }

/* S10 how on ocean */
.theme-ocean .how-step, .theme-ocean .how-step:last-child { border-color: rgba(255,255,255,.18); }
.theme-ocean .how-n { color: #fff; }
.theme-ocean .collage img { border-color: rgba(255,255,255,.18); box-shadow: 0 12px 32px rgba(0,8,30,.45); }

/* S10b pricing on paper */
.theme-paper .pcard { background: var(--card-white); border-color: var(--card-line); }
.theme-paper .lockline { background: var(--c-sky); border-color: var(--c-sky); color: #04121C; }
.theme-paper .lockline strong { color: #04121C; }
.theme-paper .lockline svg { stroke: #04121C; }

/* S11 FAQ on white */
.theme-paper .faq-list, .theme-paper .faq-list details { border-color: var(--card-line); }
.theme-paper .faq-list summary::before, .theme-paper .faq-list summary::after { background: var(--ink); }
.theme-paper .faq-list summary:hover { color: #0369A1; }

/* S12: the form sits on a white card on the dark section */
.contact-form-wrap.on-light {
  --fg: var(--ink); --fg-2: var(--ink-2); --fg-mute: var(--ink-mute); --acc: #0369A1; --err: #B42318;
  background: var(--card-white); border-color: var(--card-white); color: var(--ink-2);
}
.on-light .cform input[type="text"], .on-light .cform input[type="email"], .on-light .cform textarea { background: #fff; color: var(--ink); border-color: #CFCBC2; }
.on-light .cform input:hover, .on-light .cform textarea:hover { border-color: #9C978C; }
.on-light .cform input:focus, .on-light .cform textarea:focus { border-color: #0369A1; box-shadow: 0 0 0 2px #0369A1; }
.on-light .chip-opt span { border-color: #CFCBC2; color: var(--ink-2); }
.on-light .chip-opt:hover span { border-color: #9C978C; color: var(--ink); }
.on-light .chip-opt input:checked + span { background: #E6F4FB; border-color: #0369A1; color: var(--ink); }
.on-light .chip-opt input[type="checkbox"]:checked + span::before { border-color: #0369A1; }
.on-light .check-box { background: #fff; border-color: #9C978C; }
.on-light .check input:checked + .check-box { background: var(--ink); border-color: var(--ink); }
.on-light .check-box svg { stroke: #fff; }
.on-light .ferr::before { color: #fff; }
.on-light .fbanner-error { background: #FEF1F0; border-color: #F4B4AE; color: #7A1A12; }
.on-light .fbanner-error strong, .on-light .fbanner-error a { color: #5C130D; }
.on-light .fsuccess .ibox { background: #E3F7EF; color: #0B7A57; }
.on-light .cform.is-sending #f-submit { background: #4B5563; }
.on-light .spinner { border-color: rgba(255,255,255,.3); border-top-color: #fff; }
:focus-visible { outline-color: var(--acc); }
.theme-paper :focus-visible, .theme-sun :focus-visible, .on-light :focus-visible { outline-color: #0369A1; }
.theme-sun :focus-visible { outline-color: #1A1300; }
.theme-violet :focus-visible { outline-color: #fff; }

/* ==========================================================================
   v1.6 – knockout word, dotted eyebrow, highlighted words, two-column intro
   ========================================================================== */

/* Dotted eyebrow: 8 px solid dot in the section's colour */
.eyebrow-dot { display: inline-flex; align-items: center; gap: 10px; color: var(--fg); letter-spacing: .14em; }
.eyebrow-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--acc)); flex: none; }

/* Highlighted words in a heading: one solid accent per section */
.hl { color: var(--hl, var(--c-sky)); }
.theme-paper .hl { --hl: var(--c-violet); }
.s-tailored .hl { --hl: #0369A1; }

/* Two-column section intro: eyebrow + H2 left, muted paragraph + circle-arrow link right */
.intro { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: start; margin-bottom: 64px; }
.intro-l { grid-column: 1 / span 7; }
.intro-l .h2 { max-width: 16ch; }
.intro-r { grid-column: 9 / span 4; padding-top: 44px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.intro-p { color: var(--fg-mute); font-size: var(--body); line-height: 1.55; }
.circ-link { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; color: var(--fg); font-size: var(--body); font-weight: 500; }
.circ-link:hover { text-decoration: none; }
.circ { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-3, rgba(255,255,255,.3)); color: var(--fg); transition: background-color .2s, border-color .2s, color .2s; flex: none; }
.circ svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.circ-link:hover .circ { background: var(--dot-fill, var(--c-sky)); border-color: var(--dot-fill, var(--c-sky)); color: var(--dot-ink, #04121C); }
.circ-link:hover .circ svg { transform: translateX(4px); }
.theme-paper .circ { border-color: rgba(11,15,25,.35); }
.s-tailored { --dot-fill: var(--c-ocean); --dot-ink: #fff; }
.theme-violet .circ-link { --dot-fill: #fff; --dot-ink: var(--c-violet); }

/* Knockout word: a solid surface with the word cut out; the product image shows through */
.has-ko { padding-top: 0; }
.ko-surface { background: var(--paper); border-radius: 0 0 var(--r) var(--r); padding: 56px 40px 0; margin-bottom: 96px; overflow: hidden; }
.ko-surface-plain { background: var(--card-white); padding-inline: 0; margin-bottom: 72px; }
.ko { position: relative; overflow: hidden; line-height: 0; }
.ko-img { position: absolute; left: 0; top: -40px; width: 100%; height: calc(100% + 80px); max-width: none; object-fit: cover; object-position: center 30%; will-change: transform; }
.ko-svg { position: relative; display: block; width: 100%; height: auto; }
.ko-surf { fill: var(--paper); }
.ko-surface-plain .ko-surf { fill: var(--card-white); }
/* CRM: no light card – the letters sit straight on the dark section background */
.ko-surface-dark { background: transparent; padding-inline: 0; }
.ko-surface-dark .ko-surf { fill: var(--bg); }
.ko-surface-dark .ko-img { filter: brightness(1.75) saturate(1.15) contrast(1.05); }
.ko-text.ko-outline { fill: none; stroke: rgba(255,255,255,.3); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ko-surface:not(.ko-surface-dark) .ko-outline { display: none; }
.ko-surface-dark .ko::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--bg); }   /* hides a sub-pixel seam of the image under the letters */
.ko-text { font-family: "Inter Display Black", "Inter", sans-serif; font-weight: 900; font-kerning: none; font-feature-settings: "kern" 0; fill: #000; }

/* S3: intro above a wide spotlight */
.spot-wide { padding: var(--spot-pad); }
.spot-wide .comp-pipeline .shot { width: 86%; }
.spot-wide .float-card { width: 30%; }

/* S6: wide image + ticks */
.spot-visual-wide { grid-column: 1 / span 8 !important; grid-row: 1; }
.spot-copy-narrow { grid-column: 10 / span 3 !important; grid-row: 1; }
.spot-copy-narrow .ticks-col { margin-top: 0; gap: 18px; }

/* S7: intro, then the slider controls on their own row */
.s-modules .slider-head-end { margin-top: -24px; }

@media (max-width: 1279px) {
  .intro-l { grid-column: 1 / span 7; }
  .intro-r { grid-column: 8 / span 5; }
  .ko-surface { padding: 40px 32px 0; margin-bottom: 72px; }
  .spot-visual-wide { grid-column: 1 / -1 !important; }
  .spot-copy-narrow { grid-column: 1 / -1 !important; grid-row: 2; margin-top: 24px; }
  .spot-copy-narrow .ticks-col { flex-direction: row; flex-wrap: wrap; gap: 12px 24px; }
}
@media (max-width: 1023px) {
  .intro-l, .intro-r { grid-column: 1 / -1; }
  .intro-r { padding-top: 0; gap: 16px; }
  .intro { gap: 20px; margin-bottom: 48px; }
}
@media (max-width: 767px) {
  .intro { margin-bottom: 36px; }
  .ko-surface { padding: 28px 16px 0; margin-bottom: 48px; margin-inline: calc(var(--gutter) * -1); border-radius: 0 0 var(--r) var(--r); }
  .ko-surface-plain { padding-inline: 0; margin-inline: 0; }
  .ko-surface-dark { padding-inline: 0; margin-inline: 0; }
  .ko-img { top: -20px; height: calc(100% + 40px); }
  .spot-wide .comp-pipeline .shot { width: 100%; }
  .spot-wide .float-card { width: 52%; }
  .s-modules .slider-head-end { margin-top: -12px; }
}
@media (prefers-reduced-motion: reduce) { .ko-img { transform: none !important; } }

/* ---------- S14 About CORVIDS (SEO text below the footer, v1.7) – always visible ---------- */
.about { background: var(--bg); border-top: 1px solid var(--panel-line); padding: 56px 0 64px; }
.about-cols { columns: 3; column-gap: 48px; font-size: 14px; line-height: 1.65; color: var(--fg-mute); }
.about-h2 { column-span: all; margin-bottom: 24px; font-size: 18px; line-height: 1.3; font-weight: 600; color: var(--fg-2); }
.about h3 { margin: 0 0 6px; font-size: 16px; line-height: 1.35; font-weight: 600; color: var(--fg-2); break-after: avoid; }
.about p { margin: 0 0 18px; }
.about a { color: var(--fg-2); text-decoration: underline; text-underline-offset: 2px; }
.ftr + .about { border-top-color: var(--panel-line); }
@media (max-width: 1279px) { .about-cols { columns: 2; column-gap: 40px; } }
@media (max-width: 767px) { .about-cols { columns: 1; } .about { padding: 40px 0 48px; } }

/* ---------- S4 and S7 stay dark ----------
   S4: dark section, white feature cards and white tags. S7: dark section, dark tiles,
   each module keeps its own flat colour (top bar + icon box). */
.cards-white .fcard {
  --fg: var(--ink); --fg-2: var(--ink-2);
  background: var(--card-white); border: 1px solid var(--card-white); border-radius: var(--r); padding: 12px 12px 24px;
}
.cards-white .fcard .fcard-media { margin-bottom: 20px; border-color: var(--card-line); border-radius: var(--r-sm); }
.cards-white .fcard .h3 { color: var(--ink); padding-inline: 12px; }
.cards-white .fcard p { color: var(--ink-2); padding-inline: 12px; }
.cards-white .fcard-art { background: var(--c-sky); border-color: var(--c-sky); }
.cards-white .art-icon { background: var(--card-white); border-color: var(--card-white); }
.cards-white .art-icon svg { stroke: var(--ink); }
.cards-white .chips li { background: var(--card-white); border-color: var(--card-white); color: var(--ink); }

.s-modules .mod { position: relative; overflow: hidden; }
.s-modules .mod::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--mc, var(--c-sky)); }
.s-modules .mod .ibox { background: var(--mc, var(--c-sky)); color: var(--mc-ink, #04121C); }
.s-modules .mod-soon .ibox { opacity: .6; }
.s-modules .mod-core { background: var(--panel); border-color: var(--panel-line); }
.s-modules .mod-core .h3 { color: var(--fg); }
.s-modules { --hl: var(--c-coral); }

/* ==========================================================================
   Closing brand composition in S12 Contact: small tag links, a giant thin word,
   then a two-column part (heading + thumbnails | two-tone lead + form).
   ========================================================================== */
.tagrow ul { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }
.tag {
  display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 14px;
  border-radius: var(--r-sm); background: rgba(255,255,255,.05); border: 1px solid var(--panel-line);
  color: var(--fg-2); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  transition: background-color .2s, color .2s, border-color .2s;
}
.tag:hover { text-decoration: none; color: var(--fg); border-color: var(--line-2); background: rgba(255,255,255,.08); }
.tag-dia { width: 8px; height: 8px; background: var(--c-sky); transform: rotate(45deg); flex: none; }
.tag svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.tag:hover svg { transform: translateX(3px); }

.bigword { margin-top: 40px; line-height: 0; }
.bigword svg { display: block; width: 100%; height: auto; overflow: visible; }
.bigword-text { font-family: "Inter", sans-serif; font-weight: 300; font-kerning: none; fill: var(--fg); }
.bigword-get { fill: var(--c-sky); }

.bw-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); margin-top: 56px; align-items: start; }
.bw-l { grid-column: 1 / span 6; }
.bw-r { grid-column: 7 / span 6; padding-top: 10px; }
.bw-r .contact-form-wrap { margin-top: 40px; }
.bw-grid .mail-link { margin-top: 20px; }
.bw-h2 { max-width: 14ch; }
.bw-thumbs { display: flex; gap: 16px; margin-top: 36px; }
.bw-thumbs a { display: flex; flex-direction: column; gap: 10px; color: var(--fg-mute); font-size: 13px; }
.bw-thumbs a:hover { text-decoration: none; color: var(--fg); }
.bw-thumb { display: block; width: 176px; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; background: #0B1018; border: 1px solid var(--line-2); }
.bw-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.bw-thumb-light { background: #fff; border-color: #fff; }
.bw-thumbs a:hover .bw-thumb img { transform: scale(1.04); }
.bw-cap { letter-spacing: .02em; }
.bw-lead { font-size: var(--lead); line-height: 1.4; color: var(--fg-mute); max-width: 32ch; margin: 0; }
.bw-lead-strong { color: var(--fg); }
.btn-ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.btn:hover .btn-ico { transform: translateX(3px); }

@media (max-width: 1279px) {
  .bw-l { grid-column: 1 / span 5; }
  .bw-r { grid-column: 6 / span 7; }
}
@media (max-width: 1023px) {
  .bw-l, .bw-r { grid-column: 1 / -1; }
  .bw-r { padding-top: 0; margin-top: 16px; }
  .bw-thumbs { margin-top: 28px; }
}
@media (max-width: 767px) {
  .tagrow ul { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .tagrow ul::-webkit-scrollbar { display: none; }
  .tag { white-space: nowrap; min-height: 44px; }
  .bigword { margin-top: 24px; }
  .bw-grid { margin-top: 32px; }
  .bw-thumb { width: calc((100vw - 2 * var(--gutter) - 16px) / 2); }
}

/* ---------- CRM tour: segmented progress bar under the screenshot ---------- */
.tour-prog { grid-column: 4 / span 9; display: flex; align-items: center; gap: 6px; margin-top: 20px; }
.tour-seg { flex: 1 1 0; height: 3px; border-radius: 2px; background: rgba(255,255,255,.14); overflow: hidden; cursor: pointer; position: relative; }
.tour-seg::after { content: ""; position: absolute; inset: -8px 0; }   /* larger click area */
.tour-seg i { display: block; width: 0; height: 100%; background: var(--c-sky); border-radius: inherit; }
.tour-seg.is-done i { width: 100%; background: rgba(255,255,255,.6); }
.tour-seg.is-on i { width: 0; }
.tour.is-auto .tour-seg.is-on i { animation: tt-progress var(--tour-dur, 6000ms) linear forwards; }
.tour:not(.is-auto) .tour-seg.is-on i, .tour.is-auto.is-paused .tour-seg.is-on i { animation-play-state: paused; }
.tour-seg:hover { background: rgba(255,255,255,.26); }
.tour-count { flex: none; margin-left: 10px; font-size: 13px; letter-spacing: .06em; color: var(--fg-mute); font-variant-numeric: tabular-nums; min-width: 4.5em; text-align: right; }
.tp { will-change: opacity; }
@media (max-width: 1023px) { .tour-prog { margin-top: 16px; } }

/* ---------- Back to top ---------- */
.totop {
  position: fixed; right: 24px; bottom: 24px; z-index: 60; width: 48px; height: 48px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #FFFFFF; color: #0B0F19; border: 1px solid rgba(11,15,25,.08); box-shadow: var(--shadow);
  opacity: 0; transform: translate3d(0, 12px, 0); pointer-events: none;
  transition: opacity .35s ease, transform .35s cubic-bezier(.22,.61,.36,1), bottom .35s ease, background-color .2s;
}
.totop.is-on { opacity: 1; transform: none; pointer-events: auto; }
.totop:hover { background: var(--c-sky); }
.totop:focus-visible { outline: 2px solid var(--c-sky); outline-offset: 3px; }
.totop svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
body.has-cookie .totop { bottom: calc(var(--cookie-h, 80px) + 24px + 12px); }

/* ---------- Cookie notice ---------- */
.cookie {
  position: fixed; left: 24px; right: 24px; bottom: 24px; z-index: 70; margin: 0 auto; max-width: 880px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px 24px;
  padding: 16px 16px 16px 24px; border-radius: var(--r); background: #FFFFFF; color: #0B0F19;
  border: 1px solid rgba(11,15,25,.08); box-shadow: 0 12px 32px rgba(0,0,0,.35);
  opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity .4s ease, transform .4s cubic-bezier(.22,.61,.36,1);
}
.cookie.is-on { opacity: 1; transform: none; }
.cookie-text { margin: 0; font-size: 15px; line-height: 1.5; color: #374151; }
.cookie-text strong { color: #0B0F19; font-weight: 600; }
.cookie-text a { color: #0B0F19; text-decoration: underline; text-underline-offset: 2px; }
.cookie-actions { flex: none; display: flex; gap: 8px; }
.cookie .btn-primary { background: #0B0F19; color: #FFFFFF; border-color: #0B0F19; }
.cookie .btn-primary:hover { background: #1F2937; }
@media (max-width: 767px) {
  .cookie { left: 12px; right: 12px; bottom: 12px; flex-direction: column; align-items: stretch; padding: 16px; }
  .cookie-actions .btn { width: 100%; justify-content: center; }
  .totop { right: 16px; bottom: 16px; width: 44px; height: 44px; }
  body.has-cookie .totop { bottom: calc(var(--cookie-h, 150px) + 12px + 12px); }
}
@media (prefers-reduced-motion: reduce) { .totop, .cookie { transition: opacity .2s ease !important; transform: none !important; } }

/* ---------- Custom band (S2a): "Tell us what you need. We build it in." ---------- */
.s-custom .cb-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px 80px; align-items: start; }
.cb-h2 { font-size: calc(var(--h2) * 1.25); line-height: 1.02; letter-spacing: -0.025em; color: var(--fg); margin-top: 20px; }
.cb-hl { color: var(--c-sky); }
.cb-p { font-size: var(--lead); line-height: 1.4; color: var(--fg-2); max-width: 46ch; }
.cb-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin: 32px 0 36px; }
.cb-list li { display: flex; align-items: flex-start; gap: 10px; color: var(--fg); font-size: var(--body); line-height: 1.35; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.18); }
.cb-list svg { flex: none; width: 18px; height: 18px; margin-top: 2px; fill: none; stroke: var(--c-sky); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-ocean .btn-primary { background: #FFFFFF; color: var(--ink); border-color: #FFFFFF; }
.theme-ocean .btn-primary:hover { background: #E6F4FB; }

/* ---------- Demo key (S10c) ---------- */
.demo-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: 8px; }
.demo-step { display: flex; flex-direction: column; gap: 12px; padding: 32px; border-radius: var(--r); background: #FFFFFF; border: 1px solid rgba(26,19,0,.12); }
.demo-step .how-n { color: var(--ink); font-size: 56px; margin-bottom: 12px; }
.demo-step .h3 { color: var(--ink); }
.demo-step p { color: var(--ink-2); }
.demo-cta { margin-top: 40px; }
.fhint { margin-top: 10px; }

@media (max-width: 1023px) {
  .s-custom .cb-grid { grid-template-columns: 1fr; }
  .demo-steps { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 767px) {
  .cb-h2 { font-size: calc(var(--h2) * 1.1); }
  .cb-list { grid-template-columns: 1fr; margin: 24px 0 28px; }
  .demo-step { padding: 24px; }
}

/* ---------- Hero product tour video (S2): poster + elegant Play button, no autoplay ---------- */
.shot-video .vwrap { position: relative; aspect-ratio: 16 / 9; background: #0B1018; }
.shot-video .vplayer, .shot-video .vposter { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.shot-video .vplayer { object-fit: contain; background: #05080F; }
.shot-video .vposter { aspect-ratio: auto; object-fit: cover; object-position: top left; transition: opacity .5s ease; }
.vplay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  border: 0; padding: 0; cursor: pointer; color: #fff; background: rgba(5,8,15,.28); transition: background-color .35s ease, opacity .45s ease;
}
.vplay:hover { background: rgba(5,8,15,.4); }
.vplay-btn {
  position: relative; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%;
  background: #FFFFFF; color: var(--ink); box-shadow: 0 16px 40px rgba(0,0,0,.45);
  transition: transform .45s cubic-bezier(.22,.61,.36,1), background-color .3s ease;
}
.vplay-btn::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgba(255,255,255,.55); animation: vplay-ring 2.8s cubic-bezier(.22,.61,.36,1) infinite; }
.vplay-btn svg { width: 34px; height: 34px; margin-left: 5px; fill: currentColor; stroke: none; }
.vplay:hover .vplay-btn { transform: scale(1.07); }
.vplay:focus-visible { outline: none; }
.vplay:focus-visible .vplay-btn { outline: 3px solid var(--c-sky); outline-offset: 6px; }
.vplay-txt { position: absolute; left: 50%; top: calc(50% + 48px + 24px); transform: translateX(-50%); white-space: nowrap; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 10px 18px; border-radius: var(--r); background: rgba(5,8,15,.72); border: 1px solid rgba(255,255,255,.16); }
.vplay-txt strong { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
.vplay-txt span { font-size: 14px; color: #C9D1DC; font-variant-numeric: tabular-nums; }
@keyframes vplay-ring { 0% { transform: scale(.92); opacity: .9; } 70%, 100% { transform: scale(1.28); opacity: 0; } }
.shot-video.is-playing .vposter, .shot-video.is-playing .vplay { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .vplay-btn::after { animation: none; opacity: .5; } }
@media (max-width: 767px) {
  .shot-video .vwrap { aspect-ratio: 16 / 9; }
  .vplay-btn { width: 64px; height: 64px; }
  .vplay-btn::after { inset: -7px; }
  .vplay-btn svg { width: 24px; height: 24px; margin-left: 4px; }
  .vplay-txt { top: calc(50% + 32px + 14px); padding: 6px 12px; }
  .vplay-txt strong { font-size: 15px; }
  .vplay-txt span { display: none; }
}

/* ---------- For your trade (S7a): one colourful spotlight per industry module ---------- */
.ind-list { display: flex; flex-direction: column; gap: var(--gap); }
.ind { --fg: #FFFFFF; --fg-2: rgba(255,255,255,.86); --acc: #FFFFFF; --acc-tint: rgba(255,255,255,.1); border: 0; padding: calc(var(--spot-pad) * 1.1); }
.ind .h2 { color: #FFFFFF; font-size: calc(var(--h2) * .82); }
.ind .eyebrow { color: #FFFFFF; }
.ind-restaurant { background: #7A2A1C; }
.ind-estate { background: var(--c-ocean); }
.ind-courses { background: #0C4A3A; }
.ind .ticks-col li { color: #FFFFFF; }
.ind .ticks svg { stroke: #FFFFFF; }
.ind-for { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.22); font-size: var(--small); color: rgba(255,255,255,.86); }
.ind-for span { color: #FFFFFF; font-weight: 600; margin-right: 4px; }
.ind-visual { position: relative; padding-bottom: 48px; }
.ind-visual > .shot:first-child { width: 94%; }
.ind-estate .ind-visual > .shot:first-child { width: 100%; }
.spot-rev .ind-visual > .shot:first-child { margin-left: auto; }
.ind .shot { border-color: rgba(255,255,255,.16); box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.ind-float { position: absolute; right: 0; bottom: 0; width: 46%; }
.ind-estate .ind-visual { padding-bottom: 0; }
@media (max-width: 1023px) {
  .ind .spot-copy, .ind .spot-visual { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .ind-visual { margin-top: 32px; }
}
@media (max-width: 767px) {
  .ind { padding: 24px; }
  .ind-visual { padding-bottom: 32px; }
  .ind-visual > .shot:first-child { width: 100%; }
  .ind-float { width: 52%; right: -8px; }
}
.about-updated { column-span: all; margin: -12px 0 24px; font-size: 13px; color: var(--fg-mute); }

/* ---------- More from Digital Supportly (S9b) ---------- */
.dsx-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.dsx-grid .mod { min-height: 300px; }
@media (max-width: 1279px) { .dsx-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .dsx-grid { grid-template-columns: 1fr; } .dsx-grid .mod { min-height: 0; } }
/* LeadDesk: a wide card under the four product cards (text + screenshot) */
.dsx-grid .dsx-feature { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr); gap: 36px; align-items: center; min-height: 0; }
.dsx-feature-txt { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dsx-feature .mod-for { margin-top: 6px; }
.dsx-feature .mod-top { justify-content: flex-start; align-items: center; }
.dsx-ticks { margin-top: 8px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dsx-ticks li { font-size: 13px; padding: 8px 12px 8px 10px; }
@media (max-width: 520px) { .dsx-ticks { grid-template-columns: 1fr; } }
.dsx-feature .circ-link { margin-top: 6px; }
.dsx-feature-shot { margin: 0; }
@media (max-width: 1023px) { .dsx-grid .dsx-feature { grid-template-columns: 1fr; gap: 24px; } }
.ftr-op { padding-top: 16px; padding-bottom: 8px; }
.ftr-op p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--fg-mute); }
.ftr-op a { color: var(--fg-2); }

/* ---------- Header: secondary "Try the demo" next to the main CTA ---------- */
.hdr-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.hdr-demo { border-color: rgba(255,255,255,.42); }
@media (max-width: 767px) { .hdr-actions { display: none; } }
.mnav .btn-block + .btn-block { margin-top: 10px; }

/* ---------- Hero trust line under the buttons ---------- */
.ov-cta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
.trustline { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 18px; font-size: var(--small); color: var(--fg-2); }
.trustline li { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.trustline svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--c-sky); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1279px) { .ov-cta { align-items: flex-start; } .trustline { justify-content: flex-start; } }
@media (max-width: 767px) { .ov-cta { width: 100%; } .trustline { flex-direction: column; gap: 6px; } .trustline li { white-space: normal; } }
.hdr-links a { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1199px) { .hdr-demo { display: none; } }

/* ---------- Pricing v2: four parts, module tiles, bundles, own-it band ---------- */
.pcards-4 { grid-template-columns: repeat(4, 1fr); }
.pcard-price { color: var(--fg) !important; font-size: var(--body); }
.pcard-price strong { font-weight: 600; }
.price-h { margin: 72px 0 20px; font-size: calc(var(--h3) + 4px); color: var(--fg); }
.ptiles, .pbundles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.ptile, .pbundle { display: flex; flex-direction: column; gap: 8px; padding: 26px 28px; border-radius: var(--r); background: var(--card-white); border: 1px solid var(--card-line); }
.ptile-name, .pb-name { margin: 0; font-size: var(--h3); font-weight: 600; color: var(--ink); }
.ptile-desc, .pb-what { color: var(--ink-2); font-size: var(--small); min-height: 2.9em; }
.ptile-price { margin-top: 8px; display: flex; align-items: baseline; gap: 6px; color: var(--ink); }
.pp-n { font-size: 40px; font-weight: 300; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.pp-u { color: var(--ink-2); font-size: var(--small); }
.ptile-year { color: var(--ink-mute); font-size: 14px; }
.pbundle { position: relative; }
.pb-hi { background: var(--ink); border-color: var(--ink); }
.pb-hi .pb-name, .pb-hi .ptile-price, .pb-hi .pp-n { color: #fff; }
.pb-hi .pb-what, .pb-hi .pp-u, .pb-hi .ptile-year { color: #C9D1DC; }
.own { display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; margin-top: 48px; padding: 32px 36px; border-radius: var(--r); background: var(--c-ocean); color: #C9D6EE; }
.own .h3 { color: #fff; margin-bottom: 8px; }
.own p { max-width: 78ch; }
.own .btn-primary { background: #fff; color: var(--ink); border-color: #fff; flex: none; }
.mod-price { font-size: var(--body) !important; color: var(--fg) !important; font-weight: 600; margin-top: 6px; }
.ind-price { margin-top: 10px; font-size: var(--small); color: #fff; font-weight: 600; }
@media (max-width: 1279px) { .ptiles, .pbundles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) and (max-width: 1279px) { .pcards-4 { grid-template-columns: repeat(2, 1fr); } .pcards-4 .pcard:nth-child(3)::before { display: none; } }
@media (max-width: 1023px) { .pcards-4 { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .pcards-4, .ptiles, .pbundles { grid-template-columns: 1fr; } .own { flex-direction: column; align-items: flex-start; padding: 24px; } .price-h { margin-top: 48px; } .ptile-desc, .pb-what { min-height: 0; } }

/* ==========================================================================
   Pricing page (pricing.html)
   ========================================================================== */
.pr-hero { padding-top: calc(var(--hdr-h) + 72px); }
.pr-hero .h1 { max-width: 16ch; }
.billing { display: inline-flex; padding: 4px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); flex: none; }
.billing-opt { appearance: none; border: 0; background: transparent; color: var(--fg-2); font: inherit; font-size: var(--small); padding: 10px 18px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background-color .25s, color .25s; }
.billing-opt.is-on { background: #fff; color: var(--ink); }
.billing-opt:focus-visible { outline: 2px solid var(--c-sky); outline-offset: 2px; }
.billing-save { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: rgba(56,189,248,.18); color: var(--c-sky); }
.billing-opt.is-on .billing-save { background: var(--c-sky); color: #04121C; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: 56px; }
.plan { display: flex; flex-direction: column; gap: 14px; padding: 32px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--panel-line); }
.plan-hi { background: #0B2233; border-color: rgba(56,189,248,.5); }
.plan-tag { align-self: flex-start; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-sky); }
.plan-name { margin: 0; font-size: 28px; font-weight: 500; color: var(--fg); }
.plan-for { color: var(--fg-2); font-size: var(--small); min-height: 3em; }
.plan-price { display: flex; align-items: baseline; gap: 8px; color: var(--fg); margin: 6px 0 4px; }
.plan-price .pp-n { font-size: 56px; font-weight: 300; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan-price .pp-u { color: var(--fg-2); font-size: var(--small); }
.plan-list { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 14px; padding-top: 16px; border-top: 1px solid var(--panel-line); color: var(--fg-2); font-size: var(--small); }
.plan-list li { padding-left: 22px; position: relative; }
.plan-list li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 10px; height: 6px; border-left: 2px solid var(--c-sky); border-bottom: 2px solid var(--c-sky); transform: rotate(-45deg); }
.plan .btn { margin-top: auto; align-self: flex-start; }
.plans-note { margin-top: 24px; color: var(--fg-mute); font-size: var(--small); }
.plans-note a { color: var(--fg-2); }
.ea { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: #7A4B00; background: #FFF1CC; border: 1px solid #F3D27A; }
.ea-note, .fair { margin-top: 20px; font-size: var(--small); color: var(--ink-2); max-width: 90ch; }
.ea-note .ea { margin: 0 8px 0 0; }
.fair strong { color: var(--ink); }
.pr-detail { background: var(--bg); }
.pr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.pr-block { padding: 28px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--panel-line); }
.pr-block .h3 { margin-bottom: 16px; }
.ptable { width: 100%; border-collapse: collapse; font-size: var(--small); }
.ptable th, .ptable td { text-align: left; vertical-align: top; padding: 11px 10px 11px 0; border-bottom: 1px solid var(--panel-line); }
.ptable thead th { color: var(--fg-mute); font-weight: 400; }
.ptable tbody th { color: var(--fg); font-weight: 500; }
.ptable td { color: var(--fg); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pr-small { display: block; color: var(--fg-mute); font-size: 13px; font-weight: 400; margin-top: 12px; }
.ptable .pr-small { margin-top: 2px; white-space: normal; }
.pr-own .ptable { max-width: 860px; font-size: var(--body); }
.pr-own .ptable th, .pr-own .ptable td { border-color: rgba(255,255,255,.18); }
.own-src { margin-top: 28px; max-width: 86ch; color: #C9D6EE; }
.own-src strong { color: #fff; }
.own-src a { color: #fff; }
.pr-cta { text-align: center; }
.pr-cta-in { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.pr-cta .h2 { max-width: 22ch; }
.lockline-s { display: inline-flex; align-items: center; gap: 10px; color: var(--fg-2); font-size: var(--small); }
.lockline-s svg { width: 18px; height: 18px; fill: none; stroke: var(--c-sky); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1279px) { .pr-grid { grid-template-columns: 1fr 1fr; } .pr-grid .pr-block:last-child { grid-column: 1 / -1; } }
@media (max-width: 1023px) { .plans { grid-template-columns: 1fr; } .pr-grid { grid-template-columns: 1fr; } .plan-for { min-height: 0; } }
@media (max-width: 767px) { .pr-hero { padding-top: calc(var(--hdr-h) + 40px); } .billing { align-self: flex-start; } .plan { padding: 24px; } .plan-price .pp-n { font-size: 46px; } .pr-block { padding: 20px; } .ptable td { white-space: normal; } }

/* ---------- Home: compact pricing teaser ---------- */
.plans-home { margin-top: 8px; }
.home-parts { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 28px; color: var(--ink-2); font-size: var(--small); }
.home-parts strong { color: var(--ink); }
.home-price-cta { margin-top: 32px; }
.theme-paper .plan { background: var(--card-white); border-color: var(--card-line); }
.theme-paper .plan-name, .theme-paper .plan-price { color: var(--ink); }
.theme-paper .plan-for, .theme-paper .plan-list, .theme-paper .plan-price .pp-u { color: var(--ink-2); }
.theme-paper .plan-list { border-color: var(--card-line); }
.theme-paper .plan-hi { background: var(--ink); border-color: var(--ink); }
.theme-paper .plan-hi .plan-name, .theme-paper .plan-hi .plan-price { color: #fff; }
.theme-paper .plan-hi .plan-for, .theme-paper .plan-hi .plan-list, .theme-paper .plan-hi .pp-u { color: #C9D1DC; }
.theme-paper .plan-hi .plan-list { border-color: rgba(255,255,255,.18); }
.badge-ea { color: #7A4B00 !important; background: #FFF1CC !important; border-color: #F3D27A !important; }
.ind-ea { margin-top: 6px; font-size: 13px; color: rgba(255,255,255,.8); }
.pr-parts-h { margin-bottom: 40px; }
.theme-paper .plan-hi .ptile-year { color: #AEB7C4; }
.plans-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1279px) { .plans-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .plans-4 { grid-template-columns: 1fr; } }

/* Turnstile box: takes no space until Cloudflare needs an interaction */
.ts-wrap { margin: 0; }
.ts-box:empty { display: none; }
/* savings under a plan price (not a feature tick) */
.plan-save { margin-top: -4px; font-size: var(--small); color: var(--fg-mute, var(--ink-2)); }
/* Our promises (home) and the promise row (pricing) */
.promise-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 28px; margin-top: 8px; }
.promise-grid li { display: flex; gap: 16px; align-items: flex-start; }
.promise-grid .h3 { margin: 2px 0 6px; }
.promise-grid p { color: var(--fg-2); font-size: var(--small); }
@media (max-width: 1023px) { .promise-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .promise-grid { grid-template-columns: 1fr; } }
.promise-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; margin: 18px auto 0; max-width: 980px; }
.promise-row li { font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2, rgba(0,0,0,.12)); }
.promise-row li::before { content: '✓ '; color: var(--acc, #38BDF8); font-weight: 700; }
.pr-switch { margin-top: 10px; }

/* ==========================================================================
   2026-10-23 · modernisation: animated flow, walkthrough, what's new, voices
   ========================================================================== */

/* Animated flow under the hero: one pass (4.2 s) when it scrolls into view, then rests lit */
.flow { position: relative; margin: 96px 0 0; }
.flow-list { display: flex; justify-content: space-between; position: relative; padding-bottom: 58px; }
/* desktop/tablet: first circle on the left edge, last on the right edge, the line runs edge to edge */
.flow-list li { width: 56px; }
.flow-list a { position: relative; width: 56px; padding: 0; }
.flow-txt { position: absolute; top: 68px; left: 50%; transform: translateX(-50%); width: max-content; max-width: 180px; }
.flow-list li:first-child .flow-txt { left: 0; transform: none; text-align: left; }
.flow-list li:last-child .flow-txt { left: auto; right: 0; transform: none; text-align: right; }
.flow-list::before, .flow-list::after { content: ""; position: absolute; left: 28px; right: 28px; top: 27px; height: 2px; background: var(--line-2); border-radius: 2px; }
.flow-list::after { background: var(--acc); transform-origin: left center; transform: scaleX(0); }
.flow.is-in .flow-list::after { animation: flowLine 4.2s var(--ease) forwards; }
.flow-list li { position: relative; z-index: 1; }
.flow-list a { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; color: var(--fg-2); border-radius: var(--r); padding: 0 4px 6px; }
.flow-list a:hover { text-decoration: none; }
.flow-list a:hover .flow-ic { border-color: var(--acc); }
.flow-ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 2px solid var(--line-2); transition: border-color .3s, background-color .3s; }
.flow-ic svg { width: 24px; height: 24px; fill: none; stroke: var(--fg-mute); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.flow-txt strong { display: block; color: var(--fg); font-size: 16px; font-weight: 600; }
.flow-txt span { display: block; font-size: 13px; color: var(--fg-mute); line-height: 1.35; }
.flow.is-in .flow-ic { animation: flowNode .4s ease-out forwards; animation-delay: calc(var(--i) * .76s + .1s); }
.flow.is-in .flow-ic svg { animation: flowIcon .4s ease-out forwards; animation-delay: calc(var(--i) * .76s + .1s); }
@keyframes flowLine { to { transform: scaleX(1); } }
@keyframes flowNode { 0% { transform: scale(.9); } 60% { transform: scale(1.08); } 100% { transform: scale(1); border-color: var(--acc); background: #0B2233; } }
@keyframes flowIcon { to { stroke: var(--acc); } }
@media (prefers-reduced-motion: reduce) {
  .flow.is-in .flow-list::after, .flow-list::after { animation: none; transform: scaleX(1); }
  .flow.is-in .flow-ic, .flow-ic { animation: none; border-color: var(--acc); background: #0B2233; }
  .flow.is-in .flow-ic svg, .flow-ic svg { animation: none; stroke: var(--acc); }
}
@media (max-width: 767px) {
  .flow { margin: 56px 0 0; }
  .flow-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 12px; padding-bottom: 0; }
  .flow-list li, .flow-list a { width: auto; }
  .flow-list a { padding: 0 4px 6px; }
  .flow-txt, .flow-list li:first-child .flow-txt, .flow-list li:last-child .flow-txt { position: static; transform: none; width: auto; max-width: none; text-align: center; }
  .flow-list::before, .flow-list::after { display: none; }
  .flow-ic { width: 48px; height: 48px; }
}

/* Walkthrough (clickable tour) */
.walk { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px; align-items: start; }
.walk-steps { display: flex; flex-direction: column; gap: 6px; }
.ws { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; padding: 14px 16px; border-radius: var(--r); border: 1px solid transparent; background: transparent; color: var(--fg-2); font: inherit; cursor: pointer; transition: background-color .2s, border-color .2s; }
.ws:hover { background: var(--panel); }
.ws[aria-selected="true"] { background: var(--panel); border-color: var(--line-2); }
.ws-n { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-3); font-size: 15px; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }
.ws[aria-selected="true"] .ws-n { background: var(--acc); border-color: var(--acc); color: #04121C; }
.ws-t strong { display: block; color: var(--fg); font-size: 17px; font-weight: 600; line-height: 1.3; }
.ws-t span { display: block; font-size: 14px; color: var(--fg-mute); }
.walk-stage { min-width: 0; }
.wp[hidden] { display: none !important; }
.wp.is-active { animation: wpIn .35s ease-out; }
@keyframes wpIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.wp-pic { position: relative; width: min(100%, calc(72vh * var(--ar))); margin-inline: auto; aspect-ratio: var(--ar); border-radius: var(--r); overflow: hidden; background: #0B1018; border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.wp-doc { background: #EEF2F7; }
.wp-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hs { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 2px solid #fff; background: var(--c-coral); color: #fff; font: 700 14px/1 var(--font); cursor: pointer; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.35); transition: transform .2s; }
.hs::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--c-coral); opacity: 0; animation: hsPulse 2.4s ease-out 2; pointer-events: none; }
.hs:hover, .hs[aria-pressed="true"] { transform: translate(-50%, -50%) scale(1.12); background: var(--ink); }
.hs:focus-visible { outline: 3px solid var(--acc); outline-offset: 3px; }
@keyframes hsPulse { 0% { opacity: .9; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.4); } }
@media (prefers-reduced-motion: reduce) { .hs::before, .wp.is-active { animation: none; } }
.hs-pop { position: absolute; z-index: 3; max-width: min(300px, 70%); padding: 10px 14px; border-radius: var(--r-sm); background: #fff; color: var(--ink); border: 1px solid #D9D5CC; font-size: 15px; font-weight: 500; line-height: 1.4; box-shadow: var(--shadow); pointer-events: none; }
.hs-pop[hidden] { display: none; }
.wp-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.wp-notes li { display: flex; gap: 10px; font-size: var(--small); color: var(--fg-2); padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid transparent; cursor: pointer; transition: background-color .2s, border-color .2s; }
.wp-notes li:hover, .wp-notes li.is-on { background: var(--panel); border-color: var(--line-2); }
.wp-notes b { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--c-coral); color: #fff; font-size: 12px; }
.walk-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; }
.walk-count { font-size: var(--small); color: var(--fg-mute); }
.walk-count b { color: var(--fg); font-weight: 600; }
.walk-more { margin-top: 40px; color: var(--fg-2); }
@media (max-width: 1023px) {
  .walk { grid-template-columns: 1fr; gap: 20px; }
  .walk-steps { flex-direction: row; overflow-x: auto; gap: 8px; padding-bottom: 6px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .walk-steps::-webkit-scrollbar { display: none; }
  .ws { flex: none; width: auto; padding: 10px 14px; scroll-snap-align: start; }
  .ws-t span { display: none; }
  .ws-t strong { font-size: 15px; white-space: nowrap; }
}
@media (max-width: 767px) {
  .wp-notes { grid-template-columns: 1fr; gap: 6px; }
  .hs { width: 24px; height: 24px; font-size: 12px; }
  .hs-pop { display: none !important; }
}

/* What's new */
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.news { padding: 28px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--panel-line); }
.news time { display: inline-block; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--acc); margin-bottom: 14px; }
.news .h3 { margin-bottom: 8px; }
.news p { font-size: var(--small); color: var(--fg-2); }
@media (max-width: 1023px) { .news-grid { grid-template-columns: 1fr; } }

/* Voices (customer words) – masonry wall, shown only with 3+ real quotes */
.s-voices[hidden] { display: none !important; }
.voices-h { text-align: center; max-width: 16ch; margin: 0 auto 64px; }
.voice-wall { columns: 3 320px; column-gap: 24px; }
.voice { break-inside: avoid; margin: 0 0 24px; padding: 24px; border-radius: var(--r); background: var(--card-white); border: 1px solid var(--card-line); }
.voice blockquote { margin: 0; }
.voice blockquote p { color: var(--ink); font-size: 18px; line-height: 1.45; font-weight: 500; }
.voice-who { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.voice-av { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--c-sky); color: #04121C; font-weight: 600; font-size: 16px; }
.voice-who strong { display: block; color: var(--ink); font-weight: 500; }
.voice-who > span > span { display: block; color: var(--ink-mute); font-size: var(--small); }

/* Price calculator (pricing page) */
.calc { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: start; }
.calc-in { display: flex; flex-direction: column; gap: 32px; }
.calc-set { border: 0; margin: 0; padding: 0; min-width: 0; }
.calc-lg { display: block; color: var(--fg); font-weight: 600; font-size: 17px; margin-bottom: 14px; padding: 0; }
.calc-lg output { color: var(--acc); font-variant-numeric: tabular-nums; }
.calc-mods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cm { position: relative; display: block; cursor: pointer; }
.cm input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cm-box { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px 14px 48px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--panel); transition: border-color .2s, background-color .2s; position: relative; }
.cm-box::before { content: ""; position: absolute; left: 16px; top: 16px; width: 20px; height: 20px; border-radius: 5px; border: 1.5px solid var(--line-3); background: transparent; }
.cm-box strong { color: var(--fg); font-weight: 600; font-size: 16px; }
.cm-box > span { color: var(--fg-mute); font-size: 14px; }
.cm input:checked + .cm-box { border-color: var(--acc); background: var(--acc-tint); }
.cm input:checked + .cm-box::before { background: var(--acc); border-color: var(--acc); }
.cm input:checked + .cm-box::after { content: ""; position: absolute; left: 23px; top: 19px; width: 6px; height: 11px; border: solid #04121C; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.cm input:focus-visible + .cm-box { outline: 2px solid var(--acc); outline-offset: 3px; }
.cm .ea { font-size: 11px; vertical-align: 2px; }
.calc-range { width: 100%; accent-color: var(--acc); height: 28px; }
.calc-hint { font-size: 14px; color: var(--fg-mute); margin-top: 6px; }
.calc-switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; color: var(--fg); font-weight: 500; }
.calc-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cs-track { flex: none; width: 44px; height: 26px; border-radius: 999px; background: var(--line-3); position: relative; transition: background-color .2s; }
.cs-track::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; }
.calc-switch input:checked + .cs-track { background: var(--acc); }
.calc-switch input:checked + .cs-track::after { transform: translateX(18px); }
.calc-switch input:focus-visible + .cs-track { outline: 2px solid var(--acc); outline-offset: 3px; }
.calc-switch .calc-hint { display: inline; margin: 0; font-weight: 400; }
.calc-out { position: sticky; top: calc(var(--hdr-h) + 24px); padding: 28px; border-radius: var(--r); background: var(--card-white); color: var(--ink-2); border: 1px solid var(--card-line); }
.calc-out [hidden] { display: none !important; }
.co-plan { color: var(--ink-mute); font-size: 15px; font-weight: 500; }
.co-price { color: var(--ink); font-size: 56px; font-weight: 300; letter-spacing: -0.02em; line-height: 1.1; margin-top: 6px; font-variant-numeric: tabular-nums; }
.co-unit { font-size: 18px; color: var(--ink-mute); letter-spacing: 0; }
.co-sub { color: var(--ink-mute); font-size: 15px; margin-top: 4px; }
.co-tip { margin-top: 14px; padding: 10px 12px; border-radius: var(--r-sm); background: #FFF4D6; color: #5A4300; font-size: 14px; }
.co-dl { margin: 22px 0 22px; border-top: 1px solid var(--card-line); }
.co-dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--card-line); font-size: 15px; }
.co-dl dt { color: var(--ink-mute); }
.co-dl dd { margin: 0; color: var(--ink); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.co-dl dd small { display: block; font-weight: 400; color: var(--ink-mute); font-size: 12px; }
.calc-out .btn-primary { background: var(--ink); color: #fff; width: 100%; }
.calc-out .btn-primary:hover { background: #3A3A3C; }
.calc-out .calc-hint { color: var(--ink-mute); font-size: 13px; margin-top: 12px; }
.calc-cmp { margin-top: 40px; }
@media (max-width: 1023px) { .calc { grid-template-columns: 1fr; } .calc-out { position: static; } }
@media (max-width: 560px) { .calc-mods { grid-template-columns: 1fr; } .co-price { font-size: 44px; } }

/* Comparison pages (vs-hubspot, vs-pipedrive) */
.cmp-sec .h2 { margin-bottom: 40px; }
.cmp-wrap { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--panel-line); background: var(--panel); }
.cmp-table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: var(--small); }
.cmp-table th, .cmp-table td { text-align: left; vertical-align: top; padding: 16px 20px; border-bottom: 1px solid var(--panel-line); }
.cmp-table tbody tr:last-child > * { border-bottom: 0; }
.cmp-table thead th { color: var(--fg); font-size: 16px; font-weight: 600; background: rgba(255,255,255,.03); }
.cmp-table thead th:nth-child(2) { color: var(--acc); }
.cmp-table tbody th { color: var(--fg); font-weight: 500; width: 22%; }
.cmp-table td { color: var(--fg-2); width: 39%; }
.cmp-table td strong { color: var(--fg); }
.cmp-table .yes { display: inline-block; padding: 1px 8px; margin-right: 4px; border-radius: 999px; background: rgba(52,211,153,.14); color: var(--ok); font-size: 12px; font-weight: 600; }
.cmp-note { margin-top: 16px; font-size: 13px; color: var(--fg-mute); max-width: 90ch; }
.cmp-ex { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.cmp-card { padding: 28px; border-radius: var(--r); background: var(--card-white); border: 1px solid var(--card-line); }
.cmp-card:first-child { border-top: 4px solid var(--c-sky); }
.cmp-card-n { color: var(--ink-mute); font-weight: 600; font-size: 15px; }
.cmp-card-p { color: var(--ink); font-size: 48px; font-weight: 300; letter-spacing: -0.02em; line-height: 1.1; margin-top: 8px; font-variant-numeric: tabular-nums; }
.cmp-card-p small { font-size: 18px; color: var(--ink-mute); letter-spacing: 0; }
.cmp-card-s { color: var(--ink-mute); font-size: 14px; margin-top: 6px; }
.cmp-card-l { margin-top: 18px; display: grid; gap: 8px; }
.cmp-card-l li { position: relative; padding-left: 20px; color: var(--ink-2); font-size: var(--small); }
.cmp-card-l li::before { content: "•"; position: absolute; left: 4px; color: var(--ink-mute); }
.cmp-fit { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.cmp-ticks { display: grid; gap: 10px; }
.cmp-ticks li { position: relative; padding-left: 26px; color: var(--fg-2); }
.cmp-ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--acc); font-weight: 700; }
.cmp-switch { max-width: 820px; }
.cmp-switch .body-l { margin: 20px 0 28px; }
.cmp-src-sec { padding-block: 64px; }
.cmp-src { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; font-size: 14px; }
@media (max-width: 767px) { .cmp-ex, .cmp-fit, .cmp-src { grid-template-columns: 1fr; } .cmp-card-p { font-size: 40px; } }
.cmp-mini { min-width: 0; margin-top: 16px; }
.calc-cmp { margin-top: 40px; padding: 28px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--panel-line); }
.cmp-mini td:last-child { white-space: nowrap; color: var(--fg); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .cmp-mini th, .cmp-mini td { padding: 10px 8px; } .cmp-mini thead th:nth-child(2), .cmp-mini td:nth-child(2) { display: none; } }

/* Section head without the split layout (Our promises) */
.sec-head { margin-bottom: 64px; }
.sec-head .h2 { margin-bottom: 14px; }
@media (max-width: 767px) { .sec-head { margin-bottom: 40px; } }
@media (min-width: 768px) and (max-width: 1023px) {
  .flow-list { padding-bottom: 76px; }
  .flow-txt { max-width: 118px; }
  .flow-list li:not(:first-child):not(:last-child) .flow-txt { text-align: center; }
}

/* Product screens slider: more room between the cards so the captions do not run into each other */
.tr-ov { gap: 56px; }
.tr-ov .mcard-cap { padding-right: 8px; }
@media (max-width: 1279px) { .tr-ov { gap: 40px; } }
@media (max-width: 767px) { .tr-ov { gap: 24px; } }

/* Lifestyle photos between the product screenshots (Unsplash licence, photographers listed in assets/img/photos/CREDITS.txt) */
.mcard-photo .mcard-media { background: #DDD; }
.mcard-photo .mcard-media img { left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; border: 0; border-radius: 0; box-shadow: none; }
.fcard-photo .fcard-media img { object-position: center; }

/* Tag pills on the slider cards (HoneyBook-style): first tag in colour, the rest white */
.fcard-media { position: relative; }
.ctags { position: absolute; z-index: 2; left: 14px; top: 14px; right: 14px; display: flex; flex-wrap: wrap; gap: 8px; pointer-events: none; }
.ctags li { padding: 7px 14px; border-radius: 999px; font-size: 14px; line-height: 1.2; font-weight: 500; letter-spacing: -0.005em; color: #1D1D1F; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0,0,0,.18); white-space: nowrap; }
.ctags .t-sky     { background: #BAE6FD; color: #0B3B5C; }
.ctags .t-violet  { background: #DDD6FE; color: #3B1F8C; }
.ctags .t-emerald { background: #A7F3D0; color: #064E3B; }
.ctags .t-sun     { background: #FDE68A; color: #5A3E00; }
.ctags .t-coral   { background: #FECACA; color: #7F1D1D; }
@media (max-width: 767px) { .ctags { left: 10px; top: 10px; gap: 6px; } .ctags li { padding: 5px 11px; font-size: 12px; } }

/* Modules right under the hero: both dark, so no double section gap */
.s-overview + .s-modules { padding-top: 8px; }

/* Top offer bar (above the sticky header; scrolls away) */
.topbar { background: #BAE6FD; color: #0B3B5C; position: relative; z-index: 51; }
.tb-off .topbar, body.menu-open .topbar { display: none; }
.topbar-in { display: flex; align-items: center; justify-content: center; gap: 12px 24px; min-height: 52px; padding-block: 8px; padding-right: 56px; position: relative; }
.topbar-txt { font-size: 17px; font-weight: 500; letter-spacing: -0.005em; text-align: center; }
.topbar-txt strong { color: #062A42; font-weight: 700; }
.topbar-btn { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 6px 18px; border-radius: 999px; background: #fff; color: #1D1D1F; font-size: 14px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.topbar-btn:hover { text-decoration: none; background: #F5F5F7; }
.topbar-btn:focus-visible, .topbar-x:focus-visible { outline: 2px solid #062A42; outline-offset: 2px; }
.topbar-x { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: #0B3B5C; cursor: pointer; display: grid; place-items: center; }
.topbar-x:hover { background: rgba(11,59,92,.1); }
.topbar-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (max-width: 767px) {
  .topbar-in { justify-content: flex-start; padding-right: 48px; gap: 8px 12px; flex-wrap: wrap; }
  .topbar-txt { font-size: 14px; text-align: left; }
  .topbar-btn { min-height: 30px; padding: 4px 12px; font-size: 12px; }
}
.tb-btn-arrow { display: none; }
@media (max-width: 767px) {
  .topbar-in { flex-wrap: nowrap; min-height: 44px; }
  .topbar-txt { font-size: 13px; line-height: 1.3; }
  .topbar-btn { min-height: 0; padding: 0; background: none; box-shadow: none; font-size: 18px; color: #062A42; }
  .topbar-btn::after { content: ""; position: absolute; inset: 0 48px 0 0; }   /* the whole bar (except the close button) opens the price calculator */
  .tb-btn-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tb-btn-arrow { display: inline; }
}

/* Hero headline: the second sentence types itself, letter by letter.
   Every phrase sits invisibly in the same grid cell, so the block is always as tall as the longest one: nothing below moves. */
.rot { display: grid; margin-top: .06em; }
.rot > * { grid-area: 1 / 1; }
.rot-sizer { visibility: hidden; }
.rh { background: none; color: inherit; padding: 0; font: inherit; }
.rh-t-sky { color: #38BDF8; }
.rh-t-sun { color: #FBBF24; }
.rh-t-coral { color: #FF8A6B; }
.rh-b-emerald, .rh-b-violet, .rh-b-sky { border-radius: 10px; padding: 0 .14em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.rh-b-emerald { background: rgba(52,211,153,.18); color: #A7F3D0; }
.rh-b-violet { background: rgba(129,140,248,.22); color: #C7D2FE; }
.rh-b-sky { background: rgba(56,189,248,.18); color: #BAE6FD; }
.rot-caret { display: inline-block; width: 3px; height: .82em; margin-left: .06em; vertical-align: -0.06em; border-radius: 2px; background: #38BDF8; animation: caretBlink 1.05s steps(1) infinite; }
.rot.is-paused .rot-caret { display: none; }
@keyframes caretBlink { 50% { opacity: 0; } }
.rot-toggle { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-top: 14px; padding: 0; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; color: var(--fg-mute); cursor: pointer; opacity: .7; transition: opacity .2s, border-color .2s; }
.rot-toggle:hover, .rot-toggle:focus-visible { opacity: 1; border-color: var(--fg-mute); }
.rot-toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rot-toggle .i-play { fill: currentColor; }
.rot-toggle[hidden] { display: none; }
.rot-toggle .i-play, .rot-toggle[aria-pressed="true"] .i-pause { display: none; }
.rot-toggle[aria-pressed="true"] .i-play { display: block; }
@media (prefers-reduced-motion: reduce) { .rot-caret { animation: none; } }

/* Hero photo next to the headline (desktop only, HoneyBook-style: tilted, with a floating product label) */
.hero-pic { display: none; }
@media (min-width: 1280px) {
  .s-overview > .wrap { position: relative; }
  .s-overview .h1 { max-width: 19ch; }
  .hero-pic { display: block; position: absolute; right: calc(var(--gutter) + 24px); top: 24px; width: clamp(200px, 17vw, 250px); margin: 0; transform: rotate(4deg); pointer-events: none; }
  .hero-pic img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 28% center; border-radius: var(--r); box-shadow: 0 24px 60px rgba(0,0,0,.45); }
  .hero-pill { position: absolute; left: -30px; top: 22px; transform: rotate(-6deg); display: flex; align-items: center; gap: 8px; padding: 7px 14px 7px 7px; border-radius: 999px; background: #fff; color: #1D1D1F; font-size: 14px; font-weight: 600; line-height: 1.2; box-shadow: 0 10px 30px rgba(0,0,0,.35); white-space: nowrap; }
  .hero-pill-ic { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #A7F3D0; color: #064E3B; flex: none; }
  .hero-pill-ic svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
}

/* Products dropdown in the header (light panel, Apple-style) */
.hdr-dd { position: relative; }
.hdr-dd-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--fg-2); font: 500 16px/1 var(--font); cursor: pointer; transition: color .2s, background-color .2s; }
.hdr-dd-btn:hover, .hdr-dd-btn[aria-expanded="true"] { color: #fff; background: rgba(255,255,255,.06); }
.hdr-dd-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); transition: transform .2s; }
.hdr-dd-btn[aria-expanded="true"] svg { transform: rotate(-90deg); }
.hdr-dd-panel { position: absolute; left: -12px; top: calc(100% + 10px); width: 640px; display: grid; grid-template-columns: 1.35fr 1fr; gap: 8px 28px; padding: 20px; border-radius: var(--r); background: #fff; color: #1D1D1F; box-shadow: 0 24px 60px rgba(0,0,0,.45); z-index: 60; }
.hdr-dd-panel[hidden] { display: none; }
.dd-col { display: flex; flex-direction: column; gap: 2px; }
.dd-col-2 { padding-left: 24px; border-left: 1px solid #E3E3E8; }
.dd-h { margin: 6px 0 6px 10px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #6E6E73; font-weight: 600; }
.dd-col-2 .dd-h:not(:first-child) { margin-top: 14px; }
.dd-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--r-sm); color: #1D1D1F; }
.dd-item:hover, .dd-item:focus-visible { background: #F5F5F7; text-decoration: none; }
.dd-ic { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--c); color: #1D1D1F; }
.dd-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dd-item strong { display: block; font-size: 15px; font-weight: 600; color: #1D1D1F; }
.dd-item span span { display: block; font-size: 13px; color: #6E6E73; margin-top: 1px; }
.dd-link { padding: 7px 10px; border-radius: var(--r-sm); color: #1D1D1F; font-size: 15px; }
.dd-link:hover, .dd-link:focus-visible { background: #F5F5F7; text-decoration: none; }
.mnav .mnav-h { padding: 14px 0 4px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-mute); font-weight: 600; }
.mnav .mnav-sub a { padding-left: 16px; font-size: 20px; min-height: 48px; }

/* Product pages (crm.html, website.html, booking.html) */
.pg-shot { margin-top: 64px; }
.pg-shot .ctags { top: 44px; }
.pg-feats .promise-grid { margin-top: 0; }
.pg-auto .promise-grid p { color: var(--fg-2); }
.pg-auto .ibox { background: rgba(255,255,255,.1); color: #fff; }
.pg-price .plans { margin-top: 0; }
.pg-other-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: 40px; }
.pg-other { display: flex; align-items: center; gap: 14px; padding: 20px; border-radius: var(--r); background: var(--card-white); border: 1px solid var(--card-line); color: var(--ink); height: 100%; }
.pg-other:hover { text-decoration: none; border-color: #C7C7CC; }
.pg-other strong { display: block; font-size: 17px; font-weight: 600; color: var(--ink); }
.pg-other span span { display: block; font-size: 14px; color: var(--ink-mute); margin-top: 2px; }
.pg-arrow { width: 20px; height: 20px; margin-left: auto; flex: none; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1023px) { .pg-other-list { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .pg-shot { margin-top: 40px; } .pg-shot .ctags { top: 12px; } }
/* the header's pill-link style must not reach the links inside the dropdown panel */
.hdr-links .hdr-dd-panel a { min-height: 0; font-size: 15px; font-weight: 400; border-radius: var(--r-sm); transition: background-color .15s; }
.hdr-links .hdr-dd-panel a.dd-item { display: flex; padding: 10px; color: #1D1D1F; }
.hdr-links .hdr-dd-panel a.dd-link { display: block; padding: 7px 10px; color: #1D1D1F; }
.hdr-links .hdr-dd-panel a:hover, .hdr-links .hdr-dd-panel a:focus-visible { background: #F5F5F7; color: #1D1D1F; }
/* three columns: GETCORVIDS · early access / more · Digital Supportly products */
.hdr-dd-panel { width: 920px; grid-template-columns: 1.25fr .85fr 1.2fr; }
.dd-col-3 { padding-left: 24px; border-left: 1px solid #E3E3E8; }
.hdr-links .hdr-dd-panel a.dd-item-s { padding: 7px 10px; }
.dd-item-s .dd-ic { width: 32px; height: 32px; border-radius: 9px; }
.dd-item-s .dd-ic svg { width: 17px; height: 17px; }
.dd-item-s strong { font-size: 14px; }
.dd-item-s span span { font-size: 12.5px; }
@media (max-width: 1279px) {
  .hdr-dd-panel { width: 660px; grid-template-columns: 1.3fr 1fr; }
  .dd-col-3 { grid-column: 1 / -1; padding: 14px 0 0; border-left: 0; border-top: 1px solid #E3E3E8; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; }
  .dd-col-3 .dd-h { grid-column: 1 / -1; }
}
/* keep every column inside the panel: columns may shrink, long descriptions wrap */
.hdr-dd-panel { width: 960px; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, 1.25fr); overflow: hidden; }
.dd-col { min-width: 0; }
.dd-item > span:last-child { min-width: 0; }
.dd-item span span { white-space: normal; }
@media (max-width: 1279px) { .hdr-dd-panel { width: 680px; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } .dd-col-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* the top-level menu keeps its items on one line; inside the panel text must wrap normally */
.hdr-links .hdr-dd-panel a, .hdr-links .hdr-dd-panel a * { white-space: normal; }
.hdr-dd-panel { width: 1000px; grid-template-columns: minmax(0, 1.15fr) minmax(0, .95fr) minmax(0, 1.25fr); }
@media (max-width: 1279px) { .hdr-dd-panel { width: 700px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }

/* "Ask us" mini chat (answered by email). Stack, bottom right: chat button, then back-to-top above it;
   both move up while the cookie notice shows (its real height is in --cookie-h). */
.chat { --chat-b: 24px; --chat-r: 24px; --fab-h: 52px; }
body.has-cookie .chat { --chat-b: calc(var(--cookie-h, 80px) + 36px); }
.chat-fab { position: fixed; right: var(--chat-r); bottom: var(--chat-b); z-index: 65; height: var(--fab-h); display: inline-flex; align-items: center; gap: 10px; padding: 0 20px 0 16px; border-radius: 999px; border: 0; background: #38BDF8; color: #04121C; font: 600 16px/1 var(--font); cursor: pointer; box-shadow: 0 10px 28px rgba(0,0,0,.35); transition: bottom .35s ease, transform .2s ease, background-color .2s; }
.chat-fab:hover { background: #7DD3FC; transform: translateY(-1px); }
.chat-fab:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.chat-fab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chat-fab[aria-expanded="true"] { display: none; }
.totop { bottom: calc(24px + 52px + 12px); }
body.has-cookie .totop { bottom: calc(var(--cookie-h, 80px) + 36px + 52px + 12px); }
body.chat-open .totop { opacity: 0 !important; pointer-events: none !important; }

.chat-panel { position: fixed; right: var(--chat-r); bottom: var(--chat-b); z-index: 66; width: 380px; max-height: min(640px, calc(100vh - 120px)); display: flex; flex-direction: column; border-radius: 16px; background: #fff; color: #1D1D1F; box-shadow: 0 24px 70px rgba(0,0,0,.45); overflow: hidden; animation: chatIn .22s ease-out; }
@keyframes chatIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; background: #05080F; color: #fff; }
.chat-av { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #0B2233; }
.chat-hd { min-width: 0; flex: 1; }
.chat-h { font-size: 16px; font-weight: 600; color: #fff; }
.chat-sub { font-size: 13px; color: #A9BBDB; margin-top: 2px; }
.chat-x { flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; display: grid; place-items: center; }
.chat-x:hover { background: rgba(255,255,255,.1); }
.chat-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.chat-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: #F5F5F7; }
.msg { max-width: 88%; }
.msg p { padding: 10px 14px; border-radius: 16px; font-size: 15px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-in p { background: #fff; color: #1D1D1F; border-bottom-left-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.msg-out { align-self: flex-end; }
.msg-out p { background: #38BDF8; color: #04121C; border-bottom-right-radius: 6px; }
.chat-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.chat-quick button { padding: 8px 12px; border-radius: 999px; border: 1px solid #C7C7CC; background: #fff; color: #1D1D1F; font: 500 14px/1.25 var(--font); cursor: pointer; text-align: left; }
.chat-quick button:hover, .chat-quick button:focus-visible { border-color: #0066CC; color: #0066CC; }
.chat-form { padding: 12px 14px 14px; border-top: 1px solid #E3E3E8; display: grid; gap: 8px; background: #fff; }
.chat-form textarea, .chat-form input[type="text"], .chat-form input[type="email"] { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid #D2D2D7; background: #fff; color: #1D1D1F; font: 400 15px/1.4 var(--font); }
.chat-form textarea { resize: none; min-height: 72px; }
.chat-form textarea:focus, .chat-form input:focus { outline: none; border-color: #0066CC; box-shadow: 0 0 0 3px rgba(0,102,204,.15); }
.chat-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.chat-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.4; color: #6E6E73; cursor: pointer; }
.chat-consent input { margin-top: 2px; accent-color: #0066CC; }
.chat-consent a { color: #0066CC; }
.chat-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.chat-ts:empty { display: none; }
.chat-err { font-size: 13px; color: #B42318; }
.chat-send { justify-self: end; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: #1D1D1F; color: #fff; font: 600 15px/1 var(--font); cursor: pointer; }
.chat-send:hover { background: #3A3A3C; }
.chat-send[disabled] { opacity: .6; cursor: default; }
.chat-send svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chat.is-sent .chat-form, .chat.is-sent .chat-quick { display: none; }
body.menu-open .chat { display: none; }
@media (max-width: 767px) {
  .chat { --chat-b: 16px; --chat-r: 16px; }
  body.has-cookie .chat { --chat-b: calc(var(--cookie-h, 150px) + 24px); }
  .chat-fab { width: var(--fab-h); padding: 0; justify-content: center; }
  .chat-fab-txt { display: none; }
  .totop { bottom: calc(16px + 52px + 10px); }
  body.has-cookie .totop { bottom: calc(var(--cookie-h, 150px) + 24px + 52px + 10px); }
  .chat-panel { left: 8px; right: 8px; bottom: 8px; width: auto; max-height: calc(100dvh - 16px); border-radius: 16px; }
  .chat-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .chat-panel { animation: none; } }

/* Public roadmap (roadmap.html) */
.rm-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.rm-col { min-width: 0; padding: 16px; border-radius: 12px; background: #EBEBF0; }
.rm-col-h { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 10px; padding: 4px 4px 14px; }
.rm-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.rm-col-t { font-size: 20px; font-weight: 600; color: var(--ink); margin: 0; }
.rm-col-n { min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; background: #fff; color: var(--ink-mute); font-size: 13px; font-weight: 600; display: grid; place-items: center; }
.rm-col-s { grid-column: 2 / -1; font-size: 14px; color: var(--ink-mute); }
.rm-list { display: grid; gap: 12px; }
.rm-card { min-width: 0; padding: 18px; border-radius: var(--r); background: #fff; border: 1px solid var(--card-line); }
.rm-card .h3 { font-size: 18px; margin: 12px 0 6px; color: var(--ink); }
.rm-card p { font-size: var(--small); color: var(--ink-2); }
.rm-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.rm-tags li { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #F5F5F7; color: #1D1D1F; }
.rm-tags .t-sky { background: #BAE6FD; color: #0B3B5C; } .rm-tags .t-violet { background: #DDD6FE; color: #3B1F8C; }
.rm-tags .t-emerald { background: #A7F3D0; color: #064E3B; } .rm-tags .t-sun { background: #FDE68A; color: #5A3E00; }
.rm-tags .t-coral { background: #FECACA; color: #7F1D1D; }
.rm-want { margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 1px solid #C7C7CC; background: #fff; color: #1D1D1F; font: 600 14px/1 var(--font); cursor: pointer; transition: border-color .2s, color .2s; }
.rm-want:hover, .rm-want:focus-visible { border-color: #0066CC; color: #0066CC; }
.rm-want svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rm-note { margin-top: 28px; font-size: var(--small); color: var(--ink-mute); max-width: 80ch; }
@media (max-width: 1023px) { .rm-board { grid-template-columns: 1fr; } }

/* a little air between the offer bar and the navbar (only while the bar shows; the sticky header still docks at the top) */
html:not(.tb-off) .topbar ~ .hdr { margin-top: 12px; }
@media (max-width: 767px) { html:not(.tb-off) .topbar ~ .hdr { margin-top: 6px; } }
body.menu-open .hdr { margin-top: 0 !important; }

/* no line under the navbar (scrolled or with the mobile menu open) */
.hdr, .hdr.is-scrolled, .hdr.is-open { border-bottom-color: transparent; }

/* ---------- Guides (guides.html, guide-*.html – tools/landing/build_guides.py) ---------- */
.g-hero .h1 { max-width: 20ch; }
.g-lead { max-width: 62ch; margin-top: 24px; color: var(--fg-2); }
.g-by { margin-top: 20px; font-size: var(--small); color: var(--fg-mute); }
.g-by a, .g-hero .eyebrow a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.g-wrap { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 64px; align-items: start; max-width: calc(1060px + 2 * var(--gutter)); }
.g-toc { position: sticky; top: calc(var(--hdr-h) + 32px); font-size: 14px; }
.g-toc-h { font-weight: 600; color: var(--fg); margin-bottom: 12px; }
.g-toc ol { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--line-2); }
.g-toc a { display: block; padding: 6px 0 6px 14px; color: var(--fg-mute); text-decoration: none; line-height: 1.35; overflow-wrap: anywhere; }
.g-toc a:hover { color: var(--acc); }
.g-body { max-width: 70ch; min-width: 0; color: var(--ink-2); font-size: 17px; line-height: 1.68; }
.g-body > * + * { margin-top: 18px; }
.g-body h2 { color: var(--ink); font-size: calc(var(--h3) + 6px); line-height: 1.2; letter-spacing: -0.01em; margin-top: 52px; scroll-margin-top: calc(var(--hdr-h) + 24px); }
.g-body ul, .g-body ol { padding-left: 1.3em; }
.g-body li + li { margin-top: 8px; }
.g-body strong { color: var(--ink); font-weight: 600; }
.g-body a { color: var(--acc); text-decoration: underline; text-underline-offset: 3px; }
.g-body ol.g-steps { list-style: none; padding-left: 0; counter-reset: gs; }
.g-body ol.g-steps > li { counter-increment: gs; position: relative; padding-left: 44px; }
.g-body ol.g-steps > li::before { content: counter(gs); position: absolute; left: 0; top: 2px; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; line-height: 28px; text-align: center; }
.g-short { background: var(--acc-tint); border-left: 4px solid var(--acc); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 20px 24px; color: var(--ink); }
.g-short-h { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #0B4F7A; margin-bottom: 6px; }
.g-note { background: #FFF7E6; border: 1px solid #F3D9A4; border-radius: var(--r-sm); padding: 14px 18px; font-size: 15px; color: #5C3D00; }
.g-tpl { background: #0B0F19; border-radius: var(--r-sm); padding: 18px 20px; color: #E6EAF2; }
.g-tpl-h { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #7DD3FC; margin-bottom: 10px; }
.g-tpl pre { margin: 0; font: 14px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: break-spaces; overflow-wrap: anywhere; }
.g-table-wrap { overflow-x: auto; border: 1px solid var(--card-line); border-radius: var(--r-sm); }
.g-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.g-table th, .g-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--card-line); vertical-align: top; }
.g-table thead th { background: var(--paper); color: var(--ink); font-weight: 600; }
.g-table tbody th { color: var(--ink); font-weight: 600; white-space: nowrap; }
.g-table tr:last-child th, .g-table tr:last-child td { border-bottom: 0; }
.g-faq { grid-column: auto; margin-top: 8px; }
.g-faq summary { font-size: 18px; }
.g-faq details p { padding-right: 0; }
.g-src-h { font-size: var(--h3) !important; }
.g-src { font-size: 15px; }
.g-author { display: flex; gap: 16px; align-items: flex-start; margin-top: 48px !important; padding-top: 28px; border-top: 1px solid var(--card-line); font-size: 15px; }
.g-author img { flex: none; }
.g-cards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.g-card a { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 28px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--panel-line); color: var(--fg-2); text-decoration: none; transition: border-color .2s, transform .2s var(--ease); }
.g-card a:hover { border-color: var(--acc); transform: translateY(-2px); }
.g-card-m { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--acc); }
.g-card-t { color: var(--fg); font-size: var(--h3); line-height: 1.25; font-weight: 600; }
.g-card-d { font-size: 15px; line-height: 1.55; flex: 1; }
.g-card-a { display: inline-flex; align-items: center; gap: 6px; color: var(--fg); font-weight: 500; font-size: 15px; }
.g-card-a svg { width: 16px; height: 16px; }
.g-index-more { margin-top: 40px; color: var(--ink-2); }
.g-index-more a { color: var(--acc); }
@media (max-width: 1023px) { .g-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 899px) {
  .g-wrap { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .g-toc { position: static; }
}
@media (max-width: 767px) {
  .g-cards { grid-template-columns: minmax(0, 1fr); }
  .g-body { font-size: 16px; }
  .g-body h2 { margin-top: 40px; }
  .g-table tbody th { white-space: normal; }
}
.g-hero .h1 { font-size: calc(var(--h1) * .78); max-width: 22ch; }
.g-body ul { list-style: disc; }
.g-body ul li::marker { color: var(--ink-mute); }

/* ---------- Free downloads (guides): request box → resource.php, double opt-in (2026-10-29) ---------- */
.dl-box { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 28px; align-items: start; background: var(--card-white); border: 1px solid var(--card-line); border-radius: var(--r); padding: 28px; color: var(--ink-2); font-size: 16px; line-height: 1.55; }
.g-body > .dl-box { margin-top: 48px; }
.dl-cover { position: relative; aspect-ratio: 210 / 297; background: #05080F; border-radius: 4px; box-shadow: 0 10px 24px rgba(5,8,15,.22), 0 1px 0 rgba(255,255,255,.06) inset; padding: 14px 12px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.dl-cover::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 14px; height: 38%; background: repeating-linear-gradient(180deg, rgba(255,255,255,.14) 0 2px, transparent 2px 9px); }
.dl-cover-b { font-size: 8px; letter-spacing: .12em; color: #fff; font-weight: 600; }
.dl-cover-b b { color: #38BDF8; font-weight: 600; }
.dl-cover-t { color: #fff; font-size: 12.5px; line-height: 1.22; font-weight: 600; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.dl-cover-f { position: relative; z-index: 1; align-self: flex-start; font-size: 8px; font-weight: 600; color: #05080F; background: #38BDF8; border-radius: 3px; padding: 2px 5px; }
.dl-main { min-width: 0; }
.dl-meta { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #0B4F7A; margin: 0; }
.g-body .dl-box h2.dl-h, .dl-box .dl-h { color: var(--ink); font-size: 24px; line-height: 1.2; letter-spacing: -0.01em; margin: 6px 0 0; }
.g-body .dl-box ul.dl-list, .dl-list { list-style: none; padding: 0; margin: 14px 0 0; }
.dl-list li { position: relative; padding-left: 24px; }
.dl-list li + li { margin-top: 6px; }
.dl-list li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 11px; height: 6px; border-left: 2px solid var(--acc); border-bottom: 2px solid var(--acc); transform: rotate(-45deg); }
.g-body .dl-list li::marker { content: none; }
.dl-form { margin-top: 20px; display: flex; flex-direction: column; gap: 14px; }
.dl-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 12px; }
.dl-f { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; color: var(--ink); min-width: 0; }
.dl-f i { font-style: normal; font-weight: 400; color: var(--ink-mute); }
.dl-f input { color-scheme: light; width: 100%; min-width: 0; font: inherit; font-size: 16px; font-weight: 400; color: var(--ink); background: #fff; border: 1px solid var(--line-3, #C7C7CC); border-radius: var(--r-sm); padding: 11px 12px; }
.dl-f input:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; border-color: var(--acc); }
.dl-f.has-error input { border-color: var(--err); box-shadow: 0 0 0 1px var(--err); }
.dl-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--ink-mute); cursor: pointer; }
.dl-consent input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--acc); color-scheme: light; }
.dl-consent.has-error span { color: var(--err); }
.g-body .dl-consent a, .dl-consent a { color: var(--acc); }
.dl-ts:empty { display: none; }
.dl-send { align-self: flex-start; }
.dl-send[disabled] { opacity: .6; cursor: progress; }
.dl-err { margin: 0; font-size: 14px; color: var(--err); }
.dl-done { margin-top: 20px; background: var(--acc-tint); border-left: 4px solid var(--acc); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 16px 18px; color: var(--ink); outline: none; }
.dl-done p { margin: 0; }
.dl-sec-h { color: var(--ink); margin: 0 0 24px; }
.dl-sec-h + .g-cards { margin-top: 0; }
.dl-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 72px; }
.dl-pair .dl-box { grid-template-columns: 96px minmax(0, 1fr); gap: 22px; padding: 24px; }
.dl-pair .dl-row { grid-template-columns: minmax(0, 1fr); }
.dl-pair .dl-cover-t { font-size: 10px; }
@media (max-width: 1100px) { .dl-pair { grid-template-columns: minmax(0, 1fr); } .dl-pair .dl-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } }
@media (max-width: 640px) {
  .dl-box, .dl-pair .dl-box { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; gap: 18px; }
  .dl-cover { width: 96px; }
  .dl-row, .dl-pair .dl-row { grid-template-columns: minmax(0, 1fr); }
  .dl-send { align-self: stretch; }
  .g-body .dl-box h2.dl-h, .dl-box .dl-h { font-size: 21px; }
}

/* ---------- Pricing: website built for you (2026-11-04) ---------- */
.pr-built { border-top: 1px solid var(--panel-line); }
.pr-built .sec-head-split { margin-bottom: 32px; }
.ptable-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r); background: var(--panel); border: 1px solid var(--panel-line); padding: 8px 24px 4px; }
.ptable-scroll:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.ptable-built { min-width: 720px; font-size: 15px; }
.ptable-built thead th { color: var(--fg); font-weight: 600; font-size: 16px; padding-top: 14px; }
.ptable-built tbody th { width: 22%; color: var(--fg-2); font-weight: 400; }
.ptable-built td { white-space: normal; width: 26%; }
.ptable-built td strong { font-size: 22px; font-weight: 600; color: var(--fg); }
.ptable-built tr:last-child th, .ptable-built tr:last-child td { border-bottom: 0; }
.pr-built-notes { margin-top: var(--gap); }
.pr-list { display: flex; flex-direction: column; gap: 10px; color: var(--fg-2); font-size: var(--small); line-height: 1.5; }
.pr-list li { position: relative; padding-left: 22px; }
.pr-list li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 10px; height: 6px; border-left: 2px solid var(--c-sky); border-bottom: 2px solid var(--c-sky); transform: rotate(-45deg); }
.pr-block .pr-small a { color: var(--fg-2); }
.pr-built-cta { margin-top: 32px; }
@media (max-width: 767px) { .ptable-scroll { padding: 4px 16px; } .ptable-built { min-width: 620px; font-size: 14px; } .ptable-built td strong { font-size: 19px; } }
.pr-list-no li::before { top: .72em; width: 10px; height: 0; border-left: 0; border-bottom: 2px solid var(--fg-mute); transform: none; }

/* ---------- More from Digital Supportly: software to order (2026-11-04) ---------- */
.dsx-grid .dsx-wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: center; min-height: 0; }
.dsx-wide-txt { display: flex; flex-direction: column; gap: 10px; min-width: 0; align-items: flex-start; }
.dsx-wide .mod-top { justify-content: flex-start; align-items: center; gap: 12px; }
.dsx-wide .mod-for { margin-top: 6px; align-self: stretch; }
.dsx-wide .circ-link { margin-top: 6px; background: none; border: 0; padding: 0; font: inherit; font-weight: 500; cursor: pointer; text-align: left; }
.dsx-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; counter-reset: dsx; }
.dsx-steps li { counter-increment: dsx; position: relative; padding: 14px 16px 14px 56px; border: 1px solid var(--panel-line); border-radius: var(--r); background: var(--panel); display: flex; flex-direction: column; gap: 2px; font-size: var(--small); color: var(--fg-2); }
.dsx-steps li::before { content: counter(dsx); position: absolute; left: 16px; top: 14px; width: 26px; height: 26px; border-radius: 50%; background: var(--ink, #1D1D1F); color: #fff; font-size: 13px; font-weight: 600; line-height: 26px; text-align: center; }
.dsx-steps strong { color: var(--fg); font-weight: 600; }
@media (max-width: 1023px) { .dsx-grid .dsx-wide { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

/* ---------- Pricing: website check and move and refresh (2026-11-04) ---------- */
.pr-grid.pr-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--gap); }
.pr-grid.pr-grid-2 .pr-block:last-child { grid-column: auto; }
.pr-built-have .pr-block { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.pr-built-have .h3 { margin-bottom: 0; }
.pr-price-line { color: var(--fg-2); font-size: var(--small); }
.pr-price-line strong { color: var(--fg); font-size: 22px; font-weight: 600; }
.pr-p { color: var(--fg-2); font-size: var(--small); line-height: 1.55; }
.pr-built-have .pr-small { margin-top: 0; }
.pr-built-have .btn { margin-top: auto; }
@media (max-width: 1023px) { .pr-grid.pr-grid-2 { grid-template-columns: minmax(0, 1fr); } }

/* feature wall without motion: fewer columns on narrower screens, so labels fit (2026-11-04) */
@media (max-width: 1100px) { .wall:not(.is-moving) .sub { width: calc((100% - 2 * 12px) / 3); } }
@media (max-width: 640px) { .wall:not(.is-moving) .sub { width: calc((100% - 12px) / 2); } }

/* ============ Crowmail (2026-11-07): the new GETCORVIDS product, early access ============ */
/* lockup: icon + CROWMAIL (MAIL in the logo blue) + "by Digital Supportly", as in the app */
.cm-lock { display: inline-flex; align-items: center; gap: 14px; }
.cm-lock img { width: 44px; height: 44px; flex: none; display: block; }
.cm-word { display: flex; flex-direction: column; gap: 6px; }
.cm-word b { font: 600 20px/1 var(--font); letter-spacing: .14em; color: var(--fg); white-space: nowrap; }
.cm-word i { font-style: normal; color: var(--c-sky); }
.cm-word small { font-size: 13px; line-height: 1; color: var(--fg-mute); letter-spacing: .01em; }
.cm-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 4px 0 26px; }
.cm-badge { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 5px 14px 5px 5px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; font-size: 14px; color: var(--fg-2, var(--fg)); }
.cm-badge span { font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: var(--c-sky); color: #04121C; }
.cm-note { margin: 18px 0 0; font-size: 14px; color: var(--fg-mute); }
.cm-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cm-step { display: flex; gap: 16px; align-items: flex-start; padding: 24px; border: 1px solid rgba(255,255,255,.12); border-radius: var(--r); }
.cm-step p { margin: 6px 0 0; color: var(--fg-mute); }
.cm-step-n { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--c-sky); color: #04121C; font-weight: 600; }
@media (max-width: 900px) { .cm-steps { grid-template-columns: minmax(0, 1fr); } }
/* Products menu: the app icon instead of a line icon */
.dd-ic.dd-ic-img { background: none; border-radius: 10px; overflow: hidden; }
.dd-ic.dd-ic-img img { width: 38px; height: 38px; display: block; }
.dd-item strong .dd-new, .dd-new { display: inline-block; width: auto; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #E0F2FE; color: #0369A1; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; vertical-align: 2px; }
/* home: the Crowmail spotlight under the hero */
.s-crowmail .intro-l .cm-head { margin: 0 0 20px; }
.s-crowmail .spot-copy .btn-row { margin-top: 28px; }
.s-crowmail .ticks, .s-cm-form .ticks { color: var(--fg); }
@media (max-width: 640px) { .cm-word b { font-size: 17px; } .cm-lock img { width: 38px; height: 38px; } }
/* Crowmail page: the quote form as a tall card next to its ticks */
.cm-form-shot { max-width: 560px; margin: 0 auto; border-radius: 16px; overflow: hidden; }
.cm-form-shot img, .shot.cm-form-shot img { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: fill; }
.s-cm-form .spot-split { align-items: center; }
/* Ravenlead (2026-11-08): the lead product, violet accent */
.cm-lock.rl .cm-word i { color: #A78BFA; }
.cm-badge.rl span { background: #A78BFA; color: #140B2E; }
.rl-hl { color: #A78BFA; }
.s-ravenlead .ticks { color: var(--fg); }
.s-ravenlead .spot-copy .btn-row { margin-top: 28px; }
.s-ravenlead .intro-l .cm-head { margin: 0 0 20px; }
/* Guides: a short box for the new product that does what the guide describes (2026-11-08) */
.pbox { display: flex; gap: 16px; align-items: flex-start; margin: 32px 0 8px; padding: 18px 20px; border-radius: var(--r); border: 1px solid #D8DDE6; background: #FFFFFF; }
.pbox img { width: 44px; height: 44px; flex: none; }
.pbox p { margin: 0 0 6px; }
.pbox-h strong { font-weight: 600; }
.pbox-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #E0F2FE; color: #0369A1; }
.pbox-rl .pbox-tag { background: #EDE9FE; color: #6D28D9; }
.pbox-links { margin: 8px 0 0 !important; font-size: 15px; }

/* Product page hero with a real card from the app on the right (Crowmail, Ravenlead) */
.ph-card { display: none; position: relative; margin: 0; }
.ph-card img { display: block; width: 100%; height: auto; border-radius: 18px; background: #16181D;
  box-shadow: var(--shadow), 0 30px 90px rgba(56,189,248,.14); }
.ph-card.rl img { box-shadow: var(--shadow), 0 30px 90px rgba(167,139,250,.16); }
.ph-card .ctags { top: -15px; left: -16px; right: auto; }
@media (min-width: 1100px) {
  .ph-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 72px; align-items: center; }
  .ph-grid .ph-copy .h1 { max-width: 17ch; font-size: clamp(52px, 4.4vw, 64px); }
  .ph-grid .ov-cta { align-items: flex-start; }
  .ph-grid .trustline { justify-content: flex-start; }
  .ph-grid .ov-row { flex-direction: column; align-items: flex-start; margin-top: 36px; gap: 28px; }
  .ph-grid .ov-lead { max-width: 46ch; }
  .ph-card { display: block; }
}
@media (min-width: 1100px) and (max-width: 1279px) {
  .ph-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; }
}