/* =========================================================
   Block Seven
   Neutral dark, Samsung Sharp Sans throughout. Layout and sizes are a 1:1
   translation of the TSeller landing page (Tailwind v4 tokens), with the
   header, buttons and contact page measured off cursor.com. One flat colour
   per section; "card" is the single lift above the page.
   Two themes, one system: every colour is a token on :root and every tint
   and hairline is an alpha of --ink (white on the dark site, ink on paper),
   so the light theme is the token block after :root plus the few image and
   glow rules under "Light theme" at the foot of the file.
   ========================================================= */

@font-face { font-family: "Samsung Sharp Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/samsungsharpsans.woff2") format("woff2"); }
@font-face { font-family: "Samsung Sharp Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/samsungsharpsans-medium.woff2") format("woff2"); }
@font-face { font-family: "Samsung Sharp Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/samsungsharpsans-medium.woff2") format("woff2"); }
@font-face { font-family: "Samsung Sharp Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/samsungsharpsans-bold.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  /* One universal background for every section — a very dark grey, never pure
     black. --panel is the card tone (TSeller's #F3F1EC on #FAF9F6); the footer
     and the FAQ band sit one step below it (their #F3F1ED / #F3F1EC bands). */
  --bg: #111111;
  --panel: #1a1a1a;
  --footer-bg: #171717;
  --legal-copy: #cfcfcf;
  /* Tailwind gray roles from the reference, remapped to white-on-#111:
     gray-900 -> --fg, gray-700 -> ~70% white, gray-600 -> ~60%, gray-500 -> ~50%. */
  --fg: #ededed;
  --fg-70: #b8b8b8;
  --fg-60: #a0a0a0;
  --fg-50: #888888;
  --tw-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --line: rgba(var(--ink), 0.08);
  --line-strong: rgba(var(--ink), 0.18);
  /* Card border: TSeller's #E5E1D8/30 hairline. */
  --card-line: rgba(var(--ink), 0.05);

  --text: #ededed;
  --text-2: #b4b4b4;
  --muted: #7d7d7d;

  /* Monochrome accent, like Cursor. */
  --blue: #ededed;
  --blue-hover: #d7d6d5;
  --aqua: #ffffff;

  /* The channel every alpha in this file is written against: white on the
     dark site, ink on paper. --fg-rgb is the text colour's channels, for the
     few tints (nav hover, placeholders) set against the text, not pure white. */
  --ink: 255, 255, 255;
  --fg-rgb: 237, 237, 237;
  /* Cards on the lifted band (FAQ, results): the same card tone here; one
     step deeper on paper, as TSeller's #ECEAE4 on #F3F1EC. */
  --panel-2: var(--panel);
  /* Integration chips stay dark in both themes: their icons are the
     dark-tile variants (white where the brand has black). */
  --chip-bg: #1e1e1e;
  --chip-line: rgba(255, 255, 255, 0.08);
  /* Chart tooltip: a panel lighter than the card, floating above it. */
  --tip-bg: #242424;
  --tip-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.55), 0 4px 8px -4px rgba(0, 0, 0, 0.4);
  /* Call-me scrim; validation red, desaturated to sit in a mono system. */
  --scrim: rgba(17, 17, 17, 0.78);
  --err: #d98a84;
  --err-rgb: 217, 138, 132;
  /* The hero's glow: centre and mid stops of the sky's ellipse. */
  --sky-0: rgba(255, 255, 255, 0.045);
  --sky-1: rgba(255, 255, 255, 0.018);

  --font: "Samsung Sharp Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --container: 1360px;   /* TSeller: max-w-[1360px] + px-6 */
  --header-h: 60px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Light theme ----------
   The same system on paper: the TSeller palette this site was translated
   from (page #FAF9F6, card #F3F1EC, the lifted band's cards #ECEAE4) with
   ink where the dark site has white. Because every tint in the file is an
   alpha of --ink, flipping the tokens flips the hairlines, tiles, glass and
   tooltips with them; only the things that are not colours — white artwork,
   the hero glow, the spotlight — need the rules at the foot of the file.
   Chosen with the switch in the header, remembered in localStorage, and
   put back before first paint by the inline script in every page's head. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #faf9f6;
  --panel: #f3f1ec;
  --panel-2: #eceae4;
  --footer-bg: #f3f1ed;
  --legal-copy: #3b3b3b;
  --fg: #141414;
  --fg-70: #4a4a4a;
  --fg-60: #5b5b5b;
  --fg-50: #737373;
  --ink: 20, 20, 20;
  --fg-rgb: 20, 20, 20;
  --line: rgba(20, 20, 20, 0.08);
  --line-strong: rgba(20, 20, 20, 0.2);
  --card-line: rgba(20, 20, 20, 0.06);
  --text: #141414;
  --text-2: #4a4a4a;
  --muted: #7a7a7a;
  --blue: #141414;
  --blue-hover: #2c2c2c;
  --aqua: #141414;
  --tip-bg: #ffffff;
  --tip-shadow: 0 12px 28px -8px rgba(20, 20, 20, 0.18), 0 4px 10px -4px rgba(20, 20, 20, 0.08);
  --scrim: rgba(250, 249, 246, 0.82);
  --err: #c0392b;
  --err-rgb: 192, 57, 43;
  /* on paper the glow is a lift towards white behind the mark */
  --sky-0: rgba(255, 255, 255, 0.95);
  --sky-1: rgba(255, 255, 255, 0.45);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15.5px;
  line-height: 1.6;
  letter-spacing: -0.005em;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, dl, dd, dt, figure, blockquote { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }
section { scroll-margin-top: var(--header-h); }
::selection { background: var(--text); color: var(--bg); }
:focus-visible { outline: 1px solid var(--aqua); outline-offset: 4px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 24px; }
/* The header shares the page container exactly — no narrower box, no extra
   gutter — so the logo's left edge and the actions' right edge sit on the
   same lines as every section (Cursor's approach). */

.skip-link { position: absolute; left: 16px; top: -60px; z-index: 10000; background: var(--text); color: var(--bg); padding: 10px 14px; font-size: 14px; }
.skip-link:focus { top: 16px; }

/* ---------- Buttons (header) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 46px; padding: 0 24px; border-radius: 999px;
  font-size: 14px; font-weight: 500; letter-spacing: 0; white-space: nowrap;
  border: 1px solid transparent;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn-solid { background: var(--blue); color: var(--bg); }
.btn-solid:hover { background: var(--blue-hover); }
.btn-outline { border-color: var(--line-strong); color: var(--text); }
.btn-outline:hover { border-color: var(--text); }

/* ---------- Header ----------
   Modelled on the TSeller landing header: sticky, flat, one solid background
   that matches the page, no bottom rule and no blur. Logo left, nav optically
   centred in the viewport, one pill action right. */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--bg);
}
.header-inner {
  position: relative; height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

.brand { display: inline-flex; align-items: center; }
/* Single-line wordmark, sized to TSeller's 29px logo. */
.brand img { height: 36px; width: auto; }

/* Absolutely centred on the container, so the nav stays put no matter how wide
   the logo or the action button get — same trick TSeller uses. */
.nav { position: absolute; left: 50%; transform: translateX(-50%); }
.nav-list { display: flex; align-items: center; gap: 32px; }
.nav-list > li { position: relative; display: flex; align-items: center; }
/* Cursor's .nav__link, measured: full-strength text, hover dims to 75%,
   no transition. */
.nav-list a { font-size: 13px; font-weight: 400; color: var(--text); letter-spacing: 0; }
.nav-list a:hover { color: rgba(var(--fg-rgb), 0.75); }
/* Cursor dims the trigger while its menu is open, rather than marking it. */
.has-sub:hover > a, .has-sub.open > a { color: var(--muted); }

/* Menu panel, Cursor-style: left-aligned under its trigger, small radius,
   flat list, no numbering, no icons. */
.sub {
  position: absolute; top: calc(100% + 18px); left: -14px;
  min-width: 156px; padding: 10px 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  opacity: 0; visibility: hidden;
  transition: opacity .15s var(--ease), visibility .15s;
}
.sub::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px; }
.has-sub:hover .sub, .has-sub.open .sub, .has-sub:focus-within .sub { opacity: 1; visibility: visible; }
.sub li { display: block; }
.nav-list .sub a { display: block; padding: 6px 14px; font-size: 13px; font-weight: 400; line-height: 18px; color: rgba(var(--fg-rgb), 0.9); white-space: nowrap; }
.nav-list .sub a:hover { color: var(--text); }

.header-actions { display: flex; align-items: center; gap: 8px; }
/* Cursor's .btn--ghost.btn--sm, measured off cursor.com: text at the nav size
   with line-height 1, padding .4em / .75em, 1px border at 20% white, pill,
   and no transition (theirs is 0s). Hover only fills with the card tone —
   border and text do not change. */
.header-cta {
  height: 26px; padding: 0 0.75em; font-size: 13px; font-weight: 400; line-height: 1;
  color: var(--text); background: transparent; border: 1px solid rgba(var(--ink), 0.2);
  box-shadow: none; transition: none;
}
.header-cta:hover { background: var(--panel); border-color: rgba(var(--ink), 0.2); color: var(--text); transform: none; box-shadow: none; }
/* Cursor's .btn--primary: light fill with a matching border, dark text; hover
   just steps the fill down one shade (their #edecec → #d7d6d5). */
.header-cta.is-primary { background: var(--text); border-color: var(--text); color: var(--bg); }
.header-cta.is-primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); color: var(--bg); }

/* Three-bar burger — TSeller's mobile control: three 22×1.5px hairlines with
   round caps, 8px of padding as the tap target. It does not morph into an X;
   the overlay carries its own close button.
   The bars are laid out with padding rather than a fixed height and centring:
   that put them at 8.75 / 15.25 / 21.75px, three different subpixel offsets,
   so the device-pixel grid rounded each one differently and the middle bar
   painted heavier. Padding 8px with a 5.5px gap puts them on 8 / 15 / 22 —
   whole pixels, and a 7px pitch that stays whole at 2× and 3×, so all three
   render identically. */
.nav-toggle { display: none; flex-direction: column; gap: 5.5px; padding: 8px; }
.nav-toggle span { display: block; width: 22px; height: 1.5px; border-radius: 999px; background: var(--text); }

/* ---------- Theme switch ----------
   Left of "Contact us", at the header CTAs' 26px height: a pill track with a
   knob that carries the glyph of the theme you are in — moon on the dark
   site, sun on paper — and slides across when you switch. The track takes
   the header-cta's 20% hairline and its hover fill; the knob is the text
   colour with the page colour cut into it, so it is a white dot here and an
   ink dot on paper. 46px wide: 2px pad, 20px knob, 20px of travel, 2px pad. */
