/* ==========================================================================
   COMSKY — MASTER BRAND LAYER
   A second, independent visual language for the ecosystem homepage.

   Why a separate file: the nine product pages are finished and must not move.
   site.css owns them (paper-white, --brand #6c4cf1, Plus Jakarta Sans). This
   layer sits ON TOP for the master homepage only, and everything here is
   namespaced .m-* or scoped under .master, so nothing can leak into a product
   page. The brand hue and the type family carry across deliberately — that is
   what makes Comsky -> Product feel like one company rather than two.

   Where v1 is dense and light throughout, the master brand is CINEMATIC:
   a midnight hero, a bright airy middle, a midnight close. More air, larger
   type, fewer words, and one idea per screen.
   ========================================================================== */

.master {
  /* Brand values are the Comsky Suite design canvas's, not invented here:
     the deep ground #100d31 and its gradient stops, ink #14123a, muted
     #55527a, rule #ddd9ee, indigo #4f46e5, and Outfit over Sora. */
  --m-ink: #f6f5fb;
  --m-ink-2: #ffffff;
  --m-ink-3: #ecebf7;
  --m-ink-hi: #1e3a8a;
  --m-line-d: #ddd9ee;
  --m-line-d2: #cdc8e6;
  --m-fg-d: #14123a;
  --m-fg-d2: #55527a;
  --m-fg-d3: #66627f;
  /* These four are literals on purpose. An earlier sweep that turned every
     #fff into var(--m-hi) rewrote this line into --m-hi: #ffffff — a
     self-reference, which computes to nothing, and took the nav links, the
     close-band button and the inverse text with it on both dark themes. */
  --m-hi: #14123a;
  --m-surface: #ffffff;
  --ac-t: var(--ac-d, var(--ac));
  --m-inverse-bg: #14123a; /* a band that must stay dark in every theme */
  --m-inverse-fg: #ffffff;
  --m-nav-bg: rgba(246,245,251,.88);

  --m-paper:    #ffffff;
  --m-paper-2:  #f6f5fb;
  --m-line:     #ddd9ee;
  --m-fg:       #14123a;
  --m-fg-2:     #55527a;
  /* 4.91:1 on the light ground, 5.33:1 on white. #7c799c read 4.14:1 — under
     the 4.5:1 floor for the 13px captions that use it. */
  --m-fg-3:     #6b6885;

  --m-brand: #2563eb;
  --m-brand-d: #1d4ed8;
  --m-logo-accent: #1e3a8a;   /* the SKY in the wordmark — deeper than the brand */
  --m-brand-l: #2563eb;
  --m-cyan: #60a5fa;

  --m-display: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  --m-body: 'Sora', 'Segoe UI', system-ui, sans-serif;
  /* Matches the stack in `.m-mono`. It needed a token because the supporting
     pages set the monospace face inline, on a table cell the class does not
     reach. */
  --m-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Two one-off accents the supporting pages use inline and the theme had no
     name for: the rule around a "not in force yet" notice on the legal pages,
     and the ground behind a green status pill (its text is #0b7a55). */
  --m-warn: #d97706;
  --m-pos-soft: #d1fae5;

  --m-r:   18px;
  --m-r-l: 28px;
  --m-max: 1240px;
  --m-ease: cubic-bezier(.22,1,.36,1);

  background: var(--m-paper);
  color: var(--m-fg);
  font-family: var(--m-body);
}

/* Outfit carries every display and UI voice; Sora carries running text. */
.m-h1, .m-h2, .m-h3, .m-btn, .m-logo b, .m-navlinks a, .m-navlinks button,
.m-drop-top .m-drop-title, .m-prow b, .m-card h3, .m-card .m-cat, .m-card-cta, .m-tag,
.m-dtile h3, .m-tile b, .m-foot h2, .m-x-head h2, .m-panel h3, .m-caps h3, .m-need b, .m-tier h3, .m-tier .pr, .m-faq summary,
.m-panel h4, .m-panel span, .m-need-panel h3, .m-foot h5, .m-pnav-brand b,
.m-pnav-links a, .m-vs thead th, .m-vs tbody td:first-child, .m-sun b,
.m-pl-lbl b, .m-kicker, .m-screen-bar b, .m-screen-row b {
  font-family: var(--m-display);
}

html, body { margin: 0; padding: 0; }
.m-wrap { max-width: var(--m-max); margin: 0 auto; padding: 0 30px; }
.m-mono { font: 500 11px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .18em; text-transform: uppercase; }

/* type scale — bigger and tighter than v1, one idea per screen */
.m-h1 { font-size: clamp(42px, 6.2vw, 82px); line-height: .98; letter-spacing: -.05em; font-weight: 800; margin: 0; }
.m-h2 { font-size: clamp(30px, 4vw, 52px); line-height: 1.04; letter-spacing: -.042em; font-weight: 800; margin: 0; }
.m-h3 { font-size: clamp(20px, 2vw, 25px); line-height: 1.2; letter-spacing: -.03em; font-weight: 700; margin: 0; }
.m-lede { font-size: clamp(16.5px, 1.35vw, 19.5px); line-height: 1.62; color: var(--m-fg-2); margin: 20px 0 0; }
.master .on-dark .m-lede, .m-dark .m-lede { color: var(--m-fg-d2); }
.m-grad { background: linear-gradient(100deg, var(--m-brand-l), var(--m-cyan) 50%, #efedff 72%, var(--m-brand-l));
  -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ── buttons ─────────────────────────────────────────────── */
.m-btn { display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 24px; border-radius: 99px;
  font: 700 15px/1 var(--m-body); letter-spacing: -.01em; text-decoration: none; border: 1px solid transparent;
  transition: transform .3s var(--m-ease), box-shadow .3s var(--m-ease), background .2s, border-color .2s; white-space: nowrap; }
.m-btn .ar { transition: transform .3s var(--m-ease); }
.m-btn:hover .ar { transform: translateX(4px); }
.m-btn-p { background: linear-gradient(180deg, #6159e8, var(--m-brand-d)); color: #fff;
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 25%, transparent) inset, 0 14px 34px -14px rgba(79,70,229,.85); }
.m-btn-p:hover { transform: translateY(-2px); box-shadow: 0 1px 0 color-mix(in srgb, #fff 25%, transparent) inset, 0 20px 44px -16px rgba(79,70,229,.95); }
.m-btn-g { border-color: var(--m-line); background: #fff; color: var(--m-fg); }
.m-btn-g:hover { transform: translateY(-2px); border-color: rgba(10,8,30,.22); }
.m-btn-d { border-color: var(--m-line-d2); background: color-mix(in srgb, var(--m-hi) 7%, transparent); color: var(--m-hi); backdrop-filter: blur(8px); }
.m-btn-d:hover { background: color-mix(in srgb, var(--m-hi) 14%, transparent); transform: translateY(-2px); }
.m-btn-sm { height: 38px; padding: 0 18px; font-size: 14px; }

/* ── sections ────────────────────────────────────────────── */
.m-sec { padding: 86px 0; position: relative; }
.m-sec-tight { padding: 66px 0; }
.m-dark { background: var(--m-ink); color: var(--m-fg-d); }
.m-tint { background: var(--m-paper-2); }
.m-eyebrow { color: var(--m-brand-d); }
.m-dark .m-eyebrow { color: var(--m-brand-l); }
.m-head { max-width: 760px; }
.m-head.mid { margin: 0 auto; text-align: center; }

/* scroll reveal — progressive enhancement, content renders without JS */
.js .m-rv { opacity: 0; transform: translateY(24px); transition: opacity .75s var(--m-ease), transform .75s var(--m-ease); }
.js .m-rv.in { opacity: 1; transform: none; }

/* ── master nav ──────────────────────────────────────────── */
.m-nav { position: sticky; top: 0; z-index: 90; background: var(--m-nav-bg); backdrop-filter: blur(20px) saturate(1.6);
  border-bottom: 1px solid transparent; transition: background .35s var(--m-ease), border-color .3s, box-shadow .3s; }
.m-nav.stuck { border-bottom-color: var(--m-line); box-shadow: 0 8px 30px -22px rgba(20,10,60,.55); }

/* Over a dark hero the bar is part of the hero, not a white lid on top of it.
   `.on-dark` is set on load when the first section is .m-hero, and removed the
   moment you scroll past that hero. */
/* NOT transparent: the bar is sticky and therefore IN FLOW, sitting in its own
   band above the hero — transparent shows the white page behind it, not the
   hero. Painting it the hero's own ground removes the seam for real. */
.m-nav.on-dark { background: var(--m-ink); backdrop-filter: none; border-bottom-color: transparent; box-shadow: none; }
.m-nav.on-dark .m-logo { color: var(--m-hi); }
.m-nav.on-dark .m-navlinks a, .m-nav.on-dark .m-navlinks button { color: color-mix(in srgb, var(--m-hi) 76%, transparent); }
.m-nav.on-dark .m-navlinks a:hover, .m-nav.on-dark .m-navlinks button:hover,
.m-nav.on-dark .m-navlinks [data-open='true'] > button { background: color-mix(in srgb, var(--m-hi) 10%, transparent); color: var(--m-hi); }
.m-nav.on-dark .m-btn-g { background: color-mix(in srgb, var(--m-hi) 8%, transparent); border-color: color-mix(in srgb, var(--m-hi) 22%, transparent); color: var(--m-hi); }
.m-nav.on-dark .m-btn-g:hover { background: color-mix(in srgb, var(--m-hi) 16%, transparent); }
.m-nav-in { display: flex; align-items: center; gap: 34px; height: 72px; max-width: var(--m-max); margin: 0 auto; padding: 0 30px; }
/* The real brand assets. The wordmark ships in two cuts — ink for light
   surfaces, white for dark — and the bar swaps them with its own state
   rather than tinting one of them. */
.m-logo { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--m-fg); }
.m-logo b { font: 800 20px/1 var(--m-display); letter-spacing: -.055em; }
.m-navlinks { display: flex; gap: 3px; flex: 1; }
.m-navlinks > * { position: relative; }
.m-navlinks a, .m-navlinks button { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border: 0;
  background: none; cursor: pointer; font: 600 15px/1 var(--m-body); color: var(--m-fg-2); border-radius: 10px;
  text-decoration: none; transition: background .16s, color .16s; }
.m-navlinks a:hover, .m-navlinks button:hover, .m-navlinks [data-open='true'] > button { background: rgba(79,70,229,.08); color: var(--m-brand-d); }
.m-caret { width: 9px; height: 9px; transition: transform .25s var(--m-ease); }
.m-navlinks [data-open='true'] .m-caret { transform: rotate(180deg); }
.m-navcta { display: flex; align-items: center; gap: 12px; }

/* rich products dropdown */
.m-drop { position: absolute; left: 0; right: 0; top: 72px; background: var(--m-ink-2);
  border-top: 1px solid var(--m-line-d); backdrop-filter: blur(20px);
  box-shadow: 0 30px 70px -28px rgba(0,0,0,.75); opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity .22s, transform .3s var(--m-ease), visibility .22s; z-index: 95; max-height: calc(100vh - 72px); overflow-y: auto; }
.m-drop[data-open='true'] { opacity: 1; visibility: visible; transform: none; }
.m-drop-in { max-width: var(--m-max); margin: 0 auto; padding: 26px 30px 30px; }
.m-drop-top { display: flex; align-items: baseline; gap: 16px; margin-bottom: 18px; }
.m-drop-top .m-drop-title { margin: 0; font: 800 15px/1 var(--m-body); letter-spacing: -.02em; color: var(--m-hi); }
.m-drop-top p { margin: 0; flex: 1; color: var(--m-fg-d3); font-size: 13.5px; }
.m-drop-top a { font: 700 13.5px/1 var(--m-body); color: var(--m-brand-l); text-decoration: none; }
.m-drop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }

/* the product row — used in dropdown, spotlight strip and footer */
.m-prow { display: flex; gap: 13px; align-items: flex-start; padding: 13px; border-radius: 13px; text-decoration: none;
  color: inherit; border: 1px solid transparent; transition: background .18s, border-color .18s, transform .18s var(--m-ease); }
.m-prow:hover { background: color-mix(in srgb, var(--m-hi) 7%, transparent); border-color: var(--m-line-d); transform: translateX(3px); }
.m-pic { width: 38px; height: 38px; border-radius: 11px; flex: 0 0 auto; display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, var(--ac), var(--ac-d)); box-shadow: 0 6px 16px -8px var(--ac); }
.m-pic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* The title carries the weight; the description is support. It was 15/13 with
   the description at the same colour as body copy, so the two lines competed
   and the row read as a paragraph with a bold lead-in. */
.m-prow b { display: block; font: 700 15.5px/1.25 var(--m-body); letter-spacing: -.028em; color: var(--m-hi); }
.m-prow em { display: block; font: 400 12.8px/1.5 var(--m-body); font-style: normal; color: var(--m-fg-3); margin-top: 5px; }

/* ── hero ────────────────────────────────────────────────── */
.m-hero { position: relative; background: var(--m-ink); color: var(--m-fg-d); overflow: hidden; padding: 84px 0 64px; }
.m-hero:before { content: ''; position: absolute; inset: -40% -20% auto; height: 150%; pointer-events: none;
  background: radial-gradient(48% 40% at 50% 8%, rgba(79,70,229,.46), transparent 66%),
              radial-gradient(38% 34% at 84% 26%, rgba(129,121,246,.24), transparent 64%),
              radial-gradient(34% 32% at 12% 30%, rgba(195,189,255,.16), transparent 62%); }
.m-hero-in { position: relative; text-align: center; }
.m-hero .m-h1 { margin: 26px auto 0; max-width: 15.5em; color: var(--m-hi); }
.m-hero .m-lede { color: var(--m-fg-d2); max-width: 40em; margin-left: auto; margin-right: auto; }
.m-kicker { display: inline-flex; align-items: center; gap: 10px; padding: 8px 17px 8px 12px; border-radius: 99px;
  border: 1px solid var(--m-line-d2); background: color-mix(in srgb, var(--m-hi) 5%, transparent); color: var(--m-fg-d2); backdrop-filter: blur(10px); }
.m-kicker i { width: 6px; height: 6px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,.24); }
.m-hero-cta { display: flex; gap: 14px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }
.m-hero-fine { margin-top: 20px; color: var(--m-fg-d3); font-size: 13.5px; }

/* the constellation */
.m-const { margin-top: 26px; position: relative; }
.m-const svg { width: 100%; height: auto; display: block; overflow: visible; }
.m-orbit { animation: m-spin 64s linear infinite; transform-origin: 450px 300px; }
@keyframes m-spin { to { transform: rotate(360deg); } }
.m-flow { stroke-dasharray: 4 9; animation: m-dash 2.2s linear infinite; }
@keyframes m-dash { to { stroke-dashoffset: -26; } }
.m-node { cursor: pointer; }
.m-node rect, .m-node circle { transition: all .3s var(--m-ease); }
.m-node:hover .m-node-bg { filter: brightness(1.25); }

/* ── ecosystem cards ─────────────────────────────────────── */
.m-eco { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 52px; }
.m-card { position: relative; border-radius: var(--m-r-l); background: var(--m-surface); border: 1px solid var(--m-line);
  overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit;
  box-shadow: 0 1px 2px rgba(10,8,30,.04), 0 18px 40px -30px rgba(20,10,60,.4);
  transition: transform .4s var(--m-ease), box-shadow .4s var(--m-ease), border-color .3s; }
.m-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--ac) 40%, transparent);
  box-shadow: 0 1px 2px rgba(10,8,30,.04), 0 34px 64px -34px color-mix(in srgb, var(--ac) 65%, transparent); }
.m-card-top { padding: 26px 26px 0; display: flex; align-items: flex-start; gap: 14px; }
.m-card-top .m-pic { width: 44px; height: 44px; border-radius: 13px; }
.m-card-top .m-pic svg { width: 22px; height: 22px; }
.m-card h3 { margin: 3px 0 0; font: 800 19.5px/1.2 var(--m-body); letter-spacing: -.032em; }
.m-card .m-cat { display: block; font: 600 12.5px/1 var(--m-body); color: var(--ac-d); margin-top: 7px; letter-spacing: -.005em; }
.m-card > p { margin: 16px 26px 0; color: var(--m-fg-2); font-size: 14.8px; line-height: 1.58; }
.m-tag { position: absolute; top: 24px; right: 24px; font: 700 9.5px/1 'JetBrains Mono', monospace; letter-spacing: .1em;
  padding: 5px 9px; border-radius: 99px; color: var(--m-fg-3); background: var(--m-paper-2); border: 1px solid var(--m-line); }
.m-tag.live { color: #047857; background: rgba(16,185,129,.1); border-color: rgba(4,120,87,.22); }

/* the mini UI preview inside each card */
.m-prev { --m-hi: #fff; --m-fg-d2: #b9b3ff; --m-fg-d3: #8781b8; margin: 20px 26px 0; border-radius: 12px 12px 0 0; background: #171340; border: 1px solid #211b57;
  border-bottom: 0; padding: 13px 14px 16px; overflow: hidden; flex: 1; min-height: 132px; }
.m-prev-bar { display: flex; align-items: center; gap: 7px; padding-bottom: 10px; border-bottom: 1px solid color-mix(in srgb, var(--m-hi) 8%, transparent); margin-bottom: 11px; }
.m-prev-bar span { font: 500 9px/1 'JetBrains Mono', monospace; letter-spacing: .12em; color: var(--m-fg-d3); }
.m-prev-bar i { width: 5px; height: 5px; border-radius: 50%; background: var(--ac); flex: 0 0 auto; }
.m-prev-row { display: flex; align-items: center; gap: 9px; padding: 5px 0; }
.m-prev-row s { display: block; text-decoration: none; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--m-hi) 14%, transparent); flex: 1; }
.m-prev-row s.a { background: color-mix(in srgb, var(--ac) 70%, transparent); }
.m-prev-row b { font: 600 10.5px/1 'JetBrains Mono', monospace; color: var(--m-fg-d2); white-space: nowrap; }
.m-prev-bars { display: flex; align-items: flex-end; gap: 5px; height: 54px; }
.m-prev-bars i { flex: 1; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, var(--ac), transparent); }
.m-card-cta { padding: 16px 26px 22px; font: 700 14px/1 var(--m-body); color: var(--ac-d); display: flex; align-items: center; gap: 8px;
  border-top: 1px solid var(--m-line); background: var(--m-surface); }
.m-card:hover .m-card-cta .ar { transform: translateX(5px); }
.m-card-cta .ar { transition: transform .3s var(--m-ease); }

/* ── needs selector ──────────────────────────────────────── */
.m-needs { display: grid; grid-template-columns: 300px 1fr; gap: 28px; margin-top: 44px; align-items: start; }
.m-need-list { display: grid; gap: 7px; }
.m-need { text-align: left; border: 1px solid var(--m-line); background: var(--m-surface); border-radius: 15px; padding: 17px 19px;
  cursor: pointer; font: inherit; color: inherit; transition: all .26s var(--m-ease); display: block; width: 100%; }
.m-need b { display: block; font: 700 16px/1.2 var(--m-body); letter-spacing: -.025em; }
.m-need em { display: block; font: 500 13px/1.45 var(--m-body); font-style: normal; color: var(--m-fg-3); margin-top: 5px; }
.m-need:hover { border-color: rgba(79,70,229,.4); transform: translateX(3px); }
.m-need[aria-selected='true'] { background: var(--m-inverse-bg); border-color: var(--m-inverse-bg); color: var(--m-inverse-fg); }
.m-need[aria-selected='true'] em { color: color-mix(in srgb, var(--m-inverse-fg) 70%, transparent); }
/* Pinned, because the two columns are badly mismatched by construction: the
   rail is seven cards and the panel is one, so the rail runs roughly 200px past
   the bottom of the panel and the right-hand side of the section is empty for
   its last third. Sticky closes that gap, and it also fixes the behaviour that
   caused it — a tab at the bottom of the rail used to swap a panel that was
   scrolled off the top, so you clicked and nothing appeared to happen.
   `top` clears the sticky nav (72px) with room to breathe. */
.m-need-panel { position: sticky; top: 96px;
  border: 1px solid var(--m-line); border-radius: var(--m-r-l); background: var(--m-surface); padding: 30px; min-height: 320px;
  box-shadow: 0 1px 2px rgba(10,8,30,.04), 0 20px 46px -34px rgba(20,10,60,.4); }
