@font-face {
  font-family: "Partret Sans";
  src: url("/static/fonts/partret-sans.ttf") format("truetype");
  font-weight: 425 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --p-navy:    #061b31;
  --p-ink:     #061b31;
  --p-muted:   #425466;
  --p-soft:    #64748b;
  --p-line:    #e5edf5;
  --p-line-2:  #d0dae8;
  --p-bg:      #f8fafd;
  --p-bg-2:    #f0f4f9;
  --p-white:   #ffffff;
  --p-indigo:  #6a6ae7;
  --p-indigo-2:#5656d4;
  --p-indigo-light: #eeedfc;
  --p-cyan:    #22d3ee;
  --p-green:   #0f7b4b;
  --p-amber:   #b76b08;
  --p-warn:      #d97706;
  --p-warn-soft: rgba(245, 158, 11, 0.13);
  --p-warn-border: oklch(0.83 0.11 80);
  --p-warn-text: #a8a29e;
  --p-red:     #d13d3d;

  --p-shadow-sm: 0 0 0 1px var(--p-line), 0 1px 2px rgba(6, 27, 49, 0.04);
  --p-shadow:    0 0 0 1px var(--p-line), 0 8px 32px rgba(6, 27, 49, 0.08);
  --p-shadow-lg: 0 0 0 1px var(--p-line), 0 8px 32px rgba(6, 27, 49, 0.08), 0 24px 48px rgba(6, 27, 49, 0.06);

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 12px;

  --container: 1280px;
  --pad-x: 56px;
  /* Full-bleed header bar; content inset modestly from edges. */
  --header-max: 1320px;
  --header-pad-x: clamp(22px, 3.5vw, 40px);

  --sans: "Partret Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  /* Partret Sans variable: Regular 425 · Medium 500 · SemiBold 600. */
  --fw-display-lg: 425;
  --fw-display-md: 500;

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

  /* Buttons — page CTAs vs compact header chrome. */
  --btn-pad-y: 11px;
  --btn-pad-x: 18px;
  --btn-font: 15px;
  --btn-lh: 1.35;
  --btn-header-pad-y: 9px;
  --btn-header-pad-x: 16px;
  --btn-header-font: 14px;
  --btn-header-lh: 1.35;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--sans);
  font-weight: 425;
  font-size: 16px;
  line-height: 1.6;
  color: var(--p-muted);
  background: var(--p-white);
  overflow-x: hidden;
}

* { -webkit-tap-highlight-color: transparent; }
:focus { outline: none; }
:focus-visible { outline: none; }

a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
img { display: block; max-width: 100%; }
ul { list-style: none; }

.mono { font-family: var(--mono); font-variant-ligatures: none; }

h1, h2, h3, h4 { font-family: var(--sans); color: var(--p-navy); }
h1 { font-size: clamp(2.75rem, 5.5vw, 4rem); line-height: 1.02; letter-spacing: -0.04em; font-weight: var(--fw-display-lg); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); line-height: 1.15; letter-spacing: -0.025em; font-weight: var(--fw-display-md); }
h3 { font-size: 17px; line-height: 1.3; letter-spacing: -0.015em; font-weight: 500; }
h4 { font-size: 14px; line-height: 1.3; letter-spacing: 0; font-weight: 500; }

p { color: var(--p-muted); }

/* ----- buttons ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: calc((var(--btn-pad-y) * 2) + (var(--btn-font) * var(--btn-lh)));
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: 8px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--btn-font);
  line-height: var(--btn-lh);
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  box-shadow: none;
  transition: background 150ms var(--ease), color 150ms var(--ease), border-color 150ms var(--ease);
  white-space: nowrap;
  cursor: pointer;
}
/* Loop-swap arrow: on hover it flies off the right and loops back in from the
   left. The .arw wrapper clips (overflow:hidden) so the teleport at 49→50% is
   hidden while the arrow sits outside the clip. */
.btn .arw { width: 16px; overflow: hidden; display: inline-flex; flex-shrink: 0; }
.btn .arw svg { width: 16px; height: 16px; display: block; }
.btn .arw svg.arw-play,
.ft-login .arw svg.arw-play,
.about-team-link .arw svg.arw-play { animation: swap 0.5s cubic-bezier(.5, 0, .2, 1) forwards; }

@keyframes swap {
  0%   { transform: translateX(0); }
  49%  { transform: translateX(26px); }   /* exits off the right */
  50%  { transform: translateX(-26px); }  /* reappears on the left */
  100% { transform: translateX(0); }       /* slides back home */
}
@media (prefers-reduced-motion: reduce) {
  .btn .arw svg.arw-play,
  .ft-login .arw svg.arw-play,
  .about-team-link .arw svg.arw-play { animation: none; }
  .mk-chart-dot,
  .mk-field.is-editing,
  .mk-field.is-editing .mk-field-v::after,
  .mk-slot.is-flash,
  .cap-rec-dot,
  .cap-wave-path { animation: none !important; }
}

/* Primary — solid indigo, matching border so size equals outline twin. */
.btn-indigo {
  background: var(--p-indigo);
  color: #fff;
  border-color: var(--p-indigo);
}
.btn-indigo:hover {
  background: var(--p-indigo-2);
  border-color: var(--p-indigo-2);
}

/* Secondary — solid white face, lighter indigo ring, full indigo label. */
.btn-soft {
  background: #ffffff;
  color: var(--p-indigo);
  border-color: rgba(106, 106, 231, 0.4);
}
.btn-soft:hover {
  background: #ffffff;
  border-color: rgba(106, 106, 231, 0.55);
  color: var(--p-indigo-2);
}

/* Outline — transparent face, border tracks label color. */
.btn-sales {
  background: transparent;
  color: var(--p-indigo);
  border-color: currentColor;
}
/* No fill on hover: the header it lives in fills white underneath, so a
   translucent white face just muddied it. Ring and label carry the state. */
.btn-sales:hover {
  background: transparent;
  border-color: currentColor;
  color: var(--p-indigo-2);
}

/* Borderless text action (hero Sign In). */
.btn-plain {
  background: transparent;
  color: var(--p-indigo);
  border-color: transparent;
}
.btn-plain:hover {
  background: transparent;
  border-color: transparent;
  color: var(--p-indigo-2);
}

/* Dark-surface twin of .btn-soft — solid night fill, lighter white ring. */
.btn-ghost-light {
  background: #070b13;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}
.btn-ghost-light:hover {
  background: #070b13;
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

/* ====================================================== HEADER */
.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 18px 0;
  transition:
    background 280ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 280ms cubic-bezier(0.22, 1, 0.36, 1),
    border-radius 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.site-header.is-nav-open {
  /* Bar fill while a sheet is open comes from .is-hover-surface (scripts.js). */
  box-shadow: none;
}
/* The bar is transparent over the hero at rest. The white fill follows the
   logo, nav triggers, and header actions — with a little slack on the outer
   edges of that cluster — not the wide empty flex gaps between them (scripts.js
   toggles .is-hover-surface). Pointer devices only: on touch the fill would
   stick after a tap. */
@media (hover: hover) {
  .site-header.is-hover-surface {
    background: #ffffff;
  }
  .site-header.is-hover-surface:not(.is-nav-open) {
    /* The bar itself never changes shape between the two states — square,
       full-bleed, same seam — so opening a menu only ever adds the sheet
       below it. The seam is an outset 1px shadow, not a border or an inset:
       a border would add height and shove the sheet (top: 100%) down with it,
       and an inset would sit one row above the sheet's own border-top, making
       the line jump the moment a menu opened. */
    box-shadow:
      0 1px 0 var(--p-line),
      0 24px 48px rgba(6, 27, 49, 0.08);
  }
}

/* Soft blur over page content while the nav sheet is open (header stays sharp). */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 45;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 280ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 280ms;
}
body.nav-backdrop-on::after {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 280ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s;
}
@media (prefers-reduced-motion: reduce) {
  body::after {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.55);
    transition: opacity 160ms ease, visibility 0s linear 160ms;
  }
}
.hdr-inner {
  width: 100%;
  max-width: var(--header-max);
  margin: 0 auto;
  padding: 0 var(--header-pad-x);
  display: flex;
  align-items: center;
  /* Match logo→Company to Company→Resources (nav gap + trigger pad). */
  gap: 22px;
  /* Static so the nav sheet positions against .site-header (full bleed). */
  position: static;
  /* Pin the content-row height so the logo sits identically here and on the
     mirrored /login header — independent of the burger (mobile) or nav
     triggers (desktop) that would otherwise drive it. */
  min-height: 40px;
}
.hdr-logo { display: inline-flex; align-items: center; transform: translateY(0); }
.hdr-logo img { width: 76px; height: auto; transition: opacity 140ms ease; }
.hdr-logo:hover img { opacity: 0.7; }

.hdr-nav {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: 0;
  position: static;
}
.nd-triggers {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  z-index: 56;
}
/* Invisible bridge so the cursor can travel from a trigger down into the panel.
   It paints above the sheet, so it must stop inside the sheet's top padding:
   the first row of links sits directly under the triggers, and any overlap
   there reads as a dead spot that never highlights. Header bottom padding is
   18px (desktop only — the nav is hidden under 900px) and the sheet pads 28px
   before the links, so 26px bridges the gap with room to spare. */
