/* ==========================================================================
   Nuitée — design system
   Brand: Nuitée (colors, type, imagery). Structure: enterprise SaaS patterns
   (framed heroes, numbered tab rails, tinted product panels, hairline grids).
   ========================================================================== */

@font-face {
  font-family: "StackSans Text";
  src: url("../../fonts/StackSansText.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Fragment Mono";
  src: url("../../fonts/FragmentMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* Geist, self-hosted from Google Fonts (same files and unicode ranges), so first paint skips two extra origins */
@font-face {
  font-family: "Geist";
  src: url("../../fonts/geist-latin-ext.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist";
  src: url("../../fonts/geist-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Base */
  --bg: #f7f6f5;
  --surface: #ffffff;
  --panel: #efedea;
  --panel-2: #e7e4e0;
  --ink: #231f23;
  --ink-2: #48434a;
  --muted: #67616a;
  --faint: #7f7982;
  --line: rgba(35, 31, 35, 0.09);
  --line-2: rgba(35, 31, 35, 0.16);
  --dark: #231f23;
  --dark-2: #1a171a;
  --dark-lift: #322d32;

  /* Brand */
  --navy: #130740;
  --connect: #4d42c0;
  --connect-2: #8e69bf;
  --connect-pale: #b5a5ff;
  --connect-tint: #ddd6fd;
  --connect-wash: #f1eefe;
  --cloud: #25747c;
  --cloud-2: #3f8f95;
  --cloud-pale: #6da6a6;
  --cloud-tint: #bbd8d8;
  --cloud-wash: #e8f2f1;

  /* Accents */
  --orchid: #cebffa;
  --mint: #ccfdcf;
  --sky: #d7e9ff;
  --sand: #f4e7c7;
  --coral: #ed7472;
  --success: #3fae4a;
  --success-bg: #e3f7e4;
  --warning: #b8902d;
  --warning-bg: #fbf1d9;
  --danger: #d65553;
  --danger-text: #b63e3c; /* 5.5:1 on white — error copy; --danger stays for borders/icons */
  --danger-bg: #fde9e8;

  /* Type */
  --f-display: "Geist", "StackSans Text", ui-sans-serif, system-ui, sans-serif;
  --f-body: "StackSans Text", "Geist", ui-sans-serif, system-ui, sans-serif;
  --f-mono: "Fragment Mono", "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layout */
  --container: 1240px;
  --gutter: clamp(16px, 4vw, 32px);
  --header-h: 64px;
  --radius-s: 8px;
  --radius: 14px;
  --radius-l: 22px;
  --radius-xl: 28px;

  --shadow-s: 0 1px 2px rgba(35, 31, 35, 0.06), 0 1px 1px rgba(35, 31, 35, 0.04);
  --shadow: 0 1px 2px rgba(35, 31, 35, 0.05), 0 8px 24px -8px rgba(35, 31, 35, 0.12);
  --shadow-l: 0 2px 4px rgba(35, 31, 35, 0.04), 0 24px 60px -20px rgba(35, 31, 35, 0.22);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Fixed (theme-independent) — same value in light and dark. Use for surfaces that never flip:
     dark brand panels, code blocks, text/lines on those panels. */
  --white: #ffffff;
  --cloud-on-dark: #bbd8d8;   /* cloud labels on panels that stay dark in both themes */
  --cloud-fixed: #25747c;     /* cloud fill under white text, in both themes */
  --connect-on-wash: #4d42c0; --warn-text: #8a6a17;   /* text on pale fills: flip in dark mode */
  --ink-fixed: #231f23;      /* dark panels that stay dark in both themes */
  --ink-fixed-2: #1a171a;    /* code blocks, night media */
  --success-text: #237a2c;   /* positive values and "included" ticks on light surfaces */
  --violet-50: #f1eefe; --violet-800: #4a3478; --violet-950: #1f1a36;   /* Connect gradient stops */
  --code-ink: #e9e5ee; --code-key: #b5a5ff; --code-green: #9be7a2; --code-num: #f4c784;   /* code syntax + positive on dark */
  /* white on dark surfaces (text tiers, fills, hairlines) */
  --on-dark-06: rgba(255,255,255,.06); --on-dark-07: rgba(255,255,255,.07); --on-dark-08: rgba(255,255,255,.08);
  --on-dark-10: rgba(255,255,255,.1); --on-dark-12: rgba(255,255,255,.12); --on-dark-50: rgba(255,255,255,.5);
  --on-dark-55: rgba(255,255,255,.55); --on-dark-60: rgba(255,255,255,.6); --on-dark-70: rgba(255,255,255,.7);
  --on-dark-72: rgba(255,255,255,.72); --on-dark-75: rgba(255,255,255,.75); --on-dark-82: rgba(255,255,255,.82); --on-dark-85: rgba(255,255,255,.85);
  /* ink / navy transparencies (shadows, scrims) */
  --ink-a05: rgba(35,31,35,.05); --ink-a28: rgba(35,31,35,.28); --ink-a35: rgba(35,31,35,.35); --navy-a45: rgba(19,7,64,.45);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 380;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, h5, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--connect); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--connect-tint); color: var(--navy); }
[data-theme="dark"] ::selection { color: var(--ink); }
input, textarea { caret-color: var(--connect); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 200; background: var(--ink); color: var(--on-ink); padding: 10px 14px; border-radius: 8px; font-size: 14px; }
.skip-link:focus { top: 12px; }

/* ---------- Typography ---------- */
.h-display, .h1, .h2, .h3, .h4 { font-family: var(--f-display); color: var(--ink); font-weight: 500; text-wrap: balance; }
.h-display { font-size: clamp(2.6rem, 6vw, 4.75rem); line-height: 1.02; letter-spacing: -0.045em; }
.h1 { font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.04; letter-spacing: -0.04em; }
.h2 { font-size: clamp(1.9rem, 3.4vw, 2.85rem); line-height: 1.08; letter-spacing: -0.035em; }
.h3 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); line-height: 1.15; letter-spacing: -0.025em; }
.h4 { font-size: 1.15rem; line-height: 1.3; letter-spacing: -0.015em; }
.tone { color: var(--muted); }
.tone-connect { color: var(--connect); }
.tone-cloud { color: var(--cloud); }
.lead { font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.6; color: var(--ink-2); max-width: 46rem; text-wrap: pretty; }
.body { color: var(--ink-2); text-wrap: pretty; }
.small { font-size: 0.875rem; line-height: 1.55; }
.muted { color: var(--muted); }
.mono { font-family: var(--f-mono); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 12px; line-height: 1; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: currentColor; opacity: .55; }
.eyebrow.connect { color: var(--connect); }
.eyebrow.cloud { color: var(--cloud); }
.eyebrow.plain::before { display: none; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.container.narrow { max-width: calc(880px + var(--gutter) * 2); }
.section { position: relative; padding: clamp(72px, 10vw, 128px) 0; }
.section.tight { padding: clamp(56px, 7vw, 88px) 0; }
.section.flush-top { padding-top: 0; }
.section.surface { background: var(--surface); }
.section.panel { background: var(--panel); }
.section-head { display: grid; gap: 18px; margin-bottom: clamp(40px, 5vw, 64px); max-width: 52rem; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; justify-items: center; }
.section-head.split { max-width: none; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: end; gap: 32px 64px; }
.section-head.split .lead { justify-self: end; }
.stack { display: grid; gap: 16px; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.grid { display: grid; gap: 16px; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }

/* Blueprint frame: hairline rails with corner ticks */
.frame { position: relative; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.frame-rule { position: relative; height: 1px; background: var(--line); }
.frame-rule::before, .frame-rule::after {
  content: ""; position: absolute; top: -3px; width: 7px; height: 7px;
  background: var(--bg); border: 1px solid var(--line-2);
}
.frame-rule::before { left: calc(-3.5px); }
.frame-rule::after { right: calc(-3.5px); }
.rails { position: relative; }
.rails::before, .rails::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); pointer-events: none; }
.rails::before { left: max(var(--gutter), calc((100% - var(--container)) / 2)); }
.rails::after { right: max(var(--gutter), calc((100% - var(--container)) / 2)); }
.hr { position: relative; height: 1px; background: var(--line); }
.hr .tick { position: absolute; top: -3.5px; width: 7px; height: 7px; background: var(--bg); border: 1px solid var(--line-2); }
.hr .tick.l { left: calc(max(var(--gutter), calc((100% - var(--container)) / 2)) - 3.5px); }
.hr .tick.r { right: calc(max(var(--gutter), calc((100% - var(--container)) / 2)) - 3.5px); }

/* ---------- Buttons ---------- */
.btn {
  --b-bg: var(--ink); --b-fg: var(--white); --b-bd: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: 999px;
  background: var(--b-bg); color: var(--b-fg); border: 1px solid var(--b-bd);
  font-family: var(--f-body); font-size: 15px; font-weight: 450; line-height: 1; white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover { --b-bg: var(--dark-lift); transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(35,31,35,.5); }
.btn:active { transform: translateY(0); }
.btn.secondary { --b-bg: transparent; --b-fg: var(--ink); --b-bd: var(--line-2); }
.btn.secondary:hover { --b-bg: var(--surface); --b-bd: var(--ink); box-shadow: none; }
.btn.light { --b-bg: var(--white); --b-fg: var(--ink); --b-bd: var(--white); }
.btn.light:hover { --b-bg: var(--bg); }
.btn.ghost-light { --b-bg: transparent; --b-fg: var(--white); --b-bd: rgba(255,255,255,.28); }
.btn.ghost-light:hover { --b-bg: var(--on-dark-08); --b-bd: var(--white); box-shadow: none; }
.btn.connect { --b-bg: var(--connect); --b-bd: var(--connect); }
.btn.connect:hover { --b-bg: #3f35a8; }
.btn.cloud { --b-bg: var(--cloud); --b-bd: var(--cloud); }
.btn.cloud:hover { --b-bg: #1d5f66; }
.btn.sm { height: 36px; padding: 0 14px; font-size: 14px; }
.btn.lg { height: 52px; padding: 0 26px; font-size: 16px; }
.btn.block { width: 100%; }
.btn .arr { transition: transform .25s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
.link {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 450; color: var(--ink);
  border-bottom: 1px solid transparent; transition: border-color .2s, gap .25s var(--ease);
}
.link:hover { gap: 10px; border-color: currentColor; }
.link.connect { color: var(--connect); }
.link.cloud { color: var(--cloud); }
.link { width: fit-content; }
.icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); transition: background .2s, border-color .2s, transform .2s var(--ease); }
.icon-btn:hover { border-color: var(--ink); transform: translateY(-1px); }

/* ---------- Chips / badges ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px;
  border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface);
  font-size: 13px; line-height: 1; color: var(--ink-2); white-space: nowrap;
}
.chip img { width: 16px; height: 16px; border-radius: 4px; }
.chip.dark { background: var(--dark-lift); border-color: var(--on-dark-10); color: var(--on-dark-85); }
.chip.connect { background: var(--connect-wash); border-color: var(--connect-tint); color: var(--connect-on-wash); }
.chip.cloud { background: var(--cloud-wash); border-color: var(--cloud-tint); color: var(--cloud); }
.tag {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px;
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--panel); color: var(--ink-2); white-space: nowrap;
}
.tag.ok { background: var(--success-bg); color: var(--success-text); }
.tag.warn { background: var(--warning-bg); color: var(--warn-text); }
.tag.bad { background: var(--danger-bg); color: #b53e3c; }
.tag.connect { background: var(--connect-wash); color: var(--connect-on-wash); }
.tag.cloud { background: var(--cloud-wash); color: var(--cloud); }
.tag.new { background: var(--mint); color: var(--success-text); }
.product-mark { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-display); font-weight: 500; font-size: 22px; letter-spacing: -0.02em; color: var(--ink); }
.product-mark img { width: auto; height: 38px; }
.product-mark.sm { font-size: 17px; gap: 8px; }
.product-mark.sm img { width: auto; height: 28px; }
.product-mark .pm-n { color: var(--muted); font-weight: 450; }
.product-mark .pm-ico { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.product-mark .pm-ico .ico { width: 20px; height: 20px; }

/* ---------- Announcement ---------- */
.announce { background: var(--dark); color: rgba(255,255,255,.86); font-size: 13.5px; }
.announce .container { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 42px; position: relative; padding-right: 52px; }
.announce .a-badge { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border-radius: 6px; background: #1a1a1a; color: #f6f261; }
.announce .a-text { text-align: center; }
.announce .a-link { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; color: var(--white); transition: background .2s, border-color .2s; white-space: nowrap; }
.announce .a-link .ico { flex-shrink: 0; } /* on narrow bars flex squeezed the arrow to 0px, leaving its gap and pushing the label off-centre */
.announce .a-link:hover { background: var(--on-dark-10); border-color: var(--white); }
.announce .a-close { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: grid; place-items: center; border-radius: 999px; color: var(--on-dark-60); }
.announce .a-close::before { content: ""; position: absolute; inset: -6px; } /* 40px hit area around the 28px glyph */
.announce .a-close:hover { color: var(--white); background: var(--on-dark-08); }
.announce[hidden] { display: none; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(247, 246, 245, 0.86); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid var(--line); }
.site-header .bar { display: flex; align-items: center; height: var(--header-h); gap: 24px; }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand img { height: 22px; width: auto; }
.nav { display: flex; align-items: center; gap: 2px; margin: 0 auto; }
.nav-item { position: static; }
.nav-trigger, .nav-link {
  display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 12px; border-radius: 999px;
  font-size: 14.5px; font-weight: 420; color: var(--ink-2); transition: background .2s, color .2s;
}
.nav-trigger:hover, .nav-link:hover, .nav-item.open .nav-trigger { background: var(--ink-a05); color: var(--ink); }
.nav-trigger .chev { transition: transform .25s var(--ease); opacity: .6; }
.nav-item.open .nav-trigger .chev { transform: rotate(180deg); }
.nav-link[aria-current="page"], .nav-trigger.is-current { color: var(--ink); }
.header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.header-actions .signin { position: relative; }
.signin-menu {
  position: absolute; right: 0; top: calc(100% + 10px); width: max-content; min-width: 150px; padding: 8px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-l);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .25s var(--ease), visibility .2s;
}
.signin.open .signin-menu { opacity: 1; visibility: visible; transform: none; }
.signin-menu a { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; font-size: 14px; }
.signin-menu a:hover { background: var(--bg); }
.signin-menu img { width: 28px; }
.signin-menu small { display: block; color: var(--muted); font-size: 12.5px; }
.menu-toggle { display: none; width: 40px; height: 40px; border-radius: 999px; align-items: center; justify-content: center; }
.menu-toggle span { display: block; width: 18px; height: 1.5px; background: var(--ink); position: relative; transition: background .2s; }
.menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--ink); transition: transform .3s var(--ease); }
.menu-toggle span::before { top: -6px; }
.menu-toggle span::after { top: 6px; }
.menu-open .menu-toggle span { background: transparent; }
.menu-open .menu-toggle span::before { transform: translateY(6px) rotate(45deg); }
.menu-open .menu-toggle span::after { transform: translateY(-6px) rotate(-45deg); }

/* Mega menu */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 30px 60px -30px var(--ink-a28);
  opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s, transform .3s var(--ease), visibility .2s;
}
.nav-item.open .mega { opacity: 1; visibility: visible; transform: none; }
.mega-inner { display: grid; grid-template-columns: 1fr 300px; gap: 40px; padding: 32px 0 36px; }
.mega-inner.no-feature { grid-template-columns: 1fr; }
.mega-cols { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 32px; }
.mega-col-title { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px 10px; }
.mega-link { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border-radius: 12px; transition: background .2s; }
.mega-link:hover { background: var(--bg); }
.mega-link .ml-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; }
.mega-link .ml-icon img { width: 24px; height: 24px; object-fit: contain; }
.mega-link .ml-icon.dot::after { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--connect); }
.mega-link .ml-icon.dot.cloud::after { background: var(--cloud); }
.mega-link strong { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500; color: var(--ink); line-height: 1.3; text-transform: none; }
.mega-link span { display: block; font-size: 13px; color: var(--muted); line-height: 1.4; margin-top: 2px; }
.mega-link.lg strong { font-family: var(--f-display); font-size: 17px; letter-spacing: -0.01em; }
.mega-sub { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 4px; padding-left: 48px; }
.mega-sub a { padding: 8px 10px; border-radius: 10px; font-size: 13.5px; color: var(--ink-2); display: flex; gap: 8px; align-items: center; }
.mega-sub a img { width: 24px; height: 24px; }
.mega-sub a:hover { background: var(--bg); color: var(--ink); }
.mega-feature {
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 20px; border-radius: var(--radius);
  background: linear-gradient(160deg, var(--connect-wash), var(--white) 70%); border: 1px solid var(--line); min-height: 210px;
}
.mega-feature.cloud { background: linear-gradient(160deg, var(--cloud-wash), var(--white) 70%); }
.mega-feature p { font-family: var(--f-display); font-size: 18px; line-height: 1.3; letter-spacing: -0.015em; font-weight: 500; }
.mega-backdrop { position: fixed; inset: 0; top: var(--header-h); background: rgba(35,31,35,.12); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; z-index: 90; }
.mega-open .mega-backdrop { opacity: 1; visibility: visible; }

/* Mobile drawer */
.drawer { display: none; }
@media (max-width: 1080px) {
  .nav, .header-actions .hide-m { display: none; }
  .menu-toggle { display: inline-flex; }
  .header-actions { margin-left: auto; }
  .drawer {
    display: block; position: fixed; inset: var(--header-h) 0 0 0; z-index: 99; background: var(--bg);
    overflow-y: auto; overscroll-behavior: contain; padding: 8px var(--gutter) 40px;
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s, transform .3s var(--ease), visibility .25s;
  }
  .menu-open .drawer { opacity: 1; visibility: visible; transform: none; }
  .menu-open { overflow: hidden; }
  .drawer details { border-bottom: 1px solid var(--line); }
  .drawer summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 18px 2px; font-family: var(--f-display); font-size: 20px; font-weight: 500; letter-spacing: -0.02em; cursor: pointer; }
  .drawer summary::-webkit-details-marker { display: none; }
  .drawer summary .chev { transition: transform .25s var(--ease); }
  .drawer details[open] summary .chev { transform: rotate(180deg); }
  .drawer .d-links { display: grid; gap: 2px; padding: 0 0 16px; }
  .drawer .d-links a { display: flex; gap: 10px; align-items: center; padding: 10px 8px; border-radius: 10px; font-size: 15px; }
  .drawer .d-links a:hover { background: var(--surface); }
  .drawer .d-links a img { width: 22px; height: 22px; }
  .drawer .d-label { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 10px 8px 4px; }
  .drawer .d-plain { display: block; padding: 18px 2px; border-bottom: 1px solid var(--line); font-family: var(--f-display); font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }
  .drawer .d-cta { display: grid; gap: 10px; margin-top: 24px; }
}

/* ---------- Hero ---------- */
.hero { position: relative; }
.hero-inner { padding: clamp(64px, 9vw, 120px) 0 clamp(56px, 7vw, 88px); display: grid; gap: 28px; }
.hero-inner.center { justify-items: center; text-align: center; }
.hero-inner.center .lead { margin: 0 auto; }
.hero .h-display, .hero .h1 { max-width: 15ch; }
.hero .h1.wide { max-width: 20ch; }
.hero-meta { font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hero-meta .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--faint); }
.hero-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; padding: clamp(56px, 8vw, 104px) 0; }
.hero-split .hero-copy { display: grid; gap: 24px; align-content: center; }
.hero-note { margin: -8px 0 0; font-size: 15px; color: var(--muted); }
.hero-stage { padding-bottom: clamp(56px, 7vw, 96px); }
.hero-glow { position: absolute; inset: -20% -10% auto; height: 620px; pointer-events: none; z-index: -1; filter: blur(70px); opacity: .55;
  background: radial-gradient(40% 50% at 25% 40%, rgba(181,165,255,.55), transparent 70%), radial-gradient(35% 45% at 80% 30%, rgba(109,166,166,.45), transparent 70%); }
.hero-glow.connect { background: radial-gradient(45% 55% at 70% 40%, rgba(181,165,255,.6), transparent 70%), radial-gradient(30% 40% at 20% 20%, rgba(206,191,250,.5), transparent 70%); }
.hero-glow.cloud { background: radial-gradient(45% 55% at 70% 40%, rgba(109,166,166,.55), transparent 70%), radial-gradient(30% 40% at 20% 20%, rgba(187,216,216,.6), transparent 70%); }
.hero-glow.neutral { background: radial-gradient(45% 55% at 70% 40%, rgba(244,231,199,.7), transparent 70%), radial-gradient(30% 40% at 20% 20%, rgba(215,233,255,.6), transparent 70%); }