.m-need-panel h3 { margin: 0; font: 800 23px/1.2 var(--m-body); letter-spacing: -.035em; }
.m-need-panel > p { margin: 12px 0 24px; color: var(--m-fg-2); font-size: 15.4px; line-height: 1.6; max-width: 46em; }
.m-need-prods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

/* ── flow ────────────────────────────────────────────────── */
/* The journey diagram. Was a dark panel with white type; light like the rest,
   with a hairline instead of the contrast the dark ground used to give it. */
.m-flowwrap { --m-hi: var(--m-fg); --m-fg-d3: var(--m-fg-3); margin-top: 46px; border-radius: var(--m-r-l);
  background: var(--m-surface); border: 1px solid var(--m-line); padding: 40px 34px; overflow-x: auto; }
.m-flowwrap svg { width: 100%; min-width: 760px; height: auto; display: block; }

/* ── strip ───────────────────────────────────────────────── */
.m-strip { display: flex; gap: 14px; overflow-x: auto; padding: 4px 4px 22px; scroll-snap-type: x mandatory; margin-top: 40px; }
.m-strip::-webkit-scrollbar { height: 6px; }
.m-strip::-webkit-scrollbar-thumb { background: var(--m-line); border-radius: 99px; }
.m-panel { flex: 0 0 258px; scroll-snap-align: start; border-radius: 20px; border: 1px solid var(--m-line-d);
  background: linear-gradient(165deg, color-mix(in srgb, var(--m-hi) 8%, transparent), color-mix(in srgb, var(--m-hi) 2%, transparent)); padding: 22px; text-decoration: none;
  color: var(--m-fg-d); transition: transform .3s var(--m-ease), border-color .3s, background .3s; }
.m-panel:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--ac) 55%, transparent);
  background: linear-gradient(165deg, color-mix(in srgb, var(--ac) 16%, transparent), color-mix(in srgb, var(--m-hi) 2%, transparent)); }
.m-panel h3 { margin: 16px 0 0; font: 700 17px/1.2 var(--m-body); letter-spacing: -.028em; color: var(--m-hi); }
.m-panel p { margin: 8px 0 18px; font-size: 13.6px; line-height: 1.5; color: var(--m-fg-d2); }
.m-panel span { font: 700 13px/1 var(--m-body); color: var(--m-brand-l); display: inline-flex; gap: 7px; align-items: center; }

/* ── industries / principles / trust ─────────────────────── */
.m-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 40px; }
.m-tile { border: 1px solid var(--m-line); border-radius: var(--m-r); background: var(--m-surface); padding: 22px;
  text-decoration: none; color: inherit; transition: transform .3s var(--m-ease), box-shadow .3s, border-color .3s; }
.m-tile:hover { transform: translateY(-3px); border-color: rgba(79,70,229,.35); box-shadow: 0 16px 34px -26px rgba(20,10,60,.5); }
.m-tile b { display: block; font: 700 16.5px/1.25 var(--m-body); letter-spacing: -.026em; }
.m-tile p { margin: 8px 0 0; font-size: 13.8px; line-height: 1.52; color: var(--m-fg-2); }
.m-tile .m-ti { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 14px;
  background: rgba(79,70,229,.1); color: var(--m-brand-d); }
.m-tile .m-ti svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; }

.m-ph { border: 1.5px dashed var(--m-line-d2); border-radius: var(--m-r); padding: 26px 20px; text-align: center;
  color: var(--m-fg-d3); font: 600 13px/1.4 var(--m-body); background: color-mix(in srgb, var(--m-hi) 2%, transparent); }
.m-ph small { display: block; font-weight: 500; font-size: 11.5px; margin-top: 6px; color: var(--m-fg-d3); opacity: .75; }

/* ── closing ─────────────────────────────────────────────── */
.m-close { position: relative; overflow: hidden; background: var(--m-inverse-bg); color: var(--m-inverse-fg); text-align: center; padding: 96px 0; }
.m-close:before { content: ''; position: absolute; inset: -50% -10% auto; height: 170%; pointer-events: none;
  background: radial-gradient(44% 46% at 50% 22%, rgba(79,70,229,.55), transparent 66%),
              radial-gradient(34% 34% at 78% 60%, rgba(195,189,255,.14), transparent 64%); }
.m-close-in { position: relative; }

/* ── deploy timeline (scrubber) ──────────────────────────── */
.m-dep { --dep: 0%; margin-top: 30px; }
.m-dep-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.m-dep-play { display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  border: 1px solid var(--m-line-d2); background: var(--m-surface); border-radius: 99px;
  padding: 8px 16px 8px 13px; font: 600 13.5px/1 var(--m-display); color: var(--m-fg); }
.m-dep-play:hover { border-color: var(--ac); }
.m-dep-play-i { width: 0; height: 0; border-left: 9px solid var(--ac); border-top: 6px solid transparent;
  border-bottom: 6px solid transparent; }
.m-dep-play.on .m-dep-play-i { width: 9px; height: 11px; border: 0;
  background: linear-gradient(90deg, var(--ac) 0 3px, transparent 3px 6px, var(--ac) 6px 9px); }
.m-dep-clock { font: 700 15px/1 'JetBrains Mono', ui-monospace, monospace; color: var(--ac-d); }

.m-dep-rail { display: block; position: relative; padding: 6px 0 18px; }
.m-dep-rail-lab { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.m-dep-rail input[type='range'] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
  border-radius: 99px; outline: none;
  background: linear-gradient(90deg, var(--ac) var(--dep), color-mix(in srgb, var(--m-fg) 11%, transparent) var(--dep)); }
.m-dep-rail input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%; background: var(--ac); border: 3px solid var(--m-surface);
  box-shadow: 0 1px 6px rgba(20,10,60,.35); cursor: pointer; }
.m-dep-rail input[type='range']::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%;
  background: var(--ac); border: 3px solid var(--m-surface); box-shadow: 0 1px 6px rgba(20,10,60,.35); cursor: pointer; }
.m-dep-rail input[type='range']:focus-visible { outline: 2px solid var(--m-brand); outline-offset: 4px; }
.m-dep-marks { position: absolute; left: 0; right: 0; top: 17px; pointer-events: none; }
.m-dep-mark { position: absolute; width: 2px; height: 7px; border-radius: 2px; transform: translateX(-1px);
  background: color-mix(in srgb, var(--m-fg) 26%, transparent); }

.m-dep-steps { list-style: none; margin: 4px 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.m-dep-jump { width: 100%; text-align: left; cursor: pointer; border: 1px solid var(--m-line);
  background: var(--m-surface); border-radius: 12px; padding: 11px 13px; font: inherit;
  transition: border-color .16s, background .16s; }
.m-dep-jump:hover { border-color: var(--ac); }
.m-dep-step.past .m-dep-jump { background: color-mix(in srgb, var(--ac) 6%, transparent); }
.m-dep-step.on .m-dep-jump { border-color: var(--ac); background: color-mix(in srgb, var(--ac) 12%, transparent); }
.m-dep-jump:focus-visible { outline: 2px solid var(--m-brand); outline-offset: 2px; }
.m-dep-at { display: block; color: var(--m-fg-3); }
.m-dep-jump b { display: block; margin-top: 5px; font: 700 13.6px/1.3 var(--m-display);
  letter-spacing: -.022em; color: var(--m-fg); }

.m-dep-now { margin: 18px 0 0; max-width: 56em; }
.m-dep-now b { display: block; font: 800 17px/1.3 var(--m-display); letter-spacing: -.028em; color: var(--m-fg); }
.m-dep-now span { display: block; margin-top: 7px; color: var(--m-fg-2); line-height: 1.62; }

/* ── isolation explorer ──────────────────────────────────── */
.m-iso { margin-top: 30px; }
.m-iso-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.m-iso-btn { border: 1px solid var(--m-line-d2); background: var(--m-surface); cursor: pointer;
  padding: 8px 15px; border-radius: 99px; font: 600 13px/1 var(--m-display); color: var(--m-fg-2);
  transition: background .16s, color .16s, border-color .16s; }
.m-iso-btn:hover { border-color: var(--ac); color: var(--m-fg); }
.m-iso-btn[aria-pressed='true'] { background: var(--ac); border-color: var(--ac); color: #fff; }
.m-iso-btn:focus-visible { outline: 2px solid var(--m-brand); outline-offset: 2px; }

.m-iso-stage { border: 1px solid var(--m-line-d2); border-radius: var(--m-r-l); padding: 22px;
  background: var(--m-paper-2); }
.m-iso-routers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.m-iso-router { border: 1px solid var(--m-line); border-radius: 12px; padding: 11px 13px; background: var(--m-surface);
  transition: opacity .22s var(--m-ease); }
.m-iso-router b { display: block; font: 700 13.5px/1 var(--m-display); letter-spacing: -.02em; }
.m-iso-router em { display: block; margin-top: 5px; font-style: normal; font-size: 12px; color: var(--m-fg-3); }
.m-iso-router.a b { color: #1d4ed8; }
.m-iso-router.b b { color: #b45309; }

.m-iso-hosts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.m-iso-host { border: 1px dashed var(--m-line-d2); border-radius: 12px; padding: 10px; background: var(--m-surface); }
.m-iso-host-n { display: block; color: var(--m-fg-3); }
.m-iso-vms { display: flex; gap: 6px; margin-top: 10px; }
.m-iso-vm { width: 22px; height: 22px; border-radius: 7px; transition: opacity .22s var(--m-ease); }
.m-iso-vm.a { background: #1d4ed8; }
.m-iso-vm.b { background: #b45309; }

/* Fading, never hiding: the other tenant is still on the host. */
.m-iso[data-show='a'] .m-iso-vm.b, .m-iso[data-show='a'] .m-iso-router.b,
.m-iso[data-show='b'] .m-iso-vm.a, .m-iso[data-show='b'] .m-iso-router.a { opacity: .17; }

.m-iso-hint { margin: 16px 0 0; font-weight: 600; color: var(--m-fg); }
.m-iso-fine { margin: 8px 0 0; max-width: 54em; color: var(--m-fg-2); font-size: 14px; line-height: 1.6; }

@media (max-width: 620px) { .m-iso-hosts { grid-template-columns: repeat(2, 1fr); } .m-iso-routers { grid-template-columns: 1fr; } }

/* ── build a machine ─────────────────────────────────────── */
.m-build { margin-top: 30px; }
.m-build-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.m-build-preset { border: 1px solid var(--m-line-d2); background: var(--m-surface); cursor: pointer;
  padding: 8px 15px; border-radius: 99px; font: 600 13.5px/1 var(--m-display); letter-spacing: -.015em;
  color: var(--m-fg-2); transition: background .16s, color .16s, border-color .16s; }
.m-build-preset:hover { color: var(--m-fg); border-color: var(--ac); }
.m-build-preset[aria-pressed='true'] { background: var(--ac); border-color: var(--ac); color: #fff; }
.m-build-preset:focus-visible { outline: 2px solid var(--m-brand); outline-offset: 2px; }

.m-build-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 28px; align-items: start; }
.m-build-controls { display: grid; gap: 22px; }
.m-build-row { display: block; }
.m-build-lab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.m-build-lab b { font: 700 15px/1 var(--m-display); letter-spacing: -.02em; color: var(--m-fg); }
.m-build-lab output { font: 700 15px/1 var(--m-display); letter-spacing: -.02em; color: var(--ac-d); }
.m-build-hint { display: block; margin-top: 8px; font-size: 12.5px; color: var(--m-fg-3); }

/* One rule for both engines rather than a WebKit-only thumb that leaves Firefox
   with the platform default in the middle of a designed control. */
.m-build-row input[type='range'] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
  border-radius: 99px; background: color-mix(in srgb, var(--m-fg) 12%, transparent); outline: none; }
.m-build-row input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%; background: var(--ac); border: 3px solid var(--m-surface);
  box-shadow: 0 1px 6px rgba(20,10,60,.35); cursor: pointer; }
.m-build-row input[type='range']::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%;
  background: var(--ac); border: 3px solid var(--m-surface); box-shadow: 0 1px 6px rgba(20,10,60,.35);
  cursor: pointer; }
.m-build-row input[type='range']:focus-visible { outline: 2px solid var(--m-brand); outline-offset: 4px; }

.m-build-note { margin: 4px 0 0; min-height: 2.6em; font-size: 13.2px; line-height: 1.55; color: var(--m-fg-2); }

.m-build-out { border: 1px solid var(--m-line-d2); border-radius: var(--m-r-l); padding: 24px;
  background: var(--m-paper-2); }
.m-build-out-k { display: block; color: var(--m-fg-3); }
.m-build-shape { margin: 12px 0 20px; font: 800 clamp(19px, 2.3vw, 24px)/1.25 var(--m-display);
  letter-spacing: -.035em; color: var(--m-fg); }
.m-build-sum { display: grid; gap: 1px; background: var(--m-line); border-radius: 12px; overflow: hidden; }
.m-build-sum-row { display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
  padding: 11px 14px; background: var(--m-surface); font-size: 13.6px; color: var(--m-fg-2); }
.m-build-sum-row b { color: var(--m-fg); font-weight: 600; text-align: right; }
.m-build-sum-row.total b { color: var(--ac-d); font-weight: 700; }
.m-build-fine { margin: 16px 0 18px; font-size: 12.8px; line-height: 1.6; color: var(--m-fg-3); }

@media (max-width: 860px) { .m-build-grid { grid-template-columns: 1fr; gap: 24px; } }

/* ── the interactive demo ────────────────────────────────── */
.m-demo { display: grid; grid-template-columns: 250px 1fr; gap: 26px; align-items: start; margin-top: 34px; }

.m-demo-rail { display: grid; gap: 4px; align-content: start; }
.m-demo-pick {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 11px 13px; border: 1px solid transparent; border-radius: 13px;
  background: none; cursor: pointer; font: inherit; color: var(--m-fg);
  transition: background .16s, border-color .16s;
}
.m-demo-pick:hover { background: color-mix(in srgb, var(--m-fg) 5%, transparent); }
.m-demo-pick[aria-selected='true'] { background: var(--m-surface); border-color: var(--m-line-d2); box-shadow: 0 1px 2px rgba(10,8,30,.05), 0 12px 26px -22px rgba(20,10,60,.5); }
.m-demo-pick[aria-selected='true'] .m-pic { background: color-mix(in srgb, var(--ac) 14%, transparent); }
.m-demo-pick .m-pic { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center;
  background: color-mix(in srgb, var(--m-fg) 6%, transparent); color: var(--ac-d); transition: background .16s; }
.m-demo-pick .m-pic svg { width: 17px; height: 17px; }
.m-demo-pick-t b { display: block; font: 700 14.5px/1.2 var(--m-display); letter-spacing: -.022em; }
.m-demo-pick-t em { display: block; font: 600 10.5px/1 'JetBrains Mono', ui-monospace, monospace;
  font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--m-fg-3); margin-top: 5px; }
.m-demo-pick-t em.live { color: #0b7a55; }
.m-demo-pick:focus-visible { outline: 2px solid var(--m-brand); outline-offset: 2px; }

.m-demo-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: 16px; }
.m-demo-head > div:first-child { display: flex; align-items: center; gap: 10px; }
.m-demo-head b { font: 800 18px/1 var(--m-display); letter-spacing: -.03em; color: var(--m-fg); }
.m-demo-status { font: 600 10px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase;
  color: var(--m-fg-3); border: 1px solid var(--m-line-d2); border-radius: 99px; padding: 5px 9px; }
.m-demo-status.live { color: #0b7a55; border-color: color-mix(in srgb, #0b7a55 34%, transparent); background: var(--m-pos-soft); }

.m-demo-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.m-demo-tab { border: 0; background: none; cursor: pointer; padding: 7px 13px; border-radius: 99px;
  font: 600 13.5px/1 var(--m-display); letter-spacing: -.012em; color: var(--m-fg-2); transition: background .16s, color .16s; }
.m-demo-tab:hover { background: color-mix(in srgb, var(--m-fg) 6%, transparent); color: var(--m-fg); }
.m-demo-tab[aria-selected='true'] { background: var(--ac); color: #fff; }
.m-demo-tab:focus-visible { outline: 2px solid var(--m-brand); outline-offset: 2px; }

/* The window the screen sits in. Light, like the rest of the theme — the
   product accent and one tinted title bar do the separating that a dark ground
   used to. */
.m-demo-win { border-radius: var(--m-r-l); overflow: hidden; background: var(--m-surface);
  border: 1px solid var(--m-line-d2);
  box-shadow: 0 1px 2px rgba(10,8,30,.05), 0 30px 60px -42px rgba(20,10,60,.42); }
.m-demo-winbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 13px 18px; border-bottom: 1px solid var(--m-line);
  background: color-mix(in srgb, var(--ac) 6%, transparent); }
.m-demo-dots { display: flex; gap: 6px; }
.m-demo-dots i { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--m-fg) 14%, transparent); }
/* Amber on white, not amber on black: #92400e clears 4.5:1 on the tint. */
.m-demo-sim { font: 700 9.5px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase;
  color: #92400e; border: 1px solid rgba(146,64,14,.3); background: rgba(251,191,36,.16);
  border-radius: 99px; padding: 5px 10px; }
.m-demo-winsub { font-size: 12.5px; color: var(--m-fg-2); }
.m-demo-winapp { margin-left: auto; font: 700 12.5px/1 var(--m-display); letter-spacing: -.02em; color: var(--m-fg); }

.m-demo-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; padding: 18px 18px 4px; }
.m-demo-kpi { border: 1px solid var(--m-line); border-radius: 14px; padding: 14px 15px; background: var(--m-paper-2); }
.m-demo-kpi-l { display: block; font-size: 12px; color: var(--m-fg-2); }
.m-demo-kpi-v { display: block; margin-top: 7px; font: 800 23px/1 var(--m-display); letter-spacing: -.035em; color: var(--m-fg); }
.m-demo-kpi-s { display: block; margin-top: 6px; font-size: 11.5px; color: var(--ac-d); }

/* The screen loses its own frame inside the window — one border, not two. */
.m-demo-win .m-screen { border: 0; border-radius: 0; box-shadow: none; margin: 0; }
.m-demo-win .m-screen-bar { border-top: 1px solid var(--m-line); }

.m-demo-screen .m-screen-row .dim { color: var(--m-fg-d3); }
.m-demo-screen .m-screen-row b.hi { color: var(--ac-t); }
.m-demo-note { margin: 14px 0 0; color: var(--m-fg-2); font-size: 13.8px; line-height: 1.6; max-width: 54em; }
.m-demo-note span { color: var(--m-fg-3); }

.m-demo-bars { display: grid; gap: 11px; }
.m-demo-bar { display: grid; grid-template-columns: 88px 1fr auto; gap: 12px; align-items: center; }
.m-demo-bar-l { font: 600 12px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .06em; color: var(--m-fg-d3); }
.m-demo-bar-t { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--m-hi) 12%, transparent); overflow: hidden; }
.m-demo-bar-t i { display: block; height: 100%; border-radius: 99px; background: var(--ac); }
.m-demo-bar-v { font: 600 12.5px/1 var(--m-body); color: var(--m-hi); }

@media (max-width: 900px) {
  .m-demo { grid-template-columns: 1fr; gap: 20px; }
  /* The rail becomes a horizontal strip you swipe, so the screen stays above
     the fold instead of nine tall rows pushing it off. */
  .m-demo-rail { grid-auto-flow: column; grid-auto-columns: minmax(168px, 1fr);
    overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
  .m-demo-pick { scroll-snap-align: start; }
  .m-demo-tabs { margin-left: 0; }
}

/* ── the keep-exploring block on every product page ──────── */
.m-exp { background: var(--m-paper); border-top: 1px solid var(--m-line); padding: 66px 0 72px; }
.m-exp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 30px; }
.m-exp-h {
  margin: 0 0 22px;
  font: 700 13.5px/1 var(--m-body);
  letter-spacing: .01em;
  color: var(--m-fg-3);
}
.m-exp-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.m-exp-col a {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none;
  font: 700 15.5px/1.35 var(--m-display);
  letter-spacing: -.018em;
  color: var(--m-fg);
  transition: color .16s var(--m-ease);
}
/* The arrow carries the hover, so the label does not shift under the cursor. */
.m-exp-ar { width: 16px; height: 16px; flex: none; color: var(--m-fg-3); transition: transform .18s var(--m-ease), color .18s; }
.m-exp-col a:hover { color: var(--m-brand-d); }
.m-exp-col a:hover .m-exp-ar { color: var(--m-brand-d); transform: translateX(3px); }
.m-exp-col a:focus-visible { outline: 2px solid var(--m-brand); outline-offset: 3px; border-radius: 4px; }

