/* Docket Entry law-firm site: the capabilities index, the four capability pages and their five-item header.
   Linked on the five capability pages only, after site.css. Every rule sits under the pages' own body class, .cap-page.
   Site tokens only. */

/* ============ 1. header: Capabilities and Security in the menu ============
   The menu button takes over at 1080 wide. The button "Try it" is then in the open menu, drawn as the real button. */
.cap-page .nav{gap:24px}
@media (min-width:1200px){.cap-page .nav{gap:36px}}
@media (max-width:1080px){.cap-page .nav,.cap-page .head-right .btn{display:none}.cap-page .menu-btn{display:inline-flex}}
@media (min-width:1081px){.cap-page .mobile-nav,.cap-page .mobile-nav.open{display:none}}
.cap-page .mobile-nav a[aria-current="page"]{background:var(--sage);box-shadow:inset 3px 0 0 var(--navy-900)}
.cap-page .mobile-nav .nav-cta{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;margin:16px var(--gutter);padding:14px 24px;border:0;border-radius:10px;
  background:var(--action);color:var(--on-action);font-weight:700;line-height:1}
.cap-page .mobile-nav .nav-cta:hover{background:var(--action-hover);color:var(--on-action)}
.cap-page .mobile-nav .nav-cta:focus-visible{outline:3px solid var(--ring);outline-offset:3px;border-radius:10px}

/* ============ 2. the capabilities index ============ */
.cap-page .cap-hero .wrap{padding-block:32px 8px}
.cap-page .cap-hero .stack{max-width:48rem}
.cap-page .cap-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cap-page .cap-card{display:flex;flex-direction:column;gap:14px;padding:24px;background:var(--white);border:1px solid var(--border);border-radius:16px}
.cap-page .cap-card .h3{margin:0}
.cap-page .cap-card .body{margin:0;max-width:none}
.cap-page .cap-card .card-link{margin-top:auto;align-self:flex-start}
@media (max-width:860px){.cap-page .cap-grid{grid-template-columns:minmax(0,1fr)}}
.cap-page .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============ 3. the capability page ============ */
/* each panel is as tall as its own list; the two and the arrow between them share one centre line */
.cap-page .cap-io{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);align-items:center}
.cap-page .cap-in,.cap-page .cap-out{display:flex;flex-direction:column;gap:14px;padding:24px;border-radius:16px}
.cap-page .cap-in{background:var(--white);border:1px solid var(--border)}
.cap-page .cap-out{background:var(--navy-900);border:1px solid var(--navy-900);color:var(--on-navy)}
.cap-page .cap-io h2{margin:0;font-family:var(--sans);font-size:var(--f-body);font-weight:var(--w-em);line-height:1.3}
.cap-page .cap-in h2{color:var(--text)}
.cap-page .cap-out h2{color:#fff}
.cap-page .cap-ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.cap-page .cap-ticks li{display:flex;gap:12px;align-items:baseline;font-size:var(--t-ui);line-height:1.45;color:var(--text-2)}
.cap-page .cap-ticks li::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--olive-700);transform:translateY(-1px)}
.cap-page .cap-out .cap-ticks li{color:var(--on-navy-strong)}
.cap-page .cap-out .cap-ticks li::before{background:var(--lime)}
.cap-page .cap-ticks li,.cap-page .lead,.cap-page .body{text-wrap:pretty}
.cap-page .cap-go{display:grid;place-items:center;color:var(--lime)}
.cap-page .cap-go span{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--navy-900)}
.cap-page .cap-go svg{width:20px;height:20px}
@media (max-width:860px){.cap-page .cap-io{grid-template-columns:minmax(0,1fr)}.cap-page .cap-go{height:56px}.cap-page .cap-go svg{transform:rotate(90deg)}}
/* the text link under the two panels */
.cap-page .cap-more{display:flex;flex-wrap:wrap;gap:8px 28px;margin:16px 0 0}
/* The four lines at the top of the index: one to a row, each under a hairline, at the lead's size. */
.cap-page .cap-routes{list-style:none;margin:8px 0;padding:0;border-top:1px solid var(--border)}
.cap-page .cap-routes li{padding:14px 0;border-bottom:1px solid var(--border);font-size:var(--f-lead);line-height:1.35;color:var(--text)}