/* Business systems page (/systems/, 13 Oct 2026). Builds on si30.css; never edit that file for this page.
   The readers are business owners around 50: slightly larger body type, generous line height, plain layout. */

.sys { font-size: 18px; line-height: 1.65; }

.sys-kicker {
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-variation-settings: "wdth" 100, "wght" 600;
  color: var(--amber);
}

.sys-sub { max-width: 52ch; }
.sys-cta { margin-top: 32px; }
.sys-price { margin-top: 18px; color: var(--muted); font-size: 16px; }
.sys-hw { margin-top: 8px; color: var(--muted); font-size: 15px; }   /* home page since 14 Oct: the way to hardware */
.sys-hw .link { color: var(--paper); }
.sys-lede { margin-top: 20px; }
.sys-after { margin-top: 36px; }

/* ── hero illustration (fictional data) ─────────────────────────────── */

.sys-hero__mock {
  grid-column: 8 / span 5;
  align-self: center;
  margin: 0;
}

.sys-hero__mock .orb-caption { margin-top: 16px; }

.sysmock {
  background: var(--graphite-2);
  border: 1px solid rgba(244, 246, 247, 0.14);
  border-top: 2px solid var(--amber);
  padding: 24px;
}

.sysmock__title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.sysmock__title + .sysmock__stats,
.sysmock__title + .sysmock__list { margin-top: 12px; }
.sysmock__stats + .sysmock__title { margin-top: 24px; }

.sysmock__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: rgba(244, 246, 247, 0.14);
  border: 1px solid rgba(244, 246, 247, 0.14);
}

.sysmock__stats p {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  background: var(--graphite-2);
}

.sysmock__v { font-size: 32px; line-height: 1; color: var(--paper); }
.sysmock__k { font-size: 14px; color: var(--muted); }

.sysmock__list { list-style: none; margin: 0; padding: 0; }

.sysmock__list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(244, 246, 247, 0.14);
  font-size: 15px;
}

.sysmock__list li span:first-child { font-weight: 600; }
.sysmock__list li span:last-child { color: var(--muted); text-align: right; }

/* ── sound familiar ─────────────────────────────────────────────────── */

.sys-pains {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gutter);
  border-top: 1px solid var(--hair);
}

.sys-pains li {
  position: relative;
  padding: 20px 0 20px 28px;
  border-bottom: 1px solid var(--hair);
  font-size: 19px;
  line-height: 1.5;
}

.sys-pains li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 31px;
  width: 12px;
  height: 2px;
  background: var(--ink);
}

/* ── what we build ──────────────────────────────────────────────────── */

.sys-feats {
  margin: 48px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gutter);
  border-top: 1px solid var(--hair);
}

.sys-feats div {
  padding: 24px 0;
  border-bottom: 1px solid var(--hair);
}

.sys-feats dt {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-variation-settings: "wdth" 95, "wght" 700;
}

.sys-feats dd { margin: 8px 0 0; color: var(--muted); max-width: 52ch; }

/* ── industries ─────────────────────────────────────────────────────── */

.sys-inds {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
}

.sys-ind {
  padding-top: 20px;
  border-top: 2px solid var(--ink);
}

.sys-ind p { margin-top: 12px; color: var(--muted); }

/* ── proof ──────────────────────────────────────────────────────────── */

.sys-built { align-items: center; }
.sys-built__copy { grid-column: 1 / span 5; }
.sys-built__copy .lede { margin-top: 20px; }
.sys-built__p { margin-top: 16px; color: var(--muted); }
.sys-built__p .link { color: var(--paper); }

.sys-built__shot { grid-column: 7 / span 6; margin: 0; }

.sys-built__shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(244, 246, 247, 0.14);
}

/* ── how it works: si30.css styles .step h2; this page's steps use h3 ── */

.sys .step h3 {
  font-size: clamp(19px, 1.7vw, 22px);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.015em;
  font-variation-settings: "wdth" 95, "wght" 700;
}

/* ── who you deal with ──────────────────────────────────────────────── */

.sys-cols h3 + p { margin-top: 10px; color: var(--muted); }

/* ── focus on the light band: si30.css's amber-deep outline is 2.75:1 there; ink clears 3:1 ── */