.theme-toggle { position: relative; display: inline-flex; align-items: center; flex: none; width: 46px; height: 26px; padding: 2px; border-radius: 999px; border: 1px solid rgba(var(--ink), 0.2); background: transparent; transition: background 150ms var(--tw-ease), border-color 150ms var(--tw-ease); }
.theme-toggle:hover { background: var(--panel); }
.theme-knob { position: relative; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); color: var(--bg); transform: translateX(0); transition: transform 360ms var(--ease), background 150ms var(--tw-ease), color 150ms var(--tw-ease); }
/* both glyphs share the knob's centre; the one for the other theme waits, turned away and small */
.theme-knob svg { grid-area: 1 / 1; width: 12px; height: 12px; transition: opacity 200ms var(--tw-ease), transform 420ms var(--ease); }
.theme-knob .ico-sun { opacity: 0; transform: rotate(-90deg) scale(0.5); }
.theme-knob .ico-moon { opacity: 1; transform: none; }
:root[data-theme="light"] .theme-knob { transform: translateX(20px); }
:root[data-theme="light"] .theme-knob .ico-sun { opacity: 1; transform: none; }
:root[data-theme="light"] .theme-knob .ico-moon { opacity: 0; transform: rotate(90deg) scale(0.5); }
/* The switch's reveal. With the View Transitions API the new theme spreads
   out from the switch as a circle: main.js animates a clip-path on the new
   snapshot, and these turn the default cross-fade off so the circle's edge
   is crisp. Browsers without the API ignore the rules and just change. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* ---------- Mobile menu overlay ----------
   TSeller's pattern, 1:1: an opaque full-screen sheet that fades in over
   200ms and fades back out, with its own close button in the top-right. Not a
   drawer, not a scrim — the page behind is completely hidden. The burger stays
   as it is underneath. Built once in main.js from the page's own nav, so every
   page gets the same menu and the two can never drift apart. */
.mobile-menu { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; background: var(--bg); opacity: 0; transition: opacity 200ms var(--tw-ease); }
.mobile-menu.is-open { opacity: 1; }
.mobile-menu[hidden] { display: none; }
/* the 64px below the close row is what sets the gap before the links */
.mobile-menu-head { display: flex; justify-content: flex-end; padding: 16px 16px 64px; }
.mobile-menu-close { display: inline-flex; padding: 0; color: rgba(var(--ink), 0.55); }
/* 32px glyph at stroke 1.2 — as thin as the burger's hairlines */
.mobile-menu-close svg { width: 32px; height: 32px; }
.mobile-menu-nav { display: flex; flex-direction: column; gap: 4px; padding: 32px 24px 0; }
/* 2.1rem, normal weight, tight leading — large but not bold */
.mobile-menu-nav a { font-size: 2.1rem; line-height: 1.25; font-weight: 400; color: var(--fg); }
/* safety net: a resize to desktop while open can never strand the panel */
@media (min-width: 1025px) { .mobile-menu { display: none; } }

/* ---------- Hero ----------
   The Runcycle pattern in our neutral dark system: a full-height "sky" that
   starts at the page colour (so the sticky header blends), gathers a soft
   glow low in the frame and settles back to the page colour at the seam with
   the next section; the globe sits huge and tonal in the middle; headline
   left, copy + two pills right, the logo strip at the foot. */
.hero-top {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: calc(100svh - var(--header-h));
  /* Two rows: the copy centres in whatever space is left above; the logo strip
     is anchored to the foot of the first frame (its own pb-16 is the bottom gap). */
  display: grid; grid-template-rows: minmax(0, 1fr) auto; align-items: center;
  background: var(--bg);
}
.hero-top-sky {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  /* One soft ellipse, sized so it reaches zero INSIDE the section: centre at
     52% with a 40% vertical radius puts its bottom edge at 92%, leaving the
     last 8% pure page colour. The section is overflow:hidden, so any gradient
     still carrying brightness at the boundary gets sliced and shows as a hard
     line against the next section — this cannot. */
  background:
    radial-gradient(62% 40% at 50% 52%, var(--sky-0) 0%, var(--sky-1) 50%, transparent 100%),
    var(--bg);
}
/* A hair of dither on the sky alone — dark gradients band on OLED without it. */
.hero-top-sky::after { content: ""; position: absolute; inset: 0; opacity: 0.045; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px 180px; }

