/* Public pages, Arc-style (piece 24, 2026-10-29).
 *
 * What a signed-out visitor sees: the landing (site header, hero, sections,
 * call to action, footer) and the sign-in, sign-up and demo screens (centered
 * login card, 32px fields, password reveal, code slots for 2FA, helper rows).
 * Arc references: site-header, hero-section, cta-section, site-footer,
 * login-centered, sign-in, signup-form, password-field, otp-input.
 *
 * Loaded straight from the standalone templates (landing.html, login.html,
 * signup.html, demo.html), after arc_tokens.css and the page's own sheets.
 * Tokens: arc_tokens.css only. The landing keeps its own palette: its --ld-*
 * colours are handed to the names arc_tokens.css reads, so every --arc-* role
 * resolves to the landing's ink and water on that page alone.
 *
 * Out of scope: the landing's paper legal sheet (D7), the deck, the orb and
 * the assistant panel (landing_ask.js keeps its behaviour and look).
 */

/* =====================================================================
   0. The landing's palette under the Arc roles
   ===================================================================== */
html body:is(body, #oc-arc):is(body, #oc-arc-2).landing {
  --bg-base: var(--ld-bg);
  --bg-elevated: var(--ld-kelp);
  --bg-elevated-2: color-mix(in srgb, var(--ld-kelp) 90%, var(--ld-ink));
  --text-primary: var(--ld-ink);
  --text-secondary: var(--ld-ink-soft);
  --text-muted: var(--ld-ink-mute);
  --accent: var(--ld-teal-hi);
  --text-inverse: var(--ld-bg);
  --arc-pub-gut: clamp(16px, 5vw, 56px);
  /* The Introduction menu: one hairline and one glass for its tab and panel. */
  --ld-drop-line: var(--arc-border-strong);
  --ld-drop-glass: color-mix(in srgb, var(--arc-background) 60%, transparent);
  /* The menus are solid (PM, 2026-11-04): no transparency, no blur. */
  --ld-drop-fill: var(--arc-surface);
  /* The section menu and its rows read at full ink, 100% black in the light
     theme and white in the dark, at 600, as does "Equity research" beside
     the logo (PM, 2026-11-03; above Arc's 500). */
  --ld-menu-ink: white;
  /* Cast down and to the sides only: it starts at the bar's edge. */
  --ld-drop-shadow: 0 24px 40px -16px color-mix(in srgb, black 55%, transparent), 0 8px 16px -8px color-mix(in srgb, black 35%, transparent);
}
html[data-theme="light"] body:is(body, #oc-arc):is(body, #oc-arc-2).landing {
  --ld-menu-ink: black;
  --ld-drop-shadow: 0 24px 40px -16px color-mix(in srgb, black 18%, transparent), 0 8px 16px -8px color-mix(in srgb, black 10%, transparent);
}