@media (max-width: 1080px) { .m-exp-grid { grid-template-columns: repeat(2, 1fr); gap: 38px 28px; } }
@media (max-width: 560px)  { .m-exp-grid { grid-template-columns: 1fr; gap: 30px; } .m-exp { padding: 52px 0 56px; } }

/* ── footer ──────────────────────────────────────────────── */
.m-foot { background: var(--m-ink); color: var(--m-fg-d2); border-top: 1px solid var(--m-line-d); }
/* Six columns: the brand, then ONE list each — Products, Solutions, Resources,
   Company, Legal.

   Legal used to be a second <h2> and a second <ul> stacked inside Company, so
   that column ran fourteen links deep against six in each of its neighbours.
   `align-items` was the grid default of `stretch`, which made the five boxes
   equal heights while the ink inside them ended at four different places — the
   ragged bottom edge that made the footer look unfinished rather than full.
   Split out, the lists are 9, 6, 6, 6 and 8 links, and they end together. */
.m-foot-grid { display: grid; grid-template-columns: 1.6fr repeat(5, 1fr); gap: 36px 30px; align-items: start; }
.m-foot-brand { max-width: 30ch; }
.m-foot h2 { color: var(--m-hi); font: 700 12.5px/1 var(--m-body); letter-spacing: .05em; text-transform: uppercase; margin: 0 0 16px; }
.m-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.m-foot a { color: var(--m-fg-d2); text-decoration: none; font-size: 14px; transition: color .18s; }
.m-foot a:hover { color: var(--m-hi); }
.m-foot .m-logo { color: var(--m-hi); }
.m-foot-tag { margin: 18px 0 0; font-size: 14.5px; line-height: 1.6; max-width: 26em; color: var(--m-fg-d2); }
.m-foot-bot { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 56px; padding: 24px 0;
  border-top: 1px solid var(--m-line-d); font-size: 13px; color: var(--m-fg-d3); }
.m-foot-bot .sp { flex: 1; }

/* ── responsive ──────────────────────────────────────────── */
@media (max-width: 1080px) {
  .m-eco { grid-template-columns: repeat(2, 1fr); }
  .m-drop-grid { grid-template-columns: repeat(2, 1fr); }
  .m-needs { grid-template-columns: 1fr; }
  /* One column now, so the panel sits BELOW the rail — pinning it there would
     park it over the tabs you are trying to reach. */
  .m-need-panel { position: static; }
  .m-need-list { grid-template-columns: repeat(2, 1fr); display: grid; }
  .m-tiles { grid-template-columns: repeat(2, 1fr); }
  /* Six columns need about 1180px before the link text starts wrapping. Below
     that the brand takes its own full-width row and the five lists share three
     columns — rather than the old jump straight from five columns to two, which
     put Products beside the brand and left the other three stranded. */
  .m-foot-grid { grid-template-columns: repeat(3, 1fr); }
  .m-foot-brand { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 760px) {
  .m-navlinks, .m-navcta .m-btn-g { display: none; }
  .m-sec { padding: 76px 0; }
  .m-eco, .m-tiles, .m-need-list, .m-need-prods, .m-drop-grid { grid-template-columns: 1fr; }
  .m-wrap { padding: 0 20px; }
  .m-nav-in { padding: 0 20px; height: 64px; }
  .m-drop { top: 64px; }
  /* Two, not one: five stacked lists is a very long scroll past the thing
     somebody came to the footer for. */
  .m-foot-grid { grid-template-columns: 1fr 1fr; gap: 28px 22px; }
  .m-close { padding: 86px 0; }
  /* the constellation becomes a legible stack rather than a squashed diagram */
  .m-const svg { display: none; }
  .m-const-list { display: grid; gap: 8px; margin-top: 8px; text-align: left; }
  .m-const-list .m-prow { border-color: var(--m-line-d); background: color-mix(in srgb, var(--m-hi) 4%, transparent); }
  .m-const-list .m-prow b { color: var(--m-hi); }
  .m-const-list .m-prow em { color: var(--m-fg-d2); }
  .m-const-list .m-prow:hover { background: color-mix(in srgb, var(--m-hi) 9%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .master *, .master *:before, .master *:after { animation: none !important; transition-duration: .01ms !important; }
  .js .m-rv { opacity: 1; transform: none; }
}

/* ==========================================================================
   MASTER-THEME PRODUCT PAGES
   Same language as the homepage, one level down. The product's accent takes
   over the chrome (--ac) while the master violet stays in the suite bar, so
   Comsky -> Product reads as one company moving you deeper, not a handoff.
   ========================================================================== */

/* product bar — parks under the suite bar, never replaces it */
.m-pnav { position: sticky; top: 72px; z-index: 80; background: rgba(7,7,15,.82);
  backdrop-filter: blur(18px) saturate(1.5); border-bottom: 1px solid var(--m-line-d); }
.m-pnav-in { display: flex; align-items: center; gap: 28px; height: 58px; max-width: var(--m-max); margin: 0 auto; padding: 0 30px; }
.m-pnav-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--m-hi); }
.m-pnav-brand .m-pic { width: 30px; height: 30px; border-radius: 9px; }
.m-pnav-brand .m-pic svg { width: 16px; height: 16px; }
.m-pnav-brand b { font: 800 16.5px/1 var(--m-body); letter-spacing: -.04em; }
.m-pnav-brand b i { font-style: normal; font-weight: 500; color: var(--m-fg-d3); }
.m-pnav-links { display: flex; gap: 3px; flex: 1; }
.m-pnav-links a { padding: 8px 13px; border-radius: 9px; font: 600 14px/1 var(--m-body); color: var(--m-fg-d2);
  text-decoration: none; transition: background .16s, color .16s; }
.m-pnav-links a:hover { background: color-mix(in srgb, var(--ac) 22%, transparent); color: var(--m-hi); }
.m-btn-ac { background: linear-gradient(180deg, var(--ac), var(--ac-d)); color: #fff;
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 22%, transparent) inset, 0 12px 30px -14px var(--ac); }
.m-btn-ac:hover { transform: translateY(-2px); filter: brightness(1.06); }

/* product hero */
.m-phero { position: relative; overflow: hidden; background: var(--m-ink); color: var(--m-fg-d); padding: 78px 0 84px; }
.m-phero:before { content: ''; position: absolute; inset: -40% -15% auto; height: 150%; pointer-events: none;
  background: radial-gradient(42% 38% at 22% 10%, color-mix(in srgb, var(--ac) 38%, transparent), transparent 66%),
              radial-gradient(38% 34% at 86% 24%, rgba(79,70,229,.24), transparent 64%); }
.m-phero-in { position: relative; display: grid; grid-template-columns: 1.04fr .96fr; gap: 56px; align-items: center; }
.m-phero h1 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.02; letter-spacing: -.045em; font-weight: 800; color: var(--m-hi); margin: 20px 0 0; }
.m-phero .m-lede { color: var(--m-fg-d2); max-width: 36em; }
.m-phero .m-kicker i { background: var(--ac); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac) 26%, transparent); }
.m-phero-cta { display: flex; gap: 13px; margin-top: 30px; flex-wrap: wrap; }
.m-phero-fine { margin-top: 18px; color: var(--m-fg-d3); font-size: 13.5px; }
/* The row under the hero buttons: secondary ways in, set quieter than a button
   but louder than the fine print below them. */
.m-phero-lane { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  margin-top: 18px; font-size: 14px; color: var(--m-fg-d3); }
.m-phero-lane a { color: var(--m-hi); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--m-hi) 32%, transparent); transition: border-color .18s; }
.m-phero-lane a:hover { border-bottom-color: var(--ac, var(--m-brand)); }
.m-phero-lane-q { color: var(--m-fg-d3); }

/* a dark device/console frame for the hero art and anywhere a screen belongs */
/* THE PRODUCT SCREEN — LIGHT.
   This was a near-black console (#100d31 body, white type) and it is the most
   repeated component on the site: every product page opens on one and some
   carry a dozen. Light is the whole theme now, so it is light here too — a
   white surface, ink type, the product accent doing the work the glow used to.
   The tokens are overridden rather than every rule rewritten, so anything
   inside a screen that reads --m-hi / --m-fg-d2 / --m-fg-d3 follows along. */
.m-screen { --m-hi: #14123a; --m-fg-d2: #55527a; --m-fg-d3: #6b6885; --m-line-d: #e4e0f2;
  color: var(--m-fg-d2); border-radius: 18px; border: 1px solid var(--m-line-d); overflow: hidden;
  background: var(--m-surface);
  box-shadow: 0 1px 2px rgba(10,8,30,.05), 0 24px 54px -34px rgba(20,10,60,.4); }
.m-screen-bar { display: flex; align-items: center; gap: 9px; padding: 13px 16px; border-bottom: 1px solid var(--m-line-d);
  background: color-mix(in srgb, var(--ac, var(--m-brand)) 5%, transparent); }
.m-screen-bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--ac); flex: 0 0 auto; }
.m-screen-bar b { font: 700 11.5px/1 var(--m-body); letter-spacing: .04em; color: var(--m-hi); }
.m-screen-bar span { margin-left: auto; font: 500 9.5px/1 'JetBrains Mono', monospace; letter-spacing: .12em; color: var(--m-fg-d3); }
.m-screen-body { padding: 18px 16px; font: 500 12.5px/2 'JetBrains Mono', monospace; color: var(--m-fg-d2); background: var(--m-surface); }
/* Was --m-hi at 55 %, which on a white ground is a near-black rule between
   every row. A hairline is the same information at a tenth of the noise. */
.m-screen-row { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid color-mix(in srgb, var(--m-hi) 9%, transparent); }
.m-screen-row:last-child { border-bottom: 0; }
.m-screen-row s { text-decoration: none; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--m-hi) 13%, transparent); flex: 1; }
.m-screen-row s.a { background: color-mix(in srgb, var(--ac) 72%, transparent); }
.m-screen-row b { color: var(--m-hi); font-weight: 600; white-space: nowrap; }
.m-screen-bars { display: flex; align-items: flex-end; gap: 6px; height: 88px; padding-top: 8px; }
.m-screen-bars i { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--ac), color-mix(in srgb, var(--ac) 12%, transparent)); }

/* dark tiles, capability columns, table, tiers, faq */
.m-dtile { border: 1px solid var(--m-line-d); border-radius: var(--m-r); padding: 24px;
  background: linear-gradient(165deg, color-mix(in srgb, var(--m-hi) 55%, transparent), color-mix(in srgb, var(--m-hi) 15%, transparent));
  transition: transform .34s var(--m-ease), border-color .3s, box-shadow .34s var(--m-ease); }
.m-dtile:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--ac) 42%, transparent);
  box-shadow: 0 26px 50px -34px color-mix(in srgb, var(--ac) 70%, transparent); }
.m-dtile .m-ti { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 15px;
  background: color-mix(in srgb, var(--ac) 20%, transparent); color: var(--m-hi); }
.m-dtile .m-ti svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; }
.m-dtile h3 { margin: 0 0 9px; font: 700 17px/1.25 var(--m-body); letter-spacing: -.028em; color: var(--m-hi); }
.m-dtile p { margin: 0; color: var(--m-fg-d2); font-size: 14.6px; line-height: 1.58; }

.m-caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 34px; }
.m-caps h3 { margin: 0 0 6px; font: 700 11.5px/1 'JetBrains Mono', monospace; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ac-t); padding-top: 22px; }
.m-caps ul { list-style: none; margin: 0 0 12px; padding: 0; }
.m-caps li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--m-hi) 6%, transparent);
  font-size: 14.2px; color: var(--m-fg-d2); }
.m-caps li:before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--ac);
  margin-top: 8px; flex: 0 0 auto; opacity: .8; }

.m-vs { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--m-line-d);
  border-radius: var(--m-r); overflow: hidden; background: color-mix(in srgb, var(--m-hi) 25%, transparent); }
.m-vs th, .m-vs td { padding: 15px 19px; text-align: left; font-size: 14.4px; border-bottom: 1px solid color-mix(in srgb, var(--m-hi) 7%, transparent); color: var(--m-fg-d2); }
.m-vs thead th { background: color-mix(in srgb, var(--m-hi) 5%, transparent); font: 700 13px/1 var(--m-body); color: var(--m-hi); letter-spacing: .01em; }
.m-vs thead th.us { color: var(--ac-t); background: color-mix(in srgb, var(--ac) 16%, transparent); }
.m-vs tbody td:first-child { color: var(--m-hi); font-weight: 600; }
.m-vs tbody td.us { color: var(--m-hi); background: color-mix(in srgb, var(--ac) 8%, transparent); }
.m-vs tr:last-child td { border-bottom: 0; }
.m-vs .yes { color: #34d399; font-weight: 700; }
.m-vs .no { color: var(--m-fg-d3); }

.m-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.m-tier { border: 1px solid var(--m-line-d); border-radius: var(--m-r-l); padding: 28px; position: relative;
  background: linear-gradient(170deg, color-mix(in srgb, var(--m-hi) 55%, transparent), color-mix(in srgb, var(--m-hi) 15%, transparent)); }
.m-tier.best { border-color: var(--ac); box-shadow: 0 30px 60px -38px color-mix(in srgb, var(--ac) 80%, transparent); }
.m-tier.best:before { content: 'Most popular'; position: absolute; top: -11px; left: 28px; font: 700 10px/1 var(--m-body);
  letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--ac); padding: 6px 11px; border-radius: 99px; }
.m-tier h3 { margin: 0; font: 800 19px/1 var(--m-body); letter-spacing: -.03em; color: var(--m-hi); }
.m-tier .pr { font: 800 34px/1 var(--m-body); letter-spacing: -.045em; margin: 16px 0 3px; color: var(--m-hi); }
/* "On request" in place of a figure. It sets at the price's 34px/800 otherwise,
   which shouts a non-answer and wraps in a tier card. */
.m-tier .pr-ask { font-size: 19px; letter-spacing: -.02em; color: var(--m-fg-2); }
.m-tier .pr small { font: 600 13px/1 var(--m-body); color: var(--m-fg-d3); letter-spacing: 0; }
.m-tier .who { color: var(--m-fg-d2); font-size: 13.6px; margin: 0 0 20px; }
.m-tier ul { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; font-size: 14px; color: var(--m-fg-d2); }
.m-tier li { display: flex; gap: 10px; }
.m-tier li:before { content: '✓'; color: var(--ac-t); font-weight: 800; flex: 0 0 auto; }

.m-faq { max-width: 880px; }
.m-faq details { border-bottom: 1px solid var(--m-line-d); }
.m-faq summary { cursor: pointer; padding: 19px 0; font: 700 16.5px/1.4 var(--m-body); letter-spacing: -.022em;
  color: var(--m-hi); list-style: none; display: flex; gap: 15px; align-items: flex-start; }
.m-faq summary::-webkit-details-marker { display: none; }
.m-faq summary:before { content: '+'; color: var(--ac-t); font-weight: 800; font-size: 21px; line-height: 1.1; flex: 0 0 auto; transition: transform .22s; }
.m-faq details[open] summary:before { transform: rotate(45deg); }
.m-faq p { margin: 0 0 20px 30px; color: var(--m-fg-d2); font-size: 14.8px; line-height: 1.65; }

@media (max-width: 1080px) {
  .m-phero-in { grid-template-columns: 1fr; }
  .m-caps, .m-tiers { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .m-pnav-links { display: none; }
  .m-pnav { top: 64px; }
  .m-pnav-in { padding: 0 20px; }
  .m-caps, .m-tiers { grid-template-columns: 1fr; }
}

/* ==========================================================================
   BRIDGE — the supporting pages, re-themed without rewriting them
   27 pages (solutions, legal, support, docs, about, pricing…) and the seven
   section components were authored against the old light shell. Rather than
   rewrite 27 files, their class vocabulary is re-pointed at the master
   theme here. Everything is scoped under .master, so it cannot leak.
   New work should use the .m-* classes directly; this block exists so the
   existing pages inherit the brand rather than being left behind.

   Scoped to .master-dark, not .master: these rules colour bare elements
   (p, h1-h5, a, strong), and on .master they would repaint the homepage's
   light sections as well. Base.astro sets both classes; the homepage and the
   product pages set only .master and paint their own sections.
   ========================================================================== */

.master-dark { background: var(--m-ink); color: var(--m-fg-d); }
.master-dark main { background: var(--m-ink); }

.master-dark .wrap { max-width: var(--m-max); margin: 0 auto; padding: 0 30px; }
.master-dark .sec { padding: 96px 0; position: relative; }
.master-dark .sec-alt { background: rgba(195,189,255,.035); }
.master-dark .narrow { max-width: 880px; }

.master-dark .reveal { opacity: 1; transform: none; }
.js .master-dark .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--m-ease), transform .7s var(--m-ease); }
.js .master-dark .reveal.in { opacity: 1; transform: none; }

.master-dark .sec-head { max-width: 760px; margin-bottom: 8px; }
.master-dark .eyebrow { display: inline-block; font: 500 11px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .18em; text-transform: uppercase; color: var(--m-brand-l); }
.master-dark .sec-head h2, .master-dark .cta h2 { font-family: var(--m-display); font-size: clamp(30px, 4vw, 48px);
  line-height: 1.05; letter-spacing: -.042em; font-weight: 800; color: var(--m-hi); margin: 16px 0 0; }
.master-dark .sec-head h3 { font-family: var(--m-display); color: var(--m-hi); letter-spacing: -.03em; }
.master-dark .lede { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.62; color: var(--m-fg-d2); margin: 18px 0 0; }
.master-dark p { color: var(--m-fg-d2); }
.master-dark h1, .master-dark h2, .master-dark h3, .master-dark h4, .master-dark h5 { color: var(--m-hi); font-family: var(--m-display); }
.master-dark a { color: var(--m-brand-l); }
.master-dark strong, .master-dark b { color: var(--m-hi); }

.master-dark .btn { display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 20px;
  border-radius: 99px; font: 700 14.5px/1 var(--m-display); letter-spacing: -.01em; text-decoration: none;
  border: 1px solid transparent; transition: transform .3s var(--m-ease), box-shadow .3s var(--m-ease), background .2s; }
.master-dark .btn-lg { height: 48px; padding: 0 26px; font-size: 15.5px; }
.master-dark .btn-primary, .master-dark .btn-ac { background: linear-gradient(180deg, var(--ac, #6159e8), var(--ac-d, var(--m-brand-d)));
  color: #fff; box-shadow: 0 1px 0 color-mix(in srgb, #fff 22%, transparent) inset, 0 12px 30px -14px var(--ac, rgba(79,70,229,.9)); }
.master-dark .btn-primary:hover, .master-dark .btn-ac:hover { transform: translateY(-2px); filter: brightness(1.06); }
.master-dark .btn-ghost, .master-dark .btn-glass { border-color: var(--m-line-d2); background: color-mix(in srgb, var(--m-hi) 7%, transparent);
  color: var(--m-hi); backdrop-filter: blur(8px); }
.master-dark .btn-ghost:hover, .master-dark .btn-glass:hover { background: color-mix(in srgb, var(--m-hi) 14%, transparent); transform: translateY(-2px); }
.master-dark .hero-actions { display: flex; gap: 13px; margin-top: 28px; flex-wrap: wrap; }
.master-dark .fnote, .master-dark .hero-fine, .master-dark .cta-fine { color: var(--m-fg-d3); font-size: 13.5px; }

.master-dark .pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 17px 8px 12px; border-radius: 99px;
  border: 1px solid var(--m-line-d2); background: color-mix(in srgb, var(--m-hi) 5%, transparent); color: var(--m-fg-d2); font-size: 13px; }
.master-dark .dot-live { width: 6px; height: 6px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,.22); }
.master-dark .chip { display: inline-block; padding: 8px 14px; border-radius: 99px; border: 1px solid var(--m-line-d);
  background: color-mix(in srgb, var(--m-hi) 5%, transparent); color: var(--m-fg-d2); font-size: 13.5px; }

/* section components */
.master-dark .fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.master-dark .fgrid.two { grid-template-columns: repeat(2, 1fr); }
.master-dark .fgrid.four { grid-template-columns: repeat(4, 1fr); }
.master-dark .ftile { border: 1px solid var(--m-line-d); border-radius: var(--m-r); padding: 24px;
  background: linear-gradient(165deg, color-mix(in srgb, var(--m-hi) 55%, transparent), color-mix(in srgb, var(--m-hi) 15%, transparent));
  box-shadow: none; transition: transform .34s var(--m-ease), border-color .3s, box-shadow .34s var(--m-ease); }
.master-dark .ftile:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--ac, var(--m-brand)) 45%, transparent);
  box-shadow: 0 26px 50px -34px color-mix(in srgb, var(--ac, var(--m-brand)) 70%, transparent); }
