/* Capabilities: the page's own rules (2026-10-02, refreshed 2026-10-12). Loaded after editorial.css, only by
   capabilities/index.html. The site kit (type, buttons, greens, cards, tiles) is in site.css; the AI Command
   Center is in command-center.css; this file holds what is specific to this page: the compact opening and
   the four-parts rail, the "How we work" card, the engagement illustrations, the Custom agents link.
   Section 0 holds the medallion, lane and arc rules, plus a mask for top-right arcs. Governance dropped its
   medallions and lanes on 2026-10-16 (assets/governance-uplift.css is gone); assets/governance.css carries
   its own .band-lanes / .bend-lanes arcs, so keep those values in step. Colours come from the kit's tokens; the literals left
   are illustration values (#fdfdfb, #c3d3c6, #bcd2c2, #d3ddce, the wave's #a3c0a9) and rgba() shadows. #000
   appears only inside mask gradients. Every svg here is aria-hidden decoration. */

.capabilities-jumps { display: flex; justify-content: center; }

/* ---------- 0. Medallion, lanes, arcs (the arcs as on Governance) ---------- */
.stage-medallion {
  --size: 72px;
  --icon: 31px;
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fdfdfb;
  color: var(--forest);
  box-shadow: inset 0 0 0 5px #fdfdfb, inset 0 0 0 6px rgb(217 221 211 / 60%),
    0 1px 2px rgba(30, 65, 40, .06), 0 12px 24px -12px rgba(30, 65, 40, .32);
}
.stage-medallion svg { width: var(--icon); height: var(--icon); }
.stage-medallion.is-small { --size: 56px; --icon: 25px; }