.hero-top-mark {
  position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: calc(22% + 40px); translate: -50% -50%;
  width: clamp(260px, 34vh, 430px); aspect-ratio: 1;
  opacity: 0.072;
  /* Patchy, not a flat tint: three soft blobs at different spots. Mask layers
     composite additively, so their union reveals the mark unevenly — some of
     it sits right back into the screen, some of it reads. */
  -webkit-mask-image:
    radial-gradient(58% 62% at 36% 30%, #000 0%, rgba(0, 0, 0, 0.5) 55%, transparent 100%),
    radial-gradient(52% 56% at 72% 60%, #000 0%, rgba(0, 0, 0, 0.45) 50%, transparent 100%),
    radial-gradient(48% 44% at 50% 82%, #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 100%);
  mask-image:
    radial-gradient(58% 62% at 36% 30%, #000 0%, rgba(0, 0, 0, 0.5) 55%, transparent 100%),
    radial-gradient(52% 56% at 72% 60%, #000 0%, rgba(0, 0, 0, 0.45) 50%, transparent 100%),
    radial-gradient(48% 44% at 50% 82%, #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: heroMarkDrift 30s ease-in-out infinite alternate;
}
.hero-top-mark img { width: 100%; height: 100%; }
@keyframes heroMarkDrift { from { transform: scale(1); } to { transform: scale(1.045); } }

.hero-top-grid {
  position: relative; z-index: 1;
  /* Columns bottom-aligned: the action buttons sit on the same line as the
     headline's last line ("the busywork."). */
  display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr); align-items: end; gap: 48px;
  /* centred in its row, so top padding drops the content by half its value (184px → 92px) */
  padding-top: 184px; padding-bottom: 0;
}
.hero-top-title { font-size: clamp(32px, 2.6vw, 48px); font-weight: 500; line-height: 1.12; letter-spacing: -0.03em; color: var(--fg); white-space: nowrap; }
.hero-top-title em { font-style: normal; color: var(--fg-60); }
/* two wordings of the headline; phones get the second one */
.hero-lines { display: block; }
.hero-lines-phone { display: none; }
.hero-top-side { justify-self: end; width: 100%; max-width: 380px; padding-top: 0; }
.hero-top-side p { font-size: 15px; line-height: 1.5; letter-spacing: -0.01em; color: var(--fg); text-wrap: pretty; }
/* Header-button recipe, left-aligned under the copy. */
.hero-top-actions { display: flex; align-items: center; justify-content: flex-start; gap: 8px; margin-top: 22px; }

/* Header-button recipe (.header-cta) one step up: same 1px border on both
   variants so the text box is identical and flex-centres the same way. */
.pill { display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 0.85em; border: 1px solid transparent; border-radius: 9999px; font-size: 14px; line-height: 1; font-weight: 400; letter-spacing: 0; white-space: nowrap; transition: opacity 150ms var(--tw-ease), background 150ms var(--tw-ease), color 150ms var(--tw-ease); }
.pill-light { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.pill-light:hover { opacity: 0.9; }
.pill-glass { color: var(--text); border-color: rgba(var(--ink), 0.2); background: rgba(var(--ink), 0.04); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pill-glass:hover { background: rgba(var(--ink), 0.09); color: var(--fg); }

@media (max-width: 900px) {
  /* Stacked: the globe mark leads, in its own room at the top, then the
     headline, copy and buttons in one column. The hero stops being a
     full-height grid and simply flows. */
  .hero-top { min-height: 0; display: block; }
  .hero-top-mark { position: static; display: block; translate: none; width: min(52vw, 220px); margin: 40px auto 0; opacity: 0.16; animation: none; }
  .hero-top-grid { grid-template-columns: 1fr; gap: 28px; padding: 36px 16px 56px; }
  .hero-top-title { white-space: normal; font-size: clamp(28px, 7.6vw, 36px); line-height: 1.14; }
  .hero-top-side { justify-self: start; max-width: 100%; padding-top: 0; }
  .hero-top-side p { font-size: 15px; }
}
@media (max-width: 480px) {
  .hero-top-actions { flex-wrap: wrap; }
}

/* ---------- Integrations strip ----------
   TSeller's logo strip, 1:1 (Tailwind v4 tokens translated). Sits inside the
   hero so it is on screen in the first frame; its "section background" is the
   hero's page-coloured sky, so it paints nothing of its own. Static: no hover. */
/* <section id="integrations" class="relative pt-10 md:pt-16 pb-10 md:pb-16 scroll-mt-20"> */
/* margin-top is ours: pushes the strip a good way below the hero copy */
.integrations { position: relative; z-index: 1; margin-top: 32px; padding: 40px 0; scroll-margin-top: 80px; }
/* max-w-[1345px] mx-auto px-4 md:pl-4 md:pr-6 — its own container, asymmetric at md, deliberately not the 1360 one */
.integrations-inner { max-width: 1345px; margin: 0 auto; padding: 0 16px; }
/* text-center mb-5 */
.integrations-head { text-align: center; margin-bottom: 20px; }
/* p: text-[13px] text-gray-800 font-normal  (gray-800 -> ~78% white) */
.integrations-head p { font-size: 13px; font-weight: 400; color: rgba(var(--ink), 0.78); }
/* the line runs shorter on phones — see the mobile block at the end of this file */
.int-head-phone { display: none; }
/* grid grid-cols-3 md:grid-cols-4 lg:grid-cols-7 gap-3 */
.integrations-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
/* cell: relative flex items-center justify-center */
.int-cell { position: relative; display: flex; align-items: center; justify-content: center; }
/* last cell: hidden md:flex */
.int-cell.int-md { display: none; }
/* tile: bg-[#F3F1EC] border-[#E5E1D8]/30 h-[5.5rem] md:h-[6.25rem] px-3 flex w-full items-center justify-center rounded-md
   (tile -> white 5% over page; border -> white 9% hairline) */
.int-tile { position: relative; background: rgba(var(--ink), 0.05); border: 1px solid rgba(var(--ink), 0.09); height: 5.5rem; padding: 0 12px; display: flex; width: 100%; align-items: center; justify-content: center; border-radius: 6px; }
/* img: h-[3rem] md:h-[3.5rem] w-auto object-contain — TSeller's `grayscale` becomes
   grayscale+invert here: the dark-theme analogue that keeps each logo's interior
   detail (Takealot's "com", Shopify's S turn dark on their light shapes) instead
   of flattening to a silhouette. Same opacity on all seven. */
.int-tile img { height: 3rem; width: auto; object-fit: contain; filter: grayscale(1) invert(1); opacity: 0.9; }
/* Bobshop only: relative md:-top-[0.5px] */
.int-tile img.int-nudge { position: relative; }
/* Soon: absolute top-1 right-2 text-[10px] text-gray-500 font-normal  (gray-500 -> 45% white) */
.int-soon { position: absolute; top: 4px; right: 8px; font-size: 10px; font-weight: 400; color: rgba(var(--ink), 0.45); }
@media (min-width: 768px) {
  .integrations { margin: 72px 0 64px; padding: 64px 0; }                  /* md:pt-16 md:pb-16 + our offsets: 72 above, 64 lifting it off the foot */
  .integrations-inner { padding: 0 24px 0 16px; }                          /* md:pl-4 md:pr-6 */
  .integrations-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* md:grid-cols-4 */
  .int-cell.int-md { display: flex; }                                      /* md:flex */
  .int-tile { height: 6.25rem; }                                           /* md:h-[6.25rem] */
  .int-tile img { height: 3.5rem; }                                        /* md:h-[3.5rem] */
  .int-tile img.int-nudge { top: -0.5px; }                                 /* md:-top-[0.5px] */
}
@media (min-width: 1024px) {
  .integrations-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } /* lg:grid-cols-7 */
}

/* =========================================================
   Landing sections — TSeller's card system, 1:1 (Tailwind v4 → CSS).
   Mobile-first; sm = 640px, md = 768px, lg = 1024px. Each rule is annotated
   with the utility it stands in for. Colours map: page #FAF9F6 → --bg,
   card #F3F1EC → --panel, card border #E5E1D8/30 → --card-line, inner
   page-toned inner panel → --bg.
   ========================================================= */

/* <section class="relative py-8 md:py-12"> */
.block { position: relative; padding: 32px 0; background: var(--bg); }
/* h2: text-[25px] leading-[1.3] font-[450] text-gray-900 */
.h-section { font-size: 25px; line-height: 1.3; font-weight: 500; letter-spacing: 0; color: var(--fg); text-wrap: balance; }
/* mb-4 md:mb-8 */
.block-head { margin-bottom: 16px; }

/* Card: bg-[#F3F1EC] border border-[#E5E1D8]/30 rounded-lg  (shared with the contact page) */
.card { background: var(--panel); border: 1px solid var(--card-line); border-radius: 8px; }

/* "Get Started" link: inline-flex items-center gap-1 text-sm font-medium group;
   ChevronRight w-4 h-4 group-hover:translate-x-0.5 transition-transform.
   TSeller's gradient-blue label is our text colour. */
.more-link { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--fg); }
.more-link svg { width: 16px; height: 16px; flex: none; transition: transform 150ms var(--tw-ease); }
.more-link:hover svg { transform: translateX(2px); }


/* ---- Numbers: "Latest versions" row — grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3, cards p-6 ---- */
.stats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.stat { padding: 24px; }
/* number sits where their h3 (text-lg) + version badge go; label is their text-sm text-gray-600 */
.stat-num { display: block; font-size: 32px; line-height: 1.1; font-weight: 500; letter-spacing: -0.02em; color: var(--fg); font-variant-numeric: tabular-nums; }
.stat-label { display: block; margin-top: 10px; font-size: 14px; line-height: 1.625; color: var(--fg-60); }
/* the labels wrap where they like on desktop; on phones .stat-br forces every
   one of them onto two lines so the four cards match */
.stat-br { display: none; }

/* ---- About: showcase card — card p-3 md:p-4, grid md:grid-cols-10 gap-3 md:gap-5 items-center ---- */
.showcase { padding: 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: center; }
/* md:col-span-3 space-y-3; text: h3 25px/1.3, p text-base text-gray-500 leading-relaxed max-w-[280px], link pt-2 */
.showcase-copy { display: grid; gap: 12px; align-content: start; padding: 8px 8px 0; }
.showcase-copy p { font-size: 16px; line-height: 1.625; color: var(--fg-50); max-width: 280px; }
.showcase-copy .more-link { margin-top: 8px; justify-self: start; }
/* md:col-span-7; their 700px photo panel becomes a page-toned panel holding the flow diagram */
.showcase-visual { min-width: 0; }
/* Stacked, the heading always leads. */
@media (max-width: 767px) { .showcase-copy { order: -1; } }
/* the flow panel is a fixed stage */
.showcase-panel { position: relative; overflow: hidden; border-radius: 8px; background: var(--bg); border: 1px solid var(--card-line); }
.showcase-panel.flow { height: 620px; }

/* ---- Flow diagram: Brand → Block Seven → every marketplace ----
   One stretched SVG draws the connectors; nodes and chips are DOM elements
   placed at the same percentage coordinates (--x/--y), so they sit on the
   line ends at any panel size. */
/* --hub-mark is the artwork; --hub is the invisible cap disc that trims the
   lines, always 20px larger, so every line stops the same short distance from
   the logo's edge no matter how tall the panel gets. */
.flow { --chip: 56px; --hub-mark: 200px; --hub: 220px; }
.flow-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* lines draw in once the panel is revealed (pathLength="1" makes the dash maths unit-free) */
.flow-lines path { fill: none; stroke: rgba(var(--ink), 0.16); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.flow.in .flow-lines path { animation: flowDraw 1.1s var(--ease) forwards; }
.flow.in .flow-lines path:nth-child(2) { animation-delay: 0.35s; }
.flow.in .flow-lines path:nth-child(3) { animation-delay: 0.42s; }
.flow.in .flow-lines path:nth-child(4) { animation-delay: 0.49s; }
.flow.in .flow-lines path:nth-child(5) { animation-delay: 0.56s; }
.flow.in .flow-lines path:nth-child(6) { animation-delay: 0.63s; }
.flow.in .flow-lines path:nth-child(7) { animation-delay: 0.7s; }
.flow.in .flow-lines path:nth-child(8) { animation-delay: 0.77s; }
@keyframes flowDraw { to { stroke-dashoffset: 0; } }
/* pulses ride the lines; hidden until the lines are drawn */
.flow-pulses { opacity: 0; transition: opacity .6s var(--ease) 1.4s; }
.flow.in .flow-pulses { opacity: 1; }
.flow-pulses circle { fill: var(--aqua); filter: drop-shadow(0 0 6px rgba(var(--ink), 0.6)); }

/* nodes: centred on their coordinate; the caption hangs below without moving the centre */
.flow-node { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: grid; place-items: center; }
.flow-node-label { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 12px; font-size: 11px; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
/* Brand: just the caption, on a page-toned pad so the line starts after it */
.flow-brand .flow-node-label { position: static; transform: none; margin: 0; padding: 6px 10px; background: var(--bg); }
/* Block Seven: the hero's treatment of the same mark — large, tonal and sitting well
   back, revealed unevenly by the hero's three-blob mask so it reads as part of
   the background rather than a flat tint. Never animated.
   .flow-hub itself is an invisible page-toned disc, sized just outside the
   artwork, that trims every line to the logo's circular edge; the mark is a
   separate layer centred on it. */
.flow-hub { width: var(--hub); height: var(--hub); border-radius: 50%; background: var(--bg); }
.flow-hub-mark {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: var(--hub-mark); height: var(--hub-mark);
  display: grid; place-items: center; pointer-events: none;
}
.flow-hub-mark img {
  width: 100%; height: 100%; opacity: 0.26;
  /* same patchy mask as .hero-top-mark: three soft blobs whose union reveals
     the mark unevenly, so parts of it sit right back into the screen */
  -webkit-mask-image:
    radial-gradient(58% 62% at 36% 30%, #000 0%, rgba(0, 0, 0, 0.5) 55%, transparent 100%),
    radial-gradient(52% 56% at 72% 60%, #000 0%, rgba(0, 0, 0, 0.45) 50%, transparent 100%),
    radial-gradient(48% 44% at 50% 82%, #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 100%);
  mask-image:
    radial-gradient(58% 62% at 36% 30%, #000 0%, rgba(0, 0, 0, 0.5) 55%, transparent 100%),
    radial-gradient(52% 56% at 72% 60%, #000 0%, rgba(0, 0, 0, 0.45) 50%, transparent 100%),
    radial-gradient(48% 44% at 50% 82%, #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}


/* ---- Chips: TSeller's integration icon system, dark ----
   <div class="inline-flex items-center justify-center w-14 h-14 rounded-2xl {bg-[brand]/10}">
     <Icon class="w-10 h-10" />       ← icon box is 40×40 for every brand
   </div>
   The PNG keeps its per-brand intrinsic width/height (the <img> attributes) and is
   capped by max-width:100% / height:auto inside the 40px box, exactly as Tailwind's
   preflight does in TSeller. The per-brand tint is replaced by one neutral, opaque
   grey for every chip (the icons carry the colour), so the line ends hide behind it. */
/* chips run along the foot of the panel; the name hangs beneath without moving the centre */
.flow-chip { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; }
.chip {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--chip, 56px); height: var(--chip, 56px); border-radius: 16px;
  background: var(--chip-bg);
  border: 1px solid var(--chip-line);
}
.chip-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
/* WooCommerce and Shopify: plain wrapper, no flex — their PNGs are already centred */
.chip-icon-plain { display: block; }
.chip-icon img { max-width: 100%; height: auto; object-fit: contain; }
/* Leroy Merlin: object-contain scale-[1.06] */
.chip-icon img.chip-img-leroy { transform: scale(1.06); }
.flow-chip-name { position: absolute; top: 100%; margin-top: 8px; font-size: 12px; line-height: 16px; color: var(--fg-60); white-space: nowrap; }

/* ---- Services: "Platform capabilities" — grid md:grid-cols-3 gap-6, cards p-6 flex flex-col ---- */
.cards-3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.cap { padding: 24px; display: flex; flex-direction: column; scroll-margin-top: 80px; }
/* h3: text-lg font-[450] text-gray-900 */
.cap h3 { font-size: 18px; line-height: 28px; font-weight: 500; color: var(--fg); }
/* an icon chip above the title (integrations page) */
.cap .chip { margin-bottom: 18px; }
/* p: text-base text-gray-600 — no badge under it, so no bottom margin */
.cap p { margin: 4px 0 0; font-size: 16px; line-height: 24px; color: var(--fg-60); }

/* ---- Process + FAQ: "grid md:grid-cols-12 gap-8", title md:col-span-3, body md:col-span-7 space-y-3 ---- */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.split-head { min-width: 0; }
.split-head p { margin-top: 12px; font-size: 14px; line-height: 1.625; color: var(--fg-60); max-width: 320px; }
.split-body { min-width: 0; display: grid; gap: 12px; }

/* ---- Brands: "Reviews" — grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3; card pt-5 px-5 pb-3 md:h-[280px] flex flex-col ---- */
/* section pt-10 md:pt-16 pb-10 md:pb-16 */
.block-reviews { padding: 40px 0; }
/* Brand carousel: the track holds the eight marks twice and slides left by
   exactly half its width, so the loop is seamless. Every mark is a flat white
   silhouette (brightness(0) invert(1) forces one tone whatever the logo's own
   colour), at full strength rather than dimmed, so the row reads the way a
   trusted-by wall does. Cells are a fixed width, so spacing stays even however
   wide or narrow a mark is. */
.brand-wall {
  position: relative; overflow: hidden; margin-bottom: 56px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.brand-track { display: flex; align-items: center; width: max-content; animation: brandMarquee 44s linear infinite; }
@keyframes brandMarquee { to { transform: translateX(-50%); } }
.brand-logo { flex: none; width: 160px; height: 40px; display: flex; align-items: center; justify-content: center; }
.brand-logo img { max-height: 40px; max-width: 124px; width: auto; object-fit: contain; filter: brightness(0) invert(1); }
.reviews { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.review { padding: 20px 20px 12px; display: flex; flex-direction: column; }
/* p: text-sm text-gray-700 leading-relaxed mb-auto */
.review blockquote { font-size: 14px; line-height: 1.625; color: var(--fg-70); margin-bottom: auto; }
/* author row mt-6: text-sm font-medium + text-xs text-gray-500 */
.review figcaption { margin-top: 24px; padding-bottom: 8px; display: grid; }
.review-name { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--fg); }
.review-meta { font-size: 12px; line-height: 16px; color: var(--fg-50); }

/* ---- FAQ: lifted band — section pt-10 md:pt-16 pb-10 md:pb-16 mt-8 md:mt-12 bg-[#F3F1EC]; cards bg-[#ECEAE4] p-6 ---- */
.block-lift { background: var(--footer-bg); margin-top: 32px; padding: 40px 0; }
.block-lift .card { background: var(--panel-2); }
/* Answers are always visible — no toggle, no chevron. */
.faq-item { padding: 24px; }
/* h3: text-base font-[450] text-gray-900 */
.faq-item h3 { font-size: 16px; line-height: 24px; font-weight: 500; color: var(--fg); }
/* p: text-sm text-gray-600, mb-1 under the question */
.faq-item p { margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--fg-60); }
/* bare a{color:inherit} would hide it, so the one link in here is marked */
.faq-item a { color: var(--fg); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--line-strong); }
.faq-item a:hover { text-decoration-color: var(--fg); }

@media (min-width: 640px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }      /* sm:grid-cols-2 */
  .reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); }    /* sm:grid-cols-2 */
  .brand-logo { width: 200px; height: 44px; }
  .brand-logo img { max-height: 44px; max-width: 150px; }
}
@media (min-width: 768px) {
  .block { padding: 48px 0; }                                        /* md:py-12 */
  .block-head { margin-bottom: 32px; }                               /* md:mb-8 */
  .block-reviews, .block-lift { padding: 64px 0; }                   /* md:pt-16 md:pb-16 */
  .block-lift { margin-top: 48px; }                                  /* md:mt-12 */
  .showcase { padding: 16px; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 20px; }  /* md:p-4 md:grid-cols-10 md:gap-5 */
  .showcase-copy { grid-column: span 3; padding: 0 0 0 8px; }        /* md:col-span-3 */
  .showcase-visual { grid-column: span 7; }                          /* md:col-span-7 */
  .showcase-panel.flow { height: 700px; }
  .cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }     /* md:grid-cols-3 */
  .split { grid-template-columns: repeat(12, minmax(0, 1fr)); }      /* md:grid-cols-12 */
  .split-head { grid-column: span 3; }                               /* md:col-span-3 */
  .split-body { grid-column: span 7; }                               /* md:col-span-7 */
  .reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); }     /* md:grid-cols-3 */
  /* min-height, not height: these are real quotes and the longest of them
     overflows a fixed 280px card. The grid stretches them level anyway. */
  .review { min-height: 280px; }                                     /* was md:h-[280px] */
  .brand-wall { margin-bottom: 72px; }
  .brand-logo { width: 230px; }
}
@media (min-width: 1024px) {
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }      /* lg:grid-cols-4 */
}

/* ---- Sales chart card (reporting panel) ----
   TSeller's multi-platform TOTAL SALES card, one for one, in the dark palette:
   card p-6 rounded-2xl; header of total / period selector / mark; legend of
   toggle buttons; a 420px plot. The bars keep the platform colours — the one
   saturated thing in the card, because the colour is the data. Sizes are the
   reference's Tailwind values. */
.chart-panel { padding: 24px; overflow: visible; }
.mpsc { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 24px; outline: none !important; }
.mpsc *:focus, .mpsc *:focus-visible { outline: none !important; }
/* header: flex-col, lg:flex-row items-center justify-between, mb-6 */
.mpsc-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; flex-shrink: 0; }
/* the two side columns share one width so the selector sits optically centred (their w-80 pair) */
.mpsc-total, .mpsc-mark { flex: 1 1 0; min-width: 0; }
.mpsc-label { display: block; font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(var(--ink), 0.55); }
/* text-3xl font-bold, white → white/70 gradient through bg-clip-text, lineHeight 44px */
.mpsc-value { display: inline-block; min-width: 200px; font-size: 30px; line-height: 44px; font-weight: 700; letter-spacing: -0.02em; background: linear-gradient(90deg, rgb(var(--ink)), rgba(var(--ink), 0.7)); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* selector: bg-gray-100 rounded-lg p-1 → white/7 track */
.mpsc-periods { display: inline-flex; align-items: stretch; align-self: flex-start; background: rgba(var(--ink), 0.07); border-radius: 8px; padding: 4px; }
/* px-6 py-2.5 text-sm font-medium rounded-md min-w-[120px] */
.mpsc-period { padding: 10px 20px; min-width: 96px; border-radius: 6px; font-size: 14px; line-height: 20px; font-weight: 500; color: rgba(var(--ink), 0.65); white-space: nowrap; transition: background 200ms var(--tw-ease), color 200ms var(--tw-ease); }
.mpsc-period.is-active { background: rgba(var(--ink), 0.14); color: rgb(var(--ink)); }
/* w-px bg-gray-300 self-stretch my-2, opacity-0 when a neighbour is selected */
.mpsc-divider { width: 1px; margin: 8px 0; background: rgba(var(--ink), 0.15); transition: opacity 200ms var(--tw-ease); }
.mpsc-divider.is-hidden { opacity: 0; }
/* the Block Seven mark sits where the reference has its switch: same 24px height, right-aligned */
.mpsc-mark { display: flex; justify-content: flex-end; }
.mpsc-mark img { width: 28px; height: 28px; opacity: 0.9; }
/* legend: flex justify-center gap-6 mb-4 pl-7 (the 28px centres it on the plot, not the card) */
.mpsc-legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px; margin-bottom: 16px; padding-left: 28px; }
.mpsc-legend-item { display: inline-flex; align-items: center; gap: 8px; transition: opacity 150ms var(--tw-ease); }
.mpsc-legend-item.is-off { opacity: 0.4; }
.mpsc-swatch { width: 12px; height: 12px; border-radius: 2px; flex: none; }
.mpsc-legend-item > span:last-child { font-size: 12px; line-height: 16px; color: rgba(var(--ink), 0.6); }
/* full name on desktop; the three-letter code (TAL, AMZ, SHP, MKR, LER) takes over on phones */
.mpsc-name-short { display: none; }
/* plot: 420px, overflow visible so the tooltip can leave the card */
.mpsc-chart { position: relative; height: 420px; overflow: visible; -webkit-user-select: none; user-select: none; }
.mpsc-svg { display: block; overflow: visible; color: rgb(var(--ink)); }   /* the grid lines are currentColor */
.mpsc-tick { font-family: var(--font); font-size: 12px; fill: rgba(var(--ink), 0.55); }
/* tooltip: a panel lighter than the card, floating above it; pointer-events none so it never fights the hover */
.mpsc-tip { position: absolute; z-index: 5; min-width: 140px; padding: 8px 10px; border-radius: 6px; background: var(--tip-bg); border: 1px solid rgba(var(--ink), 0.1); box-shadow: var(--tip-shadow); pointer-events: none; will-change: transform, opacity; }
.mpsc-tip-date { font-size: 12px; line-height: 16px; font-weight: 600; color: rgb(var(--ink)); margin-bottom: 6px; }
.mpsc-tip-rows { display: grid; gap: 4px; }
.mpsc-tip-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 12px; line-height: 16px; color: rgba(var(--ink), 0.85); }
.mpsc-tip-val { font-weight: 500; }
.mpsc-tip-total { padding-top: 5px; border-top: 1px solid rgba(var(--ink), 0.1); color: rgb(var(--ink)); }
.mpsc-tip-total span:first-child { font-weight: 600; }
.mpsc-tip-total .mpsc-tip-val { font-weight: 700; }

@media (min-width: 768px) {
  .mpsc-head { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
  .mpsc-periods { align-self: auto; }
}
@media (max-width: 640px) {
  .chart-panel { padding: 12px; }
  .mpsc { padding: 16px; border-radius: 12px; }
  .mpsc-value { font-size: 26px; min-width: 0; }
  .mpsc-period { min-width: 0; padding: 8px 12px; font-size: 13px; }
  .mpsc-chart { height: 300px; }
  .mpsc-legend { gap: 14px; padding-left: 20px; }
}

/* ---------- Spline hero (integrations page) ----------
   The React demo's Card + Spotlight + SplineScene, rebuilt on the showcase card
   the homepage uses: copy in the first three columns, the scene in a page-toned
   panel in the last seven. The scene's camera crops the figure at the shins and
   that is baked into the render, so the canvas is anchored to the foot of the
   panel with no padding — he stands on its bottom edge instead of floating. */
.showcase-panel.spline-stage { height: 560px; }
/* the second line greys off, as the homepage hero headline does */
.showcase-copy .h-section em { font-style: normal; color: var(--fg-60); }
/* one line of copy per breakpoint (the phone keeps the longer original) */
.hero-copy-phone { display: none; }
.spline-canvas { position: absolute; left: 0; bottom: 0; display: block; width: 100%; height: 100%; }
/* Suspense fallback: a centred spinner until the scene is in */
.spline-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.spline-stage.is-ready .spline-fallback { display: none; }
.spline-fallback p { font-size: 12px; line-height: 1.5; color: var(--fg-50); text-align: center; max-width: 280px; padding: 0 16px; }
.loader { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(var(--ink), 0.15); border-top-color: rgba(var(--ink), 0.7); animation: loaderSpin 0.8s linear infinite; }
@keyframes loaderSpin { to { transform: rotate(360deg); } }

/* The Spotlight, freed from the card: fixed to the viewport so it follows the
   pointer across the whole page. Above the sticky header (100) so the light
   carries over it unbroken, below the mobile menu (200) so an open menu is
   never washed. Kept soft so copy under it stays legible. */
.spotlight { position: fixed; z-index: 150; left: 0; top: 0; width: 200px; height: 200px; border-radius: 50%; pointer-events: none; opacity: 0; filter: blur(24px); transition: opacity 200ms var(--tw-ease);
  background: radial-gradient(circle at center, #fafafa, #f4f4f5, #e4e4e7, transparent 80%); }
.spotlight.is-on { opacity: 0.22; }
/* pointer devices on desktop only: no cursor to follow on a phone or tablet */
@media (hover: none), (pointer: coarse), (max-width: 767px) { .spotlight { display: none; } }
/* Phones and small tablets: the copy stands alone. The scene is hidden and,
   more to the point, never downloaded — js/spline-hero.js checks the same
   breakpoint before importing the runtime, so a phone skips ~3MB. */
@media (max-width: 767px) {
  .showcase-panel.spline-stage { display: none; }
  /* Phones keep the hero exactly as it was before the card: no card chrome,
     the homepage headline scale, full-width copy, no link. Only desktop moved
     to the showcase card. */
  #spline-hero { background: none; border: 0; padding: 0; }
  #spline-hero .showcase-copy { padding: 0; gap: 0; }
  #spline-hero .h-section { font-size: clamp(28px, 7.6vw, 36px); font-weight: 500; line-height: 1.14; letter-spacing: -0.03em; }
  #spline-hero .showcase-copy p { margin-top: 22px; max-width: none; font-size: 15px; line-height: 1.5; letter-spacing: -0.01em; color: var(--fg); }
  #spline-hero .more-link { display: none; }
  .hero-copy-desktop { display: none; }
  .hero-copy-phone { display: inline; }
}

/* ---------- Integration wall (integrations page) ----------
   The hero strip's tile, laid out five across like a logo wall: page-toned
   tile, hairline border, 6px radius, the mark rendered as a white silhouette
   with a caption beneath. Four across, so sixteen tiles make four even rows;
   flex-wrap rather than grid so any short row centres. */
.intg-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.intg-tile { flex: 0 0 calc((100% - 36px) / 4); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 6.75rem; padding: 12px; background: rgba(var(--ink), 0.05); border: 1px solid rgba(var(--ink), 0.09); border-radius: 6px; }
.intg-logo { display: flex; align-items: center; justify-content: center; height: 2.5rem; }
/* dark-mode variants (images/platforms): real brand colour, with black and navy turned white */
.intg-logo img { max-height: 2.25rem; max-width: 152px; width: auto; object-fit: contain; }
.intg-cap { font-size: 11px; line-height: 14px; letter-spacing: 0.04em; color: rgba(var(--ink), 0.45); }
@media (max-width: 1024px) { .intg-tile { flex-basis: calc((100% - 24px) / 3); } }
@media (max-width: 640px) { .intg-grid { gap: 8px; } .intg-tile { flex-basis: calc((100% - 8px) / 2); height: 6rem; } .intg-logo img { max-height: 2.125rem; max-width: 100px; } }

/* ---------- CTA band + footer ----------
   1:1 translation of the TSeller reference (Tailwind v4). Each rule is
   annotated with the utility it stands in for. Mobile-first; md = 768px. */

/* max-w-[1360px] mx-auto px-6 — shared by the band and the footer */
.wrap-1360 { max-width: 1360px; margin: 0 auto; padding: 0 24px; }

/* <section class="relative pt-16 pb-12 md:pt-34 md:pb-22 bg-page scroll-mt-20"> */
.cta { position: relative; padding: 64px 0 48px; background: var(--bg); scroll-margin-top: 80px; }
/* text-center */
.cta-center { text-align: center; }
/* h2: text-5xl md:text-6xl font-[500] text-gray-900 mb-3 tracking-tight */
.cta-title { font-size: 48px; line-height: 1; font-weight: 500; color: var(--fg); margin: 0 0 12px; letter-spacing: -0.025em; }
.cta-title em { font-style: normal; color: inherit; }
/* p: text-lg md:text-xl text-gray-600 mb-6 max-w-md mx-auto tracking-tight — a shorter line on phones */
.cta-sub-phone { display: none; }
.cta-sub { font-size: 18px; line-height: 28px; color: var(--fg-60); margin: 0 auto 24px; max-width: 28rem; letter-spacing: -0.025em; }
/* flex justify-center items-center */
.cta-row { display: flex; justify-content: center; align-items: center; }
/* a: inline-flex items-center gap-2 px-7 py-3 bg-gray-900 text-white text-base rounded-full font-medium hover:opacity-90 transition-opacity group
   (fill/label inverted for dark: light pill, dark label) */
.cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 28px; background: var(--fg); color: var(--bg);
  font-size: 16px; line-height: 24px; font-weight: 500; border-radius: 9999px;
  transition: opacity 150ms var(--tw-ease);
}
.cta-btn:hover { opacity: 0.9; }
/* ArrowRight: w-5 h-5 group-hover:translate-x-0.5 transition-transform */
.cta-btn svg { width: 20px; height: 20px; transition: transform 150ms var(--tw-ease); }
.cta-btn:hover svg { transform: translateX(2px); }

/* <footer class="bg-footer text-gray-900 pt-10 md:pt-16 pb-6 md:pb-8 mt-8 md:mt-12"> */
.site-footer { background: var(--footer-bg); color: var(--fg); padding: 40px 0 24px; margin-top: 32px; }
/* grid grid-cols-2 md:grid-cols-5 gap-x-8 gap-y-12 md:gap-20 w-full mb-12 md:mb-20 */
.footer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 48px; width: 100%; margin-bottom: 48px; }
/* h4: text-gray-500 mb-3 text-sm */
.footer-grid h4 { color: var(--fg-50); margin: 0 0 12px; font-size: 14px; line-height: 20px; font-weight: 400; }
/* ul: space-y-1.5 */
.footer-grid li + li { margin-top: 6px; }
/* internal link: text-gray-900 hover:text-gray-600 transition-colors text-sm */
.footer-link { color: var(--fg); font-size: 14px; line-height: 20px; transition: color 150ms var(--tw-ease); }
.footer-link:hover { color: var(--fg-60); }
/* external link: + group inline-flex items-center gap-1 */
.footer-link.ext { display: inline-flex; align-items: center; gap: 4px; }
/* ArrowUpRight: w-3 h-3 opacity-0 group-hover:opacity-100 transition-all hidden md:inline */
.footer-link.ext svg { width: 12px; height: 12px; opacity: 0; transition: all 150ms var(--tw-ease); display: none; }
.footer-link.ext:hover svg { opacity: 1; }
/* flex flex-col md:flex-row items-center */
.footer-bottom { display: flex; flex-direction: column; align-items: center; }
/* text-sm text-gray-500 flex-1 hover:text-gray-700 transition-colors cursor-pointer text-center md:text-left */
.footer-copy { font-size: 14px; line-height: 20px; color: var(--fg-50); flex: 1 1 0%; transition: color 150ms var(--tw-ease); cursor: pointer; text-align: center; }
.footer-copy:hover { color: var(--fg-70); }
/* span.tracking-[-0.02em] > span.text-[0.9rem] */
.footer-copy .tm { letter-spacing: -0.02em; }
.footer-copy .c { font-size: 0.9rem; }
/* hidden md:flex gap-6 text-sm pr-[130px] */
.footer-legal { display: none; gap: 24px; font-size: 14px; line-height: 20px; padding-right: 130px; }
/* text-gray-500 hover:text-gray-700 transition-colors */
.footer-legal a { color: var(--fg-50); transition: color 150ms var(--tw-ease); }
.footer-legal a:hover { color: var(--fg-70); }

@media (min-width: 768px) {
  .cta { padding: 8.5rem 0 5.5rem; }                 /* md:pt-34 md:pb-22 */
  .cta-title { font-size: 60px; }                    /* md:text-6xl */
  .cta-sub { font-size: 20px; line-height: 28px; }   /* md:text-xl */
  .site-footer { padding: 64px 0 32px; margin-top: 48px; }   /* md:pt-16 md:pb-8 md:mt-12 */
  .footer-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 48px; margin-bottom: 80px; }  /* md:grid-cols-6 md:gap-12 md:mb-20 — was 5 cols / 80px; a sixth (TSeller legal) column was added 9 Sep 2026 */
  .footer-link.ext svg { display: inline; }          /* md:inline */
  .footer-bottom { flex-direction: row; }            /* md:flex-row */
  .footer-copy { text-align: left; }                 /* md:text-left */
  .footer-legal { display: flex; }                   /* md:flex */
}

/* ---------- Legal pages ----------
   TSeller's privacy / terms shell: 12-col grid, title in cols 1-3, copy in
   cols 4-9; hairline between sections. The disclaimer uses its narrower
   single-column shell. Class names mirror the Tailwind they came from. */
.legal { padding: 112px 0 96px; }
.legal-container { max-width: 1360px; margin: 0 auto; padding: 0 24px; }
.legal-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; }
.legal-title { grid-column: span 3; }
.legal-title h1 { font-size: 25px; line-height: 1.3; font-weight: 500; color: var(--text); margin: 0 0 6px; }
.legal-title p { font-size: 16px; color: var(--muted); }
.legal-body { grid-column: span 6; color: var(--text-2); }
.legal-body > section { padding-bottom: 24px; border-bottom: 1px solid var(--line); scroll-margin-top: 80px; }
.legal-body > section + section { margin-top: 24px; }
.legal-body > section:last-child { border-bottom: 0; }
.legal-body h2 { font-size: 24px; font-weight: 600; line-height: 1.33; letter-spacing: -0.025em; color: var(--text); margin: 0 0 12px; }
.legal-body h3 { font-size: 18px; font-weight: 600; line-height: 1.55; color: var(--text); margin: 16px 0 8px; }
.legal-body h4 { font-size: 16px; font-weight: 600; color: var(--text); margin: 12px 0 8px; }
.legal-body p { font-size: 16px; line-height: 1.5; color: var(--legal-copy); }
.legal-body p + p { margin-top: 12px; }
.legal-body p + ul, .legal-body p + h3 { margin-top: 12px; }
.legal-body strong { font-weight: 600; color: var(--text); }
.legal-body ul { display: grid; gap: 8px; }
.legal-body ul + h3, .legal-body ul + h4, .legal-body ul + p { margin-top: 16px; }
.legal-body li { display: flex; align-items: center; font-size: 16px; line-height: 1.5; color: var(--legal-copy); }
.legal-body li::before { content: "■"; flex-shrink: 0; margin-right: 16px; font-size: 12px; color: var(--muted); opacity: 0.5; transform: scale(0.75); }
/* no underlines anywhere in the legal copy — links read by colour alone */
.legal-body a { color: var(--text); text-decoration: none; transition: color .15s; }
.legal-body a:hover { color: var(--text-2); }
/* disclaimer variant */
.legal-narrow { max-width: 896px; margin: 0 auto; padding: 64px 24px; }
.legal-narrow .legal-title { margin-bottom: 64px; }
.legal-narrow .legal-title h1 { font-size: 48px; line-height: 1; font-weight: 400; margin: 0 0 12px; }
.legal-narrow .legal-body > section { padding-bottom: 0; border-bottom: 0; }
.legal-narrow .legal-body > section + section { margin-top: 48px; }
.legal-narrow .legal-body h2 { margin-bottom: 24px; }
.legal-narrow .legal-body p { line-height: 1.625; }
.legal-narrow .legal-body p + p { margin-top: 16px; }
.contact-box { margin-top: 24px; border: 1px solid var(--line); border-radius: 8px; padding: 32px; background: var(--panel); display: grid; gap: 24px; }
.contact-box p { font-size: 12px; font-weight: 600; letter-spacing: 0.025em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.contact-box a { font-size: 16px; font-weight: 500; color: var(--text); text-decoration: none; }
.contact-box a:hover { color: var(--text-2); }
@media (max-width: 768px) {
  .legal-grid { grid-template-columns: 1fr; }
  .legal-title, .legal-body { grid-column: auto; }
}

/* ---------- Not found ---------- */
.nf { padding: 160px 0 112px; max-width: 560px; }
.nf h1 { font-size: 36px; font-weight: 400; line-height: 1.2; letter-spacing: -0.02em; color: var(--fg); margin: 0 0 12px; }
.nf p { font-size: 16px; line-height: 1.625; color: var(--fg-60); }
.nf .more-link { margin-top: 24px; }

/* ---------- Contact page ----------
   cursor.com/contact-sales, measured 1:1 and moved into our tokens. Two equal
   columns (30px gap) inside the shared container. Left: 36px/400 headline, one
   client story in a card, a 4-column logo grid. Right: the form in a card that
   sticks while the left column scrolls. Inputs are card-toned, 44px tall,
   4px radius, 10% border. */
/* Equal air above and below: 160px from the header to the headline, and 160px
   from the last row to the footer. The footer carries its own top margin
   (48px from 768px up, 32px below), so that is taken off the bottom padding
   to keep the two visible gaps identical. */
.contact-page { padding: 160px 0 112px; }
.contact-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; align-items: start; }
.contact-lead { min-width: 0; }
/* h1.type-lg: 36px / 43.2px, weight 400, tracking -0.02em; header mb-v1.5 (33.6px).
   Shared with the integrations page as .page-title. */
.contact-title, .page-title { font-size: 36px; font-weight: 400; line-height: 1.2; letter-spacing: -0.02em; color: var(--fg); margin: 0 0 34px; text-wrap: balance; }
/* Same white/grey split as the hero headline. */
.contact-title em, .page-title em { font-style: normal; color: var(--fg-60); }
/* page head: the first block of an inner page, 160px under the header like the contact page */
.page-head { padding-top: 160px; padding-bottom: 8px; }

/* Quote card: p-g1.5 (15px → 16px on our grid) */
.contact-quote { padding: 16px; }
.contact-quote blockquote p { font-size: 16px; line-height: 24px; color: var(--fg); }
/* mt-v2: 34px above the attribution; name over role, no portrait, no link */
.contact-quote-by { display: grid; margin-top: 34px; line-height: 21px; }
.contact-quote-name { font-size: 16px; color: var(--fg); }
.contact-quote-role { font-size: 14px; color: var(--fg-60); }

/* grid gap-g1 grid-cols-4, 22px below the card; cells md:h-[6.25rem], logos md:h-[2.5rem] */
.contact-logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.contact-logo { display: flex; align-items: center; justify-content: center; height: 6.25rem; padding: 0 8px; }
/* Same treatment as the hero strip so the marks read as one set. */
.contact-logo img { height: 2.5rem; width: auto; object-fit: contain; filter: grayscale(1) invert(1); opacity: 0.9; }

/* Form card: Cursor's is p-g2 (20px) with 22px between groups; ours is padded
   deeper and spaced wider so the card stands taller. lg:sticky under the
   header + 34px. */
.contact-formwrap { min-width: 0; position: sticky; top: calc(var(--header-h) + 34px); }
.contact-card { padding: 32px 28px 36px; }
/* h2.type-md-lg: 26px / 32.5px, tracking -0.0125em, weight 400 */
.contact-card-title { font-size: 26px; font-weight: 400; line-height: 1.25; letter-spacing: -0.0125em; color: var(--fg); margin: 0 0 28px; text-wrap: balance; }

.cs-field { margin-bottom: 26px; }
.cs-field:last-child { margin-bottom: 0; }
.cs-step1 > .cs-field:last-child, .cs-step2 > .cs-field:last-child { margin-bottom: 26px; }
/* label.type-sm mb-v4/12: 14px / 21px, 7.5px below */
.cs-field label { display: block; font-size: 14px; line-height: 21px; letter-spacing: 0.01em; color: var(--fg); margin-bottom: 7px; }
.cs-field .req { margin-left: 2px; color: var(--fg-60); }
/* input: h-11 rounded-xs border bg-theme-card-hex px-2.5 — 44px, 4px, card tone, 10% border */
.cs-field input, .cs-field select, .cs-field textarea {
  display: block; width: 100%; height: 44px; padding: 9px 10px;
  font-size: 16px; line-height: 24px; color: var(--fg);
  background: var(--panel); border: 1px solid rgba(var(--ink), 0.1); border-radius: 4px;
  -webkit-appearance: none; appearance: none; transition: border-color 150ms var(--tw-ease);
}
.cs-field textarea { height: auto; min-height: 120px; resize: vertical; }
.cs-field input::placeholder, .cs-field textarea::placeholder { color: rgba(var(--fg-rgb), 0.6); }
.cs-field input:focus, .cs-field select:focus, .cs-field textarea:focus { outline: none; border-color: rgba(var(--ink), 0.4); }
/* select: pr-8 with a chevron on the right, placeholder option at 60% */
.cs-select { position: relative; }
.cs-select select { padding-right: 32px; cursor: pointer; }
.cs-select select:invalid, .cs-select select option[value=""] { color: rgba(var(--fg-rgb), 0.6); }
.cs-select select option { color: var(--fg); background: var(--panel); }
.cs-select::after { content: ""; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; margin-top: -5px; border-right: 1.5px solid var(--fg-60); border-bottom: 1.5px solid var(--fg-60); transform: rotate(45deg); pointer-events: none; }
/* mt-1 text-sm text-red-500 — shown only once the field fails validation */
.cs-error { display: none; margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--err); }
.cs-field.invalid .cs-error { display: block; }
.cs-field.invalid input, .cs-field.invalid select, .cs-field.invalid textarea { border-color: rgba(var(--err-rgb), 0.6); }
/* Step two (name, company, message) opens after Continue. */
.cs-step2 { display: none; }
.cs-form.is-step2 .cs-step2 { display: block; }
/* flex items-center gap-6 */
.cs-foot { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding-top: 14px; }
/* Same recipe as the closing band's "Get in touch" (.cta-btn) so the two read
   as one button: 16px/24px label, 12px 28px padding, 8px gap, 20px arrow that
   slides 2px on hover, icon and label centred on the same line. */
.cs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 28px; border: 0; border-radius: 9999px; background: var(--fg); color: var(--bg); font-size: 16px; line-height: 24px; font-weight: 500; transition: opacity 150ms var(--tw-ease); }
.cs-btn:hover { opacity: 0.9; }
.cs-btn:disabled { opacity: 0.6; cursor: default; }
.cs-btn svg { width: 20px; height: 20px; flex: none; transition: transform 150ms var(--tw-ease); }
.cs-btn:hover svg { transform: translateX(2px); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-status { font-size: 14px; line-height: 20px; color: var(--fg-60); }
.form-status.ok { color: var(--fg); }
.form-status.err { color: var(--err); }

@media (max-width: 1024px) {
  /* Cursor hides the left column below lg; we keep it, stacked under the form:
     title, form, story, logos. display:contents lets the grid reorder them. */
  /* 96px visible above and below (footer margin is 48px here) */
  .contact-page { padding: 96px 0 48px; }
  .contact-cols { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .contact-lead { display: contents; }
  .contact-title { order: 1; margin-bottom: 0; }
  .contact-formwrap { order: 2; position: static; }
  .contact-quote { order: 3; margin-top: 12px; }
  .contact-logos { order: 4; margin-top: 0; }
}
@media (max-width: 767px) {
  /* footer margin drops to 32px below 768px, so the bottom pad rises to match */
  .contact-page { padding-bottom: 64px; }
  .nf { padding: 96px 0 64px; }
}
@media (max-width: 640px) {
  .contact-title { font-size: 30px; }
  .contact-card-title { font-size: 24px; }
  .contact-logo { height: 4rem; }
  .contact-logo img { height: 2rem; }
  .contact-card { padding: 28px 20px 32px; }
  .cs-btn { width: 100%; }
}

/* ---------- Motion ----------
   Reveal is used by the hero and the closing band only; the sections between
   them are static, like TSeller's. */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
/* line-by-line headline reveal (hero, closing band) */
.cta-title .l, .hero-top-title .l { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.cta-title .l > span, .hero-top-title .l > span { display: block; transform: translateY(112%); transition: transform 1s var(--ease); }
.reveal.in .l > span { transform: none; }
.reveal.in .l:nth-child(2) > span { transition-delay: 0.1s; }
.reveal.in .l:nth-child(3) > span { transition-delay: 0.2s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .cta-title .l > span, .hero-top-title .l > span { transform: none; transition: none; }
  .flow-pulses { display: none; }
  /* the carousel stops sliding and becomes a centred, wrapping row */
  .brand-wall { -webkit-mask-image: none; mask-image: none; overflow: visible; }
  .brand-track { flex-wrap: wrap; justify-content: center; width: auto; row-gap: 24px; }
  .brand-logo[aria-hidden="true"] { display: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
}

/* ---------- Responsive: header / nav ---------- */
@media (max-width: 1180px) {
  .nav-list { gap: 22px; }
  .nav-list a { font-size: 13.5px; }
  /* the visual column is too narrow for seven chip names in a row */
  .flow-chip-name { display: none; }
}

@media (max-width: 1024px) {
  :root { --header-h: 56px; }
  .nav-toggle { display: flex; }
  .brand img { height: 30px; }
  /* One pill + burger on small screens, TSeller's pattern. */
  .header-actions .header-cta:not(.is-primary) { display: none; }
  .header-actions { gap: 12px; }
  /* the desktop nav simply goes away; the burger opens the overlay instead */
  .nav { display: none; }
}

@media (max-width: 640px) {
  /* Content and footer/CTA share one gutter at every width, so the logo,
     every section label and the footer columns sit on one line. */
  .container, .wrap-1360, .legal-container { padding-inline: 16px; }
  /* smaller nodes so seven chips still fit the column; names drop away */
  .showcase-panel.flow { height: 520px; }
  .flow { --chip: 40px; --hub-mark: 132px; --hub: 148px; }
  .chip { border-radius: 12px; }
  .chip-icon { width: 28px; height: 28px; }
  .flow-chip-name { display: none; }
  .flow-node-label { font-size: 10px; margin-top: 8px; }
}

/* =========================================================
   Mobile system (≤640px)
   One place for every phone decision. The desktop rules above stay as they
   are; these override them, last wins. Principles: 16px gutters everywhere,
   one type scale (22px section headings, 15px body, 13px captions), cards
   padded 20px, sections 40px apart, stages sized to content, and nothing
   layered over anything else.
   ========================================================= */
@media (max-width: 640px) {
  body { font-size: 15px; }
  /* rhythm */
  .block { padding: 40px 0; }
  .block-head { margin-bottom: 16px; }
  .h-section { font-size: 22px; line-height: 1.25; }
  .block-reviews, .block-lift { padding: 48px 0; }
  .block-lift { margin-top: 24px; }

  /* hero: generous room above and below the mark; from the buttons down to
     the strip is 80px, the same gap every section on the page has (40 + 40) */
  .hero-lines-desktop { display: none; }
  .hero-lines-phone { display: block; }
  .hero-top-mark { margin-top: 112px; }
  .hero-top-grid { padding-top: 96px; padding-bottom: 40px; }
  .integrations { margin-top: 0; padding: 40px 0; }
  .integrations-inner { padding: 0 16px; }
  .integrations-head { margin-bottom: 16px; }
  .int-head-desktop { display: none; }
  .int-head-phone { display: inline; }
  .integrations-grid { gap: 8px; }
  .int-tile { height: 4.75rem; }
  .int-tile img { height: 2.5rem; }

  /* numbers: two across instead of a long single column */
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat { padding: 18px 16px; }
  .stat-num { font-size: 26px; }
  .stat-label { margin-top: 8px; font-size: 13px; }
  .stat-br { display: inline; }
  /* one button in the hero — the outline one; "Get in touch" is a tap away in
     the header pill and again in the closing band */
  .hero-top-actions .pill-light { display: none; }

  /* showcase cards: heading first, then the stage */
  .showcase { padding: 10px; gap: 14px; }
  .showcase-copy { padding: 12px 8px 4px; gap: 10px; }
  .showcase-copy p { font-size: 15px; max-width: none; }
  .showcase-copy .more-link { margin-top: 4px; }

  /* flow: a shorter stage, smaller chips with real gaps between them */
  .showcase-panel.flow { height: 460px; }
  .flow { --chip: 36px; --hub-mark: 120px; --hub: 136px; }
  .chip { border-radius: 10px; }
  .chip-icon { width: 26px; height: 26px; }
  .flow-node-label { font-size: 10px; }

  /* services: one column, tighter cards */
  .cards-3 { gap: 12px; }
  .cap { padding: 20px; }
  .cap h3 { font-size: 17px; line-height: 24px; }
  .cap p { font-size: 15px; line-height: 22px; }

  /* sales chart: total and mark on one line, the selector full width beneath,
     three-letter platform names, a shorter plot */
  .chart-panel { padding: 10px; }
  .mpsc { padding: 16px; border-radius: 12px; }
  .mpsc-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px 12px; margin-bottom: 16px; }
  .mpsc-total { grid-column: 1; grid-row: 1; }
  .mpsc-mark { grid-column: 2; grid-row: 1; }
  .mpsc-mark img { width: 24px; height: 24px; }
  .mpsc-periods { grid-column: 1 / -1; grid-row: 2; display: flex; width: 100%; }
  .mpsc-period { flex: 1 1 0; min-width: 0; padding: 8px 6px; font-size: 13px; text-align: center; }
  .mpsc-label { font-size: 12px; }
  .mpsc-value { font-size: 26px; line-height: 36px; min-width: 0; }
  .mpsc-legend { gap: 10px 14px; margin-bottom: 12px; padding-left: 20px; }
  .mpsc-legend-item > span:last-child { font-size: 12px; }
  .mpsc-legend-item .mpsc-name-full, .mpsc-tip-row .mpsc-name-full { display: none; }
  .mpsc-legend-item .mpsc-name-short, .mpsc-tip-row .mpsc-name-short { display: inline; }
  .mpsc-chart { height: 280px; }
  .mpsc-tick { font-size: 11px; }
  .mpsc-tip { min-width: 124px; }

  /* brands and reviews */
  .brand-wall { margin-bottom: 40px; }
  .review { padding: 18px 18px 12px; }
  .review blockquote { font-size: 14px; }

  /* faq */
  .faq-item { padding: 18px 16px; }
  .faq-item h3 { font-size: 15px; line-height: 22px; }
  .faq-item p { font-size: 14px; }

  .page-head { padding-top: 96px; }
  .page-title { font-size: 30px; }
  /* legal pages */
  .legal { padding: 64px 0 56px; }
  .legal-narrow { padding: 48px 16px; }
  .legal-narrow .legal-title { margin-bottom: 40px; }
  .legal-narrow .legal-title h1 { font-size: 36px; }

  /* closing band */
  .cta { padding: 56px 0 40px; }
  /* Scales with the viewport so each written line stays on one visual line.
     The longer of the two, "the heavy lifting?", measures ~8.8em wide; at the
     cap of 34px that is ~300px, inside the narrowest phone's 288px only
     because the clamp has already stepped the size down by then. */
  .cta-title { font-size: clamp(28px, 8.6vw, 34px); line-height: 1.05; }
  .cta-sub { font-size: 16px; line-height: 24px; margin-bottom: 20px; }
  .cta-sub-desktop { display: none; }
  .cta-sub-phone { display: inline; }
  .cta-btn { padding: 12px 24px; font-size: 15px; }
}

/* ---------- Call-me modal ----------
   Opened by any [data-action="call-me"] — the header pill on every page.
   Built once in main.js and appended to <body>, like the mobile menu, so
   every page shares one definition and none can drift. A scrim over the
   page with the form in the contact card's recipe (same inputs, same
   button) centred on it; on phones it becomes a sheet at the foot of the
   screen. Fades over 200ms like the mobile menu; Escape, the X and a tap
   on the scrim all close it. Sits above the mobile menu (200). */
.callme { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--scrim); opacity: 0; transition: opacity 200ms var(--tw-ease); }
.callme.is-open { opacity: 1; }
.callme[hidden] { display: none; }
.callme-card { position: relative; width: 100%; max-width: 440px; padding: 32px 28px 36px; transform: translateY(8px); transition: transform 200ms var(--tw-ease); }
.callme.is-open .callme-card { transform: none; }
/* the same close glyph as the mobile menu, at the card's scale */
.callme-close { position: absolute; top: 14px; right: 14px; display: inline-flex; padding: 6px; color: rgba(var(--ink), 0.55); transition: color 150ms var(--tw-ease); }
.callme-close:hover { color: var(--fg); }
.callme-close svg { width: 22px; height: 22px; }
/* h2 as .contact-card-title, with room for the close button */
.callme-title { font-size: 26px; font-weight: 400; line-height: 1.25; letter-spacing: -0.0125em; color: var(--fg); margin: 0 0 8px; padding-right: 32px; text-wrap: balance; }
.callme-sub { font-size: 14px; line-height: 21px; color: var(--fg-60); margin: 0 0 24px; }
.callme .cs-field { margin-bottom: 20px; }
.callme .cs-foot { padding-top: 6px; }
@media (max-width: 640px) {
  .callme { align-items: flex-end; padding: 0; }
  .callme-card { max-width: none; border-radius: 12px 12px 0 0; padding: 28px 20px calc(28px + env(safe-area-inset-bottom)); transform: translateY(16px); }
  .callme-title { font-size: 24px; }
}

/* ---------- About page ----------
   An inner page in the home page's own idioms: the contact page's head, the
   numbers row, the FAQ split and the services cards. New here are
   the founder cards, the numbered principle cards, the channel lists and
   the TSeller strip. Sits after the mobile system, so its phone rules win. */
.page-intro { padding-top: 160px; padding-bottom: 8px; }
.page-intro .page-title { margin-bottom: 20px; max-width: 720px; }
/* lead: the hero copy's size, in the 60% grey, one comfortable measure */
.page-intro-lead { max-width: 600px; font-size: 18px; line-height: 1.6; color: var(--fg-60); text-wrap: pretty; }

/* prose in a split body: FAQ copy size, 70% grey, wider gaps than the cards */
.split-body.prose { gap: 16px; max-width: 640px; }
.prose p { font-size: 16px; line-height: 1.625; color: var(--fg-70); }

/* team: founder cards side by side; the photo fills the top, in colour, and eases in a touch on hover */
.founders { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.founder { overflow: hidden; display: flex; flex-direction: column; }
.founder-photo { aspect-ratio: 1; overflow: hidden; background: var(--bg); border-bottom: 1px solid var(--card-line); }
.founder-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: transform 0.9s var(--ease), filter 0.4s var(--ease); }  /* mono in dark, the site's own theme; colour in light (see the light block) */
.founder:hover .founder-photo img { transform: scale(1.03); }
.founder-body { padding: 20px 20px 22px; display: grid; gap: 8px; align-content: start; }
/* the flow diagram's caption style */
.founder-role { font-size: 11px; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-50); }
.founder-name { font-size: 22px; line-height: 1.2; font-weight: 500; letter-spacing: -0.01em; color: var(--fg); }
.founder-focus { font-size: 14px; line-height: 1.625; color: var(--fg-60); }
.founder-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.founder-tags li { font-size: 12px; line-height: 16px; padding: 4px 10px; border-radius: 9999px; border: 1px solid var(--line); color: var(--fg-70); }

/* principles: one → two → four across; a fixed drop from the number to the
   title, so the four titles sit on one line whatever the copy length */
.cards-4 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.principle { padding: 24px; display: flex; flex-direction: column; }
.principle-n { font-size: 12px; line-height: 16px; letter-spacing: 0.08em; color: var(--fg-50); font-variant-numeric: tabular-nums; }
.principle h3 { margin-top: 36px; font-size: 18px; line-height: 28px; font-weight: 500; color: var(--fg); }
.principle p { margin-top: 6px; font-size: 14px; line-height: 1.625; color: var(--fg-60); }

/* channel lists inside the services cards */
.cap-list { margin-top: 14px; display: grid; gap: 6px; }
.cap-list li { position: relative; padding-left: 14px; font-size: 15px; line-height: 22px; color: var(--fg-70); }
.cap-list li::before { content: ""; position: absolute; left: 0; top: 11px; width: 5px; height: 1px; background: var(--fg-50); }
.channels-foot { margin-top: 20px; }

/* TSeller strip: copy left, the link out right, in one card */
.platform-strip { padding: 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: center; }
.platform-strip p { margin-top: 8px; font-size: 16px; line-height: 1.625; color: var(--fg-60); max-width: 560px; }
.platform-strip .cta-btn { justify-self: start; }

@media (min-width: 640px) {
  .founders { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .platform-strip { grid-template-columns: minmax(0, 1fr) auto; gap: 40px; padding: 32px 36px; }
  .platform-strip .cta-btn { justify-self: end; }
}
@media (min-width: 1024px) {
  .cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .founders { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .page-intro { padding-top: 96px; }
  .page-intro-lead { font-size: 15px; }
  .prose p { font-size: 15px; }
  .founder-body { padding: 16px 16px 18px; }
  .founder-name { font-size: 20px; }
  .principle { padding: 20px; }
  .principle h3 { margin-top: 20px; font-size: 17px; line-height: 24px; }
  .cap-list li { font-size: 14px; line-height: 21px; }
  .platform-strip { padding: 20px; }
  .platform-strip .cta-btn { width: 100%; justify-content: center; }
}

/* ---------- Clients page ----------
   The page intro, then three sections in the site's own parts: a logo wall
   in the integrations page's tile, the website builds as browser-framed
   cards, and the anonymous results in the FAQ's lifted band. */
/* a block head can carry one line of copy under its title */
.block-head p { margin-top: 8px; font-size: 16px; line-height: 1.625; color: var(--fg-60); max-width: 640px; }

/* logo wall: four across, the carousel's white silhouettes, the work beneath */
.client-wall { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.client-tile { flex: 0 0 calc((100% - 36px) / 4); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; height: 8.5rem; padding: 16px; background: rgba(var(--ink), 0.05); border: 1px solid rgba(var(--ink), 0.09); border-radius: 6px; }
/* full width, so an SVG with only a viewBox (no width/height) still resolves a size */
.client-logo { display: flex; align-items: center; justify-content: center; width: 100%; height: 2.75rem; }
.client-logo img { max-height: 2.75rem; max-width: 160px; width: auto; object-fit: contain; filter: brightness(0) invert(1); }
/* a brand without artwork yet is set as a wordmark */
.client-word { font-size: 14px; line-height: 1.3; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg); text-align: center; }
.client-cap { font-size: 11px; line-height: 14px; letter-spacing: 0.04em; color: rgba(var(--ink), 0.45); white-space: nowrap; }
.wall-note { margin-top: 20px; font-size: 13px; line-height: 1.5; color: var(--fg-50); }

/* website builds: two across; each card is a browser frame over the shot */
.work-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.work { display: flex; flex-direction: column; overflow: hidden; color: inherit; transition: border-color 200ms var(--tw-ease), transform 300ms var(--ease); }
.work:hover { border-color: var(--line-strong); transform: translateY(-2px); }
/* the chrome: three dots, the domain in a page-toned pill, an arrow that appears on hover */
.work-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--card-line); }
.work-dots { display: flex; gap: 6px; }
.work-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(var(--ink), 0.16); }
.work-url { flex: 1; display: flex; justify-content: center; min-width: 0; }
.work-url span { max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 12px; border-radius: 4px; background: var(--bg); border: 1px solid var(--line); font-size: 11px; line-height: 16px; color: var(--fg-60); }
.work-bar svg { width: 14px; height: 14px; color: var(--fg-60); opacity: 0; transition: opacity 200ms var(--tw-ease); }
.work:hover .work-bar svg { opacity: 1; }
.work-shot { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #f4f4f4; }
.work-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 0.9s var(--ease); }
.work:hover .work-shot img { transform: scale(1.02); }
.work-body { padding: 18px 20px 20px; border-top: 1px solid var(--card-line); display: grid; gap: 8px; }
.work-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.work-name { font-size: 18px; line-height: 28px; font-weight: 500; color: var(--fg); }
.work-cat { flex: none; font-size: 11px; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-50); text-align: right; }
.work-note { font-size: 14px; line-height: 1.625; color: var(--fg-60); }

