/* =========================================================
   Clan design system
   Colours are taken from the logo. Buttons are ink (white in dark mode);
   blue marks links, focus and selection. The other colours carry meaning:
   magenta = Healthcare and AI, orange = Manufacturing,
   sky = Logistics, green = Supply chain / success,
   teal = Retail, blue = Financial services.
   ========================================================= */

/* ---------- Typeface: Inter, self-hosted ----------
   One variable file (48KB, latin, weights 100-900) replaces seven static
   Google Fonts files. No third-party connection, nothing render-blocking.
   "Inter Fallback" is Arial re-mapped to Inter's metrics, so the swap when
   the real font lands causes no reflow -- zero layout shift (CLS).
   -------------------------------------------------- */
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  ascent-override: 90%;
  descent-override: 22.43%;
  line-gap-override: 0%;
  size-adjust: 107.12%;
}

/* ---------- Application theming ----------
   One variable colours a whole product page: the app mark, the selected
   sidebar row, module group bullets and team ticks. Default is ClanHealth's
   magenta so anything untagged still looks right. */
.p-health { --accent: var(--magenta); }
.p-works   { --accent: var(--orange); }
.p-ship   { --accent: var(--sky); }
.p-buy { --accent: var(--green); }
.p-shop   { --accent: var(--teal); }
.p-lend    { --accent: var(--primary); }
.p-pricing { --accent: var(--primary); }

/* ---------- Application icons ----------
   Remix Icon (Apache 2.0, remixicon.com), subset to the six glyphs this site
   actually uses. The shipped library is a 177KB font plus a 149KB stylesheet
   for 3,074 icons; subsetting takes that to ~1KB and the rules below, with
   the same class-based markup Remix documents: <i class="ri ri-truck-line">.
   Every icon is decorative, so each one carries aria-hidden in the HTML.
   -------------------------------------- */
@font-face {
  font-family: "clan-icons";
  src: url("fonts/clan-icons.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
.ri { font-family: "clan-icons"; font-style: normal; font-weight: normal; line-height: 1;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.ri-hospital-line::before { content: "\ee37"; }
.ri-tools-line::before    { content: "\f21b"; }
.ri-truck-line::before    { content: "\f231"; }
.ri-stack-line::before    { content: "\f181"; }
.ri-store-2-line::before  { content: "\f1a5"; }
.ri-bank-line::before     { content: "\ea94"; }

.app-nav .ri { font-size: 15px; width: 16px; text-align: center; flex: none; }
.mega a b .ri { display: inline-block; width: 1.15em; margin-right: .5rem; font-size: 15px; vertical-align: -2px; }
.layer li.app .ri { font-size: 16px; color: var(--c); flex: none; }
.rows .row h3 .ri { font-size: .95em; color: var(--c); flex: none; }

/* ---------- Tokens ---------- */
:root {
  --bg: #FFFFFF;
  --bg-alt: #F5F7FA;
  --surface: #FFFFFF;
  --ink: #0E1A2F;
  --muted: #586377;
  --line: #E2E7EE;
  --primary: #0B63E5;
  --primary-hover: #084FBF;
  --primary-tint: #E6F0FF;
  --magenta: #D9117A;
  --magenta-tint: #FCE8F2;
  --magenta-ink: #B80D67; /* magenta that passes 4.5:1 on its own tint */
  --orange: #F57C00;
  --sky: #2A9DF4;
  --teal: #0D9488;
  --green: #1B9E55;
  --green-ink: #13784A; /* green that passes 4.5:1 as small text */
  --green-tint: #E1F5EA;
  --amber-tint: #FFF0DB; --amber-ink: #9A4B00;
  --dark: #0B1630;
  --dark-2: #13213F;
  --dark-line: #263759;
  --dark-muted: #A9B6D3;
  --accent: #D9117A;
  --btn-bg: #0B0D12; --btn-ink: #FFFFFF; --btn-hover: #2A2F3A;
  --brand-gradient: linear-gradient(120deg, #F57C00, #D9117A 38%, #0B63E5 72%, #0D9488);
  --danger: #C5221F;
  --sk: #E7EBF1; --sk-hi: #F7F9FC; /* skeleton placeholders */
  color-scheme: light dark;
  --shadow: 0 1px 2px rgba(14, 26, 47, .05), 0 24px 60px -24px rgba(20, 50, 120, .26);
  --display: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --text: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --wrap: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --header-h: 72px;

  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* In dark mode the "dark" feature surfaces (security, AI band, highlighted
   cards) are lifted above the page instead of matching it, or they would
   vanish into the background. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A1120; --bg-alt: #0E1728; --surface: #131D33; --ink: #EEF2FA; --muted: #9EABC4; --line: #223050;
    --primary: #5B9BFF; --primary-hover: #7DB0FF; --primary-tint: #14284D;
    --magenta: #FF5BAE; --magenta-tint: #3A1230; --magenta-ink: #FF8CC6; --green: #44C985; --green-ink: #44C985; --green-tint: #11301F;
    --amber-tint: #382508; --amber-ink: #FFC470; --danger: #FF7A70;
    --sk: #1D2A45; --sk-hi: #2B3B5F;
    --dark: #15264A; --dark-2: #1C315C; --dark-line: #2E4677; --dark-muted: #B3C0DC;
    --btn-bg: #FFFFFF; --btn-ink: #0B0D12; --btn-hover: #DDE2EA;
    --shadow: 0 24px 60px -24px rgba(0, 0, 0, .8);
  }
}
:root[data-theme="dark"] {
  --bg: #0A1120; --bg-alt: #0E1728; --surface: #131D33; --ink: #EEF2FA; --muted: #9EABC4; --line: #223050;
  --primary: #5B9BFF; --primary-hover: #7DB0FF; --primary-tint: #14284D;
  --magenta: #FF5BAE; --magenta-tint: #3A1230; --magenta-ink: #FF8CC6; --green: #44C985; --green-ink: #44C985; --green-tint: #11301F;
  --amber-tint: #382508; --amber-ink: #FFC470; --danger: #FF7A70;
  --sk: #1D2A45; --sk-hi: #2B3B5F;
  --dark: #15264A; --dark-2: #1C315C; --dark-line: #2E4677; --dark-muted: #B3C0DC;
  --btn-bg: #FFFFFF; --btn-ink: #0B0D12; --btn-hover: #DDE2EA;
  --shadow: 0 24px 60px -24px rgba(0, 0, 0, .8);
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: inherit; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px + env(safe-area-inset-top, 0px)); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.65 var(--text); font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
/* Optical tracking: the larger the type, the tighter it is set. A single
   letter-spacing across every heading size is what makes type read cheap. */
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 4.7vw, 4rem); font-weight: 650; letter-spacing: -0.035em; line-height: .98; }
h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); font-weight: 640; letter-spacing: -0.03em; line-height: 1.04; }
h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.012em; line-height: 1.25; }
/* Lining, fixed-width figures everywhere a number carries meaning. */
.kpis b, .big, .count, .runs td, .perm td, .axis { font-variant-numeric: tabular-nums; }
p, ul, ol, dl, dd, table { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 4px; }
.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* First thing a keyboard user reaches; invisible until it has focus. */
.skip { position: absolute; z-index: 100; left: var(--gutter); top: -200px; padding: .75rem 1.15rem; border-radius: 12px;
  background: var(--btn-bg); color: var(--btn-ink); font-weight: 600; }
