@charset "UTF-8";
/* ShadowSync — the glazing wall.
   A bento grid built as a steel-framed glass partition: mostly clear panes,
   a few lit, exactly one saturated. */

/* ---------------------------------------------------------- fonts */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/publicsans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/publicsans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------- tokens */
:root {
  --ink: #0b0f2a;
  --ink-2: #151a3a;
  --ink-3: #1e2549;
  --ground: #dfe5f3;
  --ground-hi: #f4f6fb;
  --paper: #ffffff;

  /* Glass at 72% over a ground that is genuinely tinted: at 66% over a
     near-white ground the panes read as flat white cards, which is the card
     deck this world refuses. */
  --glass: rgba(255, 255, 255, 0.72);
  --glass-strong: rgba(255, 255, 255, 0.86);
  /* The glazing bar is structural ink, so it has to be visible as a line. */
  --bar: rgba(11, 15, 42, 0.2);
  --bar-strong: rgba(11, 15, 42, 0.22);
  --bar-light: rgba(255, 255, 255, 0.16);

  --wash-a: #a7b3ea;
  --wash-b: #dde2f7;
  --wash-c: #c3cbf1;

  --signal: #00d6b4;
  --signal-deep: #00594b;
  --signal-ink: #052a23;

  --text: #0b0f2a;
  --text-soft: #4b5278;
  --text-on-ink: #eef0fa;
  --text-on-ink-soft: #a7adcd;

  --r-lg: 28px;
  --r: 22px;
  --r-sm: 14px;
  --r-pill: 999px;

  --gut: 12px;
  --pad: clamp(20px, 3.4vw, 34px);
  --shell: 1360px;
  --edge: clamp(16px, 4vw, 40px);

  --sans: "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --display: "Archivo", var(--sans);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --nav-h: 72px;
}

/* ---------------------------------------------------------- reset */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  background-image: linear-gradient(
    177deg,
    #d7deef 0%,
    #e4e9f6 34%,
    #dfe5f3 68%,
    #e2e7f4 100%
  );
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* The panes are translucent white over a flat ground: the glass reads from alpha
   and sheen alone, so no pane carries a backdrop-filter. Only the nav and the
   drawer, which sit over moving content, pay that cost. */

/* corridor light: a cool wash behind the whole wall */
body::before {
  content: "";
  position: fixed;
  inset: -20vh -10vw auto;
  height: 90vh;
  z-index: -1;
  background:
    radial-gradient(60% 55% at 18% 8%, rgba(167, 179, 234, 0.55), transparent 70%),
    radial-gradient(48% 50% at 88% 0%, rgba(0, 214, 180, 0.16), transparent 70%);
  pointer-events: none;
}

img, video, svg { max-width: 100%; display: block; }
img, video { height: auto; }

a { color: inherit; text-decoration-color: var(--bar-strong); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 6px;
}
.on-ink :where(a, button, summary):focus-visible,
.pane--ink :where(a, button, summary):focus-visible { outline-color: var(--signal); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 12px 0;
}
.skip:focus { left: 0; }

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------- type scale */
.t-hero {
  /* the floor caps display type at 6rem */
  font-size: clamp(2.8rem, 7.6vw, 6rem);
  font-weight: 620;
  font-stretch: 104%;
  letter-spacing: -0.045em;
  line-height: 0.93;
}
.t-xl { font-size: clamp(2.1rem, 4.6vw, 3.9rem); }
.t-lg { font-size: clamp(1.65rem, 3vw, 2.6rem); }
.t-md { font-size: clamp(1.2rem, 1.7vw, 1.55rem); letter-spacing: -0.025em; }
.t-sm { font-size: 1.0625rem; letter-spacing: -0.015em; font-weight: 650; }

.lede {
  font-size: clamp(1.06rem, 0.98rem + 0.5vw, 1.35rem);
  line-height: 1.5;
  color: var(--text-soft);
  max-width: 46ch;
}
.on-ink .lede, .pane--ink .lede { color: var(--text-on-ink-soft); }
.body-copy { color: var(--text-soft); }
.on-ink .body-copy, .pane--ink .body-copy { color: var(--text-on-ink-soft); }

/* ---------------------------------------------------------- shell */
.shell {
  width: min(100% - (var(--edge) * 2), var(--shell));
  margin-inline: auto;
}
.section { padding-block: clamp(56px, 8vw, 116px); }
.section--tight { padding-block: clamp(36px, 5vw, 64px); }
.section-head {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: clamp(24px, 3vw, 40px);
}
@media (min-width: 900px) {
  .section-head--split {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: end;
    gap: 40px;
  }
}
.section-head .t-xl { margin-top: 4px; }

/* ---------------------------------------------------------- buttons */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.92em 1.5em;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 620;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease),
    box-shadow 0.25s var(--ease), color 0.25s var(--ease);
  box-shadow: 0 1px 2px rgba(11, 15, 42, 0.16), 0 10px 26px -14px rgba(11, 15, 42, 0.6);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(11,15,42,.18), 0 18px 34px -16px rgba(11,15,42,.7); }
.btn:active { transform: translateY(0); }
.btn .arrow { transition: transform 0.25s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

.btn--signal { --btn-bg: var(--signal); --btn-fg: var(--signal-ink); }
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--bar-strong);
  box-shadow: none;
}
.btn--ghost:hover { background: var(--glass-strong); box-shadow: none; }
.on-ink .btn--ghost, .pane--ink .btn--ghost { --btn-fg: var(--text-on-ink); border-color: var(--bar-light); }
.on-ink .btn--ghost:hover, .pane--ink .btn--ghost:hover { background: rgba(255,255,255,.08); }
.btn--light { --btn-bg: #fff; --btn-fg: var(--ink); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 650;
  font-size: 0.95rem;
  text-decoration: none;
  color: inherit;
  letter-spacing: -0.01em;
}
.link-arrow .arrow { transition: transform 0.25s var(--ease); }
.link-arrow:hover .arrow { transform: translateX(4px); }
.link-arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* ---------------------------------------------------------- nav */
.nav-wrap {
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
  padding: 14px var(--edge) 0;
  pointer-events: none;
}
.nav {
  pointer-events: auto;
  width: min(100%, var(--shell));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 9px 9px 9px 20px;
  border-radius: var(--r-pill);
  background: rgba(244, 246, 251, 0.72);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 12px 30px -18px rgba(11, 15, 42, 0.5);
  transition: box-shadow 0.3s var(--ease), background-color 0.3s var(--ease);
}
.is-stuck .nav {
  background: rgba(244, 246, 251, 0.9);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 16px 40px -20px rgba(11, 15, 42, 0.62);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 680;
  font-size: 1.12rem;
  letter-spacing: -0.04em;
  flex: none;
}
.brand img { height: 26px; width: auto; }
.brand .mark {
  width: 11px; height: 11px;
  border-radius: 3px;
  background: var(--signal);
  box-shadow: 0 0 0 3px rgba(0, 214, 180, 0.18);
  flex: none;
}
.nav-links {
  display: none;
  gap: 4px;
  margin-inline: auto;
}
.nav-links a {
  display: inline-block;
  padding: 0.55em 0.9em;
  border-radius: var(--r-pill);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 560;
  color: var(--text-soft);
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
  white-space: nowrap;
}
.nav-links a:hover { color: var(--text); background: rgba(255,255,255,.7); }
.nav-links a[aria-current="page"] { color: var(--text); background: rgba(255,255,255,.85); }
.nav-cta { display: none; }
@media (min-width: 1000px) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; }
}

