/* Seneo — shared stylesheet. Extracted from index.html (P-010) so every page
   inherits one design system. Tokens live in :root; do not fork them per page. */
  /* Warm light palette. Brass stays the brand accent but runs deeper than it did
     on the dark theme: the same #d69a4b that read as bright on #0a0d11 only makes
     3.4:1 on an off-white page, which fails AA for the small mono labels it is
     used for everywhere. --brass-ink is the text-safe end (5.7:1), --brass-bright
     the top of the button/heading gradient (3.2:1, large text only). */
  :root{
    --bg:#fbfaf8; --bg2:#f6f4f0; --surface:#ffffff; --surface2:#faf8f5; --surface3:#f3f0ea;
    --line:#e7e2d9; --line2:#d5cec1;
    --text:#1c2229; --muted:#56616c; --faint:#67717d;
    --brass:#a86f22; --brass-ink:#8a5a12; --brass-bright:#bd8228; --brass-deep:#7e5210;
    --cool:#3f7c8c;
    --sans:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Arial Nova","Segoe UI",Arial,sans-serif;
    --mono:ui-monospace,"SF Mono",SFMono-Regular,"Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;
  }
  *,*::before,*::after{box-sizing:border-box}
  html{scroll-behavior:smooth; scroll-padding-top:76px}
  body{margin:0; background:var(--bg); color:var(--text); font-family:var(--sans);
    font-size:17px; line-height:1.6; letter-spacing:-.011em; font-variant-numeric:tabular-nums;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden}
  a{color:var(--brass-ink); text-decoration:none}
  h1,h2,h3,h4,p{margin:0}
  button,input{font:inherit; color:inherit}

  /* living background */
  #bgc{position:fixed; inset:0; width:100%; height:100%; z-index:-2; display:block}
  .glowlayer{position:fixed; inset:0; z-index:-1; pointer-events:none;
    background:
      radial-gradient(120% 70% at 15% -5%, color-mix(in srgb,var(--brass) 9%,transparent) 0%, transparent 52%),
      radial-gradient(90% 60% at 100% 8%, color-mix(in srgb,var(--cool) 7%,transparent) 0%, transparent 50%);}

  .wrap{width:min(1120px,calc(100% - 44px)); margin-inline:auto}
  .mono{font-family:var(--mono); text-transform:uppercase; letter-spacing:.14em}
  .kick{font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brass-ink); font-weight:600}
  h1{font-size:clamp(2.5rem,5.6vw,4.4rem); font-weight:770; letter-spacing:-.035em; line-height:1.03}
  h2{font-size:clamp(1.8rem,3.4vw,2.7rem); font-weight:740; letter-spacing:-.03em; line-height:1.1}
  h3{font-size:1.18rem; font-weight:680; letter-spacing:-.012em}
  .lede{font-size:clamp(1.04rem,1.4vw,1.2rem); line-height:1.62; color:var(--muted); max-width:64ch}
  .gt{background:linear-gradient(180deg,var(--brass-bright),var(--brass) 55%,var(--brass-deep));
    -webkit-background-clip:text; background-clip:text; color:transparent}
  :focus-visible{outline:2px solid var(--brass); outline-offset:3px; border-radius:4px}
  .skip{position:absolute; left:-999px; top:8px; background:var(--text); color:var(--bg); padding:10px 16px; z-index:60}
  .skip:focus{left:8px}

  /* nav */
  .nav{position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--bg) 86%,transparent); backdrop-filter:blur(14px); border-bottom:1px solid color-mix(in srgb,var(--line) 80%,transparent)}
  .nav-in{display:flex; align-items:center; justify-content:space-between; height:64px; gap:16px}
  .brand{display:flex; align-items:center; gap:11px; font-weight:740; font-size:1.14rem; letter-spacing:-.02em; color:var(--text)}
  .brand .glyph{width:26px; height:26px; flex:0 0 auto; display:grid; place-items:center; border:1px solid var(--line2); border-radius:8px; background:var(--surface)}
  .brand .glyph svg{width:16px; height:16px}
  .navlinks{display:flex; align-items:center; gap:22px}
  .navlinks a.l{font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
  .navlinks a.l:hover{color:var(--text)}
  .nav-cta{display:inline-flex; align-items:center; gap:7px; font-weight:640; font-size:.86rem; color:#160d02;
    background:linear-gradient(180deg,var(--brass-bright),var(--brass)); padding:9px 15px; border-radius:8px;
    box-shadow:0 8px 18px -10px rgba(126,82,16,.42)}
  .nav-cta:hover{filter:brightness(1.06)}

  /* buttons */
  .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:50px; padding:13px 22px; border-radius:10px;
    font-weight:650; font-size:.98rem; cursor:pointer; border:1px solid transparent; text-decoration:none;
    background:linear-gradient(180deg,var(--brass-bright),var(--brass)); color:#160d02;
    box-shadow:0 10px 22px -12px rgba(126,82,16,.4); transition:transform .15s ease, filter .15s ease}
  .btn:hover{transform:translateY(-1px); filter:brightness(1.07)}
  .btn.ghost{background:transparent; color:var(--text); border-color:var(--line2); box-shadow:none}
  .btn.ghost:hover{border-color:var(--brass)}
  .cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
  .metaline{font-family:var(--mono); font-size:.7rem; letter-spacing:.11em; text-transform:uppercase; color:var(--faint); margin-top:20px}

  section{padding:64px 0; position:relative}
  .seam{font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint);
    display:flex; align-items:center; gap:14px; margin-bottom:26px}
  .seam::before{content:attr(data-i); color:var(--brass-ink); font-weight:600}
  .seam::after{content:""; height:1px; background:var(--line); flex:1}
  .h2sub{color:var(--muted); margin-top:14px; max-width:64ch}

  /* hero */
  .hero{padding:76px 0 58px}
  .hero h1{margin-top:22px; max-width:20ch}
  .hero .sub{margin-top:24px; font-size:1.14rem; line-height:1.6; color:var(--muted); max-width:60ch}
  .hero .sub b{color:var(--text); font-weight:640}

  /* problem */
  .prob{display:grid; grid-template-columns:1fr 1fr; gap:14px 40px; margin-top:24px}
  .prob .row{display:grid; grid-template-columns:30px 1fr; gap:16px; padding:18px 0; border-top:1px solid var(--line)}
  .prob .row .n{font-family:var(--mono); font-size:.72rem; color:var(--brass-ink)}
  .prob .row p{color:var(--muted); font-size:.94rem}
  .prob .row b{color:var(--text); font-weight:640}

  /* process flow: knowledge -> engine -> run */
  .flow{display:flex; align-items:stretch; gap:0; margin-top:10px}
  .stage{flex:1; background:var(--surface);
    border:1px solid var(--line); border-radius:16px; padding:22px 20px;
    box-shadow:0 12px 28px -24px rgba(28,34,41,.3)}
  .stage.engine{border-color:color-mix(in srgb,var(--brass) 55%,transparent);
    box-shadow:0 0 0 1px color-mix(in srgb,var(--brass) 16%,transparent), 0 20px 40px -28px rgba(28,34,41,.22)}
  .stage .st{font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--brass-ink)}
  .stage h3{margin:10px 0 12px; font-size:1.08rem}
  .stage ul{list-style:none; margin:0; padding:0}
  .stage li{font-size:.85rem; color:var(--muted); padding:7px 0; border-top:1px solid color-mix(in srgb,var(--line) 80%,transparent)}
  .stage li:first-child{border-top:0}
  .stage .run{padding:10px 0; border-top:1px solid var(--line)}
  .stage .run:first-of-type{border-top:0}
  .stage .run b{color:var(--text); font-weight:640; font-size:.9rem}
  .stage .run span{display:block; font-family:var(--mono); font-size:.58rem; letter-spacing:.06em; text-transform:uppercase; color:var(--brass-ink); margin-top:3px}
  .conn{flex:0 0 46px; align-self:center; position:relative; height:2px; background:linear-gradient(90deg,transparent,var(--brass),transparent)}
  .conn i{position:absolute; top:50%; width:5px; height:5px; border-radius:50%; background:var(--brass-bright);
    transform:translate(-50%,-50%); box-shadow:0 0 8px var(--brass); animation:flowx 2.4s linear infinite}
  .conn i:nth-child(2){animation-delay:1.2s}
  @keyframes flowx{from{left:0}to{left:100%}}
  @keyframes flowy{from{top:0}to{top:100%}}
  .flow-note{margin-top:18px; color:var(--muted); font-size:.94rem; max-width:70ch}

  /* rings (illustrative universe) */
  .ringsviz{display:block; width:100%; max-width:380px; height:auto; margin:4px auto 2px}
  .ring-c{fill:none; stroke-width:1.1}
  .example{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center}
  .ex-steps{list-style:none; margin:0; padding:0; counter-reset:ex}
  .ex-steps li{position:relative; padding:11px 0 11px 40px; border-top:1px solid var(--line); color:var(--muted); font-size:.92rem}
  .ex-steps li:first-child{border-top:0}
  .ex-steps li::before{counter-increment:ex; content:counter(ex,decimal-leading-zero);
    position:absolute; left:0; top:11px; font-family:var(--mono); font-size:.68rem; color:var(--brass-ink)}
  .illus{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint);
    border:1px solid var(--line2); border-radius:999px; padding:5px 11px}
  .exvis{text-align:center}
  .exvis .cap{max-width:38ch; margin:6px auto 0; color:var(--faint); font-size:.82rem}

  /* service menu */
  .svc{display:grid; grid-template-columns:230px 1fr; gap:36px; padding:30px 0; border-top:1px solid var(--line); align-items:start}
  .svc:first-of-type{border-top:0}
  .svc .lead .num{font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; color:var(--brass-ink)}
  .svc .lead h3{font-size:1.42rem; margin:8px 0 14px; letter-spacing:-.02em}
  .svc .lead .tag{font-family:var(--mono); font-size:.6rem; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); margin-bottom:4px}
  .svc .lead .amt{font-size:1.32rem; font-weight:740; letter-spacing:-.02em; color:var(--text)}
  .svc .lead .amt small{font-size:.82rem; color:var(--muted); font-weight:600; letter-spacing:0}
  .svc .body .p{color:var(--muted); max-width:60ch}
  .svc .body h4{font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin:16px 0 8px}
  .svc .body ul{margin:0; padding-left:16px; color:var(--muted); font-size:.9rem; columns:2; column-gap:30px}
  .svc .body ul.one{columns:1}
  .svc .body li{margin-bottom:5px; break-inside:avoid}
  .svc .body .bound{margin-top:12px; font-size:.86rem; color:var(--brass-ink); border-left:2px solid color-mix(in srgb,var(--brass) 50%,transparent); padding-left:12px}

  /* own */
  .own{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line); margin-top:22px}
  .own .c{padding:24px 22px 6px 0}
  .own .c:not(:first-child){border-left:1px solid var(--line); padding-left:22px}
  .own .c .s{font-family:var(--mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--brass-ink); margin-bottom:12px; display:block}
  .own .c h4{font-size:1.02rem; margin-bottom:7px}
  .own .c p{color:var(--muted); font-size:.88rem}

  /* comparison */
  .cmp{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:22px}
  .cmp .card{background:var(--surface);
    border:1px solid var(--line); border-radius:16px; padding:26px 24px;
    box-shadow:0 12px 28px -24px rgba(28,34,41,.3)}
  .cmp .card.managed{border-color:color-mix(in srgb,var(--brass) 45%,transparent)}
  .cmp .card .t{font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--brass-ink)}
  .cmp .card h3{margin:8px 0 4px}
  .cmp .card .amt{font-family:var(--mono); font-size:.66rem; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); margin-bottom:14px}
  .cmp .r{display:grid; grid-template-columns:118px 1fr; gap:12px; padding:10px 0; border-top:1px solid var(--line); font-size:.9rem}
  .cmp .r .k{font-family:var(--mono); font-size:.64rem; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); padding-top:2px}
  .cmp .r .v{color:var(--text)}
  .cmp .r .v.m{color:var(--muted)}
  .cmp .bound{margin-top:14px; font-size:.84rem; color:var(--muted)}

  /* who */
  .who{display:grid; grid-template-columns:1fr 1fr; gap:44px; margin-top:22px}
  .who .k{font-family:var(--mono); font-size:.6rem; letter-spacing:.09em; text-transform:uppercase; color:var(--faint); margin-bottom:14px}
  .who .firms{display:flex; flex-wrap:wrap; gap:8px}
  .who .firms span{border:1px solid var(--line2); border-radius:8px; padding:9px 13px; font-size:.9rem; color:var(--text); background:var(--surface)}
  .who ul{margin:0; padding-left:16px; color:var(--muted); font-size:.94rem}
  .who li{margin-bottom:8px}

  /* faq */
  .faq{max-width:78ch; margin-top:14px}
  .faq details{border-top:1px solid var(--line)}
  .faq details:last-child{border-bottom:1px solid var(--line)}
  .faq summary{list-style:none; cursor:pointer; padding:20px 40px 20px 0; position:relative; font-weight:620; font-size:1.02rem}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+"; position:absolute; right:6px; top:18px; font-family:var(--mono); color:var(--brass-ink); font-size:1.2rem; transition:transform .2s}
  .faq details[open] summary::after{transform:rotate(45deg)}
  .faq .a{color:var(--muted); font-size:.95rem; padding:0 0 20px; max-width:70ch}

  /* contact */
  .contact{background:var(--surface);
    border:1px solid var(--line); border-radius:20px; padding:44px; text-align:center; position:relative; overflow:hidden;
    box-shadow:0 18px 44px -34px rgba(28,34,41,.34)}
  .contact::before{content:""; position:absolute; inset-inline:0; top:0; height:120px; pointer-events:none;
    background:radial-gradient(60% 100% at 50% 0%, color-mix(in srgb,var(--brass) 11%,transparent), transparent 70%)}
  .contact h2, .contact .lede{position:relative}
  .contact .lede{margin:14px auto 0; text-align:center}
  .email{display:inline-block; font-size:clamp(1.4rem,3vw,1.9rem); font-weight:760; letter-spacing:-.02em; margin:22px 0 4px; color:var(--text)}
  .email:hover{color:var(--brass-ink)}
  .contact .cta-row{justify-content:center}

  footer{padding:34px 0 52px; border-top:1px solid var(--line); margin-top:40px}
  .foot{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
    font-family:var(--mono); font-size:.68rem; letter-spacing:.07em; text-transform:uppercase; color:var(--faint)}
  .foot a{color:var(--faint)}
  .foot a:hover{color:var(--brass-ink)}

  /* Reveal-on-scroll is opt-IN: the hidden state applies only once JS has added
     .js-anim to <html>. If JS is disabled, blocked by CSP, or throws before the
     observer is wired, the class is never added and the content simply renders.
     Gating the other way round (hidden by default, shown by JS) blanks every
     section below the hero on any script failure. */
  .js-anim .reveal{opacity:0; transform:translateY(14px); transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1)}
  .js-anim .reveal.in{opacity:1; transform:none}
  /* Printing and full-page capture do not scroll, so the observer never fires and
     every unrevealed section would come out blank. Both must ignore the gate. */
  @media print{ .js-anim .reveal{opacity:1!important; transform:none!important} }

  @media (max-width:900px){
    .prob,.example,.who,.cmp{grid-template-columns:1fr; gap:26px}
    .flow{flex-direction:column}
    .conn{flex-basis:34px; width:2px; height:34px; align-self:center; background:linear-gradient(180deg,transparent,var(--brass),transparent)}
    .conn i{animation-name:flowy}
    .svc{grid-template-columns:1fr; gap:14px}
    .svc .body ul{columns:1}
    .own{grid-template-columns:1fr 1fr}
    .own .c:nth-child(3){border-left:0; padding-left:0}
    .navlinks a.l{display:none}
    section{padding:48px 0}
    .contact{padding:32px 22px}
  }
  @media (max-width:560px){ .own{grid-template-columns:1fr} .own .c{border-left:0!important; padding-left:0!important} }
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    /* must out-specify .js-anim .reveal above, hence the same two-class form */
    .js-anim .reveal{opacity:1; transform:none; transition:none}
    .conn i{animation:none}
  }

