/* Supernomial — supernomial.co
   Design tokens and rationale: see docs/design.md (internal). */

@font-face {
  font-family: "Graphik";
  src: url("../assets/fonts/Graphik-Thin-Web.woff2") format("woff2");
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Graphik";
  src: url("../assets/fonts/Graphik-Extralight-Web.woff2") format("woff2");
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Graphik";
  src: url("../assets/fonts/Graphik-Light-Web.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Graphik";
  src: url("../assets/fonts/Graphik-Regular-Web.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Graphik";
  src: url("../assets/fonts/Graphik-Medium-Web.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Graphik";
  src: url("../assets/fonts/Graphik-Semibold-Web.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Graphik";
  src: url("../assets/fonts/Graphik-Bold-Web.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Graphik";
  src: url("../assets/fonts/Graphik-Black-Web.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Graphik";
  src: url("../assets/fonts/Graphik-Super-Web.woff2") format("woff2");
  font-weight: 950; font-style: normal; font-display: swap;
}

:root {
  --cta-orange: #ff5229;   /* CTA band orange, from Mistral reference (Max 2026-07-24) */
  /* type */
  --ff: "Graphik", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* color */
  --bg:            #ffffff;
  --ink:           #212121;   /* body text */
  --ink-strong:    #17171c;   /* buttons, strongest ink */
  --ink-strong-2:  #2f2f37;   /* button hover */
  --ink-soft:      #757575;   /* secondary text */
  --hairline:      #f2f2f2;
  --placeholder:   #f2f2f2;   /* light gray image placeholder */
  --sand:          #e9e6de;   /* warm card surface */
  --coral:         #ff7759;
  --violet:        #8b5cf6;
  --blue:          #4c6ee6;
  --grad-underline: linear-gradient(to right, var(--coral), var(--violet), var(--blue));

  /* semantic accent layer — components use THESE, never raw colors.
     Swap the whole site's accent by repointing these three lines. */
  --accent:        var(--coral);   /* icons, active strokes */
  --accent-strong: #f4603f;        /* hover/pressed fills (darker step of accent) */
  --accent-soft:   #fff3ef;        /* tinted surfaces behind accent elements */

  /* layout */
  --wrap-max: 1920px;
  --pad-x: 16px;
  --radius-media: 8px;
}
@media (min-width: 768px)  { :root { --pad-x: 24px; } }
@media (min-width: 1024px) { :root { --pad-x: 40px; } }

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--ff);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { display: block; max-width: 100%; }

.wrap {
  max-width: var(--wrap-max);
  margin-inline: auto;
  width: 100%;
}

/* ---------- nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 20px var(--pad-x);
  /* hide-on-scroll slide — the reference-measured (2026-07-28): 300ms cubic-bezier(.4,0,.2,1) */
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav.nav-hidden { transform: translateY(-100%); }
@media (min-width: 768px) { .nav { padding-block: 16px; } }

.nav-logo { display: flex; flex: 1; align-items: center; gap: 9px; color: var(--ink-strong); }
.logo-mark { height: 15px; width: auto; }
/* wordmark cap-height spans exactly the 15px mark: 15 / 0.723 (Graphik cap ratio, measured) */
.logo-name { font-weight: 300; font-size: 20.75px; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; transform: translateY(1px); }  /* +1px optical nudge (Max) */

.nav-links {
  display: none;
  flex: 1;
  justify-content: center;
  gap: 32px;
}
@media (min-width: 1024px) { .nav-links { display: flex; } }
@media (min-width: 1280px) { .nav-links { gap: 40px; } }

.nav-links a {
  position: relative;
  font-size: 14px;
  padding-bottom: 2px;
  white-space: nowrap;
}
/* gradient underline, width 0 -> 100% on hover */
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 1px; width: 0;
  background: var(--grad-underline);
  transition: width 0.3s ease;
}
.nav-links a:hover::after { width: 100%; }

.nav-actions { display: flex; flex: 1; justify-content: flex-end; align-items: center; gap: 24px; }

/* quiet Sign in link, left of Contact Us (desktop); lives in the mobile sheet below 1024px */
.nav-signin { display: none; position: relative; font-size: 14px; padding-bottom: 2px; white-space: nowrap; }
@media (min-width: 1024px) { .nav-signin { display: inline-block; } }
.nav-signin::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 1px; width: 0;
  background: var(--grad-underline);
  transition: width 0.3s ease;
}
.nav-signin:hover::after { width: 100%; }

/* Contact Us lives in the mobile menu sheet below 1024px, in the top bar above it */
.nav .btn-nav, .nav > .nav-actions > .btn-cta { display: none; }
@media (min-width: 1024px) { .nav .btn-nav, .nav > .nav-actions > .btn-cta { display: inline-flex; } }

/* ---------- mobile menu: burger + drill-in sheet ---------- */
.nav-burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
  width: 44px;          /* 44px hit area (HIG); the lines keep their right edge */
  height: 44px;
  padding: 0 9px 0 15px;
  margin: -2px -9px;    /* lines optically align with the content edge; the 44px box must not grow the 80px bar */
  background: none;
  border: none;
  cursor: pointer;
}
@media (min-width: 1024px) { .nav-burger { display: none; } }
.nav-burger span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--ink-strong);
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s;
}
.nav-burger span:nth-child(2) { width: 14px; transform-origin: 100% 50%; }
.nav-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
/* the middle line collapses on COMPOSITED properties only (scaleX + opacity) and is then taken out of paint
   (visibility, delayed past the morph): iOS Safari left a width/opacity transition at a mid frame — a dark dash
   beside the X (Max 2026-08-18 + 2026-08-23, his phone; "width→0" alone was not enough) */
.nav-burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); visibility: hidden;
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s linear 0.3s; }
.nav-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* mobile sheet — rebuilt 2026-08-23 on the reference's mobile menu, measured at 390px: a white sheet under the bar,
   revealed by a clip-path wipe (500ms cubic-bezier(.4,0,.2,1)); top rows 24px/400, 44px tall at a 60px pitch, flush
   with the logo, no box, no rules, each rising 20px + fading in over 500ms with a 50ms stagger; sub-levels open with a
   "Back" band, eyebrows, 16px items, 14px section links, rows rising 300ms; two full-width pills at the foot (outlined
   Sign in, filled Request a demo). Max 2026-08-23: "no box around the links, align with the logo, real buttons,
   standardized sizes, just Back, movement of text". Tokens below flip on dark / violet pages. */