.nd-triggers::after {
  content: "";
  position: absolute;
  left: -12px;
  right: -12px;
  top: 100%;
  height: 0;
  pointer-events: none;
}
.site-header.is-nav-open .nd-triggers::after {
  height: 26px;
  pointer-events: auto;
}
.nd-trigger {
  appearance: none; border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 500;
  color: var(--p-ink);
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--r-sm);
  transition: color 150ms var(--ease);
}
.nd-trigger:hover,
.nd-trigger.is-active { color: var(--p-navy); }

.nd-car { position: relative; width: 13px; height: 13px; color: var(--p-soft); transition: color .25s ease; }
.nd-trigger:hover .nd-car,
.nd-trigger.is-active .nd-car { color: var(--p-indigo); }
.nd-bar { position: absolute; top: 50%; left: 50%; width: 7px; height: 1.65px; border-radius: 2px; background: currentColor; }
.nd-l { transform: translate(-80%, -50%) rotate(45deg);  transition: transform .34s cubic-bezier(.5, 1.2, .4, 1); }
.nd-r { transform: translate(-20%, -50%) rotate(-45deg); transition: transform .34s cubic-bezier(.5, 1.2, .4, 1); }
.nd-trigger.is-active .nd-l { transform: translate(-80%, -50%) rotate(-45deg); }
.nd-trigger.is-active .nd-r { transform: translate(-20%, -50%) rotate(45deg); }

/* Stripe-style sheet: full-bleed panel drops from under the header bar. */
.nd-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 55;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-10px);
  transition:
    opacity 260ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.site-header.is-nav-open .nd-dropdown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .nd-dropdown {
    transition: none;
  }
}
.nd-dropdown-bg {
  position: absolute;
  inset: 0;
  background: #ffffff;
  /* Square, like the bar it grows out of — one surface, one silhouette. */
  border-radius: 0;
  border-top: 1px solid var(--p-line);
  box-shadow: 0 24px 48px rgba(6, 27, 49, 0.08);
  /* That shadow blurs upward too, and the sheet paints above the bar, so its
     top ~14px was tinting the bar's bottom edge into a grey ramp (255→253)
     that plain hover never had. Clip everything above the sheet's own top
     edge; the sides and bottom stay free for the shadow to spread. */
  clip-path: inset(0 -64px -64px -64px);
  pointer-events: none;
}
.nd-dropdown-slot {
  position: relative;
  width: 100%;
  max-width: var(--header-max);
  margin: 0 auto;
  padding: 28px var(--header-pad-x) 36px;
  overflow: hidden;
}
.nd-dropdown-frame {
  position: relative;
}
.nd-section {
  display: grid;
  grid-template-columns: repeat(4, 220px);
  gap: 8px 14px;
  justify-content: start;
  align-content: start;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(0);
  /* Keep inactive panels out of flow so links don’t shift. */
  position: absolute;
  left: 0;
  top: 0;
  transition:
    opacity 200ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 200ms;
}
.nd-section.is-active {
  position: relative;
  left: auto;
  top: auto;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  transition:
    opacity 280ms cubic-bezier(0.22, 1, 0.36, 1) 50ms,
    transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s;
}
/* The sheet keeps its active section laid out while it eases shut, so those
   (now invisible) links would otherwise keep taking hover and clicks from the
   page underneath for the length of the close. */
.site-header:not(.is-nav-open) .nd-dropdown .nd-section {
  pointer-events: none;
}
.nd-section.is-leave {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  visibility: visible;
  pointer-events: none;
  transition:
    opacity 180ms cubic-bezier(0.4, 0, 1, 1),
    transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s;
}
.nd-section.is-leave-left { transform: translateX(-32px); }
.nd-section.is-leave-right { transform: translateX(32px); }
.nd-section.is-enter-from-left {
  position: relative;
  left: auto;
  top: auto;
  opacity: 0;
  transform: translateX(-32px);
  visibility: visible;
  transition: none;
}
.nd-section.is-enter-from-right {
  position: relative;
  left: auto;
  top: auto;
  opacity: 0;
  transform: translateX(32px);
  visibility: visible;
  transition: none;
}
.nd-section a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  box-sizing: border-box;
  width: 100%;
  height: 70px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  transition: background 150ms var(--ease);
}
.nd-section a:hover { background: var(--p-bg); }
.nd-item-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--p-indigo);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.nd-section a:hover .nd-item-title { color: var(--p-indigo-2); }
.nd-item-desc {
  font-size: 13px;
  font-weight: 400;
  color: var(--p-soft);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .nd-section,
  .nd-section.is-active,
  .nd-section.is-leave {
    transition: none;
  }
}

.hdr-actions { margin-left: auto; display: flex; gap: 8px; }
.hdr-actions .btn {
  min-height: 0;
  padding: var(--btn-header-pad-y) var(--btn-header-pad-x);
  font-size: var(--btn-header-font);
  line-height: var(--btn-header-lh);
}

/* ====================================================== HERO */
.hero {
  position: relative;
  padding: 116px 0 88px;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}
.hero-mesh {
  position: absolute;
  inset: -48px;
  /*
   * Multi-blob radial mesh on other pages; home uses bg.svg — see .home-page below.
   */
  background:
    radial-gradient(ellipse 1100px 820px at 10% -10%, rgba(106, 106, 231, 0.12), transparent 62%),
    radial-gradient(ellipse 1000px 720px at 96%  15%, rgba(167, 139, 250, 0.08), transparent 62%),
    radial-gradient(ellipse 1050px 760px at  5%  95%, rgba(167, 139, 250, 0.08), transparent 62%),
    radial-gradient(ellipse 1100px 820px at 95% 105%, rgba(106, 106, 231, 0.08), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--header-max);
  margin: 0 auto;
  padding: 0 var(--header-pad-x);
  display: grid;
  grid-template-columns: minmax(420px, 600px) 1fr;
  gap: 4px;
  align-items: center;
}

.hero-copy {
  /* Optical lift vs. the mockup column (centered in the grid). */
  transform: translate3d(0, -40px, 0);
}

.home-page .hero-inner {
  /* Slight shared lift for headline/CTAs + right-side windows. */
  transform: translate3d(0, -16px, 0);
}

.hero-lede {
  margin: 0;
  max-width: 100%;
  font-family: var(--sans);
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.38;
  letter-spacing: -0.022em;
  font-weight: var(--fw-display-lg);
  color: var(--p-soft);
}
.hero-lede-strong {
  color: var(--p-navy);
  font-weight: var(--fw-display-md);
}
.hero-ctas { margin-top: 36px; display: flex; gap: 12px; flex-wrap: wrap; }

/* Home hero — bg.svg replaces the mesh. Oversized so cover always fills. */
.home-page .hero-mesh {
  inset: -48px;
  background-color: #dcd9f7;
  background-image: url('/static/bg.svg');
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}

/* White field over the home hero — climbs the left edge to the top of the
   screen, then scoops across the foot into the statement’s white. Soft wash
   layer (lavender-tinted) sits outside the solid white so the seam feels
   painted with bg.svg, not hard-cut. Hidden at the hamburger breakpoint. */