/* dropdown */
.has-sub { position: relative; }
.has-sub > button {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.55em 0.9em;
  border-radius: var(--r-pill);
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 560;
  color: var(--text-soft);
  cursor: pointer;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.has-sub > button:hover { color: var(--text); background: rgba(255,255,255,.7); }
.has-sub > button .caret { transition: transform 0.25s var(--ease); }
.has-sub > button[aria-expanded="true"] .caret { transform: rotate(180deg); }
.sub {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  translate: -50% 0;
  width: 340px;
  padding: 8px;
  border-radius: 20px;
  background: rgba(244, 246, 251, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 24px 60px -28px rgba(11, 15, 42, 0.65);
  display: grid;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
}
.has-sub[data-open="true"] .sub { opacity: 1; visibility: visible; transform: none; }
.sub a {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 13px;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  /* a grid item defaults to min-width:auto, which lets a long descriptor push
     the menu open instead of wrapping inside it */
  min-width: 0;
}
.sub a span {
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--text-soft);
  letter-spacing: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
.sub a:hover { background: #fff; }
/* the rule between the services group and the plugins group */
.sub-rule {
  display: block;
  height: 1px;
  margin: 7px 12px;
  background: var(--bar);
}
/* the Services item reads as current on a service or a plugin page */
.nav-links .has-sub.is-current > button { color: var(--text); background: rgba(255, 255, 255, 0.85); }
.drawer-sub-rule { display: block; height: 1px; margin: 10px 0 10px; background: var(--bar); }

/* mobile menu */
.burger {
  margin-left: auto;
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  gap: 4px;
  border-radius: var(--r-pill);
  border: 1px solid var(--bar);
  background: rgba(255,255,255,.7);
  cursor: pointer;
  padding: 0;
}
.burger i { display: block; width: 16px; height: 1.5px; background: var(--ink); transition: transform .3s var(--ease), opacity .2s; }
.burger i + i { margin-top: 4px; }
[data-menu="open"] .burger i:first-child { transform: translateY(5.5px) rotate(45deg); }
[data-menu="open"] .burger i:last-child { transform: translateY(-5.5px) rotate(-45deg); }
@media (min-width: 1000px) { .burger { display: none; } }

.drawer {
  position: fixed;
  inset: 0;
  z-index: 89;
  background: rgba(233, 236, 245, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  padding: calc(var(--nav-h) + 34px) var(--edge) 40px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s;
}
[data-menu="open"] .drawer { opacity: 1; visibility: visible; }
[data-menu="open"] { overflow: hidden; }
.drawer nav { display: grid; gap: 2px; }
.drawer a {
  font-family: var(--display);
  font-size: clamp(1.6rem, 6vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  text-decoration: none;
  padding: 10px 0;
  border-bottom: 1px solid var(--bar);
}
.drawer .drawer-sub {
  display: grid;
  gap: 0;
  padding-left: 14px;
  border-left: 1px solid var(--bar);
  margin: 10px 0 18px;
}
.drawer .drawer-sub a {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 560;
  letter-spacing: -0.01em;
  border-bottom: 0;
  padding: 7px 0;
  color: var(--text-soft);
}
.drawer .btn { margin-top: 24px; width: 100%; justify-content: center; }
@media (min-width: 1000px) { .drawer { display: none; } }

/* ---------------------------------------------------------- panes (the glass) */
.pane {
  position: relative;
  border-radius: var(--r);
  background: var(--glass);
  border: 1px solid var(--glass-strong);
  /* Glass set into a frame: the glazing bar carries the edge, so no pane
     floats on a soft drop shadow. Depth is spent only where something
     genuinely lifts — the hero, the nav, and the actions. */
  /* the glazing bar, then the bright cut at the top of the pane's thickness */
  box-shadow: 0 0 0 1px var(--bar), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
  padding: var(--pad);
  overflow: hidden;
  isolation: isolate;
}
/* hand-rolled glass: a faint vertical sheen, and a pointer-tracked highlight */
.pane::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Hand-rolled sheet glass: a bright band raking down from the top edge,
     and a second, weaker one catching the lower left. */
  background:
    linear-gradient(172deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.22) 26%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(28deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 34%);
  pointer-events: none;
}
.pane--lit::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: radial-gradient(
    240px circle at var(--mx, 50%) var(--my, 0%),
    rgba(255, 255, 255, 0.55),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}
@media (hover: hover) {
  .pane--lit:hover::after { opacity: 1; }
}

.pane--wash {
  background: linear-gradient(140deg, var(--wash-a), var(--wash-b) 62%, var(--wash-c));
  border-color: rgba(255, 255, 255, 0.55);
}
/* The wash is light but not white: --text-soft only reaches 3.7:1 on it, so
   every supporting line on a wash pane darkens to clear AA. */
.pane--wash .lede,
.pane--wash .pane-body,
.pane--wash .body-copy { color: #2b3257; }
.pane--ink {
  background: linear-gradient(155deg, var(--ink-3), var(--ink) 70%);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text-on-ink);
  box-shadow: none;
}
.pane--ink::before { background: linear-gradient(176deg, rgba(255,255,255,.1), transparent 45%); }
.pane--ink .pane-title { color: #fff; }
.pane--signal {
  background: linear-gradient(150deg, #22e7c8, var(--signal) 48%, #00b79a);
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--signal-ink);
}
.pane--signal .pane-body, .pane--signal .body-copy { color: var(--signal-ink); }
.pane--plain { background: var(--paper); }

.pane-title { font-family: var(--display); letter-spacing: -0.03em; font-weight: 600; margin: 0; }
.pane-body { color: var(--text-soft); margin: 0; }

/* ---------------------------------------------------------- the wall */
.wall {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gut);
}
@media (min-width: 720px) {
  .wall { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 1040px) {
  .wall { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}
.wall > * { grid-column: span 2; min-width: 0; }
@media (min-width: 720px) {
  .w-2 { grid-column: span 3; }
  .w-3 { grid-column: span 3; }
  .w-4 { grid-column: span 6; }
  .w-5 { grid-column: span 6; }
  .w-6 { grid-column: span 6; }
  .w-7, .w-8, .w-9, .w-12 { grid-column: span 6; }
}
@media (min-width: 1040px) {
  .w-2 { grid-column: span 2; }
  .w-3 { grid-column: span 3; }
  .w-4 { grid-column: span 4; }
  .w-5 { grid-column: span 5; }
  .w-6 { grid-column: span 6; }
  .w-7 { grid-column: span 7; }
  .w-8 { grid-column: span 8; }
  .w-9 { grid-column: span 9; }
  .w-12 { grid-column: span 12; }
  .h-tall { grid-row: span 2; }
}

/* the pane that names the wall it opens */
.wall-head { display: flex; flex-direction: column; gap: 14px; justify-content: flex-end; }
.wall-head .t-lg { letter-spacing: -0.035em; }

/* a pane that is a service: stacked, link-covered */
.card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 232px;
  text-decoration: none;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.card:hover { transform: translateY(-3px); }
.card .pane-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.card .num {
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  opacity: 0.45;
  padding-top: 4px;
}
.card .pane-title { font-size: clamp(1.25rem, 1.6vw, 1.7rem); }
.card .pane-body { font-size: 0.975rem; }
.card .card-foot { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.card .card-foot .chip-row { flex-wrap: nowrap; overflow: hidden; min-width: 0; margin-top: 0; }
.card .card-foot .chip-row li { white-space: nowrap; }
.card .card-foot .link-arrow { flex: none; }
.card--tall { min-height: 296px; }
/* a stated commitment is as tall as its sentence; only linked cards reserve height */
.card--flat { min-height: 0; gap: 10px; }
/* A pane spanning the whole wall would otherwise carry one short column of
   text and a large empty right half. */
.card--wide { min-height: 0; }
@media (min-width: 900px) {
  .card--wide {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: start;
    column-gap: clamp(28px, 4vw, 56px);
    row-gap: 14px;
  }
  .card--wide .pane-head { margin: 0; }
  .card--wide .card-foot { margin: 0; padding: 0; grid-column: 2; justify-content: flex-start; }
  .card--wide > .pane-body { grid-column: 2; grid-row: 1; }
  .card--wide > .pane-title { grid-column: 1; grid-row: 1 / span 2; }
}
/* on a photo card every line lives in the scrim, so the picture keeps its top
   and no sentence ever lands on a bright patch of the image */
.shot.card .pane-head { margin-top: auto; }
.shot .pane-body, .shot .lede { color: rgba(255, 255, 255, 0.88); }
.shot.card .card-foot { margin-top: 0; }

/* One column, one card height: the reserved heights that give the wall its
   blocky rhythm on a desktop only leave holes on a phone. */
@media (max-width: 719px) {
  .card, .card--tall { min-height: 0; }
  .shot.card { min-height: 264px; }
  .card .card-foot .chip-row li + li { display: none; }
}

/* a pane that is a photograph: the glass sheen and the milky ground would
   flatten the image, so a shot pane sits on ink and keeps only its own grade */
.shot { position: relative; overflow: hidden; background: var(--ink); }
.pane.shot::before { content: none; }
.shot img, .shot video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.shot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(11, 15, 42, 0.93) 0%, rgba(11, 15, 42, 0.9) 26%, rgba(11, 15, 42, 0.3) 62%, rgba(11, 15, 42, 0.06));
}
/* duotone: pull the magenta stock toward the wall's indigo/teal */
.shot--tone img, .shot--tone video { filter: saturate(0.62) contrast(1.06) hue-rotate(-14deg); }
.shot--tone::after {
  background:
    linear-gradient(0deg, rgba(11, 15, 42, 0.94) 0%, rgba(11, 15, 42, 0.91) 28%, rgba(11, 15, 42, 0.32) 64%, rgba(11, 15, 42, 0.08)),
    linear-gradient(140deg, rgba(0, 214, 180, 0.14), rgba(140, 120, 255, 0.12));
}
.shot--light::after { background: linear-gradient(0deg, rgba(11, 15, 42, 0.84) 2%, rgba(11, 15, 42, 0.14) 62%, transparent); }

/* ---------------------------------------------------------- hero */
.hero { padding-top: calc(var(--nav-h) + 26px); }
.hero-pane {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(460px, 78vh, 740px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--pad) var(--pad) clamp(56px, 7vw, 78px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 40px 90px -56px rgba(11, 15, 42, 0.95);
  color: #fff;
  background: var(--ink);
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the source footage carries a generator watermark in the lower right;
     a 12% overscan crops it without touching the subject */
  transform: scale(1.12);
  transform-origin: 46% 42%;
  filter: saturate(0.6) contrast(1.05) hue-rotate(-12deg) brightness(0.82);
}
.hero-pane::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(8deg, rgba(11, 15, 42, 0.94) 10%, rgba(11, 15, 42, 0.52) 48%, rgba(11, 15, 42, 0.42)),
    linear-gradient(120deg, rgba(0, 214, 180, 0.2), transparent 46%, rgba(140, 125, 255, 0.22));
}

.hero-type { position: relative; display: grid; gap: clamp(18px, 2.4vw, 26px); max-width: 1100px; }
.hero-h1 { position: relative; color: #fff; }
.hero-h1 .l { display: block; }
.hero-h1 .l--echo {
  position: relative;
  color: rgba(255, 255, 255, 0.99);
}
/* the line that repeats, repeats */
.hero-h1 .ghost {
  position: absolute;
  left: 0;
  top: 0;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.34);
  transform: translate(0.15em, 0);
  z-index: -1;
  white-space: nowrap;
  pointer-events: none;
}
.hero-h1 .ghost--2 { transform: translate(0.3em, 0); -webkit-text-stroke-color: rgba(255, 255, 255, 0.15); }
.hero-h1 .l--run { color: var(--signal); }

.hero-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: clamp(18px, 3vw, 44px);
  justify-content: space-between;
}
.hero-foot .lede { color: rgba(255, 255, 255, 0.84); max-width: 52ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* the CTA straddles the pane's bottom edge */
.hero-straddle {
  position: relative;
  z-index: 3;
  margin-top: -26px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
@media (min-width: 900px) {
  .hero-straddle { justify-content: flex-start; padding-left: clamp(24px, 5vw, 76px); }
}
.hero-straddle .btn--light { border: 1px solid var(--bar); }

/* a compact row of integration labels, used on service heroes and cards */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.chip-row li {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  /* two chips must fit a 320px row, so they tighten before they stack */
  padding: 0.42em clamp(0.55em, 2vw, 0.8em);
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.1);
  font-size: clamp(0.6rem, 0.55rem + 0.25vw, 0.68rem);
  font-weight: 640;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}
.chip-row--ground li { border-color: var(--bar); background: rgba(255,255,255,.7); color: var(--text-soft); }
.chip-row li::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--signal);
  flex: none;
}

/* ---------------------------------------------------------- page heads */
.page-hero { padding: clamp(30px, 4.6vw, 60px) var(--pad); }
@media (min-width: 980px) {
  .page-hero--split {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    column-gap: clamp(32px, 5vw, 72px);
    align-items: start;
  }
  .page-hero--split > .page-hero-aside { grid-column: 2; grid-row: 1 / span 5; }
}
.page-hero-aside { margin-top: 26px; }
.page-hero-aside h2 {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2b3257;
  opacity: 0.7;
  margin-bottom: 8px;
}
.page-hero-index { counter-reset: line; display: grid; list-style: none; margin: 0; padding: 0; }
.page-hero-index li { border-top: 1px solid rgba(11, 15, 42, 0.16); }
.page-hero-index a {
  display: flex;
  align-items: baseline;
  gap: 0.8em;
  padding: 11px 0;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(0.98rem, 1.15vw, 1.1rem);
  letter-spacing: -0.025em;
  color: #171d40;
  transition: color 0.2s var(--ease), transform 0.25s var(--ease);
}
.page-hero-index a::before {
  counter-increment: line;
  content: counter(line, decimal-leading-zero);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  opacity: 0.45;
  flex: none;
}
.page-hero-index a:hover { color: var(--signal-deep); transform: translateX(6px); }
.page-hero-title { font-size: clamp(2.3rem, 5.6vw, 4.4rem); }
.service-hero {
  min-height: clamp(400px, 58vh, 580px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
  padding: var(--pad) var(--pad) clamp(28px, 4vw, 46px);
}
.service-hero .lede { max-width: 54ch; }

/* ---------------------------------------------------------- statement */
.statement {
  font-family: var(--display);
  font-size: clamp(1.45rem, 3vw, 2.5rem);
  font-weight: 560;
  letter-spacing: -0.035em;
  line-height: 1.2;
  max-width: 26ch;
}
.statement--sm { font-size: clamp(1.2rem, 2.1vw, 1.85rem); max-width: 40ch; }
.statement-grid { display: grid; gap: clamp(20px, 4vw, 48px); }
@media (min-width: 900px) {
  .statement-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
  .statement:not(.statement--sm) { max-width: 24ch; }
}
.statement em {
  font-style: normal;
  color: var(--signal-deep);
  box-shadow: inset 0 -0.09em 0 rgba(0, 214, 180, 0.5);
}

/* ---------------------------------------------------------- integrations */
.integrations { display: grid; gap: clamp(18px, 2.6vw, 34px); }
@media (min-width: 900px) { .integrations { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; } }
.int-grid {
  display: grid;
  /* nine named systems divide exactly by three, so the grid never orphans a cell */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--bar-light);
  border: 1px solid var(--bar-light);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.int-grid li {
  background: rgba(21, 26, 58, 0.92);
  padding: 16px clamp(12px, 1.4vw, 18px);
  font-size: clamp(0.82rem, 0.78rem + 0.2vw, 0.92rem);
  font-weight: 560;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 0.6em;
  color: var(--text-on-ink);
}
.int-grid li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 2px;
  background: var(--signal);
  opacity: 0.85;
  flex: none;
}

/* ---------------------------------------------------------- commitments */
.commit-head { display: grid; gap: 14px; margin-bottom: clamp(22px, 3vw, 32px); }
@media (min-width: 900px) {
  .commit-head { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: end; gap: 40px; }
}
.commit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 1px;
  background: var(--bar-light);
  border: 1px solid var(--bar-light);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.commit-grid li {
  background: rgba(21, 26, 58, 0.94);
  padding: clamp(16px, 1.8vw, 22px);
  display: grid;
  gap: 8px;
  align-content: start;
}
.commit-grid h3 { letter-spacing: -0.02em; }
.commit-grid p { color: var(--text-on-ink-soft); font-size: 0.9rem; line-height: 1.5; }

.aside-list { display: grid; gap: 0; }
.aside-list li {
  padding: 11px 0 11px 18px;
  position: relative;
  font-size: 0.95rem;
  color: #2b3257;
  border-top: 1px solid rgba(11, 15, 42, 0.16);
}
.aside-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.15em;
  width: 7px;
  height: 1px;
  background: var(--signal-deep);
}

/* ---------------------------------------------------------- process rail */
.rail { display: grid; gap: var(--gut); list-style: none; margin: 0; padding: 0; }
@media (min-width: 760px) { .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .rail { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.step { display: flex; flex-direction: column; gap: 10px; min-height: 200px; }
.step .n {
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--signal-deep);
  display: flex;
  align-items: center;
  gap: 0.7em;
}
.step .n::after { content: ""; height: 1px; flex: 1; background: var(--bar); }
.pane--ink .step .n { color: var(--signal); }
.pane--ink .step .n::after { background: var(--bar-light); }

/* a rail inside a pane borrows the columns without the glass */
.rail--bare .step { min-height: 0; background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; }
.rail--bare { gap: 22px; }
.pane--signal .rail--bare .n { color: var(--signal-ink); opacity: 0.6; }
.pane--signal .rail--bare .n::after { background: rgba(5, 42, 35, 0.25); }

/* ---------------------------------------------------------- faq */
.faq { display: grid; gap: 8px; }
.qa {
  border-radius: var(--r-sm);
  background: var(--glass);
  border: 1px solid var(--glass-strong);
  box-shadow: 0 0 0 1px var(--bar);
  overflow: hidden;
}
.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px var(--pad);
  cursor: pointer;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  letter-spacing: -0.025em;
  list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary .plus { position: relative; width: 16px; height: 16px; flex: none; }
.qa summary .plus::before,
.qa summary .plus::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.3s var(--ease);
}
.qa summary .plus::after { transform: rotate(90deg); }
.qa[open] summary .plus::after { transform: rotate(0deg); }
.qa .qa-body { padding: 0 var(--pad) 22px; color: var(--text-soft); max-width: 68ch; }
.qa[open] { background: var(--glass-strong); }

/* ---------------------------------------------------------- breadcrumb */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
  font-size: 0.78rem;
  color: var(--text-soft);
  padding-top: calc(var(--nav-h) + 22px);
}
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs li { display: flex; align-items: center; gap: 0.5em; }
.crumbs li + li::before { content: "/"; opacity: 0.4; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.5em; padding: 0; margin: 0; list-style: none; }

/* ---------------------------------------------------------- form (CF7) */
.form-pane .wpcf7 { margin: 0; }
.form-grid, .wpcf7-form { display: grid; gap: 12px; }
/* Contact Form 7 inserts its own paragraphs and line breaks. This theme lays
   forms out with grid and gap, so the breaks go, and the paragraph the plugin
   wraps a field pair in steps aside so the pair's labels become the row's own
   grid cells. `display: contents` keeps this working whether or not the
   plugin's auto-formatting is on. */
.wpcf7-form br { display: none; }
.wpcf7-form .row-2 > p { display: contents; }
.wpcf7-form > p { margin: 0; display: grid; gap: 12px; }
@media (min-width: 640px) {
  .wpcf7-form .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
}
.field { display: grid; gap: 6px; }
.field > label, .wpcf7-form label {
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
  display: grid;
  gap: 6px;
}
input[type="text"], input[type="email"], input[type="tel"], input[type="search"], textarea, select,
.wpcf7-form-control:where(.wpcf7-text, .wpcf7-email, .wpcf7-tel, .wpcf7-textarea, .wpcf7-select) {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  padding: 0.85em 1em;
  border-radius: 12px;
  border: 1px solid var(--bar);
  background: rgba(255, 255, 255, 0.82);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
textarea, .wpcf7-form-control.wpcf7-textarea { min-height: 148px; resize: vertical; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--ink);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 214, 180, 0.28);
}
input::placeholder, textarea::placeholder { color: #8f95b4; }
.wpcf7-submit, input[type="submit"] {
  justify-self: start;
  border: 0;
  cursor: pointer;
  /* the one saturated note on the contact page sits on the action */
  background: var(--signal);
  color: var(--signal-ink);
  font-weight: 620;
  font-size: 0.95rem;
  padding: 0.95em 1.7em;
  border-radius: var(--r-pill);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  box-shadow: 0 10px 26px -14px rgba(11, 15, 42, 0.7);
}
.wpcf7-submit:hover, input[type="submit"]:hover { transform: translateY(-2px); }
.wpcf7 form .wpcf7-response-output {
  margin: 14px 0 0;
  padding: 12px 16px;
  border-radius: 12px;
  border-width: 1px;
  font-size: 0.92rem;
}
.wpcf7-not-valid-tip { color: #b3213b; font-size: 0.8rem; text-transform: none; letter-spacing: 0; font-weight: 500; }
.wpcf7-spinner { margin-left: 10px; }

.form-body { margin-top: 20px; }
.form-pane + .pane { align-self: start; }
.form-fallback-note { margin-top: 14px; font-size: 0.9rem; color: var(--text-soft); }
.form-aside { margin-top: 22px; }
.form-aside .qa-body { padding-top: 4px; }
.aside-list--ink li { color: var(--text-on-ink-soft); border-top-color: var(--bar-light); }
.aside-list--ink li::before { background: var(--signal); }

/* contact rows */
.contact-rows { display: grid; gap: 2px; }
.contact-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--bar-light);
  text-decoration: none;
}
.contact-row:last-child { border-bottom: 0; }
.contact-row .k {
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-on-ink-soft);
  flex: none;
}
.contact-row .v {
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.7vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  text-align: right;
}
a.contact-row:hover .v { color: var(--signal); }