/* results: one card per account, four columns across on desktop */
.results { display: grid; gap: 12px; }
.result { padding: 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: center; }
.result-client { display: block; font-size: 11px; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-50); }
.result-channel { margin-top: 8px; font-size: 20px; line-height: 1.2; font-weight: 500; color: var(--fg); }
.result-period { display: block; margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--fg-50); }
.result-big { display: block; font-size: 44px; line-height: 1; font-weight: 500; letter-spacing: -0.02em; color: var(--fg); font-variant-numeric: tabular-nums; }
.result-big-label { display: block; margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--fg-60); }
.result-stats { display: grid; }
.result-stats li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.result-stats li:last-child { border-bottom: 0; }
.result-stats li span:first-child { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--fg); font-variant-numeric: tabular-nums; }
.result-stats li span:last-child { font-size: 12px; line-height: 16px; color: var(--fg-50); text-align: right; }
/* the trend: one line, indexed; baselined so the climb reads honestly */
.spark { display: block; width: 100%; height: auto; color: var(--fg); }
.spark-base { stroke: currentColor; stroke-width: 1; opacity: 0.25; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.spark-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.spark-ring { fill: var(--panel); }
.spark-dot { fill: currentColor; }
.result-axis { display: flex; justify-content: space-between; margin-top: 8px; font-size: 10px; line-height: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-50); }
.results-note { margin-top: 20px; font-size: 13px; line-height: 1.5; color: var(--fg-50); max-width: 560px; }