.master-dark .ftile h2, .master-dark .ftile h3 { margin: 0 0 9px; font: 700 17px/1.25 var(--m-display); letter-spacing: -.028em; color: var(--m-hi); }
.master-dark .ftile p { margin: 0; color: var(--m-fg-d2); font-size: 14.6px; line-height: 1.58; }
.master-dark .ftile .fi { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 15px;
  background: color-mix(in srgb, var(--ac, var(--m-brand)) 24%, transparent); color: var(--m-hi); }
.master-dark .ftile .fi svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; }

.master-dark .caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 34px; }
.master-dark .caps h2, .master-dark .caps h3 { margin: 0 0 6px; font: 700 11.5px/1 'JetBrains Mono', monospace; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ac, var(--m-brand-l)); padding-top: 22px; }
.master-dark .caps ul { list-style: none; margin: 0 0 12px; padding: 0; }
.master-dark .caps li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--m-hi) 6%, transparent);
  font-size: 14.2px; color: var(--m-fg-d2); }
.master-dark .caps li:before { content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ac, var(--m-brand-l)); margin-top: 8px; flex: 0 0 auto; opacity: .85; }

.master-dark .vs { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--m-line-d);
  border-radius: var(--m-r); overflow: hidden; background: color-mix(in srgb, var(--m-hi) 25%, transparent); box-shadow: none; }
.master-dark .vs th, .master-dark .vs td { padding: 15px 19px; text-align: left; font-size: 14.4px;
  border-bottom: 1px solid color-mix(in srgb, var(--m-hi) 7%, transparent); color: var(--m-fg-d2); }