.sys .band--alloy .field input:focus,
.sys .band--alloy .field textarea:focus { outline-color: var(--ink); }

/* ── responsive ─────────────────────────────────────────────────────── */

@media (max-width: 960px) {
  .sys-hero__mock { grid-column: 1 / -1; max-width: 520px; }
  .sys-inds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sys-built__copy,
  .sys-built__shot { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .sys { font-size: 17px; }
  .sys-pains,
  .sys-feats,
  .sys-inds { grid-template-columns: 1fr; }
  .sys-pains li { font-size: 18px; }
  .sys-pains li::before { top: 30px; }
}

@media (max-width: 480px) {
  .sysmock { padding: 18px; }
  .sysmock__v { font-size: 26px; }
  .sysmock__list li { flex-direction: column; gap: 2px; }
  .sysmock__list li span:last-child { text-align: left; }
}

/* ══ 14 Oct 2026: dashboards, automation, integrations, FAQ ══════════════════════════════════
   The dashboards are HTML/CSS illustrations with fictional data (like the hero mock).
   Chart marks: --c1 #C98500 + --c2 #3987E5, validated on #1C2228 with the dataviz validator
   (lightness band, chroma, CVD ΔE 27, normal-vision ΔE 31, contrast: all pass). The brand amber
   #FFB03B is too light for a data mark there, so it stays on the chrome. Status colours are the
   dataviz status set and always sit with an icon and a label. */

/* status set: page-wide, the automation run logs use it too */
.sys {
  --good: #0CA30C;
  --warn: #FAB219;
  --bad: #D03B3B;
}

.dash {
  --c1: #C98500;
  --c2: #3987E5;
  --c1-track: rgba(201, 133, 0, 0.24);
  --grid: rgba(244, 246, 247, 0.10);
  --muted: rgba(244, 246, 247, 0.70);
  --hair: rgba(244, 246, 247, 0.14);

  margin: 40px 0 0;
  background: var(--graphite);
  color: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 0 40px 80px -40px rgba(14, 18, 21, 0.55);
  font-size: 14px;
  line-height: 1.5;
}

.dash-tabs:not([hidden]) + .dash { margin-top: 16px; }

/* ── tabs (on the alloy band; systems.js un-hides them) ── */

.dash-tabs { margin-top: 40px; display: flex; flex-wrap: wrap; }
.dash-tabs[hidden] { display: none; }

.dash-tabs button {
  margin: 0 -1px -1px 0;
  padding: 12px 20px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  font-variation-settings: "wdth" 95, "wght" 600;
  line-height: 1.2;
  cursor: pointer;
}

.dash-tabs button:hover { background: rgba(14, 18, 21, 0.06); }
.dash-tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); }

/* ── frame ── */

.dash__bar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--hair);
  font-size: 13px;
}

.dash__brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }
.dash__logo { width: 14px; height: 14px; background: var(--amber); }

.dash__search {
  flex: 1;
  max-width: 360px;
  padding: 6px 12px;
  background: var(--graphite-2);
  border: 1px solid var(--hair);
  color: var(--muted);
}

.dash__live { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }

.dash__pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--good);
  animation: dash-pulse 2.4s ease-in-out infinite;
}

@keyframes dash-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(12, 163, 12, 0.5); }
  50% { box-shadow: 0 0 0 5px rgba(12, 163, 12, 0); }
}

.dash__panel { padding: 20px; }
.dash__panel[hidden] { display: none; }
.dash__panel + .dash__panel { border-top: 1px solid var(--hair); }

.dash__h { margin-bottom: 16px; font-size: 18px; font-weight: 700; }