@media (min-width: 768px) {
  .result { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding: 28px 32px; }
}
@media (min-width: 1024px) {
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 1024px) {
  .client-tile { flex-basis: calc((100% - 24px) / 3); }
}
@media (max-width: 640px) {
  .client-wall { gap: 8px; }
  .client-tile { flex-basis: calc((100% - 8px) / 2); height: 7rem; gap: 10px; }
  .client-logo img { max-height: 2.25rem; max-width: 120px; }
  .client-word { font-size: 12px; }
  .client-cap { font-size: 10px; }
  .block-head p { font-size: 15px; }
  .work-grid { gap: 14px; }
  .work-bar { padding: 8px 12px; }
  .work-body { padding: 16px; }
  .work-head { flex-direction: column; gap: 4px; }
  .work-cat { text-align: left; }
  .result { padding: 20px; gap: 18px; }
  .result-big { font-size: 38px; }
  /* the three supporting figures side by side, as on the old page */
  .result-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .result-stats li { display: grid; gap: 2px; padding: 0; border-bottom: 0; }
  .result-stats li span:last-child { text-align: left; }
}

/* ---------- TSeller app page (/tseller-app/) ----------
   The old WordPress landing page rebuilt in the site's own parts, kept for
   the search traffic it holds: the page intro with the device mockup
   beside it, the keynote video, the numbers row, the FAQ split, the services
   cards holding each feature's bullets, the TSeller strip as the guarantee,
   the FAQ band, the review cards and the closing band. New here are the
   hero grid, the video frame, the feature accordions, the five-across USP row and the
   store buttons. Monochrome like everything else; the only colour on the
   page is inside the product shot and the videos. */