.hero-curve {
  display: none;
}
.home-page .hero-curve {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.home-page .hero {
  padding-bottom: 120px;
}

/* ----- hero mockup stage ----- */
/* Cards intentionally overflow this box and clip at .hero's edge. */
.hero-stage {
  position: relative;
  height: 640px;
  width: 100%;
  min-width: 560px;
  isolation: isolate;
}

/* Shell owns the soft shadow; inner .mk-card owns animated SVG paint. */
.mk-shell {
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(6, 27, 49, 0.07),
    0 2px 6px rgba(6, 27, 49, 0.05),
    0 24px 48px -12px rgba(6, 27, 49, 0.16);
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.mk-card {
  background: var(--p-white);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 14px;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.mk-main {
  position: absolute;
  /* Nudge down — Mac chrome is shorter than the old app topbar. */
  top: 26px;
  left: 96px;
  width: 760px;
  z-index: 1;
}

/* Schedule card cascades down-right over the ePCR card's corner. */
.mk-float {
  position: absolute;
  top: 256px;
  left: 264px;
  width: 560px;
  z-index: 2;
}

/* ePCR editor */
.mk-epcr { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 13px; }
.mk-epcr-head { display: flex; align-items: center; gap: 11px; }
.mk-ring { position: relative; width: 32px; height: 32px; flex-shrink: 0; }
.mk-ring svg { width: 32px; height: 32px; transform: rotate(-90deg); }
.mk-ring-bg { fill: none; stroke: var(--p-line); stroke-width: 3.2; }
.mk-ring-fg { fill: none; stroke: var(--p-indigo); stroke-width: 3.2; stroke-linecap: round; }
.mk-ring-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 600; color: var(--p-ink); }
.mk-epcr-title { font-size: 15px; font-weight: 600; color: var(--p-ink); letter-spacing: -0.01em; }
.mk-epcr-actions { margin-left: auto; margin-right: -6px; display: flex; gap: 7px; }
.mk-btn { font-size: 11.5px; font-weight: 500; color: var(--p-navy); border: 1px solid var(--p-line-2); border-radius: 7px; padding: 4px 11px; }
.mk-etabs { display: flex; gap: 3px; flex-wrap: wrap; background: rgba(11, 26, 48, 0.04); border-radius: 9px; padding: 3px; }
.mk-etab { font-size: 11px; font-weight: 500; color: var(--p-soft); padding: 4px 9px; border-radius: 6px; white-space: nowrap; }
.mk-etab.active { background: #fff; color: var(--p-indigo); box-shadow: var(--p-shadow-sm); }
.mk-sec-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--p-soft); display: flex; align-items: center; gap: 6px; }
.mk-sec-label::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--p-indigo); }
.mk-fields { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9px; }
.mk-field { border: 1px solid var(--p-line); border-radius: 9px; padding: 9px 11px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mk-field-k { font-size: 9px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--p-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-field-v { font-size: 12px; font-weight: 600; color: var(--p-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-field.ok { border-color: rgba(15, 123, 75, 0.28); background: rgba(15, 123, 75, 0.05); }
.mk-field.ok .mk-field-k { color: var(--p-green); }
.mk-field.warn {
  border-color: var(--p-warn-border);
  background: var(--p-warn-soft);
}
.mk-field.warn .mk-field-k { color: var(--p-warn); }
.mk-field.warn .mk-field-v { color: var(--p-warn-text); font-weight: 500; font-style: italic; }
.mk-field.is-editing {
  border-color: rgba(106, 106, 231, 0.45);
  background: rgba(106, 106, 231, 0.06);
  box-shadow: 0 0 0 3px rgba(106, 106, 231, 0.10);
}
.mk-field.is-editing .mk-field-k { color: var(--p-indigo); }
.mk-field.is-editing .mk-field-v { color: var(--p-indigo); font-style: normal; font-weight: 600; }
.mk-field.is-editing .mk-field-v::after {
  content: "";
  display: inline-block;
  width: 1.5px;
  height: 11px;
  margin-left: 2px;
  background: var(--p-indigo);
  vertical-align: -1px;
  animation: caret-blink 1.05s step-end infinite;
}
@keyframes caret-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}
/* vitals trend row */
.mk-vitals {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.mk-chart {
  position: relative;
  border: 1px solid var(--p-line);
  border-radius: 10px;
  background: linear-gradient(180deg, #fdfdff 0%, #fafbfe 100%);
  overflow: hidden;
  padding: 10px 0 0;
  contain: paint;
}
.mk-chart svg { display: block; width: 100%; height: 88px; }
.mk-chart-dot { animation: mk-dot-pulse 2s ease-in-out infinite; transform-origin: center; }
@keyframes mk-dot-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
.mk-field.is-pop { animation: mk-field-pop 0.35s ease; }
@keyframes mk-field-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}
.mk-slot.is-flash {
  border-color: rgba(106, 106, 231, 0.45);
  background: rgba(106, 106, 231, 0.06);
  box-shadow: 0 0 0 3px rgba(106, 106, 231, 0.08);
}

/* hero schedule — week calendar mockup */
.mk-sched-app {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mk-sched-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.mk-sched-nav {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--p-line);
  border-radius: 9px;
  padding: 2px;
  background: #fff;
}
.mk-sched-navbtn {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--p-soft);
}
.mk-sched-range {
  padding: 0 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--p-ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.mk-sched-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mk-sched-vt {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--p-line);
  border-radius: 9px;
  background: rgba(11, 26, 48, 0.03);
}
.mk-sched-vt span {
  font-size: 11px;
  font-weight: 500;
  color: var(--p-soft);
  padding: 4px 10px;
  border-radius: 6px;
}
.mk-sched-vt span.is-active {
  background: #fff;
  color: var(--p-indigo);
  box-shadow: var(--p-shadow-sm);
}
.mk-sched-filter {
  font-size: 11px;
  font-weight: 500;
  color: var(--p-soft);
  padding: 7px 24px 7px 10px;
  border: 1px solid var(--p-line);
  border-radius: 9px;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 8px center / 12px;
}
.mk-cal {
  border: 1px solid var(--p-line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--p-line);
}
.mk-cal-head,
.mk-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
}
.mk-float .mk-cal-head,
.mk-float .mk-cal-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.mk-cal-head span {
  background: #f4f6fa;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--p-soft);
  padding: 7px 4px;
}
.mk-cal-day {
  min-height: 132px;
  background: #fff;
  padding: 6px 5px 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mk-float .mk-cal-day {
  min-height: 148px;
  padding: 8px 7px 10px;
}
.mk-cal-day.is-out { background: #fafbfd; }
.mk-cal-num {
  font-size: 11px;
  font-weight: 600;
  color: var(--p-ink);
  line-height: 1;
}
.mk-cal-crew {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 2px;
}
.mk-cal-crew-k {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--p-soft);
}
.mk-crewdot { width: 7px; height: 7px; border-radius: 50%; background: var(--p-indigo); flex-shrink: 0; }
.mk-crewdot.office { background: #8a86f0; }
.mk-slot { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px dashed var(--p-line-2); border-radius: 8px; margin-top: 6px; }
.mk-slot.filled { border-style: solid; border-color: var(--p-line); border-left: 3px solid var(--p-indigo); background: rgba(106, 106, 231, 0.04); }
.mk-slot-role { font-size: 11.5px; color: var(--p-ink); white-space: nowrap; }
.mk-tag {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 1px 5px;
  border-radius: 4px;
}
.mk-tag.open { color: var(--p-green); background: rgba(15, 123, 75, 0.12); }
.mk-tag.lock { color: var(--p-red); background: rgba(209, 61, 61, 0.12); }
.mk-rbadge {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 8px;
  font-weight: 700;
  color: var(--p-indigo);
  background: rgba(106, 106, 231, 0.12);
  border-radius: 4px;
  padding: 1px 4px;
}
.mk-float .mk-slot {
  margin-top: 0;
  padding: 5px 6px;
  gap: 5px;
}
.mk-float .mk-slot-role { font-size: 10px; }
.mk-float .mk-copilot {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.mk-float .mk-copilot-bar {
  max-width: 320px;
}

/* Hero schedule Copilot bar */
.mk-copilot {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--p-line);
}
.mk-copilot-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px 5px 12px;
  border: 1px solid var(--p-line);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--p-shadow-sm);
}
.mk-copilot-hint {
  flex: 1;
  min-width: 0;
  font-size: 11.5px;
  color: var(--p-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mk-copilot-send {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: var(--p-indigo);
  color: #fff;
}
.mk-copilot-send svg { width: 14px; height: 14px; }

/* ====================================================== CAPABILITIES */
/* ====================================================== STATEMENT */
/* Scroll statement: the section pins to the viewport (sticky) while the reader
   scrolls the tall .statement-track, and the words ink in over that distance. */
.statement {
  position: relative;
  background: var(--p-bg);
}
.statement-track {
  position: relative;
  height: 240vh;                 /* pin distance — drives the reveal pacing */
}
.statement-sticky {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 0 var(--pad-x);
  overflow: hidden;
}
.statement-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 960px 640px at 86% 6%, rgba(106, 106, 231, 0.09), transparent 60%),
    radial-gradient(ellipse 880px 600px at 4% 98%, rgba(167, 139, 250, 0.08), transparent 62%),
    linear-gradient(180deg, var(--p-white) 0%, var(--p-bg) 100%);
}
.statement-inner {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
}
.statement-text {
  font-family: var(--sans);
  font-size: clamp(32px, 4.4vw, 54px);
  line-height: 1.24;
  letter-spacing: -0.03em;
  font-weight: var(--fw-display-lg);
  color: var(--p-ink);
}
.st-w { color: rgba(11, 26, 48, 0.13); transition: color 0.35s ease; }
.st-w.is-on { color: var(--p-ink); }
/* Brand touch: the product's own name lands in Partret indigo, not just ink. */
.st-w.st-brand.is-on { color: var(--p-indigo); }
.statement-btn { margin-top: 48px; }

/* Reduced motion / no-JS fallback: collapse the pin to a normal padded block
   with the full statement already inked in. */
.statement.is-static .statement-track { height: auto; }
.statement.is-static .statement-sticky {
  position: static;
  min-height: 0;
  padding: 150px var(--pad-x);
}

.caps {
  --caps-pad-bottom: 140px;
  position: relative;
  background: var(--p-bg);
  padding: 132px var(--pad-x) var(--caps-pad-bottom);
  border-top: 1px solid var(--p-line);
  overflow: hidden;
}
.caps-inner { max-width: var(--container); margin: 0 auto; }
/* Section ledes — same face/tracking as .statement-text; sizes stay as-is.
   Emphasis is color only (weight 400), like the statement and hero. */
.caps-lede {
  margin: 0;
  max-width: 780px;
  font-family: var(--sans);
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.45;
  letter-spacing: -0.03em;
  font-weight: var(--fw-display-md);
  color: var(--p-soft);
  text-align: left;
}
.caps-lede-strong { color: var(--p-navy); }

.caps-board {
  position: relative;
  margin-top: 56px;
}
.caps-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
/* Edge rails beside the cards — from card tops down to analytics, then up
   to How We're Different (clipped by .caps overflow). */
.cap-peek {
  position: absolute;
  top: 0;
  bottom: calc(-1 * var(--caps-pad-bottom));
  width: 0;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.cap-peek--left {
  right: calc(100% + 16px);
  border-right: 1px solid var(--p-line);
}
.cap-peek--right {
  left: calc(100% + 16px);
  border-left: 1px solid var(--p-line);
}
.cap-peek::before {
  content: "";
  position: absolute;
  bottom: 100%;
  height: 100vmax;
  width: 0;
  border-left: 1px solid var(--p-line);
  pointer-events: none;
}
.cap-peek--left::before { right: -1px; }
.cap-peek--right::before { left: -1px; }

.cap-card {
  position: relative;
  z-index: 1;
  min-height: 460px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--p-white);
  border: 1px solid rgba(6, 27, 49, 0.06);
  box-shadow: 0 1px 2px rgba(6, 27, 49, 0.03);
  display: flex;
  flex-direction: column;
  isolation: isolate;
  transform-origin: center center;
  transform: scale(1);
  /* Long ease-out on transform; z drops only after settle. */
  transition:
    transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1),
    z-index 0s linear 0.8s;
}
@media (hover: hover) and (pointer: fine) {
  .cap-card:hover {
    z-index: 3;
    transform: scale(1.014);
    /* Raise above neighbors immediately; ease the float. */
    transition:
      transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1),
      z-index 0s;
  }
  /* Full-width card — smaller scale so absolute growth matches the top tiles. */
  .cap-card.cap-card--coverage:hover {
    transform: scale(1.007);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cap-card {
    transition: none;
  }
  .cap-card:hover,
  .cap-card.cap-card--coverage:hover {
    transform: none;
  }
}
/* Asymmetric bento: wide + narrow on top, full-width below. */
.cap-card--record  { grid-column: span 7; }
.cap-card--augment { grid-column: span 5; }

/* Soft mesh washes — Partret blurple spectrum through the mockup stage. */
.cap-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.cap-card--record::before,
.cap-card--augment::before,
.cap-card.cap-card--coverage::before {
  background:
    radial-gradient(at 60% 25%, rgba(255, 255, 255, 0.45) 0%, transparent 58%),
    linear-gradient(135deg, #8f8ff0 0%, #a3a0f4 30%, #c9a8ee 52%, #f0b3cf 72%, #f9c491 100%);
}

/* Bottom row — title left, mockup right. */
.cap-card.cap-card--coverage {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(280px, 48%) 1fr;
  align-items: stretch;
  /* Fixed height so the schedule window bleeds off the bottom edge like the
     top two cards, instead of stretching the tile and stranding the title. */
  height: 360px;
  min-height: 0;
}
.cap-card.cap-card--coverage .cap-card-top {
  display: flex;
  align-items: center;
  padding: 28px 0 28px 28px;
  max-width: none;
}
.cap-card.cap-card--coverage .cap-title {
  max-width: 36ch;
}
.cap-card.cap-card--coverage .cap-card-stage {
  margin-top: 0;
  min-height: 0;
  padding: 36px 48px 0 0;
  align-items: flex-end;
  justify-content: flex-end;
}
.cap-card.cap-card--coverage .cap-win {
  width: 100%;
  max-width: 620px;
  margin-left: auto;
  margin-right: 0;
}

.cap-curve {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.cap-card-top {
  position: relative;
  z-index: 2;
  padding: 28px 28px 0;
}

.cap-card-stage {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 24px;
  margin-top: 20px;
  min-height: 0;
  overflow: hidden;
}

.cap-title {
  font-family: var(--sans);
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: var(--fw-display-md);
  color: var(--p-navy);
  letter-spacing: -0.03em;
  line-height: 1.35;
  max-width: 32ch;
}
.cap-card--augment .cap-title { max-width: 29ch; }

.cap-win {
  position: relative;
  z-index: 1;
  width: calc(100% - 20px);
  max-width: 480px;
  margin: 0 0 -1px;
  background: var(--p-white);
  border-radius: 12px 12px 0 0;
  border: 1px solid rgba(6, 27, 49, 0.08);
  border-bottom: 0;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.6) inset,
    0 -8px 32px -8px rgba(6, 27, 49, 0.12),
    0 16px 40px -12px rgba(6, 27, 49, 0.16);
  overflow: hidden;
}
.cap-card--coverage .cap-win {
  border-radius: 12px 12px 0 0;
}
/* Windows scale with their card so the two top tiles read as a matched pair. */
.cap-card--record .cap-win { max-width: 520px; }
.cap-card--augment .cap-win { max-width: 400px; }
.cap-win-chrome {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--p-line);
  background: #fafbfd;
}
.cap-win-dots {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.cap-win-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12);
}
.cap-win-dot--close { background: #ff5f57; }
.cap-win-dot--min   { background: #febc2e; }
.cap-win-dot--zoom  { background: #28c840; }
.cap-win-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--p-ink);
  letter-spacing: -0.01em;
  pointer-events: none;
}
.cap-win-body {
  padding: 12px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* record window */
.cap-rec-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--p-red);
  background: rgba(209, 61, 61, 0.1);
  border-radius: 5px;
  padding: 2px 7px 2px 5px;
}
.cap-rec-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--p-red);
  animation: cap-rec-pulse 1.4s ease-in-out infinite;
}
@keyframes cap-rec-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.88); }
}
.cap-rec-wave {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(106, 106, 231, 0.05);
  border: 1px solid rgba(106, 106, 231, 0.1);
}
.cap-rec-wave svg {
  flex: 1;
  height: 22px;
  color: var(--p-indigo);
}
.cap-wave-path {
  animation: cap-wave-shift 2.4s linear infinite;
}
@keyframes cap-wave-shift {
  from { transform: translateX(0); }
  to   { transform: translateX(-36px); }
}
.cap-rec-time {
  font-size: 10px;
  font-weight: 600;
  color: var(--p-soft);
  flex-shrink: 0;
}
.cap-rec-transcript {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 58px;
}
.cap-trans-line {
  font-size: 11px;
  color: var(--p-soft);
  line-height: 1.45;
  opacity: 0.35;
  transform: translate3d(-3px, 0, 0);
  transition: opacity 0.35s ease, transform 0.35s ease, color 0.35s ease;
}
.cap-trans-line.is-active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  color: var(--p-ink);
}
.cap-rec-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.cap-mini-field {
  border: 1px solid var(--p-line);
  border-radius: 7px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0.45;
  transform: translateY(2px);
  transition: opacity 0.35s ease, transform 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}
