/* =========================================================
   Atlantico Fulfillment Solutions
   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.
   ========================================================= */

@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"); }
/* Inter ExtraBold, latin subset only (24 kB), self-hosted like the Sharp Sans
   files — no Google Fonts request. Used for the logo wordmark and nothing
   else, so the page keeps a single body typeface. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("/fonts/inter-extrabold-latin.woff2") format("woff2"); }

:root {
  /* 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(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.18);
  /* Card border: TSeller's #E5E1D8/30 hairline. */
  --card-line: rgba(255, 255, 255, 0.05);

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

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

  --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);
}

/* ---------- 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;
}

/* Logo lockup. The globe mark is the one cropped straight out of the original
   artwork, still 30px tall in the same place it has always sat; only the
   wordmark changed. That word is now set live in Inter ExtraBold instead of
   being baked into the PNG, so it can carry the full business name and stay
   crisp at any density.
   Sizing: the supplied spec is Inter ExtraBold at 189px. In the original
   artwork the wordmark's cap height is 46 of the mark's 90px, and Inter's cap
   height is 0.728em, so 189px belongs against a 269px mark — a wordmark
   0.703x the mark's height. The header's mark is 30px, hence 21px here, the
   same lockup at 1/9 scale. */
.brand { display: inline-flex; align-items: center; gap: 8px; }
.brand-mark { height: 30px; width: auto; flex: none; }
.brand-name {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: 21px;
  line-height: 1.08;
  /* Inter's default fit is loose at display sizes; the original wordmark was
     tighter than that, and a three-word name needs the room. */
  letter-spacing: -0.02em;
  /* The mark is pure white in the artwork, so the word matches it rather than
     the page's slightly softer --text. */
  color: #fff;
  white-space: nowrap;
}
/* The name breaks in two only where the header is too narrow for one line;
   a display:none <br> emits no break, and the space after it carries the
   single-line spacing. */
.brand-break { display: none; }

/* The nav is centred on the viewport, so as the window narrows its left edge
   walks toward the logo. Below 1260px a single-line wordmark comes within less
   than one nav gap of it, so the lockup takes its second form — the mark
   unchanged, the name stacked
   over two lines. Shrinking the type instead would leave a 15px word beside a
   30px mark, which reads as a mistake. */
@media (max-width: 1260px) {
  .brand-break { display: block; }
  .brand-name { font-size: 15px; }
}

/* 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(237, 237, 237, 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: #d9dcdf; 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(255, 255, 255, 0.2);
  box-shadow: none; transition: none;
}
.header-cta:hover { background: var(--panel); border-color: rgba(255, 255, 255, 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); }

/* ---------- 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(255, 255, 255, 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%, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.018) 50%, rgba(255, 255, 255, 0) 100%),
    #111111;
}
/* 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 {
  /* Atlantico's blue lives in the light, leaving the face of the mark tonal. */
  --mark-blue: 28, 142, 166;
  --light-x: 32%; --light-y: 24%; --light-strength: 0;
  --tilt-x: 0deg; --tilt-y: 0deg;
  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;
  animation: heroMarkDrift 30s ease-in-out infinite alternate;
}
.hero-mark-surface {
  position: relative; width: 100%; height: 100%;
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
}
.hero-mark-base {
  position: relative; display: block; width: 100%; height: 100%;
  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;
}
.hero-top-mark img { width: 100%; height: 100%; }
.hero-mark-aura {
  position: absolute; inset: -24%;
  background: radial-gradient(closest-side at var(--light-x) var(--light-y), rgba(var(--mark-blue), 0.13), rgba(var(--mark-blue), 0.035) 48%, transparent 100%);
  opacity: calc(0.5 + var(--light-strength) * 0.4);
  filter: blur(22px);
}
.hero-mark-sheen {
  position: absolute; inset: 0;
  -webkit-mask: url('/images/globe-mark.webp') center / 100% 100% no-repeat;
  mask: url('/images/globe-mark.webp') center / 100% 100% no-repeat;
  background:
    radial-gradient(18% 18% at var(--light-x) var(--light-y), rgba(var(--mark-blue), 0.6), rgba(var(--mark-blue), 0.18) 48%, transparent 100%),
    radial-gradient(48% 46% at var(--light-x) var(--light-y), rgba(var(--mark-blue), 0.4), rgba(var(--mark-blue), 0.12) 48%, transparent 100%),
    radial-gradient(40% 36% at 78% 82%, rgba(var(--mark-blue), 0.09), transparent 100%);
  opacity: calc(0.58 + var(--light-strength) * 0.42);
}
@keyframes heroMarkDrift { from { transform: scale(1); } to { transform: scale(1.045); } }
.hero-top.is-mark-paused .hero-top-mark { animation-play-state: paused; }