/* store / anchor buttons under the intro lead: the hero's pill recipe */
.app-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 26px; }
.app-actions .pill { gap: 6px; }
.app-actions .pill svg { width: 14px; height: 14px; flex: none; }

/* hero: copy left, the product shot right with nothing around it, the
   two centred on each other; the shot is transparent, so it floats on the
   page like the home hero's mark */
.app-hero { padding-bottom: 24px; }
.app-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: center; }
.app-hero-copy { min-width: 0; }
.app-hero-visual { min-width: 0; }
.app-hero-visual img { width: 100%; height: auto; max-width: 640px; margin-inline: auto; }
/* a video in a card: 16:9, the card's own radius, nothing else */
.video-card { overflow: hidden; }
.video { position: relative; aspect-ratio: 16 / 9; background: #000; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* feature cards: two across, each a <details>; the summary is the title
   row with a plus that turns into a minus when open, the body is the
   services card's copy and list */
.features { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.feature { padding: 0; }
.feature summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; cursor: pointer; list-style: none; }
.feature summary::-webkit-details-marker { display: none; }
.feature summary:hover h3 { color: var(--fg-70); }
.feature h3 { font-size: 18px; line-height: 28px; font-weight: 500; color: var(--fg); transition: color 150ms var(--tw-ease); }
.feature summary svg { flex: none; width: 18px; height: 18px; color: var(--fg-60); transition: transform 200ms var(--tw-ease); }
.feature[open] summary svg { transform: rotate(45deg); }
.feature-body { padding: 0 24px 24px; }
.feature-body > p { font-size: 15px; line-height: 1.625; color: var(--fg-60); }
.feature .cap-list { margin-top: 16px; }
.feature .cap-list li { padding-left: 16px; font-size: 14px; line-height: 21px; }
.feature .cap-list li::before { top: 10px; }
.feature .cap-list strong { font-weight: 500; color: var(--fg); }
.feature-note { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.625; color: var(--fg-70); }

/* the five USPs: one tile each, an outline icon over a label */
.usp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.usp { padding: 22px 20px; display: grid; gap: 14px; align-content: start; }
.usp svg { width: 26px; height: 26px; color: var(--fg); }
.usp h3 { font-size: 15px; line-height: 22px; font-weight: 500; color: var(--fg); }
.usp p { margin-top: -8px; font-size: 13px; line-height: 1.55; color: var(--fg-60); }

/* a caption above a section title, in the founder cards' role type */
.kicker { display: block; margin-bottom: 12px; font-size: 11px; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-50); }
/* the trailer under the split, full width */
.split-foot { margin-top: 32px; }