/* ---------- Media frames (brand gradients) ---------- */
.media {
  position: relative; border-radius: var(--radius-l); overflow: hidden; padding: clamp(14px, 2.4vw, 28px);
  background: linear-gradient(140deg, #e7dcf8 0%, #c8b6f2 45%, #9c83df 100%);
  isolation: isolate;
}
.media::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .35; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }
.media.cloud { background: linear-gradient(140deg, #d6ebe8 0%, #8ec1bf 45%, #2f7a80 100%); }
.media.dark { background: linear-gradient(150deg, #322d32 0%, var(--ink-fixed) 55%, #130740 100%); }
.media.night-connect { background: radial-gradient(120% 90% at 0% 100%, #8e69bf 0%, var(--violet-800) 30%, var(--ink-fixed-2) 70%); }
.media.night-cloud { background: radial-gradient(120% 90% at 0% 100%, #6da6a6 0%, #25747c 30%, var(--ink-fixed-2) 70%); }
.media.sand { background: linear-gradient(140deg, #faf3e3 0%, #f4e7c7 50%, #e9d3a0 100%); }
.media.sky { background: linear-gradient(140deg, #eef5ff 0%, #d7e9ff 50%, #b5cff3 100%); }
.media.plain { background: var(--panel); }
.media.flat { padding: 0; }
.media > img, .media > video, .media > .media-img { width: 100%; border-radius: calc(var(--radius-l) - 8px); }
.media .screen { background: var(--surface); border-radius: calc(var(--radius-l) - 10px); box-shadow: 0 20px 50px -24px var(--navy-a45); overflow: hidden; }
.media .screen img, .media .screen video { width: 100%; }
.media .screen > svg { display: block; width: 100%; height: auto; }
.media.photo { padding: 0; background: var(--panel); }
.media.photo > img { border-radius: 0; height: 100%; object-fit: cover; }

/* Browser chrome */
.browser { border-radius: 16px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-l); border: 1px solid var(--line); }
.browser-bar { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; background: #f3f1ee; border-bottom: 1px solid var(--line); }
.browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: #dcd8d3; }
.browser-bar .url { margin: 0 auto; font-family: var(--f-mono); font-size: 11.5px; color: var(--muted); background: var(--white); border: 1px solid var(--line); padding: 3px 14px; border-radius: 999px; }
.browser video, .browser img { width: 100%; }
.browser.dark { background: var(--dark-2); border-color: var(--on-dark-08); }
.browser.dark .browser-bar { background: #2a252a; border-color: var(--on-dark-06); }
.browser.dark .browser-bar i { background: #4a434a; }
.browser.dark .browser-bar .url { background: var(--ink-fixed-2); border-color: var(--on-dark-08); color: var(--on-dark-55); }

/* ---------- Cards ---------- */
.card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(22px, 2.6vw, 32px); }
.card.panel { background: var(--panel); border-color: transparent; }
.card.flat { background: transparent; }
.card.hover { transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .25s; }
.card.hover:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-2); }
.card .c-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--line); margin-bottom: 20px; }
.card .c-icon img { width: 28px; height: 28px; object-fit: contain; }
.card .c-icon svg { width: 20px; height: 20px; }
.card .c-title { font-family: var(--f-display); font-weight: 500; font-size: 1.25rem; letter-spacing: -0.02em; line-height: 1.25; margin-bottom: 8px; }
.card .c-text { color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.card .c-num { font-family: var(--f-mono); font-size: 12px; color: var(--muted); letter-spacing: .06em; margin-bottom: 18px; display: block; }
.card .c-foot { margin-top: 20px; }
.card-art { margin: -1px -1px 22px; border-radius: calc(var(--radius-l) - 6px); overflow: hidden; background: var(--panel); }
.card-art img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.card.link-card { display: flex; flex-direction: column; }
.card.link-card .c-foot { margin-top: auto; padding-top: 20px; }
.card.link-card .arrow-ico { transition: transform .3s var(--ease); }
.card.link-card:hover .arrow-ico { transform: translate(3px, -3px); }

/* Product duo (home) */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.duo-card {
  position: relative; display: flex; flex-direction: column; gap: 20px; border-radius: var(--radius-xl); padding: clamp(24px, 3vw, 40px);
  overflow: hidden; isolation: isolate; border: 1px solid var(--line); transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.duo-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-l); }
.duo-card.connect { background: linear-gradient(170deg, var(--violet-50) 0%, #e6dffd 60%, #ddd6fd 100%); }
.duo-card.cloud { background: linear-gradient(170deg, #eef6f5 0%, #dcecea 60%, #cfe4e3 100%); }
.duo-card .duo-title { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.7rem, 3vw, 2.5rem); letter-spacing: -0.035em; line-height: 1.05; }
.duo-card .duo-art { margin-top: 0; display: grid; place-items: center; background: var(--surface); border-radius: var(--radius-l); padding: 14px; box-shadow: var(--shadow); }
.duo-card .duo-art img { width: 100%; border-radius: 12px; }
.duo-card .duo-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---------- Logo marquee ---------- */
.logos { padding: 40px 0 8px; }
.logos-title { text-align: center; font-size: 14px; color: var(--muted); margin-bottom: 28px; }
.marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee + .marquee { margin-top: 18px; }
.marquee-track { display: flex; gap: 0; width: max-content; animation: marquee 48s linear infinite; will-change: transform; }
/* spacing sits after every logo (not between them) so the track is exactly two identical halves and the -50% loop has no jump */
.marquee-item { margin-right: 56px; }
.marquee.rev .marquee-track { animation-direction: reverse; animation-duration: 56s; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item { flex-shrink: 0; height: 36px; display: grid; place-items: center; opacity: .5; filter: brightness(0); transition: opacity .25s, filter .25s; } /* brightness(0): every logo becomes the same grey regardless of its own colours */
.marquee-item:hover { opacity: 1; filter: none; }
.marquee-item svg, .marquee-item img { display: block; flex-shrink: 0; } /* per-logo size comes from the generator (equal visual area) */
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Numbered tabs (vertical rail) ---------- */
.ntabs { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.ntabs-list { display: grid; gap: 4px; position: sticky; top: calc(var(--header-h) + 32px); }
.ntab {
  position: relative; display: flex; gap: 14px; align-items: baseline; width: 100%; text-align: left;
  padding: 11px 14px; border-radius: 10px; color: var(--muted); font-size: 15px; transition: background .2s, color .2s; overflow: hidden;
}
.ntab .n { font-family: var(--f-mono); font-size: 12px; color: var(--muted); transition: color .2s; }
.ntab:hover { color: var(--ink); }
.ntab[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-s); }
.ntab[aria-selected="true"] .n { color: var(--connect); }
.ntabs.cloud .ntab[aria-selected="true"] .n { color: var(--cloud); }
.ntab .bar { position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--line); opacity: 0; }
.ntab .bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--connect); }
.ntabs.cloud .ntab .bar i { background: var(--cloud); }
.ntabs-track.is-pinned > .ntabs { position: sticky; top: calc(var(--header-h) + 24px); }
.ntabs-track.is-pinned .ntabs-list { position: static; }
.ntab[aria-selected="true"] .bar { opacity: 1; }
.ntab-panels { position: relative; }
.ntab-panel { display: none; }
.ntab-panel.active { display: block; animation: panelIn .5s var(--ease); }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.np-card { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(20px, 3vw, 40px); align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: clamp(14px, 2vw, 22px); }
.np-card .np-copy { padding: clamp(8px, 2vw, 24px) clamp(8px, 2vw, 20px) clamp(8px, 2vw, 24px) 0; display: grid; gap: 14px; }
.np-card .np-copy .num { font-family: var(--f-mono); font-size: 12px; color: var(--muted); }
.np-card.stacked { grid-template-columns: 1fr; }
.np-card.stacked .np-copy { padding: 8px clamp(8px, 2vw, 20px) 12px; }

/* Pill tabs (horizontal) */
.ptabs-bar { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); }
.ptab { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; font-size: 14px; color: var(--ink-2); transition: background .2s, color .2s, box-shadow .2s; white-space: nowrap; }
.ptab img { width: 18px; height: 18px; }
.ptab:hover { color: var(--ink); }
.ptab[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-s); }
.ptabs-bar.dark { background: var(--on-dark-06); border-color: var(--on-dark-08); }
.ptabs-bar.dark .ptab { color: rgba(255,255,255,.65); }
.ptabs-bar.dark .ptab[aria-selected="true"] { background: var(--on-dark-12); color: var(--white); box-shadow: none; }
.ptab-panel { display: none; }
.ptab-panel.active { display: block; animation: panelIn .5s var(--ease); }
.ptabs-scroll { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.ptabs-scroll::-webkit-scrollbar { display: none; }

/* Capability bento inside a tab */
.cap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; }
.cap-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(18px, 2.2vw, 26px); display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.cap-tile .ct-title { font-family: var(--f-display); font-weight: 500; font-size: 1.15rem; letter-spacing: -0.02em; line-height: 1.25; }
.cap-tile .ct-art { margin-top: auto; border-radius: 14px; overflow: hidden; background: var(--bg); }
.cap-tile .ct-art img { width: 100%; }
.cap-tile.tint-connect { background: linear-gradient(180deg, var(--white), var(--connect-wash)); }
.cap-tile.tint-cloud { background: linear-gradient(180deg, var(--white), var(--cloud-wash)); }
.cap-tile.dark { background: var(--dark); color: var(--white); border-color: transparent; }
.cap-tile.dark .ct-title { color: var(--white); }
.cap-tile.span-2 { grid-column: 1 / -1; }
.cap-meta { font-family: var(--f-mono); font-size: 12px; color: var(--muted); letter-spacing: .02em; }
.cap-stat { display: flex; align-items: baseline; gap: 10px; }
.cap-stat b { font-family: var(--f-display); font-size: 2rem; font-weight: 500; letter-spacing: -0.03em; }

/* ---------- Feature rows ---------- */
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.feature.reverse > .feature-copy { order: 2; }
.feature + .feature { margin-top: clamp(72px, 9vw, 120px); }
.feature-copy { display: grid; gap: 18px; align-content: center; }
.feature-copy .h2, .feature-copy .h3 { max-width: 18ch; }
.checks { display: grid; gap: 12px; margin-top: 6px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-2); font-size: 15.5px; line-height: 1.5; }
.checks li::before { content: ""; flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px; background: var(--connect-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.5L14 7.5' fill='none' stroke='%234d42c0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
.checks.cloud li::before { background-color: var(--cloud-wash); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.5L14 7.5' fill='none' stroke='%2325747c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.checks.grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.checks.x li::before { background: var(--danger-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 7l6 6M13 7l-6 6' fill='none' stroke='%23d65553' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
.checks.dark li { color: rgba(255,255,255,.78); }
.checks.dark li::before { background-color: rgba(181,165,255,.16); }
.mini-points { display: grid; gap: 18px; margin-top: 8px; }
.mini-points li { display: grid; grid-template-columns: 28px 1fr; gap: 4px 14px; }
.mini-points li .mp-ico { grid-row: span 2; width: 28px; height: 28px; border-radius: 8px; background: var(--connect-wash); display: grid; place-items: center; color: var(--connect); }
.mini-points.cloud li .mp-ico { background: var(--cloud-wash); color: var(--cloud); }
.mini-points li strong { font-weight: 500; font-size: 15.5px; color: var(--ink); }
.mini-points li span { color: var(--muted); font-size: 14.5px; line-height: 1.5; }

/* Sticky-scroll feature list */
.sticky-split { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.sticky-split .sticky-col { position: sticky; top: calc(var(--header-h) + 40px); display: grid; gap: 20px; }

/* ---------- Statement ---------- */
.statement { font-family: var(--f-display); font-weight: 450; font-size: clamp(1.6rem, 3.2vw, 2.6rem); line-height: 1.2; letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; }
.statement .tone { color: var(--faint); }

/* ---------- Dark band ---------- */
.band-dark { background: var(--dark); color: var(--white); position: relative; overflow: hidden; }
.band-dark .h1, .band-dark .h2, .band-dark .h3, .band-dark .h4 { color: var(--white); }
.band-dark .lead, .band-dark .body { color: var(--on-dark-72); }
.band-dark .tone { color: rgba(255,255,255,.45); }
.band-dark .eyebrow { color: var(--on-dark-60); }
.band-dark .eyebrow.connect { color: var(--connect-pale); }
.band-dark .eyebrow.cloud { color: var(--cloud-on-dark); }
.band-dark .card { background: var(--dark-lift); border-color: var(--on-dark-08); color: var(--white); }
.band-dark .card .c-text { color: var(--on-dark-70); }
.band-dark .glow { position: absolute; width: 900px; height: 600px; left: 50%; top: -260px; transform: translateX(-50%); pointer-events: none; filter: blur(80px); opacity: .45;
  background: radial-gradient(closest-side, rgba(142,105,191,.8), transparent); }
.band-dark .glow.cloud { background: radial-gradient(closest-side, rgba(109,166,166,.75), transparent); }
.band-dark .gridlines { position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%); }
.rounded-band { border-radius: var(--radius-xl); margin: 0 auto; width: calc(100% - 2 * var(--gutter)); max-width: var(--container); } /* same edge as .cta panels and the hero rails */


/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); border-top: 1px solid var(--line); }
.stat { padding: 28px 28px 8px 0; display: grid; gap: 6px; align-content: start; }
.stat + .stat { padding-left: 28px; border-left: 1px solid var(--line); }
.stat .num { font-family: var(--f-display); font-weight: 500; font-size: clamp(2.4rem, 4.2vw, 3.6rem); line-height: 1; letter-spacing: -0.045em; color: var(--ink); }
.stat .lbl { font-weight: 500; color: var(--ink); margin-top: 10px; }
.stat .desc { color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.band-dark .stats { border-color: var(--on-dark-12); }
.band-dark .stat + .stat { border-color: var(--on-dark-12); }
.band-dark .stat .num, .band-dark .stat .lbl { color: var(--white); }
.band-dark .stat .desc { color: var(--on-dark-60); }

.bento { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: auto auto; gap: 16px; }
.bento .b-hero { grid-row: span 2; }
.b-tile { position: relative; overflow: hidden; border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--line); padding: clamp(22px, 2.6vw, 32px); display: flex; flex-direction: column; gap: 6px; min-height: 200px; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.b-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.b-tile .bt-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; margin-bottom: auto; }
.b-tile .num { font-family: var(--f-display); font-weight: 500; font-size: clamp(2.4rem, 4vw, 3.4rem); letter-spacing: -0.045em; line-height: 1; color: var(--navy); margin-top: 28px; }
.b-tile .lbl { font-weight: 500; color: var(--ink); margin-top: 6px; }
.b-tile .desc { color: var(--muted); font-size: 14.5px; }
.b-tile.b-hero { background: linear-gradient(160deg, var(--violet-50) 0%, #d9cffd 60%, var(--code-key) 100%); border-color: transparent; }
.b-tile.b-hero .num { font-size: clamp(3.5rem, 7vw, 6rem); }
.b-tile .globe { position: absolute; right: -60px; bottom: -60px; width: 300px; height: 300px; opacity: .55; }

/* ---------- KPI outcome cards ---------- */
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 26px; display: grid; gap: 10px; }
.kpi .k-dir { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-display); font-weight: 500; font-size: 1.35rem; letter-spacing: -0.02em; }
.kpi .k-arrow { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--success-bg); color: var(--success-text); font-size: 16px; }
.kpi .k-arrow.down { background: var(--connect-wash); color: var(--connect); }
.kpi p { color: var(--muted); font-size: 15px; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 16px; counter-reset: step; position: relative; }
.step { position: relative; display: grid; gap: 10px; align-content: start; padding: 24px; border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--line); }
.step .s-n { width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; font-family: var(--f-mono); font-size: 13px; background: var(--ink); color: var(--on-ink); margin-bottom: 8px; }
.step.connect .s-n { background: var(--connect); }
.step.cloud .s-n { background: var(--cloud); }
.step strong { font-family: var(--f-display); font-weight: 500; font-size: 1.1rem; letter-spacing: -0.015em; line-height: 1.3; }
.step p { color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.step code { font-family: var(--f-mono); font-size: 12.5px; background: var(--panel); padding: 1px 6px; border-radius: 5px; color: var(--ink); }
.steps-line { position: absolute; top: 40px; left: 40px; right: 40px; height: 1px; background: repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 12px); z-index: 0; }
.endpoint-trail { margin-top: 20px; padding: 14px 18px; border-radius: 12px; background: var(--dark); color: var(--on-dark-75); font-family: var(--f-mono); font-size: 12.5px; line-height: 1.7; overflow-x: auto; white-space: nowrap; }
.endpoint-trail b { color: var(--connect-pale); font-weight: 400; }

/* ---------- Code ---------- */
.code { background: var(--ink-fixed-2); color: var(--code-ink); border-radius: var(--radius); border: 1px solid var(--on-dark-06); overflow: hidden; font-family: var(--f-mono); font-size: 12.5px; line-height: 1.7; }
.code-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--on-dark-07); color: var(--on-dark-55); font-size: 11.5px; }
.code-head .method { color: var(--code-green); margin-right: 8px; }
.code-head .copy { font-family: var(--f-mono); font-size: 12px; color: var(--on-dark-60); padding: 3px 8px; border-radius: 6px; border: 1px solid var(--on-dark-12); transition: color .2s, border-color .2s; }
.code-head .copy:hover { color: var(--white); border-color: rgba(255,255,255,.4); }
.code pre { margin: 0; padding: 14px 16px; overflow-x: auto; white-space: pre; }
.code .k { color: var(--code-key); } .code .s { color: var(--code-green); } .code .n { color: var(--code-num); } .code .c { color: rgba(255,255,255,.58); }
.code-foot { padding: 10px 16px; border-top: 1px solid var(--on-dark-07); color: var(--code-green); font-size: 11.5px; display: flex; align-items: center; gap: 8px; }
.code-foot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #5cce63; box-shadow: 0 0 0 3px rgba(92,206,99,.18); }
.call-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.call-step { display: grid; gap: 14px; grid-template-rows: auto 1fr; }
.call-step .code { display: flex; flex-direction: column; }
.call-step .code pre { flex: 1; }
.call-step .cs-head { display: flex; gap: 12px; align-items: center; }
.call-step .cs-head .s-n { width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; background: var(--connect); color: var(--white); font-family: var(--f-mono); font-size: 12px; flex-shrink: 0; }
.call-step .cs-head strong { font-family: var(--f-display); font-weight: 500; font-size: 1.1rem; }
.call-step .cs-head span { color: var(--muted); font-size: 14px; display: block; }

/* ---------- Flow diagram (Supply → Nuitée → Product) ---------- */
.flow3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); gap: 0; align-items: stretch; position: relative; }
.flow-col { position: relative; display: grid; gap: 14px; align-content: start; padding: 24px; border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--line); }
.flow-col.core { background: var(--dark); color: var(--white); border-color: transparent; box-shadow: 0 30px 60px -30px rgba(19,7,64,.55); z-index: 1; margin: -10px 0; padding: 30px 28px; }
.flow-col.core.connect { background: radial-gradient(120% 120% at 100% 0%, var(--violet-800) 0%, var(--ink-fixed) 55%); }
.flow-col.core.cloud { background: radial-gradient(120% 120% at 100% 0%, #25747c 0%, var(--ink-fixed) 55%); }
.flow-col .fc-label { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.flow-col.core .fc-label { color: var(--on-dark-75); }
.flow-col .fc-title { font-family: var(--f-display); font-weight: 500; font-size: 1.3rem; letter-spacing: -0.02em; line-height: 1.2; }
.flow-col .fc-text { font-size: 14px; color: var(--muted); }
.flow-col.core .fc-text { color: rgba(255,255,255,.65); }
.flow-col .fc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.flow-col.core .chip { background: var(--on-dark-07); border-color: var(--on-dark-12); color: rgba(255,255,255,.88); }
.flow-col .fc-art { border-radius: 12px; overflow: hidden; }
.flow-col .fc-art img { width: 100%; }
.flow-col .fc-logo { display: flex; align-items: center; gap: 10px; }
.flow-col .fc-logo img { width: 30px; }
.flow-arrow { position: absolute; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-2); display: grid; place-items: center; z-index: 2; font-size: 12px; color: var(--ink-2); }
.flow-col + .flow-col { margin-left: 12px; }
.flow-wrap { display: grid; gap: 16px; }
.flow-api { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.flow-api .card { padding: 22px; }

/* ---------- Quote ---------- */
.quote { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; padding: clamp(28px, 4vw, 56px); border-radius: var(--radius-xl); background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.quote blockquote { font-family: var(--f-display); font-weight: 450; font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1.3; letter-spacing: -0.025em; color: var(--ink); text-wrap: pretty; }
.split-2 > .quote.q-long blockquote { font-size: clamp(1.15rem, 1.55vw, 1.4rem); line-height: 1.4; } /* long testimonials step down so the card stays near its neighbour */
.quote blockquote::before { content: "“"; display: block; font-size: 4rem; line-height: .6; color: var(--connect-pale); margin-bottom: 12px; }
.quote.cloud blockquote::before { color: var(--cloud-pale); }
.quote figcaption { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.quote figcaption img { width: 48px; height: 48px; border-radius: 999px; object-fit: cover; }
.quote figcaption .q-avatar { width: 48px; height: 48px; border-radius: 999px; display: grid; place-items: center; background: var(--connect-wash); color: var(--connect); font-family: var(--f-display); font-weight: 600; }
.quote.cloud figcaption .q-avatar { background: var(--cloud-wash); color: var(--cloud); }
.quote figcaption strong { display: block; font-weight: 500; }
.quote figcaption span { color: var(--muted); font-size: 14px; }
.quote .q-brand { font-family: var(--f-display); font-size: 1.4rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); opacity: .85; text-align: right; }
.quote .q-brand small { display: block; font-family: var(--f-mono); font-size: 12px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.quote.tint-connect { background: linear-gradient(150deg, var(--white) 40%, var(--connect-wash)); }
.quote.tint-cloud { background: linear-gradient(150deg, var(--white) 40%, var(--cloud-wash)); }

/* Success story */
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.story-copy { padding: clamp(28px, 4vw, 56px); display: grid; gap: 18px; align-content: center; }
.story-side { padding: clamp(28px, 4vw, 56px); display: grid; align-content: space-between; gap: 32px; background: var(--dark); color: var(--white); position: relative; overflow: hidden; isolation: isolate; }
.story-side::before { content: ""; position: absolute; inset: auto -20% -40% auto; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(closest-side, rgba(142,105,191,.7), transparent); z-index: -1; }
.story-side.cloud::before { background: radial-gradient(closest-side, rgba(109,166,166,.7), transparent); }
.story-side blockquote { font-family: var(--f-display); font-weight: 450; font-size: clamp(1.2rem, 2vw, 1.6rem); line-height: 1.35; letter-spacing: -0.02em; }
.story-side .s-desc { font-family: var(--f-display); font-weight: 450; font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.4; letter-spacing: -0.015em; color: var(--on-dark-80, rgba(255,255,255,.8)); }
.story-side .s-brand { font-family: var(--f-display); font-size: 2rem; font-weight: 600; letter-spacing: -0.03em; }
.story-side .s-role { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-55); margin-top: 8px; }

/* ---------- Mock UI cards (product snapshots) ---------- */
.mock-stage { position: relative; padding: clamp(24px, 4vw, 48px); border-radius: var(--radius-xl); overflow: hidden; isolation: isolate; display: grid; place-items: center; min-height: 380px; }
.mock-stage.connect { background: linear-gradient(150deg, var(--violet-50), #d9cffd 60%, #c3b2fb); }
.mock-stage.cloud { background: linear-gradient(150deg, #eef6f5, #cfe4e3 60%, #a9cfcd); }
.mock-stage.sand { background: linear-gradient(150deg, #fbf6ea, #f4e7c7 60%, #ecd8a6); }
/* Travel Agent toolkit: three equal stages, each screenshot centred */
.tk-shot { min-height: 0; aspect-ratio: 4 / 3; padding: clamp(16px, 2.4vw, 28px); }
.tk-shot img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 12px 32px rgba(35,31,35,.16); }
/* Travel Advisor toolkit gallery (/connect/travel-advisor-platform): code-drawn app screens, em-sized off the tile width */
.tk-shot .ta-wrap { container-type: inline-size; width: 100%; height: 100%; display: grid; }
.ta-app { font-size: 2.3cqw; display: grid; grid-template-rows: auto 1fr; height: 100%; min-height: 0; overflow: hidden; border-radius: 10px; background: var(--white); color: var(--ink); box-shadow: 0 12px 32px rgba(35,31,35,.16); text-align: left; }
.ta-app small { display: block; color: var(--muted); font-size: .82em; }
.ta-app b { font-weight: 500; }
.ta-top { display: flex; align-items: center; justify-content: space-between; padding: .7em 1em; border-bottom: 1px solid var(--line); }
.ta-brand { display: flex; align-items: center; gap: .5em; font-weight: 600; font-size: 1.05em; }
.ta-brand img { width: 1.5em; height: 1.5em; }
.ta-agency { display: flex; align-items: center; gap: .45em; font-size: .9em; color: var(--muted); }
.ta-agency i, .ta-client i { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 99px; background: var(--connect-wash); color: var(--connect); font-style: normal; font-size: .8em; font-weight: 600; }
.ta-body { display: grid; grid-template-columns: 9.4em minmax(0, 1fr); min-height: 0; }
.ta-nav { display: grid; align-content: start; gap: .15em; padding: .8em .55em; border-right: 1px solid var(--line); background: #fbfaf9; font-size: .92em; color: var(--ink-2); }
.ta-nav span { display: flex; align-items: center; gap: .55em; padding: .42em .55em; border-radius: .5em; }
.ta-nav .ico { width: 1.15em; height: 1.15em; color: var(--muted); flex-shrink: 0; }
.ta-nav span.on { background: var(--panel); color: var(--ink); font-weight: 500; }
.ta-nav span.on .ico { color: var(--connect); }
.ta-main { display: grid; align-content: start; gap: .7em; padding: .9em 1em; min-width: 0; overflow: hidden; }
.ta-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5em; }
.ta-head b { font-size: 1.1em; }
.ta-head .tag { font-size: .72em; }
.ta-search { display: grid; grid-template-columns: 1.3fr 1fr 1fr auto; gap: .35em; padding: .3em; border: 1px solid var(--line-2); border-radius: .7em; font-size: .92em; }
.ta-search > span { padding: .2em .5em; }
.ta-search .ta-go { display: grid; place-items: center; width: 2.4em; border-radius: .5em; background: var(--connect); color: #fff; padding: 0; }
.ta-search .ta-go .ico { width: 1.1em; height: 1.1em; }
.ta-split { display: grid; grid-template-columns: 38% minmax(0, 1fr); gap: .7em; min-height: 0; }
.ta-map { width: 100%; height: auto; aspect-ratio: 130 / 170; align-self: start; border-radius: .7em; border: 1px solid var(--line); display: block; }
.ta-list { display: grid; gap: .5em; align-content: start; min-width: 0; }
.ta-hotel { display: grid; grid-template-columns: 4.4em minmax(0, 1fr) auto; gap: .6em; align-items: center; padding: .45em; border: 1px solid var(--line); border-radius: .7em; }
.ta-hotel img { width: 4.4em; height: 4.4em; object-fit: cover; border-radius: .5em; }
.ta-hotel b, .ta-line b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta-free { display: inline-block; margin-top: .25em; font-size: .78em; color: var(--success, #2f7d4f); }
.ta-price { display: grid; justify-items: end; gap: .15em; text-align: right; }
.ta-btn { display: inline-flex; align-items: center; justify-content: center; padding: .35em .7em; border-radius: 99px; border: 1px solid var(--line-2); font-size: .82em; white-space: nowrap; background: var(--white); }
.ta-btn.solid { background: var(--connect); border-color: var(--connect); color: #fff; }
.ta-client { display: flex; align-items: center; gap: .6em; padding: .55em .7em; border-radius: .7em; background: var(--panel); }
.ta-client i { width: 2.3em; height: 2.3em; }
.ta-valid { margin-left: auto; font-size: .8em; color: var(--muted); }
.ta-card { display: grid; border: 1px solid var(--line); border-radius: .7em; }
.ta-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .6em; align-items: center; padding: .55em .7em; }
.ta-line + .ta-line { border-top: 1px solid var(--line); }
.ta-line .ico { width: 1.2em; height: 1.2em; color: var(--connect); }
.ta-line .tag { font-size: .72em; }
.ta-card .ta-line:has(> span:first-child + .tag) { grid-template-columns: minmax(0, 1fr) auto auto; }
.ta-sub, .ta-total { grid-template-columns: minmax(0, 1fr) auto; color: var(--muted); }
.ta-total { color: var(--ink); background: var(--connect-wash); border-radius: 0 0 .7em .7em; }
.ta-total b { font-size: 1.15em; font-weight: 600; }
.ta-actions, .ta-methods { display: flex; flex-wrap: wrap; gap: .4em; }
.ta-methods span { padding: .3em .65em; border-radius: 99px; background: var(--panel); font-size: .8em; color: var(--ink-2); }
.ta-pipe, .ta-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4em; }
.ta-pipe span, .ta-kpis span { padding: .5em .65em; border-radius: .6em; background: var(--panel); font-size: .85em; color: var(--muted); }
.ta-pipe b, .ta-kpis b { display: block; color: var(--ink); font-size: 1.35em; font-weight: 500; letter-spacing: -.02em; }
.ta-kpis small { font-size: .9em; }
.ta-link { display: flex; align-items: center; gap: .5em; padding: .45em .5em .45em .7em; border: 1px dashed var(--line-2); border-radius: .7em; font-family: var(--f-mono); font-size: .82em; color: var(--ink-2); }
.ta-link .ico { width: 1.1em; height: 1.1em; color: var(--success, #2f7d4f); }
.ta-link .ta-btn { margin-left: auto; font-family: var(--f-body); }
.mock-stage.sky { background: linear-gradient(150deg, #f3f8ff, #d7e9ff 60%, #bcd6f6); }
.mock-stage.photo { background-size: cover; background-position: center; }
.mock-stage > .code { width: min(100%, 460px); min-width: 0; box-shadow: 0 18px 40px rgba(15,58,58,.18); }
.mock-stage.photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--ink-a05), var(--ink-a35)); z-index: -1; }
.mock { width: 100%; max-width: 380px; background: var(--surface); border-radius: 18px; box-shadow: 0 30px 60px -28px var(--navy-a45), 0 0 0 1px var(--ink-a05); overflow: hidden; font-size: 14px; }
.mock-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.mock-head strong { font-weight: 500; font-size: 14px; }
.mock-head .mh-sub { color: var(--muted); font-size: 12.5px; display: block; font-weight: 400; }
.mock-body { padding: 14px 16px; display: grid; gap: 10px; }
.mock-photo { position: relative; height: 150px; border-radius: 12px; overflow: hidden; }
.mock-photo img { width: 100%; height: 100%; object-fit: cover; }
.mock-photo .mp-cap { position: absolute; left: 10px; bottom: 10px; right: 10px; color: var(--white); text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.mock-photo .mp-cap small { display: block; font-size: 11px; opacity: .9; font-family: var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
.mock-photo .mp-cap b { font-weight: 500; font-size: 15px; }
.mock-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 13.5px; }
.mock-row:last-child { border-bottom: 0; }
.mock-row .mr-k { color: var(--ink-2); display: flex; gap: 8px; align-items: center; min-width: 0; }
.mock-row .mr-k small { display: block; color: var(--muted); font-size: 12px; }
.mock-row .mr-v { font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mock-row .mr-v.pos { color: var(--success-text); }
.mock-row .mr-v.neg { color: var(--connect); }
.mock-row.total { border-top: 1px solid var(--line); border-bottom: 0; padding-top: 12px; margin-top: 4px; }
.mock-row.total .mr-v { font-family: var(--f-display); font-size: 1.15rem; letter-spacing: -0.02em; }
.mock-check { width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; background: var(--success-bg); color: var(--success-text); font-size: 11px; flex-shrink: 0; }
.mock-btn { display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 10px; background: var(--ink); color: var(--on-ink); font-weight: 450; font-size: 14px; margin-top: 4px; }
.mock-btn.connect { background: var(--connect); }
.mock-btn.cloud { background: var(--cloud); }
.mock-tabs { display: flex; gap: 4px; padding: 3px; background: var(--panel); border-radius: 9px; }
.mock-tabs span { flex: 1; text-align: center; font-size: 12px; padding: 5px 6px; border-radius: 7px; color: var(--muted); }
.mock-tabs span.on { background: var(--white); color: var(--ink); box-shadow: var(--shadow-s); }

/* Business Travel hero app (/connect/corporate-travel): icon sidebar and booking tabs */
.corp-nav { display: grid; gap: 2px; align-content: start; padding: 18px 12px; border-right: 1px solid var(--line); background: #fbfaf9; font-size: 13.5px; color: var(--ink-2); }
.corp-nav .cn-sec { margin: 12px 8px 4px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.corp-nav .cn-item { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; }
.corp-nav .cn-item .ico { color: var(--muted); flex-shrink: 0; }
.corp-nav .cn-item.on { background: var(--panel); color: var(--ink); font-weight: 500; }
.corp-nav .cn-item.on .ico { color: var(--connect); }
.corp-top { flex-wrap: wrap; gap: 12px; }
.corp-tabs { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--panel); }
.corp-tabs span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.corp-tabs span.on { background: var(--white); color: var(--ink); box-shadow: var(--shadow-s); }
@media (max-width: 720px) { .corp-app { grid-template-columns: minmax(0, 1fr) !important; } .corp-nav { display: none; } }
.mock-big { font-family: var(--f-display); font-weight: 500; font-size: 1.8rem; letter-spacing: -0.03em; }
.mock-float { position: absolute; z-index: 2; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-l); padding: 12px 14px; font-size: 13px; display: flex; gap: 10px; align-items: center; animation: floaty 6s ease-in-out infinite; }
.mock-float b { font-weight: 500; }
.mock-float small { display: block; color: var(--muted); font-size: 11.5px; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 90px; padding-top: 10px; }
.bars i { flex: 1; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, var(--connect-pale), var(--connect)); transform-origin: bottom; animation: barIn .9s var(--ease) both; }
.bars.cloud i { background: linear-gradient(180deg, var(--cloud-tint), var(--cloud)); }
@keyframes barIn { from { transform: scaleY(.1); } }
.meter { height: 6px; border-radius: 99px; background: var(--panel); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: inherit; background: var(--connect); }
.meter.cloud i { background: var(--cloud); }

/* Chat mock */
.chat { display: grid; gap: 10px; }
.bubble { max-width: 85%; padding: 10px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; }
.bubble.user { justify-self: end; background: var(--ink); color: var(--on-ink); border-bottom-right-radius: 4px; }
.bubble.bot { background: var(--panel); color: var(--ink); border-bottom-left-radius: 4px; }
.tool-call { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; font-family: var(--f-mono); font-size: 11.5px; padding: 8px 10px; border-radius: 10px; background: #1f1b1f; color: rgba(255,255,255,.8); }
.tool-call .tc-m { color: var(--code-green); }
.tool-call .tc-m.post { color: var(--code-num); }
.tool-call .tc-s { color: var(--on-dark-50); }
.hotel-card { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--white); }
.hotel-card img { width: 64px; height: 56px; object-fit: cover; border-radius: 8px; }
.hotel-card b { font-weight: 500; font-size: 13.5px; display: block; }
.hotel-card small { color: var(--muted); font-size: 12px; }
.hotel-card .price { font-weight: 500; font-size: 13.5px; white-space: nowrap; }
.dark-console { background: var(--ink-fixed-2); border: 1px solid var(--on-dark-08); border-radius: var(--radius-l); padding: 18px; display: grid; gap: 12px; color: var(--white); box-shadow: 0 40px 80px -40px rgba(0,0,0,.7); }
.dark-console .dc-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--on-dark-75); }
.dark-console .live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: 11px; color: var(--code-green); }
.dark-console .live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #5cce63; animation: pulse 1.8s infinite; }
.dark-console .prompt { padding: 12px 14px; border-radius: 12px; background: var(--on-dark-06); font-size: 14px; }
.dark-console .hotel-card { background: rgba(255,255,255,.05); border-color: var(--on-dark-08); color: var(--white); }
.dark-console .hotel-card small { color: var(--on-dark-55); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(92,206,99,.6); } 70% { box-shadow: 0 0 0 6px rgba(92,206,99,0); } 100% { box-shadow: 0 0 0 0 rgba(92,206,99,0); } }
.tool-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.tool-strip span { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .08em; padding: 7px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.8); }

/* ---------- Comparison ---------- */
.compare { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.compare-col { border-radius: var(--radius-l); border: 1px solid var(--line); background: var(--surface); padding: 26px; display: grid; gap: 14px; align-content: start; }
.compare-col .cc-title { font-family: var(--f-display); font-weight: 500; font-size: 1.25rem; letter-spacing: -0.02em; }
.compare-col .cc-sub { color: var(--muted); font-size: 14px; margin-top: -8px; }
.compare-col.best { background: var(--dark); color: var(--white); border-color: transparent; position: relative; }
.compare-col.best .cc-sub { color: var(--on-dark-60); }
.compare-col.best .checks li { color: var(--on-dark-85); }
.compare-col.best .checks li::before { background-color: rgba(181,165,255,.2); }
.compare-col .best-badge { position: absolute; top: 18px; right: 18px; }
.vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.vs-col { border-radius: var(--radius-l); padding: 28px; display: grid; gap: 16px; align-content: start; }
.vs-col.without { background: var(--panel); }
.vs-col.with { background: var(--dark); color: var(--white); }
.vs-col .vs-label { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.vs-col.without .vs-label { color: var(--muted); }
.vs-col.with .vs-label { color: var(--connect-pale); }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq .faq-head { position: sticky; top: calc(var(--header-h) + 40px); display: grid; gap: 16px; }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; cursor: pointer; font-family: var(--f-display); font-size: 1.08rem; font-weight: 500; letter-spacing: -0.015em; line-height: 1.4; color: var(--ink); transition: color .2s; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--connect); }
.faq-item .pm { position: relative; flex-shrink: 0; width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--line-2); transition: background .25s, border-color .25s, transform .35s var(--ease); }
.faq-item .pm::before, .faq-item .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%); transition: transform .35s var(--ease); }
.faq-item .pm::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .pm { background: var(--ink); border-color: var(--ink); transform: rotate(180deg); }
.faq-item[open] .pm::before, .faq-item[open] .pm::after { background: var(--white); }
.faq-item[open] .pm::after { transform: translate(-50%, -50%) rotate(0); }
.faq-answer { overflow: hidden; }
.faq-answer > div { padding: 0 48px 24px 0; color: var(--ink-2); line-height: 1.65; }
.faq-answer a { color: var(--connect); border-bottom: 1px solid currentColor; }
.faq-group + .faq-group { margin-top: 48px; }
.faq-group-title { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.faq.center { grid-template-columns: 1fr; max-width: 820px; margin: 0 auto; }
/* FAQ page: category rail + questions. A class (not an inline style) so the tablet/phone rule below can collapse it */
.sticky-split.faq-layout { grid-template-columns: 260px minmax(0, 1fr); }
@media (max-width: 860px) {
  .sticky-split.faq-layout { grid-template-columns: minmax(0, 1fr); }
  .faq-layout nav[aria-label="FAQ categories"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.faq.center .faq-head { position: static; text-align: center; justify-items: center; margin-bottom: 16px; }

/* ---------- CTA ---------- */
.cta { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius-xl); background: var(--panel); padding: clamp(40px, 6vw, 80px); display: grid; gap: 28px; }
.cta::before, .cta::after { content: ""; position: absolute; border-radius: 50%; z-index: -1; pointer-events: none; }
.cta .h1, .cta .h2 { max-width: 16ch; }
.cta-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 12px; }
.cta-card { border-radius: var(--radius-l); padding: clamp(24px, 3vw, 36px); display: grid; gap: 16px; align-content: start; background: var(--surface); border: 1px solid var(--line); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.cta-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-l); }
.cta-card.dark { background: var(--dark); color: var(--white); border-color: transparent; }
.cta-card.dark .body { color: var(--on-dark-70); }
.cta-card .cc-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cta-card .checks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.cta-card.dark .checks li { color: var(--on-dark-82); }
.cta-card.dark .checks li::before { background-color: rgba(181,165,255,.18); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.5L14 7.5' fill='none' stroke='%23b5a5ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.cta-simple { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }

/* ---------- Pricing ---------- */
.billing { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); }
.billing button { height: 36px; padding: 0 16px; border-radius: 999px; font-size: 14px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 8px; transition: background .2s, color .2s; }
.billing button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-s); }
.billing .save { font-family: var(--f-mono); font-size: 12px; padding: 3px 6px; border-radius: 5px; background: var(--mint); color: var(--success-text); }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; gap: 20px; padding: 28px; border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--line); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.plan:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.plan .p-name { display: flex; justify-content: space-between; align-items: center; font-family: var(--f-display); font-weight: 500; font-size: 1.2rem; letter-spacing: -0.015em; }
.plan .p-price { font-family: var(--f-display); font-weight: 500; font-size: 3rem; line-height: 1; letter-spacing: -0.045em; }
.plan .p-price small { font-size: 1rem; letter-spacing: 0; color: var(--muted); font-weight: 400; margin-left: 4px; }
.plan .p-note { color: var(--muted); font-size: 14px; margin-top: -10px; }
.plan .p-desc { color: var(--ink-2); font-size: 15px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.plan .p-inc { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.plan .checks li { font-size: 14.5px; }
.plan .btn { margin-top: auto; }
.plan .p-fine { margin-top: auto; padding-bottom: 12px; font-size: 12.5px; color: var(--muted); }
.plan .p-fine + .btn { margin-top: 0; }
.plan .p-fine a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.plan .p-fine a:hover { color: var(--ink); }
.plan.featured .p-fine { color: var(--on-dark-55); }
.plan.featured .p-fine a:hover { color: var(--white); }
.plan.featured { background: var(--dark); color: var(--white); border-color: transparent; box-shadow: 0 30px 60px -30px rgba(19,7,64,.6); }
.plan.featured .p-note, .plan.featured .p-price small, .plan.featured .p-inc { color: var(--on-dark-55); }
.plan.featured .p-desc { color: var(--on-dark-75); border-color: var(--on-dark-12); }
.plan.featured .checks li { color: var(--on-dark-85); }
.plan.featured .checks li::before { background-color: rgba(181,165,255,.2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.5L14 7.5' fill='none' stroke='%23b5a5ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.plan.featured.cloud .checks li::before { background-color: rgba(109,166,166,.25); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.5L14 7.5' fill='none' stroke='%23bbd8d8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.price-swap [data-billing-show] { display: none; }
.price-swap [data-billing-show].on { display: inline; }
/* Pro offer on /pricing/connect: [data-promo-until] wraps the offer; main.js adds .promo-over after that date */
.promo-off { display: none; }
[data-promo-until].promo-over .promo-on { display: none; }
[data-promo-until].promo-over .promo-off { display: inline; }
.plan .p-was { font-size: .55em; color: var(--muted); text-decoration-thickness: 2px; margin-right: 4px; letter-spacing: -0.02em; }
.plan.featured .p-was { color: var(--on-dark-55); }
.plan .p-promo { display: block; margin: 2px 0 14px; padding: 8px 12px; border-radius: 10px; background: rgba(77,66,192,.10); color: var(--connect); font-size: 13.5px; line-height: 1.4; }
.plan.featured .p-promo { background: rgba(255,255,255,.12); color: var(--white); }

.ptable-wrap { border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); overflow: hidden; }
.ptable-wrap + .ptable-wrap { margin-top: 20px; }
.ptable-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); background: #fbfaf9; }
.ptable-title h3 { font-family: var(--f-display); font-weight: 500; font-size: 1.15rem; letter-spacing: -0.015em; }
.ptable-scroll { overflow-x: auto; }
.ptable { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 720px; }
.ptable th, .ptable td { text-align: left; padding: 14px 22px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ptable tr:last-child td { border-bottom: 0; }
.ptable thead th { font-family: var(--f-mono); font-weight: 400; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--surface); }
.ptable td:first-child { font-weight: 500; color: var(--ink); width: 26%; }
.ptable td { color: var(--ink-2); }
.ptable td.span { color: var(--ink-2); }
.ptable td.custom { color: var(--connect); font-weight: 500; white-space: nowrap; }
.ptable tbody tr { transition: background .15s; }
.ptable tbody tr:hover { background: #fbfaf9; }
.ptable .inc { display: inline-flex; align-items: center; gap: 6px; color: var(--success-text); }
.ptable .inc::before { content: "✓"; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; background: var(--success-bg); font-size: 11px; }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.jump a { height: 34px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13.5px; color: var(--ink-2); background: var(--surface); transition: border-color .2s, color .2s; }
.jump a:hover { border-color: var(--ink); color: var(--ink); }
.ent-box { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); padding: clamp(28px, 4vw, 56px); border-radius: var(--radius-xl); background: var(--dark); color: var(--white); position: relative; overflow: hidden; isolation: isolate; }
.ent-box::before { content: ""; position: absolute; width: 600px; height: 600px; right: -200px; bottom: -300px; border-radius: 50%; background: radial-gradient(closest-side, rgba(142,105,191,.6), transparent); z-index: -1; }
.ent-box.cloud::before { background: radial-gradient(closest-side, rgba(109,166,166,.6), transparent); }
.ent-box .h2, .ent-box .h3 { color: var(--white); }
.ent-box .body { color: var(--on-dark-70); }
.ent-box .checks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
.ent-box .checks li { color: var(--on-dark-82); font-size: 14.5px; }
.ent-box .checks li::before { background-color: rgba(181,165,255,.18); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.5L14 7.5' fill='none' stroke='%23b5a5ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* ---------- Timeline (About) ---------- */
.timeline { border-radius: var(--radius-xl); background: var(--surface); border: 1px solid var(--line); padding: clamp(22px, 3vw, 40px); display: grid; gap: 32px; }
.tl-track { position: relative; display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); }
.tl-track::before { content: ""; position: absolute; left: 7px; right: 7px; top: 7px; height: 2px; background: var(--panel-2); border-radius: 2px; }
.tl-fill { position: absolute; left: 7px; top: 7px; height: 2px; background: var(--connect); border-radius: 2px; transition: width .6s var(--ease); width: 0; }
.tl-node { position: relative; display: grid; gap: 12px; justify-items: start; text-align: left; font-size: 13.5px; color: var(--muted); }
.tl-node .dot { width: 16px; height: 16px; border-radius: 999px; background: var(--surface); border: 2px solid var(--panel-2); transition: border-color .3s, background .3s, transform .3s var(--ease); }
.tl-node.past .dot { border-color: var(--connect); background: var(--connect); }
.tl-node.on .dot { border-color: var(--connect); background: var(--surface); transform: scale(1.25); box-shadow: 0 0 0 5px var(--connect-wash); }
.tl-node.on { color: var(--ink); font-weight: 500; }
.tl-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; transition: opacity .2s; }
.tl-card .tl-per { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--connect); }
.tl-card .tl-stat { text-align: right; }
.tl-card .tl-stat b { display: block; font-family: var(--f-display); font-weight: 500; font-size: clamp(3rem, 6vw, 5rem); letter-spacing: -0.05em; line-height: 1; color: var(--navy); }
.tl-card .tl-stat span { color: var(--muted); font-size: 14px; }
.tl-nav { display: flex; align-items: center; gap: 10px; margin-left: auto; }
[data-theme="dark"] .tl-card .tl-stat b { color: var(--connect); }
.tl-nav .count { font-family: var(--f-mono); font-size: 12px; color: var(--muted); min-width: 48px; text-align: center; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 16px; }
.form .f-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { display: grid; gap: 7px; }
.field label { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.input, .textarea, .select {
  width: 100%; height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface);
  font-size: 15px; transition: border-color .2s, box-shadow .2s;
}
.textarea { height: auto; min-height: 130px; padding: 12px 14px; resize: vertical; }
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--connect); box-shadow: 0 0 0 4px rgba(77,66,192,.12); }
.input::placeholder, .textarea::placeholder { color: var(--muted); }
.field.invalid .input, .field.invalid .textarea { border-color: var(--danger); }
.field .err { font-size: 12.5px; color: var(--danger-text); display: none; }
.field.invalid .err { display: block; }
.checkbox { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-2); }
.checkbox input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--connect); }
.radio-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.radio-pills label { position: relative; }
.radio-pills input { position: absolute; opacity: 0; }
.radio-pills span { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); font-size: 14px; cursor: pointer; transition: border-color .2s, background .2s; }
.radio-pills span img { width: 18px; }
.radio-pills input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
.radio-pills input:focus-visible + span { outline: 2px solid var(--connect); outline-offset: 2px; }
.form-success { display: none; text-align: center; padding: 40px 20px; gap: 12px; justify-items: center; }
.form-success .ok { width: 56px; height: 56px; border-radius: 999px; background: var(--success-bg); color: var(--success-text); display: grid; place-items: center; font-size: 24px; }
.form.sent .form-fields { display: none; }
.form.sent .form-success { display: grid; }