/* ---------------------------------------------------------- close cta */
.close-pane {
  display: grid;
  gap: clamp(20px, 3vw, 34px);
  padding: clamp(36px, 6vw, 76px) var(--pad);
  align-items: center;
  text-align: left;
}
@media (min-width: 900px) {
  .close-pane { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
  .close-pane .close-actions { justify-self: end; }
}
.close-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ---------------------------------------------------------- footer */
.site-foot {
  margin-top: clamp(40px, 6vw, 80px);
  padding-bottom: clamp(24px, 4vw, 40px);
}
.foot-pane { display: grid; gap: clamp(28px, 4vw, 46px); padding: clamp(32px, 4.6vw, 56px) var(--pad); }
@media (min-width: 860px) {
  .foot-pane { grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 0.92fr)); }
}
.foot-pane h2 { font-size: 0.72rem; font-family: var(--sans); font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-on-ink-soft); margin-bottom: 14px; }
.foot-links { display: grid; gap: 9px; }
.foot-links a { text-decoration: none; font-size: 0.96rem; color: var(--text-on-ink-soft); transition: color 0.2s var(--ease); }
.foot-links a:hover { color: #fff; }
.foot-brand .brand { color: #fff; font-size: 1.35rem; }
.foot-brand p { color: var(--text-on-ink-soft); margin-top: 14px; max-width: 42ch; font-size: 0.96rem; }
.foot-base {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  align-items: center;
  margin-top: clamp(26px, 3vw, 38px);
  padding-top: 22px;
  border-top: 1px solid var(--bar-light);
  font-size: 0.82rem;
  color: var(--text-on-ink-soft);
  grid-column: 1 / -1;
}

/* ---------------------------------------------------------- the wall lights */
.lift { opacity: 0; transform: translateY(14px); }
.is-ready .lift {
  transition: opacity 0.72s var(--ease), transform 0.72s var(--ease);
  transition-delay: calc(var(--i, 0) * 65ms);
}
.is-ready .lift.is-lit { opacity: 1; transform: none; }
.no-js .lift, .no-io .lift { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .lift, .is-ready .lift { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn, .card, .link-arrow .arrow, .pane { transition: none !important; }
  .hero-media { display: none; }
}

/* ---------------------------------------------------------- misc wp */
.alignwide { max-width: var(--shell); }
.entry-content > * + * { margin-top: 1.1em; }
.entry-content h2 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); margin-top: 1.6em; }
.entry-content h3 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); margin-top: 1.4em; }
.entry-content ul { list-style: disc; padding-left: 1.2em; }
.entry-content li + li { margin-top: 0.4em; }
.entry-content a { text-decoration: underline; }
.entry-content img { border-radius: var(--r-sm); }