.cap-mini-field.is-active {
  opacity: 1;
  transform: translateY(0);
  border-color: rgba(15, 123, 75, 0.28);
  background: rgba(15, 123, 75, 0.05);
}
.cap-mini-k {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--p-soft);
}
.cap-mini-field.is-active .cap-mini-k { color: var(--p-green); }
.cap-mini-v {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--p-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cap-rec-vitals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding-top: 2px;
}
.cap-rec-vital {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 7px 8px;
  border-radius: 7px;
  border: 1px solid var(--p-line);
  background: linear-gradient(180deg, #fdfdff 0%, #fafbfe 100%);
  font-size: 11px;
  font-weight: 600;
  color: var(--p-ink);
}
.cap-rec-vital-k {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--p-soft);
}

/* QA window */
.cap-qa-queue {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cap-qa-item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 7px;
  border: 1px solid transparent;
  font-size: 11px;
  opacity: 0.5;
  transition: opacity 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.cap-qa-item.is-active {
  opacity: 1;
  background: rgba(106, 106, 231, 0.06);
  border-color: rgba(106, 106, 231, 0.18);
}
.cap-qa-id { color: var(--p-soft); font-size: 10px; }
.cap-qa-name { font-weight: 500; color: var(--p-ink); }
.cap-qa-score {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 5px;
}
.cap-qa-score.is-good { color: var(--p-green); background: rgba(15, 123, 75, 0.1); }
.cap-qa-score.is-warn { color: var(--p-amber); background: rgba(183, 107, 8, 0.1); }
.cap-qa-score.is-bad  { color: var(--p-red);   background: rgba(209, 61, 61, 0.1); }
.cap-qa-detail {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 4px;
  border-top: 1px solid var(--p-line);
}
.cap-qa-flag {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--p-soft);
  opacity: 0.45;
  transition: opacity 0.3s ease, color 0.3s ease;
}
.cap-qa-flag.is-active { opacity: 1; }
.cap-qa-flag.is-ok.is-active   { color: var(--p-green); }
.cap-qa-flag.is-warn.is-active { color: var(--p-amber); }
.cap-qa-flag.is-bad.is-active  { color: var(--p-red); }
.cap-qa-flag-ico {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  flex-shrink: 0;
}
.cap-qa-flag.is-ok .cap-qa-flag-ico   { background: rgba(15, 123, 75, 0.12); color: var(--p-green); }
.cap-qa-flag.is-warn .cap-qa-flag-ico { background: rgba(183, 107, 8, 0.12); color: var(--p-amber); }
.cap-qa-flag.is-bad .cap-qa-flag-ico  { background: rgba(209, 61, 61, 0.12); color: var(--p-red); }

/* schedule + workflow window */
/* Schedule window toolbar — mirrors the app's sched-toolbar (nav arrows,
   date range, Day/Week/Month view toggle). */