/* ── P-010: multi-page components ──────────────────────────────────────────── */

/* current-page marker in the nav */
.navlinks a.l[aria-current="page"]{color:var(--text)}
.navlinks a.l[aria-current="page"]::after{content:""; display:block; height:1px; margin-top:4px;
  background:var(--brass)}

/* readiness stage chips */
.stages{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px}
.stage-chip{font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase;
  padding:7px 13px; border-radius:999px; border:1px solid var(--line2); color:var(--muted)}
.stage-chip.adhoc{border-color:color-mix(in srgb,var(--cool) 55%,transparent); color:#33697a}
.stage-chip.repeat{border-color:color-mix(in srgb,var(--brass) 40%,transparent); color:var(--brass-ink)}
.stage-chip.system{border-color:var(--brass); color:var(--brass-bright);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--brass) 20%,transparent)}

/* nine-dimension grid */
.dims{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:26px;
  background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden}
.dim{background:var(--bg2); padding:20px 18px}
.dim .dn{font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; color:var(--brass-ink)}
.dim h4{font-size:.98rem; margin:8px 0 6px}
.dim p{color:var(--muted); font-size:.85rem}

/* wider numbered list for prose steps */
.ex-steps.wide li{padding:16px 0 16px 46px; font-size:.95rem; max-width:80ch}
.ex-steps.wide li::before{top:16px}
.ex-steps.wide b{color:var(--text); font-weight:640}