.skip:focus { top: 12px; }
/* Sections that only make sense with JavaScript (the price estimator). */
html:not(.js) [data-needs-js] { display: none; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.section { padding-block: clamp(4rem, 8vw, 7rem); }
.alt { background: var(--bg-alt); }

/* Section header: big statement left, supporting line right */
.head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.25rem clamp(2rem, 6vw, 6rem); align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.head p { color: var(--muted); font-size: 1.125rem; max-width: 44ch; padding-bottom: .35rem; }
@media (max-width: 860px) { .head { grid-template-columns: 1fr; } }

/* ---------- Buttons and links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 52px; padding: 0 1.75rem; border-radius: 999px; border: 0; font: 600 1rem/1 var(--text); cursor: pointer; transition: background-color .15s, transform .15s, box-shadow .15s; }
.btn-primary { background: var(--btn-bg); color: var(--btn-ink); }
.btn-primary:hover { background: var(--btn-hover); transform: translateY(-1px); box-shadow: 0 12px 24px -14px rgba(0, 0, 0, .55); }
.btn:active { transform: translateY(1px) scale(.994); }
.btn-sm { min-height: 44px; padding-inline: 1.3rem; font-size: .95rem; }
.link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; padding-block: .25rem; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat; transition: background-size .2s, color .15s; }
.link:hover { color: var(--primary); background-size: 0 2px; background-position: 100% 100%; }
.link::after { content: "\2192"; font-weight: 500; transition: translate .2s var(--ease); }
.link:hover::after, .row:hover .link::after { translate: 3px 0; }

.status { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .9rem; white-space: nowrap; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.status.live { color: var(--green-ink); } .status.live::before { background: var(--green); box-shadow: 0 0 0 4px var(--green-tint); }

.chip { display: inline-block; padding: .22rem .55rem; border-radius: 6px; font-size: .78rem; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.chip.ok { background: var(--green-tint); color: var(--green-ink); }
.chip.wait { background: var(--amber-tint); color: var(--amber-ink); }
.chip.run { background: var(--primary-tint); color: var(--primary); }

/* ---------- Announcement + header ---------- */
.announce { background: var(--dark); color: #fff; text-align: center; font-size: .9rem; padding: .6rem var(--gutter); }
.announce a { margin-left: .5rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* The solid background is declared first on purpose. color-mix() is only in
   Safari from 16.2 and Firefox from 113; where it is not understood the whole
   declaration is dropped, and without the fallback the sticky header would go
   transparent with the page scrolling visibly underneath it.
   -webkit-backdrop-filter is what Safari actually reads -- it only took the
   unprefixed property in version 18. */
.header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 60;
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line); }
.header .wrap { display: flex; align-items: center; gap: 2.5rem; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: .55rem; font: 680 1.5rem/1 var(--display); letter-spacing: -0.028em; }
.brand img { height: 38px; width: auto; }
.nav { display: flex; align-items: center; align-self: stretch; gap: 1.75rem; flex: 1; }
.nav > li > a:not(.btn) { display: inline-flex; align-items: center; gap: .3rem; padding-block: .5rem; font-weight: 500; font-size: 1rem; }
.nav > li > a:not(.btn):hover, .nav > li > a[aria-current]:not(.btn) { color: var(--primary); }
.has-mega > a .i { width: 14px; height: 14px; transition: transform .2s; }
.has-mega:hover > a .i, .has-mega:focus-within > a .i, .has-mega.mega-on > a .i { transform: rotate(180deg); }
.has-mega.mega-off > a .i { transform: none; }
.nav .push { margin-left: auto; }
.has-mega { align-self: stretch; display: flex; align-items: center; }

.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility .18s; }
.has-mega:hover .mega, .has-mega:focus-within .mega, .has-mega.mega-on .mega { opacity: 1; visibility: visible; transform: none; }
/* Escape dismisses the panel while the pointer is still over it (site.js). */
.has-mega.mega-off .mega { opacity: 0; visibility: hidden; transform: translateY(-6px); }
.mega .wrap { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 3rem; align-items: start; min-height: 0; padding-block: 2rem 2.5rem; }
.mega .mega-h { font: 600 .85rem/1 var(--text); letter-spacing: 0; color: var(--muted); padding-bottom: .9rem; margin-bottom: .5rem; border-bottom: 1px solid var(--line); }
.mega a { display: block; padding: .6rem 0; }
.mega a b { display: block; font-weight: 600; }
.mega a small { display: block; color: var(--muted); font-size: .9rem; }
.mega a:hover b, .mega a[aria-current] b { color: var(--primary); }

/* Light / dark switch. Which icon shows is decided in CSS from the active
   theme, so it is right on first paint; site.js only keeps aria-pressed true. */
.theme-btn { display: none; align-items: center; justify-content: center; gap: .6rem; width: 40px; height: 40px; padding: 0;
  border: 1.5px solid var(--line); border-radius: 999px; background: none; color: inherit; font: inherit; cursor: pointer; transition: border-color .15s; }
.js .theme-btn { display: inline-flex; }
.js .theme-btn-m { display: none; }
.theme-btn:hover { border-color: var(--muted); }
.theme-btn .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.theme-btn .i-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .i-sun { display: block; }
  :root:not([data-theme="light"]) .theme-btn .i-moon { display: none; }
}
:root[data-theme="dark"] .theme-btn .i-sun { display: block; }
:root[data-theme="dark"] .theme-btn .i-moon { display: none; }

.menu-btn { display: none; }
@media (max-width: 980px) {
  .js .menu-btn { display: inline-flex; align-items: center; margin-left: auto; min-height: 44px; padding: 0 1.1rem; border: 1.5px solid var(--line); border-radius: 999px; background: none; color: inherit; font: 600 .95rem/1 var(--text); cursor: pointer; }
  .menu-btn .x, .nav-open .menu-btn .m { display: none; }
  .nav-open .menu-btn .x { display: inline; }
  /* max-height keeps the open menu usable on short screens (a phone held
     sideways), instead of running past the viewport with no way to reach
     the last item. overscroll-behavior stops the page behind scrolling too. */
  .js .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: .5rem var(--gutter) 1.5rem; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
    max-height: calc(100vh - var(--header-h) - env(safe-area-inset-top, 0px));
    max-height: calc(100svh - var(--header-h) - env(safe-area-inset-top, 0px));
    overflow-y: auto; overscroll-behavior: contain; }
  .js .nav-open .nav { display: flex; }
  /* display:flex (not the inline-flex used on desktop) so each row fills the
     menu width -- otherwise the divider under it is only as wide as the word. */
  .js .nav > li { display: block; }
  .js .nav > li > a:not(.btn) { display: flex; width: 100%; padding-block: 1rem; border-bottom: 1px solid var(--line); font-size: 1.1rem; }
  .has-mega > a .i { display: none; }
  .has-mega { display: block; }
  .nav .push { margin: 0; }
  .nav .btn { width: 100%; margin-top: 1.25rem; min-height: 52px; }
  /* The six applications sit in the menu itself, under Platform, two by two. */
  .mega { position: static; opacity: 1; visibility: visible; transform: none; background: none; border: 0; box-shadow: none; transition: none; }
  .mega .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; width: auto; padding: .35rem 0 .75rem; border-bottom: 1px solid var(--line); }
  .mega-cap, .mega-trust { display: none; }
  .mega-apps { display: contents; }
  .mega-apps .mega-h { grid-column: 1 / -1; margin: 0; padding: .6rem 0 .4rem; border: 0; }
  .mega a { padding: .45rem 0; }
  .mega a small { font-size: .82rem; }
  /* The theme switch leaves the menu for the bar, beside Menu, as an icon button. */
  .header .wrap { gap: .6rem; }
  .js .nav > .theme-li { display: none; }
  .js .theme-btn-m { display: inline-flex; flex: none; margin-left: auto; }
  .js .theme-btn-m + .menu-btn { margin-left: 0; }
  /* The open menu: rounded sheet over a dimmed, scroll-locked page. A tap on
     the dimmed area closes it (site.js). */
  .js .nav-open .nav { border-radius: 0 0 22px 22px; }
  .header.nav-open::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 100%; height: 100vh; height: 100dvh;
    background: rgba(6, 11, 22, .45); }
  html:has(.header.nav-open) { overflow: hidden; }
  /* Without JavaScript there is no menu button: the links wrap in a row
     under the logo instead, so every page is still reachable. */
  html:not(.js) .header .wrap { flex-wrap: wrap; row-gap: 0; padding-top: .9rem; }
  html:not(.js) .nav { flex-wrap: wrap; gap: .1rem 1.25rem; flex-basis: 100%; padding-bottom: .75rem; }
  html:not(.js) .mega { display: none; }
}

/* ---------- Hero ---------- */
.hero { padding-block: clamp(3rem, 7vw, 6rem) clamp(3.5rem, 7vw, 6rem); overflow-x: clip; }
/* The product card carries a sidebar plus four figures, so the visual column
   gets the larger share and the gap between columns is tightened. At the old
   1.08fr with a 7.5rem gap the card was too narrow for its own content. */
.hero .wrap { --hgap: clamp(2.5rem, 6vw, 5.5rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr); gap: var(--hgap); align-items: center; }
/* Entrances are kept short: the headline is readable within half a second. */
.hero-copy > * { animation: up .5s cubic-bezier(.2, .7, .2, 1) both; }
.hero-copy > :nth-child(2) { animation-delay: .04s; } .hero-copy > :nth-child(3) { animation-delay: .08s; } .hero-copy > :nth-child(4) { animation-delay: .12s; }
@keyframes up { from { opacity: 0; transform: translateY(16px); } }
/* text-wrap: pretty keeps a single word from being left alone on the last
   line. Browsers without it simply wrap as before. */
.hero p.lede { margin-top: 1.75rem; font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--muted); max-width: 34ch; text-wrap: pretty; }
.head p, .outcomes p, .caps p, .ladder p { text-wrap: pretty; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2.25rem; }
.assure { display: flex; flex-wrap: wrap; margin-top: 3rem; font-size: .95rem; font-weight: 500; color: var(--muted); }
.assure li { display: inline-flex; align-items: center; gap: .45rem; padding: .2rem 1.1rem .2rem 0; margin-right: 1.1rem; border-right: 1px solid var(--line); }
.assure li:last-child { border: 0; margin: 0; padding-right: 0; }
.assure .i { color: var(--green); }