.cap-sched-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cap-sched-navbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--p-line);
  border-radius: 6px;
  font-size: 11px;
  color: var(--p-soft);
  background: #fff;
}
.cap-sched-range {
  font-size: 11px;
  font-weight: 600;
  color: var(--p-ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.cap-sched-vt {
  margin-left: auto;
  display: flex;
  gap: 2px;
  background: rgba(11, 26, 48, 0.04);
  border-radius: 7px;
  padding: 2px;
}
.cap-sched-vt span {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--p-soft);
  padding: 3px 9px;
  border-radius: 5px;
}
.cap-sched-vt span.is-active {
  background: #fff;
  color: var(--p-indigo);
  box-shadow: var(--p-shadow-sm);
}
/* Week grid — three day columns like the app's schedule week view. */
.cap-sched-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.cap-sched-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--p-line);
  border-radius: 9px;
  background: #fff;
  min-width: 0;
}
.cap-sched-col.is-today {
  border-color: rgba(106, 106, 231, 0.32);
  background: rgba(106, 106, 231, 0.03);
}
.cap-sched-dow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--p-soft);
}
.cap-sched-daynum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding-top: 0.5px;
  box-sizing: border-box;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--p-ink);
  background: rgba(11, 26, 48, 0.05);
}
.cap-sched-col.is-today .cap-sched-daynum {
  color: #fff;
  background: var(--p-indigo);
}
.cap-sched-crew {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--p-ink);
}
.cap-sched-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--p-indigo);
}
.cap-sched-dot.office { background: #8a86f0; }
.cap-sched-slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 5px 7px;
  border: 1px dashed var(--p-line-2);
  border-radius: 5px;
  font-size: 10px;
  min-width: 0;
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.cap-sched-slot.is-filled {
  border-style: solid;
  border-color: var(--p-line);
  border-left: 3px solid var(--p-indigo);
  background: rgba(106, 106, 231, 0.04);
}
.cap-sched-slot.is-open,
.cap-sched-slot.is-locked {
  border: 1px dashed rgba(11, 26, 48, 0.22);
  background: transparent;
}
.cap-sched-slot.is-open .cap-sched-role,
.cap-sched-slot.is-locked .cap-sched-role {
  color: var(--p-soft);
  font-weight: 400;
}
.cap-sched-slot.is-flash {
  border-color: rgba(106, 106, 231, 0.45);
  background: rgba(106, 106, 231, 0.06);
  box-shadow: 0 0 0 3px rgba(106, 106, 231, 0.08);
}
.cap-sched-role {
  color: var(--p-ink);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.cap-sched-meta {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  margin-left: auto;
}
.cap-sched-t {
  font-size: 9px;
  color: var(--p-soft);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cap-sched-tag {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0 3px;
  border-radius: 3px;
  flex-shrink: 0;
}
.cap-sched-tag.open {
  color: oklch(0.46 0.1 160);
  background: oklch(0.94 0.04 160);
}
.cap-sched-tag.lock {
  color: oklch(0.5 0.16 25);
  background: oklch(0.94 0.04 25);
}
.cap-sched-r {
  font-size: 7.5px;
  font-weight: 700;
  color: var(--p-indigo);
  background: rgba(106, 106, 231, 0.12);
  border-radius: 4px;
  padding: 1px 4px;
}
.cap-copilot {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--p-line);
}
.cap-copilot-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px 5px 10px;
  border: 1px solid var(--p-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--p-shadow-sm);
}
.cap-copilot-hint {
  flex: 1;
  min-width: 0;
  font-size: 10px;
  color: var(--p-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cap-copilot-send {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--p-indigo);
  color: #fff;
}
.cap-copilot-send svg { width: 12px; height: 12px; }
/* ====================================================== DARK API BAND */
/* Full-bleed analytics map — night canvas (#070b13) with scrims so copy stays
   readable on the left while the map emerges on the right. */
.api {
  --api-bg: #070b13;
  position: relative;
  background: var(--api-bg);
  color: #d9e2f2;
  /* Same horizontal inset as .caps so the lede shares its left edge. */
  display: flex;
  align-items: center;
  padding: 128px var(--pad-x);
  min-height: min(720px, 92vh);
  overflow: hidden;
}
/* Full-bleed map — interesting hubs biased into the clear right zone. */
.api-map {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 28% 48%;
  pointer-events: none;
  user-select: none;
}
/* Horizontal scrim — opaque text zone on the left, map opens on the right. */
.api-scrim-x {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(7, 11, 19, 0.94) 0%,
    rgba(7, 11, 19, 0.82) 32%,
    rgba(7, 11, 19, 0.15) 62%,
    rgba(7, 11, 19, 0.35) 100%
  );
}
/* Vertical vignette — map melts into the section top/bottom edges. */
.api-scrim-y {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(7, 11, 19, 0.60) 0%,
    rgba(7, 11, 19, 0) 22%,
    rgba(7, 11, 19, 0) 70%,
    rgba(7, 11, 19, 0.85) 100%
  );
}
.api-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
}
/* Section lede — same face/tracking as .statement-text, on dark. */
.api-lede {
  margin: 0;
  max-width: 780px;
  font-family: var(--sans);
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.45;
  letter-spacing: -0.03em;
  font-weight: var(--fw-display-md);
  color: #8b9cb8;
  text-align: left;
}
.api-lede-strong { color: #d9e2f2; }
.api-cta {
  margin-top: 40px;
}

/* ====================================================== BOTTOM CTA */
.cta {
  padding: 96px var(--pad-x) 112px;
  background: var(--p-white);
}
.cta-stage {
  max-width: 1220px;
  margin: 0 auto;
  overflow: hidden;
  padding: clamp(28px, 3.5vw, 40px);
  border-radius: 20px;
  background:
    radial-gradient(at 60% 25%, rgba(255, 255, 255, 0.45) 0%, transparent 58%),
    linear-gradient(135deg, #8f8ff0 0%, #a3a0f4 30%, #c9a8ee 52%, #f0b3cf 72%, #f9c491 100%);
}
.cta-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(36px, 5vw, 64px);
  align-items: center;
  padding: clamp(32px, 4vw, 48px) clamp(28px, 3.5vw, 44px);
  background: var(--p-white);
  border: 1px solid rgba(6, 27, 49, 0.06);
  border-radius: 14px;
  box-shadow:
    0 1px 2px rgba(6, 27, 49, 0.04),
    0 20px 48px -16px rgba(6, 27, 49, 0.16);
}
.cta-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.cta-h {
  font-family: var(--sans);
  font-size: clamp(1.65rem, 2.9vw, 2.15rem);
  line-height: 1.22;
  letter-spacing: -0.032em;
  font-weight: var(--fw-display-md);
  color: var(--p-navy);
  max-width: 14em;
}
.cta-h-accent {
  display: inline-block;
  white-space: nowrap;
  color: var(--p-soft);
  font-weight: var(--fw-display-lg);
}
.cta-sub {
  margin-top: 16px;
  font-size: clamp(16px, 1.45vw, 18px);
  line-height: 1.65;
  letter-spacing: -0.01em;
  color: var(--p-muted);
  max-width: 30em;
}
.cta-actions {
  margin-top: 28px;
}
.cta-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 4.5vw, 56px);
  min-width: 0;
  align-items: start;
}
.cta-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.cta-tile-h {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--p-navy);
}
.cta-tile-p {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--p-muted);
}
.cta-tile .btn {
  --btn-pad-y: 0;
  --btn-pad-x: 0;
  --btn-font: 15px;
  --btn-lh: 1.35;
  min-height: 0;
  justify-content: flex-start;
}

/* ====================================================== ABOUT */
.about-page {
  --about-max: 1200px;
  /* Space above the hero title (clears the absolute header). */
  --about-hero-inset: calc(88px + clamp(80px, 12vh, 128px));
  --about-section-y: clamp(88px, 12vh, 136px);
}

.about-main { background: var(--p-white); }

/* Shared with 404 */
.about-hero-inner {
  max-width: var(--container);
  margin: 0 auto;
}

.not-found-page .about-hero {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: calc(88px + clamp(32px, 5vh, 56px)) clamp(20px, 5vw, 40px) clamp(64px, 10vw, 112px);
  overflow: hidden;
  text-align: center;
}
.not-found-page .about-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--header-max);
  margin: 0 auto;
  padding: 0 var(--header-pad-x);
  text-align: center;
}
.not-found-page .hero-lede {
  margin: 0 auto;
  max-width: 720px;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.38;
  letter-spacing: -0.022em;
  font-weight: var(--fw-display-lg);
  color: var(--p-soft);
  text-align: center;
}
.not-found-page .hero-lede-strong {
  color: var(--p-navy);
  font-weight: var(--fw-display-md);
}
.not-found-page .not-found-ctas {
  justify-content: center;
  margin-top: 36px;
}
/* Fallback when 404.html is served before body class is updated. */
main > .about-hero:only-child {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: calc(88px + clamp(32px, 5vh, 56px)) clamp(20px, 5vw, 40px) clamp(64px, 10vw, 112px);
  overflow: hidden;
  text-align: center;
}
main > .about-hero:only-child .about-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--header-max);
  margin: 0 auto;
  padding: 0 var(--header-pad-x);
  text-align: center;
}
main > .about-hero:only-child .hero-lede {
  margin: 0 auto;
  max-width: 720px;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.38;
  letter-spacing: -0.022em;
  font-weight: var(--fw-display-lg);
  color: var(--p-soft);
  text-align: center;
}
main > .about-hero:only-child .hero-lede-strong {
  color: var(--p-navy);
  font-weight: var(--fw-display-md);
}
main > .about-hero:only-child .not-found-ctas {
  justify-content: center;
  margin-top: 36px;
}