/* stage / gate table */
.stagetable{margin-top:26px; border-top:1px solid var(--line)}
.strow{display:grid; grid-template-columns:44px minmax(0,1fr) minmax(0,1.35fr); gap:20px;
  padding:20px 0; border-bottom:1px solid var(--line)}
.strow.head{padding:12px 0; border-bottom:1px solid var(--line2)}
.strow.head div{font-family:var(--mono); font-size:.64rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint)}
.strow .sn{font-family:var(--mono); font-size:.72rem; color:var(--brass-ink); padding-top:2px}
.strow .sname b{display:block; font-size:1rem; letter-spacing:-.012em}
.strow .sname span{display:block; margin-top:5px; color:var(--muted); font-size:.86rem}
.strow .sgate{color:var(--muted); font-size:.88rem}
.strow .sgate b{color:var(--text); font-weight:640}

@media (max-width:900px){
  .dims{grid-template-columns:1fr 1fr}
  .strow{grid-template-columns:34px 1fr; gap:12px}
  .strow .sgate{grid-column:2; padding-top:10px; border-top:1px solid var(--line)}
  .strow.head .sgate{display:none}
}
@media (max-width:560px){ .dims{grid-template-columns:1fr} }

/* week-by-week engagement table */
.wk{margin-top:26px; border-top:1px solid var(--line)}
.wkrow{display:grid; grid-template-columns:64px minmax(0,1.6fr) minmax(0,1fr); gap:20px;
  padding:20px 0; border-bottom:1px solid var(--line)}