.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(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.04); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pill-glass:hover { background: rgba(255, 255, 255, 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: relative; display: block; left: auto; top: auto; translate: none; width: min(52vw, 220px); margin: 40px auto 0; animation: none; }
  .hero-mark-base { opacity: 0.16; }
  .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(255, 255, 255, 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(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 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(255, 255, 255, 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 — the process card puts its visual first
   in the source so the heading lands in the right-hand column on desktop. */
@media (max-width: 767px) { .showcase-copy { order: -1; } }
/* the flow panel is a fixed stage; the steps panel sizes to its content */
.showcase-panel { position: relative; overflow: hidden; border-radius: 8px; background: var(--bg); border: 1px solid var(--card-line); }
.showcase-panel.flow, .steps-panel { height: 620px; }
.steps-panel { padding: 28px 30px; }

/* ---- Flow diagram: Brand → AFS → 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(255, 255, 255, 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(255, 255, 255, 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); }
/* AFS: 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: #1e1e1e;
  border: 1px solid var(--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; }

/* ---- Process ring (steps panel) ----
   A fixed stage, like the flow panel, with the eight steps around a circle.
   The track and arc are one SVG (rotated so 12 o'clock is the start); the dots,
   labels and centre readout are DOM, placed on the same circle by percentage.
   On reveal the track draws round and the dots pop in; main.js then sweeps the
   arc from step to step (--p, a fraction of the circumference), marks the
   active dot and swaps the centre copy. */
.steps-panel { --ring: 400px; display: grid; place-items: center; }
.orbit { position: relative; width: var(--ring); height: var(--ring); }
.orbit-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
/* dashes in user units: r=49 in a 100-unit box gives a 307.876 circumference.
   (pathLength="1" plus non-scaling-stroke made browsers disagree on where the
   dash landed, which is why the arc used to show up on the wrong side.) */
.orbit-track, .orbit-arc { fill: none; stroke-dasharray: 307.876; --c: 307.876; }
/* the faint full circle draws round on reveal */
.orbit-track { stroke: rgba(255, 255, 255, 0.14); stroke-width: 0.24; stroke-dashoffset: var(--c); transition: stroke-dashoffset 1.3s var(--ease) 0.15s; }
.in .orbit-track { stroke-dashoffset: 0; }
/* the lit part, swept to the active step */
.orbit-arc { stroke: var(--aqua); stroke-width: 0.34; stroke-dashoffset: calc(var(--c) * (1 - var(--p, 0))); opacity: 0.9; filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.45)); transition: stroke-dashoffset .9s linear, opacity .3s var(--ease); }
.orbit.is-reset .orbit-arc { transition: stroke-dashoffset .5s var(--ease), opacity .3s var(--ease); opacity: 0; }

/* steps: a dot on the circle, its name set outward from it */
.orbit-step { position: absolute; left: var(--x); top: var(--y); width: 11px; height: 11px; padding: 0; transform: translate(-50%, -50%) scale(0.6); opacity: 0; transition: opacity .5s var(--ease), transform .5s var(--ease); cursor: pointer; }
.in .orbit-step { opacity: 1; transform: translate(-50%, -50%) scale(1); transition-delay: calc(var(--i, 0) * 0.08s + 0.55s); }
.orbit-dot { display: block; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line-strong); transition: background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); }
.orbit-step:hover .orbit-dot { border-color: var(--fg); }
/* passed steps stay filled; only the active one carries the halo */
.orbit-step.is-done .orbit-dot { background: var(--fg); border-color: var(--fg); }
.orbit-step.is-active .orbit-dot { background: var(--fg); border-color: var(--fg); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1); }
.orbit-label { position: absolute; font-size: 13px; line-height: 16px; white-space: nowrap; color: var(--fg-50); transition: color .4s var(--ease); }
.orbit-step:hover .orbit-label, .orbit-step.is-active .orbit-label { color: var(--fg); }
.orbit-step.is-done .orbit-label { color: var(--fg-70); }
/* label direction by clock position: 0 top, 2 right, 4 bottom, 6 left, odd = the diagonals */
.orbit-step[data-pos="0"] .orbit-label { bottom: 100%; left: 50%; transform: translate(-50%, -14px); }
.orbit-step[data-pos="4"] .orbit-label { top: 100%; left: 50%; transform: translate(-50%, 14px); }
.orbit-step[data-pos="2"] .orbit-label { left: 100%; top: 50%; transform: translate(16px, -50%); }
.orbit-step[data-pos="6"] .orbit-label { right: 100%; top: 50%; transform: translate(-16px, -50%); }
.orbit-step[data-pos="1"] .orbit-label { bottom: 100%; left: 100%; transform: translate(6px, -6px); }
.orbit-step[data-pos="3"] .orbit-label { top: 100%; left: 100%; transform: translate(6px, 6px); }
.orbit-step[data-pos="5"] .orbit-label { top: 100%; right: 100%; transform: translate(-6px, 6px); }
.orbit-step[data-pos="7"] .orbit-label { bottom: 100%; right: 100%; transform: translate(-6px, -6px); }