/* About — Linear proportions, Partret tokens */
.about-page .about-hero {
  position: relative;
  z-index: 1;
  padding:
    var(--about-hero-inset)
    var(--pad-x)
    clamp(56px, 7.5vh, 80px);
  text-align: left;
}
.about-page .about-hero-inner {
  width: 100%;
  max-width: var(--about-max);
  margin: 0 auto;
}
.about-page .about-hero h1 {
  margin: 0;
  max-width: 12em;
  font-family: var(--sans);
  font-size: clamp(3rem, 6.4vw, 4.75rem);
  font-weight: var(--fw-display-lg);
  line-height: 1.06;
  letter-spacing: -0.048em;
  color: var(--p-navy);
  text-wrap: balance;
}
.about-page .about-hero-lede {
  margin: 20px 0 0;
  max-width: 34rem;
  font-size: clamp(16.5px, 1.6vw, 18px);
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--p-muted);
}

.about-band {
  padding: 0 var(--pad-x);
}
.about-band-inner {
  max-width: var(--about-max);
  margin: 0 auto;
  border-radius: 24px;
  overflow: hidden;
  background: var(--p-bg-2);
  aspect-ratio: 16 / 9;
}
.about-band-inner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.about-split {
  padding: 0 var(--pad-x);
}
.about-split-inner {
  max-width: var(--about-max);
  margin: 0 auto;
  display: grid;
  /* ~40% / 60% — matches Linear’s heading | body split */
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  column-gap: clamp(48px, 7vw, 112px);
  row-gap: 28px;
  align-items: start;
  padding: clamp(88px, 12vh, 128px) 0;
}
/* Prevent grid min-content from blowing past the viewport (horizontal scroll). */
.about-split-inner > * { min-width: 0; }
.about-team .about-split-inner {
  border-top: 1px solid var(--p-line);
}
.about-split h2 {
  margin: 0;
  max-width: 9em;
  font-family: var(--sans);
  font-size: clamp(2.15rem, 3.6vw, 2.875rem);
  font-weight: var(--fw-display-lg);
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--p-navy);
  text-wrap: balance;
}
.about-accent { color: var(--p-indigo); }
.about-story-prose {
  display: grid;
  gap: 18px;
  padding-top: 4px;
  width: 100%;
  max-width: 36rem;
}
.about-story-lead {
  margin: 0;
  font-size: clamp(18.5px, 1.85vw, 22px);
  line-height: 1.45;
  letter-spacing: -0.022em;
  color: var(--p-navy);
  font-weight: 425;
}
.about-story-prose p:not(.about-story-lead) {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  letter-spacing: -0.01em;
  color: var(--p-muted);
}

.about-team-copy {
  padding-top: 6px;
  min-width: 0;
  max-width: 36rem;
}
.about-team-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--p-indigo);
}
.about-team-link:hover {
  color: var(--p-indigo);
}
.about-team-link .arw {
  width: 16px;
  overflow: hidden;
  display: inline-flex;
  flex-shrink: 0;
}
.about-team-link .arw svg {
  width: 16px;
  height: 16px;
  display: block;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .about-team-link:hover .arw svg {
    animation: swap 0.5s cubic-bezier(.5, 0, .2, 1) forwards;
  }
}

.about-team-grid-wrap {
  max-width: var(--about-max);
  margin: 0 auto;
  padding: 8px 0 clamp(112px, 14vh, 160px);
}
.about-team-grid {
  display: grid;
  /* 3-up so Ari wraps to row 2; slightly larger than the old ~255px. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px 48px;
  width: min(980px, 100%);
  max-width: 100%;
  align-items: start;
}
.about-person { min-width: 0; }
.about-person-photo {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--p-bg-2);
  margin-bottom: 0;
}
.about-person-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform-origin: center;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}
.about-person-photo:hover img { transform: scale(1.02); }
@media (prefers-reduced-motion: reduce) {
  .about-person-photo img { transition: none; }
  .about-person-photo:hover img { transform: none; }
}
.about-person-photo-abhishek img { object-position: center 28%; }
.about-person-photo-nethaka img { object-position: center 18%; }
.about-person-photo-ari img { object-position: center 22%; }
.about-person-meta {
  padding-top: 18px;
}
.about-person-meta h3 {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.35;
  color: var(--p-navy);
}
.about-person-role {
  margin: 6px 0 0;
  font-size: 14.5px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.45;
  color: var(--p-muted);
}
.about-person-school {
  margin: 4px 0 0;
  font-size: 13.5px;
  font-weight: 480;
  letter-spacing: -0.005em;
  line-height: 1.45;
  color: var(--p-indigo);
  /* Keep row rhythm when Ari’s affiliation wraps. */
  min-height: calc(1.45em * 2);
}

/* ====================================================== NEWSROOM */
.newsroom-page { background: var(--p-white); }
.nl-main {
  padding: 148px var(--pad-x) 120px;
}
.nl-inner {
  max-width: 980px;
  margin: 0 auto;
}
.nl-mast {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px 48px;
  padding-bottom: 48px;
  margin-bottom: 56px;
  border-bottom: 1px solid var(--p-line);
}
.nl-mast-copy {
  max-width: 36rem;
}
.nl-mast h1 {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(40px, 5.5vw, 56px);
  font-weight: var(--fw-display-md);
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--p-navy);
}
.nl-mast-copy p {
  margin: 16px 0 0;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--p-muted);
  max-width: 34ch;
}
.nl-media {
  display: grid;
  gap: 6px;
  flex-shrink: 0;
  text-align: right;
  padding-bottom: 4px;
}
.nl-media-label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--p-soft);
}
.nl-media-link {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--p-indigo);
  transition: color 140ms var(--ease);
}
.nl-media-link:hover { color: var(--p-indigo-2); }

.nl-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.nl-section-head h2 {
  margin: 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--p-navy);
}
.nl-year {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--p-soft);
  font-variant-numeric: tabular-nums;
}
.nl-press {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--p-line);
}
.nl-press > li {
  border-bottom: 1px solid var(--p-line);
}
.nl-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: 20px 32px;
  align-items: center;
  padding: 26px 0;
}
.nl-row-date {
  font-size: 14px;
  font-weight: 425;
  letter-spacing: -0.01em;
  color: var(--p-soft);
  font-variant-numeric: tabular-nums;
}
.nl-row-title {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(17px, 2vw, 19px);
  font-weight: 425;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--p-navy);
}
.nl-row-status {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--p-indigo);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .nl-main { padding: 120px var(--pad-x) 88px; }
  .nl-mast {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    padding-bottom: 36px;
    margin-bottom: 40px;
  }
  .nl-media { text-align: left; }
  .nl-row {
    grid-template-columns: 1fr auto;
    gap: 8px 16px;
    padding: 22px 0;
  }
  .nl-row-date {
    grid-column: 1 / -1;
    font-size: 13px;
  }
}

/* ====================================================== CONTACT */
.contact-page {
  position: relative;
  padding: 148px var(--pad-x) 112px;
  background: var(--p-white);
}
.contact-inner {
  position: relative;
  z-index: 1;
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.contact-inner > * { min-width: 0; }
.contact-copy {
  padding-top: 12px;
}
.contact-copy h1 {
  max-width: 620px;
}
.contact-benefits {
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: contact-step;
  display: grid;
  gap: 22px;
  max-width: 460px;
}
/* Flex (not grid-on-li): WebKit/iOS mishandles grid placement on <li> with
   ::before, stuffing the title into the 36px number column so it overflows
   into the body ("Operationalk through…"). */
.contact-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  list-style: none;
  counter-increment: contact-step;
}
.contact-benefits li::before {
  content: counter(contact-step, decimal-leading-zero);
  flex: 0 0 auto;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--p-indigo);
  font-variant-numeric: tabular-nums;
}
.contact-benefit {
  flex: 1 1 auto;
  min-width: 0;
}
.contact-benefits strong {
  display: block;
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.35;
  color: var(--p-navy);
}
.contact-benefits p {
  margin: 6px 0 0;
  color: var(--p-muted);
  font-size: 14.5px;
  line-height: 1.55;
  max-width: 38ch;
}
.contact-aside {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}
.sales-form {
  background: var(--p-bg);
  border: 1px solid var(--p-line);
  border-radius: var(--r-md);
  box-shadow: var(--p-shadow-sm);
  padding: 32px;
  display: grid;
  gap: 18px;
}
.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.sales-form label {
  display: grid;
  gap: 8px;
}
.sales-form label span {
  color: var(--p-navy);
  font-size: 13px;
  font-weight: 500;
}
.sales-form input,
.sales-form select,
.sales-form textarea {
  width: 100%;
  border: 1px solid var(--p-line);
  border-radius: var(--r-sm);
  background: var(--p-white);
  color: var(--p-navy);
  font: inherit;
  font-size: 15px;
  padding: 12px 13px;
  outline: none;
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
.sales-form select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--p-soft) 50%),
    linear-gradient(135deg, var(--p-soft) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}