.band-lanes { position: relative; overflow: hidden; isolation: isolate; }
.bend-lanes {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: min(68vw, 980px);
  height: 760px;
}
.bend-lanes.at-bottom-right { right: 0; bottom: 0; -webkit-mask-image: radial-gradient(circle at 100% 100%, #000 0, #000 32%, transparent 60%); mask-image: radial-gradient(circle at 100% 100%, #000 0, #000 32%, transparent 60%); }
.bend-lanes.at-top-right { right: 0; top: 0; -webkit-mask-image: radial-gradient(circle at 100% 0, #000 0, #000 30%, transparent 58%); mask-image: radial-gradient(circle at 100% 0, #000 0, #000 30%, transparent 58%); }
.bend-lanes.at-bottom-center { left: 50%; bottom: 0; width: 980px; transform: translateX(-50%); -webkit-mask-image: linear-gradient(0deg, #000 0, #000 18%, transparent 52%); mask-image: linear-gradient(0deg, #000 0, #000 18%, transparent 52%); }

/* ---------- 1. Hero: centred headline and introduction, as on the Firm page ---------- */
.capabilities-hero-band {
  background: radial-gradient(52% 64% at 86% 26%, rgba(238, 240, 232, .9), rgba(238, 240, 232, 0) 72%), var(--ivory);
}
.capabilities-opening .editorial-hero-grid { grid-template-columns: 1fr; gap: 24px; text-align: center; }
.capabilities-opening h1 { text-wrap: balance; }
.capabilities-opening .editorial-intro { max-width: 760px; justify-self: center; }
.capabilities-opening .editorial-intro p { font-size: 17px; line-height: 1.7; }
.capabilities-opening .editorial-intro .text-link { margin-top: 16px; }
@media (min-width: 851px) {
  /* Keep the four-parts rail close to the opening. */
  .editorial-page .capabilities-opening { padding-top: 44px; padding-bottom: 40px; }
  .editorial-page .capabilities-opening h1 { font-size: clamp(46px, 4.7vw, 68px); }
}
@media (max-width: 600px) {
  .capabilities-opening .editorial-hero-grid { gap: 18px; }
  .capabilities-opening .editorial-intro p { font-size: 16px; }
}

/* ---------- 2. One partnership, four parts ----------
   From 851px a rail under the hero: tile, title, a short run of lanes towards the next tile, the home page's
   sentence beneath. From 601 to 850px the same tile beside the title, two by two, without lanes. At 600px
   and below the parts run down a spine with a 44px tile. The tile is the kit's (site.css --tile). The lane
   SVG in the markup (.pillar-lanes) is no longer drawn: the rail draws its own segments. */
.pillar-lanes { display: none; }
.pillar-path { --gap: 36px; position: relative; }
.service-overview.has-medallions { gap: var(--gap); margin-top: 0; padding-top: 0; border-top: 0; }
.service-overview.has-medallions article { min-width: 0; }
.service-overview.has-medallions .stage-medallion { border-color: var(--tile-line); border-radius: 14px; background: var(--tile); box-shadow: none; transition: border-color .2s; }
/* Pointing at or tabbing into a part outlines its tile in pine. The parts are not links: no pointer cursor. */
.service-overview.has-medallions article:hover .stage-medallion,
.service-overview.has-medallions article:focus-within .stage-medallion { border-color: var(--pine); }
/* Build's and Control's links sit on one line across the row, as the home pillars' do (2026-10-08). */
.service-overview.has-medallions article > div { display: flex; flex: 1; flex-direction: column; align-items: flex-start; }
.service-overview.has-medallions article > div > p { flex: 1; }
@media (min-width: 601px) {
  .service-overview.has-medallions article { display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: 52px 1fr; gap: 12px 14px; }
  .service-overview.has-medallions .stage-medallion { --size: 52px; --icon: 28px; align-self: center; margin: 0; }
  .service-overview.has-medallions h2 { align-self: center; margin: 0; border-top: 0; padding-top: 0; font-size: 21px; line-height: 26px; }
  .service-overview.has-medallions article > p,
  .service-overview.has-medallions article > div { grid-column: 1 / -1; }
  .service-overview.has-medallions .text-link { margin-top: 10px; }
}
@media (min-width: 851px) {
  .partnership-band { border-top: 1px solid #d3ddce; }
  .editorial-page .partnership-section { padding-top: 26px; padding-bottom: 30px; }
  .partnership-section > .eyebrow { margin-bottom: 18px; }
  .service-overview.has-medallions article { position: relative; }
  /* One element per segment: a short run of the old lanes (a soft centre strand and four faint ones), one
     gentle S, the same in every column, fading out at both ends so it never meets a title or a tile. The
     last part has none. left = 52 tile + 14 gap + about 66 for the widest title ("Control") + 14. The 36px
     box is centred on the tile centre (26px): top = 26 - 18. ::after is the phone spine (600px and below). */
  .service-overview.has-medallions article:not(:last-child)::before {
    content: ""; position: absolute; z-index: -1; top: 8px; left: 146px; right: calc(var(--gap) * -1 + 8px); height: 36px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 36' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M0 8C33 -1 67 -1 100 8S167 17 200 8' stroke='%23275d43' stroke-opacity='.07' stroke-width='1' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 13C33 4 67 4 100 13S167 22 200 13' stroke='%23275d43' stroke-opacity='.14' stroke-width='1' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 23C33 14 67 14 100 23S167 32 200 23' stroke='%23275d43' stroke-opacity='.14' stroke-width='1' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 28C33 19 67 19 100 28S167 37 200 28' stroke='%23275d43' stroke-opacity='.07' stroke-width='1' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 18C33 9 67 9 100 18S167 27 200 18' stroke='%23a3c0a9' stroke-opacity='1' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20%, #000 80%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 20%, #000 80%, transparent 100%);
  }
  .service-overview.has-medallions p { font-size: 15px; line-height: 1.55; }
}
@media (min-width: 851px) and (max-width: 1023px) {
  /* Narrow columns: a tighter gap keeps "See the product demos" on one line, and the wave stays a ripple. */
  .pillar-path { --gap: 26px; }
  .service-overview.has-medallions .text-link { gap: 8px; white-space: nowrap; }
  .service-overview.has-medallions article:not(:last-child)::before { top: 15px; height: 22px; }
}
@media (min-width: 601px) and (max-width: 850px) {
  .editorial-page .partnership-section { padding-top: 40px; padding-bottom: 44px; }
  .partnership-section > .eyebrow { margin-bottom: 24px; }
  .service-overview.has-medallions { gap: 30px 40px; }
}

/* ---------- 3. Foundational AI Enablement: since 2026-10-12 the AI Command Center, in command-center.css ---------- */

/* ---------- 4. Advanced & Customized Workflows (the library): icons on the function tabs ---------- */
.library-nav.has-icons a { gap: 9px; }
.library-nav.has-icons a svg { width: 18px; height: 18px; }

/* ---------- 5. Not another SaaS tool: "How we work" is the kit's card, with a pine edge ----------
   Its 1px border comes out of the top padding (25px), so its eyebrow lines up with the left column's. */
#not-a-platform .contrast-pair > div:last-child { position: relative; overflow: hidden; margin-top: -26px; padding: 25px 34px 32px 40px; border: 1px solid var(--card-line); border-radius: 16px; background: var(--card); box-shadow: var(--card-shadow); }
#not-a-platform .contrast-pair > div:last-child::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--pine); }

/* ---------- 6. Closing CTA ---------- */
.closing-cta.band-lanes > div { position: relative; }

/* ---------- 7. How a build engagement runs ---------- */
/* The illustrations take the kit's card ground and depth, and their hub is the command center's hub. */
.engage-art .art-card, .art-tile, .art-logged { border-color: var(--card-line); background: var(--card); box-shadow: inset 0 1px 0 #fff, 0 .15em .4em rgba(18, 43, 34, .06), 0 1.2em 1.9em -1.1em rgba(18, 43, 34, .34); }
.art-hub { border-radius: .95em; background: linear-gradient(165deg, var(--pine-lift) 0%, var(--pine) 46%, var(--pine-deep) 100%); color: var(--signal); box-shadow: 0 0 0 .26em rgba(196, 218, 190, .7), 0 .7em 1.1em -.5em rgba(18, 43, 34, .6); }
.art-btn.is-primary { border-color: var(--pine); background: var(--pine); }
.engage-arrow { border-color: var(--card-line); background: var(--card); color: var(--pine); box-shadow: 0 .5em .9em -.5em rgba(18, 43, 34, .4); }
/* A Pause control sits beside the engagement illustrations (Brenden, 2026-10-08; it was under the hero link),
   and since 2026-10-12 a second one in the AI Command Center's legend. Set in the band's colours; site.js
   wires both to the one page state. */
#engagement .section-heading > .motion-toggle { flex: none; margin: 0 -8px 0 0; color: var(--muted); font-size: 13px; }
#engagement .pause-icon { width: 24px; height: 24px; border-color: var(--line); color: var(--forest); }
#engagement .motion-toggle:hover:not(:disabled) { color: var(--ink); }

/* ---------- 8. The AI Command Center, as placed on this page ---------- */
/* Custom agents is the one panel with somewhere to go: the demos below. The whole card is the target, and
   its focus ring is drawn inside it (the card clips what is outside). */
.cc-panel-link { display: inline-flex; align-items: center; gap: 7px; color: inherit; text-decoration: none; }
.cc-panel-link::after { content: ""; position: absolute; inset: 0; }
.cc-panel .cc-panel-arrow { width: 16px; height: 16px; color: var(--pine); transition: transform .2s; }
.cc-panel:has(.cc-panel-link) { transition: border-color .2s; }
.cc-panel-link:focus-visible { outline: none; }
.cc-panel-link:focus-visible::after { border-radius: 15px; outline: 3px solid var(--forest); outline-offset: -6px; }
@media (hover: hover) {
  .cc-panel:has(.cc-panel-link):hover { border-color: var(--pine); }
  .cc-panel:has(.cc-panel-link):hover .cc-panel-arrow { transform: translateY(2px); }
}
/* The legend's Pause control row is set in command-center.css, where the control's own rule lives. */

/* ---------- 9. Responsive ---------- */
@media (max-width: 850px) {
  #not-a-platform .contrast-pair > div:last-child { margin-top: 0; padding-top: 26px; }
  #engagement .section-heading > .motion-toggle { margin: 14px 0 0 -8px; }
}
@media (max-width: 600px) {
  /* One column: the parts on a spine, as on the Governance phone path. */
  .editorial-page .partnership-section { padding-top: 48px; padding-bottom: 52px; }
  .partnership-section > .eyebrow { margin-bottom: 30px; }
  .service-overview.has-medallions { grid-template-columns: 1fr; gap: 0; }
  .service-overview.has-medallions article { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; position: relative; padding-bottom: 26px; }
  .service-overview.has-medallions article:last-child { padding-bottom: 0; }
  .service-overview.has-medallions .stage-medallion { --size: 44px; --icon: 21px; grid-row: 1 / span 3; align-self: start; margin: 0; border-radius: 12px; }
  .service-overview.has-medallions article > :not(.stage-medallion) { grid-column: 2; }
  .service-overview.has-medallions h2 { border-top: 0; padding-top: 8px; }
  .service-overview.has-medallions article:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 21.5px;
    top: 22px;
    bottom: 0;
    width: 1px;
    background: #c3d3c6;
  }
  #not-a-platform .contrast-pair > div:last-child { padding: 24px 20px 26px 26px; }
  .bend-lanes.at-bottom-center { -webkit-mask-image: linear-gradient(0deg, #000 0, transparent 30%); mask-image: linear-gradient(0deg, #000 0, transparent 30%); }
  /* The engagement heading wraps itself (its <br/> has a space before it in the HTML), and the closing
     button is full width like the command center's. */
  #engagement h2 br { display: none; }
  #engagement h2 { text-wrap: balance; }
  .closing-cta .button { width: 100%; }
}
@media print {
  .bend-lanes { display: none; }
  #engagement .motion-toggle { display: none; }
}