/* ---------------------------------------------------------- browser surfaces */
::selection { background: rgba(0, 214, 180, 0.3); color: var(--ink); }
.pane--ink ::selection, .shot ::selection { background: rgba(0, 214, 180, 0.42); color: #fff; }

:root { accent-color: var(--signal-deep); }
input, textarea, select { caret-color: var(--signal-deep); }

@supports (scrollbar-color: red blue) {
  html { scrollbar-color: rgba(11, 15, 42, 0.32) transparent; scrollbar-width: thin; }
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(11, 15, 42, 0.28);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(11, 15, 42, 0.45); background-clip: content-box; }

::marker { color: var(--signal-deep); }
:where(a):focus-visible { text-decoration: none; }

/* ---------------------------------------------------------- plugins: screens */
/* A screenshot is a screen set into the glass: framed by a glazing bar, never
   a floating device. The WordPress admin grey is its own ground. */
.screen {
  position: relative;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #f0f0f1;
  box-shadow: 0 0 0 1px var(--bar), 0 22px 44px -30px rgba(11, 15, 42, 0.55);
}
.screen img { width: 100%; height: auto; }

/* in a wall pane the screen rises from the bottom edge of the pane */
.screen-pane { display: flex; flex-direction: column; gap: 20px; padding-bottom: 0; }
.screen-pane-copy { display: grid; gap: 10px; align-content: start; }
.screen-pane-copy .pane-title { font-size: clamp(1.2rem, 1.55vw, 1.5rem); }
.screen-pane .screen {
  margin-top: auto;
  height: clamp(230px, 60vw, 340px);
  border-radius: 14px 14px 0 0;
  box-shadow: 0 0 0 1px var(--bar);
}
@media (min-width: 1040px) {
  .screen-pane .screen { height: clamp(280px, 27vw, 380px); }
}
.screen-pane .screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}
/* A whole admin screen shrunk into a pane reads as texture, so a wall pane
   shows the top-left corner of the real screen at its own size. */