.sales-form textarea {
  resize: none;
  min-height: 112px;
}
.sales-form .btn {
  margin-top: 4px;
  justify-content: center;
  width: 100%;
}
.sales-form input:focus,
.sales-form select:focus,
.sales-form textarea:focus {
  border-color: var(--p-line-strong, rgba(11, 26, 48, 0.28));
  box-shadow: none;
}
.sales-form input::placeholder,
.sales-form textarea::placeholder {
  color: var(--p-soft);
}
.form-success {
  display: none;
  flex-direction: column;
  gap: 2px;
  border: 1px solid rgba(15, 123, 75, 0.18);
  background: rgba(15, 123, 75, 0.07);
  color: var(--p-green);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14px;
}
.form-success.visible {
  display: flex;
}
.form-success span {
  color: var(--p-muted);
}
.form-error {
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.25);
  color: #b91c1c;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13.5px;
}
/* Honeypot wrapper — kept in the DOM but off-screen so bots fill it and humans
   never see it. Not display:none (some bots skip hidden inputs). */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* ====================================================== FOOTER */
.site-footer {
  background: var(--p-white);
  border-top: 1px solid var(--p-line);
  padding: 56px var(--pad-x);
}
.ft-inner { max-width: var(--container); margin: 0 auto; }
.ft-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 48px;
}
.ft-cols {
  grid-column: 2;
  display: flex;
  gap: 88px;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}
.ft-login {
  grid-column: 3;
  justify-self: end;
  align-self: start;
  padding-top: 6px; /* optically match logo vertical center */
}
.ft-login a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--p-muted);
  transition: color 100ms ease;
}
.ft-login a:hover { color: var(--p-ink); }
.ft-login .arw {
  width: 14px;
  overflow: hidden;
  display: inline-flex;
  flex-shrink: 0;
}
.ft-login .arw svg {
  width: 14px;
  height: 14px;
  display: block;
}
.ft-brand { justify-self: start; margin: 0; padding: 0; }
.ft-brand a { display: inline-flex; margin: 0; padding: 0; }
.ft-brand img { display: block; width: 68px; height: auto; margin: 0; padding: 0; transition: opacity 140ms ease; }
.ft-brand a:hover img { opacity: 0.7; }

.ft-h {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--p-navy);
  margin-bottom: 16px;
}
.ft-col ul { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ft-col a {
  font-size: 14px;
  color: var(--p-muted);
  transition: color 100ms ease;
}
.ft-col a:hover { color: var(--p-ink); }

.ft-bottom {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--p-line);
  text-align: center;
  font-size: 13px;
  color: var(--p-soft);
}

/* ====================================================== RESPONSIVE */
@media (max-width: 1180px) {
  .hero-inner { gap: 4px; }
  .hero-stage { height: 620px; }
  .mk-main { width: 640px; left: 48px; top: 22px; }
  .mk-float { width: 480px; left: 176px; top: 240px; }

  /* About: collapse 4-up before portraits get too tight. */
  .about-team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 32px;
    width: min(640px, 100%);
  }
  .about-split-inner {
    column-gap: clamp(32px, 4vw, 64px);
  }
}

@media (max-width: 900px) {
  :root {
    --pad-x: 24px;
    --header-pad-x: 24px;
  }

  h1 { font-size: clamp(2rem, 8vw, 2.75rem); }
  h2 { font-size: clamp(1.5rem, 5vw, 2rem); }

  .site-header { padding: var(--header-pad-x) 0; }
  .hdr-nav { display: none; }

  .hero { padding: 96px 0 56px; }
  /* Same breakpoint as the hamburger: bg.svg becomes the full first screen. */
  .home-page .hero {
    min-height: 100svh;
    min-height: 100dvh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding:
      calc(96px + env(safe-area-inset-top, 0px))
      0
      calc(72px + env(safe-area-inset-bottom, 0px));
    /* SVG + feGaussianBlur is expensive on mobile scroll — paint containment helps. */
    contain: paint;
  }
  .home-page .hero-inner {
    flex: 0 0 auto;
    width: 100%;
    transform: none;
  }
  .home-page .hero-curve { display: none; }
  /* SVG + feGaussianBlur is expensive on mobile scroll — use a CSS mesh instead. */
  .home-page .hero-mesh {
    background-image:
      radial-gradient(ellipse 115% 75% at 78% 18%, rgba(251, 232, 245, 0.92), transparent 58%),
      radial-gradient(ellipse 95% 85% at 92% 82%, rgba(210, 196, 249, 0.95), transparent 55%),
      radial-gradient(ellipse 90% 70% at 48% 48%, rgba(255, 255, 255, 0.42), transparent 62%),
      linear-gradient(118deg, #f5f4fd 0%, #dcd9f7 42%, #dcd9f7 100%);
    background-position: center;
    background-size: cover;
  }
  .home-page .hero-bg::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: min(32vh, 200px);
    background: linear-gradient(to top, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 3;
    pointer-events: none;
  }
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .hero-copy { transform: none; }
  .hero-lede {
    font-size: clamp(22px, 6vw, 30px);
    line-height: 1.38;
    letter-spacing: -0.022em;
    max-width: none;
  }
  .hero-ctas {
    margin-top: 28px;
    gap: 10px;
  }
  .hero-stage { display: none; }


  .statement-track { height: 180vh; }
  .statement-btn { margin-top: 36px; }

  .caps { padding: 80px var(--pad-x); }
  .caps-board { margin-top: 40px; }
  .cap-peek { display: none; }
  .caps-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .cap-card--record,
  .cap-card--augment {
    grid-column: auto;
  }
  .cap-card.cap-card--coverage {
    grid-column: auto;
    grid-template-columns: 1fr;
    height: auto;
    min-height: auto;
  }
  .cap-card.cap-card--coverage .cap-card-stage {
    align-items: flex-end;
  }
  .cap-card.cap-card--coverage .cap-card-top {
    padding: 24px 24px 0;
    align-items: stretch;
  }
  .cap-card.cap-card--coverage .cap-card-stage {
    padding: 0 16px;
    margin-top: 20px;
  }
  .cap-card.cap-card--coverage .cap-win {
    max-width: none;
    margin-left: 0;
  }
  .cap-card.cap-card--coverage .cap-sched-t {
    display: none;
  }
  .cap-title {
    max-width: none;
  }
  .cap-card {
    min-height: auto;
  }

  .api {
    padding: 80px var(--pad-x);
    min-height: min(560px, 85vh);
  }
  .api-lede { font-size: clamp(21px, 5vw, 26px); }
  .api-cta { margin-top: 32px; }
  .api-map { object-position: 22% 48%; }
  .api-scrim-x {
    background: linear-gradient(
      to right,
      rgba(7, 11, 19, 0.96) 0%,
      rgba(7, 11, 19, 0.88) 42%,
      rgba(7, 11, 19, 0.28) 72%,
      rgba(7, 11, 19, 0.40) 100%
    );
  }
  .cap-card-stage { min-height: 240px; }

  .cta {
    padding: 72px var(--pad-x) 88px;
  }
  .cta-stage {
    padding: 20px;
  }
  .cta-panel {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 28px 24px;
  }
  .cta-h-accent { white-space: normal; }
  .cta-links {
    padding-top: 28px;
    gap: 24px;
  }

  .about-page {
    --about-section-y: clamp(64px, 9vh, 96px);
    --about-hero-inset: calc(88px + clamp(48px, 8vh, 72px));
  }
  .about-page .about-hero {
    padding:
      var(--about-hero-inset)
      var(--pad-x)
      clamp(32px, 5vh, 48px);
  }
  .about-page .about-hero h1 {
    max-width: none;
    font-size: clamp(2.15rem, 9vw, 2.85rem);
    letter-spacing: -0.04em;
    line-height: 1.1;
  }
  .about-band-inner {
    border-radius: 14px;
    aspect-ratio: 16 / 10;
  }
  .about-split-inner {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 16px;
    padding: 56px 0;
  }
  .about-split h2 {
    max-width: none;
    font-size: clamp(1.7rem, 6.5vw, 2.15rem);
    line-height: 1.15;
  }
  .about-story-prose,
  .about-team-copy {
    max-width: none;
  }
  .about-story-lead {
    font-size: clamp(17px, 4.4vw, 20px);
  }
  .about-story-prose p:not(.about-story-lead) {
    font-size: 15px;
  }
  .about-team-copy { padding-top: 0; }
  .about-team-grid-wrap {
    padding: 0 0 80px;
  }
  .about-team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 20px;
    width: 100%;
  }
  .about-person-meta { padding-top: 14px; }
  .about-person-meta h3 { font-size: 15.5px; }
  .about-person-role { font-size: 13.5px; }
  .about-person-school {
    font-size: 12.5px;
    min-height: 0;
  }

  .contact-page { padding: 112px var(--pad-x) 72px; }
  .contact-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .contact-copy { padding-top: 0; }

  .site-footer { padding: 48px var(--pad-x); }
  .ft-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .ft-brand { justify-self: center; }
  .ft-cols {
    grid-column: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 6vw, 48px);
    width: min(100%, 420px);
    justify-self: center;
  }
  .ft-login {
    grid-column: 1;
    justify-self: center;
    align-self: center;
  }
}