/* ---------- Blog ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filters button { height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 14px; color: var(--ink-2); background: var(--surface); transition: background .2s, color .2s, border-color .2s; }
.filters button:hover { border-color: var(--ink); color: var(--ink); }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.post { display: flex; flex-direction: column; border-radius: var(--radius-l); overflow: hidden; background: var(--surface); border: 1px solid var(--line); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.post:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.post .p-art { aspect-ratio: 16 / 10; display: grid; place-items: center; overflow: hidden; position: relative; }
.post .p-art img { width: 100%; height: 100%; object-fit: cover; }
.post .p-art .p-word { font-family: var(--f-display); font-weight: 600; font-size: 2rem; letter-spacing: -0.04em; color: var(--navy); opacity: .85; }
.post .p-body { padding: 22px; display: grid; gap: 10px; flex: 1; align-content: start; }
.post .p-meta { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); }
.post .p-title { font-family: var(--f-display); font-weight: 500; font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.02em; }
.post .p-ex { color: var(--muted); font-size: 14.5px; }
.post .p-foot { margin-top: auto; padding: 0 22px 22px; }
.post.featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1.1fr 1fr; }
.post.featured .p-art { aspect-ratio: auto; min-height: 320px; }
.post.featured .p-body { padding: clamp(24px, 4vw, 48px); align-content: center; }
.post.featured .p-title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }

/* /insights (blog.html): categories title row above the filters, more room between filters, featured post and grid */
.blog-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.blog-bar-title { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: 1.25rem; letter-spacing: -0.01em; color: var(--ink); }
.posts.blog-posts { margin-top: clamp(32px, 4vw, 48px); gap: clamp(20px, 2.4vw, 28px); }
.post-group { grid-column: 1 / -1; margin-top: clamp(40px, 5vw, 72px); }
.post-group:first-child { margin-top: 0; }
.pg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: clamp(18px, 2vw, 24px); padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.pg-title { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: clamp(1.4rem, 2vw, 1.75rem); letter-spacing: -0.02em; color: var(--ink); }
.pg-count { flex-shrink: 0; font-size: 14px; color: var(--muted); }
.pg-all { flex-shrink: 0; font-size: 14px; }
.blog-bar { scroll-margin-top: 96px; }
.posts.pg-grid { gap: clamp(20px, 2.4vw, 28px); }
@media (max-width: 860px) { .blog-bar { flex-direction: column; align-items: flex-start; } }
.empty { padding: 56px 24px; border-radius: var(--radius-l); border: 1px dashed var(--line-2); text-align: center; color: var(--muted); display: grid; gap: 8px; justify-items: center; }