/* =====================================================================
   1. Site header: 64px, near-opaque, 18px blur, hairline bottom
   ===================================================================== */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-nav,
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-nav.is-scrolled {
  background: transparent;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  border-bottom: 1px solid var(--arc-border);
  transition: border-color var(--arc-dur) var(--arc-ease);
}
/* The frost is a layer under the bar's content, not the bar itself: an
   element with a backdrop filter keeps its descendants from seeing past it,
   and the Introduction menu hangs below the bar and has to blur the page. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: color-mix(in srgb, var(--arc-background) 92%, transparent);
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
  transition: background-color var(--arc-dur) var(--arc-ease);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-nav:not(.is-scrolled)::before { background: color-mix(in srgb, var(--arc-background) 72%, transparent); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-nav:not(.is-scrolled) { border-bottom-color: var(--arc-border-subtle); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-nav.ld-nav--drop { border-bottom-color: var(--ld-drop-line); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-nav-inner {
  min-height: 64px;
  height: calc(64px + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: 0;
  padding-left: calc(var(--arc-pub-gut) + env(safe-area-inset-left, 0px));
  padding-right: calc(var(--arc-pub-gut) + env(safe-area-inset-right, 0px));
  gap: var(--arc-space-4);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-brand { gap: var(--arc-space-3); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-brand img { height: 24px; }
html[data-theme="light"] body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-brand img { filter: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-brand-tag {
  padding-left: var(--arc-space-3);
  border-left-color: var(--arc-border);
  color: var(--arc-text-secondary);
  font-size: var(--arc-text-sm);
  font-weight: 600;
  letter-spacing: var(--arc-tracking);
  text-transform: none;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-lang {
  border-color: var(--arc-border);
  border-radius: var(--arc-radius-control);
  background: transparent;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-lang-cell {
  min-height: var(--arc-control-sm);
  padding-block: 0;
  color: var(--arc-text-secondary);
  font-size: var(--arc-text-xs);
  letter-spacing: 0;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-lang-cell[aria-current="true"] { color: var(--arc-foreground); }

/* Section links: 13px, muted to ink; the current one carries a 2px ink line
   that glides between links (arc_public.js places it). */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-nav-anchors {
  position: relative;
  gap: 2px;
  margin-right: var(--arc-space-2);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-nav-anchors > a,
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-drop-btn {
  height: var(--arc-control-md);
  padding: 0 var(--arc-space-3);
  overflow: visible;
  border-radius: var(--arc-radius-control);
  color: var(--ld-menu-ink);
  font-size: var(--arc-text-sm);
  font-weight: 600;
  letter-spacing: var(--arc-tracking);
  text-transform: none;
  transition: color var(--arc-dur-fast) var(--arc-ease), background-color var(--arc-dur-fast) var(--arc-ease);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-nav-anchors > a:active,
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-drop-btn:active { transform: none; }
@media (hover: hover) and (pointer: fine) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-nav-anchors > a:hover,
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-drop-btn:hover,
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-drop-btn[aria-expanded="true"] {
    color: var(--ld-menu-ink);
    background: var(--arc-hover);
  }
}
/* The Introduction trigger: label, then the portal's stroked chevron, which
   turns over while its menu is open. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-nav-anchors .ld-drop-btn { gap: var(--arc-space-2); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-drop-caret {
  width: 6px;
  height: 6px;
  border: 0;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  border-radius: 0 0 1px 0;
  opacity: .7;
  transform: translateY(-1.5px) rotate(45deg);
  transition: transform var(--arc-dur) var(--arc-spring), opacity var(--arc-dur-fast) var(--arc-ease);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-drop.is-open .ld-drop-caret {
  opacity: 1;
  transform: translateY(1.5px) rotate(225deg);
}

/* The Introduction menu hangs from the bar. Resting on the trigger opens it:
   the trigger becomes a glass tab down to the bar's lower edge, the panel
   drops out of the tab at the tab's width, then widens to both sides. Square
   corners; the bar's lower border is the panel's top edge and brightens to
   the menu's hairline while it is open, so bar, tab and panel read as one
   outline. The panel is the tab's width (wider only when a language's rows
   need it, then left-aligned with the tab) and simply drops; the fan-out to
   both sides is switched off for now (data-ld-fan on .ld-drop turns it back
   on: a 280px panel centred on the tab that drops at the tab's width, then
   widens). landing.html places the panel and passes the tab's width and
   place in it (--ld-drop-tw, --ld-drop-l, --ld-drop-r, --ld-drop-ox,
   --ld-drop-sx). The glass is a layer that scales, not a clip: Chromium stops
   blurring the page behind an element while a clip animates on it. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-drop::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: calc(-1 * var(--ld-drop-reach, 17px));
  left: 0;
  z-index: -1;
  border: 1px solid var(--ld-drop-line);
  border-bottom: 0;
  border-radius: var(--arc-radius-card) var(--arc-radius-card) 0 0;
  background: var(--ld-drop-fill);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--arc-dur-fast) var(--arc-ease);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-drop.is-open::before { opacity: 1; pointer-events: auto; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-drop.is-open .ld-drop-btn {
  border-radius: 0;
  background: transparent;
  color: var(--ld-menu-ink);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-drop-menu {
  position: absolute;
  top: var(--ld-drop-top, 49px);
  right: auto;
  left: var(--ld-drop-x, 0px);
  z-index: 1;
  width: max-content;
  min-width: var(--ld-drop-tw, 0px);
  max-width: calc(100vw - 32px);
  padding: var(--arc-space-1) 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--arc-foreground);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-drop[data-ld-fan] .ld-drop-menu { width: 280px; min-width: 0; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-drop-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid var(--ld-drop-line);
  border-top: 0;
  border-radius: 0 0 var(--arc-radius-card) var(--arc-radius-card);
  background: var(--ld-drop-fill);
  box-shadow: var(--ld-drop-shadow);
  transform-origin: var(--ld-drop-ox, 50%) 0;
  pointer-events: none;
}
/* The rows run edge to edge: the highlight and the rule meet the outline. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-drop-item {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--arc-space-4);
  border-radius: 0;
  color: var(--ld-menu-ink);
  font-size: var(--arc-text-sm);
  font-weight: 600;
  letter-spacing: var(--arc-tracking);
  text-transform: none;
  text-decoration: none;
  transition: color var(--arc-dur-fast) var(--arc-ease), background-color var(--arc-dur-fast) var(--arc-ease);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-drop-item:active { transform: none; }
/* The last row's highlight follows the glass's rounded foot (12px less the
   4px padding). */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-drop-item:last-child { border-radius: 0 0 calc(var(--arc-radius-card) - var(--arc-space-1)) calc(var(--arc-radius-card) - var(--arc-space-1)); }
@media (hover: hover) and (pointer: fine) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-drop-item:hover {
    color: var(--ld-menu-ink);
    background: color-mix(in srgb, var(--arc-foreground) 7%, transparent);
  }
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-drop-item:focus { outline: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-drop-item:focus-visible {
  color: var(--ld-menu-ink);
  background: color-mix(in srgb, var(--arc-foreground) 7%, transparent);
  outline: 2px solid var(--arc-focus);
  outline-offset: -2px;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-drop-sep {
  height: 1px;
  margin: var(--arc-space-1) 0;
  background: var(--ld-drop-line);
}
/* The menu: Products, Solutions and Company open dropdowns, Pricing is a link.
   Below 1100px they fold into one Menu dropdown: each page's row leads its
   group, its sections indented under it. The current page reads as current. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-nav-anchors > .ld-menu-item { display: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-nav-anchors > .ld-drop--all { display: block; }
@media (min-width: 1100px) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-nav-anchors > .ld-drop.ld-menu-item { display: block; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-nav-anchors > a.ld-menu-link { display: inline-flex; align-items: center; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-nav-anchors > .ld-drop--all { display: none; }
}
/* Products: a wide panel. Two columns of products, each a name over a short
   introduction in smaller, lighter type, beside a picture of the one under the
   pointer or focus (the pictures crossfade). The rows are rounded inside the
   panel's 12px padding. */
/* :not([hidden]): the grid must never outrank the closed state. */
/* Wide (PM, 2026-11-04): the panel runs the width of the page's content, growing left from the tab (the
   placement script keeps it on screen), so the lead rows, three columns of products and the picture all fit
   without scrolling either way. Below 1280px the products take two columns. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-drop-menu.ld-mega:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  grid-template-rows: minmax(0, 1fr);
  max-height: calc(100svh - var(--ld-drop-top, 49px) - 16px);
  gap: var(--arc-space-3);
  width: min(1376px, calc(100vw - 32px));
  max-width: none;
  padding: var(--arc-space-3);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-mega-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  align-content: start;
  min-height: 0;
}
@media (max-width: 1279px) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-drop-menu.ld-mega:not([hidden]) { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-mega-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-mega .ld-mega-item,
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-mega .ld-mega-item:last-child {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  align-content: start;
  column-gap: 10px;
  row-gap: var(--arc-space-1);
  min-height: 0;
  padding: var(--arc-space-3) 14px;
  border-radius: var(--arc-radius-control);
  white-space: normal;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-mega .ld-mega-item.is-on { background: color-mix(in srgb, var(--arc-foreground) 6%, transparent); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-mega .ld-mega-item[aria-current="page"] { text-decoration: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-mega .ld-mega-item[aria-current="page"] .ld-mega-name { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-mega-name { font-size: var(--arc-text-md); font-weight: 600; line-height: 1.3; color: var(--ld-menu-ink); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-mega-desc { grid-column: 2; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-mega-desc {
  color: var(--arc-text-secondary);
  font-size: var(--arc-text-xs);
  font-weight: var(--arc-weight);
  line-height: 1.5;
  letter-spacing: 0;
  text-wrap: pretty;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-mega-shot {
  --ld-pic-bg: color-mix(in srgb, var(--ld-ink) 7%, var(--ld-bg));
  position: relative;
  min-height: 566px; /* the animated scenes need this much */
  overflow: hidden;
  border: 1px solid var(--ld-drop-line);
  border-radius: var(--arc-radius-control);
  background: var(--ld-pic-bg);
}
/* One picture at a time; the next eases in with a small rise. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-mega-pic {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity var(--arc-dur) var(--arc-ease);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-mega-pic.is-on { opacity: 1; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-mega-pic img { display: block; transition: transform var(--arc-dur-considered) var(--arc-ease-enter); }
/* A screenshot: an app window set 28px in from the top left, sized from the frame's height
   so it runs off the bottom and right edges whatever the panel's shape, with a hairline
   edge and a soft shadow. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-mega-pic[data-kind="shot"] img {
  position: absolute;
  top: 28px;
  left: 28px;
  width: auto;
  min-width: 120%;
  max-width: none;
  height: calc(100% - 8px);
  object-fit: cover;
  object-position: left top;
  border: 1px solid color-mix(in srgb, var(--ld-ink) 16%, transparent);
  border-radius: 9px;
  box-shadow: 0 28px 56px -18px rgb(0 0 0 / .45), 0 6px 16px -6px rgb(0 0 0 / .25);
  transform: translateY(8px);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-mega-pic[data-kind="shot"].is-on img { transform: none; }
/* An illustration fills the frame, centred on its subject, and settles from a slight zoom. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-mega-pic[data-kind="art"] img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.04);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-mega-pic[data-kind="art"].is-on img { transform: none; }
/* The illustrations are light, drawn for the menus, each centred on its subject. */
@media (prefers-reduced-motion: reduce) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-mega-pic, html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-mega-pic img { transition: none; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-mega-pic img { transform: none; }
}
/* The team roster (the AI Analyst page): analysts and officers, each with a live mark. The Products menu's
   rows are all alike (PM, 2026-11-04: no lead rows, no colour sweep). */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-team-page { --ld-acc: #6fd3a2; --ld-acc-2: #8fa4ff; }
html[data-theme="light"] body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-team-page { --ld-acc: #2f8a5e; --ld-acc-2: #4f68d8; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-mega-pic[data-kind="team"] { display: grid; align-content: center; padding: 22px 20px; overflow: auto; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-team { display: grid; gap: 14px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-team-label { margin: 0 0 4px 8px; color: var(--arc-text-secondary); font-size: 12px; font-weight: 600; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-team-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-team-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 8px; gap: 10px; align-items: center; padding: 5px 8px; border-radius: 9px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-team-row img { width: 30px; height: 30px; border-radius: 9px; background: color-mix(in srgb, var(--ld-ink) 7%, var(--ld-bg)); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-team-who { display: grid; min-width: 0; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-team-who b { overflow: hidden; color: var(--ld-menu-ink, var(--arc-foreground)); font-size: 13px; font-weight: 600; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-team-who > span { overflow: hidden; color: var(--arc-text-secondary); font-size: 12px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-team-live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ld-acc);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ld-acc) 18%, transparent);
  animation: v-pulse 2.4s ease-in-out calc(var(--g) * .9s + var(--i) * .35s) infinite;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-mega-pic[data-kind="team"].is-on .ld-team-row { animation: ld-team-in var(--arc-dur-considered) var(--arc-ease-enter) calc(var(--g) * 160ms + var(--i) * 45ms) backwards; }
@keyframes ld-team-in { from { opacity: 0; transform: translateY(6px); } }
/* On the AI agents page the team is a card, the two groups side by side. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-team-page {
  max-width: 880px;
  margin: 0 auto;
  padding: 22px 24px;
  border: 1px solid color-mix(in srgb, var(--ld-acc) 26%, var(--arc-border));
  border-radius: 16px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--ld-acc) 7%, var(--arc-surface)), color-mix(in srgb, var(--ld-acc-2) 6%, var(--arc-surface)));
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-team-page .ld-team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; }
@media (max-width: 640px) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-team-page .ld-team { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-team-live, html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-mega-pic[data-kind="team"].is-on .ld-team-row { animation: none; }
}
/* The Research Harness page (PM, 2026-11-04): how the harness carries one name through the lifecycle, in the
   grid's language. Sections on the graph paper, each a heading and a short lede over one picture: the
   lifecycle as six stages on a wire (a spark runs along it; Live loops back into Research), a research turn as
   a flowchart (the portal's roles, wires and running lights), the product's own screens floating on the tint
   with their live cues, the controls as figures, and what a case leaves behind. Drawn pieces share the grid's
   --v-* tokens and its accent. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx { --hx-acc: var(--v-accent); --hx-acc-2: var(--v-accent-2); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-sec { position: relative; z-index: 2; padding: clamp(48px, 8vh, 88px) var(--ld-gut) 0; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-sec:last-child { padding-bottom: clamp(64px, 10vh, 112px); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-inner { max-width: 1180px; margin: 0 auto; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-head { display: grid; gap: 10px; max-width: 760px; margin: 0 0 clamp(24px, 4vh, 36px); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-head h2 { margin: 0; color: var(--arc-foreground); font-size: clamp(24px, 2.6vw, 32px); font-weight: var(--arc-weight-strong); line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-head p { margin: 0; color: var(--arc-text-secondary); font-size: 16px; line-height: 1.55; text-wrap: pretty; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-panel { position: relative; padding: clamp(18px, 3vw, 32px); border: 1px solid var(--v-line); border-radius: 18px; background: var(--v-canvas); }

/* The lifecycle: six stages on one wire. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-life { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-life::before { content: ""; position: absolute; top: 15px; right: calc(100% / 12); left: calc(100% / 12); height: 1px; background: var(--v-line); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-life-wrap { position: relative; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-life-spark { position: absolute; z-index: 2; top: 12px; left: calc(100% / 12); width: 7px; height: 7px; border-radius: 50%; background: var(--hx-acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hx-acc) 22%, transparent), 0 0 12px var(--hx-acc); animation: hx-spark-x 7s cubic-bezier(.45, .05, .55, .95) infinite; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-stage { position: relative; display: grid; align-content: start; gap: 8px; justify-items: center; text-align: center; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-dot { position: relative; z-index: 1; display: grid; width: 31px; height: 31px; box-sizing: border-box; place-items: center; border: 1px solid var(--v-line); border-radius: 50%; background: var(--v-surface); color: var(--arc-text-secondary); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-stage--harness .hx-dot { border-color: color-mix(in srgb, var(--hx-acc) 55%, transparent); color: var(--hx-acc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--hx-acc) 12%, transparent); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-stage h3 { margin: 4px 0 0; color: var(--arc-foreground); font-size: 15px; font-weight: 600; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-ms--none { visibility: hidden; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-ms { padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--hx-acc) 12%, transparent); color: var(--hx-acc); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-card { display: grid; gap: 8px; width: 100%; box-sizing: border-box; padding: 12px 12px 13px; border: 1px solid var(--v-line); border-radius: 12px; background: var(--v-surface); box-shadow: var(--v-shadow); text-align: left; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-card p { margin: 0; color: var(--arc-text-secondary); font-size: 13px; line-height: 1.45; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-card p b { display: block; margin-bottom: 1px; color: var(--arc-foreground); font-size: 12px; font-weight: 600; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-card p.hx-you b { color: var(--hx-acc); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-loop { position: relative; height: 46px; margin: 4px 0 0; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-loop svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-loop path { fill: none; stroke: color-mix(in srgb, var(--hx-acc) 55%, transparent); stroke-width: 1.4; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; animation: hx-dash 1.4s linear infinite; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-loop-tip { position: absolute; top: -3px; left: calc(100% / 12 * 5 - 4px); width: 0; height: 0; border-right: 4.5px solid transparent; border-bottom: 7px solid color-mix(in srgb, var(--hx-acc) 75%, transparent); border-left: 4.5px solid transparent; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-loop-label { margin: 6px calc(100% / 12) 0 calc(100% / 12 * 5); color: var(--arc-text-secondary); font-size: 13px; line-height: 1.45; text-align: center; }

/* A research turn as a flowchart: the portal's roles in order, wires between them, lights on the work. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-flow { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-chart { position: relative; display: grid; gap: 22px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-node { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--v-line); border-radius: 12px; background: var(--v-surface); box-shadow: var(--v-shadow); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-node + .hx-node::before, html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-node + .hx-fan::before, html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-fan + .hx-node::before, html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-node + .hx-split::before {
  content: ""; position: absolute; top: -23px; left: 30px; width: 1px; height: 22px; background: var(--v-line);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-ico { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--c, var(--v-green)) 13%, transparent); color: var(--c, var(--v-green)); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-node b { display: block; color: var(--arc-foreground); font-size: 14px; font-weight: 600; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-node span { color: var(--arc-text-secondary); font-size: 13px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-tag { font-style: normal; padding: 2px 8px; border: 1px solid var(--v-line); border-radius: 999px; color: var(--arc-text-secondary); font-size: 12px; white-space: nowrap; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-fan { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-top: 12px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-fan::after { content: ""; position: absolute; top: 0; right: calc(100% / 6 - 2px); left: 30px; height: 1px; background: var(--v-line); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-q { position: relative; display: grid; gap: 3px; padding: 10px 12px; border: 1px solid var(--v-line); border-radius: 10px; background: var(--v-surface); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-q::before { content: ""; position: absolute; top: -13px; left: 50%; width: 1px; height: 12px; background: var(--v-line); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-q em { color: var(--c); font-size: 12px; font-style: normal; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-q-st { display: flex; align-items: center; gap: 6px; color: var(--arc-text-secondary); font-size: 12px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-q-st .v-ring { --c: inherit; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-ok { position: relative; width: 11px; height: 11px; border-radius: 50%; background: var(--v-green); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-q b { color: var(--arc-foreground); font-size: 13px; font-weight: 600; line-height: 1.3; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-q.hx-live {
  border-color: transparent;
  background:
    linear-gradient(var(--v-surface), var(--v-surface)) padding-box,
    conic-gradient(from var(--v-a), var(--v-line) 0deg 250deg, color-mix(in srgb, var(--c) 35%, var(--v-line)) 300deg, var(--c) 340deg, var(--v-line) 360deg) border-box;
  animation: v-runner 3s linear infinite;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-split { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-top: 12px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-split::after { content: ""; position: absolute; top: 0; right: calc(25% - 5px); left: 30px; height: 1px; background: var(--v-line); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-out { position: relative; display: grid; gap: 4px; padding: 11px 13px; border: 1px solid var(--v-line); border-radius: 10px; background: var(--v-surface); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-out::before { content: ""; position: absolute; top: -13px; left: 50%; width: 1px; height: 12px; background: var(--v-line); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-out b { display: flex; align-items: center; gap: 7px; color: var(--arc-foreground); font-size: 13px; font-weight: 600; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-out b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-out span { color: var(--arc-text-secondary); font-size: 12.5px; line-height: 1.4; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-side { display: grid; gap: 12px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-note { display: grid; gap: 4px; padding: 14px 16px; border-left: 2px solid var(--c, var(--v-line)); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-note b { color: var(--arc-foreground); font-size: 14px; font-weight: 600; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-note p { margin: 0; color: var(--arc-text-secondary); font-size: 14px; line-height: 1.5; }

/* The product's own screens, floating on the tint with their live cues, beside what they show. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-shots { display: grid; gap: clamp(28px, 5vh, 48px); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-shot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: clamp(20px, 3vw, 44px); align-items: center; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-shot:nth-child(even) { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-shot:nth-child(even) .hx-shot-copy { order: 2; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-shot-copy { display: grid; gap: 10px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-shot-copy h3 { margin: 0; color: var(--arc-foreground); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-shot-copy p { margin: 0; color: var(--arc-text-secondary); font-size: 15px; line-height: 1.55; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-shot-copy ul { display: grid; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-shot-copy li { position: relative; padding-left: 16px; color: var(--arc-text-secondary); font-size: 14px; line-height: 1.5; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-shot-copy li::before { content: ""; position: absolute; top: .62em; left: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--hx-acc); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-frame { position: relative; margin: 0; padding: clamp(16px, 2.6vw, 30px); border: 1px solid var(--v-line); border-radius: 18px; background: var(--v-canvas); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-pic { position: relative; display: block; filter: drop-shadow(0 14px 24px rgb(0 0 0 / .12)); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-pic img { display: block; width: 100%; height: auto; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-pic .ld-live { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-pic--map { max-width: 280px; margin: 0 auto; }
/* The Decision sheet, drawn from a real lane: a contested answer with the sheet's own choices. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-decide { display: grid; gap: 12px; max-width: 520px; margin: 0 auto; padding: 16px 18px 18px; border: 1px solid var(--v-line); border-radius: 14px; background: var(--v-surface); box-shadow: var(--v-shadow); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-decide-head { display: flex; align-items: center; justify-content: space-between; color: var(--arc-foreground); font-size: 14px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-decide-head span { color: var(--arc-text-secondary); font-size: 12px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-decide-item { display: grid; justify-items: start; gap: 6px; padding: 12px 14px; border: 1px solid var(--v-line); border-radius: 10px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-decide-item b { color: var(--arc-foreground); font-size: 14px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-decide-item p { margin: 0; color: var(--arc-text-secondary); font-size: 13px; line-height: 1.5; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-flag { padding: 1px 8px; border: 1px solid color-mix(in srgb, var(--v-amber) 40%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--v-amber) 10%, transparent); color: var(--v-amber); font-size: 12px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-decide-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-btn { padding: 5px 11px; border: 1px solid var(--v-line); border-radius: 8px; color: var(--arc-foreground); font-size: 12.5px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-btn--go { border-color: transparent; background: var(--arc-foreground); color: var(--ld-bg); animation: hx-press 5s ease-in-out 1.5s infinite; }
@keyframes hx-press { 0%, 86%, 100% { box-shadow: 0 0 0 0 transparent; } 90% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--hx-acc) 35%, transparent); } }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-fine { max-width: 760px; margin: 16px 0 0; color: var(--arc-text-secondary); font-size: 14px; line-height: 1.55; }

/* Controls as figures; what a case leaves behind as cards. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-fig { display: grid; align-content: start; gap: 6px; padding: 18px 18px 20px; border: 1px solid var(--v-line); border-radius: 14px; background: var(--v-surface); box-shadow: var(--v-shadow); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-fig strong { color: var(--arc-foreground); font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-fig b { color: var(--arc-foreground); font-size: 14px; font-weight: 600; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-fig span { color: var(--arc-text-secondary); font-size: 13.5px; line-height: 1.5; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-outs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-outs .hx-fig { position: relative; overflow: hidden; isolation: isolate; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-outs .hx-fig::after {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 34%, color-mix(in srgb, var(--v-accent-2) 16%, transparent) 45%, color-mix(in srgb, var(--v-accent) 26%, transparent) 52%, transparent 64%) no-repeat;
  background-size: 260% 100%; background-position: 130% 0; mix-blend-mode: screen;
  animation: v-sheen 7s cubic-bezier(.45, .05, .55, .95) calc(var(--k, 0) * .32s + 1s) infinite backwards;
}
html[data-theme="light"] body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-outs .hx-fig::after { mix-blend-mode: multiply; }

@keyframes hx-spark-x {
  0% { left: calc(100% / 12); opacity: 0; }
  6% { opacity: 1; }
  86% { left: calc(100% / 12 * 11); opacity: 1; }
  94%, 100% { left: calc(100% / 12 * 11); opacity: 0; }
}
@keyframes hx-dash { to { stroke-dashoffset: -18; } }
@media (max-width: 1024px) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-life { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 22px; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-life::before, html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-life-spark, html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-loop { display: none; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-loop-label { margin: 18px 0 0; text-align: left; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-flow, html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-shot, html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-shot:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-shot:nth-child(even) .hx-shot-copy { order: 0; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-life { grid-template-columns: minmax(0, 1fr); }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-stage { grid-template-columns: 31px minmax(0, 1fr); justify-items: start; column-gap: 12px; text-align: left; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-stage h3 { margin: 0; align-self: center; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-stage > :not(.hx-dot) { grid-column: 2; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-stage > .hx-ms { justify-self: start; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-ms--none { display: none; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-fan { grid-template-columns: minmax(0, 1fr); }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-fan .hx-q:nth-child(n+2) { display: none; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-fan::after, html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-q::before, html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-node .hx-tag { display: none; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-node { grid-template-columns: 34px minmax(0, 1fr); }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-figs, html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-outs { grid-template-columns: minmax(0, 1fr); }
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-sec.is-out *, html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-sec.is-out *::before, html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-sec.is-out *::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx *, html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx *::before, html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx *::after { animation: none !important; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-life-spark { display: none; }
}
/* The Research Harness at work in the Products menu (PM, 2026-11-04): a round of the harness drawn in the
   grid's language, one ten-second loop that starts when the picture comes on. Each element that changes names
   its step in --a; the static styles are the round finished, which is also what reduced motion shows. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-mega-pic[data-kind="live"] { display: grid; align-content: center; padding: 18px; overflow: hidden; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa { display: grid; gap: 0; color: var(--v-ink); font-size: 12.5px; line-height: 1.4; --hxa-loop: 10s; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa b { font-weight: 600; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-status { display: flex; align-items: center; gap: 7px; margin: 0 2px 12px; color: var(--v-ink-2); font-size: 12px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--v-green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--v-green) 18%, transparent); animation: v-pulse 2.4s ease-in-out infinite; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-node { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) 16px; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--v-line); border-radius: 12px; background: var(--v-surface); box-shadow: var(--v-shadow); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-ico { width: 28px; height: 28px; box-sizing: border-box; padding: 5px; border-radius: 8px; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-txt { display: grid; min-width: 0; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-txt > span, html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-txt .hxa-sw > span { overflow: hidden; color: var(--v-ink-2); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-green { color: var(--v-green); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-check { position: relative; width: 16px; height: 16px; border-radius: 50%; background: var(--c); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-check::after { content: ""; position: absolute; left: 5.5px; top: 3px; width: 3.5px; height: 7px; border: solid var(--v-surface); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
/* Wires: a fork from the Chief of Staff into the two lanes, and a join from the lanes into the gate. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-wires { position: relative; height: 22px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-w { position: absolute; display: block; background: var(--v-line); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-wires--fork .hxa-w-stem { left: 50%; top: 0; width: 1px; height: 11px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-wires--fork .hxa-w-bar { left: calc(25% - 3px); right: calc(25% - 3px); top: 11px; height: 1px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-wires--fork .hxa-w-l { left: calc(25% - 3px); top: 11px; width: 1px; height: 11px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-wires--fork .hxa-w-r { left: calc(75% + 3px); top: 11px; width: 1px; height: 11px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-wires--join .hxa-w-l { left: calc(25% - 3px); top: 0; width: 1px; height: 11px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-wires--join .hxa-w-r { left: calc(75% + 3px); top: 0; width: 1px; height: 11px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-wires--join .hxa-w-bar { left: calc(25% - 3px); right: calc(25% - 3px); top: 11px; height: 1px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-wires--join .hxa-w-stem { left: 50%; top: 11px; width: 1px; height: 11px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-spark { position: absolute; z-index: 1; width: 7px; height: 7px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--v-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--v-blue) 22%, transparent), 0 0 10px var(--v-blue); opacity: 0; }
/* The lanes: TSM at work (a light runs round it, its questions are filed one by one, its coverage climbs);
   NVDA waiting on the gate, with a contested item flagged. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-lanes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-lane { position: relative; display: grid; align-content: start; gap: 8px; padding: 10px 11px 11px; border: 1px solid var(--v-line); border-radius: 12px; background: var(--v-surface); box-shadow: var(--v-shadow); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-lane::before { content: ""; position: absolute; top: -4px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--c); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-lane--run {
  border-color: transparent;
  background:
    linear-gradient(var(--v-surface), var(--v-surface)) padding-box,
    conic-gradient(from var(--v-a), var(--v-line) 0deg 250deg, color-mix(in srgb, var(--c) 35%, var(--v-line)) 300deg, var(--c) 340deg, var(--v-line) 360deg) border-box;
  animation: v-runner 3s linear infinite;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-lane-h { display: flex; align-items: baseline; gap: 6px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-lane-h b { font-size: 13px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-lane-h span { color: var(--v-ink-2); font-size: 11.5px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-qs { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-qs li { display: grid; gap: 1px; min-width: 0; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-q { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-sw { display: grid; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-sw > span { display: flex; grid-area: 1 / 1; align-items: center; gap: 5px; min-width: 0; color: var(--v-ink-2); font-size: 11.5px; white-space: nowrap; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-sw > .hxa-off { opacity: 0; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-done { color: var(--v-green) !important; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-ok { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--v-green); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-wait { width: 9px; height: 9px; box-sizing: border-box; border: 1.5px dashed var(--v-ink-2); border-radius: 50%; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa .v-ring { --c: var(--v-blue); width: 9px; height: 9px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-cov { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding-top: 2px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-cov .hxa-sw > span { color: var(--v-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-meter { position: relative; height: 4px; overflow: hidden; border-radius: 2px; background: var(--v-line-2); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-meter i { position: absolute; inset: 0 auto 0 0; width: 72%; border-radius: inherit; background: linear-gradient(90deg, var(--v-accent-2), var(--v-accent)); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-row { display: flex; align-items: center; gap: 6px; color: var(--v-ink-2); font-size: 11.5px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa .v-pulse { --c: var(--v-orange); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-flagged { display: grid; justify-items: start; gap: 3px; padding: 8px 9px; border-radius: 9px; background: var(--v-line-2); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-flagged b { font-size: 12.5px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-flagged > span:last-child { color: var(--v-ink-2); font-size: 11.5px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-flag { padding: 0 7px; border: 1px solid color-mix(in srgb, var(--v-amber) 40%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--v-amber) 10%, transparent); color: var(--v-amber); font-size: 11px; }
/* What comes out: the hook, filed, and the contested answer, waiting on you. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-hook { position: relative; display: grid; gap: 4px; margin-top: 12px; padding: 11px 13px; overflow: hidden; isolation: isolate; border: 1px solid color-mix(in srgb, var(--v-accent) 35%, var(--v-line)); border-radius: 12px; background: var(--v-surface); box-shadow: var(--v-shadow); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-hook-k { color: var(--v-green); font-size: 11.5px; font-weight: 600; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-hook p { margin: 0; font-size: 13px; line-height: 1.45; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-you { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 10px 8px 12px; border: 1px solid color-mix(in srgb, var(--v-amber) 35%, var(--v-line)); border-radius: 12px; background: var(--v-surface); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-you > span:not(.hxa-decide) { overflow: hidden; color: var(--v-ink-2); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-you-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--v-amber); box-shadow: 0 0 0 3px color-mix(in srgb, var(--v-amber) 20%, transparent); animation: v-pulse 1.6s ease-in-out infinite; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa-decide { flex: none; margin-left: auto; padding: 3px 10px; border-radius: 7px; background: var(--v-ink); color: var(--v-surface); font-size: 11.5px; font-weight: 600; }
/* The loop: it runs while the picture is on (the menu open, the harness row under the pointer). */
html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.ld-mega-pic, .lx-pic).is-on .hxa [style*="--a"] { animation: var(--a) var(--hxa-loop) cubic-bezier(.2, .7, .2, 1) infinite both; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.ld-mega-pic, .lx-pic).is-on .hxa .hxa-spark { animation-timing-function: linear; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.ld-mega-pic, .lx-pic).is-on .hxa .hxa-meter i { animation-timing-function: cubic-bezier(.45, .05, .55, .95); }
@keyframes hxa-on-32 { 0%, 31.9% { opacity: 0; transform: translateY(4px); } 34.5%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
@keyframes hxa-on-40 { 0%, 39.9% { opacity: 0; transform: translateY(4px); } 42.5%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
@keyframes hxa-on-46 { 0%, 45.9% { opacity: 0; transform: translateY(4px); } 48.5%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
@keyframes hxa-on-64 { 0%, 63.9% { opacity: 0; transform: translateY(4px); } 66.5%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
@keyframes hxa-on-70 { 0%, 69.9% { opacity: 0; transform: translateY(4px); } 72.5%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
@keyframes hxa-on-78 { 0%, 77.9% { opacity: 0; transform: translateY(4px); } 80.5%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
@keyframes hxa-off-32 { 0%, 31.9% { opacity: 1; } 33.5%, 94% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes hxa-off-46 { 0%, 45.9% { opacity: 1; } 47.5%, 94% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes hxa-off-64 { 0%, 63.9% { opacity: 1; } 65.5%, 94% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes hxa-pop-4 { 0%, 3.9% { opacity: 0; transform: scale(.5); } 6.5%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
@keyframes hxa-pop-64 { 0%, 63.9% { opacity: 0; transform: scale(.5); } 66.5%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
@keyframes hxa-meter { 0%, 31.9% { width: 68%; } 34.5%, 45.9% { width: 70%; } 48.5%, 94% { width: 72%; } 99%, 100% { width: 68%; } }
@keyframes hxa-spark-1 {
  0%, 8% { left: 50%; top: 0; opacity: 0; }
  9% { opacity: 1; }
  12% { left: 50%; top: 11px; }
  18% { left: calc(25% - 3px); top: 11px; }
  21% { left: calc(25% - 3px); top: 22px; opacity: 1; }
  23%, 100% { left: calc(25% - 3px); top: 22px; opacity: 0; }
}
@keyframes hxa-spark-2 {
  0%, 54% { left: calc(25% - 3px); top: 0; opacity: 0; }
  55% { opacity: 1; }
  57.5% { left: calc(25% - 3px); top: 11px; }
  61.5% { left: 50%; top: 11px; }
  64% { left: 50%; top: 22px; opacity: 1; }
  66%, 100% { left: 50%; top: 22px; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa *, html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa *::before, html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa *::after { animation: none !important; }
}
/* The AI analysts at work in the Products menu: the same loop and conventions as the harness scene (.hxa
   carries the tokens and the --a rule). The huddle's floor passes from Vale to Asa, a question goes to the
   council, three sparks fan out to Mira, Hugo and Asa, whose answers stream in as lines, stance first; then
   the thread is saved and an update goes to the case file. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .axa { gap: 12px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .axa img { display: block; flex: none; border-radius: 8px; background: var(--v-line-2); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .axa-head { display: flex; align-items: center; gap: 10px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .axa-head > span:first-of-type { display: grid; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .axa-head em, html body:is(body, #oc-arc):is(body, #oc-arc-2) .axa-who em { color: var(--v-ink-2); font-size: 11.5px; font-style: normal; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .axa-head b { font-size: 15px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .axa-tag { align-self: end; margin-bottom: 2px; padding: 0 7px; border: 1px solid var(--v-line); border-radius: 6px; color: var(--v-ink-2); font-size: 11.5px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .axa-huddle { display: grid; gap: 8px; padding: 10px 12px 12px; border: 1px solid var(--v-line); border-radius: 12px; background: var(--v-surface); box-shadow: var(--v-shadow); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .axa-huddle-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .axa-huddle-h b { font-size: 13px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .axa-huddle-h span { color: var(--v-ink-2); font-size: 11.5px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .axa-floor { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .axa-floor > span { position: relative; z-index: 1; display: grid; justify-items: center; gap: 3px; padding: 5px 0 4px; color: var(--v-ink-2); font-size: 11px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .axa-floor img { border-radius: 50%; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .axa-floor-lit { position: absolute; top: 0; bottom: 0; left: 0; width: 20%; border-radius: 9px; background: color-mix(in srgb, var(--v-accent) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v-accent) 40%, transparent); opacity: 0; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .axa-ask { display: grid; gap: 3px; padding: 9px 12px; border: 1px solid color-mix(in srgb, var(--v-amber) 35%, var(--v-line)); border-radius: 12px 12px 4px 12px; background: var(--v-surface); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .axa-ask-k { color: var(--v-amber); font-size: 11.5px; font-weight: 600; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .axa-ask p { margin: 0; font-size: 13px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .axa-fork { position: relative; height: 20px; margin: -12px 0; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .axa-w-stem { left: 50%; top: 0; width: 1px; height: 10px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .axa-w-bar { left: calc(16.667% - 2.67px); right: calc(16.667% - 2.67px); top: 10px; height: 1px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .axa-w-l { left: calc(16.667% - 2.67px); top: 10px; width: 1px; height: 10px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .axa-w-c { left: 50%; top: 10px; width: 1px; height: 10px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .axa-w-r { left: calc(83.333% + 2.67px); top: 10px; width: 1px; height: 10px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .axa .hxa-spark { background: var(--v-amber); box-shadow: 0 0 0 3px color-mix(in srgb, var(--v-amber) 22%, transparent), 0 0 10px var(--v-amber); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .axa-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .axa-card, html body:is(body, #oc-arc):is(body, #oc-arc-2) .ax-council-card { position: relative; display: grid; align-content: start; gap: 6px; padding: 9px 9px 11px; border: 1px solid var(--v-line); border-radius: 11px; background: var(--v-surface); box-shadow: var(--v-shadow); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .axa-who { display: flex; align-items: center; gap: 6px; min-width: 0; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .axa-who > span { display: grid; min-width: 0; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .axa-who b { overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .axa-who em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .axa-card .axa-who { flex-direction: column; align-items: flex-start; gap: 5px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .axa-card .axa-who img { width: 24px; height: 24px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .axa-card .axa-who > span { width: 100%; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .axa-stance { justify-self: start; padding: 0 6px; border-radius: 5px; background: color-mix(in srgb, var(--v-accent) 14%, transparent); color: var(--v-green); font-size: 10.5px; font-weight: 600; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .axa-bar { display: block; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--v-ink) 14%, transparent); transform-origin: left center; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .axa-bar--lead { background: color-mix(in srgb, var(--v-ink) 34%, transparent); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .axa-bar--short { width: 62%; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .axa-out { display: grid; gap: 6px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .axa-act { padding: 8px 12px; border: 1px solid var(--v-line); border-radius: 10px; background: var(--v-surface); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .axa-act .hxa-sw > span { color: var(--v-ink); font-size: 12px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .axa-act .hxa-sw > .hxa-done { color: var(--v-green) !important; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .axa-ico-note { width: 10px; height: 12px; box-sizing: border-box; border: 1.5px solid var(--v-ink-2); border-radius: 2px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.ld-mega-pic, .lx-pic).is-on .axa .axa-bar { animation-timing-function: cubic-bezier(.3, .6, .3, 1); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.ld-mega-pic, .lx-pic).is-on .axa .axa-floor-lit { animation-timing-function: cubic-bezier(.45, .05, .55, .95); }
@keyframes hxa-on-48 { 0%, 47.9% { opacity: 0; transform: translateY(4px); } 50.5%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
@keyframes hxa-on-52 { 0%, 51.9% { opacity: 0; transform: translateY(4px); } 54.5%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
@keyframes hxa-on-56 { 0%, 55.9% { opacity: 0; transform: translateY(4px); } 58.5%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
@keyframes hxa-on-74 { 0%, 73.9% { opacity: 0; transform: translateY(4px); } 76.5%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
@keyframes hxa-on-84 { 0%, 83.9% { opacity: 0; transform: translateY(4px); } 86.5%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
@keyframes hxa-off-74 { 0%, 73.9% { opacity: 1; } 75.5%, 94% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes hxa-off-84 { 0%, 83.9% { opacity: 1; } 85.5%, 94% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes axa-bar-48 { 0%, 47.9% { transform: scaleX(0); } 53%, 93% { transform: scaleX(1); } 98%, 100% { transform: scaleX(0); } }
@keyframes axa-bar-51 { 0%, 50.9% { transform: scaleX(0); } 56%, 93% { transform: scaleX(1); } 98%, 100% { transform: scaleX(0); } }
@keyframes axa-bar-52 { 0%, 51.9% { transform: scaleX(0); } 57%, 93% { transform: scaleX(1); } 98%, 100% { transform: scaleX(0); } }
@keyframes axa-bar-54 { 0%, 53.9% { transform: scaleX(0); } 59%, 93% { transform: scaleX(1); } 98%, 100% { transform: scaleX(0); } }
@keyframes axa-bar-55 { 0%, 54.9% { transform: scaleX(0); } 60%, 93% { transform: scaleX(1); } 98%, 100% { transform: scaleX(0); } }
@keyframes axa-bar-56 { 0%, 55.9% { transform: scaleX(0); } 61%, 93% { transform: scaleX(1); } 98%, 100% { transform: scaleX(0); } }
@keyframes axa-bar-58 { 0%, 57.9% { transform: scaleX(0); } 63%, 93% { transform: scaleX(1); } 98%, 100% { transform: scaleX(0); } }
@keyframes axa-bar-59 { 0%, 58.9% { transform: scaleX(0); } 64%, 93% { transform: scaleX(1); } 98%, 100% { transform: scaleX(0); } }
@keyframes axa-bar-62 { 0%, 61.9% { transform: scaleX(0); } 67%, 93% { transform: scaleX(1); } 98%, 100% { transform: scaleX(0); } }
@keyframes axa-floor {
  0%, 3% { left: 0; opacity: 0; }
  5%, 9% { left: 0; opacity: 1; }
  12%, 16% { left: 20%; opacity: 1; }
  19%, 23% { left: 40%; opacity: 1; }
  26%, 30% { left: 60%; opacity: 1; }
  33%, 37% { left: 80%; opacity: 1; }
  40%, 100% { left: 80%; opacity: 0; }
}
@keyframes axa-sp-l {
  0%, 42% { left: 50%; top: 0; opacity: 0; }
  43% { opacity: 1; }
  45% { left: 50%; top: 10px; }
  49% { left: calc(16.667% - 2.67px); top: 10px; }
  51% { left: calc(16.667% - 2.67px); top: 20px; opacity: 1; }
  53%, 100% { left: calc(16.667% - 2.67px); top: 20px; opacity: 0; }
}
@keyframes axa-sp-c {
  0%, 42% { left: 50%; top: 0; opacity: 0; }
  43% { opacity: 1; }
  45% { left: 50%; top: 10px; }
  46% { left: 50%; top: 10px; }
  51% { left: 50%; top: 20px; opacity: 1; }
  53%, 100% { left: 50%; top: 20px; opacity: 0; }
}
@keyframes axa-sp-r {
  0%, 42% { left: 50%; top: 0; opacity: 0; }
  43% { opacity: 1; }
  45% { left: 50%; top: 10px; }
  49% { left: calc(83.333% + 2.67px); top: 10px; }
  51% { left: calc(83.333% + 2.67px); top: 20px; opacity: 1; }
  53%, 100% { left: calc(83.333% + 2.67px); top: 20px; opacity: 0; }
}
/* On the AI Analysts page: the analyst page as an app window, and the drawn council, huddle and studio. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-pic--app { overflow: hidden; border: 1px solid var(--v-line); border-radius: 12px; background: #fff; filter: none; box-shadow: var(--v-shadow); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-ico--face { padding: 0; overflow: hidden; background: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-ico--face img { display: block; width: 34px; height: 34px; border-radius: 10px; background: var(--v-line-2); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ax-loop-tip { left: calc(100% / 12 * 3 - 4px); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ax-loop-label { margin-left: calc(100% / 12 * 3); }
/* The team on the AI agents page: the roster card, then what each seat does, three across. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx .ld-team-page { max-width: none; margin: 0; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ax-roles .hx-note { align-content: start; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ax-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 24px; margin-top: 22px; }
@media (max-width: 1024px) { html body:is(body, #oc-arc):is(body, #oc-arc-2) .ax-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { html body:is(body, #oc-arc):is(body, #oc-arc-2) .ax-roles { grid-template-columns: minmax(0, 1fr); } }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ax-council, html body:is(body, #oc-arc):is(body, #oc-arc-2) .ax-huddle, html body:is(body, #oc-arc):is(body, #oc-arc-2) .ax-studio { display: grid; gap: 12px; max-width: 540px; margin: 0 auto; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ax-council-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ax-council-card .axa-bar:nth-of-type(3) { width: 88%; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ax-huddle, html body:is(body, #oc-arc):is(body, #oc-arc-2) .ax-studio { padding: 14px 16px 16px; border: 1px solid var(--v-line); border-radius: 14px; background: var(--v-surface); box-shadow: var(--v-shadow); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ax-run { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ax-run li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 9px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ax-run li img { width: 24px; height: 24px; border-radius: 50%; background: var(--v-line-2); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ax-run li > span { display: grid; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ax-run li b { font-size: 13px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ax-run li em { color: var(--v-ink-2); font-size: 12px; font-style: normal; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ax-run li.is-live { background: color-mix(in srgb, var(--v-accent) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v-accent) 35%, transparent); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ax-run li .v-pulse { --c: var(--v-green); margin-left: auto; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ax-cmds, html body:is(body, #oc-arc):is(body, #oc-arc-2) .ax-fields { display: flex; flex-wrap: wrap; gap: 6px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ax-cmds span, html body:is(body, #oc-arc):is(body, #oc-arc-2) .ax-fields span { padding: 2px 9px; border: 1px solid var(--v-line); border-radius: 999px; color: var(--v-ink-2); font-size: 12px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ax-tpls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ax-tpls li { padding: 9px 10px; border: 1px solid var(--v-line); border-radius: 9px; font-size: 12.5px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ax-tpls li.is-on { border-color: color-mix(in srgb, var(--v-accent) 50%, transparent); background: color-mix(in srgb, var(--v-accent) 10%, transparent); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ax-publish { display: flex; justify-content: flex-end; gap: 6px; }
@media (max-width: 640px) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ax-council-row { grid-template-columns: minmax(0, 1fr); }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ax-tpls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Cairn Chat at work in the Products menu: a regular row (no lead wash), with the same loop and conventions as
   the harness scene. A question comes in, Auto routes the turn to T2 Research, the turn works through its
   steps (the counter and a bar of 24), the answer streams in with its confidence mark, the turn is written
   to long memory, and /save files the conversation to the company's note. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cxa { gap: 11px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cxa-head { display: flex; align-items: center; gap: 8px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cxa-spark { width: 15px; height: 15px; fill: var(--v-violet); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cxa-head b { font-size: 14px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cxa-mute { color: var(--v-ink-2); font-size: 12px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cxa-end { margin-left: auto; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cxa-pill { padding: 1px 9px; border: 1px solid color-mix(in srgb, var(--v-violet) 40%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--v-violet) 10%, transparent); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cxa-pill .hxa-sw > span { color: var(--v-ink); font-size: 11.5px; font-weight: 600; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cxa-tiers { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 3px; border: 1px solid var(--v-line); border-radius: 10px; background: var(--v-surface); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cxa-tiers > span { position: relative; z-index: 1; padding: 5px 0; color: var(--v-ink-2); font-size: 11px; text-align: center; white-space: nowrap; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cxa-tier-lit { position: absolute; top: 3px; bottom: 3px; left: calc(3px + (100% - 6px) * .4); width: calc((100% - 6px) / 5); border-radius: 7px; background: color-mix(in srgb, var(--v-violet) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v-violet) 45%, transparent); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cxa-you { justify-self: end; max-width: 86%; padding: 8px 11px; border-radius: 12px 12px 4px 12px; background: var(--v-surface); box-shadow: var(--v-shadow); font-size: 12.5px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cxa-steps { display: grid; gap: 7px; padding: 9px 12px; border: 1px solid var(--v-line); border-radius: 10px; background: var(--v-surface); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cxa-st { display: grid; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cxa-st > span { display: flex; grid-area: 1 / 1; align-items: center; gap: 6px; color: var(--v-ink-2); font-size: 12px; opacity: 0; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cxa-st > .cxa-st-done { color: var(--v-green); opacity: 1; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cxa .v-ring { --c: var(--v-violet); width: 9px; height: 9px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cxa-prog { position: relative; height: 4px; overflow: hidden; border-radius: 2px; background: var(--v-line-2); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cxa-prog i { position: absolute; inset: 0 auto 0 0; width: 16.7%; border-radius: inherit; background: linear-gradient(90deg, var(--v-accent-2), var(--v-accent)); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cxa-ans { margin: 0; padding: 10px 12px; border: 1px solid var(--v-line); border-radius: 10px; background: var(--v-surface); box-shadow: var(--v-shadow); font-size: 12.5px; line-height: 1.5; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cxa-conf { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; border: 1px solid color-mix(in srgb, var(--v-amber) 40%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--v-amber) 10%, transparent); color: var(--v-amber); font-size: 11px; vertical-align: 1px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cxa-conf i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cxa-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; align-items: center; padding: 8px 12px; border: 1px solid var(--v-line); border-radius: 10px; background: var(--v-surface); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cxa-k { color: var(--v-ink-2); font-size: 11.5px; font-weight: 600; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cxa-row .hxa-sw > span { overflow: hidden; color: var(--v-ink); font-size: 12px; text-overflow: ellipsis; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cxa-row .hxa-sw > .hxa-done { color: var(--v-green) !important; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.ld-mega-pic, .lx-pic).is-on .cxa .cxa-prog i, html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.ld-mega-pic, .lx-pic).is-on .cxa .cxa-tier-lit { animation-timing-function: cubic-bezier(.45, .05, .55, .95); }
@keyframes hxa-on-3 { 0%, 2.9% { opacity: 0; transform: translateY(4px); } 5.5%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
@keyframes hxa-on-12 { 0%, 11.9% { opacity: 0; transform: translateY(4px); } 14.5%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
@keyframes hxa-on-54 { 0%, 53.9% { opacity: 0; transform: translateY(4px); } 56.5%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
@keyframes hxa-on-58 { 0%, 57.9% { opacity: 0; transform: translateY(4px); } 60.5%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
@keyframes hxa-on-62 { 0%, 61.9% { opacity: 0; transform: translateY(4px); } 64.5%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
@keyframes hxa-off-12 { 0%, 11.9% { opacity: 1; } 13.5%, 94% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes hxa-pop-66 { 0%, 65.9% { opacity: 0; transform: scale(.5); } 68.5%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
@keyframes hxa-on-7 { 0%, 6.9% { opacity: 0; transform: translateY(4px); } 9.5%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
@keyframes cxa-s1 { 0%, 7.9% { opacity: 0; } 9%, 27% { opacity: 1; } 28.5%, 100% { opacity: 0; } }
@keyframes cxa-s2 { 0%, 27.9% { opacity: 0; } 29%, 39% { opacity: 1; } 40.5%, 100% { opacity: 0; } }
@keyframes cxa-s3 { 0%, 39.9% { opacity: 0; } 41%, 51% { opacity: 1; } 52.5%, 100% { opacity: 0; } }
@keyframes cxa-prog { 0%, 7.9% { width: 0; } 9%, 27.9% { width: 8.3%; } 29%, 39.9% { width: 12.5%; } 41%, 94% { width: 16.7%; } 99%, 100% { width: 0; } }
@keyframes cxa-tier {
  0%, 2% { left: 3px; opacity: 0; }
  4%, 8% { left: 3px; opacity: 1; }
  12%, 94% { left: calc(3px + (100% - 6px) * .4); opacity: 1; }
  98%, 100% { left: calc(3px + (100% - 6px) * .4); opacity: 0; }
}
/* The Cairn Chat page: the five tiers (T2 Research leads), the memory in layers along a timeline. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cx-loop-tip { left: calc(100% / 12 - 4px); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cx-loop-label { margin-left: calc(100% / 12); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cx-tiers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cx-tier { position: relative; display: grid; align-content: start; gap: 6px; padding: 16px 16px 18px; border: 1px solid var(--v-line); border-radius: 14px; background: var(--v-surface); box-shadow: var(--v-shadow); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cx-tier-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cx-tier-h b { color: var(--arc-foreground); font-size: 16px; font-weight: 600; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cx-tier em { color: var(--arc-text-secondary); font-size: 12.5px; font-style: normal; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cx-tier p { margin: 0; color: var(--arc-text-secondary); font-size: 13.5px; line-height: 1.5; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cx-tier--lead {
  isolation: isolate; overflow: hidden;
  border-color: color-mix(in srgb, var(--v-accent) 45%, var(--v-line));
  background: linear-gradient(140deg, color-mix(in srgb, var(--v-accent) 10%, var(--v-surface)), color-mix(in srgb, var(--v-accent-2) 9%, var(--v-surface)));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--v-accent) 12%, transparent), var(--v-shadow);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cx-tier--lead::after {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 34%, color-mix(in srgb, var(--v-accent-2) 16%, transparent) 45%, color-mix(in srgb, var(--v-accent) 26%, transparent) 52%, transparent 64%) no-repeat;
  background-size: 260% 100%; background-position: 130% 0; mix-blend-mode: screen;
  animation: v-sheen 7s cubic-bezier(.45, .05, .55, .95) 1s infinite backwards;
}
html[data-theme="light"] body:is(body, #oc-arc):is(body, #oc-arc-2) .cx-tier--lead::after { mix-blend-mode: multiply; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cx-badge { padding: 0 7px; border-radius: 999px; background: color-mix(in srgb, var(--v-accent) 18%, transparent); color: var(--v-green); font-size: 11px; font-weight: 600; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cx-mem { display: grid; gap: 4px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cx-axis, html body:is(body, #oc-arc):is(body, #oc-arc-2) .cx-mem-l { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); column-gap: 28px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cx-axis-t { position: relative; height: 18px; color: var(--arc-text-secondary); font-size: 12px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cx-axis-t span { position: absolute; top: 0; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cx-axis-t span:nth-child(1) { left: 0; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cx-axis-t span:nth-child(2) { left: 18%; transform: translateX(-50%); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cx-axis-t span:nth-child(3) { left: 46%; transform: translateX(-50%); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cx-axis-t span:nth-child(4) { right: 0; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cx-mem-list { display: grid; margin: 0; padding: 0; list-style: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cx-mem-l { align-items: center; padding: 14px 0; border-top: 1px solid var(--v-line-2); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cx-mem-l b { grid-column: 1; color: var(--arc-foreground); font-size: 15px; font-weight: 600; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cx-mem-l p { grid-column: 1; margin: 2px 0 0; color: var(--arc-text-secondary); font-size: 14px; line-height: 1.5; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cx-mem-bar { position: relative; grid-column: 2; grid-row: 1 / span 2; height: 10px; border-radius: 5px; background: var(--v-line-2); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cx-mem-bar::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: var(--from); right: calc(100% - var(--to)); border-radius: inherit;
  background: linear-gradient(90deg, var(--v-accent-2), var(--v-accent));
  transform-origin: left center; animation: cx-grow 1.2s cubic-bezier(.2, .7, .2, 1) calc(var(--k) * .15s + .2s) backwards;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cx-mem-l:nth-child(1) { --from: 0%; --to: 6%; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cx-mem-l:nth-child(2) { --from: 0%; --to: 100%; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cx-mem-l:nth-child(2) .cx-mem-bar::before { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--v-accent) 70%, transparent) 0 10px, transparent 10px 16px); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cx-mem-l:nth-child(3) { --from: 6%; --to: 46%; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cx-mem-l:nth-child(3) .cx-mem-bar::before { background: linear-gradient(90deg, var(--v-accent) 0 30%, color-mix(in srgb, var(--v-accent) 45%, transparent) 30% 100%); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cx-mem-l:nth-child(4) { --from: 46%; --to: 100%; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cx-mem-l:nth-child(4) .cx-mem-bar::before { background: linear-gradient(90deg, color-mix(in srgb, var(--v-accent-2) 70%, transparent), color-mix(in srgb, var(--v-accent-2) 30%, transparent)); }
@keyframes cx-grow { from { transform: scaleX(0); } }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cx-notes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cx-notes .hx-fig b { font-size: 15px; }
@media (max-width: 1024px) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .cx-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .cx-tier--lead { grid-column: 1 / -1; grid-row: 1; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .cx-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .cx-tiers, html body:is(body, #oc-arc):is(body, #oc-arc-2) .cx-notes { grid-template-columns: minmax(0, 1fr); }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .cx-axis { display: none; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .cx-mem-l { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .cx-mem-bar { grid-column: 1; grid-row: 3; }
}
/* Research Copilot and News AI at work in the Products menu (PM, 2026-11-04): ordinary rows, the same loop and
   conventions as the harness scene. The Copilot takes "This week's news" on NVDA's page and saves the thread;
   the timeline reads a new story, and the News tab's Snapshot is written. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cpa-ticker { display: flex; align-items: baseline; gap: 8px; padding: 0 2px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cpa-ticker b { font-size: 16px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cpa-ticker > span:not(.cpa-chart) { color: var(--v-ink-2); font-size: 12px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cpa-chart { display: flex; align-items: flex-end; gap: 3px; height: 18px; margin-left: auto; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cpa-chart i { width: 5px; border-radius: 1.5px; background: color-mix(in srgb, var(--v-green) 55%, transparent); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cpa-chart i:nth-child(1) { height: 7px; } html body:is(body, #oc-arc):is(body, #oc-arc-2) .cpa-chart i:nth-child(2) { height: 10px; } html body:is(body, #oc-arc):is(body, #oc-arc-2) .cpa-chart i:nth-child(3) { height: 8px; } html body:is(body, #oc-arc):is(body, #oc-arc-2) .cpa-chart i:nth-child(4) { height: 12px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cpa-chart i:nth-child(5) { height: 11px; } html body:is(body, #oc-arc):is(body, #oc-arc-2) .cpa-chart i:nth-child(6) { height: 15px; } html body:is(body, #oc-arc):is(body, #oc-arc-2) .cpa-chart i:nth-child(7) { height: 13px; } html body:is(body, #oc-arc):is(body, #oc-arc-2) .cpa-chart i:nth-child(8) { height: 18px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cpa-panel { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--v-line); border-radius: 14px; background: color-mix(in srgb, var(--v-surface) 55%, transparent); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cpa-save { margin-left: auto; padding: 2px 10px; border: 1px solid var(--v-line); border-radius: 7px; background: var(--v-surface); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cpa-save .hxa-sw > span { color: var(--v-ink); font-size: 11.5px; font-weight: 600; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cpa-chips { display: flex; flex-wrap: wrap; gap: 5px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cpa-chips span { padding: 2px 8px; border: 1px solid var(--v-line); border-radius: 999px; background: var(--v-surface); color: var(--v-ink-2); font-size: 11.5px; white-space: nowrap; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cpa-chips .cpa-pick { border-color: color-mix(in srgb, var(--v-violet) 45%, transparent); background: color-mix(in srgb, var(--v-violet) 11%, var(--v-surface)); color: var(--v-ink); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cpa-ans { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--v-line); border-radius: 10px; background: var(--v-surface); box-shadow: var(--v-shadow); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cpa-ans p { margin: 0; font-size: 12.5px; line-height: 1.45; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cpa-story { padding-left: 9px; border-left: 2px solid var(--v-blue); font-weight: 500; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cpa-metric { padding: 6px 9px; border-radius: 8px; background: var(--v-line-2); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .nwa { gap: 10px; align-content: start; min-height: 476px; } /* fixed height: the new row pushes the rows, not the picture */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .nwa .hxa-dot { display: inline-block; width: 6px; height: 6px; margin-right: 5px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .nwa-tabs { display: flex; align-items: center; gap: 4px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .nwa-tabs span { padding: 2px 9px; border-radius: 999px; color: var(--v-ink-2); font-size: 11.5px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .nwa-tabs .is-on { background: var(--v-line-2); color: var(--v-ink); font-weight: 600; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .nwa-tabs .nwa-sep { flex: 1; padding: 0; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .nwa-feed { display: grid; margin: 0; padding: 4px 12px; border: 1px solid var(--v-line); border-radius: 12px; background: var(--v-surface); box-shadow: var(--v-shadow); list-style: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .nwa-feed li { display: grid; grid-template-columns: 7px minmax(0, 1fr); gap: 9px; padding: 8px 0; overflow: hidden; border-top: 1px solid var(--v-line-2); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .nwa-feed li:first-child { border-top: 0; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .nwa-feed li > div { display: grid; gap: 2px; min-width: 0; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .nwa-feed b { font-size: 12.5px; font-weight: 600; line-height: 1.35; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .nwa-feed li > div > span:not(.nwa-meta), html body:is(body, #oc-arc):is(body, #oc-arc-2) .nwa-feed .hxa-sw > span { overflow: hidden; color: var(--v-ink-2); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .nwa-feed .hxa-sw > span { display: flex; align-items: center; gap: 5px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .nwa-dot { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: var(--c); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .nwa-meta { display: flex; align-items: center; gap: 6px; color: var(--v-ink-2); font-size: 11.5px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .nwa-tag { padding: 0 6px; border: 1px solid var(--v-line); border-radius: 5px; color: var(--v-green); font-size: 11px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .nwa-onbook { padding: 0 6px; border-radius: 5px; background: color-mix(in srgb, var(--v-amber) 12%, transparent); color: var(--v-amber); font-size: 11px; font-weight: 600; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .nwa-new { max-height: 90px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .nwa-snap, html body:is(body, #oc-arc):is(body, #oc-arc-2) .nw-snap { display: grid; gap: 7px; padding: 11px 13px 13px; border: 1px solid var(--v-line); border-radius: 12px; background: var(--v-surface); box-shadow: var(--v-shadow); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .nwa-snap-h { display: flex; align-items: center; gap: 7px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .nwa-snap-h b { font-size: 13.5px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .nwa-ai { padding: 0 6px; border-radius: 5px; background: color-mix(in srgb, var(--v-violet) 12%, transparent); color: var(--v-violet); font-size: 11px; font-weight: 600; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .nwa-beats { display: flex; gap: 5px; margin-top: 2px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .nwa-beats span, html body:is(body, #oc-arc):is(body, #oc-arc-2) .nwa-beat { flex: none; padding: 0 7px; border: 1px solid var(--v-line); border-radius: 999px; color: var(--v-ink-2); font-size: 11px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .nwa-ask { display: flex; align-items: center; gap: 8px; padding: 7px 7px 7px 12px; border: 1px solid var(--v-line); border-radius: 10px; background: var(--v-surface); color: var(--v-ink-2); font-size: 12px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .nwa-send { margin-left: auto; padding: 2px 10px; border-radius: 7px; background: var(--v-ink); color: var(--v-surface); font-size: 11.5px; font-weight: 600; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.ld-mega-pic, .lx-pic).is-on .nwa .nwa-new { animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
@keyframes hxa-on-16 { 0%, 15.9% { opacity: 0; transform: translateY(4px); } 18.5%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
@keyframes hxa-on-34 { 0%, 33.9% { opacity: 0; transform: translateY(4px); } 36.5%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
@keyframes cpa-pick {
  0%, 6% { border-color: var(--v-line); background: var(--v-surface); color: var(--v-ink-2); }
  10%, 93% { border-color: color-mix(in srgb, var(--v-violet) 45%, transparent); background: color-mix(in srgb, var(--v-violet) 11%, var(--v-surface)); color: var(--v-ink); }
  98%, 100% { border-color: var(--v-line); background: var(--v-surface); color: var(--v-ink-2); }
}
@keyframes cpa-s1 { 0%, 17.9% { opacity: 0; } 19%, 29% { opacity: 1; } 30.5%, 100% { opacity: 0; } }
@keyframes cpa-s2 { 0%, 29.9% { opacity: 0; } 31%, 44% { opacity: 1; } 45.5%, 100% { opacity: 0; } }
@keyframes cpa-prog { 0%, 17.9% { width: 0; } 19%, 29.9% { width: 8.3%; } 31%, 94% { width: 12.5%; } 99%, 100% { width: 0; } }
@keyframes nwa-in {
  0%, 7% { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; }
  12%, 93% { max-height: 90px; padding-top: 8px; padding-bottom: 8px; opacity: 1; }
  98%, 100% { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; }
}
/* The Copilot and News AI pages: the prompts as a grid, the two news surfaces side by side, a drawn Snapshot. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cp-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cp-chip { display: grid; align-content: start; justify-items: start; gap: 8px; padding: 16px; border: 1px solid var(--v-line); border-radius: 14px; background: var(--v-surface); box-shadow: var(--v-shadow); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cp-chip-l { padding: 3px 11px; border: 1px solid color-mix(in srgb, var(--v-violet) 35%, var(--v-line)); border-radius: 999px; background: color-mix(in srgb, var(--v-violet) 8%, transparent); color: var(--arc-foreground); font-size: 13.5px; font-weight: 600; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cp-chip p { margin: 0; color: var(--arc-text-secondary); font-size: 13.5px; line-height: 1.5; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .nw-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .nw-two-card { display: grid; align-content: start; gap: 10px; padding: 22px 24px; border: 1px solid var(--v-line); border-radius: 16px; background: var(--v-surface); box-shadow: var(--v-shadow); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .nw-two-card h3 { margin: 0; color: var(--arc-foreground); font-size: 19px; font-weight: 600; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .nw-two-card p { margin: 0; color: var(--arc-text-secondary); font-size: 15px; line-height: 1.55; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .nw-two-card ul { display: grid; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .nw-two-card li { position: relative; padding-left: 16px; color: var(--arc-text-secondary); font-size: 14px; line-height: 1.5; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .nw-two-card li::before { content: ""; position: absolute; top: .62em; left: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--hx-acc); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .nw-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .nw-snap { max-width: 520px; margin: 0 auto; gap: 9px; padding: 16px 18px 18px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .nw-beats { display: grid; gap: 8px; margin: 4px 0 2px; padding: 0; list-style: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .nw-beats li { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 10px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .nw-beats .nwa-beat { justify-self: start; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .nw-fine { margin: 0; color: var(--v-ink-2); font-size: 12px; }
@media (max-width: 1024px) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .cp-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .nw-two, html body:is(body, #oc-arc):is(body, #oc-arc-2) .nw-why { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .cp-chips { grid-template-columns: minmax(0, 1fr); }
}
/* The product cards (PM, 2026-11-04, after the feature scroller on hebbia.com/product): one rounded card per
   product, each in its own soft colour, sticky under the bar; each later card sticks 30px lower, so as one
   slides up over the last, the label strip at the top of every card before it stays showing and the labels
   pile up like file tabs. A card: the label strip, then the copy (name, lede, link) at the foot of the left
   column and the scene on the right. Below 900px wide or 680px tall the cards just follow one another. */
/* Full width (PM, 2026-11-04): the cards run edge to edge of the window, rounded only on top so the stacked
   label strips still read as tabs; their content keeps the page's 1240px column (--lx-pad). */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .lx { --lx-pad: max(var(--ld-gut), calc((100% - 1240px) / 2 + 28px)); position: relative; z-index: 2; display: grid; gap: 24px; width: 100%; padding: 0 0 clamp(56px, 9vh, 96px); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .lx-sec {
  --lx-bg: #ece8df;
  position: sticky;
  top: calc(80px + var(--k) * 30px);
  display: grid;
  grid-template-rows: 30px minmax(0, 1fr);
  height: min(540px, calc(100svh - 112px - 4 * 30px));
  min-height: 460px;
  box-sizing: border-box;
  overflow: hidden;
  border-top: 1px solid color-mix(in srgb, var(--ld-ink) 8%, transparent);
  border-radius: 22px 22px 0 0;
  background: var(--lx-bg);
  box-shadow: 0 -10px 30px -18px rgb(0 0 0 / .18);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .lx-sec--agents { --lx-bg: #e6e6e3; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .lx-sec--chat { --lx-bg: #f1e6dd; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .lx-sec--copilot { --lx-bg: #e0ebf5; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .lx-sec--news { --lx-bg: #e1ece6; }
/* Dark: each card's hue mixed into the page colour, so the cards follow the dark page (now the calm blue). */
html:not([data-theme="light"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .lx-sec { --lx-bg: color-mix(in srgb, #c8a77a 9%, var(--ld-bg)); box-shadow: 0 -10px 30px -16px rgb(0 0 0 / .55); }
html:not([data-theme="light"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .lx-sec--agents { --lx-bg: color-mix(in srgb, #b8c2cc 8%, var(--ld-bg)); }
html:not([data-theme="light"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .lx-sec--chat { --lx-bg: color-mix(in srgb, #d7a58a 9%, var(--ld-bg)); }
html:not([data-theme="light"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .lx-sec--copilot { --lx-bg: color-mix(in srgb, #7fb0e6 11%, var(--ld-bg)); }
html:not([data-theme="light"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .lx-sec--news { --lx-bg: color-mix(in srgb, #8cc6a8 9%, var(--ld-bg)); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .lx-eb {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 var(--lx-pad);
  color: var(--arc-text-secondary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .lx-in { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 56px); min-height: 0; padding: 4px var(--lx-pad) 28px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .lx-copy { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 12px; max-width: 440px; padding-bottom: 6px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .lx-copy h2 { margin: 0; color: var(--arc-foreground); font-family: var(--ld-display); font-size: clamp(32px, 3.4vw, 48px); font-weight: var(--arc-weight-strong); line-height: 1.05; letter-spacing: -0.03em; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .lx-lede { margin: 0; color: var(--arc-text-secondary); font-size: 16px; line-height: 1.5; text-wrap: pretty; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .lx-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--arc-foreground); font-size: 14.5px; font-weight: 600; text-decoration: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .lx-more span { transition: transform var(--arc-dur-fast) var(--arc-ease); }
@media (hover: hover) and (pointer: fine) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .lx-more:hover span { transform: translateX(3px); }
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .lx-more:focus-visible { outline: 2px solid var(--arc-focus); outline-offset: 3px; border-radius: 4px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .lx-pic { display: grid; place-items: center; min-height: 0; overflow: hidden; border-radius: 12px; background: color-mix(in srgb, var(--ld-ink) 3%, transparent); }
/* The scene at 85%, its rows a little closer (the harness keeps its wires as spacing), so it fits the card. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .lx-pic > .hxa { width: 100%; max-width: 440px; zoom: .85; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .lx-pic > .hxa:is(.axa, .cxa, .nwa) { gap: 8px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .lx-pic .hxa-status { margin-bottom: 8px; }
/* In the harness block the round ends at the gate's "Pass kept": the hook card and the "You" row, which only
   show late in the loop, would otherwise hold empty space at the foot of the block (PM, 2026-11-04). The
   Products menu's picture keeps them. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .lx-pic .hxa-hook, html body:is(body, #oc-arc):is(body, #oc-arc-2) .lx-pic .hxa-you { display: none; }
@media (max-width: 900px), (max-height: 680px) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .lx-sec { position: relative; top: auto; height: auto; min-height: 0; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .lx-in { grid-template-columns: minmax(0, 1fr); }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .lx-pic { padding: 20px 0; }
}
@media (max-width: 640px) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .lx { gap: 16px; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .lx-sec { border-radius: 16px 16px 0 0; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .lx-in { padding-bottom: 18px; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .lx-pic { padding: 12px 0; }
}
/* Left-bar icons beside each row: the portal's glyphs and hues, muted at rest, brighter
   on the row under the pointer or focus, full on the current page (as sidebar_arc does).
   Light mode takes the left bar's darker inks. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-side-ico {
  flex: none;
  width: 16px;
  height: 16px;
  color: color-mix(in srgb, var(--ld-ico, currentColor) 55%, var(--arc-text-secondary));
  transition: color var(--arc-dur-fast) var(--arc-ease);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-mega-item.is-on .ld-side-ico,
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-drop-sub:hover .ld-side-ico,
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-drop-sub:focus-visible .ld-side-ico { color: color-mix(in srgb, var(--ld-ico, currentColor) 85%, var(--arc-text-secondary)); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) [aria-current="page"] .ld-side-ico { color: var(--ld-ico, currentColor); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-drop-sub { gap: 10px; }
.ld-side-ico[data-ico="home"], .ld-side-ico[data-ico="cases"], .ld-side-ico[data-ico="pipeline"], .ld-side-ico[data-ico="messages"] { --ld-ico: #4a98ef; }
.ld-side-ico[data-ico="markets"], .ld-side-ico[data-ico="scout"] { --ld-ico: #3dbe55; }
.ld-side-ico[data-ico="watchlist"] { --ld-ico: #f0b429; }
.ld-side-ico[data-ico="geography"], .ld-side-ico[data-ico="press"] { --ld-ico: #2eb8a8; }
.ld-side-ico[data-ico="portfolios"], .ld-side-ico[data-ico="research"] { --ld-ico: #e0b06a; }
.ld-side-ico[data-ico="analysts"], .ld-side-ico[data-ico="data"] { --ld-ico: #a78bfa; }
.ld-side-ico[data-ico="models"] { --ld-ico: #f07848; }
html[data-theme="light"] .ld-side-ico[data-ico="home"], html[data-theme="light"] .ld-side-ico[data-ico="cases"],
html[data-theme="light"] .ld-side-ico[data-ico="pipeline"], html[data-theme="light"] .ld-side-ico[data-ico="messages"] { --ld-ico: #0b5cad; }
html[data-theme="light"] .ld-side-ico[data-ico="markets"], html[data-theme="light"] .ld-side-ico[data-ico="scout"] { --ld-ico: #0d6b2c; }
html[data-theme="light"] .ld-side-ico[data-ico="watchlist"] { --ld-ico: #8a5a00; }
html[data-theme="light"] .ld-side-ico[data-ico="geography"], html[data-theme="light"] .ld-side-ico[data-ico="press"] { --ld-ico: #0a6b64; }
html[data-theme="light"] .ld-side-ico[data-ico="portfolios"], html[data-theme="light"] .ld-side-ico[data-ico="research"] { --ld-ico: #7a5410; }
html[data-theme="light"] .ld-side-ico[data-ico="analysts"], html[data-theme="light"] .ld-side-ico[data-ico="data"] { --ld-ico: #5b2d91; }
html[data-theme="light"] .ld-side-ico[data-ico="models"] { --ld-ico: #a34100; }
@media (prefers-reduced-motion: reduce) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-side-ico { transition: none; }
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-drop-group {
  display: block;
  padding: var(--arc-space-2) var(--arc-space-4) var(--arc-space-1);
  color: var(--ld-menu-ink);
  font-size: var(--arc-text-sm);
  font-weight: 600;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-drop-item.ld-drop-sub { padding-left: calc(var(--arc-space-4) + var(--arc-space-3)); font-weight: var(--arc-weight-strong); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-drop-item[aria-current="page"],
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-nav-anchors > a[aria-current="page"],
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-drop-btn[data-current] { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; }

/* The other pages open on their name, set like the hero's headline, then the sections. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-page-head {
  position: relative;
  z-index: 2;
  padding: calc(64px + clamp(64px, 12vh, 128px)) var(--arc-pub-gut) clamp(24px, 4vh, 48px);
  text-align: center;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-page-head .ld-page-title { margin: 0 auto; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-hero--page .ld-hero-after { padding-top: clamp(16px, 3vh, 32px); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-page-lede { max-width: 46em; margin: var(--arc-space-4) auto 0; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-sec--solo { padding-top: clamp(16px, 3vh, 32px); }

/* A page whose content is still to come: a dashed sheet naming what goes here. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-intro.ld-placeholder {
  border-style: dashed;
  border-color: var(--arc-border-strong);
  background: transparent;
  text-align: center;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-placeholder .ld-intro-title { margin: 0 auto; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-placeholder-text {
  margin: var(--arc-space-3) auto 0;
  max-width: 46ch;
  color: var(--arc-text-secondary);
  font-size: var(--arc-text-md);
  line-height: 1.6;
}

/* Pricing: three plans as equal cards (the recommended one outlined in ink, its button
   the page's one primary action), a comparison table with the plans as columns, and a
   short FAQ. Figures are tabular. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-pricing { padding-top: clamp(16px, 3vh, 32px); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--arc-space-4);
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 900px) { html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-plans { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-plan {
  display: flex;
  flex-direction: column;
  gap: var(--arc-space-4);
  min-width: 0;
  padding: var(--arc-space-6);
  border: 1px solid var(--arc-border);
  border-radius: var(--arc-radius-card);
  background: var(--arc-surface);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-plan[data-recommended] { border-color: var(--arc-foreground); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-plan-head { display: flex; align-items: center; justify-content: space-between; gap: var(--arc-space-2); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-plan-name { margin: 0; color: var(--arc-foreground); font-size: var(--arc-text-title); font-weight: var(--arc-weight-strong); letter-spacing: -0.01em; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-plan-badge {
  padding: 2px var(--arc-space-2);
  border: 1px solid var(--arc-border-strong);
  border-radius: var(--arc-radius-pill);
  color: var(--arc-foreground);
  font-size: var(--arc-text-xs);
  font-weight: var(--arc-weight-strong);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-plan-price { display: flex; align-items: baseline; gap: var(--arc-space-2); margin: 0; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-plan-amount {
  color: var(--arc-foreground);
  font-family: var(--ld-display);
  font-size: clamp(34px, 3.4vw, 44px);
  font-weight: var(--arc-weight-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-plan-per { color: var(--arc-text-secondary); font-size: var(--arc-text-md); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-plan-blurb { margin: 0; color: var(--arc-text-secondary); font-size: var(--arc-text-md); line-height: 1.5; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-plan-points {
  display: grid;
  gap: var(--arc-space-2);
  margin: 0;
  padding: var(--arc-space-4) 0 0;
  border-top: 1px solid var(--arc-border-subtle);
  list-style: none;
  color: var(--arc-foreground);
  font-size: var(--arc-text-md);
  line-height: 1.45;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-plan-points li { display: flex; align-items: flex-start; gap: var(--arc-space-2); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-plan-check, html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-plan-none {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-plan-points .ld-plan-check { color: var(--arc-text-secondary); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-plan-none { color: var(--arc-text-muted); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-plan-cta { width: 100%; justify-content: center; margin-top: auto; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-plans-note { margin: var(--arc-space-6) 0 0; text-align: center; color: var(--arc-text-secondary); font-size: var(--arc-text-sm); }

html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-compare-title, html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-faq-title { max-width: none; margin: 0 auto; text-align: center; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-compare-sub { margin: var(--arc-space-2) auto var(--arc-space-6); text-align: center; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-compare-scroll {
  overflow-x: auto;
  border: 1px solid var(--arc-border);
  border-radius: var(--arc-radius-card);
  background: var(--arc-surface);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-compare-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  color: var(--arc-foreground);
  font-size: var(--arc-text-md);
  font-variant-numeric: tabular-nums;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-compare-table th, html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-compare-table td {
  padding: var(--arc-space-3) var(--arc-space-4);
  border-bottom: 1px solid var(--arc-border-subtle);
  text-align: center;
  vertical-align: middle;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-compare-table th[scope="row"], html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-compare-table thead th:first-child { text-align: left; font-weight: var(--arc-weight); color: var(--arc-text-secondary); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-compare-table thead th { font-size: var(--arc-text-lg); font-weight: var(--arc-weight-strong); border-bottom-color: var(--arc-border); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-compare-table [data-recommended] { background: color-mix(in srgb, var(--arc-foreground) 3.5%, transparent); }
/* On a phone the table scrolls inside its frame; the feature names stay put. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-compare-sec th span { position: sticky; left: var(--arc-space-4); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-compare-table th[scope="row"],
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-compare-table thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--arc-surface);
}
@media (max-width: 700px) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-compare-table th[scope="row"] { min-width: 150px; max-width: 170px; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-compare-table th[scope="row"], html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-compare-table thead th:first-child { box-shadow: 1px 0 0 var(--arc-border-subtle); }
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-compare-sec th {
  padding-top: var(--arc-space-6);
  text-align: left;
  color: var(--arc-foreground);
  font-size: var(--arc-text-sm);
  font-weight: var(--arc-weight-strong);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-compare-table tbody:last-child tr:last-child > * { border-bottom: 0; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-compare-table .ld-plan-check, html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-compare-table .ld-plan-none { margin: 0 auto; display: block; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-compare-tbd { color: var(--arc-text-muted); font-size: var(--arc-text-sm); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-faq-list { max-width: 760px; margin: var(--arc-space-6) auto 0; border-top: 1px solid var(--arc-border); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-faq-item { border-bottom: 1px solid var(--arc-border); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--arc-space-4);
  padding: var(--arc-space-4) 0;
  color: var(--arc-foreground);
  font-size: var(--arc-text-lg);
  font-weight: var(--arc-weight-strong);
  list-style: none;
  cursor: pointer;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-faq-item summary::-webkit-details-marker { display: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-faq-item summary .ld-drop-caret { flex: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-faq-item[open] summary .ld-drop-caret { opacity: 1; transform: translateY(1.5px) rotate(225deg); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-faq-item p { margin: 0 0 var(--arc-space-4); max-width: 64ch; color: var(--arc-text-secondary); font-size: var(--arc-text-md); line-height: 1.6; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-faq-item summary:focus-visible { outline: 2px solid var(--arc-focus); outline-offset: 2px; border-radius: 4px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-faq-more { margin: var(--arc-space-6) 0 0; text-align: center; color: var(--arc-text-secondary); font-size: var(--arc-text-md); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-faq-more a { color: var(--arc-foreground); font-weight: var(--arc-weight-strong); text-decoration: underline; text-underline-offset: 3px; }

/* The product, close up (PM, 2026-11-04): six small pieces of the product drawn in the page, four across with
   the Harness lane and the AI analyst running two wide, ruled like the hero's graph paper: a hairline between
   the cells and a small square at every crossing (each cell draws the squares at its top-left and bottom-right
   corners; the grid draws the two outer corners no cell reaches). Each piece sits inside its cell with a
   margin, so the lines run in the gaps between them. A piece shows no words: on hover (or keyboard focus) it
   darkens and its caption comes up over it. Two across on a tablet, one on a phone. */
/* The hero sits in the upper half of the first screen (PM, 2026-11-04): the statement, the actions and the
   invitation stack in the page's flow under the bar, and the grid starts right after them, so its first row
   shows on the first screen. (landing.css places them absolutely over the sphere; that layout returns with
   the test site's sphere switch.) The actions no longer sit where the cookie banner opens, so they stay put. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-hero-fold {
  min-height: 0;
  justify-content: flex-start;
  padding: calc(64px + clamp(40px, 9svh, 96px) + env(safe-area-inset-top, 0px)) var(--ld-gut) 0;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-hero-lead,
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-hero-act {
  position: relative;
  inset: auto;
  height: auto;
  padding: 0;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-hero-act {
  margin-top: clamp(24px, 4svh, 40px);
  translate: none;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-shots {
  position: relative;
  z-index: 2;
  padding: clamp(32px, 6vh, 64px) var(--ld-gut) clamp(64px, 10vh, 112px);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-shots-grid {
  --shot-line: color-mix(in srgb, var(--ld-ink) 12%, transparent);
  --shot-node: color-mix(in srgb, var(--ld-ink) 32%, transparent);
  --shot-gap: 14px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: var(--ld-max);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--shot-line);
  border-left: 1px solid var(--shot-line);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-shot {
  position: relative;
  margin: 0;
  padding: var(--shot-gap);
  border-right: 1px solid var(--shot-line);
  border-bottom: 1px solid var(--shot-line);
  background: var(--ld-bg);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-shot::before,
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-shot::after,
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-shots-grid::before,
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-shots-grid::after {
  content: "";
  position: absolute;
  z-index: 3;
  box-sizing: border-box;
  width: 7px;
  height: 7px;
  border: 1px solid var(--shot-node);
  background: var(--ld-bg);
  pointer-events: none;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-shot::before { top: -4px; left: -4px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-shot::after { right: -4px; bottom: -4px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-shots-grid::before { top: -4px; right: -3px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-shots-grid::after { bottom: -3px; left: -4px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-shot-link { display: block; color: inherit; text-decoration: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-shot--wide { grid-column: span 2; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-shot-pic { position: relative; display: block; overflow: hidden; }
/* The drawn pieces. Each sits on a faint tint of the page with the product drawn on a raised surface in its
   middle: the product's own labels and data at one size (13px; 12px for the small print), its colours only
   for state. Each acts out one moment in a loop that runs while the grid is on screen; what a piece shows at
   rest (and under reduced motion) is the moment finished. Elements that come in share one loop length and
   step in by their own delay (--d). Narrow pieces drop to one lane. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-shots, html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx, html body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa, html body:is(body, #oc-arc):is(body, #oc-arc-2) .lx {
  --v-canvas: color-mix(in srgb, var(--ld-ink) 4%, var(--ld-bg));
  --v-surface: color-mix(in srgb, var(--ld-ink) 7%, var(--ld-bg));
  --v-line: color-mix(in srgb, var(--ld-ink) 13%, transparent);
  --v-line-2: color-mix(in srgb, var(--ld-ink) 6.5%, transparent);
  --v-ink: var(--ld-ink);
  --v-ink-2: color-mix(in srgb, var(--ld-ink) 58%, transparent);
  --v-green: #7cc29c;
  --v-blue: #8aaee8;
  --v-orange: #f09a62;
  --v-amber: #e3ad55;
  --v-violet: #b9a3f5;
  --v-shadow: 0 1px 2px rgb(0 0 0 / .35), 0 12px 30px -16px rgb(0 0 0 / .7);
  --v-ease: cubic-bezier(.2, .7, .2, 1);
  --v-loop: 8s;
  --v-accent: #6fd3a2;
  --v-accent-2: #8fa4ff;
}
html[data-theme="light"] body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-shots, html[data-theme="light"] body:is(body, #oc-arc):is(body, #oc-arc-2) .hx, html[data-theme="light"] body:is(body, #oc-arc):is(body, #oc-arc-2) .hxa, html[data-theme="light"] body:is(body, #oc-arc):is(body, #oc-arc-2) .lx {
  --v-canvas: color-mix(in srgb, var(--ld-ink) 3.5%, var(--ld-bg));
  --v-surface: #fff;
  --v-green: #2f6b4f;
  --v-blue: #2f5f9e;
  --v-orange: #bc4c00;
  --v-amber: #8f5a00;
  --v-violet: #6a4bd6;
  --v-shadow: 0 1px 2px rgb(40 30 10 / .05), 0 12px 28px -16px rgb(40 30 10 / .2);
  --v-accent: #3f9a6e;
  --v-accent-2: #5a74e6;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-v {
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  height: 300px;
  padding: 18px;
  box-sizing: border-box;
  background: var(--v-canvas);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-stage { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr); place-items: center; color: var(--v-ink); font-size: 13px; line-height: 1.45; text-align: left; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-panel {
  width: 100%;
  max-width: 300px;
  box-sizing: border-box;
  padding: 14px 16px;
  border: 1px solid var(--v-line);
  border-radius: 14px;
  background: var(--v-surface);
  box-shadow: var(--v-shadow);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-shot--wide .v-panel { max-width: 560px; }
/* A colour sweep: every few seconds a soft band of the brand green, shading into blue, crosses each card in
   reading order (--k is the card's place), and its edge takes the colour as it passes. It lies over the card
   but blends into it (multiply on the light page, screen on the dark one), so it tints the surfaces and
   leaves the words as they are. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-panel { position: relative; isolation: isolate; overflow: hidden; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 34%, color-mix(in srgb, var(--v-accent-2) 18%, transparent) 44%, color-mix(in srgb, var(--v-accent) 30%, transparent) 52%, transparent 64%) no-repeat;
  mix-blend-mode: screen;
  background-size: 260% 100%;
  background-position: 130% 0;
  pointer-events: none;
  animation: v-sheen 7s cubic-bezier(.45, .05, .55, .95) calc(var(--k, 0) * .32s + 1s) infinite backwards;
}
html[data-theme="light"] body:is(body, #oc-arc):is(body, #oc-arc-2) .v-panel::after { mix-blend-mode: multiply; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-panel b { font-weight: 600; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-row { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-row > span, html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-row > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-mute { color: var(--v-ink-2); font-size: 12px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-green { color: var(--v-green); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-blue { color: var(--v-blue); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-end { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-ico { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; color: var(--v-green); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-head .v-ico { color: var(--v-violet); fill: currentColor; stroke: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-ring { display: inline-block; flex: none; width: 10px; height: 10px; box-sizing: border-box; border: 1.5px solid var(--c, var(--v-green)); border-right-color: transparent; border-radius: 50%; animation: v-spin 1.1s linear infinite; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-pulse, html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-live { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--v-green)); animation: v-pulse 1.6s ease-in-out infinite; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-live { width: 6px; height: 6px; animation-duration: 2.4s; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-tag { flex: none; padding: 0 6px; border: 1px solid var(--v-line); border-radius: 5px; color: var(--v-ink-2); font-size: 12px; line-height: 17px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border: 1px solid var(--v-line); border-radius: 999px; color: var(--v-ink-2); font-size: 12px; white-space: nowrap; }
@property --v-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
/* A card at work: a light runs round its border, as in the portal. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-stage .v-card--live {
  border-color: transparent;
  background:
    linear-gradient(var(--v-surface), var(--v-surface)) padding-box,
    conic-gradient(from var(--v-a), var(--v-line) 0deg 250deg, color-mix(in srgb, var(--c) 35%, var(--v-line)) 300deg, var(--c) 340deg, var(--v-line) 360deg) border-box;
  animation: v-runner 3s linear infinite;
}

/* Harness: the Chief of Staff's wire runs down and across into the two lanes; a spark travels it into TSM, at
   work, while NVDA waits on the gate. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-bus { position: relative; height: 26px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-bus > i { position: absolute; display: block; background: var(--v-line); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-bus-stem { left: 7px; top: 0; width: 1px; height: 13px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-bus-line { left: 7px; right: calc(25% - 3px); top: 12px; height: 1px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-bus-drop { left: calc(25% - 3px); top: 12px; width: 1px; height: 14px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-bus-drop--b { left: calc(75% + 3px); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-bus > .v-spark {
  left: 7px; top: 0;
  width: 7px; height: 7px; margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--v-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--v-blue) 22%, transparent), 0 0 10px var(--v-blue);
  opacity: 0;
  animation: v-h-spark 4.8s var(--v-ease) infinite;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-lanes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-card { position: relative; display: grid; gap: 3px; padding: 10px 12px; border: 1px solid var(--v-line); border-radius: 10px; background: var(--v-surface); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-card::before { content: ""; position: absolute; top: -4px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--c); }

/* Agent run: the Chief of Staff plans (checked), the analyst researches, and two questions go to work. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-panel--flow { display: grid; gap: 10px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-step { position: relative; display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; gap: 9px; align-items: start; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-node { width: 9px; height: 9px; margin-top: 5px; box-sizing: border-box; border: 1.5px solid var(--v-green); border-radius: 50%; background: var(--v-surface); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-step--plan .v-node { background: var(--v-green); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-step--plan::after, html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-step--work::after {
  content: ""; position: absolute; left: 4px; top: 16px; bottom: -10px; width: 1px;
  background: var(--v-green); transform-origin: top;
  animation: v-grow var(--v-loop) var(--v-ease) .5s infinite backwards;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-step--work::after { background: var(--v-line); animation-delay: 1.6s; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-check { position: relative; width: 14px; height: 14px; margin-top: 2px; border-radius: 50%; background: var(--v-green); animation: v-pop var(--v-loop) var(--v-ease) .3s infinite backwards; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-check::after { content: ""; position: absolute; left: 5px; top: 2.5px; width: 3px; height: 6.5px; border: solid var(--v-surface); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-qs { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding-top: 9px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-qs::before { content: ""; position: absolute; top: 0; left: 4px; right: calc(25% - 2px); height: 1px; background: var(--v-line); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-q { position: relative; display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--v-line); border-radius: 10px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-q::before { content: ""; position: absolute; top: -10px; left: 50%; width: 1px; height: 9px; background: var(--v-line); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-stage .v-q.v-card--live { animation: v-runner 3s linear infinite, v-appear var(--v-loop) var(--v-ease) var(--d, 0s) infinite backwards; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-q b { line-height: 1.3; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-q-tag { color: var(--c); font-size: 12px; }

/* Cairn Chat: the question, then the answer streaming in, then the confidence it carries. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-panel--chat { display: grid; gap: 9px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-bubble { justify-self: end; max-width: 88%; padding: 7px 10px; border-radius: 12px 12px 4px 12px; background: var(--v-line-2); animation: v-appear var(--v-loop) var(--v-ease) .3s infinite backwards; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-ans { margin: 0; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-ans > span { animation: v-stream var(--v-loop) linear var(--d, 0s) infinite backwards; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-chip--conf {
  margin-left: 2px;
  padding: 0 7px;
  vertical-align: 1px;
  border-color: color-mix(in srgb, var(--v-amber) 35%, transparent);
  background: color-mix(in srgb, var(--v-amber) 9%, transparent);
  color: var(--v-amber);
  animation: v-pop var(--v-loop) var(--v-ease) var(--d, 0s) infinite backwards;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-chip--conf i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Research Copilot: a prompt is picked and the figure it asked for comes back. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-panel--copilot { display: grid; gap: 10px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-chips { display: flex; flex-wrap: wrap; gap: 6px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-chip--pick {
  border-color: color-mix(in srgb, var(--v-violet) 45%, transparent);
  background: color-mix(in srgb, var(--v-violet) 11%, transparent);
  color: var(--v-ink);
  animation: v-pick var(--v-loop) var(--v-ease) .4s infinite backwards;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-metric { display: grid; gap: 1px; padding: 10px 12px; border-radius: 10px; background: var(--v-line-2); animation: v-appear var(--v-loop) var(--v-ease) 1.2s infinite backwards; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-big { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-up { color: var(--v-green); font-size: 13px; letter-spacing: 0; }

/* News AI: the timeline, one row per story; a story comes in at the top every few seconds (the script). */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-panel--news { display: grid; gap: 6px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-feed { display: flex; height: 156px; flex-direction: column; margin: 0; padding: 0; overflow: hidden; list-style: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-feed > li { display: grid; flex: none; grid-template-columns: 7px minmax(0, 1fr); gap: 9px; height: 52px; box-sizing: border-box; padding: 7px 0 0; border-top: 1px solid var(--v-line-2); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-feed b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-feed .v-row { margin-top: 3px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-dot { width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--c); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-feed > li.is-new { animation: v-feed-in .7s var(--v-ease); }

/* AI Analysts: who the analyst is, the case she is working, and the names she covers. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-panel--analyst { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; gap: 8px 18px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-who img { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--v-line-2); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-name { font-size: 16px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-desc { margin: 0; color: var(--v-ink-2); font-size: 12px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-thread { display: flex; align-self: start; align-items: center; gap: 7px; min-width: 0; padding: 6px 9px; border-radius: 8px; background: var(--v-line-2); white-space: nowrap; animation: v-appear var(--v-loop) var(--v-ease) var(--d, 0s) infinite backwards; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-thread > span { overflow: hidden; text-overflow: ellipsis; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-thread .v-ico { color: var(--v-blue); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-book { display: grid; grid-column: 2; grid-row: 1 / span 3; align-content: start; gap: 7px; padding: 10px 12px; border: 1px solid var(--v-line); border-radius: 10px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-trow { display: flex; align-items: center; gap: 8px; padding-top: 7px; border-top: 1px solid var(--v-line-2); animation: v-appear var(--v-loop) var(--v-ease) var(--d, 0s) infinite backwards; }

@container (max-width: 470px) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-lanes { grid-template-columns: minmax(0, 1fr); }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-card--gate, html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-bus-drop--b { display: none; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-bus-line { right: 50%; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-bus-drop { left: 50%; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-bus > .v-spark { animation-name: v-h-spark-1; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-panel--analyst { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-book { grid-column: 1; grid-row: auto; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-desc, html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-thread, html body:is(body, #oc-arc):is(body, #oc-arc-2) .v-lane-sub { display: none; }
}

@keyframes v-spin { to { transform: rotate(360deg); } }
@keyframes v-pulse { 50% { opacity: .3; } }
@keyframes v-runner { to { --v-a: 360deg; } }
@keyframes v-appear { 0% { opacity: 0; transform: translateY(5px); } 9%, 88% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes v-pop { 0% { opacity: 0; transform: scale(.6); } 8%, 88% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes v-stream { 0% { opacity: 0; } 5%, 88% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes v-grow { 0% { transform: scaleY(0); } 12%, 88% { transform: scaleY(1); opacity: 1; } 97%, 100% { transform: scaleY(1); opacity: 0; } }
@keyframes v-pick {
  0%, 8% { border-color: var(--v-line); background: transparent; color: var(--v-ink-2); }
  14%, 88% { border-color: color-mix(in srgb, var(--v-violet) 45%, transparent); background: color-mix(in srgb, var(--v-violet) 11%, transparent); color: var(--v-ink); }
  97%, 100% { border-color: var(--v-line); background: transparent; color: var(--v-ink-2); }
}
@keyframes v-sheen {
  0% { background-position: 130% 0; box-shadow: inset 0 0 0 1px transparent; }
  9% { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v-accent) 45%, transparent); }
  20% { background-position: -30% 0; box-shadow: inset 0 0 0 1px transparent; }
  20.1%, 100% { background-position: -30% 0; box-shadow: inset 0 0 0 1px transparent; }
}
@keyframes v-feed-in { from { margin-top: -52px; opacity: 0; } to { margin-top: 0; opacity: 1; } }
@keyframes v-h-spark {
  0% { left: 7px; top: 0; opacity: 0; }
  6% { opacity: 1; }
  18% { left: 7px; top: 12.5px; }
  46% { left: calc(25% - 3px); top: 12.5px; }
  58% { left: calc(25% - 3px); top: 26px; opacity: 1; }
  66%, 100% { left: calc(25% - 3px); top: 26px; opacity: 0; }
}
@keyframes v-h-spark-1 {
  0% { left: 7px; top: 0; opacity: 0; }
  6% { opacity: 1; }
  18% { left: 7px; top: 12.5px; }
  46% { left: 50%; top: 12.5px; }
  58% { left: 50%; top: 26px; opacity: 1; }
  66%, 100% { left: 50%; top: 26px; opacity: 0; }
}
/* The pieces hold still off screen and while a caption is up; reduced motion shows each finished. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-shots:not(.is-in) .ld-v *,
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-shots:not(.is-in) .ld-v *::before,
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-shots:not(.is-in) .ld-v *::after,
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-shot-link:hover .ld-v *,
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-shot-link:hover .ld-v *::before,
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-shot-link:hover .ld-v *::after,
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-shot-link:focus-visible .ld-v *,
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-shot-link:focus-visible .ld-v *::before,
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-shot-link:focus-visible .ld-v *::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-v *, html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-v *::before, html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-v *::after { animation: none !important; }
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-shot-cap {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: var(--arc-space-5) var(--arc-space-5) 22px;
  background: linear-gradient(to top, rgb(16 18 20 / .76) 0%, rgb(16 18 20 / .52) 40%, rgb(16 18 20 / .16) 100%);
  -webkit-backdrop-filter: blur(1.5px);
          backdrop-filter: blur(1.5px);
  color: rgb(255 255 255 / .9);
  font-size: var(--arc-text-md);
  line-height: 1.5;
  text-shadow: 0 1px 2px rgb(0 0 0 / .25);
  opacity: 0;
  transition: opacity 420ms cubic-bezier(.22, .61, .36, 1);
}
/* The caption rises a little as it fades in, and settles back as it goes. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-shot-cap-in { display: grid; gap: 6px; transform: translateY(8px); transition: transform 420ms cubic-bezier(.22, .61, .36, 1); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-shot-link:hover .ld-shot-cap-in,
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-shot-link:focus-visible .ld-shot-cap-in { transform: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-shot-cap strong {
  color: #fff;
  font-size: 17px;
  font-weight: var(--arc-weight-strong);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-shot-link:hover .ld-shot-cap,
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-shot-link:focus-visible .ld-shot-cap { opacity: 1; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-shot-link:focus-visible { outline: 2px solid var(--arc-focus); outline-offset: 2px; }
@media (max-width: 1024px) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-shots-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-shots-grid { grid-template-columns: minmax(0, 1fr); --shot-gap: 10px; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-shot--wide { grid-column: auto; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-v { height: 290px; }
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-live { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-live-tail, html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-live-head { fill: none; stroke: var(--c); stroke-linecap: round; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-live-tail { stroke-width: 2.2; stroke-dasharray: 9 91; animation: ld-live-spark 2.6s linear infinite both; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-live-head { stroke: color-mix(in srgb, var(--c) 35%, #fff); stroke-width: 3.2; stroke-dasharray: 1.5 98.5; animation: ld-live-spark-head 2.6s linear infinite both; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-live-run, html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-live-runhead { fill: none; stroke: var(--c); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-live-run { stroke-width: 1.6; stroke-dasharray: 16 84; opacity: .75; animation: ld-live-round 2.4s linear infinite; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-live-runhead { stroke: color-mix(in srgb, var(--c) 30%, #fff); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 2 98; animation: ld-live-round-head 2.4s linear infinite; }
@keyframes ld-live-spark {
  0% { stroke-dashoffset: 9; opacity: 0; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  6% { opacity: 1; }
  62% { stroke-dashoffset: -91; opacity: 1; }
  70%, 100% { stroke-dashoffset: -91; opacity: 0; }
}
@keyframes ld-live-spark-head {
  0% { stroke-dashoffset: -7.5; opacity: 0; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  6% { opacity: 1; }
  62% { stroke-dashoffset: -98.5; opacity: 1; }
  70%, 100% { stroke-dashoffset: -98.5; opacity: 0; }
}
@keyframes ld-live-round { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
@keyframes ld-live-round-head { from { stroke-dashoffset: -14; } to { stroke-dashoffset: -114; } }
@media (prefers-reduced-motion: reduce) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-live { display: none; }
}

/* The file pile under the hero: solid folders stacked in a vertical pile, seen from the front, each further one
   higher and smaller (and a shade darker) so its tab shows. A folder is its tab and the screenshot, edge to edge.
   The front one slides straight down out of the pile, fading only as it passes the pile's foot, while the rest
   slide forward; it returns unseen at the back. Long, soft easing throughout. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-files {
  --ld-glide: cubic-bezier(.45, .05, .2, 1);
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  padding: clamp(24px, 6vh, 64px) var(--arc-pub-gut) clamp(64px, 10vh, 120px);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-files-pile {
  position: relative;
  width: min(760px, 88vw);
  aspect-ratio: 1 / 1;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 87%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 87%, transparent 100%);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-folder {
  --fold: #E8E1D1;
  --fold-edge: rgb(60 48 30 / .16);
  position: absolute;
  right: 0;
  bottom: 13%;
  left: 0;
  margin: 0;
  padding-top: 26px;
  transform-origin: 50% 100%;
  transform: translateY(calc(var(--p) * -8.5%)) scale(calc(1 - var(--p) * .05));
  z-index: calc(10 - var(--p));
  filter: brightness(calc(1 - var(--p) * .03));
  transition: transform 1400ms var(--ld-glide), opacity 900ms var(--ld-glide), filter 1400ms var(--ld-glide);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-folder[data-tone="sage"] { --fold: #D7E3DA; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-folder[data-tone="stone"] { --fold: #E3E1DB; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-folder[data-deep] { opacity: 0; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-folder.is-leaving { z-index: 11; animation: ld-folder-out 1400ms var(--ld-glide) forwards; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-folder.is-parked { transition: none; }
@keyframes ld-folder-out {
  from { transform: none; }
  to { transform: translateY(125%); }
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-folder-back {
  position: relative;
  border: 1px solid var(--fold-edge);
  border-radius: 6px 14px 14px 14px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--fold) 65%, #fff), var(--fold));
  box-shadow: 0 30px 50px -28px rgb(40 30 15 / .32);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-folder-tab {
  position: absolute;
  bottom: 100%;
  left: var(--tab);
  display: flex;
  align-items: center;
  height: 27px;
  max-width: 30%;
  margin-bottom: -1px;
  padding: 0 var(--arc-space-4);
  overflow: hidden;
  border: 1px solid var(--fold-edge);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: color-mix(in srgb, var(--fold) 65%, #fff);
  color: #2a2418;
  font-size: var(--arc-text-xs);
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-folder-sheet {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 5px 13px 13px 13px;
  background: #fff;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-folder-sheet img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-folder { transition: none; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-folder.is-leaving { animation: none; }
}

/* Products overview: one card per product. Four across with Platform, the hub, on a
   double card, so seven fill two rows; two across on a tablet, one on a phone. A card
   is one link: name, the product's line, an arrow that moves on hover. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-prod-index { padding-top: clamp(16px, 3vh, 32px); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-prod-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--arc-space-4);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-prod-card:first-child { grid-column: span 2; }
@media (max-width: 960px) { html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-prod-grid { grid-template-columns: 1fr; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-prod-card:first-child { grid-column: auto; }
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-prod-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--arc-space-2);
  min-height: 148px;
  padding: var(--arc-space-6);
  border: 1px solid var(--arc-border);
  border-radius: var(--arc-radius-card);
  background: var(--arc-surface);
  color: var(--arc-foreground);
  text-decoration: none;
  transition: border-color var(--arc-dur-fast) var(--arc-ease), background-color var(--arc-dur-fast) var(--arc-ease);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-prod-name {
  font-family: var(--ld-display);
  font-size: var(--arc-text-title);
  font-weight: var(--arc-weight-strong);
  letter-spacing: -0.01em;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-prod-text {
  color: var(--arc-text-secondary);
  font-size: var(--arc-text-md);
  line-height: 1.5;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-prod-go {
  margin-top: auto;
  color: var(--arc-text-secondary);
  transition: transform var(--arc-dur) var(--arc-spring), color var(--arc-dur-fast) var(--arc-ease);
}
@media (hover: hover) and (pointer: fine) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-prod-card:hover { border-color: var(--arc-border-strong); }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-prod-card:hover .ld-prod-go { color: var(--arc-foreground); transform: translateX(3px); }
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-prod-card:focus-visible { outline: 2px solid var(--arc-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-prod-go { transition: none; }
}
/* While the glass is still the tab's width, two rails carry the tab's sides
   down to its foot; they fade as it widens to its own edges. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-drop-menu::after {
  content: "";
  position: absolute;
  top: 0;
  right: var(--ld-drop-r, 0px);
  bottom: 0;
  left: var(--ld-drop-l, 0px);
  border-right: 1px solid var(--ld-drop-line);
  border-left: 1px solid var(--ld-drop-line);
  opacity: 0;
  transform-origin: 50% 0;
  pointer-events: none;
}
@keyframes ld-drop-down {
  from { transform: scaleY(0); }
}
@keyframes ld-drop-up {
  to { opacity: 0; transform: scaleY(0); }
}
@keyframes ld-drop-glass {
  0% {
    transform: scale(var(--ld-drop-sx, 1), 0);
    animation-timing-function: cubic-bezier(.22, 1, .36, 1);
  }
  42% {
    transform: scale(var(--ld-drop-sx, 1), 1);
    animation-timing-function: cubic-bezier(.65, 0, .35, 1);
  }
  100% { transform: none; }
}
@keyframes ld-drop-rails {
  0% {
    opacity: 1;
    transform: scaleY(0);
    animation-timing-function: cubic-bezier(.22, 1, .36, 1);
  }
  42% { opacity: 1; transform: none; }
  46% { opacity: 1; }
  80%, 100% { opacity: 0; }
}
@keyframes ld-drop-rows {
  0%, 52% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes ld-drop-glass-out {
  to { opacity: 0; transform: scale(var(--ld-drop-sx, 1), 0); }
}
@keyframes ld-drop-rows-out {
  to { opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-drop.is-open .ld-drop-menu::before { animation: ld-drop-down var(--arc-dur-snappy) var(--arc-ease-enter) backwards; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-drop.is-open .ld-drop-menu > * { animation: ld-drop-rows var(--arc-dur-snappy) var(--arc-ease) backwards; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-drop-menu.is-closing::before { animation: ld-drop-up var(--arc-dur-fast) var(--arc-ease-exit) both; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-drop[data-ld-fan].is-open .ld-drop-menu::before { animation: ld-drop-glass var(--arc-dur-smooth) linear backwards; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-drop[data-ld-fan].is-open .ld-drop-menu::after { animation: ld-drop-rails var(--arc-dur-smooth) linear backwards; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-drop[data-ld-fan].is-open .ld-drop-menu > * { animation: ld-drop-rows var(--arc-dur-smooth) var(--arc-ease) backwards; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-drop[data-ld-fan] .ld-drop-menu.is-closing::before { animation: ld-drop-glass-out var(--arc-dur-fast) var(--arc-ease-exit) both; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-drop-menu.is-closing > * { animation: ld-drop-rows-out var(--arc-dur-instant) var(--arc-ease-exit) both; }
}
.arc-pub-ind {
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 1px;
  height: 2px;
  border-radius: 2px;
  background: var(--arc-foreground);
  transform-origin: 0 50%;
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--arc-dur-morph) var(--arc-spring),
    opacity var(--arc-dur-fast) var(--arc-ease);
}
.arc-pub-ind[data-on] { opacity: 1; }
.arc-pub-ind[data-jump] { transition: opacity var(--arc-dur-fast) var(--arc-ease); }

/* =====================================================================
   2. Landing actions: sentence case, 32px in the bar, 40px in the page
   ===================================================================== */
html body:is(body, #oc-arc):is(body, #oc-arc-2) a.ld-btn,
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-btn {
  height: var(--arc-control-md);
  padding: 0 var(--arc-space-3);
  gap: var(--arc-space-2);
  border: 1px solid var(--arc-border-strong);
  border-radius: var(--arc-radius-control);
  background: transparent;
  color: var(--arc-foreground);
  font-size: var(--arc-text-sm);
  font-weight: var(--arc-weight-strong);
  letter-spacing: var(--arc-tracking);
  text-transform: none;
  overflow: visible;
  transition:
    color var(--arc-dur-fast) var(--arc-ease),
    background-color var(--arc-dur-fast) var(--arc-ease),
    border-color var(--arc-dur-fast) var(--arc-ease),
    opacity var(--arc-dur-fast) var(--arc-ease),
    transform var(--arc-dur) var(--arc-spring);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-btn::before,
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-btn::after { content: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-nav .ld-btn:not(.arc-pub-primary) {
  border-color: transparent;
  color: var(--arc-text-secondary);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-nav .ld-btn .arrow { display: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) a.ld-btn.arc-pub-primary,
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-btn.arc-pub-primary {
  border-color: var(--arc-accent);
  background: var(--arc-accent);
  color: var(--arc-accent-foreground);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-btn.lg {
  height: var(--arc-control-touch);
  padding: 0 18px;
  font-size: var(--arc-text-md);
}
/* Get access and Request a demo: an icon before the label in the label's own
   ink (a key, a play mark); on hover the whole action turns orange with dark
   ink. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-btn--go .ld-ico {
  flex: none;
  width: 16px;
  height: 16px;
  stroke-width: 1.75;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-btn--go .ld-ico-dot { fill: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-btn--go .ld-ico-cut { fill: currentColor; stroke: none; }
@media (hover: hover) and (pointer: fine) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) a.ld-btn.lg.ld-btn--go:hover {
    border-color: var(--ld-hot);
    background: var(--ld-hot);
    color: var(--ld-hot-ink, var(--ld-cta-ink));
  }
}
/* The hero's actions lift clear of the cookie banner while it is open and
   settle back when it closes (landing.css places them). */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-hero-act { transition: translate var(--arc-dur-smooth) var(--arc-ease); }
/* In the page, the quiet action is Arc's secondary: a bordered surface, so it
   reads where it lands on the hero art. The bar keeps its ghost links. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-btn.lg:not(.arc-pub-primary) { background: var(--arc-surface); }
@media (hover: hover) and (pointer: fine) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-btn.lg:not(.arc-pub-primary):hover { background: var(--arc-surface-muted); }
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-btn .arrow {
  display: inline-block;
  opacity: 1;
  transition: transform var(--arc-dur) var(--arc-spring);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-btn:not(.arc-pub-primary) .arrow { display: none; }
@media (hover: hover) and (pointer: fine) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) a.ld-btn:hover,
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-btn:hover {
    background: var(--arc-hover);
    color: var(--arc-foreground);
  }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) a.ld-btn.arc-pub-primary:hover,
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-btn.arc-pub-primary:hover {
    background: var(--arc-accent-strong);
    border-color: var(--arc-accent-strong);
    color: var(--arc-accent-foreground);
  }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-btn:hover .arrow { transform: translateX(2px); }
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-btn:active {
  transform: scale(.97);
  transition-duration: var(--arc-dur-fast), var(--arc-dur-fast), var(--arc-dur-fast), var(--arc-dur-fast), var(--arc-dur-instant);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-btn:focus-visible,
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-nav-anchors > a:focus-visible,
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-drop-btn:focus-visible,
html body:is(body, #oc-arc):is(body, #oc-arc-2).landing .ld-foot :is(a, button):focus-visible {
  outline: 2px solid var(--arc-focus);
  outline-offset: 2px;
}

/* =====================================================================
   3. Hero: display type 40–52px, one orchestrated entrance
   ===================================================================== */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-eyebrow,
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-kicker,
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-deck-kicker,
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-stage-caption,
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-draft .meta {
  color: var(--arc-text-secondary);
  font-size: var(--arc-text-sm);
  font-weight: var(--arc-weight);
  letter-spacing: var(--arc-tracking);
  text-transform: none;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-eyebrow { margin-bottom: var(--arc-space-4); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-h1 {
  max-width: 16ch;
  margin: 0 auto var(--arc-space-4);
  font-size: clamp(40px, 4.4vw, 52px);
  font-weight: var(--arc-weight-strong);
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: var(--arc-foreground);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-h1 em { color: var(--arc-accent); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-hero-sub {
  max-width: 44ch;
  margin: 0 auto var(--arc-space-6);
  color: var(--arc-text-secondary);
  font-size: var(--arc-text-lg);
  line-height: 1.5;
  letter-spacing: var(--arc-tracking);
  text-wrap: pretty;
}
/* The market line is the lede's second paragraph: the same voice, held to
   the sub by proximity. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-hero-copy > .ld-hero-sub { margin-bottom: var(--arc-space-3); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-hero-market {
  max-width: 44ch;
  margin: 0 auto var(--arc-space-6);
  color: var(--arc-text-secondary);
  font-size: var(--arc-text-lg);
  font-weight: var(--arc-weight);
  line-height: 1.5;
  letter-spacing: var(--arc-tracking);
  text-wrap: pretty;
}
/* The six stages: one bordered strip with hairline dividers, not six cards
   an 8px gap apart. The line colour is the border composited on the
   surface, so the outer edge and the dividers match. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-hero-pos {
  --arc-pub-line: color-mix(in srgb, var(--arc-foreground) 9%, var(--arc-surface));
  gap: 1px;
  margin: 0 0 var(--arc-space-6);
  overflow: hidden;
  border: 1px solid var(--arc-pub-line);
  border-radius: var(--arc-radius-card);
  background: var(--arc-pub-line);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-hero-pos li {
  padding: var(--arc-space-3);
  border: 0;
  border-radius: 0;
  background: var(--arc-surface);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-hero-pos b {
  font-size: var(--arc-text-sm);
  font-weight: var(--arc-weight-strong);
  line-height: 1.4;
  letter-spacing: var(--arc-tracking);
  color: var(--arc-foreground);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-hero-pos span {
  margin-top: 2px;
  font-size: var(--arc-text-xs);
  line-height: 1.4;
  letter-spacing: var(--arc-tracking);
  color: var(--arc-text-secondary);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-hero-title {
  max-width: 20ch;
  margin: 0 auto;
  color: var(--arc-foreground);
  font-family: var(--ld-display);
  font-size: clamp(34px, 4.6vw, 64px);
  font-weight: var(--arc-weight-strong);
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
/* The statement in two lines, "AI-native" set apart in the accent. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-hero-title--lines { max-width: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-hero-line { display: block; text-wrap: balance; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-hero-em { font-style: normal; color: var(--arc-accent); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-hero-lede {
  max-width: min(100%, 52em);
  margin: var(--arc-space-5) auto 0;
  color: var(--arc-text-secondary);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.5;
  letter-spacing: var(--arc-tracking);
  text-wrap: pretty;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-hero-cta { gap: var(--arc-space-2); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-hero-note {
  margin-top: var(--arc-space-4);
  color: var(--arc-text-muted);
  font-size: var(--arc-text-sm);
  letter-spacing: var(--arc-tracking);
}
/* Under the hero's actions it lies over the orb's particles, so it sits on
   a small plate of the menu's glass, in full ink: one line on a desktop. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-hero-act .ld-hero-note {
  max-width: min(100%, 720px);
  margin: 0;
  padding: var(--arc-space-1) var(--arc-space-3);
  border-radius: var(--arc-radius-control);
  background: var(--ld-drop-glass);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
          backdrop-filter: blur(16px) saturate(140%);
  color: var(--arc-foreground);
  line-height: 1.5;
  text-align: center;
  text-wrap: balance;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-hero-more {
  border: 1px solid var(--arc-border);
  border-radius: var(--arc-radius-sheet);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-hero-more-title,
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-deck-title {
  font-weight: var(--arc-weight-strong);
  letter-spacing: -0.02em;
}

/* No scroll reveals: everything below the fold is simply there. */
html.reveal-armed body:is(body, #oc-arc):is(body, #oc-arc-2) [data-reveal],
html.reveal-armed body:is(body, #oc-arc):is(body, #oc-arc-2) [data-reveal]:not(.is-in),
html.reveal-sd body:is(body, #oc-arc):is(body, #oc-arc-2) [data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
  animation: none;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) [data-reveal] .draw {
  stroke-dasharray: none;
  animation: none;
}

/* The one entrance: the bar fades, then the hero's grid, and the two
   actions rise in above the sphere; the copy sits below the hero, so it is
   simply there. */
@keyframes arc-pub-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes arc-pub-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  /* backwards, not both: a finished fade that stays applied keeps the bar
     from letting the Introduction menu's glass see the page. */
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-nav-inner {
    animation: arc-pub-fade var(--arc-dur-considered) var(--arc-ease) backwards;
  }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-hero-grid {
    animation: arc-pub-fade var(--arc-dur-smooth) var(--arc-ease) 120ms both;
  }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-hero-lead {
    animation: arc-pub-rise var(--arc-dur-considered) var(--arc-ease-enter) 80ms backwards;
  }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-hero-act {
    animation: arc-pub-rise var(--arc-dur-considered) var(--arc-ease-enter) 200ms backwards;
  }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-stage-band .ld-stage {
    animation: arc-pub-rise var(--arc-dur-considered) var(--arc-ease-enter) 320ms both;
  }
}

/* =====================================================================
   4. Sections and the call to action
   ===================================================================== */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-sec { scroll-margin-top: 64px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-h2,
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-intro-title,
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-cta h2 {
  color: var(--arc-foreground);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: var(--arc-weight-strong);
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-sub {
  color: var(--arc-text-secondary);
  font-size: var(--arc-text-lg);
  line-height: 1.6;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.ld-ledger-body, .ld-close, .ld-room, .ld-surface, .ld-layer, .ld-deploy) h3 {
  font-weight: var(--arc-weight-strong);
  letter-spacing: -0.01em;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.ld-cell, .ld-room, .ld-surface, .ld-stack-visual, .ld-close, .ld-deploy) {
  border: 1px solid var(--arc-border);
  border-radius: var(--arc-radius-card);
  box-shadow: none;
}
/* Icons stand plain beside their labels: no tinted tile behind them (Arc
   keeps a shape for a control or a status). 20px on their own, 16px inside
   a small label, where they take the label's ink; stroke 1.75. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-mark {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: 0;
  background: none;
  color: var(--arc-text-secondary);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-mark.sm {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
  color: inherit;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-mark .ld-ico { width: 20px; height: 20px; stroke-width: 1.75; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-mark.sm .ld-ico { width: 16px; height: 16px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.ld-ledger-n, .ld-surface .kick, .ld-close .tag) { gap: var(--arc-space-2); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-room .ld-mark { margin-bottom: var(--arc-space-3); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-layer {
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--arc-space-3);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-layer .ld-mark { margin-top: 2px; }

/* The introduction: a sheet over the hero art like the call to action, its
   title on the section scale, four label-and-text pairs on the 4px grid, and
   the invitation note as the sheet's footer row. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-intro {
  padding: var(--arc-space-8);
  border: 1px solid var(--arc-border);
  border-radius: var(--arc-radius-sheet);
  background: var(--arc-surface);
  box-shadow: none;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-intro-grid {
  gap: var(--arc-space-6) var(--arc-space-8);
  margin-top: var(--arc-space-6);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-intro h3 {
  margin: 0 0 var(--arc-space-2);
  color: var(--arc-foreground);
  font-size: var(--arc-text-md);
  font-weight: var(--arc-weight-strong);
  line-height: 1.4;
  letter-spacing: var(--arc-tracking);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-intro article p {
  color: var(--arc-text-secondary);
  font-size: var(--arc-text-md);
  line-height: 1.6;
  letter-spacing: var(--arc-tracking);
  text-wrap: pretty;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-intro-note {
  margin: var(--arc-space-6) 0 0;
  padding-top: var(--arc-space-4);
  border-top: 1px solid var(--arc-border-subtle);
  color: var(--arc-text-muted);
  font-size: var(--arc-text-sm);
  line-height: 1.5;
  letter-spacing: var(--arc-tracking);
}

html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-cta { padding: 96px var(--arc-pub-gut) 112px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-cta-inner.ld-pane {
  max-width: 720px;
  padding: 48px clamp(20px, 5vw, 56px);
  border: 1px solid var(--arc-border);
  border-radius: var(--arc-radius-sheet);
  background: color-mix(in srgb, var(--arc-surface) 78%, transparent);
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-cta h2 { margin: 0 0 var(--arc-space-3); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-cta p {
  margin: 0 auto var(--arc-space-6);
  color: var(--arc-text-secondary);
  font-size: var(--arc-text-lg);
  line-height: 1.6;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-cta-actions { gap: var(--arc-space-2); }

/* =====================================================================
   5. Footer: a hairline and a quiet row, not a floating bar
   ===================================================================== */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-foot {
  margin: 0;
  padding: 0 var(--arc-pub-gut) env(safe-area-inset-bottom, 0px);
  border-top: 1px solid var(--arc-border);
  background: color-mix(in srgb, var(--arc-background) 92%, transparent);
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
  color: var(--arc-text-muted);
  pointer-events: auto;
}
html.cb-open body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-foot,
html body:is(body, #oc-arc):is(body, #oc-arc-2).landing:has(.cookie-banner[data-open="1"]) .ld-foot {
  margin-bottom: 0;
  padding-bottom: calc(var(--oc-cookie-bar, 0px) + 32px);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-foot-inner {
  min-height: 64px;
  padding: var(--arc-space-4) 0;
  gap: var(--arc-space-3) var(--arc-space-4);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-foot-left { color: var(--arc-text-secondary); font-size: var(--arc-text-sm); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-foot-left img { height: 20px; }
html[data-theme="light"] body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-foot-left img { filter: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-foot :is(a, button):not(.ld-theme-btn):not(.lang-pop-btn) {
  display: inline-flex;
  align-items: center;
  min-height: var(--arc-control-sm);
  padding: 0 var(--arc-space-2);
  border-radius: var(--arc-radius-control);
  color: var(--arc-text-secondary);
  font-size: var(--arc-text-sm);
  font-weight: var(--arc-weight);
  letter-spacing: var(--arc-tracking);
  text-transform: none;
  text-decoration: none;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-foot-links { gap: 2px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-foot-mono {
  color: var(--arc-text-secondary);
  font-size: var(--arc-text-xs);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-foot-prefs { opacity: 1; gap: 2px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-foot-prefs :is(.lang-pop-btn, .ld-theme-btn) {
  height: var(--arc-control-sm);
  border-radius: var(--arc-radius-control);
  color: var(--arc-text-secondary);
  letter-spacing: 0;
  text-transform: none;
}
@media (hover: hover) and (pointer: fine) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-foot :is(a, button):hover {
    color: var(--arc-foreground);
    background: var(--arc-hover);
  }
}

/* The assistant launcher and sign-in popup keep their behaviour; weights and
   corners follow D2/D3. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-ask-launch { font-weight: var(--arc-weight-strong); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-ask-head h2,
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-ask-form button { font-weight: var(--arc-weight-strong); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-login { --ld-login-r: var(--arc-radius-sheet); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-login-shell { box-shadow: var(--arc-shadow-floating); }

@media (max-width: 760px) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2).landing { --arc-pub-gut: 16px; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-nav-inner { gap: var(--arc-space-2); }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-nav-left { gap: var(--arc-space-2); min-width: 0; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-brand img { height: 20px; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-brand-tag { font-size: var(--arc-text-xs); padding-left: var(--arc-space-2); }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-nav-right .ld-btn:not(:last-child) { display: none; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-foot-inner { justify-content: flex-start; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-intro { padding: var(--arc-space-6) var(--arc-space-4); }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-intro-grid { gap: var(--arc-space-5); }
}
@media (max-width: 480px) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-brand-tag { display: none; }
}

/* =====================================================================
   6. Sign in, sign up, demo: Arc centered login
   ===================================================================== */
html body:is(body, #oc-arc):is(body, #oc-arc-2).auth-page {
  background: var(--arc-background);
  color: var(--arc-foreground);
  letter-spacing: var(--arc-tracking);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .auth-card {
  width: min(100%, 400px);
  max-width: 400px;
  padding: var(--arc-space-8);
  border: 1px solid var(--arc-border);
  border-radius: var(--arc-radius-sheet);
  background: var(--arc-surface);
  box-shadow: none;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .auth-card.demo-card { width: min(100%, 520px); max-width: 520px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .auth-brand {
  margin-bottom: var(--arc-space-6);
  text-align: left;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .auth-brand a { display: inline-flex; border-radius: var(--arc-radius-control); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .auth-logo { height: 26px; width: auto; max-width: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .auth-card h1 {
  margin: 0 0 var(--arc-space-2);
  font-size: var(--arc-text-display);
  font-weight: var(--arc-weight);
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-align: left;
  text-wrap: balance;
  color: var(--arc-foreground);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .auth-sub {
  margin: 0 0 var(--arc-space-6);
  color: var(--arc-text-secondary);
  font-size: var(--arc-text-sm);
  line-height: 1.5;
  letter-spacing: var(--arc-tracking);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .theme-toggle {
  top: var(--arc-space-6);
  right: var(--arc-space-6);
  width: var(--arc-control-md);
  height: var(--arc-control-md);
  border: 0;
  border-radius: var(--arc-radius-control);
  background: transparent;
  color: var(--arc-text-muted);
  transition: color var(--arc-dur-fast) var(--arc-ease), background-color var(--arc-dur-fast) var(--arc-ease), transform var(--arc-dur) var(--arc-spring);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .theme-toggle .theme-ico { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .theme-toggle:hover {
    border: 0;
    background: var(--arc-hover);
    color: var(--arc-foreground);
  }
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .theme-toggle:active { transform: scale(.94); }

html body:is(body, #oc-arc):is(body, #oc-arc-2) .auth-card form { gap: var(--arc-space-4); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.auth-card, .step2-card) label {
  gap: var(--arc-space-2);
  color: var(--arc-foreground);
  font-size: var(--arc-text-sm);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.auth-card, .step2-card) label > span {
  margin: 0;
  opacity: 1;
  color: var(--arc-foreground);
  font-size: var(--arc-text-sm);
  font-weight: var(--arc-weight-strong);
  line-height: 1.4;
}

/* Fields: 32px, 8px corners; focus is a darker border, the box never moves. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.auth-card, .step2-card) :is(input[type=text], input[type=password], input[type=email]):not(.arc-otp-slot, .arc-pub-sr),
html body:is(body, #oc-arc):is(body, #oc-arc-2) .demo-card textarea {
  box-sizing: border-box;
  width: 100%;
  height: var(--arc-control-md);
  padding: 0 var(--arc-space-3);
  border: 1px solid var(--arc-border-strong);
  border-radius: var(--arc-radius-control);
  background-color: var(--arc-surface);
  color: var(--arc-foreground);
  caret-color: var(--arc-foreground);
  font-size: var(--arc-text-md);
  letter-spacing: var(--arc-tracking);
  line-height: 1.4;
  box-shadow: none;
  outline: none;
  transition: border-color var(--arc-dur-fast) var(--arc-ease), background-color var(--arc-dur-fast) var(--arc-ease);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .demo-card textarea {
  height: auto;
  min-height: 96px;
  padding: var(--arc-space-2) var(--arc-space-3);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.auth-card, .step2-card) :is(input, textarea)::placeholder { color: var(--arc-text-muted); opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.auth-card, .step2-card) :is(input[type=text], input[type=password], input[type=email], textarea):not(.arc-otp-slot, .arc-pub-sr):hover:not(:focus) {
    border-color: color-mix(in srgb, var(--arc-foreground) 40%, transparent);
  }
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.auth-card, .step2-card) :is(input[type=text], input[type=password], input[type=email], textarea):not(.arc-otp-slot, .arc-pub-sr):is(:focus, :focus-visible) {
  border-color: var(--arc-foreground);
  background-color: var(--arc-surface);
  box-shadow: none;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.auth-card, .step2-card) :is(input[type=text], input[type=password], input[type=email]):not(.arc-otp-slot, .arc-pub-sr)[aria-invalid="true"] {
  border-color: var(--arc-danger);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.auth-card, .step2-card) :is(input[type=text], input[type=password], input[type=email]):not(.arc-otp-slot, .arc-pub-sr):is(:-webkit-autofill, :-webkit-autofill:hover, :-webkit-autofill:focus) {
  -webkit-text-fill-color: var(--arc-foreground);
  border-color: var(--arc-border-strong);
  box-shadow: 0 0 0 1000px var(--arc-surface) inset;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.auth-card, .step2-card) :is(input[type=text], input[type=password], input[type=email]):not(.arc-otp-slot, .arc-pub-sr):-webkit-autofill:focus {
  border-color: var(--arc-foreground);
}

/* Password field: the reveal button sits inside the shell (arc_public.js). */
.arc-pw {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .arc-pw > input {
  padding-right: calc(var(--arc-control-md) + 2px);
}
.arc-pw-toggle {
  position: absolute;
  top: 50%;
  right: 3px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin: -13px 0 0;
  padding: 0;
  border: 0;
  border-radius: var(--arc-radius-chip);
  background: transparent;
  color: var(--arc-text-muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--arc-dur-fast) var(--arc-ease), background-color var(--arc-dur-fast) var(--arc-ease), transform var(--arc-dur) var(--arc-spring);
}
.arc-pw-toggle svg { width: 16px; height: 16px; overflow: visible; }
.arc-pw-toggle .arc-pw-slash {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset var(--arc-dur) var(--arc-ease);
}
.arc-pw-toggle .arc-pw-mask { stroke: var(--arc-surface); }
.arc-pw-toggle[aria-pressed="true"] .arc-pw-slash { stroke-dashoffset: 0; }
.arc-pw-toggle[aria-pressed="true"] { color: var(--arc-foreground); }
@media (hover: hover) and (pointer: fine) {
  .arc-pw-toggle:hover { background: var(--arc-hover); color: var(--arc-foreground); }
}
.arc-pw-toggle:active { transform: scale(.94); transition-duration: var(--arc-dur-fast), var(--arc-dur-fast), var(--arc-dur-instant); }
.arc-pw-toggle:focus { outline: none; }
.arc-pw-toggle:focus-visible { outline: 2px solid var(--arc-focus); outline-offset: 1px; }
@keyframes arc-pub-resolve { from { opacity: .35; filter: blur(2px); } }
.arc-pw > input[data-reveal] { animation: arc-pub-resolve var(--arc-dur) var(--arc-ease-enter); }

/* Primary action: full width, accent, presses to .97. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.auth-card, .step2-card) button[type=submit],
html body:is(body, #oc-arc):is(body, #oc-arc-2).auth-page :is(.btn-primary, a.btn-primary, .btn-secondary) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: var(--arc-control-md);
  margin: 0;
  padding: 0 var(--arc-space-4);
  border: 1px solid var(--arc-accent);
  border-radius: var(--arc-radius-control);
  background: var(--arc-accent);
  color: var(--arc-accent-foreground);
  font-size: var(--arc-text-sm);
  font-weight: var(--arc-weight-strong);
  letter-spacing: var(--arc-tracking);
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--arc-dur-fast) var(--arc-ease),
    border-color var(--arc-dur-fast) var(--arc-ease),
    opacity var(--arc-dur-fast) var(--arc-ease),
    transform var(--arc-dur) var(--arc-spring);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.auth-card, .step2-card) form button[type=submit] {
  width: 100%;
  margin-top: var(--arc-space-2);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2).auth-page .btn-secondary {
  border-color: var(--arc-border-strong);
  background: var(--arc-surface);
  color: var(--arc-foreground);
}
@media (hover: hover) and (pointer: fine) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.auth-card, .step2-card) button[type=submit]:hover:not(:disabled),
  html body:is(body, #oc-arc):is(body, #oc-arc-2).auth-page :is(.btn-primary, a.btn-primary):hover {
    border-color: var(--arc-accent-strong);
    background: var(--arc-accent-strong);
    color: var(--arc-accent-foreground);
  }
  html body:is(body, #oc-arc):is(body, #oc-arc-2).auth-page .btn-secondary:hover {
    border-color: var(--arc-border-strong);
    background: var(--arc-surface-muted);
    color: var(--arc-foreground);
  }
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.auth-card, .step2-card) button[type=submit]:active:not(:disabled),
html body:is(body, #oc-arc):is(body, #oc-arc-2).auth-page :is(.btn-primary, .btn-secondary):active {
  transform: scale(.97);
  transition-duration: var(--arc-dur-fast), var(--arc-dur-fast), var(--arc-dur-fast), var(--arc-dur-instant);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.auth-card, .step2-card) button[type=submit]:disabled { opacity: .52; cursor: progress; }
html body:is(body, #oc-arc):is(body, #oc-arc-2).auth-page :is(button, a, input, textarea):focus-visible {
  outline: 2px solid var(--arc-focus);
  outline-offset: 2px;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2).auth-page :is(input, textarea):focus-visible { outline: none; }
@media (pointer: coarse) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.auth-card, .step2-card) :is(input[type=text], input[type=password], input[type=email], button[type=submit]):not(.arc-otp-slot, .arc-pub-sr) {
    height: var(--arc-control-touch);
    font-size: 16px;
  }
}

/* Errors and notices: a helper row in status ink; it opens on a smooth
   spring (arc_public.js animates the height from a true zero). */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .auth-err,
html body:is(body, #oc-arc):is(body, #oc-arc-2) .auth-info {
  margin: calc(var(--arc-space-2) * -1) 0 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--arc-danger);
  font-size: var(--arc-text-xs);
  line-height: 1.5;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .auth-info { color: var(--arc-warning); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .auth-err[hidden],
html body:is(body, #oc-arc):is(body, #oc-arc-2) .auth-info[hidden] { display: none; }

html body:is(body, #oc-arc):is(body, #oc-arc-2) .auth-foot {
  margin-top: var(--arc-space-6);
  padding-top: var(--arc-space-4);
  border-top: 1px solid var(--arc-border-subtle);
  color: var(--arc-text-secondary);
  font-size: var(--arc-text-sm);
  text-align: left;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .auth-foot .dim { color: var(--arc-text-secondary); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .auth-foot a {
  color: var(--arc-foreground);
  font-weight: var(--arc-weight-strong);
  text-decoration: underline;
  text-decoration-color: var(--arc-border-strong);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--arc-dur-fast) var(--arc-ease);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .auth-foot a:hover { color: var(--arc-foreground); text-decoration-color: currentColor; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .auth-foot .arc-pub-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--arc-space-3);
  margin-top: var(--arc-space-3);
  color: var(--arc-text-muted);
  font-size: var(--arc-text-xs);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .auth-foot .arc-pub-legal :is(a, button) {
  color: var(--arc-text-secondary);
  font-weight: var(--arc-weight);
  text-decoration: none;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .auth-foot .arc-pub-legal :is(a, button):hover { color: var(--arc-foreground); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .auth-closed { text-align: left; color: var(--arc-text-secondary); font-size: var(--arc-text-sm); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .auth-closed code {
  border-color: var(--arc-border);
  border-radius: var(--arc-radius-chip);
  background: var(--arc-surface-muted);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .demo-meta {
  border-top-color: var(--arc-border-subtle);
  color: var(--arc-text-secondary);
  font-size: var(--arc-text-sm);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .demo-success {
  border-color: color-mix(in srgb, var(--arc-success) 35%, transparent);
  border-radius: var(--arc-radius-card);
  background: var(--arc-success-subtle);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .demo-success h3 { font-weight: var(--arc-weight-strong); }

/* The floating language button follows the controls. */
html body:is(body, #oc-arc):is(body, #oc-arc-2).auth-page .lang-pop-floating .lang-pop-btn {
  border-color: var(--arc-border);
  border-radius: var(--arc-radius-control);
}

/* Framed in the landing's sign-in popup: the card is the sheet. */
html.auth-embed body:is(body, #oc-arc):is(body, #oc-arc-2) .auth-card {
  width: 100%;
  max-width: none;
  border-radius: var(--arc-radius-sheet);
  box-shadow: none;
}

/* =====================================================================
   7. Second step: the code dialog and the 2FA suggestion
   ===================================================================== */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .step2-backdrop {
  background: color-mix(in srgb, var(--arc-background) 55%, transparent);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .step2-card {
  width: min(400px, 100%);
  padding: var(--arc-space-6);
  border: 1px solid var(--arc-border);
  border-radius: var(--arc-radius-sheet);
  background: var(--arc-surface);
  box-shadow: var(--arc-shadow-floating);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .step2-card h2 {
  margin: 0 0 var(--arc-space-2);
  font-size: var(--arc-text-title);
  font-weight: var(--arc-weight);
  letter-spacing: -0.015em;
  line-height: 1.25;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .step2-card .step2-sub {
  margin: 0 0 var(--arc-space-5);
  opacity: 1;
  color: var(--arc-text-secondary);
  font-size: var(--arc-text-sm);
  line-height: 1.5;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .step2-actions { gap: var(--arc-space-2); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) #totp-suggest-modal .step2-actions > button {
  height: var(--arc-control-md);
  padding: 0 var(--arc-space-3);
  font-size: var(--arc-text-sm);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .step2-foot { margin-top: var(--arc-space-4); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .step2-foot a {
  opacity: 1;
  color: var(--arc-text-secondary);
  font-size: var(--arc-text-sm);
  text-decoration: none;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .step2-foot a:hover { color: var(--arc-foreground); }
@keyframes arc-pub-dialog-in {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .step2-backdrop:not([hidden]) {
    animation: arc-pub-fade var(--arc-dur) var(--arc-ease) both;
  }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .step2-backdrop:not([hidden]) .step2-card {
    animation: arc-pub-dialog-in var(--arc-dur-considered) var(--arc-spring) both;
  }
}

/* Code slots (arc_public.js builds them over the real name="code" field). */
.arc-otp {
  position: relative;
  display: flex;
  gap: var(--arc-space-2);
  width: fit-content;
  max-width: 100%;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .arc-otp-slot {
  box-sizing: border-box;
  flex: 0 1 42px;
  width: 42px;
  min-width: 0;
  height: 48px;
  padding: 0;
  border: 1px solid var(--arc-border-strong);
  border-radius: var(--arc-radius-control);
  background: var(--arc-surface);
  color: var(--arc-foreground);
  caret-color: var(--arc-accent);
  font: inherit;
  font-size: var(--arc-text-lg);
  font-variant-numeric: tabular-nums;
  text-align: center;
  outline: none;
  transition: border-color var(--arc-dur-fast) var(--arc-ease), background-color var(--arc-dur-fast) var(--arc-ease);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .arc-otp-slot[data-filled] {
  border-color: var(--arc-accent);
  background: var(--arc-accent-subtle);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .arc-otp[data-invalid] .arc-otp-slot {
  border-color: var(--arc-danger);
  background: var(--arc-danger-subtle);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .arc-otp-slot:focus { border-color: var(--arc-border-strong); box-shadow: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .arc-otp-slot[data-filled]:focus { border-color: var(--arc-accent); }
/* One ring glides to the focused slot. */
.arc-otp-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 42px;
  height: 48px;
  border: 2px solid var(--arc-focus);
  border-radius: var(--arc-radius-control);
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--arc-dur-morph) var(--arc-spring),
    opacity var(--arc-dur-fast) var(--arc-ease),
    border-color var(--arc-dur-fast) var(--arc-ease);
}
.arc-otp:focus-within .arc-otp-ring { opacity: 1; }
.arc-otp[data-invalid] .arc-otp-ring { border-color: var(--arc-danger); }
@keyframes arc-pub-nudge {
  0%, 100% { transform: none; }
  25% { transform: translateX(-4px); }
  60% { transform: translateX(3px); }
}
@media (prefers-reduced-motion: no-preference) {
  .arc-otp[data-nudge] { animation: arc-pub-nudge var(--arc-dur-considered) var(--arc-ease); }
}
@media (max-width: 360px) {
  .arc-otp { gap: 6px; }
  .arc-otp-ring,
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .arc-otp-slot { height: 44px; }
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .arc-pub-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* =====================================================================
   8. Reduced motion: no travel at all
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .arc-pub-ind,
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-drop::before,
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-drop-item,
  .arc-pw-toggle,
  .arc-pw-toggle .arc-pw-slash,
  .arc-otp-ring,
  .arc-otp-slot { transition: none; }
  .arc-pw > input[data-reveal],
  .arc-otp[data-nudge] { animation: none; }
  .arc-pw-toggle:active,
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-btn:active,
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .theme-toggle:active,
  html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.auth-card, .step2-card) button[type=submit]:active,
  html body:is(body, #oc-arc):is(body, #oc-arc-2).auth-page :is(.btn-primary, .btn-secondary):active { transform: none; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-btn .arrow { transition: none; transform: none; }
}

/* The corporate footer (PM, 2026-11-04, after harvey.ai's), in the page's own scheme: its background over the
   grid, its inks and hairlines, the site's buttons (accent and bordered surface), the full-colour logo in light.
   A call to action over a rule; the logo and LinkedIn beside five columns of links (muted headings); the
   copyright with the language and theme switches. The rules sit last in the file and name .ld-foot--corp so they win over
   the quiet footer row's. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-foot.ld-foot--corp {
  --lf-bg: var(--ld-bg);
  --lf-ink: var(--arc-foreground);
  --lf-ink-2: var(--arc-text-secondary);
  --lf-line: var(--arc-border);
  padding: 0 var(--ld-gut) env(safe-area-inset-bottom, 0px);
  border-top: 1px solid var(--lf-line);
  background: var(--lf-bg);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  color: var(--lf-ink-2);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-foot.ld-foot--corp .lf { max-width: 1240px; margin: 0 auto; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-foot.ld-foot--corp .lf-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; padding: clamp(40px, 6vh, 64px) 0 clamp(32px, 5vh, 48px); border-bottom: 1px solid var(--lf-line); }
/* In the hero title's face (the display face, weight and tracking; the test site's headline font follows). */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-foot.ld-foot--corp .lf-cta-t { margin: 0; color: var(--lf-ink); font-family: var(--ld-display); font-size: clamp(26px, 2.6vw, 36px); font-weight: var(--arc-weight-strong); line-height: 1.1; letter-spacing: -0.035em; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-foot.ld-foot--corp .lf-cta-acts { display: flex; flex-wrap: wrap; gap: 10px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-foot.ld-foot--corp .lf-cta-acts .lf-btn {
  min-height: var(--arc-control-touch);
  padding: 0 18px;
  border: 1px solid var(--arc-border-strong);
  border-radius: var(--arc-radius-control);
  background: var(--arc-surface);
  color: var(--arc-foreground);
  font-size: var(--arc-text-md);
  font-weight: var(--arc-weight-strong);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-foot.ld-foot--corp .lf-cta-acts .lf-btn--go { border-color: var(--arc-accent); background: var(--arc-accent); color: var(--arc-accent-foreground); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-foot.ld-foot--corp .lf-grid { display: grid; grid-template-columns: minmax(180px, 1.3fr) repeat(5, minmax(0, 1fr)); gap: 32px 24px; padding: clamp(36px, 6vh, 56px) 0; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-foot.ld-foot--corp .lf-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-foot.ld-foot--corp .lf-brand img { height: 24px; width: auto; filter: brightness(0) invert(1); }
html[data-theme="light"] body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-foot.ld-foot--corp .lf-brand img { filter: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-foot.ld-foot--corp .lf-brand .ld-social { min-height: 0; margin-top: 6px; padding: 6px; border: 1px solid var(--lf-line); border-radius: 8px; color: var(--lf-ink); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-foot.ld-foot--corp .lf-brand .ld-social svg { width: 16px; height: 16px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-foot.ld-foot--corp .lf-h { margin: 0 0 14px; color: var(--lf-ink-2); font-size: 13px; font-weight: 500; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-foot.ld-foot--corp .lf-col ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-foot.ld-foot--corp .lf-col :is(a, button) {
  display: inline;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--lf-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
/* The switches sit beside the copyright, clear of the assistant's button in the bottom-right corner. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-foot.ld-foot--corp .lf-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 12px 20px; padding: 18px 0 22px; border-top: 1px solid var(--lf-line); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-foot.ld-foot--corp .lf-copy { color: var(--lf-ink-2); font-size: 13px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-foot.ld-foot--corp .ld-foot-prefs { display: flex; align-items: center; gap: 4px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-foot.ld-foot--corp .ld-foot-prefs :is(.lang-pop-btn, .ld-theme-btn) { color: var(--lf-ink-2); background: transparent; border-color: var(--lf-line); }
@media (hover: hover) and (pointer: fine) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-foot.ld-foot--corp .lf-col :is(a, button):hover { color: var(--lf-ink-2); background: none; text-decoration: none; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-foot.ld-foot--corp .lf-cta-acts .lf-btn:hover { background: var(--arc-surface-muted); color: var(--arc-foreground); }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-foot.ld-foot--corp .lf-cta-acts .lf-btn--go:hover { border-color: var(--arc-accent-strong); background: var(--arc-accent-strong); color: var(--arc-accent-foreground); }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-foot.ld-foot--corp .ld-foot-prefs :is(.lang-pop-btn, .ld-theme-btn):hover, html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-foot.ld-foot--corp .lf-brand .ld-social:hover { color: var(--lf-ink); background: var(--arc-hover); }
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-foot.ld-foot--corp :is(a, button):focus-visible { outline: 2px solid var(--arc-focus); outline-offset: 3px; border-radius: 4px; }
@media (max-width: 1024px) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-foot.ld-foot--corp .lf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-foot.ld-foot--corp .lf-brand { grid-column: 1 / -1; flex-direction: row; align-items: center; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-foot.ld-foot--corp .lf-brand .ld-social { margin: 0 0 0 auto; }
}
@media (max-width: 560px) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-foot.ld-foot--corp .lf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-foot.ld-foot--corp .lf-cta-acts { width: 100%; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-foot.ld-foot--corp .lf-cta-acts .lf-btn { flex: 1; justify-content: center; }
}

/* Client quotes (PM, 2026-11-04: "let's get some client quotes out"): a heading in the headline face, a lead
   quote set large, then three cards, each with the product it speaks of linked under it. The quotes are
   samples we wrote, so the template shows the section only where sample_quotes is set (the test site). */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .lq { --lq-mark: #3f6e58; --lq-glass: rgba(255, 255, 255, .4); --lq-edge: rgba(255, 255, 255, .72); --lq-hi: rgba(255, 255, 255, .85); --lq-shadow: rgba(38, 48, 60, .2); --lq-b1: rgba(63, 110, 88, .38); --lq-b2: rgba(226, 150, 104, .32); --lq-b3: rgba(96, 150, 220, .36); --lq-b4: rgba(150, 122, 214, .26); overflow: clip; padding: clamp(64px, 10vh, 112px) var(--ld-gut) clamp(56px, 9vh, 96px); }
html:not([data-theme="light"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .lq { --lq-mark: #8cc6a8; --lq-glass: rgba(214, 228, 248, .06); --lq-edge: rgba(214, 228, 248, .16); --lq-hi: rgba(255, 255, 255, .1); --lq-shadow: rgba(0, 0, 0, .5); --lq-b1: rgba(140, 198, 168, .2); --lq-b2: rgba(215, 150, 110, .16); --lq-b3: rgba(127, 176, 230, .24); --lq-b4: rgba(160, 140, 230, .16); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .lq-in { position: relative; max-width: 1240px; margin: 0 auto; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .lq-head { display: flex; flex-direction: column; gap: 12px; max-width: 640px; margin-bottom: clamp(28px, 4vw, 44px); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .lq-title { margin: 0; color: var(--arc-foreground); font-family: var(--ld-display); font-size: clamp(32px, 3.4vw, 48px); font-weight: var(--arc-weight-strong); line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .lq-lede { margin: 0; color: var(--arc-text-secondary); font-size: 16px; line-height: 1.5; text-wrap: pretty; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .lq-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .lq-card { display: flex; flex-direction: column; min-width: 0; padding: 26px 26px 20px; border: 1px solid var(--lq-edge); border-radius: 18px; background: var(--lq-glass); box-shadow: inset 0 1px 0 var(--lq-hi), 0 14px 36px -20px var(--lq-shadow); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .lq-lead { grid-column: 1 / -1; padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 52px) 24px; }
/* Glass (PM, 2026-11-04: "semi-transparent, glass-morphic", all four cards): the cards frost a soft field of the
   page's hues laid behind them (sage, clay, calm blue, a touch of violet), static, so nothing repaints the blur. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .lq-stage { position: relative; isolation: isolate; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .lq-stage::before { content: ""; position: absolute; inset: -56px -80px; z-index: -1; pointer-events: none; background: radial-gradient(34% 54% at 22% 34%, var(--lq-b1), transparent 70%), radial-gradient(32% 46% at 60% 10%, var(--lq-b2), transparent 70%), radial-gradient(32% 52% at 80% 72%, var(--lq-b3), transparent 70%), radial-gradient(30% 42% at 36% 90%, var(--lq-b4), transparent 70%); -webkit-mask-image: radial-gradient(farthest-side, #000 66%, transparent); mask-image: radial-gradient(farthest-side, #000 66%, transparent); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .lq { --lq-glass: rgba(255, 255, 255, .78); }
  html:not([data-theme="light"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .lq { --lq-glass: rgba(23, 38, 54, .86); }
}
@media (prefers-reduced-transparency: reduce) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .lq-card { background: var(--arc-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .lq-stage::before { display: none; }
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .lq-fig { display: flex; flex: 1; flex-direction: column; gap: 18px; margin: 0; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .lq-mark { display: block; height: 22px; color: var(--lq-mark); font-family: var(--ld-display); font-size: 56px; font-weight: 600; line-height: .9; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .lq-lead .lq-mark { height: 34px; font-size: 88px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .lq-q { flex: 1; margin: 0; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .lq-q p { margin: 0; color: var(--arc-foreground); font-size: 16.5px; line-height: 1.6; text-wrap: pretty; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .lq-lead .lq-q p { max-width: 920px; font-family: var(--ld-display); font-size: clamp(22px, 2.3vw, 31px); font-weight: 400; line-height: 1.32; letter-spacing: -0.015em; }
html:lang(zh) body:is(body, #oc-arc):is(body, #oc-arc-2) .lq-lead .lq-q p,
html:lang(ja) body:is(body, #oc-arc):is(body, #oc-arc-2) .lq-lead .lq-q p,
html:lang(ko) body:is(body, #oc-arc):is(body, #oc-arc-2) .lq-lead .lq-q p { line-height: 1.5; letter-spacing: .02em; }
/* Chinese, Japanese and Korean quotes keep the strict line-breaking rules (no line starting with ー or a small
   kana); Japanese also wraps at phrase boundaries where the browser can. */
html:lang(zh) body:is(body, #oc-arc):is(body, #oc-arc-2) .lq-q p,
html:lang(ja) body:is(body, #oc-arc):is(body, #oc-arc-2) .lq-q p,
html:lang(ko) body:is(body, #oc-arc):is(body, #oc-arc-2) .lq-q p { line-break: strict; }
html:lang(ja) body:is(body, #oc-arc):is(body, #oc-arc-2) .lq-q p { word-break: auto-phrase; }
/* Korean breaks lines between words (at spaces), not inside them. */
html:lang(ko) body:is(body, #oc-arc):is(body, #oc-arc-2) .lq,
html:lang(ko) body:is(body, #oc-arc):is(body, #oc-arc-2) .lx-copy { word-break: keep-all; overflow-wrap: anywhere; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .lq-by { display: flex; flex-direction: column; gap: 2px; padding-left: 12px; border-left: 2px solid var(--lq-mark); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .lq-role { color: var(--arc-foreground); font-size: 14px; font-weight: 600; line-height: 1.4; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .lq-firm { color: var(--arc-text-secondary); font-size: 13.5px; line-height: 1.4; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .lq-on { display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--arc-border); color: var(--arc-foreground); font-size: 14px; font-weight: 600; text-decoration: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .lq-on span { transition: transform var(--arc-dur-fast) var(--arc-ease); }
@media (hover: hover) and (pointer: fine) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .lq-on:hover span { transform: translateX(3px); }
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .lq-on:focus-visible { outline: 2px solid var(--arc-focus); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { html body:is(body, #oc-arc):is(body, #oc-arc-2) .lq-on span { transition: none; } }
@media (max-width: 960px) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .lq-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .lq-card { padding: 22px 20px 18px; border-radius: 16px; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .lq-lead .lq-mark { height: 26px; font-size: 64px; }
}

/* Solution pages (PM, 2026-11-04): one page per client type. What the job asks (three cards), a working day
   (five steps, each with the product behind it), the fit check (how the firm earns, needs against what Cairn
   changes, the plan that fits, what Cairn does not do) and the other client types; /solutions lists them all. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-world { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-pain { padding: 22px 24px 24px; border: 1px solid var(--v-line); border-radius: 16px; background: var(--v-canvas); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-n { display: block; margin-bottom: 16px; color: var(--hx-acc); font-family: var(--ld-display); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-pain h3 { margin: 0 0 8px; color: var(--arc-foreground); font-size: 18px; font-weight: 600; line-height: 1.3; text-wrap: balance; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-pain p { margin: 0; color: var(--arc-text-secondary); font-size: 15px; line-height: 1.55; text-wrap: pretty; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-step { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 18px; border: 1px solid var(--v-line); border-radius: 16px; background: var(--v-canvas); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-step:not(:last-child)::after { content: ""; position: absolute; top: 31px; right: -15px; width: 14px; height: 1px; background: var(--v-line); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-dot { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--v-line); border-radius: 50%; background: var(--ld-bg); color: var(--arc-foreground); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-step h3 { margin: 2px 0 0; color: var(--arc-foreground); font-size: 16px; font-weight: 600; line-height: 1.3; text-wrap: balance; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-step p { flex: 1; margin: 0; color: var(--arc-text-secondary); font-size: 14px; line-height: 1.55; text-wrap: pretty; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-chip { display: inline-flex; align-items: center; align-self: flex-start; gap: 6px; max-width: 100%; padding: 5px 11px 5px 8px; border: 1px solid var(--v-line); border-radius: 999px; background: var(--ld-bg); color: var(--arc-foreground); font-size: 12.5px; font-weight: 600; line-height: 1.3; text-decoration: none; transition: border-color var(--arc-dur-fast) var(--arc-ease); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-chip .ld-side-ico { width: 14px; height: 14px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-fit { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 32px); align-items: start; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-label { margin: 0 0 10px; color: var(--arc-text-secondary); font-size: 13px; font-weight: 600; line-height: 1.4; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-biz { margin-bottom: 24px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-biz-t { margin: 0; color: var(--arc-foreground); font-family: var(--ld-display); font-size: clamp(18px, 1.6vw, 21px); font-weight: 400; line-height: 1.5; letter-spacing: -0.01em; text-wrap: pretty; }
/* Chinese, Japanese and Korean set this paragraph in the text face: the display stack starts with Geist, whose
   narrow "，" and "。" would otherwise slip into the CJK line. */
html:lang(zh) body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-biz-t,
html:lang(ja) body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-biz-t,
html:lang(ko) body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-biz-t { font-family: var(--ld-sans); letter-spacing: .01em; line-break: strict; }
html:lang(ja) body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-biz-t { word-break: auto-phrase; }
html:lang(ko) body:is(body, #oc-arc):is(body, #oc-arc-2) .sx { word-break: keep-all; overflow-wrap: anywhere; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-table { width: 100%; border: 1px solid var(--v-line); border-radius: 16px; border-collapse: separate; border-spacing: 0; overflow: hidden; background: var(--v-canvas); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-table thead th { padding: 12px 20px; border-bottom: 1px solid var(--v-line); color: var(--arc-text-secondary); font-size: 12.5px; font-weight: 600; text-align: left; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-table tbody th, html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-table tbody td { padding: 16px 20px; vertical-align: top; text-align: left; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-table tbody tr + tr > * { border-top: 1px solid var(--v-line); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-table tbody th { width: 38%; color: var(--arc-foreground); font-size: 15px; font-weight: 600; line-height: 1.45; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-table tbody td { color: var(--arc-text-secondary); font-size: 15px; line-height: 1.55; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-side { display: grid; gap: 16px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-plan { padding: 22px 24px 20px; border: 1px solid var(--v-line); border-radius: 16px; background: color-mix(in srgb, var(--v-green) 8%, var(--v-canvas)); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-plan-name { margin: 0 0 4px; color: var(--arc-foreground); font-family: var(--ld-display); font-size: 30px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-plan-why { margin: 10px 0 16px; color: var(--arc-foreground); font-size: 15px; line-height: 1.55; text-wrap: pretty; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-link { display: inline-flex; align-items: center; gap: 6px; color: var(--arc-foreground); font-size: 14px; font-weight: 600; text-decoration: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-not { padding: 20px 24px 22px; border: 1px dashed var(--v-line); border-radius: 16px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-not ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-not li { position: relative; padding-left: 20px; color: var(--arc-text-secondary); font-size: 14.5px; line-height: 1.55; text-wrap: pretty; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-not li::before { content: ""; position: absolute; top: .78em; left: 2px; width: 9px; height: 1.5px; border-radius: 1px; background: currentColor; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx > .hx-sec:last-child { padding-bottom: clamp(56px, 9vh, 96px); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-others { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-other { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px 10px 12px; border: 1px solid var(--v-line); border-radius: 999px; background: var(--v-canvas); color: var(--arc-foreground); font-size: 14px; font-weight: 600; text-decoration: none; transition: border-color var(--arc-dur-fast) var(--arc-ease); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-arrow { transition: transform var(--arc-dur-fast) var(--arc-ease); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-index { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-index > li { display: flex; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-card { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 10px 10px 18px; border: 1px solid var(--v-line); border-radius: 18px; background: var(--v-canvas); color: inherit; text-decoration: none; transition: border-color var(--arc-dur-fast) var(--arc-ease); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-card-pic { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-card-pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--arc-dur-slow, .4s) var(--arc-ease); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-card-name { display: flex; align-items: center; gap: 8px; padding: 4px 8px 0; color: var(--arc-foreground); font-size: 17px; font-weight: 600; line-height: 1.3; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-card-name .sx-arrow { margin-left: auto; color: var(--arc-text-secondary); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-card-lede { padding: 0 8px; color: var(--arc-text-secondary); font-size: 14px; line-height: 1.5; text-wrap: pretty; }
@media (hover: hover) and (pointer: fine) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-chip:hover, html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-other:hover, html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-card:hover { border-color: var(--arc-border-strong); }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-link:hover .sx-arrow, html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-other:hover .sx-arrow, html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-card:hover .sx-arrow { transform: translateX(3px); }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-card:hover .sx-card-pic img { transform: scale(1.02); }
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-chip:focus-visible, html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-other:focus-visible, html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-card:focus-visible, html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-link:focus-visible { outline: 2px solid var(--arc-focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-arrow, html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-card-pic img { transition: none; }
}
@media (max-width: 1180px) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-steps { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-step { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 14px; row-gap: 6px; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-step > :not(.sx-dot) { grid-column: 2; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-step .sx-dot { grid-row: 1 / span 3; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-step .sx-chip { justify-self: start; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-step:not(:last-child)::after { top: auto; right: auto; bottom: -13px; left: 31px; width: 1px; height: 12px; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-fit { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-world { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-index { grid-template-columns: minmax(0, 1fr); }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-table tbody tr { display: grid; gap: 4px; padding: 14px 16px; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-table tbody tr + tr { border-top: 1px solid var(--v-line); }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-table tbody tr + tr > * { border-top: 0; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-table tbody th, html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-table tbody td { width: auto; padding: 0; }
}

/* Solution photos (PM, 2026-11-04): a wide photo under the page title and a band before the fit check. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-hero-sec { padding-top: clamp(4px, 1.5vh, 16px); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-photo { margin: 0; overflow: hidden; border-radius: 20px; background: var(--v-canvas); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-photo img { display: block; width: 100%; height: auto; object-fit: cover; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-hero img { aspect-ratio: 21 / 9; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-band img { aspect-ratio: 3 / 1; }
html:not([data-theme="light"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-photo img { filter: brightness(.9); }
@media (max-width: 640px) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-photo { border-radius: 16px; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-hero img { aspect-ratio: 16 / 10; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-band img { aspect-ratio: 2 / 1; }
}

/* Company pages (PM, 2026-11-04): Leadership slots, Careers, Newsroom, Trust & security and Contact, on the solution
   pages' parts (.sx-photo, .sx-world/.sx-pain, .sx-chip) plus these. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-world--plain .sx-n { display: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-world--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .co-people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; position: relative; margin: 0; padding: 0; list-style: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .co-person { display: flex; flex-direction: column; gap: 6px; padding: 12px 12px 20px; border: 1px solid var(--v-line); border-radius: 18px; background: var(--v-canvas); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .co-ph { display: grid; place-items: center; aspect-ratio: 4 / 5; margin-bottom: 10px; border: 1px dashed var(--v-line); border-radius: 12px; color: var(--arc-text-secondary); font-size: 13px; font-weight: 600; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .co-person h3 { margin: 0; padding: 0 8px; color: var(--arc-foreground); font-size: 18px; font-weight: 600; line-height: 1.3; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .co-role { margin: 0; padding: 0 8px; color: var(--hx-acc); font-size: 14px; font-weight: 600; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .co-bio { margin: 4px 0 0; padding: 0 8px; color: var(--arc-text-secondary); font-size: 14.5px; line-height: 1.55; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .co-updates { display: grid; margin: 0; padding: 0; border-top: 1px solid var(--v-line); list-style: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .co-update { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--v-line); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .co-update time { padding-top: 3px; color: var(--arc-text-secondary); font-size: 14px; font-variant-numeric: tabular-nums; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .co-update h3 { margin: 0 0 6px; color: var(--arc-foreground); font-size: 18px; font-weight: 600; line-height: 1.35; text-wrap: balance; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .co-update p { margin: 0 0 12px; max-width: 720px; color: var(--arc-text-secondary); font-size: 15px; line-height: 1.55; text-wrap: pretty; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .co-note { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: clamp(22px, 3vw, 32px); border: 1px solid var(--v-line); border-radius: 18px; background: color-mix(in srgb, var(--v-green) 7%, var(--v-canvas)); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .co-note h2 { margin: 0 0 8px; color: var(--arc-foreground); font-size: clamp(20px, 2vw, 24px); font-weight: var(--arc-weight-strong); line-height: 1.25; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .co-note p { margin: 0; max-width: 720px; color: var(--arc-text-secondary); font-size: 15.5px; line-height: 1.55; text-wrap: pretty; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .co-go { flex: none; white-space: nowrap; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .co-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .co-note--col { flex-direction: column; align-items: flex-start; justify-content: space-between; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .co-pair .co-note:first-child { background: var(--v-canvas); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .co-routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .co-route { display: flex; flex-direction: column; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .co-route p { flex: 1; margin-bottom: 18px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .co-route .co-go { align-self: flex-start; }
@media (max-width: 1024px) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-world--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .co-people, html body:is(body, #oc-arc):is(body, #oc-arc-2) .co-routes, html body:is(body, #oc-arc):is(body, #oc-arc-2) .co-pair, html body:is(body, #oc-arc):is(body, #oc-arc-2) .sx-world--4 { grid-template-columns: minmax(0, 1fr); }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .co-update { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .co-note { flex-direction: column; align-items: flex-start; }
}

/* A plan priced by conversation shows its word ("Team-based") a size down, on one line; the price row wraps, so the
   note drops under it when it does not fit beside it. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-plan-price { flex-wrap: wrap; row-gap: 2px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-plan-amount.ld-plan-amount--word { font-size: clamp(28px, 2.6vw, 36px); white-space: nowrap; }

/* Plan comparison without sideways scrolling (PM, 2026-11-04): the table fits its frame at every width. Below 700px
   each row becomes the feature on its own line with the three plan values under it, and the plan names stay at the
   top of the screen while the rows scroll by. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-compare-scroll { overflow: clip; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-compare-table { min-width: 0; table-layout: fixed; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-compare-table thead th:first-child { width: 34%; }
@media (max-width: 700px) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-compare-table, html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-compare-table thead, html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-compare-table tbody { display: block; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-compare-table thead { position: sticky; top: 64px; z-index: 2; background: var(--arc-surface); box-shadow: 0 1px 0 var(--arc-border); }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-compare-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-compare-table thead th:first-child { display: none; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-compare-table thead th { padding: var(--arc-space-3) var(--arc-space-2); border-bottom: 0; font-size: var(--arc-text-md); }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-compare-table th[scope="row"] { grid-column: 1 / -1; position: static; min-width: 0; max-width: none; padding: var(--arc-space-3) var(--arc-space-4) 0; border-bottom: 0; box-shadow: none; background: transparent; font-size: var(--arc-text-sm); }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-compare-table td { padding: var(--arc-space-2) var(--arc-space-2) var(--arc-space-3); font-size: var(--arc-text-sm); overflow-wrap: anywhere; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-compare-table tr.ld-compare-sec { display: block; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-compare-sec th { display: block; padding: var(--arc-space-5) var(--arc-space-4) var(--arc-space-2); }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-compare-sec th span { position: static; }
}

/* Legal overview and the footer notice (PM, 2026-11-04). */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .lg-points { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .lg-docs { display: grid; margin: 0; padding: 0; border-top: 1px solid var(--v-line); list-style: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .lg-doc { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto; align-items: baseline; gap: 20px; padding: 18px 4px; border-bottom: 1px solid var(--v-line); color: inherit; text-decoration: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .lg-doc-t { color: var(--arc-foreground); font-size: 16px; font-weight: 600; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .lg-doc-b { color: var(--arc-text-secondary); font-size: 15px; line-height: 1.5; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .lg-doc .sx-arrow { color: var(--arc-text-secondary); }
@media (hover: hover) and (pointer: fine) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .lg-doc:hover .sx-arrow { transform: translateX(3px); color: var(--arc-foreground); }
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .lg-doc:focus-visible { outline: 2px solid var(--arc-focus); outline-offset: 2px; border-radius: 6px; }
@media (max-width: 640px) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .lg-doc { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .lg-doc-b { grid-column: 1; grid-row: 2; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .lg-doc .sx-arrow { grid-column: 2; grid-row: 1; }
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-foot.ld-foot--corp .lf-legal { display: grid; gap: 8px; max-width: 920px; padding: 20px 0 4px; border-top: 1px solid var(--arc-border); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-foot.ld-foot--corp .lf-legal p { margin: 0; color: var(--arc-text-secondary); font-size: 12.5px; line-height: 1.6; text-wrap: pretty; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ld-foot.ld-foot--corp .lf-legal a { display: inline-flex; align-items: center; gap: 6px; justify-self: start; color: var(--arc-foreground); font-size: 12.5px; font-weight: 600; text-decoration: none; }

/* Screenshot zoom on the product pages (PM, 2026-11-04): the frame slides out to the full width of its row, over the
   copy, which steps back; the section holding it rises above the next one while it is open. arc_public.js sets
   --zx/--zy/--zs from the layout. A small enlarge mark in the corner says it can be opened. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-shot { position: relative; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-sec.is-zoom-host { z-index: 30; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-frame.is-zoomable { cursor: zoom-in; transform-origin: 0 50%; transition: transform .42s var(--arc-ease), box-shadow .42s var(--arc-ease); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-frame.is-zoomed { z-index: 20; cursor: zoom-out; transform: translate(var(--zx, 0), var(--zy, 0)) scale(var(--zs, 1)); box-shadow: 0 30px 80px -30px rgb(0 0 0 / .45); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-shot-copy { transition: opacity .3s var(--arc-ease); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-shot.is-zoomed .hx-shot-copy { opacity: .08; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-frame.is-zoomable::after { content: ""; position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border: 1px solid var(--v-line); border-radius: 50%; background: var(--v-surface, var(--arc-surface)) center / 15px no-repeat; opacity: 0; transition: opacity .2s var(--arc-ease); pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E"); }
@media (hover: hover) and (pointer: fine) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-frame.is-zoomable:hover::after { opacity: .9; }
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-frame.is-zoomable:focus-visible { outline: 2px solid var(--arc-focus); outline-offset: 3px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-frame.is-zoomable.is-zoomed::after { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-frame.is-zoomable, html body:is(body, #oc-arc):is(body, #oc-arc-2) .hx-shot-copy { transition: none; }
}

/* Sign-in with Google, Microsoft, Apple and LinkedIn on the sign-in and sign-up pages (2026-11-04): one bordered
   button per provider, its mark on the left, then an "or" over the password form; the Terms checkbox on sign-up. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.auth-err, .auth-info).is-block { margin: var(--arc-space-4) 0 0; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .auth-info.is-ok { color: var(--arc-foreground); font-size: var(--arc-text-sm); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.auth-providers, .auth-or)[hidden] { display: none; }
html:lang(ja) body:is(body, #oc-arc):is(body, #oc-arc-2) .auth-card h1 { word-break: auto-phrase; line-break: strict; }
html:lang(ko) body:is(body, #oc-arc):is(body, #oc-arc-2) .auth-card h1 { word-break: keep-all; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .auth-providers { display: grid; gap: var(--arc-space-2); margin: var(--arc-space-4) 0 0; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .auth-provider { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--arc-control-touch, 44px); padding: 0 var(--arc-space-4); border: 1px solid var(--arc-border-strong); border-radius: var(--arc-radius-control); background: var(--arc-surface); color: var(--arc-foreground); font-size: var(--arc-text-md); font-weight: var(--arc-weight); text-decoration: none; transition: background-color var(--arc-dur-fast) var(--arc-ease), border-color var(--arc-dur-fast) var(--arc-ease); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .auth-provider-mark { flex: none; width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .auth-provider:hover { background: var(--arc-surface-muted); }
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .auth-provider:focus-visible { outline: 2px solid var(--arc-focus); outline-offset: 2px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .auth-or { display: flex; align-items: center; gap: var(--arc-space-3); margin: var(--arc-space-4) 0; color: var(--arc-text-secondary); font-size: var(--arc-text-sm); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .auth-or::before, html body:is(body, #oc-arc):is(body, #oc-arc-2) .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--arc-border); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .auth-card label.auth-check { display: flex; flex-direction: row; align-items: flex-start; gap: var(--arc-space-2); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .auth-card label.auth-check > span { color: var(--arc-text-secondary); font-weight: var(--arc-weight-regular, 400); line-height: 1.5; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .auth-card label.auth-check input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--arc-accent); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .auth-card label.auth-check a { color: var(--arc-foreground); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--arc-border-strong); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .auth-card label.auth-check a:hover { text-decoration-color: currentColor; }
@media (prefers-reduced-motion: reduce) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .auth-provider { transition: none; }
}