/* with tabs, the tab names the panel; keep the heading for screen readers only */
.dash.is-tabbed .dash__h {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.dash.is-tabbed .dash__panel + .dash__panel { border-top: 0; }

.dash__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

.dcard {
  grid-column: span 6;
  min-width: 0;
  padding: 18px 20px;
  background: var(--graphite-2);
  border: 1px solid var(--hair);
}

.dcard--wide { grid-column: span 12; }
#dp-owner .dcard--hero { grid-column: span 5; }
#dp-owner .dcard--wide { grid-column: span 7; }

.dk { font-size: 13px; font-weight: 600; color: var(--muted); }

.dhero {
  margin-top: 6px;
  font-size: clamp(40px, 4.4vw, 56px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variation-settings: "wdth" 85, "wght" 700;
}

.ddelta { margin-top: 10px; font-size: 14px; font-weight: 600; }
.ddelta--up { color: var(--good); }

.dtiles {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
}

.dcard--wide > .dtiles:first-child { margin-top: 0; }
.dtiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.dtiles p {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  background: var(--graphite-2);
}

.dv {
  font-size: 26px;
  line-height: 1.1;
  font-weight: 700;
  font-variation-settings: "wdth" 85, "wght" 700;
}

.dsub { font-size: 12px; color: var(--muted); }

/* ── column chart: plot 160px + a 24px x-axis band, sized together so nothing clips ── */

.cols, .line { position: relative; height: 184px; margin-top: 28px; }

.cols__grid, .line__grid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 160px;
}

.cols__grid span, .line__grid span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--y);
  height: 0;
  display: flex;
  align-items: center;
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.cols__grid span::after, .line__grid span::after {
  content: "";
  position: absolute;
  left: 44px;
  right: 0;
  top: 0;
  border-top: 1px solid var(--grid);
}

.cols__plot {
  position: absolute;
  top: 0;
  left: 44px;
  right: 0;
  height: 160px;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
}

.col {
  position: relative;
  width: min(24px, 5.5%);
  height: var(--v);
  background: var(--c1);
  border-radius: 4px 4px 0 0;
}

.col::before { content: ""; position: absolute; left: -6px; right: -6px; bottom: 0; height: 160px; }   /* hit target */
.col:hover { filter: brightness(1.2); }