/* ---------- Contact ---------- */
.help-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.help-card { display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--line); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.help-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.help-card .hc-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; }
.help-card .hc-actions { margin-top: auto; padding-top: 10px; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.help-card .hc-sub { font-size: 14px; color: var(--muted); border-bottom: 1px solid var(--line-2); transition: color .2s, border-color .2s; }
.help-card .hc-sub:hover { color: var(--ink); border-color: var(--ink); }
/* contact: the four help routes sit in the hero, compact and side by side */
.help-grid.quick { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.help-banner { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; margin-bottom: 14px; padding: clamp(20px, 2.4vw, 30px); border-radius: var(--radius-l); border: 1px solid var(--line); background: linear-gradient(100deg, color-mix(in srgb, var(--connect) 9%, var(--surface)), var(--surface) 70%); }
.help-banner .hb-copy { display: flex; align-items: flex-start; gap: 16px; max-width: 640px; }
.help-banner .hc-ico { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; }
.help-banner .hc-title { font-size: 1.35rem; margin: 0 0 6px; }
.help-banner .body { font-size: 15px; }
.help-banner .hb-actions { display: flex; flex-wrap: wrap; gap: 10px; flex: none; }
.help-grid.quick .help-card { gap: 12px; padding: clamp(20px, 2vw, 26px); }
.help-grid.quick .hc-top { display: flex; align-items: center; gap: 12px; }
.help-grid.quick .hc-ico { width: 40px; height: 40px; flex: none; }
.help-grid.quick .hc-title { font-size: 1.2rem; margin: 0; }
.help-grid.quick .body { font-size: 15px; }
.help-grid.quick .hc-actions { flex-direction: column; align-items: stretch; gap: 8px; padding-top: 4px; }
.btn[data-ticket] { height: auto; min-height: 36px; padding-top: 8px; padding-bottom: 8px; white-space: normal; text-align: center; line-height: 1.3; }
@media (max-width: 860px) { .help-grid.quick { grid-template-columns: 1fr; } .help-banner { flex-direction: column; align-items: stretch; } .help-banner .hb-copy { flex-direction: column; gap: 12px; } .help-banner .hb-actions .btn { flex: 1 1 auto; } }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: clamp(56px, 7vw, 88px) 0 32px; margin-top: clamp(40px, 6vw, 80px); background: var(--bg); }
.footer-top { display: grid; grid-template-columns: 1.3fr repeat(5, minmax(0, 1fr)); gap: 32px; }
.footer-brand { display: grid; gap: 18px; align-content: start; }
.footer-brand img.logo { height: 24px; width: auto; }
.footer-brand p { color: var(--muted); font-size: 14px; max-width: 26ch; }
.footer-col .footer-h { font-size: 13.5px; font-weight: 500; color: var(--ink); margin-bottom: 14px; }
.footer-col ul { display: grid; gap: 9px; }
.footer-col a { font-size: 13.5px; color: var(--muted); transition: color .2s; }
.footer-col a:hover { color: var(--ink); }
.footer-col .sub-h { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.footer-bottom .fb-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-bottom a:hover, .footer-bottom button:hover { color: var(--ink); }
.socials { display: flex; gap: 8px; }
.socials a { width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--ink-2); transition: color .2s, border-color .2s, transform .2s var(--ease); }
.socials a:hover { color: var(--ink); border-color: var(--ink); transform: translateY(-1px); }

/* ---------- Utility pages ---------- */
.util { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 80px 0; }
.util .code-big { font-family: var(--f-display); font-weight: 600; font-size: clamp(6rem, 18vw, 14rem); line-height: .9; letter-spacing: -0.06em; background: linear-gradient(140deg, var(--connect-pale), var(--connect) 45%, var(--cloud) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Pain points ---------- */
.pains { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pain { padding: 26px; border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--line); display: grid; gap: 10px; align-content: start; }
.pain .p-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--danger-bg); color: var(--danger); margin-bottom: 8px; }
.pain h3 { font-family: var(--f-display); font-weight: 500; font-size: 1.25rem; letter-spacing: -0.02em; }
.pain p { color: var(--muted); font-size: 15px; }
.solution-banner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 22px 26px; border-radius: var(--radius-l); border: 1px solid var(--line); background: var(--surface); }
.solution-banner.connect { background: linear-gradient(90deg, var(--connect-wash), var(--white) 70%); }
.solution-banner.cloud { background: linear-gradient(90deg, var(--cloud-wash), var(--white) 70%); }
.solution-banner .sb-l { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.solution-banner .sb-text { color: var(--ink-2); }

/* ---------- Pillars (numbered) ---------- */
.pillars { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); border-top: 1px solid var(--line); }
.pillar { padding: 28px 28px 0 0; display: grid; gap: 10px; align-content: start; }
.pillar + .pillar { padding-left: 28px; border-left: 1px solid var(--line); }
.pillar .pl-n { font-family: var(--f-mono); font-size: 12px; color: var(--connect); letter-spacing: .06em; margin-bottom: 10px; }
.pillar.cloud .pl-n { color: var(--cloud); }
.pillar :is(h2, h3) { font-family: var(--f-display); font-weight: 500; font-size: 1.25rem; letter-spacing: -0.02em; line-height: 1.25; }
.pillar p { color: var(--muted); font-size: 15px; }