.screen-pane .screen--crop img { object-fit: none; }
/* A small card that is already the whole story is shown whole. */
.screen-pane .screen--contain img { object-fit: contain; object-position: center top; }

/* ---------------------------------------------------------- plugins: hero */
/* The plugin hero is the home page's hero: one tall ink pane, the product name
   and its claim at the Display step, the actions under them. The dashboard that
   used to sit beside the copy now opens the wall below at full width, where its
   callouts are large enough to read. */
.plugin-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(430px, 70vh, 660px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--pad) var(--pad) clamp(44px, 5vw, 64px);
}
.plugin-name { color: #fff; }
.plugin-hero .lede { color: var(--text-on-ink-soft); max-width: 48ch; }
/* the requirements line is a caption under the lede, not a second paragraph */
.plugin-hero .plugin-req { margin-top: 12px; opacity: 0.85; }
.plugin-hero .hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* the hero pane is ink, so its ghost action is drawn in light, not in ink */
.hero-pane .btn--ghost {
  color: var(--text-on-ink);
  border-color: var(--bar-light);
  background: rgba(255, 255, 255, 0.04);
}
.hero-pane .btn--ghost:hover { background: rgba(255, 255, 255, 0.12); }

/* the dashboard pane that opens the free wall */
.plugin-shot-pane { padding: clamp(18px, 2.2vw, 28px); }

/* the decision pane that closes the plans section, set apart from the notes
   above it so the caveats and the ask do not read as one block */
.plans-cta { margin-top: clamp(22px, 3vw, 34px); }
.plans-cta .lede { max-width: 58ch; }
.plugin-shot-pane .annotated { gap: 18px; }
@media (min-width: 900px) {
  .plugin-shot-pane .callout-list { display: none; }
}

.plugin-hero-section { padding-top: clamp(14px, 1.6vw, 22px); padding-bottom: var(--gut); }

.plugin-free { padding-bottom: clamp(36px, 5vw, 64px); }
.plugin-req {
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-on-ink-soft);
}
.screen--hero {
  box-shadow: 0 0 0 1px var(--bar-light), 0 34px 70px -34px rgba(0, 0, 0, 0.8);
}