.master-dark .vs thead th { background: color-mix(in srgb, var(--m-hi) 5%, transparent); font: 700 13px/1 var(--m-display); color: var(--m-hi); }
.master-dark .vs thead th.us { color: var(--m-brand-l); background: rgba(79,70,229,.2); }
.master-dark .vs tbody td:first-child { color: var(--m-hi); font-weight: 600; font-family: var(--m-display); }
.master-dark .vs tbody td.us { color: var(--m-hi); background: rgba(79,70,229,.1); }
.master-dark .vs tr:last-child td { border-bottom: 0; }
.master-dark .vs .yes { color: #34d399; font-weight: 700; }
.master-dark .vs .no { color: var(--m-fg-d3); }

.master-dark .ptiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.master-dark .ptier { border: 1px solid var(--m-line-d); border-radius: var(--m-r-l); padding: 28px; position: relative;
  background: linear-gradient(170deg, color-mix(in srgb, var(--m-hi) 55%, transparent), color-mix(in srgb, var(--m-hi) 15%, transparent)); box-shadow: none; }
.master-dark .ptier.best { border-color: var(--m-brand); }
.master-dark .ptier.best:before { background: var(--m-brand); }
.master-dark .ptier h3 { color: var(--m-hi); font-family: var(--m-display); }
.master-dark .ptier .price { font: 800 32px/1 var(--m-display); letter-spacing: -.045em; color: var(--m-hi); }
.master-dark .ptier .price small, .master-dark .ptier .pw { color: var(--m-fg-d2); }
.master-dark .ptier ul { color: var(--m-fg-d2); }
.master-dark .ptier li:before { color: var(--m-brand-l); }

.master-dark .faq-item { border-bottom: 1px solid var(--m-line-d); }
.master-dark .faq-item summary { color: var(--m-hi); font-family: var(--m-display); font-weight: 700; padding: 19px 0; }
.master-dark .faq-item summary:before { color: var(--m-brand-l); }
.master-dark .faq-item p { color: var(--m-fg-d2); }

/* `align-items: start`, not `center`. The only thing using this is /contact,
   where the two columns are cards: a tall booking form beside a much shorter
   "reach us directly" panel. Centred, the short one floated about 160px down
   the page, so two cards that plainly belong in a row had neither their tops
   nor their bottoms in line — the page read as broken rather than asymmetric.
   Centring is right for text beside an image; it is wrong for cards. */
.master-dark .split { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: start; }

/* The closing band on every supporting page — the SAME band as `.m-close` on
   the home and product pages.

   It used to be `--m-ink-2` (#ffffff) on a `--m-ink` (#f6f5fb) page: a two per
   cent difference, so the strongest call to action on ten pages read as a
   paragraph that happened to be centred, while the home page closed on a dark
   indigo band with a glow behind it. Two closing bands that look nothing alike
   is the thing that made the site feel unorganised, and the weaker one was on
   nine pages out of ten.

   The colours come from the same four token overrides `.m-close` uses rather
   than from new rules, because the legacy `.btn-glass`, `.lede` and `.cta-fine`
   all already read those tokens — so they turn into their inverse selves here
   for free, and any future change to the band is made in one place. */
.master-dark .cta {
  position: relative;
  overflow: hidden;
  background: var(--m-inverse-bg);
  color: var(--m-inverse-fg);
  text-align: center;
  --m-hi: var(--m-inverse-fg);
  --m-fg-d: var(--m-inverse-fg);
  --m-fg-d2: rgba(255,255,255,.78);
  --m-fg-d3: rgba(255,255,255,.55);
}
.master-dark .cta:before {
  content: '';
  position: absolute;
  inset: -50% -10% auto;
  height: 170%;
  pointer-events: none;
  background: radial-gradient(44% 46% at 50% 22%, rgba(79,70,229,.55), transparent 66%);
}
.master-dark .cta-in { position: relative; max-width: 760px; margin: 0 auto; }
.master-dark .cta .hero-actions { justify-content: center; }
/* The glass button reads `--m-hi` at 7 %, which on this band is white on
   near-black — too faint to find. These two lines are what `.m-close` does for
   its own secondary button. */
.master-dark .cta .btn-glass, .master-dark .cta .btn-ghost {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.4);
  color: #fff;
}
.master-dark .cta .btn-glass:hover, .master-dark .cta .btn-ghost:hover {
  background: rgba(255,255,255,.18);
}
.master-dark .cta .m-grad {
  background: linear-gradient(100deg, #a5b4fc, #c3bdff 50%, #a5b4fc);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* product cards reused on /products and /404 */
.master-dark .suite-cat-h { display: flex; align-items: baseline; gap: 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--m-line-d); margin: 34px 0 14px; }
.master-dark .suite-cat-h h2, .master-dark .suite-cat-h h3 { margin: 0; font: 800 17px/1 var(--m-display); letter-spacing: -.02em; color: var(--m-hi); }
.master-dark .suite-cat-h p { margin: 0; color: var(--m-fg-d3); font-size: 13.5px; }
.master-dark .suite-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.master-dark .pcard { display: flex; gap: 13px; align-items: flex-start; padding: 14px; border-radius: 14px;
  text-decoration: none; color: inherit; position: relative; border: 1px solid var(--m-line-d);
  background: color-mix(in srgb, var(--m-hi) 35%, transparent); transition: background .18s, border-color .18s, transform .18s var(--m-ease); }
.master-dark .pcard:hover { background: color-mix(in srgb, var(--m-hi) 7%, transparent); transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--ac) 50%, transparent); }
.master-dark .pcard .pico { width: 38px; height: 38px; border-radius: 11px; flex: 0 0 auto; display: grid; place-items: center;
  color: #fff; background: linear-gradient(145deg, var(--ac), var(--ac-dark)); }
.master-dark .pcard .pico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.master-dark .pcard .ptxt b { display: block; font: 700 14.5px/1.2 var(--m-display); letter-spacing: -.015em; color: var(--m-hi); }
.master-dark .pcard .ptxt em { display: block; font: 400 12.8px/1.45 var(--m-body); font-style: normal; color: var(--m-fg-d2); margin-top: 4px; }
.master-dark .pcard .tag { position: absolute; top: 12px; right: 12px; font: 700 9px/1 'JetBrains Mono', monospace;
  letter-spacing: .1em; text-transform: uppercase; padding: 4px 7px; border-radius: 99px;
  color: var(--m-fg-d3); background: color-mix(in srgb, var(--m-hi) 6%, transparent); }
.master-dark .pcard .tag.live { color: #34d399; background: rgba(52,211,153,.14); }

/* form controls on /contact were authored for a white page */
.master-dark input, .master-dark select, .master-dark textarea {
  background: color-mix(in srgb, var(--m-hi) 5%, transparent) !important; border-color: var(--m-line-d2) !important;
  color: var(--m-hi) !important; font-family: var(--m-body) !important; }
.master-dark input::placeholder, .master-dark textarea::placeholder { color: var(--m-fg-d3); }
.master-dark select option { background: var(--m-ink-2); color: var(--m-hi); }
.master-dark label span { color: var(--m-fg-d2) !important; }

.master-dark .skip { position: absolute; left: -9999px; }
.master-dark .skip:focus { left: 16px; top: 16px; z-index: 200; background: #fff; color: var(--m-ink); padding: 10px 16px; border-radius: 8px; }

@media (max-width: 1080px) {
  .master-dark .fgrid, .master-dark .fgrid.four, .master-dark .caps, .master-dark .suite-grid { grid-template-columns: repeat(2, 1fr); }
  .master-dark .split, .master-dark .ptiers { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .master-dark .fgrid, .master-dark .fgrid.two, .master-dark .fgrid.four, .master-dark .caps, .master-dark .suite-grid { grid-template-columns: 1fr; }
  .master-dark .wrap { padding: 0 20px; }
  .master-dark .sec { padding: 68px 0; }
}

/* On the supporting pages there is no hero for the bar to sit over, and the
   whole page is dark — so the bar keeps its dark cut rather than flipping to
   the white glass it uses once you scroll past a hero. */
.master-dark .m-nav { background: rgba(16,13,49,.86); backdrop-filter: blur(20px) saturate(1.5);
  border-bottom: 1px solid var(--m-line-d); box-shadow: none; }
.master-dark .m-logo { color: var(--m-hi); }
/* `.m-nav:not(.on-dark) .m-logo-word.ink` is four classes; these have to
   match it to win, or COM renders navy-on-navy and only SKY is visible. */
.master-dark .m-navlinks a, .master-dark .m-navlinks button { color: var(--m-fg-d2); }
.master-dark .m-navlinks a:hover, .master-dark .m-navlinks button:hover,
.master-dark .m-navlinks [data-open='true'] > button { background: color-mix(in srgb, var(--m-hi) 10%, transparent); color: var(--m-hi); }
.master-dark .m-nav .m-btn-g { background: color-mix(in srgb, var(--m-hi) 8%, transparent); border-color: var(--m-line-d2); color: var(--m-hi); }
.master-dark .m-nav .m-btn-g:hover { background: color-mix(in srgb, var(--m-hi) 16%, transparent); }



/* The light ground is the only theme. Tokens live in .master above. */
.m-grad { background: linear-gradient(100deg, #4f46e5, #6366f1 45%, #312e81);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.m-hero { color: var(--m-fg-d); }
.m-hero:before {
  background: radial-gradient(36% 34% at 84% 6%, rgba(79,70,229,.09), transparent 64%),
              radial-gradient(34% 32% at 8% 40%, rgba(79,70,229,.07), transparent 62%); }
.m-kicker { background: #fff; border-color: var(--m-line-d); color: var(--m-fg-2); box-shadow: 0 6px 20px -12px rgba(20,18,58,.25); }
.m-btn-d { border-color: var(--m-line-d2); background: #fff; color: var(--m-fg); backdrop-filter: none; }
.m-btn-d:hover { background: var(--m-paper-2); }
/* the bar never goes transparent-over-dark on a light page */
.m-nav.on-dark { background: var(--m-nav-bg); backdrop-filter: blur(20px) saturate(1.6); }
.m-nav.on-dark .m-logo, .master-dark .m-logo { color: var(--m-fg); }
.m-nav.on-dark .m-navlinks a, .m-nav.on-dark .m-navlinks button,
.master-dark .m-navlinks a, .master-dark .m-navlinks button { color: var(--m-fg-2); }
.m-nav .m-navlinks a:hover, .m-nav .m-navlinks button:hover,
.m-nav .m-navlinks [data-open='true'] > button { background: rgba(79,70,229,.08); color: var(--m-brand-d); }
.m-nav .m-btn-g { background: #fff; border-color: var(--m-line); color: var(--m-fg); }
.master-dark .m-nav { background: var(--m-nav-bg); border-bottom-color: var(--m-line); }
.m-drop { background: #fff; box-shadow: 0 30px 60px -28px rgba(20,10,60,.3); }
.m-pnav { background: rgba(255,255,255,.92); }
.m-pnav-brand { color: var(--m-fg); }
.m-pnav-links a:hover { color: var(--ac-d, var(--ac)); }
/* raised surfaces carry a real card shadow on light, where glass tints vanish */
.m-dtile, .m-tier, .m-panel, .m-tile,
.master-dark .ftile, .master-dark .ptier, .m-need, .m-need-panel {
  background: #fff; box-shadow: 0 1px 2px rgba(20,18,58,.04), 0 16px 36px -28px rgba(20,18,58,.35); }
.m-panel h3, .m-panel { color: var(--m-fg); }
.m-panel span { color: var(--m-brand); }
.m-vs, .master-dark .vs { background: #fff; }
.m-vs thead th, .master-dark .vs thead th { background: var(--m-paper-2); }
.m-foot { background: var(--m-paper-2); border-top-color: var(--m-line); }
.m-foot h2 { color: var(--m-fg); }
/* `.master-dark a` paints every link brand blue, and it is the same specificity
   as `.m-foot a` but later in the file — so on the 27 pages that use the Base
   layout the whole footer came out blue while the identical footer on a product
   page was muted grey. One class more than the rule it is correcting. */
.master-dark .m-foot a { color: var(--m-fg-d2); }
.m-foot a:hover { color: var(--m-brand-d); }
.master-dark .m-foot a:hover { color: var(--m-brand-d); }
.m-eyebrow, .master-dark .eyebrow { color: var(--m-brand-d); }
.m-ph { border-color: var(--m-line-d2); color: var(--m-fg-3); background: #fff; }
.m-caps li:before, .master-dark .caps li:before { opacity: 1; }
.m-close:before {
  background: radial-gradient(44% 46% at 50% 22%, rgba(79,70,229,.55), transparent 66%); }
.m-close .m-btn-d { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); color: #fff; }
.m-close .m-lede { color: rgba(255,255,255,.78); }
.m-close .m-grad { background: linear-gradient(100deg, #a5b4fc, #c3bdff 50%, #a5b4fc);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
/* the light hero on the home page gets B1's faint indigo discs + hairlines */
.m-hero:after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent calc(50% - 560px), var(--m-ink-hi) calc(50% - 560px), var(--m-ink-hi) calc(50% - 559px), transparent calc(50% - 559px)),
              linear-gradient(90deg, transparent calc(50% + 559px), var(--m-ink-hi) calc(50% + 559px), var(--m-ink-hi) calc(50% + 560px), transparent calc(50% + 560px)); }

/* the glyph wordmark follows the bar's state like the image wordmark does */
.m-nav.on-dark .m-logo-text, .master-dark .m-nav .m-logo-text, .m-foot .m-logo-text { color: #fff; }
.m-nav:not(.on-dark) .m-logo-text { color: var(--m-fg); }
.m-foot .m-logo-text { color: var(--m-fg); }

/* ==========================================================================
   THE PRODUCT EXPLORER — the homepage hero visual
   Nine tiles grouped by category on the left; a drill-down panel on the right
   that swaps in place. Everything is token-driven so it holds in all three
   themes; the accent is per tile / per panel via --ac.
   ========================================================================== */
/* The explorer tile rail lived here. The orrery replaced it; its panel
   styles below are still the drill-down for every product. */
.m-x-panels { position: relative; min-height: 520px; }
.m-x-panel { border: 1px solid var(--m-line-d); border-radius: var(--m-r-l); padding: 28px 30px 26px;
  background: linear-gradient(165deg, color-mix(in srgb, var(--m-hi) 6%, transparent), color-mix(in srgb, var(--m-hi) 2%, transparent));
  box-shadow: 0 40px 90px -50px rgba(0,0,0,.6); }
.m-x-panel.in { animation: m-x-in .42s var(--m-ease); }
@keyframes m-x-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.m-x-panel { background: #fff; box-shadow: 0 1px 2px rgba(20,18,58,.04), 0 30px 70px -44px rgba(20,18,58,.4); }
.m-x-head { display: flex; align-items: center; gap: 14px; }
.m-x-pic { width: 46px; height: 46px; border-radius: 14px; flex: 0 0 auto; display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, var(--ac), var(--ac-d)); box-shadow: 0 10px 24px -10px var(--ac); }
.m-x-pic svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.m-x-cat-lbl { color: var(--ac-t); display: block; margin-bottom: 5px; }
.m-x-head h2 { margin: 0; font: 800 clamp(22px, 2.2vw, 28px)/1.1 var(--m-display); letter-spacing: -.035em; color: var(--m-hi); }
.m-x-status { margin-left: auto; font: 700 10px/1 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  padding: 6px 10px; border-radius: 99px; color: var(--m-fg-d3); border: 1px solid var(--m-line-d); }
.m-x-status.live { color: #34d399; border-color: rgba(52,211,153,.3); background: rgba(52,211,153,.1); }
.m-x-tag { margin: 16px 0 0; font: 500 clamp(16px, 1.35vw, 18.5px)/1.45 var(--m-body); color: var(--m-fg-d); letter-spacing: -.01em; }
.m-x-body { display: grid; grid-template-columns: 1.05fr .95fr; gap: 24px; margin-top: 20px; align-items: start; }
.m-x-hl { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.m-x-hl li { display: flex; gap: 11px; font-size: 14.2px; line-height: 1.55; color: var(--m-fg-d2); }
.m-x-hl li:before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ac); margin-top: 8px; flex: 0 0 auto; }
.m-x-screen { min-width: 0; }
.m-x-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 22px; padding-top: 20px;
  border-top: 1px solid var(--m-line-d); flex-wrap: wrap; }
.m-x-with { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.m-x-with > .m-mono { color: var(--m-fg-d3); margin-right: 4px; }
.m-x-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 9px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--m-line-d); background: color-mix(in srgb, var(--m-hi) 4%, transparent); color: var(--m-fg-d);
  font: 600 12.5px/1 var(--m-display); transition: border-color .2s, background .2s, transform .25s var(--m-ease); }
.m-x-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--ac); }
.m-x-chip:hover { border-color: var(--ac); background: color-mix(in srgb, var(--ac) 12%, transparent); transform: translateY(-1px); }
.m-x-cta { display: flex; gap: 9px; flex-wrap: wrap; }

@media (max-width: 1080px) {
  .m-x { grid-template-columns: 1fr; gap: 18px; }
  .m-x-tiles { grid-template-columns: repeat(3, 1fr); }
  .m-x-tile { aspect-ratio: auto; min-height: 96px; }
  .m-x-body { grid-template-columns: 1fr; }
  .m-x-panels { min-height: 0; }
}
@media (max-width: 680px) {
  .m-x { margin-top: 34px; }
  .m-x-tiles { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .m-x-tile { border-radius: 14px; padding: 10px 9px 9px; min-height: 84px; }
  .m-x-ico { width: 32px; height: 32px; border-radius: 10px; }
  .m-x-ico svg { width: 17px; height: 17px; }
  .m-x-name { font-size: 12.5px; margin-top: 8px; }
  .m-x-st { top: 8px; right: 8px; font-size: 7.5px; padding: 3px 5px; }
  .m-x-panel { padding: 20px 18px 18px; border-radius: 20px; }
  .m-x-head { gap: 11px; } .m-x-pic { width: 40px; height: 40px; border-radius: 12px; }
  .m-x-status { display: none; }
  .m-x-foot { flex-direction: column; align-items: stretch; }
  .m-x-cta .m-btn { flex: 1; justify-content: center; }
}

/* ==========================================================================
   MOBILE MENU — under 760px the bar hides its links; this is the way in.
   ========================================================================== */
.m-burger { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--m-line-d2);
  background: color-mix(in srgb, var(--m-hi) 6%, transparent); cursor: pointer; padding: 0; flex: 0 0 auto;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px; margin-left: 8px; }
.m-burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--m-surface); transition: transform .28s var(--m-ease), opacity .2s; }
.m-burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.m-burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.m-nav:not(.on-dark) .m-burger span { background: var(--m-fg); }
.master-dark .m-nav .m-burger span { background: var(--m-surface); }
.m-nav .m-burger span { background: var(--m-fg); }
.m-sheet { position: fixed; inset: 64px 0 0; z-index: 85; overflow-y: auto; background: var(--m-ink); border-top: 1px solid var(--m-line-d);
  -webkit-overflow-scrolling: touch; }
.m-sheet[hidden] { display: none; }
.m-sheet-in { padding: 18px 20px 40px; }
.m-sheet-h { color: var(--m-fg-d3); margin: 22px 0 10px; }
.m-sheet-h:first-child { margin-top: 4px; }
.m-sheet-grid { display: grid; gap: 4px; }
.m-sheet-grid .m-prow { padding: 11px 10px; }
.m-sheet-links { display: grid; gap: 2px; }
.m-sheet-links a { display: block; padding: 12px 12px; border-radius: 12px; font: 600 15.5px/1.2 var(--m-display); color: var(--m-fg-d); text-decoration: none; }
.m-sheet-links a:active { background: color-mix(in srgb, var(--m-hi) 8%, transparent); }
.m-sheet-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 26px; }
.m-sheet-cta .m-btn { justify-content: center; height: 48px; }
.m-sheet-open { overflow: hidden; }
@media (max-width: 760px) { .m-burger { display: inline-flex; } }

/* tap targets: WCAG 2.5.8 minimum (24px) with room to spare on the small controls */
.m-x-chip { min-height: 36px; }
@media (max-width: 760px) { .m-x-chip { min-height: 44px; padding-inline: 14px; } .m-btn-sm { height: 44px; } }

/* the h1 that SecHead now emits on the supporting pages sits on the h2 scale */
.master-dark .sec-head h1 { font-family: var(--m-display); font-size: clamp(32px, 4.4vw, 52px); line-height: 1.04;
  letter-spacing: -.042em; font-weight: 800; color: var(--m-hi); margin: 16px 0 0; }

/* restated last: the font shorthands above name --m-body, so the display
   selectors must be re-asserted after them to win. */
.m-h1, .m-h2, .m-h3, .m-btn, .m-logo b, .m-navlinks a, .m-navlinks button,
.m-drop-top .m-drop-title, .m-prow b, .m-card h3, .m-card .m-cat, .m-card-cta, .m-tag,
.m-dtile h3, .m-tile b, .m-foot h2, .m-x-head h2, .m-panel h3, .m-caps h3, .m-need b, .m-tier h3, .m-tier .pr, .m-faq summary,
.m-panel h4, .m-panel span, .m-need-panel h3, .m-foot h5, .m-pnav-brand b,
.m-pnav-links a, .m-vs thead th, .m-vs tbody td:first-child, .m-sun b,
.m-pl-lbl b, .m-kicker, .m-screen-bar b, .m-screen-row b {
  font-family: var(--m-display);
}

/* on the light ground the status green must be the dark emerald, not the bright one */
.m-tag.live, .m-x-st.live, .m-x-status.live,
.m-vs .yes, .master-dark .vs .yes, .master-dark .pcard .tag.live { color: #047857; }
.m-x-status.live { border-color: rgba(4,120,87,.3); background: rgba(4,120,87,.08); }
/* the home page's light middle sections keep ink text on the light theme too */
/* (removed: hard-coded --m-fg-2 here was dark-on-dark inside a dark hero;
   --m-fg-d2 is the same colour on the light page and inverts on a dark one) */
/* light theme: the selected need keeps its inverse band (the generic light
   .m-need override tied on specificity and won by order); the closing band is
   navy in every theme, so the text tokens inside it are the inverse ones */
.m-need[aria-selected="true"] { background: var(--m-inverse-bg); border-color: var(--m-inverse-bg); color: var(--m-inverse-fg); }
.m-need[aria-selected="true"] em { color: rgba(255,255,255,.72); }
.m-close { --m-hi: var(--m-inverse-fg); --m-fg-d: var(--m-inverse-fg); --m-fg-d2: rgba(255,255,255,.78); --m-fg-d3: rgba(255,255,255,.55); }

/* ── recommendations ────────────────────────────────────────────────────── */
/* #1 registered-company proof strip */
.m-proof { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 40px 0 0; padding: 0; }
.m-proof > div { border: 1px solid var(--m-line-d); border-radius: 14px; padding: 16px 18px; background: color-mix(in srgb, var(--m-hi) 4%, transparent); }
.m-proof dt { font: 700 10.5px/1 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--m-fg-d3); margin: 0 0 8px; }
.m-proof dd { margin: 0; font: 600 14.5px/1.4 var(--m-display); color: var(--m-hi); }
.m-proof dd a { color: var(--m-brand-l); text-decoration: none; }
.m-fill { color: var(--m-fg-d3); font-weight: 500; }
.m-proof > div { background: #fff; }
/* #2 price line and #6 compliance chips in the explorer panel */
.m-x-price { margin: 12px 0 0; font: 500 14px/1.4 var(--m-body); color: var(--m-fg-d2); }
.m-x-price b { color: var(--m-hi); font-family: var(--m-display); }
.m-x-comp { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.m-x-comp span { font: 600 11px/1 var(--m-display); letter-spacing: .02em; padding: 6px 9px; border-radius: 99px;
  border: 1px solid color-mix(in srgb, var(--ac) 45%, transparent); color: var(--ac-t); background: color-mix(in srgb, var(--ac) 10%, transparent); }
/* #4 call + WhatsApp in the bar */
.m-reach { width: 38px; height: 38px; border-radius: 99px; display: grid; place-items: center; border: 1px solid var(--m-line); color: var(--m-fg-2); background: #fff; }
.m-reach svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.m-reach:hover { color: var(--m-brand-d); border-color: var(--m-brand-l); }
.m-nav.on-dark .m-reach, .master-dark .m-nav .m-reach { background: color-mix(in srgb, var(--m-hi) 8%, transparent); border-color: var(--m-line-d2); color: var(--m-hi); }
.m-nav .m-reach { background: #fff; border-color: var(--m-line); color: var(--m-fg-2); }
/* #10 the installed-base lane */
.m-lane { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 22px; padding: 10px 18px; border-radius: 99px;
  border: 1px solid var(--m-line-d); background: color-mix(in srgb, var(--m-hi) 4%, transparent); font-size: 13.5px; }
.m-lane .m-mono { color: var(--m-fg-d3); }
.m-lane a { color: var(--m-fg-d); text-decoration: none; font-weight: 600; font-family: var(--m-display); }
.m-lane a:hover { color: var(--m-brand-l); }
/* #11 the screen rows come in one after another when a tile is chosen */
.m-x-panel.in .m-screen-row { animation: m-x-in .5s var(--m-ease) both; }
.m-x-panel.in .m-screen-row:nth-child(2) { animation-delay: .08s; } .m-x-panel.in .m-screen-row:nth-child(3) { animation-delay: .16s; } .m-x-panel.in .m-screen-row:nth-child(4) { animation-delay: .24s; }
.m-x-panel.in .m-screen-bars i { transform-origin: bottom; animation: m-x-grow .6s var(--m-ease) both; }
@keyframes m-x-grow { from { transform: scaleY(0); } to { transform: none; } }
@media (max-width: 1080px) { .m-proof { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .m-reach { display: none; } .m-proof { grid-template-columns: 1fr; } .m-lane { border-radius: 16px; } }
/* the product rows were styled for the dark dropdown; inside the need panel
   (a white surface on the midnight theme) they need ink */
.m-need-panel .m-prow b { color: var(--m-fg); }
.m-need-panel .m-prow em { color: var(--m-fg-2); }
.m-need-panel .m-prow:hover { background: var(--m-paper-2); border-color: var(--m-line); }

/* ==========================================================================
   PALETTE OPTIONS — data-palette on <html>. Absent is the brand indigo from
   the Comsky Suite canvas. Each palette moves only the SUITE colour; product
   accents keep their own, so the nine still read as nine. Pick one, paste its
   values into .master above, and delete this block.
   ========================================================================== */


/* ==========================================================================
   PRODUCTS MEGA MENU — a category rail, then that category's products
   ========================================================================== */
.m-drop-products { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 0; padding: 0; }
.m-cat-rail { display: grid; align-content: start; gap: 2px; padding: 18px 14px 22px; border-right: 1px solid var(--m-line); background: var(--m-paper-2); }
.m-cat { display: block; width: 100%; text-align: left; border: 0; background: none; cursor: pointer; font: inherit;
  padding: 11px 13px; border-radius: 12px; color: var(--m-fg); text-decoration: none; position: relative; transition: background .16s; }
.m-cat b { display: block; font: 700 15px/1.25 var(--m-display); letter-spacing: -.028em; }
.m-cat em { display: block; font: 400 12.4px/1.5 var(--m-body); font-style: normal; color: var(--m-fg-3); margin-top: 4px; padding-right: 22px; }
.m-cat-n { position: absolute; top: 12px; right: 12px; font: 700 10px/1 'JetBrains Mono', monospace; color: var(--m-fg-3); }
.m-cat:hover { background: #fff; }
.m-cat[aria-selected="true"] { background: #fff; box-shadow: 0 1px 2px rgba(20,18,58,.06), inset 3px 0 0 var(--m-brand); }
.m-cat-all { margin-top: 10px; border-top: 1px solid var(--m-line); border-radius: 0 0 12px 12px; padding-top: 16px; }
.m-cat-all b { color: var(--m-brand-d); }
.m-cat-panels { padding: 22px 26px 26px; }
.m-cat-panel[hidden] { display: none; }
.m-prow-st { margin-left: auto; align-self: center; font: 700 9.5px/1 'JetBrains Mono', monospace; letter-spacing: .1em;
  text-transform: uppercase; padding: 5px 8px; border-radius: 99px; color: var(--m-fg-3); background: var(--m-paper-2); white-space: nowrap; }
.m-prow-st.live { color: #047857; background: rgba(4,120,87,.1); }
.m-drop-grid { grid-template-columns: repeat(2, 1fr); }

/* ==========================================================================
   #6 — INSIDE A PRODUCT the suite bar steps back so the product's own bar
   leads. One row of CTAs on the page, not two: the suite's Login/Get Started
   give way to a single "All products" link, and the bar loses height, weight
   and colour. The product bar then sits directly under it and carries the
   real actions.
   ========================================================================== */
.m-allprod { display: none; font: 700 13px/1 var(--m-display); color: var(--m-fg-2); text-decoration: none;
  padding: 8px 12px; border-radius: 99px; white-space: nowrap; }
.m-allprod:hover { color: var(--m-brand-d); background: rgba(79,70,229,.07); }
.m-allprod .ar { transition: transform .3s var(--m-ease); display: inline-block; }
.m-allprod:hover .ar { transform: translateX(3px); }

.m-in-product .m-nav { background: var(--m-paper-2); border-bottom: 1px solid var(--m-line); backdrop-filter: none; }
.m-in-product .m-nav-in { height: 48px; gap: 22px; }
.m-in-product .m-logo-mark { width: 24px; height: 24px; }
.m-in-product .m-logo-word { height: 15px; }
.m-in-product .m-logo-type { font-size: 15px; }
.m-in-product .m-navlinks a, .m-in-product .m-navlinks button { font-size: 13.2px; padding: 7px 10px; color: var(--m-fg-3); }
.m-in-product .m-navlinks a:hover, .m-in-product .m-navlinks button:hover { color: var(--m-brand-d); }
.m-in-product .m-suite-only, .m-in-product .m-reach { display: none; }
.m-in-product .m-allprod { display: inline-flex; align-items: center; gap: 6px; }
.m-in-product .m-drop { top: 48px; }
/* the product bar becomes the primary bar: taller, white, and it carries the CTAs */
.m-in-product .m-pnav { top: 48px; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--m-line);
  box-shadow: 0 1px 0 var(--m-line), 0 10px 30px -26px rgba(20,18,58,.5); }
.m-in-product .m-pnav-in { height: 64px; }
.m-in-product .m-pnav-brand b { font-size: 18px; }
.m-in-product .m-pnav-brand .m-pic { width: 34px; height: 34px; border-radius: 10px; }
.m-in-product .m-pnav-brand .m-pic svg { width: 19px; height: 19px; }
.m-in-product .m-pnav-links a { font-size: 14.5px; }
.m-in-product .m-sheet { inset: 112px 0 0; }
@media (max-width: 1080px) { .m-drop-products { grid-template-columns: 1fr; } .m-cat-rail { border-right: 0; border-bottom: 1px solid var(--m-line); grid-template-columns: repeat(2, 1fr); } .m-cat-all { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .m-drop-grid { grid-template-columns: 1fr; }
  .m-cat-rail { grid-template-columns: 1fr; }
  .m-in-product .m-nav-in { height: 44px; }
  .m-in-product .m-pnav { top: 44px; }
  .m-in-product .m-sheet { inset: 104px 0 0; }
  .m-allprod { display: none !important; }
}
.m-pnav-links a[aria-current="page"] { color: var(--ac-d, var(--ac)); background: color-mix(in srgb, var(--ac) 12%, transparent); }

/* ==========================================================================
   HERO BACKDROPS — data-hero on <html>. The dark ones re-point the hero's own
   text tokens so the copy inverts with the backdrop instead of being restyled
   piece by piece.
   ========================================================================== */
.m-backdrop { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.m-backdrop > * { position: absolute; display: block; opacity: 0; transition: opacity .4s var(--m-ease); }
/* lift the hero's CONTENT above the backdrop — but the backdrop layers
   themselves must keep their own positioning, or they drop into flow and the
   canvas inflates the hero by its own intrinsic square. */
.m-hero > *:not(.m-backdrop):not(.m-wave):not(.m-sky):not(script),
.m-phero > *:not(.m-backdrop):not(.m-wave):not(.m-sky):not(script) { position: relative; z-index: 1; }

/* every dark backdrop shares one ground + inverted tokens */
[data-hero="terrain"] .m-hero, [data-hero="bloom"] .m-hero,
[data-hero="grid"] .m-hero, [data-hero="beams"] .m-hero {
  background: #0a0a18; --m-hi: #ffffff; --m-fg-d: #ffffff; --m-fg-d2: rgba(255,255,255,.80);
  --m-fg-d3: rgba(255,255,255,.58); --m-line-d: rgba(255,255,255,.16); --m-line-d2: rgba(255,255,255,.28);
  --m-surface: rgba(255,255,255,.08);
}
[data-hero="terrain"] .m-hero:before, [data-hero="bloom"] .m-hero:before,
[data-hero="grid"] .m-hero:before, [data-hero="beams"] .m-hero:before { display: none; }
[data-hero="terrain"] .m-hero:after, [data-hero="bloom"] .m-hero:after,
[data-hero="grid"] .m-hero:after, [data-hero="beams"] .m-hero:after { display: none; }
/* the buttons and pills on a dark hero */
[data-hero="terrain"] .m-hero .m-btn-d, [data-hero="bloom"] .m-hero .m-btn-d,
[data-hero="grid"] .m-hero .m-btn-d, [data-hero="beams"] .m-hero .m-btn-d {
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.3); color: #fff; backdrop-filter: blur(8px); }
[data-hero="terrain"] .m-hero .m-kicker, [data-hero="bloom"] .m-hero .m-kicker,
[data-hero="grid"] .m-hero .m-kicker, [data-hero="beams"] .m-hero .m-kicker {
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.22); color: rgba(255,255,255,.84); box-shadow: none; }
[data-hero="terrain"] .m-hero .m-grad, [data-hero="bloom"] .m-hero .m-grad,
[data-hero="grid"] .m-hero .m-grad, [data-hero="beams"] .m-hero .m-grad {
  background: linear-gradient(100deg, var(--m-cyan), #fff 55%, var(--m-cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
/* the explorer sits on the dark hero too */
/* OPAQUE, not translucent: anything see-through here lets the backdrop read
   through the copy, which is unreadable over a wireframe. */
[data-hero="terrain"] .m-hero .m-x-panel, [data-hero="bloom"] .m-hero .m-x-panel,
[data-hero="grid"] .m-hero .m-x-panel, [data-hero="beams"] .m-hero .m-x-panel {
  background: #14142b; border-color: rgba(255,255,255,.16); box-shadow: 0 40px 90px -46px #000; }
[data-hero="terrain"] .m-hero .m-x-tile, [data-hero="bloom"] .m-hero .m-x-tile,
[data-hero="grid"] .m-hero .m-x-tile, [data-hero="beams"] .m-hero .m-x-tile {
  background: #14142b; border-color: rgba(255,255,255,.14); }
[data-hero="terrain"] .m-hero .m-x-tile[aria-selected="true"], [data-hero="bloom"] .m-hero .m-x-tile[aria-selected="true"],
[data-hero="grid"] .m-hero .m-x-tile[aria-selected="true"], [data-hero="beams"] .m-hero .m-x-tile[aria-selected="true"] {
  background: color-mix(in srgb, var(--ac) 22%, #14142b); }
[data-hero="terrain"] .m-hero .m-screen, [data-hero="bloom"] .m-hero .m-screen,
[data-hero="grid"] .m-hero .m-screen, [data-hero="beams"] .m-hero .m-screen { background: #0d0d20; }
[data-hero="terrain"] .m-hero .m-x-chip, [data-hero="bloom"] .m-hero .m-x-chip,
[data-hero="grid"] .m-hero .m-x-chip, [data-hero="beams"] .m-hero .m-x-chip { background: #1b1b36; }
[data-hero="terrain"] .m-hero .m-kicker, [data-hero="bloom"] .m-hero .m-kicker,
[data-hero="grid"] .m-hero .m-kicker, [data-hero="beams"] .m-hero .m-kicker,
[data-hero="terrain"] .m-hero .m-lane, [data-hero="bloom"] .m-hero .m-lane,
[data-hero="grid"] .m-hero .m-lane, [data-hero="beams"] .m-hero .m-lane { background: #16162e; border-color: rgba(255,255,255,.18); }

/* the crown glow, on every dark backdrop */
[data-hero="terrain"] .m-bd-glow, [data-hero="bloom"] .m-bd-glow,
[data-hero="grid"] .m-bd-glow, [data-hero="beams"] .m-bd-glow {
  opacity: 1; inset: -46% -20% auto; height: 96%;
  background: radial-gradient(46% 42% at 50% 6%, color-mix(in srgb, var(--m-cyan) 40%, transparent), transparent 66%),
              radial-gradient(40% 36% at 50% 0%, color-mix(in srgb, var(--m-brand) 55%, transparent), transparent 62%); }

/* TERRAIN — the wireframe range and the measurement ticks */
[data-hero="terrain"] .m-bd-terrain { opacity: 1; left: 0; right: 0; bottom: 0; width: 100%; height: 46%;
  mask-image: linear-gradient(to top, #000 62%, rgba(0,0,0,.65) 86%, transparent 100%); }
[data-hero="terrain"] .m-bd-ticks { opacity: 1; top: 12%; bottom: 12%; right: 26px; display: flex; flex-direction: column;
  justify-content: space-between; align-items: flex-end; font: 500 11px/1 'JetBrains Mono', monospace; color: rgba(255,255,255,.34); }
.m-bd-ticks i { font-style: normal; }

/* AURORA — colour blooms, no terrain */
[data-hero="bloom"] .m-bd-bloom { opacity: 1; border-radius: 50%; filter: blur(80px); }
[data-hero="bloom"] .m-bd-bloom.a { width: 46%; height: 120%; top: -30%; left: -6%;
  background: radial-gradient(circle, color-mix(in srgb, var(--m-brand) 60%, transparent), transparent 68%); }
[data-hero="bloom"] .m-bd-bloom.b { width: 42%; height: 110%; top: -14%; right: -8%;
  background: radial-gradient(circle, color-mix(in srgb, var(--m-cyan) 45%, transparent), transparent 68%); }

/* GRID — a plane receding to the horizon */
[data-hero="grid"] .m-bd-grid { opacity: 1; left: -30%; right: -30%; bottom: -6%; height: 62%;
  background-image: linear-gradient(color-mix(in srgb, var(--m-cyan) 34%, transparent) 1px, transparent 1px),
                    linear-gradient(90deg, color-mix(in srgb, var(--m-cyan) 34%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(360px) rotateX(64deg);
  mask-image: linear-gradient(to top, #000 4%, transparent 72%); }

/* BEAMS — angled shafts of light */
[data-hero="beams"] .m-bd-beams { opacity: 1; inset: -30% -10%;
  background: repeating-linear-gradient(104deg, transparent 0 84px,
    color-mix(in srgb, var(--m-cyan) 13%, transparent) 84px 96px, transparent 96px 190px);
  mask-image: radial-gradient(60% 70% at 50% 24%, #000, transparent 76%); }

/* MESH — stays on the light ground */
[data-hero="mesh"] .m-hero { background:
  radial-gradient(42% 46% at 14% 8%, color-mix(in srgb, var(--m-brand) 13%, transparent), transparent 64%),
  radial-gradient(38% 42% at 88% 4%, color-mix(in srgb, var(--m-cyan) 22%, transparent), transparent 62%),
  radial-gradient(36% 40% at 62% 84%, color-mix(in srgb, var(--m-brand) 9%, transparent), transparent 64%); }

/* ==========================================================================
   LOGO STRIP — data-strip on <html>: stack (default) | customers | none
   ========================================================================== */
.m-strip-wrap { margin-top: 44px; }
.m-strip-lede { text-align: center; font: 500 12.5px/1 var(--m-body); letter-spacing: .04em; color: var(--m-fg-d3); margin: 0 0 18px; }
.m-logos { display: none; }
.m-logos-stack { display: block; }
.m-logos-stack { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.m-logos-row { display: flex; gap: 40px; width: max-content; animation: m-logos 38s linear infinite; }
@keyframes m-logos { to { transform: translateX(-50%); } }
.m-logos-stack:hover .m-logos-row { animation-play-state: paused; }
.m-logo-chip { font: 700 17px/1 var(--m-display); letter-spacing: -.02em; color: var(--m-fg-d3); white-space: nowrap; opacity: .9; }
.m-logo-slot { border: 1.5px dashed var(--m-line-d2); border-radius: 12px; padding: 16px 10px; text-align: center;
  font: 600 11.5px/1.3 var(--m-display); color: var(--m-fg-d3); }
.m-logo-slot small { display: block; font-weight: 500; font-size: 10px; opacity: .75; margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .m-logos-row { animation: none; } }
@media (max-width: 760px) {
  [data-hero="terrain"] .m-bd-ticks { display: none; }
  .m-logo-chip { font-size: 15px; }
}


/* status green on a dark hero panel: the dark emerald is for the light page */
[data-hero="terrain"] .m-hero .m-x-st.live, [data-hero="bloom"] .m-hero .m-x-st.live,
[data-hero="grid"] .m-hero .m-x-st.live, [data-hero="beams"] .m-hero .m-x-st.live,
[data-hero="terrain"] .m-hero .m-x-status.live, [data-hero="bloom"] .m-hero .m-x-status.live,
[data-hero="grid"] .m-hero .m-x-status.live, [data-hero="beams"] .m-hero .m-x-status.live {
  color: #6ee7b7; background: rgba(110,231,183,.14); border-color: rgba(110,231,183,.34); }

/* ==========================================================================
   THE WORDMARK — comsky.ai set as the brand lockup: com in ink, sky in the
   brand colour, .ai lighter. These three rules were lost when an earlier
   non-greedy block replacement over-ran; the markup was always right.
   ========================================================================== */
/* The wordmark: "comsky" black, the dot deep blue, "ai" light blue. A logo is
   exempt from contrast minimums, which is why "ai" is allowed to sit lighter
   than body text would be. */
.m-logo-type { font: 800 22px/1 var(--m-display); letter-spacing: -.05em; color: #000; white-space: nowrap; }
.m-logo-sky { color: inherit; }
.m-logo-dot { color: #1e3a8a; opacity: 1; font-weight: 800; }
/* #60a5fa gave the .ai 2.35:1 on the light ground — under the 3:1 large-text
   floor, and under 4.5:1 at the 15px the product bar sets. The brand blue is
   the same accent, legible: 4.63:1 here and 4.6:1 at 15px. */
.m-logo-ai  { color: var(--m-brand); }
/* over a dark hero, and in the footer, the lockup inverts with its ground */
/* Every bar on the site is light, so the wordmark keeps its light-ground cut
   everywhere. The `on-dark` overrides that used to whiten it are gone: the
   state stopped producing a dark bar when --m-ink inverted. */
/* The footer ground is light (--m-paper-2), so the wordmark stays black there. */
.m-foot .m-logo-type { color: #000; }
.m-foot .m-logo-sky { color: inherit; }
.m-foot .m-logo-dot { color: #1e3a8a; opacity: 1; }
.m-foot .m-logo-ai { color: var(--m-brand); }
.m-in-product .m-logo-type { font-size: 17px; }

/* ==========================================================================
   TERRAIN, BOLDER — a taller range, opaque fills, brighter wireframe, and a
   second glow behind the crest so the ridgeline reads against the ground.
   ========================================================================== */
[data-hero="terrain"] .m-bd-terrain #bd-far stop:first-child { stop-opacity: .62; }
[data-hero="terrain"] .m-bd-terrain #bd-far stop:last-child { stop-opacity: .18; }
[data-hero="terrain"] .m-bd-terrain #bd-near stop:first-child { stop-opacity: .95; }
[data-hero="terrain"] .m-bd-terrain #bd-near stop:last-child { stop-opacity: .42; }
[data-hero="terrain"] .m-bd-terrain path { stroke-width: 1; }
[data-hero="terrain"] .m-bd-bloom.a { opacity: 1; width: 120%; height: 62%; left: -10%; bottom: 2%;
  border-radius: 50%; filter: blur(70px);
  background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--m-brand) 62%, transparent), transparent 66%); }
[data-hero="terrain"] .m-bd-ticks { color: rgba(255,255,255,.5); }

/* ==========================================================================
   A SHORT HERO — the explorer moved into its own section, so the backdrop
   now sits directly under the headline rather than behind a tall column of
   product UI. The hero is sized by its copy, and the range is scaled for it.
   ========================================================================== */
.m-hero { padding-bottom: 0; }
.m-hero-in { padding-bottom: 0; }
[data-hero="terrain"] .m-bd-terrain { height: 58%; }
.m-x-sec { padding-top: 84px; }
.m-x-sec .m-x { margin-top: 40px; }

/* ==========================================================================
   THE WAVE FIELD — data-hero="wave". A canvas, so it sits under the copy and
   takes no pointer events of its own; the hero forwards the pointer to it.
   ========================================================================== */
.m-wave { position: absolute; inset: 0; width: 100%; height: 100%; display: none;
  pointer-events: none; z-index: 0; }
[data-hero="wave"] .m-wave { display: block; }
[data-hero="wave"] .m-hero {
  background: radial-gradient(120% 90% at 78% 8%, #10306e 0%, #0a1c45 38%, #050b1f 74%, #03060f 100%);
  --m-hi: #ffffff; --m-fg-d: #ffffff; --m-fg-d2: rgba(255,255,255,.80);
  --m-fg-d3: rgba(255,255,255,.58); --m-line-d: rgba(255,255,255,.16);
  --m-line-d2: rgba(255,255,255,.28); --m-surface: rgba(255,255,255,.08); }
[data-hero="wave"] .m-hero:before, [data-hero="wave"] .m-hero:after { display: none; }
[data-hero="wave"] .m-hero .m-btn-d { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.3);
  color: #fff; backdrop-filter: blur(8px); }
[data-hero="wave"] .m-hero .m-kicker, [data-hero="wave"] .m-hero .m-lane {
  background: rgba(10,22,52,.66); border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.86);
  backdrop-filter: blur(10px); box-shadow: none; }
[data-hero="wave"] .m-hero .m-lane a { color: #fff; }
[data-hero="wave"] .m-hero .m-grad { background: linear-gradient(100deg, var(--m-cyan), #fff 55%, var(--m-cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-hero="wave"] .m-hero .m-logo-chip { color: rgba(255,255,255,.62); }
[data-hero="wave"] .m-hero .m-strip-lede { color: rgba(255,255,255,.5); }
@media (prefers-reduced-motion: reduce) { .m-wave { opacity: .85; } }

/* ==========================================================================
   SKYSCAPE — com + SKY. Five skies, each with real aerial perspective.
   The canvas paints the whole hero ground, so the hero needs no background of
   its own; a scrim under the copy keeps the headline readable against a bright
   horizon without flattening the picture.
   ========================================================================== */
/* width/height are REQUIRED: a canvas is a replaced element, so inset:0 alone
   leaves it at its intrinsic (backing-store) size and the hero clips it. */
.m-sky { position: absolute; inset: 0; width: 100%; height: 100%; display: none; pointer-events: none; z-index: 0; }
[data-hero="dawn"] .m-sky, [data-hero="night"] .m-sky, [data-hero="summit"] .m-sky,
[data-hero="aurora"] .m-sky, [data-hero="orbit"] .m-sky { display: block; }

[data-hero="dawn"] .m-hero, [data-hero="night"] .m-hero, [data-hero="summit"] .m-hero,
[data-hero="bloom"] .m-hero, [data-hero="aurora"] .m-hero, [data-hero="orbit"] .m-hero {
  background: #05070f; --m-hi: #ffffff; --m-fg-d: #ffffff; --m-fg-d2: rgba(255,255,255,.86);
  --m-fg-d3: rgba(255,255,255,.62); --m-line-d: rgba(255,255,255,.2);
  --m-line-d2: rgba(255,255,255,.32); --m-surface: rgba(255,255,255,.1); }
[data-hero="dawn"] .m-hero:before, [data-hero="night"] .m-hero:before, [data-hero="summit"] .m-hero:before,
[data-hero="bloom"] .m-hero:before, [data-hero="aurora"] .m-hero:before, [data-hero="orbit"] .m-hero:before,
[data-hero="dawn"] .m-hero:after, [data-hero="night"] .m-hero:after, [data-hero="summit"] .m-hero:after,
[data-hero="bloom"] .m-hero:after, [data-hero="aurora"] .m-hero:after, [data-hero="orbit"] .m-hero:after { display: none; }

/* the scrim: a soft vertical wash so type never fights the horizon */
[data-hero="dawn"] .m-hero-in, [data-hero="night"] .m-hero-in, [data-hero="summit"] .m-hero-in,
[data-hero="bloom"] .m-hero-in, [data-hero="aurora"] .m-hero-in, [data-hero="orbit"] .m-hero-in {
  background:
    linear-gradient(to bottom, transparent 36%, rgba(4,7,18,.30) 58%, rgba(4,7,18,.44) 78%, rgba(4,7,18,.54) 100%),
    radial-gradient(86% 84% at 50% 44%, rgba(4,7,18,.80), rgba(4,7,18,.58) 52%, rgba(4,7,18,.30) 76%, rgba(4,7,18,.06) 92%, transparent); }

[data-hero="dawn"] .m-hero .m-btn-d, [data-hero="night"] .m-hero .m-btn-d, [data-hero="summit"] .m-hero .m-btn-d,
[data-hero="bloom"] .m-hero, [data-hero="aurora"] .m-hero .m-btn-d, [data-hero="orbit"] .m-hero .m-btn-d {
  background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); color: #fff; backdrop-filter: blur(10px); }
[data-hero="dawn"] .m-hero .m-kicker, [data-hero="night"] .m-hero .m-kicker, [data-hero="summit"] .m-hero .m-kicker,
[data-hero="bloom"] .m-hero, [data-hero="aurora"] .m-hero .m-kicker, [data-hero="orbit"] .m-hero .m-kicker,
[data-hero="dawn"] .m-hero .m-lane, [data-hero="night"] .m-hero .m-lane, [data-hero="summit"] .m-hero .m-lane,
[data-hero="bloom"] .m-hero, [data-hero="aurora"] .m-hero .m-lane, [data-hero="orbit"] .m-hero .m-lane {
  background: rgba(6,10,24,.55); border-color: rgba(255,255,255,.24); backdrop-filter: blur(12px); box-shadow: none; }
[data-hero="dawn"] .m-hero .m-lane a, [data-hero="night"] .m-hero .m-lane a, [data-hero="summit"] .m-hero .m-lane a,
[data-hero="bloom"] .m-hero, [data-hero="aurora"] .m-hero .m-lane a, [data-hero="orbit"] .m-hero .m-lane a { color: #fff; }
/* SKY in comsky lights up when the hero is a sky */

[data-hero="dawn"] .m-hero .m-grad { background: linear-gradient(100deg, #ffd9a0, #fff 50%, #ffc98a);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-hero="summit"] .m-hero .m-grad { background: linear-gradient(100deg, #cfe4f5, #fff 52%, #9fd4ff);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-hero="night"] .m-hero .m-grad, [data-hero="bloom"] .m-hero, [data-hero="aurora"] .m-hero .m-grad, [data-hero="orbit"] .m-hero .m-grad {
  background: linear-gradient(100deg, #7fe9d0, #fff 52%, #8fd8ff);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-hero="dawn"] .m-hero .m-logo-chip, [data-hero="night"] .m-hero .m-logo-chip,
[data-hero="summit"] .m-hero .m-logo-chip, [data-hero="bloom"] .m-hero, [data-hero="aurora"] .m-hero .m-logo-chip,
[data-hero="orbit"] .m-hero .m-logo-chip { color: rgba(255,255,255,.66); }
[data-hero="dawn"] .m-hero .m-strip-lede, [data-hero="night"] .m-hero .m-strip-lede,
[data-hero="summit"] .m-hero .m-strip-lede, [data-hero="bloom"] .m-hero, [data-hero="aurora"] .m-hero .m-strip-lede,
[data-hero="orbit"] .m-hero .m-strip-lede { color: rgba(255,255,255,.55); }
/* a sky wants room to be a sky */
[data-hero="dawn"] .m-hero-in, [data-hero="night"] .m-hero-in, [data-hero="summit"] .m-hero-in,
[data-hero="bloom"] .m-hero-in, [data-hero="aurora"] .m-hero-in, [data-hero="orbit"] .m-hero-in { padding-top: 22px; padding-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   THE ORRERY — the product listing as a sky
   Nine products in orbit around one core. The stage is a night panel so the
   star field reads, and so the section carries contrast on a light page.
   The planets never move: the rings, stars and corona carry the motion.
   ═══════════════════════════════════════════════════════════════════════════ */
.m-orr { margin-top: 40px; }
.m-orr-stage {
  position: relative; height: clamp(430px, 46vw, 580px); border-radius: 28px; overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 46%, #1b2450 0%, #121a3a 38%, #0b1026 72%, #070a1a 100%);
  border: 1px solid #222c58;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 40px 90px -56px rgba(9,12,32,.75);
  isolation: isolate;
}
.m-orr-sky, .m-orr-rings { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-orr-star { fill: #cfe0ff; opacity: var(--o); animation: m-orr-tw 5.5s var(--d) ease-in-out infinite; }
@keyframes m-orr-tw { 0%, 100% { opacity: var(--o); } 50% { opacity: calc(var(--o) * .28); } }

.m-orr-ring { fill: none; stroke: #4a5a9e; stroke-width: .18; opacity: .55; }
.m-orr-trace { fill: none; stroke: #8fd8ff; stroke-width: .3; opacity: .75;
  stroke-dasharray: 5 95; stroke-linecap: round; animation: m-orr-run 9s linear infinite; }
.m-orr-trace.t1 { animation-duration: 15s; animation-direction: reverse; stroke: #a5b4fc; }
@keyframes m-orr-run { to { stroke-dashoffset: -100; } }

/* ── THE CORE IS A SUN, AND THE SUN IS AN ECLIPSE ──────────────────────────
   The old core was a lit badge: a bright-ish disc with the wordmark on it.
   A lit disc with type on it is a button, never a star. So the disc goes the
   other way — near-black, the only thing on this stage DARKER than the sky —
   and all the light moves outside it: a hairline chromosphere at the limb,
   two counter-drifting fields of white streamers, and a bloom that reaches
   out under the planets. Totality. The wordmark gains from it: white on
   #04060f is ~19:1 where white on the old #202a5c was ~9:1.

   Every size is clamped rather than fixed, because the stage is only
   clamp(430px, 46vw, 580px) tall with overflow:hidden and the nearest planet
   is close: measured centre-to-centre, the inner ring's nearest body sits
   ~136px away at the 861px breakpoint (edge at ~106px) and ~195px at full
   width (edge at ~165px). --sc is therefore a hard ceiling on anything with
   structure; only --sf goes past it, and --sf is a gradient that is already
   fully transparent at its own edge, so it neither clips on the stage nor
   competes with a planet. Light comes from the upper left here, the same
   direction the planets are already lit from.
   ──────────────────────────────────────────────────────────────────────── */
.m-orr-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; z-index: 2;
  /* pure decoration (aria-hidden): never steal a hover or a click from a planet */
  pointer-events: none;
  --sd: clamp(104px, 9.8vw, 126px);  /* the occulting disc — the logo's ground */
  --sc: clamp(188px, 21vw, 292px);   /* corona — structure stops here */
  --sf: calc(var(--sc) * 1.55); }    /* bloom — soft, ends in nothing */
.m-orr-flare, .m-orr-corona, .m-orr-limb {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; border-radius: 50%; }

/* the bloom, plus the wide equatorial wings a real corona has at solar minimum */
.m-orr-flare { width: var(--sf); height: var(--sf); rotate: -13deg;
  background:
    radial-gradient(ellipse calc(var(--sc) * .74) calc(var(--sc) * .16) at 50% 50%,
      rgba(255,255,255,.20), rgba(255,255,255,.06) 48%, transparent 78%),
    radial-gradient(circle closest-side,
      rgba(255,255,255,.22) calc(var(--sd) * .42),
      rgba(255,217,160,.15) calc(var(--sd) * .62),
      rgba(143,216,255,.13) calc(var(--sc) * .42),
      rgba(165,180,252,.09) calc(var(--sc) * .62),
      transparent 100%);
  animation: m-orr-breathe 9s ease-in-out infinite; }
/* scale/opacity, not transform: the layer already uses `translate` and `rotate`
   as independent properties, and a transform here would wipe both out. */
@keyframes m-orr-breathe {
  0%, 100% { scale: 1; opacity: .92; }
  50%      { scale: 1.07; opacity: .68; } }

/* the streamers — two spoke fields on different periods, drifting opposite
   ways, so they beat against each other instead of visibly spinning. The mask
   is measured off --sd and --sc in px, not in %, because the disc-to-corona
   ratio changes across the clamps. */
.m-orr-corona { width: var(--sc); height: var(--sc);
  background: repeating-conic-gradient(from 0deg,
    rgba(255,255,255,0) 0deg 3.2deg, rgba(255,255,255,.40) 5.6deg, rgba(255,255,255,0) 8.4deg 12deg);
  -webkit-mask-image: radial-gradient(closest-side, #0000 calc(var(--sd) / 2 - 3px),
    #000 calc(var(--sd) / 2 + 10px), #000 calc(var(--sc) * .36), #0000 calc(var(--sc) / 2));
          mask-image: radial-gradient(closest-side, #0000 calc(var(--sd) / 2 - 3px),
    #000 calc(var(--sd) / 2 + 10px), #000 calc(var(--sc) * .36), #0000 calc(var(--sc) / 2));
  animation: m-orr-spin 84s linear infinite; }
.m-orr-corona.c2 { opacity: .85;
  background: repeating-conic-gradient(from 6deg,
    rgba(207,224,255,0) 0deg 4.4deg, rgba(207,224,255,.30) 7.5deg, rgba(207,224,255,0) 11deg 17deg);
  animation-duration: 127s; animation-direction: reverse; }
@keyframes m-orr-spin { to { rotate: 360deg; } }
/* Without masking the spokes would end on a hard circular edge — a gear, not a
   corona. Drop them and keep the bloom, which needs no mask. */
@supports not ((-webkit-mask-image: radial-gradient(#000, #0000)) or (mask-image: radial-gradient(#000, #0000))) {
  .m-orr-corona { display: none; }
}

/* the chromosphere: a hairline of light all the way round the disc, blown out
   at the upper left where the diamond ring would be. It sits BEHIND the disc
   and is only 6px larger, so the disc itself trims it into a ring — no mask. */
.m-orr-limb { width: calc(var(--sd) + 6px); height: calc(var(--sd) + 6px); filter: blur(.5px);
  background: conic-gradient(from 300deg,
    rgba(255,255,255,.30), #ffffff 22deg, #ffd9a0 40deg, rgba(143,216,255,.70) 96deg,
    rgba(165,180,252,.30) 182deg, rgba(143,216,255,.46) 272deg,
    rgba(255,255,255,.30) 340deg, rgba(255,255,255,.30));
  box-shadow: 0 0 26px -2px rgba(143,216,255,.5), 0 0 60px -6px rgba(255,217,160,.28); }
.m-orr-limb::after { content: ''; position: absolute; inset: 0; border-radius: 50%; filter: blur(1.5px);
  background: radial-gradient(circle 13px at 15% 17%,
    #fff 0 22%, rgba(255,217,160,.75) 46%, rgba(255,217,160,0) 72%); }

/* the disc — the dark body in front. Near-black on purpose: it is the one
   thing here darker than the sky, and that inversion is the whole trick. */
.m-orr-core-in { position: relative; z-index: 2;
  display: grid; gap: 3px; place-items: center; text-align: center;
  width: var(--sd); height: var(--sd); border-radius: 50%;
  background: radial-gradient(112% 112% at 26% 20%, #12183a 0%, #080c1f 44%, #04060f 100%);
  box-shadow: inset 0 0 0 1px rgba(143,216,255,.22),
    inset 5px 6px 22px -14px rgba(255,255,255,.55),
    0 18px 44px -18px rgba(0,0,0,.85); }
.m-orr-core-in b { font-family: var(--m-display); font-weight: 700; line-height: 1;
  font-size: calc(var(--sd) * .216); letter-spacing: -.025em; color: #fff;
  text-shadow: 0 0 18px rgba(143,216,255,.35); }
.m-orr-core-in b i { font-style: normal; color: #8fd8ff; }
.m-orr-core-in .m-mono { font-size: 9px; color: #93a3d8; letter-spacing: .14em; }

/* the planets */
.m-orr-bodies { position: absolute; inset: 0; z-index: 3; }
.m-orr-body { position: absolute; transform: translate(-50%, -50%); display: grid; gap: 8px; justify-items: center;
  background: none; border: 0; padding: 0; cursor: pointer; color: inherit;
  animation: m-orr-float 6.5s var(--fd) ease-in-out infinite; }
@keyframes m-orr-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
.m-orr-planet { position: relative; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; background: radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--ac) 88%, #fff), var(--ac) 58%, color-mix(in srgb, var(--ac) 62%, #05060f));
  border: 1px solid color-mix(in srgb, var(--ac) 70%, #fff 18%);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--ac) 16%, transparent), 0 14px 26px -12px rgba(0,0,0,.8);
  transition: transform .26s var(--m-ease), box-shadow .26s var(--m-ease); }
.m-orr-planet svg, .m-orr-planet img { width: 26px; height: 26px; }
.m-orr-body.r-soon .m-orr-planet { width: 48px; height: 48px;
  background: radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--ac) 52%, #7a88c0), color-mix(in srgb, var(--ac) 44%, #10142e) 66%);
  border-style: dashed; border-color: color-mix(in srgb, var(--ac) 52%, #8b97cc);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ac) 10%, transparent); }
.m-orr-body.r-soon .m-orr-planet svg { width: 21px; height: 21px; opacity: .92; }
.m-orr-body:hover .m-orr-planet, .m-orr-body[aria-selected="true"] .m-orr-planet { transform: scale(1.12); }
.m-orr-body[aria-selected="true"] .m-orr-planet {
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--ac) 34%, transparent), 0 0 34px -2px var(--ac), 0 14px 26px -12px rgba(0,0,0,.8); }
.m-orr-body:focus-visible { outline: none; }
.m-orr-body:focus-visible .m-orr-planet { outline: 2px solid #fff; outline-offset: 4px; }

.m-orr-lbl { display: grid; gap: 1px; justify-items: center; white-space: nowrap; pointer-events: none; }
.m-orr-lbl b { font: 700 14px/1.2 var(--m-display); color: #fff; letter-spacing: -.01em; }
.m-orr-lbl i { font: 500 10.5px/1 var(--m-body); font-style: normal; color: #93a3d8; letter-spacing: .04em; }
.m-orr-body[aria-selected="true"] .m-orr-lbl i { color: #8fd8ff; }

.m-orr-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 18px 2px 0;
  font: 500 12.5px/1.5 var(--m-body); color: var(--m-fg-d2); }
.m-orr-key { display: inline-flex; align-items: center; gap: 8px; }
.m-orr-key i { width: 11px; height: 11px; border-radius: 50%; background: var(--m-brand); flex: none; }
.m-orr-key.k-soon i { background: none; border: 1.5px dashed var(--m-fg-d3); }
.m-orr-key em { font-style: normal; color: var(--m-fg-d3); }
.m-orr-hint { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--m-fg-d3); }
.m-orr-panels { margin-top: 22px; }

/* Narrow screens: the sky can't hold nine labelled bodies, so it becomes a list.
   Same buttons, same tablist, same panels — only the geometry changes. */
@media (max-width: 860px) {
  .m-orr-stage { height: auto; padding: 22px 16px 24px; }
  .m-orr-sky, .m-orr-rings, .m-orr-core { display: none; }
  .m-orr-bodies { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(122px, 1fr)); gap: 14px 8px; }
  .m-orr-body { position: static !important; left: auto !important; top: auto !important;
    transform: none; animation: none; padding: 12px 4px; border-radius: 16px; }
  .m-orr-body[aria-selected="true"] { background: rgba(143,216,255,.1); }
  .m-orr-planet { width: 46px; height: 46px; }
  .m-orr-body.r-soon .m-orr-planet { width: 44px; height: 44px; }
  .m-orr-hint { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .m-orr-star, .m-orr-trace, .m-orr-corona, .m-orr-flare, .m-orr-body { animation: none; }
  /* the sun still has to be a sun when nothing moves: the streamers rest at
     0deg and the bloom holds the opacity it would have breathed through. */
  .m-orr-flare { opacity: .86; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE HORIZON BAND — stars over a ridgeline, used as a seam between sections
   Stars are CSS gradients, not SVG circles: the ridge SVG is stretched with
   preserveAspectRatio="none", which would squash a circle into an ellipse.
   ═══════════════════════════════════════════════════════════════════════════ */
.m-skyband { position: relative; height: var(--bh, 132px); width: 100%; overflow: hidden;
  pointer-events: none; user-select: none; }
.m-skyband.flip { transform: scaleY(-1); }
.m-skyband::before { content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(1.6px 1.6px at 6% 22%, currentColor, transparent),
    radial-gradient(1.1px 1.1px at 14% 52%, currentColor, transparent),
    radial-gradient(2px 2px at 23% 16%, currentColor, transparent),
    radial-gradient(1.2px 1.2px at 31% 40%, currentColor, transparent),
    radial-gradient(1.5px 1.5px at 39% 12%, currentColor, transparent),
    radial-gradient(1px 1px at 47% 34%, currentColor, transparent),
    radial-gradient(1.8px 1.8px at 55% 20%, currentColor, transparent),
    radial-gradient(1.1px 1.1px at 62% 48%, currentColor, transparent),
    radial-gradient(1.4px 1.4px at 70% 14%, currentColor, transparent),
    radial-gradient(1px 1px at 77% 38%, currentColor, transparent),
    radial-gradient(1.7px 1.7px at 85% 24%, currentColor, transparent),
    radial-gradient(1.2px 1.2px at 92% 46%, currentColor, transparent),
    radial-gradient(1.3px 1.3px at 97% 18%, currentColor, transparent);
  opacity: .5; animation: m-band-tw 7s ease-in-out infinite; }
@keyframes m-band-tw { 0%, 100% { opacity: .5; } 50% { opacity: .26; } }
.m-skyband-r { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.m-skyband .r1, .m-skyband .r2, .m-skyband .r3 { fill: currentColor; }
.m-skyband .r3 { opacity: .14; }
.m-skyband .r2 { opacity: .24; }
.m-skyband .r1 { opacity: .4; }
.m-skyband.t-light { color: var(--m-fg-d); }
.m-skyband.t-light::before { opacity: .3; }
.m-skyband.t-dark { color: #cfe0ff; }
.m-skyband.t-dark .r1 { opacity: .5; }
@media (prefers-reduced-motion: reduce) { .m-skyband::before { animation: none; } }

/* the footer wears one, so every page on the site ends at a horizon */
.m-foot { position: relative; }
.m-foot-sky { margin-bottom: -18px; }
.m-foot > .m-wrap { position: relative; z-index: 1; padding-top: 34px; }

/* things that share the orrery's sky — decoration, kept well clear of the
   planets and their labels so nothing competes with a click target */
.m-orr-deco { position: absolute; inset: 0; z-index: 1; pointer-events: none; color: #9fb4ee; }
.m-orr-deco .d { position: absolute; opacity: .5; }
.m-orr-deco .d-sat  { left: 6.5%;  top: 13%;  color: #8fd8ff; animation: m-orr-drift 17s ease-in-out infinite; }
.m-orr-deco .d-com  { right: 8%;   top: 11%;  animation: m-orr-drift 21s 1.5s ease-in-out infinite reverse; }
.m-orr-deco .d-con  { left: 4%;    bottom: 12%; opacity: .42; }
.m-orr-deco .d-roc  { right: 6%;   bottom: 14%; color: #c3bdff; animation: m-orr-lift 13s ease-in-out infinite; }
.m-orr-deco .d-moon { right: 26%;  top: 7%;   opacity: .62; color: #e8eeff; }
.m-orr-deco .d-tel  { left: 24%;   bottom: 6%; opacity: .34; }
@keyframes m-orr-drift { 0%, 100% { translate: 0 0; } 50% { translate: 14px 9px; } }
@keyframes m-orr-lift  { 0%, 100% { translate: 0 0; } 50% { translate: -6px -16px; } }
@media (max-width: 860px) { .m-orr-deco { display: none; } }
@media (prefers-reduced-motion: reduce) { .m-orr-deco .d { animation: none; } }

/* the closing band gets a night sky and a rocket, so the last thing on a page
   is the same idea as the first */
.m-close-sky { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; color: #cfe0ff; }
.m-close-sky::before { content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 24%, currentColor, transparent),
    radial-gradient(1.1px 1.1px at 17% 63%, currentColor, transparent),
    radial-gradient(1.9px 1.9px at 27% 18%, currentColor, transparent),
    radial-gradient(1.2px 1.2px at 36% 78%, currentColor, transparent),
    radial-gradient(1.4px 1.4px at 44% 31%, currentColor, transparent),
    radial-gradient(1px 1px at 58% 72%, currentColor, transparent),
    radial-gradient(1.7px 1.7px at 66% 22%, currentColor, transparent),
    radial-gradient(1.2px 1.2px at 74% 58%, currentColor, transparent),
    radial-gradient(1.5px 1.5px at 83% 30%, currentColor, transparent),
    radial-gradient(1.1px 1.1px at 91% 69%, currentColor, transparent);
  opacity: .42; animation: m-band-tw 8s ease-in-out infinite; }
.m-close-sky .m-mark { position: absolute; opacity: .42; }
.m-close-sky .c-roc { left: 7%;  top: 30%; color: #c3bdff; animation: m-orr-lift 14s ease-in-out infinite; }
.m-close-sky .c-sat { right: 8%; top: 26%; color: #8fd8ff; animation: m-orr-drift 19s ease-in-out infinite; }
.m-close-sky .c-con { right: 18%; bottom: 18%; opacity: .24; }
.m-close-sky .c-pla { left: 15%;  bottom: 16%; opacity: .22; }
.m-close-in { position: relative; z-index: 1; }
@media (max-width: 760px) { .m-close-sky .m-mark { display: none; } }
@media (prefers-reduced-motion: reduce) { .m-close-sky::before, .m-close-sky .m-mark { animation: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   THE EYEBROW STAR — every section label across the site gets the same mark.
   Drawn as a mask rather than an <img> so it inherits the eyebrow's colour,
   which differs by theme, by section and by product accent.
   ═══════════════════════════════════════════════════════════════════════════ */
.master {
  --m-star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5c.6 4.6 2.4 6.4 7 7-4.6.6-6.4 2.4-7 7-.6-4.6-2.4-6.4-7-7 4.6-.6 6.4-2.4 7-7Z'/%3E%3C/svg%3E");
}
.m-eyebrow::before, .master-dark .eyebrow::before {
  content: ''; display: inline-block; width: 11px; height: 11px;
  margin-right: 7px; vertical-align: -1px; background: currentColor;
  -webkit-mask: var(--m-star-mask) center / contain no-repeat;
          mask: var(--m-star-mask) center / contain no-repeat;
  opacity: .82;
}
/* an eyebrow that already carries its own mark doesn't need a second one */
.m-eyebrow:has(.m-mark)::before { content: none; }

/* a second heading inside a section, for a merged block */
.m-sub-head { margin-top: 56px; padding-top: 30px; border-top: 1px solid var(--m-line-d); }
.m-sub-head h3 { font: 700 clamp(19px, 2vw, 24px)/1.25 var(--m-display); color: var(--m-hi);
  letter-spacing: -.015em; margin: 0; }

/* every product hero gets a sky in that product's own accent */
.m-phero { position: relative; overflow: hidden; }
.m-phero-in { position: relative; z-index: 1; }
.m-phero-sky { position: absolute; inset: 0; pointer-events: none; z-index: 0; color: var(--ac, var(--m-brand)); }
.m-phero-sky::before { content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 26%, currentColor, transparent),
    radial-gradient(1.1px 1.1px at 26% 68%, currentColor, transparent),
    radial-gradient(1.8px 1.8px at 41% 18%, currentColor, transparent),
    radial-gradient(1.2px 1.2px at 57% 74%, currentColor, transparent),
    radial-gradient(1.5px 1.5px at 72% 30%, currentColor, transparent),
    radial-gradient(1.1px 1.1px at 86% 62%, currentColor, transparent),
    radial-gradient(1.6px 1.6px at 94% 22%, currentColor, transparent);
  opacity: .3; animation: m-band-tw 9s ease-in-out infinite; }
.m-phero-sky .m-mark { position: absolute; opacity: .16; }
.m-phero-sky .p-pla { right: 5%;  top: 16%;  animation: m-orr-drift 22s ease-in-out infinite; }
.m-phero-sky .p-sat { right: 22%; bottom: 20%; animation: m-orr-drift 17s 1s ease-in-out infinite reverse; }
.m-phero-sky .p-con { left: 4%;   bottom: 16%; opacity: .13; }
.m-phero-sky .p-orb { left: 14%;  top: 14%;  opacity: .12; }
@media (max-width: 900px) { .m-phero-sky .m-mark { display: none; } }

/* supporting pages get a quiet star field behind their first section */
.master-dark main > .sec:first-child { position: relative; }
.master-dark main > .sec:first-child::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  color: var(--m-brand-d);
  background-image:
    radial-gradient(1.5px 1.5px at 9% 22%, currentColor, transparent),
    radial-gradient(1.1px 1.1px at 22% 58%, currentColor, transparent),
    radial-gradient(1.7px 1.7px at 37% 15%, currentColor, transparent),
    radial-gradient(1.2px 1.2px at 63% 64%, currentColor, transparent),
    radial-gradient(1.5px 1.5px at 78% 26%, currentColor, transparent),
    radial-gradient(1.1px 1.1px at 91% 54%, currentColor, transparent);
  opacity: .26; animation: m-band-tw 10s ease-in-out infinite; }
.master-dark main > .sec:first-child > * { position: relative; z-index: 1; }

/* 404 — a satellite that has drifted off course */
.m-lost { display: grid; place-items: center; color: var(--m-brand-d); opacity: .42; margin-bottom: 6px;
  animation: m-orr-drift 12s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .m-phero-sky::before, .m-phero-sky .m-mark, .m-lost,
  .master-dark main > .sec:first-child::before { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BRIDGE FIX — buttons keep their own label colour
   `.master-dark a` (specificity 0-1-1) outranks the button variants
   `.m-btn-p` and `.m-btn-ac` (0-1-0), so it repainted every primary CTA's
   label in brand blue on top of a brand-blue gradient. The nav's "Get Started"
   button was an invisible label on all 28 Base-layout pages.
   ═══════════════════════════════════════════════════════════════════════════ */
.master-dark a.m-btn-p,
.master-dark a.m-btn-ac { color: #fff; }
.master-dark a.m-btn-g  { color: var(--m-fg); }

/* A heading that names a section for assistive tech where the design carries
   the meaning visually. Used so a page's outline has no h1 -> h3 jumps. */
.m-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Nothing on the site had a scroll offset, so any in-page jump landed under the
   sticky bar. The bar is 72px tall and sits 8px down.

   Deliberately NO `html { scroll-behavior: smooth }`. Smoothness is applied per
   interaction in JS instead, with a fallback that jumps if the animation never
   starts, so an in-page jump can never silently do nothing. */
.master { --nav-h: 80px; }
[id] { scroll-margin-top: calc(var(--nav-h) + 18px); }

/* ═══════════════════════════════════════════════════════════════════════════
   HOVER DROPDOWNS — the travel path from a trigger down into its panel
   A 35px button (15px/1 + 10px padding) centred in the 72px bar ends at
   y=53.5; .m-drop starts at top:72px. That is a real 18.5px strip of bare bar
   between them, and on the product bar (27.2px button in a 48px bar, panel at
   top:48px) it is 10.4px. An open trigger grows an invisible bridge across it
   so travelling straight down never leaves a hover target. The bridge CANNOT
   live on .m-drop: that has overflow-y:auto, so a negative-offset pseudo
   element on it would be clipped away.
   Gated on hover capability — on a touch screen :hover latches on tap and
   would leave a full-width panel hanging.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) {
  .m-navlinks [data-menu][data-open='true']::after {
    content: ''; position: absolute; top: 100%; left: 0; right: 0;
    height: var(--m-bridge, 19px);
  }
}
.m-in-product .m-nav { --m-bridge: 11px; }
/* `visibility` is transitioned, so a closed panel stays hit-testable for the
   whole .22s fade — long enough to swallow a click, and to answer a pointerover
   that must not count as "inside the menu". */
.m-drop { pointer-events: none; }
.m-drop[data-open='true'] { pointer-events: auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   PLANET PREVIEW — the card that opens when you hover a product
   Placement is decided at BUILD time, not measured at runtime: the stage clips
   with overflow:hidden, so each card opens towards the middle of the sky. A
   planet in the top half drops its card, one in the bottom half raises it, and
   the side classes keep the two outermost planets' cards inside the frame.
   Measured at a 933x473 stage the tightest cases are books (19px of headroom)
   and chat (50px below it); this rule sends both the other way, leaving every
   card at least 60px of clearance.
   ═══════════════════════════════════════════════════════════════════════════ */
.m-orr-pops { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.m-orr-pop {
  position: absolute; width: 250px; pointer-events: auto;
  background: #fff; border: 1px solid #e7e4f4; border-radius: 16px;
  padding: 14px 15px 13px; text-align: left;
  box-shadow: 0 2px 4px rgba(6,10,26,.3), 0 26px 50px -22px rgba(6,10,26,.85);
  opacity: 0; visibility: hidden; translate: 0 5px;
  transition: opacity .18s var(--m-ease), translate .18s var(--m-ease), visibility .18s;
}
.m-orr-pop[data-on='true'] { opacity: 1; visibility: visible; translate: 0 0; }

/* 58px clears the planet (48px half-button) plus a 10px gap */
.m-orr-pop.s-c.p-below { transform: translate(-50%, 58px); }
.m-orr-pop.s-l.p-below { transform: translate(-30px, 58px); }
.m-orr-pop.s-r.p-below { transform: translate(calc(-100% + 30px), 58px); }
.m-orr-pop.s-c.p-above { transform: translate(-50%, calc(-100% - 58px)); }
.m-orr-pop.s-l.p-above { transform: translate(-30px, calc(-100% - 58px)); }
.m-orr-pop.s-r.p-above { transform: translate(calc(-100% + 30px), calc(-100% - 58px)); }

.m-orr-pop-top { display: flex; align-items: center; gap: 10px; }
.m-orr-pop-ico { width: 32px; height: 32px; border-radius: 10px; flex: none; display: grid; place-items: center;
  color: #fff; background: linear-gradient(145deg, var(--ac), var(--ac-d)); }
.m-orr-pop-ico svg { width: 17px; height: 17px; }
.m-orr-pop-top > span:nth-child(2) { display: grid; gap: 1px; min-width: 0; flex: 1; }
.m-orr-pop-top b { font: 700 13.5px/1.2 var(--m-display); color: #14123a; letter-spacing: -.01em; }
.m-orr-pop-top i { font: 500 10px/1 var(--m-body); font-style: normal; color: #66627f; letter-spacing: .03em; }
.m-orr-pop-st { flex: none; font: 700 8.5px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .09em;
  text-transform: uppercase; padding: 4px 6px; border-radius: 99px; color: #66627f; background: #f1effa; }
.m-orr-pop-st.live { color: #047857; background: #d1fae5; }
.m-orr-pop-tag { margin: 10px 0 0; font: 400 12.3px/1.5 var(--m-body); color: #55527a; }
.m-orr-pop-price { margin: 7px 0 0; font: 600 11.5px/1.45 var(--m-body); color: #14123a; }
.m-orr-more { margin-top: 11px; width: 100%; border: 0; cursor: pointer;
  font: 700 12px/1 var(--m-display); color: #fff; padding: 9px 12px; border-radius: 10px;
  background: linear-gradient(180deg, var(--ac), var(--ac-d));
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.m-orr-more:hover { filter: brightness(1.08); }
.m-orr-more .ar { transition: transform .22s var(--m-ease); }
.m-orr-more:hover .ar { transform: translateX(3px); }

/* No hover on touch, and below 860px the sky is a grid with no room for a
   floating card — the panel is directly underneath instead. */
@media (max-width: 860px) { .m-orr-pops { display: none; } }
@media (hover: none), (pointer: coarse) { .m-orr-pops { display: none; } }
@media (prefers-reduced-motion: reduce) { .m-orr-pop { transition: opacity .01s, visibility .01s; } }

/* The kicker and lane paint from --m-fg-2, a token the sky block does not
   override (it sets --m-fg-d2), so over a sky they kept the light theme's
   muted ink on their own dark chip and measured 2.06:1. */
[data-hero="dawn"] .m-hero .m-kicker, [data-hero="night"] .m-hero .m-kicker,
[data-hero="summit"] .m-hero .m-kicker, [data-hero="aurora"] .m-hero .m-kicker,
[data-hero="orbit"] .m-hero .m-kicker, [data-hero="bloom"] .m-hero .m-kicker,
[data-hero="terrain"] .m-hero .m-kicker, [data-hero="wave"] .m-hero .m-kicker {
  color: rgba(255,255,255,.92);
}
[data-hero="dawn"] .m-hero .m-lane .m-mono, [data-hero="night"] .m-hero .m-lane .m-mono,
[data-hero="summit"] .m-hero .m-lane .m-mono, [data-hero="aurora"] .m-hero .m-lane .m-mono,
[data-hero="orbit"] .m-hero .m-lane .m-mono, [data-hero="bloom"] .m-hero .m-lane .m-mono {
  color: rgba(255,255,255,.86);
}

/* Hero fine print is painted at 62% white, which over the bright band just
   above the horizon composites to 3.06:1. Alpha is part of the colour, so it
   has to be counted; raise it over a sky. */
[data-hero="dawn"] .m-hero-fine, [data-hero="night"] .m-hero-fine,
[data-hero="summit"] .m-hero-fine, [data-hero="aurora"] .m-hero-fine,
[data-hero="orbit"] .m-hero-fine, [data-hero="bloom"] .m-hero-fine,
[data-hero="terrain"] .m-hero-fine, [data-hero="wave"] .m-hero-fine {
  color: rgba(255,255,255,.88);
}

/* The logo strip sits BELOW the horizon, on the terrain itself, so lightening
   the ranges cost it the most. "Runs with what you already use" fell to
   2.92:1 and the chips to 4.74:1. Both paint from --m-fg-d3 at 62% white,
   and the chips dim themselves a further 10%. */
[data-hero="dawn"] .m-hero .m-strip-lede, [data-hero="night"] .m-hero .m-strip-lede,
[data-hero="summit"] .m-hero .m-strip-lede, [data-hero="aurora"] .m-hero .m-strip-lede,
[data-hero="orbit"] .m-hero .m-strip-lede, [data-hero="bloom"] .m-hero .m-strip-lede,
[data-hero="terrain"] .m-hero .m-strip-lede {
  color: rgba(255,255,255,.9);
}
[data-hero="dawn"] .m-hero .m-logo-chip, [data-hero="night"] .m-hero .m-logo-chip,
[data-hero="summit"] .m-hero .m-logo-chip, [data-hero="aurora"] .m-hero .m-logo-chip,
[data-hero="bloom"] .m-hero .m-logo-chip, [data-hero="terrain"] .m-hero .m-logo-chip {
  color: rgba(255,255,255,.94); opacity: 1;
}

/* The orrery's core carries the actual wordmark rather than a copy of it, so
   the logo only has to be defined once. The disc is dark, so it takes the
   inverted cut. */
.m-orr-core-in .m-logo-type { font-size: 23px; letter-spacing: -.045em; color: #fff; }
.m-orr-core-in .m-logo-sky { color: inherit; }
.m-orr-core-in .m-logo-dot { color: #7cc0ff; opacity: 1; }
.m-orr-core-in .m-logo-ai { color: #a8dcff; }
@media (max-width: 1100px) { .m-orr-core-in .m-logo-type { font-size: 20px; } }

/* The mark, beside the wordmark. Sized off the wordmark it stands next to:
   22px in the suite bar, 15px on a product bar, so it reads as one lockup. */
.m-logo { display: inline-flex; align-items: center; gap: 9px; }
.m-mark-sun { display: block; flex: none; }
.m-in-product .m-logo { gap: 7px; }

/* The orrery's core is the sun sweep itself now, so the disc that used to hold
   the wordmark gets out of its way: no fill, no border, just the caption. */
.m-orr-core-in { width: auto; height: auto; background: none; border: 0; box-shadow: none; gap: 7px; }
.m-orr-core-in .m-mono { font-size: 9px; color: #93a3d8; letter-spacing: .14em; }

/* One soft halo behind the mark, instead of the stacked corona and flare that
   used to draw the sun themselves. */
.m-orr-halo { position: absolute; width: 190px; height: 190px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(143,216,255,.30) 0%, rgba(99,102,241,.14) 42%, transparent 68%);
  animation: m-orr-breathe 7s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .m-orr-halo { animation: none; } }
/* The product bar sets a 17px wordmark, so the 26px mark overpowers it there. */
.m-in-product .m-nav .m-mark-sun { width: 20px; height: 20px; }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE OVERFLOW FIXES
   The bar needs 1064px for the logo, five menus, two reach buttons and two
   CTAs, but it only collapsed to the burger at 760px. Every width between
   those two scrolled sideways — measured 179px of overflow at 900px. The
   burger now takes over at 1080px, and the reach buttons drop out earlier
   since they are duplicated in the sheet.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
  .m-navlinks, .m-navcta .m-btn-g { display: none; }
  .m-burger { display: inline-flex; }
}
@media (max-width: 1180px) { .m-navcta .m-reach { display: none; } }

/* The comparison tables already sit in a div with overflow-x:auto, so they
   were never the problem. A flex or grid child defaults to min-width:auto and
   refuses to shrink below its content, so the scroll box grew to fit the table
   and pushed the page sideways instead of scrolling. Let it shrink.
   Do NOT set display:block on the table itself: that turns the thead into an
   anonymous block and it escapes the scroll box entirely. */
[style*="overflow-x:auto"], [style*="overflow-x: auto"] { min-width: 0; max-width: 100%; }
.m-sec, .m-wrap, .m-x-panel, .m-x-body { min-width: 0; }
@media (max-width: 720px) {
  .m-vs th, .m-vs td { padding: 12px 14px; font-size: 13.4px; white-space: nowrap; }
}

/* Grids pinned to a fixed column count by an INLINE style cannot collapse,
   and a 1fr track will not shrink below its content's min-content width, so
   they burst their container on a phone. Measured: a repeat(3,1fr) grid of
   nine tiles computing 132+144+134 inside a 335px box.
   Only an !important rule can beat an inline style. */
@media (max-width: 1000px) {
  [style*="repeat(4,1fr)"], [style*="repeat(4, 1fr)"],
  [style*="repeat(5,1fr)"], [style*="repeat(5, 1fr)"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 760px) {
  [style*="repeat(2,1fr)"], [style*="repeat(2, 1fr)"],
  [style*="repeat(3,1fr)"], [style*="repeat(3, 1fr)"],
  [style*="repeat(4,1fr)"], [style*="repeat(4, 1fr)"],
  [style*="repeat(5,1fr)"], [style*="repeat(5, 1fr)"] { grid-template-columns: minmax(0, 1fr) !important; }
  .m-sec .m-tiles[style] { grid-template-columns: minmax(0, 1fr) !important; }
}

/* The product sub-bar carries a brand, up to seven section links and two CTAs.
   Below roughly 1000px that does not fit and it took the page sideways with
   it — 139px of overflow at 860px. The section links scroll on their own
   instead, which is the normal behaviour for a row of tabs, and the secondary
   CTA drops out before the primary one does. */
.m-pnav-in { min-width: 0; }
.m-pnav-links { min-width: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.m-pnav-links::-webkit-scrollbar { display: none; }
.m-pnav-links a { white-space: nowrap; }
@media (max-width: 1000px) {
  .m-pnav-in { gap: 16px; }
  .m-pnav-cta .m-btn-d, .m-pnav-in .m-btn-d { display: none; }
}
@media (max-width: 620px) { .m-pnav-brand b { display: none; } }

/* At phone widths the top bar still had the wordmark, the primary CTA and the
   burger competing for 375px. Tighten the rhythm rather than drop the CTA. */
@media (max-width: 460px) {
  .m-nav-in { gap: 12px; padding: 0 16px; }
  .m-navcta { gap: 8px; }
  .m-logo { gap: 7px; }
  .m-nav .m-mark-sun { width: 22px; height: 22px; }
  .m-logo-type { font-size: 19px; }
  .m-navcta .m-btn-p { height: 40px; padding: 0 15px; font-size: 13.5px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   UX PASS — focus, touch targets, and the marquee's chopped words
   ═══════════════════════════════════════════════════════════════════════════ */

/* Focus fell back to the browser's own 1px ring on plain links, which is thin
   and whose colour we do not control. One visible ring for everything. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--m-brand);
  outline-offset: 2px;
  border-radius: 4px;
}
.m-hero :focus-visible, .m-orr-stage :focus-visible, .m-close :focus-visible {
  outline-color: #fff;
}

/* 42 controls fell under the 44px touch minimum on a phone, the worst at 17px:
   the hero's sign-in row and the footer's product links. Grow the hit area
   without moving anything, so the layout is unchanged. */
@media (max-width: 760px) {
  .m-lane a, .m-foot a, .m-foot-bot a, .m-strip-lede a {
    position: relative;
    display: inline-block;
    padding-block: 12px;
  }
  .m-foot ul { gap: 2px; }
  .m-lane { gap: 6px 14px; flex-wrap: wrap; }
}

/* The logo marquee ran to a hard edge, so words were sliced mid-letter and read
   as broken rather than moving. Fade both ends instead. */
.m-strip-wrap, .m-logos-row-wrap, .m-logos-mask {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}

/* The orrery's caption sat at 9px in a dim blue and was effectively decoration. */
.m-orr-core-in .m-mono { font-size: 10.5px; color: #c3d4ff; letter-spacing: .12em; }

/* The hero was 1065px on a 812px phone, so nothing but the headline was ever
   on screen. Tighten the stack rather than cut anything from it. */
@media (max-width: 760px) {
  .m-hero { padding-block: 54px 44px; }
  .m-hero .m-h1 { font-size: clamp(34px, 10.5vw, 46px); }
  .m-hero .m-lede { font-size: 15.5px; margin-top: 16px; }
  .m-hero-cta { margin-top: 22px; }
  .m-hero-fine { margin-top: 14px; font-size: 12px; }
  .m-lane { margin-top: 16px; }
}

/* The two links added under the hero fine print. */
.m-hero-links { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }
.m-hero-links a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.m-hero-links a:hover { text-decoration-thickness: 2px; }

/* The two hero links were added as plain inline text and came out 15px tall,
   making them the smallest tap targets on the page — worse than what they
   replaced. Give them a real hit area and put them on one line. */
.m-hero-links a { display: inline-block; padding-block: 11px; }
@media (max-width: 760px) {
  .m-hero-links { gap: 4px 12px; font-size: 12px; }
  .m-hero-links a { padding-block: 13px; }
  /* Reclaim the height those links cost: the marquee sat 44px clear of the
     lane, and the lede ran loose at 1.62. */
  .m-hero .m-strip-wrap { margin-top: 20px; }
  .m-hero .m-lede { line-height: 1.52; }
  .m-hero-fine { line-height: 1.5; }
}

/* The last few controls sat at 41-42px, three pixels under the touch minimum. */
@media (max-width: 760px) {
  .m-btn, .m-btn-sm, .m-reach, .m-lane a, .m-orr-more { min-height: 44px; }
  .m-lane a { display: inline-flex; align-items: center; }
  .m-logo { padding-block: 9px; }
}
@media (max-width: 760px) { .m-foot a, .m-foot-bot a { min-height: 44px; display: inline-flex; align-items: center; } }

/* ═══════════════════════════════════════════════════════════════════════════
   THE ROTATING HERO LINE + THE CUSTOMER WALL
   One short line that cycles, and real customer names on the first screen —
   both in place of a six-line paragraph and a scrolling compatibility strip.
   ═══════════════════════════════════════════════════════════════════════════ */
.m-rot { position: relative; margin: 20px auto 0; min-height: 2.9em; display: grid; place-items: center; }
.m-rot-l { grid-area: 1 / 1; font: 400 clamp(17px, 1.5vw, 21px)/1.55 var(--m-body);
  color: var(--m-fg-d2); max-width: 30em; text-wrap: balance; }
.m-rot-l.in { animation: m-rot-in .55s var(--m-ease) both; }
@keyframes m-rot-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .m-rot-l.in { animation: none; } }

/* The compatibility strip now sits in the ecosystem section, on a light ground. */
.m-orr-sec .m-strip-wrap { margin-top: 46px; }

/* On a phone the customer wall fell 172px below the fold, which defeats the
   point of it. Reclaim that: the sign-in row is already in the burger sheet,
   and two full-width buttons stacked cost more than they earn. */
@media (max-width: 760px) {
  .m-hero .m-lane { display: none; }
  .m-hero-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .m-hero-cta .m-btn { width: 100%; justify-content: center; padding-inline: 12px; font-size: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE CUSTOMER BAND — real marks, on a light strip under the hero
   They are colour logos on white, so they get a light ground; on the dark hero
   each one rendered as a white rectangle. multiply drops the white box without
   needing a cut-out PNG for every brand.
   ═══════════════════════════════════════════════════════════════════════════ */
.m-cband { background: var(--m-paper-2); border-bottom: 1px solid var(--m-line); padding: 22px 0 24px; }
/* --m-fg-3 measured 3.82:1 at this size on the band's ground, under the 4.5
   minimum for body text. One step darker clears it. */
.m-cband-lede { margin: 0 0 14px; text-align: center;
  font: 500 12.5px/1.5 var(--m-body); letter-spacing: .02em; color: var(--m-fg-2); }
.m-cband-lede strong { color: var(--m-fg-2); font-weight: 700; }
.m-cband-track { overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.m-cband-row { list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 46px; width: max-content;
  animation: m-cband-slide 46s linear infinite; }
@keyframes m-cband-slide { to { transform: translateX(-50%); } }
.m-cband-track:hover .m-cband-row { animation-play-state: paused; }
.m-cband-row li { flex: none; }
.m-cband-row img {
  display: block; height: 38px; width: auto; max-width: 118px; object-fit: contain;
  mix-blend-mode: multiply;          /* kills the white JPEG box on a light ground */
  filter: grayscale(1); opacity: .74;
  transition: filter .25s var(--m-ease), opacity .25s var(--m-ease);
}
.m-cband-row li:hover img, .m-cband-row img:focus-visible { filter: grayscale(0); opacity: 1; }
@media (max-width: 980px) { .m-cband-row { gap: 36px; } .m-cband-row img { height: 32px; } }
@media (max-width: 760px) {
  .m-cband { padding: 16px 0 18px; }
  .m-cband-lede { font-size: 11.5px; margin-bottom: 10px; }
  .m-cband-row img { height: 26px; max-width: 86px; }
  .m-cband-row { gap: 30px; animation-duration: 34s; }
}
@media (prefers-reduced-motion: reduce) { .m-cband-row img { transition: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   THE HERO SHARES THE FIRST SCREEN WITH THE CUSTOMER BAND
   84px/64px of fixed padding put the band 168px below the fold on a 700px
   laptop viewport. The hero now sizes itself against the viewport instead, so
   the band always peeks whatever the window height — that is the whole point
   of putting real customers up there.
   svh, not vh, so a phone's collapsing address bar does not change the sum.
   ═══════════════════════════════════════════════════════════════════════════ */
.m-hero {
  padding: clamp(28px, 4.2vh, 70px) 0 clamp(24px, 3.4vh, 54px);
  min-height: 0;
  display: grid;
  align-content: center;
  box-sizing: border-box;
}
/* The sky takes every pixel the window has left once the bar and the customer
   band are accounted for. That is the biggest background that still keeps the
   logos on the first screen, at any window height.
   svh, not vh, so a phone's collapsing address bar does not change the sum. */
.master { --cband-h: 94px; }
@media (max-width: 980px) { .master { --cband-h: 86px; } }
@media (max-width: 760px) { .master { --cband-h: 106px; } }
@supports (height: 100svh) {
  .m-hero { min-height: calc(100svh - var(--nav-h) - var(--cband-h)); }
}
.m-hero .m-h1 { font-size: clamp(38px, 5.4vw, 74px); }
.m-hero .m-hero-cta { margin-top: clamp(18px, 2.6vh, 32px); }
.m-hero .m-hero-fine { margin-top: clamp(10px, 1.8vh, 20px); }
.m-hero .m-rot { margin-top: clamp(12px, 2vh, 22px); }
/* one line, wrapping only when it must */
.m-hero-links { display: flex; flex-wrap: wrap; gap: 4px 9px; align-items: center; justify-content: center; }
@media (max-width: 760px) { .m-hero-links { gap: 2px 8px; } }

/* The band has to be short enough to actually share the screen. */
.m-cband { padding: 15px 0 16px; }
.m-cband-lede { margin-bottom: 10px; font-size: 12px; }
.m-cband-row img { height: 32px; }


@media (prefers-reduced-motion: reduce) {
  /* Standing still, the rail must not leave half the marks off-screen. */
  .m-cband-row { animation: none; flex-wrap: wrap; width: auto; justify-content: center; gap: 8px 26px; }
  .m-cband-row li[aria-hidden="true"] { display: none; }
}

/* ── the review-build marker (dev.comsky.ai only) ────────── */
.m-review { background: #14123a; color: #fff; font-size: 13px; }
.m-review-in { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  max-width: var(--m-max); margin: 0 auto; padding: 9px 30px; }
.m-review-in b { font: 700 11px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .14em; text-transform: uppercase; color: #fbbf24; }
.m-review-in span { color: rgba(255,255,255,.72); }
.m-review-in a { margin-left: auto; color: #fff; font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.4); }
.m-review-in a:hover { border-bottom-color: #fbbf24; }
@media (max-width: 760px) { .m-review-in { padding: 9px 20px; } .m-review-in a { margin-left: 0; } }