/* Graybook Technologies site: one stylesheet for all five pages.
   Theme: our design.md system (navy, ocean and electric blue, Georgia serif headings, 4px corners)
   with a light gray instead of the cream, a gray drifting-gradient hero inset from the corners,
   and the coast video loop (in gray) behind each closing band. Content and structure follow Scott's package
   (we-specialize-in.md). Service accents: Build = blue, Host = coral, Colocate = green. */

/* Inter (hero, logo and the logo row) and Syne (hero headline), self-hosted like graybook.co */
@font-face { font-family: "Syne"; font-style: normal; font-display: swap; font-weight: 400 800; src: url("../fonts/syne-latin-wght-normal.woff2") format("woff2-variations"); 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; }
@font-face { font-family: "Syne"; font-style: normal; font-display: swap; font-weight: 400 800; src: url("../fonts/syne-latin-ext-wght-normal.woff2") format("woff2-variations"); 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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations"); 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; }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations"); 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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  --navy: #0B2E4C;
  --navy-deep: #101114;
  /* The Vig panel's background in the Graybook platform: replaces navy for every dark area */
  --dark: #17191D;
  --navy-2: #0F3A5E;
  --ocean-blue: #1D6FFF;
  --electric-blue: #4253FF;
  --golden: #EFDF6C;
  --coral: #ED724C;
  --forest-green: #138C06;
  --green-on-dark: #5FD47A;
  --blue-on-dark: #8FB3FF;
  --coral-on-dark: #FF9C7D;

  --off-white: #CFD3D8;
  --white: #FFFFFF;
  --light-gray: #E6EBF5;
  --pale-gray: #E6E6E4;
  --muted: #4E6478;
  --line-dark: rgba(248, 248, 246, 0.14);
  --text-on-dark: rgba(248, 248, 246, 0.92);
  --muted-on-dark: rgba(248, 248, 246, 0.68);
  --faint-on-dark: rgba(248, 248, 246, 0.5);

  --blue-soft: #EAF0FF;
  --coral-soft: #FDEDE7;
  --green-soft: #E7F4E4;

  --error-red: #E31700;

  --font-serif: 'Georgia', 'Times New Roman', Times, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-inter: 'Inter', var(--font-sans);
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;

  --max-width: 1368px;
  --pad: 32px;
  --section: 100px;
  --shadow-sub: 0 2px 8px rgba(11, 46, 76, 0.08);
  --shadow-raise: 0 8px 24px rgba(11, 46, 76, 0.12);
  --shadow-deep: 0 16px 48px rgba(11, 46, 76, 0.16);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: var(--font-sans); font-size: 16px; line-height: 1.5; color: var(--navy); background: var(--off-white); overflow-x: hidden; }
img, svg { max-width: 100%; }
a { color: var(--electric-blue); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--ocean-blue); text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ocean-blue); outline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--white); color: var(--navy); padding: 10px 16px; border-radius: 4px; }
.skip:focus { left: 16px; }
.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; }

h1, h2, h3 { font-family: var(--font-serif); font-weight: 300; line-height: 1.08; letter-spacing: -0.01em; }
h1 { font-size: clamp(36px, 4.2vw, 60px); line-height: 1.04; letter-spacing: -0.02em; }
h2 { font-size: clamp(30px, 3.4vw, 48px); }
h3 { font-size: clamp(21px, 1.7vw, 26px); }
p { line-height: 1.625; }
.lead { font-size: 16px; line-height: 1.6; max-width: 560px; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.eyebrow { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ocean-blue); margin-bottom: 16px; }
.on-dark .eyebrow, .eyebrow.light { color: var(--golden); }

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--pad); }
.section { padding: var(--section) 0; }
.section.white { background: var(--white); }
.section.tint { background: var(--off-white); }
.section-head { max-width: 820px; margin-bottom: 48px; }
.section-head h2 { margin-bottom: 18px; }
.section-head p { max-width: 680px; color: var(--muted); }
.head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 48px; }
.head-row .section-head { margin-bottom: 0; }
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

/* Placeholders still to be supplied: [like this] */
mark.ph { background: rgba(239, 223, 108, 0.35); color: inherit; padding: 0 3px; border-radius: 3px; box-shadow: inset 0 -1px 0 rgba(11, 46, 76, 0.25); }
.on-dark mark.ph, .hero mark.ph, .band mark.ph, .footer mark.ph { background: rgba(239, 223, 108, 0.22); box-shadow: none; }

/* ---------------- Buttons ---------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 28px; border-radius: 4px; font-family: var(--font-sans); font-size: 16px; font-weight: 500; line-height: 1; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; white-space: nowrap; }
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--electric-blue); border-color: var(--electric-blue); color: var(--white); }
.btn-primary:hover { background: var(--ocean-blue); border-color: var(--ocean-blue); color: var(--white); }
.btn-light { background: var(--white); color: var(--navy); }
.btn-light:hover { background: rgba(255, 255, 255, 0.9); color: var(--navy); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--white); border-color: rgba(248, 248, 246, 0.6); }
.btn-ghost:hover { border-color: var(--white); color: var(--white); background: rgba(255, 255, 255, 0.06); }
.btn-dark { background: var(--dark); color: var(--white); }
.btn-dark:hover { background: var(--navy-2); color: var(--white); }
.btn-outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-outline:hover { color: var(--ocean-blue); border-color: var(--ocean-blue); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.link-arrow { font-weight: 500; }

/* ---------------- Tags ---------------- */
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.tag.build { background: var(--blue-soft); color: #1550C8; }
.tag.host { background: var(--coral-soft); color: #B4472A; }
.tag.colo { background: var(--green-soft); color: #0E6B05; }
.tag.d-build { background: rgba(143, 179, 255, 0.14); border: 1px solid rgba(143, 179, 255, 0.35); color: var(--blue-on-dark); }
.tag.d-host { background: rgba(255, 156, 125, 0.14); border: 1px solid rgba(255, 156, 125, 0.35); color: var(--coral-on-dark); }
.tag.d-colo { background: rgba(95, 212, 122, 0.14); border: 1px solid rgba(95, 212, 122, 0.35); color: var(--green-on-dark); }
.tag.gold { background: var(--golden); color: var(--navy); }
.tag.glass { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.22); color: var(--white); }

/* ---------------- Hero (our rounded drifting gradient) ---------------- */
.hero-wrapper { background: var(--off-white); padding: 16px; }
.hero { position: relative; isolation: isolate; color: var(--white); background: #111316; border-radius: 24px; overflow: hidden; padding: 0 32px 48px; }
/* The coast video (gray) under the drifting gray gradient */
.hero .background-layer { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.hero-gradient { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(135deg, #111316 0%, #3A3E44 35%, #5B6067 65%, #111316 100%); background-size: 300% 300%; animation: heroDrift 6s ease-in-out infinite alternate; opacity: 0.8; }
.hero.full { min-height: calc(100vh - 32px); min-height: calc(100dvh - 32px); display: flex; flex-direction: column; }
@keyframes heroDrift { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } }
@media (prefers-reduced-motion: reduce) { .hero, .band { animation: none; } * { scroll-behavior: auto !important; } }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 32px 0 0; position: relative; z-index: 20; }
.brand { --h: 30px; display: inline-flex; align-items: flex-start; gap: calc(var(--h) * 0.34); line-height: 1; color: var(--white); text-decoration: none; flex: none; }
.brand:hover { color: var(--white); text-decoration: none; opacity: .9; }
.brand img { height: var(--h); width: auto; display: block; }
/* In the 2750 x 500 wordmark the capitals are 220px tall with the baseline at y 357: "Technologies"
   (Inter, cap height 0.727em, baseline 0.881em at line-height 1) matches both. */
.brand span { font-family: var(--font-inter); font-weight: 500; font-size: calc(var(--h) * 0.6054); line-height: 1; margin-top: calc(var(--h) * 0.714 - var(--h) * 0.6054 * 0.881); }
.nav { display: flex; align-items: center; gap: 30px; }
.nav a { color: rgba(255, 255, 255, 0.82); font-size: 15px; text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--white); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--white); font-weight: 700; }
.nav .btn { min-height: 42px; padding: 0 20px; font-size: 14px; border-bottom: 0; }
.nav .btn-light, .nav .btn-light:hover { color: var(--navy); }
.menu-btn { display: none; min-width: 44px; min-height: 44px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.28); color: var(--white); cursor: pointer; align-items: center; justify-content: center; }
.menu-btn svg { width: 20px; height: 20px; }

.hero-body { position: relative; z-index: 5; padding-top: 72px; }
/* Home hero: the header floats at the top so the content sits in the true middle of the box */
.hero.full { padding-bottom: 0; }
.hero.full .topbar { position: absolute; top: 0; left: 32px; right: 32px; }
.hero.full .hero-body { flex: 1; display: flex; align-items: center; padding-top: 96px; padding-bottom: 96px; }
@media (max-width: 768px) { .hero.full .topbar { left: 20px; right: 20px; } .hero.full .hero-body { padding-top: 96px; padding-bottom: 40px; } }
.hero h1 { color: var(--white); }
.hero .lead { color: rgba(255, 255, 255, 0.85); margin-top: 22px; }
.hero .btn-row { margin-top: 34px; }
.hero-split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; width: 100%; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.22); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 13.5px; color: rgba(255, 255, 255, 0.9); margin-bottom: 24px; }
.pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--golden); }
.built { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 26px; margin-top: 34px; font-family: var(--font-inter); font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.85); }
.built span { display: inline-flex; align-items: center; gap: 9px; }
.built svg { width: 18px; height: 18px; fill: var(--white); flex: none; }
.built svg.stroke { fill: none; stroke: var(--white); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* The Graybook line kept from our first version (glass card + mark) */
.glass-note { display: inline-flex; align-items: center; gap: 14px; margin-top: 28px; padding: 14px 18px; border-radius: 12px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); max-width: 460px; }
.glass-note p { font-size: 14.5px; line-height: 1.4; color: rgba(255, 255, 255, 0.88); }
.gb-mark { flex: none; width: 26px; height: 24px; background: url("../media/graybook-wordmark-white.png") no-repeat; background-size: 190.7px auto; background-position: -5.7px -5.3px; }

/* ---------------- Mock product panels ---------------- */
.panel { background: var(--navy-deep); border: 1px solid var(--line-dark); border-radius: 12px; box-shadow: 0 30px 60px rgba(4, 16, 30, 0.45); overflow: hidden; color: var(--text-on-dark); }
.panel-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line-dark); font-family: var(--font-mono); font-size: 12px; color: var(--muted-on-dark); }
.panel-bar .dots { display: flex; gap: 6px; margin-right: 6px; }
.panel-bar .dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(248, 248, 246, 0.2); }
.panel-bar .right { margin-left: auto; }
.sample { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint-on-dark); border: 1px solid var(--line-dark); border-radius: 4px; padding: 2px 6px; }
.code { font-family: var(--font-mono); font-size: 13px; line-height: 1.75; padding: 18px 20px; color: #C9D2E3; white-space: pre-wrap; overflow-wrap: anywhere; }
.code .k { color: var(--coral-on-dark); } .code .f { color: var(--blue-on-dark); } .code .s { color: var(--golden); } .code .c { color: #6F84A3; }
.visual-stack { position: relative; padding-bottom: 70px; }
.monitor { position: absolute; right: -8px; bottom: 0; width: min(330px, 80%); padding: 18px; border-radius: 12px; background: rgba(7, 31, 53, 0.82); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 24px 48px rgba(4, 16, 30, 0.45); }
.monitor-head { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; font-weight: 600; margin-bottom: 10px; color: var(--white); }
.monitor svg { display: block; width: 100%; height: 58px; }
.readouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.readouts b { display: block; font-family: var(--font-mono); font-size: 16px; color: var(--white); font-weight: 600; }
.readouts span { font-size: 11px; color: var(--muted-on-dark); }
.live { color: var(--green-on-dark) !important; }

/* ---------------- Cards ---------------- */
.card { background: var(--white); border: 1px solid var(--light-gray); border-radius: 4px; padding: 32px; transition: box-shadow .3s ease, transform .3s ease, border-color .2s ease; }
.card:hover { box-shadow: var(--shadow-raise); transform: translateY(-3px); }
.card h3 { margin: 14px 0 10px; }
.card p { color: var(--muted); font-size: 15.5px; }
.icon-tile { width: 44px; height: 44px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; }
.icon-tile svg { width: 22px; height: 22px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-tile.build { background: var(--blue-soft); } .icon-tile.build svg { stroke: var(--ocean-blue); }
.icon-tile.host { background: var(--coral-soft); } .icon-tile.host svg { stroke: var(--coral); }
.icon-tile.colo { background: var(--green-soft); } .icon-tile.colo svg { stroke: var(--forest-green); }
.icon-tile.navy { background: var(--light-gray); } .icon-tile.navy svg { stroke: var(--navy); }
.on-dark .card { background: rgba(255, 255, 255, 0.04); border-color: var(--line-dark); }
.on-dark .card p { color: var(--muted-on-dark); }
.on-dark .card h3 { color: var(--white); }
.on-dark .icon-tile { background: rgba(255, 255, 255, 0.08); }
.on-dark .icon-tile svg { stroke: var(--green-on-dark); }

/* Service cards (home) */
.svc { background: var(--white); border: 1px solid var(--light-gray); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .3s ease, transform .3s ease; }
.svc:hover { box-shadow: var(--shadow-raise); transform: translateY(-3px); }
.svc-visual { height: 190px; background: var(--navy-deep); position: relative; overflow: hidden; color: var(--text-on-dark); }
.svc-visual .code { font-size: 12px; line-height: 1.7; padding: 22px; }
.svc-body { padding: 28px 30px 32px; display: flex; flex-direction: column; flex: 1; }
.svc-body h3 { margin: 14px 0 12px; }
.svc-body p { color: var(--muted); font-size: 15.5px; }
.checks { list-style: none; margin: 18px 0 22px; display: grid; gap: 8px; font-size: 15px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; }
.checks li::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 4px; border-radius: 50%; background: var(--blue-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%231D6FFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.svc-body .link-arrow { margin-top: auto; }
.rows { padding: 22px; display: grid; gap: 10px; font-family: var(--font-mono); font-size: 12px; }
.rows .row { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--line-dark); border-radius: 6px; background: rgba(255, 255, 255, 0.03); }
.rows .head { display: flex; justify-content: space-between; color: var(--faint-on-dark); letter-spacing: .12em; text-transform: uppercase; font-size: 10.5px; }
.mini-path { height: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 18px; font-family: var(--font-mono); font-size: 11.5px; text-align: center; }
.mini-path .box { border: 1px solid var(--line-dark); border-radius: 6px; padding: 12px 10px; background: rgba(255, 255, 255, 0.04); color: var(--white); }
.mini-path .wire { flex: 1; min-width: 28px; height: 2px; background: linear-gradient(90deg, var(--green-on-dark), rgba(95, 212, 122, 0.25)); position: relative; }
.mini-path small { display: block; color: var(--muted-on-dark); margin-top: 4px; font-size: 10px; }

/* Dark band (navy) */
.on-dark { background: var(--dark); color: var(--text-on-dark); }
.on-dark h2, .on-dark h3 { color: var(--white); }
.on-dark .section-head p, .on-dark p { color: var(--muted-on-dark); }
.stages { list-style: none; display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.stage { border: 1px solid var(--line-dark); border-radius: 4px; padding: 30px; background: rgba(255, 255, 255, 0.03); display: flex; flex-direction: column; gap: 12px; }
.stage .num { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; color: var(--faint-on-dark); }
.stage .tag { align-self: flex-start; margin-top: auto; }
.rule { height: 4px; border-radius: 2px; margin-top: 48px; background: linear-gradient(90deg, var(--ocean-blue), var(--coral), var(--forest-green)); }

/* Plans */
.plan { background: var(--white); border: 1px solid var(--light-gray); border-radius: 4px; padding: 32px; display: flex; flex-direction: column; gap: 10px; }
.plan h3 { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.plan .fit { color: var(--muted); font-size: 15px; }
.plan .price { font-family: var(--font-serif); font-size: 42px; font-weight: 300; margin: 10px 0 2px; }
.plan .price small { font-family: var(--font-sans); font-size: 15px; color: var(--muted); }
.plan .spec { font-family: var(--font-mono); font-size: 13px; color: var(--muted); line-height: 1.8; margin-bottom: 18px; }
.plan .btn { margin-top: auto; width: 100%; }
.plan.featured { background: var(--dark); border-color: var(--dark); color: var(--white); transform: translateY(-8px); box-shadow: 0 24px 60px rgba(11, 46, 76, 0.35); }
.plan.featured .fit, .plan.featured .spec, .plan.featured .price small { color: var(--muted-on-dark); }
.plans { align-items: start; }

/* Testimonial */
.quote { max-width: 980px; margin: 0 auto; text-align: center; }
.quote .mark { font-family: var(--font-serif); font-size: 84px; line-height: .6; color: var(--coral); display: block; margin-bottom: 18px; }
.quote blockquote { font-family: var(--font-serif); font-size: clamp(24px, 2.6vw, 34px); font-weight: 300; line-height: 1.3; }
.person { display: inline-flex; align-items: center; gap: 14px; margin-top: 30px; text-align: left; }
.avatar { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--navy), var(--ocean-blue)); color: var(--white); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 18px; flex: none; }
.person b { display: block; }
.person span { color: var(--muted); font-size: 14px; }

/* CTA band (same drifting gradient as the hero) */
.band { border-radius: 24px; padding: 56px; color: var(--white); background: linear-gradient(135deg, #0B2E4C 0%, #1D6FFF 45%, #4253FF 75%, #0B2E4C 100%); background-size: 300% 300%; animation: heroDrift 8s ease-in-out infinite alternate; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.band h2 { color: var(--white); max-width: 760px; }
.band p { color: rgba(255, 255, 255, 0.82); margin-top: 12px; }

/* Footer */
.footer { background: var(--dark); color: var(--muted-on-dark); padding: 72px 0 32px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer .brand { --h: 24px; margin-bottom: 18px; }
.footer h4 { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint-on-dark); font-weight: 600; margin-bottom: 16px; }
.footer ul { list-style: none; display: grid; gap: 10px; }
.footer a { color: rgba(248, 248, 246, 0.78); font-size: 15px; }
.footer a:hover { color: var(--golden); }
.footer p { font-size: 15px; max-width: 320px; }
.legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--line-dark); margin-top: 56px; padding-top: 24px; font-size: 13.5px; color: var(--faint-on-dark); }
.legal ul { display: flex; gap: 22px; }
.legal a { font-size: 13.5px; }

/* ---------------- Services page ---------------- */
.jump { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin-top: 48px; }
.jump a { display: block; padding: 22px 24px; border-radius: 12px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: var(--white); text-decoration: none; transition: background .2s ease, transform .2s ease; }
.jump a:hover { background: rgba(255, 255, 255, 0.14); transform: translateY(-2px); color: var(--white); }
.jump .n { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; }
.jump .n.build { color: var(--blue-on-dark); } .jump .n.host { color: var(--coral-on-dark); } .jump .n.colo { color: var(--green-on-dark); }
.jump b { display: block; font-family: var(--font-serif); font-weight: 300; font-size: 24px; margin: 8px 0 4px; }
.jump span { font-size: 14px; color: rgba(255, 255, 255, 0.75); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.split .copy h2 { margin: 16px 0 20px; }
.split .copy p + p { margin-top: 14px; }
.split .copy .btn-row { margin-top: 28px; }
.chart-card { position: absolute; right: -10px; bottom: 0; width: min(320px, 78%); background: var(--white); color: var(--navy); border: 1px solid var(--light-gray); border-radius: 12px; padding: 16px 18px; box-shadow: var(--shadow-deep); }
.chart-card .monitor-head { color: var(--navy); }
.chart-card .sample { color: var(--muted); border-color: var(--light-gray); }
.chart-card svg { display: block; width: 100%; height: 90px; }
.legend { display: flex; gap: 16px; font-size: 12px; color: var(--muted); margin-top: 6px; font-family: var(--font-mono); }
.chips-panel { margin-top: 48px; border: 1px solid var(--light-gray); border-radius: 4px; background: var(--off-white); padding: 28px 30px; display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--light-gray); background: var(--white); font-size: 14px; }
.servers { padding: 20px; display: grid; gap: 10px; font-family: var(--font-mono); font-size: 12.5px; }
.servers .row { display: grid; grid-template-columns: 1.3fr 1.2fr .7fr 1fr; gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--line-dark); border-radius: 6px; background: rgba(255, 255, 255, 0.03); }
.servers .row small { display: block; color: var(--muted-on-dark); font-size: 11px; }
.servers .actions { display: flex; gap: 10px; margin-top: 4px; }
.servers .actions span { flex: 1; text-align: center; padding: 10px; border-radius: 6px; border: 1px dashed var(--line-dark); color: var(--muted-on-dark); }
.servers .actions span:last-child { border-style: solid; background: rgba(255, 255, 255, 0.06); color: var(--white); }

.toggle { display: inline-flex; padding: 4px; border-radius: 6px; background: var(--white); border: 1px solid var(--light-gray); }
.toggle button { border: 0; background: none; padding: 9px 16px; border-radius: 4px; font-size: 14px; cursor: pointer; color: var(--muted); min-height: 40px; }
.toggle button.on { background: var(--dark); color: var(--white); }
.plan-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--white); border: 1px solid var(--light-gray); border-radius: 4px; overflow: hidden; table-layout: fixed; margin-top: 20px; }
.plan-table th { text-align: left; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--muted); background: var(--off-white); padding: 14px 16px; border-bottom: 1px solid var(--light-gray); }
.plan-table td { padding: 16px; border-bottom: 1px solid var(--light-gray); font-size: 15px; vertical-align: middle; overflow-wrap: anywhere; }
.plan-table tr:last-child td { border-bottom: 0; }
.plan-table td.num { font-family: var(--font-mono); font-size: 14px; }
.plan-table td.price { font-family: var(--font-serif); font-size: 20px; }
.plan-table tr.pop td { background: #FFFBEA; }
.plan-table .plan-name { font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plan-cards { display: none; }
.subgrid { margin-top: 32px; }
.locs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.order-path { padding: 26px; }
.op { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 10px; align-items: center; font-family: var(--font-mono); font-size: 12.5px; }
.op .node { border: 1px solid var(--line-dark); border-radius: 8px; padding: 16px 12px; background: rgba(255, 255, 255, 0.04); text-align: center; color: var(--white); }
.op .node small { display: block; color: var(--muted-on-dark); font-size: 10.5px; letter-spacing: .12em; margin-bottom: 6px; }
.op .node em { font-style: normal; display: block; color: var(--muted-on-dark); margin-top: 4px; font-size: 11.5px; }
.op .wire { width: 46px; height: 2px; background: var(--green-on-dark); position: relative; }
.op .wire::after { content: ""; position: absolute; right: -2px; top: -4px; border-left: 7px solid var(--green-on-dark); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.acked { margin-top: 16px; font-family: var(--font-mono); font-size: 12.5px; color: var(--green-on-dark); }
.op-readouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-dark); }
.op-readouts b { display: block; font-family: var(--font-mono); font-size: 18px; color: var(--white); }
.op-readouts span { font-size: 12px; color: var(--muted-on-dark); }
.loc-card { border: 1px solid var(--line-dark); border-radius: 4px; padding: 22px 24px; background: rgba(255, 255, 255, 0.03); }
.loc-card b { font-family: var(--font-mono); font-size: 18px; color: var(--white); display: block; }
.loc-card span { display: block; color: var(--muted-on-dark); font-size: 14px; margin-top: 4px; }
.loc-card em { display: block; font-style: normal; color: var(--green-on-dark); font-size: 13.5px; margin-top: 10px; }

.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 64px; align-items: start; }
.faq details { background: var(--white); border: 1px solid var(--light-gray); border-radius: 4px; padding: 0 24px; margin-bottom: 12px; }
.faq summary { cursor: pointer; list-style: none; padding: 20px 0; font-weight: 600; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-serif); font-size: 24px; line-height: 1; color: var(--ocean-blue); }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 0 20px; color: var(--muted); }