/* centre readout: number, title and copy of the active step */
.orbit-centre { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 250px; text-align: center; opacity: 0; transition: opacity .6s var(--ease) 0.9s; }
.in .orbit-centre { opacity: 1; }
.orbit-index { font-size: 12px; line-height: 16px; letter-spacing: 0.08em; color: var(--fg-50); font-variant-numeric: tabular-nums; }
.orbit-index b { font-weight: 500; color: var(--fg-70); }
.orbit-title { margin-top: 10px; font-size: 22px; line-height: 1.2; font-weight: 500; color: var(--fg); letter-spacing: -0.01em; }
.orbit-desc { margin-top: 10px; font-size: 14px; line-height: 1.55; color: var(--fg-60); }
.orbit-title, .orbit-desc { transition: opacity .28s var(--ease), transform .28s var(--ease); }
.orbit-centre.is-swapping .orbit-title, .orbit-centre.is-swapping .orbit-desc { opacity: 0; transform: translateY(4px); }

/* ---- 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 wall: it reuses the integrations page's tile, so its rules sit with
   .intg-grid / .intg-tile further down rather than here. */
.reviews { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.reviews[hidden] { display: none; }
.brand-grid:has(+ .reviews[hidden]) { margin-bottom: 0; }
.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; }
/* Click to expand. The card is a <details>, so it still opens with JavaScript
   off — main.js only adds the height animation and the one-open-at-a-time
   rule on top of the native behaviour. */