/* the closing band's two store buttons, side by side */
.cta-row.app-stores { flex-wrap: wrap; gap: 10px; }
.cta-row.app-stores .cta-btn.is-glass { background: rgba(var(--ink), 0.06); color: var(--fg); border: 1px solid rgba(var(--ink), 0.2); }
.cta-row.app-stores .cta-btn.is-glass:hover { background: rgba(var(--ink), 0.1); opacity: 1; }
/* one line under the buttons: price and the guarantee */
.cta-note { margin-top: 18px; font-size: 14px; line-height: 20px; color: var(--fg-50); }

@media (min-width: 640px) {
  .usp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .app-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 48px; }
}
@media (min-width: 1024px) {
  .usp-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .app-hero-grid { gap: 28px; }
  .feature summary { padding: 16px 20px; }
  .feature-body { padding: 0 20px 20px; }
  .feature h3 { font-size: 17px; line-height: 24px; }
  .usp { padding: 18px 16px; }
  .cta-row.app-stores .cta-btn { width: 100%; justify-content: center; }
}

/* =========================================================
   Light theme — what the tokens cannot reach
   The white artwork, the logo treatments, the hero grain and the spotlight.
   Everything else on paper comes from the token block near the top.
   ========================================================= */
/* the lockup and both marks are white artwork: inverted, they are ink */
:root[data-theme="light"] .brand img,
:root[data-theme="light"] .hero-top-mark img,
:root[data-theme="light"] .flow-hub-mark img,
:root[data-theme="light"] .mpsc-mark img { filter: invert(1); }
/* the hero strip and the contact page's grid: TSeller's own grayscale, without our invert */
:root[data-theme="light"] .int-tile img,
:root[data-theme="light"] .contact-logo img { filter: grayscale(1); }
/* the integration wall's marks are dark-tile variants (black turned white):
   mono with the luminance flipped keeps each one's interior detail */
:root[data-theme="light"] .intg-logo img { filter: grayscale(1) invert(1); }

:root[data-theme="light"] .founder-photo img { filter: none; }
/* brand walls: ink silhouettes */
:root[data-theme="light"] .brand-logo img,
:root[data-theme="light"] .client-logo img { filter: brightness(0); }
/* paper grain on the hero sky: dark noise multiplied in, where the dark site overlays white */
:root[data-theme="light"] .hero-top-sky::after { opacity: 0.06; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* the spotlight is a soft white light on paper, a little stronger to read at all */
:root[data-theme="light"] .spotlight { background: radial-gradient(circle at center, #ffffff, #ffffff, rgba(255, 255, 255, 0.6), transparent 80%); }
:root[data-theme="light"] .spotlight.is-on { opacity: 0.55; }
/* the smallest captions: ink at 45% is fainter on paper than white was on #111 */
:root[data-theme="light"] .int-soon,
:root[data-theme="light"] .intg-cap,
:root[data-theme="light"] .client-cap { color: rgba(20, 20, 20, 0.55); }