.wkrow.head{padding:12px 0; border-bottom:1px solid var(--line2)}
.wkrow.head div{font-family:var(--mono); font-size:.64rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint)}
.wkrow .wn{font-family:var(--mono); font-size:.78rem; color:var(--brass-ink); padding-top:2px}
.wkrow .wwhat b{display:block; font-size1rem; font-size:1rem; letter-spacing:-.012em}
.wkrow .wwhat span{display:block; margin-top:5px; color:var(--muted); font-size:.88rem}
.wkrow .wyou{color:var(--muted); font-size:.86rem; padding-top:2px}
/* decision points read as a break in the run, not another week */
.wkrow.gate{background:linear-gradient(90deg,color-mix(in srgb,var(--brass) 7%,transparent),transparent 70%);
  border-left:2px solid color-mix(in srgb,var(--brass) 55%,transparent); padding-left:14px}
.wkrow.gate .wn{color:var(--brass-bright); font-size:1rem}

/* plain-language explainer block — used where a page introduces a named thing */
.plain{margin-top:20px; padding:18px 20px; border-radius:12px;
  border:1px solid var(--line2); background:color-mix(in srgb,var(--surface) 70%,transparent);
  max-width:74ch}
.plain .pl{font-family:var(--mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brass-ink); display:block; margin-bottom:8px}
.plain p{color:var(--text); font-size:.98rem}
.plain p + p{margin-top:8px; color:var(--muted); font-size:.92rem}