/* ── Mobile hamburger + drawer ── */
.hdr-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px; height: 40px;
  box-sizing: border-box;
  border: 1px solid currentColor;
  background: transparent;
  color: var(--p-indigo);
  cursor: pointer;
  padding: 0; margin-left: auto;
  border-radius: 8px;
  transition: background 150ms var(--ease), color 150ms var(--ease), border-color 150ms var(--ease);
}
@media (hover: hover) {
  .hdr-burger:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--p-indigo-2);
  }
}
.hdr-burger span {
  display: block; width: 18px; height: 1.5px;
  background: currentColor; border-radius: 1px;
  transition: transform .28s var(--ease-out), opacity .2s ease;
  transform-origin: center;
}
.hdr-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hdr-burger.open span:nth-child(2) { opacity: 0; }
.hdr-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mob-nav {
  display: none;
  position: fixed;
  top: calc(var(--header-pad-x) * 2 + 40px);
  left: 0;
  right: 0;
  /* Runs to the bottom of the screen and scrolls its own overflow: at 375×667
     the panel used to end 58px past the viewport (157px at 320×568) with no
     way to scroll, so Login sat off-screen and unreachable. */
  bottom: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border-top: 1px solid var(--p-line);
  border-radius: 0;
  box-shadow: 0 24px 48px rgba(6, 27, 49, 0.08);
  padding: 20px 24px calc(28px + env(safe-area-inset-bottom, 0px));
  z-index: 48;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px);
  transition:
    opacity 260ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 300ms;
}
.mob-nav.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    opacity 260ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s;
}

.mob-nav-section { margin-bottom: 18px; }
.mob-nav-label {
  font-size: 10.5px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--p-soft);
  padding: 0 12px; margin-bottom: 6px;
}
.mob-nav-section a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  box-sizing: border-box;
  width: 248px;
  max-width: 100%;
  height: 70px;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 10px;
  transition: background 150ms var(--ease);
}
.mob-nav-section a:hover { background: var(--p-bg); }
.mob-nav-section .nd-item-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--p-indigo);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.mob-nav-section a:hover .nd-item-title { color: var(--p-indigo-2); }
.mob-nav-section .nd-item-desc {
  font-size: 13px;
  font-weight: 400;
  color: var(--p-soft);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.mob-nav-action {
  display: flex;
  width: 100%;
  justify-content: center;
  text-decoration: none;
  margin-bottom: 8px;
}

@media (max-width: 900px) {
  .hdr-burger { display: flex; }
  .hdr-actions { display: none; }
  .mob-nav { display: block; }
  .site-header.is-nav-open {
    background: #ffffff;
  }
}

@media (max-width: 520px) {
  :root {
    --pad-x: 18px;
    --header-pad-x: 18px;
  }

  .home-page .hero {
    padding:
      calc(88px + env(safe-area-inset-top, 0px))
      0
      calc(56px + env(safe-area-inset-bottom, 0px));
  }
  .hero-lede {
    font-size: clamp(20px, 5.8vw, 24px);
    line-height: 1.4;
  }

  .about-page .about-hero h1 {
    font-size: clamp(1.95rem, 9.5vw, 2.4rem);
  }
  .about-band-inner {
    border-radius: 12px;
    /* The band crops about.png (2400×1260) to fill, and the wordmark leaves
       only ~17% of the source on each side, so any box squarer than ~1.26:1
       cuts into the letters — 5/4 clipped the "p" and the final "t". 3/2 keeps
       the whole wordmark with room to spare. */
    aspect-ratio: 3 / 2;
  }
  .about-split-inner { padding: 48px 0; }
  .about-team-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px 14px;
    width: 100%;
  }
  .about-team-grid-wrap { padding-bottom: 72px; }
  .about-person-meta h3 { font-size: 14.5px; }
  .about-person-role { font-size: 13px; margin-top: 4px; }
  .about-person-school { font-size: 12px; min-height: 0; }
  .sales-form { padding: 22px; }
  .form-row { grid-template-columns: 1fr; }
  .cta { padding: 64px var(--pad-x) 72px; }
  .cta-links { grid-template-columns: 1fr; gap: 28px; }
  .mob-nav { padding: 18px 18px calc(24px + env(safe-area-inset-bottom, 0px)); }
}

/* ── Docs-style pages (legal, docs) ── */
.docs-page { background: var(--p-bg); }

.docs-shell {
  max-width: var(--container);
  margin: 0 auto;
  padding: 120px var(--pad-x) 112px;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  grid-template-areas:
    "head head"
    "toc main";
  gap: 56px;
  align-items: start;
}

.docs-page-head {
  grid-area: head;
  margin-bottom: 8px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--p-line);
}
.docs-page-head h1 {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 400;
  color: var(--p-navy);
}

.docs-toc {
  grid-area: toc;
  position: sticky;
  top: 16px;
  align-self: start;
  overflow: visible;
  padding: 11px 0 14px;
}
.docs-toc-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 4px;
}
.docs-toc-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--p-muted);
  transition: color 120ms ease, background 120ms ease;
}
.docs-toc-link:hover { color: var(--p-ink); background: rgba(255,255,255,.6); }
.docs-toc-link.is-active {
  color: var(--p-indigo);
  background: #fff;
  box-shadow: var(--p-shadow-sm);
}
.docs-toc-num {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--p-soft);
  width: 18px;
  flex-shrink: 0;
}
.docs-toc-link.is-active .docs-toc-num { color: var(--p-indigo); }

.docs-main {
  grid-area: main;
  min-width: 0;
}

.docs-chapter {
  background: var(--p-bg);
  border: 1px solid var(--p-line);
  border-radius: var(--r-md);
  padding: 48px 52px;
  margin-bottom: 32px;
  box-shadow: none;
  scroll-margin-top: 128px;
}
.docs-ch-head { margin-bottom: 28px; }
.docs-ch-head h2 {
  font-size: clamp(1.35rem, 2.5vw, 1.65rem);
  letter-spacing: -0.025em;
  font-weight: 400;
}

.docs-narrative {
  font-size: 16px;
  line-height: 1.65;
  color: var(--p-muted);
  margin-bottom: 18px;
}
.docs-narrative strong { color: var(--p-ink); font-weight: 600; }
.docs-narrative a { color: var(--p-indigo); font-weight: 500; }
.docs-narrative a:hover { text-decoration: underline; }

.docs-chapter h3 {
  margin: 32px 0 12px;
  font-size: 20px;
  color: var(--p-ink);
}

.docs-list {
  list-style: none;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.docs-list li {
  position: relative;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--p-muted);
}
.docs-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--p-indigo);
  opacity: 0.5;
}
.docs-list li strong { color: var(--p-ink); }

.docs-callout {
  margin: 28px 0;
  padding: 20px 22px;
  border-radius: var(--r-md);
  border: 1px solid var(--p-line);
  font-size: 14px;
  line-height: 1.55;
}
.docs-callout strong {
  display: block;
  font-size: 14px;
  color: var(--p-ink);
  margin-bottom: 6px;
}
.docs-callout p { margin: 0; font-size: 14px; }
.docs-callout--tip { background: rgba(106, 106, 231,.05); border-color: rgba(106, 106, 231,.15); }
.docs-callout--note { background: rgba(183,107,8,.04); border-color: rgba(183,107,8,.15); }
.docs-callout--note strong { color: var(--p-amber); }

@media (max-width: 1024px) {
  .docs-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "toc"
      "main";
    gap: 0;
  }
  .docs-page-head {
    margin-bottom: 24px;
    padding-bottom: 24px;
  }
  .docs-toc {
    position: static;
    margin-bottom: 24px;
    padding: 16px 20px;
    background: var(--p-white);
    border: 1px solid var(--p-line);
    border-radius: var(--r-md);
  }
  .docs-toc-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }
  .docs-toc-link {
    padding: 6px 12px;
    font-size: 12.5px;
    border: 1px solid var(--p-line);
    background: var(--p-bg);
  }
  .docs-toc-link.is-active { border-color: rgba(106, 106, 231,.3); }
  .docs-toc-num { display: none; }
}

@media (max-width: 768px) {
  .docs-shell { padding: 96px var(--pad-x) 72px; }
  .docs-chapter { padding: 32px 24px; }
  .docs-ch-head h2 { font-size: 26px; }
}

/* ── Docs sitemap (/docs) ── */
.docs-shell--smap {
  grid-template-columns: 1fr;
  grid-template-areas:
    "head"
    "main";
  gap: 32px;
}
.smap-main {
  grid-area: main;
  min-width: 0;
}
.smap-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--p-bg);
  border: 1px solid var(--p-line);
  border-radius: var(--r-md);
  box-shadow: none;
  overflow: hidden;
}
.smap-group {
  padding: 0;
  min-width: 0;
}
.smap-group:nth-child(odd) {
  border-right: 1px solid var(--p-line);
}
.smap-group:nth-child(n+3) {
  border-top: 1px solid var(--p-line);
}
.smap-group h2 {
  margin: 0;
  padding: 12px 18px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--p-soft);
}
.smap-links {
  list-style: none;
  margin: 0;
  padding: 0 0 6px;
  display: flex;
  flex-direction: column;
}
.smap-links li { border-top: 1px solid var(--p-line); }
.smap-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 400;
  color: var(--p-muted);
  transition: background 150ms var(--ease), color 150ms var(--ease);
}
.smap-links a:hover {
  background: var(--p-bg-2);
  color: var(--p-navy);
}
.smap-links a:hover .smap-label { color: var(--p-navy); }
.smap-label {
  font-weight: 400;
  transition: color 150ms var(--ease);
}
.smap-path {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--p-soft);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .smap-card {
    grid-template-columns: 1fr;
  }
  .smap-group:nth-child(odd) {
    border-right: 0;
  }
  .smap-group + .smap-group {
    border-top: 1px solid var(--p-line);
  }
}