/* headline lines rise out of a mask */
h1 .ln { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
h1 .ln > span { display: block; animation: lineup .6s cubic-bezier(.2, .8, .2, 1) both; }
h1 .ln:nth-child(2) > span { animation-delay: .06s; }
@keyframes lineup { from { transform: translateY(105%); } }

.hero-visual { position: relative; min-width: 0; animation: slide .7s .1s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes slide { from { opacity: 0; transform: translateX(40px); } }
/* the logo's dashes, flowing into the product */
.streams { position: absolute; left: calc(var(--hgap) * -1 + 8px); top: 9%; width: calc(var(--hgap) - 8px); height: 170px; z-index: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); mask-image: linear-gradient(90deg, transparent, #000 70%); }
.streams line { stroke-width: 7; stroke-linecap: round; animation: stream linear infinite; }
@keyframes stream { to { stroke-dashoffset: calc(var(--p) * -1px); } }

/* soft colour field behind the product, in the logo colours */
/* The blur sits on each blob rather than on the container, and the drift is
   translate-only. That way every blob is its own compositor layer and the
   browser moves finished pixels instead of re-blurring a huge area each
   frame -- the single biggest frame-cost saving on the page. */
.aurora { position: absolute; inset: -12% -30% -12% -6%; z-index: 0; pointer-events: none; opacity: .5; }
.aurora i { position: absolute; border-radius: 50%; filter: blur(56px); will-change: transform;
  animation: drift 18s ease-in-out infinite alternate; }
.aurora i:nth-child(1) { width: 42%; aspect-ratio: 1; right: 18%; top: 0; background: #F57C00; opacity: .55; }
.aurora i:nth-child(2) { width: 46%; aspect-ratio: 1; left: 10%; top: 30%; background: #D9117A; opacity: .4; animation-delay: -5s; }
.aurora i:nth-child(3) { width: 44%; aspect-ratio: 1; right: 8%; bottom: 0; background: #0B63E5; opacity: .45; animation-delay: -9s; }
@keyframes drift { to { transform: translate3d(7%, -9%, 0); } }

/* a band of logo colour travels round the product frame. The colour is a
   square layer behind the card, larger than the card's diagonal, turning on
   the GPU; the card clips it to its 1.5px edge. Rotating a layer costs no
   repaint, where animating the gradient's angle repainted every frame.
   The card is held at 100% of its column, so its corner is the column's. */
.app-frame { position: relative; z-index: 1; width: 100%; padding: 1.5px; border-radius: 16.5px; box-shadow: var(--shadow);
  background: var(--line); overflow: hidden; isolation: isolate; }
.app-frame::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 250%; aspect-ratio: 1;
  translate: -50% -50%; background: conic-gradient(var(--line) 0 62%, #F57C00, #D9117A, #0B63E5, #0D9488, var(--line) 100%);
  animation: orbit 9s linear infinite; }
@keyframes orbit { to { rotate: 360deg; } }

/* the logo's spark, on the dashboard's top-right corner */
.sparkle { position: absolute; z-index: 3; right: -27px; top: -27px; width: 54px; height: 54px; filter: drop-shadow(0 6px 14px rgba(217, 17, 122, .35)); animation: twinkle 3.2s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { transform: scale(.86) rotate(0deg); } 50% { transform: scale(1.08) rotate(18deg); } }

.app { position: relative; background: var(--surface); border-radius: 15px; overflow: hidden; font-size: .84rem; line-height: 1.45; }
.app-bar { display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem; border-bottom: 1px solid var(--line); }
.app-bar b { font: 600 .95rem/1 var(--display); }
/* The application mark: brand tile with the product's own glyph, rather than
   a blank square of colour. */
.app-bar .app-dot { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px;
  background: var(--accent); color: #fff; font-size: 12px; flex: none; }
.app-bar span { padding-left: .75rem; border-left: 1px solid var(--line); color: var(--muted); }
.app-bar img { height: 22px; width: auto; }
.app-body { display: grid; grid-template-columns: 188px 1fr; }
.app-nav { padding: .85rem .6rem; border-right: 1px solid var(--line); background: var(--bg-alt); }
.app-nav li { display: flex; align-items: center; gap: .55rem; padding: .48rem .6rem; border-radius: 8px; color: var(--muted); font-weight: 500; white-space: nowrap; }
.app-nav li.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(14, 26, 47, .08); }
.app-nav li.on .i { color: var(--accent); }
.app-nav .i { width: 16px; height: 16px; }
.app-nav p { padding: .9rem .6rem .35rem; font-size: .72rem; font-weight: 600; color: var(--muted); }
.app-main { padding: 1.1rem; display: grid; gap: .9rem; min-width: 0; }
.app-main .app-h { display: block; font: 600 1.05rem/1.25 var(--display); letter-spacing: -0.012em; }
.app-main .app-h + p { color: var(--muted); font-size: .8rem; }
.kpis { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border: 1px solid var(--line); border-radius: 12px; }
.kpis div { padding: .8rem .95rem; border-right: 1px solid var(--line); }
.kpis div:last-child { border: 0; }
.kpis span { display: block; color: var(--muted); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpis b { display: block; font: 600 1.45rem/1.2 var(--display); letter-spacing: -0.02em; }
.kpis small { display: block; color: var(--green-ink); font-weight: 600; font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Four figures across a card this wide left every label truncated to
   "Appoin...". Two by two gives each one roughly double the room, which is
   what a real dashboard does at this size. Used by the home hero; the
   application pages show three figures and are fine in a single row. */
.kpis.quad { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
.kpis.quad div { border-right: 0; border-bottom: 1px solid var(--line); }
.kpis.quad div:nth-child(odd) { border-right: 1px solid var(--line); }
.kpis.quad div:nth-last-child(-n+2) { border-bottom: 0; }

/* ---------- Skeleton placeholders ----------
   The product mockups show the layout, never data: wherever a real screen
   would hold a customer, a person or a figure, a placeholder stands in. */
.sk { position: relative; overflow: hidden; display: inline-block; vertical-align: middle; width: var(--w, 100%); max-width: 100%;
  height: .62em; border-radius: 999px; background: var(--sk); }
/* the shimmer slides with transform, so it runs on the GPU, not by repainting */
.sk::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--sk-hi), transparent);
  transform: translateX(-100%); animation: shimmer 2.4s ease-in-out infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.sk-num { display: block; width: 58%; height: 1.15rem; margin: .45rem 0 .5rem; border-radius: 7px; }
.kpis .sk:not(.sk-num) { display: block; }
.log .sk { --sk: rgba(255, 255, 255, .1); --sk-hi: rgba(255, 255, 255, .22); height: .72em; }
.panel-card { border: 1px solid var(--line); border-radius: 12px; padding: .95rem; min-width: 0; }
.panel-card > b { display: flex; align-items: baseline; gap: .75rem; font-weight: 600; margin-bottom: .6rem; }
.panel-card > b small { color: var(--muted); font-weight: 400; }
.chart { width: 100%; height: auto; }
.chart .gd { stroke: var(--line); }
.chart .ln { fill: none; stroke: url(#lg); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 640; stroke-dashoffset: 640; animation: draw 2.2s .9s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.runs { width: 100%; border-collapse: collapse; }
.runs td { padding: .55rem .5rem .55rem 0; border-top: 1px solid var(--line); white-space: nowrap; }
.runs td:nth-child(2) { color: var(--muted); }
.runs tr:first-child td { border: 0; }
.runs .dept { display: inline-flex; align-items: center; gap: .45rem; }
.runs .dept::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }

/* numbers count up once */
@property --n { syntax: "<integer>"; initial-value: 0; inherits: false; }
.count { --n: var(--to); counter-reset: n var(--n); animation: count 1.8s .7s cubic-bezier(.2, .7, .2, 1) both; }
.count::after { content: counter(n) attr(data-suffix); }
@keyframes count { from { --n: 0; } }

/* two notifications take turns */
.toast { position: absolute; z-index: 2; left: -44px; bottom: -28px; display: grid; grid-template-columns: 40px 1fr; gap: .8rem; align-items: center; padding: .9rem 1.1rem .9rem .9rem; background: var(--dark); color: #fff; border-radius: 14px; box-shadow: var(--shadow); font-size: .88rem; line-height: 1.35; animation: up .7s 1.4s both; }
.toast .spark { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(135deg, var(--orange), #D9117A); }
.toast b { display: block; font-weight: 600; } .toast small { color: var(--dark-muted); }
.toast.t1 { animation: turn1 11s 1.2s infinite both; }
.toast.t2 { animation: turn2 11s 1.2s infinite both; }
@keyframes turn1 { 0%, 3% { opacity: 0; transform: translateY(14px); } 7%, 44% { opacity: 1; transform: none; } 48%, 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes turn2 { 0%, 51% { opacity: 0; transform: translateY(14px); } 55%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(-10px); } }

/* Pause control, sitting in the product card's title bar like a window
   button. The bar keeps room for it, so nothing runs underneath. */
.motion-btn { position: absolute; z-index: 4; top: 9px; right: 40px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); cursor: pointer; transition: color .15s, border-color .15s; }
.motion-btn:hover { color: var(--ink); border-color: var(--muted); }
.motion-btn .i { width: 13px; height: 13px; stroke-width: 2.4; }
.motion-btn .i-play, .motion-paused .motion-btn .i-pause { display: none; }
.motion-paused .motion-btn .i-play { display: block; }
.js .hero-visual .app-bar { padding-right: 84px; }
.hero-visual .app-bar span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Paused: every loop on the page stops on a sensible still frame -- the same
   one people who ask for reduced motion see. One-off entrances still play. */
.motion-paused :is(.aurora i, .sparkle, .toast, .streams line, .chart .ln,
  .pipes line, .log li, .bars i, .count),
.motion-paused .app-frame::before, .motion-paused .sk::after,
.motion-paused .steps li::before, .motion-paused .log-h .status::before { animation: none !important; }
.motion-paused .chart .ln { stroke-dashoffset: 0; }
.motion-paused .toast.t2 { display: none; }

@media (max-width: 1240px) and (min-width: 1001px) { .app-body { grid-template-columns: 1fr; } .app-nav { display: none; } }
@media (max-width: 1000px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero p.lede { max-width: 46ch; }
  .streams { display: none; }
  .sparkle { right: -14px; top: -18px; width: 42px; height: 42px; }
  .aurora { inset: 4% 0; opacity: .3; }
  .toast { left: 12px; bottom: -48px; }
  .hero-visual { margin-top: 1rem; margin-bottom: 3.5rem; }
}
@media (max-width: 640px) {
  .app-body { grid-template-columns: 1fr; } .app-nav { display: none; }
  .kpis { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .kpis div { border-right: 0; border-bottom: 1px solid var(--line); }
  .kpis div:nth-child(odd) { border-right: 1px solid var(--line); }
  .kpis div:nth-last-child(-n+2):nth-child(odd), .kpis div:last-child { border-bottom: 0; }
  .toast { right: 12px; }
  .runs td { white-space: normal; }
  .runs td:nth-child(2) { display: none; }
  .assure li { border: 0; margin-right: .5rem; }
  .hero-actions .btn { width: 100%; }
}

/* ---------- Four values ---------- */
.values { border-block: 1px solid var(--line); }
.values ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.values li { padding: 2rem 1.75rem 2.1rem 0; margin-right: 1.75rem; border-right: 1px solid var(--line); }
.values li:last-child { border: 0; margin: 0; padding-right: 0; }
.values i { display: block; width: 28px; height: 7px; border-radius: 99px; margin-bottom: 1.1rem; }
.values b { display: block; font: 600 1.15rem/1.25 var(--display); letter-spacing: -0.01em; }
.values p { color: var(--muted); font-size: .975rem; margin-top: .35rem; }
@media (max-width: 900px) { .values ul { grid-template-columns: 1fr 1fr; } .values li { border-right: 0; margin: 0; padding: 1.5rem 1rem 1.5rem 0; } .values li:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }
/* Phones keep two by two: four stacked rows cost a whole screen before the first section. */
@media (max-width: 480px) { .values li { padding: 1.25rem .9rem 1.25rem 0; } .values li:nth-child(even) { padding-left: .9rem; border-left: 1px solid var(--line); }
  .values b { font-size: 1rem; } .values p { font-size: .9rem; line-height: 1.5; } .values i { margin-bottom: .8rem; } }

/* ---------- Platform: vertical tabs ---------- */
.ptabs { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.ptabs > input { position: absolute; opacity: 0; pointer-events: none; }
.plist label { display: block; padding: 1.15rem 0 1.15rem 1.25rem; border-left: 3px solid var(--line); cursor: pointer; transition: border-color .2s var(--ease), padding-left .25s var(--ease); }
.plist label b { display: block; font: 600 1.2rem/1.25 var(--display); letter-spacing: -0.01em; color: var(--muted); transition: color .2s; }
.plist label span { display: grid; grid-template-rows: 0fr; color: var(--muted); font-size: 1rem; transition: grid-template-rows .3s ease, margin .3s ease; }
.plist label span em { overflow: hidden; font-style: normal; }
.plist label:hover { padding-left: 1.5rem; }
.plist label:hover b { color: var(--ink); }
#p1:checked ~ .plist label[for="p1"], #p2:checked ~ .plist label[for="p2"], #p3:checked ~ .plist label[for="p3"], #p4:checked ~ .plist label[for="p4"], #p5:checked ~ .plist label[for="p5"], #p6:checked ~ .plist label[for="p6"] { border-color: var(--primary); }
#p1:checked ~ .plist label[for="p1"] b, #p2:checked ~ .plist label[for="p2"] b, #p3:checked ~ .plist label[for="p3"] b, #p4:checked ~ .plist label[for="p4"] b, #p5:checked ~ .plist label[for="p5"] b, #p6:checked ~ .plist label[for="p6"] b { color: var(--ink); }
#p1:checked ~ .plist label[for="p1"] span, #p2:checked ~ .plist label[for="p2"] span, #p3:checked ~ .plist label[for="p3"] span, #p4:checked ~ .plist label[for="p4"] span, #p5:checked ~ .plist label[for="p5"] span, #p6:checked ~ .plist label[for="p6"] span { grid-template-rows: 1fr; margin-top: .4rem; }
#p1:focus-visible ~ .plist label[for="p1"], #p2:focus-visible ~ .plist label[for="p2"], #p3:focus-visible ~ .plist label[for="p3"], #p4:focus-visible ~ .plist label[for="p4"], #p5:focus-visible ~ .plist label[for="p5"], #p6:focus-visible ~ .plist label[for="p6"] { outline: 3px solid var(--primary); outline-offset: 4px; }

.pscreen { display: none; background: var(--bg-alt); border-radius: 24px; padding: clamp(1.25rem, 3.5vw, 3rem); min-height: 400px; align-content: center; }
#p1:checked ~ .pscreens .pscreen:nth-child(1), #p2:checked ~ .pscreens .pscreen:nth-child(2), #p3:checked ~ .pscreens .pscreen:nth-child(3), #p4:checked ~ .pscreens .pscreen:nth-child(4), #p5:checked ~ .pscreens .pscreen:nth-child(5), #p6:checked ~ .pscreens .pscreen:nth-child(6) { display: grid; animation: swap .4s ease both; }
@keyframes swap { from { opacity: 0; transform: translateY(10px); } }
.ui { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: clamp(1rem, 2.4vw, 1.6rem); font-size: .92rem; }
.ui-title { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-weight: 600; padding-bottom: .9rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.ui-title small { color: var(--muted); font-weight: 400; }

/* workflow */
.steps li { position: relative; display: grid; grid-template-columns: 34px 1fr auto; gap: .9rem; align-items: center; padding-bottom: 1.1rem; }
.steps li:last-child { padding-bottom: 0; }
.steps li:not(:last-child)::before { content: ""; position: absolute; left: 16px; top: 34px; bottom: 0; width: 2px; background: repeating-linear-gradient(180deg, var(--primary) 0 5px, transparent 5px 10px); animation: flowy .5s linear infinite; }
@keyframes flowy { to { background-position: 0 10px; } }
.steps .n { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--primary-tint); color: var(--primary); }
.steps b { display: block; font-weight: 600; line-height: 1.3; } .steps small { color: var(--muted); }
/* chat */
.chat { display: grid; gap: .7rem; }
.msg { max-width: 88%; padding: .7rem .95rem; border-radius: 16px; line-height: 1.45; }
.msg.me { justify-self: end; background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.msg.ai { background: var(--bg-alt); border-bottom-left-radius: 4px; }
.msg.ai ul { margin-top: .5rem; }
.msg.ai li { display: flex; justify-content: space-between; gap: 2rem; padding-block: .3rem; border-top: 1px solid var(--line); }
.msg.ai li b { font-weight: 600; }
.msg.ai small { display: block; margin-top: .55rem; color: var(--muted); }
.msg.ai { animation: up .5s .5s both; }
/* analytics */
.big { font: 700 2.4rem/1 var(--display); letter-spacing: -0.03em; display: flex; align-items: baseline; gap: .7rem; }
.bars { display: flex; align-items: flex-end; gap: 5%; height: 150px; margin-top: 1.2rem; border-bottom: 2px solid var(--line); }
.bars i { flex: 1; border-radius: 6px 6px 0 0; background: var(--primary-tint); transform-origin: bottom; animation: grow .7s cubic-bezier(.2, .8, .2, 1) both; }
.bars i:last-child { background: var(--primary); }
.bars i:nth-child(2) { animation-delay: .05s; } .bars i:nth-child(3) { animation-delay: .1s; } .bars i:nth-child(4) { animation-delay: .15s; } .bars i:nth-child(5) { animation-delay: .2s; } .bars i:nth-child(6) { animation-delay: .25s; } .bars i:nth-child(7) { animation-delay: .3s; }
@keyframes grow { from { transform: scaleY(0); } }
.axis { display: flex; justify-content: space-between; margin-top: .5rem; color: var(--muted); font-size: .8rem; }
/* integrations */
.conn li { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; padding-block: .75rem; border-top: 1px solid var(--line); }
.conn li:first-child { border: 0; padding-top: 0; } .conn li:last-child { padding-bottom: 0; }
.conn b { font-weight: 600; } .conn small { display: block; color: var(--muted); }
/* access */
.perm { width: 100%; border-collapse: collapse; }
.perm th { font-weight: 500; color: var(--muted); font-size: .84rem; padding-bottom: .6rem; text-align: center; }
.perm th:first-child, .perm td:first-child { text-align: left; font-weight: 600; }
.perm td { text-align: center; padding: .7rem 0; border-top: 1px solid var(--line); }
.perm .y, .perm .n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; }
.perm .y { background: var(--green-tint); color: var(--green); } .perm .y .i { width: 13px; height: 13px; stroke-width: 3; }
.perm .n::before { content: ""; width: 9px; height: 2px; border-radius: 2px; background: var(--line); }

@media (max-width: 900px) {
  .ptabs { grid-template-columns: minmax(0, 1fr); }
  .plist { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .plist::-webkit-scrollbar { display: none; }
  .plist label { flex: none; padding: .7rem 1.1rem; border: 1.5px solid var(--line); border-radius: 999px; }
  .plist label b { font-size: 1rem; } .plist label span { display: none; }
  #p1:checked ~ .plist label[for="p1"], #p2:checked ~ .plist label[for="p2"], #p3:checked ~ .plist label[for="p3"], #p4:checked ~ .plist label[for="p4"], #p5:checked ~ .plist label[for="p5"], #p6:checked ~ .plist label[for="p6"] { background: var(--primary-tint); }
  .pscreen { min-height: 0; }
}

/* ---------- Application modules ---------- */
/* Two columns, not four: each module carries a sentence and a list of what
   is inside it, which needs the width to stay readable. Two columns means
   two rows, so the row gap matters -- at 0 the last module of one group sat
   directly on the next group's heading. */
.groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 4vw, 3.5rem) clamp(2rem, 5vw, 4rem); }
.group h3 { display: flex; align-items: center; gap: .6rem; padding-bottom: 1rem; border-bottom: 2px solid var(--ink); }
.group h3::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.group li { padding-block: 1.05rem; border-bottom: 1px solid var(--line); }
.group li:last-child { border-bottom: 0; }
.group li b { display: block; font-weight: 600; }
.group li span { display: block; color: var(--muted); font-size: .95rem; line-height: 1.45; margin-top: .15rem; }
/* Where AI does a specific job in a module. Magenta is Clan's AI colour
   throughout, so this reads as AI rather than as the product's own accent. */
.group li small.ai { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .45rem;
  align-items: start; margin-top: .55rem; font-size: .82rem; line-height: 1.45; color: var(--magenta); }
.group li small.ai::before { content: "AI"; padding: .08rem .36rem; border-radius: 5px;
  background: var(--magenta-tint); color: var(--magenta-ink); font-weight: 650; font-size: .68rem;
  letter-spacing: .03em; line-height: 1.5; }
.ai-key { display: inline-block; padding: .04rem .32rem; border-radius: 5px; background: var(--magenta-tint);
  color: var(--magenta-ink); font-weight: 650; font-size: .72rem; letter-spacing: .03em; vertical-align: 1px; }
/* what is actually in the module, set quieter than the sentence above it */
.group li em { display: block; margin-top: .45rem; font-style: normal; font-size: .84rem;
  line-height: 1.5; color: var(--muted); }
.ai-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 2rem 3rem; margin-top: clamp(2.5rem, 5vw, 4rem); padding: clamp(1.5rem, 3.5vw, 2.75rem); border-radius: 24px; background: var(--dark); color: #fff; }
.ai-band h3 { font-size: 1.5rem; letter-spacing: -0.02em; }
.ai-band > div > p { margin-top: .6rem; color: var(--dark-muted); font-size: .975rem; }
.ai-band ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ai-band li { padding-inline: 1.75rem; border-left: 1px solid var(--dark-line); }
.ai-band li b { display: block; font: 600 1.05rem/1.3 var(--display); }
.ai-band li p { margin-top: .4rem; color: var(--dark-muted); font-size: .95rem; }
.ai-band.flush { margin-top: 0; }
@media (max-width: 1000px) { .groups { grid-template-columns: 1fr 1fr; gap: 2.5rem; } .ai-band { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .ai-band ul { grid-template-columns: 1fr; gap: 1.25rem; } .ai-band li { padding: 1.25rem 0 0; border-left: 0; border-top: 1px solid var(--dark-line); } }
@media (max-width: 560px) { .groups { grid-template-columns: 1fr; } }

/* ---------- Industries: rows, not cards ---------- */
.rows { border-top: 2px solid var(--ink); }
.row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) auto; gap: .5rem 2rem; align-items: center; padding: 1.6rem .75rem 1.6rem 0; border-bottom: 1px solid var(--line); }
.row:hover { padding-left: 1rem; background: var(--bg-alt); }
.row h3 { display: flex; align-items: center; gap: .9rem; font-size: clamp(1.35rem, 2.4vw, 1.85rem); letter-spacing: -0.025em; }
.row p { color: var(--muted); }
.row .link { color: var(--primary); }
@media (max-width: 760px) { .row { grid-template-columns: minmax(0, 1fr) auto; } .row p { grid-column: 1 / -1; grid-row: 2; padding-left: 1.75rem; } }
@media (max-width: 480px) { .row { grid-template-columns: minmax(0, 1fr); } .row .link { justify-self: start; margin-left: 1.75rem; } }

/* ---------- Architecture ---------- */
.arch { max-width: 1000px; margin-inline: auto; }
.layer { border: 1px solid var(--line); border-radius: 20px; background: var(--surface); padding: 1.5rem; }
/* Each layer is titled in plain language first, with the technical name beside
   it, so the diagram can be read without knowing the architecture vocabulary. */
.layer h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .7rem; margin-bottom: 1.15rem;
  font: 650 1.05rem/1.3 var(--display); letter-spacing: -0.012em; color: var(--ink); }
.layer h3 span { font: 500 .85rem/1.3 var(--text); letter-spacing: 0; color: var(--muted); }
.layer.core h3 { color: #fff; }
.layer.core h3 span { color: var(--dark-muted); }
.layer ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 40%), 1fr)); gap: .6rem; }
.layer li { display: flex; align-items: center; gap: .6rem; padding: .8rem .9rem; border-radius: 12px; border: 1px solid var(--line); font-weight: 600; font-size: .95rem; }
.layer.core { background: var(--dark); border-color: var(--dark); color: #fff; }

/* ---- Platform services: icon, name and what it actually does ---- */
.layer.core .svc { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.layer .svc li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: .1rem .8rem; align-items: start;
  padding: 1rem 1.05rem; border-radius: 14px; border: 1px solid var(--dark-line); background: var(--dark-2); font-weight: 400; font-size: 1rem; }
.svc-i { grid-row: 1 / 3; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px;
  background: rgba(255, 255, 255, .07); color: var(--c); }
.svc-i .i { width: 19px; height: 19px; }
.layer .svc b { font-weight: 600; font-size: .96rem; line-height: 1.3; color: #fff; }
.layer .svc li > span:last-child { color: var(--dark-muted); font-size: .86rem; line-height: 1.45; }

/* ---- Data layer: three concrete guarantees ---- */
.layer .dpts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 1.75rem; }
.layer .dpts li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: .7rem; align-items: start;
  padding: 0; border: 0; border-radius: 0; font-weight: 400; font-size: 1rem; }
.layer .dpts .i { width: 18px; height: 18px; color: var(--green); margin-top: 2px; }
.layer .dpts b { display: block; font-weight: 600; font-size: .96rem; }
.layer .dpts span { display: block; margin-top: .15rem; color: var(--muted); font-size: .88rem; line-height: 1.45; }

/* ---- The pipes, with a line saying what is flowing through them ---- */
.flow { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.25rem; }
.flow .pipes { grid-column: 2; }
.flow p { grid-column: 3; justify-self: start; max-width: 26ch; margin-left: .5rem; color: var(--muted); font-size: .88rem; line-height: 1.45; }
.pipes { display: block; width: 190px; height: 44px; margin-inline: auto; }
.pipes line { stroke-width: 6; stroke-linecap: round; animation: stream linear infinite; }

.arch-note { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: .7rem; max-width: 1000px;
  margin: 1.75rem auto 0; padding: 1rem 1.25rem; border-radius: 14px; background: var(--primary-tint);
  font-size: .975rem; line-height: 1.55; }
.arch-note .i { width: 18px; height: 18px; color: var(--primary); margin-top: 3px; stroke-width: 2.4; }

@media (max-width: 900px) {
  .layer.core .svc { grid-template-columns: 1fr 1fr; }
  .layer .dpts { grid-template-columns: 1fr; gap: .9rem; }
  /* Stacked: the label drops under the pipes, so it needs its own breathing
     room before the next layer card starts. */
  .flow { grid-template-columns: 1fr; gap: .5rem; padding-bottom: .9rem; }
  .flow .pipes, .flow p { grid-column: 1; }
  .flow p { justify-self: center; text-align: center; max-width: 36ch; margin-left: 0; }
}
@media (max-width: 600px) { .layer.core .svc { grid-template-columns: 1fr; } }

/* ---------- Security ---------- */
.security { background: var(--dark); color: #fff; }
.security .grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.security h2 + p { margin-top: 1.25rem; color: var(--dark-muted); font-size: 1.125rem; max-width: 46ch; }
.certs { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; }
.certs li { display: inline-flex; align-items: center; gap: .55rem; padding: .65rem 1.05rem; border: 1px solid var(--dark-line); border-radius: 999px; font: 600 .95rem/1 var(--display); }
.certs .i { color: #5BE3A0; }
.ctrls { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.5rem; margin-top: 2.5rem; }
.ctrls div { padding-block: 1.1rem; border-top: 1px solid var(--dark-line); }
.ctrls dt { font: 600 1.02rem/1.3 var(--display); }
.ctrls dd { margin-top: .25rem; color: var(--dark-muted); font-size: .95rem; line-height: 1.5; }
.log { background: var(--dark-2); border: 1px solid var(--dark-line); border-radius: 20px; overflow: hidden; font-size: .9rem; }
.log-h { display: flex; justify-content: space-between; align-items: center; padding: 1.1rem 1.35rem; border-bottom: 1px solid var(--dark-line); font-weight: 600; }
.log-h .status { color: #5BE3A0; } .log-h .status::before { background: #5BE3A0; box-shadow: none; animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: .25; } }
.log li { display: grid; grid-template-columns: 4.4rem 1fr auto; gap: 1rem; align-items: center; padding: .95rem 1.35rem; border-bottom: 1px solid var(--dark-line); font-variant-numeric: tabular-nums; animation: rowin 10s infinite both; }
.log li:last-child { border: 0; }
.log li:nth-child(2) { animation-delay: .45s; } .log li:nth-child(3) { animation-delay: .9s; } .log li:nth-child(4) { animation-delay: 1.35s; } .log li:nth-child(5) { animation-delay: 1.8s; }
@keyframes rowin { 0% { opacity: 0; transform: translateY(8px); } 5%, 93% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.log time { color: var(--dark-muted); }
.log b { font-weight: 600; } .log small { display: block; color: var(--dark-muted); }
.log .who { padding: .22rem .55rem; border-radius: 6px; font-size: .76rem; font-weight: 600; background: rgba(255, 255, 255, .08); color: #CBD6EC; }
.log .who.ai { background: rgba(217, 17, 122, .22); color: #FF9CCB; }
@media (max-width: 960px) { .security .grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .ctrls { grid-template-columns: 1fr; } .log li { grid-template-columns: 4.2rem 1fr; } .log .who { display: none; } }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 2rem clamp(2rem, 6vw, 6rem); align-items: start; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 2px solid var(--ink); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding-block: 1.4rem; cursor: pointer; list-style: none; font: 600 1.15rem/1.3 var(--display); letter-spacing: -0.01em; transition: color .18s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--primary); }
.faq details p { padding-bottom: 1.5rem; color: var(--muted); max-width: 60ch; }
.faq-aside { margin-top: 2rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: 18px; background: var(--bg-alt); }
.faq-aside p { color: var(--muted); margin-bottom: 1.25rem; }
@media (max-width: 860px) { .faq { grid-template-columns: 1fr; } .faq-aside { margin-top: 1.25rem; } }

/* ---------- Demo ---------- */
.demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.demo h2 + p { margin-top: 1.25rem; color: var(--muted); font-size: 1.125rem; max-width: 42ch; }
.demo ol { margin-top: 2.25rem; counter-reset: s; }
.demo ol li { counter-increment: s; display: grid; grid-template-columns: 2.25rem 1fr; gap: 1rem; padding-block: .9rem; border-top: 1px solid var(--line); }
.demo ol li::before { content: counter(s); font: 700 1.1rem/1.5 var(--display); color: var(--primary); }
.demo ol b { font-weight: 600; }
.demo-note { display: flex; align-items: center; gap: .55rem; margin-top: 2rem; color: var(--muted); font-size: .9rem; }
.demo-note .i { width: 16px; height: 16px; color: var(--green); flex: none; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: clamp(1.4rem, 3vw, 2.25rem); border-radius: 24px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.field { display: grid; gap: .4rem; }
.field.wide { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: .92rem; }
.field input, .field select { width: 100%; min-height: 50px; padding: 0 .95rem; font: inherit; color: var(--ink); background: var(--bg); border: 1.5px solid var(--line); border-radius: 12px; }
.field input:focus, .field select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-tint); }
.field textarea { width: 100%; padding: .75rem .95rem; font: inherit; line-height: 1.5; color: var(--ink);
  background: var(--bg); border: 1.5px solid var(--line); border-radius: 12px; resize: vertical; }
.field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-tint); }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: .9; }
.form .btn, .form small { grid-column: 1 / -1; }
.form small { color: var(--muted); font-size: .85rem; } .form small a { text-decoration: underline; }
/* Honeypot: off screen for people, still fillable by bots. Never display:none. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 900px) { .demo { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .form { grid-template-columns: 1fr; } }

/* ---------- Region switch ---------- */
/* Amounts the region script swaps. Tabular figures so the layout does not
   shift when $39 becomes ₹599. */
.amt { font-variant-numeric: tabular-nums; }
.region { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1.25rem; }
.region > span { margin-right: .3rem; color: var(--muted); font-size: .9rem; }
.rbtn { padding: .45rem .9rem; border: 1.5px solid var(--line); border-radius: 999px; background: var(--bg);
  color: var(--muted); font: 600 .88rem/1 var(--text); cursor: pointer; transition: border-color .2s, color .2s, background-color .2s; }
.rbtn:hover { color: var(--ink); border-color: var(--muted); }
.rbtn.is-on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.rbtn:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.region-note { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: .7rem; margin-top: 1.5rem;
  padding: 1rem 1.25rem; border-radius: 14px; background: var(--bg-alt); border: 1px solid var(--line);
  color: var(--muted); font-size: .92rem; line-height: 1.55; }
.region-note .i { width: 17px; height: 17px; color: var(--green); margin-top: 3px; }
.region-note b { color: var(--ink); font-weight: 650; }

/* ---------- Founding customer band ---------- */
.founding { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center; margin-bottom: 1.75rem; padding: clamp(1.4rem, 3vw, 2.1rem);
  border-radius: 20px; background: var(--dark); color: #fff; }
.founding .status { color: #5BE3A0; margin-bottom: .9rem; }
.founding .status::before { background: #5BE3A0; box-shadow: 0 0 0 4px rgba(91, 227, 160, .18); }
.founding h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
.founding p { margin-top: .6rem; color: var(--dark-muted); line-height: 1.6; }
.founding p b { color: #fff; font-weight: 650; }
.founding ul { display: grid; gap: .55rem; }
.founding li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .9rem; align-items: baseline;
  padding: .6rem .9rem; border-radius: 12px; background: var(--dark-2); border: 1px solid var(--dark-line); }
.founding li b { font: 650 1.25rem/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.founding li span { color: var(--dark-muted); font-size: .88rem; line-height: 1.4; }
@media (max-width: 860px) { .founding { grid-template-columns: 1fr; } }

/* ---------- Pricing plans ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
.plan { display: flex; flex-direction: column; padding: clamp(1.4rem, 2.6vw, 2rem); border: 1px solid var(--line);
  border-radius: 20px; background: var(--surface); }
.plan.is-lead { background: var(--dark); border-color: var(--dark); color: #fff; position: relative; }
.plan-tag { position: absolute; top: -11px; left: clamp(1.4rem, 2.6vw, 2rem); padding: .2rem .6rem; border-radius: 6px;
  background: #D9117A; color: #fff; font-size: .7rem; font-weight: 650; letter-spacing: .03em; }
.plan h3 { font-size: 1.3rem; }
.plan > p:not([class]) { margin-top: .4rem; color: var(--muted); font-size: .95rem; line-height: 1.5; }
.plan.is-lead > p:not([class]) { color: var(--dark-muted); }
.price { display: flex; align-items: baseline; gap: .4rem; margin: 1.4rem 0 .2rem;
  font: 650 2.6rem/1 var(--display); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.price > span:not(.amt) { font: 500 .95rem/1.3 var(--text); letter-spacing: 0; color: var(--muted); }
.plan.is-lead .price > span:not(.amt) { color: var(--dark-muted); }
.price-sub { color: var(--muted); font-size: .86rem; line-height: 1.5; }
.plan.is-lead .price-sub { color: var(--dark-muted); }
.plan .btn { width: 100%; margin: 1.4rem 0 1.5rem; }
.plan.is-lead .btn-primary { background: #fff; color: var(--dark); }
.plan.is-lead .btn-primary:hover { background: var(--dark-muted); }
.plan ul { display: grid; gap: .6rem; }
.plan li { display: grid; grid-template-columns: 17px minmax(0, 1fr); gap: .6rem; align-items: start;
  font-size: .93rem; line-height: 1.45; }
.plan li .i { width: 15px; height: 15px; margin-top: 3px; color: var(--green); stroke-width: 2.6; }
.plan.is-lead li .i { color: #5BE3A0; }
.plan li b { font-weight: 650; }
.plan-head { font-weight: 650; font-size: .8rem; letter-spacing: .03em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .2rem; }
.plan.is-lead .plan-head { color: var(--dark-muted); }
@media (max-width: 960px) { .plans { grid-template-columns: 1fr; } .plan-tag { top: -11px; } }

/* seat types, side by side */
.seats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.seat { padding: clamp(1.3rem, 2.4vw, 1.8rem); border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.seat h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.seat p { color: var(--muted); line-height: 1.55; }
.seat .rate { display: block; margin-top: .9rem; font: 650 1.5rem/1 var(--display); letter-spacing: -0.03em; color: var(--ink); }
.seat .rate small { font: 500 .9rem/1 var(--text); color: var(--muted); }
@media (max-width: 760px) { .seats { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); padding-block: 4rem 2rem; font-size: .96rem; }
.foot { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 2.5rem 2rem; }
.foot > div > p { margin-top: 1rem; color: var(--muted); max-width: 28ch; }
.foot h2 { font: 600 .95rem/1 var(--text); letter-spacing: 0; margin-bottom: 1.1rem; }
.foot li + li { margin-top: .65rem; }
.foot li a { color: var(--muted); } .foot li a:hover { color: var(--primary); }
.foot-b { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 2rem; margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
.foot-b ul { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; } .foot-b li + li { margin: 0; }
@media (max-width: 900px) { .foot { grid-template-columns: 1fr 1fr; } .foot > div:first-child { grid-column: 1 / -1; } }

/* ---------- Application page ---------- */
.product { display: inline-flex; align-items: center; gap: .65rem; margin-bottom: 1.5rem; font: 600 1.15rem/1 var(--display); }
.product i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px;
  background: var(--accent); color: #fff; font-size: 14px; flex: none; }
.page-health h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); }
.teams { border-top: 2px solid var(--ink); }
.team { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1rem 3rem; padding-block: 2rem; border-bottom: 1px solid var(--line); }
.team h3 { font-size: clamp(1.3rem, 2.2vw, 1.65rem); letter-spacing: -0.02em; }
.team ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 2rem; }
.team li { display: grid; grid-template-columns: 20px 1fr; gap: .6rem; color: var(--muted); line-height: 1.45; }
.team .i { color: var(--accent); margin-top: 3px; }
@media (max-width: 900px) { .team { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .team ul { grid-template-columns: 1fr; } }

/* =========================================================
   Landing page: promise, outcomes, AI and foundations
   ========================================================= */

/* ---------- Hero additions ---------- */
.promise { display: grid; grid-template-columns: 20px 1fr; gap: .65rem; margin-top: 1.5rem; padding: .95rem 1.1rem;
  border-radius: 14px; background: var(--primary-tint); font-size: .975rem; line-height: 1.5; }
.promise .i { width: 18px; height: 18px; color: var(--primary); margin-top: 3px; stroke-width: 2.4; }
.promise b { font-weight: 650; }
.assure li:nth-child(4) .i { color: var(--primary); }

/* ---------- Outcomes: hairline-divided quadrants ---------- */
.outcomes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; }
.outcomes article { background: var(--surface); padding: clamp(1.5rem, 3vw, 2.4rem); }
.o-tag { display: inline-block; margin-bottom: 1rem; padding: .25rem .6rem; border-radius: 7px;
  background: var(--bg-alt); background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c); color: color-mix(in srgb, var(--c) 60%, var(--ink));
  font-size: .76rem; font-weight: 650; letter-spacing: .02em; text-transform: uppercase; }
.outcomes h3 { font-size: 1.22rem; margin-bottom: .6rem; }
.outcomes p { color: var(--muted); line-height: 1.6; }

.roi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center; margin-top: clamp(2rem, 4vw, 3.5rem); padding: clamp(1.6rem, 3.5vw, 2.75rem);
  border: 1px solid var(--line); border-radius: 24px; background: var(--bg-alt); }
.roi h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
.roi > div > p { margin-top: .8rem; color: var(--muted); }
.roi ol { counter-reset: r; }
.roi li { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; padding-block: 1rem; border-top: 1px solid var(--line); }
.roi li:first-child { border-top: 0; padding-top: 0; }
.roi li b { font-weight: 650; color: var(--primary); }
.roi li span { color: var(--muted); }
@media (max-width: 900px) { .outcomes { grid-template-columns: 1fr; } .roi { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .roi li { grid-template-columns: 1fr; gap: .2rem; } }

/* ---------- AI ladder: three steps, the last one carries the weight ---------- */
.ladder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.ladder article { padding: clamp(1.4rem, 2.8vw, 2rem); border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.ladder h3 { font-size: 1.25rem; margin: .9rem 0 .6rem; }
.ladder p { color: var(--muted); line-height: 1.6; }
.l-step { display: inline-block; font: 650 .85rem/1 var(--display); letter-spacing: .04em; color: var(--muted); }
.ladder .is-lead { background: var(--dark); border-color: var(--dark); color: #fff; }
.ladder .is-lead p { color: var(--dark-muted); }
.ladder .is-lead .l-step { color: #FF9CCB; }
@media (max-width: 900px) { .ladder { grid-template-columns: 1fr; } }

/* ---------- Agentic AI panel inside the platform tabs ---------- */
.agent li { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; padding-block: .8rem; border-top: 1px solid var(--line); }
.agent li:first-child { border-top: 0; padding-top: 0; }
.agent b { display: flex; align-items: center; gap: .5rem; font-weight: 650; font-size: .88rem; color: var(--c); }
.agent b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.agent span { color: var(--ink); line-height: 1.5; }
.agent em { font-style: normal; color: var(--muted); }
.agent .hold span { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.agent-note { display: flex; align-items: center; gap: .55rem; margin-top: 1.1rem; padding-top: 1rem;
  border-top: 1px solid var(--line); color: var(--muted); font-size: .86rem; }
.agent-note .i { width: 16px; height: 16px; color: var(--green); flex: none; }
@media (max-width: 560px) { .agent li { grid-template-columns: 1fr; gap: .3rem; } }

/* ---------- Enterprise foundations ---------- */
.caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.caps article { padding: clamp(1.4rem, 2.8vw, 2rem); border: 1px solid var(--line); border-radius: 20px;
  background: var(--surface); transition: opacity .66s var(--ease), transform .66s var(--ease), translate .3s var(--ease), box-shadow .3s var(--ease); }
.caps article:hover { translate: 0 -3px; box-shadow: var(--shadow); }
.c-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; margin-bottom: 1.1rem;
  background: var(--bg-alt); background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--c); }
.c-ico .i { width: 20px; height: 20px; }
.caps h3 { font-size: 1.18rem; margin-bottom: .55rem; }
.caps p { color: var(--muted); line-height: 1.6; font-size: .975rem; }
@media (max-width: 1000px) { .caps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .caps { grid-template-columns: 1fr; } }

/* ---------- Support strip ---------- */
.strip { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.5rem; margin-top: 2.5rem;
  padding: 1.15rem 1.4rem; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-alt); }
.strip p { flex: 1 1 22rem; color: var(--muted); }
.strip p b { color: var(--ink); font-weight: 650; }
/* Sits inside the .alt demo section, so it needs the lighter surface to read
   as a card rather than disappearing into the background. */
.strip.support { background: var(--surface); margin-top: 2rem; align-items: flex-start; }
.strip.support .status { margin-top: .2rem; }
.strip.support p { flex: 1 1 16rem; }

/* ---------- Foundations: bento ---------- */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.bento article { display: flex; flex-direction: column; padding: clamp(1.4rem, 2.8vw, 2rem); border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.bento .b-wide { grid-column: span 2; }
.bento article { transition: opacity .66s var(--ease), transform .66s var(--ease), translate .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.bento article:hover { translate: 0 -3px; box-shadow: var(--shadow); }
.bento article:not(.b-lead):hover { border-color: color-mix(in srgb, var(--primary) 30%, var(--line)); }
.bento h3 { font-size: 1.18rem; margin-bottom: .55rem; }
.bento p { max-width: 54ch; color: var(--muted); font-size: .975rem; line-height: 1.6; text-wrap: pretty; }
/* The lead cell wears the logo's gradient as its border: the brand colour
   carried below the hero, once, where it marks the idea everything rests on. */
.bento .b-lead { border: 1.5px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--brand-gradient) border-box; }
.tenants, .chips, .app-marks { margin-top: auto; padding-top: 1.5rem; }
.tenants { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.tenants span { display: flex; align-items: center; gap: .5rem; min-width: 0; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-alt); font-size: .86rem; font-weight: 600; }
.tenants .i { width: 15px; height: 15px; color: var(--green); }
.tenants .t-group { grid-column: 1 / -1; border-color: transparent; background: var(--primary-tint); }
.tenants .t-group .i { color: var(--primary); }
.tenants .t-group small { margin-left: auto; color: var(--muted); font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips li { padding: .4rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-alt); font-size: .84rem; font-weight: 600; }
.app-marks { display: flex; flex-wrap: wrap; gap: .6rem; }
.app-marks li { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--c); color: #fff; font-size: 20px; }
@media (max-width: 1000px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .bento .b-wide { grid-column: 1 / -1; }
  .bento .b-wide:last-child { grid-column: auto; }
}
@media (max-width: 680px) {
  .bento { grid-template-columns: 1fr; }
  .tenants { display: flex; flex-wrap: wrap; }
  .tenants .t-group { flex-basis: 100%; }
}

/* ---------- Founding band: shared by home and pricing ---------- */
.founding { position: relative; overflow: hidden; }
.founding::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--brand-gradient); }
.founding-home { margin: clamp(2.5rem, 5vw, 4rem) 0 0; }
.founding-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 1rem 1.75rem; }
.founding .btn-primary { background: #fff; color: var(--dark); }
.founding .btn-primary:hover { background: var(--dark-muted); }
.founding .link, .founding .link:hover { color: #fff; }
@media (max-width: 860px) { .founding-cta { justify-content: flex-start; } }
.section.flush-top { padding-top: 0; }

/* ---------- Pricing: every feature, side by side ---------- */
.compare { margin-top: 1.75rem; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); overflow: hidden; }
.compare summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.4rem; cursor: pointer; list-style: none;
  font: 600 1.05rem/1.3 var(--display); letter-spacing: -0.01em; transition: color .18s; }
.compare summary:hover { color: var(--primary); }
.compare summary::-webkit-details-marker { display: none; }
.compare summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; transition: transform .25s; }
.compare[open] summary::after { transform: rotate(45deg); }
.compare-scroll { overflow-x: auto; border-top: 1px solid var(--line); }
.compare table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .93rem; line-height: 1.45; }
.compare th, .compare td { padding: .8rem 1.1rem; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare thead th { border-top: 0; font: 650 1rem/1.3 var(--display); }
.compare tbody th { width: 34%; font-weight: 500; }
.compare td { color: var(--muted); }
/* the recommended plan's column is shaded, as on the cards */
.compare tr > :nth-child(3) { background: var(--bg-alt); }
.compare .grp th { padding-top: 1.3rem; background: var(--surface); color: var(--muted); font-size: .76rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; }
/* "Included" and "Not included" stay in the text for screen readers; the eye gets a tick or a dash. */
.compare td.y, .compare td.n { font-size: 0; }
.compare td.y::before { content: ""; display: inline-block; width: 6px; height: 11px; margin: 2px 0 0 4px; border: solid var(--green-ink); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.compare td.n::before { content: ""; display: inline-block; width: 10px; height: 2px; margin-top: 10px; border-radius: 2px; background: var(--muted); opacity: .6; }
.compare thead th:first-child, .compare tbody th { position: sticky; left: 0; z-index: 1; background: var(--surface); }

/* ---------- Pricing: estimator ---------- */
.calc { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start;
  padding: clamp(1.4rem, 3vw, 2.25rem); border: 1px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: var(--shadow); }
.calc-in { display: grid; gap: 1.4rem; }
.calc .field small { color: var(--muted); font-size: .86rem; }
.seg { display: flex; flex-wrap: wrap; gap: .5rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.seg legend { width: 100%; margin-bottom: .45rem; padding: 0; font-weight: 600; font-size: .92rem; }
.seg label { position: relative; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.15rem; border: 1.5px solid var(--line); border-radius: 999px;
  color: var(--muted); font-weight: 600; font-size: .95rem; transition: background-color .15s, color .15s, border-color .15s; }
.seg input:hover + span { border-color: var(--muted); color: var(--ink); }
.seg input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.seg input:focus-visible + span { outline: 3px solid var(--primary); outline-offset: 3px; }
.seg input:disabled { cursor: not-allowed; }
.seg input:disabled + span { opacity: .45; }
.check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: .7rem; align-items: start; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--primary); cursor: pointer; }
.check span { color: var(--muted); font-size: .9rem; line-height: 1.45; }
.check b { display: block; color: var(--ink); font-size: 1rem; font-weight: 600; }
.calc-out { display: grid; gap: .45rem; align-content: start; padding: clamp(1.3rem, 2.6vw, 1.9rem); border-radius: 18px; background: var(--dark); color: #fff; }
.calc-plan { color: var(--dark-muted); font-size: .9rem; font-weight: 600; }
.calc-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.calc-total b { font: 650 clamp(2.4rem, 4.4vw, 3.3rem)/1 var(--display); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.calc-total span, .calc-year { color: var(--dark-muted); }
.calc-year { font-size: .95rem; font-variant-numeric: tabular-nums; }
.calc-lines { margin: .7rem 0 .2rem; border-top: 1px solid var(--dark-line); }
.calc-lines li { display: flex; justify-content: space-between; gap: 1rem; padding-block: .6rem; border-bottom: 1px solid var(--dark-line); font-size: .92rem; font-variant-numeric: tabular-nums; }
.calc-lines span { color: var(--dark-muted); }
.calc-note { color: #5BE3A0; font-size: .9rem; line-height: 1.5; }
.calc-note:empty { display: none; }
.calc-out .btn { margin-top: .8rem; background: #fff; color: var(--dark); }
.calc-out .btn:hover { background: var(--dark-muted); }
.calc-fine { color: var(--dark-muted); font-size: .82rem; line-height: 1.5; }
@media (max-width: 860px) { .calc { grid-template-columns: 1fr; } }

/* ---------- Enquiry forms: invalid and sent ---------- */
.field :is(input, select, textarea):user-invalid { border-color: var(--danger); }
.field :is(input, select, textarea):user-invalid:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 18%, transparent); }
.form.is-done { display: block; }
.form-done { display: grid; justify-items: start; gap: .8rem; padding: clamp(.5rem, 2vw, 1.5rem) 0; outline: none; }
.form-done-i { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--green-tint); color: var(--green-ink); }
.form-done-i .i { width: 24px; height: 24px; stroke-width: 2.6; }
.form-done h3 { font-size: 1.5rem; }
.form-done p { color: var(--muted); }
.form-done .btn { margin-top: .4rem; }
.form-done-sub { font-size: .9rem; }
.motion-toggle { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.motion-toggle:hover { color: var(--primary); }

/* ---------- Section labels ----------
   The small pill above a section title: names the section at a glance. */
.kicker { display: inline-flex; align-items: center; gap: .5rem; width: max-content; max-width: 100%; margin-bottom: 1.1rem;
  padding: .32rem .8rem .32rem .65rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  color: var(--muted); font-size: .8rem; font-weight: 600; letter-spacing: .01em; line-height: 1.3; }
.kicker::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-gradient); }
/* .head p sizes the section intro; the label inside .head keeps its own size */
.head .kicker { grid-column: 1 / -1; justify-self: start; max-width: max-content; margin-bottom: -.25rem;
  padding: .32rem .8rem .32rem .65rem; font-size: .8rem; }
.security .kicker { border-color: var(--dark-line); background: rgba(255, 255, 255, .04); color: var(--dark-muted); }

::selection { background: var(--primary-tint); }

/* ---------- Content pages: about, trust, legal, 404 ---------- */
.page-head { padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(2.5rem, 5vw, 4rem); }
.page-head h1 { max-width: 19ch; }
.page-head .eyebrow { display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1.4rem; color: var(--muted); font-weight: 600; }
.page-head .eyebrow .i { color: var(--primary); }
.page-head .lede { margin-top: 1.5rem; max-width: 54ch; color: var(--muted); font-size: clamp(1.1rem, 1.6vw, 1.3rem); text-wrap: pretty; }
.page-head .hero-actions { margin-top: 2rem; }
.prose { max-width: 72ch; padding-bottom: clamp(4rem, 9vw, 7rem); }
.prose h2 { margin: 2.75rem 0 .8rem; font-size: clamp(1.35rem, 2.4vw, 1.7rem); }
.prose p, .prose ul { margin-top: .9rem; color: var(--muted); }
.prose ul { padding-left: 1.25rem; list-style: disc; }
.prose li + li { margin-top: .45rem; }
.prose a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.prose b { color: var(--ink); font-weight: 600; }
.prose .updated { margin-top: 0; font-size: .95rem; }
.founding-home:first-child { margin-top: 0; }
.ai-band .four { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.75rem; }
@media (max-width: 720px) { .ai-band .four { grid-template-columns: 1fr; row-gap: 1.25rem; } }
.security .grid > .ctrls { margin-top: 0; }

/* =========================================================
   Scroll motion
   Reveals work the same way in every browser: the head script puts
   .js-reveal on <html>, and site.js adds .in to each element as it enters
   the screen, so it fades in once and then stays fully visible.

   With JavaScript off, motion reduced, or site.js not arriving within
   three seconds, .js-reveal is never set (or is removed) and the page
   simply shows. The progress bar uses a native scroll timeline where the
   browser has one, and a small rAF-throttled listener where it does not.
   ========================================================= */
.progress { display: none; }

@media (prefers-reduced-motion: no-preference) {

  @supports (animation-timeline: scroll()) {
    .progress { display: block; position: fixed; z-index: 80; left: 0; right: 0; top: env(safe-area-inset-top, 0px); height: 3px; transform-origin: 0 50%;
      background: linear-gradient(90deg, #F57C00, #D9117A, #0B63E5, #0D9488, #1B9E55);
      animation: progress linear both; animation-timeline: scroll(root); }
    @keyframes progress { from { transform: scaleX(0); } }
  }

  /* :where() holds the hiding rule at one class of specificity, so the .in
     rule below always outranks it. Written plainly, ".js-reveal .values li"
     scores higher than ".js-reveal .in" and the item could never appear. */
  .js-reveal :where(.head, .rows .row, .team, .group, .ai-band, .arch .layer,
                    .security .log, .form, .ptabs,
                    .outcomes article, .roi, .ladder article, .caps article, .bento article, .strip, .founding, .calc) {
    opacity: 0; transform: translateY(26px);
    transition: opacity .66s var(--ease), transform .66s var(--ease); }
  .js-reveal .in { opacity: 1; transform: none; }
  /* a short stagger so grouped items arrive in sequence, not as a slab */
  .js-reveal .rows .row:nth-child(2),
  .js-reveal .arch .layer:nth-child(2) { transition-delay: .07s; }
  .js-reveal .rows .row:nth-child(3),
  .js-reveal .arch .layer:nth-child(3) { transition-delay: .14s; }
  .js-reveal .rows .row:nth-child(4) { transition-delay: .21s; }
  .js-reveal .rows .row:nth-child(5) { transition-delay: .28s; }
  .js-reveal .rows .row:nth-child(6) { transition-delay: .35s; }

  /* progress bar without a native scroll timeline, driven by --sp from site.js */
  .js-reveal .progress { display: block; position: fixed; z-index: 80; left: 0; right: 0; top: env(safe-area-inset-top, 0px); height: 3px;
    transform-origin: 0 50%; transform: scaleX(var(--sp, 0));
    background: linear-gradient(90deg, #F57C00, #D9117A, #0B63E5, #0D9488, #1B9E55); }
}

/* ---------- Refinements that need no JS and work in every browser ---------- */
/* One transition list for the rows: they are also revealed on scroll, and a
   shorter list here would cancel the reveal's fade. The hover nudge uses the
   separate translate property so it never fights the reveal's transform. */
.row { transition: opacity .66s var(--ease), transform .66s var(--ease), translate .25s var(--ease), padding .25s var(--ease), background-color .25s var(--ease); }
.rows .row:hover { translate: 4px 0; }
.brand img { transition: transform .4s var(--ease); }
.brand:hover img { transform: rotate(-8deg) scale(1.06); }

/* ---------- Performance: stop work that nobody is looking at ----------
   The script toggles .idle on a section once it leaves the viewport.
   Every looping animation inside it parks until it scrolls back.  */
.idle .aurora i, .idle .app-frame::before, .idle .sparkle, .idle .toast,
.idle .streams line, .idle .chart .ln, .idle .steps li::before,
.idle .sk::after, .idle .pipes line,
.idle .log li, .idle .log-h .status::before,
.idle .bars i, .idle .count { animation-play-state: paused; }

/* ---------- Older browsers ---------- */
@supports not (overflow: clip) {
  body { overflow-x: hidden; }
  .hero { overflow: hidden; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .chart .ln { stroke-dashoffset: 0; }
  .toast.t2 { display: none; }
  .count { --n: var(--to); }
}