.mnav {
  --mn-fg: var(--ink-strong);
  --mn-soft: var(--ink-soft);
  --mn-rule: #e6e6e6;
  --mn-band: #f4f4f2;
  --mn-pill-bg: var(--ink-strong);
  --mn-pill-fg: #ffffff;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  top: var(--mnav-top, 60px);
  z-index: 99;             /* below the top bar so logo + burger stay visible */
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--mn-fg);
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.5s;
}
.mnav.open { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
/* the page dims + blurs under the wipe (the reference's backdrop) — a sibling, because clip-path would clip it inside the sheet */
.mnav-dim { position: fixed; left: 0; right: 0; bottom: 0; top: var(--mnav-top, 60px); z-index: 98; background: rgba(23, 23, 28, 0.18);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
html.mnav-lock .mnav-dim { opacity: 1; }
.mnav, .mnav-panel { overscroll-behavior: contain; }
.mnav button, .mnav a { -webkit-tap-highlight-color: transparent; }
.mnav-row:active, .mnav-item:active, .mnav-small:active, .mnav-overview:active, .mnav-back:active { opacity: 0.55; }

/* levels are panels on a horizontal track; drilling slides the track left */
.mnav-sheet { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.mnav-view { flex: 1; min-height: 0; overflow: hidden; }
.mnav-track { display: flex; height: 100%; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
.mnav-panel { flex: 0 0 100%; min-width: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; padding: 32px var(--pad-x) 24px; }   /* 32px above the first row (the reference) */
.mnav-panel.mnav-sub { padding-top: 0; }
.mnav-panel[inert] { pointer-events: none; }

/* rise: rows fade + lift into place (level 0 on open: 500ms, 50ms apart; sub-levels on push: 300ms, 30ms apart) */
.mnav .rise { opacity: 0; transform: translateY(20px); transition: opacity 0.5s cubic-bezier(0, 0, 0.2, 1), transform 0.5s cubic-bezier(0, 0, 0.2, 1); transition-delay: calc(var(--i, 0) * 50ms); }
.mnav .rise.in { opacity: 1; transform: none; }
.mnav-sub .rise { transform: translateY(12px); transition-duration: 0.3s, 0.3s; transition-delay: calc(100ms + var(--i, 0) * 30ms); }   /* after the slide has begun, so the lift is not diagonal */
.mnav-panel.mnav-return:not(.mnav-sub) .rise { transition-delay: calc(100ms + var(--i, 0) * 50ms); }   /* Back: the level returns with its rows rising again (the reference), after the slide is under way */
.mnav-panel.mnav-reset .rise,
.mnav.closing .rise { transition: none; }
@media (prefers-reduced-motion: reduce) { .mnav, .mnav.open { transition: none; } .mnav .rise, .mnav-sub .rise { opacity: 1; transform: none; transition: none; } .mnav-track { transition: none; } }

/* level 0: the five sections */
.mnav-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; min-height: 44px; margin: 0 0 16px; padding: 0;
  border: 0; background: none; cursor: pointer;
  font-family: var(--ff); font-size: 24px; line-height: 1.2; letter-spacing: -0.01em; color: inherit; text-align: left;
}
.mnav-row:last-child { margin-bottom: 0; }
.mnav-arrow { display: none; }

/* sub-levels: Back band, then groups */
.mnav-back {
  position: sticky; top: 0; z-index: 1;   /* stays reachable on long sub-levels */
  display: flex; align-items: center; gap: 6px;
  width: calc(100% + 2 * var(--pad-x)); margin: 0 calc(-1 * var(--pad-x)) 6px; min-height: 44px; padding: 0 var(--pad-x);
  border: 0; background: linear-gradient(var(--mn-band), var(--mn-band)), var(--mn-bg, var(--bg)); cursor: pointer;
  font-family: var(--ff); font-size: 14px; color: inherit; text-align: left;
}
.mnav-back svg { width: 14px; height: 14px; display: block; margin-left: -4px; }   /* chevron edge at ~16, label at ~32 (the reference) */
.mnav-group { padding: 4px 0 12px; }
.mnav-group + .mnav-group { border-top: 1px solid var(--mn-rule); padding-top: 12px; }
.mnav-panel .fcol-header { margin: 8px 0 2px; color: var(--mn-soft); }   /* one eyebrow size sitewide (13px mono) */
.mnav-overview,
.mnav-item {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0; font-size: 16px; line-height: 1.3; color: inherit;
}
.mnav-overview { justify-content: flex-start; gap: 8px; }
.mnav-overview .mnav-arrow { display: inline-block; }
.mnav-sub .mnav-row { min-height: 44px; margin: 0; font-size: 16px; justify-content: flex-start; gap: 8px; }
.mnav-sub .mnav-row .mnav-arrow { display: inline-block; }
.mnav-item .pitem-dot { width: 8px; height: 8px; }
.mnav-small {
  display: flex; align-items: center; gap: 6px;
  min-height: 44px; font-size: 16px; color: inherit;   /* same size as the items (Max 2026-08-23; the reference's 14 dropped) */
}
.mnav-small .mnav-arrow { display: inline-block; }
.mnav-links { border-top: 1px solid var(--mn-rule); padding-top: 8px; margin-top: 4px; }

/* foot: two full-width pills, the reference's order (outlined Sign in above the filled CTA) */
.mnav-foot { display: flex; flex-direction: column; gap: 12px; padding: 12px var(--pad-x) max(32px, env(safe-area-inset-bottom)); }   /* 32px under the pills (the reference) */
.mnav-signin {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 50px; border: 1px solid currentColor; border-radius: 9999px;
  font-size: 16px; color: inherit; text-decoration: none;
}
.mnav-foot .btn-cta { width: 100%; min-height: 52px; font-size: 16px; background: var(--mn-pill-bg); color: var(--mn-pill-fg); }
.mnav-foot .btn-cta:hover { background: var(--mn-pill-bg); filter: brightness(1.15); }

html.mnav-lock, html.mnav-lock body { overflow: hidden; }

/* ---------- nav dropdown panels ---------- */
.nav-links li { position: relative; }

.panel {
  position: fixed;          /* anchored to the page's center axis, not the trigger item */
  top: 82px;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 20px 24px 24px;
  box-shadow: 0 12px 32px -16px rgba(0,0,0,0.12);
}
/* open state is JS-driven (li.open) with hover-intent timers in main.js —
   no viewport-wide bridges: they sat over sibling links and swallowed their hover */
.nav-links li.open .panel {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.nav-links li:hover > a::after,
.nav-links li.open > a::after { width: 100%; }
/* while switching between open items, panels swap instantly (no rise, quick fade) */
.nav.nav-switching .panel {
  transition: opacity 0.1s ease;
  transform: translateX(-50%) translateY(0);
}

.panel-title,
.nav-links a.panel-title {
  /* the reference-measured: in-panel title 24px vs 18px items (1.33 ratio).
     Double selector outweighs the .nav-links a 14px base rule. */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 24px;
  line-height: 1.3;
  margin-bottom: 16px;
}
.panel-arrow { transition: transform 0.25s ease; }
.panel-title:hover .panel-arrow, .panel-small:hover .panel-arrow { transform: translateX(4px); }

.panel-body { display: flex; gap: 40px; }

.panel-media {
  width: 220px;
  height: 148px;
  border-radius: var(--radius-media);
  overflow: hidden;
  background: var(--placeholder);
  position: relative;
  flex-shrink: 0;
}
.panel-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.panel-col { display: flex; flex-direction: column; min-width: 190px; }
.panel-header {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 14px;
  white-space: nowrap;
}
.panel-item {
  display: block;
  font-size: 16px;
  line-height: 1.3;
  padding: 6px 0;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.panel-item:hover { color: var(--ink-soft); }
.panel-desc {
  display: block;
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 3px;
  white-space: nowrap;
}

.panel-foot {
  display: flex;
  gap: 28px;
  margin-top: 18px;
  padding-top: 20px;   /* the reference: rule to link 20px */
  border-top: 1px solid var(--hairline);
}
.panelF.onelevel { padding-bottom: 17px; }   /* the reference: link to panel edge 17px */
.panel-foot .foot-right {
  display: inline-flex;
  gap: 28px;
  margin-left: auto;
}
.panel-small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.panel-compact { padding: 12px 24px; }
.panel-compact .panel-item { padding: 4px 0; }

/* ---------- buttons & links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  border-radius: 9999px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.btn-primary {
  background: var(--ink-strong);
  color: #ffffff;
  padding: 12px 16px;
  font-size: 14px;
}
.btn-primary:hover { background: var(--ink-strong-2); }

.link-underline {
  position: relative;
  font-size: 14px;
  padding-bottom: 5px;
  background:
    linear-gradient(to right, var(--ink-strong), var(--ink-strong))
    bottom / 100% 1px no-repeat;
  transition: background 0.3s ease;
}
.link-underline:hover {
  background:
    var(--grad-underline)
    bottom / 100% 1px no-repeat;
}

/* ---------- S-1 hero ---------- */
.hero {
  padding: 128px var(--pad-x) 64px;  /* top clears the fixed nav */
  text-align: center;
}
@media (min-width: 768px) { .hero { padding-top: 160px; padding-bottom: 80px; } } /* the reference hero rhythm, Max 2026-08-22 (was 208/88) */

.hero-title {
  font-size: 3rem;             /* 48px small phones */
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  overflow-wrap: break-word;
}
.hero-eyebrow {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
@media (min-width: 480px)  { .hero-title { font-size: 3.75rem; } }  /* 60px */
@media (min-width: 1024px) { .hero-title { font-size: 5rem; } }     /* 80px */

.hero-sub {
  max-width: 655px;
  margin-inline: auto;
  margin-bottom: 40px;
  font-size: 16px;
  line-height: 1.4;
}
@media (min-width: 1024px) { .hero-sub { margin-bottom: 40px; font-size: 18px; } }

.hero-ctas {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
@media (min-width: 640px) { .hero-ctas { flex-direction: row; } }

/* hero CTAs sized to the hero-sub text (the reference grammar) */
.hero-ctas .btn-primary   { font-size: 16px; padding: 14px 24px; }
.hero-ctas .link-underline { font-size: 16px; padding-bottom: 6px; }
@media (min-width: 1024px) {
  .hero-ctas .btn-primary   { font-size: 18px; padding: 16px 28px; }
  .hero-ctas .link-underline { font-size: 18px; }
}

/* ---------- hero image band ---------- */
.media-band { padding: 0 var(--pad-x) 40px; }

.media-row {
  display: flex;
  gap: 8px;
}
@media (min-width: 768px) { .media-row { gap: 20px; } }

/* the container is light gray; a missing img simply leaves the gray visible
   (img has onerror="this.remove()") */
.media {
  position: relative;
  flex: 1;
  height: 256px;
  border-radius: var(--radius-media);
  overflow: hidden;
  background: var(--placeholder);
}
.media-wide { flex: 2; } /* 2:1 left:right, Max 2026-08-22 (the reference home hero ratio) */
.media.sketchart svg { width: 100%; height: 100%; display: block; }
@media (min-width: 768px) { .media { height: 560px; } }

.media-scene {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- section pattern: showcase (full-media card, light-on-dark) ---------- */
.showcase { padding: 8px var(--pad-x) 40px; }

.showcase-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  color: #ffffff;
  background: var(--cta-orange);   /* Mistral-style CTA orange (Max 2026-07-24) */
  padding: 24px;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 64px;
}
@media (min-width: 768px)  { .showcase-card { padding: 40px; aspect-ratio: 15 / 8; min-height: 560px; min-width: 0; max-width: 100%; } }
@media (min-width: 1280px) { .showcase-card { padding: 48px 56px; } }

.showcase-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* soft scrim from the lower-left keeps light text readable on any photo */
.showcase-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(60deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 35%, rgba(0,0,0,0) 60%);
  pointer-events: none;
}
.showcase-top, .showcase-content { position: relative; z-index: 2; }

.showcase-top { display: flex; align-items: center; gap: 14px; }
.showcase-mark { height: 20px; width: auto; }
.showcase-lockup { font-size: 15px; font-weight: 500; letter-spacing: 0.01em; }
.lockup-sep { opacity: 0.45; font-weight: 300; margin: 0 12px; }

.showcase-content { max-width: 640px; }
.showcase-title {
  font-size: 40px;
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
@media (min-width: 1024px) { .showcase-title { font-size: 64px; margin-bottom: 22px; } }
.showcase-sub {
  font-size: 16px;
  line-height: 1.4;
  max-width: 560px;
  margin-bottom: 28px;
}
@media (min-width: 1024px) { .showcase-sub { font-size: 18px; } }

.btn-light { background: #ffffff; color: var(--ink-strong); padding: 12px 24px; font-size: 16px; }
.btn-light:hover { background: var(--hairline); }

/* ---------- generic quiet link: text + arrow that shifts on hover ---------- */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
}
.arrow-link .panel-arrow { transition: transform 0.25s ease; }
.arrow-link:hover .panel-arrow { transform: translateX(4px); }

/* ---------- section pattern: three-up (tagline + 3 open columns) ---------- */
.threeup { padding: 72px var(--pad-x) 96px; }
@media (min-width: 768px) { .threeup { padding-block: 104px 168px; } }  /* below-gap probed 120 vs 176 above; +56 balances */

/* shared big centered section tagline (+ optional centered lead below it) */
.sec-tagline {
  text-align: center;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;            /* the reference-measured (2026-07-28): 48px/57.6 */
  letter-spacing: -0.01em;
  margin-bottom: 40px;
}
@media (min-width: 1024px) { .sec-tagline { font-size: 48px; margin-bottom: 40px; } }
.sec-lead {
  text-align: center;
  font-size: 16px;
  line-height: 1.45;
  max-width: 655px;
  margin: -16px auto 48px;
}
@media (min-width: 1024px) { .sec-lead { font-size: 18px; margin-bottom: 64px; } }
/* left-aligned head variant: add .sec-left on the section */
.sec-left .sec-tagline, .sec-left .sec-lead { text-align: left; }
.sec-left .sec-lead { margin-inline: 0; }

.threeup-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
}
@media (min-width: 768px) { .threeup-grid { grid-template-columns: repeat(3, 1fr); gap: 40px; } }

.threeup-icon { margin-bottom: 36px; color: var(--ink); }
.threeup-icon svg { height: 88px; width: auto; display: block; }

.threeup-title {
  font-size: 24px;             /* the reference-measured (2026-07-28): 24px/31.2 at 1440 */
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}

.threeup-body {
  font-size: 16px;             /* the reference-measured: 16px/22.4 */
  line-height: 1.4;
  max-width: 560px;
  margin-bottom: 16px;         /* the reference-measured: link couples to its paragraph */
}

/* ---------- section pattern: solutions slider (the reference industries grammar) ----------
   the reference-measured (2026-07-28, 1440): cards 420x420 fixed, label 24px inset 32px (p-8),
   header 32px, header->cards 44px, progress 550x4 at 44px below cards. */
.cardrow.solrow { padding-bottom: 96px; }  /* section rhythm: 176 desktop / 96 mobile, same as threeup + about-agents */
@media (min-width: 768px) { .cardrow.solrow { padding-bottom: 176px; } }
.solrow .cardrow-title { font-size: 28px; }
@media (min-width: 1024px) { .solrow .cardrow-title { font-size: 32px; } }
.solrow .cardrow-head { margin-bottom: 44px; }
.solrow .cardrow-track { grid-auto-columns: 84%; gap: 20px; }
@media (min-width: 640px)  { .solrow .cardrow-track { grid-auto-columns: 60%; gap: 24px; } }
@media (min-width: 1024px) { .solrow .cardrow-track { grid-auto-columns: 420px; gap: 24px; } }
.solcard {
  position: relative; display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-media); overflow: hidden;
  background: var(--placeholder);
}
.solcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
@media (hover: hover) { .solcard:hover img { transform: scale(1.06); } }
.solcard-label { position: absolute; top: 32px; left: 32px; font-size: 24px; font-weight: 400; letter-spacing: -0.01em; color: var(--ink); }
.solcard.on-dark .solcard-label { color: #ffffff; }
.solrow-progress { margin: 44px auto 0; width: min(550px, 60%); height: 4px; border-radius: 2px; background: var(--hairline); overflow: hidden; }
.solrow-bar { display: block; height: 100%; border-radius: 2px; background: var(--grad-underline); transition: transform 0.15s ease; }
/* all cards fit -> slider controls have no job (3 cards vs the reference's 8) */
.solrow.no-overflow .cardrow-nav, .solrow.no-overflow .solrow-progress { display: none; }

/* ---------- section pattern: lineup (the reference-North full-bleed product band) ---------- */
.lineup { position: relative; overflow: hidden; min-height: 560px; background: #f4f4f2; }
@media (min-width: 1024px) { .lineup { min-height: 86vh; } }
.lineup-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* light photo -> dark text + white scrim (inversion of the reference's dark/white formula) */
.lineup-scrim { position: absolute; inset: 0; background: linear-gradient(200deg, rgba(255,255,255,0) 42%, rgba(255,255,255,0.6) 100%); }
.lineup-mark { position: absolute; top: 40px; left: var(--pad-x); height: 30px; width: auto; color: var(--ink-strong); z-index: 2; }
.lineup-content { position: absolute; left: var(--pad-x); bottom: 56px; z-index: 2; color: var(--ink); max-width: 620px; }
.lineup-title { font-size: 40px; font-weight: 400; line-height: 1.12; letter-spacing: -0.01em; margin-bottom: 20px; }
@media (min-width: 1024px) { .lineup-title { font-size: 60px; } }
.lineup-sub { font-size: 16px; line-height: 1.45; margin-bottom: 36px; max-width: 520px; }
@media (min-width: 1024px) { .lineup-sub { font-size: 18px; } }
.lineup-ctas { display: flex; align-items: center; gap: 28px; }
.lineup-ctas .link-underline { font-size: 16px; }
@media (min-width: 1024px) {
  .lineup-ctas .btn-primary { font-size: 18px; padding: 16px 28px; }
  .lineup-ctas .link-underline { font-size: 18px; }
}
/* single product window, right-overlapping (the reference-North grammar), showing the cockpit
   org chart as crafted UI. Fixed 640px internal design grid; window crops right+bottom. */
/* dark-photo variant: white text over a dark scrim (the reference's original formula) */
.lineup-dark { background: #1c1c20; }
.lineup-dark .lineup-scrim { background: linear-gradient(200deg, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.55) 100%); }
.lineup-dark .lineup-mark, .lineup-dark .lineup-content { color: #ffffff; }
.lineup-dark .lineup-ctas .link-underline {
  color: #ffffff;
  background: linear-gradient(to right, #ffffff, #ffffff) bottom / 100% 1px no-repeat;
}
@media (min-width: 1024px) { .lineup-dark .lineup-ctas .btn-light { font-size: 18px; padding: 16px 28px; } }

.lineup-shot {
  position: absolute; z-index: 1;
  top: 20%; left: 58%; right: 0; bottom: 0;
  margin: 0; border-radius: 12px 0 0 0; overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.3);
}
.cockpit-win {
  display: flex; width: 100%; height: 100%;
  background: #17171c; color: #ffffff;
  font-size: 13px;
}
.cw-side { width: 44px; background: #131317; border-right: 1px solid rgba(255,255,255,0.06);
  display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 22px; }
.cw-side span { width: 16px; height: 16px; border-radius: 4px; background: rgba(255,255,255,0.14); }
.cw-side span:first-child { border-radius: 50%; background: rgba(255,255,255,0.28); }
.cw-main { flex: 1; padding: 22px 28px; min-width: 0; }
.cw-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.cw-title { font-size: 19px; font-weight: 500; letter-spacing: -0.01em; }
.cw-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #9a9aa4;
  border: 1px solid rgba(255,255,255,0.12); border-radius: 999px; padding: 3px 10px; }
.cw-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; }
.cw-btn { margin-left: auto; background: #ffffff; color: #17171c; border: 0; border-radius: 999px;
  padding: 8px 14px; font-size: 12.5px; font-weight: 500; font-family: inherit; }
.cw-tabs { display: flex; gap: 22px; font-size: 12.5px; color: #9a9aa4;
  border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 0; margin-bottom: 26px; }
.cw-tabs span { padding-bottom: 10px; }
.cw-tabs .active { color: #ffffff; box-shadow: inset 0 -2px 0 #ffffff; }
.cw-chart { position: relative; width: 640px; height: 372px; }
.cw-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.cw-lines path { stroke: rgba(255,255,255,0.16); stroke-width: 1; fill: none; }
/* uniform card geometry: every team card exactly 152x64, same padding, same type scale */
.cw-node {
  position: absolute; transform: translateX(-50%); box-sizing: border-box;
  width: 152px; height: 64px; padding: 10px 11px;
  background: #212127; border: 1px solid rgba(255,255,255,0.09); border-radius: 10px;
  display: flex; flex-direction: column; gap: 3px; overflow: hidden;
}
.cw-node-name { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; line-height: 1.2; font-weight: 500; color: #ffffff; white-space: nowrap; }
.cw-node-sub { font-size: 10.5px; line-height: 1.3; color: #9a9aa4; }
.cw-root { width: 200px; height: 50px; background: #26262e; border-color: rgba(255,255,255,0.14); }
.cw-dot-you { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--cta-orange); }
.cw-dept { position: absolute; transform: translateX(-50%); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: #9a9aa4; background: #17171c; padding: 0 8px; z-index: 1; }
@media (max-width: 1023px) { .lineup-shot { display: none; } }

/* ---------- section pattern: split accordion (visual left, items right) ---------- */
.acc { padding: 72px var(--pad-x) 80px; }
@media (min-width: 768px) { .acc { padding-block: 104px 112px; } }
/* homepage instance follows the full-bleed lineup band — needs more air above (Max 2026-07-29) */
#about-agents { padding-top: 96px; }
@media (min-width: 768px) { #about-agents { padding-top: 176px; } }

.acc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}
/* wide gutter between visual and list — measured ~13% of content width on the reference */
@media (min-width: 1024px) { .acc-grid { grid-template-columns: 1.08fr 1fr; gap: clamp(80px, 12.5%, 236px); } }

.acc-visual {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--placeholder);
}
.acc-visual img,
.acc-visual iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.4s ease; }
/* inactive scene iframes go visibility:hidden after the fade so seven live scenes never paint at once */
.acc-visual iframe { border: 0; pointer-events: none; visibility: hidden; transition: opacity 0.4s ease, visibility 0s linear 0.4s; }
.acc-visual img.active,
.acc-visual iframe.active { opacity: 1; }
.acc-visual iframe.active { visibility: visible; transition: opacity 0.4s ease; }

.acc-item { border-top: 1px solid #e0e0e0; }
.acc-item:last-child { border-bottom: 1px solid #e0e0e0; }
.acc-item.active { border-top: 1px solid transparent; border-image: var(--grad-underline) 1; border-image-width: 1px 0 0 0; }

.acc-head {
  display: block;
  width: 100%;
  text-align: left;
  padding: 16px 0;
  font-family: var(--ff);
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
  background: none;
  border: none;
  cursor: pointer;
}
@media (min-width: 1024px) { .acc-head { font-size: 25px; padding: 20px 0; } }

/* open/close animates via the grid-rows trick — no snap (motion principle) */
.acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}
.acc-body-in { overflow: hidden; min-height: 0; }
.acc-item.active .acc-body { grid-template-rows: 1fr; }
.acc-body-in > *:last-child { margin-bottom: 24px; }

.acc-sum { font-size: 15px; color: var(--ink-soft); margin-bottom: 14px; }

.acc-li {
  position: relative;
  padding: 5px 0 5px 28px;
  font-size: 15px;
  line-height: 1.4;
}
/* check mark: circle + tick, our line-art language */
.acc-li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 16px;
  height: 16px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  opacity: 0.75;
}
.acc-li::after {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 13px;
  width: 7px;
  height: 4px;
  border-left: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: rotate(-45deg);
  opacity: 0.75;
}

/* group label toggles values within the open card */
.acc-g {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
  font-family: var(--ff);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  background: none;
  border: none;
  cursor: pointer;
}
.acc-chev {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--ink-soft);
  border-bottom: 1.5px solid var(--ink-soft);
  transform: rotate(45deg) translateY(-1px);
  transition: transform 0.3s ease;
}
.acc-li.open .acc-chev { transform: rotate(225deg) translateY(-1px); }
.acc-vals {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.acc-vals-in { overflow: hidden; min-height: 0; font-size: 14px; color: var(--ink-soft); line-height: 1.45; }
.acc-li.open .acc-vals { grid-template-rows: 1fr; }
.acc-li.open .acc-vals-in { padding: 2px 0 5px; }

/* ---------- acc.teams — the reference models-accordion grammar, measured from their computed styles:
   rules 1px ink (active = 2px gradient painted 100%x2 top), title 20/24 w400 lh1.3 pb36,
   sentence 16/18 lh1.4, check rows 16px + 16px circle-check bullet, learn-more 16px arrow
   (+4px on hover), columns centered with 176px max gutter, visual radius 22px ---------- */
/* title centered per house section grammar; gap to accordion measured ~80px on the reference */
.acc.teams .sec-tagline { margin-bottom: 48px; }
@media (min-width: 1024px) { .acc.teams .sec-tagline { margin-bottom: 80px; } }
/* visual spans exactly first-rule to last-rule beside the list (optical alignment; Max 2026-07-29) */
@media (min-width: 1024px) { .acc.teams .acc-grid { grid-template-columns: 1.15fr 1fr; gap: clamp(80px, 11.5%, 176px); align-items: stretch; } }
.acc.teams .acc-visual { border-radius: 22px; }
@media (min-width: 1024px) { .acc.teams .acc-visual { aspect-ratio: auto; } }
/* still-scene accordion (fixed 2:1 PNG exports, not fluid iframes): the box keeps the scene's
   ratio at every width — stretch/square boxes drift on big/small screens and cover-crop the
   composition out of its own background */
.acc.acc-still .acc-visual { aspect-ratio: 2 / 1; }
@media (min-width: 1024px) { .acc.teams.acc-still .acc-visual { aspect-ratio: 2 / 1; align-self: start; } }
.acc.acc-still.acc-square .acc-visual { aspect-ratio: 1 / 1; } /* ai-deployment: the four aid scenes share a square canvas; the figure must not follow the open item height (Max 2026-08-22) */
@media (min-width: 1024px) { .acc.teams.acc-still.acc-square .acc-visual { aspect-ratio: 1 / 1; } }
.acc.teams .acc-list { max-width: 555px; }
/* sechead mirrors the split grid that follows it, so the lead's left edge sits exactly on the
   right column's left edge at every width, and the capped list rides the wrap's right edge on
   wide screens instead of parking at its column start (Max 2026-08-24). Column/gap values are
   in lockstep with .acc-grid, .acc.teams .acc-grid, and .featsplit above/below. */
@media (min-width: 1024px) {
  .sechead:has(+ .acc-grid) { grid-template-columns: 1.08fr 1fr; column-gap: clamp(80px, 12.5%, 236px); }
  .acc.teams .sechead:has(+ .acc-grid) { grid-template-columns: 1.15fr 1fr; column-gap: clamp(80px, 11.5%, 176px); }
  .sechead:has(+ .acc-grid) .sechead-lead { max-width: 555px; }
  .acc.teams .acc-list { margin-left: auto; }
  .sechead:has(+ .featsplit) { grid-template-columns: 1fr 1fr; column-gap: clamp(96px, 9.5%, 180px); }
  .sechead:has(+ .featsplit) .sechead-lead { justify-self: start; max-width: 480px; }
}
.acc.teams .acc-item { border-top: 1px solid var(--ink-strong); padding-top: 8px; }
.acc.teams .acc-item:last-child { border-bottom: 1px solid var(--ink-strong); }
.acc.teams .acc-item.active {
  border-top: 0;
  border-image: none;
  background: var(--grad-underline) top / 100% 2px no-repeat;
  padding-top: 9px;
}
.acc.teams .acc-head { font-size: 20px; font-weight: 400; line-height: 1.3; letter-spacing: normal; color: var(--ink-strong); padding: 0 0 36px; }
@media (min-width: 1024px) { .acc.teams .acc-head { font-size: 24px; padding: 0 0 36px; } }
.acc.teams .acc-desc { font-size: 16px; line-height: 1.4; color: var(--ink-strong); }
@media (min-width: 1024px) { .acc.teams .acc-desc { font-size: 18px; } }
.acc.teams .acc-checks,
.featsplit-body .acc-checks { list-style: none; margin: 16px 0 0; padding: 0; width: 83.333%; }
.acc.teams .acc-checks li,
.featsplit-body .acc-checks li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
  min-height: 24px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-strong);
}
.acc.teams .acc-checks li::before,
.featsplit-body .acc-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='8' cy='8' r='7.4' stroke='%2317171C' stroke-width='1.2'/%3E%3Cpath d='M4.9 8.4l2.1 2.1 4.1-4.7' stroke='%2317171C' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.acc.teams .acc-more,
.featsplit-body .acc-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 16px; line-height: 1.5; color: var(--ink-strong); text-decoration: none; }
.acc.teams .acc-more-arrow,
.featsplit-body .acc-more-arrow { display: inline-block; transition: transform 0.4s ease; }
.acc.teams .acc-more:hover .acc-more-arrow,
.featsplit-body .acc-more:hover .acc-more-arrow { transform: translateX(4px); }
.acc.teams .acc-body-in > *:last-child { margin-bottom: 36px; }
/* centered variant: short list sits vertically centered against the visual (customization) */
@media (min-width: 1024px) {
  .acc.acc-mid .acc-grid { align-items: center; }
  .acc.acc-mid .acc-visual { aspect-ratio: 1 / 1; }
}

/* ---------- solutions pages — technology-grammar split hero + deep-blue band
   (the reference /solutions/technology measured 2026-07-29; their green family translated to our
   blue accent family: bg #0F1D45, panel #1B2E63, line accent #8FA8F2, grad rule ours) ---------- */
.shero { padding: 64px var(--pad-x) 0; }
@media (min-width: 1024px) { .shero { padding-top: 96px; } }
.shero-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .shero-grid { grid-template-columns: 1fr 1.15fr; gap: clamp(48px, 6%, 96px); } }
.shero-title { font-size: 40px; font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); }
@media (min-width: 1024px) { .shero-title { font-size: 64px; } }
.shero-sub { font-size: 16px; line-height: 1.4; margin-top: 20px; max-width: 480px; }
@media (min-width: 1024px) { .shero-sub { font-size: 18px; } }
.shero-cta { margin-top: 32px; }
.shero-media { border-radius: 12px; overflow: hidden; background: var(--placeholder); aspect-ratio: 1 / 1; }
@media (max-width: 1023px) { .shero-media { aspect-ratio: 16 / 10; } }
.shero-media img { width: 100%; height: 100%; object-fit: cover; }

.band { margin-top: 96px; padding: 96px var(--pad-x); background: var(--band-bg); color: #fff; }
/* one accent family per audience page (drawn from the site tokens) */
.band-blue   { --band-bg: #0f1d45; --band-panel: #1b2e63; --band-accent: #8fa8f2; }  /* multinationals */
.band-violet { --band-bg: #1c1240; --band-panel: #2d2063; --band-accent: #b5a3f5; }  /* mid-market */
.band-coral  { --band-bg: #3d1509; --band-panel: #5a2615; --band-accent: #ffa48e; }  /* consultancies */
.band-green  { --band-bg: #0b2b1d; --band-panel: #14402c; --band-accent: #7fd6a8; }  /* tax agencies */
/* + .band-ink (AI Deployment Program page, audience-neutral graphite) is defined in the page block at the file end */
@media (min-width: 768px) { .band { margin-top: 128px; padding-block: 128px; } }
.band-title { font-size: 32px; font-weight: 400; line-height: 1.2; letter-spacing: -0.01em; color: #fff; }
@media (min-width: 1024px) { .band-title { font-size: 48px; } }
.band-lead { font-size: 16px; margin-top: 12px; color: rgba(255,255,255,0.75); }
@media (min-width: 1024px) { .band-lead { font-size: 18px; } }
.band-three { margin-top: 56px; display: grid; gap: 48px; }
@media (min-width: 768px) { .band-three { margin-top: 72px; grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.band-three .bt-icon { width: 84px; height: 84px; margin-bottom: 24px; }
.band-three .bt-icon svg { width: 100%; height: 100%; stroke: var(--band-accent); fill: none; stroke-width: 1.1; }
.band-three h3 { font-size: 22px; font-weight: 400; line-height: 1.2; color: #fff; }
@media (min-width: 1024px) { .band-three h3 { font-size: 24px; } }
.band-three p { font-size: 16px; line-height: 1.45; margin-top: 12px; color: rgba(255,255,255,0.75); }
.band-act2 { margin-top: 112px; }
@media (min-width: 768px) { .band-act2 { margin-top: 144px; } }
/* act2 standing alone in its own band needs no act1-separator margin */
.band .wrap > .band-act2:first-child { margin-top: 0; }
.band-use { margin-top: 56px; display: grid; gap: 48px; align-items: start; }
@media (min-width: 1024px) { .band-use { margin-top: 72px; grid-template-columns: 1.1fr 1fr; gap: clamp(48px, 8%, 120px); } }
.band-panel { background: var(--band-panel); border-radius: 16px; aspect-ratio: 1 / 1; display: grid; place-items: center; padding: 40px; }
.band-panel img { max-width: 82%; max-height: 82%; border-radius: 10px; }
/* dark accordion overrides (reuses .acc-grid machinery) */
.band .acc-item { border-top: 1px solid rgba(255,255,255,0.35); padding-top: 8px; }
.band .acc-item:last-child { border-bottom: 1px solid rgba(255,255,255,0.35); }
.band .acc-item.active { border-top: 0; border-image: none; background: var(--grad-underline) top / 100% 2px no-repeat; padding-top: 9px; }
.band .acc-head { font-size: 20px; font-weight: 400; line-height: 1.3; letter-spacing: normal; color: #fff; padding: 0 0 26px; }
@media (min-width: 1024px) { .band .acc-head { font-size: 24px; padding: 0 0 26px; } }
.band .acc-desc { font-size: 16px; line-height: 1.45; color: rgba(255,255,255,0.85); }
.band .acc-checks { list-style: none; margin: 16px 0 0; padding: 0; }
.band .acc-checks li { position: relative; padding-left: 26px; margin-bottom: 10px; min-height: 24px; font-size: 16px; line-height: 1.5; color: rgba(255,255,255,0.85); }
.band .acc-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='8' cy='8' r='7.4' stroke='%23FFFFFF' stroke-opacity='0.9' stroke-width='1.2'/%3E%3Cpath d='M4.9 8.4l2.1 2.1 4.1-4.7' stroke='%23FFFFFF' stroke-opacity='0.9' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.band .acc-body-in > *:last-child { margin-bottom: 28px; }
.band-cta { margin-top: 40px; }
.btn-hollow { display: inline-block; padding: 12px 26px; border: 1px solid #fff; border-radius: 999px; color: #fff; font-size: 16px; text-decoration: none; transition: background 0.2s ease, color 0.2s ease; }
.btn-hollow:hover { background: #fff; color: var(--band-bg, #17171c); }

/* ---------- agent team pages (/agents/<team>/) — compass-grammar hero (centered eyebrow/72/sub/CTA
   over full-width 12px image) + transcribe-grammar deliverable rows (48 head, 32 row titles,
   square media, alternating sides, 128px gutter) — measured from their live code 2026-07-29 ---------- */
.ahero { padding: 96px var(--pad-x) 0; text-align: center; }
@media (min-width: 768px) { .ahero { padding-top: 160px; } }
.ahero-eyebrow { font-size: 13px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 18px; }
.ahero-title { font-size: 44px; font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); max-width: 900px; margin-inline: auto; }
@media (min-width: 1024px) { .ahero-title { font-size: 72px; line-height: 1.0; } }
.ahero-sub { font-size: 16px; line-height: 1.4; color: var(--ink); max-width: 640px; margin: 24px auto 0; }
@media (min-width: 1024px) { .ahero-sub { font-size: 18px; } }
.ahero-cta { margin-top: 40px; }
.ahero-media { margin-top: 56px; aspect-ratio: 2.44 / 1; border-radius: 12px; overflow: hidden; background: var(--placeholder); }
@media (min-width: 768px) { .ahero-media { margin-top: 84px; } }
.ahero-media { position: relative; }
.ahero-media img, .ahero-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ahero-media.heroart svg { width: 100%; height: 100%; display: block; }
/* heroart figures: match the artwork's ground so subpixel edges never show the
   light placeholder tile (Max 2026-08-13, "weird white line at the bottom/edges") */
.ahero-media.heroart { background: #0b0b0e; }
body.pdep-page .ahero-media.heroart { background: #0a1311; }

/* rule-topped iconless three-up under the hero media (north grammar: hairline rule,
   title, two-line text, learn-more) */
.pillars { padding: 72px var(--pad-x) 0; }
@media (min-width: 768px) { .pillars { padding-top: 96px; } }
.pillars-grid { display: grid; gap: 48px; }
@media (min-width: 768px) { .pillars-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.pillar { border-top: 1px solid var(--ink-strong); padding-top: 28px; }
.pillar h3 { font-size: 22px; font-weight: 400; line-height: 1.2; }
@media (min-width: 1024px) { .pillar h3 { font-size: 24px; } }
.pillar p { font-size: 16px; line-height: 1.4; margin-top: 12px; }
.pillar-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 16px; color: var(--ink-strong); text-decoration: none; }
.pillar-more span { display: inline-block; transition: transform 0.4s ease; }
.pillar-more:hover span { transform: translateX(4px); }

.adeliv { padding: 96px var(--pad-x) 56px; }
@media (min-width: 768px) { .adeliv { padding-block: 128px 96px; } }
.adeliv-title { font-size: 32px; font-weight: 400; line-height: 1.2; letter-spacing: -0.01em; }
@media (min-width: 1024px) { .adeliv-title { font-size: 48px; } }
.adeliv-lead { font-size: 16px; color: var(--ink); margin-top: 12px; }
@media (min-width: 1024px) { .adeliv-lead { font-size: 18px; } }
.adeliv-rows { margin-top: 72px; display: grid; gap: 72px; }
@media (min-width: 1024px) { .adeliv-rows { margin-top: 140px; gap: 96px; } }   /* was 160 (Max 2026-08-23: too much white between rows) */
.adeliv-row { display: grid; gap: 32px; align-items: center; }
@media (min-width: 768px) {
  .adeliv-row { grid-template-columns: 1fr 1fr; gap: clamp(48px, 8.5%, 128px); }
  .adeliv-row:nth-child(even) .adeliv-copy { order: 2; }
}
.adeliv-copy { max-width: 550px; }
.adeliv-copy h3 { font-size: 24px; font-weight: 400; line-height: 1.2; }
@media (min-width: 1024px) { .adeliv-copy h3 { font-size: 32px; } }
.adeliv-copy p { font-size: 16px; line-height: 1.4; margin-top: 16px; }
@media (min-width: 1024px) { .adeliv-copy p { font-size: 18px; } }
/* the deliverable scenes are 1360x1360 exports with their art in the middle ~60-80% of the height; the slot
   trims 7.6% top and bottom (all 33 scenes measured: art spans 8.8%-91.8% at most) so the rows read tighter
   (Max 2026-08-23) — every row keeps the SAME slot so nothing jumps between rows */
.adeliv-media { aspect-ratio: 1.18 / 1; border-radius: 12px; overflow: hidden; background: var(--placeholder); }
.adeliv-media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- section pattern: logo strip (S-2 platforms) ---------- */
.logostrip { padding: 48px var(--pad-x) 56px; }
@media (min-width: 768px) { .logostrip { padding-block: 64px 72px; } }
/* on solutions pages the strip follows a flush-bottom shero — the hero needs more air below */
.shero + .logostrip { padding-top: 88px; }
@media (min-width: 768px) { .shero + .logostrip { padding-top: 128px; } }

.logostrip-kicker {
  text-align: center;
  font-size: 16px;
  max-width: 655px;
  margin-inline: auto;
  margin-bottom: 36px;
}
@media (min-width: 1024px) { .logostrip-kicker { font-size: 18px; } }

.logostrip-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px 28px;   /* phones: tight enough that Claude Cowork + Copilot Cowork share a row at 390px */
}
@media (min-width: 768px) { .logostrip-row { gap: 28px 48px; } }
@media (min-width: 1280px) { .logostrip-row { gap: 40px 72px; } }   /* wrapped rows 40px apart (Max 2026-08-26: +12 on the first 28px pass) */

/* marks + names in full ink (Max 2026-08-23: "larger, in black and not grayish"); the row is a reveal
   unit whose items appear one after another — the reference's logo strip measured in their source 2026-08-23:
   each logo 200ms after the previous, a 500ms opacity fade, no rise (tokens below override the rail) */
.logostrip-item { display: flex; align-items: center; gap: 10px; color: var(--ink-strong, #191919); }
.logostrip-mark { height: 22px; width: auto; display: block; }
.logostrip-name { font-size: 14px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; }
@media (min-width: 768px) { .logostrip-item { gap: 14px; } .logostrip-mark { height: 30px; } .logostrip-name { font-size: 17px; } }
@media (min-width: 1024px) { .logostrip-mark { height: 32px; } .logostrip-name { font-size: 18px; } }
/* optical trims (Max 2026-08-26): a full-bleed solid mark reads bigger than a tile at equal height —
   mark-sm pulls it in; mark-drop lowers a descender wordmark whose visual mass sits high in its box */
.logostrip-mark.mark-sm { height: 18px; }
@media (min-width: 768px) { .logostrip-mark.mark-sm { height: 24px; } }
@media (min-width: 1024px) { .logostrip-mark.mark-sm { height: 26px; } }
.logostrip-mark.mark-drop { transform: translateY(6%); }
/* mark-md: a heavy long wordmark (Unity Advisory) whose x-height matches the strip at full height but whose weight
   and length read bigger — one step down (Max 2026-09-02, his A2 pick) */
.logostrip-mark.mark-md { height: 20px; }
@media (min-width: 768px) { .logostrip-mark.mark-md { height: 26px; } }
@media (min-width: 1024px) { .logostrip-mark.mark-md { height: 28px; } }
.logostrip-row { --rv-stagger: .2s; --rv-rise: 0px; }
/* partners ecosystem strip runs ~20% larger than the platform strips (Max 2026-09-02): marks 22/30/32 -> 26/36/38,
   trims and names scale with them so the mark+name lockups keep their proportion; wrapping unchanged */
.logostrip-lg .logostrip-mark { height: 26px; }
.logostrip-lg .logostrip-mark.mark-sm { height: 22px; }
.logostrip-lg .logostrip-mark.mark-md { height: 24px; }
.logostrip-lg .logostrip-name { font-size: 17px; }
.logostrip-lg .logostrip-item { gap: 12px; }
.logostrip-lg .logostrip-row { gap: 24px 36px; }   /* a bit more air between logos than the platform strips (Max 2026-09-02) */
@media (min-width: 768px) {
  .logostrip-lg .logostrip-mark { height: 36px; }
  .logostrip-lg .logostrip-mark.mark-sm { height: 29px; }
  .logostrip-lg .logostrip-mark.mark-md { height: 31px; }
  .logostrip-lg .logostrip-name { font-size: 20px; }
  .logostrip-lg .logostrip-item { gap: 17px; }
  .logostrip-lg .logostrip-row { gap: 34px 60px; }
}
@media (min-width: 1024px) {
  .logostrip-lg .logostrip-mark { height: 38px; }
  .logostrip-lg .logostrip-mark.mark-sm { height: 31px; }
  .logostrip-lg .logostrip-mark.mark-md { height: 34px; }
  .logostrip-lg .logostrip-name { font-size: 22px; }
}
@media (min-width: 1280px) {
  .logostrip-lg .logostrip-row { gap: 48px 92px; }
}

/* ---------- S-5 upcoming events ---------- */
.cardrow { padding: 48px var(--pad-x) 56px; }
.cardrow-rose { background: #f9e7e2; }

/* Newsroom bridge (blog) — D2: about-hero photo under frosted glass */
.newsbridge { padding: 8px var(--pad-x) 30px; }
.newsbridge-tile { border-radius: 16px; padding: 40px 44px; display: flex; gap: 56px; text-decoration: none; position: relative; overflow: hidden; background: url('/assets/images/about/hero.jpg') center 35%/cover; }
.newsbridge-tile::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.90) 38%, rgba(255,255,255,0.62) 100%); }
.newsbridge-left { flex: 0 0 280px; position: relative; }
.newsbridge-left h2 { font-size: 30px; font-weight: 600; color: var(--ink-strong); margin: 0 0 8px; }
.newsbridge-left p { font-size: 14.5px; color: #57544d; margin: 0 0 18px; }
.newsbridge-go { font-size: 14px; color: var(--ink-strong); }
.newsbridge-go span { color: var(--coral); }
.newsbridge-tile:hover .newsbridge-go { text-decoration: underline; text-underline-offset: 3px; }
.newsbridge-items { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; position: relative; } /* N2 rules only (Max 2026-08-22): no glass, no inner box; hairlines carry the structure */
.newsbridge-item { border-top: 1px solid rgba(23,23,28,0.22); padding: 15px 0; }
.newsbridge-item:first-child { border-top: 0; }
.newsbridge-date { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10px; letter-spacing: 0.1em; color: #757575; text-transform: uppercase; display: block; margin-bottom: 3px; }
.newsbridge-title { font-size: 17px; color: var(--ink-strong); }
@media (max-width: 767px) {
  .newsbridge-tile { flex-direction: column; gap: 20px; padding: 26px 22px; }
  .newsbridge-left { flex: none; }
}
/* dark-surface variant (about page) */
.newsbridge-dark .newsbridge-tile::before { background: linear-gradient(to right, rgba(23,23,28,0.93) 0%, rgba(23,23,28,0.88) 38%, rgba(23,23,28,0.62) 100%); }
.newsbridge-dark .newsbridge-left h2 { color: #ffffff; }
.newsbridge-dark .newsbridge-left p { color: #a49e90; }
.newsbridge-dark .newsbridge-go { color: #ffffff; }
.newsbridge-dark .newsbridge-items { background: none; }
.newsbridge-dark .newsbridge-item { border-top-color: rgba(255,255,255,0.22); }
.newsbridge-dark .newsbridge-date { color: #a49e90; }
.newsbridge-dark .newsbridge-title { color: #f1efe9; }

@media (min-width: 768px) { .cardrow { padding-block: 64px 72px; } }
/* a cardrow straight after a full-bleed band gets the section-rhythm air (96/176) */
.lineup + .cardrow { padding-top: 96px; }
@media (min-width: 768px) { .lineup + .cardrow { padding-top: 176px; } }

.cardrow-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 36px;
}
.cardrow-title {
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
@media (min-width: 1024px) { .cardrow-title { font-size: 40px; } }

.cardrow-nav { display: flex; gap: 10px; }
.cardrow-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid #e0e0e0;
  background: none;
  font-family: var(--ff);
  font-size: 16px;
  color: var(--ink-strong);
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}
.cardrow-btn:hover:not(:disabled) { background: var(--hairline); border-color: var(--hairline); }
.cardrow-btn:disabled { opacity: 0.3; cursor: default; }

/* three cards per view at the reference card width; further cards scroll/step sideways */
.cardrow-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
@media (min-width: 640px)  { .cardrow-track { grid-auto-columns: calc((100% - 20px) / 2); gap: 20px; } }
@media (min-width: 1024px) { .cardrow-track { grid-auto-columns: calc((100% - 40px) / 3); } }
.cardrow-track::-webkit-scrollbar { display: none; }
/* every slider child is a snap point — a mandatory-snap track with non-snapping
   children free-stops mid-scroll and cuts slides at the edge (bit 2026-07-29) */
.cardrow-track > * { scroll-snap-align: start; }

/* flat editorial card — the reference-measured (2026-07-29, /events): no panel, img 5:3,
   meta 12px caps gray, title/desc 21px/1.3 single black, gaps ~22/20 */
.card {
  display: flex;
  flex-direction: column;
  background: transparent;
  border-radius: 0;
  padding: 0;
}
.card-media {
  position: relative;
  aspect-ratio: 5 / 3;
  border-radius: var(--radius-media);
  overflow: hidden;
  background: var(--placeholder);
  margin-bottom: 22px;
}
.card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* no extra inset: text glyphs align with the image's left edge (one shared inset) */
.card-body { display: flex; flex-direction: column; flex: 1; }
.card-meta {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.4;
  min-height: 34px;   /* two lines reserved on every card so titles align across the row */
  margin-bottom: 20px;
}
/* single text block, single color (Max 2026-07-29: just black, no lead/desc split) */
.card-text {
  font-size: 21px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.card-text-lead { color: inherit; }
.card-foot {
  margin-top: auto;
  padding-top: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card-foot .panel-arrow { transition: transform 0.25s ease; }
.card-link { font-size: 14px; }
.card:hover .card-foot .panel-arrow { transform: translateX(4px); }

/* ---------- fused nav panel (tabs on top, columns below) ---------- */
.panelF { width: 1000px; }
/* Solutions/Academy: single list column + picture card right (Resources-style) */
.panelF.sol { width: 1000px; }
.fuse-grid.sol-grid { grid-template-columns: minmax(0, 1fr) 330px; gap: 56px; align-items: start; }
/* Label-only lists: proximity hierarchy (header→item 12px < item→item 18px < group→group 41px).
   The uniform 40px rhythm is for item blocks WITH desc lines (Agents panel); label-only
   lists need the header visibly bound to its items. */
.nav-links .sol-list a.gitem { padding: 9px 0; }
.sol-list .fcol-header { margin-bottom: 3px; }
.sol-list { display: flex; gap: 48px; }
.sol-list .sol-col { flex: 1; min-width: 0; }
.sol-list .fcol + .fcol { margin-top: 32px; }
.tabrow { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
/* one-level panels: no tab buttons inflating the row — the reference title-to-content gap (~16px) */
.onelevel .tabrow { margin-bottom: 0; }
.tabrow .panel-title { margin-bottom: 0; }
.tabsep { width: 1px; height: 22px; background: var(--hairline); margin: 0 6px; }
.tab {
  font-family: var(--ff);
  font-size: 14px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-soft);
  padding: 6px 14px;
  border-radius: 9999px;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.tab:hover { color: var(--ink); }
.hire-accent { color: var(--cta-orange); }
.tab.active { color: var(--ink); background: #eaeaea; }

/* Agents and its sublinks live in one highlighted zone, so the grouping is visible;
   Services sits apart. Zone bg only shows in agents mode; space always reserved. */
.agents-zone {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 10px;
  padding: 4px 8px;
  border-radius: 9999px;
}
.panelF:not(.mode-services) .agents-zone { background: #f6f6f6; }
.subtabs-inline { display: flex; gap: 2px; flex-wrap: wrap; min-width: 0; }
.mode-services .subtabs-inline { visibility: hidden; }
.subtab {
  font-family: var(--ff);
  font-size: 12.5px;
  white-space: nowrap;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-soft);
  padding: 5px 6px;
  border-radius: 9999px;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.subtab:hover { color: var(--ink); }
.subtab.active { color: var(--ink); background: #e5e5e5; }

/* fixed-size content area — states with fewer columns leave the rest empty */
.fuse-content { height: 500px; }
.panelF.onelevel .fuse-content { height: auto; }
.fuse-grid { display: none; grid-template-columns: repeat(3, 1fr); gap: 56px; height: 100%; }
.fuse-grid.active { display: grid; }
.fcol { min-width: 0; }
.fcol-thumb {
  height: 100px;
  border-radius: var(--radius-media);
  overflow: hidden;
  background: var(--placeholder);
  position: relative;
  margin-bottom: 20px;
}
.fcol-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Agents-menu org overlays (Max pick 08-17: variant E depth stacks) — real glass chips
   over the stone thirds; structure by layering, no wires. Compliance cascades top-down,
   planning fans in an arc, operations sits as three independent stacks. Percent geometry
   so chips ride the thumb, chips scaled from the sp-frost recipe. */
.agorg { position: absolute; inset: 0; pointer-events: none; }
.agorg span { position: absolute; display: block; background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.30); border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1); }
/* Agents menu thumbs, glass compositions (Max 2026-08-22, Suggestion 1 zoomed): docs fan bleeding the bottom · three-box entity chart with a dotted new entity · layered dashboard */
.agorg svg.ag-svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(255,255,255,0.72); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.agorg svg.ag-svg marker path { fill: none; stroke: rgba(255,255,255,0.85); stroke-width: 1.2; }
.agorg svg.ag-svg .ag-dash-ln { stroke-dasharray: 3 3; }
.agorg svg.ag-svg .ag-hair { stroke: rgba(255,255,255,0.26); }
.agorg svg.ag-svg .ag-line { stroke: rgba(255,255,255,0.82); stroke-width: 1.4; }
.agorg svg.ag-svg .ag-dot { fill: #ffffff; stroke: none; }
.agorg svg.ag-svg .ag-fill { fill: rgba(255,255,255,0.72); stroke: none; }
.agorg svg.ag-svg .ag-fill2 { fill: rgba(255,255,255,0.40); stroke: none; }
.ag-docs span { width: 31%; height: 130%; top: 30%; transform-origin: 50% 100%; }
.ag-docs span:nth-child(1) { left: 20%; transform: rotate(-10deg); opacity: 0.85; }
.ag-docs span:nth-child(2) { left: 49%; transform: rotate(10deg); opacity: 0.85; }
.ag-docs span:nth-child(3) { left: 34.5%; top: 26%; }
.ag-ent span { width: 25.9%; height: 30%; }
.ag-ent span:nth-child(1) { left: 34%; top: 8%; }
.ag-ent span:nth-child(2) { left: 8.2%; top: 62%; }
.ag-ent span:nth-child(3) { left: 64%; top: 62%; background: rgba(255,255,255,0.05); border: 1px dashed rgba(255,255,255,0.75); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.ag-dash span:nth-child(1) { left: 10.2%; top: 14%; width: 83.7%; height: 100%; }
.ag-dash span:nth-child(2) { left: 6%; top: 34%; width: 30%; height: 46%; background: rgba(255,255,255,0.22); }
.ag-stack-c span { width: 18.6%; height: 16%; }
/* hero scale (team pages, Max 2026-08-23: "similar story for the agent pages they lead to ... elements not
   fully on the pic"): the same compositions over the .ahero-media band (2.44:1), glass scaled up, hairlines
   drawn with non-scaling strokes, one element off an edge per composition */
.ahero-media { position: relative; }
.agorg.ag-hero span { border-radius: 10px; border-color: rgba(255,255,255,0.34); box-shadow: 0 6px 22px rgba(0,0,0,0.22);
  -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1); }
.agorg.ag-hero svg.ag-svg { stroke-width: 1.3; }
.agorg.ag-hero svg.ag-svg .ag-dash-ln { stroke-dasharray: 5 5; }
.agorg.ag-hero svg.ag-svg .ag-line { stroke-width: 1.7; }
.agorg.ag-hero svg.ag-svg .ag-hair { stroke-width: 1.1; }
.ag-hero.ag-docs span { width: 27%; height: 120%; top: 34%; }
.ag-hero.ag-docs span:nth-child(1) { left: 24%; }
.ag-hero.ag-docs span:nth-child(2) { left: 49%; }
.ag-hero.ag-docs span:nth-child(3) { left: 36.5%; top: 30%; }
.ag-hero.ag-ent span { width: 25.9%; height: 30%; }
.ag-hero.ag-ent span:nth-child(1) { left: 37%; top: -8%; }                                 /* parent, cut by the top edge; centre x = 50% */
.ag-hero.ag-ent span:nth-child(2) { left: -6%; top: 62%; }                                 /* cut by the left edge; centre 43% left of the parent */
.ag-hero.ag-ent span:nth-child(3) { left: 80.1%; top: 62%; border-width: 1.5px; }         /* the new entity, cut by the right edge; centre 43% right of the parent */
.ag-hero.ag-dash span:nth-child(1) { left: 12%; top: 16%; width: 94%; height: 100%; }    /* the panel runs off the right + bottom */
.ag-hero.ag-dash span:nth-child(2) { left: 6%; top: 36%; width: 30%; height: 46%; }
.ag-stack-c span:nth-child(1) { left: 37.3%; top: 16%; }
.ag-stack-c span:nth-child(2) { left: 43.7%; top: 33%; opacity: 0.87; }
.ag-stack-c span:nth-child(3) { left: 50.2%; top: 50%; opacity: 0.74; }
.ag-stack-c span:nth-child(4) { left: 56.6%; top: 67%; opacity: 0.61; }
.ag-stack-p span { width: 17.2%; height: 16%; }
.ag-stack-p span:nth-child(1) { left: 16.6%; top: 31%; transform: rotate(-18deg); }
.ag-stack-p span:nth-child(2) { left: 27.1%; top: 20%; transform: rotate(-9deg); }
.ag-stack-p span:nth-child(3) { left: 41.4%; top: 16%; }
.ag-stack-p span:nth-child(4) { left: 55.7%; top: 20%; transform: rotate(9deg); }
.ag-stack-p span:nth-child(5) { left: 66.2%; top: 31%; transform: rotate(18deg); }
.ag-stack-o span { width: 15.8%; height: 14%; }
.ag-stack-o span:nth-child(1) { left: 13.6%; top: 34%; }
.ag-stack-o span:nth-child(2) { left: 17.2%; top: 46%; opacity: 0.8; }
.ag-stack-o span:nth-child(3) { left: 45.9%; top: 44%; }
.ag-stack-o span:nth-child(4) { left: 49.5%; top: 56%; opacity: 0.8; }
.ag-stack-o span:nth-child(5) { left: 76.7%; top: 34%; }
.ag-stack-o span:nth-child(6) { left: 80.3%; top: 46%; opacity: 0.8; }
.fcol-header {
  /* the reference-measured (2026-07-27): mono eyebrow 14px, +0.02em, gray */
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 20px;
}
/* Attributes: 9 tiles over the watermark brain (Max pick C, 2026-07-24) */
.fuse-grid.attrtiles { position: relative; }
.fuse-grid.attrtiles.active { grid-template-columns: repeat(3, 1fr); gap: 0 14px; }
.attr-brain { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 96%; pointer-events: none; }
.attrtiles .fcol { display: flex; flex-direction: column; position: relative; }
.attrtiles .fcol-header { margin-bottom: 2px; }
.nav-links .attrtiles a.gitem.atile, .capsec .attrtiles a.gitem.atile {
  flex: 1;
  margin-top: 10px;
  padding: 14px 18px;
  border: 1px solid #e3e3e8;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  overflow: hidden;
  transition: background-color 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.attrtiles .atile .gitem-desc { padding-left: 0; }
@media (hover: hover) {
  .attrtiles .atile:hover { transform: translateY(-2px); }
  .attrtiles .atile.at-b:hover { background: #eef1fc; border-color: #d6ddf7; }
  .attrtiles .atile.at-v:hover { background: #f3edfd; border-color: #e2d7fb; }
}
.attrtiles .atile.at-c:hover { background: #fff0ea; border-color: #ffd9cf; }
.fuse-grid.taskflow.active { grid-template-columns: repeat(4, 1fr); gap: 10px; }
.taskflow .fcol { display: flex; flex-direction: column; }
.taskflow .fcol-header { margin-bottom: 10px; }
.taskflow .fcol-thumb { flex: 1; height: auto; margin-bottom: 0; }
.pitem-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.dot-blue { background: var(--blue); }
.dot-violet { background: var(--violet); }
.dot-coral { background: var(--coral); }
/* ---------- section pattern: quote slider (S-8 use cases) ---------- */
.quoterow { padding: 48px var(--pad-x) 56px; }
@media (min-width: 768px) { .quoterow { padding-block: 64px 72px; } }

/* one slide per view at every width */
.quote-track { grid-auto-columns: 100%; }

.qslide { display: grid; grid-template-columns: 1fr; gap: 12px; }

/* quote card: white, thin dark outline; photo right. From 768px the card's right
   edge and the photo's left edge slant in parallel (the seam interlocks). */
.qcard { position: relative; border: 1px solid var(--ink-strong); border-radius: 16px; }
.qcard-in {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
}
.qtext {
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.qwho { font-size: 15px; color: var(--ink-soft); }

.qmedia {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: 16px;
  overflow: hidden;
  background: var(--placeholder);
}
.qmedia img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* quote pics — one family (Max 2026-08-24, pick B from quote-pics-options.html + more grain):
   one warm grade pulls every slide photo into the same family; a dense grain layer sits above. */
.qmedia img { filter: saturate(.72) sepia(.16) contrast(1.03) brightness(1.02); }
.qmedia::after { content: ""; position: absolute; inset: 0; background: url("../assets/images/textures/grain-fine.png") repeat; background-size: 256px 256px; opacity: .4; pointer-events: none; }

@media (min-width: 768px) {
  .qslide { grid-template-columns: 38% 1fr; gap: 0; }
  .qcard {
    border: none;
    background: var(--ink-strong);   /* shows as the 1px outline around the inset face */
    clip-path: polygon(0 0, calc(100% - 110px) 0, 100% 100%, 0 100%);
  }
  .qcard-in {
    position: absolute;
    inset: 1px;
    border-radius: 15px;
    background: var(--bg);
    clip-path: polygon(0 0, calc(100% - 110px) 0, 100% 100%, 0 100%);
    padding: 32px 120px 32px 32px;
  }
  .qmedia {
    aspect-ratio: 4 / 3;
    margin-left: -96px;               /* 110px slant run minus the 14px seam gap */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 110px 100%);
  }
}
@media (min-width: 1024px) { .qtext { font-size: 26px; } }

/* the reference-measured rhythm (2026-07-27): 40px between item blocks, title 18px,
   desc 14px aligned to column left (dot edge), 12px title-to-desc, dot 10px */
.nav-links a.gitem, .capsec a.gitem { white-space: normal; display: block; padding: 20px 0; }
.gitem-name { display: flex; align-items: center; gap: 10px; font-size: 18px; line-height: 1.4; transition: color 0.2s ease; }
.gitem:hover .gitem-name { color: var(--ink-soft); }
.gitem-desc { display: block; font-size: 14px; color: var(--ink-soft); line-height: 1.4; margin-top: 12px; padding-left: 0; }

/* ---------- section pattern: full-bleed media hero (subpages) ---------- */
/* image covers the whole hero, edge to edge, flush under the nav; content
   sits on it bottom-left. --nav-h is set by js/main.js from the real nav. */
.hero-media {
  position: relative;
  margin-top: var(--nav-h, 80px);
  height: calc(100vh - var(--nav-h, 80px));
  height: calc(100svh - var(--nav-h, 80px));
  min-height: 480px;
  display: flex;
  align-items: flex-end;
  padding: 48px var(--pad-x);
  overflow: hidden;
}
.hero-media-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* soft light scrim from the lower-left keeps dark text readable on any image */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(75deg, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.5) 34%, rgba(255,255,255,0) 62%);
  pointer-events: none;
}
.hero-media-content { position: relative; z-index: 1; }
/* ai-enablement hero: sketch E on the dark ground (Max pick 2026-08-24, from enablement-hero-options.html) */
.hero-media--sketch { background: #1a1a1f; }
.hero-media--sketch::after { content: none; }
.hero-media--sketch .hero-media-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-media--sketch .hero-eyebrow { color: rgba(245,243,234,0.65); }
.hero-media--sketch .hero-title { color: #f5f3ea; }
.hero-media--sketch .hero-media-sub { color: rgba(245,243,234,0.78); }
.hero-media--sketch .btn-primary { background: #f5f3ea; color: #17171c; }
.hero-media--sketch .btn-primary:hover { background: #ffffff; }
.hero-media-content .hero-title { text-align: left; }
.hero-media-sub {
  max-width: 560px;
  margin: 12px 0 28px;
  font-size: 16px;
  line-height: 1.4;
}
@media (min-width: 1024px) { .hero-media-sub { font-size: 18px; } }

/* ---------- section pattern: CTA band (S-10) ---------- */
.ctaband { padding: 48px var(--pad-x) 56px; }
@media (min-width: 768px) { .ctaband { padding-block: 64px 72px; } }

.cta-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  color: #ffffff;
  background: var(--cta-orange);   /* Mistral-style CTA orange (Max 2026-07-24) */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  padding: 48px 24px;
}
/* min-width 0 + max-width: the 2.9 ratio times min-height 380 otherwise TRANSFERS into a hard
   1102px minimum width — the card refuses to shrink and drags a horizontal scroll below ~1150
   viewport (Max 2026-08-24). The ratio is preferred, never a floor. */
@media (min-width: 768px) { .cta-card { aspect-ratio: 2.9 / 1; min-height: 380px; min-width: 0; max-width: 100%; } }

.cta-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url("../assets/images/textures/noise.png");
  background-repeat: repeat;
  background-size: 160px 160px;
  mix-blend-mode: plus-lighter;
  pointer-events: none;
}
/* CTA card color variants (Max 2026-08-23, from cta-color-options.html): the grain layer is shared,
   only the ground changes — violet = the stack's top layer (customization), sand = the platform
   layer (agent-harness close, after nine coral cards; ink text + ink pill). Orange elsewhere. */
.cta-card.cta-violet { background: #6b3fe8; }
.cta-card.cta-sand { background: var(--sand); color: var(--ink-strong); }
.cta-card.cta-sand .btn-cta { background: var(--ink-strong); color: #ffffff; }
.cta-card.cta-sand .btn-cta:hover { background: var(--ink-strong-2); }
.cta-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
}
.cta-title {
  font-size: 36px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
@media (min-width: 1024px) { .cta-title { font-size: 56px; } }

/* ---------- footer (S-11) ---------- */
.footer {
  background: var(--ink-strong);
  color: #ffffff;
  padding: 44px var(--pad-x) 32px;
}
@media (min-width: 768px) { .footer { padding-top: 56px; } }

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.3fr 3fr; gap: 64px; } }

.footer-logo { display: inline-flex; align-items: center; gap: 9px; color: #ffffff; }
.footer-line { margin-top: 18px; font-size: 15px; color: rgba(255, 255, 255, 0.65); }
.footer-mail {
  display: inline-block;
  margin-top: 8px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.65);
  transition: color 0.2s ease;
}
.footer-mail:hover { color: #ffffff; }

.footer-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 24px;
}
@media (min-width: 768px) { .footer-cols { grid-template-columns: repeat(4, 1fr); } }

.footer-head { font-size: 18px; letter-spacing: -0.01em; margin-bottom: 18px; }
.footer-cat {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
  margin: 0 0 8px;
}
.footer-link + .footer-cat { margin-top: 26px; }
.footer-tail { margin-top: 26px; }
.footer-link .gitem-new { font-size: 8.5px; padding: 2px 5px; border-radius: 4px; margin-left: 8px; vertical-align: 1px; color: var(--accent); background: rgba(255, 119, 89, 0.14); }
.footer-link {
  display: block;
  padding: 6px 0;
  font-size: 14px;
  color: #fafafa;
  transition: color 0.2s ease;
}
.footer-link:hover { color: #ffffff; }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 72px;
}
.footer-copy { display: flex; align-items: center; gap: 9px; font-size: 13px; color: rgba(255, 255, 255, 0.45); }
.footer-copy .logo-mark { width: 13px; height: auto; }
.footer-social { display: flex; align-items: center; gap: 20px; }
.footer-social a { color: rgba(255, 255, 255, 0.45); transition: color 0.2s ease; display: block; }
.footer-social a:hover { color: #ffffff; }

.footer-news { margin: 0 0 48px; max-width: 340px; }
.footer-news-lead { font-size: 18px; line-height: 1.4; color: #ffffff; }
.footer-news-accent {
  background: linear-gradient(90deg, var(--coral), #e0748f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.footer-news-note { margin: 9px 0 0; font-size: 12px; line-height: 1.4; color: rgba(255, 255, 255, 0.55); }
.footer-news-form { width: 100%; }
.footer-news-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 37px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  transition: border-color 0.2s ease;
}
.footer-news-row:focus-within { border-color: #ffffff; }
.footer-news-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  padding: 10px 0 10px 12px;
  font: inherit;
  font-size: 14px;
  color: #ffffff;
}
.footer-news-input::placeholder { color: rgba(255, 255, 255, 0.45); }
.footer-news-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.65);
  font-size: 16px;
  padding: 6px 0 6px 6px;
  transition: color 0.2s ease;
}
.footer-news-btn:hover { color: #ffffff; }
.footer-news-btn:disabled { opacity: 0.4; cursor: default; }
.footer-news-status { margin-top: 10px; font-size: 12.5px; color: rgba(255, 255, 255, 0.45); }

/* ---------- section pattern: split section head (title left, lead right) ---------- */
.secblock { padding: 72px var(--pad-x) 80px; }
@media (min-width: 768px) { .secblock { padding-block: 104px 112px; } }

.sechead {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px 48px;
  align-items: start;
  margin-bottom: 40px;
}
@media (min-width: 1024px) { .sechead { grid-template-columns: 1.4fr 1fr; margin-bottom: 56px; } }
.sechead-title {
  font-size: 36px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
@media (min-width: 1024px) { .sechead-title { font-size: 56px; } }
.sechead-lead { font-size: 16px; line-height: 1.45; max-width: 520px; }
@media (min-width: 1024px) { .sechead-lead { justify-self: end; } }

/* ---------- section pattern: photo pair (wide shot + square accent) ---------- */
.photopair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 768px) { .photopair { grid-template-columns: 2.06fr 1fr; gap: 24px; } }
.photopair figure {
  border-radius: 12px;
  overflow: hidden;
  background: var(--placeholder);
}
.photopair-wide { aspect-ratio: 1278 / 680; }
.photopair-side { aspect-ratio: 620 / 680; }
.photopair-sketch svg { width: 100%; height: 100%; display: block; }
/* event-card strip overlay (Max 2026-08-24): a banner layered on the top-right corner, 75% width */
.card-media { position: relative; }
.card-media img.card-media-strip { position: absolute; top: 0; left: 0; right: auto; width: 75%; height: auto; border-radius: 0 0 8px 0; box-shadow: 0 10px 26px -12px rgba(0,0,0,0.45); }
@media (min-width: 768px) { .photopair-side { aspect-ratio: auto; height: 100%; } }
.photopair img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- concept glyphs + agent ring (audience pages, 2026-08-23) ----------
   Max: "conceptually things like this [the dotted document stack] that fit the subpoints" — the
   .tabshow-deco grammar (dotted stroke, 260x200) promoted to a slot filler: one glyph per tab /
   per accordion sub-point, drawn by js/concepts.js from ONE map. Motion = two simple things:
   the parts rise in one after another when the slot is first seen or the item switches
   (--i from the script, 110ms apart), and the dotted outline flows slowly (stroke-dashoffset,
   one period per 1.8s) so the drawing is alive without doing anything. */
.concept-fig { position: relative; }
.concept { position: absolute; inset: 0; display: grid; place-items: center; color: var(--accent);
  opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s linear 0.3s; }
.concept.active { opacity: 1; visibility: visible; transition: opacity 0.3s ease 0.05s; }
.concept svg { width: var(--concept-w, 42%); height: auto; display: block; overflow: visible; }
.concept svg > * { opacity: 0; transform: translateY(8px);
  transition: opacity 0.6s cubic-bezier(0, 0, 0.2, 1) calc(var(--i, 0) * 110ms), transform 0.6s cubic-bezier(0, 0, 0.2, 1) calc(var(--i, 0) * 110ms);
  animation: concept-flow 1.8s linear infinite; }
.concept-fig.in .concept.active svg > * { opacity: 1; transform: none; }
@keyframes concept-flow { to { stroke-dashoffset: -7.1; } }
/* slots */
.tabshow-shot.concept-fig { --concept-w: 50%; }
.band-panel.concept-fig { --concept-w: 78%; padding: 0; background: transparent; }   /* no box: the glyph alone on the band (Max 2026-08-23) */
.band-panel .concept { color: var(--band-accent); }

/* agent ring: the Agents picture behind, every team the page covers in a circle (chips from the
   page's own team list, dot colours from the Agents menu; js/concepts.js). Chips rise in clockwise. */
.agentring-fig { position: relative; }
/* ground = the studio scenes' light mesh (bg-mesh + grain recipe), tinted by the page's audience colour like the
   capability scenes (Max 2026-08-23: "the same background as the visualizations, depending on the theme colour") */
figure.agentring-fig, .agentring-fig {   /* beats .photopair figure's placeholder ground */
  background:
    radial-gradient(42% 52% at 18% 22%, var(--mesh-a), transparent 70%),
    radial-gradient(50% 60% at 82% 18%, var(--mesh-b), transparent 70%),
    radial-gradient(56% 64% at 55% 88%, var(--mesh-c), transparent 72%),
    #ffffff;
}
.agentring-fig::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay; background-size: 160px 160px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.tint-blue   { --mesh-a: rgba(76,110,230,.22);  --mesh-b: rgba(143,168,242,.24); --mesh-c: rgba(76,110,230,.08); }
.tint-violet { --mesh-a: rgba(139,92,246,.20);  --mesh-b: rgba(181,163,245,.24); --mesh-c: rgba(139,92,246,.08); }
.tint-coral  { --mesh-a: rgba(255,119,89,.20);  --mesh-b: rgba(255,196,160,.22); --mesh-c: rgba(255,119,89,.08); }
.tint-green  { --mesh-a: rgba(46,158,107,.18);  --mesh-b: rgba(127,214,168,.24); --mesh-c: rgba(46,158,107,.07); }
.agentring { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; }
.agentring-orbit { position: relative; height: 64%; aspect-ratio: 1 / 1; }
/* the ring itself: a dotted circle (the pages' dotted-stroke language) turning slowly while the chips hold still
   (Max 2026-08-23: "let the circle connecting the agents animate rotating with agents stable") */
.agentring-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: agentring-turn 80s linear infinite; transform-origin: 50% 50%; }
.agentring-ring circle { fill: none; stroke: rgba(23,23,28,0.38); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 0.1 7; vector-effect: non-scaling-stroke; }
@keyframes agentring-turn { to { transform: rotate(360deg); } }
/* full-width solo panel (the side photo is gone, Max 2026-08-23) */
.photopair.photopair-solo { grid-template-columns: 1fr; }
.photopair-solo .photopair-wide { aspect-ratio: 2.44 / 1; }
@media (max-width: 767px) { .photopair-solo .photopair-wide { aspect-ratio: 16 / 10; } }
.agentring-chip {
  position: absolute; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 9px 16px; border-radius: 9999px; color: var(--ink-strong); font-size: 15px; line-height: 1; text-decoration: none;
  background: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.8);
  box-shadow: 0 10px 26px -14px rgba(23,23,28,0.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  transform: translate(-50%, -50%) translateY(10px); opacity: 0;
  transition: opacity 0.6s cubic-bezier(0, 0, 0.2, 1) calc(var(--i, 0) * 70ms), transform 0.6s cubic-bezier(0, 0, 0.2, 1) calc(var(--i, 0) * 70ms), background 0.2s ease;
}
.agentring-chip:hover { background: rgba(255,255,255,0.9); }
.agentring-chip .pitem-dot { width: 8px; height: 8px; }
.agentring-fig.in .agentring-chip { opacity: 1; transform: translate(-50%, -50%); }
@media (max-width: 767px) {   /* too little room for a ring: the same chips, wrapped in the middle */
  .agentring-orbit { position: static; height: auto; aspect-ratio: auto; border: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0 20px; }
  .agentring-chip { position: static !important; font-size: 13px; padding: 7px 12px; transform: translateY(10px); }
  .agentring-fig.in .agentring-chip { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .concept svg > * { animation: none; transition: none; opacity: 1; transform: none; }
  .agentring-chip { transition: none; opacity: 1; transform: translate(-50%, -50%); }
  .agentring-ring { animation: none; }
}

/* ---------- section pattern: numbered row list ---------- */
.rowlist { margin-top: 64px; }
.rowlist-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px 32px;
  padding: 24px 0;
  border-top: 1px solid #e0e0e0;
}
.rowlist-item:last-child { border-bottom: 1px solid #e0e0e0; }
@media (min-width: 768px) {
  .rowlist-item { grid-template-columns: 64px 1.1fr 1fr; padding: 32px 0; }
}
.rowlist-num {
  font-size: 13px;
  font-weight: 200;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  padding-top: 5px;
}
.rowlist-title {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
@media (min-width: 1024px) { .rowlist-title { font-size: 22px; } }
.rowlist-desc { font-size: 15px; line-height: 1.45; color: var(--ink-soft); max-width: 52ch; }
@media (min-width: 768px) { .rowlist-desc { padding-top: 4px; } }

/* ---------- section pattern: facts strip (columned key facts between hairlines) ---------- */
.factsrow {
  margin-top: 72px;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px 24px;
  padding: 40px 0 48px;
}
@media (min-width: 768px) { .factsrow { grid-template-columns: repeat(4, 1fr); } }
.facts-label {
  font-size: 13px;
  font-weight: 200;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.facts-col p { font-size: 16px; line-height: 1.45; max-width: 30ch; }
.facts-col ul { list-style: disc; padding-left: 18px; }
.facts-col li { font-size: 16px; line-height: 1.45; margin-bottom: 8px; max-width: 28ch; }
.facts-col li:last-child { margin-bottom: 0; }

/* ---------- section pattern: category cards (image, tag pills, title) ---------- */
.catgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px 24px;
}
@media (min-width: 768px) { .catgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .catgrid { grid-template-columns: repeat(4, 1fr); } }
.catcard-media {
  aspect-ratio: 620 / 350;
  border-radius: 12px;
  overflow: hidden;
  background: var(--placeholder);
  margin-bottom: 20px;
}
.catcard-media img { width: 100%; height: 100%; object-fit: cover; }
.catcard-media .catsketch { width: 100%; height: 100%; display: block; background: #1a1a1f; }
.catcard-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.catcard-pill {
  font-size: 13px;
  line-height: 1;
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 7px 13px;
}
.catcard-title {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.01em;
  max-width: 24ch;
}
/* who runs it — small round chips at the right end of the pills row */
.catcard-pills { align-items: center; }
.catcard-people { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.catcard-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
}
.catcard-avatar-logo { object-fit: contain; padding: 3px; }

/* ---------- section pattern: statement (one-screen pause, big centered lines drop in) ---------- */
.statement {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px var(--pad-x);
}
.statement-text {
  font-size: clamp(30px, 4.4vw, 62px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-align: center;
}
/* each line is a mask; its inner drops down into place, staggered top-to-bottom */
.rl-line { display: block; overflow: hidden; padding-block: 0.06em; }
.rl-inner {
  display: block;
  transform: translateY(-115%);
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.statement.inview .rl-inner { transform: translateY(0); }
/* optional link under the statement (data-security → Trust Center, Max 2026-08-23): rises after the lines land */
.statement { flex-direction: column; gap: 32px; }
.statement .statement-link { margin-top: 0; opacity: 0; transform: translateY(14px); transition: opacity .5s ease-in-out .5s, transform .5s ease-in-out .5s; }
.statement.inview .statement-link { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .statement-link { opacity: 1; transform: none; transition: none; } }
.rl-line:nth-child(2) .rl-inner { transition-delay: 0.14s; }
.rl-line:nth-child(3) .rl-inner { transition-delay: 0.28s; }
.rl-line:nth-child(4) .rl-inner { transition-delay: 0.42s; }

/* clickable menu thumbs (JS marks columns that have a target page) */
.fcol-thumb-link { cursor: pointer; }
.fcol-thumb-link img { transition: transform 0.3s ease; }
@media (hover: hover) { .fcol-thumb-link:hover img { transform: scale(1.04); } }

/* download link under a section (shareable one-pager) */
.dl-link { margin-top: 40px; }
.dl-link:hover .panel-arrow { transform: translateY(3px); }

/* ---------- pattern: file card (downloadable one-pager as an object) ---------- */
.filecard {
  display: flex; align-items: center; gap: 18px;
  max-width: 480px; margin-top: 40px; padding: 18px 20px;
  border: 1px solid var(--hairline); border-radius: 12px;
  transition: border-color 0.3s ease;
}
.filecard:hover { border-color: #e6e6e6; }
.filecard-ico { width: 34px; height: 34px; flex: none; color: var(--accent); }
.filecard-body { flex: 1 1 auto; min-width: 0; }
.filecard-title { display: block; font-size: 15.5px; font-weight: 500; line-height: 1.3; }
.filecard-meta { display: block; font-size: 13px; color: var(--ink-soft); margin-top: 4px; }
.filecard-go {
  flex: none; width: 34px; height: 34px; border-radius: 9999px;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.filecard-go svg { width: 16px; height: 16px; display: block; transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); }
.filecard:hover .filecard-go { background: var(--accent); color: #ffffff; }
.filecard:hover .filecard-go svg { transform: translateY(2px); }

/* ---------- sign-up modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(23, 23, 28, 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: var(--pad-x);
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal {
  position: relative;
  width: 100%; max-width: 440px; max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--bg); border-radius: 16px;
  transform: translateY(8px); transition: transform 0.25s ease;
}
.modal-overlay.open .modal { transform: translateY(0); }
.modal-body { padding: 36px 32px 32px; }
.modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px; border: 0; border-radius: 9999px;
  background: transparent; color: var(--ink-soft);
  font-size: 22px; line-height: 1; cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.modal-close:hover { background: var(--hairline); color: var(--ink-strong); }
.modal-title { font-size: 24px; font-weight: 500; letter-spacing: -0.01em; }
.modal-event { font-size: 14px; color: var(--ink-soft); margin-top: 6px; }
.modal-form { margin-top: 24px; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.field { display: block; margin-bottom: 16px; }
.field-label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.field-label em { font-style: normal; font-weight: 400; color: var(--ink-soft); }
.field input, .field textarea {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink);
  border: 1px solid #e2e2e2; border-radius: 8px;
  padding: 10px 12px; background: var(--bg);
  transition: border-color 0.2s ease;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink-strong); }
.field textarea { resize: vertical; min-height: 72px; }
.form-error { font-size: 13.5px; color: var(--accent-strong); margin-bottom: 14px; }
.modal-submit { width: 100%; padding: 12px 24px; font-size: 15px; border: 0; }
.modal-done-lead { font-size: 15.5px; font-weight: 500; margin-top: 20px; }
.modal-done-text { font-size: 14.5px; color: var(--ink-soft); margin-top: 6px; line-height: 1.5; }

/* event-card foot actions: share icons + arrow on the reserve line */
.card-foot-actions { display: inline-flex; align-items: center; gap: 14px; }
.card-ico {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-soft);
  transition: color 0.2s ease;
}
.card-ico svg { width: 17px; height: 17px; display: block; }
.card-ico:hover { color: var(--ink-strong); }
.card-ico .ico-check { display: none; }
.card-ico.copied .ico-link { display: none; }
.card-ico.copied .ico-check { display: block; }

/* anchor targets scroll clear of the fixed nav */
[id] { scroll-margin-top: calc(var(--nav-h, 76px) + 8px); }

/* event-card picture links to the service page behind it (design #9) */
.card-media-link { overflow: hidden; }
.card-media-link img { transition: transform 0.3s ease; }
/* hover-only devices: a touch tap leaves :hover stuck, so phones get no zoom/lift at all */
@media (hover: hover) {
  .card-media-link:hover img, .card-linked:hover .card-media img { transform: scale(1.04); }
  .card-linked:hover .card-media img.card-media-strip { transform: none; }   /* the layered strip holds still */
}

/* linked event card: subtle whole-card accent, arrow as its affordance */
.card-linked { cursor: pointer; transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); }
@media (hover: hover) { .card-linked:hover { transform: translateY(-4px); } }
/* the track scroll-clips vertically — give the lift invisible headroom */
.cardrow-track { padding-top: 6px; margin-top: -6px; }

/* ---------- pattern: tabbed showcase (pill switcher + text/screenshot panels) ---------- */
.threeup-after-media { margin-top: 64px; }
.tabshow-pills { display: flex; justify-content: center; margin: 48px 0 56px; }
.pillbar {
  display: inline-flex; flex-wrap: nowrap; max-width: 100%; overflow-x: auto;
  background: #f5f5f5; border-radius: 9999px; padding: 5px;
  scrollbar-width: none;
}
.pillbar::-webkit-scrollbar { display: none; }
.pillbar { position: relative; }
/* the dark pill is ONE sliding thumb behind the labels (ref: the reference tab switch) */
.pillbar-thumb {
  position: absolute; top: 5px; left: 0; height: calc(100% - 10px);
  background: var(--ink-strong); border-radius: 9999px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.pill {
  position: relative; z-index: 1;
  border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 15px; color: var(--ink);
  padding: 10px 24px; border-radius: 9999px; white-space: nowrap;
  transition: color 0.2s ease;
}
.pill.active { color: #ffffff; }
/* panels stack in one grid cell so the section keeps ONE height across tabs */
.tabshow-panels { display: grid; }
.tabshow-panel {
  grid-area: 1 / 1;
  display: grid; gap: 32px; align-items: start;
  visibility: hidden; opacity: 0; transition: opacity 0.3s ease;
}
.tabshow-left { display: flex; flex-direction: column; }
.tabshow-deco { margin-top: 56px; width: min(260px, 60%); height: auto; color: var(--accent); }
.tabshow-panel.active { visibility: visible; opacity: 1; }
@media (min-width: 1024px) { .tabshow-panel { grid-template-columns: 1fr 1.4fr; gap: 64px; } }
.tabshow-text {
  font-size: 24px; font-weight: 300; line-height: 1.35; letter-spacing: -0.01em;
  max-width: 560px;
}
@media (min-width: 1024px) { .tabshow-text { font-size: 28px; } }
.tabshow-shot {
  background: var(--placeholder); border-radius: var(--radius-media);
  aspect-ratio: 16 / 10; overflow: hidden;
}
.tabshow-shot img { width: 100%; height: 100%; object-fit: cover; }
.tabshow-shot iframe { width: 100%; height: 100%; border: 0; display: block; }

/* full-width live scene board (tp-warehouse landscape): pills on top, then the
   per-tab lede row -- general text left, circle checkmarks right -- then the board;
   the pills post their key into the scene iframe, which highlights the matching
   nodes and connections */
.scenemap { position: relative; aspect-ratio: 1440 / 600; background: #0e0e12; border-radius: var(--radius-media); overflow: hidden; }
.scenemap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.tabshow-scene .tabshow-pills { margin: 0 0 40px; }
.scenemap-lede { margin-bottom: 48px; }
.scenemap-lede .tabshow-text { font-size: 22px; }
@media (min-width: 1024px) {
  .scenemap-lede .tabshow-panel { grid-template-columns: 1.3fr 1fr; }
  .scenemap-lede .tabshow-text { font-size: 24px; }
}
.scenemap-lede .checklist { gap: 14px; margin-top: 4px; justify-self: end; }
.scenemap-lede .checklist li { font-size: 15px; line-height: 1.45; }
.scenemap-lede .checklist svg { width: 18px; height: 18px; margin-top: 2px; }

/* ---------- pattern: CTA + inline form (dark band, copy left, form card right) ---------- */
.ctaform { background: var(--cta-orange); color: #ffffff; padding: 72px var(--pad-x) 80px; position: relative; }
.ctaform::before { content: ""; position: absolute; inset: 0; background-image: url("../assets/images/textures/noise.png"); background-repeat: repeat; background-size: 160px 160px; mix-blend-mode: plus-lighter; pointer-events: none; }
.ctaform > * { position: relative; }
@media (min-width: 768px) { .ctaform { padding-block: 104px 112px; } }
.ctaform-grid { display: grid; gap: 48px; }
@media (min-width: 1024px) { .ctaform-grid { grid-template-columns: 1fr 1fr; gap: 96px; align-items: start; } }
.ctaform-title { font-size: 36px; font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; }
@media (min-width: 1024px) { .ctaform-title { font-size: 56px; max-width: 480px; } }
.ctaform-sub { font-size: 16px; line-height: 1.5; margin-top: 20px; max-width: 480px; color: rgba(255, 255, 255, 0.85); }
@media (min-width: 1024px) { .ctaform-sub { font-size: 18px; } }
.ctaform-points { margin-top: 32px; display: grid; gap: 16px; }
.ctaform-points li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.45; }
.ctaform-points svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.ctaform-card {
  background: var(--bg); color: var(--ink);
  border-radius: 16px; padding: 32px 28px;
  max-width: 560px; width: 100%;
}
@media (min-width: 1024px) { .ctaform-card { justify-self: end; padding: 36px 32px; } }
.ctaform-row { display: grid; gap: 0; }
@media (min-width: 640px) { .ctaform-row { grid-template-columns: 1fr 1fr; gap: 16px; } }
.ctaform-submit { width: 100%; padding: 12px 24px; font-size: 15px; border: 0; }

/* ---------- pattern: full photo + headline/checklist split (ref the reference solutions pages) ---------- */
.fullphoto {
  background: var(--placeholder); border-radius: var(--radius-media);
  aspect-ratio: 2.35 / 1; overflow: hidden;
}
.fullphoto img { width: 100%; height: 100%; object-fit: cover; }
.checksplit { display: grid; gap: 40px; margin-top: 64px; }
@media (min-width: 1024px) { .checksplit { grid-template-columns: 1fr 1fr; gap: 96px; } }
.checksplit-title {
  font-size: 36px; font-weight: 400; line-height: 1.05; letter-spacing: -0.02em;
  margin-top: 14px; max-width: 480px;
}
@media (min-width: 1024px) { .checksplit-title { font-size: 56px; } }
.checklist { display: grid; gap: 22px; align-content: start; }
.checklist li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.5; }
@media (min-width: 1024px) { .checklist li { font-size: 17px; } }
.checklist svg { width: 20px; height: 20px; flex: none; margin-top: 3px; }
.checklist strong { font-weight: 500; }

/* full-width ambient video (autoplay muted loop), same media treatment as photos */
.fullvideo {
  background: var(--placeholder); border-radius: var(--radius-media);
  aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: 48px;
}
@media (min-width: 1024px) { .fullvideo { aspect-ratio: 2.35 / 1; } }
.fullvideo { position: relative; }
.fullvideo video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- pattern: alternating feature-split (process steps; ref the reference /customization) ---------- */
.featsplit {
  display: grid; gap: 32px; align-items: center;
  margin-top: 72px;
}
.featsplit:first-of-type { margin-top: 56px; }
@media (min-width: 1024px) {
  /* equal halves + wide central air (measured the reference /rerank: w-1/2 columns, 128px gap on a
     1345px row ≈ 9.5%) — alternating media never crosses the centerline */
  .featsplit { grid-template-columns: 1fr 1fr; gap: clamp(96px, 9.5%, 180px); }
  .featsplit-rev .featsplit-media { order: 2; }
}
.featsplit-media {
  background: var(--placeholder); border-radius: var(--radius-media);
  aspect-ratio: 620 / 440; overflow: hidden;
}
.featsplit-media img { width: 100%; height: 100%; object-fit: cover; }
/* live scene embeds in a featsplit row (homepage team scenes reused on solutions pages) */
.featsplit-media iframe { width: 100%; height: 100%; border: 0; display: block; pointer-events: none; }
.featsplit-title { font-size: 26px; font-weight: 400; letter-spacing: -0.01em; margin-top: 10px; }
@media (min-width: 1024px) { .featsplit-title { font-size: 32px; } }
.featsplit-text { font-size: 16px; line-height: 1.55; margin-top: 14px; max-width: 480px; }
@media (min-width: 1024px) { .featsplit-text { font-size: 17px; } }

/* compact checklist variant for accordion bodies */
.checklist-compact { gap: 12px; margin-top: 16px; }
.checklist-compact li { font-size: 15px; }
.checklist-compact svg { width: 18px; height: 18px; margin-top: 2px; }

/* Resources panel (two headed link columns + feature card, ref the reference).
   Geometry locked to the Academy/Solutions panels: rescard never shrinks (full 330px)
   and vertical padding 20/17 lands the panel at the same 369px height. */
.panel-groups { display: flex; gap: 32px; justify-content: space-between; padding: 20px 24px 17px; width: 1000px; }  /* side padding = the base .panel 24px (Max 2026-08-19: all menu panels share one margin) */
.panel-groups .fcol { min-width: 250px; }
.panel-groups .rescard { flex: 0 0 330px; }
/* single-link-column variant (Company): one fcol at column width + the rescard pic beside it */
.panel-groups.pg-solo { width: auto; gap: 45px; }
.panel-groups.pg-solo .fcol { width: 279px; min-width: 0; }
.nav-links .panel-groups a.gitem { padding: 13px 0; }
.panel-groups .gitem-name { font-weight: 400; }
.panel-groups .pitem-dot { display: none; }
.panel-groups .fcol-header { margin-bottom: 10px; }
.rescard { position: relative; display: block; width: 330px; min-height: 330px; border-radius: 16px; overflow: hidden; background: var(--ink); }
.rescard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rescard-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 16px; display: block; white-space: normal; background: linear-gradient(transparent, rgba(10, 10, 12, 0.72)); color: #fff; }
.rescard-title { display: flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 500; }
.rescard-title .panel-arrow { transition: transform 0.25s ease; }
.rescard:hover .rescard-title .panel-arrow { transform: translateX(4px); }
.rescard-desc { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.82); }

/* audience-flagged view of shared pages (?for=tax-agencies) */
html[data-audience="tax-agencies"] #solutions { display: none; }
html[data-audience="tax-agencies"] .ms-clause { display: none; }

/* Agents > Work menu: centered wheel + radial output pills + areas list (our pattern) */
.fuse-grid.scopewheel.active { display: block; height: 100%; }
.warea { position: absolute; left: 40px; top: 50%; transform: translateY(-50%); width: 150px; }
.warea .fcol-header { margin-bottom: 8px; }
.nav-links .warea a.gitem, .capsec .warea a.gitem { padding: 8px 0; }
.nav-links .warea a.gitem::after, .capsec .warea a.gitem::after { display: none; }
.scope-mlist { display: none; }
.wstage { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 700px; height: 500px; }
.wwheel { position: absolute; left: 165px; top: 65px; width: 370px; height: 370px; }
.wedge { cursor: pointer; transition: opacity 0.25s ease; }
.wlabel { pointer-events: none; font-family: var(--ff, "Graphik", ui-sans-serif, system-ui, sans-serif); transition: opacity 0.25s ease; }
.opill { display: inline-block; font-size: 11.5px; line-height: 1; padding: 5px 9px; border: 1px solid var(--hairline); border-radius: 7px; color: var(--ink-soft); white-space: nowrap; transition: border-color 0.2s ease, color 0.2s ease, opacity 0.25s ease; }
.wpill, .nav-links a.wpill { position: absolute; font-size: 11.5px; padding: 5px 9px; }
.nav-links a.wpill::after { display: none; }
a.opill:hover { border-color: var(--ink-soft); color: var(--ink); }
.scopewheel.filtered .wedge:not(.on), .scopewheel.filtered .wlabel:not(.on) { opacity: 0.25; }
.scopewheel.filtered .wpill:not(.on) { opacity: 0.3; }
.scopewheel.filtered .warea .gitem:not(.on) { opacity: 0.35; }
.warea .gitem.on .gitem-name, .wpill.on { color: var(--ink); }
.wpill.on { border-color: var(--ink-strong); }
.dot-green { background: #2e9e6b; }

/* Agents-at-Work page: cycle overview + phase deep links (our own pattern) */
.workov { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.workov > * { min-width: 0; }
.workov-fig { margin: 0; display: flex; justify-content: center; }
.workov-fig img { width: min(400px, 100%); height: auto; }
.workov-areas { border-bottom: 1px solid var(--hairline); padding-bottom: 18px; margin-bottom: 18px; grid-column: auto; grid-row: auto; flex-wrap: wrap; }
.workov .scope-areas .gitem { text-decoration: none; }
.worklist { list-style: none; margin: 0; padding: 0; }
.worklist li a { display: flex; align-items: center; gap: 14px; padding: 9px 0; font-size: 16.5px; transition: color 0.2s ease; }
.worklist li a:hover { color: var(--ink-soft); }
.wnum { font-size: 11px; letter-spacing: 0.08em; color: var(--ink-soft); }
.phase { scroll-margin-top: calc(var(--nav-h, 76px) + 24px); transition: opacity 0.3s ease; }
.workfiltered .phase:not(.phase-hl) { opacity: 0.35; }
.dchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.dchip { scroll-margin-top: calc(var(--nav-h, 76px) + 140px); }
.dchip:target { animation: dflash 1.6s ease 0.3s 2; }
@keyframes dflash { 0%, 100% { border-color: var(--hairline); color: var(--ink-soft); } 50% { border-color: var(--accent, #e0653a); color: var(--ink); } }
@media (max-width: 900px) { .workov { grid-template-columns: 1fr; gap: 32px; } }

/* Agents > Expertise: tile carpet (our pattern, ref treemap) */
.fuse-grid.expcarpet.active { display: flex; flex-direction: column; gap: 20px; height: 100%; }
.expcarpet .tbox { display: flex; flex-direction: column; min-height: 0; }
.expcarpet .tbox { flex: 2 1 0; }
.expcarpet .tbox:nth-child(3) { flex: 3.4 1 0; }
.expcarpet .tbox:nth-child(4) { flex: 1.3 1 0; }
.expcarpet .tbox:nth-child(5) { flex: 1.3 1 0; }
.expcarpet .tbox-fixed { flex: 0 0 auto; }
.expcarpet .tbox-fixed .krow { height: 56px; flex: 0 0 auto; }
.expcarpet .fcol-header { margin-bottom: 9px; }
.carpetbox { display: flex; flex-direction: column; gap: 2px; border-radius: 6px; overflow: hidden; flex: 1; min-height: 0; }
.krow { display: flex; gap: 2px; flex: 1; min-height: 0; }
.nav-links .expcarpet a.gitem, .capsec .expcarpet a.gitem { flex: 1 1 auto; min-width: 0; overflow: hidden; padding: 0 13px; display: flex; align-items: center; white-space: nowrap; transition: filter 0.15s ease; }
.nav-links .expcarpet a.gitem::after, .capsec .expcarpet a.gitem::after { display: none; }
.expcarpet .gitem-name { font-size: 13.5px; line-height: 1.25; }
.nav-links .expcarpet a.gitem:hover { filter: brightness(0.94); }
.expcarpet .tbox:nth-child(3) .gitem-name { font-size: 13px; }
.exp-b { background: #d6ddf7; }
.exp-g { background: #d9eee3; }
.exp-v { background: #e2d7fb; }
.exp-c { background: #ffd9cf; }
.exp-s { background: #f2e8d5; }

.taskexec { padding: 72px var(--pad-x) 8px; }

/* Regulations section on /agents/work/ (map moved out of the menu 2026-07-24) */
.regsec { padding: 72px var(--pad-x) 80px; }
.regchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.regchip { font-size: 13px; color: var(--ink-soft); border: 1px solid #d9d9de; border-radius: 999px; padding: 6px 14px; }
.regmap { height: 520px; margin-top: 30px; }

/* Localization map (static SVG, lazy-injected; hover highlights country) */
.mapwrap { position: relative; flex: 1; min-height: 0; margin-top: 18px; }
.mapwrap svg { width: 100%; height: 100%; display: block; }
.mapwrap svg path { fill: #eae8e3; stroke: #ffffff; stroke-width: 0.6; transition: fill 0.15s ease; cursor: default; }
.mapwrap svg path:hover { fill: var(--coral); }
.maplabel { position: absolute; left: 4px; bottom: 2px; margin: 0; font-size: 13px; color: var(--ink-soft); min-height: 18px; pointer-events: none; }


/* ---------- page: AI enablement planner ---------- */
/* first text-plate page opener: clear the fixed nav explicitly (heroes do this themselves) */
.plpage { padding-top: calc(var(--nav-h, 76px) + 36px); }
@media (min-width: 768px) { .plpage { padding-top: calc(var(--nav-h, 76px) + 48px); } }
.plpage .pl-wrap { max-width: 1360px; margin: 0 auto; }
  /* ---------- header: centered title + lead + audience pillbar (site grammar) ---------- */
  .pl-eyebrow { font-size:11px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--ink-soft); font-weight:500; margin:0 0 10px; }
  /* ---------- two sides; both top strips share one 48px axis ---------- */
  .pl-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px;
    align-items:start; }
  /* ---------- left: step tabs + one question ---------- */
  .pl-steps { display:flex; gap:24px; height:48px; border-bottom:1px solid var(--hairline);
    margin-bottom:28px; }
  .pl-step { position:relative; display:flex; align-items:center; gap:7px; height:100%;
    padding:0 2px; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
    font-weight:500; color:var(--ink-soft); border:0; background:none; font-family:var(--ff);
    cursor:pointer; }
  .pl-step .n { font-size:10.5px; }
  .pl-step.cur { color:var(--ink-strong); }
  .pl-step.cur::after { content:""; position:absolute; left:0; right:0; bottom:-1px;
    height:2px; background:var(--grad-underline); }
  .pl-step.done { color:var(--ink); }
  .pl-step.done .n { display:none; }
  .pl-step.done::before { content:""; width:12px; height:12px; flex:none;
    background:var(--ink-strong);
    -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="black" d="M6.4 12.1 2.6 8.3l1.2-1.2 2.6 2.6 5.8-5.8 1.2 1.2z"/></svg>') center/contain no-repeat;
            mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="black" d="M6.4 12.1 2.6 8.3l1.2-1.2 2.6 2.6 5.8-5.8 1.2 1.2z"/></svg>') center/contain no-repeat; }
  .pl-step.lock { opacity:.4; cursor:default; }
  .pl-q-title { font-size:20px; font-weight:500; color:var(--ink-strong); margin:0 0 6px;
    letter-spacing:-.005em; }
  .pl-q-lead { font-size:13.5px; color:var(--ink-soft); margin:0 0 20px; }
  .pl-opts { display:flex; flex-direction:column; gap:10px; }
  .pl-opt { display:flex; align-items:center; justify-content:space-between; gap:16px;
    text-align:left; border:1px solid var(--hairline); border-radius:12px; background:#fff;
    padding:15px 18px; cursor:pointer; font-family:var(--ff);
    transition:border-color .15s, background .15s, transform .15s; }
  @media (hover: hover) { .pl-opt:hover { border-color:#d9d9de; transform:translateY(-1px); } }
  .pl-opt.on { border-color:var(--ink-strong); background:#fafafa; }
  .pl-opt-t { font-size:15px; font-weight:500; color:var(--ink-strong); margin:0; }
  .pl-opt-d { font-size:13px; color:var(--ink-soft); margin:2px 0 0; }
  .pl-opt-dot { flex:none; width:18px; height:18px; border-radius:50%;
    border:1.5px solid #d9d9de; transition:border-color .15s, background .15s; }
  .pl-opt.on .pl-opt-dot { border-color:var(--ink-strong); background:var(--ink-strong);
    box-shadow:inset 0 0 0 3.5px #fafafa; }
  .pl-back { margin-top:22px; border:0; background:none; font-family:var(--ff);
    font-size:12.5px; color:var(--ink-soft); cursor:pointer; padding:0; }
  .pl-back:hover { color:var(--ink-strong); }
  .pl-back[hidden] { display:none; }
  /* ---------- right: the plan, fixed anatomy, fills layer by layer ---------- */
  .pl-plan { border:1px solid var(--hairline); border-radius:14px; background:#fff;
    overflow:hidden; }
  .pl-plan-head { display:flex; align-items:center; justify-content:space-between;
    height:47px; padding:0 26px; border-bottom:1px solid var(--hairline); background:#fafafa; }
  .pl-plan-head .pl-eyebrow { margin:0; color:var(--ink); font-size:11.5px;
    letter-spacing:.08em; }
  .pl-count { font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--ink-soft); }
  .pl-layer { padding:24px 26px; }
  .pl-layer:empty { display:none; }
  .pl-layer + .pl-layer { border-top:1px solid var(--hairline); }
  .pl-label { font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--ink-soft); font-weight:500; margin:0 0 14px; }
  .pl-ghost { border:1px dashed #dcdce0; border-radius:10px; padding:20px 18px;
    font-size:13px; color:#b4b4ba; text-align:center; }
  .pl-card-t { font-size:25px; font-weight:500; color:var(--ink-strong);
    letter-spacing:-.01em; margin:0 0 6px; }
  .pl-card-s { font-size:14px; color:var(--ink-soft); margin:0 0 14px; max-width:56ch; }
  .pl-chips { display:flex; flex-wrap:wrap; gap:7px; }
  .pl-chip { font-size:11.5px; font-weight:500; color:var(--ink); border:1px solid #d9d9de;
    border-radius:7px; padding:5px 10px; }
  .pl-chip.next { border-style:dashed; color:var(--ink-soft); }
  .pl-rows { display:flex; flex-direction:column; }
  .pl-row { display:grid; grid-template-columns:34px 1fr; gap:14px; padding:10px 0; }
  .pl-row + .pl-row { border-top:1px solid var(--hairline); }
  .pl-row-n { font-size:11px; letter-spacing:.08em; color:var(--ink-soft); padding-top:2px; }
  .pl-row-t { font-size:14.5px; font-weight:500; color:var(--ink-strong); margin:0; }
  .pl-row-d { font-size:13px; color:var(--ink-soft); margin:2px 0 0; }
  .pl-checks { list-style:none; margin:0; padding:0; display:flex; flex-direction:column;
    gap:10px; }
  .pl-checks li { display:flex; gap:10px; font-size:13.5px; color:var(--ink);
    align-items:flex-start; }
  .pl-checks li::before { content:""; flex:none; width:14px; height:14px; margin-top:2.5px;
    background:var(--ink-strong);
    -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="black" d="M6.4 12.1 2.6 8.3l1.2-1.2 2.6 2.6 5.8-5.8 1.2 1.2z"/></svg>') center/contain no-repeat;
            mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="black" d="M6.4 12.1 2.6 8.3l1.2-1.2 2.6 2.6 5.8-5.8 1.2 1.2z"/></svg>') center/contain no-repeat; }
  .pl-facts { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
  .pl-fact-l { font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--ink-soft); margin:0 0 5px; }
  .pl-fact-v { font-size:13.5px; color:var(--ink); margin:0; }
  .pl-actions { display:flex; align-items:center; gap:18px; padding:20px 26px;
    border-top:1px solid var(--hairline); background:#fafafa; }
  .pl-actions .btn { opacity:.35; pointer-events:none; }
  .pl-actions.live .btn { opacity:1; pointer-events:auto; }
  .pl-dl { font-size:13px; color:var(--ink-soft); }
  .pl-actions.live .pl-dl { color:var(--ink); }
  @media (max-width:960px) {
    .pl-panel { padding:28px 20px 32px; }
    .pl-grid { grid-template-columns:1fr; gap:36px; }
    .pl-steps { flex-wrap:wrap; gap:16px; height:auto; padding-bottom:10px; }
    .pl-step { height:auto; padding:4px 2px; }
    .pl-facts { grid-template-columns:repeat(2,1fr); }
  }

/* menu "New" tag on a link (sits inside the gitem-name flex row) */
.gitem-new {
  flex: none; font-size: 10px; font-weight: 500; letter-spacing: 0.07em;
  text-transform: uppercase; line-height: 1; padding: 3px 7px; border-radius: 5px;
  color: var(--accent-strong); background: var(--accent-soft);
}

/* planner: phone-only note — the tool is built for a wide screen */
.pl-mobilenote { display: none; }
@media (max-width: 767px) {
  .pl-mobilenote { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 22px; font-size: 13.5px; color: var(--ink-soft); }
  .pl-mobilenote svg { width: 16px; height: 16px; flex: none; }
}

/* planner: grouped selectors within one step (Your Situation) */
.pl-group + .pl-group { margin-top: 28px; }
.pl-group-l {
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 500; margin: 0 0 10px;
}
.pl-group-lead {
  font-size: 13.5px; color: var(--ink); line-height: 1.45;
  margin: -2px 0 12px; max-width: 56ch;
}
.pl-chiprow { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.pl-chipopt {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--hairline); border-radius: 8px; background: #fff;
  padding: 9px 16px; font-family: var(--ff); font-size: 13.5px; color: var(--ink);
  cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.pl-chipopt svg { width: 13px; height: 13px; flex: none; }
.pl-chipopt:hover { border-color: #d9d9de; }
.pl-chipopt.on { background: var(--ink-strong); border-color: var(--ink-strong); color: #fff; }

/* planner: tier cards with micro logo lists (Enterprise AI) */
.pl-tierrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pl-tieropt {
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  text-align: left; border: 1px solid var(--hairline); border-radius: 12px;
  background: #fff; padding: 14px 16px; cursor: pointer; font-family: var(--ff);
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
@media (hover: hover) { .pl-tieropt:hover { border-color: #d9d9de; transform: translateY(-1px); } }
.pl-tieropt.on { border-color: var(--ink-strong); background: #fafafa; }
.pl-tieropt-t { font-size: 14.5px; font-weight: 500; color: var(--ink-strong); margin: 0; }
.pl-tierlogos {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 7px;
}
.pl-tierlogos li { display: flex; align-items: center; gap: 7px; }
.pl-tierlogos img { width: 13px; height: 13px; object-fit: contain; }
.pl-tierlogos span { font-size: 10.5px; color: var(--ink-soft); }
@media (max-width: 960px) { .pl-tierrow { grid-template-columns: 1fr; } }

/* planner: icon cards side by side (AI Use Case) */
.pl-icardrow { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pl-icard {
  display: flex; flex-direction: column; align-items: flex-start;
  text-align: left; border: 1px solid var(--hairline); border-radius: 12px;
  background: #fff; padding: 16px; cursor: pointer; font-family: var(--ff);
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
@media (hover: hover) { .pl-icard:hover { border-color: #d9d9de; transform: translateY(-1px); } }
.pl-icard.on { border-color: var(--ink-strong); background: #fafafa; }
.pl-icard svg { width: 18px; height: 18px; color: var(--ink-strong); }
.pl-icard-t { font-size: 14.5px; font-weight: 500; color: var(--ink-strong); margin: 11px 0 0; }
.pl-icard-d { font-size: 12.5px; color: var(--ink-soft); margin: 3px 0 0; }
@media (max-width: 600px) { .pl-icardrow { grid-template-columns: 1fr; } }
.pl-icardrow.cols3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 600px) { .pl-icardrow.cols3 { grid-template-columns: 1fr; } }

/* planner right side: services mirror + slot rows + hire card */
.pl-svcgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* ambition-driven offer block: picture left (half width), item cards stacked right */
.pl-offer { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; }
#plan-services .pl-offer + .pl-label,
#plan-services .pl-svcgrid + .pl-label,
#plan-services .pl-basis + .pl-label,
#plan-services .pl-offer + .pl-offer { margin-top: 20px; }
.pl-offer-media {
  min-height: 150px;
  position: relative;
  border-radius: var(--radius-media);
  overflow: hidden;
  background: var(--placeholder);
}
.pl-offer-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* one card size everywhere: 69px rows, two cards + gap = the 150px media height */
.pl-offer-cards { display: grid; grid-template-columns: 1fr; grid-auto-rows: 69px; align-content: start; gap: 12px; }
/* agents: menu-style columns (Max 2026-08-25) — category pic on top at the menu thumb's
   aspect so the glass compositions render undistorted, teams underneath */
.pl-agentcols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 767px) { .pl-agentcols { grid-template-columns: 1fr; gap: 20px; } }
.pl-agentcol-media { position: relative; aspect-ratio: 294 / 100; border-radius: var(--radius-media); overflow: hidden; background: var(--placeholder); margin: 0 0 10px; }
.pl-agentcol-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pl-agentcol-h {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px; letter-spacing: 0.02em; text-transform: uppercase; color: #9a9aa0;
  margin: 0 0 6px;
}
.pl-agentcol .pl-agent { display: flex; padding: 3px 0; }
.pl-agent { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; text-decoration: none; transition: color 0.15s ease; }
.pl-agent:hover { color: var(--ink-soft); }
/* basis block under each offer — Max pick 2026-07-27: mono micro-labels (D)
   on the tinted footnote panel (C). No rules; col 2 aligns to the media midpoint. */
.pl-basis { margin-top: 14px; background: #fafafa; border-radius: 10px; padding: 13px 16px; font-size: 13px; color: var(--ink-soft); }
.pl-basis-h, .pl-basis-row > span:first-child {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px; letter-spacing: 0.02em; text-transform: uppercase; color: #9a9aa0;
}
.pl-basis-h { margin: 0 0 8px; }
.pl-basis-row { display: grid; grid-template-columns: calc(25% - 23px) 1fr; gap: 12px; padding: 3px 0; }
.pl-basis-row > span:first-child { padding-top: 2px; }
/* logic-table rows stack one recommendation line per answered layer */
.pl-rec { display: block; padding: 1px 0; }
/* plan intro: the three sentences under the first offer's cards (Max 2026-07-28) */
.pl-intro { margin: 18px 0 2px; }
.pl-intro p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink); max-width: 58ch; }
/* question area: contain child margins so its locked height is exact across steps */
#question { display: flow-root; }

/* ---- blog: editorial list index + reading page ---- */
.blog-wrap { max-width: 680px; } /* one column geometry across the whole blog surface (= .post-wrap) */
.blog-hero { padding: 150px 0 26px; }
.blog-eyebrow {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #9a9aa0; margin: 0 0 14px;
}
.blog-hero-title { font-size: 44px; font-weight: 500; letter-spacing: -0.01em; margin: 0; }
.blog-list { padding: 26px 0 90px; }
.blog-item {
  display: block; padding: 26px 0;
  border-bottom: 1px solid var(--hairline); text-decoration: none;
}
.blog-item-date {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px; letter-spacing: 0.02em; text-transform: uppercase;
  color: #9a9aa0; margin: 0 0 8px;
}
.blog-item-title { font-size: 23px; font-weight: 500; margin: 0 0 6px; transition: color 0.2s ease; }
.blog-item:hover .blog-item-title { color: var(--ink-soft); }
.blog-item-dek { font-size: 15px; line-height: 1.5; color: var(--ink-soft); margin: 0; max-width: 60ch; }

.post { padding: 150px 0 90px; }
.post-wrap { max-width: 680px; }
.post-back, .post-foot a { font-size: 13.5px; color: var(--ink-soft); text-decoration: none; transition: color 0.2s ease; }
.post-back:hover, .post-foot a:hover { color: var(--ink); }
.post-title { font-size: 40px; line-height: 1.15; font-weight: 500; letter-spacing: -0.01em; margin: 18px 0 10px; }
.post-meta { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 42px; }
.post-body { font-size: 17px; line-height: 1.65; color: var(--ink); }
.post-body p { margin: 0 0 22px; }
.post-body h2 { font-size: 23px; font-weight: 500; margin: 40px 0 14px; }
.post-body h3 { font-size: 18px; font-weight: 500; margin: 30px 0 10px; }
.post-body a {
  color: var(--ink); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: #c9c9ce;
  transition: text-decoration-color 0.2s ease;
}
.post-body a:hover { text-decoration-color: var(--ink); }
.post-body blockquote { margin: 0 0 22px; padding: 2px 0 2px 18px; border-left: 2px solid #e3e3e6; color: var(--ink-soft); }
.post-body pre {
  background: #fafafa; border-radius: 10px; padding: 16px 18px;
  overflow-x: auto; font-size: 13.5px; line-height: 1.55; margin: 0 0 22px;
}
.post-body code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.92em; background: #fafafa; padding: 1px 5px; border-radius: 5px; }
.post-body pre code { background: none; padding: 0; }
.post-foot { margin: 42px 0 0; padding-top: 22px; border-top: 1px solid var(--hairline); }
@media (max-width: 767px) {
  .blog-hero { padding-top: 110px; }
  .blog-hero-title { font-size: 32px; }
  .post { padding-top: 110px; }
  .post-title { font-size: 29px; }
}
/* plan-panel journey: step bar in the head, empty state, next-step nudge */
.pl-progress { display: flex; gap: 6px; }
.pl-prog {
  width: 26px; height: 5px; border-radius: 999px; border: 0; padding: 0;
  background: #e3e3e6; cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: background 0.3s ease;
}
.pl-prog.done { background: #2e9e6b; }
.pl-empty { margin: 4px 0; font-size: 13.5px; color: var(--ink-soft); }
/* pre-completion checklist gating the plan (Max 2026-07-28) */
/* 5.5px puts the checklist's first rule on the same y as the left column's first
   card top (cross-panel axis, design #1 refinement) — pixel-verified in QC */
.pl-checklist { margin-top: 5.5px; display: flex; flex-direction: column; }
.pl-check {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 2px; border: 0; background: none; cursor: pointer; text-align: left;
  border-bottom: 1px solid var(--hairline);
  font-size: 14.5px; color: var(--ink); transition: color 0.2s ease;
}
.pl-check:first-child { border-top: 1px solid var(--hairline); }
.pl-check:hover { color: var(--ink-soft); }
.pl-check-n {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px; color: #9a9aa0;
}
.pl-check-t { flex: 1; }
.pl-check-mark { width: 16px; height: 16px; color: #2e9e6b; }
.pl-check-mark svg { width: 100%; height: 100%; display: block; }
/* the plan's first appearance eases in */
.pl-reveal { animation: plreveal 0.45s ease; }
@keyframes plreveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
#plan-services .pl-basis + .pl-label { margin-top: 20px; }
.pl-ocard {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 14px 16px;
  text-decoration: none;
  transition: border-color 0.15s ease;
}
.pl-ocard:hover { border-color: #d9d9de; }
.pl-ocard-name { display: block; font-size: 15px; line-height: 1.35; }
.pl-svc-thumb {
  margin: 0; border-radius: 8px; overflow: hidden;
  background: var(--placeholder); aspect-ratio: 16 / 7;
}
.pl-svc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-svc-h {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 500; margin: 11px 0 5px;
}
.pl-svc-item { display: block; padding: 5px 0; text-decoration: none; }
.pl-svc-name {
  display: flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 500; color: var(--ink-strong);
  transition: color 0.2s ease;
}
.pl-svc-item:hover .pl-svc-name { color: var(--ink-soft); }
.pl-svc-desc {
  display: block; font-size: 11.5px; color: var(--ink-soft);
  line-height: 1.4; margin-top: 1px; padding-left: 14px;
}
.pl-slot {
  border: 1px dashed #dcdce0; border-radius: 8px; padding: 11px 14px;
  font-size: 12px; color: #b4b4ba; text-align: center;
}
.pl-slot + .pl-slot { margin-top: 8px; }
.pl-hirecard {
  position: relative; border: 1px solid var(--hairline); border-radius: 12px;
  padding: 26px 28px; overflow: hidden; min-height: 128px;
  display: flex; flex-direction: column; justify-content: center;
}
.pl-hire-t {
  font-size: 23px; font-weight: 500; color: var(--ink-strong);
  letter-spacing: -0.01em; margin: 0;
}
.pl-hire-s { font-size: 13.5px; color: var(--ink-soft); margin: 7px 0 0; max-width: 36ch; }
.pl-hire-brain {
  position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  height: 105px; width: auto; pointer-events: none;
}
@media (max-width: 700px) {
  .pl-svcgrid { grid-template-columns: 1fr; }
  .pl-hire-brain { display: none; }
}
.pl-icard-media {
  /* media box mirrors the height of the icon+title+desc block above it */
  flex: none; width: 100%; height: 124px; margin-top: 14px;
  border-radius: 8px; background: var(--placeholder);
}
.pl-icardrow.tall .pl-icard-d { min-height: 71px; }

/* planner: hero pins, tool slides up over it; proximity snap = gentle stopper */
html.pl-snap { scroll-snap-type: y proximity; }
.plpage { scroll-snap-align: start; }
.pl-hero {
  position: sticky; top: calc(var(--nav-h, 76px) + 36px);
  min-height: calc(100svh - var(--nav-h, 76px) - 200px);
  display: flex; flex-direction: column; justify-content: center;
}
@media (min-width: 768px) { .pl-hero { top: calc(var(--nav-h, 76px) + 48px); } }
.pl-hero .sec-tagline { margin-bottom: 28px; }
.pl-tool {
  position: relative; z-index: 2; background: var(--bg);
  scroll-snap-align: start; scroll-margin-top: calc(var(--nav-h, 76px) + 8px);
  padding-top: 8px;
}

/* ---------- /agents/agent-harness/ (né capabilities) — parked Our Agents menu content (Max 2026-07-27) */
.cap-hero { padding: 152px var(--pad-x) 8px; }
.cap-hero h1 { font-size: 44px; font-weight: 400; letter-spacing: -0.02em; margin: 0 0 10px; }
.cap-sub { color: var(--ink-soft); font-size: 15px; margin: 0; }
.cap-body { padding: 28px var(--pad-x) 96px; }
.cap-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
.cap-tab {
  font-family: var(--ff); font-size: 14px; color: var(--ink);
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--hairline);
  background: none; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease;
}
.cap-tab:hover { border-color: #d9d9de; }
.cap-tab.on { background: var(--ink-strong); border-color: var(--ink-strong); color: #fff; }
.capsec { display: none; }
.capsec.on { display: block; }
.capsec .fuse-grid.active { height: auto; }
.capsec .scopewheel.active { position: relative; height: 560px; }
/* the carpet sizes its tile rows off a fixed container height (500px in the menu) */
.capsec .fuse-grid.expcarpet.active { height: 640px; }
.capsec .expcarpet a.gitem:hover { filter: brightness(0.94); }
/* agent-harness: taskflow photo slots need explicit height outside the fixed menu panel */
.capsec .taskflow .fcol-thumb { flex: none; height: 300px; }

/* ---- agent-harness: why-a-managed-harness section (North /north "more mindspace"
   crib: split head + media pair + ruled 3-up w/ links; Max 2026-08-12) ---- */
.threeup-ruled .threeup-col { border-top: 1px solid var(--ink-strong); padding-top: 24px; }

/* the harness deep-dive: was a FULL coral band (Max 2026-08-13/14, option F) — Max 2026-08-23:
   "massive area with orange background behind multiple cards, remove it, the background of the
   single cards stays" → the band is white again and each onion card carries the coral + its
   blurred-circle glows; text back to ink. */
/* Max 2026-08-23 (evening): "these super orange colors annoy a bit, rather make the object itself with orange
   strokes" … "not just the background but also the blurred circles need to go" → no ground at all: the onion
   alone, in coral strokes, on the white band. */
.harness-band .featsplit-media { background: none; }
.cat-pill { display: inline-grid; place-items: center; width: 54px; height: 32px;
  border-radius: 999px; background: #17171c; color: #ffffff; }
.cat-pill svg { width: 18px; height: 18px; }
/* band media = the category's own onion segment accumulating (Max 2026-08-13):
   prior segments dimmed, current full coral, small ink icon in the hole */
.fm-onion svg { width: 100%; height: 100%; display: block; }
.fm-onion .seg-on { fill: rgba(255,119,89,0.22); stroke: var(--coral); stroke-width: 3; }
.fm-onion .seg-dim { fill: rgba(255,119,89,0.07); stroke: rgba(255,119,89,0.55); stroke-width: 1.25; }
.fm-onion .seg-ghost { fill: none; stroke: rgba(255,119,89,0.45); stroke-width: 1.25; }
.fm-onion .fm-icon { fill: none; stroke: var(--coral); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- agent-composition stack — North stacked sliding panels
   (the reference site/north Discover/Create/Automate grammar; our ink ladder lightens
   toward the customer's own layer; Max 2026-07-30) ---------- */
.stackpanels { padding: 72px var(--pad-x) 80px; }
@media (min-width: 768px) { .stackpanels { padding-block: 104px 112px; } }
.stack-col { display: flex; flex-direction: column; gap: 24px; }
/* about #story only: pre-promote each sticky panel to its own composited layer — cures the
   intermittent Chrome sticky non-paint (panels blank, only last card visible). Scoped away
   from the harness onion, whose backdrop-filter glass must NOT gain a transformed ancestor. */
#story .spanel { transform: translateZ(0); }
/* phones: a sticky stack card taller than (viewport - dock offset) never fully shows and the
   next card slides over its tail — same class as fixed on /ip-protection/ (cards must FIT).
   Compact the story cards so each fits the 390x844 dock window; asserted by scripts/stack-probe.js */
@media (max-width: 767px) {
  #story .spanel { padding: 36px 22px; min-height: 0; }
  #story .sp-media--shot > img, #story .sp-media--shot > video { width: 66%; }
  #story .sp-media--shot .shot-row { width: 70%; margin-top: 12px; }
  #story .abd-polstack { width: 84%; margin-inline: auto; min-height: 0; height: 280px; }
  #story .sp-grid { gap: 20px; }
}
.spanel {
  position: sticky; top: calc(var(--nav-h, 80px) + 16px);
  border-radius: 22px; overflow: hidden;
  min-height: 70vh; display: grid; align-content: center;
  padding: 48px 28px; color: #f5f3ea;
}
@media (min-width: 1024px) { .spanel { padding: 64px 80px; min-height: 76vh; } }
/* ladder logic (Max 2026-08-12, supersedes the 07-30 dark-means-protected ladder here):
   commodity layers stay light; the two layers with their own stories carry their story's
   color — harness orange (the deep-dive band below is its pastel), customization violet
   (the lilac customization page it links to). Color = the thread the reader follows. */
.spanel.sp-1 { background: #f2f2f2; color: var(--ink-strong); }
.spanel.sp-2 { background: var(--sand); color: var(--ink-strong); }
.spanel.sp-3 { background: var(--coral); } /* light text like sp-4 (Max 2026-08-13; note: white on coral = 2.6:1, his eye call) */
.spanel.sp-4 { background: #6b3fe8; }
/* story-arc panels, /about only (Max 2026-08-04): every card carries the S-7
   scene mesh grammar — soft circle accents over a flat base, tinted per card.
   Arc: pink dawn → ink-violet t0 → neutral dark w/ ember accents → slate w/ blue
   → white today. Same three-blob construction as studio bg-mesh. */
.spanel.st-mesh { background:
  radial-gradient(42% 52% at 18% 22%, var(--m-a), transparent 70%),
  radial-gradient(50% 60% at 82% 18%, var(--m-b), transparent 70%),
  radial-gradient(56% 64% at 55% 88%, var(--m-c), transparent 72%),
  var(--m-base); }
.spanel.st-pink { --m-base: #f4b8b4; --m-a: rgba(255,255,255,0.50);
  --m-b: rgba(255,255,255,0.28); --m-c: rgba(255,119,89,0.16); color: var(--ink-strong); }
.spanel.st-tviolet { --m-base: #1e1e33; --m-a: rgba(139,92,246,0.26);
  --m-b: rgba(76,110,230,0.22); --m-c: rgba(255,82,41,0.10); }
.spanel.st-heat { --m-base: #22202a; --m-a: rgba(255,119,89,0.16);
  --m-b: rgba(255,82,41,0.10); --m-c: rgba(139,92,246,0.12); }
.spanel.st-slate { --m-base: #2c2c34; --m-a: rgba(76,110,230,0.20);
  --m-b: rgba(139,92,246,0.16); --m-c: rgba(255,119,89,0.10); }
.spanel.st-white { --m-base: #ffffff; --m-a: rgba(255,119,89,0.22);
  --m-b: rgba(139,92,246,0.18); --m-c: rgba(76,110,230,0.15); color: var(--ink-strong); }
.spanel.sp-1 .sp-media, .spanel.sp-2 .sp-media, .spanel.sp-3 .sp-media,
.spanel.st-pink .sp-media, .spanel.st-white .sp-media { background: rgba(23,23,28,0.08); }
/* ip-protection layer ladder in BLACK SCALE (Max 2026-08-15): same mesh-glow
   grammar as the tinted /about variants, color stripped — three grey steps */
.spanel.st-black1 { --m-base: #232327; --m-a: rgba(255,255,255,0.10);
  --m-b: rgba(255,255,255,0.05); --m-c: rgba(255,255,255,0.03); }
.spanel.st-black2 { --m-base: #1b1b1f; --m-a: rgba(255,255,255,0.08);
  --m-b: rgba(255,255,255,0.05); --m-c: rgba(255,255,255,0.03); }
.spanel.st-black3 { --m-base: #131317; --m-a: rgba(255,255,255,0.07);
  --m-b: rgba(255,255,255,0.04); --m-c: rgba(255,255,255,0.02); }
/* ip-protection closer: REAL frosted glass (Max 2026-08-15) — same recipe as the
   harness .sp-frost pane (backdrop blur 32 sat 1.1), here on the whole card, dark
   veil: the 08 card's actual content smears through while it slides and docks. */
.spanel.st-blind {
  background: rgba(14, 14, 18, 0.38);
  -webkit-backdrop-filter: blur(32px) saturate(1.1);
  backdrop-filter: blur(32px) saturate(1.1);
}
.sp-blind-front { position: relative; display: grid; justify-items: center; text-align: center; }
.sp-blind-front .sp-title { margin: 34px 0 16px; }
.sp-blind-eye { width: 96px; height: 96px; opacity: 0.94; }
.sp-links { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; }
.sp-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .sp-grid { grid-template-columns: 1fr 1.05fr; gap: clamp(48px, 8%, 120px); } }
.sp-eyebrow { font-size: 13px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.65; margin-bottom: 24px; }
.sp-title { font-size: 48px; font-weight: 400; line-height: 1.0; letter-spacing: -0.02em; margin: 0 0 20px; }
@media (min-width: 1024px) { .sp-title { font-size: 76px; } }
.sp-desc { font-size: 16px; line-height: 1.45; max-width: 480px; opacity: 0.92; margin: 0; }
@media (min-width: 1024px) { .sp-desc { font-size: 18px; } }
.sp-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; font-size: 16px; color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.sp-link .acc-more-arrow { display: inline-block; transition: transform 0.4s ease; }
.sp-link:hover .acc-more-arrow { transform: translateX(4px); }
.sp-media { border-radius: 14px; overflow: hidden; background: rgba(255,255,255,0.07); aspect-ratio: 4 / 3; }
.sp-media img, .sp-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* product-screenshot showcase: full UI uncropped, smaller, subtle halo lifting it
   off a dark panel (Max 2026-08-04: never side-crop a solution screenshot) */
.sp-media--shot { aspect-ratio: auto; overflow: visible; background: none; border-radius: 0;
  position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: center; }
.sp-media--shot > img, .sp-media--shot > video { width: 82%; height: auto; object-fit: contain;
  border-radius: 10px; transform: rotate(1.5deg);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 0 90px 8px rgba(96,130,255,0.16), 0 0 200px 60px rgba(139,92,246,0.08),
    0 24px 60px -20px rgba(0,0,0,0.8); }
/* demo strip under the hero shot: four clips side by side, quiet frames */
.sp-media--shot .shot-row { display: flex; gap: 10px; width: 86%; margin-top: 22px; }
.sp-media--shot .shot-row video { flex: 1; min-width: 0; height: auto; border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 12px 30px -14px rgba(0,0,0,0.7); }
/* two shots on one card: diagonal pair, corners nearly touching */
.sp-media--shot.sp-media--duo { display: block; position: relative; aspect-ratio: 4 / 3; }
.sp-media--shot.sp-media--duo video { position: absolute; width: 56%; }
.sp-media--shot.sp-media--duo video:first-of-type { left: 0; top: 6%; transform: rotate(-1.2deg); }
.sp-media--shot.sp-media--duo video:last-of-type { right: 0; bottom: 6%; transform: rotate(1.2deg); }
/* sketched-figure media (inline SVG artwork floating directly on the panel) */
.sp-media--sketch { background: none; border-radius: 0; overflow: visible; }
.sp-media--sketch svg { width: 100%; height: 100%; display: block; }
/* agent-harness stack: the layer onion (Max 2026-08-12). Desktop = a REAL hole: the card bg
   lives on a masked ::before (four opaque frame strips leave a rect hole), each card's SVG
   draws ONLY its own layer (.prev rings hidden), and the earlier layers show through the hole
   from the cards beneath — sticky panels dock at the same top, so the onion physically
   composes out of the stack, and mid-slide you see the previous card through the hole.
   Below 1024px: no mask, white window, each card shows its full mini-onion (.prev visible). */
.sp-onion { margin: 0; aspect-ratio: 4 / 3; display: grid; place-items: center;
  background: var(--bg); border-radius: 14px; }
.sp-onion svg { height: 88%; max-width: 100%; display: block; }
.sp-frost { display: none; }
/* onion part labels (Max 2026-08-13): black font, outside the rings, node dot on the ring
   + leader line, mirrored for perfect symmetry; desktop only (mini-onion stays clean) */
.sp-onion .olb { fill: #17171c; font-size: 19px; font-weight: 500; letter-spacing: 0.01em; }
.sp-onion .oln { stroke: #17171c; stroke-width: 1.5; fill: none; }
.sp-onion .odiv line { stroke: #ffffff; stroke-width: 2.5; }
@media (max-width: 1023px) { .sp-onion .olabels { display: none; } }
@media (min-width: 1024px) {
  .spanel.sp-hole { background: none; }
  .spanel.sp-hole::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--sp-bg, #f2f2f2);
    -webkit-mask-image: linear-gradient(#000, #000);
    -webkit-mask-size: 50% 100%;
    -webkit-mask-position: left top;
    -webkit-mask-repeat: no-repeat;
    mask-image: linear-gradient(#000, #000);
    mask-size: 50% 100%;
    mask-position: left top;
    mask-repeat: no-repeat;
  }
  .spanel.sp-hole.sp-1 { --sp-bg: #f2f2f2; }
  .spanel.sp-hole.sp-2 { --sp-bg: var(--sand); }
  .spanel.sp-hole.sp-3 { --sp-bg: var(--coral); }
  .spanel.sp-hole.sp-4 { --sp-bg: #6b3fe8; }
  /* glass = the full RIGHT HALF of the card, edge to edge (Max 19:17: box to top/bottom/right,
     left edge at the card's exact middle = screen middle); onion centered in it. FROSTED
     (19:10): backdrop blur smears what's beneath while the card's own ring stays sharp. */
  /* HYBRID see-through (Max 2026-08-13 final): OUTER pane frosted (blur as this
     morning), INNER hole sharp — .sp-frost carries the glass, masked out inside the
     own ring (mask edge at ring CENTER radius so the seam hides under the band);
     the hole shows the previous cards' layers crisply */
  .spanel.sp-hole .sp-frost { display: block; position: absolute; right: 0; top: 0; bottom: 0;
    width: 50%;
    background: rgba(255,255,255,0.35);
    -webkit-backdrop-filter: blur(32px) saturate(1.1);
    backdrop-filter: blur(32px) saturate(1.1); }
  .spanel.sp-hole.sp-2 .sp-frost { --fr: calc((50vw - var(--pad-x)) * 110 / 960); }
  .spanel.sp-hole.sp-3 .sp-frost { --fr: calc((50vw - var(--pad-x)) * 170 / 960); }
  .spanel.sp-hole.sp-4 .sp-frost { --fr: calc((50vw - var(--pad-x)) * 230 / 960); }
  .spanel.sp-hole.sp-2 .sp-frost, .spanel.sp-hole.sp-3 .sp-frost, .spanel.sp-hole.sp-4 .sp-frost {
    -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent calc(var(--fr) - 1px), #000 var(--fr));
    mask-image: radial-gradient(circle at 50% 50%, transparent calc(var(--fr) - 1px), #000 var(--fr)); }
  .spanel.sp-hole .sp-onion { position: absolute; right: 0; top: 0; bottom: 0;
    width: 50%; aspect-ratio: auto; border-radius: 0; background: none; }
  .spanel.sp-hole .sp-onion svg { height: 88%; }
  /* each card owns ONLY its ring, sharp on the glass (Max 19:20: "the last card should only
     have the purple circle donut with outside and inside of it blurry") — the earlier layers
     read through the frost as the blur inside the donut */
  .spanel.sp-hole .sp-onion .prev { display: none; }
}
.rk-label { font-family: var(--ff); font-size: 16px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; fill: #f5f3ea; text-anchor: middle; }
.rk-sub { font-family: var(--ff); font-size: 13px; font-weight: 400;
  letter-spacing: 0.04em; fill: #f5f3ea; text-anchor: middle; }
.rk-side { text-anchor: start; }

/* dark band — a single dark section on a light page (dark = the protected layer;
   customization What-you-can-shape; Max 2026-07-30) */
.secblock.dark-band { background: #0e0e12; color: #f5f3ea; }

/* cost-of-agent-ownership page (the reference /total-cost-of-ai-ownership crib) */
.ahero.no-media { padding-bottom: 96px; }
@media (min-width: 768px) { .ahero.no-media { padding-bottom: 144px; } }
.ahero-cta { display: flex; justify-content: center; align-items: center; gap: 28px; }
.ahero-cta .sp-link { margin-top: 0; }
/* phones: the pill + text-link pair squeezes side by side (Max 2026-08-26, partners hero) —
   stack them, the construction the trust-center hero already used */
@media (max-width: 479px) { .ahero-cta { flex-direction: column; gap: 18px; } }
.threeup.dark-band { background: #0e0e12; color: #f5f3ea; }
.dark-band .threeup-icon { color: currentColor; }
.band-link { margin: -32px 0 88px; }
.band-link .sp-link { margin-top: 0; }
.checksplit.solo { margin-top: 0; }
.checksplit-intro { font-size: 17px; line-height: 1.5; margin: 20px 0 32px; }
.checksplit-more { margin-top: 36px; }
.checksplit-more .sp-link { margin-top: 0; }
.dark-band .pillbar { background: rgba(255,255,255,0.08); }
.dark-band .pill { color: #f5f3ea; }
.dark-band .pill.active { color: var(--ink-strong); }
.dark-band .pillbar-thumb { background: #f5f3ea; }
.dark-band .tabshow-shot { background: rgba(255,255,255,0.07); }

/* ---------- pricing page — the reference /pricing crib: tinted band hero + tabbed price cards
   (cards click through Agent Families / Solutions / Academy; Max 2026-07-30) ---------- */
.price-hero { background: #f6f5f0; padding: 152px var(--pad-x) 104px; }
.price-hero h1 { font-size: 60px; font-weight: 400; letter-spacing: -0.025em; text-align: center; margin: 0 0 16px; }
.price-sub { text-align: center; font-size: 17px; color: var(--ink-soft); margin: 0 0 40px; }
.price-hero .pillbar { background: #ecebe4; }
.price-panel { display: none; }
.price-panel.active { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .price-panel.active { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) {
  .price-panel.active { grid-template-columns: repeat(4, 1fr); }
  .price-panel.two.active { grid-template-columns: repeat(2, minmax(0, 380px)); justify-content: center; }
}
.price-panel.one.active { display: block; }
.price-panel.one .pricecard { max-width: 440px; margin: 0 auto; }
.pc-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 14.5px; color: var(--ink); text-decoration: none; }
.pc-more:hover { color: var(--ink-soft); }
.pmgrid { display: grid; gap: 16px; grid-template-columns: 1fr; max-width: 1080px; margin: 0 auto; }
@media (min-width: 900px) { .pmgrid { grid-template-columns: 1fr 1fr; gap: 20px; } }
.pm-card { border-radius: 22px; padding: 40px 36px 36px; display: flex; flex-direction: column; text-align: left; }
.pm-card.us { background: #17171c; color: #f5f3ea; }
.pm-card.you { background: var(--sand); color: var(--ink-strong); }
.pm-card .sp-eyebrow { margin-bottom: 14px; }
.pm-card h3 { font-size: 25px; font-weight: 400; letter-spacing: -0.01em; margin: 0 0 12px; }
.pm-lead { font-size: 15px; line-height: 1.5; margin: 0; opacity: 0.8; max-width: 420px; }
.pm-rows { list-style: none; margin: 30px 0 0; padding: 0; }
.pm-rows li { border-top: 1px solid rgba(245,243,234,0.14); padding: 14px 2px; font-size: 15px; }
.pm-rows li:last-child { border-bottom: 1px solid rgba(245,243,234,0.14); }
.pm-card.you .pm-rows li { border-color: rgba(23,23,28,0.14); }
.pconf-head { max-width: 1080px; margin: 72px auto 0; padding: 0 4px; text-align: left; }
.pconf-head .sp-eyebrow { margin-bottom: 0; opacity: 0.55; }
.pconf { list-style: none; margin: 20px auto 0; padding: 0 4px; max-width: 1080px; text-align: left; }
.pconf li { display: grid; grid-template-columns: 1fr; gap: 6px; border-top: 1px solid #e2e0d8; padding: 18px 2px; }
.pconf li:last-child { border-bottom: 1px solid #e2e0d8; }
@media (min-width: 900px) { .pconf li { grid-template-columns: 240px 1fr; gap: 32px; padding: 20px 2px; } }
.pconf-k { font-size: 15px; font-weight: 500; }
.pconf-v { font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.pconf-link { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.pconf-link:hover { color: var(--ink-soft); }

/* ---- pricing, minimal three-column act (Ode-derived): title | drivers | selection panel ---- */
.pmn { height: 100svh; min-height: 780px; background: var(--bg); display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 128px 44px 44px; }
.pmn-title { margin-top: -13px; }
.pmn-note { font-size: 14px; line-height: 1.45; color: var(--ink-soft); margin: 0; max-width: 240px; }
.pmn-h1 { font-size: 40px; font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 22px; max-width: 420px; }
@media (min-width: 1024px) { .pmn-h1 { font-size: 64px; } }
.pmn-c2 { display: flex; flex-direction: column; justify-content: space-between; max-width: 520px; margin-top: -9px; }
.pmn-step { display: block; text-decoration: none; color: #b9b6ab; transition: color 0.25s ease; }
.pmn-step.on { color: var(--ink-strong); }
.pmn-row { display: flex; align-items: baseline; }
.pmn-num { width: 56px; flex: none; font-size: 13px; letter-spacing: 0.12em; opacity: 0.5; }
.pmn-lbl { font-size: 23px; font-weight: 400; letter-spacing: -0.01em; }
.pmn-sub { display: block; margin: 6px 0 0 56px; font-size: 13px; line-height: 1.4; color: currentColor; opacity: 0.75; }
.pmn-c3 { display: flex; flex-direction: column; align-items: flex-end; }
.pmn-panels { position: relative; flex: 1; max-width: 320px; width: 100%; }
.pmn-panel { position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.pmn-panel.on { opacity: 1; pointer-events: auto; }
/* panels are text only (Max 2026-08-23: the swapping pictures removed, "simply text changes") */
.pmn-ptext { font-size: 15px; line-height: 1.5; color: var(--ink); margin: 0 0 20px; }
.pmn-panel .pc-checks li { font-size: 14.5px; margin-bottom: 10px; }
.pmn-cta3 { margin-top: 24px; align-self: flex-end; display: flex; align-items: flex-end; gap: 28px; }
.pmn-plan { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink); text-decoration: none; margin-bottom: -2px; }
.pmn-plan:hover { color: var(--ink-soft); }

@media (max-width: 1100px) {
  .pmn { height: auto; min-height: 0; grid-template-columns: 1fr; gap: 48px; padding: 128px var(--pad-x) 56px; }
  .pmn-c2 { gap: 26px; }
  .pmn-panels { min-height: 0; }
  .pmn-panel { position: static; display: none; }
  .pmn-panel.on { display: block; }
  .pmn-cta3 { align-self: flex-start; margin-top: 32px; }
}
.pconf li:last-child .pconf-v { color: var(--ink-strong); }
.pconf-cta { max-width: 1080px; margin: 40px auto 0; padding: 0 4px; text-align: left; }
.ctaband.warm { background: #f6f5f0; }
.pricecard.dark { background: #0a1311; border-color: #0a1311; color: #f5f3ea; }
.pricecard.dark .pc-desc { color: rgba(245,243,234,0.7); }
.pricecard.dark .pc-price { border-top-color: rgba(245,243,234,0.16); }
.pricecard.dark .btn-primary { background: #f5f3ea; color: var(--ink-strong); }
.pricecard.dark .btn-primary:hover { background: #e6e4da; }
.pricecard.dark .pc-more { color: rgba(245,243,234,0.8); }
.pricecard.dark .pc-more:hover { color: #f5f3ea; }
.pricecard.dark .pc-checks li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='8' cy='8' r='7.4' stroke='%23F5F3EA' stroke-width='1.2'/%3E%3Cpath d='M4.9 8.4l2.1 2.1 4.1-4.7' stroke='%23F5F3EA' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.pricecard { background: #fff; border: 1px solid #e7e5de; border-radius: 16px; padding: 28px 24px; display: flex; flex-direction: column; }
.pc-name { display: flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 400; letter-spacing: -0.01em; }
.pc-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.pcd-blue { background: var(--blue); }
.pcd-violet { background: var(--violet); }
.pcd-coral { background: var(--coral); }
.pcd-green { background: #2e9e6b; }
.pc-desc { font-size: 14.5px; line-height: 1.45; color: var(--ink-soft); margin: 8px 0 20px; }
@media (min-width: 1100px) { .pc-desc { min-height: 42px; } }
.pc-price { border-top: 1px solid #eceae3; padding-top: 18px; font-size: 24px; margin-bottom: 18px; }
.pc-checks { list-style: none; margin: 0 0 28px; padding: 0; }
.pc-checks li { position: relative; padding-left: 24px; margin-bottom: 9px; font-size: 14.5px; line-height: 1.45; }
.pc-checks li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 15px; height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='8' cy='8' r='7.4' stroke='%2317171C' stroke-width='1.2'/%3E%3Cpath d='M4.9 8.4l2.1 2.1 4.1-4.7' stroke='%2317171C' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pricecard .btn { margin-top: auto; align-self: flex-start; }

/* ---------- IP Protection — the dark act (the reference models-overview grammar: page, nav,
   and type all flip). Ownership color language carried from the harness stack:
   dark surfaces = our layer, sand = the customer's. (Max 2026-07-30) ---------- */
body.dark-page { background: #0e0e12; color: #f5f3ea; }
body.dark-page .threeup-icon { color: #f5f3ea; }
body.dark-page .threeup-body { color: rgba(245,243,234,0.78); }
body.dark-page .nav { background: #0e0e12; }
body.dark-page .nav-logo,
body.dark-page .nav-signin,
body.dark-page .nav-links > li > a { color: #f5f3ea; }
body.dark-page .nav .btn-primary, body.dark-page .nav .btn-cta { background: #f5f3ea; color: var(--ink-strong); }
body.dark-page .nav .btn-primary:hover, body.dark-page .nav .btn-cta:hover { background: #e6e4da; }
body.dark-page .nav-burger span { background: #f5f3ea; }   /* the burger / X in paper on dark pages (was ink on ink) */

.ipp-hero { padding: 200px var(--pad-x) 120px; }
.ipp-hero .hero-eyebrow { color: rgba(245,243,234,0.55); }
.ipp-hero h1 { font-size: 44px; font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; margin: 0; }
@media (min-width: 1024px) { .ipp-hero h1 { font-size: 72px; line-height: 1.0; } }
.ipp-sub { font-size: 17px; line-height: 1.5; font-weight: 300; color: rgba(245,243,234,0.75); max-width: 560px; margin: 32px 0 0; }

.ipp-layers { padding: 24px var(--pad-x) 104px; }
.ipp-layers-head { font-size: 32px; font-weight: 300; letter-spacing: -0.01em; margin: 0 0 56px; }
.ipp-grid { position: relative; display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 1024px) {
  .ipp-grid { grid-template-columns: 1fr 1fr; gap: 96px; }
  .ipp-grid::before { content: ""; position: absolute; left: 50%; top: 4%; bottom: 4%; width: 1px;
    background: linear-gradient(to bottom, var(--coral), var(--violet), var(--blue)); }
}
.ipp-card { border-radius: 22px; padding: 44px 40px; display: flex; flex-direction: column; min-height: 460px; }
.ipp-card.ours { background: #17171c; border: 1px solid rgba(245,243,234,0.08); }
.ipp-card.yours { background: var(--sand); color: var(--ink-strong); }
.ipp-card h3 { font-size: 30px; font-weight: 300; margin: 12px 0 14px; }
.ipp-lead { font-size: 15.5px; line-height: 1.5; margin: 0; opacity: 0.85; max-width: 420px; }
.ipp-rows { list-style: none; margin: 36px 0 0; padding: 0; }
.ipp-rows li { border-top: 1px solid rgba(245,243,234,0.12); padding: 13px 2px; font-size: 15.5px; }
.ipp-card.yours .ipp-rows li { border-color: rgba(23,23,28,0.14); }
.ipp-note { margin-top: auto; padding-top: 28px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.5; }

.ipp-guarantees { padding: 24px var(--pad-x) 136px; }
.ipp-guarantees h2 { font-size: 32px; font-weight: 300; letter-spacing: -0.01em; margin: 0 0 14px; }
.ipp-where-lead { font-size: 16px; line-height: 1.55; font-weight: 300; color: rgba(245,243,234,0.75); margin: 0 0 44px; }
.ipp-where-note { margin: 28px 0 0; font-size: 14.5px; line-height: 1.5; color: rgba(245,243,234,0.55); }
.ipp-glist { list-style: none; margin: 0; padding: 0; }
.ipp-glist li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; border-top: 1px solid rgba(245,243,234,0.14); padding: 26px 2px; }
@media (min-width: 1024px) { .ipp-glist li { grid-template-columns: 88px 340px 1fr; gap: 32px; padding: 30px 2px; } }
.ipp-num { font-size: 13px; letter-spacing: 0.12em; opacity: 0.45; padding-top: 4px; }
.ipp-glead { font-size: 20px; font-weight: 400; }
.ipp-gdesc { font-size: 15.5px; line-height: 1.5; color: rgba(245,243,234,0.72); max-width: 560px; }
@media (max-width: 1023px) { .ipp-gdesc { grid-column: 2; } }

/* dark pages: the dropdown menu flips with the page (the reference models-page behavior) */
body.dark-page .panel,
body.dark-page .mnav {
  background: #17171c;
  color: #f5f3ea;
  border-color: rgba(245,243,234,0.12);
}
body.dark-page .panel { box-shadow: 0 12px 32px -16px rgba(0,0,0,0.65); }
body.dark-page .panel .gitem-name,
body.dark-page .mnav .gitem-name { color: #f5f3ea; }
body.dark-page .panel .gitem:hover .gitem-name { color: rgba(245,243,234,0.6); }
body.dark-page .panel .gitem-desc,
body.dark-page .panel .fcol-header,
body.dark-page .panel .rescard-desc,
body.dark-page .mnav .gitem-desc,
body.dark-page .mnav .fcol-header { color: rgba(245,243,234,0.55); }
body.dark-page .panel-foot { border-top-color: rgba(245,243,234,0.14); }
body.dark-page .panel .panel-small { color: rgba(245,243,234,0.8); }
body.dark-page .panel .panel-small:hover { color: #f5f3ea; }
body.dark-page .panel .gitem-new,
body.dark-page .mnav .gitem-new { color: var(--accent); background: rgba(255,119,89,0.16); }
body.dark-page .mnav { background: #0e0e12; --mn-bg: #0e0e12; --mn-fg: #f5f3ea; --mn-soft: rgba(245,243,234,0.55); --mn-rule: rgba(245,243,234,0.14); --mn-band: rgba(245,243,234,0.07); --mn-pill-bg: #f5f3ea; --mn-pill-fg: var(--ink-strong); }   /* one plane with the dark bar */
body.pdep-page .mnav { --mn-bg: #0a1311; }
.ipp-hero { position: relative; overflow: hidden; }
.ipp-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ipp-hero::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(14,14,18,0.5) 0%, rgba(14,14,18,0.2) 55%, #0e0e12 100%); }
.ipp-hero .wrap { position: relative; z-index: 1; }

/* ---- private deployment: second dark act, petrol tint (dark = protected) ---- */
body.pdep-page { background: #0a1311; }
body.pdep-page .nav { background: #0a1311; }
/* private-agents rebuilt on the standard grammars (Max 2026-08-13): petrol palette kept,
   bespoke pdep-* sections retired from the page; dark-scope for the shared grammars */
body.pdep-page .ahero-title { color: #f5f3ea; }
body.pdep-page .ahero-eyebrow { color: rgba(245,243,234,0.55); }
body.pdep-page .ahero-sub,
body.pdep-page .sechead-lead,
body.pdep-page .threeup-body,
body.pdep-page .featsplit-text { color: rgba(245,243,234,0.75); }
body.pdep-page .hero-eyebrow { color: rgba(245,243,234,0.55); }
body.pdep-page .threeup-ruled .threeup-col { border-top-color: rgba(245,243,234,0.3); }
body.pdep-page .pillar-more { color: #f5f3ea; }
body.pdep-page .ahero .btn-primary { background: #f5f3ea; color: var(--ink-strong); }
body.pdep-page .ahero .btn-primary:hover { background: #e6e4da; }
.pvt-note { margin: 44px 0 0; font-size: 14.5px; line-height: 1.5; color: rgba(245,243,234,0.55); }
.pvt-fig { background: rgba(245,243,234,0.05); border: 1px solid rgba(245,243,234,0.1); }
.pvt-fig svg { width: 100%; height: 100%; display: block; }
.pvt-fig .seg { fill: var(--coral); stroke: #0a1311; stroke-width: 3; }

/* private-agents harness accordion (teams grammar on the dark page; the fig follows the open
   item — one category = its own slice at its wheel position + the category icon, Max 2026-08-14) */
.pvt-acc .acc-visual { aspect-ratio: 620 / 440; }
@media (min-width: 1024px) { .acc.teams.pvt-acc .acc-visual { aspect-ratio: 620 / 440; align-self: start; } }
.pvt-acc .acc-visual .accfig { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.4s ease; }
.pvt-acc .acc-visual .accfig.active { opacity: 1; }
/* private-agents = redesign invoked: the fig is an architectural blueprint of the category,
   with its revision typing itself as code (option H, Max 2026-08-14). Tone-on-tone panel. */
.pvt-acc .acc-visual.pvt-fig { background: #1c1b20;
  background-image: linear-gradient(rgba(245,243,234,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,243,234,0.045) 1px, transparent 1px);
  background-size: 24px 24px; }
.pvt-acc .accfig svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pvt-acc .bp-ring { fill: none; stroke: rgba(245,243,234,0.6); stroke-width: 1.1; }
.pvt-acc .bp-center { fill: none; stroke: rgba(245,243,234,0.32); stroke-width: 0.9; stroke-dasharray: 16 6 3 6; }
.pvt-acc .bp-mark { fill: none; stroke: rgba(245,243,234,0.65); stroke-width: 1; }
.pvt-acc .seg { stroke: #ffffff; stroke-width: 2; }
.pvt-acc .bigic { fill: none; stroke: #f5f3ea; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pvt-acc .bigic * { vector-effect: non-scaling-stroke; }
.pvt-acc .code { position: absolute; left: 5.8%; top: 13%; font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12.5px; line-height: 1.75; color: rgba(245,243,234,0.72); letter-spacing: 0.02em; }
@media (max-width: 560px) { .pvt-acc .code { font-size: 10.5px; } }
.pvt-acc .code .k { color: rgba(245,243,234,0.45); }
.pvt-acc .code .add { color: #ff9a7e; }
.pvt-acc .code-line { display: block; overflow: hidden; white-space: nowrap; width: 0; }
.pvt-acc .accfig.active .code-line { animation: bpType 1.5s steps(30, end) forwards; }
.pvt-acc .accfig.active .code-line:nth-child(2) { animation-delay: 1.6s; }
.pvt-acc .accfig.active .code-line:nth-child(3) { animation-delay: 3.2s; }
.pvt-acc .accfig.active .code-line:nth-child(4) { animation-delay: 4.8s; }
.pvt-acc .code-caret { display: inline-block; width: 8px; height: 15px; background: #ff7759;
  vertical-align: -2px; opacity: 0; }
.pvt-acc .accfig.active .code-caret { opacity: 1; animation: bpBlink 1s steps(1) infinite; }
@keyframes bpType { to { width: 100%; } }
@keyframes bpBlink { 50% { opacity: 0; } }
/* pvt harness: 9 categories in three groups (2026-08-14) */
.pvt-acc .pvt-group { display: grid; grid-template-columns: auto 1fr; column-gap: 22px; row-gap: 8px;
  align-items: baseline; border-top: 1px solid rgba(245,243,234,0.16); padding-top: 26px; margin: 96px 0 48px; }
.pvt-acc .sechead + .pvt-group { margin-top: 0; }
.pvt-acc .pvt-gnum { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px;
  letter-spacing: 0.1em; color: #ff7759; margin: 0; }
.pvt-acc .pvt-gtitle { font-size: clamp(21px, 2.3vw, 27px); font-weight: 500; letter-spacing: -0.01em;
  color: #f5f3ea; margin: 0; }
.pvt-acc .pvt-glead { grid-column: 2; max-width: 60ch; font-size: 15.5px; line-height: 1.55;
  color: rgba(245,243,234,0.62); margin: 0; }
@media (min-width: 1024px) {
  .acc.teams.pvt-acc .acc-grid.acc-grid-rev { grid-template-columns: 1fr 1.15fr; }
  .acc-grid.acc-grid-rev .acc-visual { order: 2; }
  .acc-grid.acc-grid-rev .acc-list { order: 1; }
}
body.dark-page .acc.teams .acc-item { border-top-color: rgba(245,243,234,0.28); }
body.dark-page .acc.teams .acc-item:last-child { border-bottom-color: rgba(245,243,234,0.28); }
body.dark-page .acc.teams .acc-head { color: #f5f3ea; }
body.dark-page .acc.teams .acc-desc { color: rgba(245,243,234,0.88); }
body.dark-page .acc.teams .acc-more { color: #f5f3ea; }
body.dark-page .acc.teams .acc-checks li { color: rgba(245,243,234,0.88); }
body.dark-page .acc.teams .acc-checks li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='8' cy='8' r='7.4' stroke='%23f5f3ea' stroke-width='1.2'/%3E%3Cpath d='M4.9 8.4l2.1 2.1 4.1-4.7' stroke='%23f5f3ea' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.pvt-fig-light { background: #f5f3ea; border: 0; }
.pvt-fig-light .odiv2 line { stroke: #f5f3ea; stroke-width: 2.5; }
body.pdep-page .panel { background: #101d19; }
body.pdep-page .mnav { background: #0a1311; }   /* one plane with the petrol bar */

/* ---- partners page: tier cards (the reference /partners "Paths to partnership" crib) ---- */
.pathgrid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 56px; }
@media (min-width: 700px) { .pathgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .pathgrid { grid-template-columns: repeat(4, 1fr); gap: 24px; } }
.pathcard { border: 1px solid #e5e5e5; border-radius: 18px; padding: 32px 28px 36px; }
.pathcard .threeup-icon svg { height: 64px; }
.pathcard h3 { font-size: 20px; font-weight: 400; letter-spacing: -0.01em; margin: 0 0 12px; }
.pathcard p { font-size: 15px; line-height: 1.5; color: var(--ink); margin: 0; }

/* ---- newsroom: dated index rows (our own; "index/divider rowlist" from the library) ---- */
.nwr-hero { padding: 176px var(--pad-x) 64px; }
.nwr-hero h1 { font-size: 48px; font-weight: 400; letter-spacing: -0.02em; margin: 0 0 16px; }
@media (min-width: 1024px) { .nwr-hero h1 { font-size: 76px; } }
.nwr-sub { font-size: 16px; line-height: 1.45; color: var(--ink-soft); max-width: 480px; margin: 0; }
@media (min-width: 1024px) { .nwr-sub { font-size: 18px; } }
.nwr-index { padding: 24px var(--pad-x) 96px; }
.nwr-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #e0e0e0; }
.nwr-list li { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 30px 2px 34px; border-bottom: 1px solid #e0e0e0; }
@media (min-width: 900px) { .nwr-list li { grid-template-columns: 190px 1fr; gap: 40px; padding: 36px 2px 40px; } }
.nwr-meta { display: flex; flex-direction: column; gap: 6px; padding-top: 5px; }
.nwr-date { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.nwr-cat { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.nwr-title { font-size: 22px; font-weight: 400; letter-spacing: -0.01em; margin: 0 0 10px; }
@media (min-width: 1024px) { .nwr-title { font-size: 26px; } }
.nwr-body { font-size: 15.5px; line-height: 1.5; color: var(--ink); max-width: 640px; margin: 0; }
.nwr-links { display: flex; flex-wrap: wrap; gap: 24px; margin: 12px 0 0; font-size: 15px; }
.nwr-press { padding: 40px var(--pad-x) 120px; }

/* ---- customization: light act, lilac tint (pastel of --violet) with a
   full-power violet menu — the page whispers, the menu shouts (Max 2026-08-01) ---- */
body.cust-page { background: #ece8f5; }
body.cust-page .nav { background: #ece8f5; }
body.cust-page .acc-item,
body.cust-page .acc-item:last-child { border-color: #d9d3e6; }
body.cust-page .pillbar { background: #ece8f5; }
body.cust-page .panel,
body.cust-page .mnav {
  background: #6b3fe8;
  color: #f5f3fc;
  border-color: rgba(245,243,252,0.16);
}
body.cust-page .panel { box-shadow: 0 16px 40px -18px rgba(58,26,148,0.6); }
body.cust-page .panel .gitem-name,
body.cust-page .panel .panel-title { color: #f5f3fc; }
body.cust-page .panel .gitem:hover .gitem-name { color: rgba(245,243,252,0.65); }
body.cust-page .panel .gitem-desc,
body.cust-page .panel .fcol-header,
body.cust-page .panel .rescard-desc { color: rgba(245,243,252,0.6); }
body.cust-page .panel-foot { border-top-color: rgba(245,243,252,0.2); }
body.cust-page .panel .panel-small { color: rgba(245,243,252,0.85); }
body.cust-page .panel .panel-small:hover { color: #ffffff; }
body.cust-page .panel .rescard-title { color: #f5f3fc; }
/* the gradient hover-underline drowns in the violet panel — same gradient, pastel-light */
body.cust-page .panel a::after { background: linear-gradient(to right, #ffc9bd, #dccffc, #b6c5f5); }
/* the mobile sheet is the page surface (one plane with the lilac bar, the reference's grammar); the violet stays the desktop panel's voice */
body.cust-page .mnav { background: #ece8f5; color: var(--ink-strong); --mn-bg: #ece8f5; --mn-soft: rgba(58,26,148,0.55); --mn-band: rgba(58,26,148,0.07); --mn-rule: rgba(58,26,148,0.14); }

/* partners strip: light artwork gets inverted for the white page */
.logostrip-mark.mark-invert { filter: invert(1); }

/* ---- about, black version (the reference /about crib: hero > mission+media > story eras >
   founders cards > born-in-Helsinki band > news pointer > ctaband) ---- */
.abd-hero .ahero-title { color: #f5f3ea; }
.abd-hero .ahero-sub { color: rgba(245,243,234,0.75); }
/* the hero panorama keeps its native 4:1 sweep (Stocksy 1066511, Max 2026-08-15) */
.abd-hero .ahero-media { aspect-ratio: 1200 / 298; background: #0e0e12; }
/* about-page section titles: quiet labels, not statements (Max 2026-08-02) */
.sec-left-title { text-align: left; font-size: 20px; font-weight: 500; letter-spacing: -0.01em; color: rgba(245,243,234,0.85); margin-bottom: 40px; }
.abd-mission-grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
@media (min-width: 1024px) { .abd-mission-grid { grid-template-columns: 1.2fr 1fr; gap: 96px; } }
.abd-mission-line { font-size: clamp(32px, 3.4vw, 46px); font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; color: #f5f3ea; margin: 28px 0 0; }
.abd-mission-media { margin: 0; border-radius: 14px; overflow: hidden; background: rgba(245,243,234,0.06); aspect-ratio: 4 / 3; }
.abd-mission-media img { width: 100%; height: 100%; object-fit: cover; }
.abd-mission-sketch svg { width: 100%; height: 100%; display: block; }
.abd-story-cards { display: grid; grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 900px) { .abd-story-cards { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.abd-story-cards .card-media { background: rgba(245,243,234,0.06); }
.abd-story-cards .card-meta { color: rgba(245,243,234,0.55); }
.abd-story-cards .card-text { color: #f5f3ea; }
.abd-tilt { transform: rotate(-2.5deg); }
#story .sp-media.abd-tilt { max-width: 400px; width: 100%; justify-self: center; }
/* Foundations polaroid stack (Max 2026-08-20): founders print front, whiteboard prints behind.
   wb-1/wb-2 assets are privacy-downsampled (150px destroy pass) so board writing is unreadable at any zoom. */
.abd-polstack, .spanel.st-pink .sp-media.abd-polstack { position: relative; aspect-ratio: auto; background: none; overflow: visible; border-radius: 0; max-width: 440px; width: 100%; justify-self: center; min-height: 380px; }
.abd-pol { position: absolute; background: #ffffff; padding: 8px 8px 36px; border-radius: 3px; box-shadow: 0 6px 18px rgba(23,23,28,0.16); }
.abd-pol img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: 0; }
.abd-pol-wb1 { width: 48%; left: -3%; top: 0; transform: rotate(-8deg); z-index: 1; }
.abd-pol-mac { width: 38%; right: -3%; top: 24px; transform: rotate(8deg); z-index: 0; }
.abd-pol-wb1 img { aspect-ratio: 5 / 3; }
.abd-pol-mac img { aspect-ratio: auto; }
.abd-pol-office { width: 40%; left: 30%; top: -18px; transform: rotate(4deg); z-index: 2; }
.abd-pol-office img { aspect-ratio: auto; }
.abd-pol-front { width: 62%; left: 19%; top: 66px; transform: rotate(-2.5deg); z-index: 3; }
.abd-pol-front img { aspect-ratio: 4 / 3; }
/* story panels: the reference timeline-card scale — smaller than the harness stack */
#story .sp-title { font-size: clamp(30px, 3vw, 44px); margin: 0 0 18px; }
#story .sp-desc { font-size: 17px; line-height: 1.5; max-width: 460px; }
#story .sp-desc-2 { margin-top: 16px; }
.sp-desc-2 { opacity: 0.85; }   /* class-level so the reveal rail can hide and fade it like its siblings */
#story .sp-eyebrow { margin-bottom: 18px; }
.abd-li { display: inline-flex; margin-left: 10px; color: rgba(245,243,234,0.55); vertical-align: baseline; }
.abd-li:hover { color: #f5f3ea; }
.abd-eras { list-style: none; margin: 0; padding: 0; }
.abd-eras li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; border-top: 1px solid rgba(245,243,234,0.14); padding: 26px 2px; }
@media (min-width: 1024px) { .abd-eras li { grid-template-columns: 88px 300px 1fr 240px; gap: 32px; padding: 30px 2px; align-items: start; } }
.abd-eras li:last-child { border-bottom: 1px solid rgba(245,243,234,0.14); }
.abd-era-thumb { margin: 0; grid-column: 4; border-radius: 10px; overflow: hidden; background: rgba(245,243,234,0.06); aspect-ratio: 3 / 2; }
.abd-era-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 1023px) { .abd-era-thumb { grid-column: 2; max-width: 320px; margin-top: 8px; } }
.abd-contrib { display: flex; align-items: baseline; gap: 32px; border-top: 1px solid rgba(245,243,234,0.14); margin-top: 48px; padding-top: 20px; max-width: 760px; }
.abd-contrib-names { font-size: 13px; color: #f5f3ea; }
.abd-credits { margin-top: 48px; max-width: 520px; }
.abd-credits > div { display: flex; align-items: baseline; gap: 32px; border-top: 1px solid rgba(245,243,234,0.14); padding: 16px 2px; }
.abd-credits > div:last-child { border-bottom: 1px solid rgba(245,243,234,0.14); }
.abd-credits .abd-rl { flex: none; width: 180px; }
/* team geometry (Max 2026-08-24): photos row and credits table share one column recipe, so
   Brian's photo and the names column align by construction. */
@media (min-width: 768px) {
  .abd-people { --abd-col: 180px; --abd-gap: 56px; }
  .abd-people .abd-people-grid { grid-template-columns: var(--abd-col) var(--abd-col); gap: var(--abd-gap); max-width: none; }
  .abd-people .abd-credits > div { display: grid; grid-template-columns: var(--abd-col) 1fr; column-gap: var(--abd-gap); padding: 16px 0; }
  .abd-people .abd-credits .abd-rl { width: auto; }
}
.abd-era-year { font-size: 13px; letter-spacing: 0.12em; opacity: 0.45; padding-top: 4px; }
.abd-era-title { font-size: 20px; font-weight: 400; }
.abd-era-body { font-size: 15.5px; line-height: 1.5; color: rgba(245,243,234,0.72); max-width: 560px; }
@media (max-width: 1023px) { .abd-era-body { grid-column: 2; } }
.abd-people-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 400px; }
@media (min-width: 768px) { .abd-people-grid { gap: 40px; } }
.abd-person { margin: 0; }
.abd-photo { aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: rgba(245,243,234,0.06); }
.abd-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.abd-photo--zoom img { transform: scale(2.25); transform-origin: 47% 24%; }
.abd-photo--zoom-b img { transform: scale(1.22); transform-origin: 50% 30%; }
.abd-person figcaption, .abd-home-fig figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 12px; }
.abd-person .abd-nm { font-size: 13.5px; white-space: nowrap; }
.abd-person .abd-rl { font-size: 11.5px; white-space: nowrap; }
.abd-nm { font-size: 15.5px; font-weight: 500; color: #f5f3ea; }
.abd-rl { font-size: 13px; color: rgba(245,243,234,0.6); }
.abd-home-fig { margin: 0; }
.abd-home-band { aspect-ratio: 2.35 / 1; border-radius: 14px; overflow: hidden; background: rgba(245,243,234,0.06); }
.abd-home-band img { width: 100%; height: 100%; object-fit: cover; }
.abd-news { padding-top: 24px; }
.abd-news-row { display: flex; align-items: baseline; justify-content: space-between; gap: 32px; border-top: 1px solid rgba(245,243,234,0.14); padding-top: 40px; flex-wrap: wrap; }
.abd-news-title { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; margin: 0; }
body.dark-page .abd-news .sp-link { margin-top: 0; }

/* ---- about: single Swiss act — mission left, founders right, one screen ---- */
.abt { min-height: 100svh; display: flex; align-items: stretch; padding: 128px var(--pad-x) 64px; }
.abt-grid { display: grid; grid-template-columns: 1fr; gap: 64px; width: 100%; }
@media (min-width: 1024px) { .abt-grid { grid-template-columns: 1fr 1fr; gap: clamp(64px, 9%, 140px); } }
.abt-left { align-self: center; }
.abt-eyebrow { font-size: 13px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 36px; }
.abt-mission { font-size: clamp(38px, 4.3vw, 62px); font-weight: 600; line-height: 1.05; letter-spacing: -0.03em; color: var(--ink-strong); margin: 0; }
.abt-founders { list-style: none; margin: 56px 0 0; padding: 0; max-width: 420px; }
.abt-founders li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-top: 1px solid #e0e0e0; padding: 14px 2px; }
.abt-founders li:last-child { border-bottom: 1px solid #e0e0e0; }
.abt-hq { margin: 0; align-self: center; max-width: 520px; width: 100%; justify-self: end; }
.abt-hq figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 14px; }
.abt-people { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-self: end; }
@media (min-width: 1024px) { .abt-people { grid-template-columns: 1fr; gap: 40px; max-width: 300px; justify-self: end; } }
.abt-person { margin: 0; }
.abt-photo { aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: var(--placeholder); }
.abt-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.abt-person figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 14px; }
.abt-name { font-size: 15.5px; font-weight: 500; }
.abt-role { font-size: 13px; color: var(--ink-soft); letter-spacing: 0.02em; }

.pdep-hero { position: relative; overflow: hidden; padding: 200px var(--pad-x) 120px; }
.pdep-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pdep-hero::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(10,19,17,0.5) 0%, rgba(10,19,17,0.2) 55%, #0a1311 100%); }
.pdep-hero .wrap { position: relative; z-index: 1; }
.pdep-hero .hero-eyebrow { color: rgba(245,243,234,0.55); }
.pdep-hero h1 { font-size: clamp(44px, 6vw, 80px); font-weight: 300; line-height: 1.05; letter-spacing: -0.02em; margin: 0; }
.pdep-sub { font-size: 17px; line-height: 1.5; font-weight: 300; color: rgba(245,243,234,0.75); max-width: 560px; margin: 32px 0 0; }

.pdep-threeup { padding: 24px var(--pad-x) 104px; }
.pdep-threeup h2 { font-size: 32px; font-weight: 300; letter-spacing: -0.01em; margin: 0 0 48px; }
.pdep-cards { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .pdep-cards { grid-template-columns: 1fr 1fr 1fr; gap: 24px; } }
.pdep-card { background: rgba(245,243,234,0.04); border: 1px solid rgba(245,243,234,0.1); border-radius: 18px; padding: 36px 32px 40px; }
.pdep-card h3 { font-size: 21px; font-weight: 400; margin: 0 0 14px; }
.pdep-card p { font-size: 15px; line-height: 1.55; color: rgba(245,243,234,0.72); margin: 0; }

.pdep-where { padding: 24px var(--pad-x) 120px; }
.pdep-where h2 { font-size: 32px; font-weight: 300; letter-spacing: -0.01em; margin: 0 0 14px; }
.pdep-where-lead { font-size: 16px; line-height: 1.55; font-weight: 300; color: rgba(245,243,234,0.75); margin: 0 0 44px; }
.pdep-where-note { margin: 28px 0 0; font-size: 14.5px; line-height: 1.5; color: rgba(245,243,234,0.55); }
.pdep-glist { list-style: none; margin: 0; padding: 0; }
.pdep-glist li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; border-top: 1px solid rgba(245,243,234,0.14); padding: 26px 2px; }
@media (min-width: 1024px) { .pdep-glist li { grid-template-columns: 88px 340px 1fr; gap: 32px; padding: 30px 2px; } }
.pdep-num { font-size: 13px; letter-spacing: 0.12em; opacity: 0.45; padding-top: 4px; }
.pdep-glead { font-size: 20px; font-weight: 400; }
.pdep-gdesc { font-size: 15.5px; line-height: 1.5; color: rgba(245,243,234,0.72); max-width: 560px; }
@media (max-width: 1023px) { .pdep-gdesc { grid-column: 2; } }

.pdep-stack { padding: 24px var(--pad-x) 136px; }
.pdep-stack h2 { font-size: 32px; font-weight: 300; letter-spacing: -0.01em; margin: 0 0 20px; }
.pdep-stack-lead { font-size: 16px; line-height: 1.55; font-weight: 300; color: rgba(245,243,234,0.75); max-width: 640px; margin: 0 0 48px; }
.pdep-ladder { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .pdep-ladder { grid-template-columns: repeat(4, 1fr); } }
.pdep-cell { border-radius: 14px; padding: 26px 24px 30px; background: rgba(245,243,234,0.04); border: 1px solid rgba(245,243,234,0.1); }
.pdep-cell.yours { background: var(--sand); border-color: var(--sand); color: var(--ink-strong); }
.pdep-cell-name { display: block; font-size: 17px; font-weight: 400; margin-bottom: 6px; }
.pdep-cell-sub { display: block; font-size: 13.5px; line-height: 1.45; color: rgba(245,243,234,0.6); }
.pdep-cell.yours .pdep-cell-sub { color: rgba(23,23,28,0.62); }
.pdep-stack-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 36px; font-size: 15.5px; color: rgba(245,243,234,0.8); text-decoration: none; }
.pdep-stack-link:hover { color: #f5f3ea; }

/* ================= TP Warehouse page (compass-grammar crib; Max 2026-08-06) ================= */
/* centered light hero — Compass grammar: eyebrow, h1, sub, CTA all on the page axis */
.twh-hero { padding: 190px var(--pad-x) 64px; text-align: center; }
/* title = .ahero-title (same class as the agents pages — one source, no local override) */
.twh-hero .gitem-new { margin-left: 10px; vertical-align: 1px; }
.twh-sub { font-size: 17px; line-height: 1.5; color: var(--ink-soft); max-width: 620px; margin: 28px auto 0; text-wrap: balance; }
.twh-hero .btn-primary { margin-top: 36px; }

/* ---------- reveal rail: text rises in on first view; media stays still ----------
   Grammar (docs/functionality.md "Reveal rail"; mechanism measured on the reference site 2026-08-22):
   .rv             one text element rises by itself; ADJACENT .rv siblings form a group and
                   stagger in DOM order (section title -> lead).
   [data-rv]       a unit whose direct text children are the pieces (h1-h6, p, ul/ol, li, a,
                   .rv-p); pieces stagger; units that cross the line together stagger by column.
   [data-rv=hero]  same unit, hero timing (fires the moment any pixel shows = on load).
   [data-rv-row]   the visual row/card/band a unit shares with media. When another child of the
                   row sits laterally beside the unit OR starts above it (a card picture, a band's
                   background, a figure beside the copy) the unit rises as it ENTERS the viewport
                   (--rv-line-media) — copy can sit below the reading line for a long time next to
                   or under a settled image; a row whose media comes AFTER the copy (stacked phone
                   layouts) is standalone text and waits for the line.
   .rv-p / .rv-x   force a child in / out of the piece set.
   Gate: html.js-reveal is set by the inline script at the top of <body> (partials/nav.html; the
   trust bar in scripts/build-trust.py) and lifted if the rail does not start, so content can
   never stay hidden. The hidden values apply only until a unit is .inview and the transition
   only until it is .rv-done, so every piece lands on its OWN cascaded opacity/transform (dimmed
   eyebrows stay dimmed, hover transitions come back). Reduced motion and print never see the rail.
   TOKENS: this :root block is the ONLY place timing lives. */
:root {
  --rv-dur: .5s;        /* the reference: fadeInUp .5s ease-in-out */
  --rv-ease: ease-in-out;
  --rv-rise: 14px;      /* the reference rises 25% of the element's own height; ours is one fixed step */
  --rv-stagger: .1s;    /* piece to piece: eyebrow -> title -> lead -> CTA (the reference 0/.1/.2) */
  --rv-colstep: .1s;    /* card to card across one visual row (the reference 100ms per card) */
  --rv-line: 90;        /* reading line, % of viewport height a unit's top must cross (JS reads it). Was 60 (Max 2026-08-06);
                           90 since Max 2026-08-23 "text animation starts at 50% of screen height or below, feels slow":
                           text now rises as it enters, a hair inside the bottom edge so the motion is seen */
  --rv-line-media: 100; /* the line for copy ON, UNDER or BESIDE media (inside [data-rv-row]): 100 = rises the
                           moment it enters (the reference's trigger; Max 2026-08-23 "sooner" on the lineup band + event cards) */
}
[data-rv="hero"] { --rv-dur: .6s; --rv-rise: 22px; --rv-stagger: .12s; }

@media screen and (prefers-reduced-motion: no-preference) {
  html.js-reveal .rv:not(.rv-done),
  html.js-reveal [data-rv]:not(.rv-done) > :is(h1, h2, h3, h4, h5, h6, p, ul, ol, li, a, .rv-p):not(.rv-x) {
    transition: opacity var(--rv-dur) var(--rv-ease), transform var(--rv-dur) var(--rv-ease);
    transition-delay: calc(var(--rv-i, 0) * var(--rv-stagger) + var(--rv-col, 0) * var(--rv-colstep));
  }
  html.js-reveal .rv:not(.inview),
  html.js-reveal [data-rv]:not(.inview) > :is(h1, h2, h3, h4, h5, h6, p, ul, ol, li, a, .rv-p):not(.rv-x) {
    opacity: 0;
    transform: translateY(var(--rv-rise));
  }
}

/* lineup picture variant: background + almost-entire product shot, no copy (Max 2026-08-06) */
.lineup-pic .lineup-shot { top: 12%; left: 20%; }
.lineup-pic .lineup-shot img { width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block; }

/* demo-request close (Compass grammar): title + checks left, white card right */
.twh-demo { background: #e9edf2; padding: 96px var(--pad-x) 108px; }
.twh-demo-grid { display: grid; gap: 48px; }
@media (min-width: 1024px) { .twh-demo-grid { grid-template-columns: 1.1fr 1fr; gap: 96px; align-items: start; } }
.twh-demo-title { font-size: 38px; font-weight: 400; line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 18px; max-width: 520px; }
@media (min-width: 1024px) { .twh-demo-title { font-size: 50px; } }
.twh-demo-sub { font-size: 16px; line-height: 1.5; color: var(--ink-soft); max-width: 460px; margin: 0 0 30px; }
.twh-demo-card { background: #ffffff; border-radius: 16px; padding: 40px 36px 44px; }
.twh-demo-card h3 { font-size: 22px; font-weight: 400; margin: 0 0 12px; }
.twh-demo-card p { font-size: 15px; line-height: 1.5; color: var(--ink-soft); margin: 0 0 28px; max-width: 420px; }
.twh-demo-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }

/* program filter (upskill Advanced Programs; Max 2026-08-06): pillbar filters catcards by data-cat */
.catfilter { margin-bottom: 40px; }
.catcard[hidden] { display: none; }

/* ---- data-security: linked platform marks in the certificates strip ---- */
.logostrip-item--link a { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.logostrip-item--link:hover { opacity: 0.92; }

/* ---- data-security hero: 3-beat title needs a wider, fluid box (line 2 = 1013px at 72px) ---- */
.ds-hero .ahero-title { max-width: 1060px; }
@media (min-width: 1024px) { .ds-hero .ahero-title { font-size: clamp(56px, 6.3vw, 72px); } }

/* two product links under one featsplit body (data-security agents block) */
.featsplit-body .acc-more + .acc-more { margin-left: 28px; }

/* ---- data-security: trust bento (ref the reference site/north Private/Secure/Compliant band) ---- */
.ds-bento { background: #17171c; padding: 96px var(--pad-x) 104px; }
.ds-bento-head { font-size: 30px; font-weight: 400; letter-spacing: -0.02em; color: #f5f3ea; margin-bottom: 40px; }
@media (min-width: 1024px) { .ds-bento-head { font-size: 40px; margin-bottom: 48px; } }
.ds-bento-grid { display: grid; gap: 20px; }
@media (min-width: 1024px) {
  .ds-bento-grid { grid-template-columns: repeat(3, 1fr); }
  .ds-card--mesh { grid-column: 1 / 3; grid-row: 1; }
  .ds-card--certs { grid-column: 3; grid-row: 1; }
  .ds-card--trust { grid-column: 1; grid-row: 2; }
  .ds-card--act   { grid-column: 2 / 4; grid-row: 2; }
}
.ds-card { border-radius: 16px; }
.ds-card--mesh { position: relative; overflow: hidden; min-height: 400px; display: flex; align-items: flex-start; background: #0e1a16; }
.ds-card--mesh::before {
  content: ""; position: absolute; inset: -22%;
  background:
    radial-gradient(circle at 24% 30%, rgba(31, 122, 110, 0.55), transparent 55%),
    radial-gradient(circle at 76% 18%, rgba(74, 222, 128, 0.16), transparent 50%),
    radial-gradient(circle at 64% 82%, rgba(76, 110, 230, 0.28), transparent 55%);
  filter: blur(42px);
  animation: ds-drift 36s ease-in-out infinite alternate;
}
.ds-card--mesh::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url(/assets/images/textures/noise.png) repeat; background-size: 160px;
  opacity: 0.22;
}
@keyframes ds-drift {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to   { transform: translate3d(3%, 4%, 0) scale(1.1); }
}
.ds-mesh-content { position: relative; z-index: 1; padding: 36px 40px; max-width: 560px; display: flex; flex-direction: column; gap: 13px; height: 100%; }
.ds-mesh-icon { width: 72px; height: 72px; color: #ffffff; opacity: 0.94; margin-bottom: auto; }
.ds-mesh-icon svg { width: 100%; height: 100%; }
.ds-mesh-content h3 { font-size: 20px; font-weight: 400; color: #ffffff; }
.ds-mesh-content p { font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.78); }
.ds-card-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 14.5px; color: #ffffff; text-decoration: none; }
.ds-card-link:hover .acc-more-arrow { transform: translateX(3px); }
.ds-card-link .acc-more-arrow { transition: transform 0.25s ease; }
.ds-act-flex { display: flex; gap: 40px; align-items: center; justify-content: space-between; height: 100%; }
.ds-act-text { display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.ds-act-text .ds-act-h2 { margin-top: 14px; }
.ds-stars { width: 185px; height: 185px; flex: 0 0 auto; margin-right: 20px; opacity: 0.85; animation: ds-spin 120s linear infinite; }
@keyframes ds-spin { to { transform: rotate(360deg); } }
@media (max-width: 1023px) { .ds-stars { display: none; } }
.ds-card--line { border: 1px solid rgba(255, 255, 255, 0.22); padding: 30px 32px 34px; display: flex; flex-direction: column; gap: 14px; }
.ds-card--line h3 { font-size: 20px; font-weight: 400; color: #ffffff; }
.ds-card--line p { font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.72); }
.ds-card--line .ds-card-kicker { font-size: 16.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.92); }
.ds-marks-list { display: flex; flex-direction: column; gap: 16px; list-style: none; margin: 6px 0 0; padding: 0; }
.ds-bento .logostrip-mark { filter: grayscale(1) brightness(0) invert(1); height: 17px; }
.ds-bento .logostrip-item { opacity: 0.8; gap: 10px; }
.ds-bento .logostrip-item--link a { gap: 10px; }
.ds-bento .logostrip-item--link .acc-more-arrow { font-size: 14.5px; color: rgba(255, 255, 255, 0.72); }
.ds-bento .logostrip-name { color: rgba(255, 255, 255, 0.72); font-size: 14.5px; font-weight: 400; }

/* data-security: taller data-path scenes (1240x1030) override the 620:440 slot */
#paths .featsplit-media { aspect-ratio: 1240 / 1030; }

/* ---------- essay page — article grammar for position pieces (the reference site/blog article
   measured 2026-08-14: sticky written-by rail, takeaways card, prose column) ---------- */
.essay { padding: 64px var(--pad-x) 96px; }
@media (min-width: 768px) { .essay { padding-top: 96px; } }
.essay-grid { display: grid; gap: 48px; max-width: 1320px; margin: 0 auto; }
@media (min-width: 1024px) { .essay-grid { grid-template-columns: 232px minmax(0, 1fr); gap: clamp(64px, 8%, 140px); align-items: start; } }
@media (min-width: 1024px) { .essay-rail { position: sticky; top: 104px; } }
.essay-back { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-size: 15px; margin-bottom: 44px; }
.essay-back:hover { color: var(--ink-soft); }
.rail-thumb { margin: 0 0 32px; }
.rail-thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; display: block; }
/* desktop: chip top sits on the h1's optical cap top (glyph starts 5.6px below the 54px title box;
   extra -8px offsets the rail's sticky shift: sticky top 104px vs natural grid top 96px) */
@media (min-width: 1024px) { .rail-thumb { margin-top: -30.9px; } }
.rail-label { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 14px; }
.rail-author { display: flex; align-items: center; gap: 12px; }
.rail-author img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.rail-author-name { font-size: 14.5px; color: var(--ink); margin: 0; }
.rail-author-role { font-size: 12.5px; color: var(--ink-soft); margin: 2px 0 0; }
.rail-sec { padding-top: 24px; margin-top: 24px; border-top: 1px solid #e5e2da; }
.rail-tag { display: inline-block; padding: 5px 14px; border: 1px solid #d9d5cb; border-radius: 999px; font-size: 13px; color: var(--ink); }
.rail-cta p { font-size: 17px; line-height: 1.35; margin: 0 0 12px; letter-spacing: -0.01em; }
.rail-cta a { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink); text-decoration: none; }
.rail-cta a:hover { color: var(--ink-soft); }
.essay-kicker { font-size: 14px; color: var(--ink-soft); margin: 0 0 18px; }
.essay-title { font-size: 40px; font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 28px; max-width: 720px; }
@media (min-width: 1024px) { .essay-title { font-size: 54px; } }
.essay-body { max-width: 720px; }
.essay-body p { font-size: 17px; line-height: 1.6; margin: 0 0 22px; }
.essay-body h2 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin: 46px 0 16px; }
.essay-body a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.essay-brief { margin: 48px 0 56px; max-width: 720px; }
.diff-figlabel { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 16px; }
.essay-body p.diff-figlabel { font-size: 11px; }
.diffgrid { display: grid; gap: 28px; }
@media (min-width: 768px) { .diffgrid { grid-template-columns: 1fr 1fr; gap: 34px 56px; } }
.diff-item { border-top: 1px solid var(--ink-strong); padding-top: 13px; }
.diff-line { font-size: 20px; font-weight: 400; letter-spacing: -0.01em; line-height: 1.35; margin: 0 0 9px; }
.diff-old { display: block; color: var(--ink-soft); text-decoration: line-through; text-decoration-thickness: 1px; margin-bottom: 2px; }
.diff-p { font-size: 15px; line-height: 1.5; color: #55524b; margin: 0; }
/* cost-of-ownership thin-bar figure — journal alignment: explicit gutters, centered axis label */
.costbars { display: grid; grid-template-columns: 1px 26px 14px 22px 1fr 56px 14px 22px 1fr; column-gap: 0; }
.costbar-head { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 18px; }
.ch-l { grid-column: 3 / 6; grid-row: 1; }
.ch-r { grid-column: 7 / 10; grid-row: 1; }
.cost-yaxis { grid-column: 1; grid-row: 2 / 5; width: 1px; background: var(--ink-strong); position: relative; }
.cost-yaxis::after { content: "COST"; position: absolute; top: 50%; right: 8px; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10px; letter-spacing: 0.14em; color: var(--ink-soft); }
.cost-xaxis { grid-column: 1 / 10; grid-row: 5; height: 1px; background: var(--ink-strong); }
.cs-l1 { grid-column: 3; grid-row: 2; } .ct-l1 { grid-column: 5; grid-row: 2; }
.cs-r1 { grid-column: 7; grid-row: 2; } .ct-r1 { grid-column: 9; grid-row: 2; }
.cs-l2 { grid-column: 3; grid-row: 3; } .ct-l2 { grid-column: 5; grid-row: 3; }
.cs-r2 { grid-column: 7; grid-row: 3; } .ct-r2 { grid-column: 9; grid-row: 3; }
.cs-l3 { grid-column: 3; grid-row: 4; } .ct-l3 { grid-column: 5; grid-row: 4; }
.cs-r3 { grid-column: 7; grid-row: 4; } .ct-r3 { grid-column: 9; grid-row: 4; }
.costseg { border-bottom: 3px solid var(--bg); }
.costseg.cs-l3, .costseg.cs-r3 { border-bottom: 0; }   /* bars stand on the x axis */
.seg-dark { background: #1f1e1b; }
.seg-mid { background: #8a877f; }
.seg-light { background: #d8d5cc; }
.seg-short { margin-top: 26px; }    /* shorter than the DIY counterpart, bottom edges align via shared rows */
.seg-short2 { margin-top: 30px; }
.costseg.cs-r2 { margin-top: 38px; }  /* build+upkeep with us cheaper than DIY expert layer */
.costtxt { padding: 0 0 26px; }
.ct-l3, .ct-r3 { padding-bottom: 14px; }
.costtxt-title { font-size: 16px; font-weight: 400; letter-spacing: -0.01em; margin: 0 0 3px; }
.costtxt-sub { font-size: 13.5px; line-height: 1.45; color: #55524b; margin: 0; }
.costtxt-list { list-style: none; margin: 2px 0 0; padding: 0; font-size: 13.5px; color: #55524b; }
.costtxt-list li { padding: 2px 0; }
@media (max-width: 640px) {
  .costbars { grid-template-columns: 1px 26px 14px 18px 1fr; }
  .cost-xaxis { grid-column: 1 / 6; }
  .ch-l { grid-column: 3 / 6; }
  .ch-r { grid-column: 3 / 6; grid-row: 6; margin-top: 32px; }
  .cs-r1 { grid-column: 3; grid-row: 7; } .ct-r1 { grid-column: 5; grid-row: 7; }
  .cs-r2 { grid-column: 3; grid-row: 8; } .ct-r2 { grid-column: 5; grid-row: 8; }
  .cs-r3 { grid-column: 3; grid-row: 9; } .ct-r3 { grid-column: 5; grid-row: 9; }
}

/* ---------- Curiosity (blog index) — the reference site/blog grammar in our tokens:
   display title + why-line, featured split, card grid w/ glyph thumbs (2026-08-14) ---------- */
.cur-hero { padding: 150px var(--pad-x) 8px; }
.cur-wrap { max-width: var(--wrap-max); margin: 0 auto; width: 100%; } /* aligned to the logo like every page (Max 2026-08-15) */
.cur-title { font-size: 56px; font-weight: 400; letter-spacing: -0.02em; margin: 0 0 18px; }
@media (min-width: 1024px) { .cur-title { font-size: 76px; } }
.cur-why { font-size: 16px; line-height: 1.4; max-width: 560px; margin: 0; }
@media (min-width: 1024px) { .cur-why { font-size: 18px; } }
.cur-sec { padding: 44px var(--pad-x) 24px; }
.cur-feat-grid { display: grid; gap: 48px; }
@media (min-width: 1024px) { .cur-feat-grid { grid-template-columns: 1.85fr 1fr; gap: clamp(48px, 5%, 72px); } }
.cur-stack { display: grid; gap: 36px; align-content: space-between; }
.cur-card { display: block; text-decoration: none; color: var(--ink); }
.cur-thumb { aspect-ratio: 16 / 9; border-radius: 14px; display: grid; place-items: center; margin-bottom: 18px; }
.cur-thumb svg { width: 72px; height: 72px; fill: none; stroke: var(--ink-strong); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.cur-thumb.cur-photo { overflow: hidden; display: block; }
.cur-thumb.cur-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cur-feat .cur-thumb svg { width: 108px; height: 108px; stroke-width: 1.1; }
@media (min-width: 1024px) { .cur-feat .cur-thumb { aspect-ratio: 3 / 2; } }
.cur-t1 { background: var(--sand); }
.cur-t2 { background: var(--accent-soft); }
.cur-t3 { background: #f0ebe0; }
.cur-tag { display: inline-block; padding: 4px 13px; border: 1px solid #d9d5cb; border-radius: 999px; font-size: 13px; color: var(--ink); margin-bottom: 12px; }
.cur-card-title { font-size: 22px; font-weight: 400; line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 8px; transition: color 0.2s ease; }
.cur-card:hover .cur-card-title { color: var(--ink-soft); }
.cur-feat .cur-card-title { font-size: 34px; }
@media (min-width: 1024px) { .cur-feat .cur-card-title { font-size: 42px; } }
.cur-card-dek { font-size: 15px; line-height: 1.5; color: var(--ink-soft); margin: 0 0 12px; max-width: 56ch; }
.cur-meta { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin: 0; }
.cur-grid { display: grid; gap: 48px 40px; padding-bottom: 96px; }
@media (min-width: 768px) { .cur-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .cur-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- blog figure — the editorial diagram register (docs/blog-viz.md) ---------- */
.bv-break { width: min(92vw, 980px); margin: 40px auto; margin-left: 50%; transform: translateX(-50%); }
.bv-title { font-size: 17px; font-weight: 600; margin: 0 0 12px; }
.bv-break svg { width: 100%; height: auto; display: block; }
.bv-note { font-size: 14px; line-height: 1.5; color: var(--ink-soft); margin: 12px auto 0; max-width: 640px; }
/* Footnote markers must never distort the line grid: kill the sup's influence on
   line height (line-height 0 + relative raise instead of vertical-align: super). */
.fnref { vertical-align: baseline; position: relative; top: -0.45em; font-size: 0.68em; line-height: 0; }
.fnref a { text-decoration: none; color: inherit; }
/* Example snippet — the essay's analog of a docs code block, for business readers.
   Warm paper tint, mono EXAMPLE eyebrow, one size down from body. */
.ex { display: block; background: #f6f5f0; border-radius: 10px; padding: 13px 16px 12px; margin: 12px 0 6px; font-size: 14.5px; line-height: 1.6; color: #57544d; }
.essay-body > .ex { margin: 0 0 22px; }
.ex-label { display: block; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #a49e90; margin: 0 0 5px; }
.essay-body ul { list-style: disc; margin: 0 0 26px; padding-left: 22px; }
.essay-body li { font-size: 17px; line-height: 1.6; margin: 0 0 16px; }
.essay-body li::marker { color: #b9b4a8; }
.post-sources { font-size: 14px; line-height: 1.65; color: var(--ink-soft); padding-left: 18px; margin: 0; }
.post-sources li { margin-bottom: 6px; }
.post-sources a { color: inherit; }

/* essay-scoped figure breakout stays inside the content column */
.essay .bv-break { width: 100%; margin: 40px 0; margin-left: 0; transform: none; }

/* Curiosity tag filter + wide featured card (Max 2026-08-14) */
.cur-pills { display: flex; flex-wrap: wrap; gap: 10px; padding: 28px 0 8px; }
.cur-pill { padding: 8px 18px; border: 1px solid #d9d5cb; border-radius: 999px; font-family: var(--ff);
  font-size: 14px; color: var(--ink); background: none; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
.cur-pill:hover { background: #f2efe8; }
.cur-pill.active { background: var(--ink-strong); border-color: var(--ink-strong); color: #ffffff; }
.cur-card.hide { display: none; }
.cur-wide { grid-column: 1 / -1; display: grid; gap: 20px; }
@media (min-width: 768px) { .cur-wide { grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 5%, 64px); align-items: center; } }
.cur-wide .cur-thumb { margin-bottom: 0; }
@media (min-width: 768px) { .cur-wide .cur-thumb { aspect-ratio: 16 / 9; } }
.cur-wide .cur-card-title { font-size: 30px; }
@media (min-width: 1024px) { .cur-wide .cur-card-title { font-size: 38px; } }

/* blog cards: glass third (Max 2026-08-22) — left third frosted, bold white topic icon, only on patterned pictures */
.cur-photo.cur-glass { position: relative; }
.cur-photo.cur-glass::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 33.333%; backdrop-filter: blur(14px) saturate(.8); -webkit-backdrop-filter: blur(14px) saturate(.8); background: rgba(255,255,255,.42); border-right: 1px solid rgba(255,255,255,.55); pointer-events: none; }
.cur-photo.cur-glass .gl-ico { position: absolute; z-index: 2; left: calc(16.667% - 19px); top: calc(50% - 19px); width: 38px; height: 38px; fill: none; stroke: #ffffff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 2px rgba(0,0,0,.28)); }
.cur-wide .cur-photo.cur-glass .gl-ico { width: 56px; height: 56px; left: calc(16.667% - 28px); top: calc(50% - 28px); }

/* tacit-knowledge Fig. 1 — history timeline */
.tkfig { margin: 28px 0 34px; }
.tk-timeline { position: relative; height: 190px; }
.tk-line { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #d8d4c8; }
.tk-dot { position: absolute; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: #17171c; transform: translate(-50%, -50%); }
.tk-lab { position: absolute; width: 150px; margin-left: -75px; font-size: 12.5px; line-height: 1.35; color: var(--ink-soft); text-align: center; }
.tk-lab.up { bottom: calc(50% + 13px); }
.tk-lab.down { top: calc(50% + 13px); }
.tk-lab.edge-l { width: 130px; margin-left: 0; text-align: left; }
.tk-lab.edge-r { width: 140px; margin-left: -140px; text-align: right; }
.tk-lab.nudge-l { margin-left: -100px; }
.tk-lab.nudge-r { margin-left: -50px; }
.tkl-y { display: block; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10.5px; letter-spacing: 0.12em; color: #a49e90; margin-bottom: 3px; }
@media (max-width: 679px) {
  .tk-timeline { height: auto; border-left: 1px solid #d8d4c8; padding-left: 20px; }
  .tk-line, .tk-dot { display: none; }
  .tk-lab { position: relative; display: block; width: auto; margin: 0 0 16px; text-align: left; left: auto !important; top: auto; bottom: auto; }
  .tk-lab.edge-l, .tk-lab.edge-r { width: auto; margin-left: 0; text-align: left; }
  .tk-lab::before { content: ""; position: absolute; left: -23.5px; top: 3px; width: 7px; height: 7px; border-radius: 50%; background: #17171c; }
}

/* long-horizon article figures (2026-08-19): blog-viz inline-SVG grammar, lh- namespace */
.lhfig { margin: 28px 0 34px; }
.lhfig-pair { display: flex; gap: 26px; }
.lhfig-pair svg { flex: 1 1 0; min-width: 0; height: auto; }
.lhfig-loop svg { display: block; width: 100%; max-width: 440px; margin: 0 auto; height: auto; }
@media (max-width: 679px) {
  .lhfig-pair { flex-direction: column; gap: 16px; }
  .lhfig-pair svg { flex: 0 0 auto; width: 100%; } /* flex-basis 0 in a column container collapsed the SVGs to 0 height on phones (found 2026-08-22) */
}

/* footnote round-trip (Max 2026-08-18): smooth glide is JS-driven in main.js —
   html{scroll-behavior:smooth} silently breaks Chrome's fragment scrolling on long pages */
.fnref { scroll-margin-top: 104px; }
.post-sources li { scroll-margin-top: 104px; }
.fnback { text-decoration: none; padding: 0 2px; }
.fnback:hover { color: var(--ink); }

/* ---- AI Deployment Program page (2026-08-19) ---- */
/* ink band family: the program that carries all four audience colors, so it takes none of them */
.band-ink { --band-bg: #16161d; --band-panel: #24242e; --band-accent: #d8d3c5; }
/* 4-pillar open-column variant of the threeup grid (Max 2026-08-19: value pillars stay the
   open home-style columns, never bordered cards) */
@media (min-width: 768px) { .threeup-grid.threeup-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .threeup-grid.threeup-4 { grid-template-columns: repeat(4, 1fr); gap: 32px; } }


/* ===== Contact page — the .ctaform construction at hero scale (Max picked D, 2026-08-20) =====
   Same material as the 9 inline page-closers (orange grain, white card); the card grows to the
   full field set. Form markup = partials/contactform.html (stamped); copy/presets = js/contact-config.js. */
.ctaform-hero { padding-top: calc(var(--nav-h, 76px) + 72px); padding-bottom: 112px; }  /* nav is fixed: the hero carries the offset (plpage grammar) */
.ctaform-eyebrow { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); margin: 0 0 22px; font-weight: 500; }
.ctaform-hero .ctaform-title { max-width: 520px; }
.ctaform-who { display: flex; align-items: center; gap: 12px; margin-top: 44px; font-size: 14px; color: rgba(255, 255, 255, 0.8); }
.ctaform-who img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: center 20%; display: block; }
.ctaform-who b { font-weight: 500; color: #ffffff; }
.ctaform-card-wide { max-width: 640px; }
.ctaform-full .ctaform-card { padding: 36px 32px; }
.field select { width: 100%; font: inherit; font-size: 15px; color: var(--ink); border: 1px solid #e2e2e2; border-radius: 8px; padding: 10px 34px 10px 12px; background-color: var(--bg); transition: border-color 0.2s ease; -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23757575' stroke-width='1.4'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; }
.field select:focus { outline: none; border-color: var(--ink-strong); }
.field select.is-empty { color: var(--ink-soft); }
.field textarea::placeholder { color: var(--ink-soft); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-block; padding: 6px 12px; border: 1px solid #e2e2e2; border-radius: 999px; font-size: 13.5px; line-height: 1.2; cursor: pointer; user-select: none; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.chip input:checked + span { background: var(--ink-strong); color: #ffffff; border-color: var(--ink-strong); }
.chip input:focus-visible + span { outline: 2px solid var(--ink-strong); outline-offset: 2px; }
.field-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.4; color: var(--ink-soft); margin: 4px 0 20px; cursor: pointer; }
.field-check input { margin: 2px 0 0; accent-color: #17171c; width: 15px; height: 15px; flex: none; }
.field-check b { font-weight: 500; color: var(--ink); }
.form-legal { font-size: 12px; line-height: 1.4; color: var(--ink-soft); margin: 14px 0 0; }
.form-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ctaform-hero + .logostrip { padding-top: 88px; }
@media (max-width: 1023px) {
  .ctaform-hero { padding-top: calc(var(--nav-h, 76px) + 40px); padding-bottom: 72px; }
  .ctaform-hero .ctaform-title { font-size: 40px; }
  .ctaform-full .ctaform-card { max-width: none; }
}

/* ===== .btn-cta — THE demo pill, one component: partials/ctabtn.html, stamped everywhere (Max 2026-08-20).
   One markup; the surface styles it: light on CTA band closers, ink in the top bar (one step shorter — long label),
   ink-primary in the TWH demo card / auth top bar, full-width in the mobile sheet foot. ===== */
.btn-cta { background: #ffffff; color: var(--ink-strong); padding: 12px 24px; font-size: 16px; }
.btn-cta:hover { background: var(--hairline); }
.nav .btn-cta, .auth-top .btn-cta, .twh-demo .btn-cta { background: var(--ink-strong); color: #ffffff; padding: 12px 16px; font-size: 14px; }
.nav .btn-cta:hover, .auth-top .btn-cta:hover, .twh-demo .btn-cta:hover { background: var(--ink-strong-2); }
.nav > .nav-actions > .btn-cta, .auth-top .btn-cta { padding: 9px 16px; }   /* the shorter top-bar pill */

/* ===== .field-float — label inside the box, floats to the border on focus/fill (Max 2026-08-20, the reference-measured:
   label absolute + centered at rest; focus/fill → top:0 translateY(-50%), 16→12px, white bg + 4px side padding cuts
   the border = the notch; everything on a 0.2s transition). Ours: 15→12px, ink-soft→ink, our 1px ink focus border.
   Markup order matters: control first, then .field-label (sibling selectors). Inputs carry placeholder=" ". ===== */
.field-float { position: relative; }
.field-float input, .field-float select, .field-float textarea { padding-top: 15px; padding-bottom: 15px; }
.field-float textarea { min-height: 112px; }
.field-float .field-label { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); margin: 0 0 0 -4px; padding: 0 4px;
  font-size: 15px; font-weight: 400; line-height: 1.2; color: var(--ink-soft); background: #ffffff; pointer-events: none; z-index: 2;
  max-width: calc(100% - 40px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: top 0.2s ease, transform 0.2s ease, font-size 0.2s ease, color 0.2s ease; }
.field-float-area .field-label { top: 24px; }
.field-float input:focus + .field-label, .field-float input:not(:placeholder-shown) + .field-label,
.field-float select:focus + .field-label, .field-float select:not(.is-empty) + .field-label,
.field-float textarea:focus + .field-label, .field-float textarea:not(:placeholder-shown) + .field-label { top: 0; transform: translateY(-50%); font-size: 12px; color: var(--ink); }
.field-float .field-label em { font-size: inherit; }
.field-float .field-label em::before { content: "("; }
.field-float .field-label em::after { content: ")"; }   /* inside a box, "(optional)" reads as the reference's does */
@media (prefers-reduced-motion: reduce) { .field-float .field-label { transition: none; } }
/* contact form breathing room: +4px between fields both ways (Max 2026-08-20) */
.ctaform-full .field { margin-bottom: 20px; }
@media (min-width: 640px) { .ctaform-full .ctaform-row { gap: 20px; } }   /* column gap only: stacked on phones, the row's gap added to each field's margin and doubled the First/Last distance (Max 2026-08-23) */
/* required-field state: red border + label once the visitor leaves an empty/invalid required field (Max 2026-08-20) */
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--accent-strong); }
.field.is-invalid .field-label { color: var(--accent-strong); }
/* focus clears the red (contact.js); a filled-but-invalid field keeps a red floated label until it is fixed */
.field.is-invalid input:not(:placeholder-shown) + .field-label, .field.is-invalid select:not(.is-empty) + .field-label, .field.is-invalid textarea:not(:placeholder-shown) + .field-label { color: var(--accent-strong); }

/* thank-you page (/contact/thank-you/): ahero without media → needs its own bottom padding */
.ahero-thanks { padding-bottom: 72px; }
@media (min-width: 768px) { .ahero-thanks { padding-bottom: 112px; } }
/* select placeholder row reads "Select…" in the list (the reference), but the closed box hides it behind the in-box label at rest
   and shows it grey once focused; list rows stay ink on platforms that style the popup from the select */
.field-float select.is-empty { color: transparent; }
.field-float select.is-empty:focus { color: var(--ink-soft); }
.field-float select option { color: var(--ink); }
.field-float select option[value=""] { color: var(--ink-soft); }
/* contact page submit: natural width, left-aligned (Max 2026-08-21) — the inline cards keep their full-width Send */
.ctaform-full .ctaform-submit { width: auto; padding: 12px 28px; }
/* contact points wrap after "specific" / "journey" / "deploy" at 16px Graphik (Max 2026-08-21, measured 362px) */
.ctaform-full .ctaform-points li { max-width: 362px; }
/* .ctaform-full = the contact form block (contact page hero AND the solutions page closers, 2026-08-21): same partial,
   same rail, same field grammar. .ctaform-hero adds only the nav-offset padding. */

/* =====================================================================================
   TRUST CENTER (Max 2026-08-21): a Legal category in the footer, four documents (Privacy Policy,
   Data Processing Agreement, Security, Terms of Service) plus an overview hub, all under ONE
   sticky top sub-nav so readers move between the items from the top (ref: the reference's trust center
   top bar; our construction, our tokens). Documents use the section-library "legal-prose-article"
   pattern: thin title plate (LAST UPDATED eyebrow + title) -> contents jump-list -> one 720px
   reading column (.essay-body prose grammar reused), then the standard site close.
   ===================================================================================== */
/* Max 2026-08-22: ONE bar on Trust Center pages (no second row, no menu): the main nav's shape with the trust
   links in place of the site menu; the logo is the way back. --nav-h is measured live from .nav offsetHeight. */
:root { --nav-h: 71px; }
.nav-tc { justify-content: flex-start; gap: 40px; }
.nav-tc .nav-logo { flex: none; }
.nav-tc-links { flex: 1 1 0; min-width: 0; display: flex; align-items: stretch; gap: 22px; white-space: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; margin-inline: -4px; padding-inline: 4px; }
.nav-tc-links::-webkit-scrollbar { display: none; }
@media (max-width: 767px) { .nav-tc-links { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); } }
.nav-tc-links a { display: inline-flex; align-items: center; padding: 8px 0; font-size: 14px; color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.2s ease; }
.nav-tc-links a:hover { color: var(--ink); }
.nav-tc-links a.active { color: var(--ink-strong); border-bottom-color: var(--ink-strong); }
@media (min-width: 768px) { .nav-tc { gap: 56px; } .nav-tc-links { gap: 32px; } .nav-tc-links a { font-size: 15px; } }
/* in-page anchors land under the fixed bar */
.tc-page section[id] { scroll-margin-top: calc(var(--nav-h) + 24px); }
/* legal document page */
.legal { padding: calc(var(--nav-h) + 48px) var(--pad-x) 88px; }
@media (min-width: 768px) { .legal { padding-top: calc(var(--nav-h) + 72px); } }
.legal-wrap { max-width: 720px; margin: 0 auto; }
.legal-eyebrow { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 18px; }
.legal-title { font-size: 40px; font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 18px; }
@media (min-width: 1024px) { .legal-title { font-size: 54px; } }
.legal-sub { font-size: 17px; line-height: 1.5; color: var(--ink-soft); margin: 0 0 40px; max-width: 640px; }
.legal-toc { border-top: 1px solid var(--ink-strong); border-bottom: 1px solid #e0e0e0; padding: 22px 0 24px; margin: 0 0 44px; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px 32px; }
@media (min-width: 640px) { .legal-toc ol { grid-template-columns: 1fr 1fr; } }
.legal-toc a { font-size: 14.5px; line-height: 1.4; color: var(--ink); text-decoration: none; display: inline-flex; gap: 10px; }
.legal-toc a:hover { color: var(--ink-soft); }
.legal-toc .toc-n { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; letter-spacing: 0.08em; color: var(--ink-soft); padding-top: 4px; min-width: 18px; }
.legal .essay-body { max-width: none; }
.legal .essay-body h2 { font-size: 19px; font-weight: 500; margin: 52px 0 16px; scroll-margin-top: calc(var(--nav-h) + 28px); }
.legal .essay-body h2:first-child { margin-top: 0; }
.legal .essay-body h3 { font-size: 16.5px; font-weight: 500; letter-spacing: -0.005em; margin: 30px 0 12px; scroll-margin-top: calc(var(--nav-h) + 28px); }
.legal .essay-body p, .legal .essay-body li { font-size: 16.5px; line-height: 1.62; }
.legal .essay-body ol { margin: 0 0 26px; padding-left: 24px; }
.legal .essay-body ol li { margin: 0 0 12px; }
.legal .essay-body ul li { margin: 0 0 12px; }
.legal .essay-body li > ul, .legal .essay-body li > ol { margin: 10px 0 0; }
.legal .essay-body strong { font-weight: 500; }
.legal .essay-body .note { border-left: 2px solid #d9d5cb; padding: 2px 0 2px 18px; color: #55524b; margin: 0 0 26px; }
.legal .essay-body .note p { font-size: 15.5px; margin: 0 0 10px; }
.legal .essay-body .note p:last-child { margin-bottom: 0; }
.legal .essay-body .summary { background: #faf9f6; border-radius: 10px; padding: 18px 22px; margin: 0 0 30px; }
.legal .essay-body .summary p { font-size: 15.5px; margin: 0 0 8px; }
.legal .essay-body .summary p:last-child { margin-bottom: 0; }
.legal .essay-body .summary .ex-label { margin-bottom: 8px; }
.tc-table { width: 100%; border-collapse: collapse; margin: 8px 0 32px; font-size: 14.5px; line-height: 1.45; }
.tc-table th { text-align: left; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 400; color: var(--ink-soft); padding: 0 16px 12px 0; border-bottom: 1px solid var(--ink-strong); }
.tc-table td { vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid #e6e3dc; }
.tc-table td:last-child, .tc-table th:last-child { padding-right: 0; }
.tc-table-wrap { overflow-x: auto; }
@media (max-width: 639px) {
  .tc-table.stack { min-width: 0; }
  .tc-table.stack thead { display: none; }
  .tc-table.stack tr { display: block; padding: 14px 0 6px; border-bottom: 1px solid #e6e3dc; }
  .tc-table.stack tr:first-child { border-top: 1px solid var(--ink-strong); }
  .tc-table.stack td { display: block; border: 0; padding: 0 0 10px; }
  .tc-table.stack td::before { content: attr(data-label); display: block; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 3px; }
  .tc-prose .tc-table.stack th:first-child, .tc-prose .tc-table.stack td:first-child { width: auto; }
  .tc-table.stack td:first-child { font-weight: 500; }
  .tc-table:not(.stack) { min-width: 0; }
}
/* tc-hero phone stacking now lives on .ahero-cta generally (2026-08-26) */
.legal-foot { margin-top: 64px; padding-top: 26px; border-top: 1px solid #e0e0e0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; font-size: 14.5px; color: var(--ink-soft); }
.legal-foot a { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.legal-foot a:hover { color: var(--ink-soft); }
.footer-news-privacy { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.footer-news-privacy:hover { color: #ffffff; }

/* hub: document index panel (library "link-list-panel": one outlined rounded panel, H2 left, link list right) */
.tc-docs { padding: 0 var(--pad-x) 72px; }
@media (min-width: 768px) { .tc-docs { padding-bottom: 104px; } }
.tc-docs-panel { border: 1px solid #e0ddd5; border-radius: 16px; padding: 32px 24px; display: grid; gap: 32px; }
@media (min-width: 1024px) { .tc-docs-panel { grid-template-columns: 1fr 1.5fr; gap: 64px; padding: 48px 56px; } }
.tc-docs-title { font-size: 32px; font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 14px; }
@media (min-width: 1024px) { .tc-docs-title { font-size: 40px; } }
.tc-docs-lead { font-size: 16px; line-height: 1.5; color: var(--ink-soft); max-width: 400px; margin: 0; }
.tc-doclist { display: grid; }
.tc-doc { display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; align-items: center; padding: 18px 0; border-top: 1px solid #e6e3dc; color: inherit; text-decoration: none; }
.tc-doc:last-child { border-bottom: 1px solid #e6e3dc; }
.tc-doc-name { font-size: 19px; letter-spacing: -0.01em; margin: 0; }
.tc-doc-desc { grid-column: 1; font-size: 14.5px; line-height: 1.45; color: var(--ink-soft); margin: 0; max-width: 46ch; }
.tc-doc-meta { grid-column: 2; grid-row: 1 / 3; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.tc-doc:hover .tc-doc-name { color: var(--ink-soft); }

/* hub: generic sections (company, data paths, subprocessors, AI inventory, security review, legacy) */
.tc-prose p, .tc-prose li { font-size: 16px; line-height: 1.55; max-width: 72ch; }
.tc-prose p { margin: 0 0 16px; }
.tc-prose h3 { font-size: 13px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin: 28px 0 10px; }
.tc-prose ul { margin: 0 0 20px; padding-left: 20px; }
.tc-prose ul li { margin: 0 0 8px; }
.tc-prose .tc-table { font-size: 14.5px; }
.tc-prose .tc-table th:first-child, .tc-prose .tc-table td:first-child { width: 22%; }
.tc-prose .tc-table th { white-space: normal; }

/* hub: FAQ split (library "faq-accordion split": H2 left, accordion right, first open) — native details, no script */
.faq { display: grid; gap: 32px; }
@media (min-width: 1024px) { .faq { grid-template-columns: 1fr 1.5fr; gap: 96px; align-items: start; } }
.faq-title { font-size: 36px; font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 16px; }
@media (min-width: 1024px) { .faq-title { font-size: 48px; position: sticky; top: calc(var(--nav-h) + 40px); } }
.faq-lead { font-size: 16px; line-height: 1.5; color: var(--ink-soft); max-width: 420px; margin: 0; }
.faq-list { border-top: 1px solid #e0e0e0; }
.faq-item { border-bottom: 1px solid #e0e0e0; }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 0; font-size: 19px; letter-spacing: -0.01em; line-height: 1.35; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; flex: none; width: 7px; height: 7px; border-right: 1.5px solid var(--ink-soft); border-bottom: 1.5px solid var(--ink-soft); transform: rotate(45deg) translateY(-2px); transition: transform 0.3s ease; margin-right: 4px; }
.faq-item[open] summary::after { transform: rotate(225deg) translateY(-1px); }
.faq-a { padding: 0 40px 24px 0; }
.faq-a p { font-size: 16px; line-height: 1.55; color: #55524b; margin: 0 0 12px; max-width: 62ch; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* print: a Trust Center document prints as the document alone (reviewers print legal pages) */
@media print {
  .tc-page .ctaband, .tc-page ~ .footer, body:has(.tc-page) .nav, body:has(.tc-page) .footer, body:has(.tc-page) .mnav { display: none !important; }
  .tc-page .legal { padding: 0; }
  .tc-page .legal-wrap { max-width: none; }
  .tc-page .legal .essay-body h2 { break-after: avoid; }
  .tc-page .legal-toc a { color: #000; }
}