.faq-item { padding: 0; }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  border-radius: 8px;
}
.faq-item summary::-webkit-details-marker { display: none; }
/* h3: text-base font-[450] text-gray-900 */
.faq-item h3 { margin: 0; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--fg); }
.faq-item summary:hover h3 { color: #fff; }
.faq-item summary:focus-visible { outline: 2px solid var(--fg); outline-offset: -2px; }

/* Plus that becomes a minus — the same mark the old FAQ used, two hairlines
   with one rotating away. */
.faq-icon { position: relative; flex: none; width: 14px; height: 24px; }
.faq-icon::before, .faq-icon::after {
  content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 1.5px;
  border-radius: 1px; background: var(--fg-60);
  transition: transform 250ms var(--tw-ease), background 250ms var(--tw-ease);
}
.faq-icon::after { transform: rotate(90deg); }
.faq-item[open] .faq-icon::after { transform: rotate(0); }
.faq-item[open] .faq-icon::before, .faq-item[open] .faq-icon::after { background: var(--fg); }

/* The answer. Height is animated from JS, so this stays overflow-hidden while
   it moves. */
.faq-body { overflow: hidden; }
/* No measure cap — the answer runs the width of the card, as it did when it
   was a static paragraph. */
.faq-body p { margin: 0; padding: 0 24px 20px; font-size: 14px; line-height: 20px; color: var(--fg-60); }

@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 */
}
@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, .steps-panel { height: 700px; }
  .steps-panel { --ring: 480px; padding: 40px 44px; }
  .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 */
  .review { height: 280px; }                                         /* md:h-[280px] */
  .brand-grid { margin-bottom: 72px; }
}
@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(255, 255, 255, 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, #ffffff, rgba(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 0.65); white-space: nowrap; transition: background 200ms var(--tw-ease), color 200ms var(--tw-ease); }
.mpsc-period.is-active { background: rgba(255, 255, 255, 0.14); color: #ffffff; }
/* 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(255, 255, 255, 0.15); transition: opacity 200ms var(--tw-ease); }
.mpsc-divider.is-hidden { opacity: 0; }
/* the Atlantico 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(255, 255, 255, 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; }
.mpsc-tick { font-family: var(--font); font-size: 12px; fill: rgba(255, 255, 255, 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: #242424; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.55), 0 4px 8px -4px rgba(0, 0, 0, 0.4); pointer-events: none; will-change: transform, opacity; }
.mpsc-tip-date { font-size: 12px; line-height: 16px; font-weight: 600; color: #ffffff; 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(255, 255, 255, 0.85); }
.mpsc-tip-val { font-weight: 500; }
.mpsc-tip-total { padding-top: 5px; border-top: 1px solid rgba(255, 255, 255, 0.1); color: #ffffff; }
.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(255, 255, 255, 0.15); border-top-color: rgba(255, 255, 255, 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.
   The home page's brand wall (.brand-grid) is the same tile without the
   caption, so both share every rule below and can't drift apart; what differs
   for the brands follows straight after. */
.intg-grid, .brand-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.intg-tile, .brand-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(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 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(255, 255, 255, 0.45); }
@media (max-width: 1024px) { .intg-tile, .brand-tile { flex-basis: calc((100% - 24px) / 3); } }
@media (max-width: 640px) {
  .intg-grid, .brand-grid { gap: 8px; }
  .intg-tile, .brand-tile { flex-basis: calc((100% - 8px) / 2); height: 6rem; }
  .intg-logo img { max-height: 2.125rem; max-width: 100px; }
}

/* Brand wall (home page). Same tile, no caption line, so it sits shorter. Each
   mark is forced to a flat white silhouette — brightness(0) flattens the
   logo's own colour to black, invert(1) turns it white — so eight logos drawn
   in eight different palettes read as one wall rather than a colour clash. */
/* Eleven brands never fill the last row, so it starts at the left edge with
   the empty slot trailing, rather than centring three tiles against the four
   above them. The integrations grid keeps centring — its rows are full. */
.brand-grid { margin: 0 0 56px; padding: 0; list-style: none; justify-content: flex-start; }
.brand-tile { height: 5.5rem; }
/* Same cap as .intg-logo img, so a brand mark and a platform mark are drawn at
   the same weight inside the same tile. */
.brand-tile img { max-height: 2.25rem; max-width: 152px; width: auto; object-fit: contain; filter: brightness(0) invert(1); }
/* Preserve the supplied JPEG: map its 247-grey background to black and its
   253-grey logo to white, then screen out the black against the tile. */
.brand-tile img.brand-logo-vita-serena {
  max-height: 60px; max-width: min(180px, 100%); height: auto;
  filter: grayscale(1) brightness(0.51) contrast(83.3333);
  mix-blend-mode: screen;
}
@media (max-width: 640px) {
  .brand-tile { height: 5rem; }
  .brand-tile img { max-height: 2.125rem; max-width: 100px; }
  .brand-tile img.brand-logo-vita-serena { max-height: 50px; max-width: min(140px, 100%); }
}

/* ---------- 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(5, minmax(0, 1fr)); gap: 80px; margin-bottom: 80px; }  /* md:grid-cols-5 md:gap-20 md:mb-20 */
  .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 20px; text-wrap: balance; }

/* Phone and email, above the form, for anyone who would rather just call. A
   fixed label column keeps the two values on one left edge; the hairline
   underneath separates them from the form without making them a second card. */
.contact-direct {
  list-style: none; margin: 0 0 26px; padding: 0 0 22px;
  border-bottom: 1px solid var(--card-line);
  display: grid; gap: 8px;
}
.contact-direct li { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: baseline; gap: 8px; }
.contact-direct-label { font-size: 13px; line-height: 20px; color: var(--fg-50); }
.contact-direct a { font-size: 15px; line-height: 20px; color: var(--fg); word-break: break-word; }
.contact-direct a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.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(255, 255, 255, 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(237, 237, 237, 0.6); }
.cs-field input:focus, .cs-field select:focus, .cs-field textarea:focus { outline: none; border-color: rgba(255, 255, 255, 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(237, 237, 237, 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: #d98a84; }
.cs-field.invalid .cs-error { display: block; }
.cs-field.invalid input, .cs-field.invalid select, .cs-field.invalid textarea { border-color: rgba(217, 138, 132, 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: #d98a84; }

@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 ring shows fully drawn; steps still change on click, without the sweep */
  .orbit-track { stroke-dashoffset: 0; transition: none; }
  .orbit-step { opacity: 1; transform: translate(-50%, -50%); transition: none; }
  .orbit-centre { opacity: 1; transition: none; }
  .orbit-arc { transition: 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, or for
     step names around the ring — the ring's centre readout carries the name */
  .flow-chip-name { display: none; }
  .orbit-label { display: none; }
}

@media (max-width: 1024px) {
  :root { --header-h: 56px; }
  .nav-toggle { display: flex; }
  .brand-mark { height: 26px; }
  /* A phone header carries the pill and the burger too, which leaves roughly
     190px for the lockup — not enough for the name on one line at any size
     that suits a 26px mark. It stacks instead, two lines whose combined height
     matches the mark, so the icon stays exactly where it is. */
  .brand-break { display: block; }
  .brand-name { font-size: 14px; line-height: 1.1; }
  /* One pill + burger, TSeller's pattern. The header carries a single CTA at
     every width now, so there is nothing left to hide here. */
  .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; }
  /* ring above, readout below; the names live in the readout only */
  .steps-panel { --ring: 220px; height: 560px; padding: 24px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; }
  .orbit-track { stroke-width: 0.5; }
  .orbit-arc { stroke-width: 0.7; }
  .orbit-centre { position: static; transform: none; width: 100%; max-width: 280px; }
  .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; }

  /* process ring: stage sized to its content, readout under the ring */
  .steps-panel { height: auto; min-height: 0; padding: 52px 20px 36px; gap: 28px; }
  .steps-panel { --ring: 224px; }
  .orbit-title { font-size: 20px; }
  .orbit-desc { font-size: 14px; }

  /* 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-grid { margin-bottom: 40px; }
  .review { padding: 18px 18px 12px; }
  .review blockquote { font-size: 14px; }

  /* faq — padding moves to the summary and the answer, the card itself has none */
  .faq-item summary { padding: 16px; gap: 14px; }
  .faq-item h3 { font-size: 15px; line-height: 22px; }
  .faq-body p { padding: 0 16px 16px; 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; }
}