/* Timeline steps (horizontal week) */
.week { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-radius: var(--radius-l); overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.week > div { padding: 28px 24px; display: grid; gap: 30px; position: relative; }
.week > div + div { border-left: 1px solid var(--line); }
.week .w-n { font-family: var(--f-mono); font-size: 12px; color: var(--muted); }
.week strong { font-family: var(--f-display); font-weight: 500; font-size: 1.2rem; letter-spacing: -0.02em; }
.week .w-bar { height: 4px; border-radius: 4px; background: var(--panel); overflow: hidden; }
.week .w-bar i { display: block; height: 100%; background: var(--connect); border-radius: inherit; }

/* Carousel (images) */
.slider { position: relative; }
.slider-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 42%); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.slider-track::-webkit-scrollbar { display: none; }
.slider-track > * { scroll-snap-align: start; }
.slider-nav { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

/* Destinations */
.dest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dest figure { position: relative; border-radius: var(--radius-l); overflow: hidden; aspect-ratio: 4 / 3; margin: 0; }
.dest img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.dest figure:hover img { transform: scale(1.05); }
.dest figcaption { position: absolute; inset: auto 0 0 0; padding: 56px 14px 14px; color: var(--white); line-height: 1.3; background: linear-gradient(180deg, transparent, rgba(0,0,0,.45) 45%, rgba(0,0,0,.72)); }
.dest figcaption b { display: block; font-family: var(--f-display); font-weight: 500; font-size: 1.125rem; line-height: 1.2; }
.dest figcaption span { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.35; opacity: .9; }

/* Airline columns */
.airlines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

/* Video phones */
.phones { display: flex; justify-content: center; gap: 20px; align-items: flex-end; }
.phone { width: min(240px, 42vw); aspect-ratio: 9 / 19.5; border-radius: 34px; padding: 8px; background: #111; box-shadow: 0 40px 80px -30px rgba(19,7,64,.55); }
.phone video { width: 100%; height: 100%; object-fit: cover; border-radius: 27px; background: #222; }
.phone.offset { transform: translateY(-28px); }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }
.no-js .reveal { opacity: 1; transform: none; }
/* Loyalty & fintech hero: four phone layers (pages/solutions.py phone_stack). The front screen rises in first, then each earlier
   screen slides out from behind it; a layer's hidden part always sits under a phone that is already showing. */
.ps-stack { position: relative; aspect-ratio: 1920 / 1775; }
.ps-stack img { position: absolute; inset: 0; width: 100%; height: 100%; }
.reveal .ps-layer { opacity: 0; transform: translate(7%, 4%); transition: opacity .6s var(--ease), transform .9s var(--ease); }
.reveal .ps-4 { transform: translateY(5%); transition-delay: .2s; }
.reveal .ps-3 { transition-delay: .6s; } .reveal .ps-2 { transition-delay: 1s; } .reveal .ps-1 { transition-delay: 1.4s; }
.reveal.in .ps-layer, .no-js .ps-layer { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal .ps-layer { opacity: 1; transform: none; transition: none; } }
/* hero copy animates with CSS alone, so the H1 never waits on main.js (and still shows if JS fails) */
@keyframes hero-rise { from { opacity: 0; transform: translateY(18px); } }
.hero .reveal, .hero .reveal.in { opacity: 1; transform: none; transition: none; animation: hero-rise .8s var(--ease) both; }
.hero .reveal.d1 { animation-delay: .08s; } .hero .reveal.d2 { animation-delay: .16s; } .hero .reveal.d3 { animation-delay: .24s; } .hero .reveal.d4 { animation-delay: .32s; }
/* headline and intro paint straight away: they are the largest content on first load */
.hero :is(.h1, .h-display, .lead).reveal { animation: none; }
.announce-closed .announce { display: none; } /* set in <head> before first paint, so a dismissed bar never flashes on reload */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .marquee-track { animation: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
  .ntabs { grid-template-columns: 1fr; }
  .ntabs-list { position: static; display: flex; overflow-x: auto; scrollbar-width: none; gap: 6px; padding-bottom: 4px; }
  .ntabs-list::-webkit-scrollbar { display: none; }
  .ntab { width: auto; flex-shrink: 0; white-space: nowrap; }

  .bento { grid-template-columns: 1fr 1fr; }
  .bento .b-hero { grid-column: 1 / -1; grid-row: auto; }
  .flow3 { grid-template-columns: 1fr; }
  .flow-col + .flow-col { margin-left: 0; margin-top: 12px; }
  .flow-col.core { margin: 12px 0 0; }
  .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-head.split { grid-template-columns: 1fr; }
  .section-head.split .lead { justify-self: start; }
}
/* phones: the 01/02/03 tabs become three equal columns that wrap, instead of a sideways strip that clips the third tab */
@media (max-width: 600px) {
  .ntabs-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
  .ntab { flex-direction: column; gap: 2px; white-space: normal; padding: 10px; font-size: 13.5px; line-height: 1.25; }
}
@media (max-width: 860px) {
  .hero-split, .split-2, .feature, .sticky-split, .faq, .story, .ent-box, .np-card, .quote, .post.featured { grid-template-columns: 1fr; }
  .feature.reverse > .feature-copy { order: 0; }
  .sticky-split .sticky-col, .faq .faq-head { position: static; }
  .duo, .cta-cards, .g-2, .help-grid, .vs { grid-template-columns: 1fr; }
  .g-3, .g-4, .pains, .kpis, .plans, .compare, .airlines, .call-steps, .flow-api { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps-line { display: none; }
  .stats, .pillars { grid-template-columns: 1fr; }
  .stat + .stat, .pillar + .pillar { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .band-dark .stat + .stat { border-color: var(--on-dark-12); }
  .pillar { padding: 24px 0; }
  .cap { grid-template-columns: 1fr; }
  .week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .week > div:nth-child(3) { border-left: 0; }
  .week > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .dest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .np-card .np-copy { padding: 8px; }
  .quote .q-brand { text-align: left; }
  .tl-card { grid-template-columns: 1fr; }
  .tl-card .tl-stat { text-align: left; }
  .tl-node span { font-size: 11.5px; }
  .ent-box .checks, .cta-card .checks, .checks.grid2 { grid-template-columns: 1fr; }
  .post.featured .p-art { min-height: 220px; }
}
@media (max-width: 600px) {
  body { font-size: 15.5px; }
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .posts, .steps, .bento, .form .f-row { grid-template-columns: 1fr; }
  .announce .container { justify-content: flex-start; gap: 10px; font-size: 12.5px; min-height: 52px; padding-top: 6px; padding-bottom: 6px; }
  .announce .a-badge { display: none; }
  /* the badge doesn't fit, so "Skift" in the message takes its yellow-on-black style */
  .announce .a-text { text-align: left; line-height: 1.35; }
  .announce .a-src { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0; text-transform: uppercase; padding: 1px 4px; border-radius: 4px; background: #1a1a1a; color: #f6f261; margin-right: 1px; }
  .announce .a-colon { display: none; }
  .announce .a-link { flex-shrink: 0; height: 30px; }
  .announce .a-link .ico { display: none; } /* label only on phones, so the message keeps to two lines */
  .btn.lg { height: 48px; padding: 0 20px; }
  .hero .row .btn { flex: 1 1 auto; }
  .week { grid-template-columns: 1fr; }
  .week > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .tl-track { grid-template-columns: repeat(var(--n, 6), minmax(44px, 1fr)); }
  .header-actions .btn.sm { padding: 0 12px; }
  .phone.offset { transform: none; }
  .mock-stage { padding: 18px; min-height: 0; }
}

/* Dark screens for illustrations authored on dark backgrounds */
.media .screen.dark { background: #161316; padding: clamp(10px, 1.6vw, 18px); border: 1px solid var(--on-dark-06); }
.media .screen.dark img, .media .screen.dark > svg { border-radius: 10px; }
.ct-art.dark-art { background: #161316; padding: 12px; }
.cap-tile.dark .ct-art { background: transparent; }
.cap-tile .ct-art { display: grid; place-items: center; }
.cap-tile .ct-art img { width: auto; max-width: 100%; max-height: 400px; object-fit: contain; }
.cap-tile.dark .ct-art img { max-height: 300px; }
.cap { align-items: stretch; }
.section-head.mb0 { margin-bottom: 0; }
.cta-card.dark .eyebrow.connect, .story-side .eyebrow.connect { color: var(--connect-pale); }
.browser video { background: var(--ink-fixed-2); aspect-ratio: 16 / 9; object-fit: cover; }
/* Keep decorative glows from widening the mobile layout viewport */
html { overflow-x: clip; }
.hero { overflow-x: clip; }
.ptabs-scroll .ptabs-bar { flex-wrap: nowrap; }
@media (max-width: 860px) { .ptabs-scroll { margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 2px; } }

.mega-backdrop { top: var(--header-bottom, var(--header-h)); }
@media (max-width: 1080px) { .drawer { top: var(--header-bottom, var(--header-h)); } }

/* Breathing room between content and the blueprint guide lines:
   the lines sit outside the content column so every section stays aligned */
:root {
  --rail-inset: clamp(8px, 3.5vw, 48px);
  --rail-x: max(6px, calc(max(var(--gutter), calc((100% - var(--container)) / 2)) - var(--rail-inset)));
}
.rails::before { left: var(--rail-x); }
.rails::after { right: var(--rail-x); }
.hr .tick.l { left: calc(var(--rail-x) - 3.5px); }
.hr .tick.r { right: calc(var(--rail-x) - 3.5px); }
.rails .hero-inner { padding-top: clamp(64px, 8vw, 112px); padding-bottom: clamp(56px, 7vw, 96px); }
.rails .hero-split { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); }
.rails .hero-stage { padding-top: clamp(40px, 5vw, 72px) !important; padding-bottom: clamp(40px, 5vw, 72px); }
.util.rails .container { padding-top: 24px; padding-bottom: 24px; }

/* Connect / Cloud segmented toggle (home) */
.seg-wrap { padding-top: clamp(40px, 5vw, 64px); }
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.seg-btn { height: 40px; padding: 0 24px; border-radius: 9px; font-size: 15px; color: var(--muted); transition: background .2s, color .2s, box-shadow .2s; }
.seg-btn:hover { color: var(--ink); }
.seg-btn[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-s); }
.section.after-seg { padding-top: clamp(32px, 4vw, 48px); }
.hero .logos { padding: clamp(32px, 4vw, 48px) 0; }

/* ---------- Careers ---------- */
/* hero: three photos as polaroids (white frame, deeper bottom edge, slight tilt), no backdrop behind them */
.polaroids { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; padding: 8px 6px 18px; }
.pol { background: var(--white); padding: 10px 10px 30px; border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 18px 40px -16px rgba(0,0,0,.45);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.pol img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 1px; }
.pol-main { grid-column: 1 / -1; transform: rotate(-1.6deg); padding-bottom: 40px; position: relative; z-index: 1; }
.pol-main img { aspect-ratio: 3 / 2; }
.pol-a { transform: rotate(2.2deg) translateY(-14px); margin-left: 4%; }
.pol-b { transform: rotate(-2.4deg) translateY(-6px); margin-right: 4%; }
.pol:hover { transform: rotate(0) translateY(-4px) scale(1.02); z-index: 2; position: relative; box-shadow: 0 2px 4px rgba(0,0,0,.18), 0 28px 60px -18px rgba(0,0,0,.5); }
.jobs { margin-top: 40px; display: grid; gap: 20px; }
.job-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.job-filters .seg-btn { height: 36px; padding: 0 14px; border: 1px solid var(--line); font-size: 14px; }
.job-filters .seg-btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.job-filters .n { font-variant-numeric: tabular-nums; opacity: .6; margin-left: 4px; }
.job-list { border-top: 1px solid var(--line); }
.job { display: grid; grid-template-columns: minmax(0, 1fr) auto 32px; gap: 24px; align-items: center; padding: 18px 4px; border-bottom: 1px solid var(--line); color: var(--ink); transition: background .2s, padding .25s var(--ease); }
.job:hover, .job:focus-visible { background: var(--surface); padding-left: 14px; padding-right: 14px; }
.job[hidden] { display: none; }
.job-t { font-family: var(--f-display); font-weight: 500; font-size: 1.12rem; letter-spacing: -.01em; }
.job-m { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.job-m span { height: 26px; padding: 0 10px; border-radius: 999px; background: var(--panel); color: var(--ink-2); font-size: 13px; display: inline-flex; align-items: center; white-space: nowrap; }
.job-go { width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; border: 1px solid var(--line-2); color: var(--muted); transition: background .2s, color .2s, border-color .2s; }
.job:hover .job-go { background: var(--connect); border-color: var(--connect); color: var(--white); }
.voice { display: grid; gap: 24px; align-content: space-between; padding: 28px; border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--line); }
.voice blockquote { font-family: var(--f-display); font-weight: 450; font-size: 1.2rem; line-height: 1.4; letter-spacing: -.015em; color: var(--ink); text-wrap: pretty; }
.voice blockquote::before { content: "“"; display: block; font-size: 3rem; line-height: .7; color: var(--connect-pale); margin-bottom: 8px; }
.voice figcaption { display: flex; align-items: center; gap: 12px; }
.voice figcaption img { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; }
.voice-in { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); }
.voice-in:hover { color: var(--connect); }
.offices .card-art img { aspect-ratio: 4 / 3; }
@media (max-width: 900px) { .polaroids { max-width: 560px; } .pol { padding: 8px 8px 24px; } .pol-main { padding-bottom: 30px; } }
@media (max-width: 600px) {
  .job { grid-template-columns: minmax(0, 1fr) 32px; gap: 8px 12px; }
  .job-m { grid-row: 2; justify-content: flex-start; }
  .job-go { grid-row: 1 / 3; grid-column: 2; }
}

/* ---------- Trip cart animation (home · Connect card) ----------
   12s loop. Static styles = finished state (used when motion is reduced). */
.tc { --tc-t: 12s; background: #f6f1ea; border-radius: 12px; padding: 14px; display: grid; gap: 10px; font-size: 13px; color: var(--ink); overflow: hidden; }
.tc-code { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--ink-fixed-2); color: var(--code-ink); border-radius: 10px; padding: 9px 12px; font-family: var(--f-mono); font-size: 11.5px; white-space: nowrap; overflow: hidden; }
.tc-type { overflow: hidden; display: inline-block; min-width: 0; }
.tc-code .k { color: var(--code-key); } .tc-code .f { color: var(--code-num); } .tc-code .s { color: var(--code-green); }
.tc-200 { flex-shrink: 0; font-size: 10px; color: var(--code-green); border: 1px solid rgba(155,231,162,.3); border-radius: 6px; padding: 2px 6px; }
.tc-rows { display: grid; gap: 6px; }
.tc-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--connect-wash); border: 1px solid #ebe6dd; }
.tc-ico { width: 30px; height: 30px; border-radius: 8px; background: var(--white); display: grid; place-items: center; }
.tc .tc-ico img { width: 16px; height: 16px; object-fit: contain; }
.tc-info { min-width: 0; display: grid; line-height: 1.25; }
.tc-info b { font-weight: 500; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-info small { color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-kind { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--connect); }
.tc-price { font-weight: 600; font-variant-numeric: tabular-nums; }
.tc-btn { position: relative; display: grid; min-width: 66px; height: 26px; font-size: 11.5px; font-weight: 500; }
.tc-btn > span { grid-area: 1 / 1; display: grid; place-items: center; border-radius: 7px; padding: 0 8px; }
.tc-add { background: var(--ink); color: var(--on-ink); opacity: 0; }
.tc-ok { background: var(--success-bg); color: var(--success-text); }
.tc-cart { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 10px 10px 12px; border-radius: 12px; background: var(--white); border: 1px solid #ebe6dd; }
.tc-bag { position: relative; width: 36px; height: 36px; border-radius: 10px; background: var(--connect-wash); color: var(--connect); display: grid; place-items: center; }
.tc-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; border-radius: 99px; background: var(--connect); color: var(--white); font-size: 10.5px; font-weight: 600; display: grid; }
.tc-sum { display: grid; line-height: 1.2; }
.tc-sum small { color: var(--muted); font-size: 11.5px; }
.tc-sum b { display: grid; font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; letter-spacing: -.02em; }
.tc-w { grid-area: 1 / 1; place-self: center start; opacity: 0; }
.tc-badge .tc-w { place-self: center; }
.tc-w3 { opacity: 1; }
.tc-checkout { position: relative; display: grid; height: 36px; border-radius: 10px; background: var(--connect); color: var(--white); font-weight: 500; font-size: 13px; overflow: hidden; }
.tc-checkout > span { grid-area: 1 / 1; display: grid; place-items: center; padding: 0 14px; white-space: nowrap; }
.tc-co1 { opacity: 0; }
.tc-checkout::after { content: ""; position: absolute; inset: 0; width: 40%; transform: translateX(-120%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); }

@media (prefers-reduced-motion: no-preference) {
  .tc-type { animation: tc-type var(--tc-t) steps(46, end) infinite; }
  .tc-200 { animation: tc-pop var(--tc-t) infinite; }
  .tc-row1 { animation: tc-row1 var(--tc-t) infinite; }
  .tc-row2 { animation: tc-row2 var(--tc-t) infinite; }
  .tc-row3 { animation: tc-row3 var(--tc-t) infinite; }
  .tc-row1 .tc-add { animation: tc-until30 var(--tc-t) infinite; } .tc-row1 .tc-ok { animation: tc-from30 var(--tc-t) infinite; }
  .tc-row2 .tc-add { animation: tc-until42 var(--tc-t) infinite; } .tc-row2 .tc-ok { animation: tc-from42 var(--tc-t) infinite; }
  .tc-row3 .tc-add { animation: tc-until54 var(--tc-t) infinite; } .tc-row3 .tc-ok { animation: tc-from54 var(--tc-t) infinite; }
  .tc-w0 { animation: tc-win0 var(--tc-t) infinite; } .tc-w1 { animation: tc-win1 var(--tc-t) infinite; }
  .tc-w2 { animation: tc-win2 var(--tc-t) infinite; } .tc-w3 { animation: tc-win3 var(--tc-t) infinite; }
  .tc-bag { animation: tc-bump var(--tc-t) infinite; }
  .tc-co1 { animation: tc-co1 var(--tc-t) infinite; } .tc-co2 { animation: tc-co2 var(--tc-t) infinite; }
  .tc-checkout { animation: tc-ready var(--tc-t) infinite; }
  .tc-checkout::after { animation: tc-shine var(--tc-t) infinite; }
}
@keyframes tc-type { 0% { max-width: 0; } 14% { max-width: 100%; } 100% { max-width: 100%; } }
@keyframes tc-pop { 0%, 14% { opacity: 0; transform: scale(.9); } 16%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes tc-row1 { 0%, 16% { opacity: 0; transform: translateY(8px); background: var(--white); } 19% { opacity: 1; transform: none; background: var(--white); } 29% { background: var(--white); } 31%, 96% { opacity: 1; background: var(--connect-wash); } 100% { opacity: 0; background: var(--white); } }
@keyframes tc-row2 { 0%, 19% { opacity: 0; transform: translateY(8px); background: var(--white); } 22% { opacity: 1; transform: none; background: var(--white); } 41% { background: var(--white); } 43%, 96% { opacity: 1; background: var(--connect-wash); } 100% { opacity: 0; background: var(--white); } }
@keyframes tc-row3 { 0%, 22% { opacity: 0; transform: translateY(8px); background: var(--white); } 25% { opacity: 1; transform: none; background: var(--white); } 53% { background: var(--white); } 55%, 96% { opacity: 1; background: var(--connect-wash); } 100% { opacity: 0; background: var(--white); } }
@keyframes tc-until30 { 0%, 29% { opacity: 1; } 30%, 100% { opacity: 0; } }
@keyframes tc-until42 { 0%, 41% { opacity: 1; } 42%, 100% { opacity: 0; } }
@keyframes tc-until54 { 0%, 53% { opacity: 1; } 54%, 100% { opacity: 0; } }
@keyframes tc-from30 { 0%, 29% { opacity: 0; transform: scale(.9); } 31%, 100% { opacity: 1; transform: none; } }
@keyframes tc-from42 { 0%, 41% { opacity: 0; transform: scale(.9); } 43%, 100% { opacity: 1; transform: none; } }
@keyframes tc-from54 { 0%, 53% { opacity: 0; transform: scale(.9); } 55%, 100% { opacity: 1; transform: none; } }
@keyframes tc-win0 { 0%, 29.9% { opacity: 1; } 30%, 99.9% { opacity: 0; } 100% { opacity: 1; } }
@keyframes tc-win1 { 0%, 29.9% { opacity: 0; } 30%, 41.9% { opacity: 1; } 42%, 100% { opacity: 0; } }
@keyframes tc-win2 { 0%, 41.9% { opacity: 0; } 42%, 53.9% { opacity: 1; } 54%, 100% { opacity: 0; } }
@keyframes tc-win3 { 0%, 53.9% { opacity: 0; } 54%, 99.9% { opacity: 1; } 100% { opacity: 0; } }
@keyframes tc-bump { 0%, 29%, 32%, 41%, 44%, 53%, 56%, 100% { transform: none; } 30.5%, 42.5%, 54.5% { transform: scale(1.15) rotate(-6deg); } }
@keyframes tc-co1 { 0%, 71.9% { opacity: 1; } 72%, 99.9% { opacity: 0; } 100% { opacity: 1; } }
@keyframes tc-co2 { 0%, 71.9% { opacity: 0; transform: translateY(6px); } 73%, 99% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes tc-ready { 0%, 58% { background: #b9b2e8; } 60%, 71% { background: var(--connect); } 72%, 99% { background: #2f8a3b; } 100% { background: #b9b2e8; } }
@keyframes tc-shine { 0%, 62% { transform: translateX(-120%); } 70% { transform: translateX(260%); } 100% { transform: translateX(260%); } }
@media (max-width: 600px) {
  .tc-info small { display: none; }
  .tc-row { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .tc-price { display: none; }
  /* code line: wrap instead of clipping (typing animation off), status badge on its own line */
  .tc-code { flex-direction: column; align-items: flex-start; white-space: normal; gap: 8px; font-size: 11px; line-height: 1.5; }
  .tc-type { animation: none !important; max-width: none; overflow: visible; }
  /* item names: wrap to two lines rather than truncate */
  .tc-info b { white-space: normal; overflow: visible; text-overflow: clip; font-size: 13px; line-height: 1.3; }
  /* cart: label + total on one row, checkout full width below */
  .tc-cart { grid-template-columns: auto minmax(0, 1fr); row-gap: 10px; }
  .tc-sum small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tc-checkout { grid-column: 1 / -1; }
}

/* Mega menu as a floating panel (not full width) */
.mega {
  left: 16px; right: auto; top: calc(100% + 8px);
  width: min(var(--mega-w, 720px), calc(100vw - 32px));
  background: transparent; border: 0; box-shadow: none;
}
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* hover bridge */
.mega-panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 1px 2px rgba(35,31,35,.04), 0 24px 60px -18px var(--ink-a28);
  padding: 24px; overflow: hidden;
}
.mega-inner { grid-template-columns: minmax(0, 1fr) 240px; gap: 24px; padding: 0; }
.mega-inner.no-feature { grid-template-columns: 1fr; }
.mega-cols { gap: 16px; }
.mega-feature { min-height: 0; }
.mega-sub { grid-template-columns: repeat(3, auto); justify-content: start; padding-left: 46px; }
.mega-backdrop { background: rgba(35,31,35,.06); }

/* Menu panel attaches to the overlay edge (header bottom) and fades in place */
.mega { top: calc(100% + 10px); transform: translateY(4px); transition: opacity .18s ease, transform .25s var(--ease), visibility .18s; }
.nav-item.open .mega { transform: none; }
.mega::before { top: -14px; height: 14px; }
.mega-backdrop { transition: opacity .18s ease, visibility .18s; background: rgba(35,31,35,.08); }
.mega-sub { display: flex; flex-wrap: wrap; gap: 2px 4px; }
.mega-sub a { white-space: nowrap; }
/* body must clip (not hide) overflow, otherwise it becomes a scroll container and breaks the sticky header */
body { overflow-x: clip; }

/* Centered title above the Connect / Cloud cards */

/* ---------- Scale bento (home) ---------- */
.sx { display: grid; grid-template-columns: 1.25fr 1fr 1fr; grid-template-rows: repeat(2, minmax(230px, auto)); gap: 16px; }
.sx-tile { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 4px; padding: 24px; border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--line); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.sx-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.sx-num { font-family: var(--f-display); font-weight: 500; font-size: clamp(2.4rem, 3.6vw, 3.2rem); line-height: 1; letter-spacing: -0.045em; color: var(--ink); margin-top: auto; padding-top: 20px; }
.sx-lbl { font-weight: 500; color: var(--ink); margin-top: 8px; }
.sx-desc { color: var(--muted); font-size: 14px; line-height: 1.5; }
.sx-hero { grid-row: span 2; padding: clamp(26px, 3vw, 40px); border: 0; color: var(--white);
  background-color: var(--connect);
  background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.4px), radial-gradient(120% 90% at 100% 100%, rgba(181,165,255,.45), transparent 60%), linear-gradient(160deg, #5b4fd0, #4d42c0 55%, #3d3398);
  background-size: 18px 18px, auto, auto; }
.sx-hero .sx-label { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-72); }
.sx-hero .sx-num { color: var(--white); font-size: clamp(4rem, 9vw, 7.5rem); margin-top: 18px; padding-top: 0; }
.sx-hero .sx-desc { color: var(--on-dark-82); font-size: 16px; max-width: 24ch; margin-top: 14px; }
.sx-rings { position: absolute; right: -70px; bottom: -70px; width: 340px; height: 340px; pointer-events: none; }
.sx-rings i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); }
.sx-rings i:nth-child(2) { inset: 60px; } .sx-rings i:nth-child(3) { inset: 120px; }
.sx-rings b { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: var(--white); animation: sxPulse 2.4s ease-out infinite; }
@keyframes sxPulse { 0% { box-shadow: 0 0 0 0 var(--on-dark-50); } 80%, 100% { box-shadow: 0 0 0 26px rgba(255,255,255,0); } }
.sx-arc { width: 100%; height: auto; }
.sx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sx-chips span { height: 26px; padding: 0 11px; border-radius: 99px; background: #fbeee3; color: #9a4f2c; font-size: 12.5px; display: inline-flex; align-items: center; }
.sx-chips span:nth-child(2) { background: var(--sand); color: #7d621c; }
.sx-chips span:nth-child(3) { background: var(--connect-wash); color: var(--connect); }
.sx-chips span:nth-child(4) { background: var(--cloud-wash); color: var(--cloud); }
.sx-dark { background: var(--dark); border-color: transparent; }
.sx-dark .sx-num, .sx-dark .sx-lbl { color: var(--white); }
.sx-dark .sx-desc { color: var(--on-dark-60); }
.sx-npm { align-self: flex-start; font-family: var(--f-mono); font-size: 12.5px; color: var(--code-ink); background: var(--on-dark-07); border: 1px solid var(--on-dark-10); border-radius: 8px; padding: 7px 10px; display: inline-flex; align-items: center; gap: 6px; }
.sx-npm .c { color: var(--code-green); }
.sx-npm i { width: 7px; height: 14px; background: var(--connect-pale); animation: sxBlink 1.1s steps(1) infinite; }
@keyframes sxBlink { 50% { opacity: 0; } }
.sx-world { width: 100%; max-width: 230px; height: auto; }
.sx-world .pulse { animation: sxDot 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.sx-world .pulse:nth-of-type(2n) { animation-delay: 1.3s; }
@keyframes sxDot { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.5); fill: #4d42c0; } }
@media (max-width: 1080px) { .sx { grid-template-columns: 1fr 1fr; } .sx-hero { grid-column: 1 / -1; grid-row: auto; min-height: 320px; } }
/* phones: a compact 2-up grid (number + label) instead of five full-width cards; the hero tile keeps its line of copy */
@media (max-width: 600px) {
  .sx { grid-template-columns: 1fr 1fr; grid-template-rows: none; gap: 10px; }
  .sx-hero { min-height: 0; padding: 24px; }
  .sx-hero .sx-num { font-size: 3.6rem; margin-top: 12px; }
  .sx-hero .sx-desc { font-size: 15px; margin-top: 10px; }
  .sx-rings { width: 220px; height: 220px; right: -60px; bottom: -60px; }
  .sx-rings i:nth-child(2) { inset: 40px; } .sx-rings i:nth-child(3) { inset: 80px; }
  .sx-tile:not(.sx-hero) { padding: 16px; gap: 2px; }
  .sx-tile:not(.sx-hero) :is(.sx-arc, .sx-chips, .sx-npm, .sx-world, .sx-hotels, .sx-net, .sx-desc) { display: none; }
  .sx-tile:not(.sx-hero) .sx-num { font-size: 2rem; margin-top: 0; padding-top: 0; }
  .sx-tile:not(.sx-hero) .sx-lbl { font-size: 14px; line-height: 1.3; margin-top: 6px; color: var(--muted); }
  .sx-tile.sx-dark .sx-lbl { color: var(--on-dark-72); }
}
@media (prefers-reduced-motion: reduce) { .sx-plane { display: none; } }

/* ---------- Dark CTA band with Connect + Cloud marks ---------- */
.cta-dark { background: var(--dark); color: var(--white); }
.cta-dark::before, .cta-dark::after { display: none; }
.cta-dark .h1 { color: var(--white); }
.cta-dark .lead { color: var(--on-dark-70); }
.cta-dark .cta-simple { position: relative; z-index: 1; }
.cta.cta-dark { padding: clamp(28px, 3.6vw, 44px) clamp(24px, 4vw, 52px); }
.cta-dark .cta-simple { align-items: center; }
.cta-dark .cta-simple .h1 { font-size: clamp(1.75rem, 3vw, 2.5rem); max-width: 22ch; }
.cta-dark .cta-simple .lead { font-size: 1rem; }
.cta-marks { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.cm-glow { position: absolute; width: 50%; height: 140%; border-radius: 50%; filter: blur(60px); opacity: .55; }
.cm-glow.p { right: 20%; top: -60%; background: radial-gradient(closest-side, rgba(110,86,207,.85), transparent); }
.cm-glow.t { right: -10%; bottom: -70%; background: radial-gradient(closest-side, rgba(47,122,120,.85), transparent); }
/* fade the marks out behind the copy */
.cta-marks::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ink-fixed) 0%, var(--ink-fixed) 35%, rgba(35,31,35,.3) 60%, rgba(35,31,35,0) 80%); }
@media (max-width: 860px) {
  .cta-marks::after { background: linear-gradient(180deg, rgba(35,31,35,.4), var(--ink-fixed) 70%); }
}
@media (max-width: 860px) {
  .cta-marks::after { background: linear-gradient(200deg, var(--ink-a05) 10%, rgba(35,31,35,.75) 55%, var(--ink-fixed) 85%); }
}

.btn.black { --b-bg: var(--ink); --b-fg: var(--white); --b-bd: rgba(255,255,255,.2); } /* same off-black as every primary CTA — never pure #000 */
.btn.black:hover { --b-bg: var(--dark-lift); --b-bd: rgba(255,255,255,.45); box-shadow: none; }

/* Mega menu: product titles match other items; sub-options stacked under the title text */
.mega-link.lg strong { font-family: var(--f-body); font-size: 17px; font-weight: 500; letter-spacing: 0; }
.mega-sub { display: grid; grid-template-columns: 1fr; gap: 2px; padding-left: 48px; margin-top: 2px; justify-content: stretch; }
.mega-sub a { padding: 7px 10px; font-size: 14px; }

.cta-dark .eyebrow.connect, .ent-box .eyebrow.connect, .card.dark .eyebrow.connect, .help-dark .eyebrow.connect { color: var(--connect-pale); }
.cta-dark .eyebrow.cloud, .ent-box .eyebrow.cloud, .card.dark .eyebrow.cloud, .help-dark .eyebrow.cloud { color: var(--cloud-on-dark); }
.cta-dark .h2, .cta-dark .h3 { color: var(--white); }

/* Connect + Cloud marks: larger, translucent (screen-blended) — same geometry, they still meet */
.cm-glow { opacity: .4; }
.cta-marks::after { background: linear-gradient(90deg, var(--ink-fixed) 0%, var(--ink-fixed) 34%, var(--ink-a35) 58%, rgba(35,31,35,0) 76%); }
@media (max-width: 860px) {
  .cta-marks::after { background: linear-gradient(200deg, rgba(35,31,35,0) 10%, rgba(35,31,35,.6) 55%, var(--ink-fixed) 88%); }
}

/* Mega menu feature image (e.g. Grab × Nuitée) */
.mf-img { display: block; border-radius: 12px; overflow: hidden; background: var(--white); border: 1px solid var(--line); }
.mf-img img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; padding: 8px 14px; }
.mega-feature:hover .mf-img img { transform: scale(1.03); }
.mf-img img { transition: transform .4s var(--ease); }
.mf-img.photo { border: 0; }
.mf-img.photo img { padding: 0; object-fit: cover; } /* full-bleed photo promos (e.g. Storefront) vs inset logo art */

/* Mega menu: product logos without tile, aligned to the title line */
.mega-link .ml-icon.logo { width: 32px; height: 37px; background: none; border: 0; border-radius: 0; overflow: visible; }
.mega-link .ml-icon.logo img { width: 32px; height: 32px; object-fit: contain; }
.mega-link:has(.ml-icon.logo) { gap: 12px; align-items: center; }
.mega-link strong { line-height: 22px; }
.mega-sub { padding-left: 4px; } /* sub icons centered under the product logo */
.mega-sub a { color: var(--ink); }

/* Home product cards → jump-to-toggle arrow */
.duo-card[data-switch-to] { cursor: pointer; }
.duo-go { width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; border: 1.5px solid currentColor; background: var(--on-dark-50); transition: background .25s, color .25s, transform .3s var(--ease); }
[data-theme="dark"] .duo-go { background: color-mix(in srgb, currentColor 16%, transparent); } /* the 50% white disc read as a grey blob on the dark cards */
.duo-go.connect { color: var(--connect); }
.duo-go.cloud { color: var(--cloud); }
.duo-card:hover .duo-go { transform: translateY(3px); }
.duo-go:hover, .duo-go:focus-visible { color: var(--white); }
.duo-go.connect:hover, .duo-go.connect:focus-visible { background: var(--connect); border-color: var(--connect); }
.duo-go.cloud:hover, .duo-go.cloud:focus-visible { background: var(--cloud); border-color: var(--cloud); }

/* ---------- Home hero: animated brand tiles ---------- */
.hero-has-tiles { position: relative; }
.hero-tiles { --t: 84px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: grid; grid-template-columns: repeat(4, var(--t)); grid-auto-rows: var(--t); gap: calc(var(--t) * .1); pointer-events: none; }
.ht { position: relative; border-radius: calc(var(--t) * .17); transition: opacity .42s ease, transform .6s var(--ease); }
.ht.out { opacity: 0; transform: scale(.94); }
.ht i { position: absolute; inset: 0; border-radius: inherit; }
.ht[data-s="o"] { box-shadow: inset 0 0 0 1.5px var(--ink-a28); }
.ht[data-s="a"] i { background: linear-gradient(135deg, #e6bff3 0%, #b99af2 55%, #9a7fe6 100%); }
.ht[data-s="b"] i { background: linear-gradient(135deg, #c3a6f7 0%, #9a74e8 50%, #6b4fc6 100%); }
.ht[data-s="c"] i { background: linear-gradient(135deg, #a78bea 0%, #7353cf 50%, var(--violet-800) 100%); }
.ht[data-s="x"] i { background: linear-gradient(135deg, #c9eeee 0%, #9fdcdc 55%, #86cfd2 100%); }
.ht[data-s="y"] i { background: linear-gradient(135deg, #a7d7d4 0%, #74b2b0 55%, #4f8e93 100%); }
.ht[data-s="z"] i { background: linear-gradient(135deg, #6f9aa5 0%, #4d7a86 50%, #2e4f5c 100%); }
.ht[data-s="a"], .ht[data-s="b"], .ht[data-s="c"], .ht[data-s="x"], .ht[data-s="y"], .ht[data-s="z"] { box-shadow: 0 14px 30px -18px rgba(19,7,64,.35); }
@media (max-width: 1240px) { .hero-tiles { --t: 70px; } }
@media (max-width: 1080px) { .hero-tiles { --t: 56px; } }
@media (max-width: 900px) { .hero-tiles { display: none; } }
/* hero animation video (hero-test.html): the light cut's bg is the page bg, the dark cut's is a hair off it, so the edges fade out.
   Fade widths stay inside the content's closest approach (measured over the loop: ~2.7% left/right, ~6% top/bottom). */
.hero-anim { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: clamp(340px, 40vw, 560px); aspect-ratio: 6 / 5; pointer-events: none;
  --fade: linear-gradient(to right, transparent, #000 2.5%, #000 97.5%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image: var(--fade); -webkit-mask-composite: source-in; mask-image: var(--fade); mask-composite: intersect; }
.hero-anim video { display: block; width: 100%; height: 100%; object-fit: contain; }
/* photo tiles over the booking cards in the hero video, positioned and timed by the inline script (pages/home.py HERO_ANIM_ICONS) */
.ha-icons { position: absolute; inset: 0; }
.ha-icon { position: absolute; left: 0; top: 0; width: 6%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 16%; opacity: 0; will-change: transform, opacity; box-shadow: 0 0 0 1px rgba(35,31,35,.08), 0 2px 6px rgba(35,31,35,.10); }
/* dark: 'lighten' drops the cut's flat #121012 background so the hero glow behind it shows through (works with the MP4 too, so Safari matches).
   Nothing in the dark palette that matters is darker than that background (only the 'n' tile, #0e0c10, which lands 4 levels lighter). */
[data-theme="dark"] .hero-anim { mix-blend-mode: lighten; }
/* phones/tablets: the animation drops below the headline and CTAs so the message still leads */
@media (max-width: 900px) { .hero-has-tiles:has(.hero-anim) { display: flex; flex-direction: column; } .hero-anim { order: 1; position: static; transform: none; width: min(100%, 520px); margin: -24px auto 40px; }
  .hero-has-tiles:has(.hero-anim) .hero-meta { display: none; } /* drop the stats line so the animation sits higher */ }
.hero-has-tiles .lead { max-width: 36rem; } .hero-has-tiles .hero-inner { position: relative; z-index: 1; }

/* Hero tiles: slower, subtler, more space from the guide line */
.hero-tiles { --t: 76px; right: clamp(24px, 4vw, 56px); }
.ht { transition: opacity 1.1s cubic-bezier(.4, 0, .2, 1), transform 1.4s cubic-bezier(.4, 0, .2, 1); }
.ht.out { opacity: 0; transform: scale(.98); }
.ht[data-s="a"] i, .ht[data-s="b"] i, .ht[data-s="c"] i, .ht[data-s="x"] i, .ht[data-s="y"] i, .ht[data-s="z"] i { opacity: .75; }
.ht[data-s="a"], .ht[data-s="b"], .ht[data-s="c"], .ht[data-s="x"], .ht[data-s="y"], .ht[data-s="z"] { box-shadow: 0 10px 24px -20px rgba(19,7,64,.25); }
.ht[data-s="o"] { box-shadow: inset 0 0 0 1.5px rgba(35,31,35,.16); }
@media (max-width: 1240px) { .hero-tiles { --t: 64px; } }
@media (max-width: 1080px) { .hero-tiles { --t: 52px; right: 16px; } }

/* Blog cards: logo art */
.post .p-logos { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 4vw, 40px); }
.post .p-logos img { width: clamp(72px, 9vw, 104px); height: auto; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(19,7,64,.18)); transition: transform .5s var(--ease); }
.post:hover .p-logos img { transform: translateY(-3px); }
.post .p-art > img { transition: transform .6s var(--ease); }
.post:hover .p-art > img { transform: scale(1.03); }

/* ---------- Dropdown button (hero Get started) ---------- */
.dd { position: relative; display: inline-block; }
/* a revealing block is its own stacking context, so lift the one holding a dropdown above later siblings (e.g. the hero stats line) */
.reveal:has(.dd) { position: relative; z-index: 5; }
.dd-btn .dd-chev { transition: transform .25s var(--ease); }
.dd.open .dd-btn .dd-chev { transform: rotate(180deg); }
.dd-menu { position: absolute; left: 0; top: calc(100% + 8px); z-index: 20; width: 320px; padding: 6px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-l);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .2s, transform .25s var(--ease), visibility .2s; }
.dd.open .dd-menu { opacity: 1; visibility: visible; transform: none; }
.dd-menu a { display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: center; padding: 12px; border-radius: 12px; color: var(--ink); transition: background .2s; }
.dd-menu a:hover, .dd-menu a:focus-visible { background: var(--bg); }
.dd-menu img { width: 28px; height: 28px; object-fit: contain; }
.dd-menu b { display: block; font-weight: 500; font-size: 15px; }
.dd-menu small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.dd-menu .ico { color: var(--muted); }
@media (max-width: 600px) { .dd { width: 100%; } .dd .dd-btn { width: 100%; } .dd-menu { width: 100%; } }

/* Blog cards: image shown small on a soft tinted background (keeps its own aspect ratio) */
.post .p-art > img.p-frame { width: auto; height: auto; max-width: 62%; max-height: 70%; object-fit: contain; border-radius: 12px; background: var(--white); box-shadow: 0 1px 2px rgba(35,31,35,.06), 0 18px 34px -18px var(--ink-a35); transition: transform .5s var(--ease); }
.post:hover .p-art > img.p-frame { transform: translateY(-3px); }
.post.featured .p-art > img.p-frame { max-width: 56%; max-height: 64%; }

/* Scale bento hero tile: soft lavender to match the page's tinted cards */
.sx-hero { color: var(--ink); border: 1px solid var(--line);
  background-color: #efebfd;
  background-image: radial-gradient(rgba(77,66,192,.14) 1px, transparent 1.4px), radial-gradient(110% 90% at 100% 100%, rgba(181,165,255,.55), transparent 62%), linear-gradient(165deg, #f4f1fe 0%, #e9e3fd 55%, #ddd6fd 100%);
  background-size: 18px 18px, auto, auto; }
.sx-hero .sx-label { color: var(--connect); }
.sx-hero .sx-num { color: var(--connect); }
.sx-hero .sx-desc { color: var(--ink-2); }
.sx-rings i { border-color: rgba(77,66,192,.18); }
.sx-rings b { background: var(--connect); }
@keyframes sxPulse { 0% { box-shadow: 0 0 0 0 rgba(77,66,192,.35); } 80%, 100% { box-shadow: 0 0 0 26px rgba(77,66,192,0); } }
/* Cloud version of the scale bento (kit.cloud_scale): teal hero, hotel tiles, onboarding steps, partner network */
.sx.cloud .sx-hero { background-color: #e6f1f0;
  background-image: radial-gradient(rgba(37,116,124,.16) 1px, transparent 1.4px), radial-gradient(110% 90% at 100% 100%, rgba(109,166,166,.5), transparent 62%), linear-gradient(165deg, #eef6f5 0%, #ddecea 55%, #cfe4e3 100%); }
.sx.cloud .sx-hero :is(.sx-label, .sx-num) { color: var(--cloud); }
.sx.cloud .sx-rings i { border-color: rgba(37,116,124,.2); }
.sx.cloud .sx-rings b { background: var(--cloud); animation-name: sxPulseCloud; }
@keyframes sxPulseCloud { 0% { box-shadow: 0 0 0 0 rgba(37,116,124,.35); } 80%, 100% { box-shadow: 0 0 0 26px rgba(37,116,124,0); } }
.sx.cloud .sx-chips span { background: var(--cloud-wash); color: var(--cloud); }
.sx.cloud .sx-chips span:nth-child(2n) { background: #f1f6f6; color: #2c6a71; }
.sx-num small { font-size: .42em; letter-spacing: -0.01em; margin-right: .12em; color: var(--muted); }
.sx-hotels { display: flex; gap: 8px; }
.sx-hotels span { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--cloud-wash); color: var(--cloud); }
.sx-hotels span:nth-child(2n) { background: #d9ebe9; } .sx-hotels span:nth-child(3n) { background: var(--cloud); color: var(--white); }
.sx-steps b { color: var(--code-green); font-weight: 500; }
/* Cloud bento: the hotel chains tile runs wide to carry the logos */
.sx.cloud { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto; }
.sx.cloud > .sx-tile { grid-column: span 4; }
.sx.cloud > .sx-hero { grid-column: span 5; grid-row: auto; }
.sx.cloud > .sx-chains { grid-column: span 7; }
.sx-logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px 20px; align-items: center; justify-items: center; }
.sx-logos img { max-width: 100%; height: auto; filter: brightness(0); opacity: .55; }
.award-badge { display: block; width: 100%; height: auto; border-radius: var(--radius-l); }
@media (max-width: 1080px) { .sx.cloud { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sx.cloud > .sx-tile { grid-column: auto; } .sx.cloud > :is(.sx-hero, .sx-chains) { grid-column: 1 / -1; } }
@media (max-width: 600px) { .sx.cloud { grid-template-columns: 1fr 1fr; } .sx.cloud > .sx-tile:last-child { grid-column: 1 / -1; } .sx-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 10px; } }
.sx-net { width: 112px; height: auto; }
.sx-net .pulse { animation: sxDot 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }

/* Home product cards: sub-product chips use the same ink as the connect/cloud wordmarks */
.duo-card .chip:not(.connect):not(.cloud) { color: var(--ink); }

/* ---------- Contact sales: multi-step form ---------- */
.ms-form .form-fields { display: grid; gap: 18px; }
.ms-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ms-title { font-family: var(--f-display); font-size: 19px; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; }
.ms-count { font-size: 13px; color: var(--muted); white-space: nowrap; }
.ms-count b { font-weight: 500; color: var(--ink); }
.ms-bar { height: 3px; border-radius: 999px; background: var(--line); overflow: hidden; margin-top: -6px; }
.ms-bar i { display: block; height: 100%; background: var(--ink); border-radius: inherit; transition: width .45s var(--ease); }
.ms-step { display: grid; gap: 16px; }
.ms-step:not([hidden]) { animation: panelIn .4s var(--ease); }
.ms-step[hidden] { display: none; }
.field .opt { font-weight: 400; color: var(--muted); }
.select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23716b72' stroke-width='1.8' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
.select:invalid { color: var(--faint); }
.select option { color: var(--ink); }
.field.invalid .select { border-color: var(--danger); }
.opt-field { border: 0; padding: 0; margin: 0; min-width: 0; }
.opt-field legend { font-size: 15px; font-weight: 500; color: var(--ink); margin-bottom: 12px; padding: 0; }
.opt-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.opt-item { position: relative; display: block; cursor: pointer; }
.opt-item input { position: absolute; opacity: 0; pointer-events: none; }
.opt-item span { display: flex; align-items: center; gap: 10px; min-height: 46px; height: 100%; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); font-size: 14.5px; color: var(--ink); line-height: 1.35; transition: border-color .2s, background .2s, box-shadow .2s; }
.opt-item span::before { content: ""; flex-shrink: 0; width: 16px; height: 16px; border-radius: 999px; border: 1.5px solid var(--line-2); background: var(--surface); transition: border .2s; }
.opt-item:hover span { border-color: var(--ink-2); }
.opt-item input:checked + span { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink) inset; }
.opt-item input:checked + span::before { border: 5px solid var(--ink); }
.ms-form.cloud .ms-bar i { background: var(--cloud); }
.ms-form.cloud .opt-item input:checked + span { border-color: var(--cloud); box-shadow: 0 0 0 1px var(--cloud) inset; }
.ms-form.cloud .opt-item input:checked + span::before { border-color: var(--cloud); }
.opt-item input:focus-visible + span { outline: 2px solid var(--connect); outline-offset: 2px; }
.opt-field.invalid .opt-item span { border-color: var(--danger); }
.opt-field.invalid .err { display: block; margin-top: 8px; }
.ms-nav { display: flex; justify-content: space-between; gap: 12px; padding-top: 6px; }
.ms-nav .btn[disabled] { opacity: .4; pointer-events: none; }
.ms-nav .btn[hidden] { display: none; }
.ms-error { font-size: 14px; color: var(--danger-text); }
.ms-legal { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.ms-legal a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.ms-form.sending [data-submit] { opacity: .6; pointer-events: none; }
@media (max-width: 640px) { .opt-list { grid-template-columns: 1fr; } .ms-form .f-row { grid-template-columns: 1fr; } }

/* ---------- Home: customer stories (media + copy rows, alternating) ---------- */
.cs-list { display: grid; gap: clamp(56px, 7vw, 96px); margin-top: clamp(32px, 4vw, 48px); }
.cs-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); align-items: stretch; }
.cs-row.rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.cs-row.rev .cs-media { order: 2; }
.cs-media { position: relative; border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--line); background: var(--connect-wash); }
.cs-media.dark { background: var(--dark); border-color: transparent; } /* same off-black as the "Developers building" tile */
.cs-media.dark .cs-logo[src*="revolut"], .cs-media.dark .cs-logo[src*="yonder"] { filter: brightness(0) invert(1); }
.cs-media .cs-logo[src*="yonder"] { height: 26px; }
.cs-media .cs-phone { position: absolute; right: 12%; top: 9%; width: 38%; height: auto; filter: drop-shadow(0 24px 40px rgba(0,0,0,.45)); }
.cs-media .cs-phone { z-index: 3; }
/* two smaller screens fanned out behind the main phone (search → results → hotel page) */
.cs-media .cs-phone.cs-phone-2 { z-index: 2; right: 39%; top: 21%; width: 29%; }
.cs-media .cs-phone.cs-phone-3 { z-index: 1; right: 60%; top: 33%; width: 24%; opacity: .96; } /* phone rises off the bottom edge like the Revolut card inset */
.cs-media .cs-inset { position: absolute; top: 7%; right: 7%; height: 86%; width: auto; max-width: 62%; object-fit: cover; border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.cs-media .cs-cover { position: absolute; left: 50%; top: 55%; width: 86%; height: auto; transform: translate(-50%, -50%); mix-blend-mode: lighten; } /* four phones on pure black: lighten swaps the black for the panel colour; 7% side margins, nudged below the logo */
.cs-media .cs-logo { position: absolute; top: clamp(18px, 2.4vw, 28px); left: clamp(18px, 2.4vw, 28px); height: 22px; width: auto; z-index: 1; }
.cs-media .cs-logo[src*="grab-logo"] { height: 28px; }
.cs-copy { display: grid; align-content: space-between; gap: 32px; padding: 6px 0; }
.cs-top { display: grid; gap: 16px; justify-items: start; }
.cs-title { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.35rem, 2.1vw, 1.75rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); max-width: 30ch; }
.cs-title .tone { color: var(--muted); }
.cs-quote { margin: 0; display: grid; gap: 16px; justify-items: start; }
.cs-quote blockquote { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink); max-width: 52ch; }
.cs-quote figcaption { display: grid; gap: 2px; font-size: 14px; }
.cs-quote figcaption strong { font-weight: 500; color: var(--ink); }
.cs-quote figcaption span { color: var(--muted); font-size: 13px; }
@media (max-width: 860px) {
  .cs-row, .cs-row.rev { grid-template-columns: 1fr; }
  .cs-row.rev .cs-media { order: 0; }
}

/* ---------- Mapping tool page: rebuilt product graphics ---------- */
.mt-flow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, .6fr) minmax(0, 1fr); gap: clamp(12px, 2vw, 24px); align-items: center;
  padding: clamp(18px, 3vw, 32px); border-radius: var(--radius-xl); border: 1px solid var(--line); background: var(--surface); }
.mt-col { display: grid; gap: 8px; justify-items: start; padding: 14px; border-radius: 16px; background: var(--bg); border: 1px solid var(--line); }
.mt-col > .tag { margin-bottom: 4px; }
.mt-rec { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; color: var(--ink); }
.mt-rec small { display: block; font-size: 12px; color: var(--muted); }
.mt-rec.main { border-color: var(--connect-tint); box-shadow: 0 0 0 1px var(--connect-tint) inset; font-weight: 500; }
.mt-rec.ok { background: transparent; border-style: dashed; color: var(--ink-2); }
.mt-ico { flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--bg); color: var(--ink-2); border: 1px solid var(--line); }
.mt-engine { display: grid; justify-items: center; gap: 10px; text-align: center; }
.mt-engine small { font-size: 12px; color: var(--muted); max-width: 16ch; line-height: 1.4; }
.mt-node { width: 72px; height: 72px; border-radius: 20px; display: grid; place-items: center; background: var(--connect-wash); border: 1px solid var(--connect-tint); box-shadow: 0 16px 40px -18px rgba(77,66,192,.55); }
.mt-line { width: 1px; height: 22px; background: linear-gradient(var(--line-2), transparent); }
.mt-line:last-child { background: linear-gradient(transparent, var(--line-2)); }
.mt-label { display: inline-flex; font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mt-rooms { width: 100%; max-width: 440px; display: grid; gap: 12px; }
.mt-group { display: grid; gap: 8px; align-content: start; padding: 10px; border-radius: 18px; background: var(--on-dark-55); }
.mt-group.after { background: var(--surface); box-shadow: 0 0 0 2px var(--connect-tint), 0 24px 50px -24px rgba(19,7,64,.4); }
.mt-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mt-room { display: grid; align-content: start; border-radius: 12px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.mt-room.unified { border: 0; grid-template-columns: 46% 1fr; align-items: center; }
.mt-room.unified .mt-room-img { aspect-ratio: auto; height: 100%; min-height: 104px; border-radius: 10px; }
.mt-room.unified .mt-room-body { padding: 4px 4px 4px 12px; }
.mt-room-img { aspect-ratio: 4 / 3; overflow: hidden; }
.mt-room-img img { width: 100%; height: 100%; object-fit: cover; }
.mt-room-body { display: grid; gap: 2px; padding: 9px 10px 10px; }
.mt-room-body strong { font-size: 13px; font-weight: 500; color: var(--ink); }
.mt-room-body small { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.mt-src { font-size: 11.5px; color: var(--muted); }
.mt-room.unified .mt-src { color: var(--connect); }
.mt-rooms .chip { height: 24px; padding: 0 9px; font-size: 11.5px; }
.mt-content { width: 100%; max-width: 520px; display: grid; gap: 12px; }
.mt-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mt-ba figure { position: relative; margin: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 18px 40px -22px var(--navy-a45); }
.mt-ba img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.mt-ba .mt-label { position: absolute; top: 8px; left: 8px; z-index: 1; padding: 3px 8px; border-radius: 6px; background: rgba(255,255,255,.9); color: var(--ink-2); }
.mt-desc { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); margin: 0 0 4px; }
@media (max-width: 760px) {
  .mt-flow { grid-template-columns: 1fr; }
  .mt-engine { grid-auto-flow: row; }
}
.footer-bottom .fb-legal { display: grid; gap: 4px; }

/* ---------- Product auth screens (cloud/login, connect/signup — design previews) ---------- */
.auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); background: var(--bg); }
.auth-main { display: grid; grid-template-rows: auto 1fr auto; gap: 32px; padding: clamp(20px, 3vw, 36px) clamp(20px, 5vw, 64px); }
.auth-main { padding-top: 0; }
/* logo matches the site header's left edge on normal screens (same 64px bar); on wide screens it stays at the column's left edge instead of drifting right */
.auth-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--header-h); margin-left: min(0px, calc(max(var(--gutter), (100vw - var(--container)) / 2) - clamp(20px, 5vw, 64px))); }
.auth-top .brand img { height: 22px; width: auto; }
.auth-back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); transition: color .2s; }
.auth-back:hover { color: var(--ink); }
.ico.flip { transform: rotate(180deg); }
.auth-form { width: 100%; max-width: 420px; margin: 0 auto; align-self: center; display: grid; gap: 22px; }
.auth-form .product-mark { font-size: 20px; }
.auth-form .h3 { font-size: clamp(1.6rem, 2.4vw, 2rem); }
.auth-sso { gap: 10px; font-size: 15px; }
.auth-sso-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.auth-or { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--muted); }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.auth .form { gap: 16px; }
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 46px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.pw-toggle:hover, .pw-toggle[aria-pressed="true"] { color: var(--ink); background: var(--panel); }
.pw-rules { list-style: none; margin: 2px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 12.5px; color: var(--muted); }
.pw-rules li { display: flex; align-items: center; gap: 6px; transition: color .2s; }
.pw-rules li::before { content: ""; width: 14px; height: 14px; border-radius: 999px; border: 1.5px solid var(--line-2); flex-shrink: 0; transition: background .2s, border-color .2s; }
.pw-rules li.ok { color: var(--success-text); }
.pw-rules li.ok::before { border-color: var(--success); background: var(--success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 9px no-repeat; }
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.auth-link { color: var(--ink); font-weight: 450; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.auth-link:hover { text-decoration-color: currentColor; }
.auth .checkbox a { white-space: nowrap; }
.auth-switch { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--ink-2); }
.auth-legal { font-size: 12px; color: var(--muted); text-align: center; line-height: 1.5; }
.auth-legal a { text-decoration: underline; text-underline-offset: 2px; }
.auth-notice { margin: 0; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; background: var(--panel); color: var(--ink-2); }
.auth-notice a { font-weight: 500; color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.auth.cloud .auth-notice { background: var(--cloud-wash); }
.auth.connect .auth-notice { background: var(--connect-wash); }
.auth-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; font-size: 13px; color: var(--muted); }
.auth-foot a:hover { color: var(--ink); }

.auth-panel { position: relative; overflow: hidden; isolation: isolate; margin: 12px 12px 12px 0; border-radius: var(--radius-xl); background: var(--dark); color: var(--white); display: grid; align-items: center; }
.auth-glow { position: absolute; inset: 0; z-index: -1; }
.auth.cloud .auth-glow { background: radial-gradient(120% 85% at 0% 100%, rgba(109,166,166,.75) 0%, rgba(37,116,124,.55) 32%, transparent 70%), radial-gradient(60% 50% at 100% 0%, rgba(37,116,124,.35), transparent 70%); }
.auth.connect .auth-glow { background: radial-gradient(120% 85% at 0% 100%, rgba(142,105,191,.8) 0%, rgba(74,52,120,.6) 32%, transparent 70%), radial-gradient(60% 50% at 100% 0%, rgba(77,66,192,.35), transparent 70%); }
.auth-panel .gridlines { position: absolute; inset: 0; z-index: -1; opacity: .35; background-image: linear-gradient(var(--on-dark-06) 1px, transparent 1px), linear-gradient(90deg, var(--on-dark-06) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(180deg, #000, transparent 85%); -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); }
.auth-panel-inner { width: 100%; max-width: 540px; margin: 0 auto; padding: clamp(32px, 5vw, 64px); display: grid; gap: 22px; }
.auth-panel .h2 { color: var(--white); }
.auth-panel .tone { color: var(--on-dark-50); }
.auth-panel .lead { color: var(--on-dark-72); }
.auth.cloud .auth-panel .eyebrow { color: var(--cloud-on-dark); }
.auth.connect .auth-panel .eyebrow { color: var(--connect-pale); }
.auth-mock { margin-top: 10px; }
.auth-mock .mock { box-shadow: 0 30px 60px -20px rgba(0,0,0,.55); }
.auth-quotes { position: relative; margin-top: 8px; padding: 22px 22px 18px; border-radius: 18px; background: var(--on-dark-06); border: 1px solid var(--on-dark-12); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: grid; }
.aq-slide { grid-area: 1 / 1; margin: 0; display: grid; gap: 14px; opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s; }
.aq-slide.on { opacity: 1; visibility: visible; }
.aq-slide blockquote { margin: 0; font-size: 15.5px; line-height: 1.55; color: rgba(255,255,255,.92); }
.aq-slide figcaption { display: grid; gap: 2px; font-size: 13.5px; }
.aq-slide figcaption strong { font-weight: 500; }
.aq-slide figcaption span { color: var(--on-dark-55); font-size: 12.5px; }
.aq-dots { grid-area: 2 / 1; display: flex; gap: 6px; justify-content: flex-end; margin-top: -14px; }
.aq-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.3); cursor: pointer; transition: width .3s var(--ease), background .3s; }
.aq-dots button.on { width: 20px; background: var(--white); }
.auth-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding-top: 20px; border-top: 1px solid var(--on-dark-12); }
.auth-stats b { display: block; font-family: var(--f-display); font-weight: 500; font-size: clamp(1.3rem, 2vw, 1.7rem); letter-spacing: -0.03em; }
.auth-stats span { font-size: 12.5px; color: var(--on-dark-60); }
@media (max-width: 960px) {
  .auth { grid-template-columns: 1fr; }
  .auth-panel { display: none; }
}
@media (max-width: 480px) {
  .auth-sso-row { grid-template-columns: 1fr; }
  .auth .form .f-row { grid-template-columns: 1fr; }
  .pw-rules { grid-template-columns: 1fr; }
}
.auth-mock .mock { color: var(--ink); }
.auth-row .auth-link, .auth-row .checkbox { font-size: 14px; }
.auth.cloud .auth-glow { background: radial-gradient(120% 85% at 0% 100%, rgba(63,143,149,.95) 0%, rgba(37,116,124,.7) 30%, transparent 68%), radial-gradient(60% 50% at 100% 0%, rgba(37,116,124,.45), transparent 70%); }
/* Fragment Mono caps sit high in their line box: tighten the line and nudge down so tag labels are optically centred */
.tag { line-height: 1; padding-top: 1.5px; }
/* menu links style every <span> as the description line; give tags inside them back their own box */
.mega-link .tag { display: inline-flex; font-size: 12px; line-height: 1; margin-top: 0; }
/* cut-out product screenshots on the standard lavender panel: cards float with a soft shadow */
.media.lift img { filter: drop-shadow(0 18px 30px rgba(19,7,64,.22)); }
/* screenshots cropped at an edge run flush to that edge of the panel, so the crop reads as the panel cutting them off */
.media.bleed-t { padding-top: 0; } .media.bleed-r { padding-right: 0; } .media.bleed-b { padding-bottom: 0; }

/* ---------- Developers page ---------- */
/* nuitee.dev promo banner — uses nuitee.dev's own palette: #e8e8e8 canvas, #1c0847 ink, lavender accent */
.devbanner { --dev-ink: #1c0847; --dev-bg: #e8e8e8; --dev-accent: #a99cf2;
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 4vw, 56px); align-items: center;
  padding: clamp(28px, 4vw, 48px) clamp(24px, 5vw, 64px); border-radius: var(--radius-xl); background: var(--dev-bg); color: var(--dev-ink); overflow: hidden; }
.devbanner::before { content: ""; position: absolute; top: 0; bottom: 0; left: clamp(20px, 3.5vw, 44px); width: 1px; background: var(--dev-ink); opacity: .55; }
.db-copy { position: relative; display: grid; gap: 16px; padding-left: clamp(16px, 2vw, 28px); justify-items: start; }
.db-tick { position: absolute; left: calc(-1 * clamp(16px, 2vw, 28px) - 4px); top: 46%; font-family: var(--f-mono); font-size: 12px; color: var(--dev-ink); line-height: 1; }
.db-kicker { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(28,8,71,.6); }
.db-title { margin: 0; font-family: var(--f-display); font-weight: 650; font-size: clamp(1.9rem, 3.6vw, 2.75rem); line-height: 1.02; letter-spacing: -0.04em; color: var(--dev-ink); }
.db-lead { margin: 0; max-width: 34rem; font-size: clamp(1rem, 1.3vw, 1.1rem); line-height: 1.6; color: rgba(28,8,71,.72); }
.btn.db-btn { --b-bg: var(--dev-ink); --b-bd: var(--dev-ink); --b-fg: var(--white); }
.btn.db-btn:hover { --b-bg: #2a1466; }
.btn.db-btn2 { --b-fg: var(--dev-ink); --b-bd: rgba(28,8,71,.25); }
.btn.db-btn2:hover { --b-bg: var(--on-dark-60); --b-bd: var(--dev-ink); }
/* Connect docs list */
.doc-groups { align-items: stretch; }
.doc-group { display: grid; gap: 14px; align-content: start; }
.doc-group .product-mark { font-size: 19px; }
.doc-links { display: grid; margin-top: 4px; border-top: 1px solid var(--line); }
.doc-link { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 2px; border-bottom: 1px solid var(--line); color: var(--ink); transition: padding .25s var(--ease), color .2s; }
.doc-link span { display: grid; gap: 2px; font-weight: 450; }
.doc-link small { font-size: 13px; font-weight: 380; color: var(--muted); }
.doc-link .ico { color: var(--muted); flex-shrink: 0; transition: transform .25s var(--ease), color .2s; }
.doc-link:hover { padding-left: 8px; color: var(--connect); }
.doc-link:hover .ico { color: var(--connect); transform: translate(2px, -2px); }
.doc-community { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 20px; padding: 18px 22px; border-radius: var(--radius-l); background: var(--connect-wash); border: 1px solid var(--connect-tint); color: var(--ink-2); }
.doc-community > span { display: inline-flex; align-items: center; gap: 10px; }
/* Agentic cards on the dark band */
.agentic .agent-card { display: grid; gap: 12px; align-content: start; }
.agentic .agent-card .tag { justify-self: start; background: rgba(181,165,255,.14); color: var(--connect-pale); }
.agentic .agent-card .c-title { color: var(--white); display: flex; align-items: center; gap: 8px; }
.agentic .lead { max-width: 34rem; }
@media (max-width: 860px) { .devbanner { grid-template-columns: 1fr; } }
/* grid columns must be allowed to shrink below long code lines (they scroll inside .code instead) */
.hero-split > *, .split-2 > *, .call-steps > *, .devbanner > * { min-width: 0; }
@media (max-width: 860px) { .devbanner { grid-template-columns: minmax(0, 1fr); } }
.db-copy { gap: 12px; }
.db-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
@media (max-width: 860px) { .db-actions { justify-content: flex-start; padding-left: clamp(16px, 2vw, 28px); } }

/* product-card demos: the footer row is pushed to the bottom instead of the panel */
.duo-card .duo-art > * { max-width: 100%; }
/* "Get started" chooser variants */
.dd-right .dd-menu { left: auto; right: 0; }
.dd-up .dd-menu { top: auto; bottom: calc(100% + 8px); }
/* dark CTA panels: only the decorative layer clips, so the "Get started" chooser can open past the panel edge */
.cta-dark { overflow: visible; }
.cta-dark .cta-marks { border-radius: inherit; }
/* equal-size demo panels only matter side by side; stacked cards let the panel grow with its content */

/* Connect / Cloud cards share one grid (subgrid): label, title, text, chips, demo panel and footer
   line up across both cards, and both demo panels get the same top and height whatever the content */
.duo { grid-template-rows: repeat(6, auto); }
.duo-card { display: grid; grid-template-rows: subgrid; grid-row: span 6; row-gap: 20px; }
.duo-card > .duo-art { align-self: stretch; }
@media (max-width: 860px) { .duo { grid-template-rows: none; } .duo-card { grid-template-rows: none; grid-row: auto; } }

/* demo code line: the status badge drops below when the call doesn't fit */
.tc-code { flex-direction: column; align-items: flex-start; gap: 6px; } /* badge always on its own line: with wrap it sat beside the half-typed code, then dropped a line once typing finished, resizing both cards */
/* both demos fill their (equal) panels: the Connect cart keeps checkout at the bottom,
   the Cloud widget sits on a cream backdrop matching its own card (#F8F5EE → #F5F1E7) */
.duo-card .duo-art > .tc { height: 100%; grid-template-rows: auto 1fr auto; align-content: stretch; }
.duo-card .duo-art > .tc .tc-rows { align-content: start; }
/* an <object>, not an <img>: the widget's count-up script and fade-in never run inside an image */
.duo-card.cloud .duo-art > .rev-widget { display: block; width: 100%; height: 100%; min-height: 220px; }
.duo-card.cloud .duo-art > :is(img, .rev-widget) { height: 100%; object-fit: contain; background: linear-gradient(135deg, #f8f5ee, #f5f1e7); border-radius: 12px; }

/* ---------- Mobile consistency pass ---------- */
@media (max-width: 600px) {
  /* one rule for every button group on phones: stacked, full width (matches the hero) */
  main .row:has(> .btn), main .row:has(> .dd) { flex-direction: column; align-items: stretch; width: 100%; justify-self: stretch; }
  main .row > .btn, main .row > .dd, main .row > .dd .dd-btn { width: 100%; }
  .section-head.split > .row { justify-self: stretch !important; }
}
/* footer links: at least 32px tall tap targets (WCAG 2.5.8 minimum is 24px), tighter list spacing to compensate */
.footer-col a { display: inline-flex; align-items: center; min-height: 32px; }
/* product demos (static/demos): a 16:10 stage in the browser frame; on phones a full-screen button over it */
.dash-demo { position: relative; aspect-ratio: 16 / 10; background: #f8f6f5; }
.dash-demo iframe { display: block; width: 100%; height: 100%; border: 0; }
.dash-fs { display: none; }
@media (max-width: 600px) {
  .dash-fs { display: inline-flex; align-items: center; gap: 8px; position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
    height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: rgba(35,31,35,.88); color: var(--white); font: inherit; font-size: 14px; font-weight: 450;
    white-space: nowrap; box-shadow: 0 10px 24px -10px rgba(0,0,0,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: pointer; }
}
.footer-col ul { gap: 0; } /* the 32px link height now provides the spacing (was 18px + 9px gap) */

/* =====================================================================
   DARK THEME — :root[data-theme="dark"] (set before paint by the <head> script)
   Page chrome flips via tokens. Product visuals (mockups, stages, media,
   illustrations, screenshots) stay light "screens" by re-declaring the
   light tokens on their containers (see .light-island list below).
   ===================================================================== */
:root { --on-ink: #fff; color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121012; --surface: #1b181b; --panel: #221f22; --panel-2: #2a262a;
  --ink: #f2eff3; --ink-2: #cdc7d0; --muted: #9c95a1; --faint: #857e89;
  --line: var(--on-dark-08); --line-2: rgba(255,255,255,.15);
  --dark: #1d1a1d; --dark-2: #161316; --dark-lift: #2a262a; --on-ink: #121012;
  --connect-on-wash: #c4b8ff; --warn-text: #e8c46a;
  --connect: #8f84f5; --connect-2: #a98ad6; --connect-pale: #c4b8ff; --connect-tint: rgba(143,132,245,.32); --connect-wash: rgba(143,132,245,.12);
  --cloud: #5fb8b3; --cloud-2: #7cc7c2; --cloud-pale: #9fd6d2; --cloud-tint: rgba(95,184,179,.3); --cloud-wash: rgba(95,184,179,.1);
  --orchid: #3a3160; --mint: rgba(204,253,207,.14); --sky: #1c2633; --sand: #2e2817;
  --success-bg: rgba(63,174,74,.16); --warning-bg: rgba(184,144,45,.18); --danger-bg: rgba(214,85,83,.16); --danger-text: #f08f8d;
  --success-text: #7be08f; /* light mint on the dark green tint: 8.5:1 (the light theme's #237a2c was 2.6:1 here) */
  --shadow-s: 0 1px 2px rgba(0,0,0,.5);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -8px rgba(0,0,0,.6);
  --shadow-l: 0 2px 4px rgba(0,0,0,.4), 0 24px 60px -20px rgba(0,0,0,.75);
}
/* smooth switch, but never on first paint */
.theme-switching, .theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: background-color .3s, color .3s, border-color .3s, fill .3s !important; }

/* toggle */
.theme-toggle { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--ink); cursor: pointer; transition: background .2s, border-color .2s; }
.theme-toggle { position: relative; }
/* touch areas: small links/buttons keep their look but get a >=44px hit box on touch screens */
@media (pointer: coarse) {
  .link, .btn.sm, .announce .a-link, .header .brand, .code-head .copy, .seg-btn, .job-filters .seg-btn { position: relative; }
  .link::after, .btn.sm::after, .announce .a-link::after, .header .brand::after, .code-head .copy::after { content: ""; position: absolute; inset: -10px -6px; }
}
.theme-toggle::before { content: ""; position: absolute; inset: -4px; } /* 44px tap target, same 36px look */
.theme-toggle:hover { background: var(--surface); border-color: var(--ink); }
.theme-toggle .tt-sun { display: none; }
[data-theme="dark"] .theme-toggle .tt-sun { display: block; }
[data-theme="dark"] .theme-toggle .tt-moon { display: none; }

/* light islands: product visuals keep the light palette inside a dark page */
[data-theme="dark"] :is(.mock-stage, .media, .duo-art, .art, .mt-flow, .devbanner, .browser:not(.dark), .cap-tile .ct-art, .card-art, .cs-media:not(.dark)) {
  color-scheme: light;
  --bg: #f7f6f5; --surface: #ffffff; --panel: #efedea; --panel-2: #e7e4e0;
  --ink: #231f23; --ink-2: #48434a; --muted: #67616a; --faint: #7f7982;
  --line: rgba(35,31,35,.09); --line-2: rgba(35,31,35,.16); --on-ink: #fff;
  --connect-on-wash: #4d42c0; --warn-text: #8a6a17;
  --connect: #4d42c0; --connect-2: #8e69bf; --connect-pale: #b5a5ff; --connect-tint: #ddd6fd; --connect-wash: #f1eefe;
  --cloud: #25747c; --cloud-2: #3f8f95; --cloud-pale: #6da6a6; --cloud-tint: #bbd8d8; --cloud-wash: #e8f2f1;
  --orchid: #cebffa; --mint: #ccfdcf; --sky: #d7e9ff; --sand: #f4e7c7;
  --success-bg: #e3f7e4; --warning-bg: #fbf1d9; --danger-bg: #fde9e8; --success-text: #237a2c;
  --shadow-s: 0 1px 2px rgba(35,31,35,.06), 0 1px 1px rgba(35,31,35,.04);
  --shadow: 0 1px 2px var(--ink-a05), 0 8px 24px -8px rgba(35,31,35,.12);
  color: var(--ink);
}

/* buttons: primary flips to light-on-dark; on-dark variants stay as they are */
.btn { --b-fg: var(--on-ink); }
[data-theme="dark"] .btn:hover { --b-bg: var(--white); }
[data-theme="dark"] .btn.connect, [data-theme="dark"] .btn.cloud { --b-fg: #121012; }
[data-theme="dark"] .btn.secondary:hover { --b-bg: var(--surface); }
.btn.black { --b-bg: var(--ink-fixed); }
[data-theme="dark"] .btn.black:hover { --b-bg: #322d32; }

/* wordmarks and the logo wall turn light */
[data-theme="dark"] img[src*="nuitee_black"] { filter: invert(1) brightness(1.15); }
[data-theme="dark"] .marquee-item { filter: brightness(0) invert(1); opacity: .55; }
[data-theme="dark"] .marquee-item:hover { filter: brightness(0) invert(1); opacity: 1; } /* logos are <img>: their dark ink would vanish on the dark page */

/* product logos: dark tile on light, light tile on dark. The files hold the dark tile; dark mode swaps in the
   -on-dark file, except inside the stages that stay light in dark mode. */
[data-theme="dark"] img[src$="images/connect-logo.svg"]:not(:is(.mock-stage, .media, .duo-art, .art, .mt-flow, .devbanner, .browser:not(.dark), .cap-tile .ct-art, .card-art, .cs-media:not(.dark), .post .p-art) img) { content: url(../../images/connect-logo-on-dark.svg); }
[data-theme="dark"] img[src$="images/cloud-logo.svg"]:not(:is(.mock-stage, .media, .duo-art, .art, .mt-flow, .devbanner, .browser:not(.dark), .cap-tile .ct-art, .card-art, .cs-media:not(.dark), .post .p-art) img) { content: url(../../images/cloud-logo-on-dark.svg); }
[data-theme="dark"] img[src$="images/stays.svg"]:not(:is(.mock-stage, .media, .duo-art, .art, .mt-flow, .devbanner, .browser:not(.dark), .cap-tile .ct-art, .card-art, .cs-media:not(.dark), .post .p-art) img) { content: url(../../images/stays-on-dark.svg); }
[data-theme="dark"] img[src$="images/flights.svg"]:not(:is(.mock-stage, .media, .duo-art, .art, .mt-flow, .devbanner, .browser:not(.dark), .cap-tile .ct-art, .card-art, .cs-media:not(.dark), .post .p-art) img) { content: url(../../images/flights-on-dark.svg); }
[data-theme="dark"] img[src$="images/experiences.svg"]:not(:is(.mock-stage, .media, .duo-art, .art, .mt-flow, .devbanner, .browser:not(.dark), .cap-tile .ct-art, .card-art, .cs-media:not(.dark), .post .p-art) img) { content: url(../../images/experiences-on-dark.svg); }
[data-theme="dark"] img[src$="images/cloud-hotels-mark-flat.svg"]:not(:is(.mock-stage, .media, .duo-art, .art, .mt-flow, .devbanner, .browser:not(.dark), .cap-tile .ct-art, .card-art, .cs-media:not(.dark), .post .p-art) img) { content: url(../../images/cloud-hotels-mark-flat-on-dark.svg); }
[data-theme="dark"] img[src$="images/cloud-experiences-mark-flat.svg"]:not(:is(.mock-stage, .media, .duo-art, .art, .mt-flow, .devbanner, .browser:not(.dark), .cap-tile .ct-art, .card-art, .cs-media:not(.dark), .post .p-art) img) { content: url(../../images/cloud-experiences-mark-flat-on-dark.svg); }
[data-theme="dark"] img[src$="images/cloud-portfolio-mark-flat.svg"]:not(:is(.mock-stage, .media, .duo-art, .art, .mt-flow, .devbanner, .browser:not(.dark), .cap-tile .ct-art, .card-art, .cs-media:not(.dark), .post .p-art) img) { content: url(../../images/cloud-portfolio-mark-flat-on-dark.svg); }
.flow-col.core .fc-logo img[src$="images/connect-logo.svg"] { content: url(../../images/connect-logo-on-dark.svg); } /* dark card in both themes */
.flow-col.core .fc-logo img[src$="images/cloud-logo.svg"] { content: url(../../images/cloud-logo-on-dark.svg); }

/* dark panels need a lift on a near-black page */
[data-theme="dark"] .band-dark, [data-theme="dark"] .cta-dark, [data-theme="dark"] .story-side, [data-theme="dark"] .auth-panel { box-shadow: inset 0 0 0 1px var(--on-dark-07); }

/* --- dark theme: component overrides (hard-coded light colours) --- */
.btn.light { --b-fg: var(--ink-fixed); }   /* white button always carries dark text */
[data-theme="dark"] .site-header { background: rgba(18,16,18,.82); }
[data-theme="dark"] .duo-card.connect { background: linear-gradient(170deg, #211c38 0%, #1d1930 60%, #19162a 100%); }
[data-theme="dark"] .duo-card.cloud { background: linear-gradient(170deg, #152826 0%, #142321 60%, #121e1d 100%); }
[data-theme="dark"] .sx-hero { background-color: var(--violet-950);
  background-image: radial-gradient(rgba(181,165,255,.16) 1px, transparent 1.4px), radial-gradient(110% 90% at 100% 100%, rgba(143,132,245,.35), transparent 62%), linear-gradient(165deg, #241e40 0%, var(--violet-950) 55%, #1a1630 100%); }
[data-theme="dark"] .sx.cloud .sx-hero { background-color: #0f2a2c;
  background-image: radial-gradient(rgba(109,166,166,.18) 1px, transparent 1.4px), radial-gradient(110% 90% at 100% 100%, rgba(37,116,124,.45), transparent 62%), linear-gradient(165deg, #163a3d 0%, #0f2a2c 55%, #0b2224 100%); }
[data-theme="dark"] .sx-hero .sx-label { color: var(--connect-pale); }
[data-theme="dark"] .sx.cloud .sx-hero :is(.sx-label, .sx-num) { color: var(--cloud-pale); }
[data-theme="dark"] .sx.cloud .sx-chips span { background: rgba(109,166,166,.16); color: var(--cloud-pale); }
[data-theme="dark"] .sx-logos img { filter: brightness(0) invert(1); opacity: .7; }
[data-theme="dark"] .sx-hotels span { background: rgba(109,166,166,.16); color: var(--cloud-pale); }
[data-theme="dark"] .sx-hotels span:nth-child(3n) { background: var(--cloud); color: var(--white); }
[data-theme="dark"] .mega-feature { background: linear-gradient(160deg, var(--connect-wash), var(--surface) 70%); }
[data-theme="dark"] .mega-feature.cloud { background: linear-gradient(160deg, var(--cloud-wash), var(--surface) 70%); }
[data-theme="dark"] .cap-tile.tint-connect { background: linear-gradient(180deg, var(--surface), var(--connect-wash)); }
[data-theme="dark"] .cap-tile.tint-cloud { background: linear-gradient(180deg, var(--surface), var(--cloud-wash)); }
[data-theme="dark"] .quote.tint-connect { background: linear-gradient(150deg, var(--surface) 40%, var(--connect-wash)); }
[data-theme="dark"] .quote.tint-cloud { background: linear-gradient(150deg, var(--surface) 40%, var(--cloud-wash)); }
[data-theme="dark"] .solution-banner.connect { background: linear-gradient(90deg, var(--connect-wash), var(--surface) 70%); }
[data-theme="dark"] .solution-banner.cloud { background: linear-gradient(90deg, var(--cloud-wash), var(--surface) 70%); }
[data-theme="dark"] .b-tile.b-hero { background: linear-gradient(160deg, #241e40 0%, var(--violet-950) 60%, #2a2150 100%); }
[data-theme="dark"] .ptable-title, [data-theme="dark"] .ptable tbody tr:hover { background: var(--panel); }
[data-theme="dark"] .faq-item[open] .pm::before, [data-theme="dark"] .faq-item[open] .pm::after { background: var(--on-ink); }
[data-theme="dark"] .mock-tabs span.on, [data-theme="dark"] .hotel-card { background: var(--panel-2); }
[data-theme="dark"] .sx-chips span { background: rgba(244,199,132,.14); color: var(--code-num); }
[data-theme="dark"] .nav-trigger:hover, [data-theme="dark"] .nav-link:hover, [data-theme="dark"] .nav-item.open .nav-trigger { background: var(--on-dark-06); }
[data-theme="dark"] .mega-backdrop { background: rgba(0,0,0,.45); }

/* ---------- Utilities ----------
   Single-purpose classes for the layout/colour declarations pages used to set inline (each was used 3+ times).
   !important keeps the precedence the inline style had, so swapping one for the other never changes rendering. */
.u-fw500 { font-weight:500 !important; }
.u-grid { display:grid !important; }
.u-flex { display:flex !important; }
.u-gap-6 { gap:6px !important; }
.u-gap-8 { gap:8px !important; }
.u-gap-10 { gap:10px !important; }
.u-gap-12 { gap:12px !important; }
.u-gap-14 { gap:14px !important; }
.u-gap-16 { gap:16px !important; }
.u-gap-18 { gap:18px !important; }
.u-jc-between { justify-content:space-between !important; }
.u-jc-center { justify-content:center !important; }
.u-ac-start { align-content:start !important; }
.u-ai-start { align-items:start !important; }
.u-ai-center { align-items:center !important; }
.u-ji-center { justify-items:center !important; }
.u-js-end { justify-self:end !important; }
.u-mt-8 { margin-top:8px !important; }
.u-mt-16 { margin-top:16px !important; }
.u-mt-28 { margin-top:28px !important; }
.u-mt-40 { margin-top:40px !important; }
.u-m0 { margin:0 !important; }
.u-p-14 { padding:14px !important; }
.u-p-22 { padding:22px !important; }
.u-pt-stage { padding-top:clamp(32px, 4vw, 56px) !important; }
.u-rel { position:relative !important; }
.u-w100 { width:100% !important; }
.u-minw0 { min-width:0 !important; }
.u-mw-420 { max-width:420px !important; }
.u-tc { text-align:center !important; }
.u-r10 { border-radius:10px !important; }
.u-fs-12 { font-size:12px !important; }
.u-fs-13 { font-size:13px !important; }
.u-fs-13-5 { font-size:13.5px !important; }
.u-display { font-family:var(--f-display) !important; }
.u-ink { color:var(--ink) !important; }
.u-connect { color:var(--connect) !important; }
.u-white { color:var(--white) !important; }
.u-success { color:var(--success-text) !important; }
.u-on-dark-50 { color:var(--on-dark-50) !important; }
.u-bg-on-dark-08 { background:var(--on-dark-08) !important; }

/* Customer logos in quote slots: rendered monochrome so every brand sits in the same voice as the logo wall */
.story-side .s-logo { display: block; height: 34px; width: auto; max-width: 200px; object-fit: contain; object-position: left center; filter: brightness(0) invert(1); opacity: .92; }
.quote .q-brand .q-logo { display: block; height: 34px; width: auto; max-width: 190px; margin-left: auto; object-fit: contain; object-position: right center; filter: brightness(0); opacity: .8; }
[data-theme="dark"] .quote .q-brand .q-logo { filter: brightness(0) invert(1); opacity: .88; }
@media (max-width: 860px) { .quote .q-brand .q-logo { margin-left: 0; object-position: left center; } }
/* stacked (near-square) marks need more height than wordmarks to read at the same visual weight */
.story-side .s-logo[src*="royal-air-maroc"], .quote .q-brand .q-logo[src*="royal-air-maroc"] { height: 56px; }
/* full-colour brand marks (e.g. Royal Air Maroc red) keep their colour instead of the monochrome logo treatment */
.story-side .s-logo[src*="-red."], .quote .q-brand .q-logo[src*="-red."],
[data-theme="dark"] .story-side .s-logo[src*="-red."], [data-theme="dark"] .quote .q-brand .q-logo[src*="-red."] { filter: none; opacity: 1; }

/* menu feature card with a customer logo: dark brand mark on the white image panel (stays white in dark mode) */
.mf-img.logo img { object-fit: contain; padding: 14% 24%; }

/* phones: the hero section also holds the logo strip and product cards, so a %-based top offset pushed the
   glow ~400px up behind the header; pin it just under the header instead */
@media (max-width: 900px) {
  .hero-glow { top: -60px; height: 560px; opacity: .7; }
}
/* hero-test (animation in the hero): on phones tighten the copy block so the whole animation sits in the first screen */
@media (max-width: 900px) {
  .hero-has-tiles:has(.hero-anim) .hero-inner { padding-top: 28px; padding-bottom: 4px; gap: 18px; }
  .hero-has-tiles:has(.hero-anim) .hero-anim { margin: 8px auto 32px; }
}
@media (max-width: 600px) {
  /* hero-test: the two CTAs share one row so the animation clears the first screen */
  .hero-has-tiles:has(.hero-anim) .hero-inner > .row { flex-direction: row; flex-wrap: nowrap; gap: 10px; align-items: stretch; }
  .hero-has-tiles:has(.hero-anim) .hero-inner > .row .dd { width: auto; flex: 1 1 0; position: static; }
  .hero-has-tiles:has(.hero-anim) .hero-inner > .row { position: relative; }
  .hero-has-tiles:has(.hero-anim) .hero-inner > .row > .btn { flex: 1 1 0; }
  .hero-has-tiles:has(.hero-anim) .hero-inner > .row .btn.lg { padding: 0 12px; font-size: 15px; }
  .hero-has-tiles:has(.hero-anim) .hero-inner > .row .dd-menu { left: 0; width: 100%; }
}

/* ---------- Usage comparison (Connect pricing) ----------
   Capability + muted description (carrying the indicative price) on the left; availability only in three equal,
   centred plan columns. Same widths in every section so the five tables line up. */
.utable { table-layout: fixed; min-width: 800px; }
.utable thead th:first-child, .utable tbody th { width: auto; }
.utable .u-plan { width: 128px; text-align: center; }
.utable .u-price { width: 168px; text-align: left; vertical-align: top; padding: 16px 14px; }
.utable td.u-price b { display: block; font-weight: 500; font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; }
.utable td.u-price span { display: block; margin-top: 3px; font-size: 12px; line-height: 1.4; color: var(--muted); }
.utable tbody th { text-align: left; font-weight: 400; padding: 16px 22px; border-bottom: 1px solid var(--line); vertical-align: top; }
.utable tbody tr:last-child th { border-bottom: 0; }
.utable tbody th b { display: block; font-weight: 500; color: var(--ink); font-size: 14.5px; }
.utable tbody th span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--muted); max-width: 46rem; }
.utable td.u-plan { vertical-align: middle; }
.utable .pro { background: color-mix(in srgb, var(--connect-wash) 55%, transparent); }
.utable thead th.pro { color: var(--connect); }
.u-yes { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--success-bg); color: var(--success-text); }
.u-label { display: inline-block; font-size: 12.5px; font-weight: 500; color: var(--ink-2); padding: 2px 8px; border-radius: 6px; background: var(--panel); }
.u-no { display: inline-block; width: 12px; height: 2px; border-radius: 2px; background: var(--line-2); vertical-align: middle; }
.utable-note { max-width: 60rem; }
@media (max-width: 600px) {
  /* phones: the capability column stays pinned while the three plan columns scroll beside it */
  .utable { min-width: 0; width: max-content; }
  .utable thead th:first-child, .utable tbody th { position: sticky; left: 0; z-index: 1; width: 200px; min-width: 200px; max-width: 200px; background: var(--surface); box-shadow: 1px 0 0 var(--line); }
  .utable .u-plan { width: 76px; min-width: 76px; }
  .utable .u-price { width: 120px; min-width: 120px; padding: 14px 10px; }
  .utable tbody th { padding: 14px 14px; }
  .utable tbody tr:hover th { background: var(--surface); }
}

/* Flights coverage: airline tiles (logo when provided in images/airlines/, wordmark otherwise) + "+600" band */
.air-tiles { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 4px; }
.air-tile { display: grid; place-items: center; min-height: 44px; padding: 8px 10px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); text-align: center; }
.air-tile span { font-family: var(--f-display); font-weight: 500; font-size: 13.5px; letter-spacing: -0.01em; color: var(--ink-2); line-height: 1.2; }
.air-tile.logo img { max-height: 30px; width: auto; max-width: 100%; filter: brightness(0); opacity: .55; }
[data-theme="dark"] .air-tile.logo img { filter: brightness(0) invert(1); opacity: .8; }
.air-more { display: flex; align-items: baseline; justify-content: center; gap: 12px; margin-top: 16px; padding: 22px; border-radius: var(--radius-l); background: var(--connect-wash); border: 1px solid var(--connect-tint); }
.air-more b { font-family: var(--f-display); font-weight: 500; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.04em; color: var(--connect); line-height: 1; }
.air-more span { font-size: 16px; color: var(--ink-2); }
@media (max-width: 600px) { .air-more { flex-direction: column; align-items: center; gap: 4px; text-align: center; } }

/* homepage Connect/Cloud switch: product logo inside each tab (the panels no longer repeat it) */
.seg-btn img { display: inline-block; width: auto; height: 26px; margin-right: 8px; vertical-align: -7px; }

/* Home: once the Connect / Cloud switch has scrolled away, a vertical logo rail pins top-left of the content while the
   product panels are on screen (wide screens only — narrower ones have no side gutter to hold it) */
.seg-rail { display: none; }
@media (min-width: 1400px) {
  .seg-rail { display: flex; flex-direction: column; gap: 4px; padding: 4px; position: fixed; z-index: 30; top: calc(var(--header-h) + 24px);
    left: max(12px, calc((100vw - var(--container)) / 2 - 76px)); transform: translateX(-8px); opacity: 0; visibility: hidden;
    border-radius: 12px; border: 1px solid var(--line); box-shadow: var(--shadow);
    background: color-mix(in srgb, var(--panel) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    transition: opacity .25s, transform .25s, visibility 0s .25s; }
  .platform-switch.rail-on .seg-rail { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .25s; }
  .seg-rail button { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 9px; transition: background .2s, box-shadow .2s; }
  .seg-rail button img { width: auto; height: 28px; opacity: .5; transition: opacity .2s; }
  .seg-rail button:hover img, .seg-rail button[aria-pressed="true"] img { opacity: 1; }
  .seg-rail button[aria-pressed="true"] { background: var(--surface); box-shadow: var(--shadow-s); }
}

/* Yonder's two-tone mark keeps its own greys on light panels; on dark ones it is inverted so the ink part stays visible */
.quote .q-brand .q-logo[src*="yonder"] { filter: none; opacity: 1; height: 30px; }
[data-theme="dark"] .quote .q-brand .q-logo[src*="yonder"] { filter: invert(1); opacity: .92; }

/* animated hero illustrations (enterprise, startups): inline SVG, scales with its column */
.hero-art svg { display: block; width: 100%; height: auto; max-width: 640px; margin-inline: auto; }
[data-theme="dark"] .hero-art svg > ellipse:first-of-type { opacity: .22; } /* the lavender halo reads as a light blob on dark */

/* customer app screenshot (storefront quote): the phone rises from the bottom edge of the dark panel */
.media.phone-shot { height: 100%; min-height: 360px; display: grid; justify-items: center; align-items: end; padding-bottom: 0; overflow: hidden; }
.media.phone-shot img { width: min(62%, 280px); height: auto; margin-bottom: -18%; filter: drop-shadow(0 24px 40px rgba(0,0,0,.45)); }

/* Long-form articles (blog/*.html): a narrow reading column with pull quotes */
.article-hero .hero-inner { gap: 20px; }
.ico.flip { transform: scaleX(-1); }
.byline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; color: var(--muted); }
.byline b { color: var(--ink); font-weight: 500; }

/* Article sidebar (/insights/[slug] and the hand-written article): one sticky right column, share icons then "In this article"; above the article under 1080px */
.article-layout { display: grid; grid-template-columns: minmax(0, 46rem) minmax(220px, 300px); justify-content: space-between; gap: clamp(32px, 6vw, 96px); align-items: start; }
.article-main { min-width: 0; }
.article-aside { position: sticky; top: 112px; display: grid; gap: 40px; }
.share-row { display: flex; align-items: center; gap: 28px; }
.share-row a { display: inline-grid; place-items: center; color: var(--muted); transition: color .2s; }
.share-row a:hover, .share-row a:focus-visible { color: var(--ink); }
.article-toc-title { margin: 0; padding-bottom: 14px; border-bottom: 1px solid var(--line-2); font-family: var(--f-display); font-weight: 600; font-size: 16px; color: var(--ink); }
.article-toc ol { display: grid; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.article-toc a { display: block; font-size: 15px; line-height: 1.4; color: var(--muted); transition: color .2s; }
.article-toc a:hover, .article-toc a[aria-current="true"] { color: var(--ink); }
.prose [id] { scroll-margin-top: 112px; }
@media (max-width: 1080px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); }
  .article-aside { position: static; order: -1; gap: 28px; }
}

/* Contentful article hero (/insights/[slug]): image top left on a neutral panel, title and details on the right; stacked on phones */
.post-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; padding-block: clamp(24px, 4vw, 48px); }
.post-hero-media { display: grid; place-items: center; aspect-ratio: 4 / 3; }
.post-hero-media img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 12px; }
.post-hero .post-hero-copy { gap: 18px; padding: 0; }
.post-hero-copy .h1 { font-size: clamp(2rem, 3.4vw, 3rem); }
.post-meta { gap: 6px 14px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
@media (max-width: 860px) { .post-hero-grid { grid-template-columns: 1fr; gap: 24px; } .post-hero-media { aspect-ratio: auto; } .post-hero-media img { height: auto; } }
.prose { max-width: 680px; margin: 0; display: grid; gap: 1.15em; font-size: 1.125rem; line-height: 1.75; color: var(--ink-2); }
.prose p { margin: 0; text-wrap: pretty; }
.prose .pull { margin: .9em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--cloud); font-family: var(--f-display);
  font-size: clamp(1.35rem, 2.2vw, 1.7rem); line-height: 1.3; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }

/* Contact sales: desktop keeps the intro + support card pinned beside the form; on phones the form comes straight after
   the title (no floating sticky block) and the support card drops below it */
.sales-side { display: grid; gap: 28px; align-content: start; }
@media (min-width: 861px) { .sales-side { position: sticky; top: calc(var(--header-h) + 40px); } }
@media (max-width: 860px) {
  .sales-side { display: contents; }
  .sales-copy { order: 1; }
  .sales-form { order: 2; }
  .sales-support { order: 3; }
}

/* Homepage first screen (fold review 2026-10-19) */
.announce .a-short { display: none; }
@media (max-width: 600px) {
  /* phones: one-line announcement — the whole bar text is the link, badge/long copy/button hidden */
  .announce .container { min-height: 40px; padding-top: 0; padding-bottom: 0; justify-content: flex-start; }
  .announce .a-text, .announce .a-link { display: none; }
  .announce .a-short { display: inline-flex; align-items: center; gap: 6px; color: var(--white); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .announce .a-short .ico { flex-shrink: 0; }
  /* sized to fit under the buttons on a standard phone screen */
  .hero-has-tiles:has(.hero-anim) .hero-anim { width: 90%; }
}
@media (min-width: 901px) {
  /* desktop: space above/below the hero copy follows the screen height, so on 1440×900 / 1536×864 laptops the
     first row of partner logos sits inside the first screen instead of being cut in half */
  .hero-has-tiles:has(.hero-anim) .hero-inner { padding-top: clamp(48px, min(9vw, 9vh), 120px); padding-bottom: clamp(40px, min(7vw, 6vh), 88px); }
  .hero-has-tiles:has(.hero-anim) .hero-anim { width: clamp(340px, min(40vw, 60vh), 560px); right: clamp(0px, 2.5vw, 44px); } /* nudged in from the right edge so the channel labels don't sit on the rail */
}

/* Panels that stay dark in the light theme get the dark theme's readable green too */
.band-dark, .cta-dark, .plan.featured, .media.dark, .media.night-connect, .media.night-cloud {
  --success-text: #7be08f; --success-bg: rgba(63,174,74,.16); }
.hero-stage > .cs-list:first-child { margin-top: 0; }

/* Dark mode: every tick box uses the same lavender-on-purple as the Pro plan / Enterprise lists
   (usage-table ticks, included ticks in plan tables, and Connect check lists) */
[data-theme="dark"] .u-yes { background: rgba(181,165,255,.2); color: #b5a5ff; }
[data-theme="dark"] .ptable .inc { color: var(--ink); }
[data-theme="dark"] .ptable .inc::before { background: rgba(181,165,255,.2); color: #b5a5ff; }
[data-theme="dark"] .checks:not(.cloud) li::before { background-color: rgba(181,165,255,.2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.5L14 7.5' fill='none' stroke='%23b5a5ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* Cloud Portfolio illustrations: inline SVG mockups on the cloud gradient frame */
.pf-art svg { display: block; width: 100%; height: auto; }
.fh-wrap { width: 100%; max-width: 600px; justify-self: center; } /* stays / flights / experiences hero animations, inlined on the page background */
[data-theme="dark"] .fh-wrap .hp-route { stroke: rgba(255,255,255,.28); }
[data-theme="dark"] .fh-wrap .hp-muted { fill: rgba(255,255,255,.45); }
[data-theme="dark"] .fh-wrap .hp-ink { fill: #f3f1f7; }
[data-theme="dark"] .fh-wrap .hp-pill { stroke: rgba(255,255,255,.2); }

/* nuitee.dev banner: buttons sit under the copy; the site's FIG. 1 wireframe fills the right column */
.devbanner .db-copy .db-actions { justify-content: flex-start; padding-left: 0; margin-top: 6px; }
.db-fig { display: block; width: clamp(280px, 34vw, 440px); }
.db-fig img { display: block; width: 100%; height: auto; }
@media (max-width: 860px) { .db-fig { width: 100%; max-width: 440px; padding-left: clamp(16px, 2vw, 28px); } }

/* Pricing pages: tighter gap between the intro / billing toggle and the plan cards */
.pricing-hero .hero-inner { padding-bottom: clamp(20px, 2.5vw, 32px); }
.pricing-hero .hero-stage { padding-top: clamp(16px, 2vw, 28px) !important; }

/* Cloud hero: "direct evolving" diagram sits straight on the hero like the homepage animation (no panel); in dark mode
   the free-standing labels switch to light ink, the white channel cards stay as they are */
.cdv-art { max-width: 600px; margin-inline: auto; }
.cdv-art svg { display: block; width: 100%; height: auto; overflow: visible; }
[data-theme="dark"] #cdv > g > g > text[fill="#48434a"], [data-theme="dark"] #cdv text.k55, [data-theme="dark"] #cdv text.k56 { fill: var(--muted); }
[data-theme="dark"] #cdv text.tlb { fill: #6be2d0; }
[data-theme="dark"] #cdv line[stroke="#e3dfe0"] { stroke: rgba(255,255,255,.14); }