@media (max-width:900px){
  .wkrow{grid-template-columns:48px 1fr; gap:12px}
  .wkrow .wyou{grid-column:2; padding-top:10px; border-top:1px solid var(--line)}
  .wkrow.head .wyou{display:none}
}

/* ── Illustrative deliverable mockups ─────────────────────────────────────────
   Drawn in CSS on purpose: the CSP forbids remote images, and a screenshot of a
   real client's CRM could never be published. These show the SHAPE of an
   artifact — no client names, no outcome claims, no invented benchmarks. */
.arts{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:24px}
.art{margin:0; display:flex; flex-direction:column}
.art .scr{background:var(--surface); border:1px solid var(--line); border-radius:12px;
  overflow:hidden; box-shadow:0 12px 28px -24px rgba(28,34,41,.34); flex:1}
.art .scrbar{display:flex; align-items:center; gap:6px; padding:9px 12px;
  background:var(--bg2); border-bottom:1px solid var(--line)}
.art .scrbar i{width:7px; height:7px; border-radius:50%; background:var(--line2); flex:0 0 auto}
.art .scrbar span{margin-left:6px; font-family:var(--mono); font-size:.58rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint)}
/* Per-card, not per-section. The section disclaimer scrolls out of view on mobile
   before a reader reaches cards two and three, so each mock carries its own. */