.col b {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.cols__x {
  position: absolute;
  top: 166px;
  left: 44px;
  right: 0;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
}

/* ── line chart: SVG strokes stretch to the box; dots and labels are HTML so they never distort ── */

.line { margin-top: 12px; }

.line__plot { position: absolute; top: 0; left: 44px; right: 56px; height: 160px; }
.line .cols__x { right: 56px; }

.line__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.line__s {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.line__s--1 { stroke: var(--c1); }
.line__s--2 { stroke: var(--c2); }

.line__dot {
  position: absolute;
  left: 100%;
  top: var(--y);
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--graphite-2);   /* surface ring */
}

.line__dot--1 { background: var(--c1); }
.line__dot--2 { background: var(--c2); }

.line__end {
  position: absolute;
  left: calc(100% + 12px);
  top: var(--y);
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

/* 12 hit columns centred on the 12 points (points sit at i/11 of the width) */
.line__hits { position: absolute; top: 0; bottom: 0; left: -4.545%; right: -4.545%; display: flex; }
.line__hits span { position: relative; flex: 1; }
.line__hits span:hover::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  border-left: 1px solid rgba(244, 246, 247, 0.4);
}

.dlegend { margin-top: 10px; display: flex; gap: 18px; font-size: 13px; color: var(--muted); }
.dlegend li { display: inline-flex; align-items: center; gap: 8px; }
.sw { width: 16px; height: 3px; }
.sw--1 { background: var(--c1); }
.sw--2 { background: var(--c2); }

/* ── horizontal bars: the bar uses 75% of the track at most, the rest is room for its label ── */

.hbars { margin-top: 14px; }

.hbars li {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 7px 0;
}

.hbars__k { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }

.hbars__t { position: relative; display: flex; align-items: center; gap: 8px; height: 22px; }

.hbars__b {
  position: relative;
  z-index: 1;
  flex: 0 0 calc(var(--v) * 0.75);
  height: 12px;
  background: var(--c1);
  border-radius: 0 4px 4px 0;
}

.hbars__t b {   /* sits above the target line, on a patch of card surface, so the line never runs through it */
  position: relative;
  z-index: 3;
  padding: 0 4px;
  margin-left: -4px;
  background: var(--graphite-2);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.hbars li:hover .hbars__b { filter: brightness(1.2); }

.hbars[style*="--target"] .hbars__t::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: calc(var(--target) * 0.75);
  top: 3px;
  bottom: 3px;
  border-left: 1px solid rgba(244, 246, 247, 0.6);
}

.hbars--meter .hbars__t b { position: absolute; left: calc(75% + 8px); margin: 0; padding: 0; background: none; }   /* label past the track end */

.hbars--meter .hbars__t::after {   /* meter track: a lighter step of the fill's own hue */
  content: "";
  position: absolute;
  left: 0;
  width: 75%;
  height: 12px;
  background: var(--c1-track);
}

.dnote { margin-top: 10px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.dnote__rule { width: 0; height: 14px; border-left: 1px solid rgba(244, 246, 247, 0.6); }

/* ── lists ── */

.drank { margin-top: 10px; }
.drank li, .dinv li { padding: 9px 0; border-bottom: 1px solid var(--hair); }
.drank li:last-child, .dinv li:last-child { border-bottom: 0; }
.drank li { display: flex; justify-content: space-between; gap: 16px; }
.drank b, .dinv b { font-variant-numeric: tabular-nums; }

.dinv { margin-top: 8px; }
.dinv li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; }
.dinv .st { grid-column: 1 / -1; }
.dinv__n { font-weight: 600; }

/* ── status: always an icon AND words, the colour is never alone ── */

.st {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(244, 246, 247, 0.85);
}

.st::before {
  flex: none;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.st--good::before { content: "\2713"; background: var(--good); color: #fff; }
.st--warn::before { content: "!"; background: var(--warn); color: var(--ink); }
.st--bad::before  { content: "!"; background: var(--bad); color: #fff; }

.src {
  display: inline-block;
  padding: 2px 7px;
  border: 1px solid var(--hair);
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}

/* ── jobs board ── */

.dash__strip { color: var(--muted); font-size: 14px; }
.dash__strip b { color: var(--paper); }

.kanban {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.kcol { min-width: 0; padding: 12px; background: var(--graphite-2); border: 1px solid var(--hair); }

.kcol__h { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; }
.kcol__h span { color: var(--muted); font-variant-numeric: tabular-nums; }

.ticket {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--graphite);
  border: 1px solid var(--hair);
}

.kcol:first-child .ticket { border-top: 2px solid var(--amber); }   /* made automatically today */

.ticket__id { font-size: 12px; font-weight: 600; color: var(--muted); }
.ticket__t { margin-top: 4px; font-size: 14px; line-height: 1.4; }
.ticket__m { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }

.tprog { margin-top: 8px; height: 6px; background: var(--c1-track); }
.tprog span { display: block; width: var(--v); height: 100%; background: var(--c1); }

.dash__cap {
  padding: 12px 20px;
  border-top: 1px solid var(--hair);
  font-size: 13px;
  color: var(--muted);
}

/* the shared hover tooltip (systems.js); every value it shows is also on the chart or in a label */
.dtip {
  position: fixed;
  z-index: 50;
  padding: 6px 10px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid rgba(244, 246, 247, 0.22);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 10px));
}

.dtip[hidden] { display: none; }

/* the figures behind each chart, for keyboard, screen-reader and no-hover readers */
.dfig { margin-top: 14px; font-size: 13px; }
.dfig summary { cursor: pointer; color: var(--muted); font-weight: 600; }
.dfig summary:hover { color: var(--paper); }
.dfig table { margin-top: 10px; width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.dfig th, .dfig td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--hair); text-align: left; font-weight: 400; }
.dfig thead th { color: var(--muted); font-weight: 600; }
.dfig td { text-align: right; }

.dash__panel:focus-visible { outline-offset: -4px; }

/* ── automation ── */

.flows {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
}

.flow {
  min-width: 0;
  padding: 24px;
  background: var(--graphite-2);
  border: 1px solid var(--hair);
  border-top: 2px solid var(--amber);
}

.flow__kind {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--amber);
}

.flow .h3 { margin-top: 8px; }

.flows__cap { margin-top: 16px; }
.flows__note { margin-top: 24px; }
.flows__cap + .flows { margin-top: 36px; }

.runlog { margin-top: 22px; }

.runlog li { position: relative; padding: 0 0 18px 24px; }
.runlog li:last-child { padding-bottom: 0; }