/* ---------------- Work page ---------------- */
.featured-case { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); background: var(--white); border: 1px solid var(--light-gray); border-radius: 4px; overflow: hidden; text-decoration: none; color: var(--navy); transition: box-shadow .3s ease, transform .3s ease; }
.featured-case:hover { box-shadow: var(--shadow-raise); transform: translateY(-3px); text-decoration: none; color: var(--navy); }
.case-cover { position: relative; background: linear-gradient(135deg, #0B2E4C 0%, #1D6FFF 70%, #4253FF 100%); min-height: 320px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; }
.case-cover svg { width: 100%; height: 180px; }
.featured-case .body { padding: 44px; display: flex; flex-direction: column; gap: 14px; }
.metrics { display: flex; gap: 40px; margin: 8px 0; }
.metrics b { display: block; font-family: var(--font-serif); font-size: 36px; font-weight: 300; }
.metrics span { color: var(--muted); font-size: 14px; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin: 56px 0 28px; }
.filters button { border: 1px solid var(--light-gray); background: var(--white); border-radius: 999px; padding: 9px 18px; min-height: 44px; font-size: 14.5px; cursor: pointer; color: var(--navy); }
.filters button.on { background: var(--dark); border-color: var(--dark); color: var(--white); }
.case { display: block; background: var(--white); border: 1px solid var(--light-gray); border-radius: 4px; overflow: hidden; text-decoration: none; color: var(--navy); transition: box-shadow .3s ease, transform .3s ease; }
.case:hover { box-shadow: var(--shadow-raise); transform: translateY(-3px); text-decoration: none; color: var(--navy); }
.case[hidden] { display: none; }
.case .cover { height: 180px; padding: 18px; background: var(--navy-deep); background-image: radial-gradient(circle at 80% 20%, rgba(29, 111, 255, 0.45), transparent 60%); display: flex; align-items: flex-start; }
.case .body { padding: 22px 24px 26px; }
.case .meta { font-family: var(--font-mono); font-size: 12px; color: var(--muted); letter-spacing: .06em; }
.case h3 { font-size: 22px; margin: 8px 0; }
.case p { color: var(--muted); font-size: 15px; }

/* ---------------- About page ---------------- */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.stat { padding: 24px; border-radius: 12px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.stat b { display: block; font-family: var(--font-serif); font-size: 46px; font-weight: 300; line-height: 1; color: var(--white); }
.stat b.gold { color: var(--golden); }
.stat span { display: block; margin-top: 8px; font-size: 14px; color: rgba(255, 255, 255, 0.78); }
.principle { border-top: 4px solid var(--ocean-blue); }
.principle.host { border-top-color: var(--coral); }
.principle.colo { border-top-color: var(--forest-green); }
.team { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.member { background: var(--white); border: 1px solid var(--light-gray); border-radius: 4px; padding: 30px 24px; text-align: center; transition: box-shadow .3s ease, transform .3s ease; }
.member:hover { box-shadow: var(--shadow-raise); transform: translateY(-3px); }
.member .avatar { width: 112px; height: 112px; font-size: 36px; margin: 0 auto 18px; }
.member h3 { font-size: 24px; margin-bottom: 6px; }
.member p { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ocean-blue); }

/* ---------------- Contact page ---------------- */
.hero.contact { padding-bottom: 160px; }
.contact-wrap { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; margin-top: -112px; position: relative; z-index: 10; align-items: start; }
.form-card { background: var(--white); border: 1px solid var(--light-gray); border-radius: 12px; padding: 40px; box-shadow: var(--shadow-deep); }
.svc-pick { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 28px; }
.svc-pick button { border: 1px solid var(--light-gray); background: var(--off-white); border-radius: 999px; padding: 10px 18px; min-height: 44px; cursor: pointer; font-size: 14.5px; color: var(--navy); }
.svc-pick button.on { background: var(--dark); border-color: var(--dark); color: var(--white); }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label, .label { font-weight: 700; font-size: 15px; }
.field input, .field select, .field textarea { background: var(--white); border: 1px solid #C9D3E3; border-radius: 4px; padding: 12px 14px; min-height: 54px; font-size: 16px; color: var(--navy); outline: none; transition: border-color .2s ease, background .2s ease; }
.field textarea { min-height: 130px; resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--electric-blue); background: rgba(66, 83, 255, 0.03); }
.form-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 24px; }
.form-foot small { color: var(--muted); }
.sent { text-align: center; padding: 30px 10px; }
.sent .ok { width: 64px; height: 64px; border-radius: 50%; background: var(--green-soft); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.sent .ok svg { width: 30px; height: 30px; stroke: var(--forest-green); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.sent h2 { font-size: 34px; margin-bottom: 10px; }
.sent p { color: var(--muted); margin-bottom: 22px; }
.aside { display: grid; gap: 24px; }
.next { background: var(--dark); color: var(--text-on-dark); border-radius: 12px; padding: 32px; }
.next h2 { font-size: 28px; color: var(--white); margin-bottom: 20px; }
.next ol { list-style: none; display: grid; gap: 16px; }
.next li { display: flex; gap: 14px; align-items: flex-start; color: var(--muted-on-dark); }
.next li b { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--golden); color: var(--navy); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.direct { background: var(--white); border: 1px solid var(--light-gray); border-radius: 12px; padding: 32px; }
.direct h2 { font-size: 28px; margin-bottom: 16px; }
.direct p { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--light-gray); }
.direct p:last-child { border-bottom: 0; }
.direct p span { color: var(--muted); }

/* ---------------- Responsive ---------------- */
@media (max-width: 1100px) {
  .hero-split, .split, .faq, .featured-case { grid-template-columns: 1fr; }
  .hero-split { gap: 40px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .visual-stack { padding-bottom: 0; display: grid; gap: 16px; }
  .monitor, .chart-card { position: static; width: 100%; }
}
@media (max-width: 860px) {
  .menu-btn { display: inline-flex; }
  .nav { display: none; position: absolute; top: 88px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 4px; padding: 16px; border-radius: 12px; background: rgba(7, 31, 53, 0.96); border: 1px solid rgba(255, 255, 255, 0.16); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 24px 48px rgba(4, 16, 30, 0.5); }
  .nav.open { display: flex; }
  .nav a { padding: 12px 10px; font-size: 17px; min-height: 44px; border-bottom: 0; }
  .nav a[aria-current="page"] { font-weight: 700; }
  .nav .btn { margin-top: 8px; min-height: 48px; font-size: 16px; }
  .plan-table { display: none; }
  .plan-cards { display: grid; gap: 16px; margin-top: 20px; }
}
@media (max-width: 768px) {
  :root { --pad: 16px; --section: 64px; }
  .hero-wrapper { padding: 8px; }
  .hero { padding: 0 20px 36px; border-radius: 16px; }
  .topbar { padding-top: 20px; }
  .brand { --h: 22px; }
  .hero-body { padding-top: 48px; }
  .band { padding: 36px 28px; border-radius: 16px; }
  .footer-grid { grid-template-columns: 1fr; }
  .fields { grid-template-columns: 1fr; }
  .form-card { padding: 26px 20px; }
  .op { grid-template-columns: 1fr; }
  .op .wire { width: 2px; height: 26px; margin: 0 auto; }
  .op .wire::after { right: -4px; top: auto; bottom: -2px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid var(--green-on-dark); border-bottom: 0; }
  .servers .row { grid-template-columns: 1fr 1fr; }
  .featured-case .body { padding: 28px 22px; }
  .stat b { font-size: 38px; }
  .card, .plan { padding: 26px 22px; }
}
@media (max-width: 560px) {
  .code { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; padding: 16px; }
  .panel-bar { flex-wrap: wrap; }
  .panel-bar .right { margin-left: 0; }
}
@media (max-width: 380px) {
  .brand { --h: 17px; }
  .code { font-size: 11.5px; }
}
.case-cover .tag { align-self: flex-start; }


/* ---------------- Closing band: the coast video loop, in gray, in a rounded box like the hero ---------------- */
.band-section { position: relative; overflow: hidden; border-radius: 24px; width: calc(100% - 32px); max-width: calc(var(--max-width) - 2 * var(--pad)); margin: 72px auto var(--section); background: #15171A; color: var(--white); }
.band-section .background-layer { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.background-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) blur(2px); transform: scale(1.03); opacity: 0; transition: opacity 1400ms ease; }
.background-video.is-active { z-index: 1; opacity: 1; }
.background-video.is-transitioning { z-index: 2; opacity: 1; }
.background-video.is-covered { z-index: 0; opacity: 0; transition: none; }
.band-section .shade { position: absolute; inset: 0; z-index: 3; background: linear-gradient(90deg, rgba(17, 19, 22, 0.86) 0%, rgba(17, 19, 22, 0.6) 55%, rgba(17, 19, 22, 0.35) 100%); }
.band-section .band { position: relative; z-index: 4; background: none; animation: none; border-radius: 0; padding: 72px 56px; }
.band-section .eyebrow { color: var(--golden); }
@media (max-width: 768px) { .band-section { width: calc(100% - 16px); border-radius: 16px; margin-top: 48px; } .band-section .band { padding: 40px 24px; } }

/* ---------------- Hero preview: the Graybook Script Editor with Vig (sample) ---------------- */
.ide-stack { position: relative; }
.ide { position: relative; background: #16181C; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; overflow: hidden; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45); color: #D6D9DE; font-family: var(--font-inter); font-size: 12.5px; }
.ide-title { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 14px; background: #1C1F24; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.ide-title img { height: 11px; width: auto; opacity: .9; }
.ide-title b { font-weight: 500; color: #E8EAED; }
.ide-title .sample { margin-left: auto; color: rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.16); }
.ide-title .win { display: flex; gap: 12px; margin-left: 12px; color: rgba(255, 255, 255, 0.45); font-size: 13px; }
.ide-body { display: grid; grid-template-columns: 150px minmax(0, 1fr) 210px; }
.ide-explorer { background: #191B20; border-right: 1px solid rgba(255, 255, 255, 0.07); padding: 12px 0; }
.ide-explorer .head { padding: 0 14px 8px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); }
.ide-explorer .item { display: flex; align-items: center; gap: 7px; padding: 5px 14px; color: rgba(255, 255, 255, 0.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ide-explorer .item.folder { color: rgba(255, 255, 255, 0.9); }
.ide-explorer .item.file { padding-left: 26px; }
.ide-explorer .item.open { background: rgba(255, 255, 255, 0.08); color: #fff; box-shadow: inset 2px 0 0 #EFDF6C; }
.ide-explorer .gbs { font-size: 9px; font-weight: 700; color: #EFDF6C; letter-spacing: .02em; }
.ide-main { display: flex; flex-direction: column; min-width: 0; }
.ide-toolbar { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); flex-wrap: wrap; }
.ide-toolbar .file { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; color: #fff; font-weight: 500; }
.ide-toolbar .file i { width: 6px; height: 6px; border-radius: 50%; background: #EFDF6C; }
.ide-btn { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 5px; border: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.8); font-size: 11.5px; white-space: nowrap; }
.ide-btn.on { background: rgba(239, 223, 108, 0.14); border-color: rgba(239, 223, 108, 0.45); color: #F3E78F; }
.ide-btn.primary { background: #ECEDEF; border-color: #ECEDEF; color: #111316; font-weight: 600; }
.ide-code { flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 12px 12px 12px 0; font-family: var(--font-mono); font-size: 10.5px; line-height: 1.55; }
.ide-code .ln { text-align: right; color: rgba(255, 255, 255, 0.25); padding-left: 10px; user-select: none; white-space: pre; }
.ide-code pre { white-space: pre-wrap; overflow-wrap: anywhere; color: #D6D9DE; font: inherit; }
.ide-code .k { color: #FF9C7D; } .ide-code .f { color: #8FB3FF; } .ide-code .s { color: #EFDF6C; } .ide-code .n { color: #9FD8A9; } .ide-code .c { color: #727986; } .ide-code .t { color: #C7A6FF; }
.ide-out { border-top: 1px solid rgba(255, 255, 255, 0.07); padding: 8px 12px; font-family: var(--font-mono); font-size: 11px; color: #8FD49B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ide-out span { color: rgba(255, 255, 255, 0.45); }
.ide-vig { border-left: 1px solid rgba(255, 255, 255, 0.07); background: #1A1D22; display: flex; flex-direction: column; min-width: 0; }
.ide-vig .head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); font-weight: 600; color: #fff; }
.ide-vig .head i { width: 7px; height: 7px; border-radius: 50%; background: #8FD49B; }
.ide-vig .head small { margin-left: auto; font-weight: 400; color: rgba(255, 255, 255, 0.45); font-size: 11px; }
.ide-vig .msgs { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.ide-vig .msg { padding: 9px 10px; border-radius: 8px; line-height: 1.45; font-size: 12px; }
.ide-vig .msg.me { align-self: flex-end; max-width: 92%; background: rgba(255, 255, 255, 0.09); color: #fff; }
.ide-vig .msg.vig { background: rgba(239, 223, 108, 0.08); border: 1px solid rgba(239, 223, 108, 0.18); color: #E2E4E8; }
.ide-vig .msg.vig b { color: #F3E78F; font-weight: 600; }
.ide-vig .chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.ide-vig .chips span { font-size: 10.5px; padding: 3px 7px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.75); }
.ide-vig .ask { margin: 0 10px 10px; padding: 9px 10px; border-radius: 7px; border: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.42); font-size: 11.5px; }
.ide-stack .monitor { left: 0; right: auto; bottom: 0; width: 250px; padding: 14px; background: rgba(20, 22, 26, 0.88); }
.ide-stack .monitor svg { height: 44px; }
.ide-stack .readouts b { font-size: 14px; }
@media (max-width: 1599px) { .ide-body { grid-template-columns: minmax(0, 1fr) 200px; } .ide-explorer { display: none; } }
@media (max-width: 900px) { .ide-stack { padding: 0; display: grid; gap: 12px; } .ide-stack .monitor { position: static; width: 100%; } }
@media (max-width: 640px) { .ide-body { grid-template-columns: 1fr; } .ide-vig { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.07); } .ide-toolbar .ide-btn:not(.primary):not(.on) { display: none; } }

/* HFT colocation section: the hero gradient's darkest gray instead of navy */
#svc-colo { background: var(--dark); }

/* Execution monitor on the Script Editor preview, over the Vig pane's empty space */
.ide-stack { padding-bottom: 28px; }
.ide-stack .monitor { left: auto; right: -20px; bottom: 0; width: 220px; }
.ide-stack .monitor .readouts { gap: 6px; }
.ide-stack .monitor .readouts span { font-size: 10px; }
@media (max-width: 900px) { .ide-stack { padding-bottom: 0; } }
#svc-colo .panel { background: #101114; border-color: rgba(255, 255, 255, 0.12); }

/* Hero type: Inter for everything, Syne for the headline (every page) */
.hero, .hero .nav a, .hero .btn, .hero .lead, .hero .eyebrow, .hero .jump, .hero .jump b, .hero .stat span { font-family: var(--font-inter); }
.hero h1 { font-family: "Syne", var(--font-inter); font-weight: 600; letter-spacing: -0.03em; line-height: 1.06; }
.hero .stat b, .hero .jump b { font-family: "Syne", var(--font-inter); font-weight: 600; letter-spacing: -0.02em; }

/* ================= Home hero preview: the Graybook Script Editor, 1:1 with the desktop app =================
   Values from Platform/chart/styles.css + scripts.css (--gb-bg #101114, --gb-surface #17191d,
   --gb-surface-raised #1d2025, --gb-titlebar #131518, --gb-ink #ecece8, --gb-muted #a3a7ad, lines
   rgb(236 236 232 / 12%), 2px corners, IBM Plex) and gbsEditor.js (code colours). */
.hero-split { grid-template-columns: minmax(0, 1fr) minmax(0, 650px); gap: 56px; }
.preview-stack { position: relative; margin-right: 28px; padding-bottom: 36px; }
.gbx { --bg: #101114; --surf: #17191d; --raised: #1d2025; --ink: #ecece8; --mut: #a3a7ad; --ln: rgba(236, 236, 232, 0.12);
  display: flex; flex-direction: column; border: 1px solid rgba(236, 236, 232, 0.24); background: var(--bg); color: var(--ink);
  font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; font-size: 11px; line-height: 1.4; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5); user-select: none; }
.gbx .gi { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.gbx-titlebar { display: flex; align-items: center; gap: 8px; height: 30px; padding-left: 11px; border-bottom: 1px solid var(--ln); background: #131518; color: var(--mut); }
.gbx-title { color: var(--ink); font-weight: 600; letter-spacing: .02em; }
.gbx-wins { display: flex; align-self: stretch; margin-left: auto; }
.gbx-win { display: grid; place-items: center; width: 36px; color: var(--mut); }
.gbx-body { display: grid; grid-template-columns: 162px minmax(0, 1fr); min-height: 0; }
.gbx-sidebar { display: flex; flex-direction: column; border-right: 1px solid var(--ln); background: var(--surf); }
.gbx-sidehead { display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 0 5px 0 11px; border-bottom: 1px solid var(--ln); color: var(--mut); font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.gbx-ib { display: flex; gap: 1px; color: var(--mut); }
.gbx-ib .gi { width: 20px; height: 14px; padding: 0 3px; box-sizing: content-box; width: 14px; }
.gbx-tree { padding: 4px 0 10px; }
.gbx-row { display: flex; align-items: center; gap: 5px; height: 22px; padding-right: 8px; color: rgba(236, 236, 232, 0.86); white-space: nowrap; }
.gbx-row .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gbx-row.is-root { color: var(--ink); font-weight: 600; }
.gbx-row.is-root > .gi { color: var(--ink); }
.gbx-row > .gi { color: var(--mut); }
.gbx-row.is-selected { background: rgba(236, 236, 232, 0.1); color: #fff; }
.gbx-chev { display: grid; place-items: center; width: 11px; flex: 0 0 11px; color: var(--mut); }
.gbx-tag { margin-left: auto; padding: 0 4px; border: 1px solid var(--ln); border-radius: 2px; color: var(--mut); font-size: 8.5px; font-weight: 500; letter-spacing: .03em; }
.gbx-main { display: flex; flex-direction: column; min-width: 0; }
.gbx-topbar { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 7px 0 10px; border-bottom: 1px solid var(--ln); background: var(--surf); }
.gbx-path { display: flex; align-items: center; gap: 5px; min-width: 0; flex: 1; font-family: "IBM Plex Mono", Consolas, monospace; font-size: 10.5px; }
.gbx-path span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gbx-actions { display: flex; gap: 5px; flex: none; }
.gbx-btn { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border: 1px solid rgba(236, 236, 232, 0.16); border-radius: 2px; background: var(--surf); color: var(--ink); font-size: 10.5px; white-space: nowrap; }
.gbx-btn img { width: 13px; height: 13px; }
.gbx-btn.is-active { border-color: rgba(236, 236, 232, 0.34); background: var(--raised); }
.gbx-btn.is-primary { border-color: var(--ink); background: var(--ink); color: var(--bg); font-weight: 600; }
.gbx-btn.is-primary .gi { fill: currentColor; }
.gbx-workspace { display: flex; min-height: 0; }
.gbx-editor { flex: 1; min-width: 0; overflow: hidden; padding: 6px 0 8px; background: var(--bg); font-family: "IBM Plex Mono", Consolas, monospace; font-size: 10.5px; line-height: 1.6; }
.gbx-editor .ln { display: flex; }
.gbx-editor .ln i { flex: 0 0 30px; padding-right: 8px; text-align: right; font-style: normal; color: #4d525a; border-right: 1px solid rgba(236, 236, 232, 0.08); }
.gbx-editor .ln code { padding-left: 10px; white-space: pre; font: inherit; color: var(--ink); }
.gbx .t-kw { color: #c4a7ff; } .gbx .t-type { color: #82aaff; } .gbx .t-num { color: #f7a26c; } .gbx .t-str { color: #b5d98a; }
.gbx .t-com { color: #6b717a; font-style: italic; } .gbx .t-fn { color: #7fd4ff; } .gbx .t-call { color: #e6a0a0; } .gbx .t-series { color: #ffcb6b; }
.gbx .t-col { color: #ff9e64; } .gbx .t-atom { color: #f07178; } .gbx .t-op { color: #89ddff; } .gbx .t-var { color: var(--ink); }
.gbx-vig { display: flex; flex-direction: column; width: 184px; flex: none; border-left: 1px solid var(--ln); background: var(--surf); }
.gbx-vighead { display: flex; align-items: center; gap: 6px; padding: 6px 5px 6px 8px; border-bottom: 1px solid var(--ln); }
.gbx-viglogo { width: 17px; height: 17px; flex: none; }
.gbx-chat { display: flex; align-items: center; gap: 5px; flex: 1; min-width: 0; height: 22px; padding: 0 7px; border: 1px solid rgba(236, 236, 232, 0.16); border-radius: 2px; color: var(--ink); }
.gbx-chat span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gbx-context { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border-bottom: 1px solid rgba(236, 236, 232, 0.06); color: var(--mut); font-size: 9.5px; }
.gbx-context > span:first-child { letter-spacing: .05em; text-transform: uppercase; }
.gbx-context .mono { font-family: "IBM Plex Mono", Consolas, monospace; }
.gbx-meter { position: relative; flex: 1; height: 4px; overflow: hidden; border-radius: 2px; background: rgba(236, 236, 232, 0.1); }
.gbx-meter span { position: absolute; inset: 0 auto 0 0; border-radius: 2px; background: #ecece8; }
.gbx-msgs { flex: 1; padding: 10px 8px; }
.gbx-msg { display: flex; gap: 7px; margin-bottom: 10px; }
.gbx-msg.is-user { justify-content: flex-end; }
.gbx-msg.is-user .gbx-bubble { max-width: 85%; padding: 6px 9px; border-radius: 8px 8px 2px; background: var(--raised); line-height: 1.45; }
.gbx-avatar { width: 22px; height: 22px; flex: 0 0 22px; margin-top: 1px; }
.gbx-msg.is-vig .gbx-bubble { flex: 1; min-width: 0; line-height: 1.5; color: rgba(236, 236, 232, 0.9); }
.gbx-bubble strong { color: #fff; font-weight: 600; }
.gbx-bubble code { padding: 0 3px; border-radius: 2px; background: rgba(236, 236, 232, 0.08); font-family: "IBM Plex Mono", Consolas, monospace; font-size: 10px; }
.gbx-composer { display: flex; align-items: flex-end; gap: 6px; margin: 6px 8px 8px; padding: 5px; border: 1px solid rgba(236, 236, 232, 0.18); border-radius: 6px; background: var(--bg); color: var(--mut); }
.gbx-composer span { flex: 1; min-height: 28px; padding: 3px; line-height: 1.4; }
.gbx-composer b { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 5px; background: rgba(236, 236, 232, 0.14); color: var(--mut); }
.gbx-terminal { border-top: 1px solid var(--ln); background: #0c0d10; }
.gbx-termhead { display: flex; align-items: center; gap: 12px; height: 26px; padding: 0 10px 0 5px; border-bottom: 1px solid rgba(236, 236, 232, 0.06); }
.gbx-toggle { display: flex; align-items: center; gap: 5px; padding: 0 5px; color: var(--ink); font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.gbx-status { display: flex; align-items: center; gap: 5px; margin-right: auto; color: #26a69a; font-size: 10px; }
.gbx-link { color: var(--mut); font-size: 10px; }
.gbx-log { display: flex; align-items: center; gap: 7px; padding: 1px 10px; font-family: "IBM Plex Mono", Consolas, monospace; font-size: 10px; line-height: 1.6; color: rgba(236, 236, 232, 0.8); }
.gbx-log:last-child { padding-bottom: 6px; }
.gbx-log:nth-child(2) { padding-top: 4px; }
.gbx-log time { color: #5d626a; }
.gbx-log.is-success { color: #6fd6c4; }

/* Execution monitor: round-trip latency over the last minute */
.lat { position: absolute; left: -40px; bottom: 0; width: 201px; padding: 13px 12px 11px; padding: 14px 14px 12px; border-radius: 10px; background: rgba(23, 25, 29, 0.92); border: 1px solid rgba(236, 236, 232, 0.16); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-family: var(--font-inter); color: #ecece8; }
.lat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; white-space: nowrap; }
.lat-title { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.lat-title i { width: 7px; height: 7px; border-radius: 50%; background: #6fd6c4; box-shadow: 0 0 0 3px rgba(111, 214, 196, 0.18); }
.lat-live { color: #a3a7ad; font-size: 10.5px; }
.lat-now { display: flex; align-items: baseline; gap: 6px; margin: 10px 0 6px; }
.lat-now b { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.lat-now span { color: #a3a7ad; font-size: 11px; }
.lat-plot { position: relative; }
.lat-chart { display: block; width: 100%; height: 58px; overflow: visible; }
.lat-ref { position: absolute; right: 0; transform: translateY(-120%); font-size: 9.5px; color: #a3a7ad; }
.lat-axis { display: flex; justify-content: space-between; margin-top: 4px; font-size: 9.5px; color: #6e746e; }
.lat-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(236, 236, 232, 0.1); }
.lat-stats b { display: block; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lat-stats b small { font-size: 10px; font-weight: 500; color: #a3a7ad; margin-left: 2px; }
.lat-stats span { font-size: 10px; color: #a3a7ad; white-space: nowrap; }

@media (max-width: 1280px) { .hero-split { grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: 48px; } .gbx-body { grid-template-columns: minmax(0, 1fr); } .gbx-sidebar { display: none; } }
@media (max-width: 1100px) { .hero-split { grid-template-columns: 1fr; } .preview-stack { margin-right: 0; max-width: 640px; } }
@media (max-width: 640px) { .gbx-workspace { flex-direction: column; } .gbx-vig { width: auto; border-left: 0; border-top: 1px solid var(--ln); } .gbx-actions .gbx-btn:not(.is-primary):not(.is-active) { display: none; } .preview-stack { padding-bottom: 0; display: grid; gap: 12px; } .lat { position: static; width: 100%; } }

/* ================= Navbar like cwan.com: white pill with dropdowns + dark "Talk to us" pill ================= */
.topbar .nav { display: flex; align-items: center; gap: 12px; position: relative; }
.nav-pill { position: relative; z-index: 3; background: #fff; border-radius: 999px; padding: 0 10px; }
.nav-pill > ul { list-style: none; display: flex; align-items: center; }
.nav-pill li { position: static; }
.nav .nav-item { display: inline-flex; align-items: center; gap: 6px; height: 48px; padding: 0 18px; border: 0; background: none; cursor: pointer; font-family: var(--font-inter); font-size: 15.5px; font-weight: 450; color: #17191D; text-decoration: none; border-bottom: 0; }
.nav .nav-item:hover, .nav .nav-item[aria-expanded="true"] { color: var(--ocean-blue); text-decoration: none; }
.nav .nav-item[aria-current="page"] { color: #17191D; font-weight: 700; }
.nav .nav-item .chev { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.nav .nav-item[aria-expanded="true"] .chev { transform: rotate(180deg); }
.nav-cta { position: relative; z-index: 3; display: inline-flex; align-items: center; height: 48px; padding: 0 24px; border-radius: 999px; background: #17191D; color: #fff; font-family: var(--font-inter); font-size: 15.5px; font-weight: 500; text-decoration: none; transition: background .2s ease; }
.nav-cta:hover { background: #2A2D33; color: #fff; text-decoration: none; }
/* The dropdown: a large white panel the bar sits on, feature card left, links right */
.mega { position: absolute; z-index: 2; top: -10px; right: -10px; width: min(1120px, calc(100vw - 72px)); padding: 78px 28px 28px; border-radius: 28px; background: #fff; box-shadow: 0 30px 70px rgba(10, 14, 20, 0.28); display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 28px; color: #17191D; font-family: var(--font-inter); animation: megaIn .18s ease-out; }
.mega[hidden] { display: none; }
@keyframes megaIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.mega-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; padding: 22px; border-radius: 18px; background: #EEF1F4; }
.mega-visual { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, #111316, #3A3E44 55%, #5B6067); }
.mega-visual.is-vig img { width: 64px; height: 64px; }
.mega-visual.is-case svg { width: 86%; }
.mega-feature b { display: block; font-size: 17px; font-weight: 600; }
.mega-feature p { margin: 6px 0 16px; font-size: 14px; line-height: 1.5; color: #4A5260; }
.pill-btn { display: inline-flex; align-items: center; height: 44px; padding: 0 22px; border-radius: 999px; background: #17191D; color: #fff !important; font-size: 14.5px; font-weight: 500; text-decoration: none !important; }
.pill-btn:hover { background: #2A2D33; }
.mega-links { list-style: none; display: grid; align-content: start; gap: 4px; }
.mega-links a { display: block; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: #17191D; }
.mega-links a:hover { background: #F2F4F7; text-decoration: none; }
.mega-links b { display: block; font-size: 15.5px; font-weight: 500; }
.mega-links span { display: block; margin-top: 2px; font-size: 13.5px; color: #5A6270; }
@media (max-width: 860px) {
  .topbar .nav { display: none; position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; border-radius: 20px; background: #fff; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); }
  .topbar .nav.open { display: flex; }
  .nav-pill { padding: 0; border-radius: 0; }
  .nav-pill > ul { flex-direction: column; align-items: stretch; }
  .nav .nav-item { width: 100%; justify-content: space-between; height: 48px; padding: 0 10px; font-size: 17px; }
  .mega { position: static; width: auto; padding: 4px 0 10px; box-shadow: none; border-radius: 0; grid-template-columns: 1fr; gap: 8px; animation: none; }
  .mega-feature { display: none; }
  .nav-cta { justify-content: center; }
}
@media (max-width: 768px) { .hero.full .topbar .nav { top: 64px; } }

/* ================= Hero: large execution monitor ================= */
.hero-visual { display: flex; justify-content: flex-end; }
.hero-visual .lat { position: relative; left: auto; bottom: auto; width: 100%; max-width: 460px; padding: 26px 26px 22px; border-radius: 18px; background: rgba(23, 25, 29, 0.78); }
.hero-visual .lat-head { font-size: 14px; }
.hero-visual .lat-live { font-size: 13px; }
.hero-visual .lat-now { margin: 18px 0 10px; }
.hero-visual .lat-now b { font-size: 44px; }
.hero-visual .lat-now span { font-size: 14px; }
.hero-visual .lat-chart { height: 130px; }
.hero-visual .lat-ref { font-size: 11px; }
.hero-visual .lat-axis { font-size: 11px; margin-top: 8px; }
.hero-visual .lat-stats { margin-top: 18px; padding-top: 16px; gap: 14px; }
.hero-visual .lat-stats b { font-size: 20px; }
.hero-visual .lat-stats b small { font-size: 12px; }
.hero-visual .lat-stats span { font-size: 12px; }
.hero.full .hero-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }

/* ================= Home sections ================= */
.svc-mini { display: flex; flex-direction: column; gap: 4px; padding: 30px; border-radius: 4px; background: var(--white); border: 1px solid var(--light-gray); color: var(--navy); text-decoration: none; transition: box-shadow .3s ease, transform .3s ease; }
.svc-mini:hover { box-shadow: var(--shadow-raise); transform: translateY(-3px); color: var(--navy); text-decoration: none; }
.svc-mini .icon-tile { margin-bottom: 14px; }
.svc-mini .tag { align-self: flex-start; }
.svc-mini h3 { margin: 12px 0 8px; }
.svc-mini p { color: var(--muted); font-size: 15.5px; margin-bottom: 16px; }
.svc-mini .link-arrow { margin-top: auto; color: var(--electric-blue); }

.paths { display: grid; gap: 20px; }
.path-row { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1.25fr); align-items: center; gap: 12px; border: 1px solid #C9D3E3; border-radius: 16px; background: var(--white); overflow: hidden; }
.path-need { padding: 28px 0 28px 32px; }
.path-need h3 { font-size: 22px; margin-bottom: 8px; }
.path-need p, .path-care p { color: var(--muted); font-size: 15px; }
.path-care span, .path-give span { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 6px; color: var(--navy); }
.path-arrow { font-size: 22px; color: var(--ocean-blue); text-align: center; }
.path-give { align-self: stretch; padding: 28px 32px; background: #EEF2F8; display: flex; flex-direction: column; justify-content: center; }
.path-give p { font-size: 15px; margin-bottom: 12px; }
.path-give .link-arrow { color: var(--electric-blue); font-size: 14.5px; }
@media (max-width: 900px) { .path-row { grid-template-columns: 1fr; gap: 0; } .path-arrow { display: none; } .path-need { padding: 24px 24px 8px; } .path-care { padding: 8px 24px 20px; } .path-give { padding: 22px 24px; } }

.stat-cards { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.stat-card { border-radius: 16px; padding: 30px 26px; color: #fff; min-height: 220px; display: flex; flex-direction: column; }
.stat-card b { font-family: "Syne", var(--font-inter); font-weight: 600; font-size: 52px; line-height: 1; letter-spacing: -0.03em; }
.stat-card span { display: block; margin-top: 8px; font-size: 18px; font-weight: 500; }
.stat-card p { margin-top: auto; padding-top: 22px; font-size: 14.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.82); }
.stat-card.s1 { background: linear-gradient(160deg, #1D6FFF, #0B4FD1); }
.stat-card.s2 { background: linear-gradient(160deg, #4253FF, #2C3BD6); }
.stat-card.s3 { background: linear-gradient(160deg, #3A3E44, #17191D); }
.stat-card.s4 { background: linear-gradient(160deg, #0B2E4C, #17191D); }
.stat-card mark.ph { background: rgba(255, 255, 255, 0.16); box-shadow: none; }

/* ================= The animated Vig section (like cwan's AI chat) ================= */
.ai-stage { position: relative; margin-top: 8px; padding: 34px 46px 0; border-radius: 28px; background: linear-gradient(180deg, #E7EBF0 0%, #DCE1E7 100%); overflow: hidden; height: 560px; }
.ai-editor { position: relative; transition: filter .6s ease, opacity .6s ease; -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 78%, transparent 100%); }
.ai-stage.is-typing .ai-editor { filter: blur(2.5px) saturate(.7); opacity: .72; }
.gbx.is-wide { font-size: 11.5px; }
.gbx.is-wide .gbx-body { grid-template-columns: 190px minmax(0, 1fr); }
.gbx.is-wide .gbx-editor { font-size: 11.5px; }
.gbx.is-wide .gbx-vig { width: 330px; }
.gbx.is-wide .gbx-msgs { height: 360px; overflow: hidden; scroll-behavior: smooth; }
.gbx-welcome { padding: 16px 8px; color: var(--mut, #a3a7ad); text-align: center; }
.gbx-welcome img { width: 40px; height: 40px; opacity: .9; }
.gbx-welcome p { margin: 8px 0 0; line-height: 1.5; }
.gbx-msg { animation: msgIn .25s ease-out; }
@keyframes msgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.gbx-dots { display: inline-flex; gap: 4px; padding: 7px 0; }
.gbx-dots i { width: 6px; height: 6px; border-radius: 50%; background: #a3a7ad; animation: gbxDot 1s infinite ease-in-out; }
.gbx-dots i:nth-child(2) { animation-delay: .15s; } .gbx-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes gbxDot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.gbx-code { margin: 6px 0 8px; border: 1px solid rgba(236, 236, 232, 0.1); border-radius: 3px; background: #101114; }
.gbx-code pre { margin: 0; padding: 8px 10px; font-family: "IBM Plex Mono", Consolas, monospace; font-size: 10.5px; line-height: 1.55; white-space: pre; overflow: hidden; }
.gbx-code-actions { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border-top: 1px solid rgba(236, 236, 232, 0.08); }
.gbx-code-actions span { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border: 1px solid rgba(236, 236, 232, 0.16); border-radius: 2px; font-size: 10.5px; color: #ecece8; }
.gbx-code-actions span:first-child { border-color: #ecece8; background: #ecece8; color: #101114; font-weight: 600; }
.gbx-bubble p { margin: 0 0 6px; }
/* The floating prompt, typed before it is sent */
.ai-prompt { position: absolute; z-index: 5; right: 70px; top: 150px; width: min(540px, calc(100% - 80px)); padding: 16px 18px 12px; border-radius: 14px; background: #fff; border: 1.5px solid transparent; background-image: linear-gradient(#fff, #fff), linear-gradient(120deg, #1D6FFF, #8A5CF6); background-origin: border-box; background-clip: padding-box, border-box; box-shadow: 0 24px 60px rgba(17, 19, 22, 0.28); font-family: var(--font-inter); color: #17191D; opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .35s ease, transform .35s ease; pointer-events: none; }
.ai-stage.is-typing .ai-prompt { opacity: 1; transform: none; }
.ai-stage.is-sent .ai-prompt { opacity: 0; transform: translateY(-14px) scale(.98); }
.ai-prompt-text { display: flex; align-items: flex-start; gap: 10px; min-height: 46px; font-size: 16px; line-height: 1.45; }
.ai-spark { width: 20px; height: 20px; flex: none; margin-top: 2px; fill: none; stroke: #1D6FFF; stroke-width: 1.5; stroke-linejoin: round; }
.ai-caret { display: inline-block; width: 2px; height: 20px; margin-top: 2px; background: #1D6FFF; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.ai-prompt-foot { display: flex; justify-content: flex-end; align-items: center; gap: 14px; }
.ai-prompt-foot > svg { width: 18px; height: 18px; fill: none; stroke: #5A6270; stroke-width: 1.6; stroke-linecap: round; }
.ai-send { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid #4A5260; transition: background .2s ease, border-color .2s ease; }
.ai-send svg { width: 16px; height: 16px; fill: none; stroke: #4A5260; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ai-stage.is-ready .ai-send { background: #1D6FFF; border-color: #1D6FFF; }
.ai-stage.is-ready .ai-send svg { stroke: #fff; }
@media (max-width: 1100px) { .ai-stage { padding: 24px 20px 0; height: 520px; } .gbx.is-wide .gbx-body { grid-template-columns: minmax(0, 1fr); } .gbx.is-wide .gbx-sidebar { display: none; } .gbx.is-wide .gbx-vig { width: 300px; } .ai-prompt { right: 30px; } }
@media (max-width: 700px) { .ai-stage { height: 560px; } .gbx.is-wide .gbx-workspace { flex-direction: column-reverse; } .gbx.is-wide .gbx-vig { width: auto; } .gbx.is-wide .gbx-msgs { height: 280px; } .gbx.is-wide .gbx-editor { display: none; } .ai-prompt { left: 16px; right: 16px; width: auto; top: 120px; } }
@media (prefers-reduced-motion: reduce) { .ai-editor, .ai-prompt { transition: none; } .gbx-msg { animation: none; } }
/* guards against the older nav rules */
.nav .mega-links a, .nav .mega-links a:hover, .nav .pill-btn, .nav .nav-cta { border-bottom: 0; }
.nav .mega-links a, .nav .mega-links a:hover { color: #17191D; padding: 10px 12px; font-size: inherit; }
.nav .pill-btn, .nav .pill-btn:hover, .nav .nav-cta, .nav .nav-cta:hover { color: #fff; }
/* dropdown layering: the panel hangs off the whole nav (pill + CTA); the bar's items sit on top of it */
.topbar .nav-pill { position: static; }
.topbar .nav-pill > ul { position: relative; z-index: 3; }
.topbar .nav-pill li.has-menu .mega { right: -12px; top: -12px; width: min(1000px, calc(100vw - 460px)); }
.nav .nav-cta { padding: 0 24px; }
.nav .pill-btn { padding: 0 22px; }
.gbx.is-wide .gbx-vig { width: 352px; }
@media (max-width: 860px) { .topbar .nav-pill li.has-menu .mega { width: auto; } }
.topbar .nav .nav-item { position: relative; z-index: 4; }
.topbar .nav-pill > ul { position: static; }
@media (max-width: 1100px) { .hero.full .hero-split { grid-template-columns: 1fr; } .hero-visual { justify-content: flex-start; } .hero-visual .lat { max-width: 520px; } }
@media (max-width: 700px) { .gbx.is-wide .gbx-vig { width: auto; } }

/* ================= Type scale up, to cwan.com's sizes (body 18px, leads 18-24px, nav/buttons 16px) ================= */
body { font-size: 18px; }
p { font-size: inherit; }
.lead, .hero .lead { font-size: 18px; line-height: 1.6; max-width: 640px; }
.section-head p { font-size: 18px; }
.section-head h2, h2 { font-size: clamp(32px, 3.2vw, 44px); }
.card p, .svc-body p, .svc-mini p, .stage p, .principle p, .path-need p, .path-care p, .path-give p, .case p, .featured-case .body > p:not(.eyebrow) { font-size: 17px; }
.card h3, .svc-body h3 { font-size: 26px; }
.btn { font-size: 16.5px; }
.nav .nav-item, .nav-cta { font-size: 16px; }
.checks { font-size: 16.5px; }
.eyebrow { font-size: 13px; }
.chip, .tag { font-size: 14px; }
.plan-table td { font-size: 16px; }
.field label { font-size: 15px; }
.field input, .field select, .field textarea { font-size: 17px; }

/* ================= Hero: text only, no monitor ================= */
.hero.full .hero-split { grid-template-columns: minmax(0, 860px); }
.hero.full h1 { font-size: clamp(40px, 5vw, 72px); }

/* ================= What we do, like cwan's "Latest from Clearwater" ================= */
.latest { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 3fr); gap: 48px; align-items: start; }
.latest-head h2 { font-size: clamp(28px, 2.6vw, 36px); line-height: 1.15; }
.latest-all { display: inline-flex; gap: 10px; margin-top: 18px; font-size: 16px; color: var(--electric-blue); }
.latest-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.latest-card { display: flex; flex-direction: column; min-height: 300px; padding: 32px; border: 1px solid #AEB8C8; border-radius: 24px; background: var(--white); color: var(--navy); text-decoration: none; transition: background .2s ease, border-color .2s ease; }
.latest-card + .latest-card { margin-left: -1px; }
.latest-card:hover { background: #F4F6F9; border-color: #7F8CA3; color: var(--navy); text-decoration: none; position: relative; z-index: 1; }
.latest-card h3 { font-family: var(--font-inter); font-weight: 500; font-size: 21px; line-height: 1.3; letter-spacing: -0.01em; margin-bottom: 12px; }
.latest-card p { font-size: 16px; line-height: 1.55; color: var(--muted); }
.latest-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 28px; }
.latest-tag { display: inline-flex; align-items: center; height: 32px; padding: 0 16px; border-radius: 999px; background: #DDE1E8; color: var(--navy); font-family: var(--font-inter); font-size: 14px; font-weight: 500; }
.latest-arrow { font-size: 22px; color: var(--electric-blue); transition: transform .2s ease; }
.latest-card:hover .latest-arrow { transform: translateX(4px); }
.brands { margin-top: 72px; }
.brands-label { text-align: center; font-family: var(--font-inter); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 28px; }
.brand-row { list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px 40px; }
.brand-logo { display: inline-flex; align-items: center; gap: 10px; height: 44px; filter: grayscale(1); opacity: .6; transition: opacity .2s ease; }
.brand-logo:hover { opacity: .9; }
.brand-logo img { height: 34px; width: auto; }
.brand-logo span { font-family: var(--font-inter); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: #2B2F36; }
.brand-logo:not(.has-word) img[src$="ninjatrader.svg"] { height: 26px; }
.brand-logo img[src$="cme-group.png"] { height: 30px; }
.brand-logo img[src$="aws.svg"] { height: 38px; }
@media (max-width: 1100px) { .latest { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 860px) { .latest-cards { grid-template-columns: 1fr; gap: 14px; } .latest-card + .latest-card { margin-left: 0; } .latest-card { min-height: 0; } .brand-row { justify-content: center; } }

/* ================= Stat cards: grays from light to dark ================= */
.stat-card.s1 { background: #E1E4E8; color: #17191D; }
.stat-card.s2 { background: #A9AEB5; color: #17191D; }
.stat-card.s3 { background: #5B6067; color: #fff; }
.stat-card.s4 { background: #17191D; color: #fff; }
.stat-card.s1 p, .stat-card.s2 p { color: rgba(23, 25, 29, 0.78); }
.stat-card.s1 mark.ph, .stat-card.s2 mark.ph { background: rgba(23, 25, 29, 0.1); }

/* ================= Footer: rounded like cwan's ================= */
.footer { border-radius: 28px 28px 0 0; padding: 88px 0 36px; margin-top: 24px; }
.footer-grid { gap: 48px; }
.footer h4 { font-family: var(--font-inter); font-size: 18px; font-weight: 500; letter-spacing: .02em; color: #fff; margin-bottom: 20px; }
.footer a, .footer ul { font-size: 16px; }
.footer ul { gap: 14px; }
.footer p { font-size: 17px; }
.footer .brand { --h: 30px; }
.legal { font-size: 15px; margin-top: 72px; }
.legal a { font-size: 15px; }
.band-section + .footer, .band-section { }

/* ================= The animated Vig section: zoomed in, platform-styled prompt, before/after ================= */
.ai-stage { height: 640px; padding: 40px 48px 0; }
.gbx.is-wide { font-size: 13px; }
.gbx.is-wide .gbx-titlebar { height: 36px; }
.gbx.is-wide .gbx-sidehead, .gbx.is-wide .gbx-topbar { height: 38px; }
.gbx.is-wide .gbx-row { height: 26px; }
.gbx.is-wide .gbx-btn { height: 26px; font-size: 12px; padding: 0 10px; }
.gbx.is-wide .gbx-path { font-size: 12px; }
.gbx.is-wide .gbx-body { grid-template-columns: 210px minmax(0, 1fr); }
.gbx.is-wide .gbx-editor { font-size: 13px; line-height: 1.65; height: 470px; overflow: hidden; }
.gbx.is-wide .gbx-editor .ln i { flex-basis: 36px; }
.gbx.is-wide .gbx-vig { width: 380px; }
.gbx.is-wide .gbx-msgs { height: 470px; font-size: 13px; }
.gbx.is-wide .gbx-code pre { font-size: 12px; }
.gbx.is-wide .gbx-code-actions span { height: 24px; font-size: 11.5px; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.gbx.is-wide .gbx-code-actions span.is-pressed { border-color: #fff; background: #fff; color: #101114; box-shadow: 0 0 0 3px rgba(127, 212, 255, 0.35); }
.gbx.is-wide .gbx-context { font-size: 11px; }
.gbx.is-wide .gbx-chat { height: 26px; }
/* Before / after, styled like the platform's side-by-side panes (.gbs-import-pane) */
.gbx-compare { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; height: 470px; background: #101114; animation: msgIn .3s ease-out; }
.gbx-compare[hidden] { display: none; }
.gbx-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.gbx-pane + .gbx-pane { border-left: 1px solid rgba(236, 236, 232, 0.12); }
.gbx-pane-head { padding: 7px 12px; border-bottom: 1px solid rgba(236, 236, 232, 0.06); color: #a3a7ad; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.gbx-pane-code { flex: 1; min-height: 0; overflow: hidden; padding: 8px 0; font-family: "IBM Plex Mono", Consolas, monospace; font-size: 12px; line-height: 1.6; }
.gbx-pane-code .ln { display: flex; }
.gbx-pane-code .ln i { flex: 0 0 32px; padding-right: 8px; text-align: right; font-style: normal; color: #4d525a; }
.gbx-pane-code .ln code { padding-left: 8px; white-space: pre; font: inherit; color: #ecece8; }
.gbx-pane-code .ln.is-del { background: rgba(239, 83, 80, 0.16); box-shadow: inset 3px 0 0 #ef5350; }
.gbx-pane-code .ln.is-add { background: rgba(38, 166, 154, 0.18); box-shadow: inset 3px 0 0 #26a69a; }
/* The prompt, styled like the platform's Vig composer */
.ai-prompt { right: 90px; top: 210px; width: min(560px, calc(100% - 100px)); padding: 0; border: 1px solid rgba(236, 236, 232, 0.18); border-radius: 8px; background: #17191D; background-image: none; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.4); color: #ecece8; font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; }
.ai-prompt-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid rgba(236, 236, 232, 0.12); color: #a3a7ad; font-size: 12px; }
.ai-prompt-head img { width: 18px; height: 18px; }
.ai-prompt-head b { color: #ecece8; font-weight: 600; }
.ai-prompt-head small { margin-left: auto; font-family: "IBM Plex Mono", Consolas, monospace; font-size: 11px; }
.ai-prompt-text { margin: 10px 12px 0; min-height: 52px; padding: 8px 10px; border: 1px solid rgba(236, 236, 232, 0.18); border-radius: 6px; background: #101114; font-size: 15px; line-height: 1.5; gap: 0; }
.ai-prompt-text .ai-spark { display: none; }
.ai-caret { background: #ecece8; height: 18px; margin-top: 3px; margin-left: 1px; }
.ai-prompt-foot { padding: 8px 12px 12px; gap: 10px; }
.ai-prompt-foot > svg { stroke: #a3a7ad; }
.ai-prompt-foot .ai-hint { margin-right: auto; color: #6b717a; font-size: 11.5px; }
.ai-send { width: 30px; height: 30px; border-radius: 6px; border: 0; background: rgba(236, 236, 232, 0.14); }
.ai-send svg { stroke: #a3a7ad; transform: rotate(-90deg); }
.ai-stage.is-ready .ai-send { background: #ecece8; }
.ai-stage.is-ready .ai-send svg { stroke: #101114; }
@media (max-width: 1100px) { .gbx.is-wide .gbx-vig { width: 330px; } .ai-prompt { right: 40px; } }
@media (max-width: 700px) { .gbx.is-wide .gbx-vig { width: auto; } .gbx-compare { display: none !important; } .ai-prompt { left: 16px; right: 16px; width: auto; top: 140px; } }

/* Brand row: every logo flat dark gray (white logos like NinjaTrader and CME included); cards spaced like cwan's */
.brand-logo { filter: none; opacity: 1; }
.brand-logo img { filter: grayscale(1) brightness(0); opacity: .55; transition: opacity .2s ease; }
.brand-logo:hover img { opacity: .8; }
.brand-logo span { color: #000; opacity: .55; }
.brand-logo img[src$="coinbase.svg"] { height: 24px; }
.latest-cards { gap: 20px; }
.latest-card + .latest-card { margin-left: 0; }

/* ---- Nov 10 pass 3 ---- */
/* Poppins (cwan.com's hero face) replaces Syne */
@font-face { font-family: "Poppins"; font-style: normal; font-display: swap; font-weight: 400; src: url("../fonts/poppins-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-display: swap; font-weight: 500; src: url("../fonts/poppins-latin-500-normal.woff2") format("woff2"); }
.hero h1 { font-family: "Poppins", var(--font-inter); font-weight: 400; letter-spacing: -0.01em; line-height: 1.1; }
.hero .stat b, .hero .jump b, .stat-card b { font-family: "Poppins", var(--font-inter); font-weight: 500; letter-spacing: -0.02em; }

/* Home hero: content sits in the bottom-left of the card */
.hero.full .hero-body { align-items: flex-end; padding-top: 120px; padding-bottom: 64px; }
@media (max-width: 768px) { .hero.full .hero-body { padding-top: 110px; padding-bottom: 36px; } }

/* Dropdowns: narrower; the feature card stacks and fades to the hovered link */
.topbar .nav-pill li.has-menu .mega { width: min(760px, calc(100vw - 72px)); grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 20px; padding: 78px 20px 20px; }
.mega-feature { display: grid; grid-template-columns: 1fr; padding: 16px; }
.mega-feat { grid-area: 1 / 1; display: grid; gap: 14px; align-content: start; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s; }
.mega-feat.is-on { opacity: 1; visibility: visible; transition: opacity .25s ease .05s, visibility 0s; }
.mega-visual.is-vps svg, .mega-visual.is-plans svg, .mega-visual.is-colo svg, .mega-visual.is-code svg, .mega-visual.is-case svg { width: 86%; }
.mega-links a[data-feat]:hover, .mega-links a[data-feat]:focus-visible { background: #F2F4F7; }
@media (prefers-reduced-motion: reduce) { .mega-feat, .mega-feat.is-on { transition: none; } }

/* What we do: link and arrows in black */
.latest-all, .latest-all:hover, .latest-arrow, .path-arrow { color: #17191D; }

/* Logo carousel, like cwan.com: one continuous row moving left (~50px/s), faded at the edges */
.brand-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.brand-track { display: flex; width: max-content; animation: brandScroll 36s linear infinite; }
.brand-marquee .brand-row { flex: none; flex-wrap: nowrap; justify-content: flex-start; gap: 96px; padding-right: 96px; }
@keyframes brandScroll { to { transform: translateX(-33.3333%); } }
@media (max-width: 860px) { .brand-marquee .brand-row { justify-content: flex-start; gap: 56px; padding-right: 56px; } .brand-track { animation-duration: 26s; } }
@media (prefers-reduced-motion: reduce) { .brand-track { animation: none; } .brand-marquee .brand-row[aria-hidden] { display: none; } .brand-marquee .brand-row { flex-wrap: wrap; justify-content: center; gap: 32px 48px; padding: 0; } .brand-track { width: auto; } .brand-marquee { mask-image: none; -webkit-mask-image: none; } }

/* Vig preview fills the rounded container edge to edge (no gray margin) */
.ai-stage { height: auto; padding: 0; background: #101114; }
.ai-editor { -webkit-mask-image: none; mask-image: none; }
.ai-stage .gbx { border: 0; box-shadow: none; }

/* The prompt card: site style (white, rounded, Inter), not the platform's */
.ai-prompt { right: 80px; top: 190px; width: min(520px, calc(100% - 80px)); padding: 16px 18px 14px; border: 0; border-radius: 18px; background: #fff; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); color: #17191D; font-family: var(--font-inter); }
.ai-prompt-head { display: flex; align-items: center; gap: 8px; padding: 0; border: 0; color: #17191D; font-size: 14px; }
.ai-prompt-head img { width: 20px; height: 20px; filter: brightness(0); }
.ai-prompt-head b { color: #17191D; font-weight: 600; }
.ai-prompt-text { margin: 10px 0 0; min-height: 52px; padding: 0; border: 0; background: none; font-size: 18px; line-height: 1.45; color: #17191D; }
.ai-caret { background: #17191D; height: 22px; margin-top: 2px; }
.ai-prompt-foot { padding: 6px 0 0; justify-content: flex-end; }
.ai-send { width: 36px; height: 36px; border-radius: 999px; border: 0; background: #E6E9ED; }
.ai-send svg { stroke: #8A919B; }
.ai-stage.is-ready .ai-send { background: #17191D; }
.ai-stage.is-ready .ai-send svg { stroke: #fff; }
@media (max-width: 1100px) { .ai-prompt { right: 30px; } }
@media (max-width: 700px) { .ai-prompt { left: 16px; right: 16px; width: auto; top: 120px; } }

/* "We have you covered" rows: links black, panel neutral light gray (was a faint blue #EEF2F8) */
.path-give { background: #F1F2F4; }
.path-give .link-arrow, .path-give .link-arrow:hover { color: #17191D; }

/* Dropdown: the links column sets the height; the feature card fits inside it (picture shrinks to the space left) */
.topbar .nav-pill li.has-menu .mega { align-items: stretch; }
.mega-feature { contain: size; min-height: 0; }
.mega-feat { height: 100%; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.mega-feat .mega-visual { flex: 1 1 0; min-height: 0; aspect-ratio: auto; }
.mega-feat .mega-visual svg { height: 80%; width: auto; max-width: 86%; }
.mega-feat .mega-visual img { width: auto; height: 55%; max-height: 64px; }
.mega-feat p { margin: 4px 0 12px; }
.mega-feat .pill-btn { height: 38px; padding: 0 18px; font-size: 14px; }
@media (max-width: 860px) { .mega-feature { contain: none; } }

/* ---- Services page pass (Nov 10) ---- */
.eyebrow.light { color: #fff; }
.btn-dark { background: #17191D; border-color: #17191D; color: #fff; }
.btn-dark:hover { background: #2A2D33; border-color: #2A2D33; color: #fff; }

/* Icon tiles: gray, not blue/coral/green */
.icon-tile.build, .icon-tile.host, .icon-tile.colo, .icon-tile.navy { background: #ECEEF1; }
.icon-tile.build svg, .icon-tile.host svg, .icon-tile.colo svg, .icon-tile.navy svg { stroke: #2B2F36; }
.on-dark .icon-tile { background: rgba(236, 236, 232, 0.08); }
.on-dark .icon-tile svg { stroke: #ecece8; }
.checks li::before { background: #ECEEF1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%2317191D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }

/* Build: Graybook Script panel (platform colours) + execution monitor card */
.gbs-panel { background: #101114; border-color: rgba(236, 236, 232, 0.14); border-radius: 14px; }
.gbs-panel .panel-bar { background: #131518; border-color: rgba(236, 236, 232, 0.1); color: #a3a7ad; font-family: "IBM Plex Mono", var(--font-mono); }
.gbs-code { display: block; border: 0; box-shadow: none; background: none; padding: 14px 0 18px; font-family: "IBM Plex Mono", var(--font-mono); font-size: 12.5px; line-height: 1.7; overflow: hidden; }
.gbs-code .ln { display: flex; }
.gbs-code .ln i { flex: 0 0 34px; padding-right: 10px; text-align: right; font-style: normal; color: #4d525a; }
.gbs-code .ln code { padding-left: 8px; white-space: pre; font: inherit; color: #ecece8; }
.visual-stack { padding-bottom: 96px; }
.lat-card { position: absolute; right: -16px; bottom: 0; width: min(330px, 80%); }
.mon { padding: 18px 20px 16px; border-radius: 16px; background: #17191D; border: 1px solid rgba(236, 236, 232, 0.14); box-shadow: 0 30px 60px rgba(10, 12, 16, 0.4); color: #ecece8; font-family: var(--font-inter); }
.mon-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mon-title { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.mon-title i { width: 7px; height: 7px; border-radius: 50%; background: #6fd6c4; box-shadow: 0 0 0 3px rgba(111, 214, 196, 0.18); animation: monPulse 2s ease-in-out infinite; }
@keyframes monPulse { 50% { box-shadow: 0 0 0 6px rgba(111, 214, 196, 0.05); } }
.mon-now { font-size: 12px; color: #a3a7ad; }
.mon-now b { font-size: 20px; font-weight: 600; color: #fff; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.mon-spark { display: block; width: 100%; height: 64px; margin: 14px 0 12px; overflow: visible; }
.mon-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 12px; border-top: 1px solid rgba(236, 236, 232, 0.1); }
.mon-stats b { display: block; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mon-stats b small { font-size: 11px; font-weight: 500; color: #a3a7ad; margin-left: 2px; }
.mon-stats span { font-size: 11.5px; color: #a3a7ad; }
@media (prefers-reduced-motion: reduce) { .mon-title i { animation: none; } }

/* Build: asset classes / how we engage as a path row */
.engage-row .chips { margin-top: 10px; gap: 6px; }
.engage-row .chip { padding: 5px 12px; font-size: 13.5px; background: #fff; border-color: #D7DCE3; }
.engage-row .path-care { padding: 24px 0; }

/* Host: server dashboard */
.srv-panel { border-radius: 18px; background: #17191D; border: 1px solid rgba(236, 236, 232, 0.12); box-shadow: 0 30px 60px rgba(10, 12, 16, 0.35); color: #ecece8; font-family: var(--font-inter); overflow: hidden; }
.srv-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid rgba(236, 236, 232, 0.08); }
.srv-head b { font-size: 16px; font-weight: 600; }
.srv-head small { margin-left: 10px; font-size: 12.5px; color: #a3a7ad; }
.srv-new { padding: 7px 14px; border-radius: 999px; background: #ecece8; color: #17191D; font-size: 13px; font-weight: 600; }
.srv-list { padding: 8px; display: grid; gap: 6px; }
.srv { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr) auto; gap: 14px; align-items: center; padding: 12px 12px; border-radius: 12px; background: #1D2025; }
.srv small { display: block; font-size: 11px; color: #8A9099; }
.srv-name { display: grid; grid-template-columns: auto 1fr; column-gap: 9px; align-items: center; min-width: 0; }
.srv-name b { font-family: "IBM Plex Mono", var(--font-mono); font-size: 13px; font-weight: 500; }
.srv-name small { grid-column: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot.is-ok { background: #6fd6c4; box-shadow: 0 0 0 3px rgba(111, 214, 196, 0.15); }
.dot.is-busy { background: #ffcb6b; box-shadow: 0 0 0 3px rgba(255, 203, 107, 0.15); }
.srv-loc { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.srv-loc em { font-style: normal; display: grid; place-items: center; width: 26px; height: 20px; border-radius: 5px; background: rgba(236, 236, 232, 0.08); font-size: 10.5px; font-weight: 600; color: #a3a7ad; }
.srv-m { display: grid; grid-template-columns: 1fr auto; row-gap: 5px; column-gap: 8px; align-items: center; }
.srv-m small { grid-column: 1 / -1; }
.srv-m b, .srv-up b { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.meter { height: 4px; border-radius: 4px; background: rgba(236, 236, 232, 0.1); overflow: hidden; }
.meter span { display: block; height: 100%; border-radius: 4px; background: #7fd4ff; }
.meter.is-warn span { background: #ffcb6b; }
.srv-up small { margin-bottom: 4px; }
.srv-go { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(236, 236, 232, 0.2); font-size: 12px; font-weight: 500; }
.srv-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 20px 14px; border-top: 1px solid rgba(236, 236, 232, 0.08); font-size: 12px; color: #a3a7ad; }
.srv-foot span:first-child { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 1240px) { .srv { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) auto; } .srv-m:nth-of-type(4), .srv-up { display: none; } }
@media (max-width: 560px) { .srv { grid-template-columns: minmax(0, 1fr) auto; } .srv-loc, .srv-m { display: none; } .srv-foot span:last-child { display: none; } }

/* Host: plan cards */
.plans-h { font-size: 32px; }
.plans-sub { margin-top: 4px; font-size: 15px; color: var(--muted); }
.plan-table, .plan-cards { display: none !important; }
.pcards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.pcard { display: flex; flex-direction: column; padding: 26px 22px 22px; border-radius: 24px; background: #fff; border: 1px solid #D7DCE3; color: #17191D; font-family: var(--font-inter); }
.pcard-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; }
.pcard h4 { font-family: var(--font-inter); font-size: 20px; font-weight: 600; }
.pcard-badge { padding: 4px 10px; border-radius: 999px; background: #ecece8; color: #17191D; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.pcard-fit { margin-top: 8px; min-height: 48px; font-size: 14.5px; line-height: 1.5; color: #5A6270; }
.pcard-price { display: flex; align-items: baseline; gap: 4px; margin: 18px 0 18px; font-family: "Poppins", var(--font-inter); font-size: 34px; font-weight: 500; letter-spacing: -0.02em; }
.pcard-price small { font-family: var(--font-inter); font-size: 14px; font-weight: 400; color: #5A6270; letter-spacing: 0; }
.pcard-spec { list-style: none; display: grid; margin-bottom: 22px; border-top: 1px solid #E6E9ED; }
.pcard-spec li { display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid #E6E9ED; font-size: 14px; }
.pcard-spec svg { width: 18px; height: 18px; fill: none; stroke: #5A6270; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pcard-spec span { color: #5A6270; }
.pcard-spec b { font-weight: 600; font-variant-numeric: tabular-nums; }
.pcard .btn { margin-top: auto; width: 100%; min-height: 46px; border-radius: 999px; font-size: 15px; }
.pcard.is-pop { background: #17191D; border-color: #17191D; color: #ecece8; box-shadow: 0 30px 60px rgba(10, 12, 16, 0.25); }
.pcard.is-pop .pcard-fit, .pcard.is-pop .pcard-price small, .pcard.is-pop .pcard-spec span { color: #a3a7ad; }
.pcard.is-pop .pcard-spec, .pcard.is-pop .pcard-spec li { border-color: rgba(236, 236, 232, 0.12); }
.pcard.is-pop .pcard-spec svg { stroke: #a3a7ad; }
.pcard.is-pop .btn-light { background: #fff; color: #17191D; border-color: #fff; }
@media (max-width: 1200px) { .pcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .pcards { grid-template-columns: 1fr; } .pcard-fit { min-height: 0; } }

/* Host: cards below the plans, in the same rounded style */
.vps-extras .card { border-radius: 24px; border-color: #D7DCE3; padding: 30px 28px; }
.vps-extras .card h3 { font-family: var(--font-inter); font-size: 21px; font-weight: 600; letter-spacing: -0.01em; margin: 18px 0 8px; }
.vps-extras .card > p { font-size: 15.5px; }
.vps-extras .chip { background: #F1F2F4; border-color: transparent; font-size: 13.5px; }
.vps-extras .checks { font-size: 15.5px; margin-top: 14px; }

/* Colocate: illustration card */
.colo-card { padding: 22px 22px 20px; border-radius: 20px; background: #101114; border: 1px solid rgba(236, 236, 232, 0.14); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45); }
.colo-head { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-inter); font-size: 14px; color: #ecece8; }
.colo-head span { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: #a3a7ad; }
.colo-head span i { width: 7px; height: 7px; border-radius: 50%; background: #6fd6c4; box-shadow: 0 0 0 3px rgba(111, 214, 196, 0.18); }
.colo-svg { display: block; width: 100%; height: auto; margin-top: 14px; }
.colo-svg .lbl { font: 600 10px "IBM Plex Mono", var(--font-mono); letter-spacing: .14em; fill: #8A9099; }
.colo-svg .tag { font: 10px "IBM Plex Mono", var(--font-mono); fill: #8A9099; }
.colo-svg .eng { font: 600 11px var(--font-inter); fill: #ecece8; }
.colo-svg .flow { font: 10.5px var(--font-inter); fill: #a3a7ad; }
.colo-svg .blink { animation: ledBlink 1.4s steps(2) infinite; }
@keyframes ledBlink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .colo-svg .pkt { display: none; } .colo-svg .blink { animation: none; } }
.colo-card .op-readouts { border-color: rgba(236, 236, 232, 0.1); }
.colo-card .op-readouts b { font-family: var(--font-inter); font-weight: 600; }
.colo-svg .unit { font: 600 7.5px "IBM Plex Mono", var(--font-mono); letter-spacing: .08em; fill: #7fd4ff; }
.srv-loc { white-space: nowrap; }
@media (max-width: 700px) { .lat-card { right: 0; width: min(330px, 88%); } }

/* ---- Nov 10: order book, servers, monitor, FAQ, card glow ---- */
.colo-svg .ob-bar { transition: width .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1); }
.colo-svg .ob-ask { fill: rgba(240, 113, 120, 0.22); }
.colo-svg .ob-bid { fill: rgba(111, 214, 196, 0.22); }
.colo-svg .ob-px { font: 10px "IBM Plex Mono", var(--font-mono); }
.colo-svg .ob-ask-t { fill: #f07178; }
.colo-svg .ob-bid-t { fill: #6fd6c4; }
.colo-svg .ob-sz { font: 10px "IBM Plex Mono", var(--font-mono); fill: #a3a7ad; transition: fill .3s ease; }
.colo-svg .ob-sz.is-tick { fill: #fff; }
.colo-svg .ob-last { font: 600 10.5px "IBM Plex Mono", var(--font-mono); fill: #fff; }

.meter span { background: #6fd6c4; }
.meter.is-high span { background: #ef5350; }
.srv { grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr) auto; }

/* FAQ: black text and icons; height animation like graybook.co (260ms open, 220ms close) */
.faq .eyebrow, .faq a, .faq a:hover { color: #17191D; }
.faq details { padding: 0; border-radius: 14px; overflow: hidden; transition: border-color .2s ease; }
.faq details[open] { border-color: #17191D; }
.faq summary { align-items: center; padding: 20px 22px; transition: background .15s ease; }
.faq summary:hover { background: #F6F7F8; }
.faq summary::after { content: none; }
.faq-ic { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; border: 1px solid #C9CED6; color: #17191D; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.faq-ic svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: transform .2s ease; }
.faq details[open] .faq-ic { background: #17191D; border-color: #17191D; color: #fff; }
.faq details[open] .faq-ic svg { transform: rotate(45deg); }
.faq-body { overflow: hidden; }
.faq-body p { padding: 0 22px 22px; color: var(--muted); }

.card:hover, .svc:hover, .featured-case:hover, .case:hover, .member:hover, .svc-mini:hover, .latest-card:hover, .pcard:hover { transform: none; }
.faq details[open] summary::after { content: none; }
.faq details .faq-body p { padding: 0 22px 22px; }
.dot.is-busy { background: #ef5350; box-shadow: 0 0 0 3px rgba(239, 83, 80, 0.15); }

/* ---- Nov 10: outline glow, glue toggle, location maps ---- */
.card:hover, .svc:hover, .case:hover, .member:hover, .svc-mini:hover, .featured-case:hover { box-shadow: none; }

/* Billing toggle: sliding thumb */
.toggle.has-thumb { position: relative; border-radius: 999px; }
.toggle.has-thumb button { position: relative; z-index: 1; border-radius: 999px; background: none; transition: color .3s ease; }
.toggle.has-thumb button.on { background: none; color: #fff; }
.toggle-thumb { position: absolute; top: 4px; bottom: 4px; border-radius: 999px; background: #17191D; }
.pcard-price [data-monthly] { will-change: opacity, filter, transform; }

/* Where we can put you: map preview on the right of each card */
.loc-card { position: relative; overflow: hidden; padding-right: 172px; border-radius: 16px; }
.loc-map { position: absolute; top: 0; right: 0; bottom: 0; width: 156px; display: flex; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28%); mask-image: linear-gradient(90deg, transparent, #000 28%); }
.loc-view { position: relative; flex: 1; overflow: hidden; }
.loc-map.is-split .loc-view + .loc-view { border-left: 1px solid rgba(236, 236, 232, 0.18); }
.loc-view img { position: absolute; width: 256px; height: 256px; max-width: none; filter: grayscale(1) invert(1) brightness(.78) contrast(1.15); }
.loc-dim { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, transparent 0, transparent 26px, rgba(23, 25, 29, 0.55) 52px, rgba(23, 25, 29, 0.88) 90px); }
.loc-pin { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #6fd6c4; box-shadow: 0 0 0 4px rgba(111, 214, 196, 0.25), 0 0 14px rgba(111, 214, 196, 0.6); }
.maps-credit { margin-top: 14px; font-size: 12px; color: var(--muted-on-dark); }
.maps-credit a { color: inherit; }
@media (max-width: 420px) { .loc-card { padding-right: 120px; } .loc-map { width: 110px; } }
.loc-card .loc-map { display: flex; margin: 0; }
.loc-card .loc-view { display: block; margin: 0; height: 100%; }
.loc-card .loc-dim { display: block; margin: 0; }

/* Outline buttons: fill black and the text fades to white on hover */
.btn-outline, .btn-ghost { transition: background .25s ease, border-color .25s ease, color .25s ease; }
.btn-outline:hover, .btn-outline:focus-visible { background: #17191D; border-color: #17191D; color: #fff; }
.btn-ghost:hover, .btn-ghost:focus-visible { background: #17191D; border-color: #17191D; color: #fff; }

/* Execution monitor: the sparkline draws from left to right when it comes into view */
.mon-spark { clip-path: inset(0 100% 0 0); }
.mon-head-dot { opacity: 0; transition: opacity .3s ease .95s; }
.mon.is-drawn .mon-spark { clip-path: inset(0 0 0 0); transition: clip-path 1.1s cubic-bezier(0.65, 0, 0.35, 1); }
.mon.is-drawn .mon-head-dot { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .mon-spark { clip-path: none; } .mon-head-dot { opacity: 1; } }

/* ---- Page transitions (cross-document View Transitions; browsers without it just navigate) ---- */
@view-transition { navigation: auto; }
.topbar { view-transition-name: topbar; }
::view-transition-group(topbar) { animation-duration: 0s; }
::view-transition-old(root) { animation: vtOut 220ms cubic-bezier(0.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vtIn 420ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-8px); filter: blur(4px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

/* Breadcrumb link in hero eyebrows */
.eyebrow .crumb { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.4); }

/* Case study pages */
.case-doc { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 64px; align-items: start; }
.case-facts { position: sticky; top: 24px; padding: 26px; border-radius: 20px; background: #F1F2F4; }
.case-facts dl { display: grid; gap: 4px; }
.case-facts dt { font-size: 13px; color: var(--muted); margin-top: 10px; }
.case-facts dt:first-child { margin-top: 0; }
.case-facts dd { font-size: 16px; font-weight: 500; color: #17191D; }
.case-facts .metrics { display: grid; gap: 16px; margin-top: 22px; padding-top: 18px; border-top: 1px solid #D7DCE3; }
.case-facts .metrics b { display: block; font-family: "Poppins", var(--font-inter); font-size: 28px; font-weight: 500; }
.case-facts .metrics span { font-size: 14px; color: var(--muted); }
.case-body h2 { font-size: clamp(26px, 2.4vw, 32px); margin: 0 0 12px; }
.case-body p { max-width: 68ch; color: var(--muted); margin-bottom: 40px; }
@media (max-width: 860px) { .case-doc { grid-template-columns: 1fr; gap: 32px; } .case-facts { position: static; } }

/* Legal pages */
.legal-doc { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 64px; align-items: start; }
.legal-toc { position: sticky; top: 24px; }
.legal-toc ul { list-style: none; display: grid; gap: 2px; margin-top: 14px; }
.legal-toc a { display: block; padding: 7px 12px; border-radius: 10px; color: #17191D; text-decoration: none; font-size: 15px; }
.legal-toc a:hover { background: #F1F2F4; }
.legal-meta { font-size: 14px; color: var(--muted); padding-left: 12px; }
.legal-note { margin-bottom: 28px; font-size: 15px; }
.legal-sec { padding: 0 0 32px; margin-bottom: 32px; border-bottom: 1px solid #E6E9ED; scroll-margin-top: 24px; }
.legal-sec h2 { font-family: var(--font-inter); font-size: 22px; font-weight: 600; margin-bottom: 12px; }
.legal-sec p, .legal-sec li { color: #3D434C; font-size: 17px; line-height: 1.65; max-width: 72ch; }
.legal-sec ul { padding-left: 20px; display: grid; gap: 8px; }
@media (max-width: 860px) { .legal-doc { grid-template-columns: 1fr; gap: 24px; } .legal-toc { position: static; } }

/* Careers */
.roles { display: grid; border-top: 1px solid #D7DCE3; }
.role { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) 32px; gap: 16px; align-items: center; padding: 24px 8px; border-bottom: 1px solid #D7DCE3; color: #17191D; text-decoration: none; transition: background .2s ease, padding .25s ease; }
.role:hover { background: #F6F7F8; padding-left: 16px; color: #17191D; text-decoration: none; }
.role b { font-family: var(--font-inter); font-size: 20px; font-weight: 500; }
.role span { color: var(--muted); font-size: 16px; }
.role .role-go { color: #17191D; font-size: 22px; text-align: right; }
@media (max-width: 700px) { .role { grid-template-columns: 1fr 24px; } .role span:not(.role-go) { grid-column: 1; } .role .role-go { grid-row: 1; grid-column: 2; } }

/* Status */
.status { max-width: 980px; }
.st-banner { display: flex; align-items: center; gap: 18px; padding: 24px 28px; border-radius: 20px; background: #17191D; color: #fff; margin-bottom: 40px; }
.st-banner h2 { font-family: var(--font-inter); font-size: 24px; font-weight: 600; color: #fff; }
.st-banner p { color: #a3a7ad; font-size: 15px; margin-top: 2px; }
.st-dot { width: 14px; height: 14px; border-radius: 50%; background: #6fd6c4; box-shadow: 0 0 0 6px rgba(111, 214, 196, 0.18); flex: none; }
.st-group { margin-bottom: 36px; padding: 8px 24px 16px; border: 1px solid #D7DCE3; border-radius: 20px; }
.st-group h3 { font-family: var(--font-inter); font-size: 18px; font-weight: 600; padding: 16px 0 6px; }
.st-row { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 12px 0; border-bottom: 1px solid #EEF0F2; }
.st-name { font-size: 16px; color: #17191D; }
.st-bars { display: grid; grid-template-columns: repeat(90, minmax(0, 1fr)); gap: 2px; height: 26px; }
.st-bars i { border-radius: 2px; background: #6fd6c4; opacity: .85; }
.st-state { font-size: 14px; font-weight: 500; color: #17191D; }
.st-scale { display: flex; justify-content: space-between; padding-top: 10px; font-size: 13px; color: var(--muted); }
.st-history h3 { font-family: var(--font-inter); font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.st-history p, .st-note { color: var(--muted); }
.st-note { margin-top: 24px; font-size: 14px; }
@media (max-width: 700px) { .st-row { grid-template-columns: 1fr auto; } .st-bars { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(45, minmax(0, 1fr)); } .st-bars i:nth-child(-n+45) { display: none; } }

/* Location maps v2: our own dark SVG maps, building lit up */
.loc-card .loc-map { width: 168px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%); mask-image: linear-gradient(90deg, transparent, #000 22%); }
.loc-card { padding-right: 184px; }
.loc-view img { position: absolute; left: 50%; top: 50%; width: 156px; height: 122px; max-width: none; transform: translate(-50%, -50%) scale(1.06); filter: none; object-fit: cover; }
.loc-map.is-split .loc-view img { width: 156px; }
@media (max-width: 420px) { .loc-card { padding-right: 128px; } .loc-card .loc-map { width: 118px; } }
.loc-view img { left: 0; top: 0; width: 100%; height: 100%; transform: none; object-fit: cover; }
.loc-map.is-split .loc-view img { width: 100%; }

/* Dropdowns stay on top of everything: the header sits above the hero content, and the hero card
   no longer clips (its video and gradient are clipped to the rounded corners instead). */
.hero { overflow: visible; }
.hero > .background-layer, .hero > .hero-gradient { border-radius: inherit; overflow: hidden; }
.hero .topbar { z-index: 30; }

/* ---- Articles & case studies (/work/<slug>) ---- */
.art-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100; pointer-events: none; }
.art-progress span { display: block; height: 100%; width: 100%; background: #17191D; transform-origin: 0 50%; transform: scaleX(0); }
.art-hero .hero-body { padding-top: 56px; max-width: 980px; }
.art-hero h1 { font-size: clamp(36px, 4.4vw, 60px); }
.art-hero .lead { max-width: 720px; }
.art-byline { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 16px; margin-top: 30px; font-family: var(--font-inter); }
.art-avatar { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.25); color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.art-avatar.is-lg { width: 56px; height: 56px; font-size: 17px; background: #17191D; border: 0; }
.art-who b { display: block; font-size: 15px; font-weight: 600; color: #fff; }
.art-who small { display: block; font-size: 13.5px; color: rgba(255, 255, 255, 0.7); }
.art-when { font-size: 14px; color: rgba(255, 255, 255, 0.7); padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, 0.25); }

.art-wrap { padding-top: 64px; }
.art-cover { margin: 0 0 40px; }
.art-cover img { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 24px; }
.art-cover figcaption, .art-body figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); }
.art-keystats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 56px; }
.art-keystats div, .art-stats div { padding: 22px 24px; border-radius: 20px; background: #F1F2F4; }
.art-keystats b, .art-stats b { display: block; font-family: "Poppins", var(--font-inter); font-size: 34px; font-weight: 500; letter-spacing: -0.02em; color: #17191D; }
.art-keystats span, .art-stats span { font-size: 15px; color: var(--muted); }

.art-layout { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 720px); gap: 72px; justify-content: center; align-items: start; }
.art-side { position: sticky; top: 28px; display: grid; gap: 28px; font-family: var(--font-inter); }
.art-side-h { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: -16px; }
.art-toc { list-style: none; display: grid; gap: 2px; border-left: 2px solid #E6E9ED; }
.art-toc a { display: block; margin-left: -2px; padding: 6px 0 6px 14px; border-left: 2px solid transparent; color: #5A6270; font-size: 15px; line-height: 1.4; text-decoration: none; transition: color .2s ease, border-color .2s ease; }
.art-toc a:hover { color: #17191D; }
.art-toc a.is-active { color: #17191D; border-left-color: #17191D; font-weight: 500; }
.art-facts { display: grid; gap: 2px; padding-top: 22px; border-top: 1px solid #E6E9ED; }
.art-facts dt { font-size: 13px; color: var(--muted); margin-top: 8px; }
.art-facts dd { font-size: 15px; color: #17191D; }
.art-share { display: flex; flex-wrap: wrap; gap: 8px; }
.art-share-btn { padding: 7px 14px; border-radius: 999px; border: 1px solid #D7DCE3; background: #fff; color: #17191D; font: 500 13.5px var(--font-inter); text-decoration: none; cursor: pointer; transition: background .25s ease, color .25s ease, border-color .25s ease; }
.art-share-btn:hover { background: #17191D; border-color: #17191D; color: #fff; text-decoration: none; }

.art-body { font-family: var(--font-inter); font-size: 19px; line-height: 1.75; color: #2B2F36; }
.art-body > p:first-child { font-size: 22px; line-height: 1.6; color: #17191D; }
.art-body p, .art-body ul, .art-body ol, .art-body table, .art-body pre, .art-body figure, .art-body blockquote, .art-body .art-stats, .art-body .art-callout { margin: 0 0 28px; }
.art-body h2 { font-size: clamp(28px, 2.6vw, 36px); line-height: 1.2; margin: 56px 0 18px; scroll-margin-top: 28px; color: var(--navy); }
.art-body h3 { font-family: var(--font-inter); font-size: 22px; font-weight: 600; margin: 36px 0 12px; color: #17191D; }
.art-body a { color: #17191D; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.art-body strong { color: #17191D; }
.art-body ul, .art-body ol { padding-left: 24px; display: grid; gap: 8px; }
.art-body li::marker { color: #8A9099; }
.art-body code { font-family: "IBM Plex Mono", var(--font-mono); font-size: .86em; padding: 2px 6px; border-radius: 6px; background: #F1F2F4; }
.art-body pre { padding: 22px 24px; border-radius: 16px; background: #101114; overflow-x: auto; }
.art-body pre code { padding: 0; background: none; color: #ecece8; font-size: 15px; line-height: 1.7; }
.art-body blockquote { margin: 44px 0; padding: 4px 0 4px 28px; border-left: 3px solid #17191D; }
.art-body blockquote p { font-family: "Poppins", var(--font-inter); font-size: 26px; line-height: 1.4; color: #17191D; margin-bottom: 14px; }
.art-body blockquote p:last-child { font-family: var(--font-inter); font-size: 15px; color: var(--muted); margin: 0; }
.art-body figure img { display: block; width: 100%; border-radius: 18px; }
.art-figure-placeholder { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 18px; background: linear-gradient(135deg, #2A2D33, #5B6067); color: rgba(255, 255, 255, 0.7); font-size: 15px; }
.art-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.art-stats b { font-size: 28px; }
.art-callout { padding: 24px 26px; border-radius: 18px; background: #17191D; color: #d5d7da; }
.art-callout p { margin: 0; }
.art-callout strong { color: #fff; }
.art-body table { width: 100%; border-collapse: collapse; font-size: 16px; }
.art-body th { text-align: left; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 10px 12px; border-bottom: 2px solid #17191D; }
.art-body td { padding: 12px; border-bottom: 1px solid #E6E9ED; }

.art-end { max-width: 1032px; margin: 56px auto 0; padding-top: 32px; border-top: 1px solid #E6E9ED; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
.art-tags .chip { text-decoration: none; color: #17191D; background: #F1F2F4; border-color: transparent; }
.art-author { display: flex; align-items: center; gap: 14px; font-family: var(--font-inter); }
.art-author b { display: block; font-size: 16px; color: #17191D; }
.art-author span:not(.art-avatar) { font-size: 14px; color: var(--muted); }
@media (max-width: 1000px) {
  .art-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .art-side { position: static; }
  .art-side-h, .art-toc { display: none; }
  .art-end { margin-top: 40px; }
}
@media (max-width: 600px) { .art-body { font-size: 17.5px; } .art-body > p:first-child { font-size: 19px; } .art-body blockquote p { font-size: 21px; } .art-when { border: 0; padding: 0; width: 100%; } }
.art-keystats, .art-cover { max-width: 1032px; margin-left: auto; margin-right: auto; }

/* Location maps v3 (react-simple-maps, a few buildings, no roads): plain, ~120/255 visibility, no fade */
.loc-card .loc-map { width: 176px; top: 10px; bottom: 10px; right: 10px; opacity: 0.47; -webkit-mask-image: none; mask-image: none; }
.loc-card { padding-right: 196px; }
.loc-view img { left: 0; top: 0; width: 100%; height: 100%; transform: none; object-fit: contain; filter: none; }
.loc-map.is-split { gap: 10px; }
.loc-map.is-split .loc-view + .loc-view { border-left: 0; }
@media (max-width: 420px) { .loc-card { padding-right: 132px; } .loc-card .loc-map { width: 116px; } }
/* Only lift the hero above the page while a dropdown is open (the contact form card overlaps the hero). */

/* ---- Work page: white tags, rounded cards, hover dims the others, empty state ---- */
.tag.white { background: #fff; color: #17191D; border: 0; }
.case { border-radius: 24px; border-color: #D7DCE3; transition: box-shadow .3s ease, opacity .3s ease; }
.case .cover { border-radius: 0; }
.work-grid:hover .case:not(:hover) { opacity: .5; }
.case:hover { box-shadow: 0 24px 50px rgba(17, 19, 22, 0.12); }
.filters button { transition: background .3s ease, border-color .3s ease, color .3s ease; }
.filters button:not(.on):hover { background: #F1F2F4; }
.work-grid:empty { display: none; }
.work-empty { position: relative; }
.work-empty[hidden] { display: none; }
.skel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.skel-card { border-radius: 24px; overflow: hidden; background: #fff; border: 1px solid #D7DCE3; }
.skel-cover { height: 180px; padding: 18px; background: #2A2D33; }
.skel-body { padding: 22px 24px 28px; display: grid; gap: 12px; }
.skel-body i { display: block; height: 14px; border-radius: 7px; background: linear-gradient(90deg, #ECEEF1 0%, #F7F8F9 40%, #ECEEF1 80%); background-size: 200% 100%; animation: skel 1.6s ease-in-out infinite; animation-delay: calc(var(--i) * 0.15s); }
.skel-body i:first-child { height: 20px; width: 80%; }
.skel-body i.short { width: 45%; }
@keyframes skel { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.work-empty-msg { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; gap: 10px; background: radial-gradient(ellipse at center, rgba(207, 211, 216, 0.96) 0%, rgba(207, 211, 216, 0.85) 45%, rgba(207, 211, 216, 0.2) 80%); border-radius: 24px; }
.work-empty-msg h2 { font-size: clamp(32px, 3.2vw, 44px); }
.work-empty-msg p { color: #3D434C; font-size: 18px; margin-bottom: 10px; }
@media (max-width: 860px) { .skel-grid { grid-template-columns: 1fr; } .skel-card:nth-child(n+2) { display: none; } }
@media (prefers-reduced-motion: reduce) { .skel-body i { animation: none; } }

/* White buttons dim a little on hover */
.btn-light { transition: background .25s ease, color .25s ease, border-color .25s ease; }
.btn-light:hover, .pcard.is-pop .btn-light:hover, .srv-new:hover { background: #E2E4E7; border-color: #E2E4E7; color: #17191D; transform: none; }

/* Dropdown fades out on leave */
.mega.is-closing { opacity: 0; transform: translateY(-6px); transition: opacity .22s ease, transform .22s ease; pointer-events: none; }



/* ---- About page (cwan.com about + leadership layout) ---- */
.about-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; align-items: end; }
.about-split .lead { margin: 0; }
.about-hero .hero-body { padding-top: 120px; padding-bottom: 24px; }
@media (max-width: 900px) { .about-split { grid-template-columns: 1fr; gap: 20px; } .about-hero .hero-body { padding-top: 72px; } }

.about-proof-wrap { padding: 16px 16px 0; }
.about-proof { border-radius: 24px; padding: 96px 0; color: #fff; background: #17191D; background-image: radial-gradient(ellipse at 0% 100%, #3A3E44 0%, transparent 55%), radial-gradient(ellipse at 100% 0%, #5B6067 0%, transparent 50%); }
.about-proof-head { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: end; margin-bottom: 56px; }
.about-proof-head h2 { color: #fff; font-family: "Poppins", var(--font-inter); font-weight: 400; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.15; letter-spacing: -0.01em; }
.about-proof-head p { color: rgba(255, 255, 255, 0.72); font-size: 18px; }
.proof-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.proof-card { padding: 32px; border-radius: 24px; background: #E8EAED; color: #17191D; min-height: 184px; display: flex; flex-direction: column; justify-content: space-between; }
.proof-card b { font-family: "Poppins", var(--font-inter); font-size: clamp(44px, 4.4vw, 64px); font-weight: 500; line-height: 1; letter-spacing: -0.02em; }
.proof-card span { font-size: 17px; color: #3D434C; margin-top: 24px; }
@media (max-width: 1000px) { .proof-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .about-proof-head { grid-template-columns: 1fr; gap: 16px; } }
@media (max-width: 520px) { .proof-cards { grid-template-columns: 1fr; } .about-proof { padding: 64px 0; } }

/* Meet our team: five cards per row, more people wrap to a new row */
.profiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.profile { position: relative; display: flex; flex-direction: column; padding: 24px 24px 28px; border: 1px solid #D7DCE3; border-radius: 24px; background: #fff; color: #17191D; text-decoration: none; min-height: 100%; }
.profile-photo { display: grid; place-items: center; aspect-ratio: 1; border-radius: 16px; overflow: hidden; margin-bottom: 20px; background: linear-gradient(140deg, #3A3E44 0%, #17191D 100%); }
.profile-photo img { width: 100%; height: 100%; object-fit: cover; }
.profile-initials { font-family: "Poppins", var(--font-inter); font-size: 44px; font-weight: 500; color: #fff; letter-spacing: .02em; }
.profile h3 { font-family: var(--font-inter); font-size: 20px; font-weight: 600; line-height: 1.3; margin-bottom: 6px; }
.profile p { font-size: 15.5px; line-height: 1.45; color: #4A5260; }
.profile-li { position: absolute; right: 22px; bottom: 22px; width: 22px; height: 22px; color: #17191D; }
.profile-li svg { width: 100%; height: 100%; fill: currentColor; }
.profile.is-open { border-style: dashed; border-color: #B9C0CA; background: #F7F8F9; transition: background .25s ease, border-color .25s ease; }
.profile.is-open:hover { background: #fff; border-color: #17191D; text-decoration: none; color: #17191D; }
.profile-photo.is-open { background: #ECEEF1; }
.profile-photo.is-open svg { width: 40px; height: 40px; fill: none; stroke: #8A9099; stroke-width: 1.5; stroke-linecap: round; transition: stroke .25s ease, transform .3s ease; }
.profile.is-open:hover .profile-photo.is-open svg { stroke: #17191D; transform: rotate(90deg); }
.profile-link { margin-top: auto; padding-top: 16px; font-size: 14.5px; font-weight: 500; }
@media (max-width: 1200px) { .profiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 960px) { .profiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px) { .profiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .profile { padding: 16px 16px 20px; } .profile h3 { font-size: 17px; } .profile p { font-size: 14px; } }

/* ---- Work: featured "Nothing yet" card above plain skeletons ---- */
.work-empty-msg { display: none; }
.work-featured { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); border-radius: 24px; overflow: hidden; background: #fff; border: 1px solid #D7DCE3; margin-bottom: 24px; }
.work-featured-cover { min-height: 300px; padding: 24px; background: #2A2D33; background-image: radial-gradient(ellipse at 20% 100%, #5B6067 0%, transparent 60%); }
.work-featured-body { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; padding: 48px; }
.work-featured-body .meta { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.work-featured-body h2 { font-size: clamp(32px, 3.2vw, 44px); }
.work-featured-body p:not(.meta) { font-size: 18px; color: #3D434C; margin-bottom: 12px; }
@media (max-width: 860px) { .work-featured { grid-template-columns: 1fr; } .work-featured-cover { min-height: 160px; } .work-featured-body { padding: 28px; } }

/* ---- About: principles between the hero and the stats band (cwan "A global vision" layout) ---- */
.about-vision { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 72px; align-items: start; }
.about-vision h2 { font-family: "Poppins", var(--font-inter); font-weight: 400; font-size: clamp(32px, 3.2vw, 44px); line-height: 1.15; letter-spacing: -0.01em; color: #17191D; position: sticky; top: 32px; }
.principles { display: grid; }
.principles > div { padding: 26px 0; border-top: 1px solid #D7DCE3; }
.principles > div:last-child { border-bottom: 1px solid #D7DCE3; }
.principles h3 { font-family: var(--font-inter); font-size: 21px; font-weight: 600; color: #17191D; margin-bottom: 8px; }
.principles p { font-size: 18px; line-height: 1.6; color: #3D434C; }
@media (max-width: 900px) { .about-vision { grid-template-columns: 1fr; gap: 28px; } .about-vision h2 { position: static; } }
/* Open seats: solid outline */
.profile.is-open { border-style: solid; border-color: #D7DCE3; }

/* ---- Contact ---- */
.svc-pick button { background: #fff; border-color: #D7DCE3; color: #17191D; transition: background .35s ease, border-color .35s ease, color .35s ease, opacity .25s ease; }
.svc-pick button:hover { opacity: .62; }
.svc-pick button.on { background: #17191D; border-color: #17191D; color: #fff; }
.field input, .field select, .field textarea { border-radius: 12px; border-color: #D7DCE3; color: #17191D; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #17191D; background: #fff; box-shadow: 0 0 0 3px rgba(23, 25, 29, 0.08); }
.field select { -webkit-appearance: none; appearance: none; padding-right: 44px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%2317191D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center / 14px; }
.field select:hover, .field input:hover, .field textarea:hover { border-color: #AEB5BF; }
.field[hidden] { display: none; }
.next li b { background: #E1E4E8; color: #17191D; }
.next ol[hidden] { display: none; }
.dropzone { display: grid; justify-items: center; gap: 6px; padding: 32px 20px; border: 1.5px dashed #C3C9D2; border-radius: 16px; background: #F7F8F9; text-align: center; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.dropzone:hover, .dropzone.is-over { background: #fff; border-color: #17191D; }
.dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dropzone:focus-within { border-color: #17191D; box-shadow: 0 0 0 3px rgba(23, 25, 29, 0.08); }
.dropzone svg { width: 28px; height: 28px; fill: none; stroke: #17191D; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 4px; }
.dropzone b { font-size: 16px; font-weight: 600; color: #17191D; }
.dropzone small { font-size: 14px; color: var(--muted); }
.file-warn { margin-top: 10px; padding: 10px 14px; border-radius: 10px; background: #FDECEC; color: #9B1C1C; font-size: 14.5px; }
.file-list { list-style: none; display: grid; gap: 8px; margin-top: 10px; }
.file-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 12px 10px 16px; border: 1px solid #E6E9ED; border-radius: 12px; font-size: 15px; }
.file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #17191D; }
.file-size { color: var(--muted); font-size: 14px; }
.file-list button { width: 28px; height: 28px; border: 0; border-radius: 8px; background: #F1F2F4; color: #17191D; font-size: 18px; line-height: 1; cursor: pointer; }
.file-list button:hover { background: #17191D; color: #fff; }
.file-meter { margin-top: 10px; display: grid; gap: 6px; }
.file-meter[hidden] { display: none; }
.file-meter span { display: block; height: 4px; border-radius: 4px; background: #17191D; transition: width .3s ease; box-shadow: 0 0 0 0 transparent; }
.file-meter { background: none; }
.file-meter small { font-size: 13px; color: var(--muted); }
.file-meter { background: linear-gradient(#E6E9ED, #E6E9ED) no-repeat 0 0 / 100% 4px; }

/* Principles: 80% height; each principle is one row, title beside its text */
.about-principles { padding: 90px 0; }
.about-vision { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr); gap: 64px; align-items: center; }
.about-vision h2 { position: static; }
.principles > div { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); gap: 24px; align-items: baseline; padding: 26px 0; }
.principles h3 { margin: 0; }
.principles p { font-size: 17px; line-height: 1.6; }
@media (max-width: 1100px) { .principles > div { grid-template-columns: 1fr; gap: 6px; } }
@media (max-width: 900px) { .about-principles { padding: 64px 0; } }
.principles > div { grid-template-columns: minmax(0, 236px) minmax(0, 1fr); } .principles h3 { font-size: 20px; }

/* cwan-style card reveal: only the text inside outlined cards moves */
.inview-up { opacity: 0; transform: translateY(32px); transition: opacity .45s ease, transform .45s cubic-bezier(0.16, 1, 0.3, 1); }
.is-inview > .inview-up { opacity: 1; transform: none; }
.is-inview > .inview-up:nth-child(3) { transition-delay: .06s; }
.is-inview > .inview-up:nth-child(4) { transition-delay: .12s; }

/* Execution monitor: the pane fades up as its line draws */
.lat-card { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .9s cubic-bezier(0.16, 1, 0.3, 1); }
.lat-card.is-up { opacity: 1; transform: none; }
.mon.is-drawn .mon-spark { transition: clip-path 1.3s cubic-bezier(0.65, 0, 0.35, 1) .15s; }
@media (prefers-reduced-motion: reduce) { .lat-card { opacity: 1; transform: none; transition: none; } }

/* Open roles: // 01 numbering */
.role-n { font-style: normal; font-weight: 700; color: #17191D; margin-right: 14px; font-family: "IBM Plex Mono", var(--font-mono); font-size: .8em; letter-spacing: .02em; }

/* What happens next: text stays in one flow next to its number */
.next li > span { flex: 1; min-width: 0; }

/* Themed dropdowns */
.cselect { position: relative; }
.cselect select.is-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.cselect-btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 54px; padding: 12px 44px 12px 14px; border: 1px solid #D7DCE3; border-radius: 12px; font: inherit; font-size: 17px; color: #17191D; text-align: left; cursor: pointer; position: relative; transition: border-color .2s ease, box-shadow .2s ease;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%2317191D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center / 14px; }
.cselect-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cselect-btn:hover { border-color: #AEB5BF; }
.cselect-btn:focus-visible, .cselect.is-open .cselect-btn { outline: none; border-color: #17191D; box-shadow: 0 0 0 3px rgba(23, 25, 29, 0.08); }
.cselect-btn:disabled { opacity: .5; cursor: default; }
.cselect-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); list-style: none; margin: 0; padding: 6px; max-height: 280px; overflow-y: auto; border-radius: 16px; background: #fff; border: 1px solid #E6E9ED; box-shadow: 0 24px 50px rgba(10, 14, 20, 0.16); animation: megaIn .18s ease-out; }
.cselect-list.is-closing { opacity: 0; transform: translateY(-4px); transition: opacity .18s ease, transform .18s ease; }
.cselect-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; border-radius: 10px; font-size: 16px; color: #17191D; cursor: pointer; }
.cselect-list li.is-active { background: #F1F2F4; }
.cselect-list li[aria-selected="true"] { font-weight: 600; }
.cselect-list li[aria-selected="true"]::after { content: ""; width: 14px; height: 14px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.2l3 3 6-6.5' fill='none' stroke='%2317191D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
@media (max-width: 1100px) { .principles > div { grid-template-columns: 1fr; gap: 6px; } }

/* ================= Type: Poppins (cwan's hero face) as the accent, Inter for everything else ================= */
:root { --font-serif: 'Poppins', 'Inter', -apple-system, 'Segoe UI', sans-serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; }
body { font-family: var(--font-inter); }
h1, h2 { font-family: 'Poppins', var(--font-inter); font-weight: 400; letter-spacing: -0.015em; }
h3, h4, h5 { font-family: var(--font-inter); font-weight: 500; letter-spacing: -0.01em; }
.plan .price, .plan-table td.price, .metrics b, .stat b, .quote blockquote, .jump b { font-family: 'Poppins', var(--font-inter); font-weight: 400; }
/* Monospace stays only inside code and the product previews (Script Editor, code blocks); labels, numbers and tags are Inter */
.eyebrow, .sample, .readouts b, .stage .num, .plan .spec, .footer h4, .jump .n, .legend, .servers, .rows, .op, .acked, .op-readouts b,
.plan-table th, .plan-table td.num, .loc-card b, .case .meta, .srv-name b, .role-n, .panel-bar:not(.gbs-panel .panel-bar) { font-family: var(--font-inter); }
.eyebrow { letter-spacing: .12em; font-weight: 600; }
.loc-card b { font-weight: 600; letter-spacing: -0.01em; }
.colo-svg .lbl, .colo-svg .tag, .colo-svg .unit, .colo-svg .ob-px, .colo-svg .ob-sz, .colo-svg .ob-last { font-family: var(--font-inter); }
.colo-svg .ob-px, .colo-svg .ob-sz, .colo-svg .ob-last { font-variant-numeric: tabular-nums; }

/* Navbar: hovering an item shows a gray pill; the text stays black */
.nav .nav-item { border-radius: 999px; transition: background .25s ease, color .25s ease; }
.nav-pill .nav-item:hover, .nav-pill .nav-item[aria-expanded="true"] { color: #17191D; background: #ECEEF1; }
.topbar .nav-pill .nav-item { height: 40px; padding: 0 16px; }

/* Footer: links get a dark gray pill on hover instead of a color */
.footer ul a, .footer .legal a { display: inline-block; padding: 4px 10px; margin: -4px -10px; border-radius: 999px; transition: background .25s ease, color .25s ease; text-decoration: none; }
.footer ul a:hover, .footer .legal a:hover { color: #fff; background: #2E3137; text-decoration: none; }
.footer .legal ul { gap: 20px; }

/* Phone menu: never show the feature card (it was squeezed) */
@media (max-width: 860px) { .topbar .mega .mega-feature { display: none !important; } .topbar .nav-pill .nav-item { height: 48px; } }

/* Contact: service options in one row on desktop, a dropdown on phones */
.svc-select { display: none; margin: 10px 0 28px; }
.svc-pick { flex-wrap: nowrap; gap: 6px; }
.svc-pick button { flex: 1 1 auto; padding: 10px 12px; font-size: 14px; white-space: nowrap; }
@media (max-width: 1240px) { .svc-pick button { font-size: 13px; padding: 9px 10px; } }
@media (max-width: 700px) { .svc-pick { display: none; } .svc-select { display: flex; } }

/* What we do (and other outlined cards): stagger across the row */
.is-inview > .inview-up { transition-delay: calc(var(--ci, 0) * 90ms); }
.is-inview > .inview-up:nth-child(2) { transition-delay: calc(var(--ci, 0) * 90ms + 60ms); }
.is-inview > .inview-up:nth-child(3) { transition-delay: calc(var(--ci, 0) * 90ms + 120ms); }
.is-inview > .inview-up:nth-child(4) { transition-delay: calc(var(--ci, 0) * 90ms + 180ms); }
.inview-up { transition: opacity .55s ease, transform .6s cubic-bezier(0.16, 1, 0.3, 1); }

/* "Technologies" next to the wordmark: Core Circus (S-Core, licensed font). Put the web font in fonts/ as
   core-circus.woff2 (and/or .woff) and rebuild: build.py then adds it to every page. Until then: Inter. */
@font-face { font-family: "Core Circus"; font-style: normal; font-weight: 400; font-display: swap; src: local("Core Circus"), local("CoreCircus"); }
.brand span { font-family: "Core Circus", var(--font-inter); font-weight: 400; letter-spacing: .01em; }
/* No hover change on the logo */
.brand:hover, .footer .brand:hover { opacity: 1; color: var(--white); }
.brand, .brand span { transition: none; }
@font-face { font-family: "Poppins"; font-style: normal; font-display: swap; font-weight: 600; src: url("../fonts/poppins-latin-600-normal.woff2") format("woff2"); }

/* ---- Logo lockup: white icon + "GRAYBOOK TECHNOLOGIES", 1:1 with the old wordmark ----
   Measured from media/graybook-wordmark-white.png (500 px tall): icon 77–422 px tall, letters' cap height
   211 px (0.422 h), icon-to-text gap 121 px, "GRAYBOOK" 2093 px wide. Poppins SemiBold stands in until
   Core Circus is added (fonts/core-circus.woff2); its size and tracking below reproduce those numbers. */
.brand { display: inline-flex; align-items: center; gap: 0; height: var(--h); line-height: 1; }
.brand .brand-icon { flex: none; width: var(--h); height: var(--h); margin-left: calc(var(--h) * 0.034); }
.brand .brand-name { margin: 0 0 0 calc(var(--h) * 0.112); font-family: "Core Circus", "Poppins", var(--font-inter); font-weight: 600; font-size: calc(var(--h) * 0.6116); letter-spacing: calc(var(--h) * 0.1096); line-height: 1; white-space: nowrap; color: #fff; }

/* About: team heading without the link */
.team-h { margin-bottom: 36px; }

/* 404 (layout after cwan.com/404): big code on the left, message and buttons on the right, inside the hero card */
.nf-hero { min-height: calc(100vh - 32px); min-height: calc(100dvh - 32px); display: flex; flex-direction: column; }
.nf-hero .hero-body { flex: 1; display: flex; align-items: center; padding-top: 96px; padding-bottom: 96px; }
.nf { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; width: 100%; max-width: 1180px; }
.nf-code { font-family: "Poppins", var(--font-inter); font-weight: 500; font-size: clamp(110px, 15vw, 220px); line-height: .9; letter-spacing: -0.04em; color: #fff; }
.nf-copy h1 { font-size: clamp(36px, 4.6vw, 64px); line-height: 1.08; margin-bottom: 16px; }
.nf-copy .lead { max-width: 560px; }
.nf-copy .btn-row { margin-top: 28px; }
.nf-btn { border-radius: 999px; }
@media (max-width: 760px) { .nf { grid-template-columns: 1fr; gap: 12px; } .nf-hero .hero-body { padding-top: 120px; } }

/* Stacking: the hero no longer forms its own layer (no isolation), so its video and gradient sit at the
   bottom, the page content (e.g. the contact card that overlaps the hero) paints above them, and only the
   header and its menus rise above everything. Nothing else in the hero is lifted. */
.hero { isolation: auto; }
.hero > .background-layer { z-index: 0; }
.hero > .hero-gradient { z-index: 0; }
.hero > .hero-body { position: relative; z-index: 1; }
.hero .topbar { position: relative; z-index: 60; }
.hero.full .topbar { position: absolute; }

/* ================= Status page (layout after Atlassian Statuspage / GitHub / Vercel status) ================= */
.st-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.st-pill { border-radius: 999px; }
.st-wrap { padding-top: 56px; }
.st { max-width: 1000px; }
.st-preview { margin-bottom: 16px; padding: 12px 16px; border-radius: 12px; background: #F1F2F4; color: #3D434C; font-size: 15px; }
.st-overall { display: flex; align-items: center; gap: 18px; padding: 24px 26px; border-radius: 20px; color: #fff; background: #17191D; margin-bottom: 40px; transition: background .3s ease; }
.st-overall h2 { font-family: var(--font-inter); font-size: 22px; font-weight: 600; color: #fff; letter-spacing: -0.01em; }
.st-overall p { margin-top: 3px; color: rgba(255, 255, 255, 0.68); font-size: 14.5px; }
.st-overall > div { flex: 1; min-width: 0; }
.st-overall-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #6fd6c4; }
.st-overall-ic::after { content: ""; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%2317191D' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.st-overall.is-degraded .st-overall-ic { background: #f2c94c; } .st-overall.is-partial .st-overall-ic { background: #f2994a; }
.st-overall.is-major .st-overall-ic { background: #eb5757; } .st-overall.is-maintenance .st-overall-ic { background: #82aaff; }
.st-overall:not(.is-operational) .st-overall-ic::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v7M12 17.5v.5' fill='none' stroke='%2317191D' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.st-refresh { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); background: none; cursor: pointer; transition: background .25s ease; }
.st-refresh:hover { background: rgba(255, 255, 255, 0.1); }
.st-refresh svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.st-refresh.is-spinning svg { animation: stSpin .8s linear infinite; }
@keyframes stSpin { to { transform: rotate(360deg); } }

.st-incident { margin-bottom: 16px; padding: 22px 24px; border-radius: 20px; border: 1px solid #D7DCE3; border-left-width: 4px; }
.st-incident.is-degraded { border-left-color: #f2c94c; } .st-incident.is-partial { border-left-color: #f2994a; } .st-incident.is-major { border-left-color: #eb5757; } .st-incident.is-maintenance { border-left-color: #82aaff; }
.st-incident header { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 10px; }
.st-incident h3 { font-size: 18px; }
.st-badge { padding: 4px 10px; border-radius: 999px; background: #F1F2F4; font-size: 12.5px; font-weight: 600; text-transform: capitalize; }
.st-updates { list-style: none; display: grid; gap: 12px; }
.st-updates b { text-transform: capitalize; font-size: 14.5px; }
.st-updates p, .st-incident > p { font-size: 15.5px; color: #3D434C; margin: 2px 0; }
.st-incident time, .st-updates time, .st-past time { font-size: 13px; color: var(--muted); }
.st-maint h2, .st-head-row h2, .st-history h2, .st-subscribe h2 { font-family: var(--font-inter); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: #17191D; }
.st-maint { margin-bottom: 40px; } .st-maint h2 { margin-bottom: 14px; }

.st-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.st-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--muted); }
.st-legend span { display: inline-flex; align-items: center; gap: 6px; }
.st-legend i, .st-state i, .st-tip-state i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.is-operational > i, .st-legend i.is-operational, .st-bars i.is-operational { background: #6fd6c4; }
.is-degraded > i, .st-legend i.is-degraded, .st-bars i.is-degraded { background: #f2c94c; }
.is-partial > i, .st-legend i.is-partial, .st-bars i.is-partial { background: #f2994a; }
.is-major > i, .st-legend i.is-major, .st-bars i.is-major { background: #eb5757; }
.is-maintenance > i, .st-legend i.is-maintenance, .st-bars i.is-maintenance { background: #82aaff; }
.st-bars i.is-nodata { background: #E1E4E8; }

.st-groups { display: grid; gap: 14px; margin-bottom: 56px; }
.st-group { border: 1px solid #D7DCE3; border-radius: 20px; overflow: hidden; background: #fff; padding: 0; margin: 0; }
.st-group-head { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; width: 100%; padding: 18px 22px; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: #17191D; transition: background .2s ease; }
.st-group-head:hover { background: #F7F8F9; }
.st-chev { width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.5 3 7.5 6 4.5 9' fill='none' stroke='%2317191D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .25s ease; }
.st-group.is-open .st-chev { transform: rotate(90deg); }
.st-group-name b { display: block; font-size: 17px; font-weight: 600; }
.st-group-name small { display: block; font-size: 13.5px; color: var(--muted); }
.st-group-up { font-size: 14px; font-weight: 600; white-space: nowrap; } .st-group-up small { font-weight: 400; color: var(--muted); }
.st-state { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500; white-space: nowrap; }
.st-rows { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s cubic-bezier(0.16, 1, 0.3, 1); }
.st-group.is-open .st-rows { grid-template-rows: 1fr; }
.st-rows-inner { overflow: hidden; }
.st-row { display: block; padding: 16px 22px 18px; border-top: 1px solid #EEF0F2; }
.st-row-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.st-name b { display: block; font-size: 15.5px; font-weight: 600; } .st-name small { display: block; font-size: 13px; color: var(--muted); }
.st-bars { display: grid; grid-template-columns: repeat(90, minmax(0, 1fr)); gap: 2px; height: 32px; }
.st-bars i { border-radius: 2px; opacity: .9; transition: opacity .15s ease, transform .15s ease; cursor: default; }
.st-bars i:hover { opacity: 1; transform: scaleY(1.08); }
.st-scale { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.st-scale .st-line { flex: 1; height: 1px; background: #E6E9ED; }
.st-tip { position: absolute; z-index: 100; display: grid; gap: 4px; min-width: 190px; max-width: 260px; padding: 12px 14px; border-radius: 12px; background: #17191D; color: #fff; font-size: 13.5px; box-shadow: 0 18px 40px rgba(10, 12, 16, 0.3); pointer-events: none; }
.st-tip b { font-size: 14px; } .st-tip span { color: rgba(255, 255, 255, 0.8); } .st-tip p { margin: 4px 0 0; color: rgba(255, 255, 255, 0.8); }
.st-tip-state { display: inline-flex; align-items: center; gap: 7px; }

.st-history { margin-bottom: 56px; } .st-history h2 { margin-bottom: 8px; }
.st-day { padding: 18px 0; border-bottom: 1px solid #EEF0F2; }
.st-day h3 { font-size: 15.5px; font-weight: 600; margin-bottom: 6px; }
.st-none { color: var(--muted); font-size: 15px; }
.st-past { padding: 10px 0 2px 14px; border-left: 3px solid #f2c94c; } .st-past.is-major { border-color: #eb5757; } .st-past.is-partial { border-color: #f2994a; } .st-past.is-maintenance { border-color: #82aaff; }
.st-past b { font-size: 15.5px; } .st-past p { font-size: 15px; color: #3D434C; margin: 2px 0; }

.st-subscribe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; padding: 28px 30px; border-radius: 20px; background: #F1F2F4; }
.st-subscribe p { color: #3D434C; font-size: 15.5px; margin-top: 6px; }
.st-sub-form { display: flex; flex-wrap: wrap; gap: 10px; }
.st-sub-form input { flex: 1 1 220px; min-height: 50px; padding: 12px 14px; border: 1px solid #D7DCE3; border-radius: 12px; font: inherit; font-size: 16px; background: #fff; }
.st-sub-form input:focus { outline: none; border-color: #17191D; box-shadow: 0 0 0 3px rgba(23, 25, 29, 0.08); }
.st-sub-form .btn { border-radius: 999px; min-height: 50px; }
.st-sub-msg { flex-basis: 100%; font-size: 14px; color: #3D434C; }

@media (max-width: 760px) {
  .st-group-head { grid-template-columns: 20px minmax(0, 1fr) auto; } .st-group-up { display: none; }
  .st-bars { grid-template-columns: repeat(45, minmax(0, 1fr)); } .st-bars i:nth-child(-n+45) { display: none; }
  .st-scale span:first-child::after { content: ""; } .st-subscribe { grid-template-columns: 1fr; gap: 16px; }
  .st-overall { padding: 20px; } .st-overall h2 { font-size: 19px; }
}
@media (max-width: 480px) { .st-group-head .st-state { font-size: 0; gap: 0; } .st-row-top .st-state { font-size: 13px; } }
.st-tip[hidden] { display: none; }

/* Landing: each problem → solution row is one link to its service */
a.path-row { color: inherit; text-decoration: none; cursor: pointer; transition: border-color .25s ease, box-shadow .25s ease; }
a.path-row:hover { color: inherit; text-decoration: none; border-color: #17191D; box-shadow: 0 18px 40px rgba(17, 19, 22, 0.08); }
a.path-row .path-give { transition: background .25s ease; }
a.path-row:hover .path-give { background: #E6E8EB; }
a.path-row .link-arrow { display: inline-flex; color: #17191D; font-weight: 600; transition: transform .25s ease; }
a.path-row:hover .link-arrow { transform: translateX(4px); }
a.path-row:focus-visible { outline: 2px solid #17191D; outline-offset: 3px; }

/* Footer column headings are <h2> (not <h4>) so heading levels never skip; they look exactly as before */
.footer .footer-h { font-family: var(--font-inter); font-size: 18px; font-weight: 500; line-height: 1.5; letter-spacing: .02em; color: #fff; margin-bottom: 20px; text-transform: uppercase; }