.art .scrbar .ill{margin-left:auto; color:var(--brass-ink); letter-spacing:.06em}
.art .rows{padding:4px 12px 10px}
.art .r{display:grid; grid-template-columns:22px 1fr auto; gap:9px; align-items:center;
  padding:9px 0; border-top:1px solid var(--line); font-size:.78rem; color:var(--muted)}
.art .r:first-child{border-top:0}
.art .r .tag{font-family:var(--mono); font-size:.6rem; text-align:center; border-radius:4px;
  padding:2px 0; color:var(--muted); background:var(--surface3)}
.art .r .tag.hi{color:#fff; background:var(--brass-deep)}
/* Qualitative bands, not a score. A number here would imply a defined scoring
   model, and there isn't one to point at. */
.art .r.fit{grid-template-columns:58px 1fr}
.art .r .tag.w{font-size:.56rem; letter-spacing:.04em; text-transform:uppercase; padding:3px 0}
.art .r b{font-family:var(--mono); font-size:.68rem; color:var(--text); font-weight:600}
.art .r .due{font-family:var(--mono); font-size:.6rem; color:var(--brass-ink)}
/* pipeline: four stages as labelled bars */
.art .pipe{padding:12px}
.art .pipe .s{display:grid; grid-template-columns:92px 1fr 22px; gap:8px; align-items:center;
  font-size:.72rem; color:var(--muted); margin-bottom:9px}
.art .pipe .s:last-child{margin-bottom:2px}
.art .pipe .bar{height:7px; border-radius:4px; background:var(--surface3); overflow:hidden}
.art .pipe .bar i{display:block; height:100%; background:var(--brass); border-radius:4px}
.art .pipe .s b{font-family:var(--mono); font-size:.66rem; color:var(--text); text-align:right}
.art figcaption{margin-top:11px; font-size:.84rem; color:var(--muted)}
.art figcaption b{color:var(--text); font-weight:640; display:block; margin-bottom:3px; font-size:.92rem}
@media (max-width:900px){ .arts{grid-template-columns:1fr; gap:24px} }