.runlog li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--amber);
}

.runlog li::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 19px;
  bottom: 2px;
  border-left: 1px solid var(--hair);
}

.runlog li:last-child::after { display: none; }

.runlog time {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.runlog p { margin-top: 2px; font-size: 16px; line-height: 1.5; }
.runlog .st { margin-top: 8px; font-size: 13px; }

/* systems.js adds will-run (hidden) then is-run (shown, one step at a time) when the log scrolls in */
.runlog.will-run li { opacity: 0; transform: translateY(6px); }
.runlog.is-run li {
  opacity: 1;
  transform: none;
  transition: opacity 400ms ease, transform 400ms ease;
  transition-delay: calc(var(--i, 0) * 450ms);
}

.triggers { margin-top: 22px; border-top: 1px solid var(--hair); }

.triggers li {
  display: grid;
  gap: 2px;
  padding: 11px 0;
  border-bottom: 1px solid var(--hair);
}

.triggers span:first-child { font-size: 16px; font-weight: 600; }
.triggers span:last-child { color: var(--muted); font-size: 15px; }
.triggers span:last-child::before { content: "\2192\00a0"; color: var(--amber); }

.ai-fit { margin-top: 72px; }

.ai-fit__list {
  margin: 24px 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
}

.ai-fit__list div { padding-top: 16px; border-top: 2px solid var(--paper); }
.ai-fit__list dt { font-size: 19px; font-weight: 700; line-height: 1.3; }
.ai-fit__list dd { margin: 8px 0 0; color: var(--muted); }

.control {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
}

.control li { padding: 18px 20px; background: var(--graphite); color: var(--muted); font-size: 16px; }
.control b { display: block; margin-bottom: 4px; color: var(--paper); }

/* ── integrations ── */

.integ {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
}

.integ__g { padding: 20px; background: var(--alloy); }

.integ__g h3 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.integ__g ul { margin-top: 12px; }

.integ__g li {
  position: relative;
  padding: 5px 0 5px 18px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
}

.integ__g li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 8px;
  height: 8px;
  background: var(--ink);
}

.integ__notes { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 48px; }
.integ__notes h3 + p { margin-top: 10px; }
.integ__fine { margin-top: 32px; }

/* ── FAQ ── */

.faq { margin-top: 88px; }
.faq .h2 { margin-bottom: 24px; }
.faq details { border-bottom: 1px solid var(--hair); }
.faq details:first-of-type { border-top: 1px solid var(--hair); }

.faq summary {
  position: relative;
  padding: 20px 44px 20px 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 16px;
  font-size: 26px;
  font-weight: 400;
  color: var(--amber);
}

.faq details[open] summary::after { content: "\2212"; }
.faq details p { max-width: 62ch; padding-bottom: 22px; color: var(--muted); }

/* ── motion ── */

@media (prefers-reduced-motion: reduce) {
  .dash__pulse { animation: none; }
  .runlog.will-run li { opacity: 1; transform: none; }
  .runlog.is-run li { transition: none; }
}

/* ── responsive ── */

@media (max-width: 960px) {
  #dp-owner .dcard--hero,
  #dp-owner .dcard--wide,
  .dcard { grid-column: span 12; }
  .flows { grid-template-columns: 1fr; }
  .ai-fit__list,
  .control,
  .integ { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kanban { grid-template-columns: repeat(5, minmax(200px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .kcol { scroll-snap-align: start; }
}

@media (max-width: 720px) {
  .dash-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-tabs button { padding: 12px 14px; font-size: 15px; }
  .dash__search { display: none; }
  .dash__panel { padding: 14px; }
  .dcard { padding: 16px; }
  .dtiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hbars li { grid-template-columns: 1fr; gap: 4px; }
  .ai-fit__list,
  .control,
  .integ__notes { grid-template-columns: 1fr; }
  .kanban { grid-template-columns: repeat(5, minmax(78%, 1fr)); }
  .faq summary { font-size: 18px; }
}

@media (max-width: 480px) {
  .integ { grid-template-columns: 1fr; }
  .dash__bar { gap: 12px; padding: 10px 14px; }
  .flow { padding: 20px; }
}