/* callouts: a dot on the exact point, a hairline, the label */
.annotated { display: grid; gap: 14px; min-width: 0; }
.callout {
  position: absolute;
  top: var(--y);
  display: flex;
  align-items: center;
  transform: translateY(-50%);
  pointer-events: none;
}
.callout--right { left: var(--x); }
.callout--left { right: calc(100% - var(--x)); flex-direction: row-reverse; }
.callout-dot {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--signal);
  color: var(--signal-ink);
  font-family: var(--display);
  font-size: 0.7rem;
  font-weight: 750;
  box-shadow: 0 0 0 4px rgba(0, 214, 180, 0.3), 0 2px 6px rgba(11, 15, 42, 0.35);
}
.callout--right .callout-dot { margin-left: -11px; }
.callout--left .callout-dot { margin-right: -11px; }
.callout-label {
  position: relative;
  padding: 0.5em 0.85em;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 8px 18px -8px rgba(11, 15, 42, 0.6);
}
.callout--right .callout-label { margin-left: 30px; }
.callout--left .callout-label { margin-right: 30px; }
.callout-label::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 30px;
  height: 1px;
  background: var(--ink);
}
.callout--right .callout-label::before { right: 100%; }
.callout--left .callout-label::before { left: 100%; }

.callout-list { counter-reset: callout; display: grid; gap: 8px; }
.callout-list li {
  counter-increment: callout;
  display: flex;
  align-items: center;
  gap: 0.7em;
  font-size: 0.9rem;
  color: var(--text-on-ink);
}
.callout-list li::before {
  content: counter(callout);
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  background: var(--signal);
  color: var(--signal-ink);
  font-family: var(--display);
  font-size: 0.7rem;
  font-weight: 750;
}
/* Narrow: the labels would cover the picture, so they become the list. */
@media (max-width: 719px) {
  .callout-label { display: none; }
}
/* Wide: the labels sit on the picture; the list stays for screen readers. */
@media (min-width: 720px) {
  .callout-dot { width: 14px; height: 14px; font-size: 0; }
  .callout--right .callout-dot { margin-left: -7px; }
  .callout--left .callout-dot { margin-right: -7px; }
  .callout-list {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ---------------------------------------------------------- plugins: wall */
.free-head { justify-content: flex-start; }
.free-head .t-lg { font-size: clamp(1.9rem, 3.2vw, 2.9rem); }
.free-also-title {
  margin-top: auto;
  padding-top: 18px;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2b3257;
}
.free-head .aside-list li { font-size: 0.92rem; }

.pro-pane { display: flex; flex-direction: column; gap: 14px; }
.pro-pane .t-lg { color: var(--signal-ink); }
.pro-line {
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
}
.pro-buy {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}
.pro-buy .plan-price { flex-basis: 100%; }
.pro-compare { position: relative; }
.pro-compare::before { content: none; }

.fixer-pane .body-copy { max-width: 62ch; }

.plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.2em 0.5em; }
.plan-price .amount {
  font-family: var(--display);
  font-size: clamp(2.3rem, 3.4vw, 3.1rem);
  font-weight: 650;
  letter-spacing: -0.045em;
  line-height: 1;
}
.plan-price .per { font-size: 0.86rem; font-weight: 560; opacity: 0.82; }

.plan-chip {
  justify-self: start;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 0.4em 0.8em;
  border-radius: var(--r-pill);
  border: 1px solid var(--bar);
  background: rgba(255, 255, 255, 0.75);
  color: #2b3257;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.plan-chip--pro { background: var(--signal); border-color: transparent; color: var(--signal-ink); }
.plan-chip--agency { background: var(--ink); border-color: transparent; color: #fff; }

/* ---------------------------------------------------------- plugins: plans */
/* Unequal plan panes keep their own heights; a slim Free pane does not stretch to Pro. */
.plans { align-items: start; }
.plan { display: flex; flex-direction: column; gap: 18px; }
.plan-list li {
  position: relative;
  padding: 9px 0 9px 24px;
  border-top: 1px solid var(--bar);
  font-size: 0.95rem;
}
.plan-list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 1.02em;
  width: 10px;
  height: 5px;
  border-left: 1.6px solid var(--signal-deep);
  border-bottom: 1.6px solid var(--signal-deep);
  transform: rotate(-45deg);
}
.plan--pro .plan-list li { border-color: rgba(5, 42, 35, 0.2); }
.plan--pro .plan-list li::before { border-color: var(--signal-ink); }
.plan--agency .plan-list li { border-color: var(--bar-light); color: var(--text-on-ink); }
.plan--agency .plan-list li::before { border-color: var(--signal); }
.plan--agency .pane-title { color: #fff; }
.plan-cta { margin-top: auto; align-self: flex-start; }
.plan-summary { color: var(--text-soft); font-size: 0.98rem; max-width: 28ch; }
.plan-lead { font-size: 0.82rem; font-weight: 650; letter-spacing: 0.02em; margin-bottom: -6px; }
.plan--agency .plan-lead { color: var(--text-on-ink-soft); }
.plan-notes { display: grid; gap: 4px; margin-top: 22px; max-width: 74ch; }
.plan-notes li {
  position: relative;
  padding-left: 18px;
  font-size: 0.92rem;
  color: var(--text-soft);
}
.plan-notes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 7px;
  height: 1px;
  background: var(--signal-deep);
}

/* ---------------------------------------------------------- plugins: docs pane */
.docs-pane { display: grid; gap: clamp(20px, 3vw, 40px); }
@media (min-width: 900px) {
  .docs-pane { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; }
}
.docs-pane .body-copy { margin-top: 12px; max-width: 46ch; }
.docs-pane-link { position: relative; margin-top: 18px; }
.docs-pane-link::before { content: none; }
.docs-pane-sections li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--bar);
}
.docs-pane-sections li:last-child { border-bottom: 1px solid var(--bar); }
.docs-pane-sections a {
  flex: 1;
  padding: 13px 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.docs-pane-sections a:hover { color: var(--signal-deep); }
.docs-pane-sections span { font-size: 0.82rem; color: var(--text-soft); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- plugins: hub */
.hub-plugin { display: grid; gap: clamp(24px, 3vw, 40px); padding-bottom: 0; }
@media (min-width: 1040px) {
  .hub-plugin { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}
.hub-plugin-copy { display: grid; gap: 16px; align-content: center; padding-bottom: var(--pad); }
.hub-plugin h2 a { color: #fff; text-decoration: none; }
.hub-plugin-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.hub-plugin-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 4px; }
.hub-plugin-actions .link-arrow { color: #fff; }
.hub-plugin-actions .link-arrow::before { content: none; }
.hub-docs-link { position: relative; z-index: 2; font-size: 0.95rem; color: var(--text-on-ink-soft); }
.hub-docs-link:hover { color: #fff; }
.screen--hub {
  align-self: end;
  height: clamp(260px, 52vw, 420px);
  border-radius: 14px 14px 0 0;
  box-shadow: 0 0 0 1px var(--bar-light);
}
.screen--hub img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.hub-plugin:hover .link-arrow .arrow { transform: translateX(4px); }

/* ---------------------------------------------------------- docs */
.docs {
  display: grid;
  gap: 18px;
  align-items: start;
  padding-block: 20px clamp(40px, 6vw, 80px);
}
@media (min-width: 980px) {
  .docs { grid-template-columns: 248px minmax(0, 1fr); gap: 28px; }
}
@media (min-width: 1320px) {
  .docs--toc { grid-template-columns: 248px minmax(0, 1fr) 200px; }
}

.docs-rail { min-width: 0; }
@media (min-width: 980px) {
  .docs-rail {
    position: sticky;
    top: calc(var(--nav-h) + 22px);
    max-height: calc(100vh - var(--nav-h) - 44px);
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--bar-strong) transparent;
  }
}
.docs-menu-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.85em 1.2em;
  border-radius: var(--r-pill);
  border: 1px solid var(--bar-strong);
  background: var(--glass-strong);
  font: inherit;
  font-weight: 620;
  font-size: 0.95rem;
  color: var(--ink);
  cursor: pointer;
}
.docs-menu-btn .caret { transition: transform 0.25s var(--ease); }
.docs-menu-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }
@media (min-width: 980px) {
  .docs-menu-btn { display: none; }
}
/* Only the section being read is open; the others are one line each. */
.docs-sections > li:not(.is-open) > .docs-articles { display: none; }
.docs-nav { display: grid; gap: 14px; }
@media (max-width: 979px) {
  .docs-nav {
    margin-top: 10px;
    padding: 16px;
    border-radius: var(--r);
    background: var(--glass);
    box-shadow: 0 0 0 1px var(--bar);
  }
}
.docs-nav.is-folded { display: none; }
.docs-home {
  display: block;
  padding: 0.35em 0.7em;
  border-radius: 10px;
  font-family: var(--display);
  font-weight: 650;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.docs-sections { display: grid; gap: 14px; list-style: none; margin: 0; padding: 0; }
.docs-section {
  display: block;
  padding: 0.2em 0.85em;
  border-radius: 8px;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2b3257;
  text-decoration: none;
}
.docs-section:hover { color: var(--signal-deep); }
.docs-articles { display: grid; gap: 1px; margin: 4px 0 0; padding: 0; list-style: none; }
.docs-articles a {
  display: block;
  padding: 0.4em 0.85em;
  border-radius: 10px;
  font-size: 0.92rem;
  line-height: 1.35;
  color: #2b3257;
  text-decoration: none;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.docs-articles a:hover, .docs-home:hover { background: var(--glass-strong); color: var(--ink); }
.docs-nav [aria-current="page"] {
  background: #fff;
  color: var(--ink);
  font-weight: 620;
  box-shadow: 0 0 0 1px var(--bar);
}
.docs-section[aria-current="page"] { font-weight: 700; }
.docs-back { position: relative; margin: 4px 0.85em 0; font-size: 0.88rem; }
.docs-back::before { content: none; }

.docs-article { padding: clamp(26px, 4vw, 54px) clamp(20px, 4.4vw, 62px); min-width: 0; }
.docs-title { font-size: clamp(2rem, 3.6vw, 3rem); letter-spacing: -0.04em; line-height: 1.05; }
.docs-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 16px;
  font-size: 0.85rem;
  color: var(--text-soft);
}
.docs-content { max-width: 68ch; margin-top: 30px; font-size: 1.02rem; line-height: 1.7; }
.docs-content > * + * { margin-top: 1em; }
.docs-content h2 {
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  margin-top: 2.1em;
  scroll-margin-top: calc(var(--nav-h) + 26px);
}
.docs-content h3 { font-size: 1.15rem; letter-spacing: -0.02em; margin-top: 1.7em; }
.docs-content h2 + *, .docs-content h3 + * { margin-top: 0.6em; }
.docs-content ol { list-style: decimal; padding-left: 1.4em; }
.docs-content ol li, .docs-content ul li { padding-left: 0.2em; }
.docs-content li + li { margin-top: 0.45em; }
.docs-content code {
  font-family: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
  font-size: 0.86em;
  padding: 0.12em 0.4em;
  border-radius: 6px;
  background: #eef1f8;
  box-shadow: 0 0 0 1px var(--bar);
  overflow-wrap: anywhere;
}
.docs-content pre {
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--text-on-ink);
  font-size: 0.88rem;
  line-height: 1.6;
  overflow-x: auto;
}
.docs-content pre code { padding: 0; background: none; box-shadow: none; color: inherit; font-size: inherit; }
.docs-content .wp-block-table { margin-inline: 0; overflow-x: auto; }
.docs-content table { width: 100%; border-collapse: collapse; font-size: 0.94rem; font-variant-numeric: tabular-nums; }
.docs-content th, .docs-content td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--bar); }
.docs-content th {
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
  border-bottom-color: var(--bar-strong);
}
.docs-content .ss-note {
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(0, 214, 180, 0.1);
  box-shadow: 0 0 0 1px rgba(0, 89, 75, 0.22);
  color: #123a33;
}
.docs-content .ss-note--warn {
  background: rgba(255, 196, 61, 0.14);
  box-shadow: 0 0 0 1px rgba(122, 82, 0, 0.25);
  color: #3d2a00;
}
.docs-content img { border-radius: 12px; box-shadow: 0 0 0 1px var(--bar); }

.docs-index { margin-top: 34px; }
@media (min-width: 720px) { .docs-index { columns: 2; column-gap: 40px; } }
.docs-index-group {
  break-inside: avoid;
  padding: 18px 0 22px;
  border-top: 1px solid var(--bar);
}
.docs-index-group h2 { font-size: 1.2rem; letter-spacing: -0.025em; }
.docs-index-group h2 a { text-decoration: none; }
.docs-index-group h2 a:hover { color: var(--signal-deep); }
.docs-index-group p { margin-top: 8px; font-size: 0.92rem; color: var(--text-soft); }
.docs-index-group ul { margin-top: 12px; display: grid; gap: 4px; }
.docs-index-group li a { font-size: 0.94rem; color: #2b3257; }

.docs-children { margin-top: 30px; display: grid; max-width: 68ch; }
.docs-children li { padding: 14px 0; border-top: 1px solid var(--bar); }
.docs-children a { font-family: var(--display); font-weight: 600; font-size: 1.08rem; letter-spacing: -0.02em; text-decoration: none; }
.docs-children a:hover { color: var(--signal-deep); }
.docs-children p { margin-top: 4px; font-size: 0.93rem; color: var(--text-soft); }

.docs-pager { display: grid; gap: 10px; margin-top: 44px; max-width: 68ch; font-size: 1.02rem; }
@media (min-width: 640px) { .docs-pager { grid-template-columns: 1fr 1fr; } }
.docs-pager a {
  display: grid;
  gap: 2px;
  padding: 14px 18px;
  border-radius: 14px;
  box-shadow: 0 0 0 1px var(--bar);
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: box-shadow 0.2s var(--ease), background-color 0.2s var(--ease);
}
.docs-pager a:hover { background: var(--ground-hi); box-shadow: 0 0 0 1px var(--bar-strong); }
.docs-pager span {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.docs-pager-next { text-align: right; grid-column: -2; }
.docs-help { margin-top: 30px; font-size: 0.9rem; color: var(--text-soft); max-width: 68ch; }

.docs-toc { display: none; }
@media (min-width: 1320px) {
  .docs-toc {
    display: block;
    position: sticky;
    top: calc(var(--nav-h) + 26px);
  }
}
.docs-toc h2 {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 10px;
}
.docs-toc ol { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; }
.docs-toc a {
  display: block;
  padding: 0.3em 0;
  font-size: 0.86rem;
  line-height: 1.35;
  color: #2b3257;
  text-decoration: none;
}
.docs-toc a:hover { color